/* We use the custom properties from the theme and use them, providing a reasonable fallback in case the theme doesn't implement these properties. */
body {
  /* Animations */
  --bundly-duration-short: var(--duration-short, 100ms);

  /* Colors */
  --bundly-color-foreground: var(--color-foreground, 0, 0, 0);
  --bundly-color-background: var(--color-background, 255, 255, 255);
  --bundly-color-shadow: var(--color-shadow, 14, 27, 77);
  --bundly-gradient-background: var(--gradient-background);

  /* Typography */
  --bundly-font-heading-family: var(--font-heading-family, initial);
  --bundly-font-heading-style: var(--font-heading-style, normal);
  --bundly-font-heading-weight: var(--font-heading-weight, 700);
  --bundly-font-heading-scale: var(--font-heading-scale, 1.05);
  --bundly-font-body-scale: 1;
  --bundly-spacing-unit: 1rem;

  /* Layout */
  --bundly-grid-desktop-vertical-spacing: var(--grid-desktop-vertical-spacing, 28px);
  --bundly-grid-desktop-horizontal-spacing: var(--grid-desktop-horizontal-spacing, 28px);
  --bundly-grid-mobile-vertical-spacing: var(--grid-mobile-vertical-spacing, 16px);
  --bundly-grid-mobile-horizontal-spacing: var(--grid-mobile-horizontal-spacing, 16px);

  /* Buttons */
  --bundly-alpha-button-background: var(--alpha-button-background, 1);
  --bundly-color-button: var(--color-button, 0, 0, 0);
  --bundly-color-button-text: var(--color-button-text, 255, 255, 255);
  --bundly-buttons-border-opacity: calc(1 - var(--buttons-border-opacity, 1));
  --bundly-alpha-secondary-button-background: 0;
  --bundly-color-secondary-button: var(--color-secondary-button, 255, 255, 255);
  --bundly-color-secondary-button-opacity: 1;
  --bundly-color-secondary-button-text: var(--color-secondary-button-text, 0, 0, 0);
  --bundly-secondary-buttons-border-opacity: var(--buttons-border-opacity, 1);
  --bundly-buttons-border-offset: var(--buttons-border-offset);
  --bundly-buttons-border-width: var(--buttons-border-width, 1px);
  --bundly-buttons-radius-outset: var(--buttons-radius-outset, 0px);
  --bundly-buttons-radius: var(--buttons-radius, 0);
  --bundly-buttons-shadow-opacity: var(--buttons-shadow-opacity, 0);
  --bundly-buttons-shadow-horizontal-offset: var(--buttons-shadow-horizontal-offset, 0);
  --bundly-buttons-shadow-vertical-offset: var(--buttons-shadow-vertical-offset, 0);
  --bundly-buttons-shadow-blur-radius: var(--buttons-shadow-blur-radius);

  /* Variant Pills */
  --bundly-variant-pills-radius: var(--variant-pills-radius, 0);
  --bundly-variant-pills-border-width: var(--variant-pills-border-width, 1px);
  --bundly-variant-pills-border-opacity: var(--variant-pills-border-opacity, 1);
  --bundly-variant-pills-shadow-opacity: var(--variant-pills-shadow-opacity, 0);
  --bundly-variant-pills-shadow-horizontal-offset: var(--variant-pills-shadow-horizontal-offset, 0px);
  --bundly-variant-pills-shadow-vertical-offset: var(--variant-pills-shadow-vertical-offset, 4px);
  --bundly-variant-pills-shadow-blur-radius: var(--variant-pills-shadow-blur-radius, 5px);

  /* Media */
  --bundly-media-radius: var(--media-radius, 0);
  --bundly-media-border-width: var(--media-border-width, 0px);
  --bundly-media-border-opacity: var(--media-border-opacity, 1);

  /* Cards */
  --bundly-product-card-color-foreground: var(--bundly-color-foreground, 0, 0, 0);
  --bundly-product-card-color-background: 255, 255, 255;
  --bundly-product-card-color-background-opacity: 0;
  --bundly-product-card-image-padding: var(--product-card-image-padding, 0rem);
  --bundly-product-card-content-padding: var(--product-card-image-padding, 0rem);
  --bundly-product-text-alignment: var(--product-card-text-alignment, inherit);
  --bundly-product-card-border-width: var(--product-card-border-width, 0rem);
  --bundly-product-card-border-opacity: var(--product-card-border-opacity, 1);
  --bundly-product-card-shadow-opacity: var(--product-card-shadow-opacity, 0);
  --bundly-product-card-shadow-horizontal-offset: var(--product-card-shadow-horizontal-offset, 0rem);
  --bundly-product-card-shadow-vertical-offset: var(
    --product-card-shadow-vertical-offset,
    calc(0.4 * var(--bundly-spacing-unit))
  );
  --bundly-product-card-shadow-blur-radius: var(
    --product-card-shadow-blur-radius,
    calc(0.5 * var(--bundly-spacing-unit))
  );
  /* We deviate from Shopify's custom properties to allow for more options for image border radii. */
  --bundly-product-card-corner-radius: var(--product-card-corner-radius, 0rem);
  --bundly-product-card-corner-radius-bottom-left: 0;
  --bundly-product-card-corner-radius-bottom-right: 0;

  /* Badges */
  --bundly-badge-corner-radius: var(--badge-corner-radius, 0);
  --bundly-color-badge-background: var(--color-badge-background, 239, 240, 245);
  --bundly-color-badge-border: var(--color-badge-border, 14, 27, 77);
  --bundly-alpha-badge-border: var(--alpha-badge-border, 1);
  --bundly-color-badge-foreground: var(--color-badge-foreground, 14, 27, 77);

  /* Modal */
  --bundly-popup-corner-radius: var(--popup-corner-radius, 0);
  --bundly-popup-border-opacity: var(--popup-border-opacity, 0);
  --bundly-popup-border-width: var(--popup-border-width, 0px);
  --bundly-popup-shadow-horizontal-offset: var(--popup-shadow-horizontal-offset, 0px);
  --bundly-popup-shadow-vertical-offset: var(--popup-shadow-vertical-offset, 0px);
  --bundly-popup-shadow-blur-radius: var(--popup-shadow-blur-radius, 0);
  --bundly-popup-shadow-opacity: var(--popup-shadow-opacity, 0);
  --bundly-modal-padding: var(--modal-padding, calc(2 * var(--bundly-spacing-unit)));
}

