/* 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.
 */

.section-tabs {
  /* White, so the bar stands apart from the page's off-white background. */
  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);
  }
}