<ul id="color-picker">
    <li class="yellow">
        <button data-color="#fff312" aria-label="Yellow"></button>
    </li>
    <li class="blue selected">
        <button data-color="#0d63f8" aria-label="Blue"></button>
    </li>
    <li class="pink">
        <button data-color="#ff0088" aria-label="Pink"></button>
    </li>
</ul>

<script type="module">
    import { press, animateView } from "https://cdn.jsdelivr.net/npm/motion-dom@12.16.0/+esm"
    import { spring } from "https://cdn.jsdelivr.net/npm/motion@12.16.0/+esm"

    async function selectColor(element, { currentTarget, pageX, pageY }) {
        const update = () => {
            const color = currentTarget.getAttribute("data-color")
            document
                .querySelector("#color-picker")
                .style.setProperty("--current-color", color)

            const selected = document.querySelector("#color-picker .selected")
            selected.classList.remove("selected")

            currentTarget.parentElement.classList.add("selected")
        }

        const animation = await animateView(update, {
            duration: 0.4,
            ease: [0.28, 0.02, 0.1, 0.99],
        }).new(
            {
                clipPath: [
                    `circle(0% at ${pageX}px ${pageY}px)`,
                    `circle(100% at ${pageX}px ${pageY}px)`,
                ],
            },
            { duration: 0.6, ease: "easeIn" }
        )
    }

    press("#color-picker button", (element, event) => {
        selectColor(element, event)
    })
</script>

<style>
    #color-picker {
        list-style: none;
        padding: 0;
        margin: 0;
        position: fixed;
        --inset: 60px;
        top: var(--inset);
        left: var(--inset);
        right: var(--inset);
        bottom: var(--inset);
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
        --current-color: #0d63f8;
        background-image: radial-gradient(
            circle,
            var(--current-color) 10%,
            transparent 10%
        );
        background-size: 20px 20px;
    }

    #color-picker button {
        position: relative;
        width: 80px;
        height: 80px;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        overflow: visible;
        outline: 10px solid var(--background);
    }

    #color-picker .yellow button {
        background-color: #fff312;
    }

    #color-picker .blue button {
        background-color: #0d63f8;
    }

    #color-picker .pink button {
        background-color: #ff0088;
    }

    #color-picker .selected button::after {
        content: "";
        position: absolute;
        top: -8px;
        left: -8px;
        right: -8px;
        bottom: -8px;
        border: 4px solid #f5f5f5;
        border-radius: 50%;
        view-transition-name: color-picker-button;
    }
</style>