//
// Progress Trackers
// --------------------------------------------------

// Base progress tracker
.progress-tracker {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
  font-size: 0;

  > li {
    display: inline-block;
    color: @progress-tracker-color;
    font-size: @font-size-base;

    > a {
      display: block;
    }

    > a:after,
    > div:after,
    + li > a:before,
    + li > div:before {
      content: "";
    }

    > a,
    > div {
      position: relative;
      background: @progress-tracker-bg;
      padding: @progress-tracker-padding-vertical @progress-tracker-padding-horizontal;

      &:after,
      &:before {
        position: absolute;
        top: 0;
        width: 0;
        height: 0;
        padding: 0;
      }

      &:before {
        left: floor(-@progress-tracker-height/2);
        border-left: ceil(@progress-tracker-height/2) solid transparent;
        border-top: ceil(@progress-tracker-height/2) solid @progress-tracker-bg;
        border-bottom: floor(@progress-tracker-height/2) solid @progress-tracker-bg;
      }

      &:after {
        right: floor(-@progress-tracker-height/2);
        border-left: ceil(@progress-tracker-height/2) solid @progress-tracker-bg;
        border-top: ceil(@progress-tracker-height/2) solid transparent;
        border-bottom: floor(@progress-tracker-height/2) solid transparent;
      }
    }

    &:not(.active) > div {
      & when (iscolor(@progress-tracker-color)) {
        color: fade(@progress-tracker-color, (alpha(@text-muted) * 100%));
      }
    }

    & > a:hover {
      background: @progress-tracker-hover-color;
      &:before {
        border-top-color: @progress-tracker-hover-color;
        border-bottom-color: @progress-tracker-hover-color;
      }
      &:after {
        border-left-color: @progress-tracker-hover-color;
      }
    }

    &:last-child {
      margin-right: floor(@progress-tracker-height/2);
    }

    + li {
      margin-left: floor(@progress-tracker-height/2) + @progress-tracker-spacing;
    }
  }

  > .active {
    color: @progress-tracker-active-color;
    > div {
      background-color: @progress-tracker-active-bg;
      &:before {
        border-top-color: @progress-tracker-active-bg;
        border-bottom-color: @progress-tracker-active-bg;
      }
      &:after {
        border-left-color: @progress-tracker-active-bg;
      }
    }
  }
}


// Justified progress tracker steps
.progress-tracker-justified {
  display: block;
  width: 100%;
  // Add a border when used within a panel
  .panel > &,
  .panel > nav > & {
    border-bottom: 1px solid @progress-tracker-border;
  }
  > li {
    display: table-cell;
    width: 1%;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
    > a,
    > div {
      border-right: floor(@progress-tracker-height/2 + @progress-tracker-spacing) solid transparent;
      background-clip: padding-box;
      // Fix retina subpixel issue when using background-clip:padding-box
      &:after {
        right: ceil(-@progress-tracker-height/2 + 1);
      }
    }
    > a:hover {
      background-clip: padding-box;
    }
    &:last-child {
      > a,
      > div {
        border-right: 0;
        &:after {
          content: none;
        }
      }
    }
  }
}