/**
 * Repvist Buttons — Phase 3
 * Depends on: tokens.css
 */

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

.rv-btn,
.rv-btn-primary,
.rv-btn-secondary,
.rv-btn-danger,
.rv-btn-ghost,
.rv-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rv-space-2);
  font-family: var(--rv-font-family);
  font-weight: var(--rv-font-weight-medium);
  line-height: var(--rv-line-height-tight);
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
  border-radius: var(--rv-radius-lg);
  transition:
    background-color var(--rv-transition-fast),
    border-color var(--rv-transition-fast),
    color var(--rv-transition-fast),
    box-shadow var(--rv-transition-fast),
    transform var(--rv-transition-fast);
}

.rv-btn:focus-visible,
.rv-btn-primary:focus-visible,
.rv-btn-secondary:focus-visible,
.rv-btn-danger:focus-visible,
.rv-btn-ghost:focus-visible,
.rv-btn-outline:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--rv-primary-focus-ring);
}

.rv-btn:disabled,
.rv-btn-primary:disabled,
.rv-btn-secondary:disabled,
.rv-btn-danger:disabled,
.rv-btn-ghost:disabled,
.rv-btn-outline:disabled,
.rv-btn.is-disabled,
.rv-btn-primary.is-disabled,
.rv-btn-secondary.is-disabled,
.rv-btn-danger.is-disabled,
.rv-btn-ghost.is-disabled,
.rv-btn-outline.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
  transform: none;
}

/* --------------------------------------------------------------------------
   Sizes
   -------------------------------------------------------------------------- */

.rv-btn-sm,
.rv-btn-primary.rv-btn-sm,
.rv-btn-secondary.rv-btn-sm,
.rv-btn-danger.rv-btn-sm,
.rv-btn-ghost.rv-btn-sm,
.rv-btn-outline.rv-btn-sm {
  min-height: var(--rv-space-8);
  padding: var(--rv-space-1) var(--rv-space-3);
  font-size: var(--rv-font-size-xs);
  border-radius: var(--rv-radius-md);
}

.rv-btn-md,
.rv-btn-primary.rv-btn-md,
.rv-btn-secondary.rv-btn-md,
.rv-btn-danger.rv-btn-md,
.rv-btn-ghost.rv-btn-md,
.rv-btn-outline.rv-btn-md,
.rv-btn-primary:not(.rv-btn-sm):not(.rv-btn-lg),
.rv-btn-secondary:not(.rv-btn-sm):not(.rv-btn-lg),
.rv-btn-danger:not(.rv-btn-sm):not(.rv-btn-lg),
.rv-btn-ghost:not(.rv-btn-sm):not(.rv-btn-lg),
.rv-btn-outline:not(.rv-btn-sm):not(.rv-btn-lg) {
  min-height: var(--rv-space-10);
  padding: var(--rv-space-2) var(--rv-space-4);
  font-size: var(--rv-font-size-sm);
}

.rv-btn-lg,
.rv-btn-primary.rv-btn-lg,
.rv-btn-secondary.rv-btn-lg,
.rv-btn-danger.rv-btn-lg,
.rv-btn-ghost.rv-btn-lg,
.rv-btn-outline.rv-btn-lg {
  min-height: var(--rv-space-12);
  padding: var(--rv-space-3) var(--rv-space-6);
  font-size: var(--rv-font-size-base);
  border-radius: var(--rv-radius-xl);
}

/* --------------------------------------------------------------------------
   Variants
   -------------------------------------------------------------------------- */

.rv-btn-primary {
  background-color: var(--rv-primary);
  border-color: var(--rv-primary);
  color: var(--rv-text-inverse);
  box-shadow: var(--rv-shadow-sm);
}

.rv-btn-primary:hover:not(:disabled):not(.is-disabled) {
  background-color: var(--rv-primary-hover);
  border-color: var(--rv-primary-hover);
  box-shadow: var(--rv-shadow-primary);
}

.rv-btn-primary:active:not(:disabled):not(.is-disabled) {
  background-color: var(--rv-primary-active);
  border-color: var(--rv-primary-active);
  transform: translateY(1px);
  box-shadow: var(--rv-shadow-xs);
}

.rv-btn-secondary {
  background-color: var(--rv-surface);
  border-color: var(--rv-border);
  color: var(--rv-text);
  box-shadow: var(--rv-shadow-xs);
}

