.ov-btn {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 1rem;
  color: var(--ov-color-heading);
  background: var(--ov-color-surface);
  border: 1px solid var(--ov-color-border);
  border-radius: var(--ov-radius-2);
  box-shadow: var(--ov-shadow-xs);
  font-weight: 650;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition:
    color var(--ov-transition-fast),
    background-color var(--ov-transition-fast),
    border-color var(--ov-transition-fast),
    box-shadow var(--ov-transition-fast),
    transform var(--ov-transition-fast);
}

.ov-btn:hover {
  color: var(--ov-color-heading);
  background: var(--ov-color-surface-alt);
  border-color: var(--ov-color-border-strong);
  transform: translateY(-1px);
}

.ov-btn:active {
  transform: translateY(0);
}

.ov-btn-primary {
  color: #ffffff;
  background: var(--ov-color-primary);
  border-color: var(--ov-color-primary);
}

.ov-btn-primary:hover {
  color: #ffffff;
  background: var(--ov-color-primary-hover);
  border-color: var(--ov-color-primary-hover);
}

.ov-btn-secondary {
  color: var(--ov-color-surface);
  background: var(--ov-color-secondary);
  border-color: var(--ov-color-secondary);
}

.ov-btn-secondary:hover {
  color: var(--ov-color-surface);
  background: var(--ov-color-heading);
  border-color: var(--ov-color-heading);
}

.ov-btn-outline {
  color: var(--ov-color-primary);
  background: transparent;
  border-color: color-mix(in srgb, var(--ov-color-primary) 42%, var(--ov-color-border));
  box-shadow: none;
}

.ov-btn-outline:hover {
  color: var(--ov-color-primary-hover);
  background: var(--ov-color-primary-soft);
  border-color: var(--ov-color-primary);
}

.ov-btn-ghost {
  color: var(--ov-color-text);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.ov-btn-ghost:hover {
  color: var(--ov-color-heading);
  background: var(--ov-color-bg-subtle);
}

.ov-btn-danger {
  color: #ffffff;
  background: var(--ov-color-danger);
  border-color: var(--ov-color-danger);
}

.ov-btn-danger:hover {
  color: #ffffff;
  background: color-mix(in srgb, var(--ov-color-danger) 88%, #000000);
  border-color: color-mix(in srgb, var(--ov-color-danger) 88%, #000000);
}

.ov-btn-sm {
  min-height: 2.25rem;
  padding: 0.45rem 0.75rem;
  font-size: var(--ov-step--1);
}

.ov-btn-lg {
  min-height: 3.25rem;
  padding: 0.85rem 1.25rem;
  font-size: var(--ov-step-1);
}

.ov-icon-button {
  display: inline-grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  color: var(--ov-color-text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--ov-radius-2);
  transition:
    color var(--ov-transition-fast),
    background-color var(--ov-transition-fast),
    border-color var(--ov-transition-fast);
}

.ov-icon-button:hover {
  color: var(--ov-color-heading);
  background: var(--ov-color-bg-subtle);
  border-color: var(--ov-color-border);
}

@media (max-width: 575.98px) {
  .ov-btn,
  .ov-btn-lg {
    width: 100%;
  }
}