@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
@layer cinder.components {
  /* ========================================
 * SIDEBAR
 * Layout-level vertical navigation container. Combines a nav region and an
 * optional footer. Delegates the actual list to
 * `side-navigation.svelte`. Below the default breakpoint (~767px) the consuming
 * component swaps the inline <aside> for a <Drawer>; this stylesheet covers
 * both surfaces because the inner regions render the same elements.
 * ======================================== */

  .cinder-sidebar {
    display: flex;
    flex-direction: column;
    inline-size: 16rem;
    /* Fill the parent's cross-axis. `align-self: stretch` makes a flex item
     fill its parent's cross-axis size. An explicit `block-size` here would
     opt out of stretch behavior, so we deliberately leave it off. */
    align-self: stretch;
    background: var(--cinder-surface);
    border-inline-end: 1px solid var(--cinder-border);
    overflow: hidden;
  }

  /* The mobile surface is rendered inside <Drawer>, which already paints its
 * own surface and borders. Don't double up. */
  .cinder-sidebar.cinder-sidebar--mobile {
    inline-size: 100%;
    block-size: 100%;
    background: transparent;
    border-inline-end: none;
  }

  @media (max-width: 47.99rem) {
    .cinder-sidebar--desktop[data-cinder-sidebar-mobile-breakpoint='47.99rem'] {
      display: flex;
      inline-size: 100%;
      block-size: 100%;
      background: transparent;
      border-inline-end: none;
    }

    .cinder-sidebar--desktop[data-cinder-sidebar-mobile-breakpoint='47.99rem'][data-cinder-ssr-mobile-fallback] {
      display: none;
    }

    .cinder-sidebar--desktop[data-cinder-sidebar-mobile-breakpoint='47.99rem'][data-cinder-collapsed] {
      display: none;
    }
  }

  /* Collapsed (icon-only) mode applies to the inline <aside>. The mobile drawer
 * surface ignores `data-cinder-collapsed` for sizing because drawer-closed is
 * the collapsed state on mobile. */
  .cinder-sidebar[data-cinder-collapsed]:not(.cinder-sidebar--mobile) {
    inline-size: 4rem;
  }

  .cinder-sidebar__nav {
    flex: 1;
    overflow-y: auto;
    padding-block: var(--cinder-space-3);
    padding-inline: var(--cinder-space-2);
    display: flex;
    flex-direction: column;
    gap: var(--cinder-space-2);
  }

  .cinder-sidebar__footer {
    /* margin-block-start: auto pins the footer to the bottom of the column independent
     * of siblings — so it stays bottom-aligned even when the optional nav (which carried
     * flex: 1) is omitted. */
    margin-block-start: auto;
    padding-block: var(--cinder-space-3);
    padding-inline: var(--cinder-space-3);
    border-block-start: 1px solid var(--cinder-border-muted);
    flex-shrink: 0;
  }

  /* ----------------------------------------
 * Collapsed (icon-only) treatment for descendant items.
 *
 * Decorative chrome (group badge, chevron, panel) is hidden with `display:
 * none` because it carries no accessible name.
 *
 * Label-bearing text is hidden using the visually-hidden technique rather
 * than `display: none` so the accessible name of each focusable element is
 * preserved in the accessibility tree. The visual result is icon-only, but a
 * screen-reader user still hears the section header or item text when focus
 * lands on the trigger or link.
 * ---------------------------------------- */

  .cinder-sidebar[data-cinder-collapsed] .cinder-side-navigation-group__badge,
  .cinder-sidebar[data-cinder-collapsed] .cinder-side-navigation-group__chevron,
  .cinder-sidebar[data-cinder-collapsed] .cinder-side-navigation-group__panel {
    display: none;
  }

  .cinder-sidebar[data-cinder-collapsed] .cinder-side-navigation-group__trigger {
    justify-content: center;
    padding-inline: var(--cinder-space-2);
  }

  .cinder-sidebar[data-cinder-collapsed] .cinder-side-navigation-group__label,
  .cinder-sidebar[data-cinder-collapsed]
    .cinder-side-navigation
    a.cinder-navigation-item
    > :not([aria-hidden='true']):not(svg):not(img),
  .cinder-sidebar[data-cinder-collapsed]
    .cinder-side-navigation
    button.cinder-navigation-item
    > :not([aria-hidden='true']):not(svg):not(img),
  .cinder-sidebar[data-cinder-collapsed]
    .cinder-sidebar__footer
    a.cinder-navigation-item
    > :not([aria-hidden='true']):not(svg):not(img),
  .cinder-sidebar[data-cinder-collapsed]
    .cinder-sidebar__footer
    button.cinder-navigation-item
    > :not([aria-hidden='true']):not(svg):not(img) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* Leaf items in collapsed mode collapse to icon-only width. `font-size: 0`
 * covers bare text children that cannot be selected directly; element
 * children are additionally visually hidden above. The DOM text remains
 * available for accessible-name computation. */
  .cinder-sidebar[data-cinder-collapsed] .cinder-side-navigation a.cinder-navigation-item,
  .cinder-sidebar[data-cinder-collapsed] .cinder-side-navigation button.cinder-navigation-item,
  .cinder-sidebar[data-cinder-collapsed] .cinder-sidebar__footer a.cinder-navigation-item,
  .cinder-sidebar[data-cinder-collapsed] .cinder-sidebar__footer button.cinder-navigation-item {
    justify-content: center;
    padding-inline: var(--cinder-space-2);
    gap: 0;
    font-size: 0;
  }

  .cinder-sidebar[data-cinder-collapsed] .cinder-side-navigation a.cinder-navigation-item > svg,
  .cinder-sidebar[data-cinder-collapsed]
    .cinder-side-navigation
    button.cinder-navigation-item
    > svg,
  .cinder-sidebar[data-cinder-collapsed] .cinder-sidebar__footer a.cinder-navigation-item > svg,
  .cinder-sidebar[data-cinder-collapsed]
    .cinder-sidebar__footer
    button.cinder-navigation-item
    > svg,
  .cinder-sidebar[data-cinder-collapsed] .cinder-side-navigation a.cinder-navigation-item > img,
  .cinder-sidebar[data-cinder-collapsed]
    .cinder-side-navigation
    button.cinder-navigation-item
    > img,
  .cinder-sidebar[data-cinder-collapsed] .cinder-sidebar__footer a.cinder-navigation-item > img,
  .cinder-sidebar[data-cinder-collapsed]
    .cinder-sidebar__footer
    button.cinder-navigation-item
    > img,
  .cinder-sidebar[data-cinder-collapsed]
    .cinder-side-navigation
    a.cinder-navigation-item
    > [aria-hidden='true'],
  .cinder-sidebar[data-cinder-collapsed]
    .cinder-side-navigation
    button.cinder-navigation-item
    > [aria-hidden='true'],
  .cinder-sidebar[data-cinder-collapsed]
    .cinder-sidebar__footer
    a.cinder-navigation-item
    > [aria-hidden='true'],
  .cinder-sidebar[data-cinder-collapsed]
    .cinder-sidebar__footer
    button.cinder-navigation-item
    > [aria-hidden='true'] {
    flex-shrink: 0;
    font-size: var(--cinder-text-sm);
  }
}