/**
* Prevent the Attribute UI events when the pivot table is busy:
*/
main.layout:has( .workarea > .pivotTableUiContainer[aria-busy=true] ) > nav#sidebar .attributeUi details > summary {
  pointer-events: none;
}

.attributeUi {
  user-select: none;

  /**
  * hide the expand/collapse widget for these attribute nodes.
  */
  details[role=treeitem][data-nodetype=derived][data-member_expression_type=JSON] > summary,
  details[role=treeitem][data-nodetype=aggregate] > summary ,
  details[role=treeitem][data-nodetype=derived][data-derivation="row number"] > summary 
  {
    list-style: none;
    margin-left: 14px;
  }
  
  
  details[role=treeitem] {

    > summary {
      white-space: nowrap;

      > span.label  {
        width: calc( 100% - 130px );
      }

      > 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: 2px 3px 0px 3px;
        text-align: center;
      }

      /**
      *
      * Axis Buttons
      *
      */
      > span.attributeUiAxisButton,
      > label.attributeUiAxisButton:has( > input[type=checkbox] ) {
        display: inline-block;
        position: absolute;
        width: 24px;
        height: 22px;
        padding: 2px 3px 0px 3px;
        font-family: var( --huey-icon-font-family ) !important;
        font-size: var( --huey-icon-medium );
        color: var( --huey-icon-color-subtle );
        /* set the background to fix https://github.com/rpbouman/huey/issues/397 */
        background-color: var( --huey-medium-background-color );
      }

      > label.attributeUiAxisButton:has( > input[type=checkbox]):hover {
        color: var( --huey-icon-color-highlight );
      }

      .attributeUiAxisButton > input[type=checkbox] {
        display: none;
      }

      > .attributeUiAxisButton[data-axis=none] {
        width: 110px;
        right: 0px;
      }

      > .attributeUiAxisButton[data-axis=rows] {
        right: 90px;
      }
      
      > .attributeUiAxisButton[data-axis=rows]::before {
        /*
          It may seem backward that we're using the table-column icon for the rows axis,
          but because the icon shows the highlighted first column, it matches the location of the row headers of a pivot table
        */
        content: var( --icon-table-column );
      }

      > .attributeUiAxisButton[data-axis=columns] {
        right: 60px;
      }
      
      > .attributeUiAxisButton[data-axis=columns]::before {
        /*
          It may seem backward that we're using the table-row icon for the columns axis,
          but because the icon shows the highlighted first row, it matches the location of the column headers of a pivot table
        */
        content: var( --icon-table-row );
      }

      > .attributeUiAxisButton[data-axis=cells] {
        right: 30px;
      }
      
      > .attributeUiAxisButton[data-axis=cells]::before {
        content: var( --icon-layout-grid );
      }
      
      /* if the .attributeUiAxisButton is a SPAN (and not a LABEL) then it's not functional and the icon should be hidden */
      > span.attributeUiAxisButton::before {
        visibility:hidden;
      }

      > .attributeUiAxisButton:has( > input[type=checkbox]:checked ) {
        color: var( --huey-icon-color-highlight );
      }

      > .attributeUiAxisButton[data-axis=filters] {
        right: 0px;
      }
      
      > .attributeUiAxisButton[data-axis=filters]::before {
        content: var( --icon-filter );
      }

      > .attributeUiAxisButton[data-axis=filters]:has( > input[type=checkbox]:checked )::before {
        content: var( --icon-filter-off );
      }

    }

    > summary:hover {
      > span.attributeUiAxisButton,
      > label.attributeUiAxisButton:has( > input[type=checkbox] ) {
        background-color: var( --huey-light-background-color );
      }

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

    /**
    * folder icons
    */
    [data-nodetype=folder] > summary > span.label::before {
      content: var( --icon-folder );
    }

    [data-nodetype=folder][open] > summary > span.label::before {
      content: var( --icon-folder-open );
    }
    
  }

  /**
  *
  * Data type icons & derivations
  *
  */
  details[data-nodetype=derived][data-derivation='row number'] > summary > span.label::before {
    content: var( --icon-hash );
  }

  details[data-nodetype=derived][data-member_expression_type=VARCHAR]:has( 
    [data-derivation='entry keys'], 
    [data-derivation='entry values'], 
    [data-derivation='elements'] 
  ) > summary > span.label::before,
  details[data-nodetype=member][data-member_expression_type=VARCHAR] > summary > span.label::before,
  details[data-nodetype=column][data-column_type=VARCHAR] > summary > span.label::before {
    content: var( --icon-txt );
  }

  details[data-nodetype=derived][data-derivation='elements'][data-member_expression_type=BOOLEAN] > summary > span.label::before,
  details[data-nodetype=member][data-member_expression_type=BOOLEAN] > summary > span.label::before,
  details[data-nodetype=column][data-column_type=BOOLEAN] > summary > span.label::before {
    content: var( --icon-square-check );
  }

  details[data-nodetype=derived][data-derivation='elements'][data-member_expression_type$=INT] > summary > span.label::before,
  details[data-nodetype=derived][data-derivation='elements'][data-member_expression_type$=INTEGER] > summary > span.label::before,
  details[data-nodetype=member][data-member_expression_type$=INT] > summary > span.label::before,
  details[data-nodetype=member][data-member_expression_type$=INTEGER] > summary > span.label::before,
  details[data-nodetype=column][data-column_type$=INT] > summary > span.label::before,
  details[data-nodetype=column][data-column_type$=INTEGER] > summary > span.label::before
  {
    content: var( --icon-number-123 );
  }

  details[data-nodetype=derived][data-derivation='elements'][data-member_expression_type=UBIGINT] > summary > span.label::before,
  details[data-nodetype=derived][data-derivation='elements'][data-member_expression_type=BIGINT] > summary > span.label::before,
  details[data-nodetype=member][data-member_expression_type=UBIGINT] > summary > span.label::before,
  details[data-nodetype=member][data-member_expression_type=BIGINT] > summary > span.label::before,
  details[data-nodetype=column][data-column_type=UBIGINT] > summary > span.label::before,
  details[data-nodetype=column][data-column_type=BIGINT] > summary > span.label::before
  {
    content: var( --icon-number-64-small );
  }

  details[data-nodetype=derived][data-derivation='elements'][data-member_expression_type=UINTEGER] > summary > span.label::before,
  details[data-nodetype=derived][data-derivation='elements'][data-member_expression_type=INTEGER] > summary > span.label::before,
  details[data-nodetype=member][data-member_expression_type=UINTEGER] > summary > span.label::before,
  details[data-nodetype=member][data-member_expression_type=INTEGER] > summary > span.label::before,
  details[data-nodetype=column][data-column_type=UINTEGER] > summary > span.label::before,
  details[data-nodetype=column][data-column_type=INTEGER] > summary > span.label::before
  {
    content: var( --icon-number-32-small );
  }

  details[data-nodetype=derived][data-derivation='elements'][data-member_expression_type=USMALLINT] > summary > span.label::before,
  details[data-nodetype=derived][data-derivation='elements'][data-member_expression_type=SMALLINT] > summary > span.label::before,
  details[data-nodetype=member][data-member_expression_type=USMALLINT] > summary > span.label::before,
  details[data-nodetype=member][data-member_expression_type=SMALLINT] > summary > span.label::before,
  details[data-nodetype=column][data-column_type=USMALLINT] > summary > span.label::before,
  details[data-nodetype=column][data-column_type=SMALLINT] > summary > span.label::before
  {
    content: var( --icon-number-16-small );
  }

  details[data-nodetype=derived][data-derivation='elements'][data-member_expression_type=UTINYINT] > summary > span.label::before,
  details[data-nodetype=derived][data-derivation='elements'][data-member_expression_type=TINYINT] > summary > span.label::before,
  details[data-nodetype=member][data-member_expression_type=UTINYINT] > summary > span.label::before,
  details[data-nodetype=member][data-member_expression_type=TINYINT] > summary > span.label::before,
  details[data-nodetype=column][data-column_type=UTINYINT] > summary > span.label::before,
  details[data-nodetype=column][data-column_type=TINYINT] > summary > span.label::before
  {
    content: var( --icon-number-8-small );
  }

  details[data-nodetype=derived][data-derivation='keyset'] > summary > span.label::before {
    content: var( --icon-key );
  }

  details[data-nodetype=derived][data-derivation='valuelist'] > summary > span.label::before {
    content: var( --icon-shopping-cart );
  }

  details[data-nodetype=derived][data-derivation='entries'] > summary > span.label::before,
  details[data-nodetype=derived][data-derivation='elements'][data-member_expression_type^=STRUCT] > summary > span.label::before,
  details[data-nodetype=member][data-member_expression_type^=STRUCT] > summary > span.label::before,
  details[data-nodetype=column][data-column_type^=STRUCT] > summary > span.label::before
  {
    content: var( --icon-code-dots );
  }

  details[data-nodetype=derived][data-derivation='elements'][data-member_expression_type^=MAP] > summary > span.label::before,
  details[data-nodetype=member][data-member_expression_type^=MAP] > summary > span.label::before,
  details[data-nodetype=column][data-column_type^=MAP] > summary > span.label::before
  {
    content: var( --icon-list-letters );
  }

  details[data-nodetype=derived][data-derivation='entries'] > summary > span.label::before,
  details[data-nodetype=derived][data-derivation='elements'][data-member_expression_type$='[]'] > summary > span.label::before,
  details[data-nodetype=member][data-member_expression_type$='[]'] > summary > span.label::before,
  details[data-nodetype=column][data-column_type$='[]'] > summary > span.label::before
  {
    content: var( --icon-brackets-contain );
  }

  details[data-nodetype=member][data-member_expression_type^=DECIMAL] > summary > span.label::before,
  details[data-nodetype=member][data-member_expression_type=DOUBLE] > summary > span.label::before,
  details[data-nodetype=member][data-member_expression_type=FLOAT] > summary > span.label::before,
  details[data-nodetype=member][data-member_expression_type=REAL] > summary > span.label::before,
  details[data-nodetype=column][data-column_type^=DECIMAL] > summary > span.label::before,
  details[data-nodetype=column][data-column_type=DOUBLE] > summary > span.label::before,
  details[data-nodetype=column][data-column_type=FLOAT] > summary > span.label::before,
  details[data-nodetype=column][data-column_type=REAL] > summary > span.label::before {
    content: var( --icon-decimal );
  }

  details[data-nodetype=derived][data-derivation='UUID version'] > summary > span.label::before {
    content: var( --icon-letter-v-small );
  }

  details[data-nodetype=derived][data-derivation='UUIDv7 timestamp'] > summary > span.label::before,
  details[data-nodetype=member][data-member_expression_type^=TIMESTAMP] > summary > span.label::before,
  details[data-nodetype=column][data-column_type^=TIMESTAMP] > summary > span.label::before {
    content: var( --icon-calendar-clock );
  }

  details[data-nodetype=member][data-member_expression_type=DATE] > summary > span.label::before,
  details[data-nodetype=column][data-column_type=DATE] > summary > span.label::before {
    content: var( --icon-calendar );
  }

  details[data-nodetype=member][data-member_expression_type=TIME] > summary > span.label::before,
  details[data-nodetype=column][data-column_type=TIME] > summary > span.label::before {
    content: var( --icon-clock );
  }

  details[data-nodetype=derived][data-member_expression_type=JSON] > summary > span.label::before,
  details[data-nodetype=member][data-member_expression_type=JSON] > summary > span.label::before,
  details[data-nodetype=column][data-column_type=JSON] > summary > span.label::before {
    content: var( --icon-JSON );
  }

  details[data-nodetype=derived][data-derivation="hash"] > summary > span.label::before,
  details[data-nodetype=derived][data-derivation="md5"] > summary > span.label::before,
  details[data-nodetype=derived][data-derivation="md5 low"] > summary > span.label::before,
  details[data-nodetype=derived][data-derivation="md5 high"] > summary > span.label::before {
    content: var( --icon-number-123 );
  }


  details[data-nodetype=derived][data-derivation="md5 (hex)"] > summary > span.label::before,
  details[data-nodetype=derived][data-derivation="sha-1"] > summary > span.label::before,
  details[data-nodetype=derived][data-derivation="sha-256"] > summary > span.label::before,
  details[data-nodetype=member][data-member_expression_type=UUID] > summary > span.label::before,
  details[data-nodetype=column][data-column_type=UUID] > summary > span.label::before {
    content: var( --icon-binary );
  }

  /**
  *
  * Derivation icons
  *
  */
  details[data-nodetype=derived][data-derivation="iso-date"] > summary > span.label::before,
  details[data-nodetype=derived][data-derivation="local-date"] > summary > span.label::before {
    content: var( --icon-calendar );
  }
  details[data-nodetype=derived][data-derivation="iso-year"] > summary > span.label::before,
  details[data-nodetype=derived][data-derivation=year] > summary > span.label::before {
    content: var( --icon-letter-y );
  }

  details[data-nodetype=derived][data-derivation=quarter] > summary > span.label::before {
    content: var( --icon-letter-q );
  }

  details[data-nodetype=derived][data-derivation="month name"] > summary > span.label::before,
  details[data-nodetype=derived][data-derivation="month shortname"] > summary > span.label::before,
  details[data-nodetype=derived][data-derivation="month num"] > summary > span.label::before {
    content: var( --icon-letter-m );
  }

  details[data-nodetype=derived][data-derivation="week num"] > summary > span.label::before {
    content: var( --icon-calendar-week );
  }

  details[data-nodetype=derived][data-derivation="day of year"] > summary > span.label::before {
    content: var( --icon-letter-d );
  }

  details[data-nodetype=derived][data-derivation="day of month"] > summary > span.label::before {
    content: var( --icon-calendar-month );
  }

  details[data-nodetype=derived][data-derivation="day of week shortname"] > summary > span.label::before,
  details[data-nodetype=derived][data-derivation="day of week name"] > summary > span.label::before,
  details[data-nodetype=derived][data-derivation="iso-day of week"] > summary > span.label::before,
  details[data-nodetype=derived][data-derivation="day of week num"] > summary > span.label::before {
    content: var( --icon-letter-d-small );
  }

  details[data-nodetype=derived][data-derivation="iso-time"] > summary > span.label::before {
    content: var( --icon-clock );
  }

  details[data-nodetype=derived][data-derivation=hour] > summary > span.label::before {
    content: var( --icon-letter-h );
  }

  details[data-nodetype=derived][data-derivation=minute] > summary > span.label::before {
    content: var( --icon-letter-m-small );
  }

  details[data-nodetype=derived][data-derivation=second] > summary > span.label::before {
    content: var( --icon-letter-s );
  }
  
  details[data-nodetype=derived][data-derivation='timestamp (secs)'] > summary > span.label::before, 
  details[data-nodetype=derived][data-derivation='timestamp (millis)'] > summary > span.label::before,
  details[data-nodetype=derived][data-derivation='timestamp (micros)'] > summary > span.label::before,
  details[data-nodetype=derived][data-derivation='timestamp (nanos)'] > summary > span.label::before
  {
    content: var( --icon-stopwatch );
  }

  details[data-nodetype=derived][data-derivation=lowercase] > summary > span.label::before {
    content: var( --icon-letter-case-lower );
  }

  details[data-nodetype=derived][data-derivation=uppercase] > summary > span.label::before {
    content: var( --icon-letter-case-upper );
  }

  details[data-nodetype=derived][data-derivation=NOACCENT] > summary > span.label::before {
    content: var( --icon-letter-case );
  }

  details[data-nodetype=derived][data-derivation=NOCASE] > summary > span.label::before {
    content: var( --icon-letter-case );
  }

  details[data-nodetype=derived][data-derivation='first letter'] > summary > span.label::before {
    content: var( --icon-sort-a-z );
  }

  details[data-nodetype=derived][data-derivation='entry count'] > summary > span.label::before,
  details[data-nodetype=derived][data-derivation='unique values length'] > summary > span.label::before,
  details[data-nodetype=derived][data-derivation='length'] > summary > span.label::before {
    content: var( --icon-ruler-3 );
  }

  details[data-nodetype=derived][data-derivation='entry indices'] > summary > span.label::before,
  details[data-nodetype=derived][data-derivation='element indices'] > summary > span.label::before {
    content: var( --icon-list-numbers );
  }

  /**
  *
  * Aggregator icons
  *
  */
  details > summary > label.attributeUiAxisButton[data-axis=cells]:has( input[type=checkbox][data-aggregator=count] ):hover::before,
  details[data-nodetype=derived][data-derivation=count] > summary > span.label::before,
  details[data-nodetype=derived][data-derivation="count if true"] > summary > span.label::before,
  details[data-nodetype=derived][data-derivation="count if false"] > summary > span.label::before,
  details[data-nodetype=aggregate][data-aggregator="count if true"] > summary > span.label::before,
  details[data-nodetype=aggregate][data-aggregator="count if false"] > summary > span.label::before,
  details[data-nodetype=aggregate][data-aggregator=count] > summary > span.label::before {
    content: var( --icon-tallymarks );
  }

  details > summary > label.attributeUiAxisButton[data-axis=cells]:has( input[type=checkbox][data-aggregator="distinct count"] ):hover::before,
  details[data-nodetype=derived][data-derivation="distinct count"] > summary > span.label::before,
  details[data-nodetype=aggregate][data-aggregator="distinct count"] > summary > span.label::before {
    content: var( --icon-tallymark-4 );
  }

  details > summary > label.attributeUiAxisButton[data-axis=cells]:has( input[type=checkbox][data-aggregator=max] ):hover::before,
  details[data-nodetype=derived][data-derivation=max] > summary > span.label::before,
  details[data-nodetype=aggregate][data-aggregator=max] > summary > span.label::before {
    content: var( --icon-math-max );
  }

  details > summary > label.attributeUiAxisButton[data-axis=cells]:has( input[type=checkbox][data-aggregator=min] ):hover::before,
  details[data-nodetype=derived][data-derivation=min] > summary > span.label::before,
  details[data-nodetype=aggregate][data-aggregator=min] > summary > span.label::before {
    content: var( --icon-math-min );
  }

  details > summary > label.attributeUiAxisButton[data-axis=cells]:has( input[type=checkbox][data-aggregator=list] ):hover::before,
  details[data-nodetype=aggregate][data-aggregator=list] > summary > span.label::before {
    content: var( --icon-list );
  }

  details > summary > label.attributeUiAxisButton[data-axis=cells]:has( input[type=checkbox][data-aggregator="unique values"] ):hover::before,
  details[data-nodetype=derived][data-derivation="unique values"] > summary > span.label::before,
  details[data-nodetype=aggregate][data-aggregator="unique values"] > summary > span.label::before {
    content: var( --icon-letter-u-small );
  }

  details > summary > label.attributeUiAxisButton[data-axis=cells]:has( input[type=checkbox][data-aggregator=histogram] ):hover::before,
  details[data-nodetype=aggregate][data-aggregator=histogram] > summary > span.label::before {
    content: var( --icon-chart-bar );
  }

  details > summary > label.attributeUiAxisButton[data-axis=cells]:has( input[type=checkbox][data-aggregator=sum] ):hover::before,
  details[data-nodetype=derived][data-derivation=sum] > summary > span.label::before,
  details[data-nodetype=aggregate][data-aggregator=sum] > summary > span.label::before {
    content: var( --icon-sum );
  }

  details[data-nodetype=derived][data-derivation="sort values"] > summary > span.label::before {
    content: var( --icon-sort-ascending-letters );
  }

  details > summary > label.attributeUiAxisButton[data-axis=cells]:has( input[type=checkbox][data-aggregator=avg] ):hover::before,
  details > summary > label.attributeUiAxisButton[data-axis=cells]:has( input[type=checkbox][data-aggregator=geomean] ):hover::before,
  details[data-nodetype=derived][data-derivation=avg] > summary > span.label::before,
  details[data-nodetype=aggregate][data-aggregator=geomean] > summary > span.label::before,
  details[data-nodetype=aggregate][data-aggregator=avg] > summary > span.label::before {
    content: var( --icon-math-avg );
  }

  details > summary > label.attributeUiAxisButton[data-axis=cells]:has( input[type=checkbox][data-aggregator=max] ):hover::before,
  details > summary > label.attributeUiAxisButton[data-axis=cells]:has( input[type=checkbox][data-aggregator=median] ):hover::before,
  details[data-nodetype=derived][data-derivation=mad] > summary > span.label::before,
  details[data-nodetype=derived][data-derivation=median] > summary > span.label::before,
  details[data-nodetype=aggregate][data-aggregator=mad] > summary > span.label::before,
  details[data-nodetype=aggregate][data-aggregator=median] > summary > span.label::before {
    content: var( --icon-calculator );
  }

  details > summary > label.attributeUiAxisButton[data-axis=cells]:has( input[type=checkbox][data-aggregator=mode] ):hover::before,
  details[data-nodetype=derived][data-derivation=mode] > summary > span.label::before,
  details[data-nodetype=aggregate][data-aggregator=mode] > summary > span.label::before {
    content: var( --icon-calculator );
  }

  details > summary > label.attributeUiAxisButton[data-axis=cells]:has( input[type=checkbox][data-aggregator=stdev] ):hover::before,
  details[data-nodetype=derived][data-derivation=stdev] > summary > span.label::before,
  details[data-nodetype=aggregate][data-aggregator=stdev] > summary > span.label::before {
    content: var( --icon-calculator );
  }

  details > summary > label.attributeUiAxisButton[data-axis=cells]:has( input[type=checkbox][data-aggregator=variance] ):hover::before,
  details[data-nodetype=derived][data-derivation=variance] > summary > span.label::before,
  details[data-nodetype=aggregate][data-aggregator=variance] > summary > span.label::before {
    content: var( --icon-calculator );
  }

  details > summary > label.attributeUiAxisButton[data-axis=cells]:has( input[type=checkbox][data-aggregator=entropy] ):hover::before,
  details[data-nodetype=derived][data-derivation=entropy] > summary > span.label::before,
  details[data-nodetype=aggregate][data-aggregator=entropy] > summary > span.label::before {
    content: var( --icon-calculator );
  }

  details > summary > label.attributeUiAxisButton[data-axis=cells]:has( input[type=checkbox][data-aggregator=kurtosis] ):hover::before,
  details[data-nodetype=derived][data-derivation=kurtosis] > summary > span.label::before,
  details[data-nodetype=aggregate][data-aggregator=kurtosis] > summary > span.label::before {
    content: var( --icon-calculator );
  }

  details > summary > label.attributeUiAxisButton[data-axis=cells]:has( input[type=checkbox][data-aggregator=skewness] ):hover::before,
  details[data-nodetype=derived][data-derivation=skewness] > summary > span.label::before,
  details[data-nodetype=aggregate][data-aggregator=skewness] > summary > span.label::before {
    content: var( --icon-calculator );
  }

  details > summary > label.attributeUiAxisButton[data-axis=cells]:has( input[type=checkbox][data-aggregator=and] ):hover::before,
  details[data-nodetype=derived][data-derivation=and] > summary > span.label::before,
  details[data-nodetype=aggregate][data-aggregator=and] > summary > span.label::before {
    content: var( --icon-logical-and );
  }

  details > summary > label.attributeUiAxisButton[data-axis=cells]:has( input[type=checkbox][data-aggregator=or] ):hover::before,
  details[data-nodetype=derived][data-derivation=or] > summary > span.label::before,
  details[data-nodetype=aggregate][data-aggregator=or] > summary > span.label::before {
    content: var( --icon-logical-or );
  }

  /**
  *
  * https://github.com/rpbouman/huey/issues/223: highlight labels of attribute ui nodes that somehow contribute to the query.
  *
  */
  details > summary:has( > label > input[type=checkbox]:checked ) > span.label,
  details:has( details > summary > label > input[type=checkbox]:checked ) > summary > span.label {
    font-weight: bold;
  }

  details > summary:has( > label > input[type=checkbox]:checked ) > span.label:before,
  details:has( details > summary > label > input[type=checkbox]:checked ) > summary > span.label:before {
    color: var( --huey-icon-color-highlight );
    font-weight: normal;
  }

}