.ui-color-picker{display:inline-flex;width:fit-content;max-width:100%;vertical-align:middle}.ui-color-picker__popover{width:320px;max-width:calc(100vw - 24px);border-radius:var(--radius-panel)}.ui-color-picker__panel{display:grid;gap:var(--space-10)}.ui-color-picker__header{display:flex;min-height:24px;align-items:center;justify-content:space-between;gap:var(--space-10);font-family:var(--font-main)}.ui-color-picker__header span{min-width:0;overflow:hidden;font-size:var(--font-size-m);font-weight:700;line-height:var(--line-height-tight);color:var(--color-foreground);text-overflow:ellipsis;white-space:nowrap}.ui-color-picker__close{appearance:none;display:inline-flex;width:24px;height:24px;flex:0 0 auto;align-items:center;justify-content:center;border:0;border-radius:var(--radius-field);background:transparent;font:inherit;color:var(--color-foreground-60);cursor:pointer;transition:color var(--duration-fast) var(--ease-standard),opacity var(--duration-fast) var(--ease-standard)}.ui-color-picker__saturation{position:relative;height:280px;overflow:hidden;border-radius:var(--radius-field);background:linear-gradient(to top,var(--color-brand-absolute-black),transparent),linear-gradient(to right,var(--color-brand-absolute-white),transparent),var(--ui-color-picker-hue);box-shadow:inset 0 0 0 1px rgb(from var(--color-brand-absolute-black) r g b/16%),inset 0 0 0 2px rgb(from var(--color-brand-absolute-white) r g b/22%);cursor:crosshair;touch-action:none}.ui-color-picker__saturation-thumb{position:absolute;z-index:1;width:18px;height:18px;border:2px solid var(--color-brand-absolute-white);border-radius:var(--radius-pill);background:var(--ui-color-picker-color);box-shadow:0 0 0 1px rgb(from var(--color-brand-absolute-black) r g b/28%),0 1px 2px rgb(from var(--color-brand-absolute-black) r g b/28%);transform:translate(-50%,-50%);pointer-events:none}.ui-color-picker__range{display:block;height:14px}.ui-color-picker__range input{appearance:none;width:100%;height:14px;margin:0;border-radius:var(--radius-pill);box-shadow:0 0 0 1px rgb(from var(--color-brand-absolute-black) r g b/12%),0 1px 1px rgb(from var(--color-brand-marengo) r g b/10%),inset 0 1px 1px rgb(from var(--color-brand-absolute-black) r g b/22%),inset 0 -1px rgb(from var(--color-brand-absolute-white) r g b/32%);cursor:pointer}.ui-color-picker__range--hue input{background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.ui-color-picker__range--alpha input{background:linear-gradient(45deg,rgb(from var(--color-brand-black) r g b/12%) 25%,transparent 25%),linear-gradient(-45deg,rgb(from var(--color-brand-black) r g b/12%) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgb(from var(--color-brand-black) r g b/12%) 75%),linear-gradient(-45deg,transparent 75%,rgb(from var(--color-brand-black) r g b/12%) 75%),linear-gradient(to right,transparent,var(--ui-color-picker-alpha-color));background-position:0 0,0 4px,4px -4px,-4px 0,0 0;background-size:8px 8px,8px 8px,8px 8px,8px 8px,100% 100%}.ui-color-picker__range--alpha,.ui-color-picker__popover[data-alpha=false] .ui-color-picker__range--hue{margin-bottom:var(--space-8)}.ui-color-picker__range input::-webkit-slider-thumb{appearance:none;box-sizing:border-box;width:16px;height:16px;border:0;border-radius:var(--radius-pill);background:var(--color-brand-absolute-white);box-shadow:0 0 0 1px rgb(from var(--color-brand-absolute-black) r g b/18%),0 1px 1px rgb(from var(--color-brand-marengo) r g b/14%);transition:box-shadow var(--duration-fast) var(--ease-standard),transform var(--duration-fast) var(--ease-standard)}.ui-color-picker__range input::-moz-range-thumb{box-sizing:border-box;width:16px;height:16px;border:0;border-radius:var(--radius-pill);background:var(--color-brand-absolute-white);box-shadow:0 0 0 1px rgb(from var(--color-brand-absolute-black) r g b/18%),0 1px 1px rgb(from var(--color-brand-marengo) r g b/14%);transition:box-shadow var(--duration-fast) var(--ease-standard),transform var(--duration-fast) var(--ease-standard)}.ui-color-picker__fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-8)}.ui-color-picker__popover[data-alpha=false] .ui-color-picker__fields{width:100%;grid-template-columns:minmax(0,1fr)}.ui-color-picker__field{min-width:0;width:100%}.ui-color-picker__field--hex .ui-input__control{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-variant-numeric:tabular-nums;text-transform:uppercase}.ui-color-picker__field--alpha .ui-input__control{font-variant-numeric:tabular-nums;text-align:right}.ui-color-picker__field[data-invalid=true] .ui-field__surface{box-shadow:0 0 0 1px var(--color-destructive),0 1px 2px rgb(from var(--color-destructive) r g b/24%)}.ui-color-picker__hint{margin:-3px 0 0;font-family:var(--font-main);font-size:var(--font-size-s);line-height:1.25;color:var(--color-destructive)}.ui-color-picker__sr-only{position:absolute;width:1px;height:1px;overflow:hidden;white-space:nowrap;clip-path:inset(50%)}.ui-color-swatch{appearance:none;position:relative;display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;overflow:hidden;border:1px solid var(--color-brand-absolute-white);border-radius:var(--radius-field);background-color:var(--color-brand-absolute-white);background-image:linear-gradient(45deg,rgb(from var(--color-brand-black) r g b/10%) 25%,transparent 25%),linear-gradient(-45deg,rgb(from var(--color-brand-black) r g b/10%) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgb(from var(--color-brand-black) r g b/10%) 75%),linear-gradient(-45deg,transparent 75%,rgb(from var(--color-brand-black) r g b/10%) 75%);background-position:0 0,0 4px,4px -4px,-4px 0;background-size:8px 8px;box-shadow:inset 0 0 0 1px rgb(from var(--color-brand-absolute-black) r g b/12%),0 1px 2px rgb(from var(--color-brand-marengo) r g b/18%);cursor:default;transition:box-shadow var(--duration-fast) var(--ease-standard),opacity var(--duration-fast) var(--ease-standard),transform var(--duration-fast) var(--ease-standard)}.ui-color-swatch--s{width:var(--control-size-s);height:var(--control-size-s)}.ui-color-swatch--m{width:var(--control-height-s);height:var(--control-height-s)}.ui-color-swatch--l{width:var(--control-height-m);height:var(--control-height-m)}.ui-color-swatch--circle{border-radius:var(--radius-pill)}.ui-color-swatch--selected,.ui-color-swatch[data-selected=true]{box-shadow:inset 0 0 0 1px rgb(from var(--color-brand-absolute-black) r g b/18%),0 0 0 2px var(--color-brand-absolute-white),0 0 0 4px var(--color-brand-black)}.ui-color-swatch[data-interactive=true]{cursor:pointer}.ui-color-swatch__ring{position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 2px rgb(from var(--color-brand-absolute-white) r g b/35%);pointer-events:none}.ui-color-swatch__surface{position:absolute;inset:0;background:var(--ui-color-picker-color)}.ui-color-picker__saturation:focus-visible,.ui-color-picker__range input:focus-visible,.ui-color-picker__close:focus-visible,.ui-color-swatch:focus-visible{outline:2px solid var(--color-ring);outline-offset:2px}.ui-color-picker__range input:disabled,.ui-color-picker__close:disabled,.ui-color-swatch:disabled,.ui-color-swatch[data-disabled]{cursor:default;opacity:.56}@media(hover:hover){.ui-color-picker__close:hover:not(:disabled){color:var(--color-foreground)}.ui-color-swatch[data-interactive=true]:hover:not(:disabled,[data-disabled]){box-shadow:inset 0 0 0 1px rgb(from var(--color-brand-absolute-black) r g b/18%),0 2px 5px -2px rgb(from var(--color-brand-marengo) r g b/42%);transform:translateY(-1px)}}