$vl-progressbar-bullet-size: 1.6rem;
$vl-progressbar-bullet-size-small: 1rem;
$vl-progressbar-bullet-size-large: 5rem;

// Progress bar
.vl-progress-bar {
  display: table;
  table-layout: fixed;
  width: 100%;
  margin-top: 3rem;

  @include respond-to(small) {
    margin-top: 4rem;
  }

  // Progress bar step
  &__step {
    position: relative;
    display: table-cell;
    height: $vl-progressbar-bullet-size;

    // Progress bar step active modifier
    &--active {
      &::before {
        background: $vl-progress-color;
      }

      .vl-progress-bar__bullet {
        background-color: $vl-progress-color;
        border-color: $vl-progress-color;
      }

      & ~ .vl-progress-bar__step {
        .vl-progress-bar__bullet,
        &::before {
          background-color: $vl-progress-bg-color;
          border-color: $vl-progress-bg-color;

          .vl-region--alt & {
            background-color: $vl-progress-bg-alt-color;
          }
        }

        .vl-progress-bar__bullet {
          &::after {
            color: $vl-disabled-text-color;
          }
        }
      }
    }

    &::before {
      display: block;
      position: absolute;
      background-color: $vl-progress-color;
      content: "";
      height: 0.4rem;
      top: $vl-progressbar-bullet-size / 2 - 0.2rem;
      right: 0.6rem + $vl-progressbar-bullet-size;
      left: 0.2rem;

      @include respond-to(small) {
        height: 0.2rem;
        top: $vl-progressbar-bullet-size-small / 2 - 0.1rem;
        right: 0.4rem + $vl-progressbar-bullet-size-small;
      }
    }
  }

  // Progress bar bullet
  &__bullet {
    position: absolute;
    background-color: $vl-progress-color;
    width: $vl-progressbar-bullet-size;
    height: $vl-progressbar-bullet-size;
    border-radius: 50%;
    right: 0.2rem;
    appearance: none;
    border-style: solid;
    border-color: $vl-progress-color;
    padding: 0;

    @include respond-to(small) {
      width: $vl-progressbar-bullet-size-small;
      height: $vl-progressbar-bullet-size-small;
      right: 0.1rem;
    }

    &::after {
      color: $vl-page-bg;
    }
  }

  a {
    .vl-progress-bar__bullet {
      &:hover {
        &::after {
          color: $vl-action-text-hover-color;
        }
      }
    }
  }

  // Progress bar numeric modifier
  &--numeric {
    counter-reset: progressbar-counter;

    // Progress bar step
    .vl-progress-bar__step {
      height: $vl-progressbar-bullet-size-large;

      @include respond-to(small) {
        height: $vl-progressbar-bullet-size-large / 2;
      }

      &::before {
        top: $vl-progressbar-bullet-size-large / 2 - 0.2rem;
        right: 0.6rem + $vl-progressbar-bullet-size-large;

        @include respond-to(small) {
          top: $vl-progressbar-bullet-size-large / 4 - 0.1rem;
          right: 0.4rem + $vl-progressbar-bullet-size-large / 2;
        }
      }

      // Progress bar bullet
      .vl-progress-bar__bullet {
        width: $vl-progressbar-bullet-size-large;
        height: $vl-progressbar-bullet-size-large;
        line-height: $vl-progressbar-bullet-size-large;
        text-decoration: none;

        @include respond-to(small) {
          width: $vl-progressbar-bullet-size-large / 2;
          height: $vl-progressbar-bullet-size-large / 2;
          line-height: $vl-progressbar-bullet-size-large / 2;
        }

        &::after {
          position: absolute;
          content: counter(progressbar-counter);
          counter-increment: progressbar-counter;
          font-family: $vl-accent-font;
          font-size: 2.4rem;
          font-weight: 500;
          width: $vl-progressbar-bullet-size-large;
          height: $vl-progressbar-bullet-size-large;
          text-align: center;
          top: 0;
          left: 0;

          @include respond-to(small) {
            font-size: 1.5rem;
            width: $vl-progressbar-bullet-size-large / 2;
            height: $vl-progressbar-bullet-size-large / 2;
          }
        }
      }
    }
  }
}