.wp-block-accordion {
    --accordion-color: var(--wp--preset--color--contrast);
    --accordion-bg: var(--wp--preset--color--base);
    --accordion-transition-duration: 0.15s;
    --accordion-heading-transition: color var(--accordion-transition-duration) ease-in-out, background-color var(--accordion-transition-duration) ease-in-out, border-color var(--accordion-transition-duration) ease-in-out, border-radius var(--accordion-transition-duration) ease;
    --accordion-border-color: var(--wp--custom--border--color);
    --accordion-border-width: var(--wp--custom--border--width);
    --accordion-border-radius: var(--wp--custom--border--radius);
    --accordion-inner-border-radius: calc(var(--wp--custom--border--radius) - (var(--wp--custom--border--width)));
    --accordion-btn-padding-x: 1.25rem;
    --accordion-btn-padding-y: 1rem;
    --accordion-btn-color: var(--accordion-color);
    --accordion-btn-bg: var(--accordion-bg);
    --accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23212529' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    --accordion-btn-icon-width: 1.25rem;
    --accordion-btn-icon-transform: rotate(-180deg);
    --accordion-btn-icon-transition: transform var(--accordion-transition-duration) ease-in-out;
    --accordion-btn-icon-cover-transition: color var(--accordion-transition-duration) ease-in-out, background-color var(--accordion-transition-duration) ease-in-out;
    --accordion-btn-active-icon: var(--accordion-btn-icon);
    --accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    --accordion-body-transition: block-size var(--accordion-transition-duration), display var(--accordion-transition-duration) allow-discrete;
    --accordion-body-padding-x: var(--accordion-btn-padding-x);
    --accordion-body-padding-y: 1rem;
    --accordion-active-color: var(--wp--preset--color--primary-contrast);
    --accordion-active-bg: var(--wp--preset--color--primary);
}

:root .wp-block-accordion > * {
    margin-block-start: 0;
}


/* Accordion Item */
.wp-block-accordion-item {
    color: var(--accordion-color);
    background-color: var(--accordion-bg);
    border: var(--accordion-border-width) solid var(--accordion-border-color);
}

.wp-block-accordion-item:first-of-type {
    border-top-left-radius: var(--accordion-border-radius);
    border-top-right-radius: var(--accordion-border-radius);
}

.wp-block-accordion-item:last-of-type {
    border-bottom-right-radius: var(--accordion-border-radius);
    border-bottom-left-radius: var(--accordion-border-radius);
}

.wp-block-accordion-item:not(:first-of-type) {
    border-top: 0;
}


/* Accordion Button */
.wp-block-accordion-heading__toggle {
    --wp--custom--focus--offset: calc(var(--wp--custom--focus--width) * -2.5);

    padding: var(--accordion-btn-padding-y) var(--accordion-btn-padding-x);
    font-size: var(--wp--preset--font-size--medium);
    color: var(--accordion-btn-color);
    text-align: left;
    background-color: var(--accordion-btn-bg);
    border-radius: 0;
    overflow-anchor: none;
}

.wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle {
    color: var(--accordion-active-color);
    background-color: var(--accordion-active-bg);
}

    .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title {
        text-decoration: none;
    }

@media (prefers-reduced-motion: no-preference) {
    .wp-block-accordion-heading__toggle {
        transition: var(--accordion-heading-transition);
    }
}

.wp-block-accordion-item:first-of-type > .wp-block-accordion-heading .wp-block-accordion-heading__toggle {
    border-top-left-radius: var(--accordion-inner-border-radius);
    border-top-right-radius: var(--accordion-inner-border-radius);
}

.wp-block-accordion-item:not(.is-open):last-of-type > .wp-block-accordion-heading .wp-block-accordion-heading__toggle {
    border-bottom-right-radius: var(--accordion-inner-border-radius);
    border-bottom-left-radius: var(--accordion-inner-border-radius);
}


/* Accordion Toggle Icon */
.wp-block-accordion-heading__toggle-icon {
    position: relative;
    width: var(--accordion-btn-icon-width);
    height: var(--accordion-btn-icon-width);
    color: currentColor;
    margin-left: 2rem;
}

