@import "tailwindcss";

/* Search loading bar animation */
@keyframes search-bar {
  0% {
    width: 0%;
    opacity: 1;
  }
  20% {
    width: 40%;
    opacity: 1;
  }
  50% {
    width: 70%;
    opacity: 1;
  }
  80% {
    width: 90%;
    opacity: 1;
  }
  100% {
    width: 90%;
    opacity: 1;
  }
}

@keyframes search-bar-shimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

.animate-search-bar {
  animation: search-bar 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  background: linear-gradient(
    90deg,
    theme(--color-emerald-400),
    theme(--color-emerald-300),
    theme(--color-emerald-400)
  );
  background-size: 200% 100%;
  animation:
    search-bar 2s cubic-bezier(0.4, 0, 0.2, 1) forwards,
    search-bar-shimmer 1.5s ease-in-out infinite;
}

.search-loading .search-input-glow {
  box-shadow: 0 0 0 2px theme(--color-emerald-400/40), 0 0 20px theme(--color-emerald-400/15);
  transition: box-shadow 0.3s ease;
}