:root{--alwan-pattern:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 20 20'><path fill='%23D0D0D0' d='M0 0h10v10H0Z'/><path fill='%23fff' d='M0 10h10v10H0Z'/><path fill='%23D0D0D0' d='M10 10h10v10H10Z'/><path fill='%23fff' d='M10 0h10v10H10Z'/></svg>")}.alwan{--color: rgba(var(--rgb), var(--a));width:var(--alwan-width, 260px);max-width:var(--alwan-width, 260px);background:var(--alwan-background, var(--background, #fff));border:1px solid var(--alwan-outer-border-color, var(--outer-border-color, #ccc));overflow:visible}.alwan *{box-sizing:border-box}.alwan:not(.alwan--open){visibility:hidden}.alwan:not(.alwan--open)[data-display=block]{overflow:hidden;height:0;border:0}.alwan[data-theme=dark]{--alwan-background:#111;--alwan-foreground:#ccc;--alwan-outer-border-color:#aaa;--alwan-button-hover-background:#444;--alwan-border-color:#34373a;--alwan-thumb-background:#151515;--alwan-thumb-hover-background:#242424;--alwan-thumb-hover-border-color:#555;--alwan-label-color:#d8d8d8;--alwan-input-background:#181818;--alwan-input-hover-background:#272727;--alwan-input-hover-border-color:#484b4d;--alwan-swatches-background:#151515}.alwan[data-display=popover]{position:fixed;width:100%;top:0;left:0;z-index:var(--alwan-popup-z-index, 999999);border:0;box-shadow:0px 5px 5px -3px rgba(0,0,0,.2),0px 8px 10px 1px rgba(0,0,0,.14),0px 3px 14px 2px rgba(0,0,0,.12)}.alwan__container{position:relative;display:flex;align-items:center;padding:var(--alwan-container-padding, 10px 15px);border-top:1px solid var(--alwan-border-color, var(--border-color, #ccc));gap:var(--alwan-container-gap, 15px)}.alwan__container>*{width:100%}.alwan__palette{overflow:hidden;height:var(--alwan-palette-height, 136px);outline:0;touch-action:none;user-select:none;cursor:crosshair;background:linear-gradient(to bottom, transparent, #000),linear-gradient(to right, #fff, hsl(var(--h, 0), 100%, 50%))}.alwan__palette:focus .alwan__marker{box-shadow:0 0 1px 2px var(--alwan-focus-color, #117ce0)}.alwan__marker{position:relative;top:-8px;left:-8px;width:16px;height:16px;border-radius:100%;background:rgba(0,0,0,0);border:2px solid #fff;box-shadow:0 0 1px 1px rgba(0,0,0,.3);cursor:grab;cursor:-webkit-grab}.alwan__preview{width:var(--alwan-preview-size, 42px);height:var(--alwan-preview-size, 42px);border:1px solid var(--alwan-border-color, var(--border-color, #ccc));border-radius:var(--alwan-preview-radius, 5px);flex-shrink:0}.alwan__preview .alwan__copy-button{position:relative;display:flex;justify-content:center;align-items:center;width:100%;height:100%;color:#fff;opacity:0;border-radius:inherit;margin:0}.alwan__preview .alwan__copy-button:focus,.alwan__preview .alwan__copy-button:hover:not(:disabled){opacity:1;z-index:100;background-color:rgba(0,0,0,.6)}.alwan__preview .alwan__copy-button:focus-visible{border:0}.alwan__slider{--hue-track: linear-gradient( 90deg, #ff0000, #ff00ff, #0000ff, #00ffff, #00ff00, #ffff00, #ff0000 );--alpha-track: linear-gradient(90deg, transparent, rgb(var(--rgb))), var(--alwan-pattern);display:block;width:100%;height:15px;background-color:rgba(0,0,0,0);margin:0;padding:0;cursor:pointer;outline:0;-webkit-appearance:none;appearance:none}.alwan__slider:active{cursor:grabbing;cursor:-webkit-grabbing}.alwan__slider::-webkit-slider-runnable-track{-webkit-appearance:none;appearance:none;width:100%;height:15px;border:0;border-radius:var(--alwan-slider-track-radius, 8px)}.alwan__slider::-moz-range-track{width:100%;height:15px;border:0;border-radius:var(--alwan-slider-track-radius, 8px)}.alwan__slider:focus-visible::-webkit-slider-runnable-track{outline:2px solid rgba(17,124,224,.5);outline-offset:2px}.alwan__slider:focus-visible::-moz-range-track{outline:2px solid rgba(17,124,224,.5);outline-offset:2px}.alwan__slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:-2.5px;height:var(--alwan-slider-thumb-size, 20px);width:var(--alwan-slider-thumb-size, 20px);border:1px solid #999;border-radius:100%;background-color:var(--alwan-thumb-background, var(--thumb-background, #fff));box-shadow:0 0 1px 1px rgba(0,0,0,.3)}.alwan__slider::-moz-range-thumb{box-sizing:border-box;padding:0;height:var(--alwan-slider-thumb-size, 20px);width:var(--alwan-slider-thumb-size, 20px);border:1px solid #999;border-radius:100%;background-color:var(--alwan-thumb-background, var(--thumb-background, #fff));box-shadow:0 0 1px 1px rgba(0,0,0,.3)}.alwan__slider:not(:disabled)::-webkit-slider-thumb:hover{cursor:grab;cursor:-webkit-grab;border-color:var(--alwan-thumb-hover-border-color, var(--thumb-hover-border-color, #555));background:var(--alwan-thumb-hover-background, var(--thumb-hover-background, #f0f0f0))}.alwan__slider:not(:disabled)::-moz-range-thumb:hover{cursor:grab;cursor:-webkit-grab;border-color:var(--alwan-thumb-hover-border-color, var(--thumb-hover-border-color, #555));background:var(--alwan-thumb-hover-background, var(--thumb-hover-background, #f0f0f0))}.alwan__slider:active:not(:disabled)::-webkit-slider-thumb{cursor:grabbing;cursor:-webkit-grabbing;outline:5px solid rgba(17,124,224,.3)}.alwan__slider:active:not(:disabled)::-moz-range-thumb{cursor:grabbing;cursor:-webkit-grabbing;outline:5px solid rgba(17,124,224,.3)}.alwan__slider:focus::-webkit-slider-thumb{border-color:var(--alwan-focus-color, #117ce0)}.alwan__slider:focus::-moz-range-thumb{border-color:var(--alwan-focus-color, #117ce0)}.alwan__slider:disabled{opacity:.5;cursor:default}.alwan__hue{direction:rtl}.alwan__hue::-webkit-slider-runnable-track{background:var(--hue-track)}.alwan__hue::-moz-range-track{background:var(--hue-track)}.alwan__alpha{margin-top:14px}.alwan__alpha::-webkit-slider-runnable-track{background:var(--alpha-track)}.alwan__alpha::-moz-range-track{background:var(--alpha-track)}.alwan__inputs{display:flex}.alwan__inputs label{width:100%;text-align:center;margin-right:4px;text-transform:uppercase;color:var(--alwan-label-color, var(--label-color, #555));cursor:pointer;line-height:1;font-family:system-ui;font-size:13px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.alwan__input{display:block;width:100%;padding:8px 0;text-align:center;color:var(--alwan-foreground, var(--foreground, #333));font-size:14px;font-family:monospace;border:1px solid var(--alwan-border-color, var(--border-color, #ccc));margin-bottom:3px;background-color:var(--alwan-input-background, var(--input-background, #fafafa));line-height:1;border-radius:var(--alwan-input-radius, 2px);transition:border-color .2s,background-color .2s}.alwan__input::selection{color:#fff;background-color:var(--alwan-focus-color, #117ce0)}.alwan__input:focus{outline:0;border-color:var(--alwan-focus-color, #117ce0);background-color:var(--alwan-background, var(--background, #fff))}.alwan__input:focus+span{color:var(--alwan-focus-color, #117ce0)}.alwan__input:hover:not(:focus,:disabled){background-color:var(--alwan-input-hover-background, var(--input-hover-background, #f0f0f0));border-color:var(--alwan-input-hover-border-color, var(--input-hover-border-color, #a8a8a8))}.alwan__input:disabled,.alwan__input:disabled+span{opacity:.5}.alwan__swatches{display:flex;gap:var(--alwan-swatches-gap, 8px);flex-wrap:wrap;background-color:var(--alwan-swatches-background, var(--swatches-background, #f5f5f5));padding:var(--alwan-swatches-padding, 10px 5px 10px 15px);max-height:var(--alwan-swatches-max-height, 250px);overflow-y:auto;border-top:1px solid var(--alwan-border-color, var(--border-color, #ccc))}.alwan__button{display:inline-block;width:auto;background:rgba(0,0,0,0);color:var(--alwan-foreground, var(--foreground, #333));border:1px solid rgba(0,0,0,0);cursor:pointer;padding:8px 4px;transition:background-color .2s ease-in-out;outline:0}.alwan__button:disabled{opacity:.5;cursor:not-allowed}.alwan__button:hover:not(:disabled){background-color:var(--alwan-button-hover-background, var(--button-hover-background, #f0f0f0))}.alwan__button:focus-visible:not(.alwan__reference){border-color:var(--alwan-focus-color, #117ce0)}.alwan__button svg{pointer-events:none;vertical-align:middle}.alwan__button svg:not([fill=none]){fill:currentColor}.alwan__button svg[fill=none]{stroke:currentColor}.alwan__swatch{width:var(--alwan-swatch-size, 30px);height:var(--alwan-swatch-size, 30px);border-radius:var(--alwan-swatch-radius, 3px);border:1px solid #000}.alwan__swatch:hover:not(:disabled){outline:3px ridge rgba(17,124,224,.3)}.alwan__swatch:focus{outline:1px solid var(--color);outline-offset:1px}.alwan__swatch.active{outline:3px ridge rgba(17,124,224,.6)}.alwan__swatch.active::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%, -60%) rotate(45deg);width:6px;height:12px;border:solid #fff;border-width:0 3px 3px 0;animation:checkmark .3s ease-in-out}@keyframes checkmark{0%{opacity:0;transform:translate(-50%, -50%) rotate(45deg) scale(0)}100%{opacity:1;transform:translate(-50%, -50%) rotate(45deg) scale(1)}}.alwan__reference{width:var(--alwan-preset-size, 26px);height:var(--alwan-preset-size, 26px);border-radius:var(--alwan-preset-radius, 3px);border:3px solid #f5f5f5;outline:1px solid #333;flex-shrink:0}.alwan__reference:focus,.alwan__reference:focus-visible{outline-color:var(--alwan-focus-color, #117ce0);box-shadow:0 0 2px 2px var(--alwan-focus-color, #117ce0)}.alwan__copy-button{margin-right:15px}.alwan__utility{display:contents}.alwan__clear-button{flex-shrink:0}.alwan__backdrop::before{content:"";position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999999999;cursor:grabbing;cursor:-webkit-grabbing}.alwan__swatch,.alwan__preview,.alwan__reference{position:relative;background:var(--alwan-pattern);background-clip:padding-box;padding:0}.alwan__swatch::before,.alwan__preview::before,.alwan__reference::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;background:var(--color)}.alwan__reference.alwan__none-color,.alwan__preview.alwan__none-color,.alwan__swatch.alwan__none-color{background:#fff;position:relative}.alwan__reference.alwan__none-color::before,.alwan__preview.alwan__none-color::before,.alwan__swatch.alwan__none-color::before{content:"";position:absolute;top:50%;left:50%;width:2px;height:100%;background-color:#f44336;transform:translate(-50%, -50%) rotate(45deg);border-radius:1px}.alwan__toggle-button{display:flex;align-items:center;justify-content:center;width:100%;padding:0;height:var(--alwan-swatches-toggle-height, 10px);border-top:1px solid var(--alwan-border-color, var(--border-color, #ccc));overflow:hidden}.alwan--collapse.alwan__swatches{display:none}.alwan--collapse+.alwan__toggle-button svg{transform:rotate(180deg)}.alwan__tooltip{position:fixed;top:0;left:0;z-index:1000000;box-sizing:border-box;width:max-content;max-width:var(--alwan-tooltip-max-width, 160px);padding:var(--alwan-tooltip-padding, 4px 8px);border-radius:var(--alwan-tooltip-border-radius, 4px);background:var(--alwan-tooltip-background, #2b2b2b);color:var(--alwan-tooltip-color, #fff);font-family:var(--alwan-tooltip-font-family, system-ui);font-size:var(--alwan-tooltip-font-size, 12px);font-weight:400;line-height:1.3;text-align:center;white-space:normal;overflow-wrap:break-word;box-shadow:0 2px 6px rgba(0,0,0,.3);pointer-events:none;opacity:0;visibility:hidden;transition:opacity .18s ease,visibility .18s ease}.alwan__tooltip::after{content:"";position:absolute;top:100%;left:var(--alwan-tooltip-arrow, 50%);transform:translateX(-50%);border:5px solid rgba(0,0,0,0);border-top-color:var(--alwan-tooltip-background, #2b2b2b)}.alwan__tooltip--below::after{top:auto;bottom:100%;border-top-color:rgba(0,0,0,0);border-bottom-color:var(--alwan-tooltip-background, #2b2b2b)}.alwan__tooltip--visible{opacity:1;visibility:visible}

/*# sourceMappingURL=alwan-color-picker.min.css.map */