/* Application form page styles */

#apply {
  @media (max-width: 991px) {
    .application-nav {
      display: none;
    }
  }

  @media (min-width: 992px) {
    .application-nav {
      margin: $spacing-05 0 0 0;
      width: 264px; // fixed page element: needs absolute width to avoid overflowing from cols
      @include typescale-06;
    }

    .application-nav__heading {
      margin: 0;
      font-size: 1em;
      text-transform: uppercase;
      @include font-sans;
    }

    .application-nav__list {
      margin: 0;
      padding: $spacing-02 0 0 0;
      list-style: none;
      counter-reset: step;
    }

    .application-nav__list-item {
      counter-increment: step;

      &:before {
        content: ' ';
        border-left: 1px solid $dark-grey;
        position: absolute;
        height: 60px;
        margin-left: 17px;
        margin-top: 20px;
        z-index: -10;
      }

      &:last-child:before {
        border: 0;
      }

      a {
        display: block;
        padding: $spacing-03 $spacing-01;
        text-decoration: none;

        &:hover, &:active, &:focus {
          color: $warm-black;
        }

        &:before {
          display: inline-block;
          margin-right: $spacing-01;
          content:  counter(step);
          background: $light-grey;
          width: 30px;
          height: 30px;
          border: 1px solid rgba($dark-grey, 0.5);
          border-radius: 50%;
          line-height: 28px;
          text-align: center;
          color: rgba($dark-grey, 0.75);
          font-weight: bold;
          font-size: smaller;
        }
      }
    }

    .application-nav__list-item--done a {

      &:before {
        content: '\00a0';
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-check'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 15px;
        background-color: $dark-grey;
        border-color: $dark-grey;
      }

      &:hover, &:focus, &:active {
        color: $sanguine;
        cursor: pointer;
      }
    }

    .application-nav__list-item--active {

      a:before {
        background: $grapefruit;
        color: $warm-black;
        border-color: $grapefruit;
      }

      &:hover, &:active, &:focus {
        cursor: pointer;
        color: $sanguine;
      }

      &:before, ~ li:before {
        border: 1px solid rgba($dark-grey, 0.25);
      }
    }

    .application-nav__list-item--invalid a {

      &:before {
        color: $sanguine;
        border-color: $sanguine;
        border-width: 2px;
      }

      &:hover, &:active, &:focus {
        color: $sanguine;
        cursor: pointer;
      }

      &:before, ~ li:before {
        border: 1px solid rgba($dark-grey, 0.25);
      }
    }

    .page_link--disabled {
      color: $dark-grey;
      &:hover,
      &:focus,
      &:active {
        color: $dark-grey;
        text-decoration: none;
      }
    }
  }

  @media (min-width: 1200px) {
    .page-nav {
      width: 330px;
    }
  }

  hr {
    background-color: $grapefruit;
  }

  // Print styles for form previeew PDF
  @media print {
    .form {
      font-size: 10pt !important;
    }

    .form-section {
      display: block !important;
    }

    .form__question{
      margin: $spacing-03 0 0 0;
    }

    aside,
    button,
    input[type="submit"],
    hr,
    .alert,
    .application-nav,
    .secondary-nav,
    .nav-bar,
    .page-footer,
    .form-section:last-of-type,
    .label,
    .form__long-help,
    .pager-buttons {
      display: none !important;
    }
  }
}
