@paypal/checkout-components 5.0.426-alpha-ea5d1e6.0 → 5.0.427

package/src/ui/buttons/styles/responsive.js

@@ -79,8 +79,8 @@ const generateButtonSizeStyles = ({
                 }
 
                 .${CLASS.CONTAINER} .${CLASS.BUTTON_ROW} .${CLASS.TEXT}, .${
-        CLASS.CONTAINER
-      } .${CLASS.BUTTON_ROW} .${CLASS.SPACE} {
+                  CLASS.CONTAINER
+                } .${CLASS.BUTTON_ROW} .${CLASS.SPACE} {
                     font-size: ${max(perc(buttonHeight, 36), 10)}px;
                     line-height: ${labelHeight}px;
                 }
@@ -117,13 +117,13 @@ const generateButtonSizeStyles = ({
                 .${CLASS.BUTTON_ROW}.${CLASS.LAYOUT}-${BUTTON_LAYOUT.VERTICAL} {
                     margin-bottom: ${perc(
                       buttonHeight,
-                      BUTTON_RELATIVE_STYLE.VERTICAL_MARGIN
+                      BUTTON_RELATIVE_STYLE.VERTICAL_MARGIN,
                     )}px;
                 }
 
                 .${CLASS.BUTTON_ROW}.${CLASS.LAYOUT}-${
-        BUTTON_LAYOUT.VERTICAL
-      }:last-of-type {
+                  BUTTON_LAYOUT.VERTICAL
+                }:last-of-type {
                     margin-bottom: 0;
                 }
 
@@ -144,38 +144,38 @@ const generateButtonSizeStyles = ({
                 }
 
                 .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${
-        FUNDING.APPLEPAY
-      }] .${CLASS.BUTTON_LABEL} {
+                  FUNDING.APPLEPAY
+                }] .${CLASS.BUTTON_LABEL} {
                     height: ${perc(buttonHeight, 80) + 5}px;
                 }
 
                 .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${
-        FUNDING.APPLEPAY
-      }] .${CLASS.BUTTON_LABEL} .${CLASS.TEXT} {
+                  FUNDING.APPLEPAY
+                }] .${CLASS.BUTTON_LABEL} .${CLASS.TEXT} {
                     line-height: ${perc(buttonHeight, 80) + 5}px;
                 }
 
                 .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.EPS}] .${
-        CLASS.BUTTON_LABEL
-      },
+                  CLASS.BUTTON_LABEL
+                },
                 .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${
-        FUNDING.MYBANK
-      }] .${CLASS.BUTTON_LABEL} {
+                  FUNDING.MYBANK
+                }] .${CLASS.BUTTON_LABEL} {
                     height: ${perc(buttonHeight, 50) + 5}px;
                 }
 
                 .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.EPS}] .${
-        CLASS.BUTTON_LABEL
-      } .${CLASS.TEXT},
+                  CLASS.BUTTON_LABEL
+                } .${CLASS.TEXT},
                 .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.EPS}] .${
-        CLASS.BUTTON_LABEL
-      } .${CLASS.SPACE},
+                  CLASS.BUTTON_LABEL
+                } .${CLASS.SPACE},
                 .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${
-        FUNDING.MYBANK
-      }] .${CLASS.BUTTON_LABEL} .${CLASS.TEXT},
+                  FUNDING.MYBANK
+                }] .${CLASS.BUTTON_LABEL} .${CLASS.TEXT},
                 .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${
-        FUNDING.MYBANK
-      }] .${CLASS.BUTTON_LABEL} .${CLASS.SPACE} {
+                  FUNDING.MYBANK
+                }] .${CLASS.BUTTON_LABEL} .${CLASS.SPACE} {
                     line-height: ${perc(buttonHeight, 50) + 5}px;
                 }
                 
