.@{tabs-prefix-cls} { 
  &-header-nav-card, &-header-nav-card-gutter, &-header-nav-text, &-header-nav-capsule {
    .@{tabs-prefix-cls} {
      &-icon-hover::before {
        background-color: transparent;
      }
      &-header-title {
        border: none;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        &:hover {
          // background-color: var(--color-fill-2);
        }

        &-active {
          background-color: rgb(var(--primary-6)) !important;
          .@{tabs-prefix-cls} {
            &-header-title {
              &-text {
                color: var(--color-white);
              }
            }
          }
          &:hover {
            .@{tabs-prefix-cls} {
              &-header-title {
                &-text {
                  // color: var(--color-text-2);
                  color: var(--color-white);
                }
              }
            }
          }
        }

        &-active.arco-tabs-header-title-editable{
          background-color: rgb(var(--primary-6))
        }
      }
    }
    &-gutter {
      .@{tabs-prefix-cls} {
        &-header-title {
          border: none;
        }
      }
    }
  }
  &-content {
    border: none !important;
    padding-top: 20px;
  }
  &-header-nav-card-gutter .arco-tabs-header-title{
    background-color: transparent;
  }
  &-header-nav-card-gutter .arco-tabs-header-title-active{
    background-color: rgb(var(--primary-6));
  }

  // 文字底部横线左右边距
  &-header-nav-line .arco-tabs-header-title{
    margin: 0;
    padding: 8px 20px;
  }

  // card最后元素右边框取消
  &-header-nav-card .arco-tabs-header-title:last-child {
    border-right: 0;
  }

  // 胶囊样式用做二级tab
  &.arco-tabs-capsule .arco-tabs-header-nav-capsule {
    .arco-tabs-header-wrapper {
      justify-content: flex-start;
    }
    .arco-tabs-header-title{
      border: 1px solid var(--color-border-2);
      border-radius: 0;
      color: var(--color-text-2);
      // background-color: rgb(var(--primary-2));
      background-color: transparent;
      margin-right: 1px;

      &-active {
        background-color: rgb(var(--primary-2)) !important;
        font-weight: 600;
        .arco-tabs-header-title-text{
          color: rgb(var(--primary-6));
        }
      }

      &:hover{
        background-color: transparent;
        font-weight: 600;
        color: rgb(var(--primary-6));
      }

      &-disabled {
        color: var(--color-text-6);
        font-weight: normal;
        &:hover {
          color: var(--color-text-6);
          font-weight: normal;
        }
      }

      &:not(:first-of-type){
        margin-left: 0;
        border-left: 0;
      }

      &:first-of-type{
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
      }

      &:last-of-type{
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
      }
    }
  }

  // tab标签超出内容可见
  &-content .arco-tabs-content-item{
    overflow: visible;
  }

  // 卡片选项卡样式调整
  & .arco-tabs-header-nav-card{
    .arco-tabs-header-title-active{
      background-color: rgb(var(--primary-2)) !important;
      font-weight: 600;

      .arco-tabs-header-title-text{
        color: rgb(var(--primary-6));
      }
    }
    .arco-tabs-header-title:hover{
      background-color: transparent;
      font-weight: 600;
    }

    .arco-tabs-header-title-disabled{
      background-color: transparent;
      &:hover{
        font-weight: normal;;
      }
    }
  }

  // 卡片选项卡
  .arco-tabs-header-nav-card{
    &.arco-tabs-header-size-default{
      .arco-tabs-header-title{
        padding: 5px 16px;
      }
    }
  }



  // 尺寸控制
  // small尺寸
  .arco-tabs-header-size-small{
    .arco-tabs-header-title{
      font-size: 12px;
      line-height: 18px;
    }
  }


  // 胶囊选项卡
  .arco-tabs-header-nav-capsule{

    &.arco-tabs-header-size-default{
      .arco-tabs-header-title{
        font-size: 12px;
        line-height: 30px;
      }
    }

    &.arco-tabs-header-size-mini{
      .arco-tabs-header-title{
        padding: 2px 12px;
      }
    }
  }
}