@import "../settings/variables";
@import "../tools/arrows";
@import "./typography";

.tabs {
  color: $tab-font-color;
  display: flex;
  overflow: hidden;

  &--dark {
    background: $core-gray-15;

    a,
    .tabs__link {
      color: $core-gray-70;
    }

    .tabs__tab {
      &::after {
        @include arrow-down(4px, $core-gray-70);
      }

      &:hover {
        .tabs__link {
          color: $core-white;
        }
      }

      &--active {
        .tabs__link {
          color: $core-white;
        }
      }
    }
  }

  &__list {
    display: flex;
    width: 100%;
  }

  &__link {
    border-bottom: $tab-link-border-settings-inactive;
    color: $tab-font-color;
    display: inline-block;
    font-size: $tab-link-font-size;
    font-weight: 500;
    height: $tab-link-height;
    letter-spacing: $tab-link-letter-spacing;
    line-height: $tab-link-line-height;
    text-align: center;
  }

  &__tab {
    @extend .sm-medium--primary;

    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    padding: $tab-tab-padding;
    position: relative;
    white-space: nowrap;

    &:first-child {
      padding-left: 0px;
    }

    &:last-child {
      padding-right: 0px;
    }

    &--active,
    &--hover,
    &:hover {
      .tabs__link {
        color: $tab-link-font-color-active-hover;
      }
    }

    &--active {
      @extend .sm-medium--secondary;

      cursor: default;

      .tabs__link {
        color: $tab-link-font-color-active-hover;
        border-color: $tab-link-border-color-active;
      }
    }

    &--dropdown {
      align-items: center;

      &::after {
        @include arrow-down(4px, $core-black);

        content: "";
        display: block;
        margin-left: spacing(sm);
        padding-bottom: spacing(xs);
      }

      &.tabs__tab {
        padding-left: spacing(md);

        &:hover,
        &--hover {
          &::after {
            @include arrow-down(4px, $core-orange-50);
          }
        }
      }

      .tabs--dark & {
        &.tabs__tab {
          &:hover,
          &--hover {
            &::after {
              @include arrow-down(4px, $core-white);
            }
          }
        }
      }
    }

    &--overflowing {
      pointer-events: none;
      position: absolute;
      visibility: hidden;
    }
  }

  &__more {
    pointer-events: none;
    visibility: hidden;

    &__link:hover {
      cursor: pointer;
    }

    &--overflowing {
      pointer-events: all;
      visibility: visible;
    }
  }

  &__dropdown {
    max-height: 40vh;

    .tabs__tab {
      .tabs__link {
        border: 0;
        display: block;
        height: auto;
        line-height: inherit;
        text-align: left;
      }

      &:hover,
      &--hover {
        .tabs__link {
          font-weight: normal;
        }
      }

      &--active,
      &--active:hover {
        .tabs__link {
          color: $tab-link-border-color-active;
          font-weight: bold;
        }
      }
    }
  }

  &--all-overflowing {
    .tabs__tab--dropdown {
      &.tabs__tab {
        padding-left: 0;
      }
    }
  }
}