/* Reserve the original control geometry while its initial data is loading. */
.evi-filter-loading[aria-busy='true'] .evi-filter-loading-slot {
  position: relative;
  overflow: hidden;
  color: transparent !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
  pointer-events: none;
  cursor: default;
}

.evi-filter-loading[aria-busy='true'] .evi-filter-loading-slot > * {
  visibility: hidden;
}

.evi-filter-loading[aria-busy='true'] .evi-filter-loading-slot::after {
  content: '';
  position: absolute;
  inset-inline: .55rem;
  top: 50%;
  height: .8em;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--evi-skeleton-a, #eceff3) 25%, var(--evi-skeleton-b, #f7f8fa) 50%, var(--evi-skeleton-a, #eceff3) 75%);
  background-size: 200% 100%;
  transform: translateY(-50%);
  animation: evi-filter-loading-shimmer 1.5s ease-in-out infinite;
}

@keyframes evi-filter-loading-shimmer {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .evi-filter-loading[aria-busy='true'] .evi-filter-loading-slot::after { animation: none; }
}

@media (max-width: 576px) {
  .evi-filter-loading[aria-busy='true'] .evi-filter-loading-slot::after { inset-inline: .3rem; }
}