@telefonica/mistica 16.66.0 → 16.68.0

package/src/button.css.ts

@@ -4,7 +4,7 @@ import {vars} from './skins/skin-contract.css';
 import * as mq from './media-queries.css';
 import {pxToRem} from './utils/css';
 
-import type {ComplexStyleRule} from '@vanilla-extract/css';
+import type {ComplexStyleRule, StyleRule} from '@vanilla-extract/css';
 
 const minWidth = createVar();
 export const buttonVars = {minWidth};
@@ -51,10 +51,46 @@ export const buttonPaddingY = {
     small: `calc(6px - ${borderSize})`,
 };
 
+const smallButtonHeight = `calc(${pxToRem(20)} + ${buttonPaddingY.small} + ${buttonPaddingY.small} + ${borderSize} + ${borderSize})`;
+
 const disabledStyle = {opacity: 0.5};
 
 export const isLoading = style({});
 
+export const smallTouchableContainer = style({
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: smallButtonHeight,
+    overflow: 'visible',
+    verticalAlign: 'bottom',
+});
+
+export const smallTouchableArea = style([
+    sprinkles({
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        border: 'none',
+        background: 'transparent',
+        padding: 0,
+    }),
+    {
+        borderRadius: vars.borderRadii.button,
+        overflow: 'visible',
+        width: '100%',
+        '@media': {
+            [mq.touchableOnly]: {
+                minHeight: 48,
+            },
+        },
+    },
+]);
+
+export const smallTouchableVisual = style({
+    width: '100%',
+});
+
 const button = style([
     sprinkles({
         display: 'inline-block',
@@ -71,6 +107,7 @@ const button = style([
 
         selectors: {
             [`&[disabled]:not(${isLoading})`]: disabledStyle,
+            [`${smallTouchableArea}[disabled]:not(${isLoading}) &`]: disabledStyle,
         },
         '@media': {
             [mq.touchableOnly]: {
@@ -150,32 +187,34 @@ globalStyle(`${textContent} svg`, {
     display: 'block',
 });
 
+const interactiveStyles = ({active, hover = active}: {active: StyleRule; hover?: StyleRule}): StyleRule => ({
+    selectors: {
+        '&:not([disabled]):active': active,
+        [`${smallTouchableArea}:not([disabled]):active &`]: active,
+    },
+
+    '@media': {
+        [mq.supportsHover]: {
+            selectors: {
+                '&:hover:not([disabled])': hover,
+                [`${smallTouchableArea}:hover:not([disabled]) &`]: hover,
+                '&:not([disabled]):active': active,
+                [`${smallTouchableArea}:not([disabled]):active &`]: active,
+            },
+        },
+    },
+});
+
 const lightPrimary: ComplexStyleRule = [
     button,
     sprinkles({
         color: vars.colors.textButtonPrimary,
         background: vars.colors.buttonPrimaryBackground,
     }),
-    {
-        selectors: {
-            '&:not([disabled]):active': {
-                backgroundColor: vars.colors.buttonPrimaryBackgroundPressed,
-            },
-        },
-
-        '@media': {
-            [mq.supportsHover]: {
-                selectors: {
-                    '&:hover:not([disabled])': {
-                        backgroundColor: vars.colors.buttonPrimaryBackgroundHover,
-                    },
-                    '&:not([disabled]):active': {
-                        backgroundColor: vars.colors.buttonPrimaryBackgroundPressed,
-                    },
-                },
-            },
-        },
-    },
+    interactiveStyles({
+        active: {backgroundColor: vars.colors.buttonPrimaryBackgroundPressed},
+        hover: {backgroundColor: vars.colors.buttonPrimaryBackgroundHover},
+    }),
 ];
 
 const lightPrimaryOverBrand: ComplexStyleRule = [
@@ -184,29 +223,12 @@ const lightPrimaryOverBrand: ComplexStyleRule = [
         color: vars.colors.textButtonPrimaryBrand,
         background: vars.colors.buttonPrimaryBackgroundBrand,
     }),
-    {
-        selectors: {
-            '&:not([disabled]):active': {
-                backgroundColor: vars.colors.buttonPrimaryBackgroundBrandPressed,
-                color: vars.colors.textButtonPrimaryBrandPressed,
-            },
-        },
-
-        '@media': {
-            [mq.supportsHover]: {
-                selectors: {
-                    '&:hover:not([disabled])': {
-                        color: vars.colors.textButtonPrimaryBrandPressed,
-                        backgroundColor: vars.colors.buttonPrimaryBackgroundBrandPressed,
-                    },
-                    '&:not([disabled]):active': {
-                        backgroundColor: vars.colors.buttonPrimaryBackgroundBrandPressed,
-                        color: vars.colors.textButtonPrimaryBrandPressed,
-                    },
-                },
-            },
+    interactiveStyles({
+        active: {
+            backgroundColor: vars.colors.buttonPrimaryBackgroundBrandPressed,
+            color: vars.colors.textButtonPrimaryBrandPressed,
         },
-    },
+    }),
 ];
 
 const lightPrimaryOverNegative: ComplexStyleRule = [
@@ -215,29 +237,12 @@ const lightPrimaryOverNegative: ComplexStyleRule = [
         color: vars.colors.textButtonPrimaryNegative,
         background: vars.colors.buttonPrimaryBackgroundNegative,
     }),
-    {
-        selectors: {
-            '&:not([disabled]):active': {
-                backgroundColor: vars.colors.buttonPrimaryBackgroundNegativePressed,
-                color: vars.colors.textButtonPrimaryNegativePressed,
-            },
+    interactiveStyles({
+        active: {
+            backgroundColor: vars.colors.buttonPrimaryBackgroundNegativePressed,
+            color: vars.colors.textButtonPrimaryNegativePressed,
         },
-
-        '@media': {
-            [mq.supportsHover]: {
-                selectors: {
-                    '&:hover:not([disabled])': {
-                        color: vars.colors.textButtonPrimaryNegativePressed,
-                        backgroundColor: vars.colors.buttonPrimaryBackgroundNegativePressed,
-                    },
-                    '&:not([disabled]):active': {
-                        backgroundColor: vars.colors.buttonPrimaryBackgroundNegativePressed,
-                        color: vars.colors.textButtonPrimaryNegativePressed,
-                    },
-                },
-            },
-        },
-    },
+    }),
 ];
 
 const lightPrimaryMedia: ComplexStyleRule = [
@@ -246,29 +251,12 @@ const lightPrimaryMedia: ComplexStyleRule = [
         color: vars.colors.textButtonPrimaryMedia,
         background: vars.colors.buttonPrimaryBackgroundMedia,
     }),
-    {
-        selectors: {
-            '&:not([disabled]):active': {
-                backgroundColor: vars.colors.buttonPrimaryBackgroundMediaPressed,
-                color: vars.colors.textButtonPrimaryMediaPressed,
-            },
-        },
-
-        '@media': {
-            [mq.supportsHover]: {
-                selectors: {
-                    '&:hover:not([disabled])': {
-                        color: vars.colors.textButtonPrimaryMediaPressed,
-                        backgroundColor: vars.colors.buttonPrimaryBackgroundMediaPressed,
-                    },
-                    '&:not([disabled]):active': {
-                        backgroundColor: vars.colors.buttonPrimaryBackgroundMediaPressed,
-                        color: vars.colors.textButtonPrimaryMediaPressed,
-                    },
-                },
-            },
+    interactiveStyles({
+        active: {
+            backgroundColor: vars.colors.buttonPrimaryBackgroundMediaPressed,
+            color: vars.colors.textButtonPrimaryMediaPressed,
         },
-    },
+    }),
 ];
 
 const lightSecondary: ComplexStyleRule = [
@@ -279,32 +267,19 @@ const lightSecondary: ComplexStyleRule = [
     }),
     {
         borderColor: vars.colors.buttonSecondaryBorder,
-
-        selectors: {
-            '&:not([disabled]):active': {
-                color: vars.colors.textButtonSecondaryPressed,
-                borderColor: vars.colors.buttonSecondaryBorderPressed,
-                backgroundColor: vars.colors.buttonSecondaryBackgroundPressed,
-            },
+    },
+    interactiveStyles({
+        active: {
+            color: vars.colors.textButtonSecondaryPressed,
+            borderColor: vars.colors.buttonSecondaryBorderPressed,
+            backgroundColor: vars.colors.buttonSecondaryBackgroundPressed,
         },
-
-        '@media': {
-            [mq.supportsHover]: {
-                selectors: {
-                    '&:hover:not([disabled])': {
-                        color: vars.colors.textButtonSecondaryPressed,
-                        borderColor: vars.colors.buttonSecondaryBorderPressed,
-                        backgroundColor: vars.colors.buttonSecondaryBackgroundHover,
-                    },
-                    '&:not([disabled]):active': {
-                        color: vars.colors.textButtonSecondaryPressed,
-                        borderColor: vars.colors.buttonSecondaryBorderPressed,
-                        backgroundColor: vars.colors.buttonSecondaryBackgroundPressed,
-                    },
-                },
-            },
+        hover: {
+            color: vars.colors.textButtonSecondaryPressed,
+            borderColor: vars.colors.buttonSecondaryBorderPressed,
+            backgroundColor: vars.colors.buttonSecondaryBackgroundHover,
         },
-    },
+    }),
 ];
 
 const lightSecondaryOverBrand: ComplexStyleRule = [
@@ -315,31 +290,19 @@ const lightSecondaryOverBrand: ComplexStyleRule = [
     }),
     {
         borderColor: vars.colors.buttonSecondaryBorderBrand,
-        selectors: {
-            '&:not([disabled]):active': {
-                borderColor: vars.colors.buttonSecondaryBorderBrandPressed,
-                color: vars.colors.textButtonSecondaryBrandPressed,
-                backgroundColor: vars.colors.buttonSecondaryBackgroundBrandPressed,
-            },
+    },
+    interactiveStyles({
+        active: {
+            borderColor: vars.colors.buttonSecondaryBorderBrandPressed,
+            color: vars.colors.textButtonSecondaryBrandPressed,
+            backgroundColor: vars.colors.buttonSecondaryBackgroundBrandPressed,
         },
-
-        '@media': {
-            [mq.supportsHover]: {
-                selectors: {
-                    '&:hover:not([disabled])': {
-                        borderColor: vars.colors.buttonSecondaryBorderBrandPressed,
-                        color: vars.colors.textButtonSecondaryBrandPressed,
-                        backgroundColor: vars.colors.buttonSecondaryBackgroundBrandHover,
-                    },
-                    '&:not([disabled]):active': {
-                        borderColor: vars.colors.buttonSecondaryBorderBrandPressed,
-                        color: vars.colors.textButtonSecondaryBrandPressed,
-                        backgroundColor: vars.colors.buttonSecondaryBackgroundBrandPressed,
-                    },
-                },
-            },
+        hover: {
+            borderColor: vars.colors.buttonSecondaryBorderBrandPressed,
+            color: vars.colors.textButtonSecondaryBrandPressed,
+            backgroundColor: vars.colors.buttonSecondaryBackgroundBrandHover,
         },
-    },
+    }),
 ];
 
 const lightSecondaryOverNegative: ComplexStyleRule = [
@@ -350,31 +313,19 @@ const lightSecondaryOverNegative: ComplexStyleRule = [
     }),
     {
         borderColor: vars.colors.buttonSecondaryBorderNegative,
-        selectors: {
-            '&:not([disabled]):active': {
-                borderColor: vars.colors.buttonSecondaryBorderNegativePressed,
-                color: vars.colors.textButtonSecondaryNegativePressed,
-                backgroundColor: vars.colors.buttonSecondaryBackgroundNegativePressed,
-            },
+    },
+    interactiveStyles({
+        active: {
+            borderColor: vars.colors.buttonSecondaryBorderNegativePressed,
+            color: vars.colors.textButtonSecondaryNegativePressed,
+            backgroundColor: vars.colors.buttonSecondaryBackgroundNegativePressed,
         },
-
-        '@media': {
-            [mq.supportsHover]: {
-                selectors: {
-                    '&:hover:not([disabled])': {
-                        borderColor: vars.colors.buttonSecondaryBorderNegativePressed,
-                        color: vars.colors.textButtonSecondaryNegativePressed,
-                        backgroundColor: vars.colors.buttonSecondaryBackgroundNegativeHover,
-                    },
-                    '&:not([disabled]):active': {
-                        borderColor: vars.colors.buttonSecondaryBorderNegativePressed,
-                        color: vars.colors.textButtonSecondaryNegativePressed,
-                        backgroundColor: vars.colors.buttonSecondaryBackgroundNegativePressed,
-                    },
-                },
-            },
+        hover: {
+            borderColor: vars.colors.buttonSecondaryBorderNegativePressed,
+            color: vars.colors.textButtonSecondaryNegativePressed,
+            backgroundColor: vars.colors.buttonSecondaryBackgroundNegativeHover,
         },
-    },
+    }),
 ];
 
 const lightSecondaryMedia: ComplexStyleRule = [
@@ -385,32 +336,19 @@ const lightSecondaryMedia: ComplexStyleRule = [
     }),
     {
         borderColor: vars.colors.buttonSecondaryBorderMedia,
-
-        selectors: {
-            '&:not([disabled]):active': {
-                borderColor: vars.colors.buttonSecondaryBorderMediaPressed,
-                color: vars.colors.textButtonSecondaryMediaPressed,
-                backgroundColor: vars.colors.buttonSecondaryBackgroundMediaPressed,
-            },
+    },
+    interactiveStyles({
+        active: {
+            borderColor: vars.colors.buttonSecondaryBorderMediaPressed,
+            color: vars.colors.textButtonSecondaryMediaPressed,
+            backgroundColor: vars.colors.buttonSecondaryBackgroundMediaPressed,
         },
-
-        '@media': {
-            [mq.supportsHover]: {
-                selectors: {
-                    '&:hover:not([disabled])': {
-                        borderColor: vars.colors.buttonSecondaryBorderMediaPressed,
-                        color: vars.colors.textButtonSecondaryMediaPressed,
-                        backgroundColor: vars.colors.buttonSecondaryBackgroundMediaHover,
-                    },
-                    '&:not([disabled]):active': {
-                        borderColor: vars.colors.buttonSecondaryBorderMediaPressed,
-                        color: vars.colors.textButtonSecondaryMediaPressed,
-                        backgroundColor: vars.colors.buttonSecondaryBackgroundMediaPressed,
-                    },
-                },
-            },
+        hover: {
+            borderColor: vars.colors.buttonSecondaryBorderMediaPressed,
+            color: vars.colors.textButtonSecondaryMediaPressed,
+            backgroundColor: vars.colors.buttonSecondaryBackgroundMediaHover,
         },
-    },
+    }),
 ];
 
 const danger: ComplexStyleRule = [
@@ -419,26 +357,10 @@ const danger: ComplexStyleRule = [
         color: vars.colors.textButtonPrimary,
         background: vars.colors.buttonDangerBackground,
     }),
-    {
-        selectors: {
-            '&:not([disabled]):active': {
-                backgroundColor: vars.colors.buttonDangerBackgroundPressed,
-            },
-        },
-
-        '@media': {
-            [mq.supportsHover]: {
-                selectors: {
-                    '&:hover:not([disabled])': {
-                        backgroundColor: vars.colors.buttonDangerBackgroundHover,
-                    },
-                    '&:not([disabled]):active': {
-                        backgroundColor: vars.colors.buttonDangerBackgroundPressed,
-                    },
-                },
-            },
-        },
-    },
+    interactiveStyles({
+        active: {backgroundColor: vars.colors.buttonDangerBackgroundPressed},
+        hover: {backgroundColor: vars.colors.buttonDangerBackgroundHover},
+    }),
 ];
 
 export const defaultLink: ComplexStyleRule = [
@@ -447,26 +369,7 @@ export const defaultLink: ComplexStyleRule = [
         color: vars.colors.textLink,
         background: 'transparent',
     }),
-    {
-        selectors: {
-            '&:not([disabled]):active': {
-                backgroundColor: vars.colors.buttonLinkBackgroundPressed,
-            },
-        },
-
-        '@media': {
-            [mq.supportsHover]: {
-                selectors: {
-                    '&:hover:not([disabled])': {
-                        backgroundColor: vars.colors.buttonLinkBackgroundPressed,
-                    },
-                    '&:not([disabled]):active': {
-                        backgroundColor: vars.colors.buttonLinkBackgroundPressed,
-                    },
-                },
-            },
-        },
-    },
+    interactiveStyles({active: {backgroundColor: vars.colors.buttonLinkBackgroundPressed}}),
 ];
 
 export const defaultLinkOverBrand: ComplexStyleRule = [
@@ -475,26 +378,7 @@ export const defaultLinkOverBrand: ComplexStyleRule = [
         color: vars.colors.textLinkBrand,
         background: 'transparent',
     }),
-    {
-        selectors: {
-            '&:not([disabled]):active': {
-                backgroundColor: vars.colors.buttonLinkBackgroundBrandPressed,
-            },
-        },
-
-        '@media': {
-            [mq.supportsHover]: {
-                selectors: {
-                    '&:hover:not([disabled])': {
-                        backgroundColor: vars.colors.buttonLinkBackgroundBrandPressed,
-                    },
-                    '&:not([disabled]):active': {
-                        backgroundColor: vars.colors.buttonLinkBackgroundBrandPressed,
-                    },
-                },
-            },
-        },
-    },
+    interactiveStyles({active: {backgroundColor: vars.colors.buttonLinkBackgroundBrandPressed}}),
 ];
 
 export const defaultLinkOverNegative: ComplexStyleRule = [
@@ -503,26 +387,7 @@ export const defaultLinkOverNegative: ComplexStyleRule = [
         color: vars.colors.textLinkNegative,
         background: 'transparent',
     }),
-    {
-        selectors: {
-            '&:not([disabled]):active': {
-                backgroundColor: vars.colors.buttonLinkBackgroundNegativePressed,
-            },
-        },
-
-        '@media': {
-            [mq.supportsHover]: {
-                selectors: {
-                    '&:hover:not([disabled])': {
-                        backgroundColor: vars.colors.buttonLinkBackgroundNegativePressed,
-                    },
-                    '&:not([disabled]):active': {
-                        backgroundColor: vars.colors.buttonLinkBackgroundNegativePressed,
-                    },
-                },
-            },
-        },
-    },
+    interactiveStyles({active: {backgroundColor: vars.colors.buttonLinkBackgroundNegativePressed}}),
 ];
 
 export const defaultLinkMedia: ComplexStyleRule = [
@@ -531,26 +396,7 @@ export const defaultLinkMedia: ComplexStyleRule = [
         color: vars.colors.textLinkMedia,
         background: 'transparent',
     }),
-    {
-        selectors: {
-            '&:not([disabled]):active': {
-                backgroundColor: vars.colors.buttonLinkBackgroundMediaPressed,
-            },
-        },
-
-        '@media': {
-            [mq.supportsHover]: {
-                selectors: {
-                    '&:hover:not([disabled])': {
-                        backgroundColor: vars.colors.buttonLinkBackgroundMediaPressed,
-                    },
-                    '&:not([disabled]):active': {
-                        backgroundColor: vars.colors.buttonLinkBackgroundMediaPressed,
-                    },
-                },
-            },
-        },
-    },
+    interactiveStyles({active: {backgroundColor: vars.colors.buttonLinkBackgroundMediaPressed}}),
 ];
 
 const dangerLink: ComplexStyleRule = [
@@ -559,26 +405,7 @@ const dangerLink: ComplexStyleRule = [
         color: vars.colors.textLinkDanger,
         background: 'transparent',
     }),
-    {
-        selectors: {
-            '&:not([disabled]):active': {
-                backgroundColor: vars.colors.buttonLinkDangerBackgroundPressed,
-            },
-        },
-
-        '@media': {
-            [mq.supportsHover]: {
-                selectors: {
-                    '&:hover:not([disabled])': {
-                        backgroundColor: vars.colors.buttonLinkDangerBackgroundPressed,
-                    },
-                    '&:not([disabled]):active': {
-                        backgroundColor: vars.colors.buttonLinkDangerBackgroundPressed,
-                    },
-                },
-            },
-        },
-    },
+    interactiveStyles({active: {backgroundColor: vars.colors.buttonLinkDangerBackgroundPressed}}),
 ];
 
 const dangerLinkOverBrand: ComplexStyleRule = [
@@ -587,26 +414,7 @@ const dangerLinkOverBrand: ComplexStyleRule = [
         color: vars.colors.textLinkDanger,
         background: vars.colors.buttonLinkDangerBackgroundBrand,
     }),
-    {
-        selectors: {
-            '&:not([disabled]):active': {
-                backgroundColor: vars.colors.buttonLinkDangerBackgroundBrandPressed,
-            },
-        },
-
-        '@media': {
-            [mq.supportsHover]: {
-                selectors: {
-                    '&:hover:not([disabled])': {
-                        backgroundColor: vars.colors.buttonLinkDangerBackgroundBrandPressed,
-                    },
-                    '&:not([disabled]):active': {
-                        backgroundColor: vars.colors.buttonLinkDangerBackgroundBrandPressed,
-                    },
-                },
-            },
-        },
-    },
+    interactiveStyles({active: {backgroundColor: vars.colors.buttonLinkDangerBackgroundBrandPressed}}),
 ];
 
 const dangerLinkOverNegative: ComplexStyleRule = [
@@ -615,26 +423,7 @@ const dangerLinkOverNegative: ComplexStyleRule = [
         color: vars.colors.textLinkDanger,
         background: vars.colors.buttonLinkDangerBackgroundNegative,
     }),
-    {
-        selectors: {
-            '&:not([disabled]):active': {
-                backgroundColor: vars.colors.buttonLinkDangerBackgroundNegativePressed,
-            },
-        },
-
-        '@media': {
-            [mq.supportsHover]: {
-                selectors: {
-                    '&:hover:not([disabled])': {
-                        backgroundColor: vars.colors.buttonLinkDangerBackgroundNegativePressed,
-                    },
-                    '&:not([disabled]):active': {
-                        backgroundColor: vars.colors.buttonLinkDangerBackgroundNegativePressed,
-                    },
-                },
-            },
-        },
-    },
+    interactiveStyles({active: {backgroundColor: vars.colors.buttonLinkDangerBackgroundNegativePressed}}),
 ];
 
 const dangerLinkMedia: ComplexStyleRule = [
@@ -643,26 +432,7 @@ const dangerLinkMedia: ComplexStyleRule = [
         color: vars.colors.textLinkDangerMedia,
         background: vars.colors.buttonLinkDangerBackgroundMedia,
     }),
