@utility link {
  @layer base {
    --link-color: var(--text-color-default);
    --link-hover-color: var(--text-color-default);
    --link-active-color: var(--link-hover-color);

    @apply cursor-pointer underline appearance-none
    text-[var(--link-color)]
    hover:text-[var(--link-hover-color)];

    &.active,
    &.show {
      @apply text-[var(--link-active-color)];
    }
  }
}
@utility link-hover {
  @layer base {
    @apply no-underline hover:underline;
  }
}
@utility link-primary {
  @layer base {
    --link-color: var(--color-primary);
    --link-hover-color: var(--color-primary-dark);
  }
}
@utility link-secondary {
  @layer base {
    --link-color: var(--color-secondary);
    --link-hover-color: var(--color-secondary-dark);
  }
}
@utility link-info {
  @layer base {
    --link-color: var(--color-info);
    --link-hover-color: var(--color-info-dark);
  }
}
@utility link-success {
  @layer base {
    --link-color: var(--color-success);
    --link-hover-color: var(--color-success-dark);
  }
}
@utility link-warning {
  @layer base {
    --link-color: var(--color-warning);
    --link-hover-color: var(--color-warning-dark);
  }
}
@utility link-danger {
  @layer base {
    --link-color: var(--color-danger);
    --link-hover-color: var(--color-danger-dark);
  }
}
@utility link-neutral {
  @layer base {
    --link-color: var(--text-color-default);
    --link-hover-color: var(--text-color-emphasis);
  }
}