special-pages/pages/onboarding/app/components/List.module.css
.list {
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 52px;
    border-radius: 12px;
    border: 1px solid var(--color-black-at-6);
    background-color: var(--color-black-at-1);
    -webkit-backdrop-filter: blur(64px);
    backdrop-filter: blur(64px);
    margin: 0;
    width: 100%;
    position: relative;
    z-index: 1;

    /* this 'li' styling is only for proximity spacing */
    > li {
        position: relative;
    }

    > li + li:after {
        content: " ";
        background: var(--color-black-at-3);
        position: absolute;
        top: -28px;
        width: 100%;
        height: 1px;
    }

    /** dark mode **/
    @media (prefers-color-scheme: dark) {
        border: 1px solid var(--color-white-at-9);
        background: var(--color-white-at-3);

        > li + li:after {
            background: var(--color-white-at-3);
        }
    }
}

.plainListContainer {
    overflow: hidden;
    height: 0;
    transition: height 300ms ease-in-out;
    min-height: calc(116 * var(--px-in-rem));
}

.plainList {
    border-radius: var(--sp-3);
    display: grid;
    gap: var(--sp-8);
    margin: 0;
    padding: var(--sp-7) var(--sp-14);
    width: 100%;

    > li {
        position: relative;
    }
}

.borderedList {
    gap: var(--sp-14);

    > li + li:after {
        background: var(--color-black-at-9);
        content: " ";
        height: 1px;
        position: absolute;
        top: calc(-1 * var(--sp-7));
        width: 100%;
    }

    @media (prefers-color-scheme: dark) {
        > li + li:after {
            background: var(--color-white-at-12);
        }
    }
}

.summaryList {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}
