.dx-color-picker-field-container{gap:var(--dx-space-1);flex-direction:column;flex:1;display:flex}.dx-color-picker-field-description{color:var(--secondary-color-5);font-size:var(--dx-text-sm);line-height:1.5}.dx-color-picker-swatch{box-sizing:border-box;border:1px solid color-mix(in oklab, var(--primary-color) 10%, transparent);border-radius:var(--dx-radius-sm);background-color:var(--swatch-color);background-image:linear-gradient(var(--swatch-color), var(--swatch-color)), repeating-conic-gradient(#ccc 0% 25%, white 0% 50%);forced-color-adjust:none;width:2rem;height:2rem}.dx-color-picker-slider-container{align-items:center;gap:var(--dx-space-2);flex-direction:column;grid-template-columns:1fr auto;width:224px;display:grid}.dx-color-picker-slider-title{width:fit-content;color:var(--secondary-color-4);font-size:var(--dx-text-sm);font-weight:500;line-height:1.5rem}.dx-color-picker-slider-output{color:var(--secondary-color-5);font-size:var(--dx-text-sm);font-weight:500;line-height:1.5rem}.dx-color-picker-slider{touch-action:none;grid-column:span 2/span 2;align-items:center;display:flex;position:relative}.dx-color-picker-slider-track{box-sizing:border-box;border-radius:var(--dx-radius-md);background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red),repeating-conic-gradient(#ccc 0% 25%,#fff 0% 50%) 50%/16px 16px;flex-grow:1;height:24px;position:relative}.dx-color-picker-slider-thumb{all:unset;border:2px solid var(--secondary-color-2);cursor:pointer;forced-color-adjust:none;touch-action:manipulation;width:16px;height:16px;transition:transform var(--dx-motion-duration-base) var(--dx-motion-ease-out), box-shadow var(--dx-motion-duration-base) var(--dx-motion-ease-out), border-color var(--dx-motion-duration-base);border-radius:50%;display:block;position:absolute;top:50%;transform:translate(-50%,-50%)scale(1);box-shadow:0 0 0 1px #000,inset 0 0 0 1px #000}.dx-color-picker-slider-thumb:hover{transform:translate(-50%,-50%)scale(1.15)}.dx-color-picker-slider-thumb:focus-visible{transform:translate(-50%,-50%)scale(1.15)}.dx-color-picker-slider-thumb[data-dragging=true]{transform:translate(-50%,-50%)scale(1.25);box-shadow:0 0 0 1px #000,inset 0 0 0 1px #000,0 2px 6px rgba(0,0,0,.3)}.dx-color-picker-area-container{aspect-ratio:1;forced-color-adjust:none;touch-action:none;width:100%;max-width:224px;min-height:116px;display:flex;position:relative}.dx-color-picker-area-track{box-sizing:border-box;background:linear-gradient(to top, black, transparent), linear-gradient(to right, white, transparent), var(--area-color);border-radius:10px;flex-grow:1}.dx-color-picker-area-thumb{all:unset;border:2px solid var(--secondary-color-2);cursor:pointer;touch-action:manipulation;width:16px;height:16px;transition:transform var(--dx-motion-duration-base) var(--dx-motion-ease-out), box-shadow var(--dx-motion-duration-base) var(--dx-motion-ease-out), border-color var(--dx-motion-duration-base);border-radius:50%;display:block;position:absolute;transform:translate(-50%,-50%)scale(1);box-shadow:0 0 0 1px #000,inset 0 0 0 1px #000}.dx-color-picker-area-thumb:hover{transform:translate(-50%,-50%)scale(1.15)}.dx-color-picker-area-thumb:focus-visible{transform:translate(-50%,-50%)scale(1.15)}.dx-color-picker-area-thumb:has(:focus-visible){transform:translate(-50%,-50%)scale(1.15)}.dx-color-picker-area-thumb[data-dragging=true]{transform:translate(-50%,-50%)scale(1.25);box-shadow:0 0 0 1px #000,inset 0 0 0 1px #000,0 2px 6px rgba(0,0,0,.3)}.dx-color-picker-area-input{opacity:.0001;pointer-events:none;white-space:nowrap;border:0;width:100%;height:100%;margin:-1px;padding:0;position:absolute;overflow:hidden}.dx-color-picker{display:inline-block;position:relative}.dx-color-picker-button{border-radius:var(--dx-radius-xs);color:var(--secondary-color-4);cursor:default;justify-content:center;align-items:center;gap:var(--dx-space-2);touch-action:manipulation;transition:box-shadow var(--dx-motion-duration-base), background-color var(--dx-motion-duration-base), color var(--dx-motion-duration-base);background-color:transparent;border:0 solid;outline:0 solid;line-height:1.5;display:flex}.dx-color-picker-button:focus-visible{box-shadow:0 0 0 3px color-mix(in oklab, var(--focused-border-color) 50%, transparent)}.dx-color-picker-popover{z-index:var(--dx-z-overlay);border-radius:var(--dx-radius-lg);margin-top:var(--dx-space-1);background:var(--light,var(--primary-color)) var(--dark,var(--primary-color-5));box-shadow:inset 0 0 0 1px var(--light,var(--primary-color-6)) var(--dark,var(--primary-color-7)), 0 4px 16px rgba(0,0,0,.15);top:100%;display:block;position:absolute;inset-inline-start:0}.dx-color-picker-popover[data-state=open]{animation:dx-color-picker-popover-fade-in var(--dx-motion-duration-base) var(--dx-motion-ease-out)}.dx-color-picker-popover[data-state=closed]{animation:dx-color-picker-popover-fade-out var(--dx-motion-duration-base) var(--dx-motion-ease-out) forwards;pointer-events:none}@keyframes dx-color-picker-popover-fade-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@keyframes dx-color-picker-popover-fade-out{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-4px)}}.dx-color-picker-dialog{box-sizing:border-box;padding:var(--dx-space-2);gap:var(--dx-space-2);flex-direction:column;display:flex}.dx-color-picker-input{align-items:flex-end;gap:var(--dx-space-1);flex-direction:row;display:flex}.dx-color-picker[data-disabled=true],.dx-color-picker [data-disabled=true]{cursor:not-allowed;opacity:.5}