/* Quote block */
.wp-block-quote {
    position: relative;
    z-index: 0;

    & > :first-child:is(p) {
        font-size: var(--wp--preset--font-size--large);
        color: var(--wp--preset--color--primary-dark);
    }

    & > p + p.has-small-font-size {
        margin-top: var(--wp--preset--spacing--20);
    }

    &.has-text-align-right {
        &::before {
            left: auto;
            right: calc( -1 * var(--wp--preset--spacing--60));
        }
    }
    
}

@media (min-width: 780px) {
    .wp-block-quote {

        &::before {
            content: "";
            display: block;
            height: 100%;
            width: 40%;
            position: absolute;
            top: 0;
            left: calc( -1 * var(--wp--preset--spacing--60));
            background-color: var(--wp--preset--color--base-variant);
            z-index: -1;
        }

        &:has(.wp-block-cover) {
            background-color: var(--wp--preset--color--base-variant);
            padding-left: var(--wp--preset--spacing--60);
            margin-left: calc( -1 * var(--wp--preset--spacing--60)) !important;
            padding-top: 200px;
            width: calc(100% - var(--wp--preset--spacing--60));
            &::before {
                display: none;
            }
        }

        & > .wp-block-cover {
            margin: 0;
            position: absolute;
            top: calc( -1 * var(--wp--preset--spacing--60));
            right: calc( -1 * var(--wp--preset--spacing--60));
            min-height: 200px;
            height: 200px;
            width: 50%;
        }
        
    }
}

@media (max-width: 782px) {
    .wp-block-quote {
        &:has(.wp-block-cover) {
            padding: var(--wp--preset--spacing--60) !important;
            background-color: var(--wp--preset--color--base-variant);
            display: flex;
            flex-direction: column;
        }
        &:has(.wp-block-cover) * {
            order: 2;
        }
        & > .wp-block-cover {
            order: 1;
            margin-top: 0;
            margin-bottom: var(--wp--preset--spacing--60);
        }
    }

}
/* Quote block - desktop */

@media (min-width: 780px) {

    .wp-block-quote {
        padding-left: var(--wp--preset--spacing--60) !important;

        &::before {
            content: "";
            display: block;
            aspect-ratio: 1/1;
            height: 100%;
            width: auto;
            position: absolute;
            top: 0;
            left: 0;
            background-color: var(--wp--preset--color--base-variant);
            z-index: -1;
        }

        &:has(.wp-block-cover) {
            margin-left: auto !important;
            padding-top: var(--wp--preset--spacing--60);
            width: 100%;

            & > *:not(.wp-block-cover) {
                padding-right: 50%;
            }
        }

        & > .wp-block-cover {
            right: var(--wp--preset--spacing--60);
            top: calc( -1 * var(--wp--preset--spacing--60));
            bottom: calc( -1 * var(--wp--preset--spacing--60));
            width: calc(50% - ( 2 * var(--wp--preset--spacing--60)));
            height: calc(100% + ( 2 * var(--wp--preset--spacing--60)));
            min-height: calc(100% + ( 2 * var(--wp--preset--spacing--60)));
        }

        &.has-text-align-right {
            &::before {
                left: auto;
                right: 0;
            }
        }
    }

}

/* Quote block - section color variants */

[class*="is-style-section-base-variant"] .wp-block-quote {
    &::before {
        background-color: var(--wp--preset--color--base);
    }
    &:has(.wp-block-cover) {
        background-color: var(--wp--preset--color--base);
    }
}

[class*="is-style-section-primary"] .wp-block-quote {
    &::before {
        background-color: var(--wp--preset--color--primary-dark);
    }
    &:has(.wp-block-cover) {
        background-color: var(--wp--preset--color--primary-dark);
    }
    & > :first-child:is(p)  {
        color: inherit;
    }
}

[class*="is-style-section-primary-dark"] .wp-block-quote {
    &::before {
        background-color: var(--wp--preset--color--primary);
    }
    &:has(.wp-block-cover) {
        background-color: var(--wp--preset--color--primary);
    }
}

/* Quote block - spacing in post content */

.wp-block-post-content > .wp-block-quote {
    margin-top: var(--wp--preset--spacing--60);
    margin-bottom: var(--wp--preset--spacing--60);
    &:has(.wp-block-cover) {
        margin-top: calc( 2 * var(--wp--preset--spacing--60));
        margin-bottom: calc( 2 * var(--wp--preset--spacing--60));
    }
}

@media (max-width: 782px) {
    
}