html[dir="rtl"] {
  @component-namespace el {
    @b tabs {
      @e active-bar {
        left: auto;
        right: 0;
      }

      @e new-tab {
        float: left;
        margin: 12px 10px 9px 0;
      }

      @e nav-next {
        right: auto;
        left: 0;
      }

      @e nav-prev {
        left: auto;
        right: 0;
      }

      @e nav {
        float: right;
      }

      @e item {
        & .el-icon-close {
          margin-left: 0;
          margin-right: 5px;
        }
      }

      @m card {
        >.el-tabs__header .el-tabs__item .el-icon-close {
          right: auto;
          left: -2px;
        }
      }

      @m border-card {
        >.el-tabs__header .el-tabs__item {
          &.is-active {
            background-color: var(--color-white);
            border-right-color: var(--color-base-gray);
            border-left-color: var(--color-base-gray);

            &:first-child {
              border-left-color: transparent;
              border-right-color: var(--color-base-gray);
            }

            &:last-child {
              border-right-color: transparent;
              border-left-color: var(--color-base-gray);
            }
          }
        }
      }
    }

    .expand-trigger {
      left: auto;
      right: 0;
    }
  }
}