div.window,
dialog.window[open] {
    position: absolute;
    top: 16.65%;
    left: 16.65%;
    min-width: 10em;
    min-height: 5em;
    width: 66.6%;
    height: 66.6%;
    border: 1px solid #555;
    border-radius: .3em;
    backdrop-filter: blur(.3em) saturate(88%) brightness(122%);
    background-color: #5553;
    user-select: none;
    box-sizing: border-box;
    margin: 0;
    padding: .3em;
    overflow: hidden;
}

div.window-titlebar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1.5em;
    display: flex;
    flex-direction: row;
}

img.window-icon {
    width: 1em;
    height: 1em;
    aspect-ratio: 1/1;
    margin: .25em;
}

span.window-title {
    flex: 1;
    text-align: center;
    vertical-align: middle;
    color: #eee;
    cursor: default;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

span.window-title>br {
    display: none;
}

span.window-title:hover {
    overflow-x: auto;
    text-overflow: initial;
    scrollbar-width: thin;
}

div.window-buttons {
    border: 1px solid #555;
    border-bottom-left-radius: .3em;
    border-top-right-radius: .3em;
    display: flex;
    flex-direction: row;
    margin-top: -1px;
    margin-right: -1px;
}

div.window-btn {
    flex: 1;
}

button.window-btn::before {
    font-family: monospace;
    position: relative;
    top: -.25em;
}

button.window-btn.window-minimize::before {
    content: '_';
}

button.window-btn.window-maximize::before {
    content: '^';
}

button.window-btn.window-close::before {
    content: 'X';
}

div.window>.window-content,
dialog.window[open]>.window-content {
    position: absolute;
    top: 1.5em;
    left: 0.3em;
    right: 0.3em;
    bottom: 0.3em;
    width: calc(100% - .6em);
    height: calc(100% - 1.8em);
    border: 1px solid #555;
    box-sizing: border-box;
    color: #eee;
    background-color: #333;
    overflow: hidden;
}

div.window.window-transparent>.window-content,
dialog.window[open].window-transparent>.window-content {
    color: transparent;
    background-color: transparent;
    border-color: transparent;
}

/* BEGIN undecorated window */


div.window:has(>div.window-titlebar[hidden])>.window-content,
dialog.window[open]:has(>div.window-titlebar[hidden])>.window-content {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

div.window:has(>div.window-titlebar[hidden]),
dialog.window[open]:has(>div.window-titlebar[hidden]) {
    padding: 0;
    border: 0 solid transparent;
    border-radius: 0;
}

@supports (selector(:scope)) {
    /* Should override the above styles incase they differ */

    @scope (div.window:has(>div.window-titlebar[hidden]),
        dialog.window[open]:has(>div.window-titlebar[hidden])) to (:scope>.window-content>*) {
        :scope {
            padding: 0;
            border: 0 solid transparent;
            border-radius: 0;
        }

        .window-content {
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
        }
    }
}

/* END undecorated window */

/* BEGIN moving window */

body:has(div.window.window-moving) iframe,
body:has(div.window.window-moving) embed,
body:has(div.window.window-moving) object,
body:has(dialog.window[open].window-moving) iframe,
body:has(dialog.window[open].window-moving) embed,
body:has(dialog.window[open].window-moving) object {
    pointer-events: none;
}

div.window.window-moving>.window-content,
div.window.window-moving>.window-icon,
dialog.window[open].window-moving>.window-content,
dialog.window[open].window-moving>.window-icon {
    pointer-events: none;
}

/* END moving window */

/* BEGIN maximized window */

div.window.window-maximized:not(.window-minimized),
dialog.window[open].window-maximized:not(.window-minimized) {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 solid transparent;
    border-radius: 0;
}

div.window.window-maximized:not(.window-minimized)>div.window-titlebar,
dialog.window[open].window-maximized:not(.window-minimized)>div.window-titlebar {
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
}

div.window.window-maximized:not(.window-minimized)>div.window-titlebar>div.window-buttons,
dialog.window[open].window-maximized:not(.window-minimized)>div.window-titlebar>div.window-buttons {
    margin-top: 0;
}

div.window.window-maximized>div.window-titlebar>div.window-buttons>button.window-btn.window-maximize::before,
dialog.window[open].window-maximized>div.window-titlebar>div.window-buttons>button.window-btn.window-maximize::before {
    content: 'o';
    text-decoration: overline;
}

div.window.window-maximized:not(.window-minimized)>.window-content,
dialog.window[open].window-maximized:not(.window-minimized)>.window-content {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: calc(100% - 1.5em);
    border: 0 solid transparent;
}

/* END maximized window */

/* BEGIN minimized window */

div.window.window-minimized.window-maximized,
dialog.window[open].window-minimized.window-maximized {
    top: 0 !important;
    left: 0 !important;
}

div.window.window-minimized,
dialog.window[open].window-minimized {
    width: 10em !important;
    min-height: 2em;
    height: 2em !important;
}

div.window.window-minimized>div.window-titlebar>div.window-buttons>button.window-btn.window-minimize::before,
dialog.window[open].window-minimized>div.window-titlebar>div.window-buttons>button.window-btn.window-minimize::before {
    content: 'o';
    text-decoration: underline;
}

div.window.window-minimized>.window-content,
dialog.window[open].window-minimized>.window-content {
    display: none !important;
}

/* END minimized window */

/* BEGIN closed window */

div.window.window-closed,
dialog.window[open].window-closed {
    display: none !important;
}

/* END closed window */

/* BEGIN context menu */

dialog.window-contextmenu {
    position: fixed;
    border: 1px solid #555;
    border-radius: .3em;
    backdrop-filter: blur(.3em) saturate(0) brightness(80%);
    background-color: #5553;
    margin: 0;
    padding: .3em;
    display: flex;
    flex-direction: column;
    user-select: none;
}

dialog.window-contextmenu>hr {
    width: calc(100% - .3em);
}

dialog.window-contextmenu::backdrop {
    backdrop-filter: blur(.1em) saturate(88%);
    background-color: #0003;
}

/* END context menu */

@media (prefers-color-scheme: light) {

    div.window,
    dialog.window[open] {
        backdrop-filter: blur(.3em) saturate(88%) brightness(88%);
    }

    span.window-title {
        color: #333;
    }
    
    div.window>.window-content,
    dialog.window[open]>.window-content {
        color: #333;
        background-color: #eee;
    }
}

/* BEGIN cursors */

img.window-icon {
    cursor: context-menu;
}

div.window-titlebar>* {
    cursor: default;
}

div.window-buttons>button.window-btn {
    cursor: default;
}

.window.window-moving,
.window.window-moving>div.window-titlebar>* {
    cursor: all-scroll;
}

/* BEGIN single resize cursors */
.window.window-resizing-left,
.window.window-resizing-right {
    cursor: col-resize;
}

.window.window-resizing-top,
.window.window-resizing-top>div.window-titlebar>*,
.window.window-resizing-bottom {
    cursor: row-resize;
}

.window.window-resizing-top,
.window.window-resizing-top>div.window-titlebar>* {
    cursor: n-resize;
}

.window.window-resizing-left {
    cursor: w-resize;
}

.window.window-resizing-right {
    cursor: e-resize;
}

.window.window-resizing-bottom {
    cursor: s-resize;
}

/* END single resize cursors */

/* BEGIN double resize cursors */
.window.window-resizing-top.window-resizing-left,
.window.window-resizing-top.window-resizing-left>div.window-titlebar>*,
.window.window-resizing-bottom.window-resizing-right {
    cursor: nwse-resize;
}

.window.window-resizing-top.window-resizing-right,
.window.window-resizing-top.window-resizing-right>div.window-titlebar>*,
.window.window-resizing-bottom.window-resizing-left {
    cursor: nesw-resize;
}

.window.window-resizing-top.window-resizing-left,
.window.window-resizing-top.window-resizing-left>div.window-titlebar>* {
    cursor: nw-resize;
}

.window.window-resizing-top.window-resizing-right,
.window.window-resizing-top.window-resizing-right>div.window-titlebar>* {
    cursor: ne-resize;
}

.window.window-resizing-bottom.window-resizing-left {
    cursor: sw-resize;
}

.window.window-resizing-bottom.window-resizing-right {
    cursor: se-resize;
}

/* END double resize cursors */

/* END cursors */