//
// All default breakpoints
//
$bp-lgx-mx: (name: '\\@lgx', cond: 'all and (max-width: 1500px)') !default;
$bp-lg-mx : (name: '\\@lg' , cond: 'all and (max-width: 1024px)') !default;
$bp-md-mx : (name: '\\@md' , cond: 'all and (max-width: 768px)') !default;
$bp-sm-mx : (name: '\\@sm' , cond: 'all and (max-width: 500px)') !default;
$bp-smx-mx: (name: '\\@smx', cond: 'all and (max-width: 400px)') !default;

$bp-lgx-mn: (name: '\\@lgx-mn', cond: 'all and (min-width: 1500px)') !default;
$bp-lg-mn : (name: '\\@lg-mn',  cond: 'all and (min-width: 1024px)') !default;
$bp-md-mn : (name: '\\@md-mn',  cond: 'all and (min-width: 768px)') !default;
$bp-sm-mn : (name: '\\@sm-mn',  cond: 'all and (min-width: 500px)') !default;
$bp-smx-mn: (name: '\\@smx-mn', cond: 'all and (min-width: 400px)') !default;


$cont-200-mx: (name: '\\#200-mx', cond: '(max-width: 200px)') !default;
$cont-two-col-600-mx: (name: '\\#two-col\\@600w', cond: 'two-col (max-width: 600px)') !default;

$container-order: (
  $cont-200-mx,
  $cont-two-col-600-mx,
) !default;


// wire framing colors
$color-white    : #ffffff !default;
$color-lightgray: lightgray !default;
$color-gray     : gray !default;
$color-black    : #000000 !default;

// css custom properties
$v-c-primary : (
  (vals : ('white' : $color-white, 'black' : $color-black, 'gray': $color-gray,),),
  (vals : ('white' : $color-white, 'black' : $color-black, 'gray': $color-gray,), bp: $bp-md-mx,),
  (vals : ('white' : $color-white, 'black' : $color-black, 'gray': $color-gray,), bp: $bp-sm-mx,),
);
$v-c-secondary : (
  (vals : ('white' : $color-white, 'black' : $color-black, 'gray': $color-gray,),),
  (vals : ('white' : $color-white, 'black' : $color-black, 'gray': $color-gray,), bp: $bp-md-mx,),
  (vals : ('white' : $color-white, 'black' : $color-black, 'gray': $color-gray,), bp: $bp-sm-mx,),
);

//(variableName, setClassName,  postfix, modifier, initialValue, styles)
$css-custom-properties : (
  ('--c-primary', 'set\\(--c-primary\\,', '\\)', '', $color-white, $v-c-primary),
  ('--c-secondary', 'set\\(--c-secondary\\,', '\\)', '', $color-black, $v-c-secondary),
);

// some default ranges
$px-map: ('0': 0, '1': 1px, '5': 5px, '10': 10px, '15': 15px, '20': 20px, '25': 25px, '30': 30px, '40': 40px, '44': 44px, '50': 50px, '60': 60px, '70': 70px, '75': 75px, '80': 80px, '90': 90px, '100': 100px, '125': 125px, '150': 150px, '175': 175px, '200': 200px, '225': 225px, '250': 250px, '275': 275px, '300': 300px, '325': 325px, '350': 350px, '375': 375px, '400': 400px, '500': 500px, '600': 600px, '700': 700px, '800': 800px,) !default;
$perc-map: ('1': 1%, '2': 2%, '3': 3%, '4': 4%, '5': 5%, '10': 10%, '12\\.25': 12.25%, '15': 15%, '20': 20%, '25': 25%, '30': 30%, '33\\.3333': 33.3333%, '35': 35%, '40': 40%, '45': 45%, '50': 50%, '55': 55%, '60': 60%, '65': 65%, '66\\.6666': 66.6666%, '70': 70%, '75': 75%, '80': 80%, '85': 85%, '90': 90%, '95': 95%, '100': 100%, '110': 110%, '120': 120%, '130': 130%, '140': 140%, '150': 150%,) !default;
$vw-map: ('0': 0vw, '1': 1vw, '5': 5vw, '10': 10vw, '15': 15vw, '20': 20vw, '25': 25vw, '30': 30vw, '40': 40vw, '44': 44vw, '50': 50vw, '60': 60vw, '70': 70vw, '75': 75vw, '80': 80vw, '90': 90vw, '100': 100vw, '150': 150vw, '200': 200vw,) !default;
$vh-map: ('0': 0vh, '1': 1vh, '5': 5vh, '10': 10vh, '15': 15vh, '20': 20vh, '25': 25vh, '30': 30vh, '40': 40vh, '44': 44vh, '50': 50vh, '60': 60vh, '70': 70vh, '75': 75vh, '80': 80vh, '90': 90vh, '100': 100vh, '150': 150vh, '200': 200vh,) !default;

