@use "@styles/mixins/bem" as *;
@use "@styles/mixins/function" as *;

$tab-padding-top: 4px;
$btn-width: 28px;

@include b(classic-tabs-nav) {
  position: relative;
  gap: 5px;
  width: 100%;
  height: cssVar(layout-tab-height);
  min-height: cssVar(layout-tab-height);
  padding: 0 10px;
  white-space: nowrap;
  background-color: cssVar(layout-tab-bg-color);
  border-bottom: cssVar(layout-tab-line);

  @include is(simple) {
    @include e(tab, true) {
      .icon-close:hover {
        background-color: cssVar(gray-300);
      }

      @include is(active) {
        color: cssVar(color-primary);

        .dot {
          background-color: cssVarEl(color-primary-light-3);
        }
      }
    }
  }

  @include is(classic) {
    @include e(tab, true) {
      .icon-close:hover {
        color: #ffffff;
        background-color: cssVar(gray-500);
      }

      @include is(active) {
        color: #ffffff;
        background-color: cssVar(color-primary);
        border-color: cssVar(color-primary);

        .dot {
          background-color: #ffffff;
        }
      }
    }
  }

  @include e(scroll) {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  @include e(scroll-body) {
    position: absolute;
    left: $btn-width;
    padding-top: $tab-padding-top;
    white-space: nowrap;
    transition: left cssVar(transition-duration) ease;
  }

  @include e(tab) {
    display: inline-flex;
    align-items: center;
    height: calc(cssVar(layout-tab-height) - 2 * $tab-padding-top);
    padding: 0 11px;
    margin-right: 8px;
    overflow: hidden;
    font-size: cssVar(layout-tab-text-size);
    color: cssVar(layout-tab-text-color);
    cursor: pointer;
    background-color: cssVar(layout-tab-item-bg-color);
    border: 1px solid cssVar(border-color);
    border-radius: calc(cssVar(radius) / 2.5 + 2px);

    &:hover {
      color: cssVar(color-primary);

      .dot {
        background-color: cssVarEl(color-primary-light-3);
      }
    }

    .dot {
      width: cssVar(layout-tab-dot-size);
      height: cssVar(layout-tab-dot-size);
      margin-right: 7px;
      background-color: cssVar(gray-300);
      border-radius: 50%;
      transition: background cssVar(transition-duration) ease;
    }

    .icon-close {
      width: 16px;
      height: 16px;
      margin-left: 5px;
      cursor: pointer;
      border-radius: 50%;
      transition: all cssVar(transition-duration) cubic-bezier(0.645, 0.045, 0.355, 1);
    }

    @include m(icon) {
      margin-right: 4px;
      font-size: cssVar(layout-tab-icon-size);
    }
  }

  @include e(btn) {
    height: 100%;

    @include el-joins(button) {
      width: $btn-width;
      height: 100%;
      background-color: transparent;
      border: none;

      &:hover {
        background-color: cssVar(gray-200);
      }
    }
  }
}
