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

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

dialog#filterDialog[aria-busy=true] #filterDialogSpinner {
  display: block;
}

dialog#filterDialog[aria-busy=true] {
  > 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 ); 
    }

  }
}

dialog#filterDialog {
  resize: both;
  padding: 2px 0px 0px 2px;
  min-height: 280px;
  min-width: 300px;
  width: 300px;
  
  > 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=toolbar] {
      padding: unset;
      height: unset;
      margin-bottom: 4px;

      > 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);  
        /* square */
        content: "\eb2c";
      }

      > label:has( > input[type=checkbox]:checked )::after {
        /* checkbox */
        content: "\eba6";
        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: "\fa02"
          }

        }

        > section {
          > select#filterPicklist {
            box-shadow: 0px 0px 0px transparent;
            width: calc( 100% - 10px );
            height: 100%;
            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 );
          height: 100%;
        }
      }

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

    }

    > footer {

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

    }

  }

  > section: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 );
  }
  
  > section: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 );
  }
  
  > section: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 );
  }  
  
  > section: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: 5.5em;
    }  
  }
}

dialog#filterDialog: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 );
}

dialog#filterDialog: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 ) ")";
}

dialog#filterDialog: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";
}

/* panel with the toFilterValueList is hidden by default, but visible for between/notbetween operators. */
dialog#filterDialog:has( > header > select#filterType > option[value=between]:checked ) > section > section > div:has( label[for=toFilterValueList] ), 
dialog#filterDialog:has( > header > select#filterType > option[value=notbetween]:checked ) > section > section > div:has( label[for=toFilterValueList] ) {
  display: flex;
  flex-grow: 1;
}

dialog#filterDialog:has( > header > select#filterType > option[value=between]:checked ) > section > section > div:has( label[for=toFilterValueList] ) > select#toFilterValueList, 
dialog#filterDialog:has( > header > select#filterType > option[value=notbetween]:checked ) > section > section > div:has( label[for=toFilterValueList] ) > select#toFilterValueList {
  width: calc(100% - 10px);
  min-width: 75px;
}

dialog#filterDialog:has( > header > select#filterType > option[value=between]:checked ) > section > section > div:has( label[for=filterValueList] ),
dialog#filterDialog:has( > header > select#filterType > option[value=notbetween]:checked ) > section > section > div:has( label[for=filterValueList] ){
  flex-grow: 0;
  max-width: calc( 100% - 86px );
  z-index: 1;
}

dialog#filterDialog:has( > header > select#filterType > option[value=between]:checked ) > section > section > div:has( label[for=filterValueList] ) > #filterValueList,
dialog#filterDialog:has( > header > select#filterType > option[value=notbetween]:checked ) > section > section > div:has( label[for=filterValueList] ) > #filterValueList {
  min-width: 130px;
}


dialog#filterDialog #filterValueList,
dialog#filterDialog #toFilterValueList {
  padding-top: .5em;
  overflow: auto;
}

dialog#filterDialog:has( > header > select#filterType > option[value=between]:checked ) #filterValueList,
dialog#filterDialog:has( > header > select#filterType > option[value=notbetween]:checked ) #filterValueList {
  resize: horizontal;
  overflow-y: hidden;
}

#toFilterValueList{
  border-radius: 0px;
}

#filterValueList, #toFilterValueList {
}

/* 
  Operators LIKE and NOT LIKE are hidden by default
*/
dialog#filterDialog > header[role=toolbar] > select#filterType > option[value=like],
dialog#filterDialog > header[role=toolbar] > select#filterType > option[value=notlike] {
  display: none;
}

/* 
  Operators LIKE and NOT LIKE are available when the filter item data type is VARCHAR
*/
dialog#filterDialog[data-query-model-item-datatype='VARCHAR'] > header[role=toolbar] > select#filterType > option[value=like],
dialog#filterDialog[data-query-model-item-datatype='VARCHAR'] > header[role=toolbar] > select#filterType > option[value=notlike] {
  display: block;
}

/*
  LIST/ARRAY operators hasany, hasall, nothasany, nothasall are hidden by default
*/
dialog#filterDialog > header[role=toolbar] > select#filterType > option[value=hasany],
dialog#filterDialog > header[role=toolbar] > select#filterType > option[value=hasall],
dialog#filterDialog > header[role=toolbar] > select#filterType > option[value=nothasany],
dialog#filterDialog > header[role=toolbar] > select#filterType > option[value=nothasall] {
  display: none;
}

/*
  LIST/ARRAY operators hasany, hasall, nothasany, nothasall are available when the filter axis item data type is an array type. 
*/
dialog#filterDialog[data-query-model-item-datatype$='[]'] > header[role=toolbar] > select#filterType > option[value=hasany],
dialog#filterDialog[data-query-model-item-datatype$='[]'] > header[role=toolbar] > select#filterType > option[value=hasall],
dialog#filterDialog[data-query-model-item-datatype$='[]'] > header[role=toolbar] > select#filterType > option[value=nothasany],
dialog#filterDialog[data-query-model-item-datatype$='[]'] > header[role=toolbar] > select#filterType > option[value=nothasall] {
  display: block;
}