@charset "UTF-8";
.colors {
    display: flex;
    justify-content: center;
    gap: 6%;
}

@supports (display: grid) {
    .myColor {
        background: var(--color, #000);
        border: none;
        border-radius: 8px;
        width: 200px;
        height: 20px;
        outline: none;
        font-size: 0;
        cursor: pointer;
        box-shadow: 0 0 0 0 var(--color);
        transition: 0.25s cubic-bezier(0.35, 0, 0, 1.6);
    }

    .myColor:hover {
        box-shadow: 0 0 0 5px var(--color);
    }
}

.color-picker[positioned] {
    /* --x: calc(var(--pos-left) + var(--window-scroll-x)); */
    /* --y: calc(var(--pos-top) + var(--window-scroll-y)); */
    --x: var(--pos-left);
    --y: var(--pos-top);
    position: absolute;
    z-index: 999999;
    border-radius: 10px;
    padding: 0.5em;
    box-shadow: 0 5px 20px #00000044;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    background: white;
    top: 0;
    left: 0;
    animation: 0.15s reveal-picker ease-out forwards;
    -webkit-transform: translate(calc(var(--x) * 1px), calc(var(--y) * 1px));
    transform: translate(calc(var(--x) * 1px), calc(var(--y) * 1px));

    @media only screen and (max-device-width: 640px) {
        max-width: 70%;
    }
}

.color-picker[data-placement~="left"] {
    --left: 15px;
}
.color-picker[data-placement~="right"] {
    --left: -15px;
}
.color-picker[data-placement~="below"] {
    --top: -15px;
}
.color-picker[data-placement~="above"] {
    --top: 15px;
}

@keyframes reveal-picker {
    from {
        opacity: 0;
        top: var(--top, 0);
        left: var(--left, 0);
    }
}

.color-picker {
    border-radius: 8px !important;
}