@import "https://assets.elements.dev/assets/app/shared/ui-catalog/catalog/style.c38e1d7304920e3.css";

.progress-demo-col {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-5);
  width:          100%;
  max-width:      24rem;
}

.progress-demo-controls {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         var(--space-3);
}

.progress-demo-controls input[type="range"] {
  flex:         1;
  min-width:    8rem;
  accent-color: var(--accent);
}

.progress.progress-demo-success {
  --progress-color: var(--success);
}

.progress.progress-demo-danger {
  --progress-color: var(--danger);
}