:root {
  --transparent-bg: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAIElEQVQ4y2P4TwDcv38fL2YYNWBYGEBIASEwasCwMAAAv7rMLvozJBUAAAAASUVORK5CYII=');
}
.root {
  max-width: 320px;
}

.whiteGrad,
.blackGrad {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.whiteGrad {
  background-image: linear-gradient(to right, #fff, rgba(204, 154, 129, 0));
}

.blackGrad {
  background-image: linear-gradient(to top, #000, rgba(204, 154, 129, 0));
}

.colorBox {
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius-tiny);
  padding-top: 80%; // Setting almost square aspect ratio
  cursor: pointer;
  background-color: var(--color-neutral-0);
  &.dragging {
    cursor: grab;
  }
}

.transparent {
  background-image: var(--transparent-bg);
  background-position: 50% 50%;
}

.colorDot {
  cursor: grab;
  transition:
    width 0.2s,
    height 0.2s,
    box-shadow 0.2s;
  position: absolute;
  background: transparent;
  border: 1px solid rgba(var(--color-neutral-0-rgb), var(--opacity-level-semiopaque));
  box-shadow: 0 0 0 1px rgba(var(--color-neutral-100-rgb), var(--opacity-level-semiopaque));
  width: 15px;
  height: 15px;
  border-radius: 50%;
  transform: translate(-50%, 50%);
}

.hueSlider.hueSlider,
.opacitySlider.opacitySlider {
  --track-height: 8px;
  --point-size: 14px;
}

.hueSlider.hueSlider {
  --track-bg: linear-gradient(
    to right,
    #f00 0,
    #ff0 17%,
    #0f0 33%,
    #0ff 50%,
    #00f 67%,
    #f0f 83%,
    #f00 100%
  );

  .handle {
    background: hsl(calc(360deg * var(--value)) 100% 50%);
    border: 2px solid var(--color-neutral-100);
  }
}

.opacitySlider.opacitySlider {
  --track-bg: var(--transparent-bg);

  .handle {
    background: var(--track-bg);
    background-size: 5000%, 5px;
    background-position-x: calc(100% * var(--value));
    border: 2px solid var(--color-neutral-100);
  }
}