@@ -211,22 +211,22 @@ const generateButtonSizeStyles = ({
                 }
 
                 .${CLASS.BUTTON_ROW}.${CLASS.SHAPE}-${
-        BUTTON_SHAPE.SHARP
-      } .menu-button {
+                  BUTTON_SHAPE.SHARP
+                } .menu-button {
                               border-top-right-radius: 0px;
                               border-bottom-right-radius: 0px;
                           }
 
                 .${CLASS.BUTTON_ROW}.${CLASS.SHAPE}-${
-        BUTTON_SHAPE.RECT
-      } .menu-button {
+                  BUTTON_SHAPE.RECT
+                } .menu-button {
                     border-top-right-radius: 4px;
                     border-bottom-right-radius: 4px;
                 }
 
                 .${CLASS.BUTTON_ROW}.${CLASS.SHAPE}-${
-        BUTTON_SHAPE.PILL
-      } .menu-button {
+                  BUTTON_SHAPE.PILL
+                } .menu-button {
                     border-top-right-radius: ${pillBorderRadius}px;
                     border-bottom-right-radius: ${pillBorderRadius}px;
                 }
@@ -234,11 +234,11 @@ const generateButtonSizeStyles = ({
                 .${CLASS.TAGLINE} .${CLASS.TEXT} {
                     height: ${perc(
                       buttonHeight,
-                      BUTTON_RELATIVE_STYLE.TAGLINE
+                      BUTTON_RELATIVE_STYLE.TAGLINE,
                     )}px;
                     line-height: ${perc(
                       buttonHeight,
-                      BUTTON_RELATIVE_STYLE.TAGLINE
+                      BUTTON_RELATIVE_STYLE.TAGLINE,
                     )}px;
                 }
 
@@ -248,8 +248,8 @@ const generateButtonSizeStyles = ({
                 }
 
                 .${CLASS.BUTTON_ROW}.${CLASS.WALLET}.${CLASS.WALLET_MENU} .${
-        CLASS.BUTTON
-      } {
+                  CLASS.BUTTON
+                } {
                     width: calc(100% - ${buttonHeight + 2}px);
                     border-top-right-radius: 0px;
                     border-bottom-right-radius: 0px;
@@ -266,15 +266,15 @@ const generateButtonSizeStyles = ({
             }px) and (max-width: 320px) {
 
                 .${CLASS.CONTAINER} .${CLASS.BUTTON_ROW} .${CLASS.TEXT}, .${
-        CLASS.CONTAINER
-      } .${CLASS.BUTTON_ROW} .${CLASS.SPACE} {
+                  CLASS.CONTAINER
+                } .${CLASS.BUTTON_ROW} .${CLASS.SPACE} {
                     font-size: ${max(
                       perc(buttonHeight, textPercPercentage),
-                      10
+                      10,
                     )}px;
                     margin-top: -${perc(
                       max(perc(buttonHeight, textPercPercentage), 10),
-                      10
+                      10,
                     )}px;
                     line-height: ${smallerLabelHeight}px;
                 }
@@ -283,7 +283,7 @@ const generateButtonSizeStyles = ({
                 .${CLASS.CONTAINER} .${CLASS.BUTTON_ROW} .${CLASS.TEXT} * {
                     margin-top: ${perc(
                       max(perc(buttonHeight, textPercPercentage), 10),
-                      10
+                      10,
                     )}px;
                 }
 
@@ -298,76 +298,76 @@ const generateButtonSizeStyles = ({
             }px) and (max-width: ${minDualWidth}px) {
 
                 .${CLASS.BUTTON_ROW}.${CLASS.LAYOUT}-${
-        BUTTON_LAYOUT.HORIZONTAL
-      }.${CLASS.NUMBER}-${BUTTON_NUMBER.MULTIPLE}.${CLASS.NUMBER}-0 {
+                  BUTTON_LAYOUT.HORIZONTAL
+                }.${CLASS.NUMBER}-${BUTTON_NUMBER.MULTIPLE}.${CLASS.NUMBER}-0 {
                     width: 100%;
                     margin-right: 0;
                 }
 
                 .${CLASS.BUTTON_ROW}.${CLASS.LAYOUT}-${
-        BUTTON_LAYOUT.HORIZONTAL
-      }.${CLASS.NUMBER}-${BUTTON_NUMBER.MULTIPLE}.${CLASS.NUMBER}-1 {
+                  BUTTON_LAYOUT.HORIZONTAL
+                }.${CLASS.NUMBER}-${BUTTON_NUMBER.MULTIPLE}.${CLASS.NUMBER}-1 {
                     display: none;
                 }
 
                 .${CLASS.CONTAINER}.${CLASS.LAYOUT}-${
-        BUTTON_LAYOUT.HORIZONTAL
-      }.${CLASS.NUMBER}-${BUTTON_NUMBER.MULTIPLE} .${CLASS.TAGLINE} {
+                  BUTTON_LAYOUT.HORIZONTAL
+                }.${CLASS.NUMBER}-${BUTTON_NUMBER.MULTIPLE} .${CLASS.TAGLINE} {
                     display: none;
                 }
             }
 
             @media only screen and (min-width: ${max(
               style.minWidth,
-              minDualWidth
+              minDualWidth,
             )}px) {
 
                 .${CLASS.BUTTON_ROW}.${CLASS.LAYOUT}-${
-        BUTTON_LAYOUT.HORIZONTAL
-      }.${CLASS.NUMBER}-${BUTTON_NUMBER.MULTIPLE}.${CLASS.NUMBER}-0 {
+                  BUTTON_LAYOUT.HORIZONTAL
+                }.${CLASS.NUMBER}-${BUTTON_NUMBER.MULTIPLE}.${CLASS.NUMBER}-0 {
                     display: inline-block;
                     width: calc(${FIRST_BUTTON_PERC}% - ${perc(
-        buttonHeight,
-        7
-      )}px);
+                      buttonHeight,
+                      7,
+                    )}px);
                     margin-right: ${perc(buttonHeight, 7) * 2}px;
                 }
 
                 .${CLASS.BUTTON_ROW}.${CLASS.LAYOUT}-${
-        BUTTON_LAYOUT.HORIZONTAL
-      }.${CLASS.NUMBER}-${BUTTON_NUMBER.MULTIPLE}.${CLASS.NUMBER}-1 {
+                  BUTTON_LAYOUT.HORIZONTAL
+                }.${CLASS.NUMBER}-${BUTTON_NUMBER.MULTIPLE}.${CLASS.NUMBER}-1 {
                     display: inline-block;
                     width: calc(${100 - FIRST_BUTTON_PERC}% - ${perc(
-        buttonHeight,
-        7
-      )}px);
+                      buttonHeight,
+                      7,
+                    )}px);
                 }
 
                 .${CLASS.CONTAINER}.${CLASS.WALLET} .${CLASS.BUTTON_ROW}.${
-        CLASS.WALLET
-      }.${CLASS.LAYOUT}-${BUTTON_LAYOUT.HORIZONTAL}.${CLASS.NUMBER}-${
-        BUTTON_NUMBER.MULTIPLE
-      } {
+                  CLASS.WALLET
+                }.${CLASS.LAYOUT}-${BUTTON_LAYOUT.HORIZONTAL}.${CLASS.NUMBER}-${
+                  BUTTON_NUMBER.MULTIPLE
+                } {
                     width: calc(${WALLET_BUTTON_PERC}% - ${perc(
-        buttonHeight,
-        7
-      )}px);
+                      buttonHeight,
+                      7,
+                    )}px);
                 }
 
                 .${CLASS.CONTAINER}.${CLASS.WALLET} .${CLASS.BUTTON_ROW}:not(.${
-        CLASS.WALLET
-      }).${CLASS.LAYOUT}-${BUTTON_LAYOUT.HORIZONTAL}.${CLASS.NUMBER}-${
-        BUTTON_NUMBER.MULTIPLE
-      } {
+                  CLASS.WALLET
+                }).${CLASS.LAYOUT}-${BUTTON_LAYOUT.HORIZONTAL}.${CLASS.NUMBER}-${
+                  BUTTON_NUMBER.MULTIPLE
+                } {
                     width: calc(${100 - WALLET_BUTTON_PERC}% - ${perc(
-        buttonHeight,
-        7
-      )}px);
+                      buttonHeight,
+                      7,
+                    )}px);
                 }
 
                 .${CLASS.CONTAINER}.${CLASS.LAYOUT}-${
-        BUTTON_LAYOUT.HORIZONTAL
-      }.${CLASS.NUMBER}-${BUTTON_NUMBER.MULTIPLE} .${CLASS.TAGLINE} {
+                  BUTTON_LAYOUT.HORIZONTAL
+                }.${CLASS.NUMBER}-${BUTTON_NUMBER.MULTIPLE} .${CLASS.TAGLINE} {
                     display: block;
                 }
             }
