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

        > label#quickQueryMenuLabel {
          anchor-name: --quick-query-menu-label;
          
          > menu#quickQueryMenu {

            position: fixed;
            left: anchor(--quick-query-menu-label left);
            top: calc( anchor(--quick-query-menu-label bottom) + 4px );

            > li {

              > label[for=quickQueryClearAllButton]::before {
                content: var( --icon-trash );
                
              }
              
              /* "Clear All" quick query is not available by default */
              &:has( > label[for=quickQueryClearAllButton] ) {
                border-bottom-style: solid;
                display: none;
              }
            
              > label[for=quickQueryFlipAxesButton]::before{
                content: var( --icon-switch );
              }

              &:has( > label[for=quickQueryFlipAxesButton] ) {
                /* by default, the flip axes quick query option is hidden*/
                display: none;
              }

              > label[for=quickQueryCellHeadersOnColumnsButton]::before {
                content: var( --icon-table-row );
              }

              > label[for=quickQueryCellHeadersOnRowsButton]::before {
                content: var( --icon-table-column );
              }

              > label[for=quickQueryColumnStatisticsButton]::before {
                content: var( --icon-calculator );
              }

              &:has( > label[for=quickQueryColumnStatisticsButton] ) {
                border-top-style: solid;
              }

              > label[for=quickQueryDataPreviewButton]::before {
                content: var( --icon-article );
              }

              > label[for=quickQueryDestructuredDataPreviewButton]::before {
                content: var( --icon-code-dots );
              }

              /* "Destructured Data Preview" quick query is not availabel by default */
              &:has( > label[for=quickQueryDestructuredDataPreviewButton] ) {
                display: none;
              }
            }

          }
        }

        /**
        * If there are no datasources, this menu should be hidden from the top toolbar
        */
        &:has( #currentDatasource:empty ) {
          > label#quickQueryMenuLabel {
            display: none;
          }
        }

      }
    }
    
    /* Quick Query menu item available when the Query Editor is available. */
    &:has( 
      > main > #workarea > #queryUi > section > ol > li
    ) > main > menu[role=toolbar] > label[role=menuitem][for=quickQueryMenuButton] > menu#quickQueryMenu > li:has(
      > label[for=quickQueryClearAllButton] 
    ) {
      display: list-item;
    }
    
    /* if the attribute ui has at least one item of the STRUCT, MAP, or Array type, then display the destructured data preview item */
    &:has( 
      #attributeUi > details:is( 
        [data-column_type^=STRUCT], [data-column_type^=MAP], [data-column_type$="]"] 
      ) 
    ) > main > menu[role=toolbar] > label[role=menuitem][for=quickQueryMenuButton] > menu#quickQueryMenu > li:has( 
      > label[for=quickQueryDestructuredDataPreviewButton] 
    ) {
      display: list-item;
    }

    /* if there are no cells, then the options to place the cells headers on the rows or columns axis are hidden*/
    &:has( 
      > main > #workarea > #queryUi > section[data-axis=cells] > ol:empty 
    ) > main > menu[role=toolbar] > label[role=menuitem][for=quickQueryMenuButton] > menu#quickQueryMenu {
      li:has( > label:is([for=quickQueryCellHeadersOnColumnsButton], [for=quickQueryCellHeadersOnRowsButton]) ) {
        display: none;
      }
    }
    
    /* if the query ui has the cell headers on the columns, then quick query menu option to place the cell headers on the columns is hidden */
    &:has( 
      #queryUi[data-cellheadersaxis=columns] 
    ) > main > menu[role=toolbar] > label[role=menuitem][for=quickQueryMenuButton] > menu#quickQueryMenu > li:has( 
      > label[for=quickQueryCellHeadersOnColumnsButton] 
    ) {
      display: none
    }
    
    /* if the query ui has the cell headers on the rows, then quick query menu option to place the cell headers on the rows is hidden */
    &:has( 
      #queryUi[data-cellheadersaxis=rows]
    ) > main > menu[role=toolbar] > label[role=menuitem][for=quickQueryMenuButton] > menu#quickQueryMenu > li:has( 
      > label[for=quickQueryCellHeadersOnRowsButton] 
    ) {
      display: none;
    }

    /* if there are items on either the rows and/or the columns axes, then the flip axes query query option is displayed */
    &:has( 
      #queryUi > section:is( 
        [data-axis=rows],[data-axis=columns] 
      ) > ol > li 
    ) > main > menu[role=toolbar] > label[role=menuitem][for="quickQueryMenuButton" ] > menu#quickQueryMenu > li:has( 
      > label[for=quickQueryFlipAxesButton] 
    ) {
      display: list-item;
    }

  }
}