$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;
    background: $background 50%;
    width: 100%;
    height: 4;
    padding: 1 2;
}

#home-sidebar {
    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;
}

.text-area{
    border-left: solid $accent;
}

.status_bar{
    background: $primary-darken-3;
}

#dialog {
        grid-size: 2;
        grid-gutter: 1 2;
        grid-rows: 1fr 3;
        padding: 0 1;
        width: 95;
        height: 20;
        border: thick $background 80%;
        background: $surface;
    }