@@ -417,11 +417,11 @@ const generateDisableMaxHeightStyles = ({
               }
 
               .${CLASS.CONTAINER} .${CLASS.BUTTON_ROW} .${CLASS.BUTTON}:not(.${
-        CLASS.BUTTON_REBRAND
-      }) .${CLASS.TEXT},
+                CLASS.BUTTON_REBRAND
+              }) .${CLASS.TEXT},
               .${CLASS.CONTAINER} .${CLASS.BUTTON_ROW} .${CLASS.BUTTON}:not(.${
-        CLASS.BUTTON_REBRAND
-      }) .${CLASS.SPACE} {
+                CLASS.BUTTON_REBRAND
+              }) .${CLASS.SPACE} {
                 line-height: ${labelHeight}px;
               }
               
@@ -583,8 +583,8 @@ const generateRebrandedButtonSizeStyles = ({
           }
 
           .${CLASS.BUTTON_REBRAND}.${CLASS.NUMBER}-${BUTTON_NUMBER.MULTIPLE} .${
-        CLASS.BUTTON_LABEL
-      } {
+            CLASS.BUTTON_LABEL
+          } {
               gap: ${gap}px;
           }
 
@@ -593,18 +593,18 @@ const generateRebrandedButtonSizeStyles = ({
           }
 
           .${CLASS.BUTTON_ROW}.${CLASS.LAYOUT}-${BUTTON_LAYOUT.VERTICAL}.${
-        CLASS.NUMBER
-      }-${BUTTON_NUMBER.MULTIPLE} {
+            CLASS.NUMBER
+          }-${BUTTON_NUMBER.MULTIPLE} {
               margin-bottom: ${perc(
                 buttonHeight,
-                BUTTON_RELATIVE_STYLE.VERTICAL_MARGIN
+                BUTTON_RELATIVE_STYLE.VERTICAL_MARGIN,
               )}px;
           }
 
           /*  TO:DO no margin on last-child not getting applied */
           .${CLASS.BUTTON_ROW}.${CLASS.LAYOUT}-${BUTTON_LAYOUT.VERTICAL}.${
-        CLASS.NUMBER
-      }-${BUTTON_NUMBER.MULTIPLE}:last-child {
+            CLASS.NUMBER
+          }-${BUTTON_NUMBER.MULTIPLE}:last-child {
               margin-bottom: 0;
           }
 
@@ -640,22 +640,22 @@ const generateRebrandedButtonSizeStyles = ({
           }
 
           .${CLASS.BUTTON_ROW}.${CLASS.SHAPE}-${
-        BUTTON_SHAPE.SHARP
-      } .menu-button {
+            BUTTON_SHAPE.SHARP
+          } .menu-button {
               border-top-right-radius: 0px;
               border-bottom-right-radius: 0px;
           }
 
           .${CLASS.BUTTON_ROW}.${CLASS.SHAPE}-${
-        BUTTON_SHAPE.RECT
-      } .menu-button {
+            BUTTON_SHAPE.RECT
+          } .menu-button {
               border-top-right-radius: 4px;
               border-bottom-right-radius: 4px;
           }
 
           .${CLASS.BUTTON_ROW}.${CLASS.SHAPE}-${
-        BUTTON_SHAPE.PILL
-      } .menu-button {
+            BUTTON_SHAPE.PILL
+          } .menu-button {
               border-top-right-radius: 9999px;
               border-bottom-right-radius: 9999px;
           }
@@ -663,72 +663,72 @@ const generateRebrandedButtonSizeStyles = ({
 
         @media only screen and (min-width: ${minWidth}px) and (max-width: ${minDualWidth}px) {
           .${CLASS.BUTTON_ROW}.${CLASS.LAYOUT}-${BUTTON_LAYOUT.HORIZONTAL}.${
-        CLASS.NUMBER
-      }-${BUTTON_NUMBER.MULTIPLE}.${CLASS.NUMBER}-0 {
+            CLASS.NUMBER
+          }-${BUTTON_NUMBER.MULTIPLE}.${CLASS.NUMBER}-0 {
             width: 100%;
             margin-right: 0;
           }
 
           .${CLASS.BUTTON_ROW}.${CLASS.LAYOUT}-${BUTTON_LAYOUT.HORIZONTAL}.${
-        CLASS.NUMBER
-      }-${BUTTON_NUMBER.MULTIPLE}.${CLASS.NUMBER}-1 {
+            CLASS.NUMBER
+          }-${BUTTON_NUMBER.MULTIPLE}.${CLASS.NUMBER}-1 {
             display: none;
           }
 
           .${CLASS.CONTAINER}.${CLASS.LAYOUT}-${BUTTON_LAYOUT.HORIZONTAL}.${
-        CLASS.NUMBER
-      }-${BUTTON_NUMBER.MULTIPLE} .${CLASS.TAGLINE} {
+            CLASS.NUMBER
+          }-${BUTTON_NUMBER.MULTIPLE} .${CLASS.TAGLINE} {
             display: none;
           }
         }
         
         @media only screen and (min-width: ${max(minWidth, minDualWidth)}px) {
           .${CLASS.BUTTON_ROW}.${CLASS.LAYOUT}-${BUTTON_LAYOUT.HORIZONTAL}.${
-        CLASS.NUMBER
-      }-${BUTTON_NUMBER.MULTIPLE}.${CLASS.NUMBER}-0 {
+            CLASS.NUMBER
+          }-${BUTTON_NUMBER.MULTIPLE}.${CLASS.NUMBER}-0 {
             display: inline-block;
             width: calc(${FIRST_BUTTON_PERC}% - ${perc(buttonHeight, 7)}px);
             margin-right: ${perc(buttonHeight, 7) * 2}px;
           }
 
           .${CLASS.BUTTON_ROW}.${CLASS.LAYOUT}-${BUTTON_LAYOUT.HORIZONTAL}.${
-        CLASS.NUMBER
-      }-${BUTTON_NUMBER.MULTIPLE}.${CLASS.NUMBER}-1 {
+            CLASS.NUMBER
+          }-${BUTTON_NUMBER.MULTIPLE}.${CLASS.NUMBER}-1 {
             display: inline-block;
             width: calc(${100 - FIRST_BUTTON_PERC}% - ${perc(
-        buttonHeight,
-        7
-      )}px);
+              buttonHeight,
+              7,
+            )}px);
           }
 
           .${CLASS.CONTAINER}.${CLASS.WALLET} .${CLASS.BUTTON_ROW}.${
-        CLASS.WALLET
-      }.${CLASS.LAYOUT}-${BUTTON_LAYOUT.HORIZONTAL}.${CLASS.NUMBER}-${
-        BUTTON_NUMBER.MULTIPLE
-      } {
+            CLASS.WALLET
+          }.${CLASS.LAYOUT}-${BUTTON_LAYOUT.HORIZONTAL}.${CLASS.NUMBER}-${
+            BUTTON_NUMBER.MULTIPLE
+          } {
             width: calc(${WALLET_BUTTON_PERC}% - ${perc(buttonHeight, 7)}px);
           }
 
           .${CLASS.CONTAINER}.${CLASS.WALLET} .${CLASS.BUTTON_ROW}:not(.${
-        CLASS.WALLET
-      }).${CLASS.LAYOUT}-${BUTTON_LAYOUT.HORIZONTAL}.${CLASS.NUMBER}-${
-        BUTTON_NUMBER.MULTIPLE
-      } {
+            CLASS.WALLET
+          }).${CLASS.LAYOUT}-${BUTTON_LAYOUT.HORIZONTAL}.${CLASS.NUMBER}-${
+            BUTTON_NUMBER.MULTIPLE
+          } {
             width: calc(${100 - WALLET_BUTTON_PERC}% - ${perc(
-        buttonHeight,
-        7
-      )}px);
+              buttonHeight,
+              7,
+            )}px);
           }
 
           .${CLASS.CONTAINER}.${CLASS.LAYOUT}-${BUTTON_LAYOUT.HORIZONTAL}.${
-        CLASS.NUMBER
-      }-${BUTTON_NUMBER.MULTIPLE} .${CLASS.TAGLINE} {
+            CLASS.NUMBER
+          }-${BUTTON_NUMBER.MULTIPLE} .${CLASS.TAGLINE} {
             display: block;
           }
 
           .${CLASS.CONTAINER}.${CLASS.LAYOUT}-${BUTTON_LAYOUT.HORIZONTAL}.${
-        CLASS.NUMBER
-      }-${BUTTON_NUMBER.MULTIPLE} .${CLASS.TAGLINE} .${CLASS.TEXT} {
+            CLASS.NUMBER
+          }-${BUTTON_NUMBER.MULTIPLE} .${CLASS.TAGLINE} .${CLASS.TEXT} {
             display: block;
           }
         }
