: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: 260px;
    max-width: 260px;
    background: var(--background, #fff);
    border: 1px solid var(--outer-border-color, #ccc);
    overflow-y: auto
}

    .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] {
        --background: #111;
        --foreground: #ccc;
        --outer-border-color: #aaa;
        --button-hover-background: #444;
        --border-color: #34373a;
        --thumb-background: #151515;
        --thumb-hover-background: #242424;
        --thumb-hover-border-color: #555;
        --label-color: #d8d8d8;
        --input-background: #181818;
        --input-hover-background: #272727;
        --input-hover-border-color: #484b4d;
        --swatches-background: #151515
    }

    .alwan[data-display=popover] {
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
        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: 10px 15px;
    border-top: 1px solid var(--border-color, #ccc)
}

    .alwan__container > * {
        width: 100%
    }

.alwan__palette {
    overflow: hidden;
    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 #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: 42px;
    height: 42px;
    margin-right: 15px;
    border: 1px solid var(--border-color, #ccc);
    border-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: 0;
        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: 8px
    }

    .alwan__slider::-moz-range-track {
        width: 100%;
        height: 15px;
        border: 0;
        border-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: 20px;
        width: 20px;
        border: 1px solid #999;
        border-radius: 100%;
        background-color: 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: 20px;
        width: 20px;
        border: 1px solid #999;
        border-radius: 100%;
        background-color: 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(--thumb-hover-border-color, #555);
        background: var(--thumb-hover-background, #f0f0f0)
    }

    .alwan__slider:not(:disabled)::-moz-range-thumb:hover {
        cursor: grab;
        cursor: -webkit-grab;
        border-color: var(--thumb-hover-border-color, #555);
        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: #117ce0
    }

    .alwan__slider:focus::-moz-range-thumb {
        border-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(--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(--foreground, #333);
    font-size: 14px;
    font-family: monospace;
    border: 1px solid var(--border-color, #ccc);
    margin-bottom: 3px;
    background-color: var(--input-background, #fafafa);
    line-height: 1;
    border-radius: 2px;
    transition: border-color .2s,background-color .2s
}

    .alwan__input::selection {
        color: #fff;
        background-color: #117ce0
    }

    .alwan__input:focus {
        outline: 0;
        border-color: #117ce0;
        background-color: var(--background, #fff)
    }

        .alwan__input:focus + span {
            color: #117ce0
        }

    .alwan__input:hover:not(:focus,:disabled) {
        background-color: var(--input-hover-background, #f0f0f0);
        border-color: var(--input-hover-border-color, #a8a8a8)
    }

    .alwan__input:disabled, .alwan__input:disabled + span {
        opacity: .5
    }

.alwan__swatches {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    background-color: var(--swatches-background, #f5f5f5);
    padding: 10px 15px 0 15px;
    max-height: 100px;
    overflow-y: auto;
    border-top: 1px solid var(--border-color, #ccc)
}

.alwan__button {
    display: inline-block;
    width: auto;
    background: rgba(0,0,0,0);
    color: 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(--button-hover-background, #f0f0f0)
    }

    .alwan__button:focus-visible:not(.alwan__reference) {
        border-color: #117ce0
    }

    .alwan__button svg {
        fill: currentColor;
        pointer-events: none;
        vertical-align: middle
    }

.alwan__swatch {
    width: 22px;
    height: 22px;
    margin: 0 5px 10px 5px;
    border-radius: 3px
}

    .alwan__swatch:hover:not(:disabled) {
        transform: scale(1.1)
    }

    .alwan__swatch:focus {
        outline: 1px solid var(--color);
        outline-offset: 1px
    }

.alwan__reference {
    width: 26px;
    height: 26px;
    border-radius: 3px;
    border: 3px solid #f5f5f5;
    outline: 1px solid #333;
    flex-shrink: 0
}

    .alwan__reference:focus, .alwan__reference:focus-visible {
        outline-color: #117ce0;
        box-shadow: 0 0 2px 2px #117ce0
    }

.alwan__copy-button {
    margin-right: 15px
}

.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;
    overflow: hidden;
    padding: 0
}

    .alwan__swatch::before, .alwan__preview::before, .alwan__reference::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--color)
    }

.alwan__toggle-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0;
    height: 10px;
    border-top: 1px solid var(--border-color, #ccc);
    overflow: hidden
}

.alwan--collapse.alwan__swatches {
    display: none
}

.alwan--collapse + .alwan__toggle-button svg {
    transform: rotate(180deg)
}

/*# sourceMappingURL=alwan.min.css.map */