@import "./mixin.scss";

.toplevel_page_zypento-mailchimp #wpcontent{
    background: $base;
    padding-left: 0;
    min-height: 100vh;
}
.zypento-mailchimp-admin-container{
    box-sizing: border-box;
    width: 100%;
    & *{
        box-sizing: border-box;
    }
    @media screen and (min-width : 1201px) {
        display: flex;
        flex-direction: row;
        padding: 40px 40px 40px 20px;
    }
}
.zypento-mailchimp-admin-sidebar{
    @media screen and (min-width : 1201px) {
        background: $baseFive;
        flex-basis: 300px;
        padding: 40px 20px 40px 20px;
    }
}
.zypento-mailchimp-admin-logo{
    text-align: center;
    padding: 10px 0 50px 0;
    &>img{
        max-width: 100%;
    }
}
.zypento-mailchimp-admin-actions{
    padding: 10px;
}
.zypento-mailchimp-admin-action{
    padding: 0;
}
.zypento-mailchimp-menu-item{
    cursor: pointer;
    position: relative;
    padding: 12px 10px 12px 3.2rem;
    border-radius: 4px;
    background: $baseThree;
    color: $contrastTwo;
    &>h3{
        font-size: 1.6rem;
        margin: 0;
        line-height: 1.1;
        color: $contrastTwo;
    }
    &>span{
        width: 1.6rem;
        height: 1.6rem;
        position: absolute;
        top: 17px;
        left: 13px;
    }
    &[data-type="active"]{
        background: $baseTwo;
        &>h3{
            color: $contrastOne;
        }
    }
    &:hover{
        background: $baseTwo;
        &>h3{
            color: $contrastOne;
        }
    }
}
.zypento-mailchimp-testimonial-action-item{
    &>span{
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1.4rem' height='1.4rem' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M7 14h10q.425 0 .713-.288T18 13t-.288-.712T17 12H7q-.425 0-.712.288T6 13t.288.713T7 14m0-3h10q.425 0 .713-.288T18 10t-.288-.712T17 9H7q-.425 0-.712.288T6 10t.288.713T7 11m0-3h10q.425 0 .713-.288T18 7t-.288-.712T17 6H7q-.425 0-.712.288T6 7t.288.713T7 8M4 18q-.825 0-1.412-.587T2 16V4q0-.825.588-1.412T4 2h16q.825 0 1.413.588T22 4v15.575q0 .675-.612.938T20.3 20.3L18 18z'/%3E%3C/svg%3E") center no-repeat;
    }
}
.zypento-mailchimp-setting-action-item{
    &>span{
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1.4rem' height='1.4rem' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.954 2.21a10 10 0 0 1 4.09-.002A4 4 0 0 0 16 5.07a4 4 0 0 0 3.457.261A10 10 0 0 1 21.5 8.877a4 4 0 0 0-1.5 3.122c0 1.264.586 2.391 1.501 3.124a10 10 0 0 1-2.045 3.543a4 4 0 0 0-3.456.261a4 4 0 0 0-1.955 2.86a10 10 0 0 1-4.09.004A4 4 0 0 0 8 18.927a4 4 0 0 0-3.457-.26A10 10 0 0 1 2.5 15.121A4 4 0 0 0 4 11.999c0-1.264-.587-2.39-1.502-3.124a10 10 0 0 1 2.045-3.542A4 4 0 0 0 8 5.07a4 4 0 0 0 1.954-2.86M12 15a3 3 0 1 0 0-6a3 3 0 0 0 0 6'/%3E%3C/svg%3E") center no-repeat;
    }
}
.zypento-mailchimp-admin-action-sub-items{
    padding: 1em 0 1em 3.2em;
    &>p{
        cursor: pointer;
        font-size: 1rem;
        padding: 0.7em;
        line-height: 1.1;
        margin: 0;
        border-radius: 4px;
        color: $contrastTwo;
        font-weight: 900;
        margin: 0 0 1em 0;
        &:last-child{
            margin: 0;
        }
        &:hover{
            background: $baseTwo;
            color: $contrastOne;
        }
        &[data-type="active"]{
            background: $baseTwo;
            color: $contrastOne;
        }
    }
}
.zypento-mailchimp-admin-content{
    @media screen and (min-width : 1201px) {
        background: #ffffff;
        border-radius: 6px;
        flex-basis: calc( 100% - 700px );
        box-shadow: rgba(0,0,0,.07) 0px 0px 1px;
    }
    &>div{
        display: none;      
    }
}
.zypento-mailchimp-settings{
    width: 100%;
}
.zypento-mailchimp-admin-heading{
    padding: 40px;
    line-height: 1.1;
    border-bottom: 1px solid rgba(0,0,0,.07);
    &>h2{
        font-size: 2rem;
        margin: 0 0 0.4em 0;
    }
    &>p{
        font-size: 1rem;
        margin: 0;
    }
}
.zypento-mailchimp-admin-section-content{
    padding: 40px;
}

