/**
 * Accordion styles
 * See also accordion.js
 */

.accordion {
    border-top: 0.1rem solid var(--color-line-grey);
    border-bottom: 0.1rem solid var(--color-line-grey);
}

.accordion__item + .accordion__item {
    border-top: 0.1rem solid var(--color-line-grey);
}

.accordion__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1rem 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    gap: 1rem;
    color: var(--color-brand-dark);
    font-size: inherit;
    font-weight: var(--font-weight-bold);
}

.accordion__toggle:hover {
    color: var(--color-brand-orange);
}

.accordion__toggle-chevron {
    flex-shrink: 0;
    transition: var(--transition-default);
}

.accordion__item.is-active .accordion__toggle-chevron {
    rotate: 180deg;
}

.accordion__container {
    display: grid;
    grid-template-rows: 0fr;
    transition: var(--transition-default);
    visibility: hidden;
    opacity: 0;
}

.accordion__container > * {
    overflow: hidden;
    min-height: 0;
}

.accordion__item.is-active .accordion__container {
    grid-template-rows: 1fr;
    visibility: visible;
    opacity: 100;
}

[data-accordion-flip] {
    transition: var(--transition-default);
}

.accordion__item.is-active [data-accordion-flip] {
    rotate: -180deg;
}