preons:
  baseline: 1.6rem
  rules:
    theme-colors:
      &a1
      black: "#000000"
      white: "#ffffff"
      transparent: transparent
      hotpinkxl: "#f188bc"
      hotpinkl: "#f36fb0"
      hotpink: "#ea2889"
      hotpinkd: "#cc0f6d"
      hotpinkxd: "#900148"
      greyxl: "#f0f2ff"
      greyl: "#dedbe2"
      grey: "#b2b6ca"
      greyd: "#5a5573"
      greyxd: "#4d4c51"
      yellowxl: "#f8f8b7"
      yellowl: "#f1f16f"
      yellow: "#eaea28"
      yellowd: "#d6d615"
      yellowxd: "#b2b211"
      redxl: "#f3a6a6"
      redl: "#ec7272"
      red: "#e53e3e"
      redd: "#cd1c1c"
      redxd: "#991515"
      purplexl: "#c493f4"
      purplel: "#a65eef"
      purple: "#8928ea"
      purpled: "#6c13c4"
      purplexd: "#5810a0"
      orangexl: "#f4c493"
      orangel: "#efa65e"
      orange: "#ea8928"
      oranged: "#d67515"
      orangexd: "#b26211"
      limexl: "#c4f493"
      limel: "#a6ef5e"
      lime: "#89ea28"
      limed: "#6cc413"
      limexd: "#4e8e0e"
      lilacxl: "#f3effd"
      lilacl: "#e6dff7"
      lilac: "#c4b4ea"
      lilacd: "#b3a0de"
      lilacxd: "#988bb7"
      greenxl: "#00ce00"
      greenl: "#00a700"
      green: "#008000"
      greend: "#006c00"
      greenxd: "#005900"
      bluexl: "#99c8fb"
      bluel: "#68a9f1"
      blue: "#2889ea"
      blued: "#126eca"
      bluexd: "#0c59a7"
      off-whitel: "#fbfbff"
      off-white: "#f3f3f7"
      off-whited: "#e4e7f7"
    border-style:
      &a4
      solid: solid
      dotted: dotted
      dashed: dashed
    list-style:
      &a6
      circle: circle
      disc: disc
      square: square
      decimal: decimal
      none: none
      decimal-leading-zero: decimal-leading-zero
    overflow:
      &a8
      scroll: scroll
      hidden: hidden
      visible: visible
      auto: auto
      none: none
    scaled:
      "0": 0
      "1": $baseline * 1
      "2": $baseline * 2
      "3": $baseline * 3
      "4": $baseline * 4
      "5": $baseline * 5
      "6": $baseline * 6
      "7": $baseline * 7
      "8": $baseline * 8
      "9": $baseline * 9
      "10": $baseline * 10
      "11": $baseline * 11
      "12": $baseline * 12
    negative-scaled:
      1x: -1rem
      2x: -2rem
      3x: -3rem
      4x: -4rem
      5x: -5rem
      6x: -6rem
      7x: -7rem
      8x: -8rem
      9x: -9rem
      10x: -10rem
    baselined:
      &a5
      "1": $baseline * 0.5
      "2": $baseline * 1
      "3": $baseline * 1.5
      "4": $baseline * 2
      "5": $baseline * 2.5
      "6": $baseline * 3
      "7": $baseline * 3.5
      "8": $baseline * 4
      "9": $baseline * 4.5
      "10": $baseline * 5
      "11": $baseline * 5.5
      "12": $baseline * 6
    decimal:
      &a7
      "0": 0
      "-10": 0.1
      "-20": 0.2
      "-30": 0.3
      "-40": 0.4
      "-50": 0.5
      "-60": 0.6
      "-70": 0.7
      "-80": 0.8
      "-90": 0.9
      "-100": 1
    percentaged:
      "-5": 5%
      "-10": 10%
      "-15": 15%
      "-20": 20%
      "-25": 25%
      "-30": 30%
      "-35": 35%
      "-40": 40%
      "-45": 45%
      "-50": 50%
      "-55": 55%
      "-60": 60%
      "-65": 65%
      "-70": 70%
      "-75": 75%
      "-80": 80%
      "-85": 85%
      "-90": 90%
      "-95": 95%
      "-100": 100%
    discrete-percentage:
      -1-12: 100% / 12
      -2-12: 100% / 12 * 2
      -3-12: 100% / 12 * 3
      -4-12: 100% / 12 * 4
      -5-12: 100% / 12 * 5
      -6-12: 100% / 12 * 6
      -7-12: 100% / 12 * 7
      -8-12: 100% / 12 * 8
      -9-12: 100% / 12 * 9
      -10-12: 100% / 12 * 10
      -11-12: 100% / 12 * 11
      -12-12: 100% / 12 * 12
    special-sizes:
      n: none
      -au: auto
    tiny:
      &a3
      "0": 0
      "1": 1px
      "2": 2px
      "3": 3px
      "4": 4px
      "5": 5px
      "6": 6px
      "7": 7px
      "8": 8px
      "9": 9px
      "10": 10px
    discrete:
      -wire: 1px
      -xthin: 2px
      -thin: 3px
      -xxxsmall: 5px
      -xxsmall: 0.8rem
      -xsmall: 1rem
      -small: 1.6rem
      -icon: 2.4rem
      -medium: 7rem
      -big: 16rem
      -xbig: 22rem
      -xxbig: 32rem
      -xxxbig: 44rem
      -super: 58rem
      -xsuper: 72rem
      -xxsuper: 90rem
      -xxxsuper: 116rem
    vh:
      -10vh: 10vh
      -20vh: 20vh
      -30vh: 30vh
      -40vh: 40vh
      -50vh: 50vh
      -60vh: 60vh
      -70vh: 70vh
      -80vh: 80vh
      -90vh: 90vh
      -100vh: 100vh
    vw:
      -10vw: 10vw
      -20vw: 20vw
      -30vw: 30vw
      -40vw: 40vw
      -50vw: 50vw
      -60vw: 60vw
      -70vw: 70vw
      -80vw: 80vw
      -90vw: 90vw
      -100vw: 100vw
    negative-discrete:
      -bigx: -16rem
      -xbigx: 22rem
      -xxbigx: -32rem
      -xxxbigx: -44rem
      -superx: -56rem
      -xsuperx: -68rem
      -xxsuperx: -80rem
      -xxxsuperx: -100rem
    alignment:
      &a2
      center: center
      right: right
      left: left
    override:
      &a9
      "0": 0
      "1": 1
      "2": 2
      "3": 3
      "4": 4
      "5": 5
      "10": 10
      "20": 20
      "30": 30
      "999": 999
      "9999": 9999
  properties:
    background-attachment:
      class: bga-
      values:
        sc: scroll
        fi: fixed
        lo: local
        in: initial
        inherit: inherit
      mappings:
        bga-sc: scroll
        bga-fi: fixed
        bga-lo: local
        bga-in: initial
        bga-inherit: inherit
    background-color:
      class: bg-
      rule: theme-colors
      values: *a1
      mappings:
        bg-black: "#000000"
        bg-white: "#ffffff"
        bg-transparent: transparent
        bg-hotpinkxl: "#f188bc"
        bg-hotpinkl: "#f36fb0"
        bg-hotpink: "#ea2889"
        bg-hotpinkd: "#cc0f6d"
        bg-hotpinkxd: "#900148"
        bg-greyxl: "#f0f2ff"
        bg-greyl: "#dedbe2"
        bg-grey: "#b2b6ca"
        bg-greyd: "#5a5573"
        bg-greyxd: "#4d4c51"
        bg-yellowxl: "#f8f8b7"
        bg-yellowl: "#f1f16f"
        bg-yellow: "#eaea28"
        bg-yellowd: "#d6d615"
        bg-yellowxd: "#b2b211"
        bg-redxl: "#f3a6a6"
        bg-redl: "#ec7272"
        bg-red: "#e53e3e"
        bg-redd: "#cd1c1c"
        bg-redxd: "#991515"
        bg-purplexl: "#c493f4"
        bg-purplel: "#a65eef"
        bg-purple: "#8928ea"
        bg-purpled: "#6c13c4"
        bg-purplexd: "#5810a0"
        bg-orangexl: "#f4c493"
        bg-orangel: "#efa65e"
        bg-orange: "#ea8928"
        bg-oranged: "#d67515"
        bg-orangexd: "#b26211"
        bg-limexl: "#c4f493"
        bg-limel: "#a6ef5e"
        bg-lime: "#89ea28"
        bg-limed: "#6cc413"
        bg-limexd: "#4e8e0e"
        bg-lilacxl: "#f3effd"
        bg-lilacl: "#e6dff7"
        bg-lilac: "#c4b4ea"
        bg-lilacd: "#b3a0de"
        bg-lilacxd: "#988bb7"
        bg-greenxl: "#00ce00"
        bg-greenl: "#00a700"
        bg-green: "#008000"
        bg-greend: "#006c00"
        bg-greenxd: "#005900"
        bg-bluexl: "#99c8fb"
        bg-bluel: "#68a9f1"
        bg-blue: "#2889ea"
        bg-blued: "#126eca"
        bg-bluexd: "#0c59a7"
        bg-off-whitel: "#fbfbff"
        bg-off-white: "#f3f3f7"
        bg-off-whited: "#e4e7f7"
    background-size:
      class: bs-
      values:
        auto: auto
        inherit: inherit
        cover: cover
        contain: contain
        initial: initial
      mappings:
        bs-auto: auto
        bs-inherit: inherit
        bs-cover: cover
        bs-contain: contain
        bs-initial: initial
    background-position:
      class: bgp-
      rule: alignment
      values: *a2
      mappings:
        bgp-center: center
        bgp-right: right
        bgp-left: left
    background-position-x:
      class: bgpx-
      rule: alignment
      values: *a2
      mappings:
        bgpx-center: center
        bgpx-right: right
        bgpx-left: left
    background-position-y:
      class: bgpy-
      rule: alignment
      values: *a2
      mappings:
        bgpy-center: center
        bgpy-right: right
        bgpy-left: left
    background-repeat:
      class: bgr-
      values:
        rx: repeat-x
        rp: repeat
        sp: space
        ro: round
        nr: no-repeat
      mappings:
        bgr-rx: repeat-x
        bgr-rp: repeat
        bgr-sp: space
        bgr-ro: round
        bgr-nr: no-repeat
    border-bottom-width:
      class: bwb
      rule: tiny
      values: *a3
      mappings:
        bwb0: 0
        bwb1: 1px
        bwb2: 2px
        bwb3: 3px
        bwb4: 4px
        bwb5: 5px
        bwb6: 6px
        bwb7: 7px
        bwb8: 8px
        bwb9: 9px
        bwb10: 10px
    border-top-width:
      class: bwt
      rule: tiny
      values: *a3
      mappings:
        bwt0: 0
        bwt1: 1px
        bwt2: 2px
        bwt3: 3px
        bwt4: 4px
        bwt5: 5px
        bwt6: 6px
        bwt7: 7px
        bwt8: 8px
        bwt9: 9px
        bwt10: 10px
    border-right-width:
      class: bwr
      rule: tiny
      values: *a3
      mappings:
        bwr0: 0
        bwr1: 1px
        bwr2: 2px
        bwr3: 3px
        bwr4: 4px
        bwr5: 5px
        bwr6: 6px
        bwr7: 7px
        bwr8: 8px
        bwr9: 9px
        bwr10: 10px
    border-left-width:
      class: bwl
      rule: tiny
      values: *a3
      mappings:
        bwl0: 0
        bwl1: 1px
        bwl2: 2px
        bwl3: 3px
        bwl4: 4px
        bwl5: 5px
        bwl6: 6px
        bwl7: 7px
        bwl8: 8px
        bwl9: 9px
        bwl10: 10px
    border-width:
      class: bwa
      rule: tiny
      values: *a3
      mappings:
        bwa0: 0
        bwa1: 1px
        bwa2: 2px
        bwa3: 3px
        bwa4: 4px
        bwa5: 5px
        bwa6: 6px
        bwa7: 7px
        bwa8: 8px
        bwa9: 9px
        bwa10: 10px
    border-bottom-color:
      class: bcb-
      rule: theme-colors
      values: *a1
      mappings:
        bcb-black: "#000000"
        bcb-white: "#ffffff"
        bcb-transparent: transparent
        bcb-hotpinkxl: "#f188bc"
        bcb-hotpinkl: "#f36fb0"
        bcb-hotpink: "#ea2889"
        bcb-hotpinkd: "#cc0f6d"
        bcb-hotpinkxd: "#900148"
        bcb-greyxl: "#f0f2ff"
        bcb-greyl: "#dedbe2"
        bcb-grey: "#b2b6ca"
        bcb-greyd: "#5a5573"
        bcb-greyxd: "#4d4c51"
        bcb-yellowxl: "#f8f8b7"
        bcb-yellowl: "#f1f16f"
        bcb-yellow: "#eaea28"
        bcb-yellowd: "#d6d615"
        bcb-yellowxd: "#b2b211"
        bcb-redxl: "#f3a6a6"
        bcb-redl: "#ec7272"
        bcb-red: "#e53e3e"
        bcb-redd: "#cd1c1c"
        bcb-redxd: "#991515"
        bcb-purplexl: "#c493f4"
        bcb-purplel: "#a65eef"
        bcb-purple: "#8928ea"
        bcb-purpled: "#6c13c4"
        bcb-purplexd: "#5810a0"
        bcb-orangexl: "#f4c493"
        bcb-orangel: "#efa65e"
        bcb-orange: "#ea8928"
        bcb-oranged: "#d67515"
        bcb-orangexd: "#b26211"
        bcb-limexl: "#c4f493"
        bcb-limel: "#a6ef5e"
        bcb-lime: "#89ea28"
        bcb-limed: "#6cc413"
        bcb-limexd: "#4e8e0e"
        bcb-lilacxl: "#f3effd"
        bcb-lilacl: "#e6dff7"
        bcb-lilac: "#c4b4ea"
        bcb-lilacd: "#b3a0de"
        bcb-lilacxd: "#988bb7"
        bcb-greenxl: "#00ce00"
        bcb-greenl: "#00a700"
        bcb-green: "#008000"
        bcb-greend: "#006c00"
        bcb-greenxd: "#005900"
        bcb-bluexl: "#99c8fb"
        bcb-bluel: "#68a9f1"
        bcb-blue: "#2889ea"
        bcb-blued: "#126eca"
        bcb-bluexd: "#0c59a7"
        bcb-off-whitel: "#fbfbff"
        bcb-off-white: "#f3f3f7"
        bcb-off-whited: "#e4e7f7"
    border-top-color:
      class: bct-
      rule: theme-colors
      values: *a1
      mappings:
        bct-black: "#000000"
        bct-white: "#ffffff"
        bct-transparent: transparent
        bct-hotpinkxl: "#f188bc"
        bct-hotpinkl: "#f36fb0"
        bct-hotpink: "#ea2889"
        bct-hotpinkd: "#cc0f6d"
        bct-hotpinkxd: "#900148"
        bct-greyxl: "#f0f2ff"
        bct-greyl: "#dedbe2"
        bct-grey: "#b2b6ca"
        bct-greyd: "#5a5573"
        bct-greyxd: "#4d4c51"
        bct-yellowxl: "#f8f8b7"
        bct-yellowl: "#f1f16f"
        bct-yellow: "#eaea28"
        bct-yellowd: "#d6d615"
        bct-yellowxd: "#b2b211"
        bct-redxl: "#f3a6a6"
        bct-redl: "#ec7272"
        bct-red: "#e53e3e"
        bct-redd: "#cd1c1c"
        bct-redxd: "#991515"
        bct-purplexl: "#c493f4"
        bct-purplel: "#a65eef"
        bct-purple: "#8928ea"
        bct-purpled: "#6c13c4"
        bct-purplexd: "#5810a0"
        bct-orangexl: "#f4c493"
        bct-orangel: "#efa65e"
        bct-orange: "#ea8928"
        bct-oranged: "#d67515"
        bct-orangexd: "#b26211"
        bct-limexl: "#c4f493"
        bct-limel: "#a6ef5e"
        bct-lime: "#89ea28"
        bct-limed: "#6cc413"
        bct-limexd: "#4e8e0e"
        bct-lilacxl: "#f3effd"
        bct-lilacl: "#e6dff7"
        bct-lilac: "#c4b4ea"
        bct-lilacd: "#b3a0de"
        bct-lilacxd: "#988bb7"
        bct-greenxl: "#00ce00"
        bct-greenl: "#00a700"
        bct-green: "#008000"
        bct-greend: "#006c00"
        bct-greenxd: "#005900"
        bct-bluexl: "#99c8fb"
        bct-bluel: "#68a9f1"
        bct-blue: "#2889ea"
        bct-blued: "#126eca"
        bct-bluexd: "#0c59a7"
        bct-off-whitel: "#fbfbff"
        bct-off-white: "#f3f3f7"
        bct-off-whited: "#e4e7f7"
    border-left-color:
      class: bcl-
      rule: theme-colors
      values: *a1
      mappings:
        bcl-black: "#000000"
        bcl-white: "#ffffff"
        bcl-transparent: transparent
        bcl-hotpinkxl: "#f188bc"
        bcl-hotpinkl: "#f36fb0"
        bcl-hotpink: "#ea2889"
        bcl-hotpinkd: "#cc0f6d"
        bcl-hotpinkxd: "#900148"
        bcl-greyxl: "#f0f2ff"
        bcl-greyl: "#dedbe2"
        bcl-grey: "#b2b6ca"
        bcl-greyd: "#5a5573"
        bcl-greyxd: "#4d4c51"
        bcl-yellowxl: "#f8f8b7"
        bcl-yellowl: "#f1f16f"
        bcl-yellow: "#eaea28"
        bcl-yellowd: "#d6d615"
        bcl-yellowxd: "#b2b211"
        bcl-redxl: "#f3a6a6"
        bcl-redl: "#ec7272"
        bcl-red: "#e53e3e"
        bcl-redd: "#cd1c1c"
        bcl-redxd: "#991515"
        bcl-purplexl: "#c493f4"
        bcl-purplel: "#a65eef"
        bcl-purple: "#8928ea"
        bcl-purpled: "#6c13c4"
        bcl-purplexd: "#5810a0"
        bcl-orangexl: "#f4c493"
        bcl-orangel: "#efa65e"
        bcl-orange: "#ea8928"
        bcl-oranged: "#d67515"
        bcl-orangexd: "#b26211"
        bcl-limexl: "#c4f493"
        bcl-limel: "#a6ef5e"
        bcl-lime: "#89ea28"
        bcl-limed: "#6cc413"
        bcl-limexd: "#4e8e0e"
        bcl-lilacxl: "#f3effd"
        bcl-lilacl: "#e6dff7"
        bcl-lilac: "#c4b4ea"
        bcl-lilacd: "#b3a0de"
        bcl-lilacxd: "#988bb7"
        bcl-greenxl: "#00ce00"
        bcl-greenl: "#00a700"
        bcl-green: "#008000"
        bcl-greend: "#006c00"
        bcl-greenxd: "#005900"
        bcl-bluexl: "#99c8fb"
        bcl-bluel: "#68a9f1"
        bcl-blue: "#2889ea"
        bcl-blued: "#126eca"
        bcl-bluexd: "#0c59a7"
        bcl-off-whitel: "#fbfbff"
        bcl-off-white: "#f3f3f7"
        bcl-off-whited: "#e4e7f7"
    border-right-color:
      class: bcr-
      rule: theme-colors
      values: *a1
      mappings:
        bcr-black: "#000000"
        bcr-white: "#ffffff"
        bcr-transparent: transparent
        bcr-hotpinkxl: "#f188bc"
        bcr-hotpinkl: "#f36fb0"
        bcr-hotpink: "#ea2889"
        bcr-hotpinkd: "#cc0f6d"
        bcr-hotpinkxd: "#900148"
        bcr-greyxl: "#f0f2ff"
        bcr-greyl: "#dedbe2"
        bcr-grey: "#b2b6ca"
        bcr-greyd: "#5a5573"
        bcr-greyxd: "#4d4c51"
        bcr-yellowxl: "#f8f8b7"
        bcr-yellowl: "#f1f16f"
        bcr-yellow: "#eaea28"
        bcr-yellowd: "#d6d615"
        bcr-yellowxd: "#b2b211"
        bcr-redxl: "#f3a6a6"
        bcr-redl: "#ec7272"
        bcr-red: "#e53e3e"
        bcr-redd: "#cd1c1c"
        bcr-redxd: "#991515"
        bcr-purplexl: "#c493f4"
        bcr-purplel: "#a65eef"
        bcr-purple: "#8928ea"
        bcr-purpled: "#6c13c4"
        bcr-purplexd: "#5810a0"
        bcr-orangexl: "#f4c493"
        bcr-orangel: "#efa65e"
        bcr-orange: "#ea8928"
        bcr-oranged: "#d67515"
        bcr-orangexd: "#b26211"
        bcr-limexl: "#c4f493"
        bcr-limel: "#a6ef5e"
        bcr-lime: "#89ea28"
        bcr-limed: "#6cc413"
        bcr-limexd: "#4e8e0e"
        bcr-lilacxl: "#f3effd"
        bcr-lilacl: "#e6dff7"
        bcr-lilac: "#c4b4ea"
        bcr-lilacd: "#b3a0de"
        bcr-lilacxd: "#988bb7"
        bcr-greenxl: "#00ce00"
        bcr-greenl: "#00a700"
        bcr-green: "#008000"
        bcr-greend: "#006c00"
        bcr-greenxd: "#005900"
        bcr-bluexl: "#99c8fb"
        bcr-bluel: "#68a9f1"
        bcr-blue: "#2889ea"
        bcr-blued: "#126eca"
        bcr-bluexd: "#0c59a7"
        bcr-off-whitel: "#fbfbff"
        bcr-off-white: "#f3f3f7"
        bcr-off-whited: "#e4e7f7"
    border-color:
      class: bca-
      rule: theme-colors
      values: *a1
      mappings:
        bca-black: "#000000"
        bca-white: "#ffffff"
        bca-transparent: transparent
        bca-hotpinkxl: "#f188bc"
        bca-hotpinkl: "#f36fb0"
        bca-hotpink: "#ea2889"
        bca-hotpinkd: "#cc0f6d"
        bca-hotpinkxd: "#900148"
        bca-greyxl: "#f0f2ff"
        bca-greyl: "#dedbe2"
        bca-grey: "#b2b6ca"
        bca-greyd: "#5a5573"
        bca-greyxd: "#4d4c51"
        bca-yellowxl: "#f8f8b7"
        bca-yellowl: "#f1f16f"
        bca-yellow: "#eaea28"
        bca-yellowd: "#d6d615"
        bca-yellowxd: "#b2b211"
        bca-redxl: "#f3a6a6"
        bca-redl: "#ec7272"
        bca-red: "#e53e3e"
        bca-redd: "#cd1c1c"
        bca-redxd: "#991515"
        bca-purplexl: "#c493f4"
        bca-purplel: "#a65eef"
        bca-purple: "#8928ea"
        bca-purpled: "#6c13c4"
        bca-purplexd: "#5810a0"
        bca-orangexl: "#f4c493"
        bca-orangel: "#efa65e"
        bca-orange: "#ea8928"
        bca-oranged: "#d67515"
        bca-orangexd: "#b26211"
        bca-limexl: "#c4f493"
        bca-limel: "#a6ef5e"
        bca-lime: "#89ea28"
        bca-limed: "#6cc413"
        bca-limexd: "#4e8e0e"
        bca-lilacxl: "#f3effd"
        bca-lilacl: "#e6dff7"
        bca-lilac: "#c4b4ea"
        bca-lilacd: "#b3a0de"
        bca-lilacxd: "#988bb7"
        bca-greenxl: "#00ce00"
        bca-greenl: "#00a700"
        bca-green: "#008000"
        bca-greend: "#006c00"
        bca-greenxd: "#005900"
        bca-bluexl: "#99c8fb"
        bca-bluel: "#68a9f1"
        bca-blue: "#2889ea"
        bca-blued: "#126eca"
        bca-bluexd: "#0c59a7"
        bca-off-whitel: "#fbfbff"
        bca-off-white: "#f3f3f7"
        bca-off-whited: "#e4e7f7"
    border-style:
      class: bsa-
      rule: border-style
      values: *a4
      mappings:
        bsa-solid: solid
        bsa-dotted: dotted
        bsa-dashed: dashed
    border-bottom-style:
      class: bsb-
      rule: border-style
      values: *a4
      mappings:
        bsb-solid: solid
        bsb-dotted: dotted
        bsb-dashed: dashed
    border-top-style:
      class: bst-
      rule: border-style
      values: *a4
      mappings:
        bst-solid: solid
        bst-dotted: dotted
        bst-dashed: dashed
    border-right-style:
      class: bsr-
      rule: border-style
      values: *a4
      mappings:
        bsr-solid: solid
        bsr-dotted: dotted
        bsr-dashed: dashed
    border-left-style:
      class: bsl-
      rule: border-style
      values: *a4
      mappings:
        bsl-solid: solid
        bsl-dotted: dotted
        bsl-dashed: dashed
    border-radius:
      class: bra
      values:
        "1": .5rem
        "2": 1rem
        "3": 2rem
        "4": 3rem
        "5": 4rem
        "6": 5rem
        "-50": 50%
      mappings:
        bra1: .5rem
        bra2: 1rem
        bra3: 2rem
        bra4: 3rem
        bra5: 4rem
        bra6: 5rem
        bra-50: 50%
    clear:
      class: c
      values:
        b: both
      mappings:
        cb: both
    color:
      class: null
      rule: theme-colors
      values: *a1
      mappings:
        black: "#000000"
        white: "#ffffff"
        transparent: transparent
        hotpinkxl: "#f188bc"
        hotpinkl: "#f36fb0"
        hotpink: "#ea2889"
        hotpinkd: "#cc0f6d"
        hotpinkxd: "#900148"
        greyxl: "#f0f2ff"
        greyl: "#dedbe2"
        grey: "#b2b6ca"
        greyd: "#5a5573"
        greyxd: "#4d4c51"
        yellowxl: "#f8f8b7"
        yellowl: "#f1f16f"
        yellow: "#eaea28"
        yellowd: "#d6d615"
        yellowxd: "#b2b211"
        redxl: "#f3a6a6"
        redl: "#ec7272"
        red: "#e53e3e"
        redd: "#cd1c1c"
        redxd: "#991515"
        purplexl: "#c493f4"
        purplel: "#a65eef"
        purple: "#8928ea"
        purpled: "#6c13c4"
        purplexd: "#5810a0"
        orangexl: "#f4c493"
        orangel: "#efa65e"
        orange: "#ea8928"
        oranged: "#d67515"
        orangexd: "#b26211"
        limexl: "#c4f493"
        limel: "#a6ef5e"
        lime: "#89ea28"
        limed: "#6cc413"
        limexd: "#4e8e0e"
        lilacxl: "#f3effd"
        lilacl: "#e6dff7"
        lilac: "#c4b4ea"
        lilacd: "#b3a0de"
        lilacxd: "#988bb7"
        greenxl: "#00ce00"
        greenl: "#00a700"
        green: "#008000"
        greend: "#006c00"
        greenxd: "#005900"
        bluexl: "#99c8fb"
        bluel: "#68a9f1"
        blue: "#2889ea"
        blued: "#126eca"
        bluexd: "#0c59a7"
        off-whitel: "#fbfbff"
        off-white: "#f3f3f7"
        off-whited: "#e4e7f7"
    cursor:
      class: null
      values:
        pointer: pointer
        help: help
        wait: wait
        crosshair: crosshair
        not-allowed: not-allowed
        zoom-in: zoom-in
        grab: grab
      mappings:
        pointer: pointer
        help: help
        wait: wait
        crosshair: crosshair
        not-allowed: not-allowed
        zoom-in: zoom-in
        grab: grab
    display:
      class: d-
      values:
        bl: block
        in: inline
        inbl: inline-block
        ta: table
        fl: flex
        infl: inline-flex
        no: none
      mappings:
        d-bl: block
        d-in: inline
        d-inbl: inline-block
        d-ta: table
        d-fl: flex
        d-infl: inline-flex
        d-no: none
    float:
      class: fl
      values:
        r: right
        l: left
        n: none
      mappings:
        flr: right
        fll: left
        fln: none
    font-family:
      class: ff-
      values:
        raleway: "#{Raleway, sans-serif}"
        exo: "#{Exo, sans-serif}"
        josefin: "#{'Josefin Sans', sans-serif}"
        kanit: "#{'Kanit', sans-serif}"
        martel: "#{'Martel', serif}"
        prompt: "#{'Prompt', sans-serif}"
        roboto-mono: "#{'Roboto Monp', monospace}"
      mappings:
        ff-raleway: "#{Raleway, sans-serif}"
        ff-exo: "#{Exo, sans-serif}"
        ff-josefin: "#{'Josefin Sans', sans-serif}"
        ff-kanit: "#{'Kanit', sans-serif}"
        ff-martel: "#{'Martel', serif}"
        ff-prompt: "#{'Prompt', sans-serif}"
        ff-roboto-mono: "#{'Roboto Monp', monospace}"
    font-size:
      class: fs
      values:
        "1": .90rem
        "2": 1.2rem
        "3": 1.60rem
        "4": 2.133rem
        "5": 2.843rem
        "6": 3.790rem
        "7": 5.522rem
        "8": 6.734rem
        "9": 8.976rem
        "10": 11.966rem
      mappings:
        fs1: .90rem
        fs2: 1.2rem
        fs3: 1.60rem
        fs4: 2.133rem
        fs5: 2.843rem
        fs6: 3.790rem
        fs7: 5.522rem
        fs8: 6.734rem
        fs9: 8.976rem
        fs10: 11.966rem
    font-style:
      class: fst-
      values:
        no: normal
        it: italic
      mappings:
        fst-no: normal
        fst-it: italic
    font-weight:
      class: fw
      values:
        "1": 100
        "2": 200
        "3": 300
        "4": 400
        "5": 500
        "6": 600
        "7": 700
        "8": 800
        "9": 900
        l: 300
        n: 400
        b: 700
      mappings:
        fw1: 100
        fw2: 200
        fw3: 300
        fw4: 400
        fw5: 500
        fw6: 600
        fw7: 700
        fw8: 800
        fw9: 900
        fwl: 300
        fwn: 400
        fwb: 700
    height:
      class: h
      rule:
        - scaled
        - percentaged
        - discrete-percentage
        - discrete
        - special-sizes
        - vh
      values:
        "0": 0
        "1": $baseline * 1
        "2": $baseline * 2
        "3": $baseline * 3
        "4": $baseline * 4
        "5": $baseline * 5
        "6": $baseline * 6
        "7": $baseline * 7
        "8": $baseline * 8
        "9": $baseline * 9
        "10": $baseline * 10
        "11": $baseline * 11
        "12": $baseline * 12
        "-5": 5%
        "-10": 10%
        "-15": 15%
        "-20": 20%
        "-25": 25%
        "-30": 30%
        "-35": 35%
        "-40": 40%
        "-45": 45%
        "-50": 50%
        "-55": 55%
        "-60": 60%
        "-65": 65%
        "-70": 70%
        "-75": 75%
        "-80": 80%
        "-85": 85%
        "-90": 90%
        "-95": 95%
        "-100": 100%
        -1-12: 100% / 12
        -2-12: 100% / 12 * 2
        -3-12: 100% / 12 * 3
        -4-12: 100% / 12 * 4
        -5-12: 100% / 12 * 5
        -6-12: 100% / 12 * 6
        -7-12: 100% / 12 * 7
        -8-12: 100% / 12 * 8
        -9-12: 100% / 12 * 9
        -10-12: 100% / 12 * 10
        -11-12: 100% / 12 * 11
        -12-12: 100% / 12 * 12
        -wire: 1px
        -xthin: 2px
        -thin: 3px
        -xxxsmall: 5px
        -xxsmall: 0.8rem
        -xsmall: 1rem
        -small: 1.6rem
        -icon: 2.4rem
        -medium: 7rem
        -big: 16rem
        -xbig: 22rem
        -xxbig: 32rem
        -xxxbig: 44rem
        -super: 58rem
        -xsuper: 72rem
        -xxsuper: 90rem
        -xxxsuper: 116rem
        n: none
        -au: auto
        -10vh: 10vh
        -20vh: 20vh
        -30vh: 30vh
        -40vh: 40vh
        -50vh: 50vh
        -60vh: 60vh
        -70vh: 70vh
        -80vh: 80vh
        -90vh: 90vh
        -100vh: 100vh
      mappings:
        h0: 0
        h1: $baseline * 1
        h2: $baseline * 2
        h3: $baseline * 3
        h4: $baseline * 4
        h5: $baseline * 5
        h6: $baseline * 6
        h7: $baseline * 7
        h8: $baseline * 8
        h9: $baseline * 9
        h10: $baseline * 10
        h11: $baseline * 11
        h12: $baseline * 12
        h-5: 5%
        h-10: 10%
        h-15: 15%
        h-20: 20%
        h-25: 25%
        h-30: 30%
        h-35: 35%
        h-40: 40%
        h-45: 45%
        h-50: 50%
        h-55: 55%
        h-60: 60%
        h-65: 65%
        h-70: 70%
        h-75: 75%
        h-80: 80%
        h-85: 85%
        h-90: 90%
        h-95: 95%
        h-100: 100%
        h-1-12: 100% / 12
        h-2-12: 100% / 12 * 2
        h-3-12: 100% / 12 * 3
        h-4-12: 100% / 12 * 4
        h-5-12: 100% / 12 * 5
        h-6-12: 100% / 12 * 6
        h-7-12: 100% / 12 * 7
        h-8-12: 100% / 12 * 8
        h-9-12: 100% / 12 * 9
        h-10-12: 100% / 12 * 10
        h-11-12: 100% / 12 * 11
        h-12-12: 100% / 12 * 12
        h-wire: 1px
        h-xthin: 2px
        h-thin: 3px
        h-xxxsmall: 5px
        h-xxsmall: 0.8rem
        h-xsmall: 1rem
        h-small: 1.6rem
        h-icon: 2.4rem
        h-medium: 7rem
        h-big: 16rem
        h-xbig: 22rem
        h-xxbig: 32rem
        h-xxxbig: 44rem
        h-super: 58rem
        h-xsuper: 72rem
        h-xxsuper: 90rem
        h-xxxsuper: 116rem
        hn: none
        h-au: auto
        h-10vh: 10vh
        h-20vh: 20vh
        h-30vh: 30vh
        h-40vh: 40vh
        h-50vh: 50vh
        h-60vh: 60vh
        h-70vh: 70vh
        h-80vh: 80vh
        h-90vh: 90vh
        h-100vh: 100vh
    max-height:
      class: maxh
      rule:
        - percentaged
        - discrete
        - special-sizes
      values:
        "-5": 5%
        "-10": 10%
        "-15": 15%
        "-20": 20%
        "-25": 25%
        "-30": 30%
        "-35": 35%
        "-40": 40%
        "-45": 45%
        "-50": 50%
        "-55": 55%
        "-60": 60%
        "-65": 65%
        "-70": 70%
        "-75": 75%
        "-80": 80%
        "-85": 85%
        "-90": 90%
        "-95": 95%
        "-100": 100%
        -wire: 1px
        -xthin: 2px
        -thin: 3px
        -xxxsmall: 5px
        -xxsmall: 0.8rem
        -xsmall: 1rem
        -small: 1.6rem
        -icon: 2.4rem
        -medium: 7rem
        -big: 16rem
        -xbig: 22rem
        -xxbig: 32rem
        -xxxbig: 44rem
        -super: 58rem
        -xsuper: 72rem
        -xxsuper: 90rem
        -xxxsuper: 116rem
        n: none
        -au: auto
      mappings:
        maxh-5: 5%
        maxh-10: 10%
        maxh-15: 15%
        maxh-20: 20%
        maxh-25: 25%
        maxh-30: 30%
        maxh-35: 35%
        maxh-40: 40%
        maxh-45: 45%
        maxh-50: 50%
        maxh-55: 55%
        maxh-60: 60%
        maxh-65: 65%
        maxh-70: 70%
        maxh-75: 75%
        maxh-80: 80%
        maxh-85: 85%
        maxh-90: 90%
        maxh-95: 95%
        maxh-100: 100%
        maxh-wire: 1px
        maxh-xthin: 2px
        maxh-thin: 3px
        maxh-xxxsmall: 5px
        maxh-xxsmall: 0.8rem
        maxh-xsmall: 1rem
        maxh-small: 1.6rem
        maxh-icon: 2.4rem
        maxh-medium: 7rem
        maxh-big: 16rem
        maxh-xbig: 22rem
        maxh-xxbig: 32rem
        maxh-xxxbig: 44rem
        maxh-super: 58rem
        maxh-xsuper: 72rem
        maxh-xxsuper: 90rem
        maxh-xxxsuper: 116rem
        maxhn: none
        maxh-au: auto
    min-height:
      class: minh
      rule:
        - percentaged
        - discrete
        - special-sizes
      values:
        "-5": 5%
        "-10": 10%
        "-15": 15%
        "-20": 20%
        "-25": 25%
        "-30": 30%
        "-35": 35%
        "-40": 40%
        "-45": 45%
        "-50": 50%
        "-55": 55%
        "-60": 60%
        "-65": 65%
        "-70": 70%
        "-75": 75%
        "-80": 80%
        "-85": 85%
        "-90": 90%
        "-95": 95%
        "-100": 100%
        -wire: 1px
        -xthin: 2px
        -thin: 3px
        -xxxsmall: 5px
        -xxsmall: 0.8rem
        -xsmall: 1rem
        -small: 1.6rem
        -icon: 2.4rem
        -medium: 7rem
        -big: 16rem
        -xbig: 22rem
        -xxbig: 32rem
        -xxxbig: 44rem
        -super: 58rem
        -xsuper: 72rem
        -xxsuper: 90rem
        -xxxsuper: 116rem
        n: none
        -au: auto
      mappings:
        minh-5: 5%
        minh-10: 10%
        minh-15: 15%
        minh-20: 20%
        minh-25: 25%
        minh-30: 30%
        minh-35: 35%
        minh-40: 40%
        minh-45: 45%
        minh-50: 50%
        minh-55: 55%
        minh-60: 60%
        minh-65: 65%
        minh-70: 70%
        minh-75: 75%
        minh-80: 80%
        minh-85: 85%
        minh-90: 90%
        minh-95: 95%
        minh-100: 100%
        minh-wire: 1px
        minh-xthin: 2px
        minh-thin: 3px
        minh-xxxsmall: 5px
        minh-xxsmall: 0.8rem
        minh-xsmall: 1rem
        minh-small: 1.6rem
        minh-icon: 2.4rem
        minh-medium: 7rem
        minh-big: 16rem
        minh-xbig: 22rem
        minh-xxbig: 32rem
        minh-xxxbig: 44rem
        minh-super: 58rem
        minh-xsuper: 72rem
        minh-xxsuper: 90rem
        minh-xxxsuper: 116rem
        minhn: none
        minh-au: auto
    width:
      class: w
      rule:
        - scaled
        - percentaged
        - discrete-percentage
        - discrete
        - special-sizes
        - vw
      values:
        "0": 0
        "1": $baseline * 1
        "2": $baseline * 2
        "3": $baseline * 3
        "4": $baseline * 4
        "5": $baseline * 5
        "6": $baseline * 6
        "7": $baseline * 7
        "8": $baseline * 8
        "9": $baseline * 9
        "10": $baseline * 10
        "11": $baseline * 11
        "12": $baseline * 12
        "-5": 5%
        "-10": 10%
        "-15": 15%
        "-20": 20%
        "-25": 25%
        "-30": 30%
        "-35": 35%
        "-40": 40%
        "-45": 45%
        "-50": 50%
        "-55": 55%
        "-60": 60%
        "-65": 65%
        "-70": 70%
        "-75": 75%
        "-80": 80%
        "-85": 85%
        "-90": 90%
        "-95": 95%
        "-100": 100%
        -1-12: 100% / 12
        -2-12: 100% / 12 * 2
        -3-12: 100% / 12 * 3
        -4-12: 100% / 12 * 4
        -5-12: 100% / 12 * 5
        -6-12: 100% / 12 * 6
        -7-12: 100% / 12 * 7
        -8-12: 100% / 12 * 8
        -9-12: 100% / 12 * 9
        -10-12: 100% / 12 * 10
        -11-12: 100% / 12 * 11
        -12-12: 100% / 12 * 12
        -wire: 1px
        -xthin: 2px
        -thin: 3px
        -xxxsmall: 5px
        -xxsmall: 0.8rem
        -xsmall: 1rem
        -small: 1.6rem
        -icon: 2.4rem
        -medium: 7rem
        -big: 16rem
        -xbig: 22rem
        -xxbig: 32rem
        -xxxbig: 44rem
        -super: 58rem
        -xsuper: 72rem
        -xxsuper: 90rem
        -xxxsuper: 116rem
        n: none
        -au: auto
        -10vw: 10vw
        -20vw: 20vw
        -30vw: 30vw
        -40vw: 40vw
        -50vw: 50vw
        -60vw: 60vw
        -70vw: 70vw
        -80vw: 80vw
        -90vw: 90vw
        -100vw: 100vw
      mappings:
        w0: 0
        w1: $baseline * 1
        w2: $baseline * 2
        w3: $baseline * 3
        w4: $baseline * 4
        w5: $baseline * 5
        w6: $baseline * 6
        w7: $baseline * 7
        w8: $baseline * 8
        w9: $baseline * 9
        w10: $baseline * 10
        w11: $baseline * 11
        w12: $baseline * 12
        w-5: 5%
        w-10: 10%
        w-15: 15%
        w-20: 20%
        w-25: 25%
        w-30: 30%
        w-35: 35%
        w-40: 40%
        w-45: 45%
        w-50: 50%
        w-55: 55%
        w-60: 60%
        w-65: 65%
        w-70: 70%
        w-75: 75%
        w-80: 80%
        w-85: 85%
        w-90: 90%
        w-95: 95%
        w-100: 100%
        w-1-12: 100% / 12
        w-2-12: 100% / 12 * 2
        w-3-12: 100% / 12 * 3
        w-4-12: 100% / 12 * 4
        w-5-12: 100% / 12 * 5
        w-6-12: 100% / 12 * 6
        w-7-12: 100% / 12 * 7
        w-8-12: 100% / 12 * 8
        w-9-12: 100% / 12 * 9
        w-10-12: 100% / 12 * 10
        w-11-12: 100% / 12 * 11
        w-12-12: 100% / 12 * 12
        w-wire: 1px
        w-xthin: 2px
        w-thin: 3px
        w-xxxsmall: 5px
        w-xxsmall: 0.8rem
        w-xsmall: 1rem
        w-small: 1.6rem
        w-icon: 2.4rem
        w-medium: 7rem
        w-big: 16rem
        w-xbig: 22rem
        w-xxbig: 32rem
        w-xxxbig: 44rem
        w-super: 58rem
        w-xsuper: 72rem
        w-xxsuper: 90rem
        w-xxxsuper: 116rem
        wn: none
        w-au: auto
        w-10vw: 10vw
        w-20vw: 20vw
        w-30vw: 30vw
        w-40vw: 40vw
        w-50vw: 50vw
        w-60vw: 60vw
        w-70vw: 70vw
        w-80vw: 80vw
        w-90vw: 90vw
        w-100vw: 100vw
    max-width:
      class: maxw
      rule:
        - percentaged
        - discrete
        - special-sizes
      values:
        "-5": 5%
        "-10": 10%
        "-15": 15%
        "-20": 20%
        "-25": 25%
        "-30": 30%
        "-35": 35%
        "-40": 40%
        "-45": 45%
        "-50": 50%
        "-55": 55%
        "-60": 60%
        "-65": 65%
        "-70": 70%
        "-75": 75%
        "-80": 80%
        "-85": 85%
        "-90": 90%
        "-95": 95%
        "-100": 100%
        -wire: 1px
        -xthin: 2px
        -thin: 3px
        -xxxsmall: 5px
        -xxsmall: 0.8rem
        -xsmall: 1rem
        -small: 1.6rem
        -icon: 2.4rem
        -medium: 7rem
        -big: 16rem
        -xbig: 22rem
        -xxbig: 32rem
        -xxxbig: 44rem
        -super: 58rem
        -xsuper: 72rem
        -xxsuper: 90rem
        -xxxsuper: 116rem
        n: none
        -au: auto
      mappings:
        maxw-5: 5%
        maxw-10: 10%
        maxw-15: 15%
        maxw-20: 20%
        maxw-25: 25%
        maxw-30: 30%
        maxw-35: 35%
        maxw-40: 40%
        maxw-45: 45%
        maxw-50: 50%
        maxw-55: 55%
        maxw-60: 60%
        maxw-65: 65%
        maxw-70: 70%
        maxw-75: 75%
        maxw-80: 80%
        maxw-85: 85%
        maxw-90: 90%
        maxw-95: 95%
        maxw-100: 100%
        maxw-wire: 1px
        maxw-xthin: 2px
        maxw-thin: 3px
        maxw-xxxsmall: 5px
        maxw-xxsmall: 0.8rem
        maxw-xsmall: 1rem
        maxw-small: 1.6rem
        maxw-icon: 2.4rem
        maxw-medium: 7rem
        maxw-big: 16rem
        maxw-xbig: 22rem
        maxw-xxbig: 32rem
        maxw-xxxbig: 44rem
        maxw-super: 58rem
        maxw-xsuper: 72rem
        maxw-xxsuper: 90rem
        maxw-xxxsuper: 116rem
        maxwn: none
        maxw-au: auto
    min-width:
      class: minw
      rule:
        - scaled
        - percentaged
        - discrete
        - special-sizes
      values:
        "0": 0
        "1": $baseline * 1
        "2": $baseline * 2
        "3": $baseline * 3
        "4": $baseline * 4
        "5": $baseline * 5
        "6": $baseline * 6
        "7": $baseline * 7
        "8": $baseline * 8
        "9": $baseline * 9
        "10": $baseline * 10
        "11": $baseline * 11
        "12": $baseline * 12
        "-5": 5%
        "-10": 10%
        "-15": 15%
        "-20": 20%
        "-25": 25%
        "-30": 30%
        "-35": 35%
        "-40": 40%
        "-45": 45%
        "-50": 50%
        "-55": 55%
        "-60": 60%
        "-65": 65%
        "-70": 70%
        "-75": 75%
        "-80": 80%
        "-85": 85%
        "-90": 90%
        "-95": 95%
        "-100": 100%
        -wire: 1px
        -xthin: 2px
        -thin: 3px
        -xxxsmall: 5px
        -xxsmall: 0.8rem
        -xsmall: 1rem
        -small: 1.6rem
        -icon: 2.4rem
        -medium: 7rem
        -big: 16rem
        -xbig: 22rem
        -xxbig: 32rem
        -xxxbig: 44rem
        -super: 58rem
        -xsuper: 72rem
        -xxsuper: 90rem
        -xxxsuper: 116rem
        n: none
        -au: auto
      mappings:
        minw0: 0
        minw1: $baseline * 1
        minw2: $baseline * 2
        minw3: $baseline * 3
        minw4: $baseline * 4
        minw5: $baseline * 5
        minw6: $baseline * 6
        minw7: $baseline * 7
        minw8: $baseline * 8
        minw9: $baseline * 9
        minw10: $baseline * 10
        minw11: $baseline * 11
        minw12: $baseline * 12
        minw-5: 5%
        minw-10: 10%
        minw-15: 15%
        minw-20: 20%
        minw-25: 25%
        minw-30: 30%
        minw-35: 35%
        minw-40: 40%
        minw-45: 45%
        minw-50: 50%
        minw-55: 55%
        minw-60: 60%
        minw-65: 65%
        minw-70: 70%
        minw-75: 75%
        minw-80: 80%
        minw-85: 85%
        minw-90: 90%
        minw-95: 95%
        minw-100: 100%
        minw-wire: 1px
        minw-xthin: 2px
        minw-thin: 3px
        minw-xxxsmall: 5px
        minw-xxsmall: 0.8rem
        minw-xsmall: 1rem
        minw-small: 1.6rem
        minw-icon: 2.4rem
        minw-medium: 7rem
        minw-big: 16rem
        minw-xbig: 22rem
        minw-xxbig: 32rem
        minw-xxxbig: 44rem
        minw-super: 58rem
        minw-xsuper: 72rem
        minw-xxsuper: 90rem
        minw-xxxsuper: 116rem
        minwn: none
        minw-au: auto
    bottom:
      class: b
      rule:
        - scaled
        - negative-scaled
        - percentaged
        - discrete
      values:
        "0": 0
        "1": $baseline * 1
        "2": $baseline * 2
        "3": $baseline * 3
        "4": $baseline * 4
        "5": $baseline * 5
        "6": $baseline * 6
        "7": $baseline * 7
        "8": $baseline * 8
        "9": $baseline * 9
        "10": $baseline * 10
        "11": $baseline * 11
        "12": $baseline * 12
        1x: -1rem
        2x: -2rem
        3x: -3rem
        4x: -4rem
        5x: -5rem
        6x: -6rem
        7x: -7rem
        8x: -8rem
        9x: -9rem
        10x: -10rem
        "-5": 5%
        "-10": 10%
        "-15": 15%
        "-20": 20%
        "-25": 25%
        "-30": 30%
        "-35": 35%
        "-40": 40%
        "-45": 45%
        "-50": 50%
        "-55": 55%
        "-60": 60%
        "-65": 65%
        "-70": 70%
        "-75": 75%
        "-80": 80%
        "-85": 85%
        "-90": 90%
        "-95": 95%
        "-100": 100%
        -wire: 1px
        -xthin: 2px
        -thin: 3px
        -xxxsmall: 5px
        -xxsmall: 0.8rem
        -xsmall: 1rem
        -small: 1.6rem
        -icon: 2.4rem
        -medium: 7rem
        -big: 16rem
        -xbig: 22rem
        -xxbig: 32rem
        -xxxbig: 44rem
        -super: 58rem
        -xsuper: 72rem
        -xxsuper: 90rem
        -xxxsuper: 116rem
      mappings:
        b0: 0
        b1: $baseline * 1
        b2: $baseline * 2
        b3: $baseline * 3
        b4: $baseline * 4
        b5: $baseline * 5
        b6: $baseline * 6
        b7: $baseline * 7
        b8: $baseline * 8
        b9: $baseline * 9
        b10: $baseline * 10
        b11: $baseline * 11
        b12: $baseline * 12
        b1x: -1rem
        b2x: -2rem
        b3x: -3rem
        b4x: -4rem
        b5x: -5rem
        b6x: -6rem
        b7x: -7rem
        b8x: -8rem
        b9x: -9rem
        b10x: -10rem
        b-5: 5%
        b-10: 10%
        b-15: 15%
        b-20: 20%
        b-25: 25%
        b-30: 30%
        b-35: 35%
        b-40: 40%
        b-45: 45%
        b-50: 50%
        b-55: 55%
        b-60: 60%
        b-65: 65%
        b-70: 70%
        b-75: 75%
        b-80: 80%
        b-85: 85%
        b-90: 90%
        b-95: 95%
        b-100: 100%
        b-wire: 1px
        b-xthin: 2px
        b-thin: 3px
        b-xxxsmall: 5px
        b-xxsmall: 0.8rem
        b-xsmall: 1rem
        b-small: 1.6rem
        b-icon: 2.4rem
        b-medium: 7rem
        b-big: 16rem
        b-xbig: 22rem
        b-xxbig: 32rem
        b-xxxbig: 44rem
        b-super: 58rem
        b-xsuper: 72rem
        b-xxsuper: 90rem
        b-xxxsuper: 116rem
    left:
      class: l
      rule:
        - scaled
        - negative-scaled
        - percentaged
        - discrete
      values:
        "0": 0
        "1": $baseline * 1
        "2": $baseline * 2
        "3": $baseline * 3
        "4": $baseline * 4
        "5": $baseline * 5
        "6": $baseline * 6
        "7": $baseline * 7
        "8": $baseline * 8
        "9": $baseline * 9
        "10": $baseline * 10
        "11": $baseline * 11
        "12": $baseline * 12
        1x: -1rem
        2x: -2rem
        3x: -3rem
        4x: -4rem
        5x: -5rem
        6x: -6rem
        7x: -7rem
        8x: -8rem
        9x: -9rem
        10x: -10rem
        "-5": 5%
        "-10": 10%
        "-15": 15%
        "-20": 20%
        "-25": 25%
        "-30": 30%
        "-35": 35%
        "-40": 40%
        "-45": 45%
        "-50": 50%
        "-55": 55%
        "-60": 60%
        "-65": 65%
        "-70": 70%
        "-75": 75%
        "-80": 80%
        "-85": 85%
        "-90": 90%
        "-95": 95%
        "-100": 100%
        -wire: 1px
        -xthin: 2px
        -thin: 3px
        -xxxsmall: 5px
        -xxsmall: 0.8rem
        -xsmall: 1rem
        -small: 1.6rem
        -icon: 2.4rem
        -medium: 7rem
        -big: 16rem
        -xbig: 22rem
        -xxbig: 32rem
        -xxxbig: 44rem
        -super: 58rem
        -xsuper: 72rem
        -xxsuper: 90rem
        -xxxsuper: 116rem
      mappings:
        l0: 0
        l1: $baseline * 1
        l2: $baseline * 2
        l3: $baseline * 3
        l4: $baseline * 4
        l5: $baseline * 5
        l6: $baseline * 6
        l7: $baseline * 7
        l8: $baseline * 8
        l9: $baseline * 9
        l10: $baseline * 10
        l11: $baseline * 11
        l12: $baseline * 12
        l1x: -1rem
        l2x: -2rem
        l3x: -3rem
        l4x: -4rem
        l5x: -5rem
        l6x: -6rem
        l7x: -7rem
        l8x: -8rem
        l9x: -9rem
        l10x: -10rem
        l-5: 5%
        l-10: 10%
        l-15: 15%
        l-20: 20%
        l-25: 25%
        l-30: 30%
        l-35: 35%
        l-40: 40%
        l-45: 45%
        l-50: 50%
        l-55: 55%
        l-60: 60%
        l-65: 65%
        l-70: 70%
        l-75: 75%
        l-80: 80%
        l-85: 85%
        l-90: 90%
        l-95: 95%
        l-100: 100%
        l-wire: 1px
        l-xthin: 2px
        l-thin: 3px
        l-xxxsmall: 5px
        l-xxsmall: 0.8rem
        l-xsmall: 1rem
        l-small: 1.6rem
        l-icon: 2.4rem
        l-medium: 7rem
        l-big: 16rem
        l-xbig: 22rem
        l-xxbig: 32rem
        l-xxxbig: 44rem
        l-super: 58rem
        l-xsuper: 72rem
        l-xxsuper: 90rem
        l-xxxsuper: 116rem
    top:
      class: t
      rule:
        - scaled
        - negative-scaled
        - percentaged
        - discrete
      values:
        "0": 0
        "1": $baseline * 1
        "2": $baseline * 2
        "3": $baseline * 3
        "4": $baseline * 4
        "5": $baseline * 5
        "6": $baseline * 6
        "7": $baseline * 7
        "8": $baseline * 8
        "9": $baseline * 9
        "10": $baseline * 10
        "11": $baseline * 11
        "12": $baseline * 12
        1x: -1rem
        2x: -2rem
        3x: -3rem
        4x: -4rem
        5x: -5rem
        6x: -6rem
        7x: -7rem
        8x: -8rem
        9x: -9rem
        10x: -10rem
        "-5": 5%
        "-10": 10%
        "-15": 15%
        "-20": 20%
        "-25": 25%
        "-30": 30%
        "-35": 35%
        "-40": 40%
        "-45": 45%
        "-50": 50%
        "-55": 55%
        "-60": 60%
        "-65": 65%
        "-70": 70%
        "-75": 75%
        "-80": 80%
        "-85": 85%
        "-90": 90%
        "-95": 95%
        "-100": 100%
        -wire: 1px
        -xthin: 2px
        -thin: 3px
        -xxxsmall: 5px
        -xxsmall: 0.8rem
        -xsmall: 1rem
        -small: 1.6rem
        -icon: 2.4rem
        -medium: 7rem
        -big: 16rem
        -xbig: 22rem
        -xxbig: 32rem
        -xxxbig: 44rem
        -super: 58rem
        -xsuper: 72rem
        -xxsuper: 90rem
        -xxxsuper: 116rem
      mappings:
        t0: 0
        t1: $baseline * 1
        t2: $baseline * 2
        t3: $baseline * 3
        t4: $baseline * 4
        t5: $baseline * 5
        t6: $baseline * 6
        t7: $baseline * 7
        t8: $baseline * 8
        t9: $baseline * 9
        t10: $baseline * 10
        t11: $baseline * 11
        t12: $baseline * 12
        t1x: -1rem
        t2x: -2rem
        t3x: -3rem
        t4x: -4rem
        t5x: -5rem
        t6x: -6rem
        t7x: -7rem
        t8x: -8rem
        t9x: -9rem
        t10x: -10rem
        t-5: 5%
        t-10: 10%
        t-15: 15%
        t-20: 20%
        t-25: 25%
        t-30: 30%
        t-35: 35%
        t-40: 40%
        t-45: 45%
        t-50: 50%
        t-55: 55%
        t-60: 60%
        t-65: 65%
        t-70: 70%
        t-75: 75%
        t-80: 80%
        t-85: 85%
        t-90: 90%
        t-95: 95%
        t-100: 100%
        t-wire: 1px
        t-xthin: 2px
        t-thin: 3px
        t-xxxsmall: 5px
        t-xxsmall: 0.8rem
        t-xsmall: 1rem
        t-small: 1.6rem
        t-icon: 2.4rem
        t-medium: 7rem
        t-big: 16rem
        t-xbig: 22rem
        t-xxbig: 32rem
        t-xxxbig: 44rem
        t-super: 58rem
        t-xsuper: 72rem
        t-xxsuper: 90rem
        t-xxxsuper: 116rem
    right:
      class: r
      rule:
        - scaled
        - negative-scaled
        - percentaged
        - discrete
      values:
        "0": 0
        "1": $baseline * 1
        "2": $baseline * 2
        "3": $baseline * 3
        "4": $baseline * 4
        "5": $baseline * 5
        "6": $baseline * 6
        "7": $baseline * 7
        "8": $baseline * 8
        "9": $baseline * 9
        "10": $baseline * 10
        "11": $baseline * 11
        "12": $baseline * 12
        1x: -1rem
        2x: -2rem
        3x: -3rem
        4x: -4rem
        5x: -5rem
        6x: -6rem
        7x: -7rem
        8x: -8rem
        9x: -9rem
        10x: -10rem
        "-5": 5%
        "-10": 10%
        "-15": 15%
        "-20": 20%
        "-25": 25%
        "-30": 30%
        "-35": 35%
        "-40": 40%
        "-45": 45%
        "-50": 50%
        "-55": 55%
        "-60": 60%
        "-65": 65%
        "-70": 70%
        "-75": 75%
        "-80": 80%
        "-85": 85%
        "-90": 90%
        "-95": 95%
        "-100": 100%
        -wire: 1px
        -xthin: 2px
        -thin: 3px
        -xxxsmall: 5px
        -xxsmall: 0.8rem
        -xsmall: 1rem
        -small: 1.6rem
        -icon: 2.4rem
        -medium: 7rem
        -big: 16rem
        -xbig: 22rem
        -xxbig: 32rem
        -xxxbig: 44rem
        -super: 58rem
        -xsuper: 72rem
        -xxsuper: 90rem
        -xxxsuper: 116rem
      mappings:
        r0: 0
        r1: $baseline * 1
        r2: $baseline * 2
        r3: $baseline * 3
        r4: $baseline * 4
        r5: $baseline * 5
        r6: $baseline * 6
        r7: $baseline * 7
        r8: $baseline * 8
        r9: $baseline * 9
        r10: $baseline * 10
        r11: $baseline * 11
        r12: $baseline * 12
        r1x: -1rem
        r2x: -2rem
        r3x: -3rem
        r4x: -4rem
        r5x: -5rem
        r6x: -6rem
        r7x: -7rem
        r8x: -8rem
        r9x: -9rem
        r10x: -10rem
        r-5: 5%
        r-10: 10%
        r-15: 15%
        r-20: 20%
        r-25: 25%
        r-30: 30%
        r-35: 35%
        r-40: 40%
        r-45: 45%
        r-50: 50%
        r-55: 55%
        r-60: 60%
        r-65: 65%
        r-70: 70%
        r-75: 75%
        r-80: 80%
        r-85: 85%
        r-90: 90%
        r-95: 95%
        r-100: 100%
        r-wire: 1px
        r-xthin: 2px
        r-thin: 3px
        r-xxxsmall: 5px
        r-xxsmall: 0.8rem
        r-xsmall: 1rem
        r-small: 1.6rem
        r-icon: 2.4rem
        r-medium: 7rem
        r-big: 16rem
        r-xbig: 22rem
        r-xxbig: 32rem
        r-xxxbig: 44rem
        r-super: 58rem
        r-xsuper: 72rem
        r-xxsuper: 90rem
        r-xxxsuper: 116rem
    letter-spacing:
      class: ls
      values:
        "1": 1px
        "2": 2px
        "3": 3px
        "4": 4px
      mappings:
        ls1: 1px
        ls2: 2px
        ls3: 3px
        ls4: 4px
    line-height:
      class: lh
      rule: baselined
      values: *a5
      mappings:
        lh1: $baseline * 0.5
        lh2: $baseline * 1
        lh3: $baseline * 1.5
        lh4: $baseline * 2
        lh5: $baseline * 2.5
        lh6: $baseline * 3
        lh7: $baseline * 3.5
        lh8: $baseline * 4
        lh9: $baseline * 4.5
        lh10: $baseline * 5
        lh11: $baseline * 5.5
        lh12: $baseline * 6
    list-style-type:
      class: lst-
      rule: list-style
      values: *a6
      mappings:
        lst-circle: circle
        lst-disc: disc
        lst-square: square
        lst-decimal: decimal
        lst-none: none
        lst-decimal-leading-zero: decimal-leading-zero
    margin:
      class: ma
      rule:
        - scaled
        - special-sizes
        - percentaged
        - discrete
        - negative-scaled
      values:
        "0": 0
        "1": $baseline * 1
        "2": $baseline * 2
        "3": $baseline * 3
        "4": $baseline * 4
        "5": $baseline * 5
        "6": $baseline * 6
        "7": $baseline * 7
        "8": $baseline * 8
        "9": $baseline * 9
        "10": $baseline * 10
        "11": $baseline * 11
        "12": $baseline * 12
        n: none
        -au: auto
        "-5": 5%
        "-10": 10%
        "-15": 15%
        "-20": 20%
        "-25": 25%
        "-30": 30%
        "-35": 35%
        "-40": 40%
        "-45": 45%
        "-50": 50%
        "-55": 55%
        "-60": 60%
        "-65": 65%
        "-70": 70%
        "-75": 75%
        "-80": 80%
        "-85": 85%
        "-90": 90%
        "-95": 95%
        "-100": 100%
        -wire: 1px
        -xthin: 2px
        -thin: 3px
        -xxxsmall: 5px
        -xxsmall: 0.8rem
        -xsmall: 1rem
        -small: 1.6rem
        -icon: 2.4rem
        -medium: 7rem
        -big: 16rem
        -xbig: 22rem
        -xxbig: 32rem
        -xxxbig: 44rem
        -super: 58rem
        -xsuper: 72rem
        -xxsuper: 90rem
        -xxxsuper: 116rem
        1x: -1rem
        2x: -2rem
        3x: -3rem
        4x: -4rem
        5x: -5rem
        6x: -6rem
        7x: -7rem
        8x: -8rem
        9x: -9rem
        10x: -10rem
      mappings:
        ma0: 0
        ma1: $baseline * 1
        ma2: $baseline * 2
        ma3: $baseline * 3
        ma4: $baseline * 4
        ma5: $baseline * 5
        ma6: $baseline * 6
        ma7: $baseline * 7
        ma8: $baseline * 8
        ma9: $baseline * 9
        ma10: $baseline * 10
        ma11: $baseline * 11
        ma12: $baseline * 12
        man: none
        ma-au: auto
        ma-5: 5%
        ma-10: 10%
        ma-15: 15%
        ma-20: 20%
        ma-25: 25%
        ma-30: 30%
        ma-35: 35%
        ma-40: 40%
        ma-45: 45%
        ma-50: 50%
        ma-55: 55%
        ma-60: 60%
        ma-65: 65%
        ma-70: 70%
        ma-75: 75%
        ma-80: 80%
        ma-85: 85%
        ma-90: 90%
        ma-95: 95%
        ma-100: 100%
        ma-wire: 1px
        ma-xthin: 2px
        ma-thin: 3px
        ma-xxxsmall: 5px
        ma-xxsmall: 0.8rem
        ma-xsmall: 1rem
        ma-small: 1.6rem
        ma-icon: 2.4rem
        ma-medium: 7rem
        ma-big: 16rem
        ma-xbig: 22rem
        ma-xxbig: 32rem
        ma-xxxbig: 44rem
        ma-super: 58rem
        ma-xsuper: 72rem
        ma-xxsuper: 90rem
        ma-xxxsuper: 116rem
        ma1x: -1rem
        ma2x: -2rem
        ma3x: -3rem
        ma4x: -4rem
        ma5x: -5rem
        ma6x: -6rem
        ma7x: -7rem
        ma8x: -8rem
        ma9x: -9rem
        ma10x: -10rem
    margin-bottom:
      class: mb
      rule:
        - scaled
        - special-sizes
        - percentaged
        - discrete
        - negative-scaled
      values:
        "0": 0
        "1": $baseline * 1
        "2": $baseline * 2
        "3": $baseline * 3
        "4": $baseline * 4
        "5": $baseline * 5
        "6": $baseline * 6
        "7": $baseline * 7
        "8": $baseline * 8
        "9": $baseline * 9
        "10": $baseline * 10
        "11": $baseline * 11
        "12": $baseline * 12
        n: none
        -au: auto
        "-5": 5%
        "-10": 10%
        "-15": 15%
        "-20": 20%
        "-25": 25%
        "-30": 30%
        "-35": 35%
        "-40": 40%
        "-45": 45%
        "-50": 50%
        "-55": 55%
        "-60": 60%
        "-65": 65%
        "-70": 70%
        "-75": 75%
        "-80": 80%
        "-85": 85%
        "-90": 90%
        "-95": 95%
        "-100": 100%
        -wire: 1px
        -xthin: 2px
        -thin: 3px
        -xxxsmall: 5px
        -xxsmall: 0.8rem
        -xsmall: 1rem
        -small: 1.6rem
        -icon: 2.4rem
        -medium: 7rem
        -big: 16rem
        -xbig: 22rem
        -xxbig: 32rem
        -xxxbig: 44rem
        -super: 58rem
        -xsuper: 72rem
        -xxsuper: 90rem
        -xxxsuper: 116rem
        1x: -1rem
        2x: -2rem
        3x: -3rem
        4x: -4rem
        5x: -5rem
        6x: -6rem
        7x: -7rem
        8x: -8rem
        9x: -9rem
        10x: -10rem
      mappings:
        mb0: 0
        mb1: $baseline * 1
        mb2: $baseline * 2
        mb3: $baseline * 3
        mb4: $baseline * 4
        mb5: $baseline * 5
        mb6: $baseline * 6
        mb7: $baseline * 7
        mb8: $baseline * 8
        mb9: $baseline * 9
        mb10: $baseline * 10
        mb11: $baseline * 11
        mb12: $baseline * 12
        mbn: none
        mb-au: auto
        mb-5: 5%
        mb-10: 10%
        mb-15: 15%
        mb-20: 20%
        mb-25: 25%
        mb-30: 30%
        mb-35: 35%
        mb-40: 40%
        mb-45: 45%
        mb-50: 50%
        mb-55: 55%
        mb-60: 60%
        mb-65: 65%
        mb-70: 70%
        mb-75: 75%
        mb-80: 80%
        mb-85: 85%
        mb-90: 90%
        mb-95: 95%
        mb-100: 100%
        mb-wire: 1px
        mb-xthin: 2px
        mb-thin: 3px
        mb-xxxsmall: 5px
        mb-xxsmall: 0.8rem
        mb-xsmall: 1rem
        mb-small: 1.6rem
        mb-icon: 2.4rem
        mb-medium: 7rem
        mb-big: 16rem
        mb-xbig: 22rem
        mb-xxbig: 32rem
        mb-xxxbig: 44rem
        mb-super: 58rem
        mb-xsuper: 72rem
        mb-xxsuper: 90rem
        mb-xxxsuper: 116rem
        mb1x: -1rem
        mb2x: -2rem
        mb3x: -3rem
        mb4x: -4rem
        mb5x: -5rem
        mb6x: -6rem
        mb7x: -7rem
        mb8x: -8rem
        mb9x: -9rem
        mb10x: -10rem
    margin-left:
      class: ml
      rule:
        - scaled
        - special-sizes
        - percentaged
        - discrete
        - negative-scaled
      values:
        "0": 0
        "1": $baseline * 1
        "2": $baseline * 2
        "3": $baseline * 3
        "4": $baseline * 4
        "5": $baseline * 5
        "6": $baseline * 6
        "7": $baseline * 7
        "8": $baseline * 8
        "9": $baseline * 9
        "10": $baseline * 10
        "11": $baseline * 11
        "12": $baseline * 12
        n: none
        -au: auto
        "-5": 5%
        "-10": 10%
        "-15": 15%
        "-20": 20%
        "-25": 25%
        "-30": 30%
        "-35": 35%
        "-40": 40%
        "-45": 45%
        "-50": 50%
        "-55": 55%
        "-60": 60%
        "-65": 65%
        "-70": 70%
        "-75": 75%
        "-80": 80%
        "-85": 85%
        "-90": 90%
        "-95": 95%
        "-100": 100%
        -wire: 1px
        -xthin: 2px
        -thin: 3px
        -xxxsmall: 5px
        -xxsmall: 0.8rem
        -xsmall: 1rem
        -small: 1.6rem
        -icon: 2.4rem
        -medium: 7rem
        -big: 16rem
        -xbig: 22rem
        -xxbig: 32rem
        -xxxbig: 44rem
        -super: 58rem
        -xsuper: 72rem
        -xxsuper: 90rem
        -xxxsuper: 116rem
        1x: -1rem
        2x: -2rem
        3x: -3rem
        4x: -4rem
        5x: -5rem
        6x: -6rem
        7x: -7rem
        8x: -8rem
        9x: -9rem
        10x: -10rem
      mappings:
        ml0: 0
        ml1: $baseline * 1
        ml2: $baseline * 2
        ml3: $baseline * 3
        ml4: $baseline * 4
        ml5: $baseline * 5
        ml6: $baseline * 6
        ml7: $baseline * 7
        ml8: $baseline * 8
        ml9: $baseline * 9
        ml10: $baseline * 10
        ml11: $baseline * 11
        ml12: $baseline * 12
        mln: none
        ml-au: auto
        ml-5: 5%
        ml-10: 10%
        ml-15: 15%
        ml-20: 20%
        ml-25: 25%
        ml-30: 30%
        ml-35: 35%
        ml-40: 40%
        ml-45: 45%
        ml-50: 50%
        ml-55: 55%
        ml-60: 60%
        ml-65: 65%
        ml-70: 70%
        ml-75: 75%
        ml-80: 80%
        ml-85: 85%
        ml-90: 90%
        ml-95: 95%
        ml-100: 100%
        ml-wire: 1px
        ml-xthin: 2px
        ml-thin: 3px
        ml-xxxsmall: 5px
        ml-xxsmall: 0.8rem
        ml-xsmall: 1rem
        ml-small: 1.6rem
        ml-icon: 2.4rem
        ml-medium: 7rem
        ml-big: 16rem
        ml-xbig: 22rem
        ml-xxbig: 32rem
        ml-xxxbig: 44rem
        ml-super: 58rem
        ml-xsuper: 72rem
        ml-xxsuper: 90rem
        ml-xxxsuper: 116rem
        ml1x: -1rem
        ml2x: -2rem
        ml3x: -3rem
        ml4x: -4rem
        ml5x: -5rem
        ml6x: -6rem
        ml7x: -7rem
        ml8x: -8rem
        ml9x: -9rem
        ml10x: -10rem
    margin-right:
      class: mr
      rule:
        - scaled
        - special-sizes
        - percentaged
        - discrete
        - negative-scaled
      values:
        "0": 0
        "1": $baseline * 1
        "2": $baseline * 2
        "3": $baseline * 3
        "4": $baseline * 4
        "5": $baseline * 5
        "6": $baseline * 6
        "7": $baseline * 7
        "8": $baseline * 8
        "9": $baseline * 9
        "10": $baseline * 10
        "11": $baseline * 11
        "12": $baseline * 12
        n: none
        -au: auto
        "-5": 5%
        "-10": 10%
        "-15": 15%
        "-20": 20%
        "-25": 25%
        "-30": 30%
        "-35": 35%
        "-40": 40%
        "-45": 45%
        "-50": 50%
        "-55": 55%
        "-60": 60%
        "-65": 65%
        "-70": 70%
        "-75": 75%
        "-80": 80%
        "-85": 85%
        "-90": 90%
        "-95": 95%
        "-100": 100%
        -wire: 1px
        -xthin: 2px
        -thin: 3px
        -xxxsmall: 5px
        -xxsmall: 0.8rem
        -xsmall: 1rem
        -small: 1.6rem
        -icon: 2.4rem
        -medium: 7rem
        -big: 16rem
        -xbig: 22rem
        -xxbig: 32rem
        -xxxbig: 44rem
        -super: 58rem
        -xsuper: 72rem
        -xxsuper: 90rem
        -xxxsuper: 116rem
        1x: -1rem
        2x: -2rem
        3x: -3rem
        4x: -4rem
        5x: -5rem
        6x: -6rem
        7x: -7rem
        8x: -8rem
        9x: -9rem
        10x: -10rem
      mappings:
        mr0: 0
        mr1: $baseline * 1
        mr2: $baseline * 2
        mr3: $baseline * 3
        mr4: $baseline * 4
        mr5: $baseline * 5
        mr6: $baseline * 6
        mr7: $baseline * 7
        mr8: $baseline * 8
        mr9: $baseline * 9
        mr10: $baseline * 10
        mr11: $baseline * 11
        mr12: $baseline * 12
        mrn: none
        mr-au: auto
        mr-5: 5%
        mr-10: 10%
        mr-15: 15%
        mr-20: 20%
        mr-25: 25%
        mr-30: 30%
        mr-35: 35%
        mr-40: 40%
        mr-45: 45%
        mr-50: 50%
        mr-55: 55%
        mr-60: 60%
        mr-65: 65%
        mr-70: 70%
        mr-75: 75%
        mr-80: 80%
        mr-85: 85%
        mr-90: 90%
        mr-95: 95%
        mr-100: 100%
        mr-wire: 1px
        mr-xthin: 2px
        mr-thin: 3px
        mr-xxxsmall: 5px
        mr-xxsmall: 0.8rem
        mr-xsmall: 1rem
        mr-small: 1.6rem
        mr-icon: 2.4rem
        mr-medium: 7rem
        mr-big: 16rem
        mr-xbig: 22rem
        mr-xxbig: 32rem
        mr-xxxbig: 44rem
        mr-super: 58rem
        mr-xsuper: 72rem
        mr-xxsuper: 90rem
        mr-xxxsuper: 116rem
        mr1x: -1rem
        mr2x: -2rem
        mr3x: -3rem
        mr4x: -4rem
        mr5x: -5rem
        mr6x: -6rem
        mr7x: -7rem
        mr8x: -8rem
        mr9x: -9rem
        mr10x: -10rem
    margin-top:
      class: mt
      rule:
        - scaled
        - special-sizes
        - percentaged
        - discrete
        - negative-scaled
      values:
        "0": 0
        "1": $baseline * 1
        "2": $baseline * 2
        "3": $baseline * 3
        "4": $baseline * 4
        "5": $baseline * 5
        "6": $baseline * 6
        "7": $baseline * 7
        "8": $baseline * 8
        "9": $baseline * 9
        "10": $baseline * 10
        "11": $baseline * 11
        "12": $baseline * 12
        n: none
        -au: auto
        "-5": 5%
        "-10": 10%
        "-15": 15%
        "-20": 20%
        "-25": 25%
        "-30": 30%
        "-35": 35%
        "-40": 40%
        "-45": 45%
        "-50": 50%
        "-55": 55%
        "-60": 60%
        "-65": 65%
        "-70": 70%
        "-75": 75%
        "-80": 80%
        "-85": 85%
        "-90": 90%
        "-95": 95%
        "-100": 100%
        -wire: 1px
        -xthin: 2px
        -thin: 3px
        -xxxsmall: 5px
        -xxsmall: 0.8rem
        -xsmall: 1rem
        -small: 1.6rem
        -icon: 2.4rem
        -medium: 7rem
        -big: 16rem
        -xbig: 22rem
        -xxbig: 32rem
        -xxxbig: 44rem
        -super: 58rem
        -xsuper: 72rem
        -xxsuper: 90rem
        -xxxsuper: 116rem
        1x: -1rem
        2x: -2rem
        3x: -3rem
        4x: -4rem
        5x: -5rem
        6x: -6rem
        7x: -7rem
        8x: -8rem
        9x: -9rem
        10x: -10rem
      mappings:
        mt0: 0
        mt1: $baseline * 1
        mt2: $baseline * 2
        mt3: $baseline * 3
        mt4: $baseline * 4
        mt5: $baseline * 5
        mt6: $baseline * 6
        mt7: $baseline * 7
        mt8: $baseline * 8
        mt9: $baseline * 9
        mt10: $baseline * 10
        mt11: $baseline * 11
        mt12: $baseline * 12
        mtn: none
        mt-au: auto
        mt-5: 5%
        mt-10: 10%
        mt-15: 15%
        mt-20: 20%
        mt-25: 25%
        mt-30: 30%
        mt-35: 35%
        mt-40: 40%
        mt-45: 45%
        mt-50: 50%
        mt-55: 55%
        mt-60: 60%
        mt-65: 65%
        mt-70: 70%
        mt-75: 75%
        mt-80: 80%
        mt-85: 85%
        mt-90: 90%
        mt-95: 95%
        mt-100: 100%
        mt-wire: 1px
        mt-xthin: 2px
        mt-thin: 3px
        mt-xxxsmall: 5px
        mt-xxsmall: 0.8rem
        mt-xsmall: 1rem
        mt-small: 1.6rem
        mt-icon: 2.4rem
        mt-medium: 7rem
        mt-big: 16rem
        mt-xbig: 22rem
        mt-xxbig: 32rem
        mt-xxxbig: 44rem
        mt-super: 58rem
        mt-xsuper: 72rem
        mt-xxsuper: 90rem
        mt-xxxsuper: 116rem
        mt1x: -1rem
        mt2x: -2rem
        mt3x: -3rem
        mt4x: -4rem
        mt5x: -5rem
        mt6x: -6rem
        mt7x: -7rem
        mt8x: -8rem
        mt9x: -9rem
        mt10x: -10rem
    object-fit:
      class: of-
      values:
        fill: fill
        contain: contain
        cover: cover
        scale-down: scale-down
        none: none
      mappings:
        of-fill: fill
        of-contain: contain
        of-cover: cover
        of-scale-down: scale-down
        of-none: none
    opacity:
      class: o
      rule: decimal
      values: *a7
      mappings:
        o0: 0
        o-10: 0.1
        o-20: 0.2
        o-30: 0.3
        o-40: 0.4
        o-50: 0.5
        o-60: 0.6
        o-70: 0.7
        o-80: 0.8
        o-90: 0.9
        o-100: 1
    overflow:
      class: null
      rule: overflow
      values: *a8
      mappings:
        scroll: scroll
        hidden: hidden
        visible: visible
        auto: auto
        none: none
    overflow-x:
      class: x-
      rule: overflow
      values: *a8
      mappings:
        x-scroll: scroll
        x-hidden: hidden
        x-visible: visible
        x-auto: auto
        x-none: none
    overflow-y:
      class: y-
      rule: overflow
      values: *a8
      mappings:
        y-scroll: scroll
        y-hidden: hidden
        y-visible: visible
        y-auto: auto
        y-none: none
    padding:
      class: pa
      rule:
        - scaled
        - discrete
      values:
        "0": 0
        "1": $baseline * 1
        "2": $baseline * 2
        "3": $baseline * 3
        "4": $baseline * 4
        "5": $baseline * 5
        "6": $baseline * 6
        "7": $baseline * 7
        "8": $baseline * 8
        "9": $baseline * 9
        "10": $baseline * 10
        "11": $baseline * 11
        "12": $baseline * 12
        -wire: 1px
        -xthin: 2px
        -thin: 3px
        -xxxsmall: 5px
        -xxsmall: 0.8rem
        -xsmall: 1rem
        -small: 1.6rem
        -icon: 2.4rem
        -medium: 7rem
        -big: 16rem
        -xbig: 22rem
        -xxbig: 32rem
        -xxxbig: 44rem
        -super: 58rem
        -xsuper: 72rem
        -xxsuper: 90rem
        -xxxsuper: 116rem
      mappings:
        pa0: 0
        pa1: $baseline * 1
        pa2: $baseline * 2
        pa3: $baseline * 3
        pa4: $baseline * 4
        pa5: $baseline * 5
        pa6: $baseline * 6
        pa7: $baseline * 7
        pa8: $baseline * 8
        pa9: $baseline * 9
        pa10: $baseline * 10
        pa11: $baseline * 11
        pa12: $baseline * 12
        pa-wire: 1px
        pa-xthin: 2px
        pa-thin: 3px
        pa-xxxsmall: 5px
        pa-xxsmall: 0.8rem
        pa-xsmall: 1rem
        pa-small: 1.6rem
        pa-icon: 2.4rem
        pa-medium: 7rem
        pa-big: 16rem
        pa-xbig: 22rem
        pa-xxbig: 32rem
        pa-xxxbig: 44rem
        pa-super: 58rem
        pa-xsuper: 72rem
        pa-xxsuper: 90rem
        pa-xxxsuper: 116rem
    padding-bottom:
      class: pb
      rule:
        - scaled
        - discrete
      values:
        "0": 0
        "1": $baseline * 1
        "2": $baseline * 2
        "3": $baseline * 3
        "4": $baseline * 4
        "5": $baseline * 5
        "6": $baseline * 6
        "7": $baseline * 7
        "8": $baseline * 8
        "9": $baseline * 9
        "10": $baseline * 10
        "11": $baseline * 11
        "12": $baseline * 12
        -wire: 1px
        -xthin: 2px
        -thin: 3px
        -xxxsmall: 5px
        -xxsmall: 0.8rem
        -xsmall: 1rem
        -small: 1.6rem
        -icon: 2.4rem
        -medium: 7rem
        -big: 16rem
        -xbig: 22rem
        -xxbig: 32rem
        -xxxbig: 44rem
        -super: 58rem
        -xsuper: 72rem
        -xxsuper: 90rem
        -xxxsuper: 116rem
      mappings:
        pb0: 0
        pb1: $baseline * 1
        pb2: $baseline * 2
        pb3: $baseline * 3
        pb4: $baseline * 4
        pb5: $baseline * 5
        pb6: $baseline * 6
        pb7: $baseline * 7
        pb8: $baseline * 8
        pb9: $baseline * 9
        pb10: $baseline * 10
        pb11: $baseline * 11
        pb12: $baseline * 12
        pb-wire: 1px
        pb-xthin: 2px
        pb-thin: 3px
        pb-xxxsmall: 5px
        pb-xxsmall: 0.8rem
        pb-xsmall: 1rem
        pb-small: 1.6rem
        pb-icon: 2.4rem
        pb-medium: 7rem
        pb-big: 16rem
        pb-xbig: 22rem
        pb-xxbig: 32rem
        pb-xxxbig: 44rem
        pb-super: 58rem
        pb-xsuper: 72rem
        pb-xxsuper: 90rem
        pb-xxxsuper: 116rem
    padding-left:
      class: pl
      rule:
        - scaled
        - discrete
      values:
        "0": 0
        "1": $baseline * 1
        "2": $baseline * 2
        "3": $baseline * 3
        "4": $baseline * 4
        "5": $baseline * 5
        "6": $baseline * 6
        "7": $baseline * 7
        "8": $baseline * 8
        "9": $baseline * 9
        "10": $baseline * 10
        "11": $baseline * 11
        "12": $baseline * 12
        -wire: 1px
        -xthin: 2px
        -thin: 3px
        -xxxsmall: 5px
        -xxsmall: 0.8rem
        -xsmall: 1rem
        -small: 1.6rem
        -icon: 2.4rem
        -medium: 7rem
        -big: 16rem
        -xbig: 22rem
        -xxbig: 32rem
        -xxxbig: 44rem
        -super: 58rem
        -xsuper: 72rem
        -xxsuper: 90rem
        -xxxsuper: 116rem
      mappings:
        pl0: 0
        pl1: $baseline * 1
        pl2: $baseline * 2
        pl3: $baseline * 3
        pl4: $baseline * 4
        pl5: $baseline * 5
        pl6: $baseline * 6
        pl7: $baseline * 7
        pl8: $baseline * 8
        pl9: $baseline * 9
        pl10: $baseline * 10
        pl11: $baseline * 11
        pl12: $baseline * 12
        pl-wire: 1px
        pl-xthin: 2px
        pl-thin: 3px
        pl-xxxsmall: 5px
        pl-xxsmall: 0.8rem
        pl-xsmall: 1rem
        pl-small: 1.6rem
        pl-icon: 2.4rem
        pl-medium: 7rem
        pl-big: 16rem
        pl-xbig: 22rem
        pl-xxbig: 32rem
        pl-xxxbig: 44rem
        pl-super: 58rem
        pl-xsuper: 72rem
        pl-xxsuper: 90rem
        pl-xxxsuper: 116rem
    padding-right:
      class: pr
      rule:
        - scaled
        - discrete
      values:
        "0": 0
        "1": $baseline * 1
        "2": $baseline * 2
        "3": $baseline * 3
        "4": $baseline * 4
        "5": $baseline * 5
        "6": $baseline * 6
        "7": $baseline * 7
        "8": $baseline * 8
        "9": $baseline * 9
        "10": $baseline * 10
        "11": $baseline * 11
        "12": $baseline * 12
        -wire: 1px
        -xthin: 2px
        -thin: 3px
        -xxxsmall: 5px
        -xxsmall: 0.8rem
        -xsmall: 1rem
        -small: 1.6rem
        -icon: 2.4rem
        -medium: 7rem
        -big: 16rem
        -xbig: 22rem
        -xxbig: 32rem
        -xxxbig: 44rem
        -super: 58rem
        -xsuper: 72rem
        -xxsuper: 90rem
        -xxxsuper: 116rem
      mappings:
        pr0: 0
        pr1: $baseline * 1
        pr2: $baseline * 2
        pr3: $baseline * 3
        pr4: $baseline * 4
        pr5: $baseline * 5
        pr6: $baseline * 6
        pr7: $baseline * 7
        pr8: $baseline * 8
        pr9: $baseline * 9
        pr10: $baseline * 10
        pr11: $baseline * 11
        pr12: $baseline * 12
        pr-wire: 1px
        pr-xthin: 2px
        pr-thin: 3px
        pr-xxxsmall: 5px
        pr-xxsmall: 0.8rem
        pr-xsmall: 1rem
        pr-small: 1.6rem
        pr-icon: 2.4rem
        pr-medium: 7rem
        pr-big: 16rem
        pr-xbig: 22rem
        pr-xxbig: 32rem
        pr-xxxbig: 44rem
        pr-super: 58rem
        pr-xsuper: 72rem
        pr-xxsuper: 90rem
        pr-xxxsuper: 116rem
    padding-top:
      class: pt
      rule:
        - scaled
        - discrete
      values:
        "0": 0
        "1": $baseline * 1
        "2": $baseline * 2
        "3": $baseline * 3
        "4": $baseline * 4
        "5": $baseline * 5
        "6": $baseline * 6
        "7": $baseline * 7
        "8": $baseline * 8
        "9": $baseline * 9
        "10": $baseline * 10
        "11": $baseline * 11
        "12": $baseline * 12
        -wire: 1px
        -xthin: 2px
        -thin: 3px
        -xxxsmall: 5px
        -xxsmall: 0.8rem
        -xsmall: 1rem
        -small: 1.6rem
        -icon: 2.4rem
        -medium: 7rem
        -big: 16rem
        -xbig: 22rem
        -xxbig: 32rem
        -xxxbig: 44rem
        -super: 58rem
        -xsuper: 72rem
        -xxsuper: 90rem
        -xxxsuper: 116rem
      mappings:
        pt0: 0
        pt1: $baseline * 1
        pt2: $baseline * 2
        pt3: $baseline * 3
        pt4: $baseline * 4
        pt5: $baseline * 5
        pt6: $baseline * 6
        pt7: $baseline * 7
        pt8: $baseline * 8
        pt9: $baseline * 9
        pt10: $baseline * 10
        pt11: $baseline * 11
        pt12: $baseline * 12
        pt-wire: 1px
        pt-xthin: 2px
        pt-thin: 3px
        pt-xxxsmall: 5px
        pt-xxsmall: 0.8rem
        pt-xsmall: 1rem
        pt-small: 1.6rem
        pt-icon: 2.4rem
        pt-medium: 7rem
        pt-big: 16rem
        pt-xbig: 22rem
        pt-xxbig: 32rem
        pt-xxxbig: 44rem
        pt-super: 58rem
        pt-xsuper: 72rem
        pt-xxsuper: 90rem
        pt-xxxsuper: 116rem
    position:
      class: null
      values:
        relative: relative
        absolute: absolute
        fixed: fixed
        sticky: sticky
      mappings:
        relative: relative
        absolute: absolute
        fixed: fixed
        sticky: sticky
    stroke-dasharray: null
    stroke-dashoffset: null
    stroke-width: null
    text-align:
      class: null
      rule: alignment
      values: *a2
      mappings:
        center: center
        right: right
        left: left
    text-decoration:
      class: td-
      values:
        no: none
        un: underline
      mappings:
        td-no: none
        td-un: underline
    text-indent: null
    text-transform:
      class: tt-
      values:
        no: none
        up: uppercase
        ca: capitalize
        lo: lowercase
      mappings:
        tt-no: none
        tt-up: uppercase
        tt-ca: capitalize
        tt-lo: lowercase
    transform:
      class: tr-
      values:
        "0": 0
        performance: translate3d(0,0,0)
        translate-a50x: translate(-50%, -50%)
        translate-x10x: translateX(-10%)
        translate-x20x: translateX(-20%)
        translate-x30x: translateX(-30%)
        translate-x40x: translateX(-40%)
        translate-x50x: translateX(-50%)
        translate-x60x: translateX(-60%)
        translate-x70x: translateX(-70%)
        translate-x80x: translateX(-80%)
        translate-x90x: translateX(-90%)
        translate-x100x: translateX(-100%)
        translate-x10: translateX(10%)
        translate-x20: translateX(20%)
        translate-x30: translateX(30%)
        translate-x40: translateX(40%)
        translate-x50: translateX(50%)
        translate-x60: translateX(60%)
        translate-x70: translateX(70%)
        translate-x80: translateX(80%)
        translate-x90: translateX(90%)
        translate-x100: translateX(100%)
        translate-y10x: translateY(-10%)
        translate-y20x: translateY(-20%)
        translate-y30x: translateY(-30%)
        translate-y40x: translateY(-40%)
        translate-y50x: translateY(-50%)
        translate-y60x: translateY(-60%)
        translate-y70x: translateY(-70%)
        translate-y80x: translateY(-80%)
        translate-y90x: translateY(-90%)
        translate-y100x: translateY(-100%)
        translate-y10: translateY(10%)
        translate-y20: translateY(20%)
        translate-y30: translateY(30%)
        translate-y40: translateY(40%)
        translate-y50: translateY(50%)
        translate-y60: translateY(60%)
        translate-y70: translateY(70%)
        translate-y80: translateY(80%)
        translate-y90: translateY(90%)
        translate-y100: translateY(100%)
      mappings:
        tr-0: 0
        tr-performance: translate3d(0,0,0)
        tr-translate-a50x: translate(-50%, -50%)
        tr-translate-x10x: translateX(-10%)
        tr-translate-x20x: translateX(-20%)
        tr-translate-x30x: translateX(-30%)
        tr-translate-x40x: translateX(-40%)
        tr-translate-x50x: translateX(-50%)
        tr-translate-x60x: translateX(-60%)
        tr-translate-x70x: translateX(-70%)
        tr-translate-x80x: translateX(-80%)
        tr-translate-x90x: translateX(-90%)
        tr-translate-x100x: translateX(-100%)
        tr-translate-x10: translateX(10%)
        tr-translate-x20: translateX(20%)
        tr-translate-x30: translateX(30%)
        tr-translate-x40: translateX(40%)
        tr-translate-x50: translateX(50%)
        tr-translate-x60: translateX(60%)
        tr-translate-x70: translateX(70%)
        tr-translate-x80: translateX(80%)
        tr-translate-x90: translateX(90%)
        tr-translate-x100: translateX(100%)
        tr-translate-y10x: translateY(-10%)
        tr-translate-y20x: translateY(-20%)
        tr-translate-y30x: translateY(-30%)
        tr-translate-y40x: translateY(-40%)
        tr-translate-y50x: translateY(-50%)
        tr-translate-y60x: translateY(-60%)
        tr-translate-y70x: translateY(-70%)
        tr-translate-y80x: translateY(-80%)
        tr-translate-y90x: translateY(-90%)
        tr-translate-y100x: translateY(-100%)
        tr-translate-y10: translateY(10%)
        tr-translate-y20: translateY(20%)
        tr-translate-y30: translateY(30%)
        tr-translate-y40: translateY(40%)
        tr-translate-y50: translateY(50%)
        tr-translate-y60: translateY(60%)
        tr-translate-y70: translateY(70%)
        tr-translate-y80: translateY(80%)
        tr-translate-y90: translateY(90%)
        tr-translate-y100: translateY(100%)
    transition:
      class: ts-
      values:
        transform: transform 0.4s
        no: none
      mappings:
        ts-transform: transform 0.4s
        ts-no: none
    vertical-align:
      class: va-
      values:
        bo: bottom
        mi: middle
        to: top
      mappings:
        va-bo: bottom
        va-mi: middle
        va-to: top
    visibility:
      class: v-
      values:
        hidden: hidden
        visible: visible
      mappings:
        v-hidden: hidden
        v-visible: visible
    z-index:
      class: z
      rule: override
      values: *a9
      mappings:
        z0: 0
        z1: 1
        z2: 2
        z3: 3
        z4: 4
        z5: 5
        z10: 10
        z20: 20
        z30: 30
        z999: 999
        z9999: 9999
    flex-basis:
      class: basis
      rule:
        - percentaged
        - discrete-percentage
      values:
        "-5": 5%
        "-10": 10%
        "-15": 15%
        "-20": 20%
        "-25": 25%
        "-30": 30%
        "-35": 35%
        "-40": 40%
        "-45": 45%
        "-50": 50%
        "-55": 55%
        "-60": 60%
        "-65": 65%
        "-70": 70%
        "-75": 75%
        "-80": 80%
        "-85": 85%
        "-90": 90%
        "-95": 95%
        "-100": 100%
        -1-12: 100% / 12
        -2-12: 100% / 12 * 2
        -3-12: 100% / 12 * 3
        -4-12: 100% / 12 * 4
        -5-12: 100% / 12 * 5
        -6-12: 100% / 12 * 6
        -7-12: 100% / 12 * 7
        -8-12: 100% / 12 * 8
        -9-12: 100% / 12 * 9
        -10-12: 100% / 12 * 10
        -11-12: 100% / 12 * 11
        -12-12: 100% / 12 * 12
      mappings:
        basis-5: 5%
        basis-10: 10%
        basis-15: 15%
        basis-20: 20%
        basis-25: 25%
        basis-30: 30%
        basis-35: 35%
        basis-40: 40%
        basis-45: 45%
        basis-50: 50%
        basis-55: 55%
        basis-60: 60%
        basis-65: 65%
        basis-70: 70%
        basis-75: 75%
        basis-80: 80%
        basis-85: 85%
        basis-90: 90%
        basis-95: 95%
        basis-100: 100%
        basis-1-12: 100% / 12
        basis-2-12: 100% / 12 * 2
        basis-3-12: 100% / 12 * 3
        basis-4-12: 100% / 12 * 4
        basis-5-12: 100% / 12 * 5
        basis-6-12: 100% / 12 * 6
        basis-7-12: 100% / 12 * 7
        basis-8-12: 100% / 12 * 8
        basis-9-12: 100% / 12 * 9
        basis-10-12: 100% / 12 * 10
        basis-11-12: 100% / 12 * 11
        basis-12-12: 100% / 12 * 12
    flex-direction:
      class: null
      values:
        row: row
        row-reverse: row-reverse
        column: column
        column-reverse: column-reverse
      mappings:
        row: row
        row-reverse: row-reverse
        column: column
        column-reverse: column-reverse
    flex-grow:
      class: grow-
      rule:
        - override
      values:
        "0": 0
        "1": 1
        "2": 2
        "3": 3
        "4": 4
        "5": 5
        "10": 10
        "20": 20
        "30": 30
        "999": 999
        "9999": 9999
      mappings:
        grow-0: 0
        grow-1: 1
        grow-2: 2
        grow-3: 3
        grow-4: 4
        grow-5: 5
        grow-10: 10
        grow-20: 20
        grow-30: 30
        grow-999: 999
        grow-9999: 9999
    flex-shrink:
      class: shrink-
      rule:
        - override
      values:
        "0": 0
        "1": 1
        "2": 2
        "3": 3
        "4": 4
        "5": 5
        "10": 10
        "20": 20
        "30": 30
        "999": 999
        "9999": 9999
      mappings:
        shrink-0: 0
        shrink-1: 1
        shrink-2: 2
        shrink-3: 3
        shrink-4: 4
        shrink-5: 5
        shrink-10: 10
        shrink-20: 20
        shrink-30: 30
        shrink-999: 999
        shrink-9999: 9999
    flex-wrap:
      class: null
      values:
        nowrap: nowrap
        wrap: wrap
        wrap-reverse: wrap-reverse
      mappings:
        nowrap: nowrap
        wrap: wrap
        wrap-reverse: wrap-reverse
    box-sizing:
      class: box-
      values:
        bo: border-box
        co: content-box
      mappings:
        box-bo: border-box
        box-co: content-box
    align-items:
      class: ai-
      values:
        start: flex-start
        end: flex-end
        center: center
        baseline: baseline
        stretch: stretch
      mappings:
        ai-start: flex-start
        ai-end: flex-end
        ai-center: center
        ai-baseline: baseline
        ai-stretch: stretch
    align-self:
      class: as-
      values:
        start: flex-start
        end: flex-end
        center: center
        baseline: baseline
        stretch: stretch
      mappings:
        as-start: flex-start
        as-end: flex-end
        as-center: center
        as-baseline: baseline
        as-stretch: stretch
    align-content:
      class: ac-
      values:
        start: flex-start
        end: flex-end
        center: center
        between: space-between
        around: space-around
        stretch: stretch
      mappings:
        ac-start: flex-start
        ac-end: flex-end
        ac-center: center
        ac-between: space-between
        ac-around: space-around
        ac-stretch: stretch
    justify-items:
      class: ji-
      values:
        start: flex-start
        end: flex-end
        center: center
        baseline: baseline
        stretch: stretch
      mappings:
        ji-start: flex-start
        ji-end: flex-end
        ji-center: center
        ji-baseline: baseline
        ji-stretch: stretch
    justify-self:
      class: js-
      values:
        start: flex-start
        end: flex-end
        center: center
        baseline: baseline
        stretch: stretch
      mappings:
        js-start: flex-start
        js-end: flex-end
        js-center: center
        js-baseline: baseline
        js-stretch: stretch
    justify-content:
      class: jc-
      values:
        start: flex-start
        end: flex-end
        center: center
        between: space-between
        around: space-around
        stretch: stretch
      mappings:
        jc-start: flex-start
        jc-end: flex-end
        jc-center: center
        jc-between: space-between
        jc-around: space-around
        jc-stretch: stretch
    box-shadow:
      class: bxsh-
      values:
        greyl: "-1px 5px 15px -5px #6c67a073"
        grey: "0px 3px 5px #6c67a0"
        greyd: "0px 3px 5px #0a0913"
        no: none
      mappings:
        bxsh-greyl: "-1px 5px 15px -5px #6c67a073"
        bxsh-grey: "0px 3px 5px #6c67a0"
        bxsh-greyd: "0px 3px 5px #0a0913"
        bxsh-no: none
    clip:
      class: clip
      values:
        hide: rect(0 0 0 0)
      mappings:
        cliphide: rect(0 0 0 0)
  breakpoints:
    m: 768px
    l: 1024px