kreise-toolbar {

    display: flex;
    flex-direction: column;

    /* needed because the toolbuttons only have bg-images thus would shrink */
    flex-wrap: wrap;

    min-height: 20em;
    background-color: rgba(var(--bg-color-tint-medium), 0.75);
    border-top: 1pt black solid;
    border-bottom: 1pt black solid;
    padding: 1em;

    max-width: 100vw;

}

ul.toolbarItems {

    display: none;

}

/* those are the select box and the div.toolbarSelect menu */
#KreiseToolbarSelectorSelect {
    display: none;
}

#KreiseToolbarSelectorSelect {
    text-align: center;
}

#KreiseToolbarSelectorButtonsDiv {
    display: flex;
}

@media (max-width: 641px) {
    #KreiseToolbarSelectorSelect {
        display: block;
        width: 100%;
    }

    #KreiseToolbarSelectorButtonsDiv {
        display: none;
    }
}

/* Toolbar Selector */

div.toolbarSelectorButtons {

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2em;
    justify-content: center;

}

button.toolbar_selector {

    flex: 1 1 auto;
    min-width: 10em;
    max-width: 15em;
    padding: 0.5em 2em;

}

button.toolbar_selector.active {

    background-color: rgba(var(--first-decent), 0.85);
}

.toolbar {
    display: none;
}

/* The 'active' class makes a toolbar visible */
.toolbar.active {
    padding: 1em;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    /* Or 'block', or whatever its default visible state should be */
}

.toolbarSettingsTile {
    display: block;
    padding: 1em;
}

.wDepthSettingsTile {
    display: grid;
    grid-template-columns: max-content 1fr max-content;
    grid-template-rows: 2em;
    column-gap: .5rem;
    row-gap: .25rem;
    align-items: center;
    align-content: flex-start;
}

.fovSettingsTile {
    display: grid;
    grid-template-columns: max-content 1fr;
    grid-template-rows: 2em;
    column-gap: .5rem;
    row-gap: .25rem;
    align-items: center;
    align-content: flex-start;
}


/* MARK: Button / Select */
button.toolbar_button {

    width: 15em;

}


button.toolbar_button.active {

    background-color: rgba(var(--first-decent), 0.75);

}

select.toolbar_select {

    width: 15em;
    text-align: center;
}

select.toolbar_select option {

    color: rgb(var(--main-color));
    background-color: rgb(var(--bg-color));

}