.icon-arrow {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  transform: translateY(.06em);
  vertical-align: middle;
}

.icon-arrow-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  vertical-align: middle;
}
.icon-arrow-wrap > .icon-arrow {
  display: block;
}
.desktop-nav a {
  display: inline-flex;
  align-items: center;
}

/* Align icons with the text row, independent of font baselines. */
a:has(> .icon-arrow),
a:has(> .icon-arrow-wrap):not(.button):not(.text-link):not(.legal-related),
button:has(> .icon-arrow),
button:has(> .icon-arrow-wrap):not(.text-link),
span:has(> .icon-arrow-wrap),
span:has(> .icon-arrow):not(.icon-arrow-wrap),
p:has(> .icon-arrow) {
  display: inline-flex;
  align-items: center;
}

/* Action links already define their own spacing in the page styles. */
.button > .icon-arrow-wrap,
.text-link > .icon-arrow-wrap,
.legal-related > .icon-arrow-wrap {
  align-self: center;
}

a:has(> .icon-arrow),
button:has(> .icon-arrow),
span:has(> .icon-arrow-wrap),
span:has(> .icon-arrow):not(.icon-arrow-wrap),
p:has(> .icon-arrow) {
  gap: .35em;
}

/* Match the label size instead of the former text-icon font sizes. */
.button .icon-arrow-wrap,
.text-link .icon-arrow-wrap,
.desktop-nav .icon-arrow-wrap,
.closing-actions .icon-arrow-wrap {
  font-size: inherit;
}