@utility tablist {
  display: flex;
  gap: 0.5lh;
}

@utility tab {
  align-items: start;
  padding: 0.25rlh 0.5rlh;
  text-align: left;

  &[aria-selected] {
    z-index: 2;
  }
}

@utility tabpanels {
  @apply border-scaffold;
  position: relative;
}

@utility tabpanel {
  :where(&) {
    padding: 1rlh;
  }
}

@utility tablist-top {
  --placement: top;
  max-width: 100%;
}

@utility tablist-left {
  --placement: left;
  display: flex;
  flex-flow: column nowrap;

  :where(.tab) {
    align-self: stretch;
    justify-content: left;
  }
}

@utility tablist-right {
  --placement: right;
  order: 2;
  display: flex;
  flex-flow: column nowrap;

  :where(.tab) {
    align-self: stretch;
    justify-content: left;
  }
}

/*********************
 * Variations *
 *********************/
@utility tablist-underline {
  gap: 0;

  /* Structural pseudos wrapped in :where() so static and responsive placement
     compose by source order (see tablist-card-divided for the full rationale). */
  :where(.tab) {
    border-width: 0;
    border-radius: 0;
  }

  &:where(.tablist-top) :where(.tab) {
    border-bottom-width: var(--border-width);
  }

  &:where(.tablist-left) :where(.tab) {
    border-right-width: var(--border-width);
  }

  &:where(.tablist-right) :where(.tab) {
    border-left-width: var(--border-width);
  }

  /* Responsive placement. The class rules above are the static/old-browser
     fallback; these react to the live --placement so a tablist that flips
     placement at a breakpoint moves its underline to the new edge. Each block
     zeroes the other two edges so no stale underline from the static rule
     survives the flip. */
  @container style(--placement: top) {
    :where(.tab) {
      border-bottom-width: var(--border-width);
      border-right-width: 0;
      border-left-width: 0;
    }
  }

  @container style(--placement: left) {
    :where(.tab) {
      border-right-width: var(--border-width);
      border-bottom-width: 0;
      border-left-width: 0;
    }
  }

  @container style(--placement: right) {
    :where(.tab) {
      border-left-width: var(--border-width);
      border-bottom-width: 0;
      border-right-width: 0;
    }
  }
}

@utility tablist-tab {
  :where(.tab) {
    position: relative;
    z-index: 1;
  }

  /* Static/old-browser fallback. Structural selectors wrapped in :where() so
     the container queries below compose by source order. Edge removal uses the
     -width longhand (not the `border-*: 0` shorthand) so it leaves border-style
     intact — otherwise a responsive flip could restore an edge's width while
     its style stayed `none` and nothing would render. */
  &:where(.tablist-top) :where(.tab) {
    top: var(--border-width);
    border-bottom-width: 0;
    border-end-start-radius: 0;
    border-end-end-radius: 0;
  }

  &:where(.tablist-left) :where(.tab) {
    right: var(--border-width);
    border-right-width: 0;
    border-start-end-radius: 0;
    border-end-end-radius: 0;
  }

  &:where(.tablist-right) :where(.tab) {
    left: var(--border-width);
    border-left-width: 0;
    border-start-start-radius: 0;
    border-end-start-radius: 0;
  }

  /* Responsive placement. Each block fully restates the tab treatment for its
     placement: the active offset (other two reset to 0), the removed edge (other
     removable edges restored to --border-width), and the two flattened corners
     (the rest restored to --radius). This makes a breakpoint flip land cleanly
     with no stale offset, missing edge, or squared corner from the static rule. */
  @container style(--placement: top) {
    :where(.tab) {
      top: var(--border-width);
      right: 0;
      left: 0;
      border-bottom-width: 0;
      border-right-width: var(--border-width);
      border-left-width: var(--border-width);
      border-start-start-radius: var(--radius);
      border-start-end-radius: var(--radius);
      border-end-start-radius: 0;
      border-end-end-radius: 0;
    }
  }

  @container style(--placement: left) {
    :where(.tab) {
      right: var(--border-width);
      top: 0;
      left: 0;
      border-right-width: 0;
      border-bottom-width: var(--border-width);
      border-left-width: var(--border-width);
      border-start-start-radius: var(--radius);
      border-end-start-radius: var(--radius);
      border-start-end-radius: 0;
      border-end-end-radius: 0;
    }
  }

  @container style(--placement: right) {
    :where(.tab) {
      left: var(--border-width);
      top: 0;
      right: 0;
      border-left-width: 0;
      border-bottom-width: var(--border-width);
      border-right-width: var(--border-width);
      border-start-end-radius: var(--radius);
      border-end-end-radius: var(--radius);
      border-start-start-radius: 0;
      border-end-start-radius: 0;
    }
  }
}

