import { vars } from '../../css';
import { createResponsiveToken } from '../../css/utils/create-responsive-token';

export const menuResponsiveRule = createResponsiveToken({
  lg: {
    [vars.components.menu.space.basePaddingY]: vars.space[4],
    [vars.components.menu.space.itemPaddingX]: vars.space[4],
    [vars.components.menu.space.subBasePaddingLeft]: vars.space[4],
    [vars.components.menu.space.subItemPaddingX]: vars.space[4],
    [vars.components.menu.fontSizes.base]: vars.fontSizes.sm,
    // 194 / 16
    [vars.components.menu.sizes.baseWidth]: '12.125rem',
  },
});