/* Controls (top left)*/


/* Glass - Remove prior styling */

#controls ol .scene-control,
#controls ol .control-tool,
#controls ol.control-tools>li.active,
#controls ol.control-tools>li:hover,
#controls ol.control-tools>li,
#controls ol.control-tools>li.toggle,
#controls ol.control-tools>li.toggle.active,
#controls ol .control-tool.toggle,
#controls ol .control-tool.toggle.active,
#controls ol .control-tool.active,
#controls ol .scene-control.active,
#controls ol .control-tool.toggle:hover,
#controls ol .control-tool:hover,
#controls ol .scene-control:hover,
/* #controls ol.control-tools>li.toggle:hover, */
#darkness-adjuster .window-content,
#darkness-adjuster {
    border: none;
    border-radius: 0px;
    box-shadow: none;
    backdrop-filter: none;
    background: none;
    background-image: none;
}

#controls ol.control-tools>li.toggle,
#controls ol li.control-tool.toggle,
#controls .app li,
#controls ol li,
#controls ol.sub-controls .control-tool,
#controls ol.sub-controls .control-tool:hover,
#controls ol .scene-control,
#controls ol .scene-control:hover,
#controls ol .scene-control.active,
#controls ol .control-tool.toggle,
#controls ol .control-tool.toggle:hover,
#controls ol .control-tool.toggle.active,
#controls ol .control-tool.toggle.active:hover,
#controls ol.control-tools>li,
#controls ol.control-tools>li.active,
#controls ol.control-tools>li:hover,
/* #controls ol.control-tools>li.active:hover, */
#controls ol.control-tools>li.toggle:hover,
#controls ol.control-tools>li.toggle.active,
#controls ol.sub-controls .control-tool.toggle,
#darkness-adjuster .window-content {
    border: none;
    border-radius: var(--dorako-radius);
    background-color: var(--dorako-bg-current);
    backdrop-filter: var(--dorako-vibrancy);
    /*will-change: backdrop-filter;*/
    transform: translate3d(0px, 0px, 0px);
    box-shadow: var(--glassy);
}

#darkness-adjuster {
    height: 36px !important;
}

#controls {
    padding-top: 0px;
    margin-top: var(--edge-margin);
    margin-left: var(--edge-margin);
    ;
    transition: unset;
    overflow: visible;
    padding: 0px;
}

#controls ol.control-tools>li {
    margin-bottom: 5px;
    margin-right: 5px;
}

#controls ol.control-tools.main-controls {
    padding: 0px;
    margin: 0px;
}

#controls ol.main-controls {
    overflow: visible;
    width: 44px;
    padding: 0px;
    margin: 0px 0px 0px var(--edge-margin);
}

#controls ol .scene-control,
#controls ol .control-tool {
    /* transition: backdrop-filter 0.15s ease-out; */
    transition: background-color 0.15s ease-out;
    color: rgba(240, 240, 240, 1);
    text-shadow: var(--dorako-text-shadow);
}

#controls ol.control-tools>li.active,
#controls ol.control-tools>li:hover,
#controls ol .scene-control.active,
#controls ol .scene-control:hover {
    background-color: var(--paizo-red);
    /* backdrop-filter: var(--dorako-vibrancy-active) */
}

#controls ol.sub-controls .control-tool:hover,
#controls ol.sub-controls .control-tool.active:not(.toggle):hover,
#controls ol.sub-controls .control-tool.active:not(.toggle) {
    background-color: var(--paizo-red);
    /* backdrop-filter: var(--dorako-vibrancy-active); */
}

#controls ol.control-tools>li.toggle,
#controls ol li.control-tool.toggle,
#controls ol.sub-controls .control-tool.toggle {
    background-color: var(--paizo-blue-dark);
    /* backdrop-filter: var(--dorako-vibrancy); */
}

#controls ol.control-tools>li.toggle:hover,
#controls ol.control-tools>li.toggle.active:hover,
#controls ol li.control-tool.toggle:hover,
#controls ol li.control-tool.toggle.active:hover,
#controls ol.sub-controls .control-tool.toggle:hover,
#controls ol.sub-controls .control-tool.toggle.active:hover {
    background-color: var(--paizo-blue);
    /* backdrop-filter: var(--dorako-vibrancy-active) var(--dorako-vibrancy-active); */
}

#controls ol.control-tools>li.toggle.active,
#controls ol li.control-tool.toggle.active,
#controls ol.sub-controls .control-tool.toggle.active {
    background-color: var(--paizo-blue-bright);
    /* backdrop-filter: brightness(1.5), var(--dorako-vibrancy-active); */
}


#controls .app {
    backdrop-filter: none;
}




#terrainlayer-tools {
    top: 50px !important;
    left: 100px !important;
}

#terrainlayer-tools-form {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

#terrainlayer-tools {
    background: var(--dorako-bg-current);
    color: var(--color-text-light-heading);
    text-shadow: var(--dorako-text-shadow);
    box-shadow: var(--glassy);
    border-radius: 3px;
}


#terrainlayer-tools .control-tool {
    width: unset;
    height: unset;
    box-sizing: content-box;
    font-size: unset;
    line-height: unset;
    box-shadow: none;
    ;
    margin: 0px;
    text-align: center;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    padding: 0;
    background: none;
}

#terrainlayer-tools .control-tool:hover {
    color: var(--color-text-light-heading);
    border: unset;
    border-bottom: unset;
    box-shadow: none;
    background: none;
}

#terrainlayer-tools .control-tools .li {
    padding: 5px;
}

#controls ol.sub-controls .control-tool {
    margin-right: 0px;
}

#controls {
    text-shadow: var(--dorako-text-shadow);
}