nav#sidebar[role=tablist] > div > div[role=tabpanel]:has( > div#datasourcesUi) > label[for=uploader] {
  position: relative;
  left: 1em;
  top: 1em;
  width: calc( 100% - 1em );
  display: inline-block;
  white-space: normal;
}

nav#sidebar[role=tablist] > div > div[role=tabpanel]:has( > div#datasourcesUi) > label[for=uploader]::after {
  display:inline-block;
  font-size: 140px;
  width: 100%;
  font-family: var( --huey-icon-font-family );
  content: "\eb47";
  text-align: center;
  color: var( --huey-icon-color-subtle );
}
nav#sidebar[role=tablist] > div > div[role=tabpanel]:has( > div#datasourcesUi ) > label[for=uploader]:hover::after {
  color: var( --huey-icon-color-highlight );
}

nav#sidebar[role=tablist] > div > div[role=tabpanel]:has( > div#datasourcesUi details) > label[for=uploader] {
  display: none;
}

nav#sidebar[role=tablist] > div > div[role=tabpanel] > div#datasourcesUi {
  display: none;
}

nav#sidebar[role=tablist] > div > div[role=tabpanel] > div#datasourcesUi:has( > details ){
  display: block;
}

#datasourcesUi {
  padding-top: 12px;
  height: calc(100% - 36px);

  details > summary > span.label {
    max-width: calc(100% - 140px);
  }

  details[role=treeitem] {

    > summary {

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

      > span.label::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;
      }

      > 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 );
      }

      > label:has( > button ):hover::before {
        color: var( --huey-icon-color-highlight );
      }

      > label.editActionButton::before {
        /* settings */
        content: '\eb20';
      }

      > label.analyzeActionButton::before {
        /* analyze */
        content: '\f3a3';
      }

      > label.removeActionButton::before {
        /* trash */
        content: '\eb41';
      }

      > label.downloadActionButton::before {
        /* download */
        content: '\ea96';
      }
    }
    
    > summary:hover  > span.label::before {
      color: var( --huey-icon-color-highlight );
    }

  }

  details[data-nodetype=datasourcegroup][data-grouptype=duckdb] > summary > span.label::before,
  details[data-nodetype=datasourcegroup][data-grouptype=file] > summary > span.label::before,
  details[data-nodetype=datasourcegroup][data-grouptype=sqlite] > summary > span.label::before,
  details[data-nodetype=datasource][data-datasourcetype=duckdb] > details[data-nodetype=duckdb_schema] > summary > span.label::before
  {
    /* folder */
    content: '\eaad';
  }

  details[data-nodetype=datasourcegroup][open][data-grouptype=duckdb] > summary > span.label::before,
  details[data-nodetype=datasourcegroup][open][data-grouptype=file] > summary > span.label::before,
  details[data-nodetype=datasourcegroup][open][data-grouptype=sqlite] > summary > span.label::before,
  details[data-nodetype=datasource][data-datasourcetype=duckdb] > details[data-nodetype=duckdb_schema][open] > summary > span.label::before
   {
    /* folder open */
    content: '\faf7';
  }

  details[data-nodetype=datasourcegroup][data-grouptype=file][data-filetype] > summary > span.label::before {
    /* bucket */
    content: '\ea47';
  }

  details[open][data-nodetype=datasourcegroup][data-grouptype=file][data-filetype] > summary > span.label::before {
    /* bucket droplet */
    content: '\f56a';
  }

  details[data-nodetype=datasource][data-datasourcetype=duckdb] > details[data-nodetype=duckdb_schema] > details > summary,
  details[data-nodetype=datasourcegroup][data-grouptype=file] > details[data-nodetype=datasource][data-datasourcetype=file] > summary {
    list-style: none;
    margin-left: 16px;
  }

  details[data-nodetype=datasource][data-datasourcetype=duckdb] {
    > summary > span.label::before {
      /* file-database */
      /* content: '\f037';*/
      /* database*/
      content: '\ea88';
    }

    > details[data-nodetype=duckdb_schema] {

      > details[data-nodetype=datasource][data-datasourcetype=table] summary > span.label::before {
        /* table */
        content: '\eba1';
      }

      > details[data-nodetype=datasource][data-datasourcetype=view] summary > span.label::before {
        /* table-options */
        content: '\f25c';
      }
    }
  }

  details[data-nodetype=datasource][data-datasourcetype=file] > summary > span.label::before {
    /* file */
    content: '\eaa4';
  }

  details[data-nodetype=datasource][data-datasourcetype=sqlite] > summary > span.label::before {
    /* feather */
    content: '\ee8b';
  }

  details[data-nodetype=datasource][data-reject_count] > summary > span.label::before {
    content: '\ede6';
    color: red;
  }

}

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

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

/*
  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;
    }
  }
}