tiny-vue/packages/theme/src/tabs/index.less-代码预览-tiny-vue:104款组件，跨Vue2/Vue3、PC/移动端，支持国际化与主题定制

GGitHubfix(tabs): tabs 排除card类型的tiny-tabs__header的::after样式 (#3989 )
/**
* Copyright (c) 2022 - present TinyVue Authors.
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
*
* Use of this source code is governed by an MIT-style license.
*
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
*
*/

@import '../custom.less';
@import './vars.less';
@import '../motion/index.less';

@tabs-prefix-cls: ~'@{css-prefix}tabs';
@tab-pane-prefix-cls: ~'@{css-prefix}tab-pane';
@dropdown-menu-prefix-cls: ~'@{css-prefix}dropdown-menu';
@popper-prefix-cls: ~'@{css-prefix}popper';
@tabs-more-dropdown-prefix-cls: ~'@{css-prefix}tabs__more-dropdown';

.@{tabs-more-dropdown-prefix-cls} {
  .inject-Tabs-vars();
}

.@{tabs-prefix-cls} {
  .inject-Tabs-vars();

  &--left,
  &--right,
  &__content,
  &__nav-scroll,
  &__nav-wrap {
    overflow: hidden;
  }

  /** 头部场景 */
  &__header {
    position: relative;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;

    .@{tabs-prefix-cls} {
      // 活跃块
      &__active-bar {
        position: absolute;
        bottom: 0;
        left: 0;
        height: var(--tv-Tabs-item-active-border-weight);
        list-style: none;
        z-index: 1;
        background-color: var(--tv-Tabs-item-active-border-color);
        transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
      }

      // 添加按钮
      &__new-tab {
        margin-top: 3px;
        height: 16px;
        padding-left: 12px;
        font-size: var(--tv-Tabs-header-separator-height);
        display: inline-flex;
        border-left: 1px solid var(--tv-Tabs-border-color);
        justify-content: center;
        align-items: center;
        cursor: pointer;
        transition: all 0.15s;
        outline: none;

        svg {
          fill: var(--tv-Tabs-header-icon-color);
          font-size: var(--tv-Tabs-more-icon-size);
          padding: 4px;

          &:hover {
            fill: var(--tv-Tabs-header-icon-color-hover);
            border-radius: 4px;
            background-color: var(--tv-Tabs-header-icon-color-bg-hover);
          }
        }
      }

      // 最外层页签栏盒子
      &__nav-wrap {
        display: flex;
        align-items: center;
        position: relative;

        &.is-scrollable {
          padding: 0 20px;
          box-sizing: border-box;
        }
      }

      // 左右滚动按钮
      &__nav-next,
      &__nav-prev {
        position: absolute;
        line-height: var(--tv-Tabs-height);
        font-size: var(--tv-Tabs-prev-next-btn-icon-size);
        cursor: pointer;
        color: var(--tv-Tabs-header-font-normal-text-color);
        fill: var(--tv-Tabs-header-font-normal-text-color);
      }

      &__nav-next {
        right: 0;
      }

      &__nav-prev {
        left: 0;
      }

      // 实际页签栏盒子
      &__nav:not(.is-stretch) {
        .@{tabs-prefix-cls}__item__title {
          display: block;
          width: 100%;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }

      &__nav {
        float: left;
        position: relative;
        white-space: nowrap;
        transition: transform 0.3s;
        z-index: 2;

        &.is-stretch {
          display: flex;
          min-width: 100%;

          & > * {
            flex-grow: 1;
            text-align: center;
          }
        }

        &.is-show-active-bar .@{tabs-prefix-cls}__item {
          margin-right: var(--tv-Tabs-item-margin-right);

          &.@{tabs-prefix-cls}__item-separator-space {
            margin-right: 0;
          }
        }
      }
    }
  }

  & &__item-separator-space {
    padding-left: calc(var(--tv-Tabs-header-separator-padding-horizontal) + 1px);
    padding-right: var(--tv-Tabs-header-separator-padding-horizontal);
    height: var(--tv-Tabs-header-separator-item-height);

    &:last-child {
      .@{tabs-prefix-cls}__item-separator {
        display: none;
      }
    }
  }

  // 单个标签样式
  &__item {
    position: relative;
    display: inline-flex;
    list-style: none;
    height: var(--tv-Tabs-height);
    line-height: var(--tv-Tabs-height);
    box-sizing: border-box;
    font-size: var(--tv-Tabs-item-font-size);
    justify-content: center;
    align-items: center;
    color: var(--tv-Tabs-header-font-normal-text-color);

    &-title {
      display: inline-block;
      vertical-align: bottom;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    &-separator-space {
      color: var(--tv-Tabs-header-separator-normal-text-color);
    }

    &:focus,
    &:active {
      outline: 0;
    }

    &:hover,
    &.is-active {
      color: var(--tv-Tabs-header-font-active-text-color);
      cursor: pointer;

      .@{tabs-prefix-cls}__icon-close svg {
        fill: var(--tv-Tabs-icon-close-hover-text-color);
      }
    }

    &.is-active {
      font-weight: var(--tv-Tabs-header-font-weight-active);

      &.is-disabled:hover {
        font-weight: var(--tv-Tabs-header-font-weight-active);
      }
    }

    &.is-disabled {
      cursor: not-allowed;
      color: var(--tv-Tabs-item-disabled-text-color);

      &:hover {
        font-weight: normal;
      }

      .@{tabs-prefix-cls}__icon-close {
        &,
        &:hover {
          background-color: transparent;

          svg {
            fill: var(--tv-Tabs-item-disabled-text-color);
          }
        }
      }
    }

    &.is-closable {
      // 修复自定义标签配置:with-close="true"样式错乱问题
      > div {
        display: inline-block;
      }

      .@{tabs-prefix-cls}__icon-close {
        display: inline-flex;
        width: var(--tv-Tabs-icon-size-close);
        height: var(--tv-Tabs-icon-size-close);
        justify-content: center;
        align-items: center;
      }
    }
    & > div {
      display: flex;
      align-items: center;
    }

    .@{tabs-prefix-cls}__icon-close {
      border-radius: 4px;
      text-align: center;
      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
      margin: var(--tv-Tabs-icon-close-margin-vertical) var(--tv-Tabs-icon-close-margin-right)
        var(--tv-Tabs-icon-close-margin-vertical) var(--tv-Tabs-icon-close-margin-left);
      display: inline-flex;
      justify-content: center;
      align-items: center;
      vertical-align: middle;
      background-color: var(--tv-Tabs-icon-close-default-bg-color);

      svg {
        font-size: var(--tv-Tabs-font-size-base);
        transform: scale(0.9);
        vertical-align: middle;
        fill: var(--tv-Tabs-icon-close-icon-color);
      }

      &:hover {
        svg {
          fill: var(--tv-Tabs-icon-close-hover-text-color);
        }
      }
    }
  }

  // 内容部分
  &__content {
    position: relative;
    margin: var(--tv-Tabs-content-margin-vertical) var(--tv-Tabs-content-margin-horizontal);
    color: var(--tv-Tabs-header-font-normal-text-color);
  }

  .is-show-more {
    padding: 0 48px 0 0;
  }

  // 更多按钮场景
  &__more-container {
    position: absolute;
    right: 0;
    font-size: var(--tv-Tabs-font-size-base);
    color: var(--tv-Tabs-header-font-normal-text-color);
    line-height: var(--tv-Tabs-height);
    padding-top: 5px;

    .tiny-dropdown__suffix-inner {
      display: none;
    }

    .@{tabs-prefix-cls}__more {
      padding: 0 var(--tv-Tabs-more-icon-padding-horizontal);
      font-size: var(--tv-Tabs-item-font-size);
      cursor: pointer;
      color: var(--tv-Tabs-header-text-color);
      outline: 0;

      &:hover {
        color: var(--tv-Tabs-more-hover-text-color);
      }

      &-icon {
        position: relative;
        display: flex;
        cursor: pointer;
        padding: 0 var(--tv-Tabs-more-icon-padding-horizontal);
        height: var(--tv-Tabs-more-icon-height);
        justify-content: center;
        align-items: center;
        font-size: 18px;

        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          display: inline-block;
          width: 4px;
          height: var(--tv-Tabs-more-left-box-height);
          box-shadow: -3px 0px 4px 0px rgba(0, 0, 0, 0.08);
        }

        .tiny-svg {
          font-size: var(--tv-Tabs-more-icon-size);
          padding: 4px;
          vertical-align: middle;
          fill: var(--tv-Tabs-more-icon-color);

          &:hover {
            border-radius: 4px;
            background-color: var(--tv-Tabs-header-icon-color-bg-hover);
          }
        }
      }
    }
  }

  // 下拉框场景
  &__more-dropdown {
    &__more-item {
      outline: 0;

      &:hover {
        font-weight: var(--tv-Tabs-dropdown-more-item-hover-font-weight); // smb新增
        background: var(--tv-Tabs-dropdown-more-item-hover-bg-color);
      }
    }

    &.@{dropdown-menu-prefix-cls}.@{popper-prefix-cls} {
      margin-top: var(--tv-Tabs-dropdown-more-margin-top); // smb新增
      overflow: auto; // smb新增

      &::-webkit-scrollbar {
        width: 0;
      }
    }
  }

  //大尺寸
  &&--large {
    .@{tabs-prefix-cls}__item {
      font-size: 16px;

      &.is-active {
        font-size: 16px;
      }
    }
  }

  // 小尺寸
  &&--small {
    .@{tabs-prefix-cls}__item {
      height: var(--tv-Tabs-small-height);
      line-height: var(--tv-Tabs-small-height);
      font-size: var(--tv-Tabs-small-item-font-size);

      &.@{tabs-prefix-cls}__item-separator-space {
        height: var(--tv-Tabs-small-separator-height);
        line-height: var(--tv-Tabs-small-separator-height);
      }
    }

    .@{tabs-prefix-cls}__nav-prev,
    .@{tabs-prefix-cls}__nav-next {
      line-height: var(--tv-Tabs-small-height);
      font-size: var(--tv-Tabs-prev-next-btn-icon-size);
    }

    .@{tabs-prefix-cls}__nav.is-show-active-bar
      .@{tabs-prefix-cls}__item:not(.@{tabs-prefix-cls}__item-separator-space) {
      margin-right: var(--tv-Tabs-small-item-margin-right);
    }

    &.@{tabs-prefix-cls}--top .@{tabs-prefix-cls}__item-separator {
      left: calc(var(--tv-Tabs-small-separator-padding-horizontal) + 1px);
    }

    &.@{tabs-prefix-cls}--button-card .@{tabs-prefix-cls}__item {
      height: var(--tv-Tabs-small-button-card-height);
      line-height: var(--tv-Tabs-small-button-card-height);
      font-size: var(--tv-Tabs-small-button-card-font-size);
    }
  }

  &:not(.@{tabs-prefix-cls}--button-card):not(.@{tabs-prefix-cls}--card) {
    // 无分隔符场景最外层页签栏盒子
    .@{tabs-prefix-cls}__header:has(> .@{tabs-prefix-cls}__nav-wrap-not-separator) {
      &::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1px;
        z-index: 1;
        background-color: var(--tv-Tabs-border-color);
      }
    }
  }

  // 一层tab页签: card类型
  &&--card {
    &.@{tabs-prefix-cls}--left .@{tabs-prefix-cls}__nav,
    &.@{tabs-prefix-cls}--right .@{tabs-prefix-cls}__nav {
      width: 120px;
    }

    &.@{tabs-prefix-cls}--top {
      & > .@{tabs-prefix-cls}__header .@{tabs-prefix-cls}__item {
        // aurora新增
        &.is-active:first-child {
          border-left: var(--tv-Tabs-item-top-right-border-weight) solid var(--tv-Tabs-border-color);
        }

        &.is-active {
          border-top: var(--tv-Tabs-item-top-right-border-weight) solid var(--tv-Tabs-border-color); // aurora新增
          border-left: 1px solid var(--tv-Tabs-border-color);
          border-right: var(--tv-Tabs-item-top-right-border-weight) solid var(--tv-Tabs-border-color); // aurora新增
          border-radius: 0;

          &:before {
            left: 0;
            top: 0;
          }

          &.is-closable {
            padding: 0 var(--tv-Tabs-item-padding-horizontal);
          }
        }
      }
    }

    &.@{tabs-prefix-cls}--bottom {
      & > .@{tabs-prefix-cls}__header .@{tabs-prefix-cls}__item {
        &.is-active {
          box-shadow: none;

          &:before {
            left: 0;
            bottom: 0;
          }

          &.is-closable {
            padding: 0 var(--tv-Tabs-item-padding-horizontal);
          }
        }
      }
    }

    & > .@{tabs-prefix-cls}__header {
      border-bottom: 1px solid var(--tv-Tabs-border-color);

      .@{tabs-prefix-cls}__item {
        border-bottom: 1px solid transparent;
        border-left: 1px solid var(--tv-Tabs-item-card-border-color); // aurora新增
        border-right: var(--tv-Tabs-item-top-right-border-weight) solid transparent; // aurora新增
        border-top: 1px solid transparent;
        transition:
          color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
          padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

        &:first-child {
          border-left: none;
        }
      }

      .@{tabs-prefix-cls}__nav {
        border: 1px solid var(--tv-Tabs-item-card-border-color); // aurora新增
        border-bottom: none;
        top: 1px;
      }
    }
  }

  // bordercard类型
  &&--border-card {
    background: inherit;
    border-top: 1px solid var(--tv-Tabs-border-color);
    box-shadow: none;

    &.@{tabs-prefix-cls}--top {
      & > .@{tabs-prefix-cls}__header {
        background-color: var(--tv-Tabs-header-dark-bg-color);

        border: none;
        margin: 0;
        border-right: var(--tv-Tabs-dark-border-weight) solid var(--tv-Tabs-border-color); // aurora新增
        border-bottom: var(--tv-Tabs-dark-border-weight) solid var(--tv-Tabs-border-color); // aurora新增

        .@{tabs-prefix-cls}__item {
          transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
          margin: -1px -1px 0;
          color: var(--tv-Tabs-dark-text-color);
          padding: 0 24px;
          border: none;
          height: var(--tv-Tabs-dark-item-height);
          margin: var(--tv-Tabs-dark-margin-top) 4px 0 0; // aurora新增
          line-height: var(--tv-Tabs-dark-item-height);

          &:nth-child(2) {
            padding: 0 12px;
          }

          &.is-active {
            color: var(--tv-Tabs-dark-text-color-active);
            background-color: var(--tv-Tabs-dark-bg-color-active);
            border-top: none;
            border-left: var(--tv-Tabs-dark-border-weight) solid var(--tv-Tabs-border-color); // aurora新增
            border-right: var(--tv-Tabs-dark-border-weight) solid var(--tv-Tabs-border-color); // aurora新增
            border-bottom-color: #fff;
            border-radius: var(--tv-Tabs-dark-border-radius);

            &:before {
              left: 0;
              top: 0;
            }

            &.is-closable {
              padding: 0 var(--tv-Tabs-item-padding-horizontal);
            }
          }

          &:not(.is-active) {
            &:hover {
              border-color: var(--tv-Tabs-border-color); // aurora新增
              color: var(--tv-Tabs-dark-text-color-hover);
            }
          }

          &:first-child {
            margin-left: var(--tv-Tabs-dark-first-margin-left); // aurora新增
            border-left: none; // aurora新增
          }
        }

        .@{tabs-prefix-cls}__nav-prev,
        .@{tabs-prefix-cls}__nav-next {
          fill: #fff;
        }
      }
    }

    .@{tabs-prefix-cls}--border-card {
      .@{tabs-prefix-cls}--bottom {
        border-top: 0;
      }
    }
  }

  // buttoncard类型
  &&--button-card {
    .@{tabs-prefix-cls}__header::after {
      display: none;
    }

    .@{tabs-prefix-cls}__nav-wrap::after {
      background-color: transparent;
    }

    .@{tabs-prefix-cls}__nav {
      background-color: var(--tv-Tabs-button-card-nav-bg-color);
      border-radius: var(--tv-Tabs-button-card-border-radius);
    }

    .@{tabs-prefix-cls}__item {
      color: var(--tv-Tabs-button-card-item-text-color);
      font-size: var(--tv-Tabs-button-card-item-font-size);
      height: var(--tv-Tabs-button-card-item-height);
      line-height: var(--tv-Tabs-button-card-item-height);
      border: 1px solid transparent;

      .@{tabs-prefix-cls} {
        &__icon-close {
          margin-left: -20px;
          margin-right: 24px;
        }

        &__item-separator {
          left: 1px;
        }
      }

      &.is-disabled {
        color: var(--tv-Tabs-item-disabled-text-color);

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

      &:hover {
        color: var(--tv-Tabs-button-card-item-hover-text-color);
      }

      &.is-active {
        background-color: var(--tv-Tabs-button-card-item-active-bg-color);
        color: var(--tv-Tabs-button-card-item-active-text-color);
        border: 1px solid var(--tv-Tabs-button-card-item-active-border-color);
        border-radius: var(--tv-Tabs-button-card-border-radius);
        font-weight: var(--tv-Tabs-button-card-font-weight);
      }

      &__title {
        padding: 0 var(--tv-Tabs-button-card-title-padding-horizontal);
      }
    }
  }

  // 一、二层页签公类
  &&--card,
  &&--border-card {
    &.@{tabs-prefix-cls}--top,
    &.@{tabs-prefix-cls}--bottom {
      & > .@{tabs-prefix-cls}__header .@{tabs-prefix-cls}__item {
        &.is-active:before {
          position: absolute;
          content: '';
          width: 100%;
          height: 3px;
          background: var(--tv-Tabs-header-top-bar-active-bg-color);
        }

        .@{tabs-prefix-cls}__icon-close {
          display: inline-flex;
          justify-content: center;
          align-items: center;
          vertical-align: middle;
          transform-origin: 100% 50%;
        }
      }

      .is-scrollable {
        padding: 0 24px;
      }
    }

    & > .@{tabs-prefix-cls}__header {
      .@{tabs-prefix-cls}__nav-wrap:after {
        content: none;
      }
    }
  }

  // 竖排tab页签
  &&--left {
    .@{tabs-prefix-cls}__header {
      float: left;
      margin-right: 10px;
    }

    .@{tabs-prefix-cls}__nav-wrap {
      margin-right: -1px;
    }

    .@{tabs-prefix-cls}__item {
      text-align: left;
      padding: 0 var(--tv-Tabs-item-vertical-padding-horizontal);
    }

    &.@{tabs-prefix-cls}--card {
      .@{tabs-prefix-cls}__item {
        border-left: 1px solid var(--tv-Tabs-border-color);
        border-right: 1px solid var(--tv-Tabs-border-color);

        &:first-child {
          border-top: none;
        }

        &.is-active {
          border-right-color: transparent;
          border-left: var(--tv-Tabs-item-active-border-weight) var(--tv-Tabs-item-active-border-style)
            var(--tv-Tabs-item-active-border-color);
          border-bottom: none;

          &:first-child {
            border-top: none;
            border-right-color: transparent;
          }
        }
      }

      .@{tabs-prefix-cls}__nav {
        border-right: none;
      }

      .@{tabs-prefix-cls}__new-tab {
        float: none;
      }
    }

    &.@{tabs-prefix-cls}--border-card {
      .@{tabs-prefix-cls}__header {
        border-right: 1px solid var(--tv-Tabs-border-color);
      }

      .@{tabs-prefix-cls}__item {
        border: 1px solid transparent;
        margin: -1px -1px -1px 0;

        &.is-active {
          border: 1px solid var(--tv-Tabs-border-color);
          border-left: none;
        }
      }

      .@{tabs-prefix-cls}--border-card {
        .@{tabs-prefix-cls}__item {
          margin: -1px;
          &.is-bottom {
            &.is-active {
              border-left: 1px solid var(--tv-Tabs-border-color);
            }
          }
        }
      }
    }

    .@{tabs-prefix-cls}__active-bar,
    .@{tabs-prefix-cls}__nav-wrap::after {
      right: auto;
      left: 0;
    }
  }

  &&--right {
    .@{tabs-prefix-cls}__header {
      float: right;
      margin-left: 10px;

      &.is-left {
        margin-left: 0;
      }
    }

    .@{tabs-prefix-cls}__nav-wrap {
      margin-left: -1px;

      &.is-left {
        margin-left: 0;
      }

      &:after {
        left: 0;
        right: auto;
      }
    }

    .@{tabs-prefix-cls}__nav-scroll {
      height: 100%;
    }

    &.@{tabs-prefix-cls}--card {
      .@{tabs-prefix-cls}__item {
        border-bottom: none;
        padding: 0 var(--tv-Tabs-item-vertical-padding-horizontal);

        &.is-active {
          border-left-color: transparent;
          border-right: var(--tv-Tabs-item-active-border-weight) var(--tv-Tabs-item-active-border-style)
            var(--tv-Tabs-item-active-border-color);

          &:first-child {
            border-left: none;
          }

          &.is-bottom {
            border-top: 0;
            border-right: 0;
            border-left-color: var(--tv-Tabs-border-color);
            &:first-child {
              border-left: 1px solid var(--tv-Tabs-border-color);
            }
          }
        }

        &:first-child {
          border-left: 1px solid var(--tv-Tabs-border-color);
          border-top: none;
        }

        &.is-bottom {
          &:first-child {
            border-top: 1px solid var(--tv-Tabs-border-color);
          }
          &.is-active:first-child {
            border-top: none;
          }
        }

        &.is-top,
        &.is-bottom {
          background: transparent;
        }
      }

      .@{tabs-prefix-cls}__nav {
        border-bottom: 1px solid var(--tv-Tabs-border-color);
        &.is-bottom {
          border-top: none;
        }
      }

      .@{tab-pane-prefix-cls} .@{tabs-prefix-cls}--top {
        .@{tabs-prefix-cls}__header {
          margin-left: 0;
        }

        .@{tabs-prefix-cls}__item {
          border-top: none;
          border-bottom: 1px solid var(--tv-Tabs-border-color);

          &.is-active {
            top: 0;
            border-right: 0;
            border-left-color: var(--tv-Tabs-border-color);
            border-bottom: 1px solid #fff;

            &:first-child {
              border-left: 1px solid var(--tv-Tabs-border-color);
            }
          }
        }
      }

      .@{tabs-prefix-cls}--border-card {
        .@{tabs-prefix-cls}__item {
          &.is-top {
            margin: 0 0 -1px -1px;

            &.is-active {
              border-right: 1px solid var(--tv-Tabs-border-color);
            }
          }

          &.is-bottom {
            margin: -1px;

            &.is-active {
              border-right: 1px solid var(--tv-Tabs-border-color);
            }
          }

          &.is-right {
            margin: -1px 0 -1px 0;

            &.is-active {
              border-top: 1px solid var(--tv-Tabs-border-color);
              border-bottom: 1px solid var(--tv-Tabs-border-color);
              border-right: 3px solid var(--tv-Tabs-header-font-active-border-color);
            }
          }
        }

        .@{tabs-prefix-cls}__nav {
          &.is-bottom {
            border-bottom: 0;
          }
        }
      }
    }

    &.@{tabs-prefix-cls}--border-card {
      .@{tabs-prefix-cls}__header {
        border-left: 1px solid var(--tv-Tabs-border-color);
      }

      .@{tabs-prefix-cls}__item {
        border: 1px solid transparent;
        margin: -1px -1px -1px 0;

        &.is-active {
          border-color: var(--tv-Tabs-border-color) transparent;
        }
      }
    }

    &:not(.@{tabs-prefix-cls}--card) {
      .@{tabs-prefix-cls}__active-bar {
        left: auto;
        right: 0;

        &.is-bottom {
          left: 0;
        }

        &.is-left {
          left: 0;
          right: auto;
        }
      }

      .@{tabs-prefix-cls}__nav-wrap {
        &::after {
          left: auto;
          right: 0;
        }

        &.is-left::after {
          left: 0;
          right: auto;
        }
      }
    }

    .@{tab-pane-prefix-cls} {
      .@{tabs-prefix-cls}__header {
        &.is-bottom {
          margin-left: 0;
        }
      }

      .@{tabs-prefix-cls}--top:not(.@{tabs-prefix-cls}--card):not(.@{tabs-prefix-cls}--border-card)
        .@{tabs-prefix-cls}__item {
        border-bottom: 0;
        background-color: transparent;
      }
    }

    .@{tabs-prefix-cls}--bottom:not(.@{tabs-prefix-cls}--card) .@{tabs-prefix-cls}__item {
      border-top: 0;
      background-color: transparent;
    }

    .@{tabs-prefix-cls}--left.@{tabs-prefix-cls}--card .@{tabs-prefix-cls}__item {
      &.is-active:first-child {
        border-left: 3px solid var(--tv-Tabs-header-font-active-border-color);
        border-right: 0;
      }
    }

    .@{tabs-prefix-cls}--left,
    .@{tabs-prefix-cls}--right {
      &:not(.@{tabs-prefix-cls}--card) {
        .@{tabs-prefix-cls}__nav {
          border-bottom: 0;
        }

        .@{tabs-prefix-cls}__item {
          border: 0;
          background-color: transparent;
        }
      }
    }

    .@{tabs-prefix-cls}--left {
      &.@{tabs-prefix-cls}--border-card {
        .@{tabs-prefix-cls}__item.is-active {
          border: 1px solid var(--tv-Tabs-border-color);

          &.is-left {
            border-left: 3px solid var(--tv-Tabs-header-font-active-border-color);
          }
        }
      }
    }
  }

  &&--left,
  &&--right {
    .@{tabs-prefix-cls} {
      &__header,
      &__nav-wrap {
        height: 100%;
        margin-bottom: 0;
      }
    }

    .@{tabs-prefix-cls}__active-bar {
      top: 1px;
      bottom: auto;
      width: 2px;
      height: auto;

      &.is-top {
        height: 3px;
        bottom: 0;
        left: 0;
        top: auto;
      }

      &.is-bottom {
        top: auto;
        bottom: 0;
        height: 3px;
      }
    }

    .@{tabs-prefix-cls}__nav-wrap {
      margin-bottom: 0;

      &.is-scrollable {
        padding: 30px 0;
      }

      &::after {
        height: 100%;
        width: 2px;
        bottom: auto;
        top: 0;
      }

      &.is-top::after {
        left: 0;
        bottom: 0;
        top: auto;
        width: 100%;
        height: 1px;
      }

      &.is-bottom:after {
        left: 0;
        bottom: 0;
        top: auto;
        width: 100%;
        height: 1px;
        background-color: #d9d9d9;
        z-index: 1;
      }
    }

    .@{tabs-prefix-cls}__nav {
      float: none;
    }

    &.@{tabs-prefix-cls}--card {
      .@{tabs-prefix-cls}__item {
        border-top: 1px solid var(--tv-Tabs-border-color);
        background-color: var(--tv-Tabs-header-bg-color);

        &.is-active {
          background: transparent;

          &:last-child {
            border-bottom: none;
          }
        }
      }

      .@{tabs-prefix-cls}__nav {
        border-left: none;
      }
    }

    .@{tabs-prefix-cls}__item {
      display: block;
      font-size: var(--tv-Tabs-font-size-base);
    }

    .@{tabs-prefix-cls}__nav-next,
    .@{tabs-prefix-cls}__nav-prev {
      height: 30px;
      line-height: 30px;
      width: 100%;
      text-align: center;
      cursor: pointer;

      i {
        -webkit-transform: rotateZ(90deg);
        transform: rotateZ(90deg);
      }
    }

    .@{tabs-prefix-cls}__nav-prev {
      left: auto;
      top: 0;
    }

    .@{tabs-prefix-cls}__nav-next {
      right: auto;
      bottom: 0;
    }

    .@{tab-pane-prefix-cls} {
      .@{tabs-prefix-cls}__header,
      .@{tabs-prefix-cls}__nav-wrap {
        float: inherit;
        margin-bottom: -1px;

        &.is-top,
        &.is-bottom {
          float: none;
          margin-right: 0;
        }

        &.is-left {
          float: left;
          margin-bottom: 0;
        }

        &.is-right {
          float: right;
          margin-bottom: 0;
          margin-right: 0;
        }
      }

      .@{tabs-prefix-cls}__item {
        display: inline-block;

        &.is-left,
        &.is-right {
          display: inherit;
        }
      }

      .@{tabs-prefix-cls}__nav {
        width: fit-content;
      }
    }

    &.@{tabs-prefix-cls}--border-card {
      border-top: 0;

      .@{tabs-prefix-cls}__nav-wrap {
        &.is-scrollable {
          padding: 0;
        }
      }

      .@{tabs-prefix-cls}__nav-prev,
      .@{tabs-prefix-cls}__nav-next {
        display: none;
      }

      .@{tabs-prefix-cls}__header {
        border: 1px solid var(--tv-Tabs-border-color);
      }

      .@{tabs-prefix-cls}--border-card {
        .is-top {
          &.@{tabs-prefix-cls}__header {
            border-top: 0;
            border-left: 0;
          }

          &.tiny-tabs__item.is-active {
            border-left: 1px solid var(--tv-Tabs-border-color);
          }
        }

        .is-bottom {
          &.@{tabs-prefix-cls}__header {
            border-left: 0;
          }
        }
      }
    }
  }

  // 在底部显示的页签
  &&--bottom {
    .@{tabs-prefix-cls}__header {
      margin-bottom: 0;
      margin-top: 10px;
    }

    &.@{tabs-prefix-cls}--border-card {
      border-top: 0;

      .@{tabs-prefix-cls}__header {
        background: var(--tv-Tabs-header-bg-color);
        border-bottom: 1px solid var(--tv-Tabs-border-color);
        border-right: 1px solid var(--tv-Tabs-border-color);
        border-top: 1px solid var(--tv-Tabs-border-color);
      }

      .@{tabs-prefix-cls}__nav-wrap {
        margin-top: -1px;
        margin-bottom: 0;

        &.is-top {
          margin-bottom: -1px;
        }
      }

      .@{tabs-prefix-cls}__item {
        border: 1px solid transparent;
        margin: 0 -1px -1px;

        &.is-active {
          background-color: var(--tv-Tabs-dropdown-bg-color);
          border-right-color: var(--tv-Tabs-border-color);
          border-left-color: var(--tv-Tabs-border-color);

          &:before {
            left: 0;
            bottom: 0;
          }
        }
      }

      .@{tabs-prefix-cls}--border-card {
        border-top: 0;
      }
    }

    .@{tabs-prefix-cls}:not(.@{tabs-prefix-cls}--border-card):not(.@{tabs-prefix-cls}--card) {
      .@{tabs-prefix-cls}__header {
        background: transparent;
        border: 0;

        &.is-left,
        &.is-right {
          .@{tabs-prefix-cls}__nav-prev,
          .@{tabs-prefix-cls}__nav-next {
            display: none;
          }

          .@{tabs-prefix-cls}__nav-wrap {
            padding: 0;
          }
        }
      }

      .@{tabs-prefix-cls}__item.is-active {
        background-color: transparent;
        border: none;
      }
    }
  }

  &&--top &__item-separator {
    width: 1px;
    height: var(--tv-Tabs-header-separator-height);
    display: inline-block;
    position: relative;
    left: calc(var(--tv-Tabs-header-separator-padding-horizontal) + 1px);
    background-color: var(--tv-Tabs-header-separator-bg-color);
  }

  &&--top &--button-card &__item &__item-separator {
    height: 16px;
  }

  &&--button-card &__item:last-child &__item-separator,
  &&--button-card &__item.is-active &__item-separator {
    display: none;
  }

  &&--top &--button-card &__item:not(.is-active) &__item-separator {
    left: 1px;
  }

  &&--top,
  &&--bottom {
    .@{tabs-prefix-cls}--left > .@{tabs-prefix-cls}__header .@{tabs-prefix-cls}__item:nth-child(2),
    .@{tabs-prefix-cls}--right > .@{tabs-prefix-cls}__header .@{tabs-prefix-cls}__item:nth-child(2),
    &.@{tabs-prefix-cls}--border-card > .@{tabs-prefix-cls}__header .@{tabs-prefix-cls}__item:nth-child(2),
    &.@{tabs-prefix-cls}--card > .@{tabs-prefix-cls}__header .@{tabs-prefix-cls}__item {
      padding: 0 var(--tv-Tabs-item-padding-horizontal);
    }

    // 这里会涉及到tiny-tabs__item-base的样式，尽量不要同步
    &.@{tabs-prefix-cls}--small:not(.@{tabs-prefix-cls}--card):not(.@{tabs-prefix-cls}--border-card)
      .@{tabs-prefix-cls}__item {
      &-separator-space {
        padding-left: var(--tv-Tabs-small-separator-padding-horizontal);
        padding-right: var(--tv-Tabs-small-separator-padding-horizontal);
        margin-right: 1px;
      }
    }

    // 这里会涉及到tiny-tabs__item-base的样式，尽量不要同步
    &:not(.@{tabs-prefix-cls}--card):not(.@{tabs-prefix-cls}--border-card) .@{tabs-prefix-cls}__item {
      &-separator-space {
        padding-left: var(--tv-Tabs-header-separator-padding-horizontal);
        padding-right: var(--tv-Tabs-header-separator-padding-horizontal);
        margin-right: 1px;

        &:nth-child(2) {
          margin-left: 0px;
        }

        &:not(:nth-child(2)) {
          margin-left: 1px;
        }
      }

      &.is-left {
        padding: 0 24px;
      }
    }
  }

  // 仅渲染头部
  &&--header-only {
    &:is(.@{tabs-prefix-cls}--left) {
      width: 120px;
    }

    &.@{tabs-prefix-cls}--left .@{tabs-prefix-cls}__header {
      float: none;
      margin-right: 0;
      display: block;
    }

    &:is(.@{tabs-prefix-cls}--right) {
      width: 120px;
    }

    &.@{tabs-prefix-cls}--right .@{tabs-prefix-cls}__header {
      float: none;
      margin-left: 0;
      display: block;
    }

    &.@{tabs-prefix-cls}--bottom .@{tabs-prefix-cls}__header {
      margin-top: 0;
    }
  }

  // 动效
  .slideInLeft-transition,
  .slideInRight-transition {
    display: inline-block;
  }

  .slideInRight-enter {
    animation: tab-slide-right-in var(--tv-motion-tab-speed);
  }

  .slideInRight-leave {
    position: absolute;
    left: 0;
    right: 0;
    animation: tab-slide-right-out var(--tv-motion-tab-speed);
  }

  .slideInLeft-enter {
    animation: tab-slide-left-in var(--tv-motion-tab-speed);
  }

  .slideInLeft-leave {
    position: absolute;
    left: 0;
    right: 0;
    animation: tab-slide-left-out var(--tv-motion-tab-speed);
  }

  @-webkit-keyframes slideInRight-enter {
    0% {
      opacity: 0;
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
      -webkit-transform: translateX(100%);
      transform: translateX(100%);
    }

    to {
      opacity: 1;
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
  }

  @keyframes slideInRight-enter {
    0% {
      opacity: 0;
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
      -webkit-transform: translateX(100%);
      transform: translateX(100%);
    }

    to {
      opacity: 1;
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
  }

  @-webkit-keyframes slideInRight-leave {
    0% {
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
      -webkit-transform: translateX(0);
      transform: translateX(0);
      opacity: 1;
    }

    100% {
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
      -webkit-transform: translateX(100%);
      transform: translateX(100%);
      opacity: 0;
    }
  }

  @keyframes slideInRight-leave {
    0% {
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
      -webkit-transform: translateX(0);
      transform: translateX(0);
      opacity: 1;
    }

    100% {
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
      -webkit-transform: translateX(100%);
      transform: translateX(100%);
      opacity: 0;
    }
  }

  @-webkit-keyframes slideInLeft-enter {
    0% {
      opacity: 0;
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%);
    }

    to {
      opacity: 1;
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
  }

  @keyframes slideInLeft-enter {
    0% {
      opacity: 0;
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%);
    }

    to {
      opacity: 1;
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
  }

  @-webkit-keyframes slideInLeft-leave {
    0% {
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
      -webkit-transform: translateX(0);
      transform: translateX(0);
      opacity: 1;
    }

    100% {
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%);
      opacity: 0;
    }
  }

  @keyframes slideInLeft-leave {
    0% {
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
      -webkit-transform: translateX(0);
      transform: translateX(0);
      opacity: 1;
    }

    100% {
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%);
      opacity: 0;
    }
  }
}