$breakpoint-order: (
  $bp-lgx-mx,
  $bp-lg-mx,
  $bp-md-mx,
  $bp-sm-mx,
  $bp-smx-mx,
  $bp-lgx-mn,
  $bp-lg-mn ,
  $bp-md-mn ,
  $bp-sm-mn ,
  $bp-smx-mn,
) !default;

// Container queries
$con-200-mx: (name: '\\#smx-mx', cond: 'all and (mix-width: 200px)') !default;

$container-order: (
  $con-200-mx,
) !default;
//
// Start style config variables
//

// background-color bgc
$backgroundColor : (
  (vals: (
    'white': $color-white,
    'lightgray': $color-lightgray,
    'gray': $color-gray,
    'black': $color-black,
  )),
) !default;

// border bd, bt, bb, bl, br
$border: (
  (vals:(
    '1-s-white'    : '1px solid ' + $color-white,
    '1-s-lightgray': '1px solid ' + $color-lightgray,
    '1-s-gray'     : '1px solid ' + $color-gray,
    '1-s-black'    : '1px solid ' + $color-black,
  )),
) !default;

// border-radius bdrs
$borderRadius: (
  (vals: ('0': 0, '1': 1px,'2': 2px,'3': 3px,'4': 4px, '5': 5px, '6': 6px, '7': 7px, '8': 8px, '9': 9px, '10': 10px,)),
) !default;

// top t, bottom b, left l, right r
$tblr: (
  (vals: $px-map),
  (vals: $px-map, bp: $bp-lg-mx,),
  (vals: $px-map, bp: $bp-md-mx,),
  (vals: $px-map, bp: $bp-sm-mx,),
) !default;

$tblr-vw: (
  (vals: $vw-map),
  (vals: $vw-map, bp: $bp-lg-mx,),
  (vals: $vw-map, bp: $bp-md-mx,),
  (vals: $vw-map, bp: $bp-sm-mx,),
) !default;

$tblr-perc: (
  (vals: $perc-map),
  (vals: $perc-map, bp: $bp-lg-mx,),
  (vals: $perc-map, bp: $bp-md-mx,),
  (vals: $perc-map, bp: $bp-sm-mx,),
) !default;

// clear cl
$clear: (
  (vals: ('b': 'both', 'l': 'left', 'r': 'right')),
) !default;

// color c
$color : (
  (vals: (
    'black'    : $color-black,
    'white'    : $color-white,
    'lightgray': $color-lightgray,
    'gray'     : $color-gray,
  )),
) !default;

//box-shadow txsh
$boxShadow: (
  (vals: (
    '1-1-1-1-white'    : 1px 1px 1px 1px $color-white,
    '1-1-1-1-lightgray': 1px 1px 1px 1px $color-lightgray,
    '1-1-1-1-gray'     : 1px 1px 1px 1px $color-gray,
    '1-1-1-1-black'    : 1px 1px 1px 1px $color-black,
  ),),
) !default;

// cursor cur
$cursor: (
  (vals: ('p': pointer, 'c': crosshair, 'm': move, 'ha': hand, 'he': help)),
) !default;

