// Progress Indicator

@import "../base-shared";

.usajobs-progress_indicator .usajobs-progress_indicator__step {
  text-decoration: none;
}

.usajobs-progress_indicator {
  background-color: $color-primary-darkest;

  @include media($L) {
    display: table;
    width: 100%;
    padding: 0 $size-M;
  }

  &__body {
    padding: 0 $size-default;

    @include media($ML) {
      padding: $size-default $size-M;
    }

    @include media($L) {
      display: table-row;
      width: 100%;
      padding: 0;
    }
  }

  &__step {
    display: inline-block;
    width: 18%;
    height: 100%;
    padding: $size-default 0;
    text-decoration: none;

    &:hover {
      text-decoration: none;
    }

    @include media($ML-only) {
      @include clearfix();
      display: block;
      width: 100%;
      padding: $size-XS;
    }

    @include media($L) {
      position: relative;
      display: table-cell;
      width: auto;
      padding: $size-L $size-default;
    }

    &:after {
      @include media($XL) {
        content: " ";
        position: absolute;
        top: 36%;
        left: 58%;
        border-bottom: 1px solid $color-gray-light;
        width: rem(50px);
      }
    }

    &:last-child:after {
      border-bottom: 0;
    }
  }

  &__number {
    text-align: center;

    @include media($ML-only) {
      @include span-columns(1 of 4);
      margin-right: 0;
    }

    @include media($ML) {
      text-align: left;
      font-weight: $font-bold;
    }

    @include media($L) {
      display: table-row;
      height: 50%;
      width: 100%;
    }
  }

  &__step-desc {
    @include media($ML-only) {
      @include span-columns(3 of 4);
    }

    h5 {
      color: $color-gray-light;
      font-size: $small-font-size;
      font-weight: $font-normal;
      text-align: center;
      margin-top: $size-base;

      @include media($ML) {
        margin-top: $size-S;
        margin-bottom: $size-S;
        font-size: $base-font-size;
        text-align: left;
      }
    }

    .short-desc {
      @include media($ML) {
        display: none;
      }
    }

    .long-desc {
      display: none;

      @include media($ML) {
        display: inherit;
      }
    }
  }

  .circle {
    @include makeCircle(35px, $color-gray-light, none, $color-gray-light);
    margin: $size-base auto $size-XS;
    text-align: center;

    @include media($L) {
      @include makeCircle(45px, $color-gray-light, none, $color-gray-light);
      font-size: $lead-font-size;
      text-decoration: none;
      margin-bottom: $size-base;
    }

    &:hover {
      cursor: pointer;
    }
  }
}

.usajobs-progress_indicator,
.usajobs-step-indicator {
  .circle {
    margin: $size-base auto $size-XS;
    text-align: center;

    @include media($L) {
      font-size: $lead-font-size;
      text-decoration: none;
      margin-bottom: $size-base;
    }

    &:hover {
      cursor: pointer;
    }
  }
}

.usajobs-progress_indicator {
  .circle {
    @include makeCircle(35px, $color-gray-light, none, $color-gray-light);

    @include media($L) {
      @include makeCircle(45px, $color-gray-light, none, $color-gray-light);
    }
  }

  &__step.is-current {
    .circle {
      color: $color-white;
      box-shadow: inset 0 0 0 2px $color-green-dark;
    }

    .usajobs-progress_indicator__step-desc h5 {
      color: $color-white;
      font-weight: $font-bold;
    }
  }

  &__step.has-visit {
    .circle {
      color: $color-white;
      background-color: $color-green-dark;
      box-shadow: none;
    }

    .usajobs-progress_indicator__step-desc h5 {
      color: $color-white;
    }
  }
}

.usajobs-step-indicator {
  @include unstyledList();

  .circle {
    @include makeCircle(
      35px,
      $color-primary-darkest,
      none,
      $color-primary-darkest
    );

    @include media($L) {
      @include makeCircle(
        45px,
        $color-primary-darkest,
        none,
        $color-primary-darkest
      );
    }
  }
}

// Applicaiton guide layout
// Odd place for this but, wanted to show it in context of the app guide banner
.usajobs-app_guide-banner {
  @include outer-container();
  max-width: none;
  @include linear-gradient(
    to right,
    $color-primary-darker 0%,
    $color-primary-darker 50%,
    $color-primary-darkest 60%,
    $color-primary-darkest 100%
  );
}

.usajobs-app_guide-banner-container {
  @include outer-container();
  max-width: $site-max-width;
}

.usajobs-app_guide-joa_summary-container {
  @include media($ML) {
    @include span-columns(2);
  }
  @include media($MLL) {
    @include span-columns(3);
  }
}

.usajobs-app_guide-progress_indicator-container {
  @include media($ML) {
    @include span-columns(4);
  }
  @include media($MLL) {
    @include span-columns(9);
  }
}

// New user on-boarding edition
.usajobs-progress-bar {
  display: flex;
  width: 100%;
  height: $size-default;
  background-color: $color-white;
  border-top: 1px solid $color-gray-lighter;

  &__container {
    @include boxShadow(1);
  }

  &__title {
    margin: 0;
    padding: $size-default 0 $size-S $size-default;

    @include media($L) {
      padding: $size-M 0 $size-default $size-M;
    }
  }

  &__step {
    display: block;
    flex: 1;
    height: 100%;
  }

  &__step.is-current {
    background-color: rgba(253, 184, 30, 0.5);
  }

  &__step.is-complete {
    background-color: $color-gold;
  }
}

.usajobs-progress-bar--three {
  .usajobs-progress-bar__step {
    width: 33%;
  }
}