/* components/nav-menu/nav-menu.css — Nav menu (doc, Componentes > Nav menu). 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-navMenuItemTextStyle_family: var(--ms-textStyle_bodyS_family);
    --ms-navMenuItemTextStyle_size: var(--ms-textStyle_bodyS_size);
    --ms-navMenuItemTextStyle_lineHeight: var(--ms-textStyle_bodyS_lineHeight);
    --ms-navMenuItemTextStyle_weight: var(--ms-textStyle_bodyS_weight);
    --ms-navMenuGroupTextStyle_family: var(--ms-textStyle_labelM_family);
    --ms-navMenuGroupTextStyle_size: var(--ms-textStyle_labelM_size);
    --ms-navMenuGroupTextStyle_lineHeight: var(--ms-textStyle_labelM_lineHeight);
    --ms-navMenuGroupTextStyle_weight: var(--ms-textStyle_labelM_weight);
    --ms-navMenuItemRadius: var(--ms-radiusRole_action);
    --_ms-navMenuItemPaddingX: var(--ms-spacing_12);
    --_ms-navMenuItemPaddingY: var(--ms-spacing_8);
    --ms-navMenuItemGap: var(--ms-spacingRole_item);
    --ms-navMenuGroupGap: var(--ms-spacingRole_group);
    --_ms-navMenuIndent: var(--ms-spacing_16);
    --ms-navMenuIndicatorWidth: var(--ms-strokeRole_indicator);
  }

  /* Nav menu: grupos (título + lista), ítems y subítems en <details> */
  .ms-nav-menu { display: flex; flex-direction: column; }
  .ms-nav-menu :where(ul) {
    display: flex;
    flex-direction: column;
    gap: var(--ms-navMenuItemGap);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .ms-nav-menu :where(li) { margin: 0; }
  .ms-nav-menu :where(details > ul) {
    margin-block-start: var(--ms-navMenuItemGap);
    padding-inline-start: var(--_ms-navMenuIndent);
  }
  .ms-nav-menu > :where(h2, h3, h4, h5, h6) {
    margin: 0;
    padding: var(--_ms-navMenuItemPaddingY) var(--_ms-navMenuItemPaddingX);
    color: var(--ms-color_content);
    font-family: var(--ms-navMenuGroupTextStyle_family); font-size: var(--ms-navMenuGroupTextStyle_size); line-height: var(--ms-navMenuGroupTextStyle_lineHeight); font-weight: var(--ms-navMenuGroupTextStyle_weight);
  }
  .ms-nav-menu > * + :where(h2, h3, h4, h5, h6) { margin-block-start: var(--ms-navMenuGroupGap); }
  /* Título de grupo o ítem con un Icon al inicio: es lo que se ve en rail */
  .ms-nav-menu :where(h2, h3, h4, h5, h6, a):has(> .ms-icon) { display: flex; align-items: center; gap: var(--ms-spacing_8); }
  .ms-nav-menu :where(a, summary) {
    position: relative;
    display: block;
    border-radius: var(--ms-navMenuItemRadius);
    padding: var(--_ms-navMenuItemPaddingY) var(--_ms-navMenuItemPaddingX);
    color: var(--ms-color_content);
    text-decoration: none;
    cursor: pointer;
    font-family: var(--ms-navMenuItemTextStyle_family); font-size: var(--ms-navMenuItemTextStyle_size); line-height: var(--ms-navMenuItemTextStyle_lineHeight); font-weight: var(--ms-navMenuItemTextStyle_weight);
  }
  /* Un ítem con subítems muestra al final icon_chevronRight cerrado e
     icon_chevronDown abierto */
  .ms-nav-menu :where(summary) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ms-spacing_8);
    list-style: none;
  }
  .ms-nav-menu :where(summary)::-webkit-details-marker { display: none; }
  .ms-nav-menu :where(summary)::after {
    content: "";
    flex: none;
    inline-size: var(--ms-iconSize_s);
    block-size: var(--ms-iconSize_s);
    background-color: currentColor;
    mask-image: var(--ms-icon_chevronRight);
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
    forced-color-adjust: none;
  }
  .ms-nav-menu :where(details[open] > summary)::after { mask-image: var(--ms-icon_chevronDown); }
  /* Capa de hover y active, sobre el fondo que tenga el ítem */
  /* Ítem actual: superficie propia e indicador en color_main a su inicio */
  /* Ítem actual: su capa y su texto los pone su variante (selected); su línea, el Componente */
  .ms-nav-menu :where(a[aria-current]:not([aria-current="false"]))::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block: var(--_ms-navMenuItemPaddingY);
    inline-size: var(--ms-navMenuIndicatorWidth);
    border-radius: var(--ms-radius_full);
    background: var(--ms-color_onSurface);   /* va sobre el fondo surface del ítem actual */
  }

  /* 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. */
  /* navMenuItemAction: content */
  .ms-nav-menu :where(a, summary) { 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-nav-menu :where(a, summary)::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-nav-menu :where(a, summary):is(:disabled, [aria-disabled="true"]) { opacity: var(--ms-opacityRole_disabled); cursor: not-allowed; }
  .ms-nav-menu :where(a, summary):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-nav-menu :where(a, summary):is([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-nav-menu :where(a, summary):is([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-nav-menu :where(a, summary):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-nav-menu :where(a, summary):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); }
  /* @end interactions:component */
}