:host {
  --r-progress-bar--appearance: none;
  --r-progress-bar--width: 100%;
  --r-progress-bar--height: 8px;
  --r-progress-bar--background-color: var(--r-background-soft);
  --r-progress-bar--border-radius: 0;
  --r-progress-bar--border: none;
  --progress-bar--value--background-color: var(--r-background-interactive-regular);
  --progress-bar--value--border-radius: 0;
  --progress-bar--value--transition: all 0.6s ease;
  display: block;
}

.r-progress-bar {
  appearance: var(--r-progress-bar--appearance);
  width: var(--r-progress-bar--width);
  height: var(--r-progress-bar--height);
  background-color: var(--r-progress-bar--background-color);
  border-radius: var(--r-progress-bar--border-radius);
  border: var(--r-progress-bar--border);
}
.r-progress-bar::-webkit-progress-bar {
  background-color: var(--r-progress-bar--background-color);
  border-radius: var(--r-progress-bar--border-radius);
  border: var(--r-progress-bar--border);
}
.r-progress-bar::-webkit-progress-value {
  background-color: var(--progress-bar--value--background-color);
  border-radius: var(--progress-bar--value--border-radius);
  transition: var(--progress-bar--value--transition);
}
.r-progress-bar::-moz-progress-bar {
  background-color: var(--progress-bar--value--background-color);
  border-radius: var(--progress-bar--value--border-radius);
  transition: var(--progress-bar--value--transition);
}
.r-progress-bar::-ms-fill {
  background-color: var(--progress-bar--value--background-color);
  border-radius: var(--progress-bar--value--border-radius);
  transition: var(--progress-bar--value--transition);
}