@import "contenttype-text";
@import "contenttype-twocol";

$black: #000;
$dark-gray: #23282d;
$medium-gray: #888;
$light-gray: #eee;
$white: #FFF;

.clearfix {
    zoom: 1;

    &:before,
    &:after {
        content: "";
        display: table;
    }

    &:after {
        clear: both;
    }
}

/*************************************
*   GENERAL LAYOUT
* ***********************************/
.post-type-wphtmlmail_mail {
    #wpbody-content {
        padding-top: 55px;
        min-width: 660px;
        width: 70%;
        max-width: 1000px;
    }

    #poststuff {
        min-width: 660px;
        width: 100%;
    }

    #post-body {
        opacity: 0.0;
        transition: all 0.6s ease-out;

        &.columns-1 {
            opacity: 1.0;
        }
    }

    fieldset.columns-prefs {
        display: none;
    }

    // header bar/metabox
    #header {
        position: fixed;
        top: 32px;
        left: 160px;
        right: 0;
        // box-shadow: 0 3px 3px rgba(0,0,0,.2);

        z-index: 50;

        .handlediv,
        h2,
        .postbox-header {
            display: none;
        }


        .inside {
            margin-top: 12px;
        }

        .email-name {
            width: 40%;
            float: left;
            margin: 6px 0;
            text-transform: uppercase;
        }

        .header-buttons {
            width: 60%;
            float: right;
            text-align: right;
        }
    }

    // hide custom metaboxes via css but keep in PHP just in case somone uses an newer WooCommerce extensions (3.7.7+) with a core version of 3.7.3 or below
    #mb_back_to_overview_metabox,
    #mb_restore_defaults_metabox,
    #submitdiv,
    h1.wp-heading-inline,
    .page-title-action,
    #wpfooter {
        display: none;
    }


    .mailbuilder-settings-sidebar {
        position: fixed;
        top: 87px;
        bottom: 0;
        right: 0;
        width: 148px;
        z-index: 60;
        padding: 15px;
        background: $white;
        overflow-y: scroll;
        box-shadow: -2px 3px 3px rgba(0, 0, 0, .2);
        transition: all 0.6s ease-out;

        &.sidebar-wide {
            width: 400px;
        }

        .mailbuilder-sidebar-element {
            max-height: 0;
            overflow-y: hidden;
            transition: all 0.6s ease-out;

            &.active {
                max-height: 2000px;
                padding-bottom: 220px; // avoid color pickers being cut by "overflow-y: hidden"
            }
        }
    }

    #subject,
    #mailbuilder {
        width: 100%;
    }

    &.folded {
        #header {
            left: 36px;
        }
    }
}



/*************************************
*   PADDING SETTINGS
* ***********************************/
.post-type-wphtmlmail_mail .padding-settings {
    position: relative;
    width: 150px;
    height: 60px;
    margin: 20px;
    border: 3px $light-gray solid;

    &:after {
        position: absolute;
        content: '';
        width: 100%;
        height: 100%;
        border: 1px $light-gray dashed;
    }

    select {
        position: absolute;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        padding: 0;
        border: none;
        background: transparent;
        font-size: 11px;
        text-align: center;
        width: auto;
        height: auto;
        border-radius: 0;
        outline: none;
        box-shadow: none;
        z-index: 2;
        transform: translate(-50%, -50%);

        &.padding-top {
            left: 50%;
            top: 0;
        }

        &.padding-right {
            left: 100%;
            top: 50%;
        }

        &.padding-bottom {
            left: 50%;
            top: 100%;
        }

        &.padding-left {
            left: 0px;
            top: 50%;
        }
    }
}



/*************************************
*   ADD BUTTONS
* ***********************************/
#mailbuilder .mb-add-wrap {
    text-align: center;

    .mb-add-types {
        li {
            display: block;
            width: 130px;
            margin: 0;

            a {
                display: block;
                position: relative;
                height: 70px;
                padding: 10px;
                padding-top: 25px;
                color: $dark-gray;
                text-decoration: none;
                background: $light-gray;
                margin-bottom: 15px;
                transition: all 0.4s;
                text-align: center;
                font-size: 11px;
                line-height: 1.1;
                text-transform: uppercase;
                text-overflow: ellipsis;
                overflow: hidden;

                .dashicons {
                    font-size: 40px;
                    height: 45px;
                    width: 100%;
                }

                .mb-type-icon {
                    display: block;
                    height: 36px;
                    width: auto;
                    margin-left: auto;
                    margin-right: auto;
                    margin-bottom: 5px;
                }

                &:after {
                    content: '';
                    position: absolute;
                    left: 25%;
                    top: 25%;
                    width: 50%;
                    height: 50%;
                    background: url(../images/contenttype-icons/plus.svg) no-repeat;
                    background-size: contain;
                    background-position: center;
                    opacity: 0.0;
                    transition: all 0.4s;
                }

                &:hover {
                    color: $black;
                    background-color: $medium-gray;

                    &:after {
                        opacity: 0.8;
                    }
                }

                &.disabled {
                    color: $medium-gray;
                    cursor: not-allowed;

                    &:hover {
                        color: $medium-gray;
                        background-color: transparent;

                        &:after {
                            opacity: 0.0;
                        }
                    }
                }
            }
        }
    }
}




/*************************************
*   WYSIWYG EDITOR
* ***********************************/
#mb-wysiwyg-edit {
    .mce-edit-area iframe {
        min-height: 350px;
    }

    .mb-popup-buttons {
        margin: 20px;
        text-align: center;

        .dashicons {
            vertical-align: -5px;
        }
    }
}