.rv-btn-secondary:hover:not(:disabled):not(.is-disabled) {
  background-color: var(--rv-border-subtle);
  border-color: var(--rv-primary-soft-border);
  color: var(--rv-text);
}

.rv-btn-secondary:active:not(:disabled):not(.is-disabled) {
  background-color: var(--rv-primary-soft-bg);
  border-color: var(--rv-primary-soft-border);
  transform: translateY(1px);
}

.rv-btn-danger {
  background-color: var(--rv-danger);
  border-color: var(--rv-danger);
  color: var(--rv-text-inverse);
  box-shadow: var(--rv-shadow-sm);
}

.rv-btn-danger:hover:not(:disabled):not(.is-disabled) {
  background-color: var(--rv-danger-dark);
  border-color: var(--rv-danger-dark);
}

.rv-btn-danger:active:not(:disabled):not(.is-disabled) {
  background-color: var(--rv-danger-dark);
  border-color: var(--rv-danger-dark);
  transform: translateY(1px);
}

.rv-btn-danger:focus-visible {
  box-shadow: 0 0 0 3px var(--rv-danger-soft);
}

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

.rv-btn-ghost:hover:not(:disabled):not(.is-disabled) {
  background-color: var(--rv-border-subtle);
  color: var(--rv-text);
}

.rv-btn-ghost:active:not(:disabled):not(.is-disabled) {
  background-color: var(--rv-primary-soft-bg);
  color: var(--rv-primary);
}

.rv-btn-outline {
  background-color: transparent;
  border-color: var(--rv-primary-soft-border);
  color: var(--rv-primary);
  box-shadow: none;
}

.rv-btn-outline:hover:not(:disabled):not(.is-disabled) {
  background-color: var(--rv-primary-soft-bg);
  border-color: var(--rv-primary);
  color: var(--rv-primary-hover);
}

.rv-btn-outline:active:not(:disabled):not(.is-disabled) {
  background-color: var(--rv-primary-muted);
  border-color: var(--rv-primary-active);
  color: var(--rv-primary-active);
  transform: translateY(1px);
}

/* Anchor buttons — preserve variant colors (override base `a:hover`) */
a.rv-btn-primary,
a.rv-btn-primary:hover:not(:disabled):not(.is-disabled) {
  color: var(--rv-text-inverse);
}

a.rv-btn-danger,
a.rv-btn-danger:hover:not(:disabled):not(.is-disabled) {
  color: var(--rv-text-inverse);
}

a.rv-btn-secondary,
a.rv-btn-secondary:hover:not(:disabled):not(.is-disabled) {
  color: var(--rv-text);
}

a.rv-btn-ghost:hover:not(:disabled):not(.is-disabled) {
  color: var(--rv-text);
}

a.rv-btn-outline,
a.rv-btn-outline:hover:not(:disabled):not(.is-disabled) {
  color: var(--rv-primary);
}

a.rv-btn-outline:hover:not(:disabled):not(.is-disabled) {
  color: var(--rv-primary-hover);
}

/* --------------------------------------------------------------------------
   Loading state
   -------------------------------------------------------------------------- */

.rv-btn.is-loading,
.rv-btn-primary.is-loading,
.rv-btn-secondary.is-loading,
.rv-btn-danger.is-loading,
.rv-btn-ghost.is-loading,
.rv-btn-outline.is-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.rv-btn.is-loading::after,
.rv-btn-primary.is-loading::after,
.rv-btn-secondary.is-loading::after,
.rv-btn-danger.is-loading::after,
.rv-btn-ghost.is-loading::after,
.rv-btn-outline.is-loading::after {
  content: "";
  position: absolute;
  width: var(--rv-space-4);
  height: var(--rv-space-4);
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: var(--rv-radius-full);
  animation: rv-btn-spin var(--rv-duration-slower) linear infinite;
  color: var(--rv-text-inverse);
}

.rv-btn-secondary.is-loading::after,
.rv-btn-ghost.is-loading::after,
.rv-btn-outline.is-loading::after {
  color: var(--rv-primary);
}

@keyframes rv-btn-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Icon-only button helper */
.rv-btn--icon {
  padding: var(--rv-space-2);
  min-width: var(--rv-space-10);
}