/**
 * MSM-Group Premium Button System
 *
 * Features:
 * - Material Design ripple effects
 * - Multiple variants (primary, secondary, outline, ghost)
 * - Multiple sizes (sm, md, lg, xl)
 * - Loading states with spinner
 * - Disabled states
 * - Icon support
 * - Accessibility compliant (WCAG 2.1)
 * - Smooth spring animations
 * - GPU accelerated
 *
 * Usage: Add class "msm-btn" + variant + size
 * Example: <button class="msm-btn msm-btn-primary msm-btn-lg">Click Me</button>
 */

/* ========================================
   BASE BUTTON STYLES
   ======================================== */

.msm-btn {
  /* Reset default button styles */
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--msm-space-2);

  /* Typography */
  font-family: var(--msm-font-primary);
  font-size: var(--msm-font-size-base);
  font-weight: var(--msm-font-weight-semibold);
  line-height: var(--msm-line-height-tight);
  letter-spacing: var(--msm-letter-spacing-wide);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;

  /* Sizing - Default (md) */
  height: var(--msm-button-height-md);
  padding: 0 var(--msm-space-6);
  min-width: 120px;

  /* Visual */
  border: 2px solid transparent;
  border-radius: var(--msm-radius-button);
  background: var(--msm-gradient-primary);
  color: var(--msm-color-text-inverse);
  box-shadow: var(--msm-shadow-md);

  /* Interaction */
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden; /* Contain ripple effect */

  /* Transitions - Spring physics for premium feel */
  transition:
    transform var(--msm-duration-normal) var(--msm-ease-spring),
    box-shadow var(--msm-duration-normal) var(--msm-ease-out),
    background-color var(--msm-duration-fast) var(--msm-ease-out),
    border-color var(--msm-duration-fast) var(--msm-ease-out),
    opacity var(--msm-duration-fast) var(--msm-ease-out);

  /* Performance */
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;
}

/* Hover State */
.msm-btn:not(:disabled):not(.msm-btn-loading):hover {
  transform: translateY(-2px);
  box-shadow: var(--msm-shadow-lg);
  background: var(--msm-gradient-primary-hover);
}

/* Active State */
.msm-btn:not(:disabled):not(.msm-btn-loading):active {
  transform: translateY(0);
  box-shadow: var(--msm-shadow-sm);
  transition-duration: var(--msm-duration-fast);
}

/* Focus State - Accessibility */
.msm-btn:focus {
  outline: none;
  box-shadow:
    var(--msm-shadow-md),
    0 0 0 var(--msm-focus-ring-width) var(--msm-focus-ring-color);
}

.msm-btn:focus:not(:focus-visible) {
  box-shadow: var(--msm-shadow-md);
}

/* Disabled State */
.msm-btn:disabled,
.msm-btn.msm-btn-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  pointer-events: none;
}

/* ========================================
   BUTTON VARIANTS
   ======================================== */

/* PRIMARY VARIANT (default gradient) */
.msm-btn-primary {
  background: var(--msm-gradient-primary);
  color: var(--msm-color-text-inverse);
  border-color: transparent;
  box-shadow: var(--msm-shadow-primary);
}

.msm-btn-primary:hover {
  background: var(--msm-gradient-primary-hover);
  box-shadow: var(--msm-shadow-primary);
}

/* SECONDARY VARIANT (solid color) */
.msm-btn-secondary {
  background: var(--msm-color-secondary-500);
  color: var(--msm-color-text-inverse);
  border-color: transparent;
  box-shadow: var(--msm-shadow-secondary);
}

.msm-btn-secondary:hover {
  background: var(--msm-color-secondary-600);
  box-shadow: var(--msm-shadow-secondary);
}

/* OUTLINE VARIANT (transparent with border) */
.msm-btn-outline {
  background: transparent;
  color: var(--msm-color-primary-500);
  border-color: var(--msm-color-primary-500);
  box-shadow: none;
}

.msm-btn-outline:hover {
  background: var(--msm-color-primary-50);
  border-color: var(--msm-color-primary-600);
  color: var(--msm-color-primary-600);
  box-shadow: var(--msm-shadow-sm);
}

