Screen {
    layout: vertical;
    background: $background;
    color: $foreground;
}

#dm_notification_icon {
    dock: right;
    width: 3;
    height: 1;
    margin: 0 1;
    color: $accent;
    text-align: center;
}

#dm_notification_icon.hidden {
    visibility: hidden;
}

Timelines {
    layout: horizontal;
    height: 1fr;
    overflow-x:auto;
}

Timeline {
    layout: vertical;
    border: solid $panel;
    width: 1fr;
    height: 100%;
}

.timeline-content {
    /* This is now empty, as display is handled by the widget itself */
}

Timeline:focus {
    border: double $primary;
}

.timeline-header {
    height: 1;
    background: $surface;
    color: $foreground;
    dock: top;
}

.timeline_title {
    width: 1fr;
    height: 1;
    text-align: center;
    padding: 0 1;
    color: $primary;
    text-style: bold;
}

.timeline-refresh-spinner {
    dock: right;
    width: auto;
    height: 1;
    display: none;
    margin: 0 1;
}

.timeline-item {
    height: auto;
    margin-bottom: 1;
    border: round $primary;
    padding: 0;
    border-subtitle-align: center;
    border-title-align: center;
  }

.single-column-mode Timeline {
    min-width: 100%;
    width: 100%;
}

.boost-header {
    padding: 0 0;
    background: $accent-darken-1;
    color: $foreground;
    height: 1;
}

.gap-indicator {
    text-align: center;
    color: $text-muted;
    height: 1;
    margin: 1 0;
}

.end-of-timeline {
    text-align: center;
    color: $text-muted;
    height: 1;
    margin: 1 0;
}


SplashScreen > Vertical {
    align: center middle;
    height: 100%;
}


#logo {
    width: auto;
    height: auto;
}

#version {
    width: auto;
    text-align: center;
}

#splash-status {
    width: auto;
    text-align: center;
}

#update-dialog {
    width: 60;
    max-width: 90vw;
    border: panel $accent;
    padding: 1 2;
    background: $surface;
    height: auto;
}

.update-actions {
    align-horizontal: center;
    padding-top: 1;
}

.action-spinner {
    display: none;
}


.post-footer {
    height: 1;
    padding: 0 1;
    background: $surface-darken-1;
}

.post-footer > Static {
    width: 1fr;
    text-align: center;
}

.timestamp {
    width: auto;
    color: $text-muted;
    text-align: right;
}

.visibility-icon {
    width: auto;
    margin-left: 1;
    color: $text-muted;
}

.status-message {
    margin-top: 1;
    text-align: center;
}
Post {
    link-color: $accent;
}
Post:focus {
    border: double $accent;
    background: $accent 80%;
}
Post.favourited {
    background: $warning 20%;
}

Post.reblogged {
    background: $success 20%;
}

Post.mention {
    border: round $accent;
}

/* A selected item in an inactive timeline */
.timeline-item.selected, Post.selected, Notification.selected {
    background: $surface-darken-1;
}

/* A selected item in an active timeline */
Timeline:focus .timeline-item.selected,
Timeline:focus Post.selected,
Timeline:focus Notification.selected {
    background: $accent 30%;
}

#dialog {
    grid-size: 2;
    grid-gutter: 1 2;
    padding: 0;
    width: 80;
    height: auto;
    max-height: 90%;
    border: solid $primary;
    background: $surface;
    overflow-y: auto;
}
#dialog > Label, #dialog > Input, #dialog > Button, #dialog > Static, #dialog > LoadingIndicator {
    margin: 0 1;
}
#dialog > Header {
    margin-bottom: 1;
}


#dialog > .hidden {
    display: none;
}

#auth_link_container {
    column-span: 2;
    margin-top: 1;
    border: round $primary;
    padding: 1;
}

#auth_link_container > TextArea {
    height: 5;
}

#auth_link_container.hidden {
    display: none;
}

#status {
    column-span: 2;
    text-align: center;
    color: $error;
    height: auto;
}

#status.hidden {
    display: none;
}

#post_dialog {
    layout: vertical;
    width: 80%;
    height: auto;
    max-height: 80%;
    background: $surface;
    border: solid $primary;
    padding: 0;
}
#post_content_container {
    height: 1fr;
    padding: 1;
}
#post_content {
    height: 10;
}

#post_options {
    height: auto;
    padding: 0 1;
}

#post_language_container {
    height: auto;
    padding: 0 1;
}

#post_visibility_container {
    height: auto;
    padding: 0 1;
}

#add_poll_container {
    height: auto;
    padding: 0 1;
}

#poll_creation_area {
    border: round $primary;
    padding: 1;
    margin: 1;
    height: auto;
}

