diff --git a/src/constants/button.js b/src/constants/button.js
index 28e78e963..005310f60 100644
--- a/src/constants/button.js
+++ b/src/constants/button.js
@@ -38,6 +38,18 @@ export const BUTTON_SIZE = {
   RESPONSIVE: ("responsive": "responsive"),
 };
 
+export const BUTTON_DISABLE_MAX_HEIGHT_SIZE = {
+  TINY: ("tiny": "tiny"),
+  SMALL: ("small": "small"),
+  MEDIUM_SMALL: ("mediumSmall": "mediumSmall"),
+  MEDIUM_BIG: ("mediumBig": "mediumBig"),
+  LARGE_SMALL: ("largeSmall": "largeSmall"),
+  LARGE_BIG: ("largeBig": "largeBig"),
+  XL: ("xl": "xl"),
+  XXL: ("xxl": "xxl"),
+  XXXL: ("xxxl": "xxxl"),
+};
+
 export const BUTTON_SHAPE = {
   PILL: ("pill": "pill"),
   RECT: ("rect": "rect"),
diff --git a/src/ui/buttons/config.js b/src/ui/buttons/config.js
index 4fd2cad70..8c41de30c 100644
--- a/src/ui/buttons/config.js
+++ b/src/ui/buttons/config.js
@@ -1,7 +1,11 @@
 /* @flow */
 /* eslint no-template-curly-in-string: off, max-lines: off */
 
-import { BUTTON_SIZE, BUTTON_LAYOUT } from "../../constants";
+import {
+  BUTTON_SIZE,
+  BUTTON_DISABLE_MAX_HEIGHT_SIZE,
+  BUTTON_LAYOUT,
+} from "../../constants";
 
 export const MINIMUM_SIZE: {|
   [$Values<typeof BUTTON_LAYOUT>]: $Values<typeof BUTTON_SIZE>,
@@ -33,6 +37,14 @@ type ButtonStyleMap = {
   |},
 };
 
+type ButtonDisableMaxHeightStyleMap = {
+  [$Values<typeof BUTTON_DISABLE_MAX_HEIGHT_SIZE>]: {|
+    defaultHeight: number,
+    minHeight: number,
+    maxHeight: number,
+  |},
+};
+
 export const BUTTON_SIZE_STYLE: ButtonStyleMap = {
   [BUTTON_SIZE.TINY]: {
     defaultWidth: 75,
@@ -79,3 +91,59 @@ export const BUTTON_SIZE_STYLE: ButtonStyleMap = {
     maxHeight: 55,
   },
 };
+
+export const BUTTON_DISABLE_MAX_HEIGHT_STYLE: ButtonDisableMaxHeightStyleMap = {
+  [BUTTON_DISABLE_MAX_HEIGHT_SIZE.TINY]: {
+    defaultHeight: 25,
+    minHeight: 25,
+    maxHeight: 30,
+  },
+
+  [BUTTON_DISABLE_MAX_HEIGHT_SIZE.SMALL]: {
+    defaultHeight: 30,
+    minHeight: 30,
+    maxHeight: 35,
+  },
+
+  [BUTTON_DISABLE_MAX_HEIGHT_SIZE.MEDIUM_SMALL]: {
+    defaultHeight: 35,
+    minHeight: 35,
+    maxHeight: 40,
+  },
+
+  [BUTTON_DISABLE_MAX_HEIGHT_SIZE.MEDIUM_BIG]: {
+    defaultHeight: 40,
+    minHeight: 40,
+    maxHeight: 45,
+  },
+
+  [BUTTON_DISABLE_MAX_HEIGHT_SIZE.LARGE_SMALL]: {
+    defaultHeight: 45,
+    minHeight: 45,
+    maxHeight: 50,
+  },
+
+  [BUTTON_DISABLE_MAX_HEIGHT_SIZE.LARGE_BIG]: {
+    defaultHeight: 50,
+    minHeight: 50,
+    maxHeight: 55,
+  },
+
+  [BUTTON_DISABLE_MAX_HEIGHT_SIZE.XL]: {
+    defaultHeight: 55,
+    minHeight: 55,
+    maxHeight: 65,
+  },
+
+  [BUTTON_DISABLE_MAX_HEIGHT_SIZE.XXL]: {
+    defaultHeight: 65,
+    minHeight: 65,
+    maxHeight: 75,
+  },
+
+  [BUTTON_DISABLE_MAX_HEIGHT_SIZE.XXXL]: {
+    defaultHeight: 75,
+    minHeight: 75,
+    maxHeight: 200,
+  },
+};
diff --git a/src/ui/buttons/styles/responsive.js b/src/ui/buttons/styles/responsive.js
index bc83cf0c2..4e8aa1a3c 100644
--- a/src/ui/buttons/styles/responsive.js
+++ b/src/ui/buttons/styles/responsive.js
@@ -1,6 +1,6 @@
 /* @flow */
 
-import { max, perc, roundUp } from "@krakenjs/belter/src";
+import { max, perc } from "@krakenjs/belter/src";
 import {
   FUNDING,
   type FundingEligibilityType,
@@ -12,88 +12,30 @@ import {
   BUTTON_NUMBER,
   CLASS,
   ATTRIBUTE,
-  BUTTON_SIZE,
 } from "../../../constants";
-import { BUTTON_SIZE_STYLE, BUTTON_RELATIVE_STYLE } from "../config";
+import {
+  BUTTON_SIZE_STYLE,
+  BUTTON_RELATIVE_STYLE,
+  BUTTON_DISABLE_MAX_HEIGHT_STYLE,
+} from "../config";
 import { isBorderRadiusNumber } from "../util";
 import type { Experiment } from "../../../types";
 
-const BUTTON_MIN_ASPECT_RATIO = 2.2;
-const MIN_SPLIT_BUTTON_WIDTH = 300;
+import {
+  getResponsiveStyleVariables,
+  getDisableMaxHeightResponsiveStyleVariables,
+} from "./styleUtils";
 
 const FIRST_BUTTON_PERC = 50;
 const WALLET_BUTTON_PERC = 60;
 
-export function getResponsiveStyleVariables({
-  height,
-  fundingEligibility,
-  experiment = {},
-  size,
-}: {|
-  height?: ?number,
-  fundingEligibility: FundingEligibilityType,
-  experiment: Experiment,
-  size: $Values<typeof BUTTON_SIZE>,
-|}): Object {
-  const { isPaypalRebrandEnabled, defaultBlueButtonColor } = experiment;
-  const shouldApplyRebrandedStyles =
-    isPaypalRebrandEnabled && defaultBlueButtonColor !== "gold";
-
-  const style = BUTTON_SIZE_STYLE[size];
-
-  const buttonHeight = height || style.defaultHeight;
-  const minDualWidth = Math.max(
-    Math.round(
-      buttonHeight * BUTTON_MIN_ASPECT_RATIO * (100 / WALLET_BUTTON_PERC)
-    ),
-    MIN_SPLIT_BUTTON_WIDTH
-  );
-
-  const { paylater } = fundingEligibility;
-
-  const shouldResizeLabel =
-    paylater?.products?.paylater?.variant === "DE" ||
-    paylater?.products?.payIn3?.variant === "IT" ||
-    paylater?.products?.payIn3?.variant === "ES";
-
-  const textPercPercentage = shouldResizeLabel ? 32 : 36;
-  const labelPercPercentage = shouldResizeLabel ? 32 : 35;
-
-  let smallerLabelHeight = max(
-    roundUp(perc(buttonHeight, labelPercPercentage) + 5, 2),
-    12
-  );
-  let labelHeight = max(roundUp(perc(buttonHeight, 35) + 5, 2), 12);
-
-  const pillBorderRadius = Math.ceil(buttonHeight / 2);
-
-  if (shouldApplyRebrandedStyles) {
-    labelHeight = roundUp(perc(buttonHeight, 76), 1);
-    // smallerLabelHeight gets triggered at widths < 320px
-    // We will need to investigate why the labels need to get significantly smaller at this breakpoint
-    smallerLabelHeight = labelHeight;
-  }
-
-  const styleVariables = {
-    style,
-    buttonHeight,
-    minDualWidth,
-    textPercPercentage,
-    smallerLabelHeight,
-    labelHeight,
-    pillBorderRadius,
-  };
-
-  return styleVariables;
-}
-
-export function buttonResponsiveStyle({
+const generateButtonSizeStyles = ({
   height,
   fundingEligibility,
   disableMaxWidth,
   disableMaxHeight,
   borderRadius,
-  experiment = {},
+  experiment,
 }: {|
   height?: ?number,
   fundingEligibility: FundingEligibilityType,
@@ -101,7 +43,7 @@ export function buttonResponsiveStyle({
   disableMaxHeight?: ?boolean,
   borderRadius?: ?number,
   experiment: Experiment,
-|}): string {
+|}): string => {
   return Object.keys(BUTTON_SIZE_STYLE)
     .map((size) => {
       const {
@@ -121,7 +63,6 @@ export function buttonResponsiveStyle({
 
       return `
             @media only screen and (min-width: ${style.minWidth}px) {
-
                 .${CLASS.CONTAINER} {
                     min-width: ${style.minWidth}px;
                     ${disableMaxWidth ? "" : `max-width: ${style.maxWidth}px;`};
@@ -409,8 +350,147 @@ export function buttonResponsiveStyle({
                     display: block;
                 }
             }
+      `;
+    })
+    .join("\n");
+};
 
-        `;
+const generateDisableMaxHeightStyles = ({
+  fundingEligibility,
+  experiment,
+}: {|
+  fundingEligibility: FundingEligibilityType,
+  experiment: Experiment,
+|}): string => {
+  return Object.keys(BUTTON_DISABLE_MAX_HEIGHT_STYLE)
+    .map((disableMaxHeightSize) => {
+      const {
+        disableHeightStyle,
+        buttonHeight,
+        labelHeight,
+        fontSize,
+        marginTop,
+        spinnerSize,
+        pillBorderRadius,
+        APMHeight,
+        applePayHeight,
+      } = getDisableMaxHeightResponsiveStyleVariables({
+        fundingEligibility,
+        experiment,
+        disableMaxHeightSize,
+      });
+
+      const { minHeight, maxHeight } = disableHeightStyle;
+
+      return `
+            @media (min-height: ${minHeight}px) and (max-height: ${maxHeight}px) {
+              .${CLASS.CONTAINER} .${CLASS.BUTTON_ROW} .${CLASS.TEXT},
+              .${CLASS.CONTAINER} .${CLASS.BUTTON_ROW} .${CLASS.SPACE} {
+                font-size: ${fontSize}px;
+                margin-top: -${marginTop}px;
+                line-height: ${labelHeight}px;
+              }
+              
+              .${CLASS.CONTAINER} .${CLASS.BUTTON_ROW} .${CLASS.TEXT} * {
+                margin-top: ${marginTop}px;
+              }
+            
+              .${CLASS.BUTTON} .${CLASS.SPINNER} {
+                height: ${spinnerSize}px;
+                width: ${spinnerSize}px;
+              }
+              
+              .${CLASS.BUTTON} > .${CLASS.BUTTON_LABEL} {
+                margin: 0 4vw;
+                height: ${labelHeight}px;
+              }
+
+              .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.APPLEPAY}] 
+              .${CLASS.BUTTON_LABEL} {
+                height: ${applePayHeight}px;
+              }
+
+              .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.APPLEPAY}] 
+              .${CLASS.BUTTON_LABEL} .${CLASS.TEXT} {
+                line-height: ${applePayHeight}px;
+              }
+
+              .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.EPS}] 
+              .${CLASS.BUTTON_LABEL},
+              .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.MYBANK}] 
+              .${CLASS.BUTTON_LABEL} {
+                height: ${APMHeight}px;
+              }
+
+              .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.EPS}] 
+              .${CLASS.BUTTON_LABEL} .${CLASS.TEXT},
+              .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.EPS}] 
+              .${CLASS.BUTTON_LABEL} .${CLASS.SPACE},
+              .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.MYBANK}] 
+              .${CLASS.BUTTON_LABEL} .${CLASS.TEXT},
+              .${CLASS.BUTTON}[${ATTRIBUTE.FUNDING_SOURCE}=${FUNDING.MYBANK}] 
+              .${CLASS.BUTTON_LABEL} .${CLASS.SPACE} {
+                line-height: ${APMHeight}px;
+              }
+
+              .${CLASS.BUTTON}.${CLASS.SHAPE}-${BUTTON_SHAPE.PILL} {
+                border-radius: ${pillBorderRadius}px;
+              }
+
+              .${CLASS.BUTTON_ROW}.${CLASS.SHAPE}-${BUTTON_SHAPE.PILL} 
+              .menu-button {
+                border-top-right-radius: ${pillBorderRadius}px;
+                border-bottom-right-radius: ${pillBorderRadius}px;
+              }
+
+              .${CLASS.BUTTON_ROW}.${CLASS.WALLET}.${CLASS.WALLET_MENU} 
+              .${CLASS.BUTTON} {
+                width: calc(100% - ${buttonHeight + 2}px);
+                border-top-right-radius: 0px;
+                border-bottom-right-radius: 0px;
+              }
+
+              .menu-button {
+                height: 100%;
+                width: auto;
+                aspect-ratio: 1;
+              }
+            }
+          `;
     })
     .join("\n");
+};
+
+export function buttonResponsiveStyle({
+  height,
+  fundingEligibility,
+  disableMaxWidth,
+  disableMaxHeight,
+  borderRadius,
+  experiment = {},
+}: {|
+  height?: ?number,
+  fundingEligibility: FundingEligibilityType,
+  disableMaxWidth?: ?boolean,
+  disableMaxHeight?: ?boolean,
+  borderRadius?: ?number,
+  experiment: Experiment,
+|}): string {
+  const buttonSizeStyles = generateButtonSizeStyles({
+    height,
+    fundingEligibility,
+    disableMaxWidth,
+    disableMaxHeight,
+    borderRadius,
+    experiment,
+  });
+
+  const disableMaxHeightStyles = disableMaxHeight
+    ? generateDisableMaxHeightStyles({
+        fundingEligibility,
+        experiment,
+      })
+    : "";
+
+  return buttonSizeStyles + disableMaxHeightStyles;
 }
diff --git a/src/ui/buttons/styles/responsive.test.js b/src/ui/buttons/styles/responsive.test.js
deleted file mode 100644
index a8becb48a..000000000
--- a/src/ui/buttons/styles/responsive.test.js
+++ /dev/null
@@ -1,192 +0,0 @@
-/* @flow */
-
-import { describe, expect, test } from "vitest";
-
-import { BUTTON_COLOR, BUTTON_SIZE } from "../../../constants/button";
-import { BUTTON_SIZE_STYLE } from "../config";
-
-import { getResponsiveStyleVariables } from "./responsive";
-
-// expected legacy responsive styles variables
-const expectedLegacyResponsiveStylesTiny = {
-  style: BUTTON_SIZE_STYLE[BUTTON_SIZE.TINY],
-  buttonHeight: 25,
-  minDualWidth: 300,
-  textPercPercentage: 36,
-  smallerLabelHeight: 14,
-  labelHeight: 14,
-  pillBorderRadius: 13,
-};
-
-const expectedLegacyResponsiveStylesSmall = {
-  style: BUTTON_SIZE_STYLE[BUTTON_SIZE.SMALL],
-  buttonHeight: 25,
-  minDualWidth: 300,
-  textPercPercentage: 36,
-  smallerLabelHeight: 14,
-  labelHeight: 14,
-  pillBorderRadius: 13,
-};
-
-const expectedLegacyResponsiveStylesMedium = {
-  style: BUTTON_SIZE_STYLE[BUTTON_SIZE.MEDIUM],
-  buttonHeight: 35,
-  minDualWidth: 300,
-  textPercPercentage: 36,
-  smallerLabelHeight: 18,
-  labelHeight: 18,
-  pillBorderRadius: 18,
-};
-
-const expectedLegacyResponsiveStylesLarge = {
-  style: BUTTON_SIZE_STYLE[BUTTON_SIZE.LARGE],
-  buttonHeight: 45,
-  minDualWidth: 300,
-  textPercPercentage: 36,
-  smallerLabelHeight: 22,
-  labelHeight: 22,
-  pillBorderRadius: 23,
-};
-
-const expectedLegacyResponsiveStylesHuge = {
-  style: BUTTON_SIZE_STYLE[BUTTON_SIZE.HUGE],
-  buttonHeight: 55,
-  minDualWidth: 300,
-  textPercPercentage: 36,
-  smallerLabelHeight: 24,
-  labelHeight: 24,
-  pillBorderRadius: 28,
-};
-
-// expected rebranded responsive style variables
-const expectedRebrandedResponsiveStylesTiny = {
-  style: BUTTON_SIZE_STYLE[BUTTON_SIZE.TINY],
-  buttonHeight: 25,
-  minDualWidth: 300,
-  textPercPercentage: 36,
-  smallerLabelHeight: 19,
-  labelHeight: 19,
-  pillBorderRadius: 13,
-};
-
-const expectedRebrandedResponsiveStylesSmall = {
-  style: BUTTON_SIZE_STYLE[BUTTON_SIZE.SMALL],
-  buttonHeight: 25,
-  minDualWidth: 300,
-  textPercPercentage: 36,
-  smallerLabelHeight: 19,
-  labelHeight: 19,
-  pillBorderRadius: 13,
-};
-
-const expectedRebrandedResponsiveStylesMedium = {
-  style: BUTTON_SIZE_STYLE[BUTTON_SIZE.MEDIUM],
-  buttonHeight: 35,
-  minDualWidth: 300,
-  textPercPercentage: 36,
-  smallerLabelHeight: 27,
-  labelHeight: 27,
-  pillBorderRadius: 18,
-};
-
-const expectedRebrandedResponsiveStylesLarge = {
-  style: BUTTON_SIZE_STYLE[BUTTON_SIZE.LARGE],
-  buttonHeight: 45,
-  minDualWidth: 300,
-  textPercPercentage: 36,
-  smallerLabelHeight: 34,
-  labelHeight: 34,
-  pillBorderRadius: 23,
-};
-
-const expectedRebrandedResponsiveStylesHuge = {
-  style: BUTTON_SIZE_STYLE[BUTTON_SIZE.HUGE],
-  buttonHeight: 55,
-  minDualWidth: 300,
-  textPercPercentage: 36,
-  smallerLabelHeight: 42,
-  labelHeight: 42,
-  pillBorderRadius: 28,
-};
-
-describe("test responsive style variables for legacy", () => {
-  const experiment = {
-    isPaypalRebrandEnabled: false,
-    defaultBlueButtonColor: BUTTON_COLOR.GOLD,
-  };
-  const fundingEligibility = {
-    paypal: {
-      eligible: true,
-      branded: false,
-    },
-  };
-
-  test.each([
-    { input: BUTTON_SIZE.TINY, expected: expectedLegacyResponsiveStylesTiny },
-    { input: BUTTON_SIZE.SMALL, expected: expectedLegacyResponsiveStylesSmall },
-    {
-      input: BUTTON_SIZE.MEDIUM,
-      expected: expectedLegacyResponsiveStylesMedium,
-    },
-    { input: BUTTON_SIZE.LARGE, expected: expectedLegacyResponsiveStylesLarge },
-    { input: BUTTON_SIZE.HUGE, expected: expectedLegacyResponsiveStylesHuge },
-  ])(
-    `should return legacy responsive styles for size $input`,
-    ({ input, expected }) => {
-      expect(
-        getResponsiveStyleVariables({
-          experiment,
-          fundingEligibility,
-          size: input,
-        })
-      ).toEqual(expected);
-    }
-  );
-});
-
-describe("test responsive style variables for rebrand light blue button", () => {
-  const experiment = {
-    isPaypalRebrandEnabled: true,
-    defaultBlueButtonColor: BUTTON_COLOR.DEFAULT_BLUE_LIGHT_BLUE,
-  };
-  const fundingEligibility = {
-    paypal: {
-      eligible: true,
-      branded: false,
-    },
-  };
-
-  test.each([
-    {
-      input: BUTTON_SIZE.TINY,
-      expected: expectedRebrandedResponsiveStylesTiny,
-    },
-    {
-      input: BUTTON_SIZE.SMALL,
-      expected: expectedRebrandedResponsiveStylesSmall,
-    },
-    {
-      input: BUTTON_SIZE.MEDIUM,
-      expected: expectedRebrandedResponsiveStylesMedium,
-    },
-    {
-      input: BUTTON_SIZE.LARGE,
-      expected: expectedRebrandedResponsiveStylesLarge,
-    },
-    {
-      input: BUTTON_SIZE.HUGE,
-      expected: expectedRebrandedResponsiveStylesHuge,
-    },
-  ])(
-    `should return rebrand responsive styles for size $input`,
-    ({ input, expected }) => {
-      expect(
-        getResponsiveStyleVariables({
-          experiment,
-          fundingEligibility,
-          size: input,
-        })
-      ).toEqual(expected);
-    }
-  );
-});
diff --git a/src/ui/buttons/styles/styleUtils.js b/src/ui/buttons/styles/styleUtils.js
new file mode 100644
index 000000000..c37df8722
--- /dev/null
+++ b/src/ui/buttons/styles/styleUtils.js
@@ -0,0 +1,209 @@
+/* @flow */
+
+import { max, perc, roundUp } from "@krakenjs/belter/src";
+import type { FundingEligibilityType } from "@paypal/sdk-constants/src";
+
+import type { Experiment } from "../../../types";
+import { BUTTON_DISABLE_MAX_HEIGHT_STYLE, BUTTON_SIZE_STYLE } from "../config";
+import {
+  BUTTON_SIZE,
+  BUTTON_DISABLE_MAX_HEIGHT_SIZE,
+} from "../../../constants";
+
+const BUTTON_MIN_ASPECT_RATIO = 2.2;
+const MIN_SPLIT_BUTTON_WIDTH = 300;
+
+const WALLET_BUTTON_PERC = 60;
+
+function getLabelHeight({
+  height,
+  shouldApplyRebrandedStyles,
+  shouldResizeLabel,
+}: {|
+  height: number,
+  shouldApplyRebrandedStyles?: boolean,
+  shouldResizeLabel: boolean,
+|}): number {
+  const labelPercPercentage = shouldResizeLabel ? 32 : 35;
+  let labelHeight = max(roundUp(perc(height, labelPercPercentage) + 5, 2), 12);
+
+  if (shouldApplyRebrandedStyles) {
+    labelHeight = roundUp(perc(height, 76), 1);
+  }
+
+  return parseInt(labelHeight, 10);
+}
+
+function getFontSize({
+  height,
+  shouldResizeLabel,
+}: {|
+  height: number,
+  shouldResizeLabel: boolean,
+|}): number {
+  const fontPercPercentage = shouldResizeLabel ? 32 : 36;
+  const textSize = `${max(perc(height, fontPercPercentage), 10)}`;
+
+  return parseInt(textSize, 10);
+}
+
+function getMarginTop({
+  height,
+  shouldResizeLabel,
+}: {|
+  height: number,
+  shouldResizeLabel: boolean,
+|}): number {
+  const marginTopPercPercentage = shouldResizeLabel ? 32 : 36;
+  const marginTop = `${perc(
+    max(perc(height, marginTopPercPercentage), 10),
+    10
+  )}`;
+
+  return parseInt(marginTop, 10);
+}
+
+function getSpinnerSize({ height }: {| height: number |}): number {
+  const spinner = `${perc(height, 50)}`;
+
+  return parseInt(spinner, 10);
+}
+
+function getAPMButtonHeight({ height }: {| height: number |}): number {
+  const buttonHeight = perc(height, 50) + 5;
+
+  return parseInt(buttonHeight, 10);
+}
+
+function getApplePayButtonHeight({ height }: {| height: number |}): number {
+  const buttonHeight = perc(height, 80) + 5;
+
+  return parseInt(buttonHeight, 10);
+}
+
+export function getResponsiveStyleVariables({
+  height,
+  fundingEligibility,
+  experiment = {},
+  size,
+}: {|
+  height?: ?number,
+  fundingEligibility: FundingEligibilityType,
+  experiment: Experiment,
+  size: $Values<typeof BUTTON_SIZE>,
+|}): Object {
+  const { isPaypalRebrandEnabled, defaultBlueButtonColor } = experiment;
+  const shouldApplyRebrandedStyles =
+    isPaypalRebrandEnabled && defaultBlueButtonColor !== "gold";
+
+  const style = BUTTON_SIZE_STYLE[size];
+
+  const buttonHeight = height || style.defaultHeight;
+  const minDualWidth = Math.max(
+    Math.round(
+      buttonHeight * BUTTON_MIN_ASPECT_RATIO * (100 / WALLET_BUTTON_PERC)
+    ),
+    MIN_SPLIT_BUTTON_WIDTH
+  );
+
+  const { paylater } = fundingEligibility;
+
+  const shouldResizeLabel =
+    paylater?.products?.paylater?.variant === "DE" ||
+    paylater?.products?.payIn3?.variant === "IT" ||
+    paylater?.products?.payIn3?.variant === "ES";
+
+  const textPercPercentage = shouldResizeLabel ? 32 : 36;
+  const labelPercPercentage = shouldResizeLabel ? 32 : 35;
+
+  let smallerLabelHeight = max(
+    roundUp(perc(buttonHeight, labelPercPercentage) + 5, 2),
+    12
+  );
+  let labelHeight = max(roundUp(perc(buttonHeight, 35) + 5, 2), 12);
+
+  const pillBorderRadius = Math.ceil(buttonHeight / 2);
+
+  if (shouldApplyRebrandedStyles) {
+    labelHeight = roundUp(perc(buttonHeight, 76), 1);
+    // smallerLabelHeight gets triggered at widths < 320px
+    // We will need to investigate why the labels need to get significantly smaller at this breakpoint
+    smallerLabelHeight = labelHeight;
+  }
+
+  const styleVariables = {
+    style,
+    buttonHeight,
+    minDualWidth,
+    textPercPercentage,
+    smallerLabelHeight,
+    labelHeight,
+    pillBorderRadius,
+  };
+
+  return styleVariables;
+}
+
+export function getDisableMaxHeightResponsiveStyleVariables({
+  fundingEligibility,
+  experiment,
+  disableMaxHeightSize,
+}: {|
+  fundingEligibility: FundingEligibilityType,
+  experiment: Experiment,
+  disableMaxHeightSize: $Values<typeof BUTTON_DISABLE_MAX_HEIGHT_SIZE>,
+|}): Object {
+  const { isPaypalRebrandEnabled, defaultBlueButtonColor } = experiment;
+  const shouldApplyRebrandedStyles =
+    isPaypalRebrandEnabled && defaultBlueButtonColor !== "gold";
+
+  const disableHeightStyle =
+    BUTTON_DISABLE_MAX_HEIGHT_STYLE[disableMaxHeightSize];
+  const buttonHeight = disableHeightStyle.defaultHeight;
+
+  const { paylater } = fundingEligibility;
+
+  const shouldResizeLabel =
+    paylater?.products?.paylater?.variant === "DE" ||
+    paylater?.products?.payIn3?.variant === "IT" ||
+    paylater?.products?.payIn3?.variant === "ES";
+
+  const labelHeight = getLabelHeight({
+    height: buttonHeight,
+    shouldApplyRebrandedStyles,
+    shouldResizeLabel,
+  });
+  const fontSize = getFontSize({
+    height: buttonHeight,
+    shouldResizeLabel,
+  });
+  const marginTop = getMarginTop({
+    height: buttonHeight,
+    shouldResizeLabel,
+  });
+  const spinnerSize = getSpinnerSize({
+    height: buttonHeight,
+  });
+  const APMHeight = getAPMButtonHeight({
+    height: buttonHeight,
+  });
+  const applePayHeight = getApplePayButtonHeight({
+    height: buttonHeight,
+  });
+
+  const pillBorderRadius = Math.ceil(buttonHeight / 2);
+
+  const styleVariables = {
+    disableHeightStyle,
+    buttonHeight,
+    labelHeight,
+    fontSize,
+    marginTop,
+    spinnerSize,
+    pillBorderRadius,
+    APMHeight,
+    applePayHeight,
+  };
+
+  return styleVariables;
+}
diff --git a/src/ui/buttons/styles/styleUtils.test.js b/src/ui/buttons/styles/styleUtils.test.js
new file mode 100644
index 000000000..8d6c3bde7
--- /dev/null
+++ b/src/ui/buttons/styles/styleUtils.test.js
@@ -0,0 +1,876 @@
+/* @flow */
+
+import { describe, expect, test } from "vitest";
+
+import {
+  BUTTON_COLOR,
+  BUTTON_SIZE,
+  BUTTON_DISABLE_MAX_HEIGHT_SIZE,
+} from "../../../constants/button";
+import { BUTTON_SIZE_STYLE, BUTTON_DISABLE_MAX_HEIGHT_STYLE } from "../config";
+
+import {
+  getResponsiveStyleVariables,
+  getDisableMaxHeightResponsiveStyleVariables,
+} from "./styleUtils";
+
+// expected legacy responsive styles variables
+const expectedLegacyResponsiveStylesTiny = {
+  style: BUTTON_SIZE_STYLE[BUTTON_SIZE.TINY],
+  buttonHeight: 25,
+  minDualWidth: 300,
+  textPercPercentage: 36,
+  smallerLabelHeight: 14,
+  labelHeight: 14,
+  pillBorderRadius: 13,
+};
+
+const expectedLegacyResponsiveStylesSmall = {
+  style: BUTTON_SIZE_STYLE[BUTTON_SIZE.SMALL],
+  buttonHeight: 25,
+  minDualWidth: 300,
+  textPercPercentage: 36,
+  smallerLabelHeight: 14,
+  labelHeight: 14,
+  pillBorderRadius: 13,
+};
+
+const expectedLegacyResponsiveStylesMedium = {
+  style: BUTTON_SIZE_STYLE[BUTTON_SIZE.MEDIUM],
+  buttonHeight: 35,
+  minDualWidth: 300,
+  textPercPercentage: 36,
+  smallerLabelHeight: 18,
+  labelHeight: 18,
+  pillBorderRadius: 18,
+};
+
+const expectedLegacyResponsiveStylesLarge = {
+  style: BUTTON_SIZE_STYLE[BUTTON_SIZE.LARGE],
+  buttonHeight: 45,
+  minDualWidth: 300,
+  textPercPercentage: 36,
+  smallerLabelHeight: 22,
+  labelHeight: 22,
+  pillBorderRadius: 23,
+};
+
+const expectedLegacyResponsiveStylesHuge = {
+  style: BUTTON_SIZE_STYLE[BUTTON_SIZE.HUGE],
+  buttonHeight: 55,
+  minDualWidth: 300,
+  textPercPercentage: 36,
+  smallerLabelHeight: 24,
+  labelHeight: 24,
+  pillBorderRadius: 28,
+};
+
+// expected should resize = true responsive styles variables
+const expectedResizeLabelResponsiveStylesTiny = {
+  style: BUTTON_SIZE_STYLE[BUTTON_SIZE.TINY],
+  buttonHeight: 25,
+  minDualWidth: 300,
+  textPercPercentage: 32,
+  smallerLabelHeight: 14,
+  labelHeight: 14,
+  pillBorderRadius: 13,
+};
+
+const expectedResizeLabelResponsiveStylesSmall = {
+  style: BUTTON_SIZE_STYLE[BUTTON_SIZE.SMALL],
+  buttonHeight: 25,
+  minDualWidth: 300,
+  textPercPercentage: 32,
+  smallerLabelHeight: 14,
+  labelHeight: 14,
+  pillBorderRadius: 13,
+};
+
+const expectedResizeLabelResponsiveStylesMedium = {
+  style: BUTTON_SIZE_STYLE[BUTTON_SIZE.MEDIUM],
+  buttonHeight: 35,
+  minDualWidth: 300,
+  textPercPercentage: 32,
+  smallerLabelHeight: 16,
+  labelHeight: 18,
+  pillBorderRadius: 18,
+};
+
+const expectedResizeLabelResponsiveStylesLarge = {
+  style: BUTTON_SIZE_STYLE[BUTTON_SIZE.LARGE],
+  buttonHeight: 45,
+  minDualWidth: 300,
+  textPercPercentage: 32,
+  smallerLabelHeight: 20,
+  labelHeight: 22,
+  pillBorderRadius: 23,
+};
+
+const expectedResizeLabelResponsiveStylesHuge = {
+  style: BUTTON_SIZE_STYLE[BUTTON_SIZE.HUGE],
+  buttonHeight: 55,
+  minDualWidth: 300,
+  textPercPercentage: 32,
+  smallerLabelHeight: 24,
+  labelHeight: 24,
+  pillBorderRadius: 28,
+};
+
+// expected rebranded responsive style variables
+const expectedRebrandedResponsiveStylesTiny = {
+  style: BUTTON_SIZE_STYLE[BUTTON_SIZE.TINY],
+  buttonHeight: 25,
+  minDualWidth: 300,
+  textPercPercentage: 36,
+  smallerLabelHeight: 19,
+  labelHeight: 19,
+  pillBorderRadius: 13,
+};
+
+const expectedRebrandedResponsiveStylesSmall = {
+  style: BUTTON_SIZE_STYLE[BUTTON_SIZE.SMALL],
+  buttonHeight: 25,
+  minDualWidth: 300,
+  textPercPercentage: 36,
+  smallerLabelHeight: 19,
+  labelHeight: 19,
+  pillBorderRadius: 13,
+};
+
+const expectedRebrandedResponsiveStylesMedium = {
+  style: BUTTON_SIZE_STYLE[BUTTON_SIZE.MEDIUM],
+  buttonHeight: 35,
+  minDualWidth: 300,
+  textPercPercentage: 36,
+  smallerLabelHeight: 27,
+  labelHeight: 27,
+  pillBorderRadius: 18,
+};
+
+const expectedRebrandedResponsiveStylesLarge = {
+  style: BUTTON_SIZE_STYLE[BUTTON_SIZE.LARGE],
+  buttonHeight: 45,
+  minDualWidth: 300,
+  textPercPercentage: 36,
+  smallerLabelHeight: 34,
+  labelHeight: 34,
+  pillBorderRadius: 23,
+};
+
+const expectedRebrandedResponsiveStylesHuge = {
+  style: BUTTON_SIZE_STYLE[BUTTON_SIZE.HUGE],
+  buttonHeight: 55,
+  minDualWidth: 300,
+  textPercPercentage: 36,
+  smallerLabelHeight: 42,
+  labelHeight: 42,
+  pillBorderRadius: 28,
+};
+
+// DISABLE MAX HEIGHT TESTS
+
+// expected legacy responsive styles variables
+const expectedLegacyDisableMaxHeightStylesTiny = {
+  APMHeight: 18,
+  applePayHeight: 25,
+  buttonHeight: 25,
+  disableHeightStyle:
+    BUTTON_DISABLE_MAX_HEIGHT_STYLE[BUTTON_DISABLE_MAX_HEIGHT_SIZE.TINY],
+  labelHeight: 14,
+  fontSize: 10,
+  marginTop: 1,
+  pillBorderRadius: 13,
+  spinnerSize: 13,
+};
+
+const expectedLegacyDisableMaxHeightStylesSmall = {
+  APMHeight: 20,
+  applePayHeight: 29,
+  buttonHeight: 30,
+  disableHeightStyle:
+    BUTTON_DISABLE_MAX_HEIGHT_STYLE[BUTTON_DISABLE_MAX_HEIGHT_SIZE.SMALL],
+  labelHeight: 16,
+  fontSize: 11,
+  marginTop: 1,
+  pillBorderRadius: 15,
+  spinnerSize: 15,
+};
+
+const expectedLegacyDisableMaxHeightStylesMediumSmall = {
+  APMHeight: 23,
+  applePayHeight: 33,
+  buttonHeight: 35,
+  disableHeightStyle:
+    BUTTON_DISABLE_MAX_HEIGHT_STYLE[
+      BUTTON_DISABLE_MAX_HEIGHT_SIZE.MEDIUM_SMALL
+    ],
+  labelHeight: 18,
+  fontSize: 13,
+  marginTop: 1,
+  pillBorderRadius: 18,
+  spinnerSize: 18,
+};
+
+const expectedLegacyDisableMaxHeightStylesMediumBig = {
+  APMHeight: 25,
+  applePayHeight: 37,
+  buttonHeight: 40,
+  disableHeightStyle:
+    BUTTON_DISABLE_MAX_HEIGHT_STYLE[BUTTON_DISABLE_MAX_HEIGHT_SIZE.MEDIUM_BIG],
+  labelHeight: 20,
+  fontSize: 14,
+  marginTop: 1,
+  pillBorderRadius: 20,
+  spinnerSize: 20,
+};
+
+const expectedLegacyDisableMaxHeightStylesLargeSmall = {
+  APMHeight: 28,
+  applePayHeight: 41,
+  buttonHeight: 45,
+  disableHeightStyle:
+    BUTTON_DISABLE_MAX_HEIGHT_STYLE[BUTTON_DISABLE_MAX_HEIGHT_SIZE.LARGE_SMALL],
+  labelHeight: 22,
+  fontSize: 16,
+  marginTop: 2,
+  pillBorderRadius: 23,
+  spinnerSize: 23,
+};
+
+const expectedLegacyDisableMaxHeightStylesLargeBig = {
+  APMHeight: 30,
+  applePayHeight: 45,
+  buttonHeight: 50,
+  disableHeightStyle:
+    BUTTON_DISABLE_MAX_HEIGHT_STYLE[BUTTON_DISABLE_MAX_HEIGHT_SIZE.LARGE_BIG],
+  labelHeight: 24,
+  fontSize: 18,
+  marginTop: 2,
+  pillBorderRadius: 25,
+  spinnerSize: 25,
+};
+
+const expectedLegacyDisableMaxHeightStylesXL = {
+  APMHeight: 33,
+  applePayHeight: 49,
+  buttonHeight: 55,
+  disableHeightStyle:
+    BUTTON_DISABLE_MAX_HEIGHT_STYLE[BUTTON_DISABLE_MAX_HEIGHT_SIZE.XL],
+  labelHeight: 24,
+  fontSize: 20,
+  marginTop: 2,
+  pillBorderRadius: 28,
+  spinnerSize: 28,
+};
+
+const expectedLegacyDisableMaxHeightStylesXXL = {
+  APMHeight: 38,
+  applePayHeight: 57,
+  buttonHeight: 65,
+  disableHeightStyle:
+    BUTTON_DISABLE_MAX_HEIGHT_STYLE[BUTTON_DISABLE_MAX_HEIGHT_SIZE.XXL],
+  labelHeight: 28,
+  fontSize: 23,
+  marginTop: 2,
+  pillBorderRadius: 33,
+  spinnerSize: 33,
+};
+
+const expectedLegacyDisableMaxHeightStylesXXXL = {
+  APMHeight: 43,
+  applePayHeight: 65,
+  buttonHeight: 75,
+  disableHeightStyle:
+    BUTTON_DISABLE_MAX_HEIGHT_STYLE[BUTTON_DISABLE_MAX_HEIGHT_SIZE.XXXL],
+  labelHeight: 32,
+  fontSize: 27,
+  marginTop: 3,
+  pillBorderRadius: 38,
+  spinnerSize: 38,
+};
+
+// expected shouldResizeLabel = true style variables for disable max hieght
+const expectedResizeLabelDisableMaxHeightStylesTiny = {
+  APMHeight: 18,
+  applePayHeight: 25,
+  buttonHeight: 25,
+  disableHeightStyle:
+    BUTTON_DISABLE_MAX_HEIGHT_STYLE[BUTTON_DISABLE_MAX_HEIGHT_SIZE.TINY],
+  labelHeight: 14,
+  fontSize: 10,
+  marginTop: 1,
+  pillBorderRadius: 13,
+  spinnerSize: 13,
+};
+
+const expectedResizeLabelDisableMaxHeightStylesSmall = {
+  APMHeight: 20,
+  applePayHeight: 29,
+  buttonHeight: 30,
+  disableHeightStyle:
+    BUTTON_DISABLE_MAX_HEIGHT_STYLE[BUTTON_DISABLE_MAX_HEIGHT_SIZE.SMALL],
+  labelHeight: 16,
+  fontSize: 10,
+  marginTop: 1,
+  pillBorderRadius: 15,
+  spinnerSize: 15,
+};
+
+const expectedResizeLabelDisableMaxHeightStylesMediumSmall = {
+  APMHeight: 23,
+  applePayHeight: 33,
+  buttonHeight: 35,
+  disableHeightStyle:
+    BUTTON_DISABLE_MAX_HEIGHT_STYLE[
+      BUTTON_DISABLE_MAX_HEIGHT_SIZE.MEDIUM_SMALL
+    ],
+  labelHeight: 16,
+  fontSize: 11,
+  marginTop: 1,
+  pillBorderRadius: 18,
+  spinnerSize: 18,
+};
+
+const expectedResizeLabelDisableMaxHeightStylesMediumBig = {
+  APMHeight: 25,
+  applePayHeight: 37,
+  buttonHeight: 40,
+  disableHeightStyle:
+    BUTTON_DISABLE_MAX_HEIGHT_STYLE[BUTTON_DISABLE_MAX_HEIGHT_SIZE.MEDIUM_BIG],
+  labelHeight: 18,
+  fontSize: 13,
+  marginTop: 1,
+  pillBorderRadius: 20,
+  spinnerSize: 20,
+};
+
+const expectedResizeLabelDisableMaxHeightStylesLargeSmall = {
+  APMHeight: 28,
+  applePayHeight: 41,
+  buttonHeight: 45,
+  disableHeightStyle:
+    BUTTON_DISABLE_MAX_HEIGHT_STYLE[BUTTON_DISABLE_MAX_HEIGHT_SIZE.LARGE_SMALL],
+  labelHeight: 20,
+  fontSize: 14,
+  marginTop: 1,
+  pillBorderRadius: 23,
+  spinnerSize: 23,
+};
+
+const expectedResizeLabelDisableMaxHeightStylesLargeBig = {
+  APMHeight: 30,
+  applePayHeight: 45,
+  buttonHeight: 50,
+  disableHeightStyle:
+    BUTTON_DISABLE_MAX_HEIGHT_STYLE[BUTTON_DISABLE_MAX_HEIGHT_SIZE.LARGE_BIG],
+  labelHeight: 22,
+  fontSize: 16,
+  marginTop: 2,
+  pillBorderRadius: 25,
+  spinnerSize: 25,
+};
+
+const expectedResizeLabelDisableMaxHeightStylesXL = {
+  APMHeight: 33,
+  applePayHeight: 49,
+  buttonHeight: 55,
+  disableHeightStyle:
+    BUTTON_DISABLE_MAX_HEIGHT_STYLE[BUTTON_DISABLE_MAX_HEIGHT_SIZE.XL],
+  labelHeight: 24,
+  fontSize: 18,
+  marginTop: 2,
+  pillBorderRadius: 28,
+  spinnerSize: 28,
+};
+
+const expectedResizeLabelDisableMaxHeightStylesXXL = {
+  APMHeight: 38,
+  applePayHeight: 57,
+  buttonHeight: 65,
+  disableHeightStyle:
+    BUTTON_DISABLE_MAX_HEIGHT_STYLE[BUTTON_DISABLE_MAX_HEIGHT_SIZE.XXL],
+  labelHeight: 26,
+  fontSize: 21,
+  marginTop: 2,
+  pillBorderRadius: 33,
+  spinnerSize: 33,
+};
+
+const expectedResizeLabelDisableMaxHeightStylesXXXL = {
+  APMHeight: 43,
+  applePayHeight: 65,
+  buttonHeight: 75,
+  disableHeightStyle:
+    BUTTON_DISABLE_MAX_HEIGHT_STYLE[BUTTON_DISABLE_MAX_HEIGHT_SIZE.XXXL],
+  labelHeight: 30,
+  fontSize: 24,
+  marginTop: 2,
+  pillBorderRadius: 38,
+  spinnerSize: 38,
+};
+
+// expected rebrand disable max height responsive styles variables
+const expectedRebrandDisableMaxHeightStylesTiny = {
+  APMHeight: 18,
+  applePayHeight: 25,
+  buttonHeight: 25,
+  disableHeightStyle:
+    BUTTON_DISABLE_MAX_HEIGHT_STYLE[BUTTON_DISABLE_MAX_HEIGHT_SIZE.TINY],
+  labelHeight: 19,
+  fontSize: 10,
+  marginTop: 1,
+  pillBorderRadius: 13,
+  spinnerSize: 13,
+};
+
+const expectedRebrandDisableMaxHeightStylesSmall = {
+  APMHeight: 20,
+  applePayHeight: 29,
+  buttonHeight: 30,
+  disableHeightStyle:
+    BUTTON_DISABLE_MAX_HEIGHT_STYLE[BUTTON_DISABLE_MAX_HEIGHT_SIZE.SMALL],
+  labelHeight: 23,
+  fontSize: 11,
+  marginTop: 1,
+  pillBorderRadius: 15,
+  spinnerSize: 15,
+};
+
+const expectedRebrandDisableMaxHeightStylesMediumSmall = {
+  APMHeight: 23,
+  applePayHeight: 33,
+  buttonHeight: 35,
+  disableHeightStyle:
+    BUTTON_DISABLE_MAX_HEIGHT_STYLE[
+      BUTTON_DISABLE_MAX_HEIGHT_SIZE.MEDIUM_SMALL
+    ],
+  labelHeight: 27,
+  fontSize: 13,
+  marginTop: 1,
+  pillBorderRadius: 18,
+  spinnerSize: 18,
+};
+
+const expectedRebrandDisableMaxHeightStylesMediumBig = {
+  APMHeight: 25,
+  applePayHeight: 37,
+  buttonHeight: 40,
+  disableHeightStyle:
+    BUTTON_DISABLE_MAX_HEIGHT_STYLE[BUTTON_DISABLE_MAX_HEIGHT_SIZE.MEDIUM_BIG],
+  labelHeight: 30,
+  fontSize: 14,
+  marginTop: 1,
+  pillBorderRadius: 20,
+  spinnerSize: 20,
+};
+
+const expectedRebrandDisableMaxHeightStylesLargeSmall = {
+  APMHeight: 28,
+  applePayHeight: 41,
+  buttonHeight: 45,
+  disableHeightStyle:
+    BUTTON_DISABLE_MAX_HEIGHT_STYLE[BUTTON_DISABLE_MAX_HEIGHT_SIZE.LARGE_SMALL],
+  labelHeight: 34,
+  fontSize: 16,
+  marginTop: 2,
+  pillBorderRadius: 23,
+  spinnerSize: 23,
+};
+
+const expectedRebrandDisableMaxHeightStylesLargeBig = {
+  APMHeight: 30,
+  applePayHeight: 45,
+  buttonHeight: 50,
+  disableHeightStyle:
+    BUTTON_DISABLE_MAX_HEIGHT_STYLE[BUTTON_DISABLE_MAX_HEIGHT_SIZE.LARGE_BIG],
+  labelHeight: 38,
+  fontSize: 18,
+  marginTop: 2,
+  pillBorderRadius: 25,
+  spinnerSize: 25,
+};
+
+const expectedRebrandDisableMaxHeightStylesXL = {
+  APMHeight: 33,
+  applePayHeight: 49,
+  buttonHeight: 55,
+  disableHeightStyle:
+    BUTTON_DISABLE_MAX_HEIGHT_STYLE[BUTTON_DISABLE_MAX_HEIGHT_SIZE.XL],
+  labelHeight: 42,
+  fontSize: 20,
+  marginTop: 2,
+  pillBorderRadius: 28,
+  spinnerSize: 28,
+};
+
+const expectedRebrandDisableMaxHeightStylesXXL = {
+  APMHeight: 38,
+  applePayHeight: 57,
+  buttonHeight: 65,
+  disableHeightStyle:
+    BUTTON_DISABLE_MAX_HEIGHT_STYLE[BUTTON_DISABLE_MAX_HEIGHT_SIZE.XXL],
+  labelHeight: 49,
+  fontSize: 23,
+  marginTop: 2,
+  pillBorderRadius: 33,
+  spinnerSize: 33,
+};
+
+const expectedRebrandDisableMaxHeightStylesXXXL = {
+  APMHeight: 43,
+  applePayHeight: 65,
+  buttonHeight: 75,
+  disableHeightStyle:
+    BUTTON_DISABLE_MAX_HEIGHT_STYLE[BUTTON_DISABLE_MAX_HEIGHT_SIZE.XXXL],
+  labelHeight: 57,
+  fontSize: 27,
+  marginTop: 3,
+  pillBorderRadius: 38,
+  spinnerSize: 38,
+};
+
+describe("test responsive style variables for legacy", () => {
+  const experiment = {
+    isPaypalRebrandEnabled: false,
+    defaultBlueButtonColor: BUTTON_COLOR.GOLD,
+  };
+  const fundingEligibility = {
+    paypal: {
+      eligible: true,
+      branded: false,
+    },
+  };
+
+  test.each([
+    { input: BUTTON_SIZE.TINY, expected: expectedLegacyResponsiveStylesTiny },
+    { input: BUTTON_SIZE.SMALL, expected: expectedLegacyResponsiveStylesSmall },
+    {
+      input: BUTTON_SIZE.MEDIUM,
+      expected: expectedLegacyResponsiveStylesMedium,
+    },
+    { input: BUTTON_SIZE.LARGE, expected: expectedLegacyResponsiveStylesLarge },
+    { input: BUTTON_SIZE.HUGE, expected: expectedLegacyResponsiveStylesHuge },
+  ])(
+    `should return legacy responsive styles for size $input`,
+    ({ input, expected }) => {
+      expect(
+        getResponsiveStyleVariables({
+          experiment,
+          fundingEligibility,
+          size: input,
+        })
+      ).toEqual(expected);
+    }
+  );
+});
+
+describe("test responsive style variables when shouldResizeLable == true", () => {
+  const experiment = {
+    isPaypalRebrandEnabled: false,
+    defaultBlueButtonColor: BUTTON_COLOR.GOLD,
+  };
+  const fundingEligibility = {
+    paypal: {
+      eligible: true,
+      branded: undefined,
+    },
+    paylater: {
+      eligible: true,
+      products: {
+        paylater: {
+          variant: "DE",
+        },
+        payIn3: {
+          variant: "IT",
+        },
+        payIn4: {
+          variant: "ES",
+        },
+      },
+    },
+  };
+
+  test.each([
+    {
+      input: BUTTON_SIZE.TINY,
+      expected: expectedResizeLabelResponsiveStylesTiny,
+    },
+    {
+      input: BUTTON_SIZE.SMALL,
+      expected: expectedResizeLabelResponsiveStylesSmall,
+    },
+    {
+      input: BUTTON_SIZE.MEDIUM,
+      expected: expectedResizeLabelResponsiveStylesMedium,
+    },
+    {
+      input: BUTTON_SIZE.LARGE,
+      expected: expectedResizeLabelResponsiveStylesLarge,
+    },
+    {
+      input: BUTTON_SIZE.HUGE,
+      expected: expectedResizeLabelResponsiveStylesHuge,
+    },
+  ])(
+    `should return responsive styles for size $input`,
+    ({ input, expected }) => {
+      expect(
+        getResponsiveStyleVariables({
+          fundingEligibility,
+          experiment,
+          size: input,
+        })
+      ).toEqual(expected);
+    }
+  );
+});
+
+describe("test responsive style variables for rebrand light blue button", () => {
+  const experiment = {
+    isPaypalRebrandEnabled: true,
+    defaultBlueButtonColor: BUTTON_COLOR.DEFAULT_BLUE_LIGHT_BLUE,
+  };
+  const fundingEligibility = {
+    paypal: {
+      eligible: true,
+      branded: false,
+    },
+  };
+
+  test.each([
+    {
+      input: BUTTON_SIZE.TINY,
+      expected: expectedRebrandedResponsiveStylesTiny,
+    },
+    {
+      input: BUTTON_SIZE.SMALL,
+      expected: expectedRebrandedResponsiveStylesSmall,
+    },
+    {
+      input: BUTTON_SIZE.MEDIUM,
+      expected: expectedRebrandedResponsiveStylesMedium,
+    },
+    {
+      input: BUTTON_SIZE.LARGE,
+      expected: expectedRebrandedResponsiveStylesLarge,
+    },
+    {
+      input: BUTTON_SIZE.HUGE,
+      expected: expectedRebrandedResponsiveStylesHuge,
+    },
+  ])(
+    `should return rebrand responsive styles for size $input`,
+    ({ input, expected }) => {
+      expect(
+        getResponsiveStyleVariables({
+          experiment,
+          fundingEligibility,
+          size: input,
+        })
+      ).toEqual(expected);
+    }
+  );
+});
+
+describe("test responsive style variables for legacy disable max height", () => {
+  const experiment = {
+    isPaypalRebrandEnabled: false,
+    defaultBlueButtonColor: BUTTON_COLOR.GOLD,
+  };
+  const fundingEligibility = {
+    paypal: {
+      eligible: true,
+      branded: undefined,
+    },
+  };
+
+  test.each([
+    {
+      input: BUTTON_DISABLE_MAX_HEIGHT_SIZE.TINY,
+      expected: expectedLegacyDisableMaxHeightStylesTiny,
+    },
+    {
+      input: BUTTON_DISABLE_MAX_HEIGHT_SIZE.SMALL,
+      expected: expectedLegacyDisableMaxHeightStylesSmall,
+    },
+    {
+      input: BUTTON_DISABLE_MAX_HEIGHT_SIZE.MEDIUM_SMALL,
+      expected: expectedLegacyDisableMaxHeightStylesMediumSmall,
+    },
+    {
+      input: BUTTON_DISABLE_MAX_HEIGHT_SIZE.MEDIUM_BIG,
+      expected: expectedLegacyDisableMaxHeightStylesMediumBig,
+    },
+    {
+      input: BUTTON_DISABLE_MAX_HEIGHT_SIZE.LARGE_SMALL,
+      expected: expectedLegacyDisableMaxHeightStylesLargeSmall,
+    },
+    {
+      input: BUTTON_DISABLE_MAX_HEIGHT_SIZE.LARGE_BIG,
+      expected: expectedLegacyDisableMaxHeightStylesLargeBig,
+    },
+    {
+      input: BUTTON_DISABLE_MAX_HEIGHT_SIZE.XL,
+      expected: expectedLegacyDisableMaxHeightStylesXL,
+    },
+    {
+      input: BUTTON_DISABLE_MAX_HEIGHT_SIZE.XXL,
+      expected: expectedLegacyDisableMaxHeightStylesXXL,
+    },
+    {
+      input: BUTTON_DISABLE_MAX_HEIGHT_SIZE.XXXL,
+      expected: expectedLegacyDisableMaxHeightStylesXXXL,
+    },
+  ])(
+    `should return responsive styles for disable max height size $input`,
+    ({ input, expected }) => {
+      expect(
+        getDisableMaxHeightResponsiveStyleVariables({
+          fundingEligibility,
+          experiment,
+          disableMaxHeightSize: input,
+        })
+      ).toEqual(expected);
+    }
+  );
+});
+
+describe("test responsive style variables when shouldResizeLable == true for disable max height", () => {
+  const experiment = {
+    isPaypalRebrandEnabled: false,
+    defaultBlueButtonColor: BUTTON_COLOR.GOLD,
+  };
+  const fundingEligibility = {
+    paypal: {
+      eligible: true,
+      branded: undefined,
+    },
+    paylater: {
+      eligible: true,
+      products: {
+        paylater: {
+          variant: "DE",
+        },
+        payIn3: {
+          variant: "IT",
+        },
+        payIn4: {
+          variant: "ES",
+        },
+      },
+    },
+  };
+
+  test.each([
+    {
+      input: BUTTON_DISABLE_MAX_HEIGHT_SIZE.TINY,
+      expected: expectedResizeLabelDisableMaxHeightStylesTiny,
+    },
+    {
+      input: BUTTON_DISABLE_MAX_HEIGHT_SIZE.SMALL,
+      expected: expectedResizeLabelDisableMaxHeightStylesSmall,
+    },
+    {
+      input: BUTTON_DISABLE_MAX_HEIGHT_SIZE.MEDIUM_SMALL,
+      expected: expectedResizeLabelDisableMaxHeightStylesMediumSmall,
+    },
+    {
+      input: BUTTON_DISABLE_MAX_HEIGHT_SIZE.MEDIUM_BIG,
+      expected: expectedResizeLabelDisableMaxHeightStylesMediumBig,
+    },
+    {
+      input: BUTTON_DISABLE_MAX_HEIGHT_SIZE.LARGE_SMALL,
+      expected: expectedResizeLabelDisableMaxHeightStylesLargeSmall,
+    },
+    {
+      input: BUTTON_DISABLE_MAX_HEIGHT_SIZE.LARGE_BIG,
+      expected: expectedResizeLabelDisableMaxHeightStylesLargeBig,
+    },
+    {
+      input: BUTTON_DISABLE_MAX_HEIGHT_SIZE.XL,
+      expected: expectedResizeLabelDisableMaxHeightStylesXL,
+    },
+    {
+      input: BUTTON_DISABLE_MAX_HEIGHT_SIZE.XXL,
+      expected: expectedResizeLabelDisableMaxHeightStylesXXL,
+    },
+    {
+      input: BUTTON_DISABLE_MAX_HEIGHT_SIZE.XXXL,
+      expected: expectedResizeLabelDisableMaxHeightStylesXXXL,
+    },
+  ])(
+    `should return responsive styles for disable max height size $input`,
+    ({ input, expected }) => {
+      expect(
+        getDisableMaxHeightResponsiveStyleVariables({
+          fundingEligibility,
+          experiment,
+          disableMaxHeightSize: input,
+        })
+      ).toEqual(expected);
+    }
+  );
+});
+
+describe("test rebrand responsive style variables for disable max height", () => {
+  const experiment = {
+    isPaypalRebrandEnabled: true,
+    defaultBlueButtonColor: BUTTON_COLOR.DEFAULT_BLUE_LIGHT_BLUE,
+  };
+  const fundingEligibility = {
+    paypal: {
+      eligible: true,
+      branded: undefined,
+    },
+  };
+
+  test.each([
+    {
+      input: BUTTON_DISABLE_MAX_HEIGHT_SIZE.TINY,
+      expected: expectedRebrandDisableMaxHeightStylesTiny,
+    },
+    {
+      input: BUTTON_DISABLE_MAX_HEIGHT_SIZE.SMALL,
+      expected: expectedRebrandDisableMaxHeightStylesSmall,
+    },
+    {
+      input: BUTTON_DISABLE_MAX_HEIGHT_SIZE.MEDIUM_SMALL,
+      expected: expectedRebrandDisableMaxHeightStylesMediumSmall,
+    },
+    {
+      input: BUTTON_DISABLE_MAX_HEIGHT_SIZE.MEDIUM_BIG,
+      expected: expectedRebrandDisableMaxHeightStylesMediumBig,
+    },
+    {
+      input: BUTTON_DISABLE_MAX_HEIGHT_SIZE.LARGE_SMALL,
+      expected: expectedRebrandDisableMaxHeightStylesLargeSmall,
+    },
+    {
+      input: BUTTON_DISABLE_MAX_HEIGHT_SIZE.LARGE_BIG,
+      expected: expectedRebrandDisableMaxHeightStylesLargeBig,
+    },
+    {
+      input: BUTTON_DISABLE_MAX_HEIGHT_SIZE.XL,
+      expected: expectedRebrandDisableMaxHeightStylesXL,
+    },
+    {
+      input: BUTTON_DISABLE_MAX_HEIGHT_SIZE.XXL,
+      expected: expectedRebrandDisableMaxHeightStylesXXL,
+    },
+    {
+      input: BUTTON_DISABLE_MAX_HEIGHT_SIZE.XXXL,
+      expected: expectedRebrandDisableMaxHeightStylesXXXL,
+    },
+  ])(
+    `should return responsive styles for disable max height size $input`,
+    ({ input, expected }) => {
+      expect(
+        getDisableMaxHeightResponsiveStyleVariables({
+          fundingEligibility,
+          experiment,
+          disableMaxHeightSize: input,
+        })
+      ).toEqual(expected);
+    }
+  );
+});