import { cva } from 'class-variance-authority';

export const eyebrow = cva(['tw-eyebrow', '!tw-font-diatype', '!tw-text-common-white', '!tw-tracking-widest'], {
  variants: {
    variant: {
      footerHeading: [!'tw-text-sm'],
      menuItemHeading: ['!tw-text-xs'],
    },
  },
});

export const flexColumnStyling = cva(['tw-flex', 'tw-flex-col'], {
  variants: {
    element: {
      section: ['tw-pt-12', 'tw-pb-24', 'tw-gap-12'],
      footerWrapper: ['tw-gap-12', 'sm:tw-flex-row', 'tw-justify-between', 'sm:tw-px-8', 'md:tw-px-20'],
      companyInfo: ['tw-gap-8', 'sm:tw-items-start'],
      companyHeader: ['tw-gap-6', 'tw-text-center', 'tw-items-center', 'sm:tw-items-start'],
      socialsTrademarkWrapper: ['tw-gap-6'],
      menusWrapper: ['tw-gap-8', 'sm:tw-flex-row'],
    },
  },
});
