@layer page {

    #page-content {
        display: flex;
        flex-direction: column;
        gap: var(--space-l);
    }

    .accordion {
        display: flex;
        flex-direction: column;
        gap: var(--space-m);
    }

    
    .accordion-collapse {
        display: none;
        padding: var(--space-m);
        padding-inline-end: max(var(--space-m), calc(var(--toggle-size) + 1rem));
        padding-block-start: 0;
        transition: 0.3s ease-out all;
    }

    .accordion-collapse.open {
        display: block;
        opacity: 1;
        @starting-style {
            opacity: 0;
        }
    }

    .accordion-item {
        --title-size: var(--step-1);
        --toggle-size: calc(var(--title-size) * 1.5);
        position: relative;
        border-radius: 0.5rem;
        background-image: linear-gradient(
            -90deg,
            color-mix(in srgb, var(--color-gray-light), transparent 100%) 0%,
            var(--color-gray-light) 100%
            );

        &::before, &::after {
            content: '';
            position: absolute;
            inset-block-start: calc(var(--title-size) * 1.75);
            inset-inline-end: 0;
            width: var(--toggle-size);
            height: calc(var(--toggle-size) * 0.25);
            border-radius: calc(var(--toggle-size) * 0.075);
            background: var(--color-accent);
            transition: 0.3s ease-out all;
            pointer-events: none;
        }
        &::after {
            transform: rotate(90deg);
        }
        &:has(.open)::after {
            opacity: 0;
            transform: rotate(90deg) scaleX(0);
        }
    }

    .accordion-header {
        margin: 0;
    }   

    .accordion-button {
        padding: var(--space-m);
        padding-inline-end: max(var(--space-m), calc(var(--toggle-size) + 1rem));
        font-size: var(--title-size);
        appearance: none;
        line-height: 1.3;
        cursor: pointer;
        background: none;
        border: none;
        text-align: left;
        width: 100%;
    }

}