styles.css

@reference "#reference.css";

/*
  CSS custom properties required by this module — define on :root or an ancestor:

    --sidebar-width-folded    Width when collapsed  (e.g. 4rem)
    --sidebar-width-expanded  Width when open       (e.g. 15rem)
*/

/* ---------------------------------------------------------------------------
   SidebarRoot — inner content wrapper (hosts Header / Body / Footer)
   --------------------------------------------------------------------------- */

.opal-sidebar-root__inner {
  @apply flex flex-col min-h-0 h-full;
}

/* ---------------------------------------------------------------------------
   SidebarRoot — desktop column
   --------------------------------------------------------------------------- */

.opal-sidebar-root__column {
  @apply h-screen flex flex-col bg-background-tint-02 pb-2 shrink-0;
  width: var(--sidebar-width-expanded);
  transition: width 200ms ease-in-out;
}
.opal-sidebar-root__column[data-folded="true"] {
  width: var(--sidebar-width-folded);
}

/* ---------------------------------------------------------------------------
   SidebarRoot — mobile / small overlays
   --------------------------------------------------------------------------- */

/* Shared visual column styles for overlaid sidebar */
.opal-sidebar-root__overlay {
  @apply flex flex-col bg-background-tint-02 pb-2;
  width: var(--sidebar-width-expanded);
  transition: width 200ms ease-in-out;
}
.opal-sidebar-root__overlay[data-folded="true"] {
  width: var(--sidebar-width-folded);
}

/* Mobile: full-height overlay that slides in/out */
.opal-sidebar-root__overlay[data-variant="mobile"] {
  @apply fixed inset-y-0 left-0 z-50 transition-transform duration-200;
}
.opal-sidebar-root__overlay[data-variant="mobile"][data-folded="true"] {
  @apply -translate-x-full;
}
.opal-sidebar-root__overlay[data-variant="mobile"][data-folded="false"] {
  @apply translate-x-0;
}

/* Small: fixed overlay (spacer holds width in the layout flow) */
.opal-sidebar-root__overlay[data-variant="small"] {
  @apply fixed inset-y-0 left-0 z-50;
}

/* Spacer that reserves the folded width in the flex row on small screens */
.opal-sidebar-root__spacer {
  @apply shrink-0;
  width: var(--sidebar-width-folded);
}

/* Shared backdrop */
.opal-sidebar-root__backdrop {
  @apply fixed inset-0 z-40 backdrop-blur-03 transition-opacity duration-200;
}
.opal-sidebar-root__backdrop[data-variant="mobile"] {
  @apply bg-mask-03;
}
.opal-sidebar-root__backdrop[data-folded="true"] {
  @apply opacity-0 pointer-events-none;
}
.opal-sidebar-root__backdrop[data-folded="false"] {
  @apply opacity-100 pointer-events-auto;
}

/* ---------------------------------------------------------------------------
   SidebarHeader — topbar row (logo + fold button) + optional pinned content
   --------------------------------------------------------------------------- */

.opal-sidebar-header {
  @apply flex flex-col gap-4;
}

.opal-sidebar-header__topbar {
  @apply pt-3 px-2;
}

.opal-sidebar-header__topbar-inner {
  @apply flex flex-row justify-between items-start px-1 w-full;
}

.opal-sidebar-header__content {
  @apply px-2;
}

/* Folded logo/unfold button: one control, two faces. The logo shows at rest and
   the fold icon replaces it while the sidebar is hovered or the button holds
   keyboard focus — pointerless input keeps the logo, which is clickable either
   way. Sized by the caller so the swap never changes the button's footprint. */
.opal-sidebar-header__logo-swap {
  @apply flex items-center justify-center;
}

.opal-sidebar-header__logo-rest {
  display: flex;
}
.opal-sidebar-header__logo-fold {
  display: none;
}

.opal-sidebar-root__overlay:hover .opal-sidebar-header__logo-rest,
.opal-sidebar-root__column:hover .opal-sidebar-header__logo-rest,
.opal-sidebar-header__topbar-inner:has(:focus-visible)
  .opal-sidebar-header__logo-rest {
  display: none;
}
.opal-sidebar-root__overlay:hover .opal-sidebar-header__logo-fold,
.opal-sidebar-root__column:hover .opal-sidebar-header__logo-fold,
.opal-sidebar-header__topbar-inner:has(:focus-visible)
  .opal-sidebar-header__logo-fold {
  display: flex;
}

/* ---------------------------------------------------------------------------
   SidebarFooter
   --------------------------------------------------------------------------- */

.opal-sidebar-footer {
  @apply pt-4 px-2;
}

/* ---------------------------------------------------------------------------
   SidebarBody
   --------------------------------------------------------------------------- */

/* Applied to the ShadowDiv wrapper, which provides positioning and column flow */
.opal-sidebar-body {
  @apply flex-1;
}

/* Applied to the ShadowDiv scroll container, which provides overflow-y-auto.
   Thin themed scrollbar keeps position/drag affordance without the default bar. */
.opal-sidebar-body__scroll {
  @apply flex-1 min-h-0 flex flex-col;
  scrollbar-width: thin;
  scrollbar-color: var(--border-02) transparent;
}

.opal-sidebar-body__content {
  @apply flex-1 flex flex-col px-2;
}
.opal-sidebar-root__inner[data-folded="true"] .opal-sidebar-body__content {
  @apply hidden;
}

.opal-sidebar-body__spacer {
  min-height: 2rem;
}

/* ---------------------------------------------------------------------------
   SidebarSection
   --------------------------------------------------------------------------- */

.opal-sidebar-section__header {
  @apply pt-3 pl-2 pr-1 flex flex-row justify-between items-center;
}

.opal-sidebar-section__title {
  @apply flex px-0.5 py-1.5;
}