.indicator-step {
  &__list {
    display: flex;
  }

  &__item {
    @include color-dark-shade-main;
    flex: 1 1 100%;
    position: relative;
    text-align: center;

    &::before {
      background: $color--grey;
      content: '';
      height: $baseline * 0.2;
      position: absolute;
      right: 0;
      top: $baseline * 1.4;
      width: 100%;
      z-index: -1;
    }

    &:first-child {
      flex: 1;
    }

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

  &__dot {
    background-color: $color--white;
    border-radius: 50%;
    margin-left: auto;
    padding: 5px;
    text-align: center;
    width: 30px;

    &-inner {
      background-color: $color--white;
      border: 2px solid $color--grey;
      border-radius: 50%;
      height: $baseline * 2;
      margin: 0 auto; //was margin-left: auto;
      text-align: center;
      width: 20px;

      .past & {
        background-color: $color-brand--one;
      }
      .icon {
        color: $color--white;
      }
    }

    .blue-dot {
      background: $color-brand--one;
      border-radius: $spacing--xs;
      height: $baseline * 0.8;
      position: absolute;
      width: $baseline * 0.8;
    }

    .icon {
      height: $icon-size--s;
      right: 7px;
      top: $baseline * 0.7;
      width: $icon-size--s;
    }

    // timeline specific from here:

    &.past .indicator-step__dot-inner,
    &.current .indicator-step__dot-inner {
      border: 2px solid $color-brand--one;
    }

    &.declined .indicator-step__dot-inner {
      background: $color--negative;
      border: 2px solid $color--negative;

      .icon svg {
        color: $color--white;
        fill: $color--white;
      }
    }

    &.past,
    &.current,
    &.declined {
      .icon {
        right: auto;
        top: auto;
        left: auto;

        &.icon-size {
          height: $icon-size--xs;
          width: $icon-size--xs;

          @include viewport--l {
            height: $icon-size--s;
            width: $icon-size--s;
          }
        }
      }
    }

    + .border {
      &--done {
        background: $color-brand--one;
        height: 100%;
        width: 2px;
      }

      &--todo {
        background: $color--grey;
        height: 100%;
        width: 2px;
      }
    }
  }
}

// status : complete
.indicator-step__item--complete {
  .indicator-step__dot-inner {
    background: $color-brand--one;
    border: none;
  }

  .indicator-step__text {
    transition: color $transition-duration--fast;
  }

  &:hover {
    .indicator-step__dot,
    .indicator-step__text {
      cursor: pointer;
    }

    // viewport l
    @include viewport--l {
      .indicator-step__text {
        color: $color-brand--two;
      }
    }
  }

  & + .indicator-step__item--complete::before,
  & + .indicator-step__item--active::before,
  &::before {
    background: $color-brand--one;
  }
}

// status : active
.indicator-step__item--active {
  color: $color-brand--one;

  .indicator-step__dot {
    background: $color-brand--white;

    &::after {
      border: 2px solid $color-brand--one;
    }

    &-inner {
      border: 2px solid $color-brand--one;

      .icon {
        align-items: center;
        display: flex;
        justify-content: center;

        @include viewport--l {
          .blue-dot {
            height: $spacing--xs;
            width: $spacing--xs;
          }
        }
      }
    }
  }
}

// viewport l
@include viewport--l {
  .indicator-step {
    &__item {
      flex: inherit;
      width: 130px;

      &::before {
        height: $baseline * 0.3;
        left: -100%;
        right: inherit;
        top: $baseline * 2.4;
      }

      &:first-child {
        flex: inherit;
      }
    }

    &__dot {
      background: $color-brand--white;
      border-radius: 50%;
      margin-left: inherit;
      padding: 10px;
      text-align: center;
      width: 50px;

      &-inner {
        border-radius: 50%;
        border: 2px solid $color--grey;

        height: $baseline * 3;
        text-align: center;
        width: 30px;
      }

      .icon {
        height: $icon-size;
        left: 15px;
        right: inherit;
        top: $baseline * 1.5;
        width: $icon-size;
      }
    }

    &__text {
      @include font-style('body--m');
      left: -65px;
      line-height: $baseline * 2.5;
      margin-top: $baseline * -0.5;
      padding: 0 5px;
      transform: translateX(-42px);
    }
  }
}