@@ -744,11 +744,11 @@ const generateRebrandedButtonSizeStyles = ({
           }
 
           .${CLASS.CONTAINER} .${CLASS.BUTTON_ROW} .${CLASS.BUTTON_REBRAND}.${
-        CLASS.BUTTON_REBRAND
-      } .${CLASS.TEXT},
+            CLASS.BUTTON_REBRAND
+          } .${CLASS.TEXT},
           .${CLASS.CONTAINER} .${CLASS.BUTTON_ROW} .${CLASS.BUTTON_REBRAND}.${
-        CLASS.BUTTON_REBRAND
-      } .${CLASS.SPACE} {
+            CLASS.BUTTON_REBRAND
+          } .${CLASS.SPACE} {
               font-size: ${fontSize}px;
               margin: 0;
           }
@@ -765,38 +765,38 @@ const generateRebrandedButtonSizeStyles = ({
           }
 
           .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.APPLEPAY}] .${
-        CLASS.BUTTON_LABEL
-      } {
+            CLASS.BUTTON_LABEL
+          } {
               height: ${perc(buttonHeight, 80) + 5}px;
           }
 
           .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.APPLEPAY}] .${
-        CLASS.BUTTON_LABEL
-      } .${CLASS.TEXT} {
+            CLASS.BUTTON_LABEL
+          } .${CLASS.TEXT} {
               line-height: ${perc(buttonHeight, 80) + 5}px;
           }
 
           .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.EPS}] .${
-        CLASS.BUTTON_LABEL
-      },
+            CLASS.BUTTON_LABEL
+          },
           .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.MYBANK}] .${
-        CLASS.BUTTON_LABEL
-      } {
+            CLASS.BUTTON_LABEL
+          } {
               height: ${perc(buttonHeight, 50) + 5}px;
           }
 
           .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.EPS}] .${
-        CLASS.BUTTON_LABEL
-      } .${CLASS.TEXT},
+            CLASS.BUTTON_LABEL
+          } .${CLASS.TEXT},
           .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.EPS}] .${
-        CLASS.BUTTON_LABEL
-      } .${CLASS.SPACE},
+            CLASS.BUTTON_LABEL
+          } .${CLASS.SPACE},
           .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.MYBANK}] .${
-        CLASS.BUTTON_LABEL
-      } .${CLASS.TEXT},
+            CLASS.BUTTON_LABEL
+          } .${CLASS.TEXT},
           .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.MYBANK}] .${
-        CLASS.BUTTON_LABEL
-      } .${CLASS.SPACE} {
+            CLASS.BUTTON_LABEL
+          } .${CLASS.SPACE} {
               line-height: ${perc(buttonHeight, 50) + 5}px;
           }
 
