dialog#filterDialog {
  resize: both;
  padding: 2px 0px 0px 2px;
  min-height: 432px;
  min-width: 350px;
  height: 432px;
  width: 350px;

  #filterDialogSpinner {
    position:absolute;
    left: 50%;
    top: 250px;
    zoom: 33%;
  }

  &[aria-busy=false] #filterDialogSpinner {
    display: none;
  }

  &[aria-busy=true] {

    #filterDialogSpinner {
      display: block;
    }

    > section > header > section {

      > header > search#filterSearch  {
        color: transparent;
        text-shadow: 0 0 5px rgba(0,0,0,0.5);
        background-color: var( --huey-medium-background-color );
      }

      > section > select#filterPicklist {
        color: transparent;
        text-shadow: 0 0 5px rgba(0,0,0,0.5);
        overflow: auto;
        background-color: var( --huey-medium-background-color );
      }

    }
  }

  > header[role=toolbar] {
    padding-left: .5em;
  }

  section {
    display:flex;
    flex-direction: column;

    > section {
      flex-grow: 1;
    }

    > header {
      flex-grow: 0;
    }

    > footer {
      flex-grow: 0;
      padding-top: 4px;
      padding-bottom: 2px;
    }

    > footer[role=toolbar]:has( > button ){
      text-align: center;
    }

    > footer[role=status] {
      font-size: smaller;
    }

  }

  > section {
    flex-grow: .75;
    padding: 2px;

    menu[role=menubar] {
      padding: unset;
      height: unset;
      margin-top: 0px;
      margin-left: 4px;
      margin-bottom: 4px;

      > li[role=menuitem],
      > li[role=menuitemcheckbox] {

        display: inline-block;

        > label:has( > input[type=checkbox] ) > span::after{
          content: ":"
        }

        > label > input[type=checkbox] {
          visibility: hidden;
          display: none;
        }

        > label:has( > input[type=checkbox] )::after {
          font-family: var( --huey-icon-font-family );
          color: var(--huey-icon-color-subtle);
          content: var( --icon-square );
        }

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

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

    > header {
      white-space: nowrap;

      > section {

        > header {

          > input[type=search]#filterSearch {
            border-color: var( --huey-light-border-color );
            width: calc( 100% - 40px );
            position:relative;
            height: 24px;
            top: -3px;
            padding-left: .5em;
          }

          > button#addFilterValueButton::before {
            font-family: var( --huey-icon-font-family );
            font-size: var( --huey-icon-medium );
            content: var( --icon-filter-plus );
          }

        }

        > section {
          > select#filterPicklist {
            box-shadow: 0px 0px 0px transparent;
            width: calc( 100% - 10px );
            height: calc( 100% );
            /*
              https://github.com/rpbouman/huey/issues/566
              ensure minheight is listsize (4) * height of option (ca 20px;
            */
            min-height: 80px;
            overflow-x: auto;
            resize: vertical;

            > optgroup > option[data-next-page-loader=true] {
              color: var( --huey-placeholder-color );
              font-style: italic;
            }
          }

        }
      }

    }

    > section {
      flex-grow: 1.25;
      margin-top: 4px;
      display: flex;
      flex-direction: row;

      > label > select {
        width: 100%;
        height: calc( 100% - 20px);
      }

      > div {
        flex-grow: 1;
        display: flex;
        flex-direction: column;

        > label {
          flex-grow: 0;
          margin-bottom: 4px;
        }

        > select {
          flex-grow: 1;
          width: calc( 100% - 10px );
          /*
            https://github.com/rpbouman/huey/issues/566
            ensure minheight is listsize (4) * height of option (ca 20px;
          */
          min-height: 80px;
        }
      }

      > div:has( > label[for=toFilterValueList] ) {
        display: none;
      }

    }

    > footer {

      > button#filterDialogClearSelectedButton,
      > button#filterDialogClearButton {
        width: 9em;
      }

    }

    &:not( section > div > select > option:checked ) > footer[role=toolbar] > button#filterDialogClearSelectedButton {
      pointer-events: none;
      color: var( --huey-placeholder-color );
      background-color: var( --huey-medium-background-color );
    }

    &:has( > section > div > select > option:checked ) > footer[role=toolbar] > button#filterDialogClearSelectedButton {
      pointer-events: auto;
      color: var( --huey-foreground-color );
      background-color: var( --huey-dark-background-color );
    }

    &:not( section > div > select > option ) > footer[role=toolbar] > button#filterDialogClearButton {
      pointer-events: none;
      color: var( --huey-placeholder-color );
      background-color: var( --huey-medium-background-color );
    }

    &:has( > section > div > select > option ) > footer[role=toolbar] > button#filterDialogClearButton {
      pointer-events: auto;
      color: var( --huey-foreground-color );
      background-color: var( --huey-dark-background-color );
    }

  }

  > footer {

    margin-top: 2px;
    margin-bottom: 0px;
    padding: 4px 4px 0px 4px;
    height: 30px;

    > button {
      width: 6em;
    }
  }
  
  &:is(
    [data-query-model-item-datatype^="DECIMAL"],
    [data-query-model-item-datatype="DOUBLE"],
    [data-query-model-item-datatype$="INT"],
    [data-query-model-item-datatype="INTEGER"]
  ) select[multiple] option {
    padding-right: 1em;
    text-align: right;
    font-family: var( --huey-mono-font-family );
  }

  &:not(
    [data-query-model-item-datatype^="DECIMAL"],
    [data-query-model-item-datatype="DOUBLE"],
    [data-query-model-item-datatype$="INT"],
    [data-query-model-item-datatype="INTEGER"]
  ) > section:has(
    > menu[role=toolbar] > label[for=filterDialogShowRawCheckbox] > input#filterDialogShowRawCheckbox[type=checkbox]:checked
  ) select[multiple=true] option::after {
    content: "\00a0\00a0(" attr( value ) ")";
  }
  
  &:is(
    [data-query-model-item-datatype^="DECIMAL"],
    [data-query-model-item-datatype="DOUBLE"],
    [data-query-model-item-datatype$="INT"],
    [data-query-model-item-datatype="INTEGER"]
  ) > section:has(
    > menu[role=toolbar] > label[for=filterDialogShowRawCheckbox] > input#filterDialogShowRawCheckbox[type=checkbox]:checked
  ) select[multiple=true] option::before {
    content: "(" attr( value ) ")\00a0\00a0";
  }

  &:has( 
    > header > select#filterType > option:is( 
      [value=between], [value=notbetween] 
    ):checked 
  ) {
    
    > section {
      
      > section {

        > div {
          > select#filterValueList,
          > select#toFilterValueList {
            padding-top: .5em;
            overflow: auto;
          }
        }
        
        > div:has( label[for=filterValueList] ){
          flex-grow: 0;
          max-width: calc( 100% - 86px );
          z-index: 1;
          
          > select#filterValueList {
            min-width: 130px;
            resize: horizontal;
            overflow-y: hidden;
          }
        }
        
        > div:has( label[for=toFilterValueList] ) {
          display: flex;
          flex-grow: 1;
          
          > select#toFilterValueList {
            width: calc(100% - 10px);
            min-width: 75px;
            border-radius: 0px;
          }
        }
        
      }
      
    }
  }

  /*
    If the data type  is not VARCHAR, then operator types LIKE and NOT LIKE aren't available.
  */
  &:not( 
    [data-query-model-item-datatype='VARCHAR'],
    [data-query-model-item-datatype='BLOB'],
    [data-query-model-item-datatype='ENUM']
  ) > header[role=toolbar] > select#filterType > option:is( 
    [value=like], [value=notlike] 
  ){
    display: none;
  }

  /*
    LIST/ARRAY operators hasany, hasall, nothasany, nothasall are hidden by default
  */
  &:not( 
    [data-query-model-item-datatype$=']'] 
  ) > header[role=toolbar] > select#filterType > option:is(
    [value=hasany],
    [value=hasall],
    [value=nothasany],
    [value=nothasall]
  ){
    display: none;
  }

}