@tabs-prefix: ~"@{prefix}tabs";
.@{tabs-prefix} {
  >div {
    cursor: pointer;
    display: inline-block;
    transition: @transition-time all;
    position: relative;
  }
  &-default {
    padding: 0 20px;
    border-bottom: @border;
    line-height:1;
    font-size: @font-size + 1px;
    >div {
      padding: 10px 15px;
      margin-bottom: -4px;
      border-bottom: 3px solid @white-color;
      +div {
        margin-left: 20px;
      }
      &:hover, &.@{tabs-prefix}-selected {
        color: @primary-color;
        border-bottom: 3px solid @primary-color;
      }
    }
  }

  &-card {
    border-bottom: 1px solid @gray1-color;
    line-height:1;
    >div {
      padding: 8px 16px;
      margin-bottom: -1px;
      border-radius: @border-radius @border-radius 0 0;
      border: 1px solid transparent;
      border-top:3px solid transparent;
      +div {
        margin-left: 5px;
      }
      &:hover, &.@{tabs-prefix}-selected {
        color: @primary-color;
        background: @white-color;
        border-color: @gray1-color;
        border-top-color:@primary-color;
        border-bottom-color: @white-color;
      }
    }
  }

  &-menu {
    line-height:1;
    font-size: 15px;
    >div {
      display: block;
      padding: 12px 16px;
      +div {
        margin-top: 5px;
      }
      &:hover, &.@{tabs-prefix}-selected {
        color: @primary-color;
      }
    }
  }
}