progress {
  --background-color: var(--neutral-color-variation-2);
  --border-width: var(--elem-border-width);
  --border-color: var(--neutral-color-variation-3);
  --border-radius: var(--elem-border-radius);
  --progress-color: var(--primary-color);

  display: inline-block;
  appearance: none;
  width: 100%;
  height: var(--height, 1em);
  margin-top: var(--half-spacing);
  overflow: hidden;
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--border-radius);
  background-color: var(--background-color);
  color: var(--progress-color);

  &::-webkit-progress-bar {
    background: transparent;
    border-radius: var(--border-radius);
  }

  &[value]::-webkit-progress-value {
    background-color: var(--progress-color);
    border-radius: var(--border-radius);
  }

  &::-moz-progress-bar {
    background-color: var(--progress-color);
    border-radius: var(--border-radius);
  }

  &:indeterminate,
  &[indeterminate='true'],
  &:not([value]) {
    background: linear-gradient(to right, var(--progress-color) 30%, var(--background-color) 30%) top left / 150% 150% no-repeat;

    animation: progressIndeterminate 2.5s linear infinite alternate;

    &[value]::-webkit-progress-value {
      background-color: transparent;
    }
    &::-moz-progress-bar {
      background-color: transparent;
    }
  }

  &:first-child {
    margin-top: 0;
  }
}

@keyframes progressIndeterminate {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -200% 0;
  }
}