/* Loading indicator for in-resource navigation.

   The #resource_content turbo-frame (see resource_content_frame helper) is
   swapped on category / sort / view / filter changes instead of reloading the
   whole page. Turbo sets the `busy` attribute on the frame while the request is
   in flight; we veil the current content (::after) and show a centered spinner
   (::before) so the tap gets immediate feedback. No JS needed.

   Reuses the global `spin` keyframes (utilities.css / blitz spinner.css). */
@layer utilities {
  turbo-frame#resource_content {
    position: relative;
    display: block;
  }

  turbo-frame#resource_content[busy] {
    pointer-events: none;
    user-select: none;
  }

  turbo-frame#resource_content[busy]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 10;
    background: rgba(255, 255, 255, 0.55);
  }

  turbo-frame#resource_content[busy]::before {
    content: "";
    position: absolute;
    z-index: 11;
    top: 5rem;
    left: 50%;
    width: 2rem;
    height: 2rem;
    margin-left: -1rem;
    border: 3px solid #ddd;
    border-top-color: #333;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
  }
}