/* Loading overlay inside a refreshing fragment: the section gets aria-busy="true" and a child .sv-loading. */

[data-sv-fragment] { position: relative; }
.sv-loading {
  position: absolute;
  z-index: var(--sv-z-sticky);
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: inherit;
  background: rgb(255 255 255 / 0.65);
  animation: sv-fade-in var(--sv-duration) var(--sv-ease) 150ms both;
}
.sv-loading .sv-icon,
.sv-spinner {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--sv-color-primary);
  animation: sv-spin 0.8s linear infinite;
}

/* Skeleton lines for first loads. */
.sv-skeleton {
  display: block;
  height: 0.875rem;
  border-radius: var(--sv-radius-sm);
  background: linear-gradient(90deg, var(--sv-gray-100) 25%, var(--sv-gray-50) 37%, var(--sv-gray-100) 63%);
  background-size: 400% 100%;
  animation: sv-shimmer 1.4s ease infinite;
}
.sv-skeleton + .sv-skeleton { margin-top: var(--sv-space-2); }
.sv-skeleton--short { width: 40%; }

@keyframes sv-shimmer {
  from { background-position: 100% 50%; }
  to { background-position: 0 50%; }
}