@use "../mixins/function.scss" as *;
@use "../mixins/mixins.scss" as *;
@use "../mixins/config.scss" as *;

@include b(tabs) {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  @include m(small) {
    @include be(tabs, item) {
      height: 32px;
    }
  }
  @include m(medium) {
    @include be(tabs, item) {
      height: 36px;
    }
  }
  @include m(large) {
    @include be(tabs, item) {
      height: 40px;
    }
  }
  @include e(header-wrapper) {
    display: flex;
    align-items: stretch;
  }
  @include e(nav-prev) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 100%;
    cursor: pointer;
    border: none;
    margin: 0;
    padding: 0;
    background: getCssVar("color", "fill-2");
    color: getCssVar("color", "text-2");
    transition: color 0.3s;
    flex-shrink: 0;
    border-right: 1px solid getCssVar("color", "fill-3");
    border-bottom: 1px solid getCssVar("color", "fill-3");
    &:hover {
      @include not-when(disabled) {
        color: getCssVar("color", "primary-5");
      }
    }
    @include when(disabled) {
      color: getCssVar("color", "text-3");
      cursor: not-allowed;
    }
  }
  @include e(nav-next) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 100%;
    cursor: pointer;
    border: none;
    margin: 0;
    padding: 0;
    background: getCssVar("color", "fill-2");
    color: getCssVar("color", "text-2");
    transition: color 0.3s;
    flex-shrink: 0;
    border-left: 1px solid getCssVar("color", "fill-3");
    border-bottom: 1px solid getCssVar("color", "fill-3");
    &:hover:not(.is-disabled) {
      color: getCssVar("color", "primary-5");
    }
    &.is-disabled {
      color: getCssVar("color", "text-4");
      cursor: not-allowed;
    }
  }
  @include e(scroll-container) {
    flex: 1;
    overflow: hidden;
    &::-webkit-scrollbar {
      display: none;
    }
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  @include e(extra) {
    height: 100%;
    display: flex;
  }
  @include e(header) {
    display: flex;
    border-bottom: 1px solid getCssVar("color", "fill-3");
    position: relative;
  }

  @include e(active-bar) {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background-color: getCssVar("color", "primary-6");
    transition:
      left 0.3s getCssVar("bezier", "1"),
      width 0.3s getCssVar("bezier", "1");
  }

  @include e(item) {
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    color: getCssVar("color", "text-2");
    position: relative;
    transition: color 0.3s;
    flex-wrap: nowrap;
    text-wrap: nowrap;

    &:hover {
      color: getCssVar("color", "primary-5");
    }

    @include when(active) {
      color: getCssVar("color", "primary-6");
    }

    @include when(disabled) {
      color: getCssVar("color", "text-4");
      cursor: not-allowed;

      &:hover {
        color: getCssVar("color", "text-4");
      }
    }
  }

  @include e(close-btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: color 0.3s;
    cursor: pointer;
    border-radius: 2px;
    margin-left: 8px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    &:hover {
      color: getCssVar("color", "text-1");
      background-color: getCssVar("color", "fill-2");
    }
  }

  @include e(content) {
    flex: 1;
    position: relative;
    min-height: 24px;
  }

  @include m(card) {
    @include be(tabs, header) {
      border-bottom: 1px solid getCssVar("color", "fill-3");
      background-color: getCssVar("color", "fill-2");
    }
    @include be(tabs, item) {
      border-bottom: 1px solid getCssVar("color", "fill-3");
      border-right: 1px solid getCssVar("color", "fill-3");
      margin-bottom: -1px;
      background-color: getCssVar("color", "fill-2");

      @include when(active) {
        border-bottom-color: getCssVar("color", "bg-1");
        background-color: getCssVar("color", "bg-1");

        &::after {
          display: none;
        }
      }
    }
  }
  @include m(bordered) {
    border: 1px solid getCssVar("color", "fill-3");
  }

  @include e(pane) {
    height: 100%;
    color: getCssVar("color", "text-1");
  }
}

.tabs-slide-left-enter-active,
.tabs-slide-left-leave-active,
.tabs-slide-right-enter-active,
.tabs-slide-right-leave-active {
  transition:
    opacity 0.3s getCssVar("bezier", "1"),
    transform 0.3s getCssVar("bezier", "1");
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}

.tabs-slide-left-enter-from {
  opacity: 0;
  transform: translateX(30px);
}

.tabs-slide-left-leave-to {
  opacity: 0;
  transform: translateX(-30px);
}

.tabs-slide-right-enter-from {
  opacity: 0;
  transform: translateX(-30px);
}

.tabs-slide-right-leave-to {
  opacity: 0;
  transform: translateX(30px);
}