.x-progress {
  appearance: none;
  width: 100%;
  height: var(--progress-height);
  border-radius: max(calc(var(--progress-height) / 3), var(--radius-thumb));
  background-color: var(--neutral-a3);
  box-shadow: inset 0 0 0 1px var(--neutral-a5);
  border: 0;
  display: block;
  overflow: hidden;
}

.x-progress::-webkit-progress-bar {
  background-color: var(--neutral-a3);
  box-shadow: inset 0 0 0 1px var(--neutral-a5);
  border-radius: inherit;
}

.x-progress::-webkit-progress-value {
  background-color: var(--accent-9);
  border-radius: inherit;
  transition: width .12s linear;
}

.x-progress::-moz-progress-bar {
  background-color: var(--accent-9);
  border-radius: inherit;
  transition: width .12s linear;
}

.x-progress:where([data-size="1"]) {
  --progress-height: var(--space-1);
}

.x-progress:where([data-size="2"]) {
  --progress-height: calc(var(--space-2) * .75);
}

.x-progress:where([data-size="3"]) {
  --progress-height: var(--space-2);
}

.x-progress:where(:not([data-size])) {
  --progress-height: calc(var(--space-2) * .75);
}

.x-progress:where([data-variant="soft"]) {
  background-color: var(--neutral-a4);
  box-shadow: none;
}

.x-progress:where([data-variant="soft"])::-webkit-progress-bar {
  background-color: var(--neutral-a4);
  box-shadow: none;
}

.x-progress:where([data-variant="soft"])::-webkit-progress-value {
  background-color: var(--accent-a8);
}

.x-progress:where([data-variant="soft"])::-moz-progress-bar {
  background-color: var(--accent-a8);
}