.ga-link {
  @apply text-md animate-hover inline-flex h-5 cursor-pointer items-center justify-center gap-1 rounded px-0.5 align-middle font-medium whitespace-nowrap text-(--ga-color-text-action) tabular-nums transition-colors;

  &.ga-link--inline {
    @apply underline decoration-(--ga-color-primary-90) decoration-1;
  }

  &.ga-link--small {
    @apply h-4 text-sm;
  }

  &.ga-link--large {
    @apply h-6 text-lg;
  }

  &.ga-link--disabled {
    @apply cursor-not-allowed text-(--ga-color-text-disabled);

    .ga-link__icon {
      @apply text-(--ga-color-icon-disabled);
    }
  }

  &:not(.ga-link--disabled) {
    &:visited {
      @apply text-(--ga-color-text-link-visited) decoration-(--ga-color-text-link-visited);
    }

    &:hover {
      @apply text-(--ga-color-text-action-hover) underline decoration-(--ga-color-primary-90) decoration-1;
    }

    &:active {
      @apply text-(--ga-color-text-action) decoration-(--ga-color-text-action);
    }

    &:focus-visible {
      @apply outline-2 outline-offset-2 outline-(--ga-color-border-focus);
    }
  }

  :not(:visited) .ga-link__icon {
    @apply text-(--ga-color-icon-primary);
  }
}