/* electron */

:root {
    --electron-nav--width: 800px;
    /* GitHub UI fit to 1048px */
    --electron-nav-is-focus--width: 1048px;
}

.electron-view .electron-nav {
    background-color: #fff;
    height: 100%;
    /* flex */
    display: flex;
    flex-direction: column;
}

/* This app need 1024px with */
@media screen and (max-width: 1024px) {
    .electron-view .electron-nav {
        max-width: 400px !important;
    }

    .electron-view #js-app {
        max-width: calc(100% - 400px) !important;
    }

    /* focus webview and flexible width*/
    .electron-view .electron-nav.is-focus {
        max-width: 400px !important;
    }
}

.electron-view #nav-body-ctrls {
    height: 72px;
}

.electron-view #nav-body-tabs {
    height: 36px;
    overflow-y: hidden !important;
}

/* flexible view*/
.electron-view #nav-body-views {
    flex: 1;
}
/*
     .electron-view
#js-app   |  .electron-nav



*/

.electron-view {
    display: flex;
}

.electron-view #js-app {
    flex: 1;
    max-width: 100%;
}

.electron-view .electron-nav {
    flex: 1;
    will-change: width;
    transition: width 0.1s cubic-bezier(0, 0, 0, 1.01);
    width: var(--electron-nav--width);
}

/* focus webview and flexible width*/
.electron-view.is-focus #js-app {
}

.electron-view.is-focus .electron-nav {
    position: fixed;
    top: 0;
    right: 0;
    max-width: var(--electron-nav-is-focus--width);
    width: var(--electron-nav-is-focus--width);
    /* draw shadow to left edge*/
    box-shadow: -1px 0 5px 1px #ddd;
}
