/* --sidebar-gap is registered non-inheriting, so it must be set ON the
   .with-sidebar itself; a nested sidebar keeps its own default (--gutter).
   syntax "*" with no initial value, so var() falls back when it is unset. */
@property --sidebar-gap {
  syntax: "*";
  inherits: false;
}

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

/* The sidebar is picked by SOURCE ORDER: the first child, or the last child
   when data-sidebar-style="inverse". */
.with-sidebar > :first-child {
  flex-grow: 1;
  flex-basis: var(--max-sidebar-width, 20rem);
}

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

.with-sidebar[data-sidebar-style="inverse"] > :first-child {
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: var(--min-main-width, 50%);
}

.with-sidebar[data-sidebar-style="inverse"] > :last-child {
  flex-grow: 1;
  flex-basis: var(--max-sidebar-width, 20rem);
  min-inline-size: auto; /* it is the sidebar here; the 50% minimum belongs to main */
}