/**
 * SIDEBAR PRIMITIVE
 * Based on Every Layout's Sidebar
 * Creates a two-column layout with one fixed-width sidebar and one fluid content area
 * Wraps to vertical stack when container becomes too narrow
 *
 * Default behavior: first child is sidebar (fixed), second child is content (fluid)
 * Uses structural selectors - no custom attributes needed for basic usage
 *
 * Usage:
 * <div class="sidebar">
 *   <div><!-- sidebar (fixed width) --></div>
 *   <div><!-- content (fluid) --></div>
 * </div>
 */

.sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sidebar-gap, var(--s1));
}

/* First child: sidebar with fixed/flexible basis */
.sidebar > *:first-child {
  flex-grow: 1;
  flex-basis: var(--sidebar-w, 20rem);
}

/* Second child: content that takes remaining space */
.sidebar > *:last-child {
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: 50%;
}

/* ========================================
   REVERSE SIDEBAR
 * Sidebar on the right instead of left
 * ======================================== */

.sidebar[data-direction="rtl"] {
  flex-direction: row-reverse;
}

/* ========================================
   DATA ATTRIBUTE VARIANTS
 * For semantic markup where structural order differs from visual order
 * ======================================== */

/* Explicit sidebar/content targeting */
.sidebar > [data-sidebar="fixed"] {
  flex-basis: var(--sidebar-w, 20rem);
  flex-grow: 1;
}

.sidebar > [data-sidebar="fluid"] {
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: 50%;
}

/* ========================================
   STICKY MODULE
 * Fixed positioning companion for sidebar content
 * ======================================== */
.sticky-module {
  position: sticky;
  top: 2rem;
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
}

/* Container queries variant - enable for sticky sidebars */
.sidebar[data-sticky-container="enabled"] {
  container-type: inline-size;
}

/* Disable sticky when container is too narrow */
@container (max-width: 60rem) {
  .sticky-module {
    position: relative;
  }
}

/* ========================================
   WIDTH VARIANTS
 * Different sidebar widths
 * ======================================== */

.sidebar[data-sidebar="narrow"] {
  --sidebar-w: 15rem;
}

.sidebar[data-sidebar="wide"] {
  --sidebar-w: 25rem;
}

.sidebar[data-sidebar="ultra"] {
  --sidebar-w: 30rem;
}