/*
ColorPicker

A control (hex input and a swatch trigger) that opens a panel in the
overlay chrome, or the panel inline. The panel: a saturation/brightness
area, hue and alpha sliders, channel inputs and swatches. Thumbs are placed
from fractions in custom properties and moved by inset alone; nothing in
the panel changes size as the color changes. The color gradients are data
(written inline by the template); everything else reads tokens.

  .color-picker                      root (data-disabled, data-readonly, data-invalid, data-dragging)
  .color-picker-control              hex input + trigger
  .color-picker-trigger              the swatch button that opens the panel
  .color-picker-content              the panel (popover content, or .is-inline)
  .color-picker-area                 saturation (x) by brightness (y), or xChannel by yChannel
  .color-picker-area-thumb           role=slider (--x, --y)
  .color-picker-slider[data-channel] any channel; data-orientation horizontal | vertical
  .color-picker-value-text           the color as text (output)
  .color-picker-slider-thumb         role=slider (--p)
  .color-picker-swatch               a color chip (--color), over the transparency grid
  .color-picker-channels             format select and channel inputs
  .color-picker-swatches             swatch buttons (data-state checked)
*/

@layer components {

.color-picker {
  --color-picker-thumb:  var(--icon-size);
  --color-picker-track:  calc(var(--icon-size) * 0.75);
  --color-picker-width:  calc(var(--icon-size) * 16);
  --color-picker-grid:   calc(var(--icon-size) * 0.5);

  display:   inline-block;
  max-width: 100%;
}

.color-picker[data-disabled] {
  opacity: var(--opacity-disabled);
}

/* The transparency grid under swatches and the alpha track. */
.color-picker-grid {
  background-color: var(--bg);
  background-image: repeating-conic-gradient(var(--rule) 0 25%, transparent 0 50%);
  background-size:  var(--color-picker-grid) var(--color-picker-grid);
}

/* Control */

.color-picker-control {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
}

.color-picker-control .color-picker-hex {
  width: calc(var(--control-height) * 3.25);
}

.color-picker-trigger {
  display:         inline-flex;
  flex:            none;
  align-items:     stretch;
  box-sizing:      border-box;
  width:           var(--control-height);
  height:          var(--control-height);
  margin:          0;
  padding:         var(--space-1);
  border:          var(--control-border-width) solid var(--control-border);
  border-radius:   var(--radius-control);
  background:      var(--control-bg);
  box-shadow:      var(--control-shadow);
  cursor:          pointer;
}

.color-picker-trigger:hover:not(:disabled) {
  border-color: var(--rule-strong);
}

.color-picker-trigger:focus-visible {
  outline:      none;
  border-color: var(--focus);
  box-shadow:   var(--focus-ring);
}

.color-picker-trigger:disabled {
  cursor: not-allowed;
}

.color-picker[data-invalid] .color-picker-trigger {
  border-color: var(--danger);
}

.color-picker-trigger .color-picker-swatch {
  flex: 1 1 auto;
}

/* Swatch */

.color-picker-swatch {
  position:      relative;
  display:       block;
  overflow:      hidden;
  border-radius: calc(var(--radius-control) * 0.75);
}

.color-picker-swatch::after {
  content:       "";
  position:      absolute;
  inset:         0;
  border-radius: inherit;
  background:    var(--color);
  box-shadow:    inset 0 0 0 var(--control-border-width) color-mix(in srgb, var(--ink) 12%, transparent);
}

/* Panel */

.color-picker-content {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3);
  box-sizing:     border-box;
  width:          var(--color-picker-width);
  max-width:      calc(100vw - 2 * var(--space-4));
}

.popover.color-picker-content {
  padding: var(--space-3);
}


.color-picker-content.is-inline {
  padding:       var(--space-3);
  border:        var(--surface-border-width) solid var(--surface-border);
  border-radius: var(--radius-surface);
  background:    var(--surface-bg);
  box-shadow:    var(--surface-shadow);
}

/* Area */

/* The height comes from the panel width, not the area's own width: when the
   popover is short of room it scrolls, and a scrollbar narrowing the area
   must not change its height, or the scrollbar comes and goes in a loop. */
