// New Process Indicator
//================================================== //
.process-indicator {
  .indicator {
    &.more-info {
      &::before {
        top: 0.11em;
      }
    }
  }

  &.compact {
    .indicator {
      &.rejected {
        &::before,
        &::after {
          width: ($indicator-size * 0.8);
        }
      }
    }

    &.has-labels {
      .indicator.icon .icon {
        height: 22px;
        left: -3px;
        top: -3px;
        width: 21px;
        z-index: 1;
      }
    }
  }
}

.indicator {
  &.time-out {
    &::before {
      left: 0.41em;
    }
  }
}

.process-indicator.compact .separator {
  margin-left: 0;
}

.indicator.rejected::before,
.indicator.rejected::after {
  left: 0.14em;
  top: 0.58em;
}

.indicator.icon .icon {
  height: 1.7em;
  left: -4px;
  top: -3px;
  width: 1.7em;
}

.process-indicator .indicator.icon .icon {
  height: 29px;
  left: -4px;
  top: -4px;
  width: 29px;
  z-index: 1;
}

.process-indicator.responsive .details .icon {
  top: 3px;
}

@include respond-to(smphabletdown) {
  .process-indicator .step.current {
    .details {
      margin-top: 90px;
    }
  }
}

.is-safari {
  .process-indicator {
    .indicator {
      &.current {
        &.rejected {
          &::before,
          &::after {
            width: ($indicator-size * 0.78);
          }
        }
      }

      &.more-info {
        &::before {
          left: 0.02em;
          top: 0.1em;
        }
      }
    }

    &.compact {
      .indicator {
        &.rejected {
          &::before,
          &::after {
            width: ($indicator-size * 0.82);
          }
        }
      }
    }
  }
}

.is-firefox {
  .process-indicator {
    &.compact {
      .indicator {
        &.rejected {
          &::before,
          &::after {
            width: ($indicator-size * 0.78);
          }
        }
      }
    }

    .indicator {
      &.more-info {
        &::before {
          top: 0.11em;
        }
      }

      &.rejected {
        &.current {
          &::before,
          &::after {
            left: 0.52em;
            top: 0.98em;
          }
        }
      }
    }
  }
}

.ie,
.ie11 {
  .process-indicator {
    &.compact {
      .indicator {
        &.rejected {
          &::before,
          &::after {
            left: 0.15em;
            top: 0.56em;
          }
        }
      }
    }

    .indicator {
      &.rejected {
        &::before,
        &::after {
          left: 0.13em;
          top: 0.6em;
        }

        &.current {
          &::before,
          &::after {
            left: 0.55em;
            top: 0.97em;
          }
        }
      }

      &.time-out {
        &::after {
          top: 0.65em;
        }
      }
    }
  }
}

// Only adjust the placement of the process indicator lines when not on RTL
html:not([dir='rtl']) {
  .process-indicator {
    .display {
      .separator {
        position: relative;
        top: -2px;
      }
    }
  }
}

html[dir='rtl'] {
  .process-indicator {
    &.compact {
      &.has-labels {
        .indicator.icon .icon {
          left: 2px;
        }
      }
    }
  }

  .process-indicator .indicator.icon .icon {
    left: 4px;
  }

  &.is-firefox {
    .indicator {
      &.more-info {
        &::before {
          top: 0.11em;
        }
      }
    }
  }
}