Form Cta

@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/vendor/rfs";

.block-form-cta{
    @include padding(rem-calc(10.24 0 10.24 0));

    .heading{
        margin-bottom: rem-calc(40);
        letter-spacing: -4%;

        @include bp($md){
            margin-bottom: rem-calc(68);
        }
    }

    .form-wrapper{
        padding:rem-calc(36 8 20 8);
        
        @include bp($lg){
            max-width: rem-calc(590);
            @include padding(rem-calc(91 0 100 0));
        }
    }
    
    .image-wrapper{
        margin-right: calc(calc(100% - 50vw) + 28px);
        height: 100%;
        position: relative;
        border-radius: 13px;
        overflow: hidden;
        display: none;

        @include bp($lg){
            display: block;
        }

        &:after{
            content: "";
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            position: absolute;
            top: 0;
            left: 0;
        }
    }

    .forminator-button-submit{
        --btn-bg-color: transparent;
        --btn-text-color: var(--black);
        --btn-border-color: var(--black);
        --arrow: url("data:image/svg+xml,%3Csvg width='19' height='10' viewBox='0 0 19 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.695312 4.33333C0.327123 4.33333 0.0286458 4.63181 0.0286458 5C0.0286458 5.36819 0.327123 5.66667 0.695312 5.66667V5V4.33333ZM18.1667 5.4714C18.4271 5.21105 18.4271 4.78895 18.1667 4.5286L13.9241 0.285954C13.6637 0.0256052 13.2416 0.0256052 12.9813 0.285954C12.7209 0.546304 12.7209 0.968414 12.9813 1.22876L16.7525 5L12.9813 8.77124C12.7209 9.03159 12.7209 9.4537 12.9813 9.71405C13.2416 9.97439 13.6637 9.97439 13.9241 9.71405L18.1667 5.4714ZM0.695312 5V5.66667H17.6953V5V4.33333H0.695312V5Z' fill='black'/%3E%3C/svg%3E%0A");
        
        padding: rem-calc(9 20);
        font-size: clamp(rem-calc(16), 2vw, rem-calc(18));
        margin-top: rem-calc(20px);

        &:hover {
            --btn-bg-color: var(--black);
            --btn-text-color: var(--white);
            --arrow: url("data:image/svg+xml,%3Csvg width='19' height='10' viewBox='0 0 19 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.695312 4.33333C0.327123 4.33333 0.0286458 4.63181 0.0286458 5C0.0286458 5.36819 0.327123 5.66667 0.695312 5.66667V5V4.33333ZM18.1667 5.4714C18.4271 5.21105 18.4271 4.78895 18.1667 4.5286L13.9241 0.285954C13.6637 0.0256052 13.2416 0.0256052 12.9813 0.285954C12.7209 0.546304 12.7209 0.968414 12.9813 1.22876L16.7525 5L12.9813 8.77124C12.7209 9.03159 12.7209 9.4537 12.9813 9.71405C13.2416 9.97439 13.6637 9.97439 13.9241 9.71405L18.1667 5.4714ZM0.695312 5V5.66667H17.6953V5V4.33333H0.695312V5Z' fill='white'/%3E%3C/svg%3E%0A");
        }        
    }
}

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 2,
    "name": "strategiq/form-cta",
    "title": "Form CTA block",
    "description": "Form CTA block",
    "category": "strategiq",
    "icon": "strategiq",
    "acf": {
        "mode": "preview",
        "renderTemplate": "block-form-cta.php"
    },
    "supports": {
        "anchor": true,
        "align": false,
        "color": {
            "background": true,
            "text": false,
            "gradients": false
        },
        "spacing": {
            "padding": [
                "top",
                "bottom"
            ],
            "margin": [
                "top",
                "bottom"
            ]
        }
    },    
    "style": "file:../../assets/css/form-cta/block-form-cta.css"
}