@import '~styles/base/colors';
@import '~styles/base/type';
@import '~styles/base/media-queries';
@import '~styles/tools/mixins';

$progressBarHeight: 14px;
$progressColor: #5FAFC1;
$bgColor: #ECF0F3;

.progressBar {
  width: 100%;
  height: $progressBarHeight;
  background-color: $bgColor;
  box-shadow: 0 0 0 1px inset darken($bgColor, 2%);
  position: relative;
  border-radius: 30px;
  max-width: 600px;
  margin: 0 auto;
  overflow: hidden;
}

.currentProgress {
  height: 100%;
  position: absolute;
  border-radius: 30px;
  z-index: 1;
  @include pop;
  background-image: linear-gradient(
    to right,
    rgba($progressColor, .6),
    $progressColor
  );
}

.milestone {
  border-radius: 30px 0 0 30px;
  position: absolute;
  height: $progressBarHeight;
  width: calc(33.3% + #{$progressBarHeight * 2});
  background: rgba($white, 0);
  box-shadow: $bgColor -2px 0 0 2px;

  &__badge {
    font-weight: font-weight(heavy);
    height: $progressBarHeight;
    width: $progressBarHeight;
    border-radius: 100%;
    text-align: center;
    background-color: darken($bgColor, 10%);
    position: absolute;
    left: 0;
    font-size: .45rem;

    p {
      margin: 0;
      padding: 0;
      line-height: $progressBarHeight;
      color: darken($bgColor, 55%);
    }

    &--completed {
      background-color: $progressColor;

      p {
        color: $white;
      }
    }
  }

  &--1 {
    z-index: 1;
  }

  &--2 {
    left: 33.3%;
    z-index: 2;
    transform: translate3d(#{-($progressBarHeight)}, 0, 0);
  }

  &--3 {
    left: 66.6%;
    z-index: 3;
    transform: translate3d(#{-($progressBarHeight)}, 0, 0);
  }

  &--4 {
    left: 100%;
    z-index: 4;
    transform: translate3d(#{-($progressBarHeight)}, 0, 0);
  }
}

.finalBadgeComplete {
  background-color: palette(onetech, success);
  p {
    color: palette(onetech, success);
  }

  &:after {
    content: 'check';
    font-family: 'Material Icons';
    color: $white;
    @include center();
  }
}