/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

:root {
  --qfb-padding: 3px;
}

:root[uidensity="compact"] {
  --qfb-padding: 0 3px;
}

#quick-filter-bar {
  --button-margin: 3px;
  background-color: var(--layout-background-1);
  padding: var(--qfb-padding);
  border-bottom: 1px solid
    var(--sidebar-border-color, var(--tree-view-header-border-color));
}

:root[lwt-tree] #quick-filter-bar:-moz-lwtheme {
  background-color: color-mix(in srgb, var(--toolbar-bgcolor) 50%, transparent);
  color: var(--lwt-text-color);
}

#qfb-sticky {
  background-image: var(--icon-pin);
  height: auto;
}

#qfb-unread {
  background-image: var(--icon-unread);
}

#qfb-starred {
  background-image: var(--icon-star);
}

#qfb-inaddrbook {
  background-image: var(--icon-address-book);
}

#qfb-tags {
  background-image: var(--icon-tag);
}

#qfb-attachment {
  background-image: var(--icon-attachment);
}

#qfd-dropdown {
  background-image: var(--icon-filter);
  display: none;
}

#qfb-results-label {
  margin: 3px;
  text-align: end;
  align-self: center;
}

#qfb-qs-textbox {
  flex: 1;
  height: unset;
  margin: 3px;
  padding-block: 3px;
  max-width: 450px;
}

@media (-moz-platform: windows-win7) {
  #qfb-qs-textbox {
    margin-block: 4px;
  }
}

@container threadPane (max-width: 499px) {
  #qfb-qs-textbox {
    min-width: 200px;
  }

  #qfd-dropdown {
    display: inline-block;
    min-width: 22px;
  }

  .button-group.quickFilterButtons{
    display: none;
  }
}

#quickFilterBarTagsContainer:not([hidden]) {
  display: flex;
  align-items: center;
  margin-inline-start: -3px;
  flex-wrap: wrap;
}

#qfb-boolean-mode {
  line-height: unset;
  min-height: 0;
  margin: 3px;
  padding-block: 3px;
}

.qfb-tag-button {
  --tag-color: currentColor;
  --tag-contrast-color: currentColor;
  --button-padding: 3px;
  --button-margin: 3px;
  background-color: transparent;
  color: var(--tag-color);
  border-color: var(--tag-color);
  border-radius: 100px;
  padding-inline: 9px;
  min-height: 0;
  min-width: 0;
  line-height: 1;
}

.qfb-tag-button:enabled:hover:not([aria-pressed="true"]) {
  color: var(--tag-color);
  background-color: color-mix(in srgb, var(--tag-color) 20%, transparent);
  border-color: var(--tag-color);
}

.qfb-tag-button[aria-pressed="true"]:enabled:hover {
  color: var(--tag-contrast-color);
  background-color: color-mix(in srgb, var(--tag-color) 70%, white);
  border-color: color-mix(in srgb, var(--tag-color) 60%, black);
}

.qfb-tag-button[aria-pressed="true"] {
  --tag-color: currentColor;
  color: var(--tag-contrast-color);
  background-color: var(--tag-color);
  border-color: color-mix(in srgb, var(--tag-color) 60%, black);
  border-radius: 100px;
  box-shadow: none;
}

.qfb-tag-button:enabled:hover:active {
  background-color: color-mix(in srgb, var(--tag-color) 80%, black);
  border-color: color-mix(in srgb, var(--tag-color) 60%, black);
}

.qfb-tag-button[inverted] {
  background-color: transparent;
  color: var(--tag-color);
  border-color: var(--tag-color);
  text-decoration: line-through;
}

.qfb-tag-button[inverted]:enabled:hover {
  color: var(--tag-color);
  background-color: color-mix(in srgb, var(--tag-color) 20%, transparent);
  border-color: var(--tag-color);
}

#quickFilterBarContainer {
  display: flex;
  flex-wrap: wrap;
}

#quickFilterBarSecondFilters {
  display: flex;
  align-items: center;
  padding-inline-start: var(--button-margin);
  flex-wrap: wrap;
  column-gap: 12px;
}

#quick-filter-bar-filter-text-bar:not([hidden]) {
  --button-padding: 3px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

#quick-filter-bar-filter-text-bar > .button-group > .button {
  min-width: 0;
}

#qfb-upsell-line-one {
  font-weight: bold;
}

/*#threadTree[filterActive] {
  background-repeat: no-repeat;
  background-position: center;
  -moz-context-properties: fill, fill-opacity;
  fill: currentColor;
  fill-opacity: .3;
}

#threadTree[filterActive="searching"] {
  background-image: url("chrome://messenger/skin/icons/search-spinner.svg");
}*/