@import "../variables/variables";
@import "../mixins/private/token-mixins";

ul.accordion {
    margin: 0;
    padding: 0;
    width: 100%;
}

/*
Safari does not recognize ordered or unordered lists as lists in the accessibility tree if they have a list-style value of none, unless the list is nested within the <nav> navigation element. This behavior is intentional and is not considered a bug. To work around this issue, use the use ::marker.
*/
ul.accordion ::marker {
    font-size: 0;
}

ul.accordion li:not(:last-child) {
    border-bottom: 1px solid var(--color-stroke-subtle);
}

ul.accordion summary.details__summary {
    border-radius: 0;
    display: flex;
    font-size: var(--font-size-medium);
    justify-content: space-between;
    min-height: 48px;
    padding: 12px 16px;
}

ul.accordion summary.details__summary span.details__icon svg {
    @include fill-token(
        details-secondary-foreground-color,
        color-foreground-secondary
    );
}

ul.accordion details .details__content {
    margin: 0 16px 6px;
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
    transition:
        opacity var(--motion-duration-medium-3) var(--motion-easing-standard),
        transform var(--motion-duration-medium-3) var(--motion-easing-standard);
}

ul.accordion details[open] .details__content {
    opacity: 1;
    transform: scaleY(1);
}

/* DEPRECATED: Remove next major */
ul.accordion details svg.details__expand,
ul.accordion details[open] svg.details__collapse {
    display: inline-block;
}

ul.accordion details[open] svg.details__expand,
ul.accordion details svg.details__collapse {
    display: none;
}

ul.accordion--large summary.details__summary {
    font-size: var(--font-size-large-1);
    min-height: 52px;
}

@media (prefers-reduced-motion) {
    /* Remove animations */
    ul.accordion details .details__content,
    ul.accordion details[open] .details__content {
        transition: none;
    }
}
