/*
 * NOTE:
 * - most elements with IDs are containers / wrappers
 * - final widgets are accessed excplicitly
 * TODO!: clean unsed styles
 * 
 *
 */


App.--console-enabled MainConsole  {
    display: block;
}

App.--console-enabled #main-menu {
    display: none;
}

VerticalScroll {
    scrollbar-size-vertical: 1;
    scrollbar-color: royalblue 70%;
}

SettingsScreen {
    /* background: red; */
}

.-no-agent MonitorPane {
    display: none;
}

.-no-agent InstruktHeader {
    display: block;
}

.-show-new-agent MonitorPane {
    display: none;
}

MainConsole {
    /* background: darkgreen; */
    display: none;
    width: 35w;
    height: 100%;
    overflow-y: auto;
}

#main-menu {
    width: 3;
    background: $panel-lighten-1;
}

#main-menu Button {
    background: transparent;
    border: none;
    height: 1;
    max-width: 3;
}


MainConsole ConsoleWindow {
    border: heavy white 20%;
    background: $background-lighten-2;
    padding: 0;
    padding-left: 1;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-size-vertical: 1;
    scrollbar-gutter: stable;
    scrollbar-color: $foreground  20%;
    scrollbar-background: $background-lighten-2;
}

#instrukt-prompt {
    height: 3; /* repl height */
    background: $background-lighten-2;
    dock: bottom;
}

/* WIP: */
#instrukt-prompt #repl-mode {
    display: none;
    background: $background-lighten-2;
}

#instrukt-prompt.--has-mode {
    height: 4;
}

#instrukt-prompt.--has-mode:focus-within #repl-mode {
    display: block;
}

#instrukt-prompt Input {
    outline: vkey $foreground 20%;
    /* dock: bottom; */
    /* margin-bottom: 1; */
}

#instrukt-prompt Input:focus>.input--cursor {
}

#instrukt-prompt Input:focus {
    outline: hkey royalblue 80%;
}


/* Main pane for agent and tools output */
#monitor-pane {
    width: 1fr;
    height: 1fr;
}


/* realm window container */
#monitor-pane #realm-container { 
    /* border: hkey $primary-lighten-2 80%; */
    /* background: red; */
    height: 4fr;
    display: none;
}

#monitor-pane.-show-realm #realm-container {
    display: block;
}

#realm-container RichLog {
    /* background: orange; */
    background: rebeccapurple;
    overflow-y: auto;
    overflow-x: hidden;
}

#realm-container .--topbar {
    background: $primary-background;
    height: 1;
}

#monitor-pane Realm .--topbar-entry {
    width: 1fr;
}


/* filler inside the header between left and right side */
#monitor-pane Realm .--topbar #filler {
    text-align: center;
    width: 2fr;
}


#monitor-pane .--topbar #realm-name {
    text-align: right;
}

#monitor-pane #agent-spinner {
    width: 100%;
    display: none;
    content-align-horizontal: center;
}

MonitorPane {
    /* background: red; */
}

AgentTabs {
    background: $foreground 10%;
    /* background: royalblue 60%; */
    color: white;
    /* background: pink; */
}

AgentTabs Tabs {
    height: 1;
}

AgentTabs Tab {
    height: 1;
    padding: 0 1;
    color: $foreground;
}



AgentTabs Tabs Underline {
    display: none;
}

AgentTabs Tab.-active {
    /* color: $success; */
    text-style: none;
    background: royalblue;
}

AgentTabs Tab:hover {
    background: teal;
}

/* ToastRack { */
    /* background: blue; */
    /* align: right bottom; */
/* } */

/* ToastHolder { */
/*     align-horizontal: right; */
/*     offset: 1 -1; */
/* } */

/* Toast { */
    /* padding: 0; */
    /* margin: 0; */
/*     width: 30; */
/* } */

.--padding-top-1 {
    padding-top: 1;
}


/* Foooter */
Footer {
    background: $panel;
}

Footer > .footer--key {
    background: $foreground 20%;
}

Footer > .footer--highlight-key {
    background: teal;
}

Footer > .footer--highlight {
    background: royalblue 80%;
}
