/*------------------------------------------------------------
STEPS
====================================*/

/* Variables Custom */
$step-address-icon: url('~media/icons/step-address.svg') !default;
$step-delivery-icon: url('~media/icons/step-delivery.svg') !default;
$step-payment-icon: url('~media/icons/step-payment.svg') !default;
$step-complete-icon: url('~media/icons/step-complete.svg') !default;
$step-arrow-icon: url('~media/icons/arrow-chevron.svg') !default;
$step-address-disabled-icon: url('~media/icons/step-address-disabled.svg') !default;
$step-delivery-disabled-icon: url('~media/icons/step-delivery-disabled.svg') !default;
$step-payment-disabled-icon: url('~media/icons/step-payment-disabled.svg') !default;
$step-complete-disabled-icon: url('~media/icons/step-complete-disabled.svg') !default;
/**************************************/

.checkout-steps {
  display: flex;
  justify-content: space-between;
  margin-bottom: 3rem;

  .step-item {
    text-align: center;
    text-decoration: none;
    color: $black;

    .step-content {
      margin-bottom: 0;
      line-height: 1.8rem;
    }

    &.completed, &.disabled, &:disabled {
      opacity: 0.3;

      .icon-address {
        content:$step-address-disabled-icon;
      }

      .icon-delivery {
        content: $step-delivery-disabled-icon;
      }

      .icon-payment {
        content: $step-payment-disabled-icon;
      }

      .icon-complete {
        content: $step-complete-disabled-icon;
      }
    }
  }

  .step-title {
    font-family: $font-family-sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
  }

  .step-description {
    display: none;
  }

  .step-icon {
    flex: 0 0 5rem;
  }

  .icon-address {
    content: $step-address-icon;
  }

  .icon-delivery {
    content: $step-delivery-icon;
  }

  .icon-payment {
    content: $step-payment-icon;
  }

  .icon-complete {
    content: $step-complete-icon;
  }
}


/* RESPONSIVE */
/***************************************/
@include media-breakpoint-up(md) {
  .checkout-steps {
    .step-title {
      font-size: 2rem;
    }
  }
}
@include media-breakpoint-only(md) {
  .checkout-steps {
    justify-content: center;

    .step-item {
      padding: 0 2.5rem;
    }
  }
}
@include media-breakpoint-up(lg) {
  .checkout-steps {
    justify-content: stretch;
    margin-bottom: 4rem;

    .step-item {
      display: flex;
      position: relative;
      flex: 0 1 25.5rem;
      padding-right: 3.5rem;
      margin: 0;
      text-align: left;
      &:after {
        content: "";
        display: block;
        position: absolute;
        right: -0.7rem;
        background: $step-arrow-icon no-repeat;
        height: 1.5rem;
        width: 3rem;
        background-size: contain;
        flex-shrink: 0;
        align-self: center;
        transform: rotate(90deg);
        opacity: 1;
        color: $black;
      }

      &:last-child {
        &:after {
          display: none;
        }
      }
      & + .step-item {
        margin-left: 3rem;
      }
    }

    .step-icon {
      margin-right: 1.5rem;
    }

    .step-description {
      display: block;
      font-family: $font-family-sans-serif;
      font-size: 1.2rem;
      font-weight: normal;
    }
  }
}