@utility tablist-card-divided {
  @apply border-scaffold;
  position: relative;
  gap: 0;
  padding: 0;

  /* Structural pseudos are wrapped in :where() so every rule stays at the
     specificity of a single class. Placement treatments then compose purely by
     source order: when a tablist both carries a static placement class and
     flips --placement responsively, the last matching block's resets win
     cleanly with no leftover corners or doubled dividers. */

  &:where(.tablist-top) {
    :where(.tab) {
      border-width: 0;
      border-radius: 0;

      &:where(:not(:first-child)) {
        border-left-width: var(--border-width);
        border-color: var(--_bc, var(--border-color));
      }

      &:where(:first-child) {
        border-top-left-radius: calc(var(--radius) - var(--border-width));
        border-bottom-left-radius: calc(var(--radius) - var(--border-width));
      }

      &:where(:last-child) {
        border-top-right-radius: calc(var(--radius) - var(--border-width));
        border-bottom-right-radius: calc(var(--radius) - var(--border-width));
      }
    }
  }

  &:where(.tablist-left),
  &:where(.tablist-right) {
    :where(.tab) {
      border-width: 0;
      border-radius: 0;

      &:where(:not(:first-child)) {
        border-top-width: var(--border-width);
        border-color: var(--_bc, var(--border-color));
      }

      &:where(:first-child) {
        border-top-left-radius: calc(var(--radius) - var(--border-width));
        border-top-right-radius: calc(var(--radius) - var(--border-width));
      }

      &:where(:last-child) {
        border-bottom-left-radius: calc(var(--radius) - var(--border-width));
        border-bottom-right-radius: calc(var(--radius) - var(--border-width));
      }
    }
  }

  /* Responsive placement.
     The class rules above cover static placement in every browser. These
     container style queries react to the live --placement value, so a tablist
     that flips placement at a breakpoint (tablist-top max-bp:tablist-left)
     also flips its divided-border treatment. They win over the class rules by
     source order in supporting browsers; older browsers ignore them and keep
     the static treatment. */
  @container style(--placement: top) {
    :where(.tab) {
      border-width: 0;
      border-radius: 0;

      &:where(:not(:first-child)) {
        border-left-width: var(--border-width);
        border-color: var(--_bc, var(--border-color));
      }

      &:where(:first-child) {
        border-top-left-radius: calc(var(--radius) - var(--border-width));
        border-bottom-left-radius: calc(var(--radius) - var(--border-width));
      }

      &:where(:last-child) {
        border-top-right-radius: calc(var(--radius) - var(--border-width));
        border-bottom-right-radius: calc(var(--radius) - var(--border-width));
      }
    }
  }

  @container style(--placement: left) or style(--placement: right) {
    :where(.tab) {
      border-width: 0;
      border-radius: 0;

      &:where(:not(:first-child)) {
        border-top-width: var(--border-width);
        border-color: var(--_bc, var(--border-color));
      }

      &:where(:first-child) {
        border-top-left-radius: calc(var(--radius) - var(--border-width));
        border-top-right-radius: calc(var(--radius) - var(--border-width));
      }

      &:where(:last-child) {
        border-bottom-left-radius: calc(var(--radius) - var(--border-width));
        border-bottom-right-radius: calc(var(--radius) - var(--border-width));
      }
    }
  }
}