:root{--yk-box-shadow-color: rgba(0, 0, 0, .2);--yk-border-color: thin solid white;--yk-box-shadow: 0 0 0 1px black;--yk-slider-box-shadow: 0px 0px 6px #777;--yk-hue-gradient: linear-gradient( 90deg, red, #ff0, #0f0, #0ff, #00f, #f0f, red );--yk-opacity-gradient: linear-gradient(90deg, transparent, red);--yk-light-bg-color: #f7f7f7;--yk-light-thumb-bg-color: #fff;--yk-light-thumb-focus-outline: #383838;--yk-light-input-bg-color: #fcfcfc;--yk-light-input-text-color: #3b3b3b;--yk-light-input-border-color: #d6d6d6;--yk-light-input-focus-border-color: #467dff;--yk-light-label-color: #3b3b3b;--yk-light-preview-stroke: #c8c8c8;--yk-light-icon-fill: #696969;--yk-light-icon-hover-bg-color: #dfdfdf;--yk-dark-bg-color: #383838;--yk-dark-thumb-bg-color: #323232;--yk-dark-thumb-focus-outline: #fff;--yk-dark-input-bg-color: #383838;--yk-dark-input-text-color: #d6d6d6;--yk-dark-input-border-color: #5a5a5a;--yk-dark-input-focus-border-color: #0e639c;--yk-dark-label-color: #d6d6d6;--yk-dark-preview-stroke: gray;--yk-dark-icon-fill: #bcbcbc;--yk-dark-icon-hover-bg-color: #4e4e4e}.yk-overlay-wrapper{touch-action:none;position:fixed;z-index:1;transition:opacity .3s,visibility .3s;opacity:0;visibility:hidden}.yk-overlay-wrapper--open{transition:opacity .3s;opacity:1;visibility:visible}.yk-overlay-wrapper:not(.yk-overlay-wrapper--static){top:4px;left:4px}.yk-overlay-wrapper.yk-overlay-wrapper--static{position:static}.yk-wrapper{box-shadow:var(--yk-box-shadow-color) 0 4px 10px;display:inline-block;width:280px;position:relative;border-radius:6px;font-family:sans-serif;-moz-user-select:none;-webkit-user-select:none;user-select:none}.yk-palette{height:150px;border-top-left-radius:6px;border-top-right-radius:6px;background-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,1) 100%),linear-gradient(90deg,#fff,red)}.yk-cursor{position:absolute;top:-6px;left:-6px;width:10px;height:10px;border-radius:50%;border:var(--yk-border-color);box-shadow:var(--yk-box-shadow)}.yk-color-settings{display:flex;align-items:center;padding:12px 14px 12px 12px;flex-wrap:wrap;row-gap:12px}.yk-sliders{flex-grow:1;display:flex;row-gap:12px;flex-direction:column}.yk-hue-slider-wrapper,.yk-opacity-slider-wrapper{position:relative;-moz-user-select:none;-webkit-user-select:none;user-select:none;flex-grow:1}.yk-opacity-slider-wrapper{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyIDIiPjxwYXRoIGZpbGw9IndoaXRlIiBkPSJNMSwwSDJWMUgxVjBaTTAsMUgxVjJIMFYxWiIvPjxwYXRoIGZpbGw9IiNEQkRCREIiIGQ9Ik0wLDBIMVYxSDBWMFpNMSwxSDJWMkgxVjFaIi8+PC9zdmc+);background-size:8px;border-radius:2px;height:10px}.yk-hue-slider{width:100%;height:10px;border-radius:2px;background-image:var(--yk-hue-gradient)}.yk-opacity-color{background-image:var(--yk-opacity-gradient);position:absolute;width:100%;height:100%;border-radius:2px}.yk-hue-slider-thumb,.yk-opacity-slider-thumb{position:absolute;width:16px;height:16px;border-radius:50px;box-shadow:var(--yk-slider-box-shadow);top:50%;transform:translate(-8px,-50%);outline:none}.yk-hue-slider-thumb:focus,.yk-opacity-slider-thumb:focus{outline:1px solid}.yk-color-preview-wrapper{margin:0 16px 0 10px}.yk-color-preview{position:absolute;width:100%;height:100%}.yk-color-model-wrapper{display:flex;flex-basis:100%;position:relative;align-items:center;column-gap:6px}.yk-color-model{display:flex;flex-direction:column;align-items:center;row-gap:6px;flex-grow:1}.yk-hex-input,.yk-input-wrapper{display:grid;width:100%;justify-items:center;row-gap:4px}.yk-input-wrapper{grid-template-columns:1fr 1fr 1fr 1fr}.yk-rgb-input,.yk-hsv-input,.yk-hsl-input{display:grid;width:100%;justify-items:center;row-gap:4px}.yk-rgb-input,.yk-hsv-input,.yk-hsl-input{grid-template-columns:1fr 1fr 1fr 1fr}.yk-hex-input{grid-template-columns:1fr}.yk-color-input{font-family:inherit;height:20px;outline:none;border:1px solid;font-size:12px;text-align:center;width:42px;border-radius:4px}.yk-hex-input .yk-color-input{width:180px}.yk-color-model-label{font-size:12px}.yk-clipboard-color,.yk-color-model-switch{width:16px;height:16px;background-position:center;background-repeat:no-repeat;padding:5px;border-radius:4px;cursor:pointer;box-sizing:content-box;margin:0;background-color:transparent;border:none;outline:none}.yk-overlay-wrapper--light .yk-wrapper{background-color:var(--yk-light-bg-color)}.yk-overlay-wrapper--light :where(.yk-hue-slider-thumb,.yk-opacity-slider-thumb){background-color:var(--yk-light-thumb-bg-color)}.yk-overlay-wrapper--light .yk-hue-slider-thumb:focus,.yk-overlay-wrapper--light .yk-opacity-slider-thumb:focus{outline-color:var(--yk-light-thumb-focus-outline)}.yk-overlay-wrapper--light .yk-color-input{background-color:var(--yk-light-input-bg-color);color:var(--yk-light-input-text-color);border-color:var(--yk-light-input-border-color)}.yk-overlay-wrapper--light .yk-color-input:focus{border-color:var(--yk-light-input-focus-border-color)}.yk-overlay-wrapper--light .yk-color-model-label{color:var(--yk-light-label-color)}.yk-overlay-wrapper--light .yk-preview-stroke{stroke:var(--yk-light-preview-stroke)}.yk-overlay-wrapper--light :where(.yk-clipboard-color svg,.yk-color-model-switch svg){fill:var(--yk-light-icon-fill)}.yk-overlay-wrapper--light :where(.yk-clipboard-color:hover,.yk-clipboard-color:focus,.yk-color-model-switch:hover,.yk-color-model-switch:focus){background-color:var(--yk-light-icon-hover-bg-color)}.yk-overlay-wrapper--dark .yk-wrapper{background-color:var(--yk-dark-bg-color)}.yk-overlay-wrapper--dark :where(.yk-hue-slider-thumb,.yk-opacity-slider-thumb){background-color:var(--yk-dark-thumb-bg-color)}.yk-overlay-wrapper--dark .yk-hue-slider-thumb:focus,.yk-overlay-wrapper--dark .yk-opacity-slider-thumb:focus{outline-color:var(--yk-dark-thumb-focus-outline)}.yk-overlay-wrapper--dark .yk-color-input{background-color:var(--yk-dark-input-bg-color);color:var(--yk-dark-input-text-color);border-color:var(--yk-dark-input-border-color)}.yk-overlay-wrapper--dark .yk-color-input:focus{border-color:var(--yk-dark-input-focus-border-color)}.yk-overlay-wrapper--dark .yk-color-model-label{color:var(--yk-dark-label-color)}.yk-overlay-wrapper--dark .yk-preview-stroke{stroke:var(--yk-dark-preview-stroke)}.yk-overlay-wrapper--dark :where(.yk-clipboard-color svg,.yk-color-model-switch svg){fill:var(--yk-dark-icon-fill)}.yk-overlay-wrapper--dark :where(.yk-clipboard-color:hover,.yk-clipboard-color:focus,.yk-color-model-switch:hover,.yk-color-model-switch:focus){background-color:var(--yk-dark-icon-hover-bg-color)}