// Steps

.nav-steps {
  overflow: hidden;
  border-radius: $borderRadiusS;
  background: $white;
  box-shadow: 1px 1px 4px rgba($black, (20/100));

  dt {
    .vicon {
      display: inline-block;
      vertical-align: middle;
      color: mix(#000000, $blueSoft, 10%);
      font-size: 16px;
      width: 2em;
      height: 2em;
      line-height: 2em;
      @include border-right($rtl, 1px solid lighten($black, 95%));
      @include margin-right($rtl, 1em);
      @include padding-right($rtl, 1em);
    }
  }

  .nav-steps-title {
    display: inline-block;
    width: 70%;
    vertical-align: middle;
    margin: 0;
    font-size: 15px;

    small {
      display: block;
      margin: 0 0 1px 0;
      font-family: "Arial", sans-serif;
      color: lighten($black, 60%);
      font-size: 13px;
    }
  }

  dt, li {
    position: relative;
    padding: $spacingM 0 $spacingM;
    @include padding-right($rtl, 0);
    @include padding-left($rtl, $spacingM);

    &:before, &:after {
      content: "";
      position: absolute;
      @include left($rtl, 100%);
      top: 50%;
      width: 0;
      height: 0;
      margin: -50px 0 0 0;
      border-top: 50px solid transparent;
      border-bottom: 50px solid transparent;
    }

    &:before {
      z-index: 9;
      @include margin-left($rtl, 2px);
      @include border-left($rtl, 23px solid lighten($black, 90%));
      -webkit-filter: blur(2px);
      filter: blur(1px);
    }

    &:after {
      z-index: 10;
      @include border-left($rtl, 20px solid $white);
    }
  }

  dd.gu-1of1 {
    li:first-child {
      @include padding-left($rtl, 0);
    }
  }

  .nav-steps-item {
    display: inline-block;
    width: 1.6em;
    height: 1.6em;
    line-height: 1.6em;
    text-align: center;
    font-size: 21px;
    color: $white;
    background: $orange;
    border-radius: 50%;
    @include margin-right($rtl, 4%);
    @include margin-left($rtl, 8%);
    font-family: "Arial", sans-serif;
    font-weight: normal;
    vertical-align: middle;
    box-shadow:
      0 .75em 1em rgba($white, (40/100)) inset,
      0 0 0 3px mix(#ffffff, $blueSoft, 85%);

    .vicon {
      color: $white;
      margin: 0;
      font-size: 10px;
      position: relative;
      top: -3px;
    }
  }

  li {
    font-size: 15px;
    color: lighten($black, 30%);

    &.nav-steps-todo {
      background: lighten($black, 95%);
      color: lighten($black, 80%);

      &:after {
        @include border-left($rtl, 20px solid lighten($black, 95%));
      }

      .nav-steps-item {
        background: lighten($black, 98%);
        color: lighten($black, 85%);
        text-shadow: 0 -1px 0 rgba($black, (40/100));
        box-shadow:
          0 .75em 1em rgba($white, (70/100)) inset,
          0 0 0 3px lighten($black, 90%);
      }
    }

    &.nav-steps-done {
      .nav-steps-item {
        background: $blueSoft;
      }
    }

    &.gu-last {
      &:before, &:after {
        display: none;
      }
    }

    a {
      display: block;
      color: lighten($black, 30%);
      text-decoration: none;

      &:hover,
      &:focus {
        .nav-steps-text {
          text-decoration: underline;
        }
      }
    }

    .nav-steps-text {
      display: inline-block;
      width: 65%;
      vertical-align: middle;
    }
  }
}