/* === Global App Styles === */

Screen {
    background: {{BACKGROUND}};
    color: {{FOREGROUND}};
}

/* === Resets === */

* {
    padding: 0 1;
    border: none;
}

/* === Headers === */

# Header, .header {
#     dock: top;
#     height: 3;
#     content-align: center middle;
#     background: {{SURFACE_10}};
#     color: {{ACCENT}};
#     text-style: bold;
#     padding: 1 2;
#     border: solid {{BORDER}};
# }

/* === Buttons === */

Button {
    background: {{SURFACE_10}};
    color: {{ACCENT}};
    border: solid {{ACCENT}};
    padding: 1 2;
    margin: 1;
    content-align: center middle;
    text-style: bold;
}

Button:hover {
    background: {{ACCENT}};
    color: {{BACKGROUND}};
}

Button:focus {
    background: {{SURFACE_20}};
    border: solid {{ACCENT}};
}

/* === Inputs === */

Input {
    background: {{SURFACE_10}};
    color: {{FOREGROUND}};
    border: solid {{BORDER}};
}

Input:focus {
    background: {{SURFACE_20}};
    border: solid {{ACCENT}};
}

/* === Alerts === */

.success {
    color: {{SUCCESS}};
}

.warning {
    color: {{ACCENT}};
}

.error {
    color: {{ERROR}};
}

/* === Login Form === */

#login_form {
    layout: vertical;
    align-horizontal: center;
    align-vertical: middle;
    width: 60%;
    height: auto;
    padding: 2 4;
    border: solid {{BORDER}};
}

#status_message {
    color: {{ACCENT}};
    padding: 1;
}

#pw_row {
    layout: horizontal;
    padding: 0;
}

#pw_row > * {
    margin-right: 1;
}

#pw_row > *:last-child {
    margin-right: 0;
}

/* === Loading Overlay === */

#loading_overlay {
    dock: top;
    background: {{SURFACE_10}};
    color: {{FOREGROUND}};
    padding: 1 2;
    text-style: bold;
    content-align: center middle;
}

/* === Game Layout === */

.centered_layout {
    layout: vertical;
    align-horizontal: center;
    align-vertical: middle;
    padding: 2;
    width: 100%;
}

.rom_rows_container {
    layout: vertical;
    align-horizontal: center;
}

.game_card {
    width: auto;
    height: auto;
    max-width: 60;
    margin: 1;
    padding: 1;
    background: {{SURFACE_10}};
    color: {{ACCENT}};
    border: solid {{BORDER}};
    content-align: center middle;
    text-style: bold;
    text-align: center;
}

.game_card:hover {
    background: {{SURFACE_20}};
    color: {{ACCENT_HOVER}};
}

Static {
    text-align: center;
}

Horizontal {
    content-align: center middle;
}

.game_card:focus {
    background: {{SURFACE_20}};
    border: solid {{ACCENT}};
}

.game_card:disabled {
    background: {{SURFACE_10}};
    color: {{BORDER}};
}

.game_card_clicked {
    background: {{ACCENT}};
    color: {{BACKGROUND}};
}

.offset_card {
    width: 11;
    height: auto;
    visibility: hidden;
}

.rom_row {
    layout: horizontal;
    align-horizontal: center;
    align-vertical: middle;
    padding: 1 2;
    width: 100%;
}

.info_confirm_row {
    layout: horizontal;
    width: 100%;
    height: auto;
    padding: 1 2;
    align-vertical: top;
}

#confirm_button {
    width: 20%;
    height: auto;
    content-align: center middle;
}

.confirm_button:hover {
    background: {{ACCENT}};
    color: {{BACKGROUND}};
}

Button:disabled {
    background: {{DISABLED_BG}};
    color: {{DISABLED}};
    border: solid {{DISABLED_BORDER}};
    text-style: dim;
}

.game_info {
    padding: 1 2;
    width: 100%;
    margin-right: 1;
    color: {{ACCENT}};
}

#game_info_box {
    width: 80%;
    height: auto;
}