.cursor-tag {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1;
  padding: var(--space-4) var(--space-8);
  border-radius: 2px 6px 6px 6px; /* check:ignore */
  background: var(--color-ink);
  color: var(--color-on-ink);
  font-size: 0.8125rem; /* check:ignore */
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--color-ink) 12%, transparent); /* check:ignore */
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-fast) var(--ease-out);
}

.cursor-tag[data-visible] {
  opacity: 1;
}

.text-link--dark .cursor-tag {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.cursor-tag--static {
  position: absolute;
  top: 50%;
  left: calc(100% + var(--space-16));
  translate: 0 -50%;
  z-index: 1;
}

.text-link:focus-visible > .cursor-tag--static {
  opacity: 1;
}

@media (width < 768px), (hover: none), (pointer: coarse) {
  .cursor-tag:not(.cursor-tag--static) {
    display: none;
  }
}

@media (hover: none), (pointer: coarse) {
  .text-link:is(:active, :focus) > .cursor-tag--static {
    opacity: 1;
  }
}