.cp-color-picker{max-width:var(--cp-width-color-space,300px);padding:var(--cp-spacing,6px);grid-gap:var(--cp-spacing,6px);font-size:var(--cp-font-size,.8em);font-family:var(--cp-font-family,-apple-system, BlinkMacSystemFont, Segoe UI, Arial, sans-serif);color:var(--cp-color-text,currentColor);background-color:var(--cp-color-background,#fff);grid-template-columns:1fr min-content;display:grid}.cp-color-picker,.cp-color-picker *,.cp-color-picker :after,.cp-color-picker :before{box-sizing:border-box}.cp-color-picker button::-moz-focus-inner{border:none;padding:0}.cp-color-picker :focus{outline:2px solid var(--cp-color-focus,#19f)}.cp-color-space{aspect-ratio:1/.6;grid-column:1/-1;overflow:hidden}.cp-thumb{--cp-thumb-size:calc(var(--cp-spacing,6px) * 4);box-sizing:border-box;width:var(--cp-thumb-size);height:var(--cp-thumb-size);margin-left:calc(-1 * var(--cp-thumb-size)/ 2);margin-bottom:calc(-1 * var(--cp-thumb-size)/ 2);box-shadow:0 0 0 var(--cp-width-border,1px) var(--cp-color-border,#000);border:3px solid #fff;border-radius:50%;position:absolute;bottom:0;left:0;transform:rotate(0)}.cp-thumb:focus{box-shadow:0 0 0 var(--cp-width-border,1px) var(--cp-color-border,#000),0 0 0 calc(var(--cp-width-border,1px) + 2px) var(--cp-color-focus,#19f);outline-color:#0000}.cp-range-input-label{--cp-slider-track-height:calc(var(--cp-spacing,6px) * 3);--cp-slider-thumb-size:calc(var(--cp-spacing,6px) * 4 - var(--cp-width-border,1px) * 2);display:block}.cp-range-input-group{flex-direction:column;justify-content:center;display:flex}.cp-range-input-group>:not(:first-child){margin-top:var(--cp-spacing,6px)}.cp-range-input{-webkit-appearance:none}.cp-range-input::-webkit-slider-thumb{-webkit-appearance:none}.cp-range-input{width:100%;height:var(--cp-slider-track-height);margin-left:0;margin-right:0;margin-top:calc(var(--cp-spacing,6px)/ 2 + 1px);margin-bottom:calc(var(--cp-spacing,6px)/ 2 + 1px);background:0 0;border:none;padding:0;display:block}.cp-range-input:focus{outline:0}.cp-range-input::-moz-focus-outer{border:none}.cp-range-input--alpha{background-color:#fff;background-image:linear-gradient(45deg,#eee 25%,#0000 25% 75%,#eee 75%,#eee),linear-gradient(45deg,#eee 25%,#0000 25% 75%,#eee 75%,#eee);background-size:calc(var(--cp-spacing,6px) * 2) calc(var(--cp-spacing,6px) * 2);background-position:0 0,var(--cp-spacing,6px) var(--cp-spacing,6px)}.cp-range-input::-moz-range-track{box-sizing:border-box;width:100%;height:var(--cp-slider-track-height);border:var(--cp-width-border,1px) solid var(--cp-color-border,#000)}.cp-range-input::-webkit-slider-runnable-track{box-sizing:border-box;width:100%;height:var(--cp-slider-track-height);border:var(--cp-width-border,1px) solid var(--cp-color-border,#000)}.cp-range-input::-ms-track{box-sizing:border-box;width:100%;height:var(--cp-slider-track-height);border:var(--cp-width-border,1px) solid var(--cp-color-border,#000)}.cp-range-input:focus::-moz-range-track{outline:2px solid var(--cp-color-focus,#19f)}.cp-range-input:focus::-webkit-slider-runnable-track{outline:2px solid var(--cp-color-focus,#19f)}.cp-range-input:focus::-ms-track{outline:2px solid var(--cp-color-focus,#19f)}.cp-range-input--alpha::-moz-range-track{background-image:linear-gradient(to right,transparent,var(--cp-color))}.cp-range-input--alpha::-webkit-slider-runnable-track{background-image:linear-gradient(to right,transparent,var(--cp-color))}.cp-range-input--alpha::-ms-track{background-image:linear-gradient(to right,transparent,var(--cp-color))}.cp-range-input--hue{--hue-gradient:linear-gradient(to right, red calc(100% * 0/360), #ff0 calc(100% * 60/360), #0f0 calc(100% * 120/360), #0ff calc(100% * 180/360), #00f calc(100% * 240/360), #f0f calc(100% * 300/360), red calc(100% * 360/360))}.cp-range-input--hue::-moz-range-track{background-image:var(--hue-gradient)}.cp-range-input--hue::-webkit-slider-runnable-track{background-image:var(--hue-gradient)}.cp-range-input--hue::-ms-track{background-image:var(--hue-gradient)}.cp-range-input::-moz-range-thumb{box-sizing:border-box;width:var(--cp-slider-thumb-size);height:var(--cp-slider-thumb-size);box-shadow:0 0 0 var(--cp-width-border,1px) var(--cp-color-border,#000);isolation:isolate;background-color:#0000;border:3px solid #fff;border-radius:50%}.cp-range-input::-webkit-slider-thumb{box-sizing:border-box;width:var(--cp-slider-thumb-size);height:var(--cp-slider-thumb-size);margin-top:calc(-1 * (var(--cp-spacing,6px)/ 2));box-shadow:0 0 0 var(--cp-width-border,1px) var(--cp-color-border,#000);isolation:isolate;background-color:#0000;border:3px solid #fff;border-radius:50%}.cp-range-input::-ms-thumb{box-sizing:border-box;width:var(--cp-slider-thumb-size);height:var(--cp-slider-thumb-size);margin-top:calc(-1 * (var(--cp-spacing,6px)/ 2));box-shadow:0 0 0 var(--cp-width-border,1px) var(--cp-color-border,#000);isolation:isolate;background-color:#0000;border:3px solid #fff;border-radius:50%}.cp-copy-button{width:calc(var(--cp-spacing,6px) * 6);height:calc(var(--cp-spacing,6px) * 6);border:var(--cp-width-border,1px) solid transparent;color:var(--cp-color-text-input,currentColor);background-color:var(--cp-color-background-input,#fff);border-radius:50%;justify-content:center;place-self:center;align-items:center;display:flex;position:relative;overflow:hidden}.cp-copy-button:focus{border-color:var(--cp-color-border,1px);box-shadow:0 0 0 2px var(--cp-color-focus,#19f);outline:0}.cp-copy-button:enabled:hover{background-color:#0002}.cp-color-input-wrapper{grid-column:1/-1;align-items:center;display:flex}.cp-color-input-wrapper>:not(:first-child){margin-left:var(--cp-spacing,6px)}.cp-color-input-group{column-gap:var(--cp-spacing,6px);flex-grow:1;grid-auto-flow:column;display:grid}.cp-color-input-label{text-align:center}.cp-color-input{width:100%;margin:0;margin-top:calc(var(--cp-spacing,6px)/ 2);padding:var(--cp-spacing,6px);border:var(--cp-width-border,1px) solid var(--cp-color-border,#000);font:inherit;text-align:center;color:inherit;background-color:#fff}.cp-switch-format-button{padding:var(--cp-spacing,6px);border:var(--cp-width-border,1px) solid transparent;font:inherit;color:inherit;background-color:#fff;border-radius:50%;justify-content:center;align-items:center;margin:0;display:flex}.cp-switch-format-button:focus{border-color:var(--cp-color-border,#000)}.cp-switch-format-button:enabled:hover{background-color:#0002}.cp-visually-hidden{clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;position:absolute!important;overflow:hidden!important}