@import "../../../../../css/src/mixin.scss";

$colorOne:rgb(241, 241, 241);

.buzzolt-reviews-testimonials-testimonials-form{

    width: 100%;
    position: relative;
    background: $colorOne;
    min-height: 400px;
    box-sizing: border-box;
    overflow: auto;

    & *{
        box-sizing: border-box;
    }

    &-overlay{

        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        display:none;
        background: $colorOne;
        z-index: 5;

        &-content{

            display: none;

            .buzzolt-reviews-testimonials-spinner{

                padding: 40px 20px 20px 20px;
                text-align: center;
                margin: 0;

                &__span{
                    @include buzzolt-reviews-testimonials-spinner($size: 48px, $border: #000, $borderTop: #fff, $borderSize: 6px);
                }

            }

            .buzzolt-reviews-testimonials-message{
                margin: 0;
                text-align: center;
                padding: 0 20px;
            }
            
        }

    }

    &-message{

        width: 80%;
        margin: 20px 10% 0 10%;
        display: none;
        padding: 5px 10px;
        border: 1px dotted #000;

    }

    &-content{

        width: 100%;
        padding: 10%;

    }

    &-item{

        width: 100%;
        margin: 0 0 40px 0;

        &__label{
            display: block;
            margin: 0 0 10px 0;
            font-weight: bold;
        }

        &__message{
            display: block;
            margin: 10px 0 0 0;
        }
        
        &__input{

            width: 100%;
            padding: 1em;
            &--upload{
                background: rgba(0, 0, 0, 0.05);
                padding: 0.5rem 1.0rem;
            }

        }

    }
    
    &-submit{

        width: 100%;

        &__button{

            @include buzzolt-reviews-testimonials-rounded-button(20px, #000, #fff, 12px, 36px);
    
        }

    }
    
}

.buzzolt-reviews-testimonials-testimonials-form-ratings{
    width:100%;
    &>p{
        max-width: 12em;
        border-radius: 4px;
        padding: 0.5em;
        background: rgba(0, 0, 0, 0.05);
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        margin: 0;
        gap: 0 0.2em;
        &>span{
            width: 2em;
            height: 2em;
            background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='3em' height='3em' viewBox='0 0 24 24'%3E%3Cpath fill='%23676767' d='M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm-3.42 14l-.95-4.08l3.16-2.73l-4.17-.36L12 6l-1.62 3.84l-4.17.36l3.16 2.73L8.42 17L12 14.84z'/%3E%3C/svg%3E") center no-repeat;
            cursor: pointer;
        }
        &[data-rating="1"]{
            &>span:nth-child(1){
                background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='3em' height='3em' viewBox='0 0 24 24'%3E%3Cpath fill='%239B1C1C' d='M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm-3.42 14l-.95-4.08l3.16-2.73l-4.17-.36L12 6l-1.62 3.84l-4.17.36l3.16 2.73L8.42 17L12 14.84z'/%3E%3C/svg%3E") center no-repeat;
            }
        }
        &[data-rating="2"]{
            &>span:nth-child(1), &>span:nth-child(2){
                background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='3em' height='3em' viewBox='0 0 24 24'%3E%3Cpath fill='%23D62828' d='M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm-3.42 14l-.95-4.08l3.16-2.73l-4.17-.36L12 6l-1.62 3.84l-4.17.36l3.16 2.73L8.42 17L12 14.84z'/%3E%3C/svg%3E") center no-repeat;
            }
        }
        &[data-rating="3"]{
            &>span:nth-child(1), &>span:nth-child(2), &>span:nth-child(3){
                background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='3em' height='3em' viewBox='0 0 24 24'%3E%3Cpath fill='%2340A083' d='M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm-3.42 14l-.95-4.08l3.16-2.73l-4.17-.36L12 6l-1.62 3.84l-4.17.36l3.16 2.73L8.42 17L12 14.84z'/%3E%3C/svg%3E") center no-repeat;
            }
        }
        &[data-rating="4"]{
            &>span{
                background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='3em' height='3em' viewBox='0 0 24 24'%3E%3Cpath fill='%2334836C' d='M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm-3.42 14l-.95-4.08l3.16-2.73l-4.17-.36L12 6l-1.62 3.84l-4.17.36l3.16 2.73L8.42 17L12 14.84z'/%3E%3C/svg%3E") center no-repeat;
            }
            &>span:nth-child(5){
                background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='3em' height='3em' viewBox='0 0 24 24'%3E%3Cpath fill='%23676767' d='M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm-3.42 14l-.95-4.08l3.16-2.73l-4.17-.36L12 6l-1.62 3.84l-4.17.36l3.16 2.73L8.42 17L12 14.84z'/%3E%3C/svg%3E") center no-repeat;
            }
        }
        &[data-rating="5"]{
            &>span{
                background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='3em' height='3em' viewBox='0 0 24 24'%3E%3Cpath fill='%23296655' d='M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm-3.42 14l-.95-4.08l3.16-2.73l-4.17-.36L12 6l-1.62 3.84l-4.17.36l3.16 2.73L8.42 17L12 14.84z'/%3E%3C/svg%3E") center no-repeat;
            }
        }
    }
}