@import '../variables.less';
@import '../mixins.less';

.wm-tpl-tabs {
  flex-direction: row;
  display: flex;
  position: relative;
  height: 88px;
  align-items: center;

  .container {
    flex-direction: row;
    padding-left: @spacing-12;
    white-space: nowrap;
    display: block;
    height: 88px;
    line-height: 80px;

    .tab {
      display: inline-flex;
      flex-direction: column;
      align-items: center;

      .text {
        font-size: @font-size-12;
      }

      .line {
        width: 48px;
        position: relative;
        height: 4px;
        border-radius: @border-radius-2;
        background-color: @color-brand;
        margin-top: @spacing-8;
      }

      &.scroll-active {
        height: 44px;
        color: @color-brand;
        border-bottom: 5px solid @color-brand;
      }

      &.active {
        color: @color-brand;

        .text,
        .num {
          color: @color-brand;
        }
      }
    }
  }

  .default {
    .tab {
      margin-right: 32px;
    }
  }

  .space-between {
    display: flex;
    justify-content: space-around;
    height: 88px;
    padding-top: 30px;

    .tab {
      display: flex;
    }
  }

  .expand {
    width: calc(100vw - 144px);

    .tab {
      margin-right: 32px;
    }
  }

  .number {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 104px;

    .tab {
      display: flex;
      padding-top: @spacing-12;
      height: 104px;
    }

    .num {
      font-size: @font-size-12;
      margin-bottom: @spacing-4;
      font-weight: 500;
    }
  }

  .right-linear {
    background: linear-gradient(270deg, #fff 30%, rgba(255, 255, 255, 0) 100%);
    width: 2.13333rem;
    height: 88px;
    position: absolute;
    right: 120px;
  }

  .expandIcon {
    height: 88px;
    width: 96px;
    text-align: center;
    flex-direction: row;
    display: flex;
    justify-content: center;
    align-items: center;

    .more {
      font-size: @font-size-12;
      color: rgba(0, 0, 0, 0.8);
      margin-right: @spacing-4;
    }

    .icon {
      width: 32px;
      height: 32px;
      transition: transform 100ms linear;
      transform: rotate(0deg);
    }

    &Expand {
      width: 144px;

      .icon {
        width: 24px;
        height: 24px;
        transition: transform 100ms linear;
        transform: rotate(0deg);
      }
    }
  }

  .selected {
    .more {
      color: @color-brand;
    }

    .icon {
      transform: rotate(180deg);
    }
  }

  .cate-mask {
    position: absolute;
    left: 0;
    // top: 176px;
    top: 88px;
    width: 100%;
    height: calc(100vh - 44px - 44px);
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;

    .cate-box {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;

      .cate-content {
        background: #fff;
        width: 100%;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;

        .cate-list {
          padding: 20px;
          display: flex;
          flex-wrap: wrap;
          max-height: calc(100vh - 2.7rem);
          overflow-y: scroll;
          flex-direction: row;

          .cate-item {
            width: calc((100% - 84px) / 3);
            height: 56px;
            line-height: 56px;
            background: #f5f5f5;
            font-size: 24px;
            margin: 0 14px 16px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            text-align: center;
            justify-content: center;
            border-radius: 28px;

            taro-text-core,
            text {
              font-size: 24px;
            }

            &-active {
              background: #ff6600;

              taro-text-core,
              text {
                color: #fff;
              }
            }
          }
        }
      }

      .cate-bottom {
        width: 100%;
        height: 100%;
      }
    }
  }
}