// display d
$display: (
  (vals: ('n': none, '-i': inline, 'b': block, 'ib': 'inline-block', 'f': flex, 'if': inline-flex, 'g': grid)),
  (vals: ('n': none, '-i': inline, 'b': block, 'ib': 'inline-block', 'f': flex, 'if': inline-flex, 'g': grid), bp: $bp-lg-mx),
  (vals: ('n': none, '-i': inline, 'b': block, 'ib': 'inline-block', 'f': flex, 'if': inline-flex, 'g': grid), bp: $bp-md-mx),
  (vals: ('n': none, '-i': inline, 'b': block, 'ib': 'inline-block', 'f': flex, 'if': inline-flex, 'g': grid), bp: $bp-sm-mx),
) !default;

//********************
// flex-box
//********************

// flex flx
$flex: (
  (vals: ('1': 1,'2': 2,'3': 3,'4': 4, '5': 5,)),
) !default;

// flex-grow fxg
$flexGrow: (
  (vals: ('1': 1,'2': 2,'3': 3,'4': 4, '5': 5,)),
) !default;

// flex-Shrink fxsh
$flexShrink: (
  (vals: ('1': 1,'2': 2,'3': 3,'4': 4, '5': 5,)),
) !default;

// flex-basis fxb
$flexBasis: (
  (vals: $px-map,),
) !default;

// flex-direction fxdr
$flexDirection: (
  (vals: ('r': row, 'c': column, 'rr': row-reverse, 'cr': column-reverse),),
  (vals: ('r': row, 'c': column, 'rr': row-reverse, 'cr': column-reverse), bp: $bp-lg-mx),
  (vals: ('r': row, 'c': column, 'rr': row-reverse, 'cr': column-reverse), bp: $bp-md-mx),
  (vals: ('r': row, 'c': column, 'rr': row-reverse, 'cr': column-reverse), bp: $bp-sm-mx),
) !default;

// flex-wrap fxw
$flexWrap: (
  (vals: ('n': nowrap, 'w': wrap, 'r': wrap-reverse),),
) !default;

// align-items ai
$alignItems: (
  (vals: ('fs': flex-start, 'fe': flex-end, 'b': baseline, 'c': center, 's': stretch),),
) !default;

// align-self as
$alignSelf: (
  (vals: ('b': baseline, 'c': center, 'a': auto),),
) !default;

// justify-content jc
$justifyContent: (
  (vals: ('fs': flex-start, 'fe': flex-end, 'c': center, 'sb': space-between, 'sa': space-around),),
  (vals: ('fs': flex-start, 'fe': flex-end, 'c': center, 'sb': space-between, 'sa': space-around), bp: $bp-lg-mx),
  (vals: ('fs': flex-start, 'fe': flex-end, 'c': center, 'sb': space-between, 'sa': space-around), bp: $bp-md-mx),
  (vals: ('fs': flex-start, 'fe': flex-end, 'c': center, 'sb': space-between, 'sa': space-around), bp: $bp-sm-mx),
) !default;

