/* EDS-COMPONENT: FilterMenu
   Canonical FilterMenuSummary, SortMenuSummary and PopoverPanel content. */

.eds-body [data-ui-component="FilterMenuSummary"],
.eds-body [data-ui-component="SortMenuSummary"] {
  box-sizing: border-box !important;
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  place-items: center !important;
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  margin: 0 !important;
  border: 1px solid var(--eds-line) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .9) !important;
  padding: 0 !important;
  box-shadow: none !important;
  color: var(--eds-muted) !important;
  line-height: 1 !important;
  list-style: none !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

.eds-body [data-ui-component="FilterMenuSummary"]::-webkit-details-marker,
.eds-body [data-ui-component="SortMenuSummary"]::-webkit-details-marker {
  display: none !important;
}

.eds-body [data-ui-component="FilterMenu"].is-filtered > [data-ui-component="FilterMenuSummary"],
.eds-body [data-ui-component="SortMenu"].is-filtered > [data-ui-component="SortMenuSummary"] {
  border-color: rgba(0, 122, 255, .34) !important;
  background: rgba(0, 122, 255, .09) !important;
  color: var(--eds-accent) !important;
  box-shadow: inset 0 0 0 1px rgba(0, 122, 255, .08) !important;
}

.eds-body [data-ui-component="FilterMenu"].is-filtered > [data-ui-component="FilterMenuSummary"]::after,
.eds-body [data-ui-component="SortMenu"].is-filtered > [data-ui-component="SortMenuSummary"]::after {
  content: "";
  position: absolute;
  top: 7px;
  right: 7px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--eds-accent);
}

.eds-body [data-ui-component="FilterMenuSummary"] > span:not(.filter-sliders-icon),
.eds-body [data-ui-component="SortMenuSummary"] > span:not(.sort-arrow-icon) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

.eds-body [data-ui-component="FilterMenuSummary"] .filter-sliders-icon,
.eds-body [data-ui-component="SortMenuSummary"] .sort-arrow-icon {
  position: static !important;
  display: block !important;
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  margin: 0 !important;
  color: currentColor !important;
  background: currentColor !important;
  transform: none !important;
}

.eds-body [data-ui-component="FilterMenuSummary"] .filter-sliders-icon {
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M10%2020a1%201%200%200%200%20.553.895l2%201A1%201%200%200%200%2014%2021v-7a2%202%200%200%201%20.517-1.341L21.74%204.67A1%201%200%200%200%2021%203H3a1%201%200%200%200-.742%201.67l7.225%207.989A2%202%200%200%201%2010%2014z%27%2F%3E%3C%2Fsvg%3E") center / 18px 18px no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M10%2020a1%201%200%200%200%20.553.895l2%201A1%201%200%200%200%2014%2021v-7a2%202%200%200%201%20.517-1.341L21.74%204.67A1%201%200%200%200%2021%203H3a1%201%200%200%200-.742%201.67l7.225%207.989A2%202%200%200%201%2010%2014z%27%2F%3E%3C%2Fsvg%3E") center / 18px 18px no-repeat !important;
}

.eds-body [data-ui-component="SortMenuSummary"] .sort-arrow-icon {
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m21%2016-4%204-4-4%27%2F%3E%3Cpath%20d%3D%27M17%2020V4%27%2F%3E%3Cpath%20d%3D%27m3%208%204-4%204%204%27%2F%3E%3Cpath%20d%3D%27M7%204v16%27%2F%3E%3C%2Fsvg%3E") center / 18px 18px no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27m21%2016-4%204-4-4%27%2F%3E%3Cpath%20d%3D%27M17%2020V4%27%2F%3E%3Cpath%20d%3D%27m3%208%204-4%204%204%27%2F%3E%3Cpath%20d%3D%27M7%204v16%27%2F%3E%3C%2Fsvg%3E") center / 18px 18px no-repeat !important;
}

.eds-body [data-ui-component="FilterMenuSummary"] .filter-sliders-icon::before,
.eds-body [data-ui-component="FilterMenuSummary"] .filter-sliders-icon::after,
.eds-body [data-ui-component="SortMenuSummary"] .sort-arrow-icon::before,
.eds-body [data-ui-component="SortMenuSummary"] .sort-arrow-icon::after {
  content: none !important;
  display: none !important;
}

.eds-body [data-ui-component="PopoverPanel"] .filter-menu-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-height: 28px !important;
  margin-bottom: 6px !important;
}

.eds-body [data-ui-component="PopoverPanel"] .filter-menu-head strong {
  font-size: 13px !important;
  font-weight: 600 !important;
}

.eds-body [data-ui-component="PopoverPanel"] .filter-menu-head a,
.eds-body [data-ui-component="PopoverPanel"] .filter-reset-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  min-height: 24px !important;
  border: 1px solid rgba(60, 60, 67, .1) !important;
  border-radius: 999px !important;
  background: rgba(242, 242, 247, .66) !important;
  padding: 0 9px !important;
  color: var(--eds-muted) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  text-decoration: none !important;
}

.eds-body [data-ui-component="PopoverPanel"] .filter-menu-head a:hover,
.eds-body [data-ui-component="PopoverPanel"] .filter-menu-head a:focus-visible,
.eds-body [data-ui-component="PopoverPanel"] .filter-reset-button:hover,
.eds-body [data-ui-component="PopoverPanel"] .filter-reset-button:focus-visible {
  border-color: rgba(0, 122, 255, .18) !important;
  background: rgba(0, 122, 255, .07) !important;
  color: var(--eds-accent) !important;
  outline: none !important;
}

.eds-body [data-ui-component="PopoverPanel"] .filter-group {
  gap: 7px !important;
  padding: 8px 0 !important;
  min-width: 0 !important;
}

.eds-body [data-ui-component="PopoverPanel"] .filter-group-title {
  color: var(--eds-muted) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}

.eds-body [data-ui-component="PopoverPanel"] .filter-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
}

.eds-body [data-ui-component="PopoverPanel"] .tab,
.eds-body [data-ui-component="PopoverPanel"] .filter-menu-form select,
.eds-body [data-ui-component="PopoverPanel"] .filter-menu-form .eds-button {
  box-sizing: border-box !important;
  min-height: 30px !important;
  height: 30px !important;
  border-radius: 10px !important;
  padding: 0 10px !important;
  max-width: 100% !important;
  overflow: hidden !important;
  color: inherit;
  font-size: 12px !important;
  line-height: 30px !important;
  text-decoration: none !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.eds-body [data-ui-component="PopoverPanel"] .tab.active {
  border-color: rgba(0, 122, 255, .3) !important;
  background: rgba(0, 122, 255, .08) !important;
  color: var(--eds-accent) !important;
}

@media (max-width: 720px) {
  .eds-body [data-ui-component="PopoverPanel"][data-ui-variant="filter-menu"] .filter-chips {
    display: grid !important;
    grid-template-columns: repeat(2, max-content);
    gap: 6px;
  }

  .eds-body [data-ui-component="PopoverPanel"][data-ui-variant="filter-menu"] .tab {
    width: max-content;
    min-width: 0;
    white-space: nowrap;
  }

  .eds-body [data-ui-component="PopoverPanel"][data-ui-variant="sort-menu"] .tab {
    width: max-content;
    min-width: 100%;
    white-space: nowrap;
  }
}