/* CSS file for basic.py */



 * {
    transition: color 300ms linear, background 300ms linear;
} 


*:hover {
  /* tint: 30% red;  
  /* outline: heavy red; */
}

App > Screen {
    
  background: $surface;
  color: $text-surface; 
  layers: base sidebar;

  color: $text-background;
  background: $background;
  layout: vertical;

  overflow: hidden;
  
}

#tree-container {
  overflow-y: auto;
  height: 20; 
  margin: 1 2;
  background: $panel;
  padding: 1 2;
}

DirectoryTree {
    padding: 0 1;
    height: auto;
   
}




DataTable {
  /*border:heavy red;*/
  /* tint: 10% green; */
  /* opacity: 50%; */
  padding: 1;
  margin: 1 2;  
  height: 24;  
}

#sidebar {
  color: $text-panel;
  background: $panel;
  dock: left;
  width: 30;
  margin-bottom: 1;
  offset-x: -100%;
  
  transition: offset 500ms in_out_cubic;
  layer: sidebar;
}

#sidebar.-active {
  offset-x: 0;
}

#sidebar .title {
  height: 1;
  background: $primary-background-darken-1;
  color: $text-primary-background-darken-1;
  border-right: wide $background;
  content-align: center middle;
}

#sidebar .user {
  height: 8;
  background: $panel-darken-1;
  color: $text-panel-darken-1;
  border-right: wide $background;
  content-align: center middle;
}

#sidebar .content {
  background: $panel-darken-2;
  color: $text-surface;
  border-right: wide $background;
  content-align: center middle;
}




Tweet {
  height:12;
  width: 100%;
 
  
  background: $panel;
  color: $text-panel;
  layout: vertical;
  /* border: outer $primary; */
  padding: 1;
  border: wide $panel;
  overflow: auto;
  /* scrollbar-gutter: stable; */
  align-horizontal: center;
  box-sizing: border-box;
}


.scrollable {
  overflow-x: auto;
  overflow-y: scroll;
  margin: 1 2;
  height: 24;
  align-horizontal: center;
  layout: vertical;
}

.code {  
  height: auto;
  
}


TweetHeader {
  height:1;
  background: $accent;
  color: $text-accent
}

TweetBody {  
  width: 100%;
  background: $panel;
  color: $text-panel;
  height: auto; 
  padding: 0 1 0 0; 
}

Tweet.scroll-horizontal TweetBody {
  width: 350;
}

.button {
  background: $accent;
  color: $text-accent;
  width:20;
  height: 3;
  /* border-top: hidden  $accent-darken-3;  */
  border: tall $accent-darken-2;
  /* border-left: tall $accent-darken-1; */


  /* padding: 1 0 0 0 ; */

  transition: background 400ms in_out_cubic, color 400ms in_out_cubic;
 
}

.button:hover {
  background: $accent-lighten-1;
  color: $text-accent-lighten-1;
  width: 20;
  height: 3;
  border: tall $accent-darken-1;
  /* border-left: tall $accent-darken-3; */




}

#footer {
  color: $text-accent;
  background: $accent;
  height: 1;
  
  content-align: center middle;
  dock:bottom;
}


#sidebar .content {
  layout: vertical
}

OptionItem {
  height: 3;
  background: $panel;
  border-right: wide $background;
  border-left: blank;
  content-align: center middle;
}

OptionItem:hover {
  height: 3;
  color: $text-primary;
  background: $primary-darken-1;
  /* border-top: hkey $accent2-darken-3;
  border-bottom: hkey $accent2-darken-3; */
  text-style: bold;
  border-left: outer $secondary-darken-2;
}

Error {
  width: 100%;
  height:3;
  background: $error;
  color: $text-error;
  border-top: tall $error-darken-2;
  border-bottom: tall $error-darken-2;
  
  padding: 0;
  text-style: bold;
  align-horizontal: center;
}

Warning {
  width: 100%;
  height:3;
  background: $warning;
  color: $text-warning-fade-1;
  border-top: tall $warning-darken-2;
  border-bottom: tall $warning-darken-2;
  
  text-style: bold;
  align-horizontal: center;
}

Success {
  width: 100%;
  
  height:auto;  
  box-sizing: border-box;
  background: $success;
  color: $text-success-fade-1;  
  
  border-top: hkey $success-darken-2;
  border-bottom: hkey $success-darken-2; 

  text-style: bold ;

  align-horizontal: center;
}


.horizontal {
  layout: horizontal
}