/* components/dropdown/dropdown.css — Dropdown (doc, Componentes > Dropdown). Se carga después de style.css. */
@layer ms.system, ms.theme, ms.attributes;

@layer ms.system {
  /* Alias: valor por defecto; un Tema lo cambia en ms.theme */
  :root {
    --ms-dropdownAdapt: var(--ms-layoutSpace_medium);
    --ms-dropdownAdaptMode: panel;
  }

  /* Dropdown: Drop Panel con ítems de menú */
  ms-dropdown { display: inline-block; }
  ms-dropdown [data-ms-slot="menu"] > :is(button, a) {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: var(--ms-inputGap);
    inline-size: 100%;
    margin: 0;
    padding: var(--_ms-dropPanelOptionPaddingY) var(--_ms-dropPanelOptionPaddingX);
    border: 0;
    background: transparent;
    color: inherit;
    text-align: start;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    font-family: var(--ms-dropPanelOptionTextStyle_family); font-size: var(--ms-dropPanelOptionTextStyle_size); line-height: var(--ms-dropPanelOptionTextStyle_lineHeight); font-weight: var(--ms-dropPanelOptionTextStyle_weight);
  }
  ms-dropdown [data-ms-slot="menu"] > :is(button, a) > [data-ms-slot="meta"] { margin-inline-start: auto; color: color-mix(in oklab, var(--ms-color_content) var(--ms-opacityRole_muted), transparent); }
  ms-dropdown [data-ms-slot="menu"] > :is(button, a)[data-ms-scheme] { color: var(--ms-color_mainContent); }
  ms-dropdown [data-ms-slot="menu"] > :is(button, a)[data-ms-scheme] > .ms-icon { color: var(--ms-color_mainContent); }
  ms-dropdown [data-ms-slot="menu"] > :is(button, a):is(:disabled, [aria-disabled="true"]) { opacity: var(--ms-opacityRole_disabled); cursor: not-allowed; background-image: none; }
  ms-dropdown [data-ms-slot="menu"] > hr { margin: var(--ms-spacing_4) 0; border: 0; border-block-start: var(--ms-dividerWidth) solid var(--ms-color_border); }
  ms-dropdown [data-ms-slot="menu"] > [data-ms-slot="groupLabel"] {
    margin: 0;
    padding: var(--_ms-dropPanelOptionPaddingY) var(--_ms-dropPanelOptionPaddingX) var(--ms-spacing_4);
    color: inherit;
    font-family: var(--ms-fieldLabelTextStyle_family); font-size: var(--ms-fieldLabelTextStyle_size); line-height: var(--ms-fieldLabelTextStyle_lineHeight); font-weight: var(--ms-fieldLabelTextStyle_weight);
  }
  ms-dropdown > [data-ms-slot="trigger"][aria-expanded="true"] > [data-ms-icon="chevronDown"] { --ms-iconImage: var(--ms-icon_chevronUp); }

  /* Interactions (doc, Interactions > Alias de componente): su variante de action por defecto, después de su estilo */
  /* @generated interactions:component — node designSystem/interactions.js. No se edita a mano. */
  /* dropdownItemAction: check */
  ms-dropdown [data-ms-slot="menu"] > :is(button, a) { position: relative; isolation: isolate; --_ms-shadowColor: var(--ms-effectShadowColor_neutral); --_ms-actionRestShadow: none; background: transparent; --_ms-actionColor: var(--ms-color_content); color: var(--_ms-actionColor); box-shadow: var(--_ms-actionRestShadow); transition: box-shadow var(--ms-motionDuration_fast) var(--ms-motionBezier_ease); }
  ms-dropdown [data-ms-slot="menu"] > :is(button, a)::before { content: ""; position: absolute; inset: var(--_ms-actionInset, 0); z-index: -1; border-radius: inherit; pointer-events: none; background: var(--_ms-stateBase, var(--ms-color_mantle)); opacity: 0; transition: opacity var(--ms-motionDuration_fast) var(--ms-motionBezier_ease), filter var(--ms-motionDuration_fast) var(--ms-motionBezier_ease), background-color var(--ms-motionDuration_fast) var(--ms-motionBezier_ease); }
  ms-dropdown [data-ms-slot="menu"] > :is(button, a):is(:disabled, [aria-disabled="true"]) { opacity: var(--ms-opacityRole_disabled); cursor: not-allowed; }
  ms-dropdown [data-ms-slot="menu"] > :is(button, a):is(:hover, [data-ms-active]):not(:disabled, [aria-disabled="true"], [aria-selected="true"], [aria-current]:not([aria-current="false"], [aria-current="date"]), [aria-pressed="true"], [aria-checked="true"], :checked, :indeterminate)::before { opacity: 1; }
  ms-dropdown [data-ms-slot="menu"] > :is(button, a):active:not(:disabled, [aria-disabled="true"], [aria-selected="true"], [aria-current]:not([aria-current="false"], [aria-current="date"]), [aria-pressed="true"], [aria-checked="true"], :checked, :indeterminate)::before { opacity: 1; background: var(--ms-color_surface); }
  ms-dropdown [data-ms-slot="menu"] > :is(button, a):active:not(:disabled, [aria-disabled="true"], [aria-selected="true"], [aria-current]:not([aria-current="false"], [aria-current="date"]), [aria-pressed="true"], [aria-checked="true"], :checked, :indeterminate) { color: var(--ms-color_onSurface); }
  ms-dropdown [data-ms-slot="menu"] > :is(button, a):is([aria-selected="true"], [aria-current]:not([aria-current="false"], [aria-current="date"]), [aria-pressed="true"], [aria-checked="true"], :checked, :indeterminate)::after { content: ""; flex: none; margin-inline-start: auto; inline-size: var(--ms-iconSize_m); block-size: var(--ms-iconSize_m); background-color: var(--ms-color_mainContent); mask-image: var(--ms-icon_check); mask-size: contain; mask-position: center; mask-repeat: no-repeat; forced-color-adjust: none; }
  ms-dropdown [data-ms-slot="menu"] > :is(button, a):is([aria-selected="true"], [aria-current]:not([aria-current="false"], [aria-current="date"]), [aria-pressed="true"], [aria-checked="true"], :checked, :indeterminate)[data-ms-active]::before { opacity: 1; }
  /* @end interactions:component */
}