@import '../../../../assets/scss/abstracts/variables';
@import '../../../../assets/scss/abstracts/mixins';

@property --color-paragraph-content {syntax: "<color>";inherits: true;initial-value: #FFFFFF;}
@property --color-paragraph-content-bg {syntax: "<color>";inherits: true;initial-value: #03467d;}

.rdg-blocks .rdg-paragraph-color {
    .preview-thumbs {
        background-image: url('../images/rdg-paragraph-color-template-preview.jpg');
    }
    width: 100%;

    @include title;

    .body {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
        background-image: var(--background-image);
        padding: 2rem 2.5rem;
        border-radius: 1rem;

        text-align: justify;
        color: var(--color-paragraph-content);
        background-color: var(--color-paragraph-content-bg);

        .content {
            display: block;
        }
    }
}

.acf-block-preview {
    .rdg-paragraph-color {
        width: 100%;
        left: 0;
        right: 0;
        margin-left: 0;
        margin-right: 0;
    }
}
