.root {
  width: 400px;
  height: 20px;
  max-width: 100%;
  border: 5px solid var(--gray-12);
  background-color: var(--gray-3);
}

.indicator,
.chromaticIndicatorClass {
  width: 0;
  height: 100%;
  background-color: var(--red-9);
  transition: background 150ms ease-out;
  &[data-state='indeterminate'] {
    background-color: var(--gray-8);
  }
  &[data-state='complete'] {
    background-color: var(--green-9);
  }
  &::before {
    content: attr(data-value);
  }
  &::after {
    content: attr(data-max);
  }
}

.rootAttr,
.indicatorAttr {
  background-color: var(--blue-a12);
  border: 2px solid var(--blue-9);
  padding: 10px;

  &[data-state='loading'] {
    border-color: var(--red-9);
  }
  &[data-state='indeterminate'] {
    border-color: var(--purple-9);
  }
  &[data-state='complete'] {
    border-color: var(--green-9);
  }
}

.indicatorAttr {
  &::before {
    content: attr(data-value);
  }
  &::after {
    content: attr(data-max);
  }
}
