.na-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.25;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  background-color: var(--na-color-default);
  color: var(--na-color-white);
}
.na-button:hover {
  background-color: hsl(from var(--na-color-default) h calc(s - 12) calc(l - 9));
}
.na-button:active {
  background-color: hsl(from var(--na-color-default) h calc(s - 10) calc(l - 16));
}
.na-button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.na-button-xs {
  padding: 0.25rem 0.5rem;
  font-size: 0.6875rem;
  gap: 0.25rem;
}
.na-button-sm {
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
  gap: 0.3125rem;
}
.na-button-md {
  padding: 0.5rem 1rem;
  font-size: 0.9375rem;
  gap: 0.375rem;
}
.na-button-lg {
  padding: 0.625rem 1.25rem;
  font-size: 1.0625rem;
  gap: 0.4375rem;
}
.na-button-xl {
  padding: 0.75rem 1.5rem;
  font-size: 1.25rem;
  gap: 0.5rem;
}
.na-button-2xl {
  padding: 0.875rem 1.75rem;
  font-size: 1.5rem;
  gap: 0.5625rem;
}
.na-button-3xl {
  padding: 1rem 2rem;
  font-size: 1.875rem;
  gap: 0.625rem;
}

.na-button-default {
  background-color: var(--na-color-default);
  color: var(--na-color-white);
}
.na-button-default:hover {
  background-color: hsl(from var(--na-color-default) h calc(s - 12) calc(l - 9));
}
.na-button-default:active {
  background-color: hsl(from var(--na-color-default) h calc(s - 10) calc(l - 16));
}
.na-button-primary {
  background-color: var(--na-color-primary);
  color: var(--na-color-white);
}
.na-button-primary:hover {
  background-color: hsl(from var(--na-color-primary) h calc(s - 12) calc(l - 9));
}
.na-button-primary:active {
  background-color: hsl(from var(--na-color-primary) h calc(s - 10) calc(l - 16));
}
.na-button-secondary {
  background-color: var(--na-color-secondary);
  color: var(--na-color-white);
}
.na-button-secondary:hover {
  background-color: hsl(from var(--na-color-secondary) h calc(s - 12) calc(l - 9));
}
.na-button-secondary:active {
  background-color: hsl(from var(--na-color-secondary) h calc(s - 10) calc(l - 16));
}
.na-button-success {
  background-color: var(--na-color-success);
  color: var(--na-color-white);
}
.na-button-success:hover {
  background-color: hsl(from var(--na-color-success) h calc(s - 12) calc(l - 9));
}
.na-button-success:active {
  background-color: hsl(from var(--na-color-success) h calc(s - 10) calc(l - 16));
}
.na-button-warning {
  background-color: var(--na-color-warning);
  color: var(--na-color-white);
}
.na-button-warning:hover {
  background-color: hsl(from var(--na-color-warning) h calc(s - 12) calc(l - 9));
}
.na-button-warning:active {
  background-color: hsl(from var(--na-color-warning) h calc(s - 10) calc(l - 16));
}
.na-button-danger {
  background-color: var(--na-color-danger);
  color: var(--na-color-white);
}
.na-button-danger:hover {
  background-color: hsl(from var(--na-color-danger) h calc(s - 12) calc(l - 9));
}
.na-button-danger:active {
  background-color: hsl(from var(--na-color-danger) h calc(s - 10) calc(l - 16));
}
.na-button-info {
  background-color: var(--na-color-info);
  color: var(--na-color-white);
}
.na-button-info:hover {
  background-color: hsl(from var(--na-color-info) h calc(s - 12) calc(l - 9));
}
.na-button-info:active {
  background-color: hsl(from var(--na-color-info) h calc(s - 10) calc(l - 16));
}
.na-button-brand {
  background-color: var(--na-color-brand);
  color: var(--na-color-white);
}
.na-button-brand:hover {
  background-color: hsl(from var(--na-color-brand) h calc(s - 12) calc(l - 9));
}
.na-button-brand:active {
  background-color: hsl(from var(--na-color-brand) h calc(s - 10) calc(l - 16));
}
.na-button-accent {
  background-color: var(--na-color-accent);
  color: var(--na-color-white);
}
.na-button-accent:hover {
  background-color: hsl(from var(--na-color-accent) h calc(s - 12) calc(l - 9));
}
.na-button-accent:active {
  background-color: hsl(from var(--na-color-accent) h calc(s - 10) calc(l - 16));
}
.na-button-white {
  background-color: var(--na-color-white);
  color: var(--na-color-black);
}
.na-button-white:hover {
  background-color: hsl(from var(--na-color-white) h calc(s - 12) calc(l - 9));
}
.na-button-white:active {
  background-color: hsl(from var(--na-color-white) h calc(s - 10) calc(l - 16));
}
.na-button-black {
  background-color: var(--na-color-black);
  color: var(--na-color-white);
}
.na-button-black:hover {
  background-color: hsl(from var(--na-color-black) h calc(s - 12) calc(l - 9));
}
.na-button-black:active {
  background-color: hsl(from var(--na-color-black) h calc(s - 10) calc(l - 16));
}

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