// =============================================================================
// FORM BUTTONS
// Button hover and active shadow effects
// =============================================================================

// Add shadows to buttons on hover
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08) !important;
  transition: all 0.2s ease-in-out !important;
  transform: translateY(-1px) !important;
}

// Add shadows to buttons on active
.button:active,
button:active,
input[type="submit"]:active,
input[type="button"]:active {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16), 0 1px 2px rgba(0, 0, 0, 0.12) !important;
  transform: translateY(0) !important;
  transition: all 0.1s ease-in-out !important;
}

// Special styling for success buttons
.button.success:hover {
  box-shadow: 0 3px 8px rgba(40, 167, 69, 0.15),
    0 2px 4px rgba(40, 167, 69, 0.10) !important;
}

// Special styling for alert buttons
.button.alert:hover {
  box-shadow: 0 3px 8px rgba(220, 53, 69, 0.15),
    0 2px 4px rgba(220, 53, 69, 0.10) !important;
}

// Edit button with custom hover effects
.edit-button {
  display: inline-block;
  background: #f8f9fa;
  color: #6c757d;
  padding: 6px 12px;
  border-radius: 4px;
  text-decoration: none;
  font-size: 0.85rem;
  border: 1px solid #e9ecef;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.2s ease;

  &:hover {
    background: #e9ecef;
    color: #495057;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    text-decoration: none;
  }
}
