@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));
    position: absolute;
    z-index: 999999;
    border-radius: 10px;
    padding: 0.5em;
    box-shadow: 0 5px 20px #00000044;
    backdrop-filter: blur(3px);
    background: white;
    top: 0;
    left: 0;
    animation: 0.15s reveal-picker ease-out forwards;
    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;
}