Screen {
    layers: window menu-popup;
    overflow: hidden;
}

#paint {
    layout: vertical;
}

#main_horizontal_split {
    layout: horizontal;
}

#editing_area {
    width: 1fr;
    background: rgb(128, 128, 128);
}
.-dark-mode #editing_area {
    background: $surface-lighten-2;
}


#canvas {
    width: auto;
    height: auto;
    margin: 1 2;
}

#tools_box {
    layout: grid;
    grid-size: 2;
    grid-gutter: 0 1;
    grid-columns: 6;
    grid-rows: 3;
    padding: 0 1;
    width: 15;
    height: 100%;
    /* can't have a border without taking up a whole cell, and it's more important to show as much of the tools as possible */
    /* border-bottom: tall $panel-darken-2; */
    background: $panel-darken-1;
    overflow: hidden;
}

#tools_box Button {
    text-style: none !important;
}

#tools_box Button.selected {
    background: $panel-lighten-3;
    border-bottom: tall $panel-lighten-2;
    border-top: tall $panel-darken-2;
}

#colors_box {
    height: 6;
    layout: grid;
    grid-size: 2;
    grid-columns: 10 1fr;
    border-top: tall $panel-lighten-2;
    background: $panel-darken-1;
}

.color_well {
    border-top: tall $panel-darken-2;
    border-bottom: tall $panel-lighten-3;
}

#palette_selection_box {
    max-height: 5;
    overflow: hidden;
}

#selected_color_char_input {
    width: 9;
    height: 4;
    padding-left: 3;
    margin-left: 1;
}

#available_colors {
    layout: grid;
    grid-size: 14;
    grid-gutter: 0 1;
    grid-columns: 4;
    grid-rows: 2;
    height: auto;
    width: auto;
    overflow: hidden;
}

Menu {
    background: $panel;
}
Menu.menu_popup {
    layout: vertical;
    dock: top;
    layer: menu-popup;
    width: auto;
    height: auto;
    min-width: 30;
    overflow-y: auto;
    /* calc isn't supported, and this should be determined by the y position anyways, which is set in python */
    /* max-height: calc(100vh - 3); */
    max-height: 90vh;
    /* width: auto doesn't account for the vertical scrollbar... */
    /* which means it would make a horizontal scrollbar or cut off a character on the right, */
    /* but I'm accounting for this with padding-right inside the menu item */
    overflow-x: hidden;
}
MenuBar {
    layout: horizontal;
    width: 100%;
    height: auto;
    dock: top;
    /* border-bottom: hkey $panel-darken-2; */
    overflow: hidden;
}
MenuItem {
    width: auto;
    height: auto;
    text-style: none;
}
MenuItem.grayed {
    color: #777;
}
Separator {
    width: 100%;
    height: 1;
}
Menu Button {
    border: none;
    height: 3;
}
MenuBar Button {
    width: auto;
    min-width: 0;
}
Menu.menu_popup Button {
    min-width: 1fr;
    text-align: left;
    /* This compensates for the scrollbar, so text isn't cut off (though it also applies when there's no scrollbar) */
    padding-right: 1;
}

Window {
    dock: top;
    layer: window;
    background: $surface;
    border: outer $panel-darken-2;
    layout: vertical;
    align: center middle;
    width: auto;
    height: auto;
}
WindowTitleBar {
    layout: horizontal;
    width: 100%;
    height: auto;
    background: $accent;
    color: auto;
    text-style: bold;
}
WindowTitleBar Button {
    max-width: 6;
    height: 3;
}
.window_title {
    width: 1fr;
    height: 100%;
    content-align: left middle;
    padding-left: 1;
}
.window_close {
    background: $panel;
    border: inner $panel-darken-1;
    border-top: inner $panel-lighten-1;
    border-left: inner $panel-lighten-1;
}
.window_close:hover {
    background: $panel-darken-1;
    border: inner $panel-darken-3;
    border-top: inner $panel-lighten-1;
    border-left: inner $panel-lighten-1;
}
/* :active doesn't seem to be supported,
and .-active doesn't apply until after click,
at which point the window is closed, generally. */
.window_close.-active {
    border: inner $panel-lighten-1;
    border-top: inner $panel-darken-3;
    border-left: inner $panel-darken-3;
}

.window_content {
    layout: vertical;
    overflow: auto;
    width: auto;
    height: auto;
    background: $background;
}
DialogWindow .window_content {
    background: $surface;
}

.file_dialog_window .window_content {
    padding: 2 4;
    width: 80;
    height: 30;
}
.file_dialog_window .window_content Input {
    width: 100%;
    margin-bottom: 1;
}
.file_dialog_window .window_content DirectoryTree {
    height: 15;
    margin-bottom: 1;
}
.file_dialog_window .window_content Button {
    width: auto;
    height: auto;
}

CharacterSelectorDialogWindow DataTable {
    width: auto;
}
CharacterSelectorDialogWindow .ok,
CharacterSelectorDialogWindow .cancel {
    margin: 1;
}

#about_paint_dialog .window_content {
    padding: 2 4;
    width: 50;
    height: auto;
}

#help_dialog .window_content {
    padding: 2 4;
}
#help_dialog .help_text {
    width: 80;
    height: auto;
    overflow-y: auto;
}

#zoom_dialog .window_content {
    padding: 2 4;
    width: 50;
    /* width: auto; */
    height: auto;
}
#zoom_dialog .buttons {
    layout: horizontal;
    height: auto;
}
#zoom_dialog .buttons Button {
    width: auto;
    margin: 1;
}

EditColorsDialogWindow .window_content {
    padding: 2 4;
    width: 65;
    /* align-horizontal: center; */
    height: auto;
}
EditColorsDialogWindow .color_grid {
    layout: grid;
    grid-size: 8;
    grid-gutter: 1 2;
    grid-columns: 5;
    grid-rows: 2;
    height: auto;
    /* width: auto; */
    overflow: hidden;
    margin-bottom: 2;
}

MessageBox .window_content {
    width: 50;
    height: auto;
}
MessageBox .window_content Button {
    width: auto;
    min-width: 10;
    height: auto;
    margin-right: 1;
    margin-top: 1;
}
MessageBox .message_box_icon {
    width: auto;
    height: auto;
    padding-left: 2;
}
MessageBox .main_content {
    padding: 1 2;
    width: 1fr;
    height: auto;
}
MessageBox .window_content Horizontal {
    height: auto;
}

#status_bar {
    background: $panel;
    height: 3;
    layout: horizontal;
}
#status_bar > Static {
    width: 20;
    height: 100%;
    content-align: left middle;
    border: none;
    border-top: outer $panel-darken-2;
    border-bottom: outer $panel-lighten-1;
    border-left: outer $panel-darken-1;
}
#status_bar > #status_text {
    width: 1fr;
}
#status_bar > #status_dimensions {
    /* this is the last division */
    border-right: outer $panel-darken-1;
}