$black: rgb(41, 41, 41);
$white: #f4f4f4;
$gray: #dedede;
$green: #bada55;
$red: orangered;
$blue: #32adbc;
 
@import "../../global-sass/_index";

.os-widget-wrapper .is-large, .os-widget-wrapper .is-block {
    height: 30px;
    line-height: 25px;
    padding: 0 12px 2px;
    width: 100%;
    max-width: 50%;
    display: block;
}

.os-widget-wrapper .is-block {
    margin-top: 10px;
}

.components-base-control.components-select-control__input {
    width: 100%;
    float: left;
    max-width: 80%;
    margin-right: 10px;
}

.os-widget-wrapper .components-preview__block {
    width: 100%;
    max-width: 100%;
    padding: 10px;
    background: #fdfdfd;
    transition: 0.2s;
}

.components-preview__leftBlockImage {
    width: 100%;
    float: left;
}

.block-editor__container .components-preview__leftBlockImage img {
    width: 100%;
}

.components-preview__rightBlockContent {
    width: 100%;
    float: left;
}

.components-preview__rightBlockContent .components-placeholder__label {
    font-size: 18px;
    font-weight: bold;
    width: fit-content;
    line-height: 20px;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 10px;
}

.components-preview__leftBlockImage {
    position: relative;

    &:hover {
        .overlay:before {
            opacity: 0.8;
        }
        .text {
            opacity: 1;
        }
    }

    .image {
        display: block;
        width: 100%;
        height: auto;
    }

    .overlay {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;

        &:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            opacity: 0;
            transition: .5s ease;
            background-color: #222120;
        }
    }

    .text {
        color: white;
        font-size: 20px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        transition: .5s ease;
        opacity: 0;
        
        a {
            display: block;
        }
    }
}

.components-preview__leftBlockImage .text a,
.components-preview__block input.left-align {
    &:hover {
        color: #000 !important;
        background: #fff !important;
    }
}

.components-preview__block .left-align {
    color: #fff;
    text-transform: uppercase;
    border: 1px solid #FFF;
    box-shadow: 0 0;
    text-align: center;
    font-size: 19px;
    border-radius: 5px;
    padding: 0 32px;
    height: 40px;
    width: 100%;
    max-width: fit-content;
    background: transparent;

    &:hover {
        background: transparent !important;
        color: #fff !important;
        border-color: #fff !important;
        box-shadow: 0 0 !important;
    }
}

p.components-heading {
    font-family: 'Poppins', Helvetica, Arial, sans-serif;
    font-weight: 600;
    text-align: center;
}

.os-widget-wrapper {
    &.components-placeholder {
        transition: 1s;
    }

    .wp-block-opinion-stage-block-os-poll .components-placeholder__fieldset {
        visibility: hidden;
        opacity: 0;
    }

    .components-placeholder__fieldset {
        visibility: hidden;
        opacity: 0;
        height: 0;
    }
}

.components-button {
    &.is-default.is-block.is-primary {
        background: $blue;
        border-color: $blue;
        color: #fff;
        box-shadow: none;
        font-size: 14px;
        font-weight: 600;
        height: auto;
        line-height: normal;
        max-width: 276px;
        padding: 10px 0;
        text-shadow: none;
        text-transform: uppercase;
        text-align: center;

        &:hover {
            opacity: 0.9;
        }

        &.is-bordered {
            background-color: #fff;
            border: 1px solid;
            color: $blue;
            transition: .2s ease;

            &:hover {
                background-color: rgba(49, 174, 190, 0.1);
            }
        }
    }
}

input.components-button.is-button.is-default.is-block.is-primary {
    margin-bottom: 9px;
}

.components-placeholder {
    padding: 35px !important;
    align-items: center !important;

    .components-heading {
        font-size: 18px;
        font-weight: normal;
        line-height: 1.11;
        margin-bottom: 32px;
        width: 400px;
    }
    
    .opinionstage-button {
        margin-bottom: 12px;
        min-width: 263px;
        
        &:last-child {
            margin-bottom: 0;
        }
    }
} 

.components-preview__block {
    margin-top: 10px;
}