@import "./base.less";

.@{css-prefix}.tabs {
  font-size: @base-font-size;
  background: #ffffff;

  &.-card {
    .border;
    .box-shadow;

    .nav {
      background: @hover-background-color;
      margin: 0;

      li {
        &:first-child {
          margin-left: -1px;
        }
      }

      &.top li {
        margin-top: -1px;
      }

      &.bottom li {
        margin-bottom: -1px;
      }
    }
  }

  &.-text {
    .nav {
      border-color: transparent!important;
      li {
        padding: .35714286em .5em;
        border-color: transparent!important;
      }
    }
  }

  &.-button {
    .nav {
      border: none!important;
      li {
        border: none!important;
        border-radius: @border-radius;
        margin: 0 .357em!important;

        &.active, &:hover {
          background-color: rgba(0,0,0,.05);
        }
      }
    }
  }

  .nav {
    padding: 0;
    margin: 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    list-style: none;

    &.center {
      justify-content: center;
    }

    li {
      .padding;
      cursor: pointer;
      border: 1px solid transparent;
      line-height: 1;

      &.active {
        .border;
        color: @active-color;
        background: #fff;
        font-weight: bold;
      }

      &:hover {
        color: @active-color;
      }
    }

    &.top {
      border-bottom: @border-style;
      li {
        margin-bottom: -1px;
        &.active {
          border-bottom-color: #fff;
        }
      }
    }
    &.bottom {
      border-top: @border-style;
      li {
        margin-top: -1px;
        &.active {
          border-top-color: #fff;
        }
      }
    }
  }
}