// margin m
$margin : (
  ( vals: (
    '-auto': auto,
    '4': 4px,
    '8': 8px,
    '12': 12px,
    '16': 16px,
    '24': 24px,
    '32': 32px,
    '40': 40px,
  ),),
  ( vals: (
    '-auto': auto,
    '0': 0,
  ),  bp: $bp-800w-mx,),
  ( vals: (
    '-auto': auto,
    '0': 0,
  ), bp: $bp-600w-mx,),
);

// margin m mt mr ml mb
$default-v-m-small : 12px;
$default-v-m-medium: 24px;
$default-v-m-large : 48px;
$v-m-small : (
  (vals : (
    '12' : 12px,
  ),),
  (vals : (
    '8' : 8px,
  ), bp: $bp-800w-mx,),
  (vals : (
    '4' : 4px,
  ), bp: $bp-600w-mx,),
);
$v-m-medium : (
  (vals : (
    '24' : 24px,
  ),),
  (vals : (
    '16' : 16px,
  ), bp: $bp-800w-mx,),
  (vals : (
    '8' : 8px,
  ), bp: $bp-600w-mx,),
);
$v-m-large : (
  (vals : (
    '48' : 48px,
    '80' : 80px,
  ),),
  (vals : (
    '32' : 32px,
  ), bp: $bp-800w-mx,),
  (vals : (
    '16' : 16px,
  ), bp: $bp-600w-mx,),
);

// using padding variables to define margin
$var-margin : (
  (vals: (
    '--small': var(--m-small),
    '--medium': var(--m-medium),
    '--large': var(--m-large),
  ), ),
  (vals: (
    '--small': var(--m-small),
    '--medium': var(--m-medium),
    '--large': var(--m-large),
  ), bp: $bp-800w-mx ),
);