.color-picker-area {
  position:      relative;
  flex:          none;
  width:         100%;
  height:        calc((var(--color-picker-width) - 2 * var(--space-3)) * 0.75);
  border-radius: var(--radius-control);
  touch-action:  none;
  cursor:        crosshair;
  user-select:   none;
}

.color-picker-area-background {
  position:      absolute;
  inset:         0;
  border-radius: inherit;
  box-shadow:    inset 0 0 0 var(--control-border-width) color-mix(in srgb, var(--ink) 10%, transparent);
}

/* xChannel and yChannel other than saturation by brightness: the colors are
   drawn on a small canvas, scaled up smoothly under the background's ring. */
.color-picker-area-canvas {
  position:      absolute;
  inset:         0;
  display:       block;
  width:         100%;
  height:        100%;
  border-radius: inherit;
}

.color-picker-area-canvas:dir(rtl) {
  transform: scaleX(-1);
}

.color-picker-area-thumb {
  position:      absolute;
  top:           calc(100% * var(--y));
  left:          calc(100% * var(--x));
  box-sizing:    border-box;
  width:         var(--color-picker-thumb);
  height:        var(--color-picker-thumb);
  border:        calc(var(--control-border-width) * 2) solid var(--bg);
  border-radius: var(--radius-pill);
  background:    var(--color);
  box-shadow:    0 0 0 var(--control-border-width) color-mix(in srgb, var(--ink) 40%, transparent), var(--shadow-xs);
  transform:     translate(-50%, -50%);
}

.color-picker-area[dir="rtl"] .color-picker-area-thumb,
.color-picker-area:dir(rtl) .color-picker-area-thumb {
  left:  auto;
  right: calc(100% * var(--x));
  transform: translate(50%, -50%);
}

.color-picker-area-thumb:focus-visible,
.color-picker-slider-thumb:focus-visible {
  outline:    none;
  box-shadow: var(--focus-ring);
}

/* Sliders */

.color-picker-sliders-row {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
}

.color-picker-sliders {
  display:        flex;
  flex:           1 1 auto;
  flex-direction: column;
  gap:            var(--space-2);
  min-width:      0;
}

.color-picker-slider {
  display: block;
}

.color-picker-slider-track {
  position:      relative;
  height:        var(--color-picker-track);
  border-radius: var(--radius-pill);
  touch-action:  none;
  cursor:        pointer;
  user-select:   none;
}

.color-picker-slider-fill {
  position:      absolute;
  inset:         0;
  border-radius: inherit;
  box-shadow:    inset 0 0 0 var(--control-border-width) color-mix(in srgb, var(--ink) 10%, transparent);
}

.color-picker-slider-thumb {
  position:           absolute;
  top:                50%;
  inset-inline-start: calc(var(--color-picker-thumb) / 2 + (100% - var(--color-picker-thumb)) * var(--p));
  box-sizing:         border-box;
  width:              var(--color-picker-thumb);
  height:             var(--color-picker-thumb);
  border:             calc(var(--control-border-width) * 2) solid var(--bg);
  border-radius:      var(--radius-pill);
  background:         var(--color);
  box-shadow:         0 0 0 var(--control-border-width) color-mix(in srgb, var(--ink) 40%, transparent), var(--shadow-xs);
  transform:          translate(-50%, -50%);
}

.color-picker-area-background:dir(rtl) {
  transform: scaleX(-1);
}

/* Under rtl a horizontal track runs min to max from the right: mirror the gradient. */
.color-picker-slider-track:not([data-orientation="vertical"]) .color-picker-slider-fill:dir(rtl) {
  transform: scaleX(-1);
}

.color-picker-slider-thumb:dir(rtl) {
  transform: translate(50%, -50%);
}

/* Vertical sliders stand side by side at a fixed height. */
.color-picker-sliders-row[data-orientation="vertical"] {
  align-items: stretch;
}

.color-picker-sliders[data-orientation="vertical"] {
  flex-direction: row;
  height:         calc(var(--color-picker-width) * 0.5);
}

.color-picker-slider[data-orientation="vertical"] {
  display:        flex;
  flex-direction: column-reverse;
  align-items:    center;
  gap:            var(--space-1);
  height:         100%;
}