#poll_choices_container {
    height: auto;
    max-height: 10;
    overflow-y: auto;
    margin-bottom: 1;
}

.poll-choice {
    height: auto;
    margin-bottom: 1;
}

.poll-choice Input {
    width: 1fr;
}

.poll-choice .remove-choice {
    width: 5;
    min-width: 5;
    height: 1;
    margin-left: 1;
}

#add_choice_button {
    width: 100%;
    margin-bottom: 1;
}


.post_option_label {
    width: auto;
    height: 100%;
    content-align: left middle;
}

#cw_input {
    width: 1fr;
}

#language_select {
    width: 1fr;
}

#post_buttons {
    width: 100%;
    align-horizontal: right;
    height: auto;
    margin-top: 1;
    padding: 0 1 1 1;
}

#post_buttons > Button {
    margin-left: 1;
}

#reply_dialog {
    layout: vertical;
    width: 80%;
    height: auto;
    max-height: 90%;
    background: $surface;
    border: solid $primary;
    padding: 0;
}
#reply_content_container {
    height: 1fr;
    padding: 1;
}
#original_post_preview {
    height: auto;
    max-height: 10;
    overflow: auto;
    margin-bottom: 1;
}
#reply_content {
    height: 10;
}

#reply_options {
    height: auto;
    padding: 0 1;
}

#reply_language_container {
    height: auto;
    padding: 0 1;
}

#reply_visibility_container {
    height: auto;
    padding: 0 1;
}

.reply_option_label {
    width: auto;
    height: 100%;
    content-align: left middle;
}

#cw_input {
    width: 1fr;
}

#language_select {
    width: 1fr;
}

#reply_buttons {
    width: 100%;
    align-horizontal: right;
    height: auto;
    margin-top: 1;
    padding: 0 1 1 1;
}

#reply_buttons > Button {
    margin-left: 1;
}

ConfigScreen {
    align: center middle;
}
#config-dialog {
    layout: vertical;
    padding: 0;
    width: 90;
    height: auto;
    max-height: 90%;
    border: solid $primary;
    background: $surface;
    overflow-y: auto;
}
ConfigScreen Collapsible {
    margin-top: 0;
}
ConfigScreen .collapsible--title {
    background: $primary-darken-1;
}
.config-group-body {
    grid-size: 3;
    grid-gutter: 1;
    height: auto;
    padding: 1;
}
.config-label {
    text-align: right;
    width: 100%;
}
#config-buttons {
    align-horizontal: right;
    margin-top: 1;
    height: auto;
    padding: 0 1;
}

.language-config-group {
    layout: vertical;
    width: 100%;
    padding: 1;
}

.language-help-text {
    margin-bottom: 1;
}

#language_rows_list {
    width: 100%;
    height: 16;
    border: tall $panel;
    background: $surface-darken-1;
    padding: 0;
    margin-bottom: 1;
}

#language_rows_list ListItem {
    width: 100%;
    padding: 0;
    border: none;
    height: 3;
}

.language-row-item {
    height: auto;
    min-height: 2;
}

.language-row {
    width: 100%;
    height: auto;
    min-height: 2;
    content-align: center middle;
    border-bottom: solid $background-lighten-1;
    padding: 0 1 0 0;
}

.language-row-label {
    width: 1fr;
    text-overflow: ellipsis;
}

.language-row-actions {
    margin-left: 1;
}

.language-row-actions Button {
    margin-left: 1;
}

.language-row-actions Button:first-child {
    margin-left: 0;
}

.language-row-button {
    min-width: 3;
    padding: 0 1;
}

.language-empty {
    color: $text-muted;
}

#language_add_controls {
    width: 100%;
    padding-top: 1;
    margin-bottom: 1;
}

#language_add_select,
#language_add_input {
    width: 1fr;
}

#language_add_select {
    max-width: 32;
    margin-right: 1;
}

#language_add_input {
    margin-right: 1;
}

#language_list_actions {
    width: 100%;
    align-horizontal: right;
    padding-top: 1;
}

#character_limit {
    width: auto;
    height: 100%;
    content-align: left middle;
    margin-right: 1;
}

.character-limit-error {
    color: $error;
}

#thread-dialog {
    width: 80%;
    height: 80%;
    background: $surface;
    border: solid $primary;
    padding: 0;
    overflow-y: auto;
    border-title-align: center;
}

#thread-container {
    padding: 1;
}

.main-post {
    border: round $accent;
}

.hidden {
    display: none;
}

.reply-post {
    margin-left: 4;
}

ImageWidget {
    height: 10;
    margin-top: 1;
}

