[_nghost-ng-c1162881103] {
  --yappy-color-aluminium: #d2d6de;
  --yappy-color-ash: #9fa6b7;
  --yappy-color-black: #000000;
  --yappy-color-blue-sky: #1a90e4;
  --yappy-color-concrete: #6f7583;
  --yappy-color-crystal: #f9fdff;
  --yappy-color-cooper: #d86018;
  --yappy-color-denim: #444c5e;
  --yappy-color-glacier: #1eb2f5;
  --yappy-color-logo-blue: #004c97;
  --yappy-color-new-artic: #e3f3ff;
  --yappy-color-new-frost: #f4faff;
  --yappy-color-rubi: #D0021B;
  --yappy-color-royal: #1677d8;
  --yappy-color-tangerine: #ff973c;
  --yappy-color-twister: #5279a1;
  --yappy-color-white: #ffffff;

  --gradient-blue-sky: linear-gradient(180deg, var(--yappy-color-glacier) 0%, var(--yappy-color-blue-sky) 100%);
  --gradient-orange: linear-gradient(178deg, var(--yappy-color-tangerine) 0%, var(--yappy-color-cooper) 100%);
}

/* Backdrop */
.yappy-backdrop[_ngcontent-ng-c1162881103] {
  width: 100vw;
  height: 100vh;
  background: var(--yappy-color-black);
  opacity: 0.3;
  z-index: 5;
  position: fixed;
  inset: 0;
}

/* Base button */
.yappy-button.ecommerce[_ngcontent-ng-c1162881103] {
  height: 50px !important;
  margin: 0 auto;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 4px !important;
  text-align: center;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 16px !important;
  line-height: 22.4px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

/* Rounded button */
.yappy-button.ecommerce.round-border[_ngcontent-ng-c1162881103] {
  border-radius: 100px !important;
}

/* Sky style */
.yappy-button.ecommerce.sky[_ngcontent-ng-c1162881103] {
  color: var(--yappy-color-royal) !important;
  background: var(--yappy-color-new-frost) !important;
}

.yappy-button.ecommerce.sky[_ngcontent-ng-c1162881103]:hover {
  background: var(--yappy-color-crystal) !important;
}

.yappy-button.ecommerce.sky[_ngcontent-ng-c1162881103]:active {
  background: var(--yappy-color-new-artic) !important;
}

.yappy-button.ecommerce.sky[_ngcontent-ng-c1162881103] > .spinner[_ngcontent-ng-c1162881103] {
  border-color: var(--yappy-color-royal) !important;
  border-right-color: #cce3f5 !important;
}

/* Light style */
.yappy-button.ecommerce.light[_ngcontent-ng-c1162881103] {
  color: var(--yappy-color-royal) !important;
  background: var(--yappy-color-white) !important;
}

.yappy-button.ecommerce.light[_ngcontent-ng-c1162881103]:hover {
  background: var(--yappy-color-new-frost) !important;
}

.yappy-button.ecommerce.light[_ngcontent-ng-c1162881103]:active {
  background: var(--yappy-color-new-artic) !important;
}

.yappy-button.ecommerce.light[_ngcontent-ng-c1162881103] > .spinner[_ngcontent-ng-c1162881103] {
  border-color: var(--yappy-color-royal) !important;
  border-right-color: #cce3f5 !important;
}

/* Blue style */
.yappy-button.ecommerce.blue[_ngcontent-ng-c1162881103] {
  color: var(--yappy-color-white) !important;
  background: var(--yappy-color-glacier) !important;
}

.yappy-button.ecommerce.blue[_ngcontent-ng-c1162881103]:hover {
  background: var(--gradient-blue-sky) !important;
}

.yappy-button.ecommerce.blue[_ngcontent-ng-c1162881103]:active {
  background: var(--yappy-color-royal) !important;
}

.yappy-button.ecommerce.blue[_ngcontent-ng-c1162881103] > .spinner[_ngcontent-ng-c1162881103] {
  border-color: var(--yappy-color-glacier) !important;
  border-right-color: #cce3f5 !important;
}

/* Orange style */
.yappy-button.ecommerce.orange[_ngcontent-ng-c1162881103] {
  color: var(--yappy-color-white) !important;
  background: var(--yappy-color-tangerine) !important;
}

.yappy-button.ecommerce.orange[_ngcontent-ng-c1162881103]:hover {
  background: var(--gradient-orange) !important;
}

.yappy-button.ecommerce.orange[_ngcontent-ng-c1162881103]:active {
  background: var(--yappy-color-cooper) !important;
}

.yappy-button.ecommerce.orange[_ngcontent-ng-c1162881103] > .spinner[_ngcontent-ng-c1162881103] {
  border-color: var(--yappy-color-cooper) !important;
  border-right-color: #fff5eb !important;
}

/* Dark blue style */
.yappy-button.ecommerce.darkBlue[_ngcontent-ng-c1162881103] {
  color: var(--yappy-color-white) !important;
  background: var(--yappy-color-royal) !important;
}

.yappy-button.ecommerce.darkBlue[_ngcontent-ng-c1162881103]:hover {
  background: var(--yappy-color-logo-blue) !important;
}

.yappy-button.ecommerce.darkBlue[_ngcontent-ng-c1162881103]:active {
  background: var(--yappy-color-twister) !important;
}

.yappy-button.ecommerce.darkBlue[_ngcontent-ng-c1162881103] > .spinner[_ngcontent-ng-c1162881103] {
  border-color: var(--yappy-color-glacier) !important;
  border-right-color: #cce3f5 !important;
}

/* Dark style */
.yappy-button.ecommerce.dark[_ngcontent-ng-c1162881103] {
  color: var(--yappy-color-white) !important;
  background: var(--yappy-color-denim) !important;
}

.yappy-button.ecommerce.dark[_ngcontent-ng-c1162881103]:hover {
  background: var(--yappy-color-ash) !important;
}

.yappy-button.ecommerce.dark[_ngcontent-ng-c1162881103]:active {
  background: var(--yappy-color-concrete) !important;
}

.yappy-button.ecommerce.dark[_ngcontent-ng-c1162881103] > .spinner[_ngcontent-ng-c1162881103] {
  border-color: var(--yappy-color-aluminium) !important;
  border-right-color: var(--yappy-color-white) !important;
}

/* Button internal content */
.yappy-button.ecommerce[_ngcontent-ng-c1162881103] .text-button[_ngcontent-ng-c1162881103] {
  margin-right: 8px;
}

.yappy-button.ecommerce[_ngcontent-ng-c1162881103] .icon-button[_ngcontent-ng-c1162881103] {
  width: 96px !important;
  height: 24px !important;
}

/* Disabled button */
.disable-btn[_ngcontent-ng-c1162881103] {
  opacity: 0.4 !important;
  pointer-events: none !important;
}

/* Label shown when unavailable */
.unavailable-label[_ngcontent-ng-c1162881103] {
  margin: 5px auto;
  display: table;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 16px !important;
  line-height: 28px !important;
  font-weight: 400 !important;
  color: var(--yappy-color-rubi);
}

/* Responsive */
@media only screen and (max-width: 823px) {
  .yappy-button.ecommerce[_ngcontent-ng-c1162881103] {
    padding: 28px 16px !important;
  }
}

/* Spinner animation */
.spinner[_ngcontent-ng-c1162881103] {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 5px solid;
  animation: _ngcontent-ng-c1162881103_spinnerAnimation 1s infinite linear;
}

@keyframes _ngcontent-ng-c1162881103_spinnerAnimation {
  to {
    transform: rotate(1turn);
  }
}