/* Basic stylesheet for the Textual Email Viewer App */


#main_content, .list_view {
  scrollbar-size: 1 1;
  border: round rgb(117, 106, 129);
  height: 1fr;
}

#sidebar {
  width: 1fr
}

#main_content {
  width: 2fr;

}

#sidebar:focus-within {
  background: $panel;
  .list_view:blur {
    height: 3;
  }
  .list_view:focus {
    height: 2fr;
  }
}

#main_content:focus, .list_view:focus {
  border: round $secondary;
  background: rgb(55, 53, 57);
  border-title-style: bold;
}

Label#task_prompt {
  padding: 1;
  color: rgb(128,128,128);
}

Label#task_prompt_label {
  padding: 1;
  color: rgb(255, 216, 102);
}

Label#message_label {
  padding: 1;
}

StatusTitle {
  dock: top;
  width: 100%;
  height: 1;
  color: $text;
  background: rgb(64, 62, 65);
  content-align: center middle;
}

EnvelopeHeader {
  dock: top;
  width: 100%;
  max-height: 2;
  tint: $primary 10%;
}

Markdown {
  padding: 1 2;
}

.email_subject {
  width: 1fr;
  padding: 0
}

.header_key {
  tint: gray 20%;
  min-width: 10;
  text-style:bold;
}

.header_value {
  padding:0 1 0 0;
  height: auto;
  width: auto;
}

.modal_screen {
  align: center middle;
  margin: 1;
  padding: 2;
  border: round $border;
  background: $panel;
  width: auto;
  height: auto;
}


#create_task_container {
  width: 50%;
  height: 50%;
  border: heavy $secondary;
  layout: horizontal;
  align: center middle;
  Label {
    width: auto;
  }
  Input {
    width: 1fr;
  }
}

#envelopes_list {
  ListItem:odd {
    background: rgb(45, 45, 46);
  }
  ListItem:even {
    background: rgb(50, 50, 56);
  }
  & > ListItem {
    &.-highlight {
      color: $block-cursor-blurred-foreground;
      background: $block-cursor-blurred-background;
      text-style: $block-cursor-blurred-text-style;
    }
  }
}


#open_message_container, #create_task_container {
  dock: bottom;
  width: 100%;
  padding: 0 1;
  height: 5;

  Input {
    width: 1fr;
  }
  Label, Button {
    width: auto;
  }
}

Label.group_header {
  color: rgb(140, 140, 140);
  text-style: bold;
  background: rgb(64, 62, 65);
  width: 100%;
  padding: 0 1;
}

#plaintext_content {
  padding: 1 2;
  height: auto;
  width: 100%;
}

#html_content {
  padding: 1 2;
  height: auto;
  width: 100%;
}

.hidden {
  display: none;
}

#markdown_content {
  padding: 1 2;
}

ContentContainer {
  width: 100%;
  height: 1fr;
}