@mixin tab-theme($color) {
  .ui-tab-header-item {
    &.active {
      color: $color;
    }
  }

  .ui-tab-header-line {
    .line{
      background: $color;
    }
  }
}

.ui-tab {
  &-perch{
    height: r(45);
  }
  @include tab-theme(#9b9b9b);

  &.theme-info {
    @include tab-theme($base-theme-info);
  }
  &.theme-success {
    @include tab-theme($base-theme-success);
  }
  &.theme-warning {
    @include tab-theme($base-theme-warning);
  }
  &.theme-error {
    @include tab-theme($base-theme-error);
  }
}

.ui-tab-header {
  position: relative;

  ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    height: r(45);
    line-height: r(45);
    // border-top: 1px solid $base-color-f5f5f5;
    border-bottom: 1px solid $base-color-f5f5f5;
  }
  &.ui-tab-fixed{
    background-color:#fff;
    position:fixed;
    z-index:1001;
    top:r(-45);
    left:0;
    right:0;
    animation:toFixed .18s .08s linear both;
  }
}

.ui-tab-header-line {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: r(3);
  transition: left .3s ease-out;
  .line{
    display:block;
    width:70%;
    height: r(3);
    border-radius:30px;
    margin:0 auto;
  }
}

.ui-tab-header-item {
  flex: 1;
  margin-bottom: -1px;
  text-align: center;
  font-size: r(15);
  color: #A2A9B1;
  cursor: pointer;
  
  &:nth-of-type(n+2) {
    position: relative;

    &:after {
      display: inline-block;
      content: '';
      position: absolute;
      top: 28%;
      left: 0;
      width: 1px;
      bottom:28%;
      background: #eff5fe;
    }
  }

  &.active {
    color: $base-theme-success;
  }
}

.ui-tab-body {
  position: relative;
  -webkit-transition: height .3s;
  transition: height .3s;
}

.ui-tab-body-item {
  display: none;
  line-height: normal;
  
  &.ui-tab-body-item-active {
    display: block;
  }
}

@keyframes toFixed {
  0% { top: r(-45); }
  100% { top:0;}
}