.menu {
  height: 100%;
  display: flex;
  flex-direction: column;

  & > div {
    flex: 1;
  }

  .tip-group {
    //margin-left: 32px;
    //margin-right: 10px;
    :global(.next-tabs) {
      display: flex;
      flex-direction: column;
      height: 100%;

      :global(.next-tabs-bar) {
        border: none;
        margin: 10px 0 5px;

        :global(.next-tabs-nav-container) {
          padding-right: 5em;
          padding-left: 20px;

          :global(.next-tabs-tab.active:before) {
            width: auto;
            left: 16px;
            right: 16px;
            height: 4px;
            border: none;
            border-radius: 2px;
            background-color: #5584ff;
          }

          :global(.next-tabs-tab-inner) {
            font-weight: bolder;
            padding: 12px 14px;
          }
        }

        :global(.next-tabs-btn-down) {
          
          justify-content: center;
          width: 4em;

          &:before {
            content: '更多';
            font-size: 12px;
          }

          :global(.next-icon) {
            &:before {
              font-size: 12px;
              transform: scale(.6);
            }

            //  &:global(.next-icon-remote,:before) {
            //    font-size: 12px;
            //  }
          }
        }

      }

      :global(.next-tabs-content) {
        position: relative;
        flex: 1;
        overflow: auto;
      }

    }

    :global(.next-tabs-tabpane) {
      display: flex;
      flex-wrap: wrap;
      padding-right: 10px;
      padding-left: 30px;
      padding-bottom: 20px;
      align-content: flex-start;

      &:after {
        content: '';
        min-width: 40%;
        flex: 1;
        border: none;
        height: 0;
        margin-top: 10px;
        cursor: pointer;
        padding: 0 12px;

        &:nth-child(even) {
          margin-left: 6px;
        }
      }

      .tab-item {
        position: relative;
        min-width: 40%;
        flex: 1;
        border: 1px solid #bebebe;
        min-height: 128px;
        margin-top: 10px;
        border-radius: 15px;
        cursor: pointer;
        padding: 10px 12px;
        :global(.xt-done){
          display: none;
        }
        &:nth-child(even) {
          margin-left: 6px;
        }

        &:hover, &.tab-item-active {
          border-color: #3f8cff;
          box-shadow: 0 0 0 1px #3f8cff inset;
        }

        &:hover{
          .tab-item-empty-tpl {
            &:after, :global(.xiatu-rich) {
              color: #666;
            }
          }
        }
        &.tab-item-active {
          :global(.xt-done) {
            background-color: #3f8cff;
            display:block;
            color: #fff;
            font-size: 20px;
            position: absolute;
            width: 28px;
            height: 28px;
            border-radius: 0 15px 0 15px;
            right: 0;
            top: 0;
            line-height: 28px;
            text-align: center;
          }
        }
      }

      .tab-item-empty-tpl {
        display: flex;
        flex-direction: column;
        text-align: center;
        position: relative;
        top: 50%;
        transform: translateY(-50%);

        :global(.xiatu-rich) {
          font-size: 20px;
          color: #d2d2d2;
        }

        &:after {
          content: '使用空白模板';
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          margin-top: 10px;
          color: #bec2c5;
        }
      }

      .tab-item-tip {
        border-radius: 3px;
        display: inline-block;
        padding: 2px 6px;
        line-height: 1.5em;
        min-width: 6em;
        background: #e5f2f8;
        color: #3d87a9;
        text-align: center;

        :global(.xiatu-rich) {
          font-size: 12px;
          display: none;
        }

        &.expert-recom {
          color: #948858;
          background: #fcf5e5;

          :global(.xiatu-rich) {
            display: inline-block;
            color: #d6b884;
          }

          &:after {
            content: '大虾推荐';
            margin-left: .25em;
          }

        }

      }

      .tab-item-title {
        font-size: 12px;
        font-weight: bolder;
        color: #415058;
        line-height: 1.4em;

        margin-top: 6px;

        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        height: 2.8em;
      }

      .tab-item-subtitle {
        font-size: 12px;
        color: #c6c6c6;
        line-height: 1.2em;
        height: 1.2em;
        margin-top: 6px;

        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }

    .tab-item-tips {
      margin-top: 6px;
      height: 2.2em;
      overflow: hidden;

      .tab-item-tips-item {
        display: inline-block;
        background: #fdf2f4;
        border-radius: 4px;
        font-size: 12px;
        color: #fe4a4a;
        line-height: 1.4em;
        padding: 0.35em 0.5em;
        margin-right: 4px;
        max-width: 3em;
        box-sizing: content-box;

        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
}
