IndexScreen {
    layers: below above;
}
IndexScreen #content {
    /* background: pink 70%; */
}


IndexScreen #main {
    /* background: pink 70%; */
    background: $panel;
    layout: grid;
    grid-size: 1;
    grid-rows: 1fr 5fr;
}

IndexScreen IndexInfo {
    padding-right: 1;
    padding-left: 1;
}

IndexInfo .entry{
    height: auto;
    width: 100%;
    /* background: blue; */
}

IndexInfo .entry .--label {
    margin-right: 2;
    width: 1fr;
    color: $foreground 60%;
}

IndexInfo .entry FutureLabel {
    width: 5fr;
    padding-left: 1;
}

IndexScreen Button#create {
    display: none;
}

IndexScreen Button#scan_data_btn {
    display: none;
}

IndexScreen.--create-form Button#scan_data_btn {
    display: block;
}

IndexScreen CreateIndex {
    display: none;
}

IndexScreen.--create-form Button#create {
    display: block;
}


IndexScreen.--create-form Button#delete {
    display: none;
}
IndexScreen.--create-form Button#new_index {
    display: none;
}

IndexScreen .--details.--container {
    border: solid $success 70%;
    padding: 1;
}

IndexScreen.--create-form CreateIndex {
    display: block;
}

IndexScreen.--create-form  IndexInfo {
    display: none;
}

IndexScreen IndexConsole {
    layer: above;
    dock: bottom;
    offset: -1 0;
    margin-left: 1;
    margin-top: 1;
    margin-bottom: 1;
    /* background: $panel 80%; */
    background: transparent;
    height: auto;
    max-height: 30vh;
    overflow-y: hidden;
}

IndexConsole RichLog {
    scrollbar-color: $success 50%;
    scrollbar-size: 1 1;
    color: $foreground 70%;
    padding: 1;
    padding-right: 1;
    overflow-y: auto;
    overflow-x: hidden;
    background: $foreground 10%;

}

IndexConsole.--minimize {
    height: 1;
    padding: 0;
}

/* IndexScreen.--console-opened #add-index-form { */
/*     padding-bottom: 20; */
/* } */

IndexConsole ConsoleHeader {
    /* background: $success 70%; */
    height: 1;
}

ConsoleHeader .console--label {
    background: $foreground 10%;
    color: $foreground;
    padding-left: 1;
    padding-right: 1;
}
ConsoleHeader .console--msg {
    /* background: pink; */
    padding-right: 1;
    background: $panel;
    width: 5fr;
    text-align: right;
    color: $warning;
}

ConsoleHeader ProgressBar {
    padding: 0 2;
    visibility: hidden;
}

ConsoleHeader ProgressBar  Bar {
    width: 15;
}


ConsoleHeader ProgressBar .bar--indeterminate {
    /* color: $error-lighten-1; */
    /* color: $warning; */
    color: $warning;
}

IndexConsole.--loading ProgressBar {
    visibility: visible;
}

IndexScreen Button#console {
    dock: right;
}




/* index list  */

IndexList {
    background: $foreground 20%;
    dock: left;
    width: 20%;
}

IndexList .header {
    padding: 1;
    width: 100%;
    /* text-style: bold; */
    text-align: center;
    background: royalblue 60%;
}

IndexList ListItem {
    padding: 1;
}

IndexList ListItem.--highlight {
    text-style: bold;
    background: transparent;
    color: $success-lighten-1;
}


/* Add Index Form */
#add-index-form {
    /* background: cyan 30%; */
    layer: below;
    padding-bottom: 2;
}


#add-index-form .--container {
    padding-top: 1;
    height: 1fr;
    scrollbar-size: 1 1;
}

#add-index-form FormGroup {
    margin-left: 1;
    margin-right: 1;
}


#add-index-form Input:focus {
    background: $success-darken-3 80%;
    /* border-right: inner $warning; */
    /* border-left: inner $warning; */
    border: none;
    border-left: none;
}

#add-index-form #path Input {
    width: 1fr;
}

#add-index-form #description Input {
    width: 1fr;
}

#add-index-form Button#scan {
    margin-top: 1;
    height: 1;
}

#add-index-form Button#browse-path {
    margin-left: 1;
    height: 1;
}
 
/* #add-index-form #submit { */
/*     background: $foreground 10%; */
/*     dock: bottom; */
/*     width: 100%; */
/*     height: auto; */
/*     border-top: tall $foreground 20%; */
/*     padding-bottom: 1; */
/*     padding-right: 2; */
/* } */

/* #add-index-form #submit Label { */
/*     width: 4fr; */
/*     height: 100%; */
/*     content-align: center middle; */
/* } */

/* #add-index-form #submit LoadingIndicator { */
/*     display: none; */
/* } */

/* #add-index-form #submit Button { */
/*     border: none; */
/*     height: 1; */
/*     width: 1fr; */
/* } */


/* #add-index-form #submit LoadingIndicator { */
/*     height: auto; */
/*     width: 1fr; */
/* } */


/* form styles for processing */

/* #add-index-form.processing Button#create-index { */
/*     display: none; */
/* } */

/* #add-index-form.processing #submit LoadingIndicator { */
/*     display: block; */
/* } */

#add-index-form #data-loader-details {
    height: auto;
    padding-bottom: 3;
}

/* TODO!: collapsible form groups */

/**/
/* #add-index-form FormGroup:focus { */
/*     border-title-style: bold; */
/* } */
/**/
/* #add-index-form FormGroup.--collapsed { */
/*     height: 2; */
/*     background: $foreground 10%; */
/* } */

#add-index-form #data-loader #loader-type{
    border-bottom: none;
}

/* WIP: disable styling of textual input validation, to use pydantic validation */
#add-index-form FormControl Input.-invalid {
    height: 1;
    border: none;
}
