main.layout {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 99fr;
  grid-template-rows: 1fr 1fr 99fr;
  gap: 0px;
}

main.layout:has( .workarea > .pivotTableUiContainer[aria-busy=true] ) {
  cursor: wait;
}

html > body[aria-busy=true] > main#layout {
  display: none;
}

html > body[aria-busy=false] > #spinner {
  display: none;
}

nav#sidebar {
  width: 350px;
  height: calc(100vh - 40px);
  max-width: calc(100vw - 14px);
  grid-column: 1/1;
  grid-row: 2/ span 2;
  padding: 4px 4px 0px 4px;
  display: flex;
  min-width: 170px;
}


nav#sidebar::-webkit-scrollbar-corner{
  background-color: var( --huey-medium-background-color );
}

.workarea {
  grid-column: 2/2;
  grid-row: 2/2;
  height: calc(100vh - 38px);
  overflow: hidden;
  display: flex;
  flex-direction: column;  
  border-top-style:solid;
  border-top-color: var( --huey-dark-border-color );
  border-top-width: 1px;

  border-left-color: var( --huey-dark-border-color );
  border-left-width: 1px;
  border-left-style: solid;

  border-top-left-radius: 12px;
}

.button {
  display: inline-block;
  
}

body {
  
  > main {
    
    > menu[role=toolbar] {

      > label {
      }  

      > label[for=autoRunQuery]::after,
      > label[for=cloneHueySession]::before,
      > label[for=quickQueryMenuButton]::after,
      > label[for=currentDatasourceMenuButton]::after
      {
        border-right-width: 1px;
        border-right-style: solid;
        border-right-color: var(--huey-light-border-color);
        padding-right: 8px;
      }
      
      > label[for=uploader] {
        > input[type=file]#uploader {
          display: none;
        }
      }


      > label[for=uploader]::before {
        content: "\eb47";
      }
      
      
      > label[for=loadFromUrl]::before {
        content: "\ea75";
      }  

      > label[for=cloneHueySession]::before {
        content: "\ea7a";
        padding-left: 8px;
      }

      > label[for=autoRunQuery] {
      }
      
      > label[for=autoRunQuery]::after {
        font-family: var( --huey-icon-font-family );
        font-size: var(--huey-icon-normal);
        vertical-align: sub;
        color: var(--huey-icon-color-subtle);
        margin: 0px 4px 0px 4px;
        display: inline-block;
        /* square */
        content: "\eb2c";
      }

      > label[for=autoRunQuery]:hover::after {
        color: var( --huey-icon-color-highlight );
      }

      > label[for=runQueryButton]::before {
        margin-left: 0px;
      }
            
      /*
        separators between the top menu bar items
      */
      > label[for=cloneHueySession]::before,
      > label[for=quickQueryMenuButton]::before
      {
        border-left-width: 1px;
        border-left-style: solid;
        border-left-color: var(--huey-light-border-color);
      }

      > label[for=quickQueryMenuButton]:has( +label[for=currentDatasourceMenuButton][data-current-datasource=''] ) {
        display: none;
      }

      > label[for=currentDatasourceMenuButton] {
        display: inline-block;
        max-width: calc( 100vw - 650px );
        vertical-align: bottom;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      > label[for=currentDatasourceMenuButton]:has( > menu#dataSourceMenu:empty ){
        pointer-events: none;
      }

      > label[for=currentDatasourceMenuButton]:has( > menu#dataSourceMenu:not( :empty ) ){
        pointer-events: auto;
      }

      > label[for=currentDatasourceMenuButton]:has( > menu#dataSourceMenu:empty )::after {
        content: ' ';
      }

      > label[for=currentDatasourceMenuButton]:has( > menu#dataSourceMenu:not( :empty ) )::after {
        font-family: var( --huey-icon-font-family );
        /* caret-down */
        content: '\fb2a';
      }
      
      > label[for=currentDatasourceMenuButton][data-current-datasource=''] {
        display: none;
      }

      > label[for=queryResultRowsInfo]:has( > output#queryResultRowsInfo:empty ),
      > label[for=queryResultColumnsInfo]:has( > output#queryResultColumnsInfo:empty ) 
      {
        display: none;
      }
      
      #queryResultRowsInfo {
        padding-left: 1em;
      }

      /* separator after 'rows' */ 
      > label[for=queryResultRowsInfo]:after {
        content: ' rows;'
      }

      /* if the columns info is empty then no separator after 'rows' */ 
      > label[for=queryResultRowsInfo]:has( + label[for=queryResultColumnsInfo] > output#queryResultColumnsInfo:empty ):after {
        content: ' rows'
      }
      
      > label[for=queryResultColumnsInfo]:after {
        content: ' columns'
      }
    }
    
  }

  /**/
  > main:has( > .workarea > #pivotTableUi[data-needs-update=false]) > menu[role=toolbar] {

    > label[for=runQueryButton] {
      pointer-events: none;
    }

    > label[for=runQueryButton]::before {
      /* player-play */
      content: "\ed46";
    }
  }

  > main:has( > .workarea > #pivotTableUi[data-needs-update=true]) > menu[role=toolbar] > label[for=runQueryButton]::before {
    /* player-play */
    content: "\ed46";
    color: var( --huey-icon-highlight );
  }

  > main:has( > .workarea > #pivotTableUi[aria-busy=true]) > menu[role=toolbar] > label[for=runQueryButton]::before {
    /* player-play-filled */
    content: "\f691";
    color: var( --huey-icon-highlight );
    pointer-events: none;
  }
  
}

body:has( #autoRunQuery:checked ) {
  > main {
    > menu[role=toolbar] {
      
      > label[for=autoRunQuery]::after {
        /* checkbox */
        content: "\eba6";
        color: var( --huey-icon-color-highlight );
      }
      
      > label[for=runQueryButton] {
        visibility: hidden;
      }
      
    }
  }
}