/* icon-button: reines Symbol, kein sichtbarer Knopf. Trefferfläche 44x44,
   unsichtbar. Beim Zeigen wechselt nur die Farbe. Aus der Vorlage; dort
   sitzt im Knopf eine Schriftglyphe, hier ein SVG. */
.icon-button {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: var(--tap-min);
  height: var(--tap-min);
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--color-text);
  cursor: pointer;
}

@media (hover: hover) {
  .icon-button:hover { color: var(--color-primary); }
}

.icon-button:active { color: var(--color-primary); }

.icon-button:focus-visible {
  outline: var(--focus-ring) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}

.icon-button svg {
  width: var(--icon-size);
  height: var(--icon-size);
}

/* Der Überstand der Trefferfläche wird nach außen (Inhaltskante) und nach
   innen (Nachbar) herausgerechnet. */
.icon-button--flush-start {
  margin-inline-start: var(--control-flush);
  margin-inline-end: calc(var(--control-flush) + var(--space-2));
}

.icon-button--flush-end {
  margin-inline-end: var(--control-flush);
  margin-inline-start: calc(var(--control-flush) + var(--space-2));
}