.steppers {
  .steppers-header {
    &.it25-wizard {
      position: relative;
      ul {
        justify-content: space-between;
      }
      li {
        z-index: 1;
        padding: calc($stepper-spacing-v / 2) calc($stepper-spacing-h / 2);
        @include media-breakpoint-up(lg) {
          padding: $stepper-spacing-v $stepper-spacing-h;
        }
        background: white;
        border: 1px solid #e5e5e5;
        flex-grow: unset;
        border-radius: 8px;
        &.confirmed {
          border-color: $primary;
        }
        &.active {
          border-color: $primary;
          background: $primary;
          color: white;
          svg {
            fill: white;
          }
        }
        &.error {
          border-color: $danger;
          background: $danger;
          color: white;
          svg {
            fill: white;
          }
        }
        &.not-first {
          margin-left: 1rem;
        }
        &.not-last {
          margin-right: 1rem;
        }
      }
      &::after {
        content: ' ';
        width: 100%;
        background-color: #e5e5e5;
        position: absolute;
        height: 0.5em;
        top: 35%;
        z-index: -1;
        @include media-breakpoint-up(lg) {
          z-index: 0;
        }
      }
    }
  }

  // mobile

  /* Sostituzioni colori per sfondo dark
    analogue-2-a6 -> $primary-v0
    neutral-1-a10
    neutral-1-a8 -> $white
    neutral-1-a6 -> $primary-100
    neutral-1-a2 -> $primary-200
  */

  // dark version
  &.bg-dark {
    .steppers-header {
      // steppers
      .steppers-index {
        color: $primary-200;
        span {
          &.active {
            color: $primary-v0;
          }
        }
      }
      // steps
      li {
        color: $primary-200;
        .icon {
          fill: $primary-200;
        }
        &.active {
          color: $primary-v0;
          .icon {
            fill: $primary-v0;
          }
        }
      }
    }
    .steppers-nav {
      .progress-bar {
        background: $primary-v0;
      }
      .steppers-dots {
        li.done {
          background: $primary-v0;
        }
      }
    }
  }
}
//Tablet horizontal / small desktop
@include media-breakpoint-up(lg) {
  .steppers {
    // dark version
    &.bg-dark {
      .steppers-header {
        // steps
        li {
          border-color: $white;
          // active
          &.active {
            &:after {
              background: $primary-v0;
            }
            .steppers-number {
              background: $primary-v0;
              border-color: $primary-v0;
              color: $neutral-1-a10;
            }
          }
          // numbers
          .steppers-number {
            border-color: $primary-100;
          }
        }
      }
    }
  }
}

//mobile ONLY BUTTONS
@media (max-width: #{map-get($grid-breakpoints, lg) - 1px}) {
  .steppers {
    // dark version
    &.bg-dark {
      // navigation
      .steppers-nav {
        button:not(.steppers-btn-save):not(.steppers-btn-confirm) {
          &:hover,
          &:focus,
          &:active {
            color: $primary-v0 !important;
          }
        }
      }
    }
  }
}