// Todo: only non-clickable stepper is supported for now

.stepper {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  overflow: hidden;
  padding: $stepper-padding-y $stepper-padding-x;
  position: relative;

  &::after,
  &::before {
    content: '';
    display: block;
    position: absolute;
  }

  &:first-child::before {
    display: none;
  }

  &:last-child::after {
    display: none;
  }

  &.active {
    .stepper-text {
      font-weight: bolder;
    }
  }
}

.stepper-horiz {
  display: flex;
  justify-content: space-between;
  overflow-x: auto;
  overflow-y: hidden;
  position: relative;

  &::before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    right: $stepper-padding-x;
    left: $stepper-padding-x;
  }

  .stepper {
    &::after,
    &::before {
      top: 50%;
      width: ($stepper-padding-x - $stepper-inner-spacer);
    }

    &::after {
      right: 0;
    }

    &::before {
      left: 0;
    }
  }
}

.stepper-vert {
  position: relative;

  .stepper {
    &::after,
    &::before {
      height: ($stepper-padding-y - $stepper-inner-spacer);
      left: ($stepper-icon-height * 0.5 + $stepper-padding-x);
    }

    &::after {
      bottom: 0;
    }

    &::before {
      top: 0;
    }
  }
}

// Misc

.stepper-icon {
  border-radius: 50%;
  font-size: $stepper-icon-font-size;
  font-weight: $stepper-icon-font-weight;
  height: $stepper-icon-height;
  line-height: $stepper-icon-height;
  margin-right: $stepper-inner-spacer;
  position: relative;
  text-align: center;
  vertical-align: middle;
  width: $stepper-icon-height;

  .material-icons {
    font-size: 1.333em;
  }
}

.stepper-text {
  font-size: $stepper-text-font-size;
  font-weight: $stepper-text-font-weight;
  position: relative;
}
