.link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;
  font-optical-sizing: none;
}

.link__text { white-space: nowrap; }

.link__icon { flex: 0 0 auto; display: block; }

.link__icon path { stroke-width: 2.4; }

.link--xs { gap: var(--spacing-4); }
.link--s  { gap: var(--spacing-4); }
.link--m  { gap: var(--spacing-8); }
.link--xs .link__icon { width: 12px; height: 12px; }
.link--s  .link__icon { width: 16px; height: 16px; }
.link--m  .link__icon { width: 16px; height: 16px; }

.link--disabled { cursor: default; pointer-events: none; }

.link--live { color: var(--link-c); transition: color .12s ease; }
.link--live:hover,
.link--live:focus-visible { color: var(--link-h); }
.link--live:active { color: var(--link-a); }
.link--live:focus-visible { outline: 2px solid var(--color-accent-400); outline-offset: 2px; border-radius: 2px; }