/* General */
#app-grid {
    layout: grid;
    grid-size: 2;  /* two columns */
    grid-columns: 1fr;
    grid-rows: 1fr;
}

/* ###############################################  */
/* File Selector */
#file-selector {
    width: 100%;
    height: 100%;
    row-span: 2;
    background: $panel;
    border: dodgerblue;
}

ListView {
    height: auto;
    padding-bottom: 1;
}

ListItem {
    layout:grid;
    grid-size: 6;
    height: auto;
    padding: 1;
    align: left middle;
}
ListItem > Label {
    height: auto;
    width: 1fr;
    column-span: 4;
}
ListItem > Button {
    height: auto;
    width: 1fr;
}

Collapsible{
    border: $panel thick ;
    background:$panel;

}

CollapsibleTitle {
    width: 1fr;
    height: 3;
    background: $boost;
    content-align: left middle;
}

.edit {
    display: none
}
.delete {
    display: none
}
.active {
    display: block;
}

/* ###############################################  */
/* Env File Preview */
#file-preview  {
    width: auto;
    background: $panel;
    border: red;
    height: 100%;
    background: $boost;
}
/* ###############################################  */
/* Interaction General */
#interaction {
    height: 100%;
    layout: grid;
    grid-size: 3;
    grid-columns: 1fr;
    grid-rows: 1fr;
    background: $panel;
    border: greenyellow;
}

/* Interaction 1st Row Buttons */
#interaction > Button {
    height: 1fr;
    width: 1fr;
    margin: 1 1 1 2;
}

/* Interaction Shell Selector */
#interaction-shell-select {
    width: 1fr;
    height: 1fr;
    column-span: 1;
    margin: 0 0 0 2 ;
}
#interaction-shell-select > Label{
    width: 1fr;
    column-span: 1;
    content-align:center middle;
    margin: 0 0 1 0;
}

#interaction-shell-select > Button{
    width: 1fr;
    height: 100%;
    column-span: 1;
    content-align:center middle;
    margin: 1 1 1 0;
}

/* Interaction Export Name */
#interaction-export-name {
    width: 1fr;
    column-span: 2;
    margin: 0 1 0 1 ;
}
#interaction-export-name > Label{
    width: 1fr;
    column-span: 2;
    content-align:center middle;
    margin: 0 0 1 0;
}
#interaction-export-name > Input{
    height: auto;
    content-align:center middle ;
}

/* Header Footer */
Header {
    height: 5%;
    background: $panel;
}

Footer {
    height: 5%;
    background: $panel;
}
