/** UI Components -- Newsletter **/
.newsletter{
    color:rgba($white, .72);
    background-color:$blue;
    &__container{
        padding-top:54px;
        padding-bottom:72px;
        @include min-lg{
            flex-wrap:nowrap;
            padding-top:80px;
            padding-bottom:96px;
        }
    }
    &__title{
        margin:0 0 .375em 0;
        color:$white;
    }
    &__content{
        width:100%;
        margin-bottom:36px;
        text-align:center;
        p{
            margin:0;
        }
        @include min-sm{
            margin-bottom:48px;
        }
        @include min-lg{
            width:auto;
            min-width:33.3%;
            margin-right:36px;
            margin-bottom:0;
            text-align:left;
        }
        @include min-xxl{
            margin-right:auto;
        }
    }
    &__form{
        display:flex;
        flex-direction:row;
        flex-wrap:wrap;
        align-items:flex-start;
        &-wrapper{
            @include min-lg{
                min-width:66.6%;
            }
        }
        #mce-responses{
            order:4;
            width:100%;
            margin-top:20px;
        }
        #mce-responses .response{
            padding:10px 16px;
            font-weight:600;
            font-size:14px;
            line-height:22px;
            border:1px dashed;
            &#mce-error-response{
                color:$red;
                border-color:$red;
            }
            &#mce-success-response{
                color:$green;
                border-color:$green;
            }
        }
    }
    &__input{
        width:100%;
        height:54px;
        padding:0 24px 0 50px;
        font-size:1em;
        border:0;
        outline:none;
        @include min-sm{
            height:60px;
            padding:0 36px 0 54px;
            font-size:0.88em;
        }
        &-group{
            position:relative;
            width:100%;
            margin-bottom:12px;
            @include min-sm{
                width:calc(50% - 10px);
                margin-bottom:0;
            }
            @include min-lg{
                flex:auto;
                width:auto;
            }
            &::before{
                position:absolute;
                top:15px;
                left:15px;
                display:inline-block;
                color:rgba($black,.18);
                font-size:24px;
                content:"";
                @include material-icons;
                @include min-sm{
                    top:18px;
                    left:18px;
                }
            }
            &--name{
                @include min-sm{
                    margin-right:10px;
                }
                @include min-lg{
                    margin-right:20px;
                }
            }
            &--name::before{
                content:"how_to_reg";
            }
            &--email{
                @include min-sm{
                    margin-left:10px;
                }
                @include min-xxl{
                    margin-right:20px;
                    margin-left:0px;
                }
            }
            &--email::before{
                content:"alternate_email";
            }
        }
    }
    &__submit{
        @include max-xl{
            order:4;
            margin:32px auto 0 auto;
        }
    }
    &__checkbox{
        position:relative;
        width:100%;
        margin-top:12px;
        cursor:pointer;
        @include min-sm{
            margin-top:27px;
        }
        &-input{
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            width: 1px;
            height: 1px;
            margin: 0;
            padding: 0;
            cursor:inherit;
        }
        &-label{
            position:relative;
            display:inline-block;
            padding-left:52px;
            font-size:12px;
            line-height:20px;
            cursor:pointer;
            @include min-sm{
                padding-left:56px;
                font-size:14px;
                line-height:22px;
            }
            a{
                color:$white;
                text-decoration:none;
            }
            &::before{
                position:absolute;
                top:0;
                left:0;
                display:inline-block;
                width:36px;
                height:36px;
                background:url('../img/cancel.svg')no-repeat center #273892;
                background-size:12px;
                border-radius:0;
                content:"";
            }
        }
        &-input:checked + &-label::before{
            background:url('../img/check.svg')no-repeat center $yellow;
            background-size:12px;
        }
    }
}

/** Mailchimp validation **/
#mc_embed_signup div.mce_inline_error{
    margin:12px 0 0 0!important;
    padding:8px 16px!important;
    font-weight:600!important;
    font-size:14px!important;
    line-height:22px!important;
    background-color:$red!important;
}

/** Dark mode styles **/
body.dark-mode .newsletter{
    color:rgba($white, .6);
    background-color:rgba($white,.06);
    &__input{
        color:$white;
        background-color:$darkGrey;
        @include placeholder(rgba($white,.38));
        &-group::before{
            color:rgba($white, .18);
        }
    }
    &__checkbox{
        &-label::before{
            background:url('../img/cancel-grey.svg')no-repeat center $darkGrey;
            background-size:12px;
        }
    }
}