/* Over rides for specific themes */
.bundly__shopify_crave_theme {
  --bundly-product-card-content-padding: calc(2 * var(--bundly-spacing-unit));
}

.bundly__shopify_sense_theme {
  --bundly-product-card-content-padding: calc(2 * var(--bundly-spacing-unit));
}

.bundly__shopify_spotlight_theme {
  --bundly-product-card-corner-radius-bottom-left: var(--product-card-corner-radius, 0rem);
  --bundly-product-card-corner-radius-bottom-right: var(--product-card-corner-radius, 0rem);
}

.bundly__shopify_trade_theme {
  --bundly-product-card-color-foreground: 38, 38, 38;
  --bundly-product-card-color-background-opacity: 1;
  --bundly-color-secondary-button: 255, 255, 255;
  --bundly-color-secondary-button-text: 121, 117, 114;
  --bundly-color-badge-background: 194, 183, 172;
  --bundly-color-badge-border: 38, 38, 38;
  --bundly-color-badge-foreground: 38, 38, 38;
}

.bundly__shopify_publisher_theme {
  --bundly-product-card-color-foreground: 255, 255, 255;
  --bundly-product-card-color-background: 0, 0, 0;
  --bundly-product-card-color-background-opacity: 1;
  --bundly-product-card-content-padding: calc(2 * var(--bundly-spacing-unit));
  --bundly-color-badge-background: 0, 0, 0;
  --bundly-color-badge-border: 0, 0, 0;
  --bundly-color-badge-foreground: 255, 255, 255;
}