/* Consent Angel Design System - Button Components */

/* Base button component with common styles */
.btn-base {
  @apply inline-flex items-center justify-center font-medium rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed;
}

/* Functional button color variants */
.btn-view {
  @apply btn-base bg-info-600 text-white hover:bg-info-700 active:bg-info-800 focus:ring-info-500;
}

.btn-edit {
  @apply btn-base bg-warning-600 text-white hover:bg-warning-700 active:bg-warning-800 focus:ring-warning-500;
}

.btn-delete {
  @apply btn-base bg-danger-600 text-white hover:bg-danger-700 active:bg-danger-800 focus:ring-danger-500;
}

.btn-create {
  @apply btn-base bg-success-600 text-white hover:bg-success-700 active:bg-success-800 focus:ring-success-500;
}

.btn-approve {
  @apply btn-base bg-success-600 text-white hover:bg-success-700 active:bg-success-800 focus:ring-success-500;
}

.btn-primary {
  @apply btn-base bg-primary-600 text-white hover:bg-primary-700 active:bg-primary-800 focus:ring-primary-500;
}

.btn-cancel {
  @apply btn-base bg-neutral-500 text-white hover:bg-neutral-600 active:bg-neutral-700 focus:ring-neutral-400;
}

.btn-secondary {
  @apply btn-base bg-white text-neutral-700 border border-neutral-300 hover:bg-neutral-50 active:bg-neutral-100 focus:ring-primary-500;
}

/* Size variants */
.btn-sm {
  @apply py-1.5 px-3 text-sm min-h-[32px];
}

.btn {
  @apply py-2 px-4 text-sm min-h-[36px];
}

.btn-lg {
  @apply py-2.5 px-6 text-base min-h-[44px];
}

/* Navigation button styles */
.nav-button {
  @apply btn-base btn bg-neutral-100 text-neutral-700 hover:bg-neutral-200 active:bg-neutral-300 focus:ring-neutral-400;
}

.nav-button-active {
  @apply btn-base btn bg-primary-600 text-white hover:bg-primary-700 active:bg-primary-800 focus:ring-primary-500;
}

/* Table action button group */
.table-actions {
  @apply flex items-center space-x-2;
}

.table-actions .btn {
  @apply btn-sm;
}

/* Mobile responsive adjustments */
@media (max-width: 393px) {
  .btn {
    @apply min-h-[44px] px-3;
  }
  
  .btn-sm {
    @apply min-h-[40px] px-2;
  }
  
  .table-actions {
    @apply flex-col space-x-0 space-y-1;
  }
  
  .table-actions .btn {
    @apply w-full;
  }
}

/* Focus visible for keyboard navigation */
.btn-base:focus-visible {
  @apply ring-2 ring-offset-2;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .btn-base {
    @apply border-2 border-current;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .btn-base {
    @apply transition-none;
  }
}