.ccvaa-btn:is(:hover, :focus-visible):not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--ccvaa-btn-bg-hover);
  color: var(--ccvaa-btn-text-color-hover);
  text-decoration: var(--ccvaa-btn-text-decoration-hover);
  border-color: var(--ccvaa-btn-border-color-hover);
}

@media (prefers-reduced-motion: reduce) {
  .ccvaa-btn[aria-busy="true"]::after {
    animation: none;
  }
}

.ccvaa-btn {
  &:focus-visible {
    outline: none;
    box-shadow: var(--ccvaa-focus-ring);
  }

  &[aria-disabled="true"] {
    cursor: not-allowed;
  }

  &[aria-busy="true"]::after {
    content: "";
    border-top-color: transparent;
    animation: ds-spin var(--ccvaa-transition-spinner-duration) linear infinite;
  }
}

.ccvaa-btn--sm {
  --ccvaa-btn-font-size: var(--ccvaa-font-size-sm);
  --ccvaa-btn-min-block-size: 2.5rem;
  --ccvaa-btn-min-inline-size: 7.5rem;
  --ccvaa-btn-border-radius: .5em;
  --ccvaa-btn-padding-block: 0;
  --ccvaa-btn-padding-inline: var(--ccvaa-space-md);
  min-inline-size: var(--ccvaa-btn-min-inline-size);
  min-height: var(--ccvaa-btn-min-block-size);
  min-block-size: var(--ccvaa-btn-min-block-size);
}

.ccvaa-btn--brand {
  --ccvaa-btn-bg: var(--ccvaa-color-action-primary);
  --ccvaa-btn-bg-hover: var(--ccvaa-color-action-primary-hover);
  --ccvaa-btn-text-color: var(--ccvaa-color-action-on-primary);
  --ccvaa-btn-text-color-hover: var(--ccvaa-color-action-on-primary-hover);
  --ccvaa-btn-border-color: var(--ccvaa-color-action-primary);
  --ccvaa-btn-border-color-hover: var(--ccvaa-color-action-primary-hover);
}

.ccvaa-btn--accent {
  --ccvaa-btn-bg: var(--ccvaa-color-action-accent);
  --ccvaa-btn-bg-hover: var(--ccvaa-color-action-accent-hover);
  --ccvaa-btn-text-color: var(--ccvaa-color-action-on-accent);
  --ccvaa-btn-text-color-hover: var(--ccvaa-color-action-on-accent-hover);
  --ccvaa-btn-border-color: var(--ccvaa-color-action-accent);
  --ccvaa-btn-border-color-hover: var(--ccvaa-color-action-accent-hover);
}

.ccvaa-btn--critical {
  --ccvaa-btn-bg: var(--ccvaa-color-action-critical);
  --ccvaa-btn-bg-hover: var(--ccvaa-color-action-critical-hover);
  --ccvaa-btn-text-color: var(--ccvaa-color-action-on-critical);
  --ccvaa-btn-text-color-hover: var(--ccvaa-color-action-on-critical-hover);
  --ccvaa-btn-border-color: var(--ccvaa-color-action-critical);
  --ccvaa-btn-border-color-hover: var(--ccvaa-color-action-critical-hover);
}

.ccvaa-btn--danger {
  --ccvaa-btn-bg: var(--ccvaa-color-action-danger);
  --ccvaa-btn-bg-hover: var(--ccvaa-color-action-danger-hover);
  --ccvaa-btn-text-color: var(--ccvaa-color-action-on-danger);
  --ccvaa-btn-text-color-hover: var(--ccvaa-color-action-on-danger);
  --ccvaa-btn-border-color: var(--ccvaa-color-action-danger);
  --ccvaa-btn-border-color-hover: var(--ccvaa-color-action-danger-hover);
}

.ccvaa-btn--warning {
  --ccvaa-btn-bg: var(--ccvaa-color-action-warning);
  --ccvaa-btn-bg-hover: var(--ccvaa-color-action-warning-hover);
  --ccvaa-btn-text-color: var(--ccvaa-color-action-on-warning);
  --ccvaa-btn-text-color-hover: var(--ccvaa-color-action-on-warning-hover);
  --ccvaa-btn-border-color: var(--ccvaa-color-action-warning);
  --ccvaa-btn-border-color-hover: var(--ccvaa-color-action-warning-hover);
}

.ccvaa-btn--success {
  --ccvaa-btn-bg: var(--ccvaa-color-action-success);
  --ccvaa-btn-bg-hover: var(--ccvaa-color-action-success-hover);
  --ccvaa-btn-text-color: var(--ccvaa-color-action-on-success);
  --ccvaa-btn-text-color-hover: var(--ccvaa-color-action-on-success-hover);
  --ccvaa-btn-border-color: var(--ccvaa-color-action-success);
  --ccvaa-btn-border-color-hover: var(--ccvaa-color-action-success-hover);
}

.ccvaa-btn--info {
  --ccvaa-btn-bg: var(--ccvaa-color-action-info);
  --ccvaa-btn-bg-hover: var(--ccvaa-color-action-info-hover);
  --ccvaa-btn-text-color: var(--ccvaa-color-action-on-info);
  --ccvaa-btn-text-color-hover: var(--ccvaa-color-action-on-info-hover);
  --ccvaa-btn-border-color: var(--ccvaa-color-action-info);
  --ccvaa-btn-border-color-hover: var(--ccvaa-color-action-info-hover);
}

.ccvaa-btn--outline {
  --ccvaa-btn-bg: transparent;
  --ccvaa-btn-bg-hover: var(--ccvaa-color-action-primary);
  --ccvaa-btn-text-color-hover: var(--ccvaa-color-action-on-primary);
  --ccvaa-btn-border-color: var(--ccvaa-color-action-primary);
  --ccvaa-btn-border-color-hover: var(--ccvaa-color-action-primary);
  --ccvaa-btn-text-color: var(--ccvaa-color-action-primary);
}

.ccvaa-btn--ghost {
  --ccvaa-btn-bg: transparent;
  --ccvaa-btn-bg-hover: var(--ccvaa-color-surface-muted);
  --ccvaa-btn-text-color: var(--ccvaa-color-text-primary);
  --ccvaa-btn-text-color-hover: var(--ccvaa-color-text-primary);
  --ccvaa-btn-border-color: var(--ccvaa-color-border-secondary);
  --ccvaa-btn-border-color-hover: var(--ccvaa-color-border-action);
}

.ccvaa-btn--text:is(:hover, :focus-visible):not(:disabled):not([aria-disabled="true"]) {
  --ccvaa-btn-bg: transparent;
  --ccvaa-btn-text-color: var(--ccvaa-color-link-hover);
  --ccvaa-btn-text-decoration: none;
}

.ccvaa-btn--nav {
  --ccvaa-btn-bg: transparent;
  --ccvaa-btn-bg-hover: var(--ccvaa-color-tonal-brand-bg);
  --ccvaa-btn-text-color: var(--ccvaa-color-text-heading);
  --ccvaa-btn-text-color-hover: var(--ccvaa-color-text-heading);
  --ccvaa-btn-border-color: var(--ccvaa-color-border-base);
  --ccvaa-btn-border-color-hover: var(--ccvaa-color-border-action);

  &.ccvaa-btn--sm {
    --ccvaa-btn-font-size: 1rem;
  }

  &[aria-current="page"] {
    background: var(--ccvaa-color-surface-raised);
    --ccvaa-btn-border-color: var(--ccvaa-color-border-action);
  }
}