.wp-block-yoast-faq-block {
    --faq-accent-color: var( --accent-color, currentColor );
    --faq-question-bg-color: var( --alternate-bg-color, #eaeaea );
}

.wp-block-yoast-faq-block .schema-faq-section {
    display: flex;
    flex-direction: column;

    margin-bottom: 15px;
    outline: 2px solid transparent;
    outline-offset: -2px;

    transition: outline-color 400ms ease-in-out;
}

.wp-block-yoast-faq-block .schema-faq-section.open {
    outline-color: var( --faq-accent-color );
}

.wp-block-yoast-faq-block .schema-faq-section .schema-faq-question {
    padding: 15px;
    outline: none;

    background-color: var( --faq-question-bg-color );
}

.wp-block-yoast-faq-block .schema-faq-section.js-active .schema-faq-question {
    cursor: pointer;
}

.wp-block-yoast-faq-block .schema-faq-section.js-active .schema-faq-question:is( :hover, :focus ) {
    color: var( --faq-accent-color );
}

.wp-block-yoast-faq-block .schema-faq-section.js-active .schema-faq-question::before {
    content: "\f067";
    font-family: "Font Awesome 5 Free";

    margin-right: 15px;

    color: var( --faq-accent-color );
}

.wp-block-yoast-faq-block .schema-faq-section.open .schema-faq-question::before {
    content: "\f068";
}

.wp-block-yoast-faq-block .schema-faq-section .schema-faq-answer {
    padding: 15px;
    margin-bottom: 0px;
}