@layer components {
    .accordion {
        border: 1px solid var(--line);
        border-radius: var(--radius-m);
    }

    .accordion + .accordion {
        margin-block-start: var(--space-2);
    }

    .accordion summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-2);
        min-height: var(--touch-target);
        padding: var(--space-2) var(--space-4);
        font-weight: 600;
        cursor: pointer;
        list-style: none;
    }

    .accordion summary::-webkit-details-marker {
        display: none;
    }

    .accordion summary::after {
        content: "+";
        font-family: var(--font-data);
        color: var(--sky);
    }

    .accordion[open] summary::after {
        content: "-";
    }

    .accordion-body {
        padding: 0 var(--space-4) var(--space-4);
    }
}