.application-nav {

  list-style: none;
  padding: 0;
  margin: 0;
  border-bottom: 1px solid greys(30%);
  font-size: 1.3rem;

  flex: 0 0 2.8rem;

  li {
    flex: 1;
    padding: 0.2rem 0;
  }

  li:not(.disabled) {
    cursor: pointer;
  }

  li.disabled {
    cursor: not-allowed;
  }

  li:not(:last-child) {
    margin-right: -16px;
  }

  li:nth-of-type(1) {
    $bg: #d9d0c8;
    background: url(images/breadcrumb/step1-data-previous.svg), linear-gradient(to right, $bg, $bg 50%, rgba(0, 0, 0, 0) 51%, rgba(0, 0, 0, 0));
    background-position: right;
    background-repeat: no-repeat;

    &.active {
      $bg: color(titles);
      background: url(images/breadcrumb/step1-data-active.svg), linear-gradient(to right, $bg, $bg 50%, rgba(0, 0, 0, 0) 51%, rgba(0, 0, 0, 0));
      background-position: right;
      color: #f3f3f3;
    }

    z-index: 2;

  }

  li:nth-of-type(2) {
    $bg: #fff;
    background: url(images/breadcrumb/step2-viz-next.svg), linear-gradient(to right, $bg, $bg 50%, rgba(0, 0, 0, 0) 51%, rgba(0, 0, 0, 0));
    background-position: right;
    background-repeat: no-repeat;

    &.active {
      $bg: color(titles);
      background: url(images/breadcrumb/step2-viz-active.svg), linear-gradient(to right, $bg, $bg 50%, rgba(0, 0, 0, 0) 51%, rgba(0, 0, 0, 0));
      background-position: right;
      color: #f3f3f3;
    }

    &.previous-enabled {
      $bg: #d9d0c8;
      background: url(images/breadcrumb/step2-viz-previous.svg), linear-gradient(to right, $bg, $bg 50%, rgba(0, 0, 0, 0) 51%, rgba(0, 0, 0, 0));
      background-position: right;
    }

    z-index: 1;
  }

  li:nth-of-type(3) {
    $bg: #ededed;
    background: #fff;

    &.active {
      background: color(titles);
      color: #f3f3f3;
    }

    z-index: 0;
  }

}
