@import '../../../assets/variable.less';

.module-user-tag-config-panel {
  &-recencyFrequencyMonetary {
    padding: 24px;
    background: #fff;
    border: 1px solid var(--gray-6, #ecedf0);
    border-radius: 8px;

    h4 {
      margin-top: 24px;
      margin-bottom: 16px;
      color: var(--1, #021429);
      font-weight: 500;
      font-size: 14px;
      font-family: PingFang SC;
      font-style: normal;
      line-height: normal;
    }

    h4:nth-child(1) {
      margin-top: 0;
    }

    th {
      background-color: #f2f3f4 !important;
    }

    .ant-table-cell {
      height: 50px !important;
      padding: 0 3.5px !important;

      .ant-input {
        width: 98%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        background: var(--io-n-02, #fafafb) !important;
        border-radius: 4px;
      }
    }

    .ant-table-cell:nth-child(1) {
      padding: 16px !important;
    }

    > ul {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;

      > li {
        display: flex;
        align-items: center;

        > span {
          display: block;
          width: 56px;
          margin-right: 12px;
          color: var(--3, #5f6085);
          font-weight: 400;
          font-size: 14px;
          font-family: PingFang SC;
          font-style: normal;
          line-height: normal;
          text-align: right;
          text-align: right;
        }

        .biz-select-handle {
          width: 224px;
          margin-right: 24px;
          background: #fafafb;
          border-radius: 4px;

          .biz-select-handle-input {
            padding: 0 12px !important;
            border: 1px solid #fafafb !important;
            border-radius: 4px;
          }
        }
      }
    }

    .rfm {
      > ul {
        margin-bottom: 24px;
        font-weight: 400;
        font-size: 14px;
        font-style: normal;
      }

      > ul:nth-child(3) {
        margin-bottom: 0;
      }

      > ul li {
        display: flex;
        align-items: center;
        margin-bottom: 16px;
      }

      > ul li:nth-child(1) {
        gap: 4px;

        color: var(--io-n-6, #67727f);

        span {
          display: block;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 24px;
          height: 24px;
          padding: 10px;
          color: var(--io-w, #fff);
          font-weight: 600;
          background: var(--io-i, #165dff);
          border-radius: 4px;
        }
      }

      > ul li:nth-child(2) {
        > span:nth-child(1) {
          margin-right: 16px;
          color: #5f6085;
        }

        .tishi {
          width: 14px;
          height: 14px;
          margin-left: 8px;
          color: #9aa1a9;
        }
      }

      .fixedData {
        margin-bottom: 0;
        color: var(--io-n-6, #67727f);

        span:nth-child(1) {
          color: #5f6085;
        }

        .biz-select-handle-input {
          width: 225px;
          margin: 0 12px;
          background: var(--gray-8, #fafafb);
          border-radius: 4px;
        }

        .tall {
          color: #29bd52;
          font-weight: 600;
        }
      }

      .rangeData-detail {
        display: flex;
        flex-direction: column;
        gap: 6px;
        align-items: center;
        justify-content: center;
        width: 724px;
        padding: 19px 0;
        border: 1px solid var(--io-n-05, #f2f3f4);
        border-radius: 8px;

        ul {
          display: flex;
          gap: 16px;
          align-items: center;
          width: 100%;
          height: 42px;
          margin-bottom: 0;
          padding-left: 24px;

          li {
            height: 32px;
            margin-bottom: 0;
          }

          .closeOutlined:hover .anticon-close,
          .closeOutlined:active .anticon-close {
            color: #fb5547;
          }
        }
      }

      .rangeData-detail ul:hover {
        background-color: #e8efff;
      }
    }
  }
}