.icon-font {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  vertical-align: middle;
  flex-shrink: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.icon-font__glyph {
  font-size: inherit !important;
  line-height: 1;
}
.icon-font--hoverable {
  color: var(--icon-font-color);
  transition: color 0.15s ease;
}
.icon-font--hoverable:hover {
  color: var(--icon-font-hover-color);
}
.icon-font--hoverable:focus-visible {
  color: var(--icon-font-hover-color);
}

a:hover .icon-font--hoverable,
button:hover .icon-font--hoverable,
[role=button]:hover .icon-font--hoverable,
label:hover .icon-font--hoverable {
  color: var(--icon-font-hover-color);
}