@porsche-design-system/components-js/styles/vanilla-extract/esm/js/hover/getHoverStyle.mjs

Porsche Design System is a component library designed to help developers create the best experience for software or services distributed by Dr. Ing. h.c. F. Porsche AG.

import { borderRadiusSmall } from '../border/borderRadiusSmall.mjs';
import { borderRadiusMedium } from '../border/borderRadiusMedium.mjs';
import { motionDurationShort } from '../motion/motionDurationShort.mjs';
import { motionEasingBase } from '../motion/motionEasingBase.mjs';
import { themeLightStateHover } from '../theme/themeLightStateHover.mjs';

const offsetHorizontal = '2px';
const getHoverStyles = (borderRadius = 'small') => {
    const borderRadiusValue = borderRadius === 'small'
        ? borderRadiusSmall
        : borderRadius === 'medium'
            ? borderRadiusMedium
            : borderRadius || borderRadiusSmall;
    return {
        borderRadius: borderRadiusValue, // it's visually being reflected on both (when placed here), element and hover
        marginLeft: `-${offsetHorizontal}`,
        marginRight: `-${offsetHorizontal}`,
        paddingLeft: offsetHorizontal,
        paddingRight: offsetHorizontal,
        transition: `background var(--p-transition-duration, ${motionDurationShort}) ${motionEasingBase}`,
    };
};
const getHoverNestedStyles = () => {
    return {
        background: themeLightStateHover, // hover color is equal for light and dark theme
    };
};

export { getHoverNestedStyles, getHoverStyles };