@layer components {
  .filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-block-end: var(--space-6);
    max-inline-size: var(--measure);
    margin-inline: auto;
    padding-inline: var(--gutter-fluid);
  }

  .filter-bar__search {
    flex: 1 1 var(--size-fill);
    min-inline-size: var(--space-0);
  }

  .filter-bar__search .input__field::-webkit-search-cancel-button {
    appearance: none;
  }

  .filter-bar__filter {
    flex: 1 1 var(--space-0);
    min-inline-size: var(--space-0);
  }

  @media (width >= 800px) {
    .filter-bar__search {
      flex-basis: var(--space-0);
      flex-grow: 2;
    }
  }
}