/*
 * A country in a box of its own, the DSFR having no component for it: its tag
 * (`fr-tag`) reads as a state or a filter, never as somewhere to go, and half
 * of these lead to a page.
 */
.country-tag {
  /* The underline the DSFR paints under every `[href]`, replaced by the bottom
     border below: it is a background gradient of fractional thickness, which
     renders differently with the sub-pixel offset of its row. */
  --underline-img: none;

  display: inline-block;
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--border-default-grey);
  border-radius: 0.25rem;
  line-height: 1.5rem;
}

/*
 * The same box surrounds a country that leads nowhere — the one in a postal
 * address — so the bottom border is what separates the two, and it must be
 * visible without depending on colour. The hover background is painted by the
 * DSFR's `a[href]:hover`, which reads `--hover-tint`; `--active` serves the
 * pressed state the same way.
 */
a.country-tag {
  --hover-tint: var(--hover);
  --idle: transparent;
  --hover: var(--background-alt-blue-france);
  --active: var(--background-alt-blue-france-hover);

  color: var(--text-action-high-blue-france);
  border-bottom: 2px solid currentcolor;
}

/* A row that wraps, so twenty countries read as one set. */
.country-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}