/**
* This is dark mode styles for menu editor page and dialogs.
*/
:root {
    --mainColor : #323232;
    --mainDarkColor:#212121;
    --accentColor: #36bef7;
    --secondaryAccentColor:#0d7377;
    --white: #fff;
    --lightWhite:#f0f0f0;
    --black: #000;
    --lightBlack:#5e5e5e;
    --gray: #d8e3e7;
    --pink: #f80668;
}

.rmp-dark-mode {

    //Sidebar drawer.
    .rmp-editor-overlay .collapse-sidebar {
        background-color: var(--mainDarkColor);
        .collapse-sidebar-arrow:before {
            color: var(--accentColor);
        }
    }

    //Mobile and tablet preview shadow.
    .rmp-preview-mobile #rmp-preview-wrapper,
    .rmp-preview-tablet #rmp-preview-wrapper {
        box-shadow: 0px 3px 0 #212121,
            0px 4px 0 #212121,
            0px 5px 0 #212121,
            0px 7px 0 #212121,
            1px 6px 15px #212121;
    }

    #rmp-editor-wrapper {
        background-color: var(--lightBlack);
    }

    //Menu editor header
    #rmp-editor-header {
        background-color: var(--mainDarkColor);
    }

    //Menu editor footer
    #rmp-editor-footer {
        background-color: var(--mainDarkColor);
        border-color: var(--mainColor);
        .rmp-footer-sub-menu-wrapper {
            background-color: inherit;
            .rmp-footer-sub-menu a {
                background-color: var(--mainColor);
                border-color: var(--mainDarkColor);
                color: var(--white);
            }
        }

        .rmp-preview-device-wrapper .rmp-device-preview.active {
            background-color: var(--accentColor);
        }

        svg path {
            fill: var(--lightWhite);
        }
    }

    #rmp-editor-form {
        background-color: var(--mainColor);
        .rmp-search-settings{
            background-color: var(--mainColor);
            color: var(--white);
            border-color: var(--mainColor);
        }
        .rmp-tab-item {

            svg path {
                fill: var(--lightWhite);
            }

            .rmp-tab-item-title {
                background-color: transparent !important;
                color: var(--white);
                &:after {
                    color: var(--white);
                }
            }
        }

        .rmp-accordion-container {

            .rmp-mega-menu-top-item {
                background-color:var(--mainDarkColor) !important;
                .rmp-mega-menu-edit-icon {
                    svg path {
                        fill: var(--lightWhite);
                    }
                }
            }

            .rmp-mega-menu-top-item,
            .rmp-accordion-title,
            .rmp-accordion-content {
                background:var(--mainDarkColor);
                color:var(--white);
                border-color:var(--mainColor);

                .ui-accordion-header-icon::before,
                &:after {
                    color:var(--lightWhite);
                }
            }

            .nav-tab-wrapper {
                background-color: var(--secondaryAccentColor);
                .ui-tabs-active .nav-tab {
                    background-color: var(--accentColor);
                }
            }


            .toggle {
                background-color: var(--secondaryAccentColor);
                border-color:var(--secondaryAccentColor);
                &:checked {
                    background-color: var(--accentColor);
                    border-color:var(--accentColor);
                }
            }

            .rmp-input-control-label,
            .rmp-image-picker-placeholder,
            .rmp-icon-picker-placeholder,
            .rmp-accordion-sub-heading {
                color:inherit;
            }

            .rmp-sub-accordion-container {
                .rmp-accordion-title {
                    background-color:var(--mainColor);
                }

                .rmp-accordion-content {
                    border: 2px solid var(--mainColor);
                    margin-top: -2px;
                }
            }
        }

        #rmp-editor-main {
            .rmp-order-item-description {
                background-color:var(--mainDarkColor);
            }
        }

        .rmp-menu-controls {

            .rmp-input-control {

                .rmp-group-input-wrapper input[type="text"] {
                    border-color: var(--mainDarkColor);
                }

                .rmp-group-input-linked {
                    background-color: var(--secondaryAccentColor);
                    border-color: var(--secondaryAccentColor);
                    &.is-linked{
                        background-color: var(--accentColor);
                        border-color:var(--accentColor);
                    }
                }

                input[type="text"],
                input[type="password"],
                input[type="email"],
                input[type="url"],
                input[type="date"],
                input[type="month"],
                input[type="time"],
                input[type="datetime"],
                input[type="datetime-local"],
                input[type="week"],
                input[type="number"],
                input[type="search"],
                input[type="tel"],
                input[type="color"],
                textarea,
                select {
                    background-color:var(--mainColor);
                    color:var(--white);
                    border-color: var(--mainColor);
                }

                .is-unit,
                .unit-px,
                .unit-ms,
                .unit-s {
                    background-color: var(--secondaryAccentColor);
                    border-color: var(--secondaryAccentColor);
                    color:var(--white);
                }

                .button {
                    background-color: var(--accentColor);
                    border-color: var(--accentColor);
                    color:var(--white);
                }

            }

            .selectize-input {
                background-color: var(--mainColor);
                border-color: var(--mainColor);
            }
        }

        .rmp-device-switcher li {
            background-color: var(--accentColor);
        }
    }

    .device-icons-group {

        .device-title {
            color:var(--lightWhite) !important;
        }

        svg path {
            fill: var(--lightWhite);
        }

        .device-icon  {

            .corner-icon{
                color: var(--accentColor);
            }

            label {
                background-color: var(--mainColor);
                border-color: var(--mainColor);
            }

            .checkbox:checked + label {
                border-color: var(--accentColor);
                background-color: var(--mainColor);
            }
        }
    }

    .rmp-tooltip-icon .rmp-tooltip-content,
    .selectize-control.multi .selectize-input > div,
    .selectize-control.multi .selectize-input > div.active,
    .selectize-dropdown {
        background-color: var(--secondaryAccentColor);
        color: var(--white);
        &::before {
            border-bottom-color: var(--secondaryAccentColor);
        }
    }

    .align-icons-group {
        input[type="radio"]:checked + label {
            background-color: var(--accentColor);
            color: var(--white);
        }
    }

    .align-icons-group,
    .rmp-image-picker-container,
    .rmp-icon-picker-container {
        background-color: var(--mainColor);
    }

    .wp-picker-container .wp-color-result.button {
        border-color: var(--mainColor) !important;
        border-radius: 0 !important;
        & .color-alpha {
            border-color: var(--mainDarkColor) !important;
        }
    }

    .rmp-menu-item-icon-container .rmp-icon-picker,
    .align-icons-group,
    .rmp-h-separator {
        border-color: var(--mainColor);
    }

    #rmp-menu-update-notification {
        a {
            color: var(--accentColor);
        }
    }

    #rmp-save-menu-options,
    #rmp-theme-action {
        background-color: var(--accentColor);
    }

    // Common styles of dialogs.
    .rmp-dialog-overlay {

        .rmp-dialog-backdrop {
            background-color: rgba( 33, 33, 33 , 0.5 );
        }

        .rmp-dialog-wrap {
            background-color: var(--mainColor);
            color: var(--white);
        }

        .rmp-dialog-header {

            .title {
                color: var(--white) !important;
            }

            border-color: var(--mainDarkColor);
            .close {
                border-color: var(--mainDarkColor);
            }
        }

        .rmp-menu-library-title {
            color: var( --white );
        }
    }

    //New Menu and change theme dialog styles.
    #rmp-new-menu-wizard {
        .rmp-dialog-wrap {

            .rmp-dialog-contents {
                background-color: var(--mainColor);
            }

            .rmp-themes .rmp-theme-title,
            .rmp-item-card,
            .wp-upload-form {
                background-color: var(--mainDarkColor);
                border-color: var(--mainDarkColor);
            }

            .button.btn-blue,
            #rmp-theme-upload {
                background-color: var(--accentColor);
                border-color: var(--accentColor);
            }

            .rmp-themes .rmp-theme-title,
            .nav-tab-wrapper .nav-tab,
            .rmp-theme-upload-container p {
                color: var(--white);
            }

            .nav-tab-wrapper .ui-tabs-active .nav-tab {
                color:var(--accentColor)
            }

            .input-group {
                background-color: var(--mainDarkColor);
                border-color: var(--mainDarkColor);

                .input-label-title,
                .input-label-description {
                    color: var(--white);
                    a {
                        color:var(--accentColor);
                    }
                }

                .input-control input[type=text],
                .input-control select {
                    background-color: var(--mainColor);
                    border-color:var(--mainColor);
                    color: var(--white);
                }
            }
        }

        .rmp-theme-option:checked+label {
            border-color: var(--accentColor) !important;
        }

        .item-controls .rmp-theme-option:checked+label.rmp-theme-use {
            border-color: var(--accentColor) !important;
            background-color: var(--accentColor);
        }

        .rmp-dialog-header {
            .rmp-new-menu-step {
                color:var(--white);
            }
        }

        .rmp-dialog-footer {
            #rmp-create-new-menu,
            #rmp-menu-next-step {
                background-color: var(--accentColor);
                border-color: var(--accentColor);
            }
        }
    }

    //Save templates dialog styles.
    #rmp-menu-save-theme-wizard {

        .rmp-dialog-wrap .close,
        #rmp-save-theme-name {
            background-color: var(--mainDarkColor);
            border-color: var(--mainDarkColor);
            color: var(--white);
        }

        #rmp-save-theme {
            background-color: var(--accentColor);
            border-color: var(--accentColor);
        }

        .notice {
            color: var(--mainColor);
        }
    }

    //Icon dialog styles.
    .rmp-menu-icons-dialog {
        #tabs {
            .nav-tab-wrapper {
                padding: 0;
                background-color: var(--mainColor);
                border-color: var(--mainDarkColor);
                .nav-tab {
                    background-color: var(--mainDarkColor);
                    color:var(--white);
                    margin: 2px 0;
                    &.nav-tab-active {
                        background-color: var(--accentColor);
                    }
                }
            }
        }

        .rmp-icon-tab-contents {
            .font-icon {
                label:before {
                    background-color: var(--mainDarkColor);
                    color:var(--white);
                    border-color: #444444;
                }
            }
        }

        #rmp-icon-search {
            background-color: var(--mainDarkColor);
            border-color: var(--mainDarkColor);
        }

        #rmp-icon-search,
        #rmp-icon-search-typing-message {
            color: var(--white);
        }

        #rmp-icon-dialog-clear {
            background-color: var(--pink);
            border-color: var(--pink);
            color: var(--white);
        }

        #rmp-icon-dialog-select {
            background-color: var(--accentColor);
            border-color: var(--accentColor);
            color: var(--white);
        }

    }

    .rmp-icon-picker .rmp-font-icon {
        color: var(--lightWhite);
    }

    #rmp-widget-container {
        .widget-item {
            background-color: var(--mainDarkColor);
            border-color: var(--mainDarkColor);
            color:var(--white);
        }
    }

    .rmp-input-control-label {
        color:var(--white);
    }

    * ::-webkit-scrollbar-thumb {
        background-color: var(--mainDarkColor);
    }

    //Page loader
    .rmp-page-loader {
        background-color: rgba( #212121, 0.8 );
        z-index: 99999999;
        .rmp-loader-message {
            color: var(--white);
        }
    }

    .upgrade-options {
        color:var(--white);
        background-color: var(--mainDarkColor);
        margin:1rem;
    }

    .rmp-accordion-content {
        .upgrade-options {
            background-color:var(--mainColor);
            margin: 0 15px;
        }
    }

    .upgrade-tooltip {
        color:var(--white) !important;
    }

}