@font-face {
    font-family: "ProggyClean";
    src:
        local("ProggyClean"),
        url("ProggyClean.ttf") format("truetype");
}

body {
    background-color: rgb(10% 20% 30%);
    margin: 0;

    --font-family: "ProggyClean";
    
    --color-text:                         rgb(100% 100% 100% / 100%);
    --color-text-disabled:                rgb( 50%  50%  50% / 100%);
    --color-window-bg:                    rgb( 06%  06%  06% /  94%);
    --color-child-bg:                     rgb(  0%   0%   0% /   0%);
    --color-popup-bg:                     rgb( 08%  08%  08% /  94%);
    --color-border:                       rgb( 43%  43%  50% /  50%);
    --color-border-shadow:                rgb(  0%   0%   0% /   0%);
    --color-frame-bg:                     rgb( 16%  29%  48% /  54%);
    --color-frame-bg-hovered:             rgb( 26%  59%  98% /  40%);
    --color-frame-bg-active:              rgb( 26%  59%  98% /  67%);
    --color-title-bg:                     rgb( 04%  04%  04% / 100%);
    --color-title-bg-active:              rgb( 16%  29%  48% / 100%);
    --color-title-bg-collapsed:           rgb(  0%   0%   0% /  51%);
    --color-menu-bar-bg:                  rgb( 14%  14%  14% / 100%);
    --color-scrollbar-bg:                 rgb( 02%  02%  02% /  53%);
    --color-scrollbar-grab:               rgb( 31%  31%  31% / 100%);
    --color-scrollbar-grab-hovered:       rgb( 41%  41%  41% / 100%);
    --color-scrollbar-grab-active:        rgb( 51%  51%  51% / 100%);
    --color-check-mark:                   rgb( 26%  59%  98% / 100%);
    --color-slider-grab:                  rgb( 24%  52%  88% / 100%);
    --color-slider-grab-active:           rgb( 26%  59%  98% / 100%);
    --color-button:                       rgb( 26%  59%  98% /  40%);
    --color-button-hovered:               rgb( 26%  59%  98% / 100%);
    --color-button-active:                rgb( 06%  53%  98% / 100%);
    --color-header:                       rgb( 26%  59%  98% /  31%);
    --color-header-hovered:               rgb( 26%  59%  98% /  80%);
    --color-header-active:                rgb( 26%  59%  98% / 100%);
    --color-separator:                    rgb( 43%  43%  50% /  50%);
    --color-separator-hovered:            rgb( 10%  40%  75% /  78%);
    --color-separator-active:             rgb( 10%  40%  75% / 100%);
    --color-resize-grip:                  rgb( 26%  59%  98% /  20%);
    --color-resize-grip-hovered:          rgb( 26%  59%  98% /  67%);
    --color-resize-grip-active:           rgb( 26%  59%  98% /  95%);
    --color-input-text-cursor:            rgb(100% 100% 100% / 100%);
    --color-tab-hovered:                  rgb( 26%  59%  98% /  80%);
    --color-tab:                          rgb( 18%  35%  58% /  86%);
    --color-tab-selected:                 rgb( 20%  41%  68% / 100%);
    --color-tab-selected-overline:        rgb( 26%  59%  98% / 100%);
    --color-tab-dimmed:                   rgb( 07%  10%  15% /  97%);
    --color-tab-dimmed-selected:          rgb( 13%  26%  42% / 100%);
    --color-tab-dimmed-selected-overline: rgb( 50%  50%  50% /   0%);
    --color-plot-lines:                   rgb( 61%  61%  61% / 100%);
    --color-plot-lines-hovered:           rgb(100%  43%  35% / 100%);
    --color-plot-histogram:               rgb( 90%  70%   0% / 100%);
    --color-plot-histogram-hovered:       rgb(100%  60%   0% / 100%);
    --color-table-header-bg:              rgb( 19%  19%  20% / 100%);
    --color-table-border-strong:          rgb( 31%  31%  35% / 100%);
    --color-table-border-light:           rgb( 23%  23%  25% / 100%);
    --color-table-row-bg:                 rgb(  0%   0%   0% /   0%);
    --color-table-row-bg-alt:             rgb(100% 100% 100% /  06%);
    --color-text-link:                    rgb( 26%  59%  98% / 100%);
    --color-text-selected-bg:             rgb( 26%  59%  98% /  35%);
    --color-tree-lines:                   rgb( 43%  43%  50% /  50%);
    --color-drag-drop-target:             rgb(100% 100%   0% /  90%);
    --color-unsaved-marker:               rgb(100% 100% 100% / 100%);
    --color-nav-cursor:                   rgb( 26%  59%  98% / 100%);
    --color-nav-windowing-highlight:      rgb(100% 100% 100% /  70%);
    --color-nav-windowing-dim-bg:         rgb( 80%  80%  80% /  20%);
    --color-modal-window-dim-bg:          rgb( 80%  80%  80% /  35%);
}

