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

@include b(tabs){
  @include m(normal){
    display: flex;
    box-sizing: border-box;
    border-bottom:1px solid var(--color-grey-4) ;
    padding-bottom:1px;
    @include e(item){
      box-sizing: border-box;
      color: var(--color-grey-7);
      cursor: pointer;
      font-size: 13px;
      font-weight: 500;
      height: 24px;
      line-height: 24px;
      list-style: none;
      padding: 0 20px;
      transition: 0.15s ease-out;
      user-select: none;
      &:first-of-type{
        padding-left: unset;
      }
      &:hover{
        @include e(content){
          color: var(--color-blue-6);
        }
      }
      @include when(active){
        @include e(content){
          color: var(--color-blue-6);
          border-bottom: 2px solid var(--color-blue-6);
        }
      }
      @include e(content){
        @include e(badge){
          background-color: var(--color-grey-3);
          border-radius: var(--border-radius-4);
          color: var(--color-grey-8);
          font-weight: 400 !important;
          height: 18px;
          line-height: 18px;
          padding: 0 4px;
          margin-left: 4px;
        }
      }
    }
  }

  @include m(cap){
    display: inline-block;
    position: relative;
    vertical-align: middle;
    @include e(item){
      --x-tabs-cap-height:32px;
      --x-tabs-cap-line-height:30px;
      --x-tabs-cap-padding:0 12px;
      border: var(--border-base);
      box-sizing: border-box;
      color: var(--color-grey-7);
      cursor: pointer;
      float: left;
      font-size: 12px;
      list-style: none;
      margin-left: -1px;
      position: relative;
      transition: all 0.2s linear;
      height: var(--x-tabs-cap-height);
      line-height: var(--x-tabs-cap-line-height);
      padding: var(--x-tabs-cap-padding);
      &:first-of-type{
        border-bottom-left-radius: var(--border-radius-2);
        border-top-left-radius: var(--border-radius-2);
      }
      &:last-of-type{
        border-bottom-right-radius: var(--border-radius-2);
        border-top-right-radius: var(--border-radius-2);
      }
      &:hover{
        background-color: var(--color-blue-1);
        border: 1px solid var(--color-blue-6);
        border-radius: var(--border-radius-2);
        color: var(--color-blue-5);
        z-index: 2;
      }
      @include when(active){
        background-color: var(--color-blue-1);
        border: 1px solid var(--color-blue-6);
        border-radius: var(--border-radius-2);
        color: var(--color-blue-5);
        z-index: 2;
      }
      @include when(mini){
        --x-tabs-cap-height:26px;
        --x-tabs-cap-line-height:24px;
        --x-tabs-cap-padding:0 16px;
      }
    }
  }

  @include m(vertical){
    --x-tabs-vertical-width:160px;
    @include e(item){
      box-sizing: border-box;
      cursor: pointer;
      font-size: 14px;
      font-weight: 500;
      height: 40px;
      line-height: 40px;
      list-style: none;
      padding-left: 20px;
      width: var(--x-tabs-vertical-width);
      transition: transform 0.3s cubic-bezier(.645,.045,.355,1);
      &:hover{
        background-color: var(--color-blue-1);
        color: var(--color-blue-6);
        font-weight: 600;
      }
      @include when(active){
        background-color: var(--color-blue-1);
        border-right: 4px solid var(--color-blue-6);
        color: var(--color-blue-6);
        font-weight: 600;
      }
    }
  }

  @include m(card){
    @include e(item){
      width: 220px;
      height: 56px;
      display: flex;
      align-items: center;
      padding: 10px 12px;
      font-size: var(--x-font-size-base,12);
      box-sizing: border-box;
      cursor: pointer;
      @include e(card-image){
        width: 50px;
        height: 32px;
        margin-right: 16px;
      }
      @include when(active){
        background-color: var(--color-blue-1);
        @include e(card-right){
          >p:first-of-type{
            color: var(--color-blue-5);
          }
        }
      }
      &:hover{
        background-color: var(--color-blue-1);
        @include e(card-right){
          >p:first-of-type{
            color: var(--color-blue-5);
          }
        }
      }
    }
  }
}