.filter-panel {
  display: grid;
  gap: var(--space-stack);
  min-inline-size: 0;
}

.filter-panel__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-stack);
}

.filter-panel__bar > .search-field {
  flex: 1 1 16rem;
  max-inline-size: 24rem;
}

.filter-panel__panel:not([hidden]) {
  position: fixed;
  z-index: var(--z-dropdown);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  max-block-size: min(34rem, 80dvh);
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.filter-panel__groups {
  display: grid;
  overflow-y: auto;
  padding: var(--space-card) var(--space-card) calc(var(--space-section) / 2);
  box-sizing: border-box;
  inline-size: min(30rem, calc(100vw - 2 * var(--space-2)));
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  gap: var(--space-section) var(--space-field);
}

.filter-panel__actions {
  padding: calc(var(--space-section) / 2) var(--space-card) var(--space-card);
  border-block-start: 1px solid var(--color-border-light);
}

.filter-panel__group {
  display: grid;
  align-content: start;
  gap: var(--space-check);
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.filter-panel__legend {
  margin-block-end: var(--space-label);
  padding: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.filter-panel__group > .search-field {
  display: flex;
  inline-size: 100%;
}

.filter-panel__options {
  display: grid;
  gap: var(--space-check);
  min-inline-size: 0;
}

.filter-panel__options--long {
  max-block-size: 14rem;
  overflow-y: auto;
}

.filter-panel__option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-check);
  min-inline-size: 0;
  font-size: var(--text-sm);
  cursor: pointer;
}

.filter-panel__option input {
  margin-block-start: calc((1lh - var(--control-check)) / 2);
}

.filter-panel__option:has(:disabled) {
  color: var(--color-text-subtle);
  cursor: not-allowed;
}

.filter-panel__text {
  display: grid;
  gap: var(--space-hair);
  min-inline-size: 0;
}

.filter-panel__main,
.filter-panel__sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filter-panel__sub {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.filter-panel__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-inline-size: 0;
}

.filter-panel__pills:empty {
  display: none;
}

.filter-panel__pill {
  max-inline-size: 100%;
  border-radius: var(--radius-pill);
}

.filter-panel__pill-text {
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filter-panel__cross {
  flex: none;
  inline-size: var(--icon-sm);
  block-size: var(--icon-sm);
}

.filter-panel--field .filter-panel__panel:not([hidden]) {
  box-sizing: border-box;
}

.filter-panel--field .filter-panel__groups {
  contain: inline-size;
  inline-size: auto;
  grid-template-columns: minmax(0, 1fr);
}

.filter-panel--field .filter-panel__main,
.filter-panel--field .filter-panel__sub {
  overflow: visible;
  white-space: normal;
}

@media (max-width: 768px) {
  .filter-panel__bar > .search-field,
  .filter-panel__open {
    flex-basis: 100%;
    max-inline-size: none;
  }

  .filter-panel--open > .filter-panel__panel:not([hidden]) {
    position: static;
    max-block-size: none;
    box-shadow: none;
  }

  .filter-panel--open .filter-panel__groups {
    inline-size: auto;
    overflow: visible;
  }

  .filter-panel__option {
    padding-block: calc((var(--control-h-touch-sm) - 1lh) / 2);
  }

  .filter-panel__main,
  .filter-panel__sub {
    overflow: visible;
    white-space: normal;
  }
}