.msm-btn-outline:active {
  background: var(--msm-color-primary-100);
}

/* GHOST VARIANT (minimal styling) */
.msm-btn-ghost {
  background: transparent;
  color: var(--msm-color-primary-500);
  border-color: transparent;
  box-shadow: none;
}

.msm-btn-ghost:hover {
  background: var(--msm-color-primary-50);
  color: var(--msm-color-primary-600);
}

.msm-btn-ghost:active {
  background: var(--msm-color-primary-100);
}

/* SUCCESS VARIANT */
.msm-btn-success {
  background: var(--msm-color-success-500);
  color: var(--msm-color-text-inverse);
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

.msm-btn-success:hover {
  background: var(--msm-color-success-700);
}

/* WARNING VARIANT */
.msm-btn-warning {
  background: var(--msm-color-warning-500);
  color: var(--msm-color-neutral-900);
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
}

.msm-btn-warning:hover {
  background: var(--msm-color-warning-700);
  color: var(--msm-color-text-inverse);
}

/* ERROR/DANGER VARIANT */
.msm-btn-error,
.msm-btn-danger {
  background: var(--msm-color-error-500);
  color: var(--msm-color-text-inverse);
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(244, 67, 54, 0.3);
}

.msm-btn-error:hover,
.msm-btn-danger:hover {
  background: var(--msm-color-error-700);
}

/* ========================================
   BUTTON SIZES
   ======================================== */

/* Small */
.msm-btn-sm {
  height: var(--msm-button-height-sm);
  padding: 0 var(--msm-space-4);
  font-size: var(--msm-font-size-sm);
  min-width: 80px;
}

/* Medium (default - already defined in base) */
.msm-btn-md {
  height: var(--msm-button-height-md);
  padding: 0 var(--msm-space-6);
  font-size: var(--msm-font-size-base);
  min-width: 120px;
}

/* Large */
.msm-btn-lg {
  height: var(--msm-button-height-lg);
  padding: 0 var(--msm-space-8);
  font-size: var(--msm-font-size-lg);
  min-width: 160px;
}

/* Extra Large */
.msm-btn-xl {
  height: var(--msm-button-height-xl);
  padding: 0 var(--msm-space-10);
  font-size: var(--msm-font-size-xl);
  min-width: 200px;
}

/* ========================================
   BUTTON MODIFIERS
   ======================================== */

/* Full Width */
.msm-btn-block {
  display: flex;
  width: 100%;
  min-width: auto;
}

/* Pill Shape (fully rounded) */
.msm-btn-pill {
  border-radius: var(--msm-radius-full);
}

/* Icon Only (square/circle) */
.msm-btn-icon {
  min-width: auto;
  padding: 0;
  width: var(--msm-button-height-md);
  aspect-ratio: 1;
}

.msm-btn-icon.msm-btn-sm {
  width: var(--msm-button-height-sm);
}

.msm-btn-icon.msm-btn-lg {
  width: var(--msm-button-height-lg);
}

.msm-btn-icon.msm-btn-xl {
  width: var(--msm-button-height-xl);
}

/* Icon + Text Buttons */
.msm-btn-with-icon-left {
  padding-left: var(--msm-space-5);
}

.msm-btn-with-icon-right {
  padding-right: var(--msm-space-5);
}

/* ========================================
   LOADING STATE
   ======================================== */

.msm-btn-loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.msm-btn-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: msm-spin 0.6s linear infinite;
  color: var(--msm-color-text-inverse);
}

.msm-btn-outline.msm-btn-loading::after,
.msm-btn-ghost.msm-btn-loading::after {
  color: var(--msm-color-primary-500);
}

/* ========================================
   RIPPLE EFFECT
   Material Design ripple animation
   ======================================== */

.msm-btn-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  transform: scale(0);
  animation: msm-ripple-out 0.6s var(--msm-ease-out);
  pointer-events: none;
}

