.ui-progress {
  appearance: none;
  background: var(--ui-progress-track-bg, var(--ui-surface-muted));
  border: 1px solid var(--ui-progress-track-border, var(--ui-border-strong));
  box-shadow: var(--ui-shadow-sm);
  border-radius: var(--ui-radius-pill);
  display: block;
  height: var(--ui-progress-height, 0.5rem);
  overflow: hidden;
  width: 100%;
}

.ui-progress::-webkit-progress-bar {
  background: var(--ui-progress-track-bg, var(--ui-surface-muted));
  border-radius: var(--ui-radius-pill);
}

.ui-progress::-webkit-progress-value {
  background: var(--ui-progress-fill-bg, var(--ui-color-action));
  border-radius: var(--ui-radius-pill);
  transition: width var(--ui-motion-duration-fast) var(--ui-motion-easing-standard);
}

.ui-progress::-moz-progress-bar {
  background: var(--ui-progress-fill-bg, var(--ui-color-action));
  border-radius: var(--ui-radius-pill);
}

.ui-progress--sm {
  --ui-progress-height: 0.375rem;
}

.ui-progress--success {
  --ui-progress-fill-bg: var(--ui-color-success);
}

.ui-progress--warning {
  --ui-progress-fill-bg: var(--ui-color-warning);
}

.ui-progress--danger {
  --ui-progress-fill-bg: var(--ui-color-danger);
}

.ui-loading {
  animation: ui-loading-spin var(--ui-loading-duration, 0.8s) linear infinite;
  aspect-ratio: 1;
  border: 2px solid var(--ui-loading-track, var(--ui-border-subtle));
  border-radius: 50%;
  border-top-color: var(--ui-loading-accent, var(--ui-color-action));
  display: inline-block;
  height: var(--ui-loading-size, 1.25rem);
  vertical-align: middle;
  width: var(--ui-loading-size, 1.25rem);
}

.ui-loading--sm {
  --ui-loading-size: 1rem;
}

.ui-loading--lg {
  --ui-loading-size: 1.75rem;
}

.ui-loading--muted {
  --ui-loading-accent: var(--ui-text-muted);
}

@keyframes ui-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ui-loading {
    animation: none;
    border-top-color: var(--ui-loading-accent, var(--ui-color-action));
    opacity: var(--ui-state-busy-opacity);
  }
}