.collapse {
    overflow: hidden;
    height: 0;
    width: 100%;
    transition: height 250ms ease;
    background-color: var(--bg-surface-secondary);
    padding: var(--p-2);
    box-sizing: border-box;
}

.collapse.is-open {
    height: auto;
}

.btn.collapse-trigger {
    width: 100%; 
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background-color 200ms ease, color 200ms ease;
}

.btn.collapse-trigger:focus-visible {
    outline: 2px solid var(--color-primary-600);
    outline-offset: 2px;
}

.collapse-icon {
    transition: transform 200ms ease;
    transform-origin: center;
}

/* Open state */
.collapse-trigger[aria-expanded="true"] {
    background-color: var(--color-primary-100);
    border-color: var(--color-primary-300);
    color: var(--color-primary-700);
}

/* Rotate arrow when open */
.collapse-trigger[aria-expanded="true"] .collapse-icon {
    transform: rotate(180deg);
}

.collapse-trigger__when-open {
    display: none;
}

.collapse-trigger[aria-expanded="true"] .collapse-trigger__when-closed {
    display: none;
}

.collapse-trigger[aria-expanded="true"] .collapse-trigger__when-open {
    display: inline;
}

@media (prefers-reduced-motion: reduce) {
    .collapse,
    .btn.collapse-trigger,
    .collapse-icon {
        transition: none;
    }
}