$prefix-cls: '#{$name-prefix}-mai-tab';
$mai-tab-bg: #022950;

.#{$prefix-cls} {
  margin-bottom: 60px;

  &--title-wrap {
    position: relative;
    width: 300px;
    height: 50px;
    margin-bottom: 45px;
    .#{$prefix-cls}--title-bg {
      position: absolute;
      z-index: 1;
      width: 230px;
      height: 100%;
      background-color: $mai-tab-bg;
      transform: skewX(-30deg);

      &::after,
      &::before {
        content: '';
        position: absolute;
        height: 100%;
      }

      &::after {
        width: 95%;
        background-color: transparent;
        border-color: transparent;
        border-width: 3px;
        border-left-color: $mai-tab-bg;
        border-bottom-color: $mai-tab-bg;
        left: -10px;
        bottom: -10px;
      }

      &::before {
        width: 14%;
        background-color: $mai-tab-bg;
        left: -50px;
        bottom: 0;
      }
    }

    h3 {
      //text-align: center;
      //padding-right: 80px;
      position: absolute;
      left: 100px;
      z-index: 2;
      font-size: 24px;
      color: $white;
      line-height: 50px;
      letter-spacing: 2px;
    }
  }

  &--item {
    width: 300px;
    padding-right: 25px;

    .title {
      color: #999;
      font-size: 20px;
      width: 160px;
      overflow: hidden;
      text-overflow: ellipsis;
      //margin-right: 90px;
    }

    &-title {
      width: 180px;
      cursor: pointer;
      margin-bottom: 32px;
    }

    &-active {
      position: relative;

      &::before {
        content: '';
        position: absolute;
        width: 8px;
        height: 24px;
        left: -30px;
        background-color: $mai-tab-bg;
      }

      .title {
        font-weight: 600;
        color: $mai-tab-bg;
      }
    }
  }
}