@media (prefers-reduced-motion: no-preference) {
    .wp-block-accordion-item > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon {
        transition: var(--accordion-btn-icon-transition);
    }
}

.wp-block-accordion-item.is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon {
    transform: var(--accordion-btn-icon-transform);
}

.wp-block-accordion-heading__toggle-icon::before,
.wp-block-accordion-heading__toggle-icon::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media (prefers-reduced-motion: no-preference) {
    .wp-block-accordion-item > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon::before,
    .wp-block-accordion-item > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon::after {
        transition: var(--accordion-btn-icon-cover-transition);
    }
}

    .wp-block-accordion-heading__toggle-icon::before {
        background-color: var(--accordion-bg);
    }

    .wp-block-accordion-heading__toggle-icon::after {
        background-color: var(--accordion-color);
        -webkit-mask-image: var(--accordion-btn-icon);
                mask-image: var(--accordion-btn-icon);
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
    }

    .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon::before {
        background-color: var(--accordion-active-bg);
    }

    .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon::after {
        background-color: var(--accordion-active-color);
        -webkit-mask-image: var(--accordion-btn-active-icon);
                mask-image: var(--accordion-btn-active-icon);
    }


/* Accordion Panel */
.wp-block-accordion-panel {
    /* 
    * We animate the transition of the panel open/close with display
    * and it doesn't like when you add margins or paddings along with transitioning 'display'
    * Instead, we add x axis padding and use pseudo elements for the y axis "padding"
    * The pseudo elements' height gets animated along with the accordion panel opening
    */
    padding-inline: var(--accordion-body-padding-x);
}

    .wp-block-accordion-panel::before,
    .wp-block-accordion-panel::after {
        content: "";
        display: block;
        block-size: var(--accordion-body-padding-y);
    }

.wp-block-accordion-item > .wp-block-accordion-panel {
    border-bottom-right-radius: var(--accordion-border-radius);
    border-bottom-left-radius: var(--accordion-border-radius);
}

.wp-block-accordion-panel.wp-block-accordion-panel {
    margin-block-start: 0;
}

.wp-block-accordion-panel {
    display: none;
}

.wp-block-accordion-item.is-open .wp-block-accordion-panel {
    display: block;
}

@media (prefers-reduced-motion: no-preference) {

    .wp-block-accordion-panel {
        interpolate-size: allow-keywords;
        transition-behavior: allow-discrete;
        overflow: clip;
        min-block-size: 0;
        transition: var(--accordion-body-transition);
    }

    .wp-block-accordion-panel::before,
    .wp-block-accordion-panel::after {
        block-size: 0;
        transition: block-size var(--accordion-transition-duration);
    }

    .wp-block-accordion-panel {
        block-size: 0;
        min-block-size: 0;
    }

    .wp-block-accordion-item.is-open .wp-block-accordion-panel {
        block-size: auto;
    }

    .wp-block-accordion-item.is-open .wp-block-accordion-panel::before,
    .wp-block-accordion-item.is-open .wp-block-accordion-panel::after {
        block-size: var(--accordion-body-padding-y);
    }

    @starting-style {
        .wp-block-accordion-item.is-open .wp-block-accordion-panel {
            block-size: 0;
        }

        .wp-block-accordion-item.is-open .wp-block-accordion-panel::before,
        .wp-block-accordion-item.is-open .wp-block-accordion-panel::after {
            block-size: 0;
        }
    }

}

.is-style-accordion-flush .wp-block-accordion-item {
    border-right: 0;
    border-left: 0;
    border-radius: 0;
}

.is-style-accordion-flush .wp-block-accordion-item:first-child {
    border-top: 0;
}

.is-style-accordion-flush .wp-block-accordion-item:last-child {
    border-bottom: 0;
}

.is-style-accordion-flush > .wp-block-accordion-item > .wp-block-accordion-panel,
.is-style-accordion-flush > .wp-block-accordion-item > .wp-block-accordion-heading .wp-block-accordion-heading__toggle {
    border-radius: 0;
}