/* Generated by brand/scripts/build-components.mjs from brand/components/. Do not edit. Load public/tokens/tokens.css first. */

/* Link: orange text that goes somewhere or does a small thing ("Configure", "See all activity"). */
.nu-link {
  display: inline-flex;
  min-height: var(--nu-space-24);
  align-items: center;
  border: 0;
  padding: 0;
  background: none;
  font-family: var(--nu-font-family-sans);
  font-size: var(--nu-size-small);
  font-weight: var(--nu-font-weight-regular);
  color: var(--nu-color-accent);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.nu-link:hover {
  color: var(--nu-color-accent-hover);
  text-decoration: underline;
}

.nu-link:focus-visible {
  outline: var(--nu-border-focus) solid var(--nu-color-accent);
  outline-offset: var(--nu-border-focus);
}

/* Touch screens: a 44 px target. */
@media (pointer: coarse) {
  .nu-link {
    min-height: var(--nu-control-touch);
  }
}

/* A quiet link: grey and underlined, for what is secondary ("I forgot my password"). */
.nu-link--muted {
  color: var(--nu-color-muted);
  text-decoration: underline;
  text-underline-offset: var(--nu-space-4);
}

.nu-link--muted:hover {
  color: var(--nu-color-ink);
}