/*--------------------------------------------------
    Style css to overwrite default style Snipcart
---------------------------------------------------*/

/* Liste Variables*/
:root {
  /* COLOR */
  --primary: #ffeefe;
  --primary-variant: #f1bfee;
  --secondary: #e73add;

  /* GRADIENT */
  --gradient-button: linear-gradient(
    90deg,
    var(--primary-variant),
    var(--primary)
  );
  /* ANIMATION BUTTON HOVER*/
  --animation-bg-color-hover: bgColorHover 0.1s both ease-in-out;
}

/*------------------------------------------------------------------
--------------------------------------------------------------------*/

/* Button / Badge / Label*/
.snipcart-cart-button--highlight,
.snipcart__box--badge,
.snipcart-form-radio:checked + label:before {
  background-image: var(--gradient-button) !important;
  color: black !important;
}

/* Arrow button "Valider le panier"*/
.snipcart-cart-button__icon path {
  fill: black !important;
}

/* SVG*/
.snipcart-modal__close-icon path,
.snipcart-cart-header__icon path,
.snipcart-cart-summary-fees__tax-notice path,
.snipcart__icon--blue-dark path,
.snipcart-cart-summary-fees__title svg path {
  fill: var(--secondary) !important;
}

/*Button change quantity*/
.snipcart__button--no-border:active svg path,
.snipcart__button--no-border:focus svg path {
  fill: var(--secondary) !important;
}

/* Link*/
.snipcart__actions--link,
.snipcart-signin__register-link,
.snipcart-signin__forgot-password,
.snipcart-register__register-link {
  color: var(--secondary) !important;
}

/* Code Promo*/
.snipcart-discount-box__form,
.snipcart-discount-box__button:focus {
  border: 1px solid var(--primary-variant) !important;
}

#code,
#code:focus,
#code:focus-within {
  border: none !important;
}

.snipcart-discount-box__submit {
  color: var(--primary-variant) !important;
}

/* Form*/
/*icon left input*/
.snipcart__icon--blue-light path {
  fill: var(--secondary) !important;
}

.snipcart-icon--blue-light .snipcart-input:focus-within {
  border: none !important;
}

.snipcart-input__input:focus,
.snipcart-form__select:focus,
.snipcart-form__select:focus-within,
.snipcart-checkbox:focus + label:before,
.snipcart-checkbox:hover + label:before,
.snipcart-shipping-rates-list-item--highlight {
  border: 1px solid var(--secondary) !important;
}

.snipcart-input:focus-within,
.snipcart-form__select:focus-within {
  border: none !important;
}

/* Form checkbox*/
.snipcart-form__set .snipcart-checkbox:checked + label:before {
  border-color: var(--secondary) !important;
  background-color: var(--secondary) !important;
}
/*  Suggestion adresses */
.snipcart-typeahead__suggestions {
  border-color: var(--secondary) !important;
}

/* Buttons hover*/
.snipcart-cart-button--highlight:hover {
  animation: var(--animation-bg-color-hover) !important;
}

/* remove button*/
.snipcart-item-line__actions .snipcart__button--icon:focus {
  border: 1px solid var(--secondary) !important;
}

/*-------------------------------------------------------------------
-------------------------------------------------------------------*/

/* Animation button hover*/
@keyframes bgColorHover {
  0% {
    background-image: var(--gradient-button) !important;
  }
  10% {
    background-image: linear-gradient(
      90deg,
      var(--primary-variant) 55%,
      var(--primary)
    ) !important;
  }
  20% {
    background-image: linear-gradient(
      90deg,
      var(--primary-variant) 61%,
      var(--primary)
    ) !important;
  }
  30% {
    background-image: linear-gradient(
      90deg,
      var(--primary-variant) 66%,
      var(--primary)
    ) !important;
  }
  40% {
    background-image: linear-gradient(
      90deg,
      var(--primary-variant) 70%,
      var(--primary)
    ) !important;
  }
  50% {
    background-image: linear-gradient(
      90deg,
      var(--primary-variant) 75%,
      var(--primary)
    ) !important;
  }
  60% {
    background-image: linear-gradient(
      90deg,
      var(--primary-variant) 80%,
      var(--primary)
    ) !important;
  }
  70% {
    background-image: linear-gradient(
      90deg,
      var(--primary-variant) 85%,
      var(--primary)
    ) !important;
  }
  80% {
    background-image: linear-gradient(
      90deg,
      var(--primary-variant) 90%,
      var(--primary)
    ) !important;
  }
  90% {
    background-image: linear-gradient(
      90deg,
      var(--primary-variant) 95%,
      var(--primary)
    ) !important;
  }
  100% {
    background-image: linear-gradient(
      90deg,
      var(--primary-variant) 100%,
      var(--primary)
    ) !important;
  }
}