/* components/sidebar/sidebar.css — Sidebar (doc, Componentes > Sidebar). 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-sidebarRadius: var(--ms-radiusRole_container);
    --ms-sidebarBorderWidth: var(--ms-strokeRole_raised);
    --ms-sidebarPadding: var(--ms-spacingRole_container);
    --ms-sidebarInset: var(--ms-spacingRole_inset);
    --ms-sidebarShadow_near: var(--ms-shadowRole_region_near);
    --ms-sidebarShadow_far: var(--ms-shadowRole_region_far);
    --ms-sidebarShadow_color: var(--ms-shadowRole_region_color);
    --ms-sidebarShadow_neon: var(--ms-shadowRole_region_neon);
  }

  /* Sidebar: un organismo sobre canvas; otro fondo se pide con data-ms-contrast. Cada hijo directo es una sección */
  .ms-sidebar {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background: var(--ms-color_canvas);
    color: var(--ms-color_content);
    border: var(--ms-sidebarBorderWidth) solid var(--ms-color_border);
    border-radius: var(--ms-sidebarRadius);
    --_ms-shadowColor: color-mix(in oklab, color-mix(in oklab, var(--ms-effectShadowColor_neutral), var(--ms-effectShadowColor_color) calc(var(--ms-sidebarShadow_color) * 100%)), var(--ms-effectNeonColor_color) calc(var(--ms-sidebarShadow_neon) * 100%));
    box-shadow: var(--ms-sidebarShadow_near) var(--_ms-shadowColor), var(--ms-sidebarShadow_far) var(--_ms-shadowColor);
  }
  /* Como región de una Pantalla: el alto y la posición los da la Pantalla, sin radio */
  [data-ms-layout-screen] > .ms-sidebar { border-radius: 0; }
  .ms-sidebar > * { flex: none; margin: 0; padding: var(--ms-sidebarPadding); }
  .ms-sidebar > * + * { border-block-start: var(--ms-dividerWidth) solid var(--ms-color_border); }
  /* El contenido, entre encabezado y pie, se desplaza dentro de su sección */
  .ms-sidebar > :where(:not(header, footer)) { flex: 1 1 auto; min-block-size: 0; overflow-y: auto; }
  /* Fijo mientras la página se desplaza, cuando su Disposición lo pone en columnas */
  @container (min-width: 960px) {
    :where([data-ms-layout="twoEqual"], [data-ms-layout="twoAsymmetric"], [data-ms-layout="three"]) > .ms-sidebar {
      position: sticky;
      inset-block-start: var(--ms-sidebarInset);
      align-self: flex-start;
      max-block-size: calc(100dvh - 2 * var(--ms-sidebarInset));
    }
  }
}