.na-link {
  color: var(--na-color-primary);
  text-decoration: none;
  cursor: pointer;
}
.na-link:hover {
  color: hsl(from var(--na-color-primary) h calc(s - 12) calc(l - 9));
  text-decoration: underline;
}
.na-link:active {
  color: hsl(from var(--na-color-primary) h calc(s - 10) calc(l - 16));
}
.na-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.na-link-default {
  color: var(--na-color-default);
}
.na-link-default:hover {
  color: hsl(from var(--na-color-default) h calc(s - 12) calc(l - 9));
}
.na-link-default:active {
  color: hsl(from var(--na-color-default) h calc(s - 10) calc(l - 16));
}

.na-link-primary {
  color: var(--na-color-primary);
}
.na-link-primary:hover {
  color: hsl(from var(--na-color-primary) h calc(s - 12) calc(l - 9));
}
.na-link-primary:active {
  color: hsl(from var(--na-color-primary) h calc(s - 10) calc(l - 16));
}

.na-link-secondary {
  color: var(--na-color-secondary);
}
.na-link-secondary:hover {
  color: hsl(from var(--na-color-secondary) h calc(s - 12) calc(l - 9));
}
.na-link-secondary:active {
  color: hsl(from var(--na-color-secondary) h calc(s - 10) calc(l - 16));
}

.na-link-success {
  color: var(--na-color-success);
}
.na-link-success:hover {
  color: hsl(from var(--na-color-success) h calc(s - 12) calc(l - 9));
}
.na-link-success:active {
  color: hsl(from var(--na-color-success) h calc(s - 10) calc(l - 16));
}

.na-link-warning {
  color: var(--na-color-warning);
}
.na-link-warning:hover {
  color: hsl(from var(--na-color-warning) h calc(s - 12) calc(l - 9));
}
.na-link-warning:active {
  color: hsl(from var(--na-color-warning) h calc(s - 10) calc(l - 16));
}

.na-link-danger {
  color: var(--na-color-danger);
}
.na-link-danger:hover {
  color: hsl(from var(--na-color-danger) h calc(s - 12) calc(l - 9));
}
.na-link-danger:active {
  color: hsl(from var(--na-color-danger) h calc(s - 10) calc(l - 16));
}

.na-link-info {
  color: var(--na-color-info);
}
.na-link-info:hover {
  color: hsl(from var(--na-color-info) h calc(s - 12) calc(l - 9));
}
.na-link-info:active {
  color: hsl(from var(--na-color-info) h calc(s - 10) calc(l - 16));
}

.na-link-brand {
  color: var(--na-color-brand);
}
.na-link-brand:hover {
  color: hsl(from var(--na-color-brand) h calc(s - 12) calc(l - 9));
}
.na-link-brand:active {
  color: hsl(from var(--na-color-brand) h calc(s - 10) calc(l - 16));
}

.na-link-accent {
  color: var(--na-color-accent);
}
.na-link-accent:hover {
  color: hsl(from var(--na-color-accent) h calc(s - 12) calc(l - 9));
}
.na-link-accent:active {
  color: hsl(from var(--na-color-accent) h calc(s - 10) calc(l - 16));
}

.na-link-white {
  color: var(--na-color-white);
}
.na-link-white:hover {
  color: hsl(from var(--na-color-white) h calc(s - 12) calc(l - 9));
}
.na-link-white:active {
  color: hsl(from var(--na-color-white) h calc(s - 10) calc(l - 16));
}

.na-link-black {
  color: var(--na-color-black);
}
.na-link-black:hover {
  color: hsl(from var(--na-color-black) h calc(s - 12) calc(l - 9));
}
.na-link-black:active {
  color: hsl(from var(--na-color-black) h calc(s - 10) calc(l - 16));
}

.na-link-disabled,
.na-link[aria-disabled='true'] {
  color: var(--na-color-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

.na-link-underline {
  text-decoration: underline;
}
.na-link-underline:hover {
  text-decoration: underline;
}

.na-link-no-underline {
  text-decoration: none;
}
.na-link-no-underline:hover {
  text-decoration: none;
}