:root{--yk-box-shadow-color: rgba(0, 0, 0, .2);--yk-border-color: 1px solid white;--yk-box-shadow: 0 0 0 1px black;--yk-slider-box-shadow: 0 0 6px #777;--yk-hue-gradient: linear-gradient( 90deg, red, #ff0, #0f0, #0ff, #00f, #f0f, red );--yk-opacity-gradient: linear-gradient(90deg, transparent, red)}.yk-overlay-wrapper--light{--yk-bg-color: #f7f7f7;--yk-thumb-bg-color: #fff;--yk-thumb-focus-outline: #383838;--yk-input-bg-color: #fcfcfc;--yk-input-text-color: #3b3b3b;--yk-input-border-color: #d6d6d6;--yk-input-focus-border-color: #467dff;--yk-label-color: #3b3b3b;--yk-preview-stroke: #c8c8c8;--yk-icon-fill: #696969;--yk-icon-hover-bg-color: #dfdfdf}.yk-overlay-wrapper--dark{--yk-bg-color: #383838;--yk-thumb-bg-color: #323232;--yk-thumb-focus-outline: #fff;--yk-input-bg-color: #424242;--yk-input-text-color: #d6d6d6;--yk-input-border-color: #5a5a5a;--yk-input-focus-border-color: #0e639c;--yk-label-color: #d6d6d6;--yk-preview-stroke: gray;--yk-icon-fill: #bcbcbc;--yk-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 *,.yk-overlay-wrapper{box-sizing:border-box}.yk-overlay-wrapper--open{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;-webkit-user-select:none;user-select:none;background-color:var(--yk-bg-color)}.yk-palette{height:150px;border-radius:6px 6px 0 0;background-image:linear-gradient(180deg,transparent,#000),linear-gradient(90deg,#fff,red)}.yk-cursor{position:absolute;top:-6px;left:-6px;padding:4px;border-radius:8px;border:var(--yk-border-color);box-shadow:var(--yk-box-shadow)}.yk-cursor:focus,.yk-cursor:focus-visible{--yk-box-shadow: 0 0 0 2px black;outline:none}.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;-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,.yk-opacity-color{width:100%;border-radius:2px}.yk-hue-slider{height:10px;background-image:var(--yk-hue-gradient)}.yk-opacity-color{background-image:var(--yk-opacity-gradient);position:absolute;height:100%}.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;background-color:var(--yk-thumb-bg-color)}.yk-hue-slider-thumb:focus,.yk-opacity-slider-thumb:focus{outline:1px solid;outline-color:var(--yk-thumb-focus-outline)}.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;justify-items:center;gap:4px 8px}.yk-input-wrapper{grid-template-columns:repeat(4,1fr)}.yk-hex-input{grid-template-columns:1fr}.yk-color-input{font-family:inherit;height:22px;outline:none;border:1px solid var(--yk-input-border-color);font-size:12px;text-align:center;width:42px;border-radius:4px;background-color:var(--yk-input-bg-color);color:var(--yk-input-text-color)}.yk-color-input:focus{border-color:var(--yk-input-focus-border-color)}.yk-hex-input .yk-color-input{width:160px}.yk-color-model-label{font-size:12px;color:var(--yk-label-color)}.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-clipboard-color:hover,.yk-clipboard-color:focus,.yk-color-model-switch:hover,.yk-color-model-switch:focus{background-color:var(--yk-icon-hover-bg-color)}.yk-preview-stroke{stroke:var(--yk-preview-stroke)}:where(.yk-clipboard-color svg,.yk-color-model-switch svg){fill:var(--yk-icon-fill)}