.arco-color-picker-panel {
  background-color: var(--color-bg-1);
  width: 238px;

  .rc-color-picker-panel-board {
    margin: 11px 11px 0;
  }

  .rc-color-picker-panel-board-hsv {
    width: 216px;
  }

  .rc-color-picker-panel-ribbon,
  .rc-color-picker-panel-alpha {
    border-radius: 0;
    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: 177px;
    border-radius: 3px;
    margin-left: -6px;
  }

  .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: 0;
    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;
  }
}