/* ===================================================================== */

Screen {
    align: center middle;
}

VerticalScroll {
    scrollbar-size-vertical: 1;
}

/* ===================================================================== */

$highlight: $primary 10%;

.container {
    width: 70;
    max-width: 80%;
}

/* ===================================================================== */

SackHeader {
    dock: top;
    margin-top: 3;
    margin-bottom: 3;
    #header {
        text-align: center;
        hatch: left $primary 50%;
    }
    Static {
        width: 1fr;
    }
}

#options {
    align: center top;

    Option {
        margin-bottom: 1;
    }
}

#footer-container {
    width: 100%;
    dock: bottom;
    height: 1;
    align: center top;
}

/* ===================================================================== */

#form {
    align: center top;

    .form-title {
        margin-bottom: 1;
        margin-top: 1;
        width: 100%;
        padding-left: 4;
    }

    .form-error {
        color: $error;
        margin-bottom: 1;
        width: 100%;
        background: $error 10%;
        padding-left: 4;
    }

    FormField {
        height: 1;
        margin-bottom: 1;

        .option-arrow {
            padding-left: 2;
            text-opacity: 0%;
        }

        .form-label {
            margin-right: 1;
        }

        &:focus-within {
            background: $highlight;
            .option-arrow {
                text-opacity: 100%;
            }
        }
        Input {
            background: $background;
            margin-bottom: 1;

            &:focus {
                background-tint: $background 0%;
                background: $primary 0%;
            }
            &.-textual-compact {
                &.-invalid {
                    background-tint: $error 0%;
                }
            }
        }
    }

    FormButton {
        align: right middle;
        width: 100%;
        Label {
            text-opacity: 0%;
        }

        &:focus-within {
            Label {
                background: $highlight;
                text-opacity: 100%;
            }
        }
        Button {
            background: $background;
            text-style: none;

            &:focus {
                background: $highlight;
                background-tint: $foreground 0%;
            }
        }
    }
}

/* ===================================================================== */

#chat {
    min-width: 35%;
    width: 75;
    max-width: 95%;
}

#chat-header {
    width: 100%;
    height: 2;
    border-bottom: solid $surface-lighten-1;
}

#messages {
    scrollbar-size-vertical: 0;

    .notification {
        height: auto;
        color: $foreground-muted;
        text-align: center;
        align: center middle;
        width: 100%;
        margin-bottom: 1;
    }

    ChatMessage {
        height: auto;

        .msg {
            width: auto;
            max-width: 70w;
            height: auto;
            max-height: 50;
            padding: 1 2 1 2;
            outline: solid $surface-lighten-1;
        }

        .msg-text {
            text-overflow: fold;
            max-width: 100%;
        }

        .msg-author {
            color: $foreground-muted;
        }

        &.right {
            align: right middle;
            
            .msg {
                outline-right: solid $primary;
            }
        }
    }
}

#input-wrapper {
    border: solid $surface-lighten-1;

    #prompt-char {
        color: $text;
    }

    &:focus-within {
        #prompt-char {
            color: $primary;
        }
    }
}

TextInput {
    height: auto;
    max-height: 8;
    background: $background;

    .text-area--cursor-line {
        background: $background;
    }
}

/* ===================================================================== */

.modal {
    background: $background;
    border: solid $surface-lighten-1;
    height: auto;
    width: 40;
    padding: 0 1;

    .modal-title {
        border-bottom: solid $primary 50%;
        margin-bottom: 1;
        width: 100%;
        text-align: center;
    }
}

Option {
    .option-arrow {
        margin-left: 2;
        margin-right: 1;
        text-opacity: 0%;
    }
    &:focus-within {
        .option-arrow {
            text-opacity: 100%;
        }
        &:focus-within {
            background: $highlight;
        }
    }

    Button {
        height: 0;
        width: 0;
        padding: 0;
        margin: 0;
        border: none;
    }
}

/* ===================================================================== */

.help {
    height: 85%;
    width: 80%;
    max-width: 70;
    border: solid $surface-lighten-1;
}

.help-paragraph {
    margin-top: 1;
    margin-bottom: 1;
    text-overflow: fold;
}

#help-footer {
    padding-left: 2;
}

ContentSwitcher {
    height: 1fr;
    padding: 0 2;
}

HelpKeybinding {
    .key {
        width: 1fr;
        text-align: right;
        padding-right: 1;
        color: $primary;
    }
    .desc {
        width: 1fr;
        text-align: left;
        padding-left: 1;
    }
}

#help-buttons {
    border-bottom: solid $primary 50%;
    HelpTab {
        height: 1;
        width: 15;
        text-align: center;
        Label {
            width: 100%;
            text-align: center;
        }

        &:focus-within {
            background: $highlight;
        }

        Button {
            height: 0;
            width: 0;
            padding: 0;
            margin: 0;
            border: none;
        }
    }
}

/* ===================================================================== */
