.hui-Progress {
  width: 100%;
  text-align: center;
  margin-bottom: $x-6;
}

.hui-Progress__item {
  font-size: $x-4;
  margin: $x-2;
  color: $grey-active;
  border-radius: $x-4;
  width: $x-4;
  height: $x-4;
  border: 1px solid $grey-light;
  display: inline-block;
  &:hover {
    background-color: $green;
    border: 1px solid $green;
  }
}

.hui-Progress__item--viewed {
  background-color: $grey-light;
  border: 1px solid $grey-light;
}

.hui-Progress__item--active {
  background-color: $green-light;
  border: 1px solid $green-light;
}