@font-face {
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 200;
    src: url('../fonts/SourceSans3-ExtraLight.ttf.woff2') format('woff2');
}

@font-face {
    font-family: 'Source Sans 3';
    font-style: italic;
    font-weight: 200;
    src: url('../fonts/SourceSans3-ExtraLightIt.ttf.woff2') format('woff2');
}

@font-face {
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/SourceSans3-Light.ttf.woff2') format('woff2');
}

@font-face {
    font-family: 'Source Sans 3';
    font-style: italic;
    font-weight: 300;
    src: url('../fonts/SourceSans3-LightIt.ttf.woff2') format('woff2');
}

@font-face {
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/SourceSans3-Regular.ttf.woff2') format('woff2');
}

@font-face {
    font-family: 'Source Sans 3';
    font-style: italic;
    font-weight: 400;
    src: url('../fonts/SourceSans3-It.ttf.woff2') format('woff2');
}

@font-face {
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/SourceSans3-Medium.ttf.woff2') format('woff2');
}

@font-face {
    font-family: 'Source Sans 3';
    font-style: italic;
    font-weight: 500;
    src: url('../fonts/SourceSans3-MediumIt.ttf.woff2') format('woff2');
}

@font-face {
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/SourceSans3-Semibold.ttf.woff2') format('woff2');
}

@font-face {
    font-family: 'Source Sans 3';
    font-style: italic;
    font-weight: 600;
    src: url('../fonts/SourceSans3-SemiboldIt.ttf.woff2') format('woff2');
}

@font-face {
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/SourceSans3-Bold.ttf.woff2') format('woff2');
}

@font-face {
    font-family: 'Source Sans 3';
    font-style: italic;
    font-weight: 700;
    src: url('../fonts/SourceSans3-BoldIt.ttf.woff2') format('woff2');
}

@font-face {
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 900;
    src: url('../fonts/SourceSans3-Black.ttf.woff2') format('woff2');
}

