/**
 * Virstak UI — кнопки (.vbtn)
 * https://ui.virstak.ru/vui-button.css
 */

.vbtn {
  --vbtn-bg: transparent;
  --vbtn-fg: var(--color-text);
  --vbtn-border: transparent;
  --vbtn-shadow: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--control-gap);
  height: var(--control-h-md);
  min-height: var(--control-h-md);
  padding: 0 var(--control-px-md);
  border: none;
  border-radius: var(--radius-3);
  background: var(--vbtn-bg);
  color: var(--vbtn-fg);
  font-family: var(--font-sans, 'DM Sans', sans-serif);
  font-size: var(--control-font-md);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  box-shadow: var(--vbtn-shadow);
  text-decoration: none;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    opacity 0.15s ease,
    transform 0.12s ease;
}

a.vbtn {
  text-decoration: none;
}

.vbtn:focus-visible {
  outline: none;
  box-shadow: var(--vbtn-shadow), var(--focus-ring);
}

.vbtn:active:not(:disabled) {
  transform: scale(0.98);
}

.vbtn:disabled,
.vbtn[aria-busy='true'] {
  opacity: var(--control-disabled-opacity, 0.48);
  cursor: not-allowed;
  transform: none;
  pointer-events: none;
}

.vbtn--full {
  width: 100%;
}

.vbtn--sm {
  height: var(--control-h-sm);
  min-height: var(--control-h-sm);
  padding: 0 var(--control-px-sm);
  font-size: var(--control-font-sm);
  gap: var(--space-3);
}

.vbtn--lg {
  height: var(--control-h-lg);
  min-height: var(--control-h-lg);
  padding: 0 var(--control-px-lg);
  font-size: var(--control-font-lg);
}

.vbtn--icon {
  width: var(--control-h-md);
  min-width: var(--control-h-md);
  padding: 0;
}

.vbtn--sm.vbtn--icon {
  width: var(--control-h-sm);
  min-width: var(--control-h-sm);
}

.vbtn--lg.vbtn--icon {
  width: var(--control-h-lg);
  min-width: var(--control-h-lg);
}

.vbtn--primary {
  --vbtn-bg: var(--color-accent);
  --vbtn-fg: var(--color-text-on-accent);
}

.vbtn--primary:hover:not(:disabled) {
  opacity: 0.85;
}

.vbtn--secondary {
  --vbtn-bg: var(--color-active);
  --vbtn-fg: var(--color-text);
}

.vbtn--secondary:hover:not(:disabled) {
  --vbtn-bg: var(--color-hover);
}

.vbtn--ghost {
  --vbtn-bg: transparent;
  --vbtn-fg: var(--color-text-secondary);
}

.vbtn--ghost:hover:not(:disabled) {
  --vbtn-bg: var(--color-active);
  --vbtn-fg: var(--color-text);
}

.vbtn--soft {
  --vbtn-bg: var(--color-active);
  --vbtn-fg: var(--color-text-secondary);
}

.vbtn--soft:hover:not(:disabled),
.vbtn--soft.vbtn--active {
  --vbtn-bg: var(--color-active);
  --vbtn-fg: var(--color-text);
}

.vbtn--warning {
  --vbtn-bg: color-mix(in srgb, var(--color-warning) 12%, transparent);
  --vbtn-fg: var(--color-warning);
}

.vbtn--warning:hover:not(:disabled) {
  --vbtn-bg: color-mix(in srgb, var(--color-warning) 20%, transparent);
}

.vbtn--danger {
  --vbtn-bg: color-mix(in srgb, var(--color-danger) 12%, transparent);
  --vbtn-fg: var(--color-danger);
}

.vbtn--danger:hover:not(:disabled) {
  --vbtn-bg: color-mix(in srgb, var(--color-danger) 20%, transparent);
}

.vbtn--success {
  --vbtn-bg: color-mix(in srgb, var(--color-accent) 15%, transparent);
  --vbtn-fg: color-mix(in srgb, var(--color-accent) 78%, var(--color-text));
}

.vbtn--success:hover:not(:disabled) {
  --vbtn-bg: color-mix(in srgb, var(--color-accent) 25%, transparent);
}

.vbtn__spinner {
  width: 14px;
  height: 14px;
  border: 2px solid color-mix(in srgb, currentColor 25%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: vbtn-spin 0.65s linear infinite;
}

.vbtn--sm .vbtn__spinner {
  width: 12px;
  height: 12px;
}

.vbtn--lg .vbtn__spinner {
  width: 16px;
  height: 16px;
}

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

@media (prefers-reduced-motion: reduce) {
  .vbtn__spinner {
    animation: none;
  }
}