.color-picker {
  .color-picker-color-dot-wrapper {
    background: repeating-conic-gradient(#e0e0e0 0deg 25%, white 0deg 50%);
    background-size: 0.9rem 0.9rem;
    border-radius: 100%;
    height: 2rem;
    width: 2rem;
  }

  .color-picker-color-dot {
    display: inline-table;
    border-radius: 100%;
    height: inherit;
    width: inherit;
  }

  .color-picker-canvas-dot {
    height: 1rem;
    width: 1rem;
    position: absolute;
    background: transparent;
    border-radius: 100%;
    box-shadow: 0 0 0 2px #fff, inset 0 0 0 1px rgba(0, 0, 0, 0.4);
    user-select: none;
    pointer-events: none;
  }

  .color-picker-canvas-wrapper {
    position: relative;
    background: repeating-conic-gradient(#e0e0e0 0deg 25%, white 0deg 50%);
    background-size: 0.9rem 0.9rem;

    canvas {
      display: block;
    }
  }

  .color-picker-swatches .color-picker-swatches-color {
    height: 20px;
    width: 100%;
    border-radius: 0.2rem;
    cursor: pointer;
  }

  .color-picker-swatches {
    overflow-y: auto;
    overflow-x: hidden;
  }

  #hueRange::-webkit-slider-runnable-track {
    background: linear-gradient(
      90deg,
      red,
      #ff0 16.66%,
      #0f0 33.33%,
      #0ff 50%,
      #00f 66.66%,
      #f0f 83.33%,
      red
    );
  }

  #hueRange::-moz-range-track {
    background: linear-gradient(
      90deg,
      red,
      #ff0 16.66%,
      #0f0 33.33%,
      #0ff 50%,
      #00f 66.66%,
      #f0f 83.33%,
      red
    );
  }

  #alphaRange::-webkit-slider-runnable-track {
    background: var(--track-background, #ddd);
  }

  #alphaRange::-moz-range-track {
    background: var(--track-background, #ddd);
  }

  .color-picker-range-alpha {
    height: 0.25rem;
    background: repeating-conic-gradient(#e0e0e0 0deg 25%, white 0deg 50%);
    background-size: 0.2rem 0.2rem;

    input {
      position: relative;
      top: -10px;
    }
  }

  .color-picker-color-inputs-wrapper input {
    padding-left: 0.24rem;
    padding-right: 0.24rem;
    background-color: cmyk(0%, 51%, 51%, 34%);
  }
}