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

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

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

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

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

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

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

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

  @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 {
    outline: unit.rem(2px) solid transparent;
    outline-offset: unit.rem(-2px);
    box-shadow: inset 0 0 0 unit.rem(2px) settings.$active-color;
  }
 }

@mixin trigger-condensed() { ... }@mixin trigger-condensed() { 
  padding: settings.$spacing-vertical-condensed settings.$spacing-horizontal-condensed
    calc(settings.$spacing-vertical-condensed + settings.$active-indicator-height);
  gap: spacing.get('s1');

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

@mixin trigger-label() { ... }@mixin trigger-label() { 
  flex: 1 1 auto;
 }

@mixin trigger-label-closable() { ... }@mixin trigger-label-closable() { 
  text-align: start;
 }

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

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

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

@mixin trigger-close() { ... }@mixin trigger-close() { 
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: inherit;
  cursor: pointer;
 }

@mixin trigger-close-icon() { ... }@mixin trigger-close-icon() { 
  width: spacing.get('s4');
  height: spacing.get('s4');
 }

@mixin trigger-icon() { ... }@mixin trigger-icon() { 
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: spacing.get('s4');
  height: spacing.get('s4');

  > svg {
    fill: currentColor;
  }

  > :only-child {
    display: block;
    width: inherit;
    height: inherit;
  }
 }

@mixin nav-list-divided() { ... }@mixin nav-list-divided() { 
  display: flex;
  flex-wrap: nowrap;
 }

@mixin nav-list-divider() { ... }@mixin nav-list-divider() { 
  flex: 0 0 auto;
  align-self: stretch;
  width: unit.rem(1px);
  margin: spacing.get('s2') spacing.get('s1');
  background-color: color.get('ui-bg', '07');
 }

@mixin trigger-sr-only() { ... }@mixin trigger-sr-only() { 
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
 }

@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');

$spacing-vertical-condensed: spacing.get('s1');

$spacing-horizontal-condensed: spacing.get('s1');

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