/**
 * LiveBinding Component Styles
 * Minimal styling for states and animations
 * 
 * @version 1.0.0
 */

/* ============================================================================
   BINDING STATES
   ============================================================================ */

/* Loading state */
.live-binding-loading {
  position: relative;
  min-height: 1em;
}

/* Error state */
.live-binding-error {
  color: var(--danger);
}

/* ============================================================================
   UPDATE ANIMATION
   ============================================================================ */

/* Flash animation on update */
@keyframes live-binding-flash {
  0% {
    background-color: rgba(var(--primary-rgb, 13, 110, 253), 0.15);
  }
  100% {
    background-color: transparent;
  }
}

.live-binding-updated {
  animation: live-binding-flash 0.3s ease-out;
}

/* Subtle highlight option */
.live-binding-highlight-update .live-binding-updated {
  animation: none;
  box-shadow: inset 0 0 0 2px rgba(var(--primary-rgb, 13, 110, 253), 0.3);
  transition: box-shadow 0.3s ease;
}

/* ============================================================================
   BADGE ANIMATIONS
   ============================================================================ */

@keyframes badge-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

.badge-pulse {
  animation: badge-pulse 0.3s ease-out;
}

/* Counter increment animation */
@keyframes badge-bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

.badge-bounce {
  animation: badge-bounce 0.2s ease-out;
}

/* ============================================================================
   STREAMING DATA EFFECTS
   ============================================================================ */

/* New item slide-in */
@keyframes live-item-enter {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.live-binding-append > *:last-child {
  animation: live-item-enter 0.2s ease-out;
}

.live-binding-prepend > *:first-child {
  animation: live-item-enter 0.2s ease-out;
}

/* ============================================================================
   TABLE ROW UPDATES
   ============================================================================ */

/* Row update flash */
@keyframes live-row-update {
  0% {
    background-color: rgba(var(--success-rgb, 25, 135, 84), 0.2);
  }
  100% {
    background-color: transparent;
  }
}

.live-row-updated {
  animation: live-row-update 0.5s ease-out;
}

/* Row added highlight */
@keyframes live-row-added {
  0% {
    background-color: rgba(var(--info-rgb, 13, 202, 240), 0.3);
    opacity: 0;
  }
  100% {
    background-color: transparent;
    opacity: 1;
  }
}

.live-row-added {
  animation: live-row-added 0.4s ease-out;
}

/* Row removing fade */
@keyframes live-row-removing {
  to {
    opacity: 0;
    transform: translateX(20px);
  }
}

.live-row-removing {
  animation: live-row-removing 0.3s ease-in forwards;
}

/* ============================================================================
   VALUE CHANGE INDICATORS
   ============================================================================ */

/* Price up/down animations */
.live-value-up {
  color: var(--success) !important;
}

.live-value-down {
  color: var(--danger) !important;
}

@keyframes value-flash-up {
  0% {
    background-color: rgba(var(--success-rgb, 25, 135, 84), 0.3);
  }
  100% {
    background-color: transparent;
  }
}

@keyframes value-flash-down {
  0% {
    background-color: rgba(var(--danger-rgb, 220, 53, 69), 0.3);
  }
  100% {
    background-color: transparent;
  }
}

.live-value-flash-up {
  animation: value-flash-up 0.5s ease-out;
}

.live-value-flash-down {
  animation: value-flash-down 0.5s ease-out;
}

/* ============================================================================
   SKELETON INTEGRATION
   ============================================================================ */

/* When using skeleton loading */
.live-binding-loading .skeleton-shimmer {
  display: block;
}

/* ============================================================================
   DARK THEME
   ============================================================================ */

[data-theme="dark"] .live-binding-updated,
.dark-mode .live-binding-updated {
  animation-name: live-binding-flash-dark;
}

@keyframes live-binding-flash-dark {
  0% {
    background-color: rgba(var(--primary-rgb, 13, 110, 253), 0.25);
  }
  100% {
    background-color: transparent;
  }
}

[data-theme="dark"] .live-row-updated,
.dark-mode .live-row-updated {
  animation-name: live-row-update-dark;
}

@keyframes live-row-update-dark {
  0% {
    background-color: rgba(var(--success-rgb, 25, 135, 84), 0.3);
  }
  100% {
    background-color: transparent;
  }
}

[data-theme="dark"] .live-value-flash-up,
.dark-mode .live-value-flash-up {
  animation-name: value-flash-up-dark;
}

@keyframes value-flash-up-dark {
  0% {
    background-color: rgba(var(--success-rgb, 25, 135, 84), 0.4);
  }
  100% {
    background-color: transparent;
  }
}

[data-theme="dark"] .live-value-flash-down,
.dark-mode .live-value-flash-down {
  animation-name: value-flash-down-dark;
}

@keyframes value-flash-down-dark {
  0% {
    background-color: rgba(var(--danger-rgb, 220, 53, 69), 0.4);
  }
  100% {
    background-color: transparent;
  }
}