.c-colorpicker{--c-colorpicker-rect-x: 100%;--c-colorpicker-rect-y: 0%;--c-colorpicker-color: #ff0000;--c-colorpicker-hue-color: #ff0000;--c-colorpicker-color-with-alpha: #ff0000ff;--c-colorpicker-rect-border-color: #fff;--c-colorpicker-slider-hue-border-color: #fff;width:17.5rem}.c-colorpicker>.c-popover-content{padding:1rem}.c-colorpicker-content{display:contents}.c-colorpicker-eyedropper{padding:0;aspect-ratio:1}.c-colorpicker-label{display:grid;grid-template-columns:2fr 1fr;gap:.5rem;margin-bottom:.25rem}.c-colorpicker[data-c-colorpicker-disabled-opacity] .c-colorpicker-label{grid-template-columns:1fr}.c-colorpicker[data-c-colorpicker-disabled-opacity] .c-colorpicker-label-opacity{display:none}.c-colorpicker-options{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}.c-colorpicker-preview{min-width:2rem;max-width:2rem;min-height:2rem;max-height:2rem;border:.0625rem solid transparent;border-radius:62.4375rem;background-color:var(--c-colorpicker-color-with-alpha);position:relative}.c-colorpicker-rect{touch-action:none;box-shadow:var(--g-elevation2);background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent),var(--c-colorpicker-hue-color);width:100%;aspect-ratio:3/2;border-radius:.25rem;margin-bottom:1rem;position:relative;cursor:crosshair}.c-colorpicker[data-c-colorpicker-colorspace=hsl] .c-colorpicker-rect{background:linear-gradient(to bottom,#fff,#fff0 50%,#0000 50%,#000),linear-gradient(to right,#808080,var(--c-colorpicker-hue-color))}.c-colorpicker[data-c-colorpicker-hueonly] .c-colorpicker-rect{display:none}.c-colorpicker-rect:after{pointer-events:none;content:"";display:block;left:var(--c-colorpicker-rect-x);top:var(--c-colorpicker-rect-y);translate:-50% -50%;background-color:var(--c-colorpicker-color);width:1.25rem;height:1.25rem;box-shadow:var(--g-elevation2);border-radius:50%;border:.125rem solid var(--c-colorpicker-rect-border-color);position:absolute}.c-colorpicker-slider{flex:1;display:flex;flex-direction:column;justify-content:center;gap:.5rem}.c-colorpicker-slider-hue{-webkit-appearance:none;appearance:none;width:100%;background-color:transparent;border-radius:62.4375rem}.c-colorpicker-slider-hue::-webkit-slider-runnable-track{-webkit-appearance:none;appearance:none;cursor:pointer;height:.75rem;box-shadow:var(--g-elevation1);border-radius:624.9375rem;background:linear-gradient(90deg in hsl longer hue,red 0% 100%)}.c-colorpicker-slider-hue::-moz-range-track{appearance:none;height:.75rem;cursor:pointer;box-shadow:var(--g-elevation1);border-radius:624.9375rem;background:linear-gradient(90deg in hsl longer hue,red 0% 100%)}.c-colorpicker-slider-hue::-webkit-slider-thumb{-webkit-appearance:none;position:relative;cursor:pointer;top:-.25rem;width:1.25rem;box-shadow:var(--g-elevation2);height:1.25rem;border-radius:50%;border:.125rem solid var(--c-colorpicker-slider-hue-border-color);background:var(--c-colorpicker-hue-color)}.c-colorpicker-slider-hue::-webkit-slider-thumb:active{cursor:pointer}.c-colorpicker-slider-hue::-moz-range-thumb{position:relative;cursor:pointer;top:-.25rem;box-shadow:var(--g-elevation2);width:1.25rem;height:1.25rem;border-radius:50%;border:.125rem solid var(--c-colorpicker-slider-hue-border-color);background:var(--c-colorpicker-hue-color)}.c-colorpicker-slider-hue::-moz-range-thumb:active{cursor:pointer}.c-colorpicker-slider-opacity{-webkit-appearance:none;appearance:none;width:100%;border-radius:624.9375rem;background-color:transparent}.c-colorpicker[data-c-colorpicker-disabled-opacity] .c-colorpicker-slider-opacity{display:none}.c-colorpicker-slider-opacity::-webkit-slider-runnable-track{-webkit-appearance:none;appearance:none;cursor:pointer;height:.75rem;outline:.0625rem solid rgb(var(--g-color-on-surface));outline-offset:-.0625rem;box-shadow:var(--g-elevation1);border-radius:624.9375rem;background:linear-gradient(90deg,transparent 0%,var(--c-colorpicker-color) 100%)}.c-colorpicker-slider-opacity::-moz-range-track{appearance:none;height:.75rem;cursor:pointer;outline:.0625rem solid rgb(var(--g-color-on-surface));outline-offset:-.0625rem;box-shadow:var(--g-elevation1);border-radius:624.9375rem;background:linear-gradient(90deg,transparent 0%,var(--c-colorpicker-color) 100%)}.c-colorpicker-slider-opacity::-webkit-slider-thumb{-webkit-appearance:none;position:relative;cursor:pointer;top:-.25rem;width:1.25rem;box-shadow:var(--g-elevation2);height:1.25rem;border-radius:50%;border:.125rem solid rgb(var(--g-color-on-surface));background:rgb(var(--g-color-surface))}.c-colorpicker-slider-opacity::-webkit-slider-thumb:active{cursor:pointer}.c-colorpicker-slider-opacity::-moz-range-thumb{position:relative;cursor:pointer;top:-.25rem;box-shadow:var(--g-elevation2);width:1.25rem;height:1.25rem;border-radius:50%;border:.125rem solid rgb(var(--g-color-on-surface));background:rgb(var(--g-color-surface))}.c-colorpicker-slider-opacity::-moz-range-thumb:active{cursor:pointer}.c-colorpicker-textfield{display:grid;grid-template-columns:2fr 1fr;gap:.5rem}.c-colorpicker[data-c-colorpicker-disabled-opacity] .c-colorpicker-textfield{grid-template-columns:1fr}.c-colorpicker-textfield-color{padding-right:.25rem}.c-colorpicker-textfield-color>input{width:100%;padding-right:0}.c-colorpicker[data-c-colorpicker-disabled-opacity] .c-colorpicker-textfield-opacity{display:none}.c-colorpicker-textfield-opacity>input{width:100%;padding-right:0}