/**
 * loading.css
 *
 * Semantic, token-driven loading feedback.
 * `aria-busy="true"` is the spinner state; `.skeleton` and
 * `[data-skeleton]` provide lightweight placeholder surfaces.
 */

@keyframes loading-spin {
  to { transform: rotate(1turn); }
}

@keyframes skeleton-shimmer {
  to { background-position-x: -200%; }
}

:where([aria-busy="true"]) {
  --_spinner-size: var(--spinner-size, 1.25em);
  --_spinner-stroke: var(--spinner-stroke-width, 0.16em);
  --_spinner-color: var(--spinner-color, currentColor);
  --_spinner-track: var(--spinner-track-color, oklch(from currentColor l c h / 0.25));
  --_spinner-speed: var(--spinner-speed, 700ms);
}

:where([aria-busy="true"])[data-spinner="small"] {
  --_spinner-size: var(--spinner-size-small, 0.9em);
}

:where([aria-busy="true"])[data-spinner="large"] {
  --_spinner-size: var(--spinner-size-large, 2rem);
}

:where([aria-busy="true"]):not([data-spinner="overlay"])::before {
  content: "";
  display: inline-block;
  inline-size: var(--_spinner-size);
  block-size: var(--_spinner-size);
  margin-inline-end: 0.55em;
  vertical-align: -0.18em;
  border: var(--_spinner-stroke) solid var(--_spinner-track);
  border-block-start-color: var(--_spinner-color);
  border-radius: 50%;
  animation: loading-spin var(--_spinner-speed) linear infinite;
}

:where([aria-busy="true"]:empty):not([data-spinner="overlay"])::before {
  margin-inline-end: 0;
}

:where([aria-busy="true"])[data-spinner="overlay"] {
  position: relative;
  isolation: isolate;
}

:where([aria-busy="true"])[data-spinner="overlay"]::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: inherit;
  background: var(--spinner-overlay-backdrop, oklch(from var(--surface-default, white) l c h / 0.72));
  backdrop-filter: blur(var(--spinner-overlay-blur, 2px));
}

:where([aria-busy="true"])[data-spinner="overlay"]::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  inline-size: var(--_spinner-size);
  block-size: var(--_spinner-size);
  border: var(--_spinner-stroke) solid var(--_spinner-track);
  border-block-start-color: var(--_spinner-color);
  border-radius: 50%;
  animation: loading-spin var(--_spinner-speed) linear infinite;
}

:is(.skeleton, [data-skeleton]) {
  --_skeleton-bg: var(--skeleton-background, var(--surface-muted, #e5e7eb));
  --_skeleton-highlight: var(--skeleton-highlight, oklch(from var(--_skeleton-bg) calc(l + 0.08) c h));

  color: transparent;
  border-radius: var(--skeleton-radius, var(--radius-sm, 0.375rem));
  background-image: linear-gradient(
    100deg,
    var(--_skeleton-bg) 30%,
    var(--_skeleton-highlight) 50%,
    var(--_skeleton-bg) 70%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer var(--skeleton-shimmer-duration, 1.4s) linear infinite;
  cursor: wait;
  user-select: none;
}

:is(.skeleton, [data-skeleton]).line {
  min-block-size: 0.85em;
  max-inline-size: 100%;
}

:is(.skeleton, [data-skeleton]).box {
  min-block-size: var(--skeleton-box-min-height, 8rem);
  inline-size: 100%;
}

@media (prefers-reduced-motion: reduce) {
  :where([aria-busy="true"])::before,
  :is(.skeleton, [data-skeleton]) {
    animation: none;
  }
}