// ==========================================================================
// Button Components
// Professional Resume Builder - Button Styles
// ==========================================================================

// Base button enhancements
.btn {
  font-weight: 500;
  letter-spacing: 0.025em;
  border-radius: var(--border-radius-md);
  transition: all 0.2s ease-in-out;
  position: relative;
  overflow: hidden;
  
  &:hover:not(:disabled) {
    transform: translateY(-1px);
  }
  
  &:active:not(:disabled) {
    transform: translateY(0);
  }
  
  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
  
  // Button loading state
  &.btn-loading {
    color: transparent !important;
    
    &::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 1rem;
      height: 1rem;
      border: 2px solid currentColor;
      border-radius: 50%;
      border-top-color: transparent;
      animation: btn-spinner 0.8s linear infinite;
    }
  }
}

// Primary button variants
.btn-primary {
  background: var(--brand-gradient);
  border: none;
  color: var(--color-white);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
  
  &:hover:not(:disabled) {
    background: var(--brand-gradient-hover);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
  }
  
  &:focus {
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
  }
  
  &:active {
    background: var(--brand-primary-dark);
  }
}

.btn-primary-soft {
  background: rgba(102, 126, 234, 0.1);
  border: 1px solid rgba(102, 126, 234, 0.2);
  color: var(--brand-primary);
  
  &:hover:not(:disabled) {
    background: rgba(102, 126, 234, 0.15);
    border-color: rgba(102, 126, 234, 0.3);
    color: var(--brand-primary-dark);
  }
}

// Success button variants
.btn-success {
  background: var(--brand-gradient-success);
  border: none;
  color: var(--color-white);
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
  
  &:hover:not(:disabled) {
    background: var(--brand-gradient-success-hover);
    box-shadow: 0 6px 20px rgba(34, 197, 94, 0.4);
  }
  
  &:focus {
    box-shadow: 0 0 0 0.2rem rgba(34, 197, 94, 0.25);
  }
}

.btn-success-soft {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.2);
  color: var(--brand-success);
  
  &:hover:not(:disabled) {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.3);
    color: var(--brand-success-dark);
  }
}

// Warning button variants
.btn-warning {
  background: var(--brand-gradient-warning);
  border: none;
  color: var(--color-white);
  box-shadow: 0 4px 12px rgba(251, 191, 36, 0.3);
  
  &:hover:not(:disabled) {
    background: var(--brand-gradient-warning-hover);
    box-shadow: 0 6px 20px rgba(251, 191, 36, 0.4);
  }
  
  &:focus {
    box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.25);
  }
}

.btn-warning-soft {
  background: rgba(251, 191, 36, 0.1);
  border: 1px solid rgba(251, 191, 36, 0.2);
  color: var(--brand-warning);
  
  &:hover:not(:disabled) {
    background: rgba(251, 191, 36, 0.15);
    border-color: rgba(251, 191, 36, 0.3);
    color: var(--brand-warning-dark);
  }
}

// Danger button variants
.btn-danger {
  background: var(--brand-gradient-danger);
  border: none;
  color: var(--color-white);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
  
  &:hover:not(:disabled) {
    background: var(--brand-gradient-danger-hover);
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
  }
  
  &:focus {
    box-shadow: 0 0 0 0.2rem rgba(239, 68, 68, 0.25);
  }
}

.btn-danger-soft {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: var(--brand-danger);
  
  &:hover:not(:disabled) {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    color: var(--brand-danger-dark);
  }
}

// Outline button enhancements
.btn-outline-primary {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
  
  &:hover:not(:disabled) {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: var(--color-white);
  }
}

.btn-outline-success {
  border-color: var(--brand-success);
  color: var(--brand-success);
  
  &:hover:not(:disabled) {
    background: var(--brand-success);
    border-color: var(--brand-success);
    color: var(--color-white);
  }
}

.btn-outline-warning {
  border-color: var(--brand-warning);
  color: var(--brand-warning);
  
  &:hover:not(:disabled) {
    background: var(--brand-warning);
    border-color: var(--brand-warning);
    color: var(--color-white);
  }
}

