:root {
  --ColorPicker-buttonIcon-size: 22px;
  --ColorPicker-input-maxWidth: 200px;
}

.ColorPicker {
  display: flex;
  align-items: center;
}

.ColorPicker-resetIcon {
  margin-left: var(--space-2x);
}

.ColorPicker-input {
  max-width: var(--ColorPicker-input-maxWidth);
}

.ColorPicker-input--hideInput {
  /* visuallyhidden styles borrowed from: https://css-tricks.com/places-its-tempting-to-use-display-none-but-dont/ */
  /* Apparently, if the input was really hidden we can't trigger a click event on it, and the picker doesn't show up. Using a11y styles for visuallyhiding the input we manage to get the picker to pop up (in Safari).
  In Edge we didn't change anything, but since it's self updating and soon it's becoming Chrome-based, the issue will be gone soon (we have very low usage of Doodle coming from Edge browsers) */
  position: absolute; 
  overflow: hidden; 
  clip: rect(0 0 0 0); 
  height: 1px; width: 1px; 
  margin: -1px; padding: 0; border: 0; 
}

.ColorPicker-input--invalid {
  box-shadow: 0 0 0 2px var(--color-red-600);
}

.ColorPicker-buttonIcon {
  display: inline-block;
  width: var(--ColorPicker-buttonIcon-size);
  height: var(--ColorPicker-buttonIcon-size);
  border-radius: var(--border-radius);
}