ColorSlider {
  position: relative;
  width: 100%;
  padding: 8px;
  justify-content: center;
  align-items: center;

  pointer-events: all;

  img {
    pointer-events: none;
    border: 0.5px solid white;
    box-shadow: 0 0 5px rgba( 255, 255, 255, 0.5 );
    width: 360px;
    height: 150px;
  }

  .cursor
  {
    pointer-events: none;
    position: absolute;
    border-radius: 100px;
    width: 16px;
    aspect-ratio: 1;
    border: 2px solid rgba( 255, 255, 255, 0.75 );
    box-shadow: 2px 2px 10px rgba( 0, 0, 0, 0.75 );
    transform: translateX(-50%) translateY(-50%);
  }
}