.colorPicker {
  background-color: #181b24;
  width: 238px;
  :global {
    .rc-color-picker-panel-board {
      margin: 11px 11px 0;
    }

    .rc-color-picker-panel-board-hsv {
      width: 216px;
    }
    .rc-color-picker-panel-wrap-has-alpha {
      width: 85%;
      margin-left: 35px;
    }

    .rc-color-picker-panel-ribbon,
    .rc-color-picker-panel-alpha {
      border-radius: 0px;
      box-shadow: none;
      span {
        width: 12px;
        height: 12px;
        border-radius: 6px;
        border: 2px solid #fff;
        background-color: transparent;
        margin-left: -6px;
        margin-top: -3px;
      }
    }

    .rc-color-picker-panel-wrap {
      margin-top: 16px;
    }

    // rgb滑块
    .rc-color-picker-panel-wrap-ribbon {
      top: 3px;
      left: 11px;
      right: 50px;
      height: 6px;
      padding: 0 6px;
      border-radius: 3px;
      background-image: linear-gradient(
        to right,
        #ff0000 0%,
        #ff9900 10%,
        #cdff00 20%,
        #35ff00 30%,
        #00ff66 40%,
        #00fffd 50%,
        #0066ff 60%,
        #3200ff 70%,
        #cd00ff 80%,
        #ff0099 90%,
        #ff0000 100%
      );
    }

    .rc-color-picker-panel-ribbon {
      background-image: none;
    }

    // alpha 滑块
    .rc-color-picker-panel-wrap-alpha {
      bottom: 3px;
      left: 11px;
      right: 50px;
      height: 6px;
      padding: 0 6px;
      border-radius: 3px;
      background-image:
        linear-gradient(45deg, #b9b8c1 25%, transparent 0, transparent 75%, #b9b8c1 0),
        linear-gradient(45deg, #b9b8c1 25%, transparent 0, transparent 75%, #b9b8c1 0);
      background-color: #e1e1ea;
      background-size: 6px 6px;
      background-position:
        0 0,
        3px 3px;
    }

    .rc-color-picker-panel-alpha {
      width: auto;
      background-image: none;
    }

    .rc-color-picker-panel-alpha-bg {
      width: 105%;
      border-radius: 3px;
    }

    .rc-color-picker-panel-params-input {
      padding: 2px 11px;
      input {
        outline: none;
        height: 24px;
        border-color: #393b4a;
        background-color: #2d2f38;
        color: #bfbfbf;
        &[type="number"] {
          margin-left: 4px;
        }
      }
    }

    .rc-color-picker-panel-wrap-preview {
      right: 11px;
      border-radius: 50%;
      overflow: hidden;
      input {
        display: none;
      }
    }

    .rc-color-picker-panel-params-lable {
      color: var(--easyv-text-color);
    }

    .rc-color-picker-panel-params-lable-number:hover {
      border-radius: 0px;
      box-shadow: none;
      background-color: transparent;
      cursor: initial;
    }

    // 颜色板的圈
    .rc-color-picker-panel-board span {
      width: 12px;
      height: 12px;
      border-radius: 6px;
      border-width: 2px;
      margin: -6px 0 0 -6px;
    }

    .rc-color-picker-panel-params-hex {
      width: 70px;
    }

    .rc-color-picker-panel-params-lable-hex {
      width: 70px;
    }

    .rc-color-picker-panel-inner {
      box-shadow: none;
      border: none;
      border-radius: 0;
      overflow: hidden;
    }
  }
}

.colorPickerBack {
  :global {
    .rc-color-picker-panel-wrap-has-alpha {
      width: 100%;
      margin-left: 0;
    }
  }
}
.iconBox {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  top: 180px;
  left: 12px;
  cursor: pointer;
  .icon {
    color: rgba(255, 255, 255, 1);
    svg {
      width: 16px;
      height: 16px;
    }
  }
  &:hover {
    background-color: rgba(255, 255, 255, 0.08);
  }
}

.clicked {
  background-color: rgba(58, 137, 254, 1);
  &:hover {
    background-color: rgba(58, 137, 254, 1);
  }
}