.tab-item {
  z-index: 1;
  font-weight: var(--size-font-weight-bold);
  color: var(--color-text-body-secondary);
  font-family: var(--asset-fonts-body);

  &[disabled] {
    cursor: not-allowed;
    color: var(--color-text-disabled);
  }


  &:focus {
    outline: 0;
    box-shadow: inset var(--INTERNAL_form-control-box-shadow-focus);
  }

  //Show focus styles on keyboard focus.
  &:focus-visible {
    outline: 0;
    box-shadow: inset var(--INTERNAL_form-control-box-shadow-focus);
  }

  &:not(.disabled) {
    &:hover {
      color: var(--color-text-body-primary);
      cursor: pointer;
    }
  }

  // Hide focus styles if they are not needed, for example,
  // when an element receives focus via the mouse.
  &:focus:not(:focus-visible) {
    outline: 0;
    box-shadow: none;
  }

  &--selected {
    &:not(.disabled) {
      color: var(--color-text-body-primary);
    }
  }
}

.tabs-slider-indicator {
  transition: left 0.2s;
  will-change: transform;
  transition-timing-function: cubic-bezier(0.67, 0.83, 0.67);
}
