/* 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');
/*------------------------------------------------------------
STEPS
====================================*/

.checkout-steps {
  padding-bottom: 20px;

  .step-item {
    display: flex;
    padding: 1.2rem 1.8rem;
    text-decoration: none;
    color: $black;

    .step-content {
      line-height: normal;
    }

    &.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: 20px;
    font-weight: 600;
  }

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

  .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;

    .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;
        }

      }
    }
  }

}
