.bs-wizard {
  > .bs-wizard-step {
    padding: 0;
    position: relative;

    > .bs-wizard-dot {
      position: absolute;
      width: 14px;
      height: 14px;
      display: block;
      background: $gray-300;
      top: 20px;
      left: 44%;
      margin-top: -14px;
      border-radius: 50%;

      &:after {
        content: ' ';
        width: 8px;
        height: 8px;
        background: $gray-300;
        border-radius: 50px;
        position: absolute;
        top: 3px;
        left: 3px;
      }
    }

    > .progress {
      position: relative;
      border-radius: 0px;
      height: 4px;
      box-shadow: none;
      margin: 11px 0;
      background: $gray-300;

      > .progress-bar {
        width: 0px;
        box-shadow: none;
        background: $gray-300;
      }
    }

    &:first-child.active > .progress > .progress-bar {
      width: 0%;
    }

    &:last-child > .bs-wizard-dot:last-child {
      right: 0;
      border-radius: 0;
      left: 0;
    }

    &:last-child > .bs-wizard-dot:last-child:after {
      opacity: 0;
    }

    &.disabled {
      a.bs-wizard-dot {
        pointer-events: none;
      }

      > .bs-wizard-dot {
        background-color: $gray-300;

        &:after {
          opacity: 0;
        }
      }
    }

    &.complete {
      > .bs-wizard-dot {
        background: $primary;

        &:after {
          background: $primary;
        }
      }

      &.in-progress {
        > .bs-wizard-dot {
          background: $primary;

          &:after {
            background: $white;
          }
        }
      }

      > .progress > .progress-bar {
        background: $primary;
        width: 100%;
      }

      &:last-child > .bs-wizard-dot:last-child {
        background: $primary;

        &:after {
          opacity: 1;
        }
      }
    }
  }
}