/*

Sidebar

@description
  The sidebar is a top-level layout class that knows when two items should be next to one another or stacked based on the device width.
  It automatically aligns items in the vertical center, so top-alignment needs an extra utility class of "_align:flex-start"
  - class-based only to prevent FUOC.

@reference
  - https://every-layout.dev/layouts/sidebar/

@example
  ```
    <div class="with-sidebar">
      <div><!-- the side element --></div>
      <div><!-- the main content --></div>
    </div>
  ```

@variants
  .sidebar-with-input - ?
  ._gap:0 - removes space between elements
  ._gap:s2 - increases gap space
  ._width:medium - Creates a "medium" width of the main content, at 10rem
  ._align:stretch - Stretchs items out to
  ._align:flex-start - Aligns items at the top
  ._sidebar-width:0 - decreases the sidebar width to only take up as much space
*/

.with-sidebar, .sidebar {
  --sidebar-gap: var(--s-1);
  --sidebar-width: 20rem;
  --sidebar-inline-size: 50%;
  --sidebar-align: center;
  --flex-grow: 999;

  display: flex;
  flex-wrap: wrap;
  gap: var(--sidebar-gap);
  align-items: var(--sidebar-align);
  box-sizing: border-box;
}

.with-sidebar > :first-child, .sidebar > :first-child {
  /* ↓ The width when the sidebar _is_ a sidebar */
  flex-basis: var(--sidebar-width);
  flex-grow: 1;
}

.with-sidebar > :last-child, .sidebar > :last-child {
  flex-basis: 0;
  flex-grow: var(--flex-grow);
  min-inline-size: var(--sidebar-inline-size);
}

/* utility classes */
.with-sidebar._gap\:0, .sidebar._gap\:0 {
  --sidebar-gap: 0;
}
.sidebar._gap\:s2 {
  --sidebar-gap: var(--s2);
}

.sidebar._width\:medium {
  --sidebar-width: 10rem;
}

.sidebar._align\:stretch {
  --sidebar-align: stretch;
}

.sidebar.sidebar-with-input {
  --sidebar-width: 50%;
}

.sidebar.sidebar-with-input > :last-child {
  min-inline-size: 30ch;
  box-sizing: border-box;
}

.sidebar._align\:flex-start {
  --sidebar-align: flex-start;
}

.sidebar._sidebar-width\:0 {
  --sidebar-width: 0;
}
.sidebar._sidebar-half {
  --sidebar-width: auto;
  --flex-grow: 1;
}