/* components/drop-panel/drop-panel.css — Drop Panel (doc, Componentes > Drop Panel). 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-dropPanelAdapt: var(--ms-layoutSpace_medium);
    --ms-dropPanelAdaptMode: panel;
    --ms-dropPanelRadius: var(--ms-radiusRole_floating);
    --ms-dropPanelBorderWidth: var(--ms-strokeRole_outline);
    --ms-dropPanelPaddingY: var(--ms-spacingRole_cell);
    --_ms-dropPanelOptionPaddingX: var(--ms-spacing_16);
    --_ms-dropPanelOptionPaddingY: var(--ms-spacing_12);
    --ms-dropPanelOptionTextStyle_family: var(--ms-textStyle_bodyL_family);
    --ms-dropPanelOptionTextStyle_size: var(--ms-textStyle_bodyL_size);
    --ms-dropPanelOptionTextStyle_lineHeight: var(--ms-textStyle_bodyL_lineHeight);
    --ms-dropPanelOptionTextStyle_weight: var(--ms-textStyle_bodyL_weight);
    --ms-dropPanelShadow_near: var(--ms-shadowRole_floating_near);
    --ms-dropPanelShadow_far: var(--ms-shadowRole_floating_far);
    --ms-dropPanelShadow_color: var(--ms-shadowRole_floating_color);
    --ms-dropPanelShadow_neon: var(--ms-shadowRole_floating_neon);
    --ms-dropPanelPadding: var(--ms-spacingRole_container);
  }

  /* Drop Panel: superficie flotante en la capa superior (popover) */
  .ms-drop-panel {
    position: fixed;
    inset: auto;
    box-sizing: border-box;
    margin: var(--ms-spacing_4) 0;
    padding: var(--ms-dropPanelPaddingY) 0;
    overflow-y: auto;
    border: var(--ms-dropPanelBorderWidth) solid var(--ms-color_border);
    border-radius: var(--ms-dropPanelRadius);
    background: var(--ms-color_canvas);
    color: var(--ms-color_content);
    --_ms-shadowColor: color-mix(in oklab, color-mix(in oklab, var(--ms-effectShadowColor_neutral), var(--ms-effectShadowColor_color) calc(var(--ms-dropPanelShadow_color) * 100%)), var(--ms-effectNeonColor_color) calc(var(--ms-dropPanelShadow_neon) * 100%));
    box-shadow: var(--ms-dropPanelShadow_near) var(--_ms-shadowColor), var(--ms-dropPanelShadow_far) var(--_ms-shadowColor);
  }
  .ms-drop-panel [role="option"] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ms-inputGap);
    padding: var(--_ms-dropPanelOptionPaddingY) var(--_ms-dropPanelOptionPaddingX);
    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-drop-panel [role="option"][aria-disabled="true"] { cursor: default; opacity: var(--ms-opacityRole_disabled); background-image: none; }
  .ms-drop-panel [data-ms-slot="groupLabel"] {
    padding: var(--_ms-dropPanelOptionPaddingY) var(--_ms-dropPanelOptionPaddingX) var(--ms-spacing_4);
    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-drop-panel [data-ms-slot="empty"] {
    padding: var(--_ms-dropPanelOptionPaddingY) var(--_ms-dropPanelOptionPaddingX);
    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-drop-panel mark { background: none; color: inherit; font-weight: var(--ms-typographyWeight_700); }

  /* Drop Panel content: contenido libre sobre color_canvas */
  .ms-drop-panel[data-ms-variant="content"] { padding: var(--ms-dropPanelPadding); background: var(--ms-color_canvas); color: var(--ms-color_content); }

  /* Adaptación (doc, Componentes > Adaptación) */
  /* Drop Panel y Dropdown: sheet — hoja que sube desde abajo; Date Picker: pantalla completa */
  .ms-drop-panel[data-ms-adapt="sheet"] {
    inset: auto 0 0 0; margin: 0; inline-size: auto; min-inline-size: 0; max-inline-size: none;
    max-block-size: calc(100dvh - var(--ms-spacing_96));
    border-end-start-radius: 0; border-end-end-radius: 0;
  }
  .ms-drop-panel[data-ms-adapt="fullscreen"] { inset: 0; margin: 0; inline-size: auto; max-inline-size: none; max-block-size: none; border-radius: 0; }

  /* 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. */
  /* dropPanelOptionAction: check */
  .ms-drop-panel [role="option"] { 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-drop-panel [role="option"]::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-drop-panel [role="option"]:is(:disabled, [aria-disabled="true"]) { opacity: var(--ms-opacityRole_disabled); cursor: not-allowed; }
  .ms-drop-panel [role="option"]: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-drop-panel [role="option"]: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-drop-panel [role="option"]: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-drop-panel [role="option"]: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-drop-panel [role="option"]: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 */
}