App {
  background: $secondary;
}

#spacer {
  height: 1;
  background: $primary-darken-2;
  dock: top;
}

Screen {
  layout: dock;
  docks: top=top bottom=bottom;
  background: $secondary;
}

#fahrenheit {
  width: 50%;
}

#celsius {
  width: 50%;
}

#inputs {
  dock: top;
  background: $primary;
  height: 3;
  layout: horizontal;
}

#text_area {
  dock: bottom;
}


/* Not ideal having to do this to get a single cell height text input,
which will probably be a common use-case */
#footer {
  dock: bottom;
  height: 1;
  padding: 0;
  border: ;
}

#footer > TextInputChild {
  border: ;
  padding: 0;
  height: 1;
}

#footer > TextInputChild:focus {
  padding: 0;
  border: ;
}