//THIS VARIABLES HAVE TO BE PRESENT

/*@progressLineIconSize : 40px;
@progressLineVerticalMargin: 60px;
@progressLineHorizontalMargin: 20px;
@progressLineDefaultBackgroundColor: #fff;
@progressLineIconPadding: 5px;
@progressLineContentPadding:5px;
*/


.progressLine {
  .flex-display();
  .flex-direction();
  .justify-content(space-between);
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  @media @phone {
    .flex-direction(column);
    .flex-wrap(wrap);
  }
  &:before {
    content: "";
    position: absolute;
    top: (@progressLineIconSize + @progressLineIconPadding)/2;
    left: 0;
    right: 0;
    height: 2px;
    .gradient(@brand-primary 70%, transparent 30%, right);
    background-size: 26px 26px;
    @media @phone {
      height: auto;
      width: 2px;
      top: 0;
      bottom: 0;
      left: (@progressLineIconSize/2);
      right: auto;
       .gradient(@brand-primary 70%, transparent 30%, bottom);
      background-size: 26px 26px;
    }
  }
  li {
    text-align: center;
    list-style: none;
    display: inline-block;
    position: relative;
    .flex-grow(1);
    .flex-basis(0);
    @media @phone {
      display: block;
      margin-bottom: @progressLineVerticalMargin;
      &:last-child{
         margin-bottom: 0;
      }
    }
    &:first-child:before {
      @media @tablet-min{
      content: "";
      position: absolute;
      background: @progressLineDefaultBackgroundColor;
      top: 0;
      bottom: 0;
      left: 0;
      right: 50%;
      }
    }
    &:last-child:before {

      content: "";
      position: absolute;
      background: @progressLineDefaultBackgroundColor;
      top: 0;
      bottom: 0;
      right: 0;
      left: 50%;
      @media @phone {
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
      }
    }
  }
  &__item {
    text-align: center;
    margin: 0 @progressLineHorizontalMargin 0 @progressLineHorizontalMargin;
    position: relative;
    @media @phone {
      text-align: left;
       margin: 0;
    }
  }
  &__icon {
    display: inline-block;
    height: @progressLineIconSize + @progressLineIconPadding;
    width: @progressLineIconSize + @progressLineIconPadding;
    padding: @progressLineIconPadding;
    background: @progressLineDefaultBackgroundColor;
    @media @phone{
      display:table-cell;
      padding-right: 20px;
      vertical-align: top;
      background:none;
      &:before{
        content: "";
        position:absolute;
        background: @progressLineDefaultBackgroundColor;
        height: @progressLineIconSize + @progressLineIconPadding;
        width: @progressLineIconSize + @progressLineIconPadding;
        margin-top: -(@progressLineIconPadding/2);
      }
    }

    img {
      width: 100%;
      height: auto;
    }

  }
  &__content {
    display: block;
    padding: @progressLineContentPadding;
    margin-top:10px;
    @media @phone {
      margin-top:0;
      display:table-cell;
    }
  }
  &__title{
    margin-top:0;
  }
  &--lineDefault {
    &:before {
      .gradient(@brand-default 70%, transparent 30%, right);
      background-size: 26px 26px;
      @media @phone {
        .gradient(@brand-default 70%, transparent 30%, bottom);
        background-size: 26px 26px;
      }
    }
  }
  &--bgGrayLighter {
    li {
      &:first-child:before {
        background: @gray-lighter;
      }
      &:last-child:before {
        background: @gray-lighter;
      }
    }
    &__icon {
      background: @gray-lighter;
       @media @phone{
      &:before{
        background: @progressLineDefaultBackgroundColor;
      }
    }
    }
  }
}