/* Button Components */

/* Base Button */
button,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-lg);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-family-base);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all var(--transition-fast);
  user-select: none;
  -webkit-user-select: none;
  -webkit-app-region: no-drag;
}

button:disabled,
.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

button:focus-visible,
.button:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

/* Primary Button */
.button-primary,
button.primary {
  background-color: var(--primary-blue);
  color: white;
  border-color: var(--primary-blue);
}

.button-primary:hover,
button.primary:hover {
  background-color: var(--primary-blue-hover);
  box-shadow: var(--shadow-md);
}

.button-primary:active,
button.primary:active {
  background-color: var(--primary-blue-active);
  transform: scale(0.98);
}

/* Secondary Button */
.button-secondary,
button.secondary {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--border-color);
}

.button-secondary:hover,
button.secondary:hover {
  background-color: var(--bg-tertiary);
  border-color: var(--text-secondary);
}

.button-secondary:active,
button.secondary:active {
  background-color: var(--border-color);
}

/* Outline Button */
.button-outline,
button.outline {
  background-color: transparent;
  color: var(--text-primary);
  border-color: var(--border-color);
}

.button-outline:hover,
button.outline:hover {
  background-color: var(--bg-secondary);
  border-color: var(--text-secondary);
}

.button-outline:active,
button.outline:active {
  background-color: var(--bg-tertiary);
}

/* Danger Button */
.button-danger,
button.danger {
  background-color: var(--accent-red);
  color: white;
  border-color: var(--accent-red);
}

.button-danger:hover,
button.danger:hover {
  background-color: #d13438;
  opacity: 0.9;
  box-shadow: var(--shadow-md);
}

.button-danger:active,
button.danger:active {
  opacity: 0.8;
}

/* Success Button */
.button-success,
button.success {
  background-color: var(--accent-green);
  color: white;
  border-color: var(--accent-green);
}

.button-success:hover,
button.success:hover {
  background-color: #0d7d3a;
  box-shadow: var(--shadow-md);
}

/* Ghost Button */
.button-ghost,
button.ghost {
  background-color: transparent;
  color: var(--primary-blue);
  border-color: transparent;
}

.button-ghost:hover,
button.ghost:hover {
  background-color: rgba(0, 120, 212, 0.1);
}

.button-ghost:active,
button.ghost:active {
  background-color: rgba(0, 120, 212, 0.2);
}

/* Icon Button */
.button-icon,
button.icon {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: var(--radius-md);
  background-color: transparent;
  border-color: transparent;
}

.button-icon:hover,
button.icon:hover {
  background-color: var(--bg-tertiary);
}

/* Small Button */
.button-sm,
button.sm {
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: var(--font-size-sm);
}

/* Large Button */
.button-lg,
button.lg {
  padding: var(--spacing-md) var(--spacing-xl);
  font-size: var(--font-size-lg);
  border-radius: var(--radius-lg);
}

/* Full Width Button */
.button-block,
button.block {
  width: 100%;
}

/* Button Loading State */
.button.loading {
  pointer-events: none;
}

.button.loading::after {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-left: var(--spacing-sm);
}

/* Button Group */
.button-group {
  display: inline-flex;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.button-group > button,
.button-group > .button {
  border-radius: 0;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.button-group > button:first-child,
.button-group > .button:first-child {
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.button-group > button:last-child,
.button-group > .button:last-child {
  border-right: none;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* Link as Button */
a.button {
  text-decoration: none;
  display: inline-flex;
}

/* Tooltip on Hover */
button[title],
.button[title] {
  position: relative;
}