.progress {
  -webkit-appearance: none;
  -moz-appearance: none;
  background: $progress-bar-background-color;
  box-shadow: inset 0 0 0 1px $ui-gray-200;
  border-radius: $radius;
  margin-bottom: 0;
  &.is-small {
    height: 0.5rem;
  }
  &.is-narrow {
    width: 30px;
  }
  &.is-medium {
    width: 120px;
  }
}

// style the container in chrome
.progress[value]::-webkit-progress-bar {
  box-shadow: inset 0 0 0 1px $ui-gray-200;
}

// style the bar in chrome
.progress[value]::-webkit-progress-value {
  border-radius: $radius;
  transition: width 1s ease-out;
}

// style the bar in firefox
.progress[value]::-moz-progress-bar {
  border-radius: $radius;
  transition: width 1s ease-out;
}