.color-picker-slider-track[data-orientation="vertical"] {
  flex:   1 1 auto;
  width:  var(--color-picker-track);
  height: auto;
}

.color-picker-slider-track[data-orientation="vertical"] .color-picker-slider-thumb {
  top:                calc(var(--color-picker-thumb) / 2 + (100% - var(--color-picker-thumb)) * (1 - var(--p)));
  inset-inline-start: 50%;
}

.color-picker-slider-track[data-orientation="vertical"] .color-picker-slider-thumb:dir(rtl) {
  transform: translate(50%, -50%);
}

/* Labeled sliders: a channel letter, the track, the value (Ark Slider Only). */
.color-picker-sliders[data-labels]:not([data-orientation="vertical"]) .color-picker-slider {
  display:               grid;
  grid-template-columns: var(--icon-size) minmax(0, 1fr) calc(var(--icon-size) * 2);
  align-items:           center;
  gap:                   var(--space-2);
}

.color-picker-slider-label,
.color-picker-slider-value {
  color:                var(--ink-dim);
  font-family:          var(--font-ui);
  font-size:            var(--text-caption);
  font-variant-numeric: tabular-nums;
  letter-spacing:       var(--tracking-ui);
  text-align:           center;
}

.color-picker-slider-value {
  text-align: end;
}

.color-picker-slider[data-orientation="vertical"] .color-picker-slider-value {
  min-width:  calc(var(--icon-size) * 2);
  text-align: center;
}

/* Value Text */

.color-picker-value-row {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  min-width:   0;
}

.color-picker-value-text {
  min-width:            0;
  overflow:             hidden;
  color:                var(--ink);
  font-family:          var(--font-mono);
  font-size:            var(--text-ui-sm);
  font-variant-numeric: tabular-nums;
  text-overflow:        ellipsis;
  white-space:          nowrap;
}

.color-picker-value-row .color-picker-value-text {
  flex: 1 1 auto;
}

.color-picker-control .color-picker-value-text {
  flex:  none;
  width: calc(var(--control-height) * 5);
}

.color-picker-control-swatch {
  flex:   none;
  width:  var(--control-height);
  height: var(--control-height);
}

.color-picker-value-swatch {
  flex:   none;
  width:  calc(var(--color-picker-track) * 2 + var(--space-2));
  height: calc(var(--color-picker-track) * 2 + var(--space-2));
}

.color-picker-icon-button {
  display:         inline-grid;
  flex:            none;
  place-items:     center;
  width:           var(--control-height-sm);
  height:          var(--control-height-sm);
  margin:          0;
  padding:         0;
  border:          var(--control-border-width) solid var(--control-border);
  border-radius:   var(--radius-control);
  background:      var(--control-bg);
  color:           var(--ink-soft);
  cursor:          pointer;
}

.color-picker-icon-button:hover:not(:disabled) {
  background: var(--item-highlight);
  color:      var(--item-highlight-ink);
}

.color-picker-icon-button:focus-visible {
  outline:    none;
  box-shadow: var(--focus-ring);
}

.color-picker-icon-button:disabled {
  cursor:  not-allowed;
  opacity: var(--opacity-disabled);
}

.color-picker-icon-button .icon {
  width:  var(--icon-size);
  height: var(--icon-size);
}

/* Channel Inputs */

/* Row one: hex and the format select. Row two: one input per channel. */
.color-picker-channels {
  display:               grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:                   var(--space-2) var(--space-1);
  align-items:           start;
}

