/* *****************************************************************************
*
*  Navbar
*
* ***************************************************************************** */
.navbar {
  &-dark {
    &.navbar--step-by-step {
      .step-done {
        .icon-step-number:before {
          background-color: $white;
        }
      }

      .active {
        .icon-step-number {
          background-color: $white;
          color: $black;
        }
      }

      .icon-step-number {
        background-color: transparent;
        color: $white;
        border-color: $white;
        display: inline-block;
        min-width: 1.5rem;
      }
    }
  }

  &--step-by-step {
    font-family: $font-family-base;

    @include media-breakpoint-down(sm){
      border-bottom: none!important;
    }

    &__step-item {
      display: flex;

      &:not(.active){
        @include media-breakpoint-down(sm){
          display: none;
        }
      }

      &.active {
        .link-highlight:before {
          background-color: $primary;
        }
      }

      .link-highlight:before {
        transform: scaleY(1);
        background-color: $white;

        @include media-breakpoint-down(sm){
          display: none;
        }
      }
    }

    .navbar-nav {
      @include media-breakpoint-down(sm) {
        li {
          &:not(.active) {
            display: none;
          }

          &.active {
            width: 100%;
            text-align: center;
          }
        }
      }

      li {
        &.active ~ .navbar--step-by-step__step-item {
          @extend .vui--desactivated;
        }

        a {
          font-family: $font-family-base;
        }
      }
    }
  }
}