.stepper {
  $component-name: '.stepper';
  $min-steps: 3;
  $max-steps: 8; //we've decided the maximum number of steps should be 8.
  $stepper-item-padding: -5;

  margin-bottom: spacing(-1);

  & + * {
    margin-top: 0;
  }

  &__step-title {
    @include screenreader-only;
  }

  &__list {
    display: grid;
    grid-row-gap: spacing(-5);
    grid-column-gap: $width-border;
    align-items: center;
    justify-items: stretch;

    // resetting default ol
    max-width: none;
    margin: 0;

    //define a css-counter, to set the number of each step. We can't use the counter define for the default <ol>, as we use display: contents; for each <li> which ignores the counter - we then increment the counter on the li::before that countains the number instead
    counter-reset: step-counter;

    //define grid bassed on the number of steps
    @for $i from $min-steps through $max-steps {
      &[data-steps="#{$i}"] {
        grid-template-columns: auto 1fr repeat(#{$i - 2}, 1fr auto 1fr) 1fr auto;
      }
    }
  }

  &__item {
    display: contents; //ignore the items, when placing stuff in the grid

    // resetting default margin/padding on ol
    padding: 0;
    margin: 0;

    @include icon-style {
      counter-increment: step-counter;
      @include set-colors('theme');
      border-radius: 50%;
      line-height: line-height('single');
      width: spacing($stepper-item-padding, $times: 2, $add: line-height('single', $include-calc: false));
      height: spacing($stepper-item-padding, $times: 2, $add: line-height('single', $include-calc: false));
      display: flex;
      justify-content: center;
      align-items: center;
      position: static;
      grid-row: 1; //position all before elements on the first grid row
    }

    &:not(&--final):not(&--active) {
      @include set-icon("confirm", $include-pseudo: "before");
    }

    //postion ::before elements and labels for all steps
    @for $i from 1 through $max-steps {
      &:nth-child(#{$i})::before {
        grid-column: $i + 2 * ($i - 1);
      }
    }

    //add connection line as ::after element for all items, except the first one
    &:not(:first-child) {
      &::after {
        content: '';
        display: block;
        height: $width-border;
        background-color: color('border-theme');
        //set span to two columns, and the elements automatically fills the remaing cells in the grid
        grid-column-end: span 2;
      }
    }

    &--active:not(&--final) {
      //have a number instead of the the checkmark icon
      &::before {
        content: counter(step-counter);
        font-family: $font-string;
        font-weight: $font-weight-normal;
      }

      //all items that comes after the active item have a number instead of the checkmark icon
      & ~ #{$component-name}__item {

        &:not(#{$component-name}__item--final) {
          &::before {
            content: counter(step-counter);
            font-family: $font-string;
            font-weight: $font-weight-normal;
          }
        }
        &::before {
          @include set-colors('background-secondary');
        }

        &::after {
          
          background-color: color('border');
        }
      }
    }

    &--final:not([class*="icon-"]) {
      @include set-icon("finish", $include-pseudo: "before");
    }

    &__label {
      @include set-font(-1, 'single');
      display: none; //all labels except the active item is hidden by default
      grid-row: 2; //position all before elements on the second grid row
      align-self: start;
      color: color('foreground-secondary');
      margin: 0 spacing(-5);
      text-align: center;

      #{$component-name}__item--active & {
        display: block;
        color: color('foreground');
      }

      #{$component-name}__item:first-child & {
        //the first item's label may span the full width
        grid-column-start: 1;
        grid-column-end: -1;
        margin-left: 0;
        width: fit-content;
        text-align: left;
        min-width: spacing($stepper-item-padding, $times: 2, $add: line-height('single', $include-calc: false, $fontsize-relative: ("current": -1, "target": 0)));
      }

      #{$component-name}__item:last-child & {
        //the last item's label may span the full width
        grid-column-start: 1;
        grid-column-end: -1;
        margin-right: 0;
        width: fit-content;
        text-align: right;
        min-width: spacing($stepper-item-padding, $times: 2, $add: line-height('single', $include-calc: false, $fontsize-relative: ("current": -1, "target": 0)));
        justify-self: end;
      }

      //the second item's label may always span from first track line to the eight track line
      #{$component-name}__item:nth-child(2) & {
        grid-column-start: 1;
        grid-column-end: 8;
      }

      @for $steps from 4 through $max-steps {
        //loop through steppers with 4 to 8 steps
        //loop through items 3 to second to last on the stepper
        @for $step from $min-steps through $steps - 1 {
          #{$component-name}__list[data-steps="#{$steps}"] #{$component-name}__item:nth-child(#{$step}) & {
            //if the item is the center item on a stepper with an uneven number of steps, the label may span the entier width
            @if math.div($steps + 1, 2) == $step {
              grid-column-start: 1;
              grid-column-end: -1;
            }
            //if the item comes BEFORE the center of the stepper
            @else if $step <= math.div($steps + 1, 2) {
              //the label may start at the first track line
              grid-column-start: 1;
              //calculate end track line
              grid-column-end: (($step * 2 - 1) * 3) - 1;
            }
            //if the item comes AFTER the center of the stepper
            @else {
              //calculate start track line
              grid-column-start: (($step - ($steps - $step)) * 3) - 2;
              //the label may end at the last track line
              grid-column-end: -1;
            }
          }
        }
      }
    }
  }

  //mixin for showing all labels, not just the active item's label
  @mixin show-all-labels {
    #{$component-name}__item__label {
      display: block; //show all labels in wide viewports
    }

    //the first and last label should only span 2 columns when all labels are visible
    #{$component-name}__list #{$component-name}__item:first-child #{$component-name}__item__label,
    #{$component-name}__list #{$component-name}__item:last-child #{$component-name}__item__label {
      grid-column-start: auto;
      grid-column-end: span 2;
    }

    //all other labels should span 3 columns, when all labels are visible
    //selector must be very specific to overule placing the labels very specificly when only one is visible
    #{$component-name}__list[data-steps] #{$component-name}__item:not(:first-child):not(:last-child) #{$component-name}__item__label {
      grid-column-start: auto;
      grid-column-end: span 3;
    }
  }

  //modifiers for showing all labels in breakpoints
  &--show-all-labels-on {
    &-default-width {
      @include show-all-labels;
    }

    &-medium-width {
      @include breakpoint("medium") {
        @include show-all-labels;
      }
    }
  }

  //show all labels in wide viewports
  @include breakpoint("wide") {
    @include show-all-labels;
  }
}