@w-tabs:~ "w-tabs";

.@{w-tabs} {
  &-bar {
    position: relative;
    overflow-x: auto;
    height: calc(100% + 17px);
  }
  &-nav {
    position: relative;
  }
  &-nav-hidden {
    display: flex;
    overflow-y: auto;
    padding: 5px 10px 5px 5px;
    max-height: 200px;
    flex-direction: column;
    :hover {
      background: #d9d9d9;
    }
  }
  &-item {
    padding: 7px 10px;
    display: inline-block;
    height: 100%;
    font-size: 14px;
    box-sizing: border-box;
    position: relative;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s;
    &.active {
      color: #008ef0;
    }
    &.disabled {
      cursor: not-allowed;
      user-select: none;
      color: rgba(0, 0, 0, 0.25);
    }
  }
  &-flow-content {
    margin-left: 5px;
    padding: 0px 10px 0px 10px;
    box-shadow: 1px 0px 0px #d9d9d9 inset;
    cursor: pointer;
  }
}

.@{w-tabs} {
  &-card > div > div > &-bar > &-nav::after,
  &-line > div > div > &-bar > &-nav::after {
    content: '';
    position: relative;
    display: block;
    border-bottom: 1px solid #d9d9d9;
  }
}

.@{w-tabs} {
  &-line > div > div > &-bar > &-nav > &-slide {
    background-color: #108ee9;
    box-sizing: border-box;
    bottom: 0;
    position: absolute;
    height: 1px;
    left: 0;
    width: 20px;
    z-index: 1;
    transition: all 0.3s;
  }
}

.@{w-tabs} {
  &-card > div > div > &-bar > &-nav::after {
    content: '';
    position: relative;
    display: block;
    border-bottom: 1px solid #d9d9d9;
  }
  &-card > div > div > &-bar > &-nav > &-item {
    margin: 0;
    border: 1px solid #d9d9d9;
    border-bottom: 0;
    padding: 7px 16px;
    border-radius: 4px 4px 0 0;
    background: #f9f9f9;
    margin-right: 5px;
    bottom: -1px;
  }
  &-card > div > div > &-bar > &-nav > &-item.active {
    background: #fff;
    z-index: 1;
  }
}