/*@font-face {*/
/*    font-family: 'Caskaydia Cove';*/
/*    src: url('Caskaydia Cove Nerd Font Complete Mono.ttf');*/
/*}*/

@font-face {
    font-family: 'CascadiaCode';
    src: url('font/CascadiaCode.ttf');
}

@font-face {
    font-family: 'Montserrat';
    src: url('font/Montserrat-Regular.ttf');
}

:root {
    color-scheme: dark;
    font-family: sans-serif;
}

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

html {
    width: 100%;
    height: 100%;

    overflow: hidden;
    background-color: #111111;
}

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

#canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: left 0.3s ease-in-out, width 0.3s ease-in-out;
    background-color: #111111;
}

#canvas:has(~ .sidebar:not(.sidebar--hidden)) {
    left: min(500px, 100vw - 10rem);
    width: calc(100% - min(500px, 100vw - 10rem));
}

#canvas:focus, #canvas:active, #canvas:focus-within {
    outline: none;
}

.watermark {
    backdrop-filter: blur(5px);
    z-index: 2;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    padding: 0.5em;

    /*display: flex;*/
    /*justify-content: space-between;*/
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;

    font-family: 'CascadiaCode', 'Courier New', Courier, monospace;
    font-size: 1em;
    color: #777777;
    background-color: rgba(0, 0, 0, 0.3);
}

.italics {
    font-style: italic;
}

.color-box {
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 1px solid #555555;
    vertical-align: middle;
}

/*#canvas {*/
/*    width: 100%;*/
/*    height: 100%;*/
/*}*/

.dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
}

.dialog {
    z-index: 101;
    /*background: #222222;*/
    background: rgba(34, 34, 34, 0.5);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    border: none;
    outline: none;
    padding: 16px;
    margin: auto;
    overflow: auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    min-height: 40vh;
    min-width: min(1000px, 80vw);
    max-width: 90vw;
    max-height: 80vh;
    font-family: "Montserrat", sans-serif;
    color: #DDDDDD;

    & .dialog__form {
        display: grid;
        grid-auto-rows: min-content;
        gap: 1em;
        align-items: center;

        & fieldset {
            border: none;
            outline: none;
            padding: 0;
            margin: 0;
        }
    }
}

.labelled-input {
    display: flex;
    flex-direction: column;
    gap: 0.25em;

    & label {
        color: #BBBBBB;
        font-size: 0.9em;
    }

    & input[type="text"] {
        padding: 0.5em;
        outline: none;
        border: 1px solid #444444;
        border-radius: 8px;
        background-color: #1A1A1A;
        color: #DDDDDD;
        font-size: 1em;

        &:focus-visible {
            border-color: #0055FF;
        }
    }
}

.button-row {
    display: flex;
    gap: 1em;
}

.button-row--reverse {
    flex-direction: row-reverse;
}

.button-row--center {
    justify-content: center;
}

.flex-separator {
    flex-grow: 1;
}

.button {
    padding: 0.75em 1.5em;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.2s;
    user-select: none;
}

.button--small {
    padding: 0.5em 1em;
    font-size: 0.875em;
}

.button--primary {
    /*background-color: #0055FF;*/
    background-color: #51a9d9;

    &:hover {
        background-color: #0066FF;
    }

    &:active {
        background-color: #0044CC;
    }
}

.button--secondary {
    background-color: #444444;

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

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

.button--danger {
    background-color: #d95151;

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

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

#save-dialog, #load-dialog {
    width: 400px;
    display: grid;
    grid-template-rows: min-content 1fr auto;
    gap: 1em;
}

#share-dialog {
    width: 400px;
    display: grid;
    grid-template-rows: min-content 1fr;
    gap: 1em;
}

#share-dialog .dialog__form {
    grid-template-rows: 1fr auto;
}

.file-list-container {
    border: 1px solid #333333;
    /*background-color: #161616;*/
    background-color: rgba(22, 22, 22, 0.5);
    color: #CCCCCC;
    border-radius: 16px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #444444 transparent;
    outline: none;
}

.file-list {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;

    & thead {
        /*background: #1A1A1A;*/
        background: rgba(26, 26, 26, 0.5);
        border-bottom: 1px solid #333333;
    }

    & :is(td, th) {
        padding: 0.75em;
    }

    & .header-file-name {
        text-align: left;
    }

    & .header-file-actions {
        width: fit-content;
    }

    & .file-name {
        text-align: left;
        font-family: 'CascadiaCode', 'Courier New', Courier, monospace;
    }

    & :is(.header-file-time, .file-time) {
        text-align: center;
    }

    & :is(.header-file-size, .file-size) {
        text-align: right;
        /* ###.## ?iB */
        width: 10ch;
    }

    & :is(.header-file-actions, .file-actions) {
        text-align: center;
    }

    & .file-actions {
        /*display: flex;*/
        /*gap: 0.5em;*/
        /*justify-content: center;*/
        /*align-items: center;*/
        /*height: 100%;*/
        vertical-align: middle;
        & button > img {
            width: 1.5em;
            height: 1.5em;
        }
    }
}

