@import '../var';

.cl-tabs {
  position: relative;
  
  &__nav-wrap {
    overflow: hidden;
  }
  
  &__swipe {
    user-select: none;
    transition: transform linear .2s;
    
    .cl-tab {
      flex: 0 0 22%
    }
    
    .cl-tabs__nav {
      overflow: visible;
    }
  }
  
  &__nav {
    overflow: hidden;
    transition: transform .5s cubic-bezier(.645, .045, .355, 1);
    position: relative;
    display: flex;
    
    &--line {
      height: 44px;
      
      .cl-tab {
        &::after {
          border-width: 1px 0;
        }
      }
    }
    
    &--card {
      height: 28px;
      margin: 0 15px;
      background-color: $color-white;
      border-radius: 2px;
      border: 1px solid $black-400;
      overflow: hidden;
      
      .cl-tab {
        color: $black-400;
        line-height: 28px;
        border-right: 1px solid $black-400;
        &:last-child {
          border-right: none;
        }
        
        &.cl-hairline::after {
          border-top: 1px solid $black-400;
          border-right: 1px solid $black-400;
          border-bottom: 1px solid $black-400;
          border-left: 1px solid $black-400;
        }
        
        &.cl-tab--active {
          background-color: $black-400;
          color: $color-white;
        }
      }
    }
  }
  
  &__nav-bar {
    z-index: 1;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    background-color: $blue-500;
    transition: transform .3s cubic-bezier(.645, .045, .355, 1);
    transform-origin: 0 0;
  }  
}

.cl-tab {
  position: relative;
  color: $text-color;
  background-color: $color-white;
  font-size: 14px;
  line-height: 44px;
  box-sizing: border-box;
  text-align: center;
  flex: 1;
  
  &:active {
    background-color: $color-white;
  }
  
  &--active {
    color: $blue-500;
  }
  
  &__pane {
    display: none;
    &--select {
      display: block;
    }
  }
}