#mb-css-edit {
    textarea {
        width: 100%;
        height: 100px;
    }

    .CodeMirror {
        border: 1px solid #ddd;
        height: 150px;
        margin-bottom: 20px;
    }
}


/*************************************
*   SUBJECT
* ***********************************/
.post-type-wphtmlmail_mail #subject input {
    width: 100%;
}


/*************************************
*   HEADER / FOOTER VISIBILITY
* ***********************************/
#mailbuilder-header,
#mailbuilder-footer {
    position: relative;
    max-height: 1000px;
    overflow-y: hidden;
    transition: all 0.4s ease-out;

    .mailbuilder-hide-button {
        position: absolute;
        display: inline-block;
        right: 0;
        background: rgba(255, 255, 255, 0.7);
        color: black;
        font-size: 12px;
        text-transform: uppercase;
        padding: 5px 10px 2px 10px;
        text-decoration: none;
        transition: all 0.4s ease-out;
        opacity: 0.0;

        .dashicons {
            font-size: 17px;
        }

        .dashicons-visibility {
            display: none;
        }

        &:hover {
            background: rgba(255, 255, 255, 1.0);
        }
    }

    &:hover {
        .mailbuilder-hide-button {
            opacity: 1.0;
        }
    }

    &.mailbuilder-hidden {
        max-height: 50px;
        border: 1px dashed #888;

        .mailbuilder-hide-button {
            .dashicons-visibility {
                display: inline-block;
            }

            .dashicons-hidden {
                display: none;
            }
        }

        table {
            opacity: 0.15;
        }
    }
}

#mailbuilder-header {
    .mailbuilder-hide-button {
        top: 0;
    }
}

#mailbuilder-footer {
    .mailbuilder-hide-button {
        bottom: 0;
    }
}


/*************************************
*   CONTENT ELEMENTS
* ***********************************/
#mailbuilder-templates {
    display: none;
}

#mailbuilder {

    .hndle,
    .handlediv {
        display: none;
    }

    .inside {
        margin: 0;
        padding: 0;
    }


    .mb-contentelement {
        position: relative;
        transition: all 0.4s;

        .mb-title-bar {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            opacity: 0.0;
            background: $dark-gray;
            color: $light-gray;
            cursor: move;
            z-index: 2;
            height: 32px;
            transform: translateY(-100%);
            transition: all 0.4s;

            span {
                display: inline-block;
                padding: 5px 0 5px 10px;
            }

            .mb-edit-element,
            .mb-remove-element {
                position: absolute;
                top: 0;
                right: 5px;
                text-decoration: none;
                color: $light-gray;
                text-decoration: none;

                &:hover {
                    color: #fff;
                }
            }

            .mb-edit-element {
                right: 30px;
            }
        }

        .mb-contentelement-content {
            cursor: pointer;

            &:after {
                position: absolute;
                display: block;
                opacity: 0;
                height: 100%;
                width: 100%;
                top: 0;
                left: 0;
                text-align: center;
                background: rgba($black, 0.3);
                color: $light-gray;
                content: "\f464";
                font-family: dashicons;
                font-size: 60px;
                line-height: 1.7;
                transition: all 0.4s;
            }

            &:hover {
                &:after {
                    opacity: 1.0;
                }
            }
        }

        .mb-edit-wysiwyg {
            textarea {
                display: none;
            }

            .mb-content-preview {
                min-height: 100px;
            }
        }

        &:hover {
            box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.3);

            .mb-title-bar {
                opacity: 1;
            }
        }
    }
}



/*************************************
*   MAILBUILDER
* ***********************************/
#mailbuilder {

    // .hndle{
    //     background: $dark-gray;
    //     color: $light-gray;
    // }
    // 
    .inside {
        min-width: 630px;
    }

    .container {
        position: relative;
        margin-left: auto;
        margin-right: auto;
    }

    .mailbuilder-custom-css-button {
        position: absolute;
        display: inline-block;
        bottom: 0;
        right: 0;
        background: rgba(255, 255, 255, 0.7);
        color: black;
        font-size: 12px;
        text-transform: uppercase;
        padding: 5px 10px 2px 10px;
        text-decoration: none;
        transition: all 0.4s ease-out;

        .dashicons {
            font-size: 17px;
        }

        &:hover {
            background: rgba(255, 255, 255, 1.0);
        }
    }

}




/*************************************
*   RESET WORDPRESS STYLES IN PREVIEW
* ***********************************/
#poststuff #mailbuilder-content {
    h2 {
        font-size: 18px;
        padding: 0;
    }
}




body.mb-overlay:after {
    position: fixed;
    display: block;
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba($black, 0.7);
}


/*************************************
*   ATTACHMENTS
* ***********************************/
.upload_attachment_button {
    .dashicons {
        vertical-align: -5px;
    }
}

.mb-attachment-preview {
    margin: 15px 0;

    img {
        width: 24px;
        height: auto;
        float: left;
    }

    .mb-attachment-details {
        position: relative;
        margin-left: 35px;
        padding-top: 6px;
        line-height: 1.1;
        padding-right: 25px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .filename {}

    .filesize {
        font-size: 11px;
    }

    .remove-attachment {
        position: absolute;
        right: 0;
        top: 5px;
        font-size: 14px;
        text-decoration: none;
    }
}




/*************************************
*   WP SEO
*   We don't need SEO settings for our emails!
* ***********************************/
#wpseo_edit_box {
    display: none;
}