/**
 * Buttons
 */

.v-btn {
  --v-btn-bg: var(--v-color-primary);
  --v-btn-color: var(--v-color-on-primary);
  --v-btn-border: var(--v-color-primary);
  --v-btn-hover-bg: var(--v-color-primary-hover);
  --v-btn-hover-color: var(--v-color-on-primary);
  --v-btn-height: var(--v-control-height-md);
  --v-btn-px: 1.25rem;
  --v-btn-fs: var(--v-text-sm);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--v-space-2);
  min-height: var(--v-btn-height);
  padding: 0 var(--v-btn-px);
  border: 1px solid var(--v-btn-border);
  border-radius: var(--v-radius-control);
  background: var(--v-btn-bg);
  color: var(--v-btn-color);
  font-family: var(--v-font-body);
  font-size: var(--v-btn-fs);
  font-weight: var(--v-font-weight-semibold);
  letter-spacing: var(--v-letter-wide);
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
  transition:
    background-color var(--v-duration-fast) var(--v-ease-standard),
    color var(--v-duration-fast) var(--v-ease-standard),
    border-color var(--v-duration-fast) var(--v-ease-standard),
    transform var(--v-duration-fast) var(--v-ease-standard),
    opacity var(--v-duration-fast) var(--v-ease-standard);
}

.v-btn:hover {
  background: var(--v-btn-hover-bg);
  color: var(--v-btn-hover-color);
  border-color: var(--v-btn-hover-bg);
  text-decoration: none;
}

.v-btn:active {
  transform: translateY(1px);
}

.v-btn:disabled,
.v-btn[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}

.v-btn--secondary {
  --v-btn-bg: transparent;
  --v-btn-color: var(--v-color-ink);
  --v-btn-border: var(--v-color-ink);
  --v-btn-hover-bg: var(--v-color-ink);
  --v-btn-hover-color: var(--v-color-paper);
}

.v-btn--ghost {
  --v-btn-bg: transparent;
  --v-btn-color: var(--v-color-ink);
  --v-btn-border: transparent;
  --v-btn-hover-bg: var(--v-color-surface-sunken);
  --v-btn-hover-color: var(--v-color-ink);
}

.v-btn--accent {
  --v-btn-bg: var(--v-color-accent);
  --v-btn-color: var(--v-color-on-accent);
  --v-btn-border: var(--v-color-accent);
  --v-btn-hover-bg: var(--v-color-accent-hover);
  --v-btn-hover-color: var(--v-color-on-accent);
}

.v-btn--soft {
  --v-btn-bg: var(--v-color-paper-warm);
  --v-btn-color: var(--v-color-ink);
  --v-btn-border: var(--v-color-paper-warm);
  --v-btn-hover-bg: var(--v-color-border);
  --v-btn-hover-color: var(--v-color-ink);
}

.v-btn--sm {
  --v-btn-height: var(--v-control-height-sm);
  --v-btn-px: 0.875rem;
  --v-btn-fs: var(--v-text-xs);
}

.v-btn--lg {
  --v-btn-height: var(--v-control-height-lg);
  --v-btn-px: 1.75rem;
  --v-btn-fs: var(--v-text-md);
}

.v-btn--block {
  width: 100%;
}

.v-btn--icon {
  --v-btn-px: 0;
  width: var(--v-btn-height);
  padding: 0;
}

.v-btn__icon {
  display: inline-flex;
  width: var(--v-icon-size-md);
  height: var(--v-icon-size-md);
}

.v-btn--loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.v-btn--loading::after {
  content: "";
  position: absolute;
  width: 1rem;
  height: 1rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--v-radius-circle);
  color: var(--v-btn-color);
  animation: v-spin var(--v-duration-slower) linear infinite;
}