@import '../../../../assets/variable.less';
.module-user-group-panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: #fafafb;
  &-header {
    height: 48px;
    color: @titleOneColor;
    font-weight: 500;
    font-size: 16px;
    line-height: 48px;
    background: #fff;
    border-bottom: 1px solid #f2f3f4;
    .bsicon {
      margin-right: 0px;
      margin-left: 25px;
      cursor: pointer;
    }
    span {
      margin-right: 10px;
      color: #5f6085;
      font-size: 14px;
      cursor: pointer;
    }
  }
  &-content-box {
    height: calc(100% - 48px);
    padding: 16px;
    overflow: hidden;
    border-radius: 8px;
  }
  &-content-box-min {
    height: calc(100% - 112px);
    padding: 16px;
    overflow: hidden;
    border-radius: 8px;
  }

  &-content {
    flex: 1;
    height: calc(100% - 65px);
    padding: 24px;
    overflow-y: auto;
    background: #fff;
    border-radius: 8px 8px 0 0;
    .ant-select-selector {
      background-color: @Gray8 !important;
      border-radius: 4px;
    }
    .group-configs {
      &.tag {
        .config-name {
          // min-width: 88px;
        }
      }
      .group-config-header {
        display: flex;
        grid-gap: 10px;
        gap: 10px;
        align-items: flex-start;
        align-items: center;
        justify-content: space-between;
        height: 42px;
        margin: -24px -24px -6px;
        padding: 0 16px;
        background: #e8efff;
        background: var(--io-i-1, #e8efff);
        border: 0px solid #165dff;
        border: 0px solid var(--io-i, #165dff);
        border-radius: 2px;
        .group-config-txt {
          display: flex;
          align-items: center;
          font-weight: 400;
          font-size: 14px;
          font-style: normal;
          line-height: 22px;
        }
        .group-config-txt:before {
          display: inline-block;
          width: 18px;
          height: 18px;
          margin-right: 10px;
          background-image: url('./../../../../assets/images/icon.png');
          background-size: 18px 18px;
          content: '';
        }
        .group-config-btn {
          padding: 10px 8px;
          color: var(--io-i, #165dff);
          font-weight: 400;
          font-size: 14px;
          font-family: PingFang SC;
          font-style: normal;
          line-height: normal;
        }
      }
      .group-config {
        display: flex;
        &:not(.condition) {
          align-items: center;
        }
        .config-name {
          margin-right: 12px;
          color: @infoThreeColor;
          text-align: right;
        }
        .config-value {
          flex: 1;
          min-width: 0;
          .color-button {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 80px;
            height: @height-base;
            background-color: #fafafb;
            border-radius: 4px;
            cursor: pointer;
            &:hover {
              color: @primary-color;
              background-color: @themeColorOpacity6;
              border: 1px solid @primary-color;
            }
          }
        }
        &.condition {
          .config-name {
            line-height: 30px;
          }
          .config-value {
            display: flex;
            align-items: center;
            .biz-user-condition {
              .ant-input.biz-select-handle-search {
                height: auto;
              }
            }
          }
        }
        &:not(:first-child) {
          margin-top: 24px;
        }
        &.tip {
          margin-top: 12px;
          font-size: 12px;
          .config-value {
            color: @infoThreeColor;
          }
        }
      }
    }
    .footer-buttons {
      display: flex;
      margin-top: 40px;
      .left-space {
        width: 100px;
      }
    }
  }
  &-footer {
    padding: 16px 24px;
    background: #fff;
    border-top: 1px solid @themeColorOpacity6;
    border-radius: 0 0 8px 8px;
  }

  &-color-input.ant-input {
    position: absolute;
    z-index: -99999999;
    width: 0;
    height: 0;
    padding: 0;
    visibility: hidden;
  }

  &-icon {
    margin-right: 5px;
    color: @primary-color;
  }

  &-toolbox {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 64px;
    background: url('./../../../../assets/images/toolboxBg.png');
    background-repeat: no-repeat;
    background-size: 100% 144px;
    &-icon {
      width: 16px;
      height: 16px;
      padding: 0 20px;
    }
    &-header {
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 100%;
      padding: 0 24px;

      &-title {
        margin-right: 16px;
        color: #021429;
        font-weight: 500;
        font-size: 16px;
        font-style: normal;
        line-height: normal;
      }
      &-btn {
        display: flex;
        flex-direction: row;
        cursor: pointer;
      }
      &-txt {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 9px 16px;
        color: #67727f;
        font-weight: 400;
        font-size: 14px;
        font-family: PingFang SC;
        font-style: normal;
        line-height: 14px; /* 100% */
        background-color: #fff;
        border: 1px solid var(--io-n-1, #e6e7ea);
        border-right: 1px solid transparent;
      }
      &-txt-able {
        color: #67727f;
      }
      &-txt-disable {
        color: #ccd0d4;
      }
      &-txt-able:hover {
        color: #165dff;
        border: 1px solid #165dff;
        border-right: 1px solid #165dff !important;
      }
      &-txt:first-child {
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
      }
      &-txt:last-child {
        border-right: 1px solid var(--io-n-1, #e6e7ea);
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
      }
    }
  }
  &-detaile-toolbox {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    background: url('./../../../../assets/images/toolboxBg.png');
    background-repeat: no-repeat;
    background-size: 100% 144px;
    &-icon {
      width: 16px;
      height: 16px;
      padding: 0 20px;
    }
    &-header {
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 100%;
      height: 38px;
      padding: 0 24px 16px;
      border-bottom: 1px solid #e6e7ea;

      &-title {
        margin-right: 16px;
        color: #021429;
        font-weight: 500;
        font-size: 16px;
        font-style: normal;
        line-height: normal;
      }
    }
    &-body {
      width: 100%;
      height: calc(100%-56px);
      &-item {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
        padding: 16px 24px 0;

        &-btn {
          display: flex;
          align-items: center;
          height: 32px;
          margin-right: 16px;
          padding: 10px 16px;
          color: #021429;
          font-weight: 400;
          font-size: 14px;
          border: 1px solid #f2f3f4;
          border-radius: 4px;
          cursor: pointer;
        }
        &-btn:hover {
          color: #165dff;
          border: 1px solid #165dff;
        }

        &-btn-disable {
          display: flex;
          align-items: center;
          height: 32px;
          margin-right: 16px;
          padding: 10px 16px;
          color: #ccd0d4;
          font-weight: 400;
          font-size: 14px;
          border: 1px solid #f2f3f4;
          border-radius: 4px;
        }

        &-txt {
          color: #67727f;
          font-weight: 400;
          font-size: 14px;
        }
      }
    }
  }
}