-    {
-        selectors: {
-            '&:not([disabled]):active': {
-                backgroundColor: vars.colors.buttonLinkDangerBackgroundMediaPressed,
-            },
-        },
-
-        '@media': {
-            [mq.supportsHover]: {
-                selectors: {
-                    '&:hover:not([disabled])': {
-                        backgroundColor: vars.colors.buttonLinkDangerBackgroundMediaPressed,
-                    },
-                    '&:not([disabled]):active': {
-                        backgroundColor: vars.colors.buttonLinkDangerBackgroundMediaPressed,
-                    },
-                },
-            },
-        },
-    },
+    interactiveStyles({active: {backgroundColor: vars.colors.buttonLinkDangerBackgroundMediaPressed}}),
 ];
 
 const dangerLinkOverBrandDark: ComplexStyleRule = [
@@ -671,26 +441,7 @@ const dangerLinkOverBrandDark: ComplexStyleRule = [
         color: vars.colors.textLinkDanger,
         background: 'transparent',
     }),
-    {
-        selectors: {
-            '&:not([disabled]):active': {
-                backgroundColor: vars.colors.buttonLinkDangerBackgroundBrandPressed,
-            },
-        },
-
-        '@media': {
-            [mq.supportsHover]: {
-                selectors: {
-                    '&:hover:not([disabled])': {
-                        backgroundColor: vars.colors.buttonLinkDangerBackgroundBrandPressed,
-                    },
-                    '&:not([disabled]):active': {
-                        backgroundColor: vars.colors.buttonLinkDangerBackgroundBrandPressed,
-                    },
-                },
-            },
-        },
-    },
+    interactiveStyles({active: {backgroundColor: vars.colors.buttonLinkDangerBackgroundBrandPressed}}),
 ];
 
 const dangerLinkOverNegativeDark: ComplexStyleRule = [
@@ -699,26 +450,7 @@ const dangerLinkOverNegativeDark: ComplexStyleRule = [
         color: vars.colors.textLinkDanger,
         background: 'transparent',
     }),
-    {
-        selectors: {
-            '&:not([disabled]):active': {
-                backgroundColor: vars.colors.buttonLinkDangerBackgroundNegativePressed,
-            },
-        },
-
-        '@media': {
-            [mq.supportsHover]: {
-                selectors: {
-                    '&:hover:not([disabled])': {
-                        backgroundColor: vars.colors.buttonLinkDangerBackgroundNegativePressed,
-                    },
-                    '&:not([disabled]):active': {
-                        backgroundColor: vars.colors.buttonLinkDangerBackgroundNegativePressed,
-                    },
-                },
-            },
-        },
-    },
+    interactiveStyles({active: {backgroundColor: vars.colors.buttonLinkDangerBackgroundNegativePressed}}),
 ];
 
 export const buttonVariants = styleVariants({