.progress-dots-wrapper {
  display: flex;

  .dot {
    height: $base-spacing-double;
    width: $base-spacing-double;
    border-radius: 100%;
    margin-right: $base-spacing-sex;
    background-color: $color-mid-grey;

    &.active {
      opacity: 1;
      background-color: $color-blue;
    }

    &.clickable {
      opacity: 0.15;

      &:hover {
        opacity: 0.4;
        cursor: pointer;
      }
    }

    &.final {
      margin-right: 0px;
    }
  }
}