/*
* Tabs theme
*
*/

@use '../../../../style/core/utilities.scss' as utilities;
@use '../../../button/style/themes/button-mixins.scss';

.dnb-tabs {
  --tablist-border-color--default: var(--color-black-8);
  --tab-title-font-color: var(--color-sea-green);
  --tab-title-font-weight: var(--font-weight-regular);
  --tab-title-font-size: var(--font-size-basis);
  --tab-title-background--hover: var(--color-mint-green-50);
  --tab-title-color--hover: var(--color-sea-green);
  --tab-title-border--hover: var(--color-sea-green);
  --tab-title-color--disabled: var(--color-sea-green-30);
  --tab-title-border--active-selected: var(--color-sea-green);
  --tab-title-color--active-selected: var(--color-emerald-green);

  &__button {
    // should be same as .lead small
    &__title {
      font-weight: var(--font-weight-regular);
      font-size: var(--font-size-basis);
      text-align: center;

      display: block;
      color: var(--color-sea-green);
      padding: 0.5rem 0 0.25rem;
    }

    // hover
    @include utilities.hover() {
      background-color: var(--color-mint-green-50);

      &::after {
        height: 2px;
        border-radius: 2px;
        background-color: var(--color-sea-green);
      }
    }

    &:focus {
      @include button-mixins.buttonFocusRing();
      overflow: visible;

      &::before {
        top: 0.5rem;
        left: -0.375rem; // For overflow purposes
        right: -0.375rem; // For overflow purposes
        bottom: 0.5rem;
        border-radius: 1.5rem;
      }
    }

    // disabled
    &[disabled] &__title {
      color: var(--color-sea-green-30);
    }

    // active + selected
    &:not([disabled]):active,
    &:not([disabled]).selected {
      &::after {
        height: 2px;
        border-radius: 2px;
        background-color: var(--color-sea-green);
      }
    }

    &:not([disabled]):active &__title,
    &:not([disabled]).selected &__title {
      color: var(--color-emerald-green);
    }

    // selected only
    &:not([disabled]).selected &__title {
      font-weight: var(--font-weight-medium);
    }

    // To make sure we have the wider width on every item
    // Have to be same as &:not([disabled]).selected
    span[hidden] {
      font-weight: var(--font-weight-medium);
    }
  }
}