/* ImageWithFallback component styles */
.loadingContainer {
  background-color: #f8f9fa;
  overflow: hidden;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loadingSpinner {
  animation: spin 1s linear infinite;
  color: #6c757d;
}

.loadingSpinner circle:first-child {
  animation: dash 1.5s ease-in-out infinite;
}

.loadingText {
  margin-top: 8px;
  font-size: 11px;
  color: #6c757d;
  font-weight: 500;
}

.placeholderIcon {
  color: #6c757d;
  opacity: 0.7;
}

/* Spinner animation */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}

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

/* Error state */
.errorState {
  background-color: #f8d7da;
  color: #721c24;
}

/* Success state */
.successState {
  background-color: #d4edda;
  color: #155724;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .loadingText {
    font-size: 10px;
  }

  .placeholderIcon {
    width: 24px;
    height: 24px;
  }
}

/* Dark theme support */
@media (prefers-color-scheme: dark) {
  /* .loadingContainer {
    background-color: #343a40;
  } */

  .loadingText {
    color: #adb5bd;
  }

  .placeholderIcon {
    color: #adb5bd;
  }
}

/* HTML: <div class="loader"></div> */
.loader {
  width: 30px;
  aspect-ratio: 1;
  display: grid;
  border-radius: 50%;
  background:
    linear-gradient(0deg, rgb(0 0 0/50%) 30%, #0000 0 70%, rgb(0 0 0/100%) 0)
      50%/8% 100%,
    linear-gradient(90deg, rgb(0 0 0/25%) 30%, #0000 0 70%, rgb(0 0 0/75%) 0)
      50%/100% 8%;
  background-repeat: no-repeat;
  animation: l23 1s infinite steps(12);
}
.loader::before,
.loader::after {
  content: "";
  grid-area: 1/1;
  border-radius: 50%;
  background: inherit;
  opacity: 0.915;
  transform: rotate(30deg);
}
.loader::after {
  opacity: 0.83;
  transform: rotate(60deg);
}
@keyframes l23 {
  100% {
    transform: rotate(1turn);
  }
}