@keyframes msm-ripple-out {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* Ripple color variants */
.msm-btn-outline .msm-btn-ripple,
.msm-btn-ghost .msm-btn-ripple {
  background: rgba(0, 180, 217, 0.3);
}

/* ========================================
   BUTTON GROUPS
   Connect multiple buttons
   ======================================== */

.msm-btn-group {
  display: inline-flex;
  align-items: center;
  gap: 0;
}

.msm-btn-group .msm-btn {
  border-radius: 0;
  margin-left: -2px;
}

.msm-btn-group .msm-btn:first-child {
  border-top-left-radius: var(--msm-radius-button);
  border-bottom-left-radius: var(--msm-radius-button);
  margin-left: 0;
}

.msm-btn-group .msm-btn:last-child {
  border-top-right-radius: var(--msm-radius-button);
  border-bottom-right-radius: var(--msm-radius-button);
}

.msm-btn-group .msm-btn:hover {
  z-index: 1;
}

/* ========================================
   ICON STYLING
   FontAwesome or custom icons
   ======================================== */

.msm-btn i,
.msm-btn .fa,
.msm-btn .fas,
.msm-btn .far,
.msm-btn .fab {
  font-size: 1.1em;
  line-height: 1;
}

.msm-btn svg {
  width: 1.1em;
  height: 1.1em;
  fill: currentColor;
}

/* ========================================
   MOBILE OPTIMIZATIONS
   Touch-friendly on mobile devices
   ======================================== */

@media (max-width: 768px) {
  .msm-btn {
    min-height: var(--msm-touch-target-min);
    min-width: var(--msm-touch-target-min);
    padding: 0 var(--msm-space-5);
  }

  .msm-btn-sm {
    min-height: var(--msm-touch-target-min);
    padding: 0 var(--msm-space-4);
  }

  /* Make block buttons full width on mobile */
  .msm-btn-mobile-block {
    display: flex;
    width: 100%;
  }
}

/* ========================================
   SPECIAL EFFECTS
   Premium visual enhancements
   ======================================== */

/* Glowing effect */
.msm-btn-glow {
  animation: msm-glow 2s ease-in-out infinite;
}

/* Pulsing effect */
.msm-btn-pulse {
  animation: msm-pulse 2s ease-in-out infinite;
}

/* Shimmer effect */
.msm-btn-shimmer {
  overflow: hidden;
  position: relative;
}

.msm-btn-shimmer::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  animation: msm-shine 3s infinite;
}

/* ========================================
   ACCESSIBILITY
   Screen reader and keyboard navigation
   ======================================== */

/* Hide visually but keep for screen readers */
.msm-btn .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .msm-btn {
    border-width: 3px;
  }
}

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

  .msm-btn:hover {
    transform: none;
  }

  .msm-btn-ripple {
    display: none;
  }

  .msm-btn-loading::after {
    animation: none;
    border: 2px solid currentColor;
    border-top-color: transparent;
  }
}

/* ========================================
   UTILITY CLASSES
   Quick style adjustments
   ======================================== */

.msm-btn-no-shadow {
  box-shadow: none !important;
}

.msm-btn-no-transform:hover {
  transform: none !important;
}

.msm-btn-uppercase {
  text-transform: uppercase;
  letter-spacing: var(--msm-letter-spacing-wider);
}

.msm-btn-lowercase {
  text-transform: lowercase;
}

.msm-btn-capitalize {
  text-transform: capitalize;
}

/* ========================================
   DARK MODE SUPPORT (Optional)
   Uncomment to enable dark mode variants
   ======================================== */

/*
@media (prefers-color-scheme: dark) {
  .msm-btn-outline {
    border-color: var(--msm-color-primary-300);
    color: var(--msm-color-primary-300);
  }

  .msm-btn-outline:hover {
    background: rgba(0, 180, 217, 0.1);
    border-color: var(--msm-color-primary-200);
    color: var(--msm-color-primary-200);
  }

  .msm-btn-ghost {
    color: var(--msm-color-primary-300);
  }

  .msm-btn-ghost:hover {
    background: rgba(0, 180, 217, 0.1);
    color: var(--msm-color-primary-200);
  }
}
*/