/*** Live Editor Styles ***/
#navpage-primary {
    .nav .close-live-editor {
        display: none;

        margin-right: 15px;

        cursor: pointer;
        background: $btn-danger-bg;

        a {
            color: $btn-danger-color;
        }
    }

    .nav .save-live-editor {
        @extend .close-live-editor;
        background-color: $btn-primary-bg;
        &.disabled {
            opacity: 0.65;
            cursor: not-allowed;
        }
    
    }
}

.live-editor {
    position: absolute;
    display: none;
    padding: 0;
    width: auto;
    height: auto;
    z-index: 10;
    // Hardcoded sorry, but variables don't seem to work
    top: 54px;
    left: 0;
    right: 0;
    bottom: 0;

    iframe {
        border: none;
        display: block;
        width: 100%;
        height: 100%;
    }
}

.live-editor-active {
    #navpage-content, .navbar-toggle {
        display: none;
    }

    /*#navpage-wrapper {
        @extend #navpage-wrapper.nav-secondary-collapsed;
        @extend #navpage-wrapper.nav-secondary-collapsed-hoverable;
    }*/

    #navpage-primary {
        transition: background-color 0.5s;

        background-color: $gray-dark;
        .nav > li {
            display: none;
        }

        .nav .close-live-editor,
        .nav .save-live-editor {
            display: inline-block;
        }

        .navbar-header {
            opacity: 0.5;

            transition: opacity 0.5s;
        }
    }

    #navpage-secondary {
        display: none;
    }

    footer {
        display: none;
    }

    .navbar-form {
        display: none;
    }

    .live-editor {
        display: block;
    }

    #navpage-secondary {
        top: 54px;
        height: auto;
        bottom: 0;
        .nav > li {
            display: none;

            &.close-live-editor, &.nav-secondary-dashboard {
                display: block;
            }
        }
    }
}
