<div class="accordion">
    <section>
        <h3>
            <button
                id="item1-button"
                aria-expanded="false"
                aria-controls="item1"
                class="big"
            >
                <span>What is Motion+?</span>
                <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                >
                    <path d="m6 9 6 6 6-6" />
                </svg>
                <div class="focus-ring"></div>
            </button>
        </h3>
        <div
            id="item1"
            aria-labelledby="item1-button"
            class="accordion-content"
        >
            <div>
                <p class="small">
                    Motion+ is a one-time fee, lifetime access membership that
                    unlocks the source code for all Motion examples, early
                    access features, premium components, and an exclusive
                    Discord community.
                </p>
            </div>
        </div>
        <hr />
    </section>
    <section>
        <h3>
            <button
                id="item2-button"
                aria-expanded="false"
                aria-controls="item2"
                class="big"
            >
                <span>What does "lifetime access" mean?</span>
                <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                >
                    <path d="m6 9 6 6 6-6" />
                </svg>
                <div class="focus-ring"></div>
            </button>
        </h3>
        <div
            id="item2"
            aria-labelledby="item2-button"
            class="accordion-content"
        >
            <div>
                <p class="small">
                    Just that! No one needs another subscription in their life.
                </p>
                <p class="small">
                    Lifetime access means you'll receive all updates to Motion+
                    as they're released.
                </p>
            </div>
        </div>
        <hr />
    </section>
    <section>
        <h3>
            <button
                id="item3-button"
                aria-expanded="false"
                aria-controls="item3"
                class="big"
            >
                <span>How does the team package work?</span>
                <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="24"
                    height="24"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                >
                    <path d="m6 9 6 6 6-6" />
                </svg>
                <div class="focus-ring"></div>
            </button>
        </h3>
        <div
            id="item3"
            aria-labelledby="item3-button"
            class="accordion-content"
        >
            <div>
                <p class="small">
                    After purchase, you can nominate up to 10 team members to
                    join Motion+.
                </p>
            </div>
        </div>
        <hr />
    </section>
</div>

<script type="module">
    import { animate, press } from "https://cdn.jsdelivr.net/npm/motion@12.6.0/+esm"

    // Animation configurations
    const transition = { duration: 0.3 }

    press(".accordion section button", (button) => () => {
        const item = button.closest(".accordion section")
        const content = item.querySelector(".accordion-content")
        const contentInner = content.querySelector("div")
        const chevron = button.querySelector("svg")
        const focusRing = button.querySelector(".focus-ring")

        let isOpen = button.dataset.isOpen === "true"

        isOpen = !isOpen
        button.dataset.isOpen = isOpen
        button.setAttribute("aria-expanded", isOpen)

        animate(
            content,
            isOpen
                ? {
                      height: "auto",
                      maskImage:
                          "linear-gradient(to bottom, black 100%, transparent 100%)",
                  }
                : {
                      height: 0,
                      maskImage:
                          "linear-gradient(to bottom, black 50%, transparent 100%)",
                  },
            transition
        )
        animate(
            contentInner,
            isOpen
                ? {
                      filter: "blur(0px)",
                      opacity: 1,
                  }
                : {
                      filter: "blur(2px)",
                      opacity: 0,
                  },
            transition
        )
        animate(chevron, { rotate: isOpen ? 180 : 0 }, transition)
    })
</script>

<style>
    .accordion {
        display: flex;
        flex-direction: column;
        margin: 20px;
        background: var(--layer);
        border: 1px solid var(--border);
        border-radius: 10px;
        min-width: 300px;
        max-width: 500px;
    }

    .accordion section {
        padding: 20px;
        position: relative;
    }

    .accordion h3 {
        margin: 0;
        display: flex;
    }

    .accordion hr {
        margin: 0;
        border: 0;
        border-bottom: 1px solid var(--border);
        position: absolute;
        bottom: 0;
        left: 20px;
        right: 20px;
        z-index: 0;
    }

    .accordion section:last-child hr {
        display: none;
    }

    .accordion h3 button {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex: 1;
        position: relative;
        background: none;
        border: none;
        padding: 0;
        color: inherit;
        cursor: pointer;
    }

    .accordion h3 span,
    .accordion h3 svg {
        text-align: left;
        z-index: 1;
        position: relative;
    }

    .accordion .focus-ring {
        position: absolute;
        inset: -10px;
        background: var(--hue-4-transparent);
        border-radius: 5px;
        z-index: 0;
        display: none;
    }

    .accordion-content {
        overflow: hidden;
        height: 0;
    }

    .accordion-content > div {
        padding: 20px 0 0;
        opacity: 0;
    }

    .accordion-content p {
        line-height: 1.5;
        padding: 0;
        margin: 0;
    }

    .accordion-content p + p {
        margin-top: 1em;
    }
</style>