.button {
  display: inline-flex;
  min-height: 55px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 28px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition:
    background-color 200ms ease,
    color 200ms ease,
    border-color 200ms ease,
    transform 200ms ease;
}

.button:hover {
  transform: translateY(-1px);
}

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

.button--primary:hover {
  background: #252a55;
  color: var(--primary-foreground);
}

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

.button--outline:hover {
  background: var(--secondary);
}

.button svg {
  flex: none;
}