.trail-loader {
  display: inline-block;
  vertical-align: middle;
  line-height: 0;
  flex: none;
  --trail-loader-rust: var(--color-primary);
  --trail-loader-ink: var(--color-text);
  --trail-loader-mark-alpha: 1;
  opacity: 0;
  animation: trail-loader-in 200ms ease-out 400ms forwards;
}

[data-theme="dark"] .trail-loader {
  --trail-loader-rust: var(--color-primary-dark);
  --trail-loader-ink: var(--color-text);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .trail-loader {
    --trail-loader-rust: var(--color-primary-dark);
    --trail-loader-ink: var(--color-text);
  }
}

@keyframes trail-loader-in {
  to { opacity: 1; }
}

.trail-loader.trail-loader--shown,
#loading-overlay .trail-loader {
  opacity: 1;
  animation: none;
}

.trail-loader__canvas {
  display: block;
  margin-inline: calc(-1 * var(--trail-loader-pad, 0px));
  pointer-events: none;
}

.btn > .trail-loader--xs {
  margin-inline-end: 0.25rem;
}

.alert > .trail-loader--md {
  margin-inline-start: 0.5rem;
}

.alert:has(> .trail-loader--md) {
  text-wrap: balance;
}

.trail-loader--xs,
[data-theme="dark"] .trail-loader--xs,
:root:not([data-theme="light"]) .trail-loader--xs {
  --trail-loader-rust: currentColor;
  --trail-loader-ink: currentColor;
  --trail-loader-mark-alpha: 1;
}

.trail-loader--sm,
.trail-loader--xs {
  vertical-align: middle;
}

@supports (width: 1cap) {
  .trail-loader--xs { vertical-align: calc(0.5cap - 10px); }
  .trail-loader--sm { vertical-align: calc(0.5cap - 14px); }
}

.trail-loader--lg .trail-loader__canvas { width: 160px; }
.trail-loader--md .trail-loader__canvas { width: 96px; transform: translateY(-9px); }
.trail-loader--sm .trail-loader__canvas { width: 28px; transform: translateY(calc(-1 * var(--trail-loader-drop, 0px))); }
.trail-loader--xs .trail-loader__canvas { width: 20px; transform: translateY(calc(-1 * var(--trail-loader-drop, 0px))); }

@media (prefers-reduced-motion: reduce) {
  .trail-loader {
    animation: trail-loader-in 200ms ease-out 400ms forwards;
  }
}