/* ==========================================================================
   Component · Filter field
   A client-side search box over an already-rendered list. Nothing is fetched,
   so it works offline and cannot be slow.
   ========================================================================== */

.filter {
  position: relative;
  margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
}

.filter__input {
  width: 100%;
  height: 56px;
  padding-inline: 3.25rem 3.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: var(--text-body);
  transition:
    border-color var(--duration-fast) var(--ease-gentle),
    background-color var(--duration-theme) var(--ease-gentle);
}

.filter__input::placeholder {
  color: var(--color-text-tertiary);
}

.filter__input:focus {
  outline: none;
  border-color: var(--color-accent);
}

/* The browser's own clear button would sit beside ours. */
.filter__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.filter__icon {
  position: absolute;
  inset-inline-start: 1.25rem;
  top: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  color: var(--color-text-tertiary);
  pointer-events: none;
}

.filter__icon svg {
  width: 19px;
  height: 19px;
}

.filter__clear {
  position: absolute;
  inset-inline-end: 0.75rem;
  top: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-tertiary);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-gentle);
}

.filter__clear:hover {
  background: var(--color-tile-hover);
  color: var(--color-text-primary);
}

.filter__clear svg {
  width: 16px;
  height: 16px;
}

.filter__status {
  margin-top: 1rem;
  color: var(--color-text-tertiary);
  font-size: var(--text-caption);
}