.abra-gift-tiered-banner-block {
  width: 100%;
}

.abra-gift-tiered-banner--gift {
  --abra-banner-background: var(
    --abra-gift-tiered-banner-background-color,
    transparent,
  );
  --abra-banner-color: var(--abra-gift-tiered-message-color, #000000);
  --abra-banner-font-size: var(--abra-gift-tiered-message-font-size, 14px);
  --abra-banner-icon-color: var(--abra-gift-tiered-message-icon-color, #000000);
  --abra-banner-icon-size: var(--abra-gift-tiered-message-icon-size, 16px);
  --abra-banner-progress-bar-color: var(
    --abra-gift-tiered-progress-bar-color,
    #e2f3ea
  );
  --abra-banner-progress-bar-active-color: var(
    --abra-gift-tiered-progress-bar-active-color,
    #119e52
  );
  --abra-banner-discount-background: var(
    --abra-gift-tiered-gift-background-color,
    #e7f5ee
  );
  --abra-banner-discount-padding-x: var(
    --abra-gift-tiered-gift-padding-x,
    10px
  );
  --abra-banner-discount-padding-y: var(
    --abra-gift-tiered-gift-padding-y,
    10px
  );
  --abra-banner-discount-title-color: var(
    --abra-gift-tiered-product-name-color,
    #000000
  );
  --abra-banner-discount-title-font-size: var(
    --abra-gift-tiered-product-name-text-size,
    14px
  );
  --abra-banner-discount-price-color: var(
    --abra-gift-tiered-product-price-color,
    #404040
  );
  --abra-banner-discount-price-font-size: var(
    --abra-gift-tiered-product-price-text-size,
    13px
  );
  --abra-banner-variant-add-background: var(
    --abra-gift-tiered-variant-add-background,
    #000000
  );
  --abra-banner-variant-add-color: var(
    --abra-gift-tiered-variant-add-color,
    #ffffff
  );
}

.abra-gift-tiered-banner--tiered {
  --abra-banner-background-color: var(
    --abra-gift-tiered-banner-background-color,
    transparent
  );
  --abra-tiered-banner-progress-bar-text-and-icon-color: var(
    --abra-gift-tiered-message-color,
    #000000
  );
  --abra-tiered-banner-progress-bar-text-size: var(
    --abra-gift-tiered-message-font-size,
    14px
  );
  --abra-tiered-banner-progress-bar-icon-size: var(
    --abra-gift-tiered-message-icon-size,
    16px
  );
  --abra-tiered-banner-progress-bar-color: var(
    --abra-gift-tiered-progress-bar-color,
    #e2f3ea
  );
  --abra-tiered-banner-progress-bar-active-color: var(
    --abra-gift-tiered-progress-bar-active-color,
    #119e52
  );
  --abra-tiered-banner-reward-tier-color: var(
    --abra-gift-tiered-reward-tier-color,
    #cfecdc
  );
  --abra-tiered-banner-active-reward-tier-color: var(
    --abra-gift-tiered-active-reward-tier-color,
    #119e52
  );
  --abra-tiered-banner-reward-tier-icon-color: var(
    --abra-gift-tiered-reward-tier-icon-color,
    #000000
  );
  --abra-tiered-banner-active-reward-tier-icon-color: var(
    --abra-gift-tiered-active-reward-tier-icon-color,
    #ffffff
  );
  --abra-tiered-banner-summary-background-color: var(
    --abra-gift-tiered-summary-background-color,
    #cfecdc
  );
  --abra-tiered-banner-summary-text-size: var(
    --abra-gift-tiered-summary-text-size,
    13px
  );
  --abra-tiered-banner-summary-padding-y: var(
    --abra-gift-tiered-summary-padding-y,
    10px
  );
  --abra-tiered-banner-summary-padding-x: var(
    --abra-gift-tiered-summary-padding-x,
    10px
  );
  --abra-tiered-banner-gift-product-name-color: var(
    --abra-gift-tiered-product-name-color,
    #000000
  );
  --abra-tiered-banner-gift-product-name-text-size: var(
    --abra-gift-tiered-product-name-text-size,
    14px
  );
  --abra-tiered-banner-gift-product-price-color: var(
    --abra-gift-tiered-product-price-color,
    #404040
  );
  --abra-tiered-banner-gift-product-price-text-size: var(
    --abra-gift-tiered-product-price-text-size,
    13px
  );
  --abra-tiered-banner-gift-background-color: var(
    --abra-gift-tiered-gift-background-color,
    #e2f3ea
  );
  --abra-gift-padding-x: var(--abra-gift-tiered-gift-padding-x, 10px);
  --abra-gift-padding-y: var(--abra-gift-tiered-gift-padding-y, 10px);
  --abra-banner-variant-add-background: var(
    --abra-gift-tiered-variant-add-background,
    #000000
  );
  --abra-banner-variant-add-color: var(
    --abra-gift-tiered-variant-add-color,
    #ffffff
  );
  --abra-tiered-banner-enable-hover-preview: var(
    --abra-gift-tiered-enable-hover-preview,
    true
  );
}