/* Enhanced Button Loading Animation - Custom gradient border implementation */

@property --border-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0turn;
}

/* This creates a state that can be applied immediately before changing to loading */
.transition-disabled {
  transition: none !important;
}

/* Base loading state styles */
.swp-button-loading {
  position: relative !important;
  --border-angle: 0turn !important;
  padding: 0 !important; /* Reset padding on the button itself */
  margin: 0 !important;
  border: none !important;
  /* Maintain original background - no background reset */
  cursor: not-allowed !important;
  pointer-events: none !important;
  /* No transition to prevent content jump */
  min-width: var(--original-min-width) !important;
}

/* Wrapper-Content Structure for loading state */
.swp-button-loading::before {
  content: "" !important;
  position: absolute !important;
  top: calc(-1 * var(--trail-size)) !important;
  left: calc(-1 * var(--trail-size)) !important;
  right: calc(-1 * var(--trail-size)) !important;
  bottom: calc(-1 * var(--trail-size)) !important;
  border-radius: inherit !important;
  background: conic-gradient(
    from var(--border-angle),
    transparent 0deg,
    var(--glow-color) 100deg,
    transparent 120deg
  ) !important;
  animation: fade-in 0.6s ease-in forwards, spin-border 4s linear infinite !important;
}

/* Overlay for dimming effect */
.swp-button-loading::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(255, 255, 255, 0.4) !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  z-index: 2 !important;
}

/* Button content - preserves original background and padding */
.swp-button-loading-content {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  z-index: 1 !important;
  padding: var(--original-padding) !important; /* Use the original padding */
  border-radius: inherit !important;
  background: var(--original-bg, white) !important;
  color: var(--original-color, inherit) !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
}

/* Animation for spinning border */
@keyframes spin-border {
  from {
    --border-angle: 0turn;
  }
  to {
    --border-angle: 1turn;
  }
}

/* Fade-in animation for the border only */
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Error state styling (maintain for consistency) */
.swp-button-error {
  background-color: #f44336 !important;
  color: white !important;
  cursor: not-allowed !important;
}

/* Button loader spinner */
.swp-button-spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: inline-block;
  border-top: 2px solid var(--original-color, #FFF);
  border-right: 2px solid transparent;
  box-sizing: border-box;
  opacity: 0; /* Start with 0 opacity for fade-in */
  animation: fade-in 0.6s ease-in forwards, rotation 1s linear infinite;
  margin-right: 8px;
  vertical-align: middle;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Fallback for browsers that don't support @property */
@supports not (--border-angle: 0turn) {
  .swp-button-loading::before {
    background: transparent !important;
    border: var(--trail-size) solid var(--glow-color) !important;
    animation: fade-in 0.6s ease-in forwards, fallbackSpin 4s linear infinite !important;
  }
  
  @keyframes fallbackSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  
  @keyframes fallbackBorderColor {
    0% { border-color: #ff4545 !important; }
    25% { border-color: #00ff99 !important; }
    50% { border-color: #006aff !important; }
    75% { border-color: #ff0095 !important; }
    100% { border-color: #ff4545 !important; }
  }
}