//mobile
.steppers {
  // steppers
  .steppers-index {
    margin-left: auto;
    font-size: 0.875rem;
    font-weight: 600;
    flex-shrink: 0;
    @include media-breakpoint-up(lg) {
      display: none;
    }
    span {
      margin-left: 0.25rem;
      &.active {
        color: $primary;
        text-decoration: underline;
      }
    }
  }
  .steppers-header {
    @include media-breakpoint-down(lg) {
      padding: 0 24px;
      height: 64px;
      background: $white;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    margin-bottom: 1rem;
    ul {
      display: flex;
      width: 100%;
      padding: 0;
      @include media-breakpoint-down(lg) {
        margin: 0;
        padding: 0;
      }
      li {
        display: flex;
        font-size: 1.125rem;
        font-weight: 600;
        color: $gray-secondary;
        list-style-type: none;
        .icon {
          fill: $gray-secondary;
          margin-right: 0.667rem;
          width: 24px;
          height: 24px;
        }
        // states
        &:not(.active) {
          @include media-breakpoint-down(lg) {
            clip: rect(1px, 1px, 1px, 1px);
            height: 0;
            position: absolute;
            display: block;
          }
        }
        &.active,
        &.confirmed {
          color: $primary;
          .icon {
            fill: $primary;
          }
        }
        &.steppers-index {
          display: block;
        }
        // numbers
        .steppers-number {
          .icon {
            margin: 0;
          }
          &:after {
            content: '. ';
          }
        }
      }
    }
  }

  // dark version
  &.bg-dark {
    .steppers-header {
      background: none;
      // steppers
      .steppers-index {
        color: $neutral-1-a2;
        span {
          &.active {
            color: $analogue-2-a6;
          }
        }
      }
      // steps
      li {
        color: $neutral-1-a2;
        .icon {
          fill: $neutral-1-a2;
        }
        &.active {
          font-weight: 600;
          color: $analogue-2-a6;
          .icon {
            fill: $analogue-2-a6;
          }
        }
        &.confirmed {
          font-weight: 600;
          color: $white;
          .icon {
            fill: $white;
          }
        }
      }
    }
    .steppers-nav {
      background: none;
      .progress-bar {
        background: $analogue-2-a6;
      }
      .steppers-dots {
        li.done {
          background: $analogue-2-a6;
        }
      }
    }
  }

  // navigation
  .steppers-nav {
    display: flex;
    height: 64px;
    padding: 0 $stepper-spacing-h;
    box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.1); // TEMP - substitute with generic ellipsical shadow
    background: $white;
    align-items: center;
    justify-content: space-between;
    .steppers-progress,
    .steppers-dots {
      width: 20%;
      .progress {
        height: 2px;
      }
    }
    .steppers-progress {
      .progress {
        height: 2px;
      }
    }
    .steppers-dots {
      padding: 0;
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      li {
        list-style-type: none;
        padding: 0;
        height: 4px;
        width: 4px;
        min-width: 4px;
        background: $progress-bg;
        margin-right: 8px;
        border-radius: 50%;
        &.done {
          background: $progress-bar-bg;
        }
      }
    }
  }
}

//small - tablet
@include media-breakpoint-up(sm) {
  .steppers {
    .steppers-header {
      li {
        font-size: 1rem;
      }
    }
  }
}
//Tablet horizontal / small desktop
@include media-breakpoint-up(lg) {
  .steppers {
    // header
    .steppers-header {
      padding: 0;
      box-shadow: none; // TEMP
      height: auto;
      display: flex;
      justify-content: space-between;
      background: transparent;
      // shadow
      &:before {
        display: none;
      }
      // steps
      li {
        padding: $stepper-spacing-v $stepper-spacing-h;
        flex-grow: 1;
        border-left: 1px solid $gray-border;
        position: relative;
        display: flex;
        align-items: center;
        &:nth-last-child(1) {
          border-right: 1px solid $gray-border;
        }
        // index
        &.steppers-index {
          display: none;
        }
        // active
        &.active {
          display: flex;
          &:after {
            content: '';
            position: absolute;
            bottom: 0;
            width: calc(100% - 2.222rem);
            height: 2px;
            background: $primary;
            left: 50%;
            transform: translateX(-50%);
          }
          .steppers-number {
            color: $white;
            background: $primary;
            border-color: $primary;
          }
          &.no-line {
            &:after {
              display: none;
            }
          }
        }
        // success icon
        .steppers-success {
          margin-left: auto;
        }
        // numbers
        .steppers-number {
          display: inline-block;
          width: 2rem;
          height: 2rem;
          border: 1px solid $gray-border;
          border-radius: 50%;
          text-align: center;
          margin-right: 0.667rem;
          flex-shrink: 0;
          &:after {
            display: none;
          }
          // numbers check
          .icon {
            &:before {
              margin-right: 0;
              margin-top: 0.333rem;
            }
          }
        }
      }
    }

    // dark version
    &.bg-dark {
      .steppers-header {
        // steps
        li {
          border-color: $neutral-1-a8;
          // active
          &.active {
            &:after {
              background: $analogue-2-a6;
            }
            .steppers-number {
              background: $analogue-2-a6;
              border-color: $analogue-2-a6;
              color: $neutral-1-a10;
            }
          }
          // numbers
          .steppers-number {
            border-color: $neutral-1-a6;
          }
        }
      }
    }

    // navigation
    .steppers-nav {
      box-shadow: none; // TEMP
      margin-top: 0.889rem;
      align-items: center;
      background: none;
      .steppers-progress,
      .steppers-dots {
        display: none;
      }
      button {
        .icon {
          display: none;
        }
        &:not(.steppers-btn-confirm) {
          margin-right: 0.889rem;
        }
      }
      .steppers-btn-confirm {
        display: block;
        margin-left: auto;
      }
    }
  }
}

//mobile ONLY BUTTONS
@media (max-width: #{map-get($grid-breakpoints, lg) - 1px}) {
  .steppers {
    // navigation
    .steppers-nav {
      button:not(.steppers-btn-save):not(.steppers-btn-confirm) {
        font-size: 1rem;
        background: transparent;
        color: $primary;
        box-shadow: none;
        padding-left: 0;
        padding-right: 0;
        &:hover,
        &:focus,
        &:active {
          background: transparent !important;
          color: $primary !important;
          box-shadow: $btn-focus-box-shadow !important;
        }
        .icon {
          margin: 0 0.333rem;
          //font-size: 0.875rem;
          height: 24px;
          width: 24px;
        }
      }
    }

    // dark version
    &.bg-dark {
      // navigation
      .steppers-nav {
        button:not(.steppers-btn-save):not(.steppers-btn-confirm) {
          color: $white;
          .icon {
            fill: $white;
          }
          &:hover,
          &:focus,
          &:active {
            color: $analogue-2-a6 !important;
          }
        }
      }
    }
  }
}