@use "../base/mixins" as *;
@use "../base/variables" as *;
@use "../base/typography" as *;

.tab {
  &__list {
    @include flexCenter(flex-start);
    gap: 2.4rem;
  }

  &__item {
    &--active {
      .tab__btn {
        color: theme-color($primary);
        font-weight: 600;

        &::after {
          translate: 0 0;
          opacity: 1;
          visibility: visible;
        }
      }
    }
  }

  &__btn {
    @include flexCenter(center);
    @include transition((color, font-weight));

    position: relative;
    height: 3.8rem;
    background: transparent;
    color: theme-color($text-low);

    @include media("lg") {
      height: 3.2rem;
    }

    &::after {
      @include transition((translate, opacity, visibility));

      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      opacity: 0;
      visibility: hidden;
      width: 100%;
      height: 2px;
      background: theme-color($primary);
      translate: 0 0.25rem;
    }

    &:hover {
      color: theme-color($primary);
      font-weight: 600;

      &::after {
        translate: 0 0;
        opacity: 1;
        visibility: visible;
      }
    }
  }
}