.btn-outline-danger {
  border-color: var(--brand-danger);
  color: var(--brand-danger);
  
  &:hover:not(:disabled) {
    background: var(--brand-danger);
    border-color: var(--brand-danger);
    color: var(--color-white);
  }
}

// Button sizes
.btn-xs {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  border-radius: var(--border-radius-sm);
}

.btn-xl {
  padding: 1rem 2rem;
  font-size: 1.125rem;
  border-radius: var(--border-radius-lg);
}

// Button with icons
.btn-icon {
  display: inline-flex;
  align-items: center;
  
  i {
    margin-right: 0.5rem;
    
    &:last-child {
      margin-right: 0;
      margin-left: 0.5rem;
    }
  }
  
  &.btn-icon-only {
    padding: 0.625rem;
    
    i {
      margin: 0;
    }
  }
}

// Floating action button
.btn-fab {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 1050;
  
  &:hover:not(:disabled) {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
  }
  
  i {
    margin: 0;
  }
}

// Button groups
.btn-group {
  .btn {
    &:not(:first-child):not(:last-child) {
      border-radius: 0;
    }
    
    &:first-child {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
    
    &:last-child {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
    
    &:hover:not(:disabled) {
      transform: none;
      z-index: 1;
    }
  }
}

// Toggle buttons
.btn-toggle {
  background: var(--color-white);
  border: 2px solid var(--color-gray-200);
  color: var(--color-gray-600);
  
  &:hover:not(:disabled) {
    background: var(--color-gray-50);
    border-color: var(--color-gray-300);
  }
  
  &.active {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: var(--color-white);
    
    &:hover:not(:disabled) {
      background: var(--brand-primary-dark);
      border-color: var(--brand-primary-dark);
    }
  }
}

// Gradient buttons
.btn-gradient-purple {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  color: var(--color-white);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
  
  &:hover:not(:disabled) {
    background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
  }
}

.btn-gradient-orange {
  background: linear-gradient(135deg, #ff9a56 0%, #ff6b95 100%);
  border: none;
  color: var(--color-white);
  box-shadow: 0 4px 12px rgba(255, 154, 86, 0.3);
  
  &:hover:not(:disabled) {
    background: linear-gradient(135deg, #ff8a46 0%, #ff5b85 100%);
    box-shadow: 0 6px 20px rgba(255, 154, 86, 0.4);
  }
}

.btn-gradient-teal {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  color: var(--color-white);
  box-shadow: 0 4px 12px rgba(20, 184, 166, 0.3);
  
  &:hover:not(:disabled) {
    background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
    box-shadow: 0 6px 20px rgba(20, 184, 166, 0.4);
  }
}

// Social buttons
.btn-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border-radius: var(--border-radius-md);
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
  
  i {
    margin-right: 0.75rem;
    font-size: 1.125rem;
  }
  
  &:hover {
    transform: translateY(-1px);
    text-decoration: none;
  }
  
  &.btn-google {
    background: #db4437;
    color: var(--color-white);
    
    &:hover {
      background: #c23321;
      color: var(--color-white);
    }
  }
  
  &.btn-facebook {
    background: #3b5998;
    color: var(--color-white);
    
    &:hover {
      background: #2d4373;
      color: var(--color-white);
    }
  }
  
  &.btn-linkedin {
    background: #0077b5;
    color: var(--color-white);
    
    &:hover {
      background: #005885;
      color: var(--color-white);
    }
  }
  
  &.btn-github {
    background: #333;
    color: var(--color-white);
    
    &:hover {
      background: #24292e;
      color: var(--color-white);
    }
  }
}

// Button animations
@keyframes btn-spinner {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes btn-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(102, 126, 234, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(102, 126, 234, 0);
  }
}

.btn-pulse {
  animation: btn-pulse 2s infinite;
}

// Responsive button adjustments
@include media-breakpoint-down(sm) {
  .btn-fab {
    width: 3rem;
    height: 3rem;
    font-size: 1.125rem;
    bottom: 1.5rem;
    right: 1.5rem;
  }
  
  .btn-social {
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
    
    i {
      margin-right: 0.5rem;
      font-size: 1rem;
    }
  }
}