/* Base styles for the yoast/faq-block block */
.wp-block-yoast-faq-block {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--20);

    .wp-block-group > & {
        padding: 0 var(--wp--preset--spacing--50);
    }
}

/* FAQ section */
.wp-block-yoast-faq-block .schema-faq-section {
    padding: 0;
    border: none;
    border-bottom: 1px solid color-mix(in srgb, currentColor, transparent 85%);
}

/* FAQ question */
.wp-block-yoast-faq-block .schema-faq-question {
    padding: var(--wp--preset--spacing--30) 0;
    gap: var(--wp--preset--spacing--20);
    display: flex;
    align-items: center;
    width: 100%;
    cursor: pointer;
    color: var(--wp--preset--color--secondary);

    .is-style-section-secondary & {
        color: inherit;
    }

    strong {
        font-weight: inherit;
    }

    &::after {
        content: "";
        display: inline-block;
        width: 20px;
        min-width: 20px;
        height: 20px;
        margin-left: auto;
        background-color: var(--wp--preset--color--accent-variant);
        -webkit-mask: var(--wp--custom--icon--icomoon--plus) center / contain no-repeat;
        mask: var(--wp--custom--icon--icomoon--plus) center / contain no-repeat;
        transition: transform 0.3s ease, background-color 0.3s ease;
    }

    &:hover::after {
        background-color: var(--wp--preset--color--primary);
    }
}

.wp-block-yoast-faq-block .schema-faq-section--open .schema-faq-question::after,
.wp-block-yoast-faq-block.is-selected .schema-faq-question::after {
    transform: rotate(45deg);
}

/* FAQ answer */
.wp-block-yoast-faq-block:not(.is-selected) .schema-faq-answer {
    margin: 0;
    height: 0;
    overflow: hidden;
    transition: height 0.3s ease;
}

.wp-block-yoast-faq-block .schema-faq-answer::after {
    content: "";
    display: block;
    height: var(--wp--preset--spacing--30);
}

/* Exceptions for steps block style */

.wp-block-yoast-faq-block.is-style-steps {
    counter-reset: faq-steps;
}

.wp-block-yoast-faq-block.is-style-steps .schema-faq-question::before {
    counter-increment: faq-steps;
    content: counter(faq-steps) ".";
    margin-right: var(--wp--preset--spacing--20);
    min-width: 14px;
}

.wp-block-yoast-faq-block.is-style-steps .sschema-faq-answer {
    padding-left: var(--wp--preset--spacing--50);
    padding-right: var(--wp--preset--spacing--50);
    @media screen and (min-width: 782px) {
        padding-left: 0;
        padding-right: 0;
    }
}

/* Exceptions for this block in section styles */

.is-style-section-primary .wp-block-yoast-faq-block .schema-faq-question:hover::after,
.is-style-section-primary-alt .wp-block-yoast-faq-block .schema-faq-question:hover::after {
    background-color: var(--wp--preset--color--secondary);
}