@@ -804,7 +804,7 @@ const generateRebrandedButtonSizeStyles = ({
               height: ${perc(buttonHeight, BUTTON_RELATIVE_STYLE.TAGLINE)}px;
               line-height: ${perc(
                 buttonHeight,
-                BUTTON_RELATIVE_STYLE.TAGLINE
+                BUTTON_RELATIVE_STYLE.TAGLINE,
               )}px;
           }
 
@@ -814,8 +814,8 @@ const generateRebrandedButtonSizeStyles = ({
           }
 
           .${CLASS.BUTTON_ROW}.${CLASS.WALLET}.${CLASS.WALLET_MENU} .${
-        CLASS.BUTTON
-      } {
+            CLASS.BUTTON
+          } {
               width: calc(100% - ${buttonHeight + 2}px);
               border-top-right-radius: 0px;
               border-bottom-right-radius: 0px;

package/src/ui/buttons/styles/styleUtils.js

@@ -64,7 +64,7 @@ function getMarginTop({
   const marginTopPercPercentage = shouldResizeLabel ? 32 : 36;
   const marginTop = `${perc(
     max(perc(height, marginTopPercPercentage), 10),
-    10
+    10,
   )}`;
 
   return parseInt(marginTop, 10);
@@ -76,7 +76,7 @@ function getMarginTop({
 // pixel-perfect vertical centering.
 export function getLabelContainerHeight(
   buttonHeight: number,
-  fontSize: number
+  fontSize: number,
 ): number {
   let labelHeight = Math.round(buttonHeight * REBRAND_LABEL_HEIGHT_RATIO);
   const diff = labelHeight - fontSize;
@@ -99,7 +99,7 @@ export function generateLabelHeightContainerStyles(
     maxHeight: number,
     fontSize: number,
   |}>,
-  renderRule: (minH: number, maxH: number, labelHeight: number) => string
+  renderRule: (minH: number, maxH: number, labelHeight: number) => string,
 ): string {
   return sizes
     .flatMap(({ minHeight, maxHeight, fontSize }) => {
@@ -126,7 +126,7 @@ export function generateLabelHeightContainerStyles(
       });
 
       return groups.map(({ minH, maxH, labelHeight }) =>
-        renderRule(minH, maxH, labelHeight)
+        renderRule(minH, maxH, labelHeight),
       );
     })
     .join("");
@@ -151,7 +151,7 @@ export function generateDisableMaxHeightLabelContainerStyles(): string {
           height: ${labelHeight}px;
         }
       }
-    `
+    `,
   );
 
   // For containers taller than the last defined bucket, cap the label height
@@ -159,7 +159,7 @@ export function generateDisableMaxHeightLabelContainerStyles(): string {
   const lastSize = sizes[sizes.length - 1];
   const catchAllLabelHeight = getLabelContainerHeight(
     lastSize.maxHeight,
-    lastSize.fontSize
+    lastSize.fontSize,
   );
   const catchAllStyles = `
     @container (min-height: ${lastSize.maxHeight + 1}px) {
@@ -220,15 +220,16 @@ export function getResponsiveStyleVariables({
   const buttonHeight = height || style.defaultHeight;
   const minDualWidth = Math.max(
     Math.round(
-      buttonHeight * BUTTON_MIN_ASPECT_RATIO * (100 / WALLET_BUTTON_PERC)
+      buttonHeight * BUTTON_MIN_ASPECT_RATIO * (100 / WALLET_BUTTON_PERC),
     ),
-    MIN_SPLIT_BUTTON_WIDTH
+    MIN_SPLIT_BUTTON_WIDTH,
   );
 
   const { paylater } = fundingEligibility;
 
   const shouldResizeLabel =
     paylater?.products?.paylater?.variant === "DE" ||
+    paylater?.products?.paylater?.variant === "AT" ||
     paylater?.products?.payIn3?.variant === "IT" ||
     paylater?.products?.paylater?.variant === "IT" ||
     paylater?.products?.payIn3?.variant === "ES" ||
@@ -239,7 +240,7 @@ export function getResponsiveStyleVariables({
 
   let smallerLabelHeight = max(
     roundUp(perc(buttonHeight, labelPercPercentage) + 5, 2),
-    12
+    12,
   );
   let labelHeight = max(roundUp(perc(buttonHeight, 35) + 5, 2), 12);
 
@@ -248,7 +249,7 @@ export function getResponsiveStyleVariables({
   if (shouldApplyRebrandedStyles) {
     labelHeight = roundUp(
       perc(buttonHeight, REBRAND_LABEL_HEIGHT_RATIO * 100),
-      1
+      1,
     );
     // smallerLabelHeight gets triggered at widths < 320px
     // We will need to investigate why the labels need to get significantly smaller at this breakpoint
@@ -293,9 +294,9 @@ export function getResponsiveRebrandedStyleVariables({
 
   const minDualWidth = Math.max(
     Math.round(
-      buttonHeight * BUTTON_MIN_ASPECT_RATIO * (100 / WALLET_BUTTON_PERC)
+      buttonHeight * BUTTON_MIN_ASPECT_RATIO * (100 / WALLET_BUTTON_PERC),
     ),
-    MIN_SPLIT_BUTTON_WIDTH
+    MIN_SPLIT_BUTTON_WIDTH,
   );
 
   const styleVariables = {
@@ -331,6 +332,7 @@ export function getDisableMaxHeightResponsiveStyleVariables({
 
   const shouldResizeLabel =
     paylater?.products?.paylater?.variant === "DE" ||
+    paylater?.products?.paylater?.variant === "AT" ||
     paylater?.products?.payIn3?.variant === "IT" ||
     paylater?.products?.paylater?.variant === "IT" ||
     paylater?.products?.payIn3?.variant === "ES" ||