.tab-item {
  border-bottom: 2px solid transparent;
  font-weight: var(--size-font-weight-bold);
  transition: color 0.2s, border-color 0.2s;
  font-family: var(--asset-fonts-body);

  &[disabled] {
    cursor: not-allowed;
  }

  &: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);
  }

  &--selected {
    &:not(.disabled) {
      border-bottom: 2px solid var(--color-text-primary);
      color: var(--color-text-primary);

      &:hover {
        color: var(--color-text-primary);
      }
    }

    &.disabled {
      border-bottom: 2px solid var(--color-border-separator);

      &.disabled {
        color: var(--color-text-danger-disabled);
      }
    }
  }

  &:not(.disabled) {
    &:hover {
      color: var(--color-text-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;
  }
}
