/* Section Tabs
 *
 * The bar naming a section's own pages. css-zero's `tabs` is a segmented control, which the app
 * keeps for filtering content within a page — a section bar is a different control and needs a
 * different look, so the two share no classes.
 *
 * The strip reaches the page's edges while its links stay in the content column, and it sticks to
 * the top of #main's scroll so a section's other pages are always one click away.
 */

.section-tabs {
  position: sticky;
  top: 0;
  z-index: 10;
  /* White, so the bar reads as chrome against the page's off-white canvas and the content scrolls
     out of sight beneath it. */
  background-color: var(--color-surface);
  border-block-end: var(--border) solid var(--color-border-light);
  /* #main pads its children; this one spans the padding and re-pads inside, so its border runs the
     full width of the page. The inset is stock's own #main padding. */
  margin-inline: calc(var(--size-4) * -1);
  padding-inline: var(--size-4);

  > .container {
    display: flex;
    column-gap: var(--size-6); /* 24px — the tabs carry no padding of their own to separate them */
  }
}

.section-tabs__tab {
  /* No side padding, so the current tab's underline is the width of its label. The bar's height is
     the tab's, and the top padding answers the underline so the label sits centred between them. */
  display: inline-flex;
  align-items: center;
  block-size: var(--size-10); /* 40px */
  padding-block-start: var(--border-2);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-subtle);
  border-block-end: var(--border-2) solid transparent;
  margin-block-end: calc(var(--border) * -1); /* Sit the underline over the bar's own border. */

  &:hover {
    color: var(--color-text);
  }

  &[aria-current="page"] {
    color: var(--color-text);
    border-block-end-color: var(--color-primary);
  }
}