/* -----------------
  LEFT CONTROLS BAR
----------------- */
body.crlngn-ui{
  --tools-visible-opacity: 1;
  #interface.crlngn-controls #ui-left {
    /*--color-secondary-75: rgba(50, 50, 70, 0.75);*/
    --icon-font-size: var(--font-size-14);
    --crlngn-control-size: var(--control-item-size);
    --control-size: var(--crlngn-control-size) !important;
    --custom-ui-button-scale: 1 !important;
    --custom-ui-navigation-scale: 1 !important;
  }
  #ui-left{
    padding: 0;
    gap: 16px;

    &:hover{
      z-index: 1001;
    }
    
    #scene-controls{
      margin-left: 16px;
      margin-top: 16px;
    }
  }

  #interface{
    &.crlngn-controls #ui-left{
      --crlngn-control-size: var(--control-item-size);
      --control-size: var(--crlngn-control-size) !important;
      --custom-ui-button-scale: 1 !important;
      --custom-ui-navigation-scale: 1 !important;
      padding: 0;

      #ui-left-column-1{
        --custom-ui-button-scale: 1 !important;
        --custom-ui-navigation-scale: 1 !important;
        --control-size: var(--crlngn-control-size) !important;
      }

      #scene-controls{
        gap: 0;
        margin-left: 0;
        margin-top: 0;

        menu{
          gap: 0;
          
          li:last-child{
            .ui-control {
              border-bottom-right-radius: var(--crlngn-border-radius);
            }
          }
        }
        .ui-control{
          --crlngn-control-size: var(--control-item-size);
          --control-size: var(--crlngn-control-size) !important;
          border-radius: 0;
          border: 1px solid transparent;
          font-size: 0.95em;
        }

        &.more-tools{
          menu#scene-controls-layers{
            li:last-child{
              .ui-control {
                border-bottom-right-radius: 0;
              }
            }
          }
          menu#scene-controls-tools{
            li:last-child{
              .ui-control {
                border-bottom-right-radius: var(--crlngn-border-radius);
                border-bottom-left-radius: var(--crlngn-border-radius);
              }
            }
          }
          &.extra-columns{
            menu#scene-controls-layers{
              li:last-child{
                .ui-control {
                  border-bottom-right-radius: 0;
                }
              }
            }
            menu#scene-controls-tools{
              li:last-child{
                .ui-control {
                  border-bottom-right-radius: var(--crlngn-border-radius);
                  border-bottom-left-radius: 0;
                }
              }
            }
          }
        }
        
      }
      #scene-controls-layers {
        overflow: visible;
        z-index: 0;
        li{
          pointer-events: all;
          overflow: visible;
          position: relative;
          &:after{
            content: "";
            position: absolute;
            width: var(--control-item-size);
            height: var(--control-item-size);
            left: var(--control-item-size);
            top: 0;
            z-index: 0;
          }
        }
        .ui-control{
          &[aria-pressed=true]{
            border: 1px solid var(--color-highlights);
            background: var(--color-secondary-b-90);
          }
        }
      }
      #scene-controls-tools {
        z-index: 1;
        opacity: var(--tools-visible-opacity);

        .ui-control{
          --control-bg-color: var(--color-secondary-65);

          &:hover{
            background: var(--color-secondary-75);
            border: 1px solid var(--color-secondary-bright);
          }
      
          &[aria-pressed=true]{
            cursor: pointer;
            background: var(--color-secondary-b-90);
            border: 1px solid var(--color-warm-2);
            &:hover{
              border: 1px solid var(--color-secondary-bright);
            }
          }
      
          &.toggle{
            cursor: pointer;
            /*background: var(--color-secondary-75);*/
            background: var(--toggle-bg-color); 
            border: 1px dashed var(--toggle-border-color);
      
            &[aria-pressed=true]{
              /* background: var(--striped-bg); 
              border: 1px dashed var(--color-secondary-bright);*/

              background: var(--toggle-active-bg-color);
              border: 1px dashed var(--toggle-active-border-color);
            }
            &:hover{
              background: var(--toggle-active-bg-color);
              border: 1px solid var(--color-secondary-bright);
            }
          } 

        }
        
      }
    }

    #ui-left.auto-hide {
      #scene-controls-tools {
        opacity: 0;
      }
      #scene-controls:hover {
        #scene-controls-tools {
          opacity: var(--tools-visible-opacity);
        }
      }
    }
  }

  .themed.theme-dark{
    --control-bg-color: var(--color-cool-5-90);

    #scene-controls-tools {
      .ui-control{
        --control-bg-color: var(--color-secondary-75);
      }
    }

  }
  
}
