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

$btn-width: 28px;

@include b(el-tabs-nav) {
  position: relative;
  padding: 0 10px;
  background-color: cssVar(layout-tab-bg-color);
  border-bottom: cssVar(layout-tab-line);

  @include e(content) {
    width: 100%;

    @include el-joins(tabs) {
      width: calc(100% - $btn-width);
    }

    @include el-joins(tabs--card) {
      @include el-joins(tabs__header) {
        height: cssVar(layout-tab-height);
        min-height: cssVar(layout-tab-height);
        margin: 0;
        border-bottom: none;

        @include el-joins(tabs__nav-wrap) {
          position: absolute;
          width: 100%;
        }

        @include el-joins(tabs__nav) {
          border: none;
        }

        @include el-joins(tabs__item) {
          padding: 0 10px;
          color: cssVar(layout-tab-text-color);

          // background-color: cssVar(layout-tab-item-bg-color);
          border-left: none;

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

          &.is-active {
            color: cssVar(color-primary);
            border-bottom: 2px solid cssVar(color-primary);
          }

          .is-icon-close svg {
            margin-top: 0.5px;
          }
        }
      }
    }

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