.zypento-mailchimp-settings-content{
    font-size: 1rem;
}
.zypento-mailchimp-settings-item{
    font-size: 1rem;
    margin: 0 0 2em 0;
    background: rgba($color: #000000, $alpha: 0.1);
}
.zypento-mailchimp-settings-item-heading{
    font-size: 1.6rem;
    padding: 1em 2em;
    margin: 0;
    cursor: pointer;
    background: rgba($color: #000000, $alpha: 0.1);
}
.zypento-mailchimp-settings-item-content{
    display: none;
    font-size: 1rem;
    padding: 3em;
}

.zypento-mailchimp-option{
    margin: 0 0 3em 0;
    &>h3{
        margin: 0 0 0.6em 0;
    }
    &>p{
        font-size: 1rem;
        margin: 0 0 0.6em 0;
        & input[type="text"]{
            width: 100%;
            max-width: 400px;
            padding: 0.5em 1em;
        }
        & input[type="password"]{
            width: 100%;
            max-width: 400px;
            padding: 0.5em 1em;
        }
        &.message{
            &[data-type="error"]{
                color: #fb2323;
            }
        }
    }
}
.zypento-mailchimp-message{
    display: none;
    font-size: 1rem;
    padding: 0.5em 1em;
    margin: 1em 0;
    border: 1px dotted #000000;
    &[data-type="error"]{
        color: #fb2323;
    }
}
.zypento-mailchimp-submit{
    margin: 0;
    &>span{
        display: inline-block;
        font-size: 1.2rem;
        padding: 0.5em 2em;
        border-radius: 2em;
        background: #343A40;
        color: #ffffff;
        cursor: pointer;
    }
}

.zypento-mailchimp-settings-content-error{
    font-size: 1rem;
    padding: 0.5em 2em;
    border: 1px dotted #fb2323;
}
.zypento-mailchimp-add-audience{
    margin: 0 0 2em 0;
    text-align: right;
    &>span{
        @include zypento-mailchimp-rounded-button(18px, #000, #fff, 8px, 36px);
    }
}
.zypento-mailchimp-audience-message{
    display: none;
    font-size: 1rem;
    padding: 0.5em 1em;
    margin: 1em 0;
    border: 1px dotted #000000;
    &[data-type="error"]{
        color: #fb2323;
    }
}
.zypento-mailchimp-add-audience-form{
    position: relative;
    padding: 4em 2em 2em 2em;
    display: none;
    background: rgba($color: #000000, $alpha: 0.03);
    border-radius: 8px;
    &>.zypento-close{
        position: absolute;
        width: 36px;
        height: 36px;
        top: 2em;
        right: 2em;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36px' height='36px' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23000' stroke-linejoin='round' stroke-width='4'%3E%3Cpath d='M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4S4 12.954 4 24s8.954 20 20 20Z'/%3E%3Cpath stroke-linecap='round' d='M29.657 18.343L18.343 29.657m0-11.314l11.314 11.314'/%3E%3C/g%3E%3C/svg%3E") center no-repeat;
        cursor: pointer;
    }
}
.zypento-mailchimp-add-audience-form-item{
    margin: 0 0 3em 0;
    &>h3{
        margin: 0 0 0.6em 0;
    }
    &>p{
        font-size: 1rem;
        margin: 0 0 0.6em 0;
        & input[type="text"]{
            width: 100%;
            max-width: 400px;
            padding: 0.5em 1em;
        }
    }
    & .zypento-message{
        &[data-type="error"]{
            color: #fb2323;
        }
    }
}
.zypento-mailchimp-add-audience-form-message{
    font-size: 1rem;
    margin: 0 0 1em 0;
    display: none;
    border: 1px dotted #000000;
    padding: 5px 20px;
    &[data-type="error"]{
        border: 1px dotted #fb2323;
    }
}
.zypento-mailchimp-add-audience-form-submit{
    &>span{
        @include zypento-mailchimp-rounded-button(18px, #000, #fff, 8px, 36px);
        &[data-type="disabled"]{
            opacity: 0.3;
            cursor: default;
        }
    }
}
.zypento-mailchimp-empty-audience-list{
    display: none;
    padding: 7px 10px;
    border: 1px dotted #000000;
}
.zypento-mailchimp-display-audience-list{
    width: 100%;
}
.zypento-mailchimp-display-audience{
    font-size: 1rem;
    position: relative;
    background: $base;
    &>h3{
        margin: 0;
        padding: 1em 4em 1em 2em;
    }
    &:nth-child(2n){
        background: $baseThree;
    }
    &>.zypento-menu{
        position: absolute;
        top: 1.2em;
        right: 2em;
        width: 1.4em;
        height: 1.4em;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1.2em' height='1.2em' viewBox='0 0 24 24'%3E%3Cg fill='%23000'%3E%3Cpath d='M8 6.983a1 1 0 1 0 0 2h8a1 1 0 1 0 0-2zM7 12a1 1 0 0 1 1-1h8a1 1 0 1 1 0 2H8a1 1 0 0 1-1-1m1 3.017a1 1 0 1 0 0 2h8a1 1 0 1 0 0-2z'/%3E%3Cpath fill-rule='evenodd' d='M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2s10 4.477 10 10m-2 0a8 8 0 1 1-16 0a8 8 0 0 1 16 0' clip-rule='evenodd'/%3E%3C/g%3E%3C/svg%3E") center no-repeat;
        cursor: pointer;
    }
}
.zypento-mailchimp-display-audience-content{
    font-size: 1rem;
    padding: 1em 2.6em 2em 2.6em;
    width: 100%;
    display: none;
    & .zypento-message{
        width: 100%;
        padding: 7px 10px;
        border: 1px dotted #000000;
        margin: 0;
        &[data-type="error"]{
            border: 1px dotted $colorFour;
        }
    }
}
.zypento-mailchimp-display-audience-data{
    display: flex;
    gap: 1em;
}
.zypento-mailchimp-display-audience-data-item{
    box-sizing: border-box;
    flex-basis: 200px;
    background: rgba($color: #000000, $alpha: 0.03);
    border: 1px solid rgba($color: #000000, $alpha: 0.1);
    border-radius: 8px;
    padding: 2em;
    &>h3{
        font-size: 3rem;
        margin: 0 0 0.5em;
        text-align: center;
    }
    &>p{
        font-size: 1rem;
        margin: 0;
        text-align: center;
    }
}
.zypento-mailchimp-display-audience-actions{
    width: 100%;
    margin: 2em 0 0 0;
    display: flex;
    gap: 1em;
    display: none;
    &>span{
        font-size: 1em;
        line-height: 1;
        padding: 7px 20px;
        border-radius: 2em;
        background: $colorFive;
        color: #ffffff;
    }
    & .zypento-delete{
        cursor: pointer;
        &[data-type="disabled"]{
            opacity: 0.3;
        }
    }
    & .zypento-confirm{
        display: none;
        & .zypento-yes{
            font-size: 0.8em;
            padding: 2px 8px;
            border-radius: 4px;
            background: $accentEight;
            color: $colorThree;
            margin: 0 0 0 0.5em;
            cursor: pointer;
        }
        & .zypento-no{
            font-size: 0.8em;
            padding: 4px 8px;
            border-radius: 4px;
            background: $colorFour;
            color: $colorThree;
            cursor: pointer;
        }
    }
    & .zypento-message{
        display: none;
    }
}
.zypento-actions-message{
    display: none;
    width: 100%;
    padding: 7px 10px;
    border: 1px dotted #000000;
    margin: 2em 0 0 0;
    &[data-type="error"]{
        border: 1px dotted $colorFour;
    }
}

.zypento-mailchimp-admin-ads{
    @media screen and (min-width : 1201px) {
        flex-basis: 400px;
    }
}