ColorSlider {
  position: relative;
  width: 100%;
  padding: 8px;

  pointer-events: all;

  image {
    pointer-events: none;
    border: 2px solid rgba(255, 255, 255, 0.2); 
    border-radius: 4px;
    aspect-ratio: 2;
    width: 100%;
    margin: 0 auto;
  }

  .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%);
  }
}