progress {
  appearance: none;
  border-radius: var(--size-8);
  height: var(--size-16);
  overflow: hidden;
  padding: 0;
  vertical-align: middle;
  width: 100%;

  &::-webkit-progress-bar {
    background-color: var(--color-grey-10);
  }

  &::-webkit-progress-value {
    background-color: var(--color-blue-60);
  }

  &::-moz-progress-bar {
    background-color: var(--color-blue-60);
  }

  &::-ms-fill {
    background-color: var(--color-blue-60);
  }

  &[value] {
    &[value='0'] {
      &::-webkit-progress-value,
      &::-moz-progress-bar,
      &::-ms-fill {
        background-color: var(--color-grey-90);
      }
    }

    &[value='100'] {
      &::-webkit-progress-value,
      &::-moz-progress-bar,
      &::-ms-fill {
        background-color: var(--color-green-60);
      }
    }
  }
}