.registration-breadcrumbs {
  background-color: $gradient-background; // Solid color, gradient starts below it
  display: flex;
  justify-content: center;
  width: 100%;
  height: 125px;

  &__wrapper {
    display: flex;
    justify-content: center;
    height: 125px;
    padding-top: $pad-medium;

    @include breakpoint(tablet) {
      height: 75px;
    }
  }

  &__page {
    text-align: center;
    min-width: 156px;
    font-size: $small;
    font-weight: $regular;
    color: $ui-fleet-black-75;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;

    // line after breadcrumb
    &::before {
      content: "";
      position: absolute;
      width: 84.5%;
      height: 2px;
      background-color: $ui-fleet-black-25;
      bottom: 36%;
      left: 90px;

      // Firefox-specific
      @-moz-document url-prefix() {
        bottom: 38.2%;
      }

      @include breakpoint(tablet) {
        bottom: 26.5%;
        // Firefox-specific
        @-moz-document url-prefix() {
          bottom: 30%;
        }
      }
    }

    &::after {
      @extend %fleeticon;
      @include size(24px);
      background-color: transparent;
      display: block;
      border-radius: 50%;
      content: "";
      font-size: $large;
      margin-top: 12px;
      position: relative;
      z-index: 1;
      cursor: pointer;

      @include breakpoint(tablet) {
        margin-top: $pad-xsmall;
      }
    }

    &:focus {
      outline: 1px dashed $ui-fleet-black-75;
      border-radius: $border-radius;
    }

    &--active {
      font-weight: $bold;
    }

    &--1 {
      &::after {
        border: 2px solid $ui-fleet-black-75;
        margin-top: 11px;
      }

      &.registration-breadcrumbs__page--active {
        &::before {
          background: linear-gradient(
            to right,
            $ui-fleet-black-75 50%,
            $ui-fleet-black-25 50%
          );
        }

        &::after {
          background-color: transparent;
          border: 2px solid $ui-fleet-black-75;
        }
      }

      &.registration-breadcrumbs__page--complete {
        &::before {
          background: $ui-fleet-black-75;
          background-size: auto;
          z-index: 2;
        }

        &::after {
          @include size(28px);
          content: "\f035";
          color: $ui-fleet-black-75;
          border: 0;
        }
      }
    }

    &--2 {
      &::after {
        border: solid 1px $ui-fleet-black-25;
        margin-top: 11px;
      }

      &.registration-breadcrumbs__page--active {
        &::before {
          background: linear-gradient(
            to right,
            $ui-fleet-black-75 50%,
            $ui-fleet-black-25 50%
          );
        }

        &::after {
          background-color: transparent;
          border: 2px solid $ui-fleet-black-75;
        }
      }

      &.registration-breadcrumbs__page--complete {
        &::before {
          background: $ui-fleet-black-75;
          z-index: 2;
        }

        &::after {
          @include size(28px);
          content: "\f035";
          color: $ui-fleet-black-75;
          border: 0;
        }
      }
    }

    &--3 {
      &::before {
        display: none;
      }

      &::after {
        border: solid 1px $ui-fleet-black-25;
        margin-top: 11px;
      }

      &.registration-breadcrumbs__page--active {
        &::before {
          background: linear-gradient(
            to right,
            $ui-fleet-black-75 50%,
            $ui-fleet-black-25 50%
          );
        }

        &::after {
          background-color: transparent;
          border: 2px solid $ui-fleet-black-75;
        }
      }

      &.registration-breadcrumbs__page--complete {
        &::after {
          @include size(28px);
          content: "\f035";
          color: $ui-fleet-black-75;
          border: 0;
        }
      }
    }
  }
}
