html {
    overflow: hidden;
}

:root {
    --c-red: #f39071;
    --c-yellow: #f5f3a2;
    --c-blue: #7fb4cc;
    --c-semi: #767ba8;
    --test: #261a3a #302247;
}

#eflex {
    display: flex;
}

#explorer,
#epane,
#preview,
#terminal {
    width: stretch;
    height: 100%;
}

#explorer {
    max-width: 280px;
}

#editor {
    width: 100%;
    height: 100%;
    padding-top: 8px;
    background-color: #261a3a;
}

#tabs {
    display: flex;
    background-color: #261a3a;
    border-bottom: var(--border) 1px solid;
    padding: 8px;
    p {
        font-family: Gabarito;
        color: white;
        margin: 8px 0px;
        margin-left: 8px;
    }
    input {
        background-color: transparent;
        border: none;
        padding: 8px 0px;
        font-family: Gabarito;
        color: var(--accent);
        font-size: 1em;
        width: 40px;
    }
}

#explorer,
#epane {
    border-right: var(--border) 1px solid;
}

#epane {
    height: calc(100vh - 120px - 1em - 23px);
}

.navbar input {
    padding: 0.2em;
    border-radius: 0.3em;
    color: white;
    font-family: Gabarito;
    font-size: 1em;
    border: none;
    background-color: var(--panel);
    transition: 0.15s ease-in-out;
}

.navbar input::selection {
    background-color: var(--selection-light);
    color: white;
}

.navbar input:focus {
    background: var(--selection);
    border: var(--border) 1px solid;
}

#preview {
    all: unset;
    background-color: #160f20;
    width: stretch;
    height: calc(100vh - 170px);
    padding: 20px;
    padding-top: 50px;
    overflow: auto;
}
#preview.html {
    all: unset;
    width: stretch;
    height: calc(100vh - 99px);
    background-color: #fff;
}
#terminal {
    background-color: #160f20;
    width: stretch;
    height: calc(100vh - 170px);
    padding: 20px;
    padding-top: 50px;
    overflow: auto;
    color: var(--text);
    white-space: pre;
    font-family: "Roboto Mono";
    scrollbar-color: #342846 transparent;
}

#toolbar {
    z-index: 9999;
    border-top: 1px solid var(--border);
    background-color: var(--panel);
    height: 2.7em;
    width: stretch;
    margin-top: 1px;

    display: flex;
    justify-content: end;
    align-items: center;
    padding-right: 16px;
    gap: 16px;

    p {
        font-family: "Gabarito";
        color: var(--text);
    }
    p.material-icons {
        font-family: "Material Icons";
        color: var(--muted);
    }
}

#drag {
    cursor: col-resize;
    height: calc(100vh - 100px);
    width: 0.25em;
    max-width: 0.25em;
    background-color: #728fce;
    z-index: 4;
}

#settings {
    background-color: transparent;
    border: none;
    color: white;
    margin-left: auto;
    cursor: pointer;
    border-radius: 0.4em;
    transition: 0.2s;
}

#settings:hover {
    background-color: var(--selection);
}

#overlay {
    z-index: 999;
    position: absolute;
    width: 100%;
    height: calc(100vh - 55px);
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #2212318f;
    backdrop-filter: blur(2px);
}

/* monaco tweaks */

/* =========================
   FIND / REPLACE WIDGET
========================= */
.monaco-editor .find-widget {
    background: #1f1430 !important;
    border: 1px solid #35254e !important;
    box-shadow: 0 0 0 1px #35254e !important;
    font-family: Gabarito !important;
}

.monaco-editor .find-widget .monaco-inputbox {
    background: #261a3a !important;
    border: 1px solid #35254e !important;
    color: #abb2bf !important;
    font-family: Gabarito !important;
}

.monaco-editor .find-widget .monaco-inputbox.synthetic-focus {
    border-color: #7c5cff !important;
    box-shadow: 0 0 0 2px #7c5cff33 !important;
    outline: none !important;
}

/* Match highlights inside editor */
.monaco-editor .find-match {
    background-color: #3a2b5f !important;
}

.monaco-editor .current-find-match {
    background-color: #5a3fa0 !important;
    border: 1px solid #7c5cff !important;
}

/* =========================
   HOVER TOOLTIP
========================= */
.monaco-editor .monaco-hover {
    background: #1f1430 !important;
    border: 1px solid #35254e !important;
    color: #abb2bf !important;
}