/**
* 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]:not( 
    [data-derivation=elements], 
    [data-derivation=entries] 
  ) > 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;
        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=rows] {
        right: 90px;
      }
      
      > .attributeUiAxisButton[data-axis=rows]::before {
        /* table-column */
        /*
          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: "\faff";
      }

      > .attributeUiAxisButton[data-axis=columns] {
        right: 60px;
      }
      
      > .attributeUiAxisButton[data-axis=columns]::before {
        /* table-row */
        /*
          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: "\fb00";
      }

      > .attributeUiAxisButton[data-axis=cells] {
        right: 30px;
      }
      
      > .attributeUiAxisButton[data-axis=cells]::before {
        /* layout grid */
        content: "\edba";
      }
      
      /* 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 {
        /* filter-plus */
        /* content: "\fa02"; */
        /* filter */
        content: "\eaa5";
      }

      > .attributeUiAxisButton[data-axis=filters]:has( > input[type=checkbox]:checked )::before {
        /* filter-x */
        /* content: "\fa04"; */
        /* filter-off */
        content: "\ed2c";
      }

    }

    > 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 {
      /* folder */
      content: "\eaad";
    }

    [data-nodetype=folder][open] > summary > span.label::before {
      /* folder-open */
      content: "\faf7";
    }
    
  }

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

  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 {
    /* txt */
    content: "\f3b1";
  }

  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 {
    /* square check */
    content: "\eb28";
  }

  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
  {
    /* 123 */
    content: "\f554";
  }

  details[data-nodetype=derived][data-derivation='keyset'] > summary > span.label::before {
    /* key */
    content: "\eac7";
  }

  details[data-nodetype=derived][data-derivation='valuelist'] > summary > span.label::before {
    /* shopping cart */
    content: "\eb25";
  }

  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
  {
    /* code-dots */
    content: "\f61a";
  }

  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
  {
    /* list-letters */
    content: "\fc47";
  }

  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
  {
    /* code-dots */
    content: "\f1e5";
  }

  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 {
    /* decimal */
    content: "\fa26";
  }

  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 {
    /* calendar-clock */
    content: "\fd2e";
  }

  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 {
    /* calendar */
    content: "\ea53";
  }

  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 {
    /* clock */
    content: "\ea70";
  }

  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 {
    /* JSON */
    content: "\f7b2";
  }

  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 {
    /* IconNumber123 */
    content: "\f554";
  }


  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 {
    /* binary */
    content: "\ee08";
  }

  /**
  *
  * 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 {
    /* calendar */
    content: "\ea53";
  }
  details[data-nodetype=derived][data-derivation="iso-year"] > summary > span.label::before,
  details[data-nodetype=derived][data-derivation=year] > summary > span.label::before {
    /* letter-y */
    content: "\ec68";
  }

  details[data-nodetype=derived][data-derivation=quarter] > summary > span.label::before {
    /* letter q */
    content: "\ec60";
  }

  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 {
    /* letter m */
    content: "\ec5c";
  }

  details[data-nodetype=derived][data-derivation="week num"] > summary > span.label::before {
    /* calendar-week */
    content: "\fd30";
  }

  details[data-nodetype=derived][data-derivation="day of year"] > summary > span.label::before {
    /* letter-d */
    content: "\ec53";
  }

  details[data-nodetype=derived][data-derivation="day of month"] > summary > span.label::before {
    /* calendar-month */
    content: "\fd2f";
  }

  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 {
    /* letter-d-small */
    content: "\fcca";
  }

  details[data-nodetype=derived][data-derivation="iso-time"] > summary > span.label::before {
    /* clock */
    content: "\ea70";
  }

  details[data-nodetype=derived][data-derivation=hour] > summary > span.label::before {
    /* letter-h */
    content: "\ec57";
  }

  details[data-nodetype=derived][data-derivation=minute] > summary > span.label::before {
    /* letter-m-small */
    content: "\fcd3";
  }

  details[data-nodetype=derived][data-derivation=second] > summary > span.label::before {
    /* letter-s */
    content: "\ec62";
  }

  details[data-nodetype=derived][data-derivation=lowercase] > summary > span.label::before {
    /* letter-case-lower */
    content: "\eea2";
  }

  details[data-nodetype=derived][data-derivation=uppercase] > summary > span.label::before {
    /* letter-case-upper */
    content: "\eea4";
  }

  details[data-nodetype=derived][data-derivation=NOACCENT] > summary > span.label::before {
    /* letter-case */
    content: "\eea5";
  }

  details[data-nodetype=derived][data-derivation=NOCASE] > summary > span.label::before {
    /* letter-case */
    content: "\eea5";
  }

  details[data-nodetype=derived][data-derivation='first letter'] > summary > span.label::before {
    /* sort-a-z */
    content: "\f54f";
  }

  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 {
    /* ruler-3 */
    content: "\f290";
  }

  details[data-nodetype=derived][data-derivation='entry indices'] > summary > span.label::before,
  details[data-nodetype=derived][data-derivation='element indices'] > summary > span.label::before {
    /* list-numbers */
    content: "\ef11";
  }

  /**
  *
  * 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 {
    /* tallymarks */
    content: "\ec4a";
  }

  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 {
    /* tallymark-4 */
    content: "\ec49";
  }

  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 {
    /* math-max */
    content: "\f0f5";
  }

  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 {
    /* math-min */
    content: "\f0f6";
  }

  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 {
    /* list */
    content: "\eb6b";
  }

  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 {
    /* letter-u-small*/
    content: "\fcdb";
  }

  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 {
    /* chart-bar */
    content: "\ea59";
  }

  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 {
    /* sum */
    content: "\eb73";
  }

  details[data-nodetype=derived][data-derivation="sort values"] > summary > span.label::before {
    /* sort-ascending-letters*/
    content: "\ef18";
  }

  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 {
    /* math-avg */
    content: "\f0f4";
  }

  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 {
    /* calculator */
    content: "\eb80";
  }

  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 {
    /* calculator */
    content: "\eb80";
  }

  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 {
    /* calculator */
    content: "\eb80";
  }

  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 {
    /* calculator */
    content: "\eb80";
  }

  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 {
    /* calculator */
    content: "\eb80";
  }

  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 {
    /* calculator */
    content: "\eb80";
  }

  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 {
    /* calculator */
    content: "\eb80";
  }

  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 {
    /* logical-and */
    content: "\f240";
  }

  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 {
    /* logical-or */
    content: "\f245";
  }

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

}