@font-face {
    font-family: 'Source Sans 3';
    font-style: italic;
    font-weight: 900;
    src: url('../fonts/SourceSans3-BlackIt.ttf.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/ibm-plex-mono-v15-latin-ext_latin-regular.woff2') format('woff2');
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Prevents webcomponent content from being rendered before webcomponent is loaded */
*:not(:defined) {
    display: none
}

:root {
    color-scheme: dark;

    /*theme*/
    --navbar-bg-color: #252528;

    --bg-color: #272727;
    --bg-color-dark: #272727;
    --bg-color-light: #303030;
    --bg-color-light-2: #383838;

    --focus-color: #717779;
    --focus-outline: #f1e259 solid 2px;

    --foreground-color: #e6e6e6;
    --foreground-color-alt: #d4d4d4;
    --foreground-color-alt-2: #555555;
    --foreground-color-alt-3: #444444;
    --foreground-color-high-contrast: #ffffff;
    --accent-color: #f34951;

    --helptext-color: #6e7479;

    --label-font: 'Source Sans 3', sans-serif;
    --label-font-size: 0.875rem;

    --input-font: 'IBM Plex Mono', monospace;
    --input-font-size: 0.875rem;
    --input-font-weight: normal;

    --tab-content-width: 26rem;
    --tab-content-max-width: 100%;

    --input-foreground-color: #d4d4d4;
    --input-height: 1.5rem;
    --input-border-radius: 0.25rem;

    --button-border-width: 0.125rem;
    --button-border-radius: 0;
    --button-disabled-color: #44484b;
    --button-icon-size: 2rem;
    --button-icon-small-size: 1.25rem;

    --shadow-color: rgba(0, 0, 0, 0.231);
    --shadow-node: 0 0.125rem 0.5rem #00000080;
    --shadow-card: 0px 4px 8px -2px rgba(0, 0, 0, 0.33);
    --shadow-button: 0px 4px 8px -2px rgba(0, 0, 0, 0.33);
    --ed-field-inset-shadow: inset 0.1875rem 0.1875rem rgba(0, 0, 0, 0.231);

    --item-min-width: 6rem;
    --items-gap: 0.5rem;

    --ed-droplist-gap: 0;
    --ed-node-width: 18rem;
}

html {
    height: 100%;
    overscroll-behavior: none;
}

body {
    width: 100vw;
    height: 100%;

    margin: 0;
    padding: 0;

    overflow-x: hidden;
    overscroll-behavior: none;

    font: 400 1rem/1.25 var(--label-font);

    background-color: var(--bg-color);
    color: var(--foreground-color);
}

hr {
    all: unset;
    box-sizing: border-box;

    display: block;

    margin: 0;
    padding: 0;
    width: 100%;
    height: 1px;
    color: var(--foreground-color-alt-2);
    background-color: var(--foreground-color-alt-2);
}

fieldset {
    all: unset;
    box-sizing: border-box;

    margin: 0;
    padding: 1.0rem;
    padding-top: 0;
    border: solid 1px var(--foreground-color-alt-2);
}

ed-node {
    hr {
        margin: 0.5rem 0;
    }
}

ed-node-pin {
    position: relative;
}

.single-page-container {
    position: absolute;
    width: 100vw;
    height: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template:
        "top top" auto
        "sidebar view" 1fr
        "footer footer" auto
        / auto 1fr;

    pointer-events: none;
}

.columns-container {
    padding: 2rem;
    padding-bottom: 4rem;
    height: fit-content;
    max-width: 60rem;
    width: 80vw;

    column-count: auto;
    column-width: 12rem;

    section {
        position: relative;

        font-weight: 400;
        font-size: 0.875rem;
        letter-spacing: 0.0625rem;

        display: flex;
        flex-direction: column;
        align-items: stretch;

        break-inside: avoid;

        h2 {
            width: fit-content;
            margin-top: 1.5rem;
            margin-bottom: 0.5rem;
            border-bottom: 1px solid var(--foreground-color);
            padding: 0;

            text-transform: uppercase;

            font-size: 0.875rem;
            line-height: normal;
        }

        button {
            all: inherit;
            cursor: pointer;
            user-select: none;

            &:hover {
                background-color: var(--foreground-color-alt-2);
            }
        }
    }
}

.sidebar {
    grid-area: sidebar;
    display: grid;
    background-color: var(--bg-color-light-2);

    margin: 0;
    padding: 0;
    width: auto;
    height: 100%;

    overflow-y: hidden;

    grid-template:
        "headings c content" minmax(0, auto) "footer c content" minmax(6.5rem, 1fr) / auto 4rem 1fr;

    pointer-events: auto;

    .headings {
        direction: rtl;

        grid-area: headings / headings / headings / c;
        padding-right: 4rem;

        display: block;

        height: 100%;

        overflow-x: hidden;
        overflow-y: auto;

        scrollbar-gutter: stable;
        scrollbar-width: thin;

        * {
            direction: ltr;
        }

    }

    .footer {
        grid-area: footer;

        scrollbar-gutter: stable;
        scrollbar-width: thin;
        direction: rtl;

        overflow-y: auto;

        * {
            direction: ltr;
        }

        button {
            all: unset;
            box-sizing: border-box;

            user-select: none;
            cursor: pointer;

            margin: 0.25rem;
            padding: 0.625rem;

            white-space: normal;

            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 0.25rem;

            width: var(--ed-node-width);
            height: 4rem;

            font-size: 0.625rem;
            font-weight: 500;
            letter-spacing: 0.0625em;
            text-transform: uppercase;
            line-height: normal;
            text-align: center;

            &:hover {
                background-color: var(--foreground-color-alt-2);
            }

            ed-icon {
                font-size: 1.0rem
            }
        }
    }

    .content {
        padding-left: -4rem;

        grid-area: c / c / content / content;

        margin: 0;
        padding: 0;
        width: auto;
        height: 100%;

        background-color: var(--bg-color-light);

        overflow-x: hidden;
        overflow-y: auto;
        scrollbar-width: thin;
    }
}

header {
    grid-area: top;

    height: 3rem;

    padding: 0 0.75rem;
    font-size: 0.875rem;
    line-height: 1.75;

    display: flex;
    justify-content: start;
    align-items: stretch;

    background-color: var(--bg-color-light);

    pointer-events: auto;
    user-select: none;

    .logo {
        padding: 0 0.75rem;

        display: flex;
        justify-content: start;
        align-items: center;

        font: 600 0.875rem/1.25 'Source Sans 3', sans-serif;
        letter-spacing: 0.125em;
    }

    nav {
        display: flex;
        justify-content: start;
        align-items: stretch;
    }

    button {
        all: unset;
        box-sizing: border-box;

        padding: 0 0.75rem;
        height: 100%;

        &:hover {
            background-color: var(--bg-color-light-2);
        }
    }
}

.view-overlay {
    grid-area: view;

    z-index: 1;
    isolation: isolate;
    position: absolute;

    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template:
        "toolbar top tr" auto
        "toolbar content cr" 1fr
        "footer footer footer" auto
        / auto 1fr auto;

    pointer-events: none;

    .toolbar {
        grid-area: toolbar;

        margin: 1.625rem;
        padding: 0.5rem;
        width: auto;
        height: fit-content;

        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        flex-direction: column;

        border-radius: 0.75rem;
        --button-border-radius: 0.5rem;

        background-color: var(--bg-color-light);
        color: var(--foreground-color);

        pointer-events: auto;

        &:not(:has(*)) {
            /*dont show empty toolbar*/
            display: none;
        }
    }

    .top-bar-container {
        grid-area: top;
        padding: 1.625rem;
        width: 100%;

        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: nowrap;
    }

    .top-bar {
        padding: 0.5rem;
        width: auto;

        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        gap: 1rem;

        background-color: var(--bg-color-light);
        border-radius: 0.75rem;

        --button-border-radius: 0.5rem;

        line-height: var(--navbar-height);

        user-select: none;
        pointer-events: auto;

        &:not(:has(*)) {
            /*dont show empty top bar*/
            display: none;
        }
    }

    .top-right {
        grid-area: tr;
        overflow: hidden;

        margin: 0;
        padding: 1.625rem;
        width: 100%;
        line-height: var(--navbar-height);

        --button-border-radius: 0rem;

        pointer-events: auto;
    }
}

#settings-target {
    font-size: var(--label-font-size);
}

