/* BosLoading: the one loading state for every BOS (BosLoading.razor says which shape when).
   An app themes it by setting, on :root or any ancestor: --bos-loading-accent (the moving part),
   --bos-loading-track, --bos-loading-skeleton, --bos-loading-shine, --bos-loading-label, --bos-loading-speed.
   Unset, the accent is --bos-brand (the shell's) and the rest derive from it and the text colour. */
/* The public properties are read, never set, here: set on an ancestor they must win, so the component keeps
   its working values in private ones (--_bl-*) that fall back to the defaults. */
.bos-loading {
  --_bl-accent: var(--bos-loading-accent, var(--bos-brand, #4b5563));
  --_bl-track: var(--bos-loading-track, color-mix(in srgb, var(--_bl-accent) 16%, transparent));
  --_bl-skeleton: var(--bos-loading-skeleton, color-mix(in srgb, currentColor 9%, transparent));
  --_bl-shine: var(--bos-loading-shine, color-mix(in srgb, currentColor 4%, transparent));
  --_bl-label: var(--bos-loading-label, color-mix(in srgb, currentColor 62%, transparent));
  --_bl-speed: var(--bos-loading-speed, 0.9s);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
}
.bos-loading__label { font-size: 13px; line-height: 18px; color: var(--_bl-label); }
.bos-loading__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Spinner: a ring with one coloured quarter. */
.bos-loading__spinner {
  width: 24px; height: 24px; border-radius: 50%;
  border: 2.5px solid var(--_bl-track); border-top-color: var(--_bl-accent);
  animation: bos-loading-spin var(--_bl-speed) linear infinite;
}
.bos-loading--small .bos-loading__spinner { width: 14px; height: 14px; border-width: 2px; }
.bos-loading--large .bos-loading__spinner { width: 36px; height: 36px; border-width: 3px; }
.bos-loading--small { flex-direction: row; gap: 8px; }

/* Brand: the logo over a short bar that runs. */
.bos-loading--brand { gap: 16px; }
.bos-loading__logo { max-width: 180px; max-height: 40px; }
.bos-loading--large .bos-loading__logo { max-width: 240px; max-height: 56px; }
.bos-loading__bar { position: relative; width: 120px; height: 3px; border-radius: 3px; overflow: hidden; background: var(--_bl-track); }
.bos-loading__bar::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 40%; border-radius: 3px; background: var(--_bl-accent);
  animation: bos-loading-run calc(var(--_bl-speed) * 1.6) ease-in-out infinite;
}

/* Skeleton: rows with a soft shine passing over them. */
.bos-loading--skeleton { align-items: stretch; gap: 14px; }
.bos-loading__row { display: grid; gap: 7px; }
.bos-loading__line {
  display: block; height: 12px; border-radius: 4px;
  background: linear-gradient(90deg, var(--_bl-skeleton) 25%, var(--_bl-shine) 50%, var(--_bl-skeleton) 75%);
  background-size: 200% 100%; animation: bos-loading-shine calc(var(--_bl-speed) * 1.8) ease-in-out infinite;
}
.bos-loading__line--short { width: 28%; height: 9px; }
.bos-loading--small .bos-loading__line { height: 9px; }
.bos-loading--large .bos-loading__line { height: 15px; }

@keyframes bos-loading-spin { to { transform: rotate(360deg); } }
@keyframes bos-loading-run { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
@keyframes bos-loading-shine { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* Asked for less motion: everything stays still, the shapes alone say it is loading. */
@media (prefers-reduced-motion: reduce) {
  .bos-loading__spinner, .bos-loading__bar::after, .bos-loading__line { animation: none; }
  .bos-loading__bar::after { width: 100%; opacity: 0.5; }
}