Screen {
    background: #1a1b26;
    layout: vertical
}

NDirectoryTree,
DirectoryTree,
FilteredDirectoryTree {
    border: tall $accent;
    background: $surface;
    color: #a9b1d6;
}

NDirectoryTree>.directory-tree--extension,
DirectoryTree>.directory-tree--extension {
    color: $secondary;
}

#preview-pane {
    border: solid $primary;
    padding: 1;
}

ModalScreen {
    align: center middle;
    background: rgba(0, 0, 0, 0.7);
    /* Deeply dim the background to make modal pop */
}

#modal_grid {
    width: 70;
    height: auto;
    padding: 1 2;
    border: double $accent;
    background: $surface;
    color: $text;
}

#label {
    width: 100%;
    content-align: center middle;
    text-style: bold italic;
    color: $secondary;
    margin-bottom: 1;
}

#folder_name,
#new_name_input {
    width: 100%;
    border: tall $primary;
    background: $boost;
    color: $text;
    margin-bottom: 1;
}

#folder_name .input--placeholder,
#new_name_input .input--placeholder {
    color: $text-disabled;
    text-style: italic;
}

#button_row {
    width: 100%;
    height: auto;
}

#button_row Button {
    width: 1fr;
}

#create,
#rename_btn {
    background: $success;
    color: $text;
    margin-right: 1;
}

#cancel,
#cancel_btn {
    background: $error;
    color: $text;
    margin-left: 1;
}

#tree-container {
    height: 1fr;
    border: solid $accent;
}

MultilineFooter {
    dock: bottom;
    height: auto;
    min-height: 1;
    background: $boost;
    color: $text;
    padding: 0 1;
    text-wrap: wrap;
    border-top: solid $accent;
}