$django-color: rgb(12, 60, 38);
$django-color-alternative: rgb(12, 75, 51);
$django-color-lite: rgb(68, 183, 139);

$primary-darken-3: $django-color-alternative;
$primary-darken-2: $django-color-alternative;
$primary-darken-1: $django-color-alternative;
$primary: $django-color;
$primary-lighten-1: $django-color-lite;
$primary-lighten-2: $django-color-lite;
$primary-lighten-3: $django-color-lite;

$accent-darken-3: $django-color-alternative;
$accent-darken-2: $django-color-alternative;
$accent-darken-1: $django-color-alternative;
$accent: $django-color;
$accent-lighten-1: $django-color-lite;
$accent-lighten-2: $django-color-lite;
$accent-lighten-3: $django-color-lite;


* {
  scrollbar-color: $accent-lighten-2 20%;
}

#home-body {
  height: 100%;
  width: 1fr;
}

#home-body-scroll {
  width: 1fr;
  height: 1fr;

}

#home-exec-preview {
  dock: bottom;
  background: $panel-darken-2;
  height: auto;
}

#home-exec-preview-container {
  min-height: 3;
  max-height: 8;
  height: auto;
  scrollbar-size-vertical: 1;
}

#home-exec-button {
  height: 1fr;
  width: auto;
}

#home-exec-preview-static {
  width: 1fr;
  padding: 1 2;
  height: auto;
}

#home-exec-preview-buttons {
  dock: right;
  height: auto;
  width: auto;
}

#home-commands-label {
  color: $text;
  width: auto;
  height: 4;
  padding: 1 2;
}

#home-sidebar {
  background: $background 50%;
  dock: left;
  width: auto;
}

#home-command-description {
  width: 1fr;
  height: 2;
}

#home-command-description-container {
  dock: top;
  width: 1fr;
  height: 4;
  padding: 1 2;
  color: $text;
  background: $accent-lighten-2 5%;
}

CommandBuilder .version-string {
  color: $text-muted;
  background: $background 50%;
  text-style: italic;
}

CommandBuilder .prompt {
  color: $success;
  background: $background-darken-2;
  text-style: bold;
}

CommandBuilder .command-name-syntax {
  color: $accent-lighten-2;
  background: $panel-darken-2;
  text-style: italic bold;
}

CommandTree {
  background: $background-lighten-1;
  scrollbar-gutter: stable;
  width: auto;
  height: 1fr;
  padding: 0 1;
  margin-bottom: 1;  /* why is this needed? */
  border: blank;
}


CommandTree:focus {
  border: tall $success;
}

CommandTree > .tree--cursor {
  background: $primary-darken-1;
}

CommandTree:focus > .tree--cursor {
  background: $primary-lighten-1;
}

CommandTree > .tree--guides {
  color: slategray;
}

CommandTree .group {
  color: $accent-lighten-2;
  text-style: bold;
}

CommandTree > .tree--guides-selected {
  color: $primary-lighten-2;
}

CommandTree > .tree--guides-hover {
  color: $primary-lighten-2;
}

ParameterControls {
  height: auto;
}

ControlGroup {
  height: auto;
  border: solid $panel-lighten-2;

}

ControlGroup.single-item {
  margin: 0;
  border: none;
}

ControlGroup.single-item:focus-within {
  margin: 0;
  border: none;
}

ControlGroup:focus-within {
  border: solid $primary;
}

ControlGroupsContainer {
  height: auto;
}

Pretty {
  height: auto;
}

.add-another-button {
  margin-right: 1;
  background: transparent;
  color: $success;
  border: none;
  background: $boost;
  height: 1;
 }

.add-another-button:hover {
  background: transparent;
}

.add-another-button-container {
  width: 1fr;
  height: auto;
  align: right top;
}

CommandInfo {
  align: center middle;
}

.command-info-header-text {
  padding: 1 1 0 2;
}

CommandForm .command-form-filter-input {
  margin: 1 2;
}

$command-info-header-bg: $primary-darken-1;

.command-info-header {
  dock: top;
  background: $command-info-header-bg;
  color: $text;
  height: auto;
}

.command-info-container {
  width: 80%;
  height: 60%;
  background: $panel;
}

#command-info-switcher {
  height: auto;
}

.command-info-text {
  padding: 2 4;
  height: auto;
}

.command-info-metadata {
  padding: 2 4;
  height: auto;
}

CommandInfo .title {
  background: $command-info-header-bg;
  text-style: bold;
}

CommandInfo .subtitle {
  background: $command-info-header-bg;
  color: $text-muted;
}

CommandInfo Tab {
  width: 1fr;
}

.command-info-tabs {
  width: 100%;
}

Tabs:focus .underline--bar {
  color: $accent-lighten-1;
}

Select.command-form-select  {

}

Select.command-form-select SelectCurrent {
  border: tall transparent;
}

Select.command-form-select:focus SelectCurrent {
  border: tall $accent;
}

.command-form-multiple-choice {
  margin-left: 0;
  border: tall transparent;
  background: $boost;
  padding: 0 1;
  margin-top: 0;
}

.command-form-multiple-choice:focus-within {

  border: tall $accent;
}
