/*
 * One criterion: its glyph, its name, and a switch.
 *
 * It carried two counts under the name — how many listings could answer it and
 * how many could not. Nine criteria meant eighteen figures to weigh before
 * touching one switch, and the answer they gave is on screen anyway, in the
 * list beside the panel. Without them the row is one line, and the name gets
 * the size it needs to be read rather than deciphered.
 */

.criterion {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
}

.criterion:first-of-type {
  border-top: 0;
}

.criterion__name {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.3;
}

/* The glyph this criterion wears on every listing row, in the criterion's own
 * hue — the pairing is the point, so it keeps its colour whether the switch is
 * on or off. It names the row; it does not report an answer. */
.criterion__glyph {
  width: 1rem;
  height: 1rem;
  flex: none;
  color: var(--crit);
}

/* The one filter handed to Immoweb. A mark rather than a group of its own: a
 * whole heading for a single switch cost more room than it explained. */
.criterion__delegated {
  color: var(--ink-faint);
  font-weight: 400;
}

/* Shown only while a criterion cannot be answered at all. */
.criterion__pending {
  grid-column: 1;
  font-size: var(--text-xs);
  color: var(--ink-faint);
  font-style: italic;
}

.criterion__switch {
  grid-column: 2;
  /* On the name's own line rather than spanning both: a span asked the grid for
     a second track that is empty on almost every row, and the row gap under it
     showed as slack the row did not need. */
  grid-row: 1;
  position: relative;
  flex: none;
  width: 1.875rem;
  height: 1.0625rem;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  border: 1px solid var(--line-strong);
}

.criterion__switch::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 0.6875rem;
  height: 0.6875rem;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: transform 0.15s;
}

.criterion--on .criterion__switch {
  background: var(--accent);
  border-color: var(--accent);
}

.criterion--on .criterion__switch::after {
  transform: translateX(0.8125rem);
}

.criterion--pending {
  cursor: not-allowed;
  opacity: 0.55;
}

.criterion--pending .criterion__switch {
  background: var(--surface-sunken);
}

/* The panel's controls are buttons: they write to the saved search rather than
 * rebuild a query string. The form each one is wrapped in must disappear from
 * the layout, and the button must lose every default a browser gives it. */
.criteria-rail__control {
  display: contents;
}

button.criterion,
button.criteria-rail__step {
  font: inherit;
  cursor: pointer;
  text-align: left;
}

button.criteria-rail__step {
  text-align: center;
}

button.criterion[disabled],
button.criteria-rail__step[disabled] {
  cursor: not-allowed;
}

.criteria-rail__step.criterion--on {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

@media (hover: hover) and (pointer: fine) {
  .criteria-rail__step:hover {
    border-color: var(--line-strong);
  }
}