.main-view {
    grid-area: view;
    display: block;

    margin: 0 auto;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-color);

    pointer-events: auto;

    overscroll-behavior: none;
}

footer {
    grid-area: footer;
    padding: 0 0.5rem;
    width: 100%;
    height: fit-content;

    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;

    background-color: var(--bg-color-light-2);
    pointer-events: auto;

    button {
        all: unset;
        padding: 0 0.25rem;
        cursor: pointer;
        font-size: 0.825rem;
        border: solid 1px #ffffff44;
        user-select: none;

        &:hover {
            background-color: #ffffff44;
        }

        &:active {
            background-color: #ffffff60;
        }
    }
}

canvas {
    overscroll-behavior: none;
}

dialog {
    padding: 0;
    width: fit-content;
    height: fit-content;
    color: var(--foreground-color);
    background-color: var(--bg-color-light);

    border: none;
    box-shadow: var(--shadow-card);

    overflow-x: hidden;
    overflow-y: auto;

    &::backdrop {
        background-color: #111111aa;
    }

    &:not([open]) {
        display: none;
    }

    h1 {
        margin: 0;
        padding: 0 2rem;
        width: 100%;
        height: 4rem;

        display: flex;
        justify-content: flex-start;
        align-items: center;

        font-weight: 400;
        font-size: 1.0rem;
        text-transform: uppercase;

        background-color: var(--foreground-color);
        color: var(--bg-color);
        /*border-bottom: 1px solid var(--foreground-color-alt-2);*/
    }

    .close-button-wrapper {
        position: absolute;
        top: 1rem;
        right: 1rem;
        background-color: var(--bg-color-light);
    }
}

.dropdown-menu {
    position: relative;

    .dropdown-container {
        display: none;
        position: absolute;

        width: auto;
        min-width: 16rem;
        padding: 0.25rem 0;
        height: fit-content;

        background-color: var(--bg-color);
        box-shadow: 0 0.25rem 0.5rem 0 #00000080;

        z-index: 100;


        hr {
            margin: 0;
        }

        button {
            padding: 0.375rem 1.625rem;
        }
    }

    &:hover .dropdown-container {
        display: flex;
        justify-content: flex-start;
        flex-direction: column;
        align-items: stretch;
    }
}

#add-node {
    margin: 0.75rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

    cursor: pointer;
    user-select: none;

    border: 0.125rem dashed #555555;
    color: #aaaaaa;
    height: 4.5rem;

    border-radius: 1.5rem;

    &:hover {
        background-color: var(--foreground-color-alt-2);
        border: 0.125rem solid var(--foreground-color-alt-2);
    }
}