Screen {
    layout: vertical;
}

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

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

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

Timeline:focus {
    border: double $accent-darken-2;
}

.timeline-header {
    height: 1;
    background: $accent;
    color: $text;
    dock: top;
}

.timeline_title {
    width: 1fr;
    height: 1;
    text-align: center;
    padding: 0 1;
}

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

.timeline-item {
    height: auto;
    margin-bottom: 1;
}

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

.boost-header {
    padding: 0 1;
    background: $primary-darken-2;
    color: $text;
    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;
}

.action-spinner {
    display: none;
}


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

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

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

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

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

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

.timeline-item.selected {
    background: $primary 20%;
}

Post.selected {
    background: $primary 20%;
}

Notification.selected {
    background: $primary 20%;
}


#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;
}

#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_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;
}

#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: 1;
    overflow-y: auto;
}

#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 {
    align: center middle;
}

#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;
}

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

#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;
}

