@import "../global/_variables";

.scui-tabs {
  padding-left: 24px;
  background: $main_9;
  border-top: 1px solid $main_6;
  .disabled {
    pointer-events: none;
    color: $main_5 !important;
  }
  .tabs {
    height: 63px;
    .tab {
      height: 100%;
      padding-top: 32px;
      padding-left: 16px;
      padding-right: 16px;
      display: inline-block;
      cursor: pointer;
      color: $blank_2;
      font-size: 13px;
      font-weight: 300;
      &:hover {
        background: $main_7;
      }
      &.active-tab {
        background: $main_8;
      }
    }
  }

  .border-wrap {
    position: relative;
    .border-top {
      display: inline-block;
      background: $prim_5;
      position: absolute;
      height: 4px;
      bottom: 59px;
      transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    }
  }

  &.tabs-drawer {
    background: $prim_7;
    border-top: 1px solid $prim_7;
    .disabled {
      color: $prim_5 !important;
    }
    .border-wrap {
      .border-top {
        background: $prim_3;
        bottom: 59px;
      }
    }
    .tabs {
      height: 63px;
      .tab {
        color: $blank_2;
        &:hover {
          background: $prim_6;
        }
        &.active-tab {
          background: $prim_5;
        }
      }
    }

  }
}