/**
 * Action Buttons Component
 * Stateful icon buttons for participant actions
 */

/* Base action button - inherits from general button styles */
.action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
  width: 36px;
  height: 36px;
  font-size: var(--font-size-sm);
  color: var(--color-text-base);
  background: var(--color-bg-base);
  border: 1px solid var(--color-border-base);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  outline: none;
}

.action-btn:hover {
  background: var(--color-bg-subtle);
  border-color: var(--color-border-strong);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

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

.action-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Payment button states */
.action-btn--pay {
  /* Default: not paid - neutral */
  color: var(--color-text-muted);
  border-color: var(--color-border-base);
}

.action-btn--pay:hover {
  color: var(--ctp-green);
  border-color: var(--ctp-green);
  background: color-mix(in srgb, var(--ctp-green) 10%, transparent);
}

.action-btn--paid {
  /* Paid state - subtle green */
  color: var(--ctp-green);
  background: color-mix(in srgb, var(--ctp-green) 12%, transparent);
  border-color: color-mix(in srgb, var(--ctp-green) 30%, transparent);
}

.action-btn--paid:hover {
  background: color-mix(in srgb, var(--ctp-green) 20%, transparent);
  border-color: var(--ctp-green);
}

/* Check-in button states */
.action-btn--checkin {
  /* Default: not checked in - neutral */
  color: var(--color-text-muted);
  border-color: var(--color-border-base);
}

.action-btn--checkin:hover {
  color: var(--ctp-blue);
  border-color: var(--ctp-blue);
  background: var(--color-focus-ring);
}

.action-btn--checked-in {
  /* Checked in state - subtle blue */
  color: var(--ctp-blue);
  background: color-mix(in srgb, var(--ctp-blue) 12%, transparent);
  border-color: color-mix(in srgb, var(--ctp-blue) 30%, transparent);
}

.action-btn--checked-in:hover {
  background: color-mix(in srgb, var(--ctp-blue) 20%, transparent);
  border-color: var(--ctp-blue);
}

/* Delete/Remove button - danger */
.action-btn--danger {
  color: var(--color-text-muted);
  border-color: var(--color-border-base);
}

.action-btn--danger:hover:not(:disabled) {
  color: white;
  background: var(--ctp-red);
  border-color: var(--ctp-red);
}

.action-btn--danger:active:not(:disabled) {
  background: #b90d33;
  border-color: #b90d33;
}

/* Icon sizing within action buttons */
.action-btn i {
  font-size: 1rem;
}

/* Button group for action buttons */
.action-buttons {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
}

/* Mobile responsive */
@media (max-width: 767px) {
  .action-btn {
    width: 32px;
    height: 32px;
    padding: var(--space-1);
  }

  .action-btn i {
    font-size: 0.875rem;
  }

  .action-buttons {
    gap: var(--space-1);
  }
}