// order ord
$order: (
  (vals: ('1': 1,'2': 2,'3': 3,'4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9, '10': 10, '99': 99,)),
) !default;
//********************
// end flexbox
//********************

// float
$float: (
  (vals: ('l': left, 'r': right, 'n': none),),
  (vals: ('l': left, 'r': right, 'n': none), bp: $bp-lg-mx),
  (vals: ('l': left, 'r': right, 'n': none), bp: $bp-md-mx),
  (vals: ('l': left, 'r': right, 'n': none), bp: $bp-sm-mx),
) !default;

//********************
// font
//********************

// font-family ff
$fontFamily: (
  (vals: ('s': serif, 'ss': sans-serif),),
) !default;

// font-size fz
$fzs: ('0': 0, '10': 10px, '12': 12px, '13': 13px, '14': 14px, '15': 15px, '16': 16px, '17': 17px, '18': 18px, '19': 19px, '20': 20px, '21': 21px, '22': 22px, '23': 23px, '24': 24px, '25': 25px, '26': 26px, '27': 27px, '28': 28px, '32': 32px, '34': 34px, '36': 36px, '42': 42px, '48': 48px,) !default;
$fzs-vw: ('0': 0vw, '1': 1vw, '1\\.3': 1.3vw, '2': 2vw, '2\\.5': 2.5vw, '3': 3vw, '4': 4vw, '5': 5vw, '10': 10vw, '15': 15vw,) !default;
$fontSize: (
  (vals: $fzs),
  (vals: $fzs, bp: $bp-lg-mx, ),
  (vals: $fzs, bp: $bp-md-mx, ),
  (vals: $fzs, bp: $bp-sm-mx, ),
) !default;

$fontSize-vw: (
  (vals: $fzs-vw),
  (vals: $fzs-vw, bp: $bp-lg-mx, ),
  (vals: $fzs-vw, bp: $bp-md-mx, ),
  (vals: $fzs-vw, bp: $bp-sm-mx, ),
) !default;

// font-style fs
$fontStyle: (
  (vals: ('i': italic, 'o': oblique),),
) !default;

// font-weight fw
$fontWeight: (
  (vals: ('100': 100, '200': 200, '300': 300, '400': 400, '500': 500, '600': 600, '700': 700, '800': 800, '900': 900,),),
) !default;

// letter-spacing lts
$letterSpacing: (
  (vals: ('1': 1px, '2': 2px, '3': 3px, '4': 4px,  '5': 5px,)),
) !default;
//********************
// end font
//********************

// height h
$height: (
  (vals: $px-map),
  (vals: ('211': 211px, ), cont: $cont-200-mx, ),
  (vals: $px-map, bp: $bp-lg-mx,),
  (vals: $px-map, bp: $bp-md-mx,),
  (vals: $px-map, bp: $bp-sm-mx,),
) !default;

$height-vw: (
  (vals: $vw-map),
  (vals: $vw-map, bp: $bp-lg-mx,),
  (vals: $vw-map, bp: $bp-md-mx,),
  (vals: $vw-map, bp: $bp-sm-mx,),
) !default;

$height-perc: (
  (vals: $perc-map),
  (vals: $perc-map, bp: $bp-lg-mx,),
  (vals: $perc-map, bp: $bp-md-mx,),
  (vals: $perc-map, bp: $bp-sm-mx,),
) !default;

// list-style ls
$listStyle: (
  (vals: ('n': none,)),
) !default;

// margin m, margin-top mt, margin-bottom mb, margin-left ml, margin-right mr
$margin: (
  (vals: $px-map),
  (vals: $px-map, bp: $bp-lg-mx,),
  (vals: $px-map, bp: $bp-md-mx,),
  (vals: $px-map, bp: $bp-sm-mx,),
) !default;

$margin-vw: (
  (vals: $vw-map),
  (vals: $vw-map, bp: $bp-lg-mx,),
  (vals: $vw-map, bp: $bp-md-mx,),
  (vals: $vw-map, bp: $bp-sm-mx,),
) !default;

$margin-perc: (
  (vals: $perc-map),
  (vals: $perc-map, bp: $bp-lg-mx,),
  (vals: $perc-map, bp: $bp-md-mx,),
  (vals: $perc-map, bp: $bp-sm-mx,),
) !default;

// opacity op
$opacity: (
  (vals: ('0': 0, '\\.1': .1, '\\.2': .2, '\\.3': .3, '\\.4': .4, '\\.5': .5, '\\.6': .6, '\\.7': .7, '\\.8': .8, '\\.9': .9, '1': 1,),),
) !default;

// overflow o, overflow-x ox, overflow-y oy
$overflow: (
  (vals: ('h': hidden, 'a': auto, 's': scroll),),
) !default;


// padding p, padding-top pt, padding-bottom pb, padding-left pl, padding-right pr
$padding: (
  (vals: $px-map),
  (vals: $px-map, bp: $bp-lg-mx,),
  (vals: $px-map, bp: $bp-md-mx,),
  (vals: $px-map, bp: $bp-sm-mx,),
) !default;

$padding-vw: (
  (vals: $vw-map),
  (vals: $vw-map, bp: $bp-lg-mx,),
  (vals: $vw-map, bp: $bp-md-mx,),
  (vals: $vw-map, bp: $bp-sm-mx,),
) !default;

$padding-perc: (
  (vals: $perc-map),
  (vals: $perc-map, bp: $bp-lg-mx,),
  (vals: $perc-map, bp: $bp-md-mx,),
  (vals: $perc-map, bp: $bp-sm-mx,),
) !default;

// position pos
$position: (
  (vals: ('s': static, 'r': relative, 'a': absolute, 'f': fixed)),
  (vals: ('s': static, 'r': relative, 'a': absolute, 'f': fixed), bp: $bp-lg-mx,),
  (vals: ('s': static, 'r': relative, 'a': absolute, 'f': fixed), bp: $bp-md-mx,),
  (vals: ('s': static, 'r': relative, 'a': absolute, 'f': fixed), bp: $bp-sm-mx,),
) !default;

//********************
// svg
//********************

// stroke stroke
$stroke : (
  (vals: (
    'black'    : $color-black,
    'white'    : $color-white,
    'lightgray': $color-lightgray,
    'gray'     : $color-gray,
  )),
) !default;

// fill fill
$fill : (
  (vals: (
    'black'    : $color-black,
    'white'    : $color-white,
    'lightgray': $color-lightgray,
    'gray'     : $color-gray,
  )),
) !default;
//********************
// end svg
//********************

//********************
// text
//********************

// text-align ta
$textAlign: (
  (vals: ('l': left, 'c': center, 'r': right, 'j': justify),),
  (vals: ('l': left, 'c': center, 'r': right, 'j': justify), bp: $bp-lg-mx,),
  (vals: ('l': left, 'c': center, 'r': right, 'j': justify), bp: $bp-md-mx,),
  (vals: ('l': left, 'c': center, 'r': right, 'j': justify), bp: $bp-sm-mx,),
) !default;

// text-decoration td
$textDecoration: (
  (vals: ('n': none, 'u': underline),),
) !default;

//text-shadow txsh
$textShadow: (
  (vals: (
    '1-1-1-white'    : 1px 1px 1px $color-white,
    '1-1-1-lightgray': 1px 1px 1px $color-lightgray,
    '1-1-1-gray'     : 1px 1px 1px $color-gray,
    '1-1-1-black'    : 1px 1px 1px $color-black,
  ),),
) !default;

// text-transform tt
$textTransform: (
  (vals: ('u': uppercase, 'n': none),),
) !default;

// line-height lh
$lineHeight: (
  (vals: ('1': 1, '1\\.2': 1.2, '1\\.3': 1.3, '1\\.4': 1.4, '1\\.5': 1.5, '2': 2,),),
) !default;

//********************
// end text
//********************

/// transform trf
$transforms: (
  (vals: ('rz45': 'rotateZ(45deg)', 'rz-45': 'rotateZ(-45deg)', 'rz90': 'rotateZ(90deg)', 'rz-90': 'rotateZ(-90deg)', 'rz180': 'rotateZ(180deg)', )),
) !default;

/// transition trs
$transitions: (
  (vals: ('bgc-0\\.3s': background-color 0.3s, 'c-0\\.3s': color 0.3s, 'all-0\\.3s': all 0.3s, )),
) !default;

// width w
$width: (
  (vals: $px-map),
  (vals: $px-map, bp: $bp-lg-mx,),
  (vals: $px-map, bp: $bp-md-mx,),
  (vals: $px-map, bp: $bp-sm-mx,),
) !default;

$width-vw: (
  (vals: $vw-map),
  (vals: $vw-map, bp: $bp-lg-mx,),
  (vals: $vw-map, bp: $bp-md-mx,),
  (vals: $vw-map, bp: $bp-sm-mx,),
) !default;

$width-perc: (
  (vals: $perc-map),
  (vals: $perc-map, bp: $bp-lg-mx,),
  (vals: $perc-map, bp: $bp-md-mx,),
  (vals: $perc-map, bp: $bp-sm-mx,),
) !default;

// vertical-align va
$verticalAlign: (
  (vals: ('t': top, 'b': bottom, 'm': middle, 'sup': super, 'sub': sub, 'base': base,),),
) !default;

// word-break wob
$wordBreak: (
  (vals: ('n': normal, 'k': keep-all, 'ba': break-all, 'nm': normal,),),
) !default;

// word-wrap wow
$wordWrap: (
  (vals: ('u': unrestricted, 's': suppress, 'b': break-word, 'n': none,),),
) !default;

//z-index z
$zIndex: (
  (vals: ('1': 1,'2': 2,'3': 3,'4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9, '10': 10, '99': 99,),),
) !default;

// container ct 
$container: (
  (vals: ('z': 'size', 'iz': inline-size, 'bz': box-size, 's': style, 'st': state))
) !default;

$var-color: (
  (vals: ('--c-primary': var(--c-primary), '--c-secondary': var(--c-secondary),), ),
) !default;

$var-background-color: (
  (vals: ('--c-primary': var(--c-primary), '--c-secondary': var(--c-secondary),), ),
) !default;

// atomic generation configuration
$atomic-config:(
//(attribute,         className,  postfix , modifier, style variants)
  ('background-color',  'bgc',     '',         '',        $var-background-color),
  ('color',             'c',       '',         '',        $var-color),
  ('background-color',  'bgc-',    '',         '',        $backgroundColor),
  ('border',            'bd',      '',         '',        $border),
  ('border-top',        'bt',      '',         '',        $border),
  ('border-bottom',     'bb',      '',         '',        $border),
  ('border-left',       'bl',      '',         '',        $border),
  ('border-right',      'br',      '',         '',        $border),
  // top bottom left right
  ('top',               't',       '',         '',        $tblr),
  ('top',               't',       'vw',       '',        $tblr-vw),
  ('top',               't',       '\\%',      '',        $tblr-perc),
  ('bottom',            'b',       '',         '',        $tblr),
  ('bottom',            'b',       'vw',       '',        $tblr-vw),
  ('bottom',            'b',       '\\%',      '',        $tblr-perc),
  ('left',              'l',       '',         '',        $tblr),
  ('left',              'l',       'vw',       '',        $tblr-vw),
  ('left',              'l',       '\\%',      '',        $tblr-perc),
  ('right',             'r',       '',         '',        $tblr),
  ('right',             'r',       'vw',       '',        $tblr-vw),
  ('right',             'r',       '\\%',      '',        $tblr-perc),
  // end top bottom left right
  ('box-shadow',        'bxsh',    '',         '',        $boxShadow),
  ('cursor',            'cur',     '',         '',        $cursor),
  ('clear',             'cl',      '',         '',        $clear),
  ('color',             'c-',      '',         '',        $color),
  ('color',             'c-',      '\\:h',     ':hover',  $color),
  ('display',           'd',       '',         '',        $display),
  // start flexbox
  ('flex',              'flx',     '',         '',        $flex),
  ('flex-grow',         'fxg',     '',         '',        $flexGrow),
  ('flex-shrink',       'fxsh',    '',         '',        $flexShrink),
  ('flex-basis',        'fxb',     '',         '',        $flexBasis),
  ('flex-direction',    'fxdr',    '',         '',        $flexDirection),
  ('flex-wrap',         'fxw',     '',         '',        $flexWrap),
  ('align-items',       'ai',      '',         '',        $alignItems),
  ('align-self',        'as',      '',         '',        $alignSelf),
  ('justify-content',   'jc',      '',         '',        $justifyContent),
  ('order',             'ord',     '',         '',        $order),
  // end flex-box
  ('float',             'fl',      '',         '',        $float),
  // font
  ('font-family',       'ff',      '',         '',        $fontFamily),
  ('font-size',         'fz',      '',         '',        $fontSize),
  ('font-size',         'fz',      'vw',       '',        $fontSize-vw),
  ('font-style',        'fs',      '',         '',        $fontStyle),
  ('font-Weight',       'fw',      '',         '',        $fontWeight),
  ('letter-spacing',    'lts',     '',         '',        $letterSpacing),
  // end font
  // grid
  // ???
  // end grid
  // height
  ('height',            'h',       '',         '',        $height),
  ('height',            'h',       'vw',       '',        $height-vw),
  ('height',            'h',       '\\%',      '',        $height-perc),
  ('max-height',        'mah',     '',         '',        $height),
  ('max-height',        'mah',     'vw',       '',        $height-vw),
  ('max-height',        'mah',     '\\%',      '',        $height-perc),
  ('min-height',        'mih',     '',         '',        $height),
  ('min-height',        'mih',     'vw',       '',        $height-vw),
  ('min-height',        'mih',     '\\%',      '',        $height-perc),
  // end height
  ('list-style',        'ls',      '',         '',        $listStyle),
  // margin
  ('margin',            'm',       '',         '',        $margin),
  ('margin',            'm',       'vw',       '',        $margin-vw),
  ('margin',            'm',       '\\%',      '',        $margin-perc),
  ('margin-top',        'mt',      '',         '',        $margin),
  ('margin-top',        'mt',      'vw',       '',        $margin-vw),
  ('margin-top',        'mt',      '\\%',      '',        $margin-perc),
  ('margin-bottom',     'mb',      '',         '',        $margin),
  ('margin-bottom',     'mb',      'vw',       '',        $margin-vw),
  ('margin-bottom',     'mb',      '\\%',      '',        $margin-perc),
  ('margin-left',       'ml',      '',         '',        $margin),
  ('margin-left',       'ml',      'vw',       '',        $margin-vw),
  ('margin-left',       'ml',      '\\%',      '',        $margin-perc),
  ('margin-right',      'mr',      '',         '',        $margin),
  ('margin-right',      'mr',      'vw',       '',        $margin-vw),
  ('margin-right',      'mr',      '\\%',      '',        $margin-perc),
  // end margin
  ('opacity',           'op',      '',         '',        $opacity),
  ('overflow',          'o',       '',         '',        $overflow),
  ('overflow-x',        'ox',       '',         '',       $overflow),
  ('overflow-y',        'oy',       '',         '',       $overflow),
  // padding
  ('padding',           'p',       '',         '',        $padding),
  ('padding',           'p',       'vw',       '',        $padding-vw),
  ('padding',           'p',       '\\%',      '',        $padding-perc),
  ('padding-top',       'pt',      '',         '',        $padding),
  ('padding-top',       'pt',      'vw',       '',        $padding-vw),
  ('padding-top',       'pt',      '\\%',      '',        $padding-perc),
  ('padding-bottom',    'pb',      '',         '',        $padding),
  ('padding-bottom',    'pb',      'vw',       '',        $padding-vw),
  ('padding-bottom',    'pb',      '\\%',      '',        $padding-perc),
  ('padding-left',      'pl',      '',         '',        $padding),
  ('padding-left',      'pl',      'vw',       '',        $padding-vw),
  ('padding-left',      'pl',      '\\%',      '',        $padding-perc),
  ('padding-right',     'pr',      '',         '',        $padding),
  ('padding-right',     'pr',      'vw',       '',        $padding-vw),
  ('padding-right',     'pr',      '\\%',      '',        $padding-perc),
  // end padding
  ('position',          'pos',     '',         '',        $position),
  ('stroke',            'stroke-', '',         '',        $stroke),
  ('fill',              'fill-',   '',         '',        $fill),
  // text
  ('text-align',        'ta',      '',         '',        $textAlign),
  ('text-decoration',   'td',      '',         '',        $textDecoration),
  ('text-shadow',       'txsh',    '',         '',        $textShadow),
  ('text-transform',    'tt',      '',         '',        $textTransform),
  ('line-height',       'lh',      '',         '',        $lineHeight),
  // end text
  ('transform',         'trf-',    '',         '',        $transforms),
  ('transition',        'trs-',    '',         '',        $transitions),
  // width
  ('width',             'w',       '',         '',        $width),
  ('width',             'w',       'vw',       '',        $width-vw),
  ('width',             'w',       '\\%',      '',        $width-perc),
  ('max-width',         'maw',     '',         '',        $width),
  ('max-width',         'maw',     'vw',       '',        $width-vw),
  ('max-width',         'maw',     '\\%',      '',        $width-perc),
  ('min-width',         'miw',     '',         '',        $width),
  ('min-width',         'miw',     'vw',       '',        $width-vw),
  ('min-width',         'miw',     '\\%',      '',        $width-perc),
  // end width
  ('vertical-align',    'va',      '',         '',        $verticalAlign),
  ('word-break',        'wob',     '',         '',        $wordBreak),
  ('word-wrap',         'wow',     '',         '',        $wordWrap),
  ('z-index',           'z',       '',         '',        $zIndex),
) !default;