/*
================================================

Space Vanta Theme 1.0

Module:
Cart / Quantity Motion

File:
quantity-motion.css

Responsibility:
Quantity reflective interaction

================================================
*/


.sv-cart-item__quantity-control {
  position: relative;

  padding-bottom: 5px;
}


/*
------------------------------------------------
Reflective Base Line
------------------------------------------------
*/

.sv-cart-item__quantity-control::after {
  content: "";

  position: absolute;

  left: 2px;
  right: 2px;
  bottom: 0;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(145, 151, 158, 0.16) 18%,
      rgba(190, 198, 207, 0.28) 50%,
      rgba(145, 151, 158, 0.16) 82%,
      transparent 100%
    );

  opacity: 0.65;

  transition:
    opacity var(--sv-transition-fast);
}


/*
------------------------------------------------
Subtle Hover Reflection
------------------------------------------------
*/

.sv-cart-item__quantity-control:hover::after {
  opacity: 0.9;
}


/*
------------------------------------------------
Button Interaction
------------------------------------------------
*/

.sv-cart-item__quantity-minus:hover,
.sv-cart-item__quantity-plus:hover {
  text-shadow:
    0 0 8px rgba(150, 180, 215, 0.16);
}


/*
------------------------------------------------
Loading / Mutation Reflection
------------------------------------------------
*/

.sv-cart-item__quantity-control[data-cart-loading="true"]::before {
  content: "";

  position: absolute;

  left: 0;
  bottom: 0;

  width: 28%;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(150, 180, 215, 0.48),
      transparent
    );

  filter: blur(0.35px);

  animation: sv-cart-quantity-reflection 0.9s ease-in-out infinite;
}


@keyframes sv-cart-quantity-reflection {

  0% {
    transform: translateX(0);
    opacity: 0;
  }

  20% {
    opacity: 0.7;
  }

  80% {
    opacity: 0.7;
  }

  100% {
    transform: translateX(230%);
    opacity: 0;
  }

}