/* -- Load More (website · Search & Navigation) ----------------------------
   Loads another batch into the current collection - how many are shown, a progress bar and the button, with a busy state while loading. */

@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-load-more, .mk-load-more *, .mk-load-more ::before, .mk-load-more ::after) {
    box-sizing: border-box;
  }

  .mk-load-more {
    display: grid;
    justify-items: center;
    gap: 0.75rem;
    width: 100%;
    padding-block: 1.5rem;
    & output {
      color: var(--muted-foreground);
      font-size: 0.875rem;
    }
    & output strong {
      color: var(--foreground);
    }
    & progress {
      width: min(100%, 14rem);
      height: 0.25rem;
    }
  }
  .mk-load-more-button {
    & .mk-load-more-spin {
      display: none;
      width: 1rem;
      height: 1rem;
      border: 2px solid currentColor;
      border-inline-end-color: transparent;
      border-radius: 50%;
      animation: mk-load-more-spin 700ms linear infinite;
    }
    &[aria-busy="true"] {
      pointer-events: none;
      opacity: 0.75;
    }
    &[aria-busy="true"] .mk-load-more-spin {
      display: inline-block;
    }
    &[aria-busy="true"] svg {
      display: none;
    }
  }
  @keyframes mk-load-more-spin {
    to {
      rotate: 1turn;
    }
  }

  /* -- Accessibility ------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .mk-load-more-spin {
      animation-duration: 2.4s;
    }
  }

  @media (forced-colors: active) {
    .mk-load-more-spin {
      border-color: CanvasText;
      border-inline-end-color: transparent;
    }
  }
}