:host([hidden]) {
  display: none;
}
:host {
  display: inline-flex;
}

:host {
  position: relative;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
  box-sizing: border-box;
  justify-content: center;
  line-height: var(--lineHeightBase300);
  font-family: var(--fontFamilyBase);
  font-size: var(--fontSizeBase300);
  color: var(--colorNeutralForeground2);
  fill: currentcolor;
  grid-row: 1;
  padding: var(--spacingHorizontalM) var(--spacingHorizontalMNudge);
  border-radius: var(--borderRadiusMedium);
  gap: 4px;
}

:host .tab-content {
  display: inline-flex;
  flex-direction: column;
  padding: 0 2px;
  grid-column: 3;
}

:host([aria-selected='true']) {
  color: var(--colorNeutralForeground1);
  font-weight: var(--fontWeightSemibold);
}

/* adds hidden textContent to prevent shifting ui on bold / unbolding of text */
:host .tab-content::after {
  content: var(--textContent);
  visibility: hidden;
  height: 0;
  line-height: var(--lineHeightBase300);
  font-weight: var(--fontWeightSemibold);
}

:host([aria-selected='true'])::after {
  background-color: var(--colorCompoundBrandStroke);
  border-radius: var(--borderRadiusCircular);
  content: '';
  inset: 0;
  position: absolute;
  z-index: 2;
}

:host([aria-selected='false']:hover)::after {
  background-color: var(--colorNeutralStroke1Hover);
  border-radius: var(--borderRadiusCircular);
  content: '';
  inset: 0;
  position: absolute;
  z-index: 1;
}

/*
   * TODO: Remove '(text-size-adjust: auto)' after this bug is fixed:
   * https://bugs.webkit.org/show_bug.cgi?id=298646
   * Also remove the same trick from tablist.styles.ts.
   * Using '@supports (text-size-adjust: auto)' here to exclude Safari 26 from
   * using CSS Anchor Positioning here because it crashes.
   */
@supports (anchor-name: --a) and (text-size-adjust: auto) {
  :host([aria-selected='true'])::after {
    background-color: transparent;
  }

  :host([aria-selected='true']:hover)::after {
    background-color: var(--colorNeutralStroke1Hover);
  }
}

:host([aria-selected='true'][disabled])::after {
  background-color: var(--colorNeutralForegroundDisabled);
}

::slotted([slot='start']) {
  grid-column: 2;
}

::slotted([slot='end']) {
  grid-column: -1;
}

::slotted([slot='start']),
::slotted([slot='end']) {
  display: flex;
}
:host([disabled]) {
  cursor: not-allowed;
  fill: var(--colorNeutralForegroundDisabled);
  color: var(--colorNeutralForegroundDisabled);
  pointer-events: none;
}

:host([disabled]:hover)::after {
  background-color: unset;
}

:host(:focus) {
  outline: none;
}

:host(:focus-visible) {
  border-radius: var(--borderRadiusSmall);
  box-shadow: 0 0 0 3px var(--colorStrokeFocus2);
  outline: 1px solid var(--colorStrokeFocus1);
}

@media (forced-colors: active) {
  :host([aria-selected='true'])::after {
    background-color: Highlight;
  }
}