div.window {
    color: var(--color-text);
    font-family: var(--font-family);
        
    position: relative;
    display: flex;
    flex-direction: column;
    
    margin: 16px 16px;

    &::after {
        content: "";
        border: 1px solid var(--color-border);

        pointer-events: none;
        
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        width: calc(100% - 2px);
        height: calc(100% - 2px);
    }

    & > ul.menu {
        display: flex;
        flex-direction: row;
        align-items: center;

        margin: 0;
    
        background-color: var(--color-menu-bar-bg);

        padding-left: 4px;
        padding-right: 4px;

        height: calc(1rem + 3px);

        & > li {
            padding-top: 2px;
            padding-left: 8px;
            padding-right: 8px;
            list-style: none;
            
            user-select: none;

            height: calc(1rem - 1px);

            &:hover {
                background-color: var(--color-header-hovered);
            }
        }
    }

    & > div.titlebar {
        background-color: var(--color-title-bg);

        padding-top: 3px;
        padding-left: 5px;
        padding-right: 5px;

        display: flex;
        flex-direction: row;
        align-items: baseline;
        gap: 8px;

        &.active {
            background-color: var(--color-title-bg-active);
        }

        & > label.collapse {
            width: 13px;
            height: 13px;

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

            &:hover {
                background-color: var(--color-button-hovered);
            }

            &:active {
                background-color: var(--color-button-active);
            }

            & > svg {
                width: 9px;
                height: 9px;
                fill: var(--color-text);
            }
               
            & > input {
                margin: 0;
                appearance: none;    
            }

            &.active {
                & > svg {
                    transform: rotate(-90deg);
                }
            }
        }
    }
    
    & > div.contents {
        background-color: var(--color-window-bg);

        flex: 1;

        padding: 4px;

        & p {
            padding: 4px;
            margin: 0;
        }

        & details.header {
            & > summary {
                background-color: var(--color-header);

                list-style: none;

                display: flex;
                flex-direction: row;
                align-items: baseline;
                gap: 10px;

                margin-top: 2px;
                margin-bottom: 2px;
                padding-top: 3px;
                padding-left: 10px;
                padding-right: 10px;

                &:hover {
                    background-color: var(--color-button-hovered);
                }

                &:active {
                    background-color: var(--color-button-active);
                }

                & > svg {
                    width: 9px;
                    height: 9px;
                    fill: var(--color-text);
                    transform: rotate(-90deg);
                }

                & > span {
                    user-select: none;
                }

                [open] & > svg {
                    transform: none;
                }
            }
        }

        & div.separator {
            display: flex;
            gap: 8px;
            align-items: baseline;
            padding: 5px 4px;
            
            &::before,
            &::after {
                content: "";
                border-top: 3px solid var(--color-separator);
                padding-bottom: 2px;
            }

            &::before {
                width: 12px;
            }

            &::after {
                flex: 1;
            }
        }
    }

    &.collapsed {
        & > div.titlebar {
            background-color: var(--color-title-bg-collapsed) !important;
        }

        & > ul.menu,
        & > div.contents {
            display: none;
        }
    }
}