@mixin root-container() { ... }@mixin root-container() { 
  /* stylelint-disable-next-line property-no-unknown */
  container: kib-tabs-new / inline-size;
 }

@mixin nav() { ... }@mixin nav() { 
  border-bottom: unit.rem(1px) solid color.get('ui-bg', '07');
  overflow-x: auto;

  @include responsive(settings.$breakpoint-lg) {
    @include nav-large;
  }
 }

@mixin nav-list() { ... }@mixin nav-list() { 
  list-style-type: none;
  margin: 0;
  padding: 0;
  gap: spacing.get('s1');
  display: flex;
  position: relative;

  @include responsive(settings.$breakpoint-lg) {
    @include nav-list-large;
  }
 }

@mixin nav-list-item() { ... }@mixin nav-list-item() { 
  flex: 1;
  margin: 0;
 }

@mixin trigger() { ... }@mixin trigger() { 
  @include typography.style-as('button');

  font-weight: typography.get-weight('medium');
  position: relative;
  width: 100%;
  border: 0;
  background-color: color.get('ui-bg', 'primary');
  color: color.get('text', 'secondary');
  padding: spacing.get('s2') spacing.get('s2')
    calc(spacing.get('s3') + settings.$active-indicator-height);
  white-space: nowrap;
  cursor: pointer;
  border-radius: unit.rem(4px) unit.rem(4px) 0 0;
  transition: background-color 200ms ease-out;

  @include responsive(settings.$breakpoint-lg) {
    padding: spacing.get('s2') spacing.get('s6')
      calc(spacing.get('s3') + settings.$active-indicator-height) spacing.get('s6');
  }

  &:hover {
    background-color: color.get('action', 'cta', 'alternate', '03');
  }

  &:active {
    background-color: color.get('action', 'cta', 'alternate', '02');
  }

  &:focus-visible {
    box-shadow: inset 0 0 0 unit.rem(2px) settings.$active-color;
    outline: unit.rem(2px) solid transparent;
    outline-offset: unit.rem(-2px);
  }
 }

@mixin trigger-active() { ... }@mixin trigger-active() { 
  color: settings.$active-color;

  &:hover,
  &:active,
  &:focus {
    background-color: color.get('ui-bg', 'primary');
  }

  &::after {
    content: '';
    height: settings.$active-indicator-height;
    border-top: settings.$active-indicator-height solid settings.$active-color;
    position: absolute;
    inset: auto 0 0;
    border-radius: math.div(settings.$active-indicator-height, 2)
      math.div(settings.$active-indicator-height, 2) 0 0;
  }
 }

@mixin content-item() { ... }@mixin content-item() { 
  display: none;
  padding: settings.$spacing;
 }

@mixin content-item-active() { ... }@mixin content-item-active() { 
  display: block;
 }

@mixin nav-large() { ... }@mixin nav-large() { 
  display: grid;
  grid-template-columns: auto 1fr;
 }

@mixin nav-list-large() { ... }@mixin nav-list-large() { 
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
 }

@mixin responsive() { ... }@mixin responsive() { 
  @media (min-width: #{$breakpoint}) {
    @content;
  }
  /* stylelint-disable-next-line scss/at-rule-no-unknown */
  @container kib-tabs-new (min-width: #{$breakpoint}) {
    @content;
  }
 }

$active-indicator-height: unit.rem(4px);

$active-color: color.get('action', 'cta', 'primary', 'primary');

$spacing: spacing.get('s4');

$breakpoint-lg: breakpoints.$chirp-base-md + 'px';