nav#sidebar[role=tablist] {
  > div {
    > div[role=tabpanel]{
      
      &:has( > div#datasourcesUi) {
        
        > label:is( [for=uploader], [for=loadFromUrl] ){
          position: relative;
          left: 1em;
          top: 1em;
          width: calc( 100% - 1em );
          display: inline-block;
          white-space: normal;
          
          &::after {
            display:inline-block;
            font-size: 140px;
            width: 100%;
            font-family: var( --huey-icon-font-family );
            text-align: center;
            color: var( --huey-icon-color-subtle );
          }

          &:hover::after {
            color: var( --huey-icon-color-highlight );
          }

          &[for=uploader]::after {
            content: var( --icon-upload );
          }

          &[for=loadFromUrl]::after {
            content: var( --icon-cloud-upload );
          }
          
        }
        
      }

      &:has( > div#datasourcesUi details) > label:is( [for=uploader], [for=loadFromUrl] ) {
        display: none;
      }
            
    }
  }
}


#datasourcesUi {
  padding-top: 12px;
  height: calc(100% - 36px);
  display: none;
  
  &:has( details ){
    display: block;
  }


  &[data-drop-allowed=true] {
    cursor: 'copy';
  }

  &[data-drop-allowed=false] {
    cursor: 'not-allowed';
  }

  details {

    &[role=treeitem] {

      > summary {
        > label {
          
          &:has( > button ) {
            &::before {
              display: block;
              float: inline-end;
              width: 24px;
              padding: 6px 3px 0px 3px;
              font-family: var( --huey-icon-font-family ) !important;
              font-size: var( --huey-icon-medium );
              color: var( --huey-icon-color-subtle );
            }
            
            &:hover::before {
              color: var( --huey-icon-color-highlight );
            }
          }

          &.editActionButton::before {
            content: var( --icon-settings );
          }

          &.analyzeActionButton::before {
            content: var( --icon-analyze );
          }

          &.removeActionButton::before {
            content: var( --icon-trash );
          }

          &.downloadActionButton::before {
            content: var( --icon-download );
          }

          > button {
            display: none;
            appearance: none;
          }

        }

        &:hover > span.label::before {
          color: var( --huey-icon-color-highlight );
        }

        > span {
          &.label {
            max-width: calc(100% - 140px);
          }
          
          &::before {
            display: inline-block;
            font-family: var( --huey-icon-font-family ) !important;
            font-size: var( --huey-icon-medium );
            color: var( --huey-icon-color-subtle );
            width: 24px;
            padding: 6px 3px 0px 3px;
            text-align: center;
            position: relative;
            top: 3px;
          }
        }
      }
    }
        
    &[data-nodetype=datasourcegroup]:is( 
      [data-grouptype=duckdb], 
      [data-grouptype=file], 
      [data-datasourcetype=duckdb] 
    ) > summary > span.label::before,
    &[data-nodetype=datasource][data-datasourcetype=duckdb] > details[data-nodetype=duckdb_schema] > summary > span.label::before
    {
      content: var( --icon-folder );
    }

    &[data-nodetype=datasourcegroup][open]:is( 
      [data-grouptype=duckdb], 
      [data-grouptype=file], 
      [data-datasourcetype=duckdb] 
    ) > summary > span.label::before,
    &[data-nodetype=datasource][data-datasourcetype=duckdb] > details[data-nodetype=duckdb_schema][open] > summary > span.label::before
    {
      content: var( --icon-folder-open );
    }
    
    &[data-nodetype=datasourcegroup][data-grouptype=file][data-filetype] {
      
      > summary > span.label::before {
        content: var( --icon-bucket);
      }
      
      &:is([open]) {
        > summary > span.label::before {
          content: var( --icon-bucket-droplet );
        }
      }
    }
    
    &[data-nodetype=datasource][data-datasourcetype=duckdb] > details[data-nodetype=duckdb_schema] > details > summary,
    &[data-nodetype=datasourcegroup][data-grouptype=file] > details[data-nodetype=datasource][data-datasourcetype=file] > summary {
      list-style: none;
      margin-left: 16px;
    }
    
    &[data-nodetype=datasource]{

      &[data-datasourcetype=duckdb] {
        > summary > span.label::before {
          content: var( --icon-database );
        }

        > details[data-nodetype=duckdb_schema] {

          > details[data-nodetype=datasource] {
            &[data-datasourcetype=table] summary > span.label::before {
              content: var( --icon-table );
            }
            
            &[data-datasourcetype=view] summary > span.label::before {
              content: var( --icon-table-options );
            }
          }
          
        }
      }
      
      &[data-datasourcetype=file] > summary > span.label::before {
        content: var( --icon-file );
      }
      
      &[data-datasourcetype=sqlite] > summary > span.label::before {
        content: var( --icon-feather );
      }
      
      &[data-reject_count] > summary > span.label::before {
        content: '\ede6';
        color: red;
      }
    }
  }

}

/*
  This is the menu we present in the prompt for datasource export.
*/
menu.fileTypes {
  column-count: 2;
  > li {
    list-style-type: none;
    white-space: nowrap;
    
    > label {
      white-space: nowrap;
      vertical-align: super;
    }
  }
}