/*
  Icon badge — an editor-uploaded icon on a sage rounded background. Used by the
  directions list (components/directions.css) and the info box. The badge sets
  the colour; inlined SVGs use fill="currentColor" (see Support\Icon) so they
  pick it up. Raster icons can't be recoloured and render as-is.
*/

.icon-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-green-pale);
  color: var(--color-green-dark);
}

.icon-badge__svg {
  width: 1.5rem;
  height: 1.5rem;
}

.icon-badge__img {
  width: 1.5rem;
  height: 1.5rem;
  object-fit: contain;
}