@import "toastr";

html.g5-dialog-open {
    overflow: hidden;
}

#g5-container {
    .g5-dialog, .g5-dialog *, .g5-dialog *:before, .g5-dialog *:after {
        box-sizing: border-box;
    }

    .g5-dialog {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        z-index: 1111;

        .settings-block input:not(.settings-param-toggle):not(.g-keyvalue-input-key):not(.g-keyvalue-input-value):not([type="checkbox"]):not([type="radio"]), .settings-block select, .settings-block .collection-list ul, .settings-block .g-colorpicker, .settings-block .g-selectize-input {
            width: 250px;
            @include breakpoint(mobile-only) {
                width: 90% !important;
            }
        }
    }

    .g5-overlay {
        animation: fadeIn 0.5s;
        transform: translate3d(0, 0, 0);
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        pointer-events: none;
        background: rgba(0, 0, 0, 0.4);
    }

    .g5-content {
        animation: fadeIn 0.5s;
        background: $white;
        outline: transparent;
    }

    .g5-dialog.g5-closing .g5-content {
        animation: fadeOut 0.3s;
    }

    .g5-dialog.g5-closing .g5-overlay {
        animation: fadeOut 0.3s;
    }

    .g5-close:before {
        font-family: Arial, sans-serif;
        content: "\00D7";
    }

    .g5-dialog.g5-dialog-theme-default {

        &.g5-closing .g5-content {
            animation: flyOut 0.5s;
        }
        .g5-content {
            animation: flyIn 0.5s;
        }
        .g5-content {
            border-radius: 5px;
            background: #f0f0f0;
            color: $core-text;
            padding: 1rem;
            position: relative;
            margin: 10vh auto;
            max-width: 100%;
            width: 600px;
            font-size: 1rem;
            line-height: 1.5;
            h1, h2, h3, h4, h5, h6, p, ul {
                color: inherit;
            }
        }
        .g5-close {
            border-radius: 5px;
            position: absolute;
            top: 0;
            right: 0;
            cursor: pointer;
            &:before {
                border-radius: 3px;
                position: absolute;
                content: "\00D7";
                font-size: 26px;
                font-weight: normal;
                line-height: 31px;
                height: 30px;
                width: 30px;
                text-align: center;
                top: 3px;
                right: 3px;
                color: #bbbbbb;
                background: transparent;
            }
            &:hover:before, &:active:before {
                color: #777777;
                background: #e0e0e0;
            }
        }

        .g-menuitem-path {
            display: block;
            color: $core-accent;
        }

        .g-modal-actions {
            background: #eaeaea;
            padding: 0.5em 1em;
            margin: 0 -1em -1em;
            border-top: 1px solid #e0e0e0;
            border-radius: 0 0 5px 5px;
            text-align: right;
        }

        form {
            margin: 0;
        }
    }

    .g5-dialog-loading-spinner.g5-dialog-theme-default {
        box-shadow: 0 0 0 0.5em #f0f0f0, 0 0 1px 0.5em rgba(0, 0, 0, 0.3);
        border-radius: 100%;
        background: #f0f0f0;
        border: 0.2em solid transparent;
        border-top-color: #bbbbbb;
        top: 1em;
        bottom: auto;
    }

    // collections
    .g5-dialog.g5-modal-collection-editall .g5-content {
        width: 90%;

        .settings-block:not(:only-child) {
            margin: 10px 0;
        }

        /*.settings-block:not(:only-child) {
            width: 48% !important;
            margin: 10px 1% !important;
        }*/

        @include breakpoint(mobile-only) {
            .settings-block {
                width: 100% !important;
            }
        }
    }

    .g5-dialog-loading-spinner {
        animation: rotate 0.7s linear infinite;
        box-shadow: 0 0 1em rgba(0, 0, 0, 0.1);
        position: fixed;
        z-index: 100000;
        margin: auto;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        height: 2em;
        width: 2em;
        background: white;
    }
}