HairColorPicker {
 flex-direction: column;
 flex-shrink: 0;
 gap: 10px;
 margin-top: 12px;
 padding: 12px;
 border: 1px solid #71613a;
 border-radius: 4px;
 background-color: #191b14;

 HairColorSquare {
  position: relative;
  height: 170px;
  width: 100%;
  flex-shrink: 0;
  cursor: crosshair;
  .saturation-wash, .brightness-wash { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
  .saturation-wash { background-image: linear-gradient(90deg, #ffffff, #ffffff00); }
  .brightness-wash { background-image: linear-gradient(180deg, #00000000, #000000); }
  .color-marker { position: absolute; width: 12px; height: 12px; margin-left: -6px; margin-top: -6px; border: 2px solid white; border-radius: 50%; box-shadow: 0 0 2px 1px black; pointer-events: none; }
 }
 .hue-track { background-image: linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); border-radius: 4px; }
 .hair-hue { margin: 0; width: 100%; }
 .hair-color-value { align-items: center; gap: 8px; font-size: 13px; }
}