.toolbar {
    z-index: 2;
    position: absolute;

    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.toolbar__list {
    list-style: none;
    display: flex;
    flex-direction: row;
}

.toolbar__item {
    position: relative;
    cursor: pointer;
    user-select: none;

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

    /*padding: 0.3em;*/
    background-color: #222222;
    border: 1px solid #333333;

    transition: background-color 0.1s, border-color 0.1s;
}

.toolbar__button {
    all: unset;
    cursor: pointer;
    font: inherit;
    color: inherit;

    padding: 0.3em;

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

.toolbar__name {
    font-size: 0.75em;
    margin-top: 0.5em;
    color: #CCCCCC;
    user-select: none;
    pointer-events: none;
    text-align: center;
}

.toolbar__item:first-child {
    border-bottom-left-radius: 0.5em;
}

.toolbar__item:last-child {
    border-bottom-right-radius: 0.5em;
}

.toolbar__item:not(:last-child) {
    /*border-right: 1px solid #333333;*/
    border-right: none;
}

.toolbar__item:hover {
    background-color: #333333;
    border-color: #555555;
}

.toolbar__item:not(:has(> :disabled)):not(:has(> :active)):hover + .toolbar__item {
    border-left: 1px solid #555555;
}

.toolbar__item:has(> :disabled) {
    cursor: not-allowed;
    background-color: #111111;
    border-color: #222222;
}

.toolbar__button:disabled {
    cursor: not-allowed;
}

.toolbar__item:has(> :disabled):hover {
    background-color: #111111;
    border-color: #222222;
}

.toolbar__item:has(> :disabled) .toolbar__icon {
    filter: grayscale(100%) brightness(50%);
}

.toolbar__item:has(> :disabled) .toolbar__name {
    color: #555555;
}

.toolbar__item:has(> :active:not(:disabled)) {
    background-color: #556688;
    border-color: #6699FF;
}

.toolbar__item:has(> :active:not(:disabled)) + .toolbar__item {
    border-left: 1px solid #6699FF;
}

.toolbar__icon {
    width: 2em;
    height: 2em;

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

.toolbar__bind {
    position: absolute;
    width: max-content;
    bottom: -1.5em;
    /*left: 1em;*/
    display: none;
}

.toolbar__item:hover > .toolbar__bind {
    display: block;
}

#toolbar__button--format-text-color .toolbar__icon {
    fill: #DDDDDD;
}

#toolbar__button--format-bg-color .toolbar__icon {
    /* TODO: When implementing customizable background colors, change this */
    /*fill: #444444;*/
    fill: #FFFFFF;
}

#sidebar {
    z-index: 2;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(500px, 100vw - 10rem);
    background-color: #151515;
    border-right: 1px solid #333333;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease-in-out;

    & .sidebar__list {
        padding-block: 1em;
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 0.1em;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: #444444 transparent;
    }

    & .sidebar__item {
        font-family: 'Montserrat', sans-serif;
        font-size: 1em;
        color: #DDDDDD;
        cursor: pointer;
        user-select: none;
        padding: 0.25em;
        padding-inline: 1em;
        display: flex;
        align-items: center;
        gap: 0.5em;
        transition: background-color 0.1s;
        box-sizing: content-box;

        border-bottom: 1px solid #222222;

        & .sidebar__file-name {
            flex-grow: 1;
            max-width: 20ch;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

            & > input {
                all: unset;
                font: inherit;
                color: #FFFFFF;
                width: 100%;
                padding: 0;
                margin: 0;
                border-bottom: 1px solid #555555;
                cursor: text;

                &:focus-visible {
                    border-color: #55AAFF;
                }
            }
        }

        & .sidebar__file-size {
            color: #AAAAAA;
            user-select: none;
        }

        & .sidebar__file-delete, & .sidebar__file-rename, & .sidebar__file-download {
            width: 1lh;
            height: 1lh;
            border: none;
            background: none;
            cursor: pointer;
            padding: 0;

            & > svg {
                transition: fill 0.2s ease-in-out;
                fill: #999999;
            }

        }

        & .sidebar__file-delete:hover > svg {
            fill: #FF5555;
        }

        & :is(.sidebar__file-rename, .sidebar__file-download):hover > svg {
            fill: #55AAFF;
        }
    }

    & .sidebar__item--active {
        background-color: #222222;

        & .sidebar__file-name {
            :is(.sidebar__item--unsaved, .sidebar__item--temporary) &:not(.sidebar__file-name--editing) {
                font-style: italic;
                &::before {
                    content: '\25CF';
                    color: #FF5555;
                    display: inline-block;
                    margin-right: 0.5ch;
                }
            }
            color: #FFFFFF;
        }
    }

    & .sidebar__item:hover {
        background-color: #333333;
    }

    & .sidebar__footer {
        margin-top: auto;
        border-top: 1px solid #333333;
        padding: 0.25em;
    }

    & .sidebar__add-button {
        width: 100%;
        padding: 0.5em;
        border: none;
        cursor: pointer;
        background: none;
        color: #AAAAAA;
    }

    &.sidebar--hidden {
        transform: translateX(-100%);
    }
}

#sidebar-toggle-button {
    z-index: 3;
    position: absolute;
    top: 1rem;
    left: 1rem;
    width: 2rem;
    height: 2rem;
    font-size: 1.25rem;
    border: none;
    border-radius: 0.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #222222;
    color: #999999;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s, left 0.3s ease-in-out, transform 0.3s ease-in-out;
    user-select: none;

    #sidebar:not(.sidebar--hidden) + & {
        left: calc(min(500px, 100vw - 10rem) + 1rem);
        transform: rotate(90deg);
    }

    & > span {
        pointer-events: none;
        user-select: none;
        transform: translateY(-2px);
    }
}