@oscarpalmer/oui 0.37.0 → 0.39.0

package/dist/css/color-picker.css

@@ -0,0 +1,859 @@
+/*! https://github.com/oscarpalmer/oui */
+
+
+
+
+:where(oui-color-picker) {
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 1em;
+  outline: none;
+}
+
+:where(oui-color-picker[inline] [oui-color-picker-content],
+[oui-color-picker-content]:popover-open) {
+  display: flex !important;
+  flex-flow: column nowrap;
+}
+
+:where([oui-color-picker-anchor]) {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: stretch;
+}
+:where([oui-color-picker-anchor] > [oui-color-picker-copy]) {
+  margin: 0 0 0 1em;
+}
+:where([oui-color-picker-anchor] *) {
+  position: relative;
+}
+:where([oui-color-picker-anchor] *:focus) {
+  z-index: 1;
+}
+@media (hover: hover) {
+  :where([oui-color-picker-anchor] *:hover) {
+    z-index: 1;
+  }
+}
+
+:where([oui-color-picker-content]) {
+  flex-flow: column nowrap;
+  gap: 1em;
+}
+:where([oui-color-picker-content][popover]) {
+  --margin-bottom: 0.5em;
+  --margin-left: 0.5em;
+  --margin-right: 0.5em;
+  --margin-top: 0.5em;
+  inset-block: var(--margin-top) var(--margin-bottom);
+  inset-inline: var(--margin-left) var(--margin-right);
+}
+:where([oui-color-picker-content][popover])[oui-position$=bottom i] {
+  --margin-bottom: 0;
+}
+:where([oui-color-picker-content][popover])[oui-position$=end i] {
+  --margin-right: 0;
+}
+:where([oui-color-picker-content][popover])[oui-position$=start i] {
+  --margin-left: 0;
+}
+:where([oui-color-picker-content][popover])[oui-position$=top i] {
+  --margin-top: 0;
+}
+:where([oui-color-picker-content][popover]) {
+  box-shadow: inset 0 1px 0 0 transparent, 0 0 0 1px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.25)), 0 1px 2px -0.5px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.25)), 0 2px 4px -1px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.25)), 0 4px 8px -2px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.25)), 0 8px 16px -4px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.25)), 0 16px 32px -8px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.25)), 0 32px 64px -16px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.25)), 0 64px 128px -32px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.25));
+  padding: 1em;
+  min-width: anchor-size(width);
+  border-radius: 0.25em;
+}
+:where([oui-color-picker-content][popover]:not(:has(> [oui-color-picker-opacity]))) {
+  border-radius: 0.25em 0.25em 0.75em 0.75em;
+}
+
+:where([oui-color-picker-copy]) {
+  --oui-background-percentage: 50%;
+  --oui-background-value: var(--oui-gray-2);
+  --oui-foreground-percentage: 0%;
+  --oui-foreground-value: var(--oui-gray-8);
+  --oui-outline-percentage: 100%;
+  --oui-outline-value: var(--oui-gray-5);
+  --oui-shadow-inset: color-mix(in oklab, var(--oui-absolute), transparent 75%);
+  --oui-shadow-percentage: 82.5%;
+  --oui-shadow-value: color-mix(
+  	in oklab,
+  	var(--oui-outline-value),
+  	transparent var(--oui-shadow-percentage)
+  );
+  box-shadow: inset 0 1px 0 0 var(--oui-shadow-inset), 0 0 0 1px var(--oui-shadow-value), 0 1px 2px -0.5px var(--oui-shadow-value), 0 2px 4px -1px var(--oui-shadow-value), 0 4px 8px -2px var(--oui-shadow-value);
+  padding: 0.5em 0.75em;
+  display: inline-flex;
+  flex-flow: row wrap;
+  gap: 0.75em;
+  align-items: center;
+  border-radius: 0.25em;
+  background-color: color-mix(in oklab, var(--oui-background-value), transparent var(--oui-background-percentage));
+  outline: 4px solid color-mix(in oklab, var(--oui-outline-value), transparent var(--oui-outline-percentage));
+  border: none;
+  color: color-mix(in oklab, var(--oui-foreground-value), transparent var(--oui-foreground-percentage));
+  line-height: 1.25;
+  position: relative;
+  transition: 0.125s ease-in-out;
+  transition-property: background, outline, box-shadow, color;
+}
+:where([oui-color-picker-copy])::after {
+  content: "";
+  width: 1em;
+  height: 1em;
+  display: inline-flex;
+  opacity: 0;
+  background-color: color-mix(in oklab, var(--oui-foreground-value), transparent var(--oui-foreground-percentage));
+  -webkit-mask-image: url("");
+  mask-image: url("");
+  -webkit-mask-position: center;
+  mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: 1em 1em;
+  mask-size: 1em 1em;
+  pointer-events: none;
+  transition: 0.125s ease-in-out;
+  transition-property: background-color, color, opacity, -webkit-mask-image;
+  transition-property: background-color, color, mask-image, opacity;
+  transition-property: background-color, color, mask-image, opacity, -webkit-mask-image;
+  position: absolute;
+  inset: 50% auto auto 50%;
+  transform: translate3d(-50%, -50%, 0);
+}
+:where([oui-color-picker-copy]):has(.oui-icon:is(:first-child))::after {
+  inset: auto;
+  transform: none;
+}
+:where([oui-color-picker-copy]):has(.oui-icon:is(:last-child))::after {
+  inset: auto 0.75em auto auto;
+  transform: none;
+}
+:where([oui-color-picker-copy]):focus-visible {
+  --oui-outline-percentage: 75%;
+}
+@media (hover: hover) {
+  :where([oui-color-picker-copy]):not([disabled], [aria-disabled=true i]):hover {
+    --oui-background-percentage: 50%;
+    --oui-foreground-percentage: 25%;
+    --oui-shadow-percentage: 90%;
+  }
+}
+:where([oui-color-picker-copy]):not([disabled], [aria-disabled=true i])[aria-busy=true i]:not(:has(.oui-icon:is(:first-child, :last-child))), :where([oui-color-picker-copy]):not([disabled], [aria-disabled=true i])[data-state=busy i]:not(:has(.oui-icon:is(:first-child, :last-child))), :where([oui-color-picker-copy]):not([disabled], [aria-disabled=true i])[data-state=error i]:not(:has(.oui-icon:is(:first-child, :last-child))), :where([oui-color-picker-copy]):not([disabled], [aria-disabled=true i])[data-state=loading i]:not(:has(.oui-icon:is(:first-child, :last-child))), :where([oui-color-picker-copy]):not([disabled], [aria-disabled=true i])[data-state=success i]:not(:has(.oui-icon:is(:first-child, :last-child))) {
+  color: transparent;
+}
+:where([oui-color-picker-copy]):not([disabled], [aria-disabled=true i])[aria-busy=true i]::after, :where([oui-color-picker-copy]):not([disabled], [aria-disabled=true i])[data-state=busy i]::after, :where([oui-color-picker-copy]):not([disabled], [aria-disabled=true i])[data-state=error i]::after, :where([oui-color-picker-copy]):not([disabled], [aria-disabled=true i])[data-state=loading i]::after, :where([oui-color-picker-copy]):not([disabled], [aria-disabled=true i])[data-state=success i]::after {
+  opacity: 1;
+}
+:where([oui-color-picker-copy]):not([disabled], [aria-disabled=true i])[aria-busy=true i] .oui-icon, :where([oui-color-picker-copy]):not([disabled], [aria-disabled=true i])[data-state=busy i] .oui-icon, :where([oui-color-picker-copy]):not([disabled], [aria-disabled=true i])[data-state=error i] .oui-icon, :where([oui-color-picker-copy]):not([disabled], [aria-disabled=true i])[data-state=loading i] .oui-icon, :where([oui-color-picker-copy]):not([disabled], [aria-disabled=true i])[data-state=success i] .oui-icon {
+  opacity: 0;
+}
+:where([oui-color-picker-copy]):not([disabled], [aria-disabled=true i])[aria-busy=true i], :where([oui-color-picker-copy]):not([disabled], [aria-disabled=true i])[data-state=busy i], :where([oui-color-picker-copy]):not([disabled], [aria-disabled=true i])[data-state=loading i] {
+  --oui-background-value: var(--oui-blue-2);
+  --oui-foreground-value: var(--oui-blue-8);
+  --oui-outline-value: var(--oui-blue-5);
+}
+:where([oui-color-picker-copy]):not([disabled], [aria-disabled=true i])[aria-busy=true i]::after, :where([oui-color-picker-copy]):not([disabled], [aria-disabled=true i])[data-state=busy i]::after, :where([oui-color-picker-copy]):not([disabled], [aria-disabled=true i])[data-state=loading i]::after {
+  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJpY29uIGljb24tdGFibGVyIGljb25zLXRhYmxlci1vdXRsaW5lIGljb24tdGFibGVyLWxvYWRlci0yIj48cGF0aCBzdHJva2U9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiIC8+PHBhdGggZD0iTTEyIDNhOSA5IDAgMSAwIDkgOSIgLz48L3N2Zz4=");
+  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJpY29uIGljb24tdGFibGVyIGljb25zLXRhYmxlci1vdXRsaW5lIGljb24tdGFibGVyLWxvYWRlci0yIj48cGF0aCBzdHJva2U9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiIC8+PHBhdGggZD0iTTEyIDNhOSA5IDAgMSAwIDkgOSIgLz48L3N2Zz4=");
+  transform-origin: center;
+  animation: oui-button-icon-centered 1s linear infinite;
+}
+@keyframes oui-button-icon-centered {
+  to {
+    transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 1, 360deg);
+  }
+}
+:where([oui-color-picker-copy]):not([disabled], [aria-disabled=true i])[aria-busy=true i]:has(.oui-icon:is(:first-child, :last-child))::after, :where([oui-color-picker-copy]):not([disabled], [aria-disabled=true i])[data-state=busy i]:has(.oui-icon:is(:first-child, :last-child))::after, :where([oui-color-picker-copy]):not([disabled], [aria-disabled=true i])[data-state=loading i]:has(.oui-icon:is(:first-child, :last-child))::after {
+  animation: oui-button-icon-offset 1s linear infinite;
+}
+@keyframes oui-button-icon-offset {
+  to {
+    transform: rotate3d(0, 0, 1, 360deg);
+  }
+}
+:where([oui-color-picker-copy]):not([disabled], [aria-disabled=true i])[data-state=error i] {
+  --oui-background-value: var(--oui-red-2);
+  --oui-foreground-value: var(--oui-red-8);
+  --oui-outline-value: var(--oui-red-5);
+}
+:where([oui-color-picker-copy]):not([disabled], [aria-disabled=true i])[data-state=error i]::after {
+  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJpY29uIGljb24tdGFibGVyIGljb25zLXRhYmxlci1vdXRsaW5lIGljb24tdGFibGVyLXgiPjxwYXRoIHN0cm9rZT0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIgLz48cGF0aCBkPSJNMTggNmwtMTIgMTIiIC8+PHBhdGggZD0iTTYgNmwxMiAxMiIgLz48L3N2Zz4=");
+  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJpY29uIGljb24tdGFibGVyIGljb25zLXRhYmxlci1vdXRsaW5lIGljb24tdGFibGVyLXgiPjxwYXRoIHN0cm9rZT0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIgLz48cGF0aCBkPSJNMTggNmwtMTIgMTIiIC8+PHBhdGggZD0iTTYgNmwxMiAxMiIgLz48L3N2Zz4=");
+}
+:where([oui-color-picker-copy]):not([disabled], [aria-disabled=true i])[data-state=success i] {
+  --oui-background-value: var(--oui-green-2);
+  --oui-foreground-value: var(--oui-green-8);
+  --oui-outline-value: var(--oui-green-5);
+}
+:where([oui-color-picker-copy]):not([disabled], [aria-disabled=true i])[data-state=success i]::after {
+  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJpY29uIGljb24tdGFibGVyIGljb25zLXRhYmxlci1vdXRsaW5lIGljb24tdGFibGVyLWNoZWNrIj48cGF0aCBzdHJva2U9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiIC8+PHBhdGggZD0iTTUgMTJsNSA1bDEwIC0xMCIgLz48L3N2Zz4=");
+  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJpY29uIGljb24tdGFibGVyIGljb25zLXRhYmxlci1vdXRsaW5lIGljb24tdGFibGVyLWNoZWNrIj48cGF0aCBzdHJva2U9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiIC8+PHBhdGggZD0iTTUgMTJsNSA1bDEwIC0xMCIgLz48L3N2Zz4=");
+}
+:where([oui-color-picker-copy]):not([disabled], [aria-disabled=true i]):active {
+  box-shadow: 0 0 0 1px var(--oui-shadow-value), inset 0 1px 2px 0 var(--oui-shadow-value), inset 0 2px 4px 0 var(--oui-shadow-value);
+  scale: 0.95;
+}
+:where([oui-color-picker-copy]):not([disabled], [aria-disabled=true i]):active[aria-pressed=true i], :where([oui-color-picker-copy]):not([disabled], [aria-disabled=true i]):active[aria-selected=true i] {
+  scale: 1;
+}
+:where([oui-color-picker-copy])[disabled], :where([oui-color-picker-copy])[aria-disabled=true i] {
+  --oui-background-percentage: 80%;
+  --oui-foreground-percentage: 25%;
+  --oui-shadow-percentage: 92.5%;
+  font-style: italic;
+}
+:where([oui-color-picker-copy]) .oui-icon {
+  width: 1em;
+  height: 1em;
+}
+:where([oui-color-picker-copy]) .oui-icon:is(:first-child, :last-child) {
+  transition: opacity 0.125s ease-in-out;
+}
+:where([oui-color-picker-copy]) {
+  width: 2.5em;
+  height: 2em;
+  align-self: center;
+  color: transparent;
+  font-size: 0.75em;
+}
+:where([oui-color-picker-copy])::before {
+  content: "";
+  width: 1em;
+  height: 1em;
+  display: inline-flex;
+  opacity: 1;
+  background-color: color-mix(in oklab, var(--oui-foreground-value), transparent var(--oui-foreground-percentage));
+  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJpY29uIGljb24tdGFibGVyIGljb25zLXRhYmxlci1vdXRsaW5lIGljb24tdGFibGVyLWNvcHkiPjxwYXRoIHN0cm9rZT0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIgLz48cGF0aCBkPSJNNyA5LjY2N2EyLjY2NyAyLjY2NyAwIDAgMSAyLjY2NyAtMi42NjdoOC42NjZhMi42NjcgMi42NjcgMCAwIDEgMi42NjcgMi42Njd2OC42NjZhMi42NjcgMi42NjcgMCAwIDEgLTIuNjY3IDIuNjY3aC04LjY2NmEyLjY2NyAyLjY2NyAwIDAgMSAtMi42NjcgLTIuNjY3bDAgLTguNjY2IiAvPjxwYXRoIGQ9Ik00LjAxMiAxNi43MzdhMi4wMDUgMi4wMDUgMCAwIDEgLTEuMDEyIC0xLjczN3YtMTBjMCAtMS4xIC45IC0yIDIgLTJoMTBjLjc1IDAgMS4xNTggLjM4NSAxLjUgMSIgLz48L3N2Zz4=");
+  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJpY29uIGljb24tdGFibGVyIGljb25zLXRhYmxlci1vdXRsaW5lIGljb24tdGFibGVyLWNvcHkiPjxwYXRoIHN0cm9rZT0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIgLz48cGF0aCBkPSJNNyA5LjY2N2EyLjY2NyAyLjY2NyAwIDAgMSAyLjY2NyAtMi42NjdoOC42NjZhMi42NjcgMi42NjcgMCAwIDEgMi42NjcgMi42Njd2OC42NjZhMi42NjcgMi42NjcgMCAwIDEgLTIuNjY3IDIuNjY3aC04LjY2NmEyLjY2NyAyLjY2NyAwIDAgMSAtMi42NjcgLTIuNjY3bDAgLTguNjY2IiAvPjxwYXRoIGQ9Ik00LjAxMiAxNi43MzdhMi4wMDUgMi4wMDUgMCAwIDEgLTEuMDEyIC0xLjczN3YtMTBjMCAtMS4xIC45IC0yIDIgLTJoMTBjLjc1IDAgMS4xNTggLjM4NSAxLjUgMSIgLz48L3N2Zz4=");
+  -webkit-mask-position: center;
+  mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: 1em 1em;
+  mask-size: 1em 1em;
+  pointer-events: none;
+  transition: 0.125s ease-in-out;
+  transition-property: background-color, color, opacity, -webkit-mask-image;
+  transition-property: background-color, color, mask-image, opacity;
+  transition-property: background-color, color, mask-image, opacity, -webkit-mask-image;
+}
+
+:where([oui-color-picker-copy-error], [oui-color-picker-copy-success]) {
+  color: transparent;
+}
+:where([oui-color-picker-copy-error], [oui-color-picker-copy-success])::before {
+  opacity: 0;
+}
+:where([oui-color-picker-copy-error], [oui-color-picker-copy-success])::after {
+  opacity: 1;
+}
+
+:where([oui-color-picker-copy-error]) {
+  --oui-background-value: var(--oui-red-2);
+  --oui-foreground-value: var(--oui-red-8);
+  --oui-outline-value: var(--oui-red-5);
+}
+:where([oui-color-picker-copy-error])::after {
+  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJpY29uIGljb24tdGFibGVyIGljb25zLXRhYmxlci1vdXRsaW5lIGljb24tdGFibGVyLXgiPjxwYXRoIHN0cm9rZT0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIgLz48cGF0aCBkPSJNMTggNmwtMTIgMTIiIC8+PHBhdGggZD0iTTYgNmwxMiAxMiIgLz48L3N2Zz4=");
+  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJpY29uIGljb24tdGFibGVyIGljb25zLXRhYmxlci1vdXRsaW5lIGljb24tdGFibGVyLXgiPjxwYXRoIHN0cm9rZT0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIgLz48cGF0aCBkPSJNMTggNmwtMTIgMTIiIC8+PHBhdGggZD0iTTYgNmwxMiAxMiIgLz48L3N2Zz4=");
+}
+
+:where([oui-color-picker-copy-success]) {
+  --oui-background-value: var(--oui-green-2);
+  --oui-foreground-value: var(--oui-green-8);
+  --oui-outline-value: var(--oui-green-5);
+}
+:where([oui-color-picker-copy-success])::after {
+  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJpY29uIGljb24tdGFibGVyIGljb25zLXRhYmxlci1vdXRsaW5lIGljb24tdGFibGVyLWNoZWNrIj48cGF0aCBzdHJva2U9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiIC8+PHBhdGggZD0iTTUgMTJsNSA1bDEwIC0xMCIgLz48L3N2Zz4=");
+  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJpY29uIGljb24tdGFibGVyIGljb25zLXRhYmxlci1vdXRsaW5lIGljb24tdGFibGVyLWNoZWNrIj48cGF0aCBzdHJva2U9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiIC8+PHBhdGggZD0iTTUgMTJsNSA1bDEwIC0xMCIgLz48L3N2Zz4=");
+}
+
+:where([oui-color-picker-hue], [oui-color-picker-opacity]) {
+  position: relative;
+}
+
+:where([oui-color-picker-hue-input], [oui-color-picker-opacity-input]) {
+  opacity: 0;
+  position: absolute;
+  inset: -0.25em -0.75em;
+  z-index: 1;
+}
+
+:where([oui-color-picker-hue-label],
+[oui-color-picker-opacity-label],
+[oui-color-picker-output-input-label],
+[oui-color-picker-output-format-label]) {
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  clip-path: inset(50%) !important;
+  overflow: hidden !important;
+  border: 0 !important;
+  white-space: nowrap !important;
+  position: absolute;
+}
+
+:where([oui-color-picker-hue-knob]),
+:where([oui-color-picker-hue-track]),
+:where([oui-color-picker-opacity-knob]),
+:where([oui-color-picker-opacity-track]),
+:where([oui-color-picker-well-knob]) {
+  --oui-outline-percentage: 100%;
+  --oui-outline-value: var(--oui-blue-6);
+  outline: 4px solid color-mix(in oklab, var(--oui-outline-value), transparent var(--oui-outline-percentage));
+  transition: outline 0.125s ease-in-out;
+}
+
+:where([oui-color-picker-hue-knob]),
+:where([oui-color-picker-opacity-knob]),
+:where([oui-color-picker-well-knob]) {
+  box-shadow: inset 0 1px 0 0 transparent, 0 0 0 1px rgba(0, 0, 0, 0.0625), 0 1px 2px -0.5px rgba(0, 0, 0, 0.0625), 0 2px 4px -1px rgba(0, 0, 0, 0.0625), 0 4px 8px -2px rgba(0, 0, 0, 0.0625), 0 8px 16px -4px rgba(0, 0, 0, 0.0625), 0 16px 32px -8px rgba(0, 0, 0, 0.0625), 0 32px 64px -16px rgba(0, 0, 0, 0.0625), 0 64px 128px -32px rgba(0, 0, 0, 0.0625);
+  width: 1.5em;
+  height: 1.5em;
+  border: 0.3333em solid var(--oui-absolute);
+  border-radius: 1.5em;
+  position: absolute;
+  z-index: 1;
+}
+
+:where([oui-color-picker-hue-knob]),
+:where([oui-color-picker-well-knob]) {
+  background-color: var(--oui-color-picker-hex);
+}
+
+:where([oui-color-picker-hue-knob]),
+:where([oui-color-picker-opacity-knob]) {
+  transform: translate3d(-50%, -0.25em, 0);
+}
+
+:where([oui-color-picker-hue-knob]) {
+  inset: 0 0 0 calc(var(--oui-color-picker-hue) / 360 * 100%);
+  pointer-events: none;
+}
+
+:where([oui-color-picker-hue-track]),
+:where([oui-color-picker-opacity-track]),
+:where([oui-color-picker-well]) {
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05), inset 0 1px 2px -0.5px rgba(0, 0, 0, 0.05), inset 0 2px 4px -1px rgba(0, 0, 0, 0.05), inset 0 4px 8px -2px rgba(0, 0, 0, 0.05);
+}
+
+:where([oui-color-picker-hue-track]),
+:where([oui-color-picker-opacity-track]) {
+  height: 1em;
+  border: 1px solid transparent;
+  border-radius: 1em;
+  pointer-events: none;
+}
+
+:where([oui-color-picker-hue-track]) {
+  background-image: linear-gradient(to right, hsl(0, 100%, 50%) 0%, hsl(60, 100%, 50%) 16.6667%, hsl(120, 100%, 50%) 33.3333%, hsl(180, 100%, 50%) 50%, hsl(240, 100%, 50%) 66.6667%, hsl(300, 100%, 50%) 83.3333%, hsl(0, 100%, 50%) 100%);
+}
+
+:where([oui-color-picker-hue-input]:focus-visible + [oui-color-picker-hue-track], [oui-color-picker-hue-input]:focus-visible + [oui-color-picker-hue-track] [oui-color-picker-hue-knob], [oui-color-picker-hue-input]:focus-visible + [oui-color-picker-hue-track] [oui-color-picker-opacity-knob],
+[oui-color-picker-opacity-input]:focus-visible + [oui-color-picker-opacity-track],
+[oui-color-picker-opacity-input]:focus-visible + [oui-color-picker-opacity-track] [oui-color-picker-hue-knob],
+[oui-color-picker-opacity-input]:focus-visible + [oui-color-picker-opacity-track] [oui-color-picker-opacity-knob]) {
+  --oui-outline-percentage: 75%;
+}
+:where([oui-color-picker-hue-input]:focus-visible + [oui-color-picker-hue-track],
+[oui-color-picker-opacity-input]:focus-visible + [oui-color-picker-opacity-track]) {
+  border-color: var(--oui-absolute);
+}
+
+:where([oui-color-picker-input]) {
+  --oui-outline-percentage: 100%;
+  --oui-outline-value: var(--oui-blue-6);
+  outline: 4px solid color-mix(in oklab, var(--oui-outline-value), transparent var(--oui-outline-percentage));
+  outline-offset: 0;
+  --oui-background-percentage: 0%;
+  --oui-foreground-percentage: 0%;
+  align-content: center;
+  background-color: color-mix(in oklab, var(--oui-background-value), transparent var(--oui-background-percentage));
+  border: 1px solid var(--oui-border-value, var(--oui-gray-3));
+  box-shadow: inset 0 2px 4px -1px var(--oui-gray-3);
+  color: color-mix(in oklab, var(--oui-foreground-value, inherit), transparent var(--oui-foreground-percentage));
+  -webkit-text-fill-color: color-mix(in oklab, var(--oui-foreground-value, inherit), transparent var(--oui-foreground-percentage));
+  transition: 0.125s ease-in-out;
+  transition-property: background, outline, border, box-shadow, color;
+}
+:where([oui-color-picker-input]).oui-validate:not([disabled],
+[readonly],
+[aria-disabled=true i],
+[aria-readonly=true i],
+:focus-visible,
+:focus-within):is(:user-invalid:not([aria-invalid=false i]), [aria-invalid=true i]) {
+  --oui-border-value: var(--oui-red-5);
+  --oui-foreground-value: var(--oui-red-9);
+  --oui-outline-percentage: 82.5%;
+  --oui-outline-value: var(--oui-red-6);
+}
+:where([oui-color-picker-input]).oui-validate:not([disabled],
+[readonly],
+[aria-disabled=true i],
+[aria-readonly=true i],
+:focus-visible,
+:focus-within):is(:user-valid:not([aria-invalid=true i]), [aria-invalid=false i]) {
+  --oui-border-value: var(--oui-green-5);
+  --oui-foreground-value: var(--oui-green-9);
+  --oui-outline-percentage: 82.5%;
+  --oui-outline-value: var(--oui-green-6);
+}
+:where([oui-color-picker-input]):not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):focus-visible, :where([oui-color-picker-input]):not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):focus-within {
+  --oui-border-value: var(--oui-blue-5);
+  --oui-foreground-value: inherit;
+  --oui-outline-percentage: 75%;
+  --oui-outline-value: var(--oui-blue-6);
+}
+@media (hover: hover) {
+  :where([oui-color-picker-input]):not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):hover {
+    --oui-border-value: var(--oui-blue-4);
+    --oui-foreground-percentage: 0%;
+    --oui-foreground-value: inherit;
+    --oui-outline-percentage: 90%;
+    --oui-outline-value: var(--oui-blue-6);
+  }
+}
+:where([oui-color-picker-input]):is([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]) {
+  --oui-foreground-percentage: 25%;
+  font-style: italic;
+}
+:where([oui-color-picker-input]):is([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):focus-visible {
+  --oui-outline-percentage: 75%;
+}
+:where([oui-color-picker-input]):is([disabled], [aria-disabled=true i]) {
+  --oui-background-percentage: 50%;
+}
+:where([oui-color-picker-input]) {
+  --oui-background-value: var(--oui-absolute);
+  width: 100%;
+  padding: 0.5em 0.75em;
+  border-radius: 0.25em;
+  font-family: monospace, monospace;
+}
+:where([oui-color-picker-input]:has(+ [oui-color-picker-toggle])) {
+  border-radius: 0.25em 0 0 0.25em;
+}
+:where([oui-color-picker-input]:is([disabled], [aria-disabled=true i])) {
+  --oui-background-percentage: 50%;
+}
+
+:where([oui-color-picker-opacity-knob]) {
+  background-color: var(--oui-absolute);
+  background-image: linear-gradient(to right, color-mix(in oklab, var(--oui-color-picker-hex), transparent calc((100 - var(--oui-color-picker-alpha)) * 1%)) 0%, color-mix(in oklab, var(--oui-color-picker-hex), transparent calc((100 - var(--oui-color-picker-alpha)) * 1%)) 100%);
+  inset: 0 0 0 calc(var(--oui-color-picker-alpha) * 1%);
+}
+
+:where([oui-color-picker-opacity-track]) {
+  background-color: var(--oui-absolute);
+  background-image: linear-gradient(to right, transparent 0%, hsl(var(--oui-color-picker-hue), 100%, 50%) 100%);
+  position: relative;
+}
+:where([oui-color-picker-opacity-track])::after {
+  content: "";
+  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%), linear-gradient(135deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.1) 75%), linear-gradient(135deg, transparent 75%, rgba(0, 0, 0, 0.1) 75%);
+  background-size: 0.5em 0.5em;
+  background-position: 0 0, 0.25em 0, 0.25em -0.25em, 0 0.25em;
+  border-radius: 1em;
+  position: absolute;
+  inset: 0;
+}
+
+:where([oui-color-picker-output]) {
+  padding: 1em 0 0;
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 1em;
+  border-top: 1px solid var(--oui-gray-3);
+}
+:where([oui-color-picker-content][popover] [oui-color-picker-output]) {
+  padding: 1em 1em 0;
+  margin: 0 -1em;
+}
+
+:where([oui-color-picker-output-format]) {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: stretch;
+  justify-content: flex-end;
+  gap: 0.5em;
+}
+
+:where([oui-color-picker-output-format-value]) {
+  --oui-outline-percentage: 100%;
+  --oui-outline-value: var(--oui-blue-6);
+  outline: 4px solid color-mix(in oklab, var(--oui-outline-value), transparent var(--oui-outline-percentage));
+  outline-offset: 0;
+  --oui-background-percentage: 0%;
+  --oui-foreground-percentage: 0%;
+  align-content: center;
+  background-color: color-mix(in oklab, var(--oui-background-value), transparent var(--oui-background-percentage));
+  border: 1px solid var(--oui-border-value, var(--oui-gray-3));
+  box-shadow: inset 0 2px 4px -1px var(--oui-gray-3);
+  color: color-mix(in oklab, var(--oui-foreground-value, inherit), transparent var(--oui-foreground-percentage));
+  -webkit-text-fill-color: color-mix(in oklab, var(--oui-foreground-value, inherit), transparent var(--oui-foreground-percentage));
+  transition: 0.125s ease-in-out;
+  transition-property: background, outline, border, box-shadow, color;
+}
+:where([oui-color-picker-output-format-value]).oui-validate:not([disabled],
+[readonly],
+[aria-disabled=true i],
+[aria-readonly=true i],
+:focus-visible,
+:focus-within):is(:user-invalid:not([aria-invalid=false i]), [aria-invalid=true i]) {
+  --oui-border-value: var(--oui-red-5);
+  --oui-foreground-value: var(--oui-red-9);
+  --oui-outline-percentage: 82.5%;
+  --oui-outline-value: var(--oui-red-6);
+}
+:where([oui-color-picker-output-format-value]).oui-validate:not([disabled],
+[readonly],
+[aria-disabled=true i],
+[aria-readonly=true i],
+:focus-visible,
+:focus-within):is(:user-valid:not([aria-invalid=true i]), [aria-invalid=false i]) {
+  --oui-border-value: var(--oui-green-5);
+  --oui-foreground-value: var(--oui-green-9);
+  --oui-outline-percentage: 82.5%;
+  --oui-outline-value: var(--oui-green-6);
+}
+:where([oui-color-picker-output-format-value]):not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):focus-visible, :where([oui-color-picker-output-format-value]):not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):focus-within {
+  --oui-border-value: var(--oui-blue-5);
+  --oui-foreground-value: inherit;
+  --oui-outline-percentage: 75%;
+  --oui-outline-value: var(--oui-blue-6);
+}
+@media (hover: hover) {
+  :where([oui-color-picker-output-format-value]):not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):hover {
+    --oui-border-value: var(--oui-blue-4);
+    --oui-foreground-percentage: 0%;
+    --oui-foreground-value: inherit;
+    --oui-outline-percentage: 90%;
+    --oui-outline-value: var(--oui-blue-6);
+  }
+}
+:where([oui-color-picker-output-format-value]):is([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]) {
+  --oui-foreground-percentage: 25%;
+  font-style: italic;
+}
+:where([oui-color-picker-output-format-value]):is([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):focus-visible {
+  --oui-outline-percentage: 75%;
+}
+:where([oui-color-picker-output-format-value]):is([disabled], [aria-disabled=true i]) {
+  --oui-background-percentage: 50%;
+}
+:where([oui-color-picker-output-format-value]) {
+  padding-right: 2em;
+  background-color: var(--oui-absolute);
+  background-position: right 0.5em center;
+  border-radius: 0.25em;
+}
+
+:where([oui-color-picker-output-input]) {
+  --oui-outline-percentage: 100%;
+  --oui-outline-value: var(--oui-blue-6);
+  outline: 4px solid color-mix(in oklab, var(--oui-outline-value), transparent var(--oui-outline-percentage));
+  outline-offset: 0;
+  --oui-background-percentage: 0%;
+  --oui-foreground-percentage: 0%;
+  align-content: center;
+  background-color: color-mix(in oklab, var(--oui-background-value), transparent var(--oui-background-percentage));
+  border: 1px solid var(--oui-border-value, var(--oui-gray-3));
+  box-shadow: inset 0 2px 4px -1px var(--oui-gray-3);
+  color: color-mix(in oklab, var(--oui-foreground-value, inherit), transparent var(--oui-foreground-percentage));
+  -webkit-text-fill-color: color-mix(in oklab, var(--oui-foreground-value, inherit), transparent var(--oui-foreground-percentage));
+  transition: 0.125s ease-in-out;
+  transition-property: background, outline, border, box-shadow, color;
+}
+:where([oui-color-picker-output-input]).oui-validate:not([disabled],
+[readonly],
+[aria-disabled=true i],
+[aria-readonly=true i],
+:focus-visible,
+:focus-within):is(:user-invalid:not([aria-invalid=false i]), [aria-invalid=true i]) {
+  --oui-border-value: var(--oui-red-5);
+  --oui-foreground-value: var(--oui-red-9);
+  --oui-outline-percentage: 82.5%;
+  --oui-outline-value: var(--oui-red-6);
+}
+:where([oui-color-picker-output-input]).oui-validate:not([disabled],
+[readonly],
+[aria-disabled=true i],
+[aria-readonly=true i],
+:focus-visible,
+:focus-within):is(:user-valid:not([aria-invalid=true i]), [aria-invalid=false i]) {
+  --oui-border-value: var(--oui-green-5);
+  --oui-foreground-value: var(--oui-green-9);
+  --oui-outline-percentage: 82.5%;
+  --oui-outline-value: var(--oui-green-6);
+}
+:where([oui-color-picker-output-input]):not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):focus-visible, :where([oui-color-picker-output-input]):not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):focus-within {
+  --oui-border-value: var(--oui-blue-5);
+  --oui-foreground-value: inherit;
+  --oui-outline-percentage: 75%;
+  --oui-outline-value: var(--oui-blue-6);
+}
+@media (hover: hover) {
+  :where([oui-color-picker-output-input]):not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):hover {
+    --oui-border-value: var(--oui-blue-4);
+    --oui-foreground-percentage: 0%;
+    --oui-foreground-value: inherit;
+    --oui-outline-percentage: 90%;
+    --oui-outline-value: var(--oui-blue-6);
+  }
+}
+:where([oui-color-picker-output-input]):is([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]) {
+  --oui-foreground-percentage: 25%;
+  font-style: italic;
+}
+:where([oui-color-picker-output-input]):is([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):focus-visible {
+  --oui-outline-percentage: 75%;
+}
+:where([oui-color-picker-output-input]):is([disabled], [aria-disabled=true i]) {
+  --oui-background-percentage: 50%;
+}
+:where([oui-color-picker-output-input]) {
+  width: 4em;
+  background-color: var(--oui-absolute);
+  border-radius: 0.25em;
+  font-family: monospace, monospace;
+}
+
+:where([oui-color-picker-output-item]) {
+  display: flex;
+  flex-flow: row wrap;
+  gap: 1em;
+}
+:where([oui-color-picker-output-item] [oui-color-picker-output-input]) {
+  width: auto;
+  flex: 1;
+}
+:where([oui-color-picker-output-item]:only-child)::before {
+  font-size: 0.875rem;
+  font-weight: bold;
+  align-self: flex-start;
+  cursor: pointer;
+  transition: color 0.125s ease-in-out;
+}
+@media (hover: hover) {
+  :where(:where([oui-color-picker-output-item]:only-child)::before:hover) {
+    color: var(--oui-blue-8);
+  }
+}
+:where([oui-color-picker-output-item]:only-child)::before {
+  content: attr(aria-label);
+  align-self: center;
+  cursor: default;
+}
+
+:where([oui-color-picker-toggle]) {
+  --oui-background-percentage: 50%;
+  --oui-background-value: var(--oui-gray-2);
+  --oui-foreground-percentage: 0%;
+  --oui-foreground-value: var(--oui-gray-8);
+  --oui-outline-percentage: 100%;
+  --oui-outline-value: var(--oui-gray-5);
+  --oui-shadow-inset: color-mix(in oklab, var(--oui-absolute), transparent 75%);
+  --oui-shadow-percentage: 82.5%;
+  --oui-shadow-value: color-mix(
+  	in oklab,
+  	var(--oui-outline-value),
+  	transparent var(--oui-shadow-percentage)
+  );
+  box-shadow: inset 0 1px 0 0 var(--oui-shadow-inset), 0 0 0 1px var(--oui-shadow-value), 0 1px 2px -0.5px var(--oui-shadow-value), 0 2px 4px -1px var(--oui-shadow-value), 0 4px 8px -2px var(--oui-shadow-value);
+  padding: 0.5em 0.75em;
+  display: inline-flex;
+  flex-flow: row wrap;
+  gap: 0.75em;
+  align-items: center;
+  border-radius: 0.25em;
+  background-color: color-mix(in oklab, var(--oui-background-value), transparent var(--oui-background-percentage));
+  outline: 4px solid color-mix(in oklab, var(--oui-outline-value), transparent var(--oui-outline-percentage));
+  border: none;
+  color: color-mix(in oklab, var(--oui-foreground-value), transparent var(--oui-foreground-percentage));
+  line-height: 1.25;
+  position: relative;
+  transition: 0.125s ease-in-out;
+  transition-property: background, outline, box-shadow, color;
+}
+:where([oui-color-picker-toggle])::after {
+  content: "";
+  width: 1em;
+  height: 1em;
+  display: inline-flex;
+  opacity: 0;
+  background-color: color-mix(in oklab, var(--oui-foreground-value), transparent var(--oui-foreground-percentage));
+  -webkit-mask-image: url("");
+  mask-image: url("");
+  -webkit-mask-position: center;
+  mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: 1em 1em;
+  mask-size: 1em 1em;
+  pointer-events: none;
+  transition: 0.125s ease-in-out;
+  transition-property: background-color, color, opacity, -webkit-mask-image;
+  transition-property: background-color, color, mask-image, opacity;
+  transition-property: background-color, color, mask-image, opacity, -webkit-mask-image;
+  position: absolute;
+  inset: 50% auto auto 50%;
+  transform: translate3d(-50%, -50%, 0);
+}
+:where([oui-color-picker-toggle]):has(.oui-icon:is(:first-child))::after {
+  inset: auto;
+  transform: none;
+}
+:where([oui-color-picker-toggle]):has(.oui-icon:is(:last-child))::after {
+  inset: auto 0.75em auto auto;
+  transform: none;
+}
+:where([oui-color-picker-toggle]):focus-visible {
+  --oui-outline-percentage: 75%;
+}
+@media (hover: hover) {
+  :where([oui-color-picker-toggle]):not([disabled], [aria-disabled=true i]):hover {
+    --oui-background-percentage: 50%;
+    --oui-foreground-percentage: 25%;
+    --oui-shadow-percentage: 90%;
+  }
+}
+:where([oui-color-picker-toggle]):not([disabled], [aria-disabled=true i])[aria-busy=true i]:not(:has(.oui-icon:is(:first-child, :last-child))), :where([oui-color-picker-toggle]):not([disabled], [aria-disabled=true i])[data-state=busy i]:not(:has(.oui-icon:is(:first-child, :last-child))), :where([oui-color-picker-toggle]):not([disabled], [aria-disabled=true i])[data-state=error i]:not(:has(.oui-icon:is(:first-child, :last-child))), :where([oui-color-picker-toggle]):not([disabled], [aria-disabled=true i])[data-state=loading i]:not(:has(.oui-icon:is(:first-child, :last-child))), :where([oui-color-picker-toggle]):not([disabled], [aria-disabled=true i])[data-state=success i]:not(:has(.oui-icon:is(:first-child, :last-child))) {
+  color: transparent;
+}
+:where([oui-color-picker-toggle]):not([disabled], [aria-disabled=true i])[aria-busy=true i]::after, :where([oui-color-picker-toggle]):not([disabled], [aria-disabled=true i])[data-state=busy i]::after, :where([oui-color-picker-toggle]):not([disabled], [aria-disabled=true i])[data-state=error i]::after, :where([oui-color-picker-toggle]):not([disabled], [aria-disabled=true i])[data-state=loading i]::after, :where([oui-color-picker-toggle]):not([disabled], [aria-disabled=true i])[data-state=success i]::after {
+  opacity: 1;
+}
+:where([oui-color-picker-toggle]):not([disabled], [aria-disabled=true i])[aria-busy=true i] .oui-icon, :where([oui-color-picker-toggle]):not([disabled], [aria-disabled=true i])[data-state=busy i] .oui-icon, :where([oui-color-picker-toggle]):not([disabled], [aria-disabled=true i])[data-state=error i] .oui-icon, :where([oui-color-picker-toggle]):not([disabled], [aria-disabled=true i])[data-state=loading i] .oui-icon, :where([oui-color-picker-toggle]):not([disabled], [aria-disabled=true i])[data-state=success i] .oui-icon {
+  opacity: 0;
+}
+:where([oui-color-picker-toggle]):not([disabled], [aria-disabled=true i])[aria-busy=true i], :where([oui-color-picker-toggle]):not([disabled], [aria-disabled=true i])[data-state=busy i], :where([oui-color-picker-toggle]):not([disabled], [aria-disabled=true i])[data-state=loading i] {
+  --oui-background-value: var(--oui-blue-2);
+  --oui-foreground-value: var(--oui-blue-8);
+  --oui-outline-value: var(--oui-blue-5);
+}
+:where([oui-color-picker-toggle]):not([disabled], [aria-disabled=true i])[aria-busy=true i]::after, :where([oui-color-picker-toggle]):not([disabled], [aria-disabled=true i])[data-state=busy i]::after, :where([oui-color-picker-toggle]):not([disabled], [aria-disabled=true i])[data-state=loading i]::after {
+  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJpY29uIGljb24tdGFibGVyIGljb25zLXRhYmxlci1vdXRsaW5lIGljb24tdGFibGVyLWxvYWRlci0yIj48cGF0aCBzdHJva2U9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiIC8+PHBhdGggZD0iTTEyIDNhOSA5IDAgMSAwIDkgOSIgLz48L3N2Zz4=");
+  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJpY29uIGljb24tdGFibGVyIGljb25zLXRhYmxlci1vdXRsaW5lIGljb24tdGFibGVyLWxvYWRlci0yIj48cGF0aCBzdHJva2U9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiIC8+PHBhdGggZD0iTTEyIDNhOSA5IDAgMSAwIDkgOSIgLz48L3N2Zz4=");
+  transform-origin: center;
+  animation: oui-button-icon-centered 1s linear infinite;
+}
+@keyframes oui-button-icon-centered {
+  to {
+    transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 1, 360deg);
+  }
+}
+:where([oui-color-picker-toggle]):not([disabled], [aria-disabled=true i])[aria-busy=true i]:has(.oui-icon:is(:first-child, :last-child))::after, :where([oui-color-picker-toggle]):not([disabled], [aria-disabled=true i])[data-state=busy i]:has(.oui-icon:is(:first-child, :last-child))::after, :where([oui-color-picker-toggle]):not([disabled], [aria-disabled=true i])[data-state=loading i]:has(.oui-icon:is(:first-child, :last-child))::after {
+  animation: oui-button-icon-offset 1s linear infinite;
+}
+@keyframes oui-button-icon-offset {
+  to {
+    transform: rotate3d(0, 0, 1, 360deg);
+  }
+}
+:where([oui-color-picker-toggle]):not([disabled], [aria-disabled=true i])[data-state=error i] {
+  --oui-background-value: var(--oui-red-2);
+  --oui-foreground-value: var(--oui-red-8);
+  --oui-outline-value: var(--oui-red-5);
+}
+:where([oui-color-picker-toggle]):not([disabled], [aria-disabled=true i])[data-state=error i]::after {
+  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJpY29uIGljb24tdGFibGVyIGljb25zLXRhYmxlci1vdXRsaW5lIGljb24tdGFibGVyLXgiPjxwYXRoIHN0cm9rZT0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIgLz48cGF0aCBkPSJNMTggNmwtMTIgMTIiIC8+PHBhdGggZD0iTTYgNmwxMiAxMiIgLz48L3N2Zz4=");
+  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJpY29uIGljb24tdGFibGVyIGljb25zLXRhYmxlci1vdXRsaW5lIGljb24tdGFibGVyLXgiPjxwYXRoIHN0cm9rZT0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIgLz48cGF0aCBkPSJNMTggNmwtMTIgMTIiIC8+PHBhdGggZD0iTTYgNmwxMiAxMiIgLz48L3N2Zz4=");
+}
+:where([oui-color-picker-toggle]):not([disabled], [aria-disabled=true i])[data-state=success i] {
+  --oui-background-value: var(--oui-green-2);
+  --oui-foreground-value: var(--oui-green-8);
+  --oui-outline-value: var(--oui-green-5);
+}
+:where([oui-color-picker-toggle]):not([disabled], [aria-disabled=true i])[data-state=success i]::after {
+  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJpY29uIGljb24tdGFibGVyIGljb25zLXRhYmxlci1vdXRsaW5lIGljb24tdGFibGVyLWNoZWNrIj48cGF0aCBzdHJva2U9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiIC8+PHBhdGggZD0iTTUgMTJsNSA1bDEwIC0xMCIgLz48L3N2Zz4=");
+  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJpY29uIGljb24tdGFibGVyIGljb25zLXRhYmxlci1vdXRsaW5lIGljb24tdGFibGVyLWNoZWNrIj48cGF0aCBzdHJva2U9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiIC8+PHBhdGggZD0iTTUgMTJsNSA1bDEwIC0xMCIgLz48L3N2Zz4=");
+}
+:where([oui-color-picker-toggle]):not([disabled], [aria-disabled=true i]):active {
+  box-shadow: 0 0 0 1px var(--oui-shadow-value), inset 0 1px 2px 0 var(--oui-shadow-value), inset 0 2px 4px 0 var(--oui-shadow-value);
+  scale: 0.95;
+}
+:where([oui-color-picker-toggle]):not([disabled], [aria-disabled=true i]):active[aria-pressed=true i], :where([oui-color-picker-toggle]):not([disabled], [aria-disabled=true i]):active[aria-selected=true i] {
+  scale: 1;
+}
+:where([oui-color-picker-toggle])[disabled], :where([oui-color-picker-toggle])[aria-disabled=true i] {
+  --oui-background-percentage: 80%;
+  --oui-foreground-percentage: 25%;
+  --oui-shadow-percentage: 92.5%;
+  font-style: italic;
+}
+:where([oui-color-picker-toggle]) .oui-icon {
+  width: 1em;
+  height: 1em;
+}
+:where([oui-color-picker-toggle]) .oui-icon:is(:first-child, :last-child) {
+  transition: opacity 0.125s ease-in-out;
+}
+:where([oui-color-picker-toggle]) {
+  box-shadow: inset 0 1px 0 0 transparent, 0 0 0 1px var(--oui-shadow-value), 0 1px 2px -0.5px var(--oui-shadow-value), 0 2px 4px -1px var(--oui-shadow-value);
+  --oui-background-value: var(--oui-color-picker-hex);
+  --oui-outline-value: var(--oui-gray-6);
+  width: 2.5em;
+  margin: 1px 0;
+  border: 1px solid var(--oui-absolute);
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  position: relative;
+}
+:where([oui-color-picker-toggle])::after {
+  opacity: 1;
+  background-color: var(--oui-color-picker-foreground);
+}
+:where([oui-color-picker-toggle])[aria-expanded=false i]::after {
+  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJpY29uIGljb24tdGFibGVyIGljb25zLXRhYmxlci1vdXRsaW5lIGljb24tdGFibGVyLWNoZXZyb24tcmlnaHQiPjxwYXRoIHN0cm9rZT0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIgLz48cGF0aCBkPSJNOSA2bDYgNmwtNiA2IiAvPjwvc3ZnPg==");
+  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJpY29uIGljb24tdGFibGVyIGljb25zLXRhYmxlci1vdXRsaW5lIGljb24tdGFibGVyLWNoZXZyb24tcmlnaHQiPjxwYXRoIHN0cm9rZT0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIgLz48cGF0aCBkPSJNOSA2bDYgNmwtNiA2IiAvPjwvc3ZnPg==");
+}
+:where([oui-color-picker-toggle])[aria-expanded=true i]::after {
+  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJpY29uIGljb24tdGFibGVyIGljb25zLXRhYmxlci1vdXRsaW5lIGljb24tdGFibGVyLWNoZXZyb24tZG93biI+PHBhdGggc3Ryb2tlPSJub25lIiBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIiAvPjxwYXRoIGQ9Ik02IDlsNiA2bDYgLTYiIC8+PC9zdmc+");
+  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJpY29uIGljb24tdGFibGVyIGljb25zLXRhYmxlci1vdXRsaW5lIGljb24tdGFibGVyLWNoZXZyb24tZG93biI+PHBhdGggc3Ryb2tlPSJub25lIiBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIiAvPjxwYXRoIGQ9Ik02IDlsNiA2bDYgLTYiIC8+PC9zdmc+");
+}
+:where([oui-color-picker-toggle]:active) {
+  scale: 1;
+}
+
+:where([oui-color-picker-well]) {
+  --oui-outline-percentage: 100%;
+  --oui-outline-value: var(--oui-blue-6);
+  padding: 100% 0 0;
+  background-color: hsl(var(--oui-color-picker-hue), 100%, 50%);
+  background-image: linear-gradient(to bottom, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%), linear-gradient(to right, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+  outline: 4px solid color-mix(in oklab, var(--oui-outline-value), transparent var(--oui-outline-percentage));
+  outline-offset: 4px;
+  border-radius: 0.125em;
+  position: relative;
+  transition: outline 0.125s ease-in-out;
+}
+:where([oui-color-picker-well]:has(:focus-visible)) {
+  --oui-outline-percentage: 75%;
+}
+@media (hover: hover) {
+  :where([oui-color-picker-well]:hover) {
+    --oui-outline-percentage: 75%;
+  }
+}
+
+:where([oui-color-picker-well-knob]) {
+  --oui-outline-value: var(--oui-absolute);
+  outline-offset: 2px;
+  inset: calc((100 - var(--oui-color-picker-lightness)) * 1%) 0 0 calc(var(--oui-color-picker-saturation) * 1%);
+  transform: translate3d(-50%, -50%, 0);
+  cursor: move;
+}
+:where([oui-color-picker-well-knob]:focus-visible) {
+  --oui-outline-percentage: 33.3333%;
+}
+@media (hover: hover) {
+  :where([oui-color-picker-well-knob]:hover) {
+    --oui-outline-percentage: 33.3333%;
+  }
+}
+
+