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

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

.checkout-steps {
  margin-bottom: 30px;

  .step-item {
    display: flex;
    text-decoration: none;
    color: $black;

    .step-content {
      margin-bottom: 0;
      line-height: 18px;
    }

    &.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-item {
      margin-top: 20px;
    }
  }

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

  .step-description {
    font-family: $font-family-sans-serif;
    font-size: 12px;
    font-weight: normal;
  }
  .step-icon {
    margin-right: 15px;
  }

  .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(lg) {
  .checkout-steps {
    display: flex;
    margin-bottom: 40px;

    .step-item {
      &:after {
        content: "";
        display: block;
        background: $step-arrow-icon no-repeat;

        height: 15px;
        width: 30px;
        background-size: contain;
        flex-shrink: 0;
        align-self: center;
        transform: rotate(90deg);
        opacity: 1;
        color: $black;
      }

      &:last-child {
        &:after {
          display: none;
        }
      }
      & + .step-item {
        margin-top: 0;
        margin-left: 30px;
      }
    }
  }
}
