.button-primary,
.button-secondary {
  align-self: flex-start;
  min-height: calc(var(--spacing-unit) * 11);
  padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 6);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: inherit;
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}

.button-primary {
  background: var(--color-brand);
  color: var(--color-brand-foreground);
}

.button-primary:hover {
  background: var(--color-brand-glow);
}

.button-primary[aria-disabled='true'] {
  background: var(--color-brand-deep);
  cursor: progress;
}

.button-primary:disabled {
  background: var(--color-accent);
  color: var(--color-muted-foreground);
  cursor: not-allowed;
}

.button-secondary {
  border-color: var(--color-border);
  background: var(--color-accent);
  color: var(--color-foreground);
}

.button-secondary:hover {
  border-color: var(--color-muted-foreground);
}

@media (max-width: 30rem) {
  .button-primary {
    align-self: stretch;
  }
}