/**
 * ImageWithFallback Component Styles
 * 
 * This stylesheet contains all the styles for the ImageWithFallback component,
 * including loading states, error states, and animations.
 */

/* Loading container - used for both the placeholder and the actual loading state */
.loadingContainer {
  background-color: #f8f9fa;
  overflow: hidden;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Loading state transitions */
.loadingState {
  transition: opacity 0.3s ease-in-out;
  background-color: #f8f9fa;
  z-index: 2;
}

/* Error state - applied when image fails to load */
.errorState {
  background-color: #f8d7da;
  color: #721c24;
  border-radius: 4px;
}

:global(.darkApp) .loadingContainer {
  background-color: #343a40;
}

:global(.darkApp) .loadingState {
  background-color: #343a40;
}

:global(.darkApp) .errorState {
  background-color: #45232a;
}