.color-picker-channels[data-alpha="false"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.color-picker-channels > .color-picker-channel:first-child {
  grid-column: span 3;
}

.color-picker-channels[data-alpha="false"] > .color-picker-channel:first-child {
  grid-column: span 2;
}

.color-picker-channels[data-format-select="false"] > .color-picker-channel:first-child {
  grid-column: 1 / -1;
}

/* With the format trigger: hex, then the select and the trigger. */
.color-picker-channels[data-format-trigger="true"][data-format-select="true"] > .color-picker-channel:first-child {
  grid-column: span 2;
}

.color-picker-channels[data-alpha="false"][data-format-trigger="true"][data-format-select="true"] > .color-picker-channel:first-child {
  grid-column: span 1;
}

.color-picker-channels[data-format-trigger="true"][data-format-select="false"] > .color-picker-channel:first-child {
  grid-column: span 3;
}

.color-picker-channels[data-alpha="false"][data-format-trigger="true"][data-format-select="false"] > .color-picker-channel:first-child {
  grid-column: span 2;
}

.color-picker-channels .color-picker-format-trigger {
  width: 100%;
}

/* Vertical channel inputs (Ark ChannelInput orientation): one per row, the
   channel letter before its input. */
.color-picker-channels[data-orientation="vertical"] {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.color-picker-channels[data-orientation="vertical"] > .color-picker-channel {
  grid-column:    1 / -1;
  flex-direction: row-reverse;
  align-items:    center;
  gap:            var(--space-2);
}

.color-picker-channels[data-orientation="vertical"][data-format-select="true"] > .color-picker-channel:first-child,
.color-picker-channels[data-orientation="vertical"][data-format-trigger="true"] > .color-picker-channel:first-child {
  grid-column: 1 / -1;
}

.color-picker-channels[data-orientation="vertical"][data-format-select="true"][data-format-trigger="false"] > .color-picker-format {
  grid-column: 1 / -1;
}

.color-picker-channels[data-orientation="vertical"][data-format-select="false"] > .color-picker-format-trigger {
  grid-column: 1 / -1;
}

.color-picker-channels[data-orientation="vertical"] .color-picker-channel-label {
  flex:       none;
  width:      calc(var(--icon-size) * 2);
  text-align: start;
}

.color-picker-channels[data-orientation="vertical"] .color-picker-channel > .input {
  flex: 1 1 auto;
}

.color-picker-channel {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-1);
  min-width:      0;
}

.color-picker-channel-label {
  color:          var(--ink-dim);
  font-family:    var(--font-ui);
  font-size:      var(--text-caption);
  text-align:     center;
  letter-spacing: var(--tracking-ui);
}

.color-picker-channels .input,
.color-picker-channels .native-select-like {
  height:     var(--control-height-sm);
  padding:    0 var(--space-1);
  font-size:  var(--text-ui-sm);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.color-picker-format {
  appearance:     none;
  width:          100%;
  height:         var(--control-height-sm);
  margin:         0;
  padding:        0 var(--space-1);
  border:         var(--control-border-width) solid var(--control-border);
  border-radius:  var(--radius-control);
  background:     var(--control-bg);
  color:          var(--ink);
  font-family:    var(--font-ui);
  font-size:      var(--text-ui-sm);
  text-align:     center;
  text-transform: uppercase;
  cursor:         pointer;
}

.color-picker-format:focus-visible {
  outline:      none;
  border-color: var(--focus);
  box-shadow:   var(--focus-ring);
}

/* Swatches */

.color-picker-swatches {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--space-1);
}

.color-picker-swatch-trigger {
  position:      relative;
  display:       inline-grid;
  place-items:   center;
  width:         calc(var(--control-height-sm) * 0.875);
  height:        calc(var(--control-height-sm) * 0.875);
  margin:        0;
  padding:       0;
  border:        0;
  border-radius: calc(var(--radius-control) * 0.75);
  background:    transparent;
  cursor:        pointer;
}

.color-picker-swatch-trigger > .color-picker-swatch {
  position: absolute;
  inset:    0;
}

.color-picker:not([data-disabled]) .color-picker-swatch-trigger[data-disabled] {
  cursor:  not-allowed;
  opacity: var(--opacity-disabled);
}

.color-picker-swatch-trigger:focus-visible {
  outline:    none;
  box-shadow: var(--focus-ring);
}

.color-picker-swatch-indicator {
  position:   relative;
  z-index:    1;
  display:    inline-grid;
  color:      var(--white, var(--bg));
  filter:     drop-shadow(0 0 1px var(--black, var(--ink)));
  visibility: hidden;
}

.color-picker-swatch-trigger[data-state="checked"] .color-picker-swatch-indicator {
  visibility: visible;
}

.color-picker-swatch-indicator .icon {
  width:  var(--icon-size-sm);
  height: var(--icon-size-sm);
}

.color-picker-hidden {
  display: none;
}

}