.poll-container {
    height: auto;
    padding: 1;
    border: round $primary;
    margin-top: 1;
}
.poll-container RadioSet {
    height: auto;
}
.poll-container RadioButton {
    height: 1;
}
.poll-header {
    text-style: bold;
    margin-bottom: 1;
}
.poll-footer {
    margin-top: 1;
    border-top: solid $primary-lighten-2;
    padding-top: 1;
    height: auto;
}
.poll-total-votes {
    width: 1fr;
}
.poll-expiry {
    width: 1fr;
    text-align: right;
    color: $text-muted;
}

LoginScreen, PostScreen, ReplyScreen, ThreadScreen, ProfileScreen, HelpScreen, SearchScreen, HashtagTimeline, ConversationScreen, URLSelectorScreen {
    align: center middle;
}

#profile-dialog,
#help-dialog,
#hashtag-timeline-dialog,
#conversation-dialog,
#search-dialog,
#log-viewer-dialog,
#config-dialog,
#post_dialog,
#reply_dialog,
#login-dialog,
#profile-selection-dialog {
    border-title-align: center;
}

#profile-dialog {
    width: 80%;
    height: 80%;
    background: $surface;
    border: solid $primary;
    padding: 1;
    overflow-y: auto;
}

#profile-avatar {
    width: 50%;
    max-width: 40;
    min-height: 10;
    margin-bottom: 1;
    align-horizontal: center;
}

#help-dialog {
    width: 80;
    height: auto;
    max-height: 80%;
    border: solid $primary;
    background: $surface;
    padding: 1;
    overflow-y: auto;
}
#help-dialog DataTable {
    margin-top: 1;
}

#hashtag-timeline-dialog {
    width: 80%;
    height: 80%;
    background: $surface;
    border: solid $primary;
    padding: 1;
}

#hashtag-timeline-container {
    padding: 1;
}

#conversation-dialog {
    width: 80%;
    height: 80%;
    background: $surface;
    border: solid $primary;
    padding: 1;
    overflow-y: auto;
    border-title-align: center;
}

#conversation-container {
    padding: 1;
}

.unread {
    background: $accent 20%;
}

#search-dialog {
    layout: vertical;
    width: 80%;
    height: 80%;
    background: $surface;
    border: solid $primary;
    padding: 1;
    border-title-align: center;
}

#search-input {
    dock: top;
    margin-bottom: 1;
}

#search-results {
    height: 1fr;
}

#search-dialog > LoadingIndicator {
    height: 1;
}

.search-status {
    margin-top: 1;
    text-align: center;
}

.search-result {
    border: round $primary;
    padding: 1;
    margin-bottom: 1;
    height: auto;
}

.search-result:focus {
    border: double $accent;
    background: $primary 20%;
}

Markdown {
    link-color: $accent;
}
* {
    scrollbar-size: 0 1;
    scrollbar-background: $primary-darken-3;
    scrollbar-color: $primary;

    scrollbar-background-hover: $primary-lighten-2;
    scrollbar-color-hover: $secondary;

    scrollbar-background-active: $primary-darken-1;
    scrollbar-color-active: $secondary;

    link-color: $accent 80%;
 
    link-background-hover: $primary 50%;
    link-color-hover: $accent;

    link-style: italic;
    link-style-hover: italic underline;
}

LoginScreen {
    align: center middle;
}

#login-dialog {
    width: 80;
    height: auto;
    padding: 1;
    background: $surface;
    border: $primary;
}

#login-grid {
    grid-size: 2;
    grid-gutter: 1;
    padding: 1;
}

#login-grid > Label {
    text-align: right;
    margin-top: 1;
}

#login-status {
    height: 3;
    text-align: center;
    color: $error;
}

ProfileSelectionScreen {
    align: center middle;
}

#profile-selection-dialog {
    width: 60;
    height: auto;
    padding: 1;
    background: $surface;
    border: $primary;
}

#profile-selection-dialog > Button {
    margin-top: 1;
}

AccountResult {
    height: auto;
    max-height: 8;
    overflow-y: auto;
}

#url-selector-dialog {
    width: 80%;
    height: 60%;
    background: $surface;
    border: thick $primary;
}
#url-container {
    width: 100%;
    height: 100%;
    padding: 1;
}
#url-list {
    width: 100%;
    height: 100%;
}
#url-list > ListItem {
    padding: 0 1;
}
#url-container-list > ListItem:hover {
    background: $accent;
}

#keybind-container {
    height: 1fr;
    overflow-y: auto;
    padding: 1;
}

#keybind-container > Horizontal {
    height: auto;
    margin-bottom: 1;
}

.keybind-label {
    width: 1fr;
}

#keybind-container Input {
    width: 20;
}

#keybind-container KeyInput:focus {
    border: tall $accent;
}

#keybind-buttons {
    height: auto;
    align-horizontal: right;
    padding-top: 1;
}
