{
  "colors-primary-01": {
    "background": {
      "output": "\n@mixin color-primary-01-background {\n  background-color: var( --color-primary-01-color , rgba(42,73,1,1) );\n}",
      "example": "\n<style>\n  #color-primary {\n    background-color: var( --color-primary-01-color , rgba(42,73,1,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary'></div>"
    },
    "text": {
      "output": "\n@mixin color-primary-01-text {\n  color: var( --color-primary-01-color , rgba(42,73,1,1) );\n}",
      "example": "\n<style>\n  #color-primary {\n    color: var( --color-primary-01-color , rgba(42,73,1,1) );\n  }\n</style>\n<div id='color-primary'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-primary-01-border {\n  border-color: var( --color-primary-01-color , rgba(42,73,1,1) );\n}",
      "example": "\n<style>\n  #color-primary {\n    border: 1px solid white;\n    border-color: var( --color-primary-01-color , rgba(42,73,1,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-primary-01-hover-text {\n  &:hover { color: var( --color-primary-01-color , rgba(42,73,1,1) ); }\n}",
      "example": "\n<style>\n  #color-primary:hover { \n    color: var( --color-primary-01-color , rgba(42,73,1,1) ); \n  }\n</style>\n<div id='color-primary'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-primary-01-hover-text {\n  &:hover { background-color: var( --color-primary-01-color , rgba(42,73,1,1) ); }\n}",
      "example": "\n<style>\n  #color-primary:hover {\n    background-color: var( --color-primary-01-color , rgba(42,73,1,1) );\n  }\n  #color-primary {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary'>hover over box</div>"
    }
  },
  "colors-primary-02": {
    "background": {
      "output": "\n@mixin color-primary-02-background {\n  background-color: var( --color-primary-02-color , rgba(58,99,3,1) );\n}",
      "example": "\n<style>\n  #color-primary {\n    background-color: var( --color-primary-02-color , rgba(58,99,3,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary'></div>"
    },
    "text": {
      "output": "\n@mixin color-primary-02-text {\n  color: var( --color-primary-02-color , rgba(58,99,3,1) );\n}",
      "example": "\n<style>\n  #color-primary {\n    color: var( --color-primary-02-color , rgba(58,99,3,1) );\n  }\n</style>\n<div id='color-primary'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-primary-02-border {\n  border-color: var( --color-primary-02-color , rgba(58,99,3,1) );\n}",
      "example": "\n<style>\n  #color-primary {\n    border: 1px solid white;\n    border-color: var( --color-primary-02-color , rgba(58,99,3,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-primary-02-hover-text {\n  &:hover { color: var( --color-primary-02-color , rgba(58,99,3,1) ); }\n}",
      "example": "\n<style>\n  #color-primary:hover { \n    color: var( --color-primary-02-color , rgba(58,99,3,1) ); \n  }\n</style>\n<div id='color-primary'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-primary-02-hover-text {\n  &:hover { background-color: var( --color-primary-02-color , rgba(58,99,3,1) ); }\n}",
      "example": "\n<style>\n  #color-primary:hover {\n    background-color: var( --color-primary-02-color , rgba(58,99,3,1) );\n  }\n  #color-primary {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary'>hover over box</div>"
    }
  },
  "colors-primary-darkest": {
    "background": {
      "output": "\n@mixin color-primary-darkest-background {\n  background-color: var( --color-primary-darkest-color , rgba(58,99,3,1) );\n}",
      "example": "\n<style>\n  #color-primary {\n    background-color: var( --color-primary-darkest-color , rgba(58,99,3,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary'></div>"
    },
    "text": {
      "output": "\n@mixin color-primary-darkest-text {\n  color: var( --color-primary-darkest-color , rgba(58,99,3,1) );\n}",
      "example": "\n<style>\n  #color-primary {\n    color: var( --color-primary-darkest-color , rgba(58,99,3,1) );\n  }\n</style>\n<div id='color-primary'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-primary-darkest-border {\n  border-color: var( --color-primary-darkest-color , rgba(58,99,3,1) );\n}",
      "example": "\n<style>\n  #color-primary {\n    border: 1px solid white;\n    border-color: var( --color-primary-darkest-color , rgba(58,99,3,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-primary-darkest-hover-text {\n  &:hover { color: var( --color-primary-darkest-color , rgba(58,99,3,1) ); }\n}",
      "example": "\n<style>\n  #color-primary:hover { \n    color: var( --color-primary-darkest-color , rgba(58,99,3,1) ); \n  }\n</style>\n<div id='color-primary'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-primary-darkest-hover-text {\n  &:hover { background-color: var( --color-primary-darkest-color , rgba(58,99,3,1) ); }\n}",
      "example": "\n<style>\n  #color-primary:hover {\n    background-color: var( --color-primary-darkest-color , rgba(58,99,3,1) );\n  }\n  #color-primary {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary'>hover over box</div>"
    }
  },
  "colors-primary-03": {
    "background": {
      "output": "\n@mixin color-primary-03-background {\n  background-color: var( --color-primary-03-color , rgba(72,121,6,1) );\n}",
      "example": "\n<style>\n  #color-primary {\n    background-color: var( --color-primary-03-color , rgba(72,121,6,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary'></div>"
    },
    "text": {
      "output": "\n@mixin color-primary-03-text {\n  color: var( --color-primary-03-color , rgba(72,121,6,1) );\n}",
      "example": "\n<style>\n  #color-primary {\n    color: var( --color-primary-03-color , rgba(72,121,6,1) );\n  }\n</style>\n<div id='color-primary'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-primary-03-border {\n  border-color: var( --color-primary-03-color , rgba(72,121,6,1) );\n}",
      "example": "\n<style>\n  #color-primary {\n    border: 1px solid white;\n    border-color: var( --color-primary-03-color , rgba(72,121,6,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-primary-03-hover-text {\n  &:hover { color: var( --color-primary-03-color , rgba(72,121,6,1) ); }\n}",
      "example": "\n<style>\n  #color-primary:hover { \n    color: var( --color-primary-03-color , rgba(72,121,6,1) ); \n  }\n</style>\n<div id='color-primary'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-primary-03-hover-text {\n  &:hover { background-color: var( --color-primary-03-color , rgba(72,121,6,1) ); }\n}",
      "example": "\n<style>\n  #color-primary:hover {\n    background-color: var( --color-primary-03-color , rgba(72,121,6,1) );\n  }\n  #color-primary {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary'>hover over box</div>"
    }
  },
  "colors-primary-darker": {
    "background": {
      "output": "\n@mixin color-primary-darker-background {\n  background-color: var( --color-primary-darker-color , rgba(72,121,6,1) );\n}",
      "example": "\n<style>\n  #color-primary {\n    background-color: var( --color-primary-darker-color , rgba(72,121,6,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary'></div>"
    },
    "text": {
      "output": "\n@mixin color-primary-darker-text {\n  color: var( --color-primary-darker-color , rgba(72,121,6,1) );\n}",
      "example": "\n<style>\n  #color-primary {\n    color: var( --color-primary-darker-color , rgba(72,121,6,1) );\n  }\n</style>\n<div id='color-primary'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-primary-darker-border {\n  border-color: var( --color-primary-darker-color , rgba(72,121,6,1) );\n}",
      "example": "\n<style>\n  #color-primary {\n    border: 1px solid white;\n    border-color: var( --color-primary-darker-color , rgba(72,121,6,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-primary-darker-hover-text {\n  &:hover { color: var( --color-primary-darker-color , rgba(72,121,6,1) ); }\n}",
      "example": "\n<style>\n  #color-primary:hover { \n    color: var( --color-primary-darker-color , rgba(72,121,6,1) ); \n  }\n</style>\n<div id='color-primary'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-primary-darker-hover-text {\n  &:hover { background-color: var( --color-primary-darker-color , rgba(72,121,6,1) ); }\n}",
      "example": "\n<style>\n  #color-primary:hover {\n    background-color: var( --color-primary-darker-color , rgba(72,121,6,1) );\n  }\n  #color-primary {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary'>hover over box</div>"
    }
  },
  "colors-primary-04": {
    "background": {
      "output": "\n@mixin color-primary-04-background {\n  background-color: var( --color-primary-04-color , rgba(86,144,8,1) );\n}",
      "example": "\n<style>\n  #color-primary {\n    background-color: var( --color-primary-04-color , rgba(86,144,8,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary'></div>"
    },
    "text": {
      "output": "\n@mixin color-primary-04-text {\n  color: var( --color-primary-04-color , rgba(86,144,8,1) );\n}",
      "example": "\n<style>\n  #color-primary {\n    color: var( --color-primary-04-color , rgba(86,144,8,1) );\n  }\n</style>\n<div id='color-primary'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-primary-04-border {\n  border-color: var( --color-primary-04-color , rgba(86,144,8,1) );\n}",
      "example": "\n<style>\n  #color-primary {\n    border: 1px solid white;\n    border-color: var( --color-primary-04-color , rgba(86,144,8,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-primary-04-hover-text {\n  &:hover { color: var( --color-primary-04-color , rgba(86,144,8,1) ); }\n}",
      "example": "\n<style>\n  #color-primary:hover { \n    color: var( --color-primary-04-color , rgba(86,144,8,1) ); \n  }\n</style>\n<div id='color-primary'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-primary-04-hover-text {\n  &:hover { background-color: var( --color-primary-04-color , rgba(86,144,8,1) ); }\n}",
      "example": "\n<style>\n  #color-primary:hover {\n    background-color: var( --color-primary-04-color , rgba(86,144,8,1) );\n  }\n  #color-primary {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary'>hover over box</div>"
    }
  },
  "colors-primary-dark": {
    "background": {
      "output": "\n@mixin color-primary-dark-background {\n  background-color: var( --color-primary-dark-color , rgba(86,144,8,1) );\n}",
      "example": "\n<style>\n  #color-primary {\n    background-color: var( --color-primary-dark-color , rgba(86,144,8,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary'></div>"
    },
    "text": {
      "output": "\n@mixin color-primary-dark-text {\n  color: var( --color-primary-dark-color , rgba(86,144,8,1) );\n}",
      "example": "\n<style>\n  #color-primary {\n    color: var( --color-primary-dark-color , rgba(86,144,8,1) );\n  }\n</style>\n<div id='color-primary'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-primary-dark-border {\n  border-color: var( --color-primary-dark-color , rgba(86,144,8,1) );\n}",
      "example": "\n<style>\n  #color-primary {\n    border: 1px solid white;\n    border-color: var( --color-primary-dark-color , rgba(86,144,8,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-primary-dark-hover-text {\n  &:hover { color: var( --color-primary-dark-color , rgba(86,144,8,1) ); }\n}",
      "example": "\n<style>\n  #color-primary:hover { \n    color: var( --color-primary-dark-color , rgba(86,144,8,1) ); \n  }\n</style>\n<div id='color-primary'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-primary-dark-hover-text {\n  &:hover { background-color: var( --color-primary-dark-color , rgba(86,144,8,1) ); }\n}",
      "example": "\n<style>\n  #color-primary:hover {\n    background-color: var( --color-primary-dark-color , rgba(86,144,8,1) );\n  }\n  #color-primary {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary'>hover over box</div>"
    }
  },
  "colors-primary-05": {
    "background": {
      "output": "\n@mixin color-primary-05-background {\n  background-color: var( --color-primary-05-color , rgba(99,166,10,1) );\n}",
      "example": "\n<style>\n  #color-primary {\n    background-color: var( --color-primary-05-color , rgba(99,166,10,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary'></div>"
    },
    "text": {
      "output": "\n@mixin color-primary-05-text {\n  color: var( --color-primary-05-color , rgba(99,166,10,1) );\n}",
      "example": "\n<style>\n  #color-primary {\n    color: var( --color-primary-05-color , rgba(99,166,10,1) );\n  }\n</style>\n<div id='color-primary'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-primary-05-border {\n  border-color: var( --color-primary-05-color , rgba(99,166,10,1) );\n}",
      "example": "\n<style>\n  #color-primary {\n    border: 1px solid white;\n    border-color: var( --color-primary-05-color , rgba(99,166,10,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-primary-05-hover-text {\n  &:hover { color: var( --color-primary-05-color , rgba(99,166,10,1) ); }\n}",
      "example": "\n<style>\n  #color-primary:hover { \n    color: var( --color-primary-05-color , rgba(99,166,10,1) ); \n  }\n</style>\n<div id='color-primary'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-primary-05-hover-text {\n  &:hover { background-color: var( --color-primary-05-color , rgba(99,166,10,1) ); }\n}",
      "example": "\n<style>\n  #color-primary:hover {\n    background-color: var( --color-primary-05-color , rgba(99,166,10,1) );\n  }\n  #color-primary {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary'>hover over box</div>"
    }
  },
  "colors-primary-": {
    "background": {
      "output": "\n@mixin color-primary-background {\n  background-color: var( --color-primary-color , rgba(99,166,10,1) );\n}",
      "example": "\n<style>\n  #color-primary {\n    background-color: var( --color-primary-color , rgba(99,166,10,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary'></div>"
    },
    "text": {
      "output": "\n@mixin color-primary-text {\n  color: var( --color-primary-color , rgba(99,166,10,1) );\n}",
      "example": "\n<style>\n  #color-primary {\n    color: var( --color-primary-color , rgba(99,166,10,1) );\n  }\n</style>\n<div id='color-primary'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-primary-border {\n  border-color: var( --color-primary-color , rgba(99,166,10,1) );\n}",
      "example": "\n<style>\n  #color-primary {\n    border: 1px solid white;\n    border-color: var( --color-primary-color , rgba(99,166,10,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-primary-hover-text {\n  &:hover { color: var( --color-primary-color , rgba(99,166,10,1) ); }\n}",
      "example": "\n<style>\n  #color-primary:hover { \n    color: var( --color-primary-color , rgba(99,166,10,1) ); \n  }\n</style>\n<div id='color-primary'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-primary-hover-text {\n  &:hover { background-color: var( --color-primary-color , rgba(99,166,10,1) ); }\n}",
      "example": "\n<style>\n  #color-primary:hover {\n    background-color: var( --color-primary-color , rgba(99,166,10,1) );\n  }\n  #color-primary {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary'>hover over box</div>"
    }
  },
  "colors-primary-06": {
    "background": {
      "output": "\n@mixin color-primary-06-background {\n  background-color: var( --color-primary-06-color , rgba(126,182,51,1) );\n}",
      "example": "\n<style>\n  #color-primary {\n    background-color: var( --color-primary-06-color , rgba(126,182,51,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary'></div>"
    },
    "text": {
      "output": "\n@mixin color-primary-06-text {\n  color: var( --color-primary-06-color , rgba(126,182,51,1) );\n}",
      "example": "\n<style>\n  #color-primary {\n    color: var( --color-primary-06-color , rgba(126,182,51,1) );\n  }\n</style>\n<div id='color-primary'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-primary-06-border {\n  border-color: var( --color-primary-06-color , rgba(126,182,51,1) );\n}",
      "example": "\n<style>\n  #color-primary {\n    border: 1px solid white;\n    border-color: var( --color-primary-06-color , rgba(126,182,51,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-primary-06-hover-text {\n  &:hover { color: var( --color-primary-06-color , rgba(126,182,51,1) ); }\n}",
      "example": "\n<style>\n  #color-primary:hover { \n    color: var( --color-primary-06-color , rgba(126,182,51,1) ); \n  }\n</style>\n<div id='color-primary'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-primary-06-hover-text {\n  &:hover { background-color: var( --color-primary-06-color , rgba(126,182,51,1) ); }\n}",
      "example": "\n<style>\n  #color-primary:hover {\n    background-color: var( --color-primary-06-color , rgba(126,182,51,1) );\n  }\n  #color-primary {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary'>hover over box</div>"
    }
  },
  "colors-primary-light": {
    "background": {
      "output": "\n@mixin color-primary-light-background {\n  background-color: var( --color-primary-light-color , rgba(126,182,51,1) );\n}",
      "example": "\n<style>\n  #color-primary {\n    background-color: var( --color-primary-light-color , rgba(126,182,51,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary'></div>"
    },
    "text": {
      "output": "\n@mixin color-primary-light-text {\n  color: var( --color-primary-light-color , rgba(126,182,51,1) );\n}",
      "example": "\n<style>\n  #color-primary {\n    color: var( --color-primary-light-color , rgba(126,182,51,1) );\n  }\n</style>\n<div id='color-primary'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-primary-light-border {\n  border-color: var( --color-primary-light-color , rgba(126,182,51,1) );\n}",
      "example": "\n<style>\n  #color-primary {\n    border: 1px solid white;\n    border-color: var( --color-primary-light-color , rgba(126,182,51,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-primary-light-hover-text {\n  &:hover { color: var( --color-primary-light-color , rgba(126,182,51,1) ); }\n}",
      "example": "\n<style>\n  #color-primary:hover { \n    color: var( --color-primary-light-color , rgba(126,182,51,1) ); \n  }\n</style>\n<div id='color-primary'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-primary-light-hover-text {\n  &:hover { background-color: var( --color-primary-light-color , rgba(126,182,51,1) ); }\n}",
      "example": "\n<style>\n  #color-primary:hover {\n    background-color: var( --color-primary-light-color , rgba(126,182,51,1) );\n  }\n  #color-primary {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary'>hover over box</div>"
    }
  },
  "colors-primary-07": {
    "background": {
      "output": "\n@mixin color-primary-07-background {\n  background-color: var( --color-primary-07-color , rgba(158,201,101,1) );\n}",
      "example": "\n<style>\n  #color-primary {\n    background-color: var( --color-primary-07-color , rgba(158,201,101,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary'></div>"
    },
    "text": {
      "output": "\n@mixin color-primary-07-text {\n  color: var( --color-primary-07-color , rgba(158,201,101,1) );\n}",
      "example": "\n<style>\n  #color-primary {\n    color: var( --color-primary-07-color , rgba(158,201,101,1) );\n  }\n</style>\n<div id='color-primary'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-primary-07-border {\n  border-color: var( --color-primary-07-color , rgba(158,201,101,1) );\n}",
      "example": "\n<style>\n  #color-primary {\n    border: 1px solid white;\n    border-color: var( --color-primary-07-color , rgba(158,201,101,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-primary-07-hover-text {\n  &:hover { color: var( --color-primary-07-color , rgba(158,201,101,1) ); }\n}",
      "example": "\n<style>\n  #color-primary:hover { \n    color: var( --color-primary-07-color , rgba(158,201,101,1) ); \n  }\n</style>\n<div id='color-primary'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-primary-07-hover-text {\n  &:hover { background-color: var( --color-primary-07-color , rgba(158,201,101,1) ); }\n}",
      "example": "\n<style>\n  #color-primary:hover {\n    background-color: var( --color-primary-07-color , rgba(158,201,101,1) );\n  }\n  #color-primary {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary'>hover over box</div>"
    }
  },
  "colors-primary-lighter": {
    "background": {
      "output": "\n@mixin color-primary-lighter-background {\n  background-color: var( --color-primary-lighter-color , rgba(158,201,101,1) );\n}",
      "example": "\n<style>\n  #color-primary {\n    background-color: var( --color-primary-lighter-color , rgba(158,201,101,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary'></div>"
    },
    "text": {
      "output": "\n@mixin color-primary-lighter-text {\n  color: var( --color-primary-lighter-color , rgba(158,201,101,1) );\n}",
      "example": "\n<style>\n  #color-primary {\n    color: var( --color-primary-lighter-color , rgba(158,201,101,1) );\n  }\n</style>\n<div id='color-primary'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-primary-lighter-border {\n  border-color: var( --color-primary-lighter-color , rgba(158,201,101,1) );\n}",
      "example": "\n<style>\n  #color-primary {\n    border: 1px solid white;\n    border-color: var( --color-primary-lighter-color , rgba(158,201,101,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-primary-lighter-hover-text {\n  &:hover { color: var( --color-primary-lighter-color , rgba(158,201,101,1) ); }\n}",
      "example": "\n<style>\n  #color-primary:hover { \n    color: var( --color-primary-lighter-color , rgba(158,201,101,1) ); \n  }\n</style>\n<div id='color-primary'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-primary-lighter-hover-text {\n  &:hover { background-color: var( --color-primary-lighter-color , rgba(158,201,101,1) ); }\n}",
      "example": "\n<style>\n  #color-primary:hover {\n    background-color: var( --color-primary-lighter-color , rgba(158,201,101,1) );\n  }\n  #color-primary {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary'>hover over box</div>"
    }
  },
  "colors-primary-08": {
    "background": {
      "output": "\n@mixin color-primary-08-background {\n  background-color: var( --color-primary-08-color , rgba(187,218,146,1) );\n}",
      "example": "\n<style>\n  #color-primary {\n    background-color: var( --color-primary-08-color , rgba(187,218,146,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary'></div>"
    },
    "text": {
      "output": "\n@mixin color-primary-08-text {\n  color: var( --color-primary-08-color , rgba(187,218,146,1) );\n}",
      "example": "\n<style>\n  #color-primary {\n    color: var( --color-primary-08-color , rgba(187,218,146,1) );\n  }\n</style>\n<div id='color-primary'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-primary-08-border {\n  border-color: var( --color-primary-08-color , rgba(187,218,146,1) );\n}",
      "example": "\n<style>\n  #color-primary {\n    border: 1px solid white;\n    border-color: var( --color-primary-08-color , rgba(187,218,146,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-primary-08-hover-text {\n  &:hover { color: var( --color-primary-08-color , rgba(187,218,146,1) ); }\n}",
      "example": "\n<style>\n  #color-primary:hover { \n    color: var( --color-primary-08-color , rgba(187,218,146,1) ); \n  }\n</style>\n<div id='color-primary'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-primary-08-hover-text {\n  &:hover { background-color: var( --color-primary-08-color , rgba(187,218,146,1) ); }\n}",
      "example": "\n<style>\n  #color-primary:hover {\n    background-color: var( --color-primary-08-color , rgba(187,218,146,1) );\n  }\n  #color-primary {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary'>hover over box</div>"
    }
  },
  "colors-primary-lightest": {
    "background": {
      "output": "\n@mixin color-primary-lightest-background {\n  background-color: var( --color-primary-lightest-color , rgba(187,218,146,1) );\n}",
      "example": "\n<style>\n  #color-primary {\n    background-color: var( --color-primary-lightest-color , rgba(187,218,146,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary'></div>"
    },
    "text": {
      "output": "\n@mixin color-primary-lightest-text {\n  color: var( --color-primary-lightest-color , rgba(187,218,146,1) );\n}",
      "example": "\n<style>\n  #color-primary {\n    color: var( --color-primary-lightest-color , rgba(187,218,146,1) );\n  }\n</style>\n<div id='color-primary'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-primary-lightest-border {\n  border-color: var( --color-primary-lightest-color , rgba(187,218,146,1) );\n}",
      "example": "\n<style>\n  #color-primary {\n    border: 1px solid white;\n    border-color: var( --color-primary-lightest-color , rgba(187,218,146,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-primary-lightest-hover-text {\n  &:hover { color: var( --color-primary-lightest-color , rgba(187,218,146,1) ); }\n}",
      "example": "\n<style>\n  #color-primary:hover { \n    color: var( --color-primary-lightest-color , rgba(187,218,146,1) ); \n  }\n</style>\n<div id='color-primary'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-primary-lightest-hover-text {\n  &:hover { background-color: var( --color-primary-lightest-color , rgba(187,218,146,1) ); }\n}",
      "example": "\n<style>\n  #color-primary:hover {\n    background-color: var( --color-primary-lightest-color , rgba(187,218,146,1) );\n  }\n  #color-primary {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary'>hover over box</div>"
    }
  },
  "colors-primary-09": {
    "background": {
      "output": "\n@mixin color-primary-09-background {\n  background-color: var( --color-primary-09-color , rgba(213,233,187,1) );\n}",
      "example": "\n<style>\n  #color-primary {\n    background-color: var( --color-primary-09-color , rgba(213,233,187,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary'></div>"
    },
    "text": {
      "output": "\n@mixin color-primary-09-text {\n  color: var( --color-primary-09-color , rgba(213,233,187,1) );\n}",
      "example": "\n<style>\n  #color-primary {\n    color: var( --color-primary-09-color , rgba(213,233,187,1) );\n  }\n</style>\n<div id='color-primary'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-primary-09-border {\n  border-color: var( --color-primary-09-color , rgba(213,233,187,1) );\n}",
      "example": "\n<style>\n  #color-primary {\n    border: 1px solid white;\n    border-color: var( --color-primary-09-color , rgba(213,233,187,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-primary-09-hover-text {\n  &:hover { color: var( --color-primary-09-color , rgba(213,233,187,1) ); }\n}",
      "example": "\n<style>\n  #color-primary:hover { \n    color: var( --color-primary-09-color , rgba(213,233,187,1) ); \n  }\n</style>\n<div id='color-primary'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-primary-09-hover-text {\n  &:hover { background-color: var( --color-primary-09-color , rgba(213,233,187,1) ); }\n}",
      "example": "\n<style>\n  #color-primary:hover {\n    background-color: var( --color-primary-09-color , rgba(213,233,187,1) );\n  }\n  #color-primary {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary'>hover over box</div>"
    }
  },
  "colors-primary-095": {
    "background": {
      "output": "\n@mixin color-primary-095-background {\n  background-color: var( --color-primary-095-color , rgba(251,255,246,1) );\n}",
      "example": "\n<style>\n  #color-primary {\n    background-color: var( --color-primary-095-color , rgba(251,255,246,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary'></div>"
    },
    "text": {
      "output": "\n@mixin color-primary-095-text {\n  color: var( --color-primary-095-color , rgba(251,255,246,1) );\n}",
      "example": "\n<style>\n  #color-primary {\n    color: var( --color-primary-095-color , rgba(251,255,246,1) );\n  }\n</style>\n<div id='color-primary'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-primary-095-border {\n  border-color: var( --color-primary-095-color , rgba(251,255,246,1) );\n}",
      "example": "\n<style>\n  #color-primary {\n    border: 1px solid white;\n    border-color: var( --color-primary-095-color , rgba(251,255,246,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-primary-095-hover-text {\n  &:hover { color: var( --color-primary-095-color , rgba(251,255,246,1) ); }\n}",
      "example": "\n<style>\n  #color-primary:hover { \n    color: var( --color-primary-095-color , rgba(251,255,246,1) ); \n  }\n</style>\n<div id='color-primary'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-primary-095-hover-text {\n  &:hover { background-color: var( --color-primary-095-color , rgba(251,255,246,1) ); }\n}",
      "example": "\n<style>\n  #color-primary:hover {\n    background-color: var( --color-primary-095-color , rgba(251,255,246,1) );\n  }\n  #color-primary {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary'>hover over box</div>"
    }
  },
  "colors-primary-text-": {
    "background": {
      "output": "\n@mixin color-primary-text-background {\n  background-color: var( --color-primary-text-color , rgba(35,61,0,1) );\n}",
      "example": "\n<style>\n  #color-primary-text {\n    background-color: var( --color-primary-text-color , rgba(35,61,0,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary-text'></div>"
    },
    "text": {
      "output": "\n@mixin color-primary-text-text {\n  color: var( --color-primary-text-color , rgba(35,61,0,1) );\n}",
      "example": "\n<style>\n  #color-primary-text {\n    color: var( --color-primary-text-color , rgba(35,61,0,1) );\n  }\n</style>\n<div id='color-primary-text'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-primary-text-border {\n  border-color: var( --color-primary-text-color , rgba(35,61,0,1) );\n}",
      "example": "\n<style>\n  #color-primary-text {\n    border: 1px solid white;\n    border-color: var( --color-primary-text-color , rgba(35,61,0,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary-text'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-primary-text-hover-text {\n  &:hover { color: var( --color-primary-text-color , rgba(35,61,0,1) ); }\n}",
      "example": "\n<style>\n  #color-primary-text:hover { \n    color: var( --color-primary-text-color , rgba(35,61,0,1) ); \n  }\n</style>\n<div id='color-primary-text'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-primary-text-hover-text {\n  &:hover { background-color: var( --color-primary-text-color , rgba(35,61,0,1) ); }\n}",
      "example": "\n<style>\n  #color-primary-text:hover {\n    background-color: var( --color-primary-text-color , rgba(35,61,0,1) );\n  }\n  #color-primary-text {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary-text'>hover over box</div>"
    }
  },
  "colors-primary-text-light": {
    "background": {
      "output": "\n@mixin color-primary-text-light-background {\n  background-color: var( --color-primary-text-light-color , rgba(58,99,3,1) );\n}",
      "example": "\n<style>\n  #color-primary-text {\n    background-color: var( --color-primary-text-light-color , rgba(58,99,3,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary-text'></div>"
    },
    "text": {
      "output": "\n@mixin color-primary-text-light-text {\n  color: var( --color-primary-text-light-color , rgba(58,99,3,1) );\n}",
      "example": "\n<style>\n  #color-primary-text {\n    color: var( --color-primary-text-light-color , rgba(58,99,3,1) );\n  }\n</style>\n<div id='color-primary-text'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-primary-text-light-border {\n  border-color: var( --color-primary-text-light-color , rgba(58,99,3,1) );\n}",
      "example": "\n<style>\n  #color-primary-text {\n    border: 1px solid white;\n    border-color: var( --color-primary-text-light-color , rgba(58,99,3,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary-text'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-primary-text-light-hover-text {\n  &:hover { color: var( --color-primary-text-light-color , rgba(58,99,3,1) ); }\n}",
      "example": "\n<style>\n  #color-primary-text:hover { \n    color: var( --color-primary-text-light-color , rgba(58,99,3,1) ); \n  }\n</style>\n<div id='color-primary-text'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-primary-text-light-hover-text {\n  &:hover { background-color: var( --color-primary-text-light-color , rgba(58,99,3,1) ); }\n}",
      "example": "\n<style>\n  #color-primary-text:hover {\n    background-color: var( --color-primary-text-light-color , rgba(58,99,3,1) );\n  }\n  #color-primary-text {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary-text'>hover over box</div>"
    }
  },
  "colors-primary-text-lighter": {
    "background": {
      "output": "\n@mixin color-primary-text-lighter-background {\n  background-color: var( --color-primary-text-lighter-color , rgba(64,109,3,1) );\n}",
      "example": "\n<style>\n  #color-primary-text {\n    background-color: var( --color-primary-text-lighter-color , rgba(64,109,3,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary-text'></div>"
    },
    "text": {
      "output": "\n@mixin color-primary-text-lighter-text {\n  color: var( --color-primary-text-lighter-color , rgba(64,109,3,1) );\n}",
      "example": "\n<style>\n  #color-primary-text {\n    color: var( --color-primary-text-lighter-color , rgba(64,109,3,1) );\n  }\n</style>\n<div id='color-primary-text'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-primary-text-lighter-border {\n  border-color: var( --color-primary-text-lighter-color , rgba(64,109,3,1) );\n}",
      "example": "\n<style>\n  #color-primary-text {\n    border: 1px solid white;\n    border-color: var( --color-primary-text-lighter-color , rgba(64,109,3,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary-text'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-primary-text-lighter-hover-text {\n  &:hover { color: var( --color-primary-text-lighter-color , rgba(64,109,3,1) ); }\n}",
      "example": "\n<style>\n  #color-primary-text:hover { \n    color: var( --color-primary-text-lighter-color , rgba(64,109,3,1) ); \n  }\n</style>\n<div id='color-primary-text'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-primary-text-lighter-hover-text {\n  &:hover { background-color: var( --color-primary-text-lighter-color , rgba(64,109,3,1) ); }\n}",
      "example": "\n<style>\n  #color-primary-text:hover {\n    background-color: var( --color-primary-text-lighter-color , rgba(64,109,3,1) );\n  }\n  #color-primary-text {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary-text'>hover over box</div>"
    }
  },
  "colors-primary-text-lightest": {
    "background": {
      "output": "\n@mixin color-primary-text-lightest-background {\n  background-color: var( --color-primary-text-lightest-color , rgba(86,144,8,1) );\n}",
      "example": "\n<style>\n  #color-primary-text {\n    background-color: var( --color-primary-text-lightest-color , rgba(86,144,8,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary-text'></div>"
    },
    "text": {
      "output": "\n@mixin color-primary-text-lightest-text {\n  color: var( --color-primary-text-lightest-color , rgba(86,144,8,1) );\n}",
      "example": "\n<style>\n  #color-primary-text {\n    color: var( --color-primary-text-lightest-color , rgba(86,144,8,1) );\n  }\n</style>\n<div id='color-primary-text'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-primary-text-lightest-border {\n  border-color: var( --color-primary-text-lightest-color , rgba(86,144,8,1) );\n}",
      "example": "\n<style>\n  #color-primary-text {\n    border: 1px solid white;\n    border-color: var( --color-primary-text-lightest-color , rgba(86,144,8,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary-text'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-primary-text-lightest-hover-text {\n  &:hover { color: var( --color-primary-text-lightest-color , rgba(86,144,8,1) ); }\n}",
      "example": "\n<style>\n  #color-primary-text:hover { \n    color: var( --color-primary-text-lightest-color , rgba(86,144,8,1) ); \n  }\n</style>\n<div id='color-primary-text'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-primary-text-lightest-hover-text {\n  &:hover { background-color: var( --color-primary-text-lightest-color , rgba(86,144,8,1) ); }\n}",
      "example": "\n<style>\n  #color-primary-text:hover {\n    background-color: var( --color-primary-text-lightest-color , rgba(86,144,8,1) );\n  }\n  #color-primary-text {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary-text'>hover over box</div>"
    }
  },
  "colors-primary-text-inv": {
    "background": {
      "output": "\n@mixin color-primary-text-inv-background {\n  background-color: var( --color-primary-text-inv-color , rgba(245,252,236,1) );\n}",
      "example": "\n<style>\n  #color-primary-text {\n    background-color: var( --color-primary-text-inv-color , rgba(245,252,236,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary-text'></div>"
    },
    "text": {
      "output": "\n@mixin color-primary-text-inv-text {\n  color: var( --color-primary-text-inv-color , rgba(245,252,236,1) );\n}",
      "example": "\n<style>\n  #color-primary-text {\n    color: var( --color-primary-text-inv-color , rgba(245,252,236,1) );\n  }\n</style>\n<div id='color-primary-text'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-primary-text-inv-border {\n  border-color: var( --color-primary-text-inv-color , rgba(245,252,236,1) );\n}",
      "example": "\n<style>\n  #color-primary-text {\n    border: 1px solid white;\n    border-color: var( --color-primary-text-inv-color , rgba(245,252,236,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary-text'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-primary-text-inv-hover-text {\n  &:hover { color: var( --color-primary-text-inv-color , rgba(245,252,236,1) ); }\n}",
      "example": "\n<style>\n  #color-primary-text:hover { \n    color: var( --color-primary-text-inv-color , rgba(245,252,236,1) ); \n  }\n</style>\n<div id='color-primary-text'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-primary-text-inv-hover-text {\n  &:hover { background-color: var( --color-primary-text-inv-color , rgba(245,252,236,1) ); }\n}",
      "example": "\n<style>\n  #color-primary-text:hover {\n    background-color: var( --color-primary-text-inv-color , rgba(245,252,236,1) );\n  }\n  #color-primary-text {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary-text'>hover over box</div>"
    }
  },
  "colors-primary-text-inv-dark": {
    "background": {
      "output": "\n@mixin color-primary-text-inv-dark-background {\n  background-color: var( --color-primary-text-inv-dark-color , rgba(223,239,203,1) );\n}",
      "example": "\n<style>\n  #color-primary-text {\n    background-color: var( --color-primary-text-inv-dark-color , rgba(223,239,203,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary-text'></div>"
    },
    "text": {
      "output": "\n@mixin color-primary-text-inv-dark-text {\n  color: var( --color-primary-text-inv-dark-color , rgba(223,239,203,1) );\n}",
      "example": "\n<style>\n  #color-primary-text {\n    color: var( --color-primary-text-inv-dark-color , rgba(223,239,203,1) );\n  }\n</style>\n<div id='color-primary-text'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-primary-text-inv-dark-border {\n  border-color: var( --color-primary-text-inv-dark-color , rgba(223,239,203,1) );\n}",
      "example": "\n<style>\n  #color-primary-text {\n    border: 1px solid white;\n    border-color: var( --color-primary-text-inv-dark-color , rgba(223,239,203,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary-text'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-primary-text-inv-dark-hover-text {\n  &:hover { color: var( --color-primary-text-inv-dark-color , rgba(223,239,203,1) ); }\n}",
      "example": "\n<style>\n  #color-primary-text:hover { \n    color: var( --color-primary-text-inv-dark-color , rgba(223,239,203,1) ); \n  }\n</style>\n<div id='color-primary-text'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-primary-text-inv-dark-hover-text {\n  &:hover { background-color: var( --color-primary-text-inv-dark-color , rgba(223,239,203,1) ); }\n}",
      "example": "\n<style>\n  #color-primary-text:hover {\n    background-color: var( --color-primary-text-inv-dark-color , rgba(223,239,203,1) );\n  }\n  #color-primary-text {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary-text'>hover over box</div>"
    }
  },
  "colors-primary-text-inv-darker": {
    "background": {
      "output": "\n@mixin color-primary-text-inv-darker-background {\n  background-color: var( --color-primary-text-inv-darker-color , rgba(201,227,166,1) );\n}",
      "example": "\n<style>\n  #color-primary-text {\n    background-color: var( --color-primary-text-inv-darker-color , rgba(201,227,166,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary-text'></div>"
    },
    "text": {
      "output": "\n@mixin color-primary-text-inv-darker-text {\n  color: var( --color-primary-text-inv-darker-color , rgba(201,227,166,1) );\n}",
      "example": "\n<style>\n  #color-primary-text {\n    color: var( --color-primary-text-inv-darker-color , rgba(201,227,166,1) );\n  }\n</style>\n<div id='color-primary-text'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-primary-text-inv-darker-border {\n  border-color: var( --color-primary-text-inv-darker-color , rgba(201,227,166,1) );\n}",
      "example": "\n<style>\n  #color-primary-text {\n    border: 1px solid white;\n    border-color: var( --color-primary-text-inv-darker-color , rgba(201,227,166,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary-text'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-primary-text-inv-darker-hover-text {\n  &:hover { color: var( --color-primary-text-inv-darker-color , rgba(201,227,166,1) ); }\n}",
      "example": "\n<style>\n  #color-primary-text:hover { \n    color: var( --color-primary-text-inv-darker-color , rgba(201,227,166,1) ); \n  }\n</style>\n<div id='color-primary-text'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-primary-text-inv-darker-hover-text {\n  &:hover { background-color: var( --color-primary-text-inv-darker-color , rgba(201,227,166,1) ); }\n}",
      "example": "\n<style>\n  #color-primary-text:hover {\n    background-color: var( --color-primary-text-inv-darker-color , rgba(201,227,166,1) );\n  }\n  #color-primary-text {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary-text'>hover over box</div>"
    }
  },
  "colors-primary-text-inv-darkest": {
    "background": {
      "output": "\n@mixin color-primary-text-inv-darkest-background {\n  background-color: var( --color-primary-text-inv-darkest-color , rgba(180,216,133,1) );\n}",
      "example": "\n<style>\n  #color-primary-text {\n    background-color: var( --color-primary-text-inv-darkest-color , rgba(180,216,133,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary-text'></div>"
    },
    "text": {
      "output": "\n@mixin color-primary-text-inv-darkest-text {\n  color: var( --color-primary-text-inv-darkest-color , rgba(180,216,133,1) );\n}",
      "example": "\n<style>\n  #color-primary-text {\n    color: var( --color-primary-text-inv-darkest-color , rgba(180,216,133,1) );\n  }\n</style>\n<div id='color-primary-text'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-primary-text-inv-darkest-border {\n  border-color: var( --color-primary-text-inv-darkest-color , rgba(180,216,133,1) );\n}",
      "example": "\n<style>\n  #color-primary-text {\n    border: 1px solid white;\n    border-color: var( --color-primary-text-inv-darkest-color , rgba(180,216,133,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary-text'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-primary-text-inv-darkest-hover-text {\n  &:hover { color: var( --color-primary-text-inv-darkest-color , rgba(180,216,133,1) ); }\n}",
      "example": "\n<style>\n  #color-primary-text:hover { \n    color: var( --color-primary-text-inv-darkest-color , rgba(180,216,133,1) ); \n  }\n</style>\n<div id='color-primary-text'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-primary-text-inv-darkest-hover-text {\n  &:hover { background-color: var( --color-primary-text-inv-darkest-color , rgba(180,216,133,1) ); }\n}",
      "example": "\n<style>\n  #color-primary-text:hover {\n    background-color: var( --color-primary-text-inv-darkest-color , rgba(180,216,133,1) );\n  }\n  #color-primary-text {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-primary-text'>hover over box</div>"
    }
  },
  "colors-grey-00": {
    "background": {
      "output": "\n@mixin color-grey-00-background {\n  background-color: var( --color-grey-00-color , rgba(0,0,0,1) );\n}",
      "example": "\n<style>\n  #color-grey {\n    background-color: var( --color-grey-00-color , rgba(0,0,0,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-grey'></div>"
    },
    "text": {
      "output": "\n@mixin color-grey-00-text {\n  color: var( --color-grey-00-color , rgba(0,0,0,1) );\n}",
      "example": "\n<style>\n  #color-grey {\n    color: var( --color-grey-00-color , rgba(0,0,0,1) );\n  }\n</style>\n<div id='color-grey'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-grey-00-border {\n  border-color: var( --color-grey-00-color , rgba(0,0,0,1) );\n}",
      "example": "\n<style>\n  #color-grey {\n    border: 1px solid white;\n    border-color: var( --color-grey-00-color , rgba(0,0,0,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-grey'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-grey-00-hover-text {\n  &:hover { color: var( --color-grey-00-color , rgba(0,0,0,1) ); }\n}",
      "example": "\n<style>\n  #color-grey:hover { \n    color: var( --color-grey-00-color , rgba(0,0,0,1) ); \n  }\n</style>\n<div id='color-grey'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-grey-00-hover-text {\n  &:hover { background-color: var( --color-grey-00-color , rgba(0,0,0,1) ); }\n}",
      "example": "\n<style>\n  #color-grey:hover {\n    background-color: var( --color-grey-00-color , rgba(0,0,0,1) );\n  }\n  #color-grey {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-grey'>hover over box</div>"
    }
  },
  "colors-grey-01": {
    "background": {
      "output": "\n@mixin color-grey-01-background {\n  background-color: var( --color-grey-01-color , rgba(35,35,35,1) );\n}",
      "example": "\n<style>\n  #color-grey {\n    background-color: var( --color-grey-01-color , rgba(35,35,35,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-grey'></div>"
    },
    "text": {
      "output": "\n@mixin color-grey-01-text {\n  color: var( --color-grey-01-color , rgba(35,35,35,1) );\n}",
      "example": "\n<style>\n  #color-grey {\n    color: var( --color-grey-01-color , rgba(35,35,35,1) );\n  }\n</style>\n<div id='color-grey'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-grey-01-border {\n  border-color: var( --color-grey-01-color , rgba(35,35,35,1) );\n}",
      "example": "\n<style>\n  #color-grey {\n    border: 1px solid white;\n    border-color: var( --color-grey-01-color , rgba(35,35,35,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-grey'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-grey-01-hover-text {\n  &:hover { color: var( --color-grey-01-color , rgba(35,35,35,1) ); }\n}",
      "example": "\n<style>\n  #color-grey:hover { \n    color: var( --color-grey-01-color , rgba(35,35,35,1) ); \n  }\n</style>\n<div id='color-grey'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-grey-01-hover-text {\n  &:hover { background-color: var( --color-grey-01-color , rgba(35,35,35,1) ); }\n}",
      "example": "\n<style>\n  #color-grey:hover {\n    background-color: var( --color-grey-01-color , rgba(35,35,35,1) );\n  }\n  #color-grey {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-grey'>hover over box</div>"
    }
  },
  "colors-grey-02": {
    "background": {
      "output": "\n@mixin color-grey-02-background {\n  background-color: var( --color-grey-02-color , rgba(57,57,57,1) );\n}",
      "example": "\n<style>\n  #color-grey {\n    background-color: var( --color-grey-02-color , rgba(57,57,57,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-grey'></div>"
    },
    "text": {
      "output": "\n@mixin color-grey-02-text {\n  color: var( --color-grey-02-color , rgba(57,57,57,1) );\n}",
      "example": "\n<style>\n  #color-grey {\n    color: var( --color-grey-02-color , rgba(57,57,57,1) );\n  }\n</style>\n<div id='color-grey'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-grey-02-border {\n  border-color: var( --color-grey-02-color , rgba(57,57,57,1) );\n}",
      "example": "\n<style>\n  #color-grey {\n    border: 1px solid white;\n    border-color: var( --color-grey-02-color , rgba(57,57,57,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-grey'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-grey-02-hover-text {\n  &:hover { color: var( --color-grey-02-color , rgba(57,57,57,1) ); }\n}",
      "example": "\n<style>\n  #color-grey:hover { \n    color: var( --color-grey-02-color , rgba(57,57,57,1) ); \n  }\n</style>\n<div id='color-grey'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-grey-02-hover-text {\n  &:hover { background-color: var( --color-grey-02-color , rgba(57,57,57,1) ); }\n}",
      "example": "\n<style>\n  #color-grey:hover {\n    background-color: var( --color-grey-02-color , rgba(57,57,57,1) );\n  }\n  #color-grey {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-grey'>hover over box</div>"
    }
  },
  "colors-grey-darkest": {
    "background": {
      "output": "\n@mixin color-grey-darkest-background {\n  background-color: var( --color-grey-darkest-color , rgba(57,57,57,1) );\n}",
      "example": "\n<style>\n  #color-grey {\n    background-color: var( --color-grey-darkest-color , rgba(57,57,57,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-grey'></div>"
    },
    "text": {
      "output": "\n@mixin color-grey-darkest-text {\n  color: var( --color-grey-darkest-color , rgba(57,57,57,1) );\n}",
      "example": "\n<style>\n  #color-grey {\n    color: var( --color-grey-darkest-color , rgba(57,57,57,1) );\n  }\n</style>\n<div id='color-grey'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-grey-darkest-border {\n  border-color: var( --color-grey-darkest-color , rgba(57,57,57,1) );\n}",
      "example": "\n<style>\n  #color-grey {\n    border: 1px solid white;\n    border-color: var( --color-grey-darkest-color , rgba(57,57,57,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-grey'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-grey-darkest-hover-text {\n  &:hover { color: var( --color-grey-darkest-color , rgba(57,57,57,1) ); }\n}",
      "example": "\n<style>\n  #color-grey:hover { \n    color: var( --color-grey-darkest-color , rgba(57,57,57,1) ); \n  }\n</style>\n<div id='color-grey'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-grey-darkest-hover-text {\n  &:hover { background-color: var( --color-grey-darkest-color , rgba(57,57,57,1) ); }\n}",
      "example": "\n<style>\n  #color-grey:hover {\n    background-color: var( --color-grey-darkest-color , rgba(57,57,57,1) );\n  }\n  #color-grey {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-grey'>hover over box</div>"
    }
  },
  "colors-grey-03": {
    "background": {
      "output": "\n@mixin color-grey-03-background {\n  background-color: var( --color-grey-03-color , rgba(82,82,82,1) );\n}",
      "example": "\n<style>\n  #color-grey {\n    background-color: var( --color-grey-03-color , rgba(82,82,82,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-grey'></div>"
    },
    "text": {
      "output": "\n@mixin color-grey-03-text {\n  color: var( --color-grey-03-color , rgba(82,82,82,1) );\n}",
      "example": "\n<style>\n  #color-grey {\n    color: var( --color-grey-03-color , rgba(82,82,82,1) );\n  }\n</style>\n<div id='color-grey'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-grey-03-border {\n  border-color: var( --color-grey-03-color , rgba(82,82,82,1) );\n}",
      "example": "\n<style>\n  #color-grey {\n    border: 1px solid white;\n    border-color: var( --color-grey-03-color , rgba(82,82,82,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-grey'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-grey-03-hover-text {\n  &:hover { color: var( --color-grey-03-color , rgba(82,82,82,1) ); }\n}",
      "example": "\n<style>\n  #color-grey:hover { \n    color: var( --color-grey-03-color , rgba(82,82,82,1) ); \n  }\n</style>\n<div id='color-grey'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-grey-03-hover-text {\n  &:hover { background-color: var( --color-grey-03-color , rgba(82,82,82,1) ); }\n}",
      "example": "\n<style>\n  #color-grey:hover {\n    background-color: var( --color-grey-03-color , rgba(82,82,82,1) );\n  }\n  #color-grey {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-grey'>hover over box</div>"
    }
  },
  "colors-grey-darker": {
    "background": {
      "output": "\n@mixin color-grey-darker-background {\n  background-color: var( --color-grey-darker-color , rgba(82,82,82,1) );\n}",
      "example": "\n<style>\n  #color-grey {\n    background-color: var( --color-grey-darker-color , rgba(82,82,82,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-grey'></div>"
    },
    "text": {
      "output": "\n@mixin color-grey-darker-text {\n  color: var( --color-grey-darker-color , rgba(82,82,82,1) );\n}",
      "example": "\n<style>\n  #color-grey {\n    color: var( --color-grey-darker-color , rgba(82,82,82,1) );\n  }\n</style>\n<div id='color-grey'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-grey-darker-border {\n  border-color: var( --color-grey-darker-color , rgba(82,82,82,1) );\n}",
      "example": "\n<style>\n  #color-grey {\n    border: 1px solid white;\n    border-color: var( --color-grey-darker-color , rgba(82,82,82,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-grey'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-grey-darker-hover-text {\n  &:hover { color: var( --color-grey-darker-color , rgba(82,82,82,1) ); }\n}",
      "example": "\n<style>\n  #color-grey:hover { \n    color: var( --color-grey-darker-color , rgba(82,82,82,1) ); \n  }\n</style>\n<div id='color-grey'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-grey-darker-hover-text {\n  &:hover { background-color: var( --color-grey-darker-color , rgba(82,82,82,1) ); }\n}",
      "example": "\n<style>\n  #color-grey:hover {\n    background-color: var( --color-grey-darker-color , rgba(82,82,82,1) );\n  }\n  #color-grey {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-grey'>hover over box</div>"
    }
  },
  "colors-grey-04": {
    "background": {
      "output": "\n@mixin color-grey-04-background {\n  background-color: var( --color-grey-04-color , rgba(104,104,104,1) );\n}",
      "example": "\n<style>\n  #color-grey {\n    background-color: var( --color-grey-04-color , rgba(104,104,104,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-grey'></div>"
    },
    "text": {
      "output": "\n@mixin color-grey-04-text {\n  color: var( --color-grey-04-color , rgba(104,104,104,1) );\n}",
      "example": "\n<style>\n  #color-grey {\n    color: var( --color-grey-04-color , rgba(104,104,104,1) );\n  }\n</style>\n<div id='color-grey'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-grey-04-border {\n  border-color: var( --color-grey-04-color , rgba(104,104,104,1) );\n}",
      "example": "\n<style>\n  #color-grey {\n    border: 1px solid white;\n    border-color: var( --color-grey-04-color , rgba(104,104,104,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-grey'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-grey-04-hover-text {\n  &:hover { color: var( --color-grey-04-color , rgba(104,104,104,1) ); }\n}",
      "example": "\n<style>\n  #color-grey:hover { \n    color: var( --color-grey-04-color , rgba(104,104,104,1) ); \n  }\n</style>\n<div id='color-grey'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-grey-04-hover-text {\n  &:hover { background-color: var( --color-grey-04-color , rgba(104,104,104,1) ); }\n}",
      "example": "\n<style>\n  #color-grey:hover {\n    background-color: var( --color-grey-04-color , rgba(104,104,104,1) );\n  }\n  #color-grey {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-grey'>hover over box</div>"
    }
  },
  "colors-grey-dark": {
    "background": {
      "output": "\n@mixin color-grey-dark-background {\n  background-color: var( --color-grey-dark-color , rgba(104,104,104,1) );\n}",
      "example": "\n<style>\n  #color-grey {\n    background-color: var( --color-grey-dark-color , rgba(104,104,104,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-grey'></div>"
    },
    "text": {
      "output": "\n@mixin color-grey-dark-text {\n  color: var( --color-grey-dark-color , rgba(104,104,104,1) );\n}",
      "example": "\n<style>\n  #color-grey {\n    color: var( --color-grey-dark-color , rgba(104,104,104,1) );\n  }\n</style>\n<div id='color-grey'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-grey-dark-border {\n  border-color: var( --color-grey-dark-color , rgba(104,104,104,1) );\n}",
      "example": "\n<style>\n  #color-grey {\n    border: 1px solid white;\n    border-color: var( --color-grey-dark-color , rgba(104,104,104,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-grey'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-grey-dark-hover-text {\n  &:hover { color: var( --color-grey-dark-color , rgba(104,104,104,1) ); }\n}",
      "example": "\n<style>\n  #color-grey:hover { \n    color: var( --color-grey-dark-color , rgba(104,104,104,1) ); \n  }\n</style>\n<div id='color-grey'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-grey-dark-hover-text {\n  &:hover { background-color: var( --color-grey-dark-color , rgba(104,104,104,1) ); }\n}",
      "example": "\n<style>\n  #color-grey:hover {\n    background-color: var( --color-grey-dark-color , rgba(104,104,104,1) );\n  }\n  #color-grey {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-grey'>hover over box</div>"
    }
  },
  "colors-grey-05": {
    "background": {
      "output": "\n@mixin color-grey-05-background {\n  background-color: var( --color-grey-05-color , rgba(127,127,127,1) );\n}",
      "example": "\n<style>\n  #color-grey {\n    background-color: var( --color-grey-05-color , rgba(127,127,127,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-grey'></div>"
    },
    "text": {
      "output": "\n@mixin color-grey-05-text {\n  color: var( --color-grey-05-color , rgba(127,127,127,1) );\n}",
      "example": "\n<style>\n  #color-grey {\n    color: var( --color-grey-05-color , rgba(127,127,127,1) );\n  }\n</style>\n<div id='color-grey'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-grey-05-border {\n  border-color: var( --color-grey-05-color , rgba(127,127,127,1) );\n}",
      "example": "\n<style>\n  #color-grey {\n    border: 1px solid white;\n    border-color: var( --color-grey-05-color , rgba(127,127,127,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-grey'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-grey-05-hover-text {\n  &:hover { color: var( --color-grey-05-color , rgba(127,127,127,1) ); }\n}",
      "example": "\n<style>\n  #color-grey:hover { \n    color: var( --color-grey-05-color , rgba(127,127,127,1) ); \n  }\n</style>\n<div id='color-grey'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-grey-05-hover-text {\n  &:hover { background-color: var( --color-grey-05-color , rgba(127,127,127,1) ); }\n}",
      "example": "\n<style>\n  #color-grey:hover {\n    background-color: var( --color-grey-05-color , rgba(127,127,127,1) );\n  }\n  #color-grey {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-grey'>hover over box</div>"
    }
  },
  "colors-grey-": {
    "background": {
      "output": "\n@mixin color-grey-background {\n  background-color: var( --color-grey-color , rgba(127,127,127,1) );\n}",
      "example": "\n<style>\n  #color-grey {\n    background-color: var( --color-grey-color , rgba(127,127,127,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-grey'></div>"
    },
    "text": {
      "output": "\n@mixin color-grey-text {\n  color: var( --color-grey-color , rgba(127,127,127,1) );\n}",
      "example": "\n<style>\n  #color-grey {\n    color: var( --color-grey-color , rgba(127,127,127,1) );\n  }\n</style>\n<div id='color-grey'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-grey-border {\n  border-color: var( --color-grey-color , rgba(127,127,127,1) );\n}",
      "example": "\n<style>\n  #color-grey {\n    border: 1px solid white;\n    border-color: var( --color-grey-color , rgba(127,127,127,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-grey'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-grey-hover-text {\n  &:hover { color: var( --color-grey-color , rgba(127,127,127,1) ); }\n}",
      "example": "\n<style>\n  #color-grey:hover { \n    color: var( --color-grey-color , rgba(127,127,127,1) ); \n  }\n</style>\n<div id='color-grey'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-grey-hover-text {\n  &:hover { background-color: var( --color-grey-color , rgba(127,127,127,1) ); }\n}",
      "example": "\n<style>\n  #color-grey:hover {\n    background-color: var( --color-grey-color , rgba(127,127,127,1) );\n  }\n  #color-grey {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-grey'>hover over box</div>"
    }
  },
  "colors-grey-06": {
    "background": {
      "output": "\n@mixin color-grey-06-background {\n  background-color: var( --color-grey-06-color , rgba(149,149,149,1) );\n}",
      "example": "\n<style>\n  #color-grey {\n    background-color: var( --color-grey-06-color , rgba(149,149,149,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-grey'></div>"
    },
    "text": {
      "output": "\n@mixin color-grey-06-text {\n  color: var( --color-grey-06-color , rgba(149,149,149,1) );\n}",
      "example": "\n<style>\n  #color-grey {\n    color: var( --color-grey-06-color , rgba(149,149,149,1) );\n  }\n</style>\n<div id='color-grey'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-grey-06-border {\n  border-color: var( --color-grey-06-color , rgba(149,149,149,1) );\n}",
      "example": "\n<style>\n  #color-grey {\n    border: 1px solid white;\n    border-color: var( --color-grey-06-color , rgba(149,149,149,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-grey'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-grey-06-hover-text {\n  &:hover { color: var( --color-grey-06-color , rgba(149,149,149,1) ); }\n}",
      "example": "\n<style>\n  #color-grey:hover { \n    color: var( --color-grey-06-color , rgba(149,149,149,1) ); \n  }\n</style>\n<div id='color-grey'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-grey-06-hover-text {\n  &:hover { background-color: var( --color-grey-06-color , rgba(149,149,149,1) ); }\n}",
      "example": "\n<style>\n  #color-grey:hover {\n    background-color: var( --color-grey-06-color , rgba(149,149,149,1) );\n  }\n  #color-grey {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-grey'>hover over box</div>"
    }
  },
  "colors-grey-light": {
    "background": {
      "output": "\n@mixin color-grey-light-background {\n  background-color: var( --color-grey-light-color , rgba(149,149,149,1) );\n}",
      "example": "\n<style>\n  #color-grey {\n    background-color: var( --color-grey-light-color , rgba(149,149,149,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-grey'></div>"
    },
    "text": {
      "output": "\n@mixin color-grey-light-text {\n  color: var( --color-grey-light-color , rgba(149,149,149,1) );\n}",
      "example": "\n<style>\n  #color-grey {\n    color: var( --color-grey-light-color , rgba(149,149,149,1) );\n  }\n</style>\n<div id='color-grey'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-grey-light-border {\n  border-color: var( --color-grey-light-color , rgba(149,149,149,1) );\n}",
      "example": "\n<style>\n  #color-grey {\n    border: 1px solid white;\n    border-color: var( --color-grey-light-color , rgba(149,149,149,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-grey'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-grey-light-hover-text {\n  &:hover { color: var( --color-grey-light-color , rgba(149,149,149,1) ); }\n}",
      "example": "\n<style>\n  #color-grey:hover { \n    color: var( --color-grey-light-color , rgba(149,149,149,1) ); \n  }\n</style>\n<div id='color-grey'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-grey-light-hover-text {\n  &:hover { background-color: var( --color-grey-light-color , rgba(149,149,149,1) ); }\n}",
      "example": "\n<style>\n  #color-grey:hover {\n    background-color: var( --color-grey-light-color , rgba(149,149,149,1) );\n  }\n  #color-grey {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-grey'>hover over box</div>"
    }
  },
  "colors-grey-07": {
    "background": {
      "output": "\n@mixin color-grey-07-background {\n  background-color: var( --color-grey-07-color , rgba(173,173,173,1) );\n}",
      "example": "\n<style>\n  #color-grey {\n    background-color: var( --color-grey-07-color , rgba(173,173,173,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-grey'></div>"
    },
    "text": {
      "output": "\n@mixin color-grey-07-text {\n  color: var( --color-grey-07-color , rgba(173,173,173,1) );\n}",
      "example": "\n<style>\n  #color-grey {\n    color: var( --color-grey-07-color , rgba(173,173,173,1) );\n  }\n</style>\n<div id='color-grey'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-grey-07-border {\n  border-color: var( --color-grey-07-color , rgba(173,173,173,1) );\n}",
      "example": "\n<style>\n  #color-grey {\n    border: 1px solid white;\n    border-color: var( --color-grey-07-color , rgba(173,173,173,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-grey'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-grey-07-hover-text {\n  &:hover { color: var( --color-grey-07-color , rgba(173,173,173,1) ); }\n}",
      "example": "\n<style>\n  #color-grey:hover { \n    color: var( --color-grey-07-color , rgba(173,173,173,1) ); \n  }\n</style>\n<div id='color-grey'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-grey-07-hover-text {\n  &:hover { background-color: var( --color-grey-07-color , rgba(173,173,173,1) ); }\n}",
      "example": "\n<style>\n  #color-grey:hover {\n    background-color: var( --color-grey-07-color , rgba(173,173,173,1) );\n  }\n  #color-grey {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-grey'>hover over box</div>"
    }
  },
  "colors-grey-lighter": {
    "background": {
      "output": "\n@mixin color-grey-lighter-background {\n  background-color: var( --color-grey-lighter-color , rgba(173,173,173,1) );\n}",
      "example": "\n<style>\n  #color-grey {\n    background-color: var( --color-grey-lighter-color , rgba(173,173,173,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-grey'></div>"
    },
    "text": {
      "output": "\n@mixin color-grey-lighter-text {\n  color: var( --color-grey-lighter-color , rgba(173,173,173,1) );\n}",
      "example": "\n<style>\n  #color-grey {\n    color: var( --color-grey-lighter-color , rgba(173,173,173,1) );\n  }\n</style>\n<div id='color-grey'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-grey-lighter-border {\n  border-color: var( --color-grey-lighter-color , rgba(173,173,173,1) );\n}",
      "example": "\n<style>\n  #color-grey {\n    border: 1px solid white;\n    border-color: var( --color-grey-lighter-color , rgba(173,173,173,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-grey'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-grey-lighter-hover-text {\n  &:hover { color: var( --color-grey-lighter-color , rgba(173,173,173,1) ); }\n}",
      "example": "\n<style>\n  #color-grey:hover { \n    color: var( --color-grey-lighter-color , rgba(173,173,173,1) ); \n  }\n</style>\n<div id='color-grey'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-grey-lighter-hover-text {\n  &:hover { background-color: var( --color-grey-lighter-color , rgba(173,173,173,1) ); }\n}",
      "example": "\n<style>\n  #color-grey:hover {\n    background-color: var( --color-grey-lighter-color , rgba(173,173,173,1) );\n  }\n  #color-grey {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-grey'>hover over box</div>"
    }
  },
  "colors-grey-08": {
    "background": {
      "output": "\n@mixin color-grey-08-background {\n  background-color: var( --color-grey-08-color , rgba(196,196,196,1) );\n}",
      "example": "\n<style>\n  #color-grey {\n    background-color: var( --color-grey-08-color , rgba(196,196,196,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-grey'></div>"
    },
    "text": {
      "output": "\n@mixin color-grey-08-text {\n  color: var( --color-grey-08-color , rgba(196,196,196,1) );\n}",
      "example": "\n<style>\n  #color-grey {\n    color: var( --color-grey-08-color , rgba(196,196,196,1) );\n  }\n</style>\n<div id='color-grey'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-grey-08-border {\n  border-color: var( --color-grey-08-color , rgba(196,196,196,1) );\n}",
      "example": "\n<style>\n  #color-grey {\n    border: 1px solid white;\n    border-color: var( --color-grey-08-color , rgba(196,196,196,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-grey'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-grey-08-hover-text {\n  &:hover { color: var( --color-grey-08-color , rgba(196,196,196,1) ); }\n}",
      "example": "\n<style>\n  #color-grey:hover { \n    color: var( --color-grey-08-color , rgba(196,196,196,1) ); \n  }\n</style>\n<div id='color-grey'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-grey-08-hover-text {\n  &:hover { background-color: var( --color-grey-08-color , rgba(196,196,196,1) ); }\n}",
      "example": "\n<style>\n  #color-grey:hover {\n    background-color: var( --color-grey-08-color , rgba(196,196,196,1) );\n  }\n  #color-grey {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-grey'>hover over box</div>"
    }
  },
  "colors-grey-lightest": {
    "background": {
      "output": "\n@mixin color-grey-lightest-background {\n  background-color: var( --color-grey-lightest-color , rgba(196,196,196,1) );\n}",
      "example": "\n<style>\n  #color-grey {\n    background-color: var( --color-grey-lightest-color , rgba(196,196,196,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-grey'></div>"
    },
    "text": {
      "output": "\n@mixin color-grey-lightest-text {\n  color: var( --color-grey-lightest-color , rgba(196,196,196,1) );\n}",
      "example": "\n<style>\n  #color-grey {\n    color: var( --color-grey-lightest-color , rgba(196,196,196,1) );\n  }\n</style>\n<div id='color-grey'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-grey-lightest-border {\n  border-color: var( --color-grey-lightest-color , rgba(196,196,196,1) );\n}",
      "example": "\n<style>\n  #color-grey {\n    border: 1px solid white;\n    border-color: var( --color-grey-lightest-color , rgba(196,196,196,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-grey'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-grey-lightest-hover-text {\n  &:hover { color: var( --color-grey-lightest-color , rgba(196,196,196,1) ); }\n}",
      "example": "\n<style>\n  #color-grey:hover { \n    color: var( --color-grey-lightest-color , rgba(196,196,196,1) ); \n  }\n</style>\n<div id='color-grey'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-grey-lightest-hover-text {\n  &:hover { background-color: var( --color-grey-lightest-color , rgba(196,196,196,1) ); }\n}",
      "example": "\n<style>\n  #color-grey:hover {\n    background-color: var( --color-grey-lightest-color , rgba(196,196,196,1) );\n  }\n  #color-grey {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-grey'>hover over box</div>"
    }
  },
  "colors-grey-09": {
    "background": {
      "output": "\n@mixin color-grey-09-background {\n  background-color: var( --color-grey-09-color , rgba(219,219,219,1) );\n}",
      "example": "\n<style>\n  #color-grey {\n    background-color: var( --color-grey-09-color , rgba(219,219,219,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-grey'></div>"
    },
    "text": {
      "output": "\n@mixin color-grey-09-text {\n  color: var( --color-grey-09-color , rgba(219,219,219,1) );\n}",
      "example": "\n<style>\n  #color-grey {\n    color: var( --color-grey-09-color , rgba(219,219,219,1) );\n  }\n</style>\n<div id='color-grey'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-grey-09-border {\n  border-color: var( --color-grey-09-color , rgba(219,219,219,1) );\n}",
      "example": "\n<style>\n  #color-grey {\n    border: 1px solid white;\n    border-color: var( --color-grey-09-color , rgba(219,219,219,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-grey'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-grey-09-hover-text {\n  &:hover { color: var( --color-grey-09-color , rgba(219,219,219,1) ); }\n}",
      "example": "\n<style>\n  #color-grey:hover { \n    color: var( --color-grey-09-color , rgba(219,219,219,1) ); \n  }\n</style>\n<div id='color-grey'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-grey-09-hover-text {\n  &:hover { background-color: var( --color-grey-09-color , rgba(219,219,219,1) ); }\n}",
      "example": "\n<style>\n  #color-grey:hover {\n    background-color: var( --color-grey-09-color , rgba(219,219,219,1) );\n  }\n  #color-grey {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-grey'>hover over box</div>"
    }
  },
  "colors-grey-092": {
    "background": {
      "output": "\n@mixin color-grey-092-background {\n  background-color: var( --color-grey-092-color , rgba(235,235,235,1) );\n}",
      "example": "\n<style>\n  #color-grey {\n    background-color: var( --color-grey-092-color , rgba(235,235,235,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-grey'></div>"
    },
    "text": {
      "output": "\n@mixin color-grey-092-text {\n  color: var( --color-grey-092-color , rgba(235,235,235,1) );\n}",
      "example": "\n<style>\n  #color-grey {\n    color: var( --color-grey-092-color , rgba(235,235,235,1) );\n  }\n</style>\n<div id='color-grey'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-grey-092-border {\n  border-color: var( --color-grey-092-color , rgba(235,235,235,1) );\n}",
      "example": "\n<style>\n  #color-grey {\n    border: 1px solid white;\n    border-color: var( --color-grey-092-color , rgba(235,235,235,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-grey'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-grey-092-hover-text {\n  &:hover { color: var( --color-grey-092-color , rgba(235,235,235,1) ); }\n}",
      "example": "\n<style>\n  #color-grey:hover { \n    color: var( --color-grey-092-color , rgba(235,235,235,1) ); \n  }\n</style>\n<div id='color-grey'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-grey-092-hover-text {\n  &:hover { background-color: var( --color-grey-092-color , rgba(235,235,235,1) ); }\n}",
      "example": "\n<style>\n  #color-grey:hover {\n    background-color: var( --color-grey-092-color , rgba(235,235,235,1) );\n  }\n  #color-grey {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-grey'>hover over box</div>"
    }
  },
  "colors-grey-095": {
    "background": {
      "output": "\n@mixin color-grey-095-background {\n  background-color: var( --color-grey-095-color , rgba(248,248,248,1) );\n}",
      "example": "\n<style>\n  #color-grey {\n    background-color: var( --color-grey-095-color , rgba(248,248,248,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-grey'></div>"
    },
    "text": {
      "output": "\n@mixin color-grey-095-text {\n  color: var( --color-grey-095-color , rgba(248,248,248,1) );\n}",
      "example": "\n<style>\n  #color-grey {\n    color: var( --color-grey-095-color , rgba(248,248,248,1) );\n  }\n</style>\n<div id='color-grey'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-grey-095-border {\n  border-color: var( --color-grey-095-color , rgba(248,248,248,1) );\n}",
      "example": "\n<style>\n  #color-grey {\n    border: 1px solid white;\n    border-color: var( --color-grey-095-color , rgba(248,248,248,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-grey'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-grey-095-hover-text {\n  &:hover { color: var( --color-grey-095-color , rgba(248,248,248,1) ); }\n}",
      "example": "\n<style>\n  #color-grey:hover { \n    color: var( --color-grey-095-color , rgba(248,248,248,1) ); \n  }\n</style>\n<div id='color-grey'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-grey-095-hover-text {\n  &:hover { background-color: var( --color-grey-095-color , rgba(248,248,248,1) ); }\n}",
      "example": "\n<style>\n  #color-grey:hover {\n    background-color: var( --color-grey-095-color , rgba(248,248,248,1) );\n  }\n  #color-grey {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-grey'>hover over box</div>"
    }
  },
  "colors-grey-10": {
    "background": {
      "output": "\n@mixin color-grey-10-background {\n  background-color: var( --color-grey-10-color , rgba(255,255,255,1) );\n}",
      "example": "\n<style>\n  #color-grey {\n    background-color: var( --color-grey-10-color , rgba(255,255,255,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-grey'></div>"
    },
    "text": {
      "output": "\n@mixin color-grey-10-text {\n  color: var( --color-grey-10-color , rgba(255,255,255,1) );\n}",
      "example": "\n<style>\n  #color-grey {\n    color: var( --color-grey-10-color , rgba(255,255,255,1) );\n  }\n</style>\n<div id='color-grey'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-grey-10-border {\n  border-color: var( --color-grey-10-color , rgba(255,255,255,1) );\n}",
      "example": "\n<style>\n  #color-grey {\n    border: 1px solid white;\n    border-color: var( --color-grey-10-color , rgba(255,255,255,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-grey'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-grey-10-hover-text {\n  &:hover { color: var( --color-grey-10-color , rgba(255,255,255,1) ); }\n}",
      "example": "\n<style>\n  #color-grey:hover { \n    color: var( --color-grey-10-color , rgba(255,255,255,1) ); \n  }\n</style>\n<div id='color-grey'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-grey-10-hover-text {\n  &:hover { background-color: var( --color-grey-10-color , rgba(255,255,255,1) ); }\n}",
      "example": "\n<style>\n  #color-grey:hover {\n    background-color: var( --color-grey-10-color , rgba(255,255,255,1) );\n  }\n  #color-grey {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-grey'>hover over box</div>"
    }
  },
  "colors-text-": {
    "background": {
      "output": "\n@mixin color-text-background {\n  background-color: var( --color-text-color , rgba(0,0,0,1) );\n}",
      "example": "\n<style>\n  #color-text {\n    background-color: var( --color-text-color , rgba(0,0,0,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-text'></div>"
    },
    "text": {
      "output": "\n@mixin color-text-text {\n  color: var( --color-text-color , rgba(0,0,0,1) );\n}",
      "example": "\n<style>\n  #color-text {\n    color: var( --color-text-color , rgba(0,0,0,1) );\n  }\n</style>\n<div id='color-text'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-text-border {\n  border-color: var( --color-text-color , rgba(0,0,0,1) );\n}",
      "example": "\n<style>\n  #color-text {\n    border: 1px solid white;\n    border-color: var( --color-text-color , rgba(0,0,0,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-text'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-text-hover-text {\n  &:hover { color: var( --color-text-color , rgba(0,0,0,1) ); }\n}",
      "example": "\n<style>\n  #color-text:hover { \n    color: var( --color-text-color , rgba(0,0,0,1) ); \n  }\n</style>\n<div id='color-text'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-text-hover-text {\n  &:hover { background-color: var( --color-text-color , rgba(0,0,0,1) ); }\n}",
      "example": "\n<style>\n  #color-text:hover {\n    background-color: var( --color-text-color , rgba(0,0,0,1) );\n  }\n  #color-text {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-text'>hover over box</div>"
    }
  },
  "colors-text-light": {
    "background": {
      "output": "\n@mixin color-text-light-background {\n  background-color: var( --color-text-light-color , rgba(29,29,29,1) );\n}",
      "example": "\n<style>\n  #color-text {\n    background-color: var( --color-text-light-color , rgba(29,29,29,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-text'></div>"
    },
    "text": {
      "output": "\n@mixin color-text-light-text {\n  color: var( --color-text-light-color , rgba(29,29,29,1) );\n}",
      "example": "\n<style>\n  #color-text {\n    color: var( --color-text-light-color , rgba(29,29,29,1) );\n  }\n</style>\n<div id='color-text'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-text-light-border {\n  border-color: var( --color-text-light-color , rgba(29,29,29,1) );\n}",
      "example": "\n<style>\n  #color-text {\n    border: 1px solid white;\n    border-color: var( --color-text-light-color , rgba(29,29,29,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-text'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-text-light-hover-text {\n  &:hover { color: var( --color-text-light-color , rgba(29,29,29,1) ); }\n}",
      "example": "\n<style>\n  #color-text:hover { \n    color: var( --color-text-light-color , rgba(29,29,29,1) ); \n  }\n</style>\n<div id='color-text'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-text-light-hover-text {\n  &:hover { background-color: var( --color-text-light-color , rgba(29,29,29,1) ); }\n}",
      "example": "\n<style>\n  #color-text:hover {\n    background-color: var( --color-text-light-color , rgba(29,29,29,1) );\n  }\n  #color-text {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-text'>hover over box</div>"
    }
  },
  "colors-text-lighter": {
    "background": {
      "output": "\n@mixin color-text-lighter-background {\n  background-color: var( --color-text-lighter-color , rgba(54,54,54,1) );\n}",
      "example": "\n<style>\n  #color-text {\n    background-color: var( --color-text-lighter-color , rgba(54,54,54,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-text'></div>"
    },
    "text": {
      "output": "\n@mixin color-text-lighter-text {\n  color: var( --color-text-lighter-color , rgba(54,54,54,1) );\n}",
      "example": "\n<style>\n  #color-text {\n    color: var( --color-text-lighter-color , rgba(54,54,54,1) );\n  }\n</style>\n<div id='color-text'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-text-lighter-border {\n  border-color: var( --color-text-lighter-color , rgba(54,54,54,1) );\n}",
      "example": "\n<style>\n  #color-text {\n    border: 1px solid white;\n    border-color: var( --color-text-lighter-color , rgba(54,54,54,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-text'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-text-lighter-hover-text {\n  &:hover { color: var( --color-text-lighter-color , rgba(54,54,54,1) ); }\n}",
      "example": "\n<style>\n  #color-text:hover { \n    color: var( --color-text-lighter-color , rgba(54,54,54,1) ); \n  }\n</style>\n<div id='color-text'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-text-lighter-hover-text {\n  &:hover { background-color: var( --color-text-lighter-color , rgba(54,54,54,1) ); }\n}",
      "example": "\n<style>\n  #color-text:hover {\n    background-color: var( --color-text-lighter-color , rgba(54,54,54,1) );\n  }\n  #color-text {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-text'>hover over box</div>"
    }
  },
  "colors-text-lightest": {
    "background": {
      "output": "\n@mixin color-text-lightest-background {\n  background-color: var( --color-text-lightest-color , rgba(89,89,89,1) );\n}",
      "example": "\n<style>\n  #color-text {\n    background-color: var( --color-text-lightest-color , rgba(89,89,89,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-text'></div>"
    },
    "text": {
      "output": "\n@mixin color-text-lightest-text {\n  color: var( --color-text-lightest-color , rgba(89,89,89,1) );\n}",
      "example": "\n<style>\n  #color-text {\n    color: var( --color-text-lightest-color , rgba(89,89,89,1) );\n  }\n</style>\n<div id='color-text'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-text-lightest-border {\n  border-color: var( --color-text-lightest-color , rgba(89,89,89,1) );\n}",
      "example": "\n<style>\n  #color-text {\n    border: 1px solid white;\n    border-color: var( --color-text-lightest-color , rgba(89,89,89,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-text'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-text-lightest-hover-text {\n  &:hover { color: var( --color-text-lightest-color , rgba(89,89,89,1) ); }\n}",
      "example": "\n<style>\n  #color-text:hover { \n    color: var( --color-text-lightest-color , rgba(89,89,89,1) ); \n  }\n</style>\n<div id='color-text'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-text-lightest-hover-text {\n  &:hover { background-color: var( --color-text-lightest-color , rgba(89,89,89,1) ); }\n}",
      "example": "\n<style>\n  #color-text:hover {\n    background-color: var( --color-text-lightest-color , rgba(89,89,89,1) );\n  }\n  #color-text {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-text'>hover over box</div>"
    }
  },
  "colors-text-inv": {
    "background": {
      "output": "\n@mixin color-text-inv-background {\n  background-color: var( --color-text-inv-color , rgba(255,255,255,1) );\n}",
      "example": "\n<style>\n  #color-text {\n    background-color: var( --color-text-inv-color , rgba(255,255,255,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-text'></div>"
    },
    "text": {
      "output": "\n@mixin color-text-inv-text {\n  color: var( --color-text-inv-color , rgba(255,255,255,1) );\n}",
      "example": "\n<style>\n  #color-text {\n    color: var( --color-text-inv-color , rgba(255,255,255,1) );\n  }\n</style>\n<div id='color-text'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-text-inv-border {\n  border-color: var( --color-text-inv-color , rgba(255,255,255,1) );\n}",
      "example": "\n<style>\n  #color-text {\n    border: 1px solid white;\n    border-color: var( --color-text-inv-color , rgba(255,255,255,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-text'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-text-inv-hover-text {\n  &:hover { color: var( --color-text-inv-color , rgba(255,255,255,1) ); }\n}",
      "example": "\n<style>\n  #color-text:hover { \n    color: var( --color-text-inv-color , rgba(255,255,255,1) ); \n  }\n</style>\n<div id='color-text'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-text-inv-hover-text {\n  &:hover { background-color: var( --color-text-inv-color , rgba(255,255,255,1) ); }\n}",
      "example": "\n<style>\n  #color-text:hover {\n    background-color: var( --color-text-inv-color , rgba(255,255,255,1) );\n  }\n  #color-text {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-text'>hover over box</div>"
    }
  },
  "colors-text-inv-dark": {
    "background": {
      "output": "\n@mixin color-text-inv-dark-background {\n  background-color: var( --color-text-inv-dark-color , rgba(238,238,238,1) );\n}",
      "example": "\n<style>\n  #color-text {\n    background-color: var( --color-text-inv-dark-color , rgba(238,238,238,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-text'></div>"
    },
    "text": {
      "output": "\n@mixin color-text-inv-dark-text {\n  color: var( --color-text-inv-dark-color , rgba(238,238,238,1) );\n}",
      "example": "\n<style>\n  #color-text {\n    color: var( --color-text-inv-dark-color , rgba(238,238,238,1) );\n  }\n</style>\n<div id='color-text'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-text-inv-dark-border {\n  border-color: var( --color-text-inv-dark-color , rgba(238,238,238,1) );\n}",
      "example": "\n<style>\n  #color-text {\n    border: 1px solid white;\n    border-color: var( --color-text-inv-dark-color , rgba(238,238,238,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-text'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-text-inv-dark-hover-text {\n  &:hover { color: var( --color-text-inv-dark-color , rgba(238,238,238,1) ); }\n}",
      "example": "\n<style>\n  #color-text:hover { \n    color: var( --color-text-inv-dark-color , rgba(238,238,238,1) ); \n  }\n</style>\n<div id='color-text'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-text-inv-dark-hover-text {\n  &:hover { background-color: var( --color-text-inv-dark-color , rgba(238,238,238,1) ); }\n}",
      "example": "\n<style>\n  #color-text:hover {\n    background-color: var( --color-text-inv-dark-color , rgba(238,238,238,1) );\n  }\n  #color-text {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-text'>hover over box</div>"
    }
  },
  "colors-text-inv-darker": {
    "background": {
      "output": "\n@mixin color-text-inv-darker-background {\n  background-color: var( --color-text-inv-darker-color , rgba(221,221,221,1) );\n}",
      "example": "\n<style>\n  #color-text {\n    background-color: var( --color-text-inv-darker-color , rgba(221,221,221,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-text'></div>"
    },
    "text": {
      "output": "\n@mixin color-text-inv-darker-text {\n  color: var( --color-text-inv-darker-color , rgba(221,221,221,1) );\n}",
      "example": "\n<style>\n  #color-text {\n    color: var( --color-text-inv-darker-color , rgba(221,221,221,1) );\n  }\n</style>\n<div id='color-text'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-text-inv-darker-border {\n  border-color: var( --color-text-inv-darker-color , rgba(221,221,221,1) );\n}",
      "example": "\n<style>\n  #color-text {\n    border: 1px solid white;\n    border-color: var( --color-text-inv-darker-color , rgba(221,221,221,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-text'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-text-inv-darker-hover-text {\n  &:hover { color: var( --color-text-inv-darker-color , rgba(221,221,221,1) ); }\n}",
      "example": "\n<style>\n  #color-text:hover { \n    color: var( --color-text-inv-darker-color , rgba(221,221,221,1) ); \n  }\n</style>\n<div id='color-text'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-text-inv-darker-hover-text {\n  &:hover { background-color: var( --color-text-inv-darker-color , rgba(221,221,221,1) ); }\n}",
      "example": "\n<style>\n  #color-text:hover {\n    background-color: var( --color-text-inv-darker-color , rgba(221,221,221,1) );\n  }\n  #color-text {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-text'>hover over box</div>"
    }
  },
  "colors-text-inv-darkest": {
    "background": {
      "output": "\n@mixin color-text-inv-darkest-background {\n  background-color: var( --color-text-inv-darkest-color , rgba(196,196,196,1) );\n}",
      "example": "\n<style>\n  #color-text {\n    background-color: var( --color-text-inv-darkest-color , rgba(196,196,196,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-text'></div>"
    },
    "text": {
      "output": "\n@mixin color-text-inv-darkest-text {\n  color: var( --color-text-inv-darkest-color , rgba(196,196,196,1) );\n}",
      "example": "\n<style>\n  #color-text {\n    color: var( --color-text-inv-darkest-color , rgba(196,196,196,1) );\n  }\n</style>\n<div id='color-text'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-text-inv-darkest-border {\n  border-color: var( --color-text-inv-darkest-color , rgba(196,196,196,1) );\n}",
      "example": "\n<style>\n  #color-text {\n    border: 1px solid white;\n    border-color: var( --color-text-inv-darkest-color , rgba(196,196,196,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-text'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-text-inv-darkest-hover-text {\n  &:hover { color: var( --color-text-inv-darkest-color , rgba(196,196,196,1) ); }\n}",
      "example": "\n<style>\n  #color-text:hover { \n    color: var( --color-text-inv-darkest-color , rgba(196,196,196,1) ); \n  }\n</style>\n<div id='color-text'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-text-inv-darkest-hover-text {\n  &:hover { background-color: var( --color-text-inv-darkest-color , rgba(196,196,196,1) ); }\n}",
      "example": "\n<style>\n  #color-text:hover {\n    background-color: var( --color-text-inv-darkest-color , rgba(196,196,196,1) );\n  }\n  #color-text {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-text'>hover over box</div>"
    }
  },
  "colors-error-": {
    "background": {
      "output": "\n@mixin color-error-background {\n  background-color: var( --color-error-color , rgba(208,51,57,1) );\n}",
      "example": "\n<style>\n  #color-error {\n    background-color: var( --color-error-color , rgba(208,51,57,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-error'></div>"
    },
    "text": {
      "output": "\n@mixin color-error-text {\n  color: var( --color-error-color , rgba(208,51,57,1) );\n}",
      "example": "\n<style>\n  #color-error {\n    color: var( --color-error-color , rgba(208,51,57,1) );\n  }\n</style>\n<div id='color-error'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-error-border {\n  border-color: var( --color-error-color , rgba(208,51,57,1) );\n}",
      "example": "\n<style>\n  #color-error {\n    border: 1px solid white;\n    border-color: var( --color-error-color , rgba(208,51,57,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-error'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-error-hover-text {\n  &:hover { color: var( --color-error-color , rgba(208,51,57,1) ); }\n}",
      "example": "\n<style>\n  #color-error:hover { \n    color: var( --color-error-color , rgba(208,51,57,1) ); \n  }\n</style>\n<div id='color-error'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-error-hover-text {\n  &:hover { background-color: var( --color-error-color , rgba(208,51,57,1) ); }\n}",
      "example": "\n<style>\n  #color-error:hover {\n    background-color: var( --color-error-color , rgba(208,51,57,1) );\n  }\n  #color-error {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-error'>hover over box</div>"
    }
  },
  "colors-error-light": {
    "background": {
      "output": "\n@mixin color-error-light-background {\n  background-color: var( --color-error-light-color , rgba(247,169,172,1) );\n}",
      "example": "\n<style>\n  #color-error {\n    background-color: var( --color-error-light-color , rgba(247,169,172,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-error'></div>"
    },
    "text": {
      "output": "\n@mixin color-error-light-text {\n  color: var( --color-error-light-color , rgba(247,169,172,1) );\n}",
      "example": "\n<style>\n  #color-error {\n    color: var( --color-error-light-color , rgba(247,169,172,1) );\n  }\n</style>\n<div id='color-error'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-error-light-border {\n  border-color: var( --color-error-light-color , rgba(247,169,172,1) );\n}",
      "example": "\n<style>\n  #color-error {\n    border: 1px solid white;\n    border-color: var( --color-error-light-color , rgba(247,169,172,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-error'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-error-light-hover-text {\n  &:hover { color: var( --color-error-light-color , rgba(247,169,172,1) ); }\n}",
      "example": "\n<style>\n  #color-error:hover { \n    color: var( --color-error-light-color , rgba(247,169,172,1) ); \n  }\n</style>\n<div id='color-error'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-error-light-hover-text {\n  &:hover { background-color: var( --color-error-light-color , rgba(247,169,172,1) ); }\n}",
      "example": "\n<style>\n  #color-error:hover {\n    background-color: var( --color-error-light-color , rgba(247,169,172,1) );\n  }\n  #color-error {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-error'>hover over box</div>"
    }
  },
  "colors-error-dark": {
    "background": {
      "output": "\n@mixin color-error-dark-background {\n  background-color: var( --color-error-dark-color , rgba(158,0,0,1) );\n}",
      "example": "\n<style>\n  #color-error {\n    background-color: var( --color-error-dark-color , rgba(158,0,0,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-error'></div>"
    },
    "text": {
      "output": "\n@mixin color-error-dark-text {\n  color: var( --color-error-dark-color , rgba(158,0,0,1) );\n}",
      "example": "\n<style>\n  #color-error {\n    color: var( --color-error-dark-color , rgba(158,0,0,1) );\n  }\n</style>\n<div id='color-error'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-error-dark-border {\n  border-color: var( --color-error-dark-color , rgba(158,0,0,1) );\n}",
      "example": "\n<style>\n  #color-error {\n    border: 1px solid white;\n    border-color: var( --color-error-dark-color , rgba(158,0,0,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-error'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-error-dark-hover-text {\n  &:hover { color: var( --color-error-dark-color , rgba(158,0,0,1) ); }\n}",
      "example": "\n<style>\n  #color-error:hover { \n    color: var( --color-error-dark-color , rgba(158,0,0,1) ); \n  }\n</style>\n<div id='color-error'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-error-dark-hover-text {\n  &:hover { background-color: var( --color-error-dark-color , rgba(158,0,0,1) ); }\n}",
      "example": "\n<style>\n  #color-error:hover {\n    background-color: var( --color-error-dark-color , rgba(158,0,0,1) );\n  }\n  #color-error {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-error'>hover over box</div>"
    }
  },
  "colors-warning-": {
    "background": {
      "output": "\n@mixin color-warning-background {\n  background-color: var( --color-warning-color , rgba(255,134,66,1) );\n}",
      "example": "\n<style>\n  #color-warning {\n    background-color: var( --color-warning-color , rgba(255,134,66,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-warning'></div>"
    },
    "text": {
      "output": "\n@mixin color-warning-text {\n  color: var( --color-warning-color , rgba(255,134,66,1) );\n}",
      "example": "\n<style>\n  #color-warning {\n    color: var( --color-warning-color , rgba(255,134,66,1) );\n  }\n</style>\n<div id='color-warning'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-warning-border {\n  border-color: var( --color-warning-color , rgba(255,134,66,1) );\n}",
      "example": "\n<style>\n  #color-warning {\n    border: 1px solid white;\n    border-color: var( --color-warning-color , rgba(255,134,66,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-warning'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-warning-hover-text {\n  &:hover { color: var( --color-warning-color , rgba(255,134,66,1) ); }\n}",
      "example": "\n<style>\n  #color-warning:hover { \n    color: var( --color-warning-color , rgba(255,134,66,1) ); \n  }\n</style>\n<div id='color-warning'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-warning-hover-text {\n  &:hover { background-color: var( --color-warning-color , rgba(255,134,66,1) ); }\n}",
      "example": "\n<style>\n  #color-warning:hover {\n    background-color: var( --color-warning-color , rgba(255,134,66,1) );\n  }\n  #color-warning {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-warning'>hover over box</div>"
    }
  },
  "colors-warning-light": {
    "background": {
      "output": "\n@mixin color-warning-light-background {\n  background-color: var( --color-warning-light-color , rgba(255,214,191,1) );\n}",
      "example": "\n<style>\n  #color-warning {\n    background-color: var( --color-warning-light-color , rgba(255,214,191,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-warning'></div>"
    },
    "text": {
      "output": "\n@mixin color-warning-light-text {\n  color: var( --color-warning-light-color , rgba(255,214,191,1) );\n}",
      "example": "\n<style>\n  #color-warning {\n    color: var( --color-warning-light-color , rgba(255,214,191,1) );\n  }\n</style>\n<div id='color-warning'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-warning-light-border {\n  border-color: var( --color-warning-light-color , rgba(255,214,191,1) );\n}",
      "example": "\n<style>\n  #color-warning {\n    border: 1px solid white;\n    border-color: var( --color-warning-light-color , rgba(255,214,191,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-warning'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-warning-light-hover-text {\n  &:hover { color: var( --color-warning-light-color , rgba(255,214,191,1) ); }\n}",
      "example": "\n<style>\n  #color-warning:hover { \n    color: var( --color-warning-light-color , rgba(255,214,191,1) ); \n  }\n</style>\n<div id='color-warning'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-warning-light-hover-text {\n  &:hover { background-color: var( --color-warning-light-color , rgba(255,214,191,1) ); }\n}",
      "example": "\n<style>\n  #color-warning:hover {\n    background-color: var( --color-warning-light-color , rgba(255,214,191,1) );\n  }\n  #color-warning {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-warning'>hover over box</div>"
    }
  },
  "colors-warning-dark": {
    "background": {
      "output": "\n@mixin color-warning-dark-background {\n  background-color: var( --color-warning-dark-color , rgba(128,46,0,1) );\n}",
      "example": "\n<style>\n  #color-warning {\n    background-color: var( --color-warning-dark-color , rgba(128,46,0,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-warning'></div>"
    },
    "text": {
      "output": "\n@mixin color-warning-dark-text {\n  color: var( --color-warning-dark-color , rgba(128,46,0,1) );\n}",
      "example": "\n<style>\n  #color-warning {\n    color: var( --color-warning-dark-color , rgba(128,46,0,1) );\n  }\n</style>\n<div id='color-warning'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-warning-dark-border {\n  border-color: var( --color-warning-dark-color , rgba(128,46,0,1) );\n}",
      "example": "\n<style>\n  #color-warning {\n    border: 1px solid white;\n    border-color: var( --color-warning-dark-color , rgba(128,46,0,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-warning'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-warning-dark-hover-text {\n  &:hover { color: var( --color-warning-dark-color , rgba(128,46,0,1) ); }\n}",
      "example": "\n<style>\n  #color-warning:hover { \n    color: var( --color-warning-dark-color , rgba(128,46,0,1) ); \n  }\n</style>\n<div id='color-warning'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-warning-dark-hover-text {\n  &:hover { background-color: var( --color-warning-dark-color , rgba(128,46,0,1) ); }\n}",
      "example": "\n<style>\n  #color-warning:hover {\n    background-color: var( --color-warning-dark-color , rgba(128,46,0,1) );\n  }\n  #color-warning {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-warning'>hover over box</div>"
    }
  },
  "colors-success-": {
    "background": {
      "output": "\n@mixin color-success-background {\n  background-color: var( --color-success-color , rgba(99,166,10,1) );\n}",
      "example": "\n<style>\n  #color-success {\n    background-color: var( --color-success-color , rgba(99,166,10,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-success'></div>"
    },
    "text": {
      "output": "\n@mixin color-success-text {\n  color: var( --color-success-color , rgba(99,166,10,1) );\n}",
      "example": "\n<style>\n  #color-success {\n    color: var( --color-success-color , rgba(99,166,10,1) );\n  }\n</style>\n<div id='color-success'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-success-border {\n  border-color: var( --color-success-color , rgba(99,166,10,1) );\n}",
      "example": "\n<style>\n  #color-success {\n    border: 1px solid white;\n    border-color: var( --color-success-color , rgba(99,166,10,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-success'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-success-hover-text {\n  &:hover { color: var( --color-success-color , rgba(99,166,10,1) ); }\n}",
      "example": "\n<style>\n  #color-success:hover { \n    color: var( --color-success-color , rgba(99,166,10,1) ); \n  }\n</style>\n<div id='color-success'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-success-hover-text {\n  &:hover { background-color: var( --color-success-color , rgba(99,166,10,1) ); }\n}",
      "example": "\n<style>\n  #color-success:hover {\n    background-color: var( --color-success-color , rgba(99,166,10,1) );\n  }\n  #color-success {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-success'>hover over box</div>"
    }
  },
  "colors-success-light": {
    "background": {
      "output": "\n@mixin color-success-light-background {\n  background-color: var( --color-success-light-color , rgba(213,233,187,1) );\n}",
      "example": "\n<style>\n  #color-success {\n    background-color: var( --color-success-light-color , rgba(213,233,187,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-success'></div>"
    },
    "text": {
      "output": "\n@mixin color-success-light-text {\n  color: var( --color-success-light-color , rgba(213,233,187,1) );\n}",
      "example": "\n<style>\n  #color-success {\n    color: var( --color-success-light-color , rgba(213,233,187,1) );\n  }\n</style>\n<div id='color-success'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-success-light-border {\n  border-color: var( --color-success-light-color , rgba(213,233,187,1) );\n}",
      "example": "\n<style>\n  #color-success {\n    border: 1px solid white;\n    border-color: var( --color-success-light-color , rgba(213,233,187,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-success'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-success-light-hover-text {\n  &:hover { color: var( --color-success-light-color , rgba(213,233,187,1) ); }\n}",
      "example": "\n<style>\n  #color-success:hover { \n    color: var( --color-success-light-color , rgba(213,233,187,1) ); \n  }\n</style>\n<div id='color-success'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-success-light-hover-text {\n  &:hover { background-color: var( --color-success-light-color , rgba(213,233,187,1) ); }\n}",
      "example": "\n<style>\n  #color-success:hover {\n    background-color: var( --color-success-light-color , rgba(213,233,187,1) );\n  }\n  #color-success {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-success'>hover over box</div>"
    }
  },
  "colors-success-dark": {
    "background": {
      "output": "\n@mixin color-success-dark-background {\n  background-color: var( --color-success-dark-color , rgba(58,99,3,1) );\n}",
      "example": "\n<style>\n  #color-success {\n    background-color: var( --color-success-dark-color , rgba(58,99,3,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-success'></div>"
    },
    "text": {
      "output": "\n@mixin color-success-dark-text {\n  color: var( --color-success-dark-color , rgba(58,99,3,1) );\n}",
      "example": "\n<style>\n  #color-success {\n    color: var( --color-success-dark-color , rgba(58,99,3,1) );\n  }\n</style>\n<div id='color-success'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-success-dark-border {\n  border-color: var( --color-success-dark-color , rgba(58,99,3,1) );\n}",
      "example": "\n<style>\n  #color-success {\n    border: 1px solid white;\n    border-color: var( --color-success-dark-color , rgba(58,99,3,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-success'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-success-dark-hover-text {\n  &:hover { color: var( --color-success-dark-color , rgba(58,99,3,1) ); }\n}",
      "example": "\n<style>\n  #color-success:hover { \n    color: var( --color-success-dark-color , rgba(58,99,3,1) ); \n  }\n</style>\n<div id='color-success'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-success-dark-hover-text {\n  &:hover { background-color: var( --color-success-dark-color , rgba(58,99,3,1) ); }\n}",
      "example": "\n<style>\n  #color-success:hover {\n    background-color: var( --color-success-dark-color , rgba(58,99,3,1) );\n  }\n  #color-success {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-success'>hover over box</div>"
    }
  },
  "colors-information-": {
    "background": {
      "output": "\n@mixin color-information-background {\n  background-color: var( --color-information-color , rgba(252,231,40,1) );\n}",
      "example": "\n<style>\n  #color-information {\n    background-color: var( --color-information-color , rgba(252,231,40,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-information'></div>"
    },
    "text": {
      "output": "\n@mixin color-information-text {\n  color: var( --color-information-color , rgba(252,231,40,1) );\n}",
      "example": "\n<style>\n  #color-information {\n    color: var( --color-information-color , rgba(252,231,40,1) );\n  }\n</style>\n<div id='color-information'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-information-border {\n  border-color: var( --color-information-color , rgba(252,231,40,1) );\n}",
      "example": "\n<style>\n  #color-information {\n    border: 1px solid white;\n    border-color: var( --color-information-color , rgba(252,231,40,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-information'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-information-hover-text {\n  &:hover { color: var( --color-information-color , rgba(252,231,40,1) ); }\n}",
      "example": "\n<style>\n  #color-information:hover { \n    color: var( --color-information-color , rgba(252,231,40,1) ); \n  }\n</style>\n<div id='color-information'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-information-hover-text {\n  &:hover { background-color: var( --color-information-color , rgba(252,231,40,1) ); }\n}",
      "example": "\n<style>\n  #color-information:hover {\n    background-color: var( --color-information-color , rgba(252,231,40,1) );\n  }\n  #color-information {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-information'>hover over box</div>"
    }
  },
  "colors-information-light": {
    "background": {
      "output": "\n@mixin color-information-light-background {\n  background-color: var( --color-information-light-color , rgba(255,250,208,1) );\n}",
      "example": "\n<style>\n  #color-information {\n    background-color: var( --color-information-light-color , rgba(255,250,208,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-information'></div>"
    },
    "text": {
      "output": "\n@mixin color-information-light-text {\n  color: var( --color-information-light-color , rgba(255,250,208,1) );\n}",
      "example": "\n<style>\n  #color-information {\n    color: var( --color-information-light-color , rgba(255,250,208,1) );\n  }\n</style>\n<div id='color-information'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-information-light-border {\n  border-color: var( --color-information-light-color , rgba(255,250,208,1) );\n}",
      "example": "\n<style>\n  #color-information {\n    border: 1px solid white;\n    border-color: var( --color-information-light-color , rgba(255,250,208,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-information'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-information-light-hover-text {\n  &:hover { color: var( --color-information-light-color , rgba(255,250,208,1) ); }\n}",
      "example": "\n<style>\n  #color-information:hover { \n    color: var( --color-information-light-color , rgba(255,250,208,1) ); \n  }\n</style>\n<div id='color-information'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-information-light-hover-text {\n  &:hover { background-color: var( --color-information-light-color , rgba(255,250,208,1) ); }\n}",
      "example": "\n<style>\n  #color-information:hover {\n    background-color: var( --color-information-light-color , rgba(255,250,208,1) );\n  }\n  #color-information {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-information'>hover over box</div>"
    }
  },
  "colors-information-dark": {
    "background": {
      "output": "\n@mixin color-information-dark-background {\n  background-color: var( --color-information-dark-color , rgba(170,153,0,1) );\n}",
      "example": "\n<style>\n  #color-information {\n    background-color: var( --color-information-dark-color , rgba(170,153,0,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-information'></div>"
    },
    "text": {
      "output": "\n@mixin color-information-dark-text {\n  color: var( --color-information-dark-color , rgba(170,153,0,1) );\n}",
      "example": "\n<style>\n  #color-information {\n    color: var( --color-information-dark-color , rgba(170,153,0,1) );\n  }\n</style>\n<div id='color-information'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-information-dark-border {\n  border-color: var( --color-information-dark-color , rgba(170,153,0,1) );\n}",
      "example": "\n<style>\n  #color-information {\n    border: 1px solid white;\n    border-color: var( --color-information-dark-color , rgba(170,153,0,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-information'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-information-dark-hover-text {\n  &:hover { color: var( --color-information-dark-color , rgba(170,153,0,1) ); }\n}",
      "example": "\n<style>\n  #color-information:hover { \n    color: var( --color-information-dark-color , rgba(170,153,0,1) ); \n  }\n</style>\n<div id='color-information'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-information-dark-hover-text {\n  &:hover { background-color: var( --color-information-dark-color , rgba(170,153,0,1) ); }\n}",
      "example": "\n<style>\n  #color-information:hover {\n    background-color: var( --color-information-dark-color , rgba(170,153,0,1) );\n  }\n  #color-information {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-information'>hover over box</div>"
    }
  },
  "colors-accent-mortgage-01": {
    "background": {
      "output": "\n@mixin color-accent-mortgage-01-background {\n  background-color: var( --color-accent-mortgage-01-color , rgba(50,1,39,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage {\n    background-color: var( --color-accent-mortgage-01-color , rgba(50,1,39,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-mortgage-01-text {\n  color: var( --color-accent-mortgage-01-color , rgba(50,1,39,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage {\n    color: var( --color-accent-mortgage-01-color , rgba(50,1,39,1) );\n  }\n</style>\n<div id='color-accent-mortgage'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-mortgage-01-border {\n  border-color: var( --color-accent-mortgage-01-color , rgba(50,1,39,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage {\n    border: 1px solid white;\n    border-color: var( --color-accent-mortgage-01-color , rgba(50,1,39,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-mortgage-01-hover-text {\n  &:hover { color: var( --color-accent-mortgage-01-color , rgba(50,1,39,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-mortgage:hover { \n    color: var( --color-accent-mortgage-01-color , rgba(50,1,39,1) ); \n  }\n</style>\n<div id='color-accent-mortgage'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-mortgage-01-hover-text {\n  &:hover { background-color: var( --color-accent-mortgage-01-color , rgba(50,1,39,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-mortgage:hover {\n    background-color: var( --color-accent-mortgage-01-color , rgba(50,1,39,1) );\n  }\n  #color-accent-mortgage {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage'>hover over box</div>"
    }
  },
  "colors-accent-mortgage-02": {
    "background": {
      "output": "\n@mixin color-accent-mortgage-02-background {\n  background-color: var( --color-accent-mortgage-02-color , rgba(79,1,61,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage {\n    background-color: var( --color-accent-mortgage-02-color , rgba(79,1,61,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-mortgage-02-text {\n  color: var( --color-accent-mortgage-02-color , rgba(79,1,61,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage {\n    color: var( --color-accent-mortgage-02-color , rgba(79,1,61,1) );\n  }\n</style>\n<div id='color-accent-mortgage'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-mortgage-02-border {\n  border-color: var( --color-accent-mortgage-02-color , rgba(79,1,61,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage {\n    border: 1px solid white;\n    border-color: var( --color-accent-mortgage-02-color , rgba(79,1,61,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-mortgage-02-hover-text {\n  &:hover { color: var( --color-accent-mortgage-02-color , rgba(79,1,61,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-mortgage:hover { \n    color: var( --color-accent-mortgage-02-color , rgba(79,1,61,1) ); \n  }\n</style>\n<div id='color-accent-mortgage'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-mortgage-02-hover-text {\n  &:hover { background-color: var( --color-accent-mortgage-02-color , rgba(79,1,61,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-mortgage:hover {\n    background-color: var( --color-accent-mortgage-02-color , rgba(79,1,61,1) );\n  }\n  #color-accent-mortgage {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage'>hover over box</div>"
    }
  },
  "colors-accent-mortgage-darkest": {
    "background": {
      "output": "\n@mixin color-accent-mortgage-darkest-background {\n  background-color: var( --color-accent-mortgage-darkest-color , rgba(79,1,61,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage {\n    background-color: var( --color-accent-mortgage-darkest-color , rgba(79,1,61,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-mortgage-darkest-text {\n  color: var( --color-accent-mortgage-darkest-color , rgba(79,1,61,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage {\n    color: var( --color-accent-mortgage-darkest-color , rgba(79,1,61,1) );\n  }\n</style>\n<div id='color-accent-mortgage'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-mortgage-darkest-border {\n  border-color: var( --color-accent-mortgage-darkest-color , rgba(79,1,61,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage {\n    border: 1px solid white;\n    border-color: var( --color-accent-mortgage-darkest-color , rgba(79,1,61,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-mortgage-darkest-hover-text {\n  &:hover { color: var( --color-accent-mortgage-darkest-color , rgba(79,1,61,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-mortgage:hover { \n    color: var( --color-accent-mortgage-darkest-color , rgba(79,1,61,1) ); \n  }\n</style>\n<div id='color-accent-mortgage'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-mortgage-darkest-hover-text {\n  &:hover { background-color: var( --color-accent-mortgage-darkest-color , rgba(79,1,61,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-mortgage:hover {\n    background-color: var( --color-accent-mortgage-darkest-color , rgba(79,1,61,1) );\n  }\n  #color-accent-mortgage {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage'>hover over box</div>"
    }
  },
  "colors-accent-mortgage-03": {
    "background": {
      "output": "\n@mixin color-accent-mortgage-03-background {\n  background-color: var( --color-accent-mortgage-03-color , rgba(107,1,83,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage {\n    background-color: var( --color-accent-mortgage-03-color , rgba(107,1,83,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-mortgage-03-text {\n  color: var( --color-accent-mortgage-03-color , rgba(107,1,83,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage {\n    color: var( --color-accent-mortgage-03-color , rgba(107,1,83,1) );\n  }\n</style>\n<div id='color-accent-mortgage'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-mortgage-03-border {\n  border-color: var( --color-accent-mortgage-03-color , rgba(107,1,83,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage {\n    border: 1px solid white;\n    border-color: var( --color-accent-mortgage-03-color , rgba(107,1,83,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-mortgage-03-hover-text {\n  &:hover { color: var( --color-accent-mortgage-03-color , rgba(107,1,83,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-mortgage:hover { \n    color: var( --color-accent-mortgage-03-color , rgba(107,1,83,1) ); \n  }\n</style>\n<div id='color-accent-mortgage'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-mortgage-03-hover-text {\n  &:hover { background-color: var( --color-accent-mortgage-03-color , rgba(107,1,83,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-mortgage:hover {\n    background-color: var( --color-accent-mortgage-03-color , rgba(107,1,83,1) );\n  }\n  #color-accent-mortgage {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage'>hover over box</div>"
    }
  },
  "colors-accent-mortgage-darker": {
    "background": {
      "output": "\n@mixin color-accent-mortgage-darker-background {\n  background-color: var( --color-accent-mortgage-darker-color , rgba(107,1,83,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage {\n    background-color: var( --color-accent-mortgage-darker-color , rgba(107,1,83,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-mortgage-darker-text {\n  color: var( --color-accent-mortgage-darker-color , rgba(107,1,83,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage {\n    color: var( --color-accent-mortgage-darker-color , rgba(107,1,83,1) );\n  }\n</style>\n<div id='color-accent-mortgage'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-mortgage-darker-border {\n  border-color: var( --color-accent-mortgage-darker-color , rgba(107,1,83,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage {\n    border: 1px solid white;\n    border-color: var( --color-accent-mortgage-darker-color , rgba(107,1,83,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-mortgage-darker-hover-text {\n  &:hover { color: var( --color-accent-mortgage-darker-color , rgba(107,1,83,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-mortgage:hover { \n    color: var( --color-accent-mortgage-darker-color , rgba(107,1,83,1) ); \n  }\n</style>\n<div id='color-accent-mortgage'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-mortgage-darker-hover-text {\n  &:hover { background-color: var( --color-accent-mortgage-darker-color , rgba(107,1,83,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-mortgage:hover {\n    background-color: var( --color-accent-mortgage-darker-color , rgba(107,1,83,1) );\n  }\n  #color-accent-mortgage {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage'>hover over box</div>"
    }
  },
  "colors-accent-mortgage-04": {
    "background": {
      "output": "\n@mixin color-accent-mortgage-04-background {\n  background-color: var( --color-accent-mortgage-04-color , rgba(136,1,105,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage {\n    background-color: var( --color-accent-mortgage-04-color , rgba(136,1,105,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-mortgage-04-text {\n  color: var( --color-accent-mortgage-04-color , rgba(136,1,105,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage {\n    color: var( --color-accent-mortgage-04-color , rgba(136,1,105,1) );\n  }\n</style>\n<div id='color-accent-mortgage'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-mortgage-04-border {\n  border-color: var( --color-accent-mortgage-04-color , rgba(136,1,105,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage {\n    border: 1px solid white;\n    border-color: var( --color-accent-mortgage-04-color , rgba(136,1,105,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-mortgage-04-hover-text {\n  &:hover { color: var( --color-accent-mortgage-04-color , rgba(136,1,105,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-mortgage:hover { \n    color: var( --color-accent-mortgage-04-color , rgba(136,1,105,1) ); \n  }\n</style>\n<div id='color-accent-mortgage'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-mortgage-04-hover-text {\n  &:hover { background-color: var( --color-accent-mortgage-04-color , rgba(136,1,105,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-mortgage:hover {\n    background-color: var( --color-accent-mortgage-04-color , rgba(136,1,105,1) );\n  }\n  #color-accent-mortgage {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage'>hover over box</div>"
    }
  },
  "colors-accent-mortgage-dark": {
    "background": {
      "output": "\n@mixin color-accent-mortgage-dark-background {\n  background-color: var( --color-accent-mortgage-dark-color , rgba(136,1,105,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage {\n    background-color: var( --color-accent-mortgage-dark-color , rgba(136,1,105,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-mortgage-dark-text {\n  color: var( --color-accent-mortgage-dark-color , rgba(136,1,105,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage {\n    color: var( --color-accent-mortgage-dark-color , rgba(136,1,105,1) );\n  }\n</style>\n<div id='color-accent-mortgage'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-mortgage-dark-border {\n  border-color: var( --color-accent-mortgage-dark-color , rgba(136,1,105,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage {\n    border: 1px solid white;\n    border-color: var( --color-accent-mortgage-dark-color , rgba(136,1,105,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-mortgage-dark-hover-text {\n  &:hover { color: var( --color-accent-mortgage-dark-color , rgba(136,1,105,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-mortgage:hover { \n    color: var( --color-accent-mortgage-dark-color , rgba(136,1,105,1) ); \n  }\n</style>\n<div id='color-accent-mortgage'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-mortgage-dark-hover-text {\n  &:hover { background-color: var( --color-accent-mortgage-dark-color , rgba(136,1,105,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-mortgage:hover {\n    background-color: var( --color-accent-mortgage-dark-color , rgba(136,1,105,1) );\n  }\n  #color-accent-mortgage {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage'>hover over box</div>"
    }
  },
  "colors-accent-mortgage-05": {
    "background": {
      "output": "\n@mixin color-accent-mortgage-05-background {\n  background-color: var( --color-accent-mortgage-05-color , rgba(162,0,125,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage {\n    background-color: var( --color-accent-mortgage-05-color , rgba(162,0,125,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-mortgage-05-text {\n  color: var( --color-accent-mortgage-05-color , rgba(162,0,125,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage {\n    color: var( --color-accent-mortgage-05-color , rgba(162,0,125,1) );\n  }\n</style>\n<div id='color-accent-mortgage'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-mortgage-05-border {\n  border-color: var( --color-accent-mortgage-05-color , rgba(162,0,125,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage {\n    border: 1px solid white;\n    border-color: var( --color-accent-mortgage-05-color , rgba(162,0,125,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-mortgage-05-hover-text {\n  &:hover { color: var( --color-accent-mortgage-05-color , rgba(162,0,125,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-mortgage:hover { \n    color: var( --color-accent-mortgage-05-color , rgba(162,0,125,1) ); \n  }\n</style>\n<div id='color-accent-mortgage'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-mortgage-05-hover-text {\n  &:hover { background-color: var( --color-accent-mortgage-05-color , rgba(162,0,125,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-mortgage:hover {\n    background-color: var( --color-accent-mortgage-05-color , rgba(162,0,125,1) );\n  }\n  #color-accent-mortgage {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage'>hover over box</div>"
    }
  },
  "colors-accent-mortgage-": {
    "background": {
      "output": "\n@mixin color-accent-mortgage-background {\n  background-color: var( --color-accent-mortgage-color , rgba(162,0,125,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage {\n    background-color: var( --color-accent-mortgage-color , rgba(162,0,125,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-mortgage-text {\n  color: var( --color-accent-mortgage-color , rgba(162,0,125,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage {\n    color: var( --color-accent-mortgage-color , rgba(162,0,125,1) );\n  }\n</style>\n<div id='color-accent-mortgage'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-mortgage-border {\n  border-color: var( --color-accent-mortgage-color , rgba(162,0,125,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage {\n    border: 1px solid white;\n    border-color: var( --color-accent-mortgage-color , rgba(162,0,125,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-mortgage-hover-text {\n  &:hover { color: var( --color-accent-mortgage-color , rgba(162,0,125,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-mortgage:hover { \n    color: var( --color-accent-mortgage-color , rgba(162,0,125,1) ); \n  }\n</style>\n<div id='color-accent-mortgage'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-mortgage-hover-text {\n  &:hover { background-color: var( --color-accent-mortgage-color , rgba(162,0,125,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-mortgage:hover {\n    background-color: var( --color-accent-mortgage-color , rgba(162,0,125,1) );\n  }\n  #color-accent-mortgage {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage'>hover over box</div>"
    }
  },
  "colors-accent-mortgage-06": {
    "background": {
      "output": "\n@mixin color-accent-mortgage-06-background {\n  background-color: var( --color-accent-mortgage-06-color , rgba(180,47,150,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage {\n    background-color: var( --color-accent-mortgage-06-color , rgba(180,47,150,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-mortgage-06-text {\n  color: var( --color-accent-mortgage-06-color , rgba(180,47,150,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage {\n    color: var( --color-accent-mortgage-06-color , rgba(180,47,150,1) );\n  }\n</style>\n<div id='color-accent-mortgage'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-mortgage-06-border {\n  border-color: var( --color-accent-mortgage-06-color , rgba(180,47,150,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage {\n    border: 1px solid white;\n    border-color: var( --color-accent-mortgage-06-color , rgba(180,47,150,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-mortgage-06-hover-text {\n  &:hover { color: var( --color-accent-mortgage-06-color , rgba(180,47,150,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-mortgage:hover { \n    color: var( --color-accent-mortgage-06-color , rgba(180,47,150,1) ); \n  }\n</style>\n<div id='color-accent-mortgage'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-mortgage-06-hover-text {\n  &:hover { background-color: var( --color-accent-mortgage-06-color , rgba(180,47,150,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-mortgage:hover {\n    background-color: var( --color-accent-mortgage-06-color , rgba(180,47,150,1) );\n  }\n  #color-accent-mortgage {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage'>hover over box</div>"
    }
  },
  "colors-accent-mortgage-light": {
    "background": {
      "output": "\n@mixin color-accent-mortgage-light-background {\n  background-color: var( --color-accent-mortgage-light-color , rgba(180,47,150,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage {\n    background-color: var( --color-accent-mortgage-light-color , rgba(180,47,150,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-mortgage-light-text {\n  color: var( --color-accent-mortgage-light-color , rgba(180,47,150,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage {\n    color: var( --color-accent-mortgage-light-color , rgba(180,47,150,1) );\n  }\n</style>\n<div id='color-accent-mortgage'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-mortgage-light-border {\n  border-color: var( --color-accent-mortgage-light-color , rgba(180,47,150,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage {\n    border: 1px solid white;\n    border-color: var( --color-accent-mortgage-light-color , rgba(180,47,150,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-mortgage-light-hover-text {\n  &:hover { color: var( --color-accent-mortgage-light-color , rgba(180,47,150,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-mortgage:hover { \n    color: var( --color-accent-mortgage-light-color , rgba(180,47,150,1) ); \n  }\n</style>\n<div id='color-accent-mortgage'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-mortgage-light-hover-text {\n  &:hover { background-color: var( --color-accent-mortgage-light-color , rgba(180,47,150,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-mortgage:hover {\n    background-color: var( --color-accent-mortgage-light-color , rgba(180,47,150,1) );\n  }\n  #color-accent-mortgage {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage'>hover over box</div>"
    }
  },
  "colors-accent-mortgage-07": {
    "background": {
      "output": "\n@mixin color-accent-mortgage-07-background {\n  background-color: var( --color-accent-mortgage-07-color , rgba(198,92,174,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage {\n    background-color: var( --color-accent-mortgage-07-color , rgba(198,92,174,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-mortgage-07-text {\n  color: var( --color-accent-mortgage-07-color , rgba(198,92,174,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage {\n    color: var( --color-accent-mortgage-07-color , rgba(198,92,174,1) );\n  }\n</style>\n<div id='color-accent-mortgage'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-mortgage-07-border {\n  border-color: var( --color-accent-mortgage-07-color , rgba(198,92,174,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage {\n    border: 1px solid white;\n    border-color: var( --color-accent-mortgage-07-color , rgba(198,92,174,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-mortgage-07-hover-text {\n  &:hover { color: var( --color-accent-mortgage-07-color , rgba(198,92,174,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-mortgage:hover { \n    color: var( --color-accent-mortgage-07-color , rgba(198,92,174,1) ); \n  }\n</style>\n<div id='color-accent-mortgage'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-mortgage-07-hover-text {\n  &:hover { background-color: var( --color-accent-mortgage-07-color , rgba(198,92,174,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-mortgage:hover {\n    background-color: var( --color-accent-mortgage-07-color , rgba(198,92,174,1) );\n  }\n  #color-accent-mortgage {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage'>hover over box</div>"
    }
  },
  "colors-accent-mortgage-lighter": {
    "background": {
      "output": "\n@mixin color-accent-mortgage-lighter-background {\n  background-color: var( --color-accent-mortgage-lighter-color , rgba(198,92,174,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage {\n    background-color: var( --color-accent-mortgage-lighter-color , rgba(198,92,174,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-mortgage-lighter-text {\n  color: var( --color-accent-mortgage-lighter-color , rgba(198,92,174,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage {\n    color: var( --color-accent-mortgage-lighter-color , rgba(198,92,174,1) );\n  }\n</style>\n<div id='color-accent-mortgage'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-mortgage-lighter-border {\n  border-color: var( --color-accent-mortgage-lighter-color , rgba(198,92,174,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage {\n    border: 1px solid white;\n    border-color: var( --color-accent-mortgage-lighter-color , rgba(198,92,174,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-mortgage-lighter-hover-text {\n  &:hover { color: var( --color-accent-mortgage-lighter-color , rgba(198,92,174,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-mortgage:hover { \n    color: var( --color-accent-mortgage-lighter-color , rgba(198,92,174,1) ); \n  }\n</style>\n<div id='color-accent-mortgage'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-mortgage-lighter-hover-text {\n  &:hover { background-color: var( --color-accent-mortgage-lighter-color , rgba(198,92,174,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-mortgage:hover {\n    background-color: var( --color-accent-mortgage-lighter-color , rgba(198,92,174,1) );\n  }\n  #color-accent-mortgage {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage'>hover over box</div>"
    }
  },
  "colors-accent-mortgage-08": {
    "background": {
      "output": "\n@mixin color-accent-mortgage-08-background {\n  background-color: var( --color-accent-mortgage-08-color , rgba(215,138,197,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage {\n    background-color: var( --color-accent-mortgage-08-color , rgba(215,138,197,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-mortgage-08-text {\n  color: var( --color-accent-mortgage-08-color , rgba(215,138,197,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage {\n    color: var( --color-accent-mortgage-08-color , rgba(215,138,197,1) );\n  }\n</style>\n<div id='color-accent-mortgage'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-mortgage-08-border {\n  border-color: var( --color-accent-mortgage-08-color , rgba(215,138,197,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage {\n    border: 1px solid white;\n    border-color: var( --color-accent-mortgage-08-color , rgba(215,138,197,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-mortgage-08-hover-text {\n  &:hover { color: var( --color-accent-mortgage-08-color , rgba(215,138,197,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-mortgage:hover { \n    color: var( --color-accent-mortgage-08-color , rgba(215,138,197,1) ); \n  }\n</style>\n<div id='color-accent-mortgage'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-mortgage-08-hover-text {\n  &:hover { background-color: var( --color-accent-mortgage-08-color , rgba(215,138,197,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-mortgage:hover {\n    background-color: var( --color-accent-mortgage-08-color , rgba(215,138,197,1) );\n  }\n  #color-accent-mortgage {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage'>hover over box</div>"
    }
  },
  "colors-accent-mortgage-lightest": {
    "background": {
      "output": "\n@mixin color-accent-mortgage-lightest-background {\n  background-color: var( --color-accent-mortgage-lightest-color , rgba(215,138,197,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage {\n    background-color: var( --color-accent-mortgage-lightest-color , rgba(215,138,197,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-mortgage-lightest-text {\n  color: var( --color-accent-mortgage-lightest-color , rgba(215,138,197,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage {\n    color: var( --color-accent-mortgage-lightest-color , rgba(215,138,197,1) );\n  }\n</style>\n<div id='color-accent-mortgage'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-mortgage-lightest-border {\n  border-color: var( --color-accent-mortgage-lightest-color , rgba(215,138,197,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage {\n    border: 1px solid white;\n    border-color: var( --color-accent-mortgage-lightest-color , rgba(215,138,197,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-mortgage-lightest-hover-text {\n  &:hover { color: var( --color-accent-mortgage-lightest-color , rgba(215,138,197,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-mortgage:hover { \n    color: var( --color-accent-mortgage-lightest-color , rgba(215,138,197,1) ); \n  }\n</style>\n<div id='color-accent-mortgage'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-mortgage-lightest-hover-text {\n  &:hover { background-color: var( --color-accent-mortgage-lightest-color , rgba(215,138,197,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-mortgage:hover {\n    background-color: var( --color-accent-mortgage-lightest-color , rgba(215,138,197,1) );\n  }\n  #color-accent-mortgage {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage'>hover over box</div>"
    }
  },
  "colors-accent-mortgage-09": {
    "background": {
      "output": "\n@mixin color-accent-mortgage-09-background {\n  background-color: var( --color-accent-mortgage-09-color , rgba(234,187,223,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage {\n    background-color: var( --color-accent-mortgage-09-color , rgba(234,187,223,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-mortgage-09-text {\n  color: var( --color-accent-mortgage-09-color , rgba(234,187,223,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage {\n    color: var( --color-accent-mortgage-09-color , rgba(234,187,223,1) );\n  }\n</style>\n<div id='color-accent-mortgage'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-mortgage-09-border {\n  border-color: var( --color-accent-mortgage-09-color , rgba(234,187,223,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage {\n    border: 1px solid white;\n    border-color: var( --color-accent-mortgage-09-color , rgba(234,187,223,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-mortgage-09-hover-text {\n  &:hover { color: var( --color-accent-mortgage-09-color , rgba(234,187,223,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-mortgage:hover { \n    color: var( --color-accent-mortgage-09-color , rgba(234,187,223,1) ); \n  }\n</style>\n<div id='color-accent-mortgage'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-mortgage-09-hover-text {\n  &:hover { background-color: var( --color-accent-mortgage-09-color , rgba(234,187,223,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-mortgage:hover {\n    background-color: var( --color-accent-mortgage-09-color , rgba(234,187,223,1) );\n  }\n  #color-accent-mortgage {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage'>hover over box</div>"
    }
  },
  "colors-accent-mortgage-095": {
    "background": {
      "output": "\n@mixin color-accent-mortgage-095-background {\n  background-color: var( --color-accent-mortgage-095-color , rgba(254,239,251,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage {\n    background-color: var( --color-accent-mortgage-095-color , rgba(254,239,251,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-mortgage-095-text {\n  color: var( --color-accent-mortgage-095-color , rgba(254,239,251,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage {\n    color: var( --color-accent-mortgage-095-color , rgba(254,239,251,1) );\n  }\n</style>\n<div id='color-accent-mortgage'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-mortgage-095-border {\n  border-color: var( --color-accent-mortgage-095-color , rgba(254,239,251,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage {\n    border: 1px solid white;\n    border-color: var( --color-accent-mortgage-095-color , rgba(254,239,251,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-mortgage-095-hover-text {\n  &:hover { color: var( --color-accent-mortgage-095-color , rgba(254,239,251,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-mortgage:hover { \n    color: var( --color-accent-mortgage-095-color , rgba(254,239,251,1) ); \n  }\n</style>\n<div id='color-accent-mortgage'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-mortgage-095-hover-text {\n  &:hover { background-color: var( --color-accent-mortgage-095-color , rgba(254,239,251,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-mortgage:hover {\n    background-color: var( --color-accent-mortgage-095-color , rgba(254,239,251,1) );\n  }\n  #color-accent-mortgage {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage'>hover over box</div>"
    }
  },
  "colors-accent-mortgage-text-": {
    "background": {
      "output": "\n@mixin color-accent-mortgage-text-background {\n  background-color: var( --color-accent-mortgage-text-color , rgba(50,1,39,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage-text {\n    background-color: var( --color-accent-mortgage-text-color , rgba(50,1,39,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage-text'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-mortgage-text-text {\n  color: var( --color-accent-mortgage-text-color , rgba(50,1,39,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage-text {\n    color: var( --color-accent-mortgage-text-color , rgba(50,1,39,1) );\n  }\n</style>\n<div id='color-accent-mortgage-text'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-mortgage-text-border {\n  border-color: var( --color-accent-mortgage-text-color , rgba(50,1,39,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage-text {\n    border: 1px solid white;\n    border-color: var( --color-accent-mortgage-text-color , rgba(50,1,39,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage-text'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-mortgage-text-hover-text {\n  &:hover { color: var( --color-accent-mortgage-text-color , rgba(50,1,39,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-mortgage-text:hover { \n    color: var( --color-accent-mortgage-text-color , rgba(50,1,39,1) ); \n  }\n</style>\n<div id='color-accent-mortgage-text'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-mortgage-text-hover-text {\n  &:hover { background-color: var( --color-accent-mortgage-text-color , rgba(50,1,39,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-mortgage-text:hover {\n    background-color: var( --color-accent-mortgage-text-color , rgba(50,1,39,1) );\n  }\n  #color-accent-mortgage-text {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage-text'>hover over box</div>"
    }
  },
  "colors-accent-mortgage-text-light": {
    "background": {
      "output": "\n@mixin color-accent-mortgage-text-light-background {\n  background-color: var( --color-accent-mortgage-text-light-color , rgba(79,1,61,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage-text {\n    background-color: var( --color-accent-mortgage-text-light-color , rgba(79,1,61,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage-text'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-mortgage-text-light-text {\n  color: var( --color-accent-mortgage-text-light-color , rgba(79,1,61,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage-text {\n    color: var( --color-accent-mortgage-text-light-color , rgba(79,1,61,1) );\n  }\n</style>\n<div id='color-accent-mortgage-text'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-mortgage-text-light-border {\n  border-color: var( --color-accent-mortgage-text-light-color , rgba(79,1,61,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage-text {\n    border: 1px solid white;\n    border-color: var( --color-accent-mortgage-text-light-color , rgba(79,1,61,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage-text'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-mortgage-text-light-hover-text {\n  &:hover { color: var( --color-accent-mortgage-text-light-color , rgba(79,1,61,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-mortgage-text:hover { \n    color: var( --color-accent-mortgage-text-light-color , rgba(79,1,61,1) ); \n  }\n</style>\n<div id='color-accent-mortgage-text'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-mortgage-text-light-hover-text {\n  &:hover { background-color: var( --color-accent-mortgage-text-light-color , rgba(79,1,61,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-mortgage-text:hover {\n    background-color: var( --color-accent-mortgage-text-light-color , rgba(79,1,61,1) );\n  }\n  #color-accent-mortgage-text {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage-text'>hover over box</div>"
    }
  },
  "colors-accent-mortgage-text-lighter": {
    "background": {
      "output": "\n@mixin color-accent-mortgage-text-lighter-background {\n  background-color: var( --color-accent-mortgage-text-lighter-color , rgba(107,1,83,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage-text {\n    background-color: var( --color-accent-mortgage-text-lighter-color , rgba(107,1,83,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage-text'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-mortgage-text-lighter-text {\n  color: var( --color-accent-mortgage-text-lighter-color , rgba(107,1,83,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage-text {\n    color: var( --color-accent-mortgage-text-lighter-color , rgba(107,1,83,1) );\n  }\n</style>\n<div id='color-accent-mortgage-text'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-mortgage-text-lighter-border {\n  border-color: var( --color-accent-mortgage-text-lighter-color , rgba(107,1,83,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage-text {\n    border: 1px solid white;\n    border-color: var( --color-accent-mortgage-text-lighter-color , rgba(107,1,83,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage-text'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-mortgage-text-lighter-hover-text {\n  &:hover { color: var( --color-accent-mortgage-text-lighter-color , rgba(107,1,83,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-mortgage-text:hover { \n    color: var( --color-accent-mortgage-text-lighter-color , rgba(107,1,83,1) ); \n  }\n</style>\n<div id='color-accent-mortgage-text'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-mortgage-text-lighter-hover-text {\n  &:hover { background-color: var( --color-accent-mortgage-text-lighter-color , rgba(107,1,83,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-mortgage-text:hover {\n    background-color: var( --color-accent-mortgage-text-lighter-color , rgba(107,1,83,1) );\n  }\n  #color-accent-mortgage-text {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage-text'>hover over box</div>"
    }
  },
  "colors-accent-mortgage-text-lightest": {
    "background": {
      "output": "\n@mixin color-accent-mortgage-text-lightest-background {\n  background-color: var( --color-accent-mortgage-text-lightest-color , rgba(102,0,79,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage-text {\n    background-color: var( --color-accent-mortgage-text-lightest-color , rgba(102,0,79,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage-text'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-mortgage-text-lightest-text {\n  color: var( --color-accent-mortgage-text-lightest-color , rgba(102,0,79,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage-text {\n    color: var( --color-accent-mortgage-text-lightest-color , rgba(102,0,79,1) );\n  }\n</style>\n<div id='color-accent-mortgage-text'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-mortgage-text-lightest-border {\n  border-color: var( --color-accent-mortgage-text-lightest-color , rgba(102,0,79,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage-text {\n    border: 1px solid white;\n    border-color: var( --color-accent-mortgage-text-lightest-color , rgba(102,0,79,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage-text'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-mortgage-text-lightest-hover-text {\n  &:hover { color: var( --color-accent-mortgage-text-lightest-color , rgba(102,0,79,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-mortgage-text:hover { \n    color: var( --color-accent-mortgage-text-lightest-color , rgba(102,0,79,1) ); \n  }\n</style>\n<div id='color-accent-mortgage-text'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-mortgage-text-lightest-hover-text {\n  &:hover { background-color: var( --color-accent-mortgage-text-lightest-color , rgba(102,0,79,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-mortgage-text:hover {\n    background-color: var( --color-accent-mortgage-text-lightest-color , rgba(102,0,79,1) );\n  }\n  #color-accent-mortgage-text {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage-text'>hover over box</div>"
    }
  },
  "colors-accent-mortgage-text-inv": {
    "background": {
      "output": "\n@mixin color-accent-mortgage-text-inv-background {\n  background-color: var( --color-accent-mortgage-text-inv-color , rgba(254,239,251,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage-text {\n    background-color: var( --color-accent-mortgage-text-inv-color , rgba(254,239,251,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage-text'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-mortgage-text-inv-text {\n  color: var( --color-accent-mortgage-text-inv-color , rgba(254,239,251,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage-text {\n    color: var( --color-accent-mortgage-text-inv-color , rgba(254,239,251,1) );\n  }\n</style>\n<div id='color-accent-mortgage-text'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-mortgage-text-inv-border {\n  border-color: var( --color-accent-mortgage-text-inv-color , rgba(254,239,251,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage-text {\n    border: 1px solid white;\n    border-color: var( --color-accent-mortgage-text-inv-color , rgba(254,239,251,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage-text'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-mortgage-text-inv-hover-text {\n  &:hover { color: var( --color-accent-mortgage-text-inv-color , rgba(254,239,251,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-mortgage-text:hover { \n    color: var( --color-accent-mortgage-text-inv-color , rgba(254,239,251,1) ); \n  }\n</style>\n<div id='color-accent-mortgage-text'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-mortgage-text-inv-hover-text {\n  &:hover { background-color: var( --color-accent-mortgage-text-inv-color , rgba(254,239,251,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-mortgage-text:hover {\n    background-color: var( --color-accent-mortgage-text-inv-color , rgba(254,239,251,1) );\n  }\n  #color-accent-mortgage-text {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage-text'>hover over box</div>"
    }
  },
  "colors-accent-mortgage-text-inv-dark": {
    "background": {
      "output": "\n@mixin color-accent-mortgage-text-inv-dark-background {\n  background-color: var( --color-accent-mortgage-text-inv-dark-color , rgba(250,208,241,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage-text {\n    background-color: var( --color-accent-mortgage-text-inv-dark-color , rgba(250,208,241,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage-text'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-mortgage-text-inv-dark-text {\n  color: var( --color-accent-mortgage-text-inv-dark-color , rgba(250,208,241,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage-text {\n    color: var( --color-accent-mortgage-text-inv-dark-color , rgba(250,208,241,1) );\n  }\n</style>\n<div id='color-accent-mortgage-text'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-mortgage-text-inv-dark-border {\n  border-color: var( --color-accent-mortgage-text-inv-dark-color , rgba(250,208,241,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage-text {\n    border: 1px solid white;\n    border-color: var( --color-accent-mortgage-text-inv-dark-color , rgba(250,208,241,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage-text'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-mortgage-text-inv-dark-hover-text {\n  &:hover { color: var( --color-accent-mortgage-text-inv-dark-color , rgba(250,208,241,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-mortgage-text:hover { \n    color: var( --color-accent-mortgage-text-inv-dark-color , rgba(250,208,241,1) ); \n  }\n</style>\n<div id='color-accent-mortgage-text'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-mortgage-text-inv-dark-hover-text {\n  &:hover { background-color: var( --color-accent-mortgage-text-inv-dark-color , rgba(250,208,241,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-mortgage-text:hover {\n    background-color: var( --color-accent-mortgage-text-inv-dark-color , rgba(250,208,241,1) );\n  }\n  #color-accent-mortgage-text {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage-text'>hover over box</div>"
    }
  },
  "colors-accent-mortgage-text-inv-darker": {
    "background": {
      "output": "\n@mixin color-accent-mortgage-text-inv-darker-background {\n  background-color: var( --color-accent-mortgage-text-inv-darker-color , rgba(227,170,214,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage-text {\n    background-color: var( --color-accent-mortgage-text-inv-darker-color , rgba(227,170,214,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage-text'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-mortgage-text-inv-darker-text {\n  color: var( --color-accent-mortgage-text-inv-darker-color , rgba(227,170,214,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage-text {\n    color: var( --color-accent-mortgage-text-inv-darker-color , rgba(227,170,214,1) );\n  }\n</style>\n<div id='color-accent-mortgage-text'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-mortgage-text-inv-darker-border {\n  border-color: var( --color-accent-mortgage-text-inv-darker-color , rgba(227,170,214,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage-text {\n    border: 1px solid white;\n    border-color: var( --color-accent-mortgage-text-inv-darker-color , rgba(227,170,214,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage-text'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-mortgage-text-inv-darker-hover-text {\n  &:hover { color: var( --color-accent-mortgage-text-inv-darker-color , rgba(227,170,214,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-mortgage-text:hover { \n    color: var( --color-accent-mortgage-text-inv-darker-color , rgba(227,170,214,1) ); \n  }\n</style>\n<div id='color-accent-mortgage-text'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-mortgage-text-inv-darker-hover-text {\n  &:hover { background-color: var( --color-accent-mortgage-text-inv-darker-color , rgba(227,170,214,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-mortgage-text:hover {\n    background-color: var( --color-accent-mortgage-text-inv-darker-color , rgba(227,170,214,1) );\n  }\n  #color-accent-mortgage-text {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage-text'>hover over box</div>"
    }
  },
  "colors-accent-mortgage-text-inv-darkest": {
    "background": {
      "output": "\n@mixin color-accent-mortgage-text-inv-darkest-background {\n  background-color: var( --color-accent-mortgage-text-inv-darkest-color , rgba(215,131,196,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage-text {\n    background-color: var( --color-accent-mortgage-text-inv-darkest-color , rgba(215,131,196,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage-text'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-mortgage-text-inv-darkest-text {\n  color: var( --color-accent-mortgage-text-inv-darkest-color , rgba(215,131,196,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage-text {\n    color: var( --color-accent-mortgage-text-inv-darkest-color , rgba(215,131,196,1) );\n  }\n</style>\n<div id='color-accent-mortgage-text'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-mortgage-text-inv-darkest-border {\n  border-color: var( --color-accent-mortgage-text-inv-darkest-color , rgba(215,131,196,1) );\n}",
      "example": "\n<style>\n  #color-accent-mortgage-text {\n    border: 1px solid white;\n    border-color: var( --color-accent-mortgage-text-inv-darkest-color , rgba(215,131,196,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage-text'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-mortgage-text-inv-darkest-hover-text {\n  &:hover { color: var( --color-accent-mortgage-text-inv-darkest-color , rgba(215,131,196,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-mortgage-text:hover { \n    color: var( --color-accent-mortgage-text-inv-darkest-color , rgba(215,131,196,1) ); \n  }\n</style>\n<div id='color-accent-mortgage-text'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-mortgage-text-inv-darkest-hover-text {\n  &:hover { background-color: var( --color-accent-mortgage-text-inv-darkest-color , rgba(215,131,196,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-mortgage-text:hover {\n    background-color: var( --color-accent-mortgage-text-inv-darkest-color , rgba(215,131,196,1) );\n  }\n  #color-accent-mortgage-text {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-mortgage-text'>hover over box</div>"
    }
  },
  "colors-accent-investments-01": {
    "background": {
      "output": "\n@mixin color-accent-investments-01-background {\n  background-color: var( --color-accent-investments-01-color , rgba(7,4,97,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments {\n    background-color: var( --color-accent-investments-01-color , rgba(7,4,97,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-investments-01-text {\n  color: var( --color-accent-investments-01-color , rgba(7,4,97,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments {\n    color: var( --color-accent-investments-01-color , rgba(7,4,97,1) );\n  }\n</style>\n<div id='color-accent-investments'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-investments-01-border {\n  border-color: var( --color-accent-investments-01-color , rgba(7,4,97,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments {\n    border: 1px solid white;\n    border-color: var( --color-accent-investments-01-color , rgba(7,4,97,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-investments-01-hover-text {\n  &:hover { color: var( --color-accent-investments-01-color , rgba(7,4,97,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-investments:hover { \n    color: var( --color-accent-investments-01-color , rgba(7,4,97,1) ); \n  }\n</style>\n<div id='color-accent-investments'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-investments-01-hover-text {\n  &:hover { background-color: var( --color-accent-investments-01-color , rgba(7,4,97,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-investments:hover {\n    background-color: var( --color-accent-investments-01-color , rgba(7,4,97,1) );\n  }\n  #color-accent-investments {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments'>hover over box</div>"
    }
  },
  "colors-accent-investments-02": {
    "background": {
      "output": "\n@mixin color-accent-investments-02-background {\n  background-color: var( --color-accent-investments-02-color , rgba(33,31,118,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments {\n    background-color: var( --color-accent-investments-02-color , rgba(33,31,118,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-investments-02-text {\n  color: var( --color-accent-investments-02-color , rgba(33,31,118,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments {\n    color: var( --color-accent-investments-02-color , rgba(33,31,118,1) );\n  }\n</style>\n<div id='color-accent-investments'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-investments-02-border {\n  border-color: var( --color-accent-investments-02-color , rgba(33,31,118,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments {\n    border: 1px solid white;\n    border-color: var( --color-accent-investments-02-color , rgba(33,31,118,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-investments-02-hover-text {\n  &:hover { color: var( --color-accent-investments-02-color , rgba(33,31,118,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-investments:hover { \n    color: var( --color-accent-investments-02-color , rgba(33,31,118,1) ); \n  }\n</style>\n<div id='color-accent-investments'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-investments-02-hover-text {\n  &:hover { background-color: var( --color-accent-investments-02-color , rgba(33,31,118,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-investments:hover {\n    background-color: var( --color-accent-investments-02-color , rgba(33,31,118,1) );\n  }\n  #color-accent-investments {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments'>hover over box</div>"
    }
  },
  "colors-accent-investments-darkest": {
    "background": {
      "output": "\n@mixin color-accent-investments-darkest-background {\n  background-color: var( --color-accent-investments-darkest-color , rgba(33,31,118,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments {\n    background-color: var( --color-accent-investments-darkest-color , rgba(33,31,118,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-investments-darkest-text {\n  color: var( --color-accent-investments-darkest-color , rgba(33,31,118,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments {\n    color: var( --color-accent-investments-darkest-color , rgba(33,31,118,1) );\n  }\n</style>\n<div id='color-accent-investments'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-investments-darkest-border {\n  border-color: var( --color-accent-investments-darkest-color , rgba(33,31,118,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments {\n    border: 1px solid white;\n    border-color: var( --color-accent-investments-darkest-color , rgba(33,31,118,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-investments-darkest-hover-text {\n  &:hover { color: var( --color-accent-investments-darkest-color , rgba(33,31,118,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-investments:hover { \n    color: var( --color-accent-investments-darkest-color , rgba(33,31,118,1) ); \n  }\n</style>\n<div id='color-accent-investments'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-investments-darkest-hover-text {\n  &:hover { background-color: var( --color-accent-investments-darkest-color , rgba(33,31,118,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-investments:hover {\n    background-color: var( --color-accent-investments-darkest-color , rgba(33,31,118,1) );\n  }\n  #color-accent-investments {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments'>hover over box</div>"
    }
  },
  "colors-accent-investments-03": {
    "background": {
      "output": "\n@mixin color-accent-investments-03-background {\n  background-color: var( --color-accent-investments-03-color , rgba(60,58,139,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments {\n    background-color: var( --color-accent-investments-03-color , rgba(60,58,139,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-investments-03-text {\n  color: var( --color-accent-investments-03-color , rgba(60,58,139,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments {\n    color: var( --color-accent-investments-03-color , rgba(60,58,139,1) );\n  }\n</style>\n<div id='color-accent-investments'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-investments-03-border {\n  border-color: var( --color-accent-investments-03-color , rgba(60,58,139,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments {\n    border: 1px solid white;\n    border-color: var( --color-accent-investments-03-color , rgba(60,58,139,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-investments-03-hover-text {\n  &:hover { color: var( --color-accent-investments-03-color , rgba(60,58,139,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-investments:hover { \n    color: var( --color-accent-investments-03-color , rgba(60,58,139,1) ); \n  }\n</style>\n<div id='color-accent-investments'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-investments-03-hover-text {\n  &:hover { background-color: var( --color-accent-investments-03-color , rgba(60,58,139,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-investments:hover {\n    background-color: var( --color-accent-investments-03-color , rgba(60,58,139,1) );\n  }\n  #color-accent-investments {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments'>hover over box</div>"
    }
  },
  "colors-accent-investments-darker": {
    "background": {
      "output": "\n@mixin color-accent-investments-darker-background {\n  background-color: var( --color-accent-investments-darker-color , rgba(60,58,139,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments {\n    background-color: var( --color-accent-investments-darker-color , rgba(60,58,139,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-investments-darker-text {\n  color: var( --color-accent-investments-darker-color , rgba(60,58,139,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments {\n    color: var( --color-accent-investments-darker-color , rgba(60,58,139,1) );\n  }\n</style>\n<div id='color-accent-investments'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-investments-darker-border {\n  border-color: var( --color-accent-investments-darker-color , rgba(60,58,139,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments {\n    border: 1px solid white;\n    border-color: var( --color-accent-investments-darker-color , rgba(60,58,139,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-investments-darker-hover-text {\n  &:hover { color: var( --color-accent-investments-darker-color , rgba(60,58,139,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-investments:hover { \n    color: var( --color-accent-investments-darker-color , rgba(60,58,139,1) ); \n  }\n</style>\n<div id='color-accent-investments'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-investments-darker-hover-text {\n  &:hover { background-color: var( --color-accent-investments-darker-color , rgba(60,58,139,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-investments:hover {\n    background-color: var( --color-accent-investments-darker-color , rgba(60,58,139,1) );\n  }\n  #color-accent-investments {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments'>hover over box</div>"
    }
  },
  "colors-accent-investments-04": {
    "background": {
      "output": "\n@mixin color-accent-investments-04-background {\n  background-color: var( --color-accent-investments-04-color , rgba(85,82,158,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments {\n    background-color: var( --color-accent-investments-04-color , rgba(85,82,158,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-investments-04-text {\n  color: var( --color-accent-investments-04-color , rgba(85,82,158,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments {\n    color: var( --color-accent-investments-04-color , rgba(85,82,158,1) );\n  }\n</style>\n<div id='color-accent-investments'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-investments-04-border {\n  border-color: var( --color-accent-investments-04-color , rgba(85,82,158,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments {\n    border: 1px solid white;\n    border-color: var( --color-accent-investments-04-color , rgba(85,82,158,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-investments-04-hover-text {\n  &:hover { color: var( --color-accent-investments-04-color , rgba(85,82,158,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-investments:hover { \n    color: var( --color-accent-investments-04-color , rgba(85,82,158,1) ); \n  }\n</style>\n<div id='color-accent-investments'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-investments-04-hover-text {\n  &:hover { background-color: var( --color-accent-investments-04-color , rgba(85,82,158,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-investments:hover {\n    background-color: var( --color-accent-investments-04-color , rgba(85,82,158,1) );\n  }\n  #color-accent-investments {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments'>hover over box</div>"
    }
  },
  "colors-accent-investments-dark": {
    "background": {
      "output": "\n@mixin color-accent-investments-dark-background {\n  background-color: var( --color-accent-investments-dark-color , rgba(85,82,158,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments {\n    background-color: var( --color-accent-investments-dark-color , rgba(85,82,158,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-investments-dark-text {\n  color: var( --color-accent-investments-dark-color , rgba(85,82,158,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments {\n    color: var( --color-accent-investments-dark-color , rgba(85,82,158,1) );\n  }\n</style>\n<div id='color-accent-investments'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-investments-dark-border {\n  border-color: var( --color-accent-investments-dark-color , rgba(85,82,158,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments {\n    border: 1px solid white;\n    border-color: var( --color-accent-investments-dark-color , rgba(85,82,158,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-investments-dark-hover-text {\n  &:hover { color: var( --color-accent-investments-dark-color , rgba(85,82,158,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-investments:hover { \n    color: var( --color-accent-investments-dark-color , rgba(85,82,158,1) ); \n  }\n</style>\n<div id='color-accent-investments'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-investments-dark-hover-text {\n  &:hover { background-color: var( --color-accent-investments-dark-color , rgba(85,82,158,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-investments:hover {\n    background-color: var( --color-accent-investments-dark-color , rgba(85,82,158,1) );\n  }\n  #color-accent-investments {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments'>hover over box</div>"
    }
  },
  "colors-accent-investments-05": {
    "background": {
      "output": "\n@mixin color-accent-investments-05-background {\n  background-color: var( --color-accent-investments-05-color , rgba(113,111,180,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments {\n    background-color: var( --color-accent-investments-05-color , rgba(113,111,180,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-investments-05-text {\n  color: var( --color-accent-investments-05-color , rgba(113,111,180,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments {\n    color: var( --color-accent-investments-05-color , rgba(113,111,180,1) );\n  }\n</style>\n<div id='color-accent-investments'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-investments-05-border {\n  border-color: var( --color-accent-investments-05-color , rgba(113,111,180,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments {\n    border: 1px solid white;\n    border-color: var( --color-accent-investments-05-color , rgba(113,111,180,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-investments-05-hover-text {\n  &:hover { color: var( --color-accent-investments-05-color , rgba(113,111,180,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-investments:hover { \n    color: var( --color-accent-investments-05-color , rgba(113,111,180,1) ); \n  }\n</style>\n<div id='color-accent-investments'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-investments-05-hover-text {\n  &:hover { background-color: var( --color-accent-investments-05-color , rgba(113,111,180,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-investments:hover {\n    background-color: var( --color-accent-investments-05-color , rgba(113,111,180,1) );\n  }\n  #color-accent-investments {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments'>hover over box</div>"
    }
  },
  "colors-accent-investments-": {
    "background": {
      "output": "\n@mixin color-accent-investments-background {\n  background-color: var( --color-accent-investments-color , rgba(113,111,180,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments {\n    background-color: var( --color-accent-investments-color , rgba(113,111,180,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-investments-text {\n  color: var( --color-accent-investments-color , rgba(113,111,180,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments {\n    color: var( --color-accent-investments-color , rgba(113,111,180,1) );\n  }\n</style>\n<div id='color-accent-investments'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-investments-border {\n  border-color: var( --color-accent-investments-color , rgba(113,111,180,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments {\n    border: 1px solid white;\n    border-color: var( --color-accent-investments-color , rgba(113,111,180,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-investments-hover-text {\n  &:hover { color: var( --color-accent-investments-color , rgba(113,111,180,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-investments:hover { \n    color: var( --color-accent-investments-color , rgba(113,111,180,1) ); \n  }\n</style>\n<div id='color-accent-investments'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-investments-hover-text {\n  &:hover { background-color: var( --color-accent-investments-color , rgba(113,111,180,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-investments:hover {\n    background-color: var( --color-accent-investments-color , rgba(113,111,180,1) );\n  }\n  #color-accent-investments {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments'>hover over box</div>"
    }
  },
  "colors-accent-investments-06": {
    "background": {
      "output": "\n@mixin color-accent-investments-06-background {\n  background-color: var( --color-accent-investments-06-color , rgba(139,137,195,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments {\n    background-color: var( --color-accent-investments-06-color , rgba(139,137,195,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-investments-06-text {\n  color: var( --color-accent-investments-06-color , rgba(139,137,195,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments {\n    color: var( --color-accent-investments-06-color , rgba(139,137,195,1) );\n  }\n</style>\n<div id='color-accent-investments'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-investments-06-border {\n  border-color: var( --color-accent-investments-06-color , rgba(139,137,195,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments {\n    border: 1px solid white;\n    border-color: var( --color-accent-investments-06-color , rgba(139,137,195,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-investments-06-hover-text {\n  &:hover { color: var( --color-accent-investments-06-color , rgba(139,137,195,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-investments:hover { \n    color: var( --color-accent-investments-06-color , rgba(139,137,195,1) ); \n  }\n</style>\n<div id='color-accent-investments'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-investments-06-hover-text {\n  &:hover { background-color: var( --color-accent-investments-06-color , rgba(139,137,195,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-investments:hover {\n    background-color: var( --color-accent-investments-06-color , rgba(139,137,195,1) );\n  }\n  #color-accent-investments {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments'>hover over box</div>"
    }
  },
  "colors-accent-investments-light": {
    "background": {
      "output": "\n@mixin color-accent-investments-light-background {\n  background-color: var( --color-accent-investments-light-color , rgba(139,137,195,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments {\n    background-color: var( --color-accent-investments-light-color , rgba(139,137,195,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-investments-light-text {\n  color: var( --color-accent-investments-light-color , rgba(139,137,195,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments {\n    color: var( --color-accent-investments-light-color , rgba(139,137,195,1) );\n  }\n</style>\n<div id='color-accent-investments'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-investments-light-border {\n  border-color: var( --color-accent-investments-light-color , rgba(139,137,195,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments {\n    border: 1px solid white;\n    border-color: var( --color-accent-investments-light-color , rgba(139,137,195,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-investments-light-hover-text {\n  &:hover { color: var( --color-accent-investments-light-color , rgba(139,137,195,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-investments:hover { \n    color: var( --color-accent-investments-light-color , rgba(139,137,195,1) ); \n  }\n</style>\n<div id='color-accent-investments'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-investments-light-hover-text {\n  &:hover { background-color: var( --color-accent-investments-light-color , rgba(139,137,195,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-investments:hover {\n    background-color: var( --color-accent-investments-light-color , rgba(139,137,195,1) );\n  }\n  #color-accent-investments {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments'>hover over box</div>"
    }
  },
  "colors-accent-investments-07": {
    "background": {
      "output": "\n@mixin color-accent-investments-07-background {\n  background-color: var( --color-accent-investments-07-color , rgba(167,165,211,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments {\n    background-color: var( --color-accent-investments-07-color , rgba(167,165,211,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-investments-07-text {\n  color: var( --color-accent-investments-07-color , rgba(167,165,211,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments {\n    color: var( --color-accent-investments-07-color , rgba(167,165,211,1) );\n  }\n</style>\n<div id='color-accent-investments'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-investments-07-border {\n  border-color: var( --color-accent-investments-07-color , rgba(167,165,211,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments {\n    border: 1px solid white;\n    border-color: var( --color-accent-investments-07-color , rgba(167,165,211,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-investments-07-hover-text {\n  &:hover { color: var( --color-accent-investments-07-color , rgba(167,165,211,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-investments:hover { \n    color: var( --color-accent-investments-07-color , rgba(167,165,211,1) ); \n  }\n</style>\n<div id='color-accent-investments'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-investments-07-hover-text {\n  &:hover { background-color: var( --color-accent-investments-07-color , rgba(167,165,211,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-investments:hover {\n    background-color: var( --color-accent-investments-07-color , rgba(167,165,211,1) );\n  }\n  #color-accent-investments {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments'>hover over box</div>"
    }
  },
  "colors-accent-investments-lighter": {
    "background": {
      "output": "\n@mixin color-accent-investments-lighter-background {\n  background-color: var( --color-accent-investments-lighter-color , rgba(167,165,211,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments {\n    background-color: var( --color-accent-investments-lighter-color , rgba(167,165,211,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-investments-lighter-text {\n  color: var( --color-accent-investments-lighter-color , rgba(167,165,211,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments {\n    color: var( --color-accent-investments-lighter-color , rgba(167,165,211,1) );\n  }\n</style>\n<div id='color-accent-investments'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-investments-lighter-border {\n  border-color: var( --color-accent-investments-lighter-color , rgba(167,165,211,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments {\n    border: 1px solid white;\n    border-color: var( --color-accent-investments-lighter-color , rgba(167,165,211,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-investments-lighter-hover-text {\n  &:hover { color: var( --color-accent-investments-lighter-color , rgba(167,165,211,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-investments:hover { \n    color: var( --color-accent-investments-lighter-color , rgba(167,165,211,1) ); \n  }\n</style>\n<div id='color-accent-investments'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-investments-lighter-hover-text {\n  &:hover { background-color: var( --color-accent-investments-lighter-color , rgba(167,165,211,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-investments:hover {\n    background-color: var( --color-accent-investments-lighter-color , rgba(167,165,211,1) );\n  }\n  #color-accent-investments {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments'>hover over box</div>"
    }
  },
  "colors-accent-investments-08": {
    "background": {
      "output": "\n@mixin color-accent-investments-08-background {\n  background-color: var( --color-accent-investments-08-color , rgba(190,189,225,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments {\n    background-color: var( --color-accent-investments-08-color , rgba(190,189,225,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-investments-08-text {\n  color: var( --color-accent-investments-08-color , rgba(190,189,225,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments {\n    color: var( --color-accent-investments-08-color , rgba(190,189,225,1) );\n  }\n</style>\n<div id='color-accent-investments'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-investments-08-border {\n  border-color: var( --color-accent-investments-08-color , rgba(190,189,225,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments {\n    border: 1px solid white;\n    border-color: var( --color-accent-investments-08-color , rgba(190,189,225,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-investments-08-hover-text {\n  &:hover { color: var( --color-accent-investments-08-color , rgba(190,189,225,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-investments:hover { \n    color: var( --color-accent-investments-08-color , rgba(190,189,225,1) ); \n  }\n</style>\n<div id='color-accent-investments'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-investments-08-hover-text {\n  &:hover { background-color: var( --color-accent-investments-08-color , rgba(190,189,225,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-investments:hover {\n    background-color: var( --color-accent-investments-08-color , rgba(190,189,225,1) );\n  }\n  #color-accent-investments {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments'>hover over box</div>"
    }
  },
  "colors-accent-investments-lightest": {
    "background": {
      "output": "\n@mixin color-accent-investments-lightest-background {\n  background-color: var( --color-accent-investments-lightest-color , rgba(190,189,225,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments {\n    background-color: var( --color-accent-investments-lightest-color , rgba(190,189,225,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-investments-lightest-text {\n  color: var( --color-accent-investments-lightest-color , rgba(190,189,225,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments {\n    color: var( --color-accent-investments-lightest-color , rgba(190,189,225,1) );\n  }\n</style>\n<div id='color-accent-investments'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-investments-lightest-border {\n  border-color: var( --color-accent-investments-lightest-color , rgba(190,189,225,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments {\n    border: 1px solid white;\n    border-color: var( --color-accent-investments-lightest-color , rgba(190,189,225,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-investments-lightest-hover-text {\n  &:hover { color: var( --color-accent-investments-lightest-color , rgba(190,189,225,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-investments:hover { \n    color: var( --color-accent-investments-lightest-color , rgba(190,189,225,1) ); \n  }\n</style>\n<div id='color-accent-investments'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-investments-lightest-hover-text {\n  &:hover { background-color: var( --color-accent-investments-lightest-color , rgba(190,189,225,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-investments:hover {\n    background-color: var( --color-accent-investments-lightest-color , rgba(190,189,225,1) );\n  }\n  #color-accent-investments {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments'>hover over box</div>"
    }
  },
  "colors-accent-investments-09": {
    "background": {
      "output": "\n@mixin color-accent-investments-09-background {\n  background-color: var( --color-accent-investments-09-color , rgba(217,216,240,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments {\n    background-color: var( --color-accent-investments-09-color , rgba(217,216,240,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-investments-09-text {\n  color: var( --color-accent-investments-09-color , rgba(217,216,240,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments {\n    color: var( --color-accent-investments-09-color , rgba(217,216,240,1) );\n  }\n</style>\n<div id='color-accent-investments'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-investments-09-border {\n  border-color: var( --color-accent-investments-09-color , rgba(217,216,240,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments {\n    border: 1px solid white;\n    border-color: var( --color-accent-investments-09-color , rgba(217,216,240,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-investments-09-hover-text {\n  &:hover { color: var( --color-accent-investments-09-color , rgba(217,216,240,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-investments:hover { \n    color: var( --color-accent-investments-09-color , rgba(217,216,240,1) ); \n  }\n</style>\n<div id='color-accent-investments'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-investments-09-hover-text {\n  &:hover { background-color: var( --color-accent-investments-09-color , rgba(217,216,240,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-investments:hover {\n    background-color: var( --color-accent-investments-09-color , rgba(217,216,240,1) );\n  }\n  #color-accent-investments {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments'>hover over box</div>"
    }
  },
  "colors-accent-investments-095": {
    "background": {
      "output": "\n@mixin color-accent-investments-095-background {\n  background-color: var( --color-accent-investments-095-color , rgba(240,240,255,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments {\n    background-color: var( --color-accent-investments-095-color , rgba(240,240,255,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-investments-095-text {\n  color: var( --color-accent-investments-095-color , rgba(240,240,255,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments {\n    color: var( --color-accent-investments-095-color , rgba(240,240,255,1) );\n  }\n</style>\n<div id='color-accent-investments'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-investments-095-border {\n  border-color: var( --color-accent-investments-095-color , rgba(240,240,255,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments {\n    border: 1px solid white;\n    border-color: var( --color-accent-investments-095-color , rgba(240,240,255,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-investments-095-hover-text {\n  &:hover { color: var( --color-accent-investments-095-color , rgba(240,240,255,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-investments:hover { \n    color: var( --color-accent-investments-095-color , rgba(240,240,255,1) ); \n  }\n</style>\n<div id='color-accent-investments'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-investments-095-hover-text {\n  &:hover { background-color: var( --color-accent-investments-095-color , rgba(240,240,255,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-investments:hover {\n    background-color: var( --color-accent-investments-095-color , rgba(240,240,255,1) );\n  }\n  #color-accent-investments {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments'>hover over box</div>"
    }
  },
  "colors-accent-investments-text-": {
    "background": {
      "output": "\n@mixin color-accent-investments-text-background {\n  background-color: var( --color-accent-investments-text-color , rgba(1,1,72,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments-text {\n    background-color: var( --color-accent-investments-text-color , rgba(1,1,72,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments-text'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-investments-text-text {\n  color: var( --color-accent-investments-text-color , rgba(1,1,72,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments-text {\n    color: var( --color-accent-investments-text-color , rgba(1,1,72,1) );\n  }\n</style>\n<div id='color-accent-investments-text'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-investments-text-border {\n  border-color: var( --color-accent-investments-text-color , rgba(1,1,72,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments-text {\n    border: 1px solid white;\n    border-color: var( --color-accent-investments-text-color , rgba(1,1,72,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments-text'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-investments-text-hover-text {\n  &:hover { color: var( --color-accent-investments-text-color , rgba(1,1,72,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-investments-text:hover { \n    color: var( --color-accent-investments-text-color , rgba(1,1,72,1) ); \n  }\n</style>\n<div id='color-accent-investments-text'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-investments-text-hover-text {\n  &:hover { background-color: var( --color-accent-investments-text-color , rgba(1,1,72,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-investments-text:hover {\n    background-color: var( --color-accent-investments-text-color , rgba(1,1,72,1) );\n  }\n  #color-accent-investments-text {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments-text'>hover over box</div>"
    }
  },
  "colors-accent-investments-text-light": {
    "background": {
      "output": "\n@mixin color-accent-investments-text-light-background {\n  background-color: var( --color-accent-investments-text-light-color , rgba(18,18,108,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments-text {\n    background-color: var( --color-accent-investments-text-light-color , rgba(18,18,108,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments-text'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-investments-text-light-text {\n  color: var( --color-accent-investments-text-light-color , rgba(18,18,108,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments-text {\n    color: var( --color-accent-investments-text-light-color , rgba(18,18,108,1) );\n  }\n</style>\n<div id='color-accent-investments-text'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-investments-text-light-border {\n  border-color: var( --color-accent-investments-text-light-color , rgba(18,18,108,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments-text {\n    border: 1px solid white;\n    border-color: var( --color-accent-investments-text-light-color , rgba(18,18,108,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments-text'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-investments-text-light-hover-text {\n  &:hover { color: var( --color-accent-investments-text-light-color , rgba(18,18,108,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-investments-text:hover { \n    color: var( --color-accent-investments-text-light-color , rgba(18,18,108,1) ); \n  }\n</style>\n<div id='color-accent-investments-text'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-investments-text-light-hover-text {\n  &:hover { background-color: var( --color-accent-investments-text-light-color , rgba(18,18,108,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-investments-text:hover {\n    background-color: var( --color-accent-investments-text-light-color , rgba(18,18,108,1) );\n  }\n  #color-accent-investments-text {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments-text'>hover over box</div>"
    }
  },
  "colors-accent-investments-text-lighter": {
    "background": {
      "output": "\n@mixin color-accent-investments-text-lighter-background {\n  background-color: var( --color-accent-investments-text-lighter-color , rgba(34,34,139,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments-text {\n    background-color: var( --color-accent-investments-text-lighter-color , rgba(34,34,139,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments-text'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-investments-text-lighter-text {\n  color: var( --color-accent-investments-text-lighter-color , rgba(34,34,139,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments-text {\n    color: var( --color-accent-investments-text-lighter-color , rgba(34,34,139,1) );\n  }\n</style>\n<div id='color-accent-investments-text'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-investments-text-lighter-border {\n  border-color: var( --color-accent-investments-text-lighter-color , rgba(34,34,139,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments-text {\n    border: 1px solid white;\n    border-color: var( --color-accent-investments-text-lighter-color , rgba(34,34,139,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments-text'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-investments-text-lighter-hover-text {\n  &:hover { color: var( --color-accent-investments-text-lighter-color , rgba(34,34,139,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-investments-text:hover { \n    color: var( --color-accent-investments-text-lighter-color , rgba(34,34,139,1) ); \n  }\n</style>\n<div id='color-accent-investments-text'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-investments-text-lighter-hover-text {\n  &:hover { background-color: var( --color-accent-investments-text-lighter-color , rgba(34,34,139,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-investments-text:hover {\n    background-color: var( --color-accent-investments-text-lighter-color , rgba(34,34,139,1) );\n  }\n  #color-accent-investments-text {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments-text'>hover over box</div>"
    }
  },
  "colors-accent-investments-text-lightest": {
    "background": {
      "output": "\n@mixin color-accent-investments-text-lightest-background {\n  background-color: var( --color-accent-investments-text-lightest-color , rgba(47,47,134,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments-text {\n    background-color: var( --color-accent-investments-text-lightest-color , rgba(47,47,134,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments-text'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-investments-text-lightest-text {\n  color: var( --color-accent-investments-text-lightest-color , rgba(47,47,134,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments-text {\n    color: var( --color-accent-investments-text-lightest-color , rgba(47,47,134,1) );\n  }\n</style>\n<div id='color-accent-investments-text'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-investments-text-lightest-border {\n  border-color: var( --color-accent-investments-text-lightest-color , rgba(47,47,134,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments-text {\n    border: 1px solid white;\n    border-color: var( --color-accent-investments-text-lightest-color , rgba(47,47,134,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments-text'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-investments-text-lightest-hover-text {\n  &:hover { color: var( --color-accent-investments-text-lightest-color , rgba(47,47,134,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-investments-text:hover { \n    color: var( --color-accent-investments-text-lightest-color , rgba(47,47,134,1) ); \n  }\n</style>\n<div id='color-accent-investments-text'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-investments-text-lightest-hover-text {\n  &:hover { background-color: var( --color-accent-investments-text-lightest-color , rgba(47,47,134,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-investments-text:hover {\n    background-color: var( --color-accent-investments-text-lightest-color , rgba(47,47,134,1) );\n  }\n  #color-accent-investments-text {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments-text'>hover over box</div>"
    }
  },
  "colors-accent-investments-text-inv": {
    "background": {
      "output": "\n@mixin color-accent-investments-text-inv-background {\n  background-color: var( --color-accent-investments-text-inv-color , rgba(238,238,255,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments-text {\n    background-color: var( --color-accent-investments-text-inv-color , rgba(238,238,255,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments-text'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-investments-text-inv-text {\n  color: var( --color-accent-investments-text-inv-color , rgba(238,238,255,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments-text {\n    color: var( --color-accent-investments-text-inv-color , rgba(238,238,255,1) );\n  }\n</style>\n<div id='color-accent-investments-text'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-investments-text-inv-border {\n  border-color: var( --color-accent-investments-text-inv-color , rgba(238,238,255,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments-text {\n    border: 1px solid white;\n    border-color: var( --color-accent-investments-text-inv-color , rgba(238,238,255,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments-text'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-investments-text-inv-hover-text {\n  &:hover { color: var( --color-accent-investments-text-inv-color , rgba(238,238,255,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-investments-text:hover { \n    color: var( --color-accent-investments-text-inv-color , rgba(238,238,255,1) ); \n  }\n</style>\n<div id='color-accent-investments-text'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-investments-text-inv-hover-text {\n  &:hover { background-color: var( --color-accent-investments-text-inv-color , rgba(238,238,255,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-investments-text:hover {\n    background-color: var( --color-accent-investments-text-inv-color , rgba(238,238,255,1) );\n  }\n  #color-accent-investments-text {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments-text'>hover over box</div>"
    }
  },
  "colors-accent-investments-text-inv-dark": {
    "background": {
      "output": "\n@mixin color-accent-investments-text-inv-dark-background {\n  background-color: var( --color-accent-investments-text-inv-dark-color , rgba(214,214,242,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments-text {\n    background-color: var( --color-accent-investments-text-inv-dark-color , rgba(214,214,242,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments-text'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-investments-text-inv-dark-text {\n  color: var( --color-accent-investments-text-inv-dark-color , rgba(214,214,242,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments-text {\n    color: var( --color-accent-investments-text-inv-dark-color , rgba(214,214,242,1) );\n  }\n</style>\n<div id='color-accent-investments-text'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-investments-text-inv-dark-border {\n  border-color: var( --color-accent-investments-text-inv-dark-color , rgba(214,214,242,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments-text {\n    border: 1px solid white;\n    border-color: var( --color-accent-investments-text-inv-dark-color , rgba(214,214,242,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments-text'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-investments-text-inv-dark-hover-text {\n  &:hover { color: var( --color-accent-investments-text-inv-dark-color , rgba(214,214,242,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-investments-text:hover { \n    color: var( --color-accent-investments-text-inv-dark-color , rgba(214,214,242,1) ); \n  }\n</style>\n<div id='color-accent-investments-text'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-investments-text-inv-dark-hover-text {\n  &:hover { background-color: var( --color-accent-investments-text-inv-dark-color , rgba(214,214,242,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-investments-text:hover {\n    background-color: var( --color-accent-investments-text-inv-dark-color , rgba(214,214,242,1) );\n  }\n  #color-accent-investments-text {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments-text'>hover over box</div>"
    }
  },
  "colors-accent-investments-text-inv-darker": {
    "background": {
      "output": "\n@mixin color-accent-investments-text-inv-darker-background {\n  background-color: var( --color-accent-investments-text-inv-darker-color , rgba(171,171,219,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments-text {\n    background-color: var( --color-accent-investments-text-inv-darker-color , rgba(171,171,219,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments-text'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-investments-text-inv-darker-text {\n  color: var( --color-accent-investments-text-inv-darker-color , rgba(171,171,219,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments-text {\n    color: var( --color-accent-investments-text-inv-darker-color , rgba(171,171,219,1) );\n  }\n</style>\n<div id='color-accent-investments-text'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-investments-text-inv-darker-border {\n  border-color: var( --color-accent-investments-text-inv-darker-color , rgba(171,171,219,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments-text {\n    border: 1px solid white;\n    border-color: var( --color-accent-investments-text-inv-darker-color , rgba(171,171,219,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments-text'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-investments-text-inv-darker-hover-text {\n  &:hover { color: var( --color-accent-investments-text-inv-darker-color , rgba(171,171,219,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-investments-text:hover { \n    color: var( --color-accent-investments-text-inv-darker-color , rgba(171,171,219,1) ); \n  }\n</style>\n<div id='color-accent-investments-text'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-investments-text-inv-darker-hover-text {\n  &:hover { background-color: var( --color-accent-investments-text-inv-darker-color , rgba(171,171,219,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-investments-text:hover {\n    background-color: var( --color-accent-investments-text-inv-darker-color , rgba(171,171,219,1) );\n  }\n  #color-accent-investments-text {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments-text'>hover over box</div>"
    }
  },
  "colors-accent-investments-text-inv-darkest": {
    "background": {
      "output": "\n@mixin color-accent-investments-text-inv-darkest-background {\n  background-color: var( --color-accent-investments-text-inv-darkest-color , rgba(139,139,199,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments-text {\n    background-color: var( --color-accent-investments-text-inv-darkest-color , rgba(139,139,199,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments-text'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-investments-text-inv-darkest-text {\n  color: var( --color-accent-investments-text-inv-darkest-color , rgba(139,139,199,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments-text {\n    color: var( --color-accent-investments-text-inv-darkest-color , rgba(139,139,199,1) );\n  }\n</style>\n<div id='color-accent-investments-text'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-investments-text-inv-darkest-border {\n  border-color: var( --color-accent-investments-text-inv-darkest-color , rgba(139,139,199,1) );\n}",
      "example": "\n<style>\n  #color-accent-investments-text {\n    border: 1px solid white;\n    border-color: var( --color-accent-investments-text-inv-darkest-color , rgba(139,139,199,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments-text'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-investments-text-inv-darkest-hover-text {\n  &:hover { color: var( --color-accent-investments-text-inv-darkest-color , rgba(139,139,199,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-investments-text:hover { \n    color: var( --color-accent-investments-text-inv-darkest-color , rgba(139,139,199,1) ); \n  }\n</style>\n<div id='color-accent-investments-text'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-investments-text-inv-darkest-hover-text {\n  &:hover { background-color: var( --color-accent-investments-text-inv-darkest-color , rgba(139,139,199,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-investments-text:hover {\n    background-color: var( --color-accent-investments-text-inv-darkest-color , rgba(139,139,199,1) );\n  }\n  #color-accent-investments-text {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-investments-text'>hover over box</div>"
    }
  },
  "colors-accent-credit-cards-01": {
    "background": {
      "output": "\n@mixin color-accent-credit-cards-01-background {\n  background-color: var( --color-accent-credit-cards-01-color , rgba(1,51,77,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards {\n    background-color: var( --color-accent-credit-cards-01-color , rgba(1,51,77,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-credit-cards-01-text {\n  color: var( --color-accent-credit-cards-01-color , rgba(1,51,77,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards {\n    color: var( --color-accent-credit-cards-01-color , rgba(1,51,77,1) );\n  }\n</style>\n<div id='color-accent-credit-cards'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-credit-cards-01-border {\n  border-color: var( --color-accent-credit-cards-01-color , rgba(1,51,77,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards {\n    border: 1px solid white;\n    border-color: var( --color-accent-credit-cards-01-color , rgba(1,51,77,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-credit-cards-01-hover-text {\n  &:hover { color: var( --color-accent-credit-cards-01-color , rgba(1,51,77,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-credit-cards:hover { \n    color: var( --color-accent-credit-cards-01-color , rgba(1,51,77,1) ); \n  }\n</style>\n<div id='color-accent-credit-cards'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-credit-cards-01-hover-text {\n  &:hover { background-color: var( --color-accent-credit-cards-01-color , rgba(1,51,77,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-credit-cards:hover {\n    background-color: var( --color-accent-credit-cards-01-color , rgba(1,51,77,1) );\n  }\n  #color-accent-credit-cards {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards'>hover over box</div>"
    }
  },
  "colors-accent-credit-cards-02": {
    "background": {
      "output": "\n@mixin color-accent-credit-cards-02-background {\n  background-color: var( --color-accent-credit-cards-02-color , rgba(1,70,106,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards {\n    background-color: var( --color-accent-credit-cards-02-color , rgba(1,70,106,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-credit-cards-02-text {\n  color: var( --color-accent-credit-cards-02-color , rgba(1,70,106,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards {\n    color: var( --color-accent-credit-cards-02-color , rgba(1,70,106,1) );\n  }\n</style>\n<div id='color-accent-credit-cards'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-credit-cards-02-border {\n  border-color: var( --color-accent-credit-cards-02-color , rgba(1,70,106,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards {\n    border: 1px solid white;\n    border-color: var( --color-accent-credit-cards-02-color , rgba(1,70,106,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-credit-cards-02-hover-text {\n  &:hover { color: var( --color-accent-credit-cards-02-color , rgba(1,70,106,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-credit-cards:hover { \n    color: var( --color-accent-credit-cards-02-color , rgba(1,70,106,1) ); \n  }\n</style>\n<div id='color-accent-credit-cards'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-credit-cards-02-hover-text {\n  &:hover { background-color: var( --color-accent-credit-cards-02-color , rgba(1,70,106,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-credit-cards:hover {\n    background-color: var( --color-accent-credit-cards-02-color , rgba(1,70,106,1) );\n  }\n  #color-accent-credit-cards {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards'>hover over box</div>"
    }
  },
  "colors-accent-credit-cards-darkest": {
    "background": {
      "output": "\n@mixin color-accent-credit-cards-darkest-background {\n  background-color: var( --color-accent-credit-cards-darkest-color , rgba(1,70,106,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards {\n    background-color: var( --color-accent-credit-cards-darkest-color , rgba(1,70,106,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-credit-cards-darkest-text {\n  color: var( --color-accent-credit-cards-darkest-color , rgba(1,70,106,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards {\n    color: var( --color-accent-credit-cards-darkest-color , rgba(1,70,106,1) );\n  }\n</style>\n<div id='color-accent-credit-cards'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-credit-cards-darkest-border {\n  border-color: var( --color-accent-credit-cards-darkest-color , rgba(1,70,106,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards {\n    border: 1px solid white;\n    border-color: var( --color-accent-credit-cards-darkest-color , rgba(1,70,106,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-credit-cards-darkest-hover-text {\n  &:hover { color: var( --color-accent-credit-cards-darkest-color , rgba(1,70,106,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-credit-cards:hover { \n    color: var( --color-accent-credit-cards-darkest-color , rgba(1,70,106,1) ); \n  }\n</style>\n<div id='color-accent-credit-cards'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-credit-cards-darkest-hover-text {\n  &:hover { background-color: var( --color-accent-credit-cards-darkest-color , rgba(1,70,106,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-credit-cards:hover {\n    background-color: var( --color-accent-credit-cards-darkest-color , rgba(1,70,106,1) );\n  }\n  #color-accent-credit-cards {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards'>hover over box</div>"
    }
  },
  "colors-accent-credit-cards-03": {
    "background": {
      "output": "\n@mixin color-accent-credit-cards-03-background {\n  background-color: var( --color-accent-credit-cards-03-color , rgba(1,88,132,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards {\n    background-color: var( --color-accent-credit-cards-03-color , rgba(1,88,132,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-credit-cards-03-text {\n  color: var( --color-accent-credit-cards-03-color , rgba(1,88,132,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards {\n    color: var( --color-accent-credit-cards-03-color , rgba(1,88,132,1) );\n  }\n</style>\n<div id='color-accent-credit-cards'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-credit-cards-03-border {\n  border-color: var( --color-accent-credit-cards-03-color , rgba(1,88,132,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards {\n    border: 1px solid white;\n    border-color: var( --color-accent-credit-cards-03-color , rgba(1,88,132,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-credit-cards-03-hover-text {\n  &:hover { color: var( --color-accent-credit-cards-03-color , rgba(1,88,132,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-credit-cards:hover { \n    color: var( --color-accent-credit-cards-03-color , rgba(1,88,132,1) ); \n  }\n</style>\n<div id='color-accent-credit-cards'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-credit-cards-03-hover-text {\n  &:hover { background-color: var( --color-accent-credit-cards-03-color , rgba(1,88,132,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-credit-cards:hover {\n    background-color: var( --color-accent-credit-cards-03-color , rgba(1,88,132,1) );\n  }\n  #color-accent-credit-cards {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards'>hover over box</div>"
    }
  },
  "colors-accent-credit-cards-darker": {
    "background": {
      "output": "\n@mixin color-accent-credit-cards-darker-background {\n  background-color: var( --color-accent-credit-cards-darker-color , rgba(1,88,132,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards {\n    background-color: var( --color-accent-credit-cards-darker-color , rgba(1,88,132,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-credit-cards-darker-text {\n  color: var( --color-accent-credit-cards-darker-color , rgba(1,88,132,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards {\n    color: var( --color-accent-credit-cards-darker-color , rgba(1,88,132,1) );\n  }\n</style>\n<div id='color-accent-credit-cards'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-credit-cards-darker-border {\n  border-color: var( --color-accent-credit-cards-darker-color , rgba(1,88,132,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards {\n    border: 1px solid white;\n    border-color: var( --color-accent-credit-cards-darker-color , rgba(1,88,132,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-credit-cards-darker-hover-text {\n  &:hover { color: var( --color-accent-credit-cards-darker-color , rgba(1,88,132,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-credit-cards:hover { \n    color: var( --color-accent-credit-cards-darker-color , rgba(1,88,132,1) ); \n  }\n</style>\n<div id='color-accent-credit-cards'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-credit-cards-darker-hover-text {\n  &:hover { background-color: var( --color-accent-credit-cards-darker-color , rgba(1,88,132,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-credit-cards:hover {\n    background-color: var( --color-accent-credit-cards-darker-color , rgba(1,88,132,1) );\n  }\n  #color-accent-credit-cards {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards'>hover over box</div>"
    }
  },
  "colors-accent-credit-cards-04": {
    "background": {
      "output": "\n@mixin color-accent-credit-cards-04-background {\n  background-color: var( --color-accent-credit-cards-04-color , rgba(1,104,157,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards {\n    background-color: var( --color-accent-credit-cards-04-color , rgba(1,104,157,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-credit-cards-04-text {\n  color: var( --color-accent-credit-cards-04-color , rgba(1,104,157,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards {\n    color: var( --color-accent-credit-cards-04-color , rgba(1,104,157,1) );\n  }\n</style>\n<div id='color-accent-credit-cards'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-credit-cards-04-border {\n  border-color: var( --color-accent-credit-cards-04-color , rgba(1,104,157,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards {\n    border: 1px solid white;\n    border-color: var( --color-accent-credit-cards-04-color , rgba(1,104,157,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-credit-cards-04-hover-text {\n  &:hover { color: var( --color-accent-credit-cards-04-color , rgba(1,104,157,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-credit-cards:hover { \n    color: var( --color-accent-credit-cards-04-color , rgba(1,104,157,1) ); \n  }\n</style>\n<div id='color-accent-credit-cards'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-credit-cards-04-hover-text {\n  &:hover { background-color: var( --color-accent-credit-cards-04-color , rgba(1,104,157,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-credit-cards:hover {\n    background-color: var( --color-accent-credit-cards-04-color , rgba(1,104,157,1) );\n  }\n  #color-accent-credit-cards {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards'>hover over box</div>"
    }
  },
  "colors-accent-credit-cards-dark": {
    "background": {
      "output": "\n@mixin color-accent-credit-cards-dark-background {\n  background-color: var( --color-accent-credit-cards-dark-color , rgba(1,104,157,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards {\n    background-color: var( --color-accent-credit-cards-dark-color , rgba(1,104,157,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-credit-cards-dark-text {\n  color: var( --color-accent-credit-cards-dark-color , rgba(1,104,157,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards {\n    color: var( --color-accent-credit-cards-dark-color , rgba(1,104,157,1) );\n  }\n</style>\n<div id='color-accent-credit-cards'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-credit-cards-dark-border {\n  border-color: var( --color-accent-credit-cards-dark-color , rgba(1,104,157,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards {\n    border: 1px solid white;\n    border-color: var( --color-accent-credit-cards-dark-color , rgba(1,104,157,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-credit-cards-dark-hover-text {\n  &:hover { color: var( --color-accent-credit-cards-dark-color , rgba(1,104,157,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-credit-cards:hover { \n    color: var( --color-accent-credit-cards-dark-color , rgba(1,104,157,1) ); \n  }\n</style>\n<div id='color-accent-credit-cards'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-credit-cards-dark-hover-text {\n  &:hover { background-color: var( --color-accent-credit-cards-dark-color , rgba(1,104,157,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-credit-cards:hover {\n    background-color: var( --color-accent-credit-cards-dark-color , rgba(1,104,157,1) );\n  }\n  #color-accent-credit-cards {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards'>hover over box</div>"
    }
  },
  "colors-accent-credit-cards-05": {
    "background": {
      "output": "\n@mixin color-accent-credit-cards-05-background {\n  background-color: var( --color-accent-credit-cards-05-color , rgba(0,122,185,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards {\n    background-color: var( --color-accent-credit-cards-05-color , rgba(0,122,185,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-credit-cards-05-text {\n  color: var( --color-accent-credit-cards-05-color , rgba(0,122,185,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards {\n    color: var( --color-accent-credit-cards-05-color , rgba(0,122,185,1) );\n  }\n</style>\n<div id='color-accent-credit-cards'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-credit-cards-05-border {\n  border-color: var( --color-accent-credit-cards-05-color , rgba(0,122,185,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards {\n    border: 1px solid white;\n    border-color: var( --color-accent-credit-cards-05-color , rgba(0,122,185,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-credit-cards-05-hover-text {\n  &:hover { color: var( --color-accent-credit-cards-05-color , rgba(0,122,185,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-credit-cards:hover { \n    color: var( --color-accent-credit-cards-05-color , rgba(0,122,185,1) ); \n  }\n</style>\n<div id='color-accent-credit-cards'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-credit-cards-05-hover-text {\n  &:hover { background-color: var( --color-accent-credit-cards-05-color , rgba(0,122,185,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-credit-cards:hover {\n    background-color: var( --color-accent-credit-cards-05-color , rgba(0,122,185,1) );\n  }\n  #color-accent-credit-cards {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards'>hover over box</div>"
    }
  },
  "colors-accent-credit-cards-": {
    "background": {
      "output": "\n@mixin color-accent-credit-cards-background {\n  background-color: var( --color-accent-credit-cards-color , rgba(0,122,185,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards {\n    background-color: var( --color-accent-credit-cards-color , rgba(0,122,185,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-credit-cards-text {\n  color: var( --color-accent-credit-cards-color , rgba(0,122,185,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards {\n    color: var( --color-accent-credit-cards-color , rgba(0,122,185,1) );\n  }\n</style>\n<div id='color-accent-credit-cards'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-credit-cards-border {\n  border-color: var( --color-accent-credit-cards-color , rgba(0,122,185,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards {\n    border: 1px solid white;\n    border-color: var( --color-accent-credit-cards-color , rgba(0,122,185,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-credit-cards-hover-text {\n  &:hover { color: var( --color-accent-credit-cards-color , rgba(0,122,185,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-credit-cards:hover { \n    color: var( --color-accent-credit-cards-color , rgba(0,122,185,1) ); \n  }\n</style>\n<div id='color-accent-credit-cards'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-credit-cards-hover-text {\n  &:hover { background-color: var( --color-accent-credit-cards-color , rgba(0,122,185,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-credit-cards:hover {\n    background-color: var( --color-accent-credit-cards-color , rgba(0,122,185,1) );\n  }\n  #color-accent-credit-cards {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards'>hover over box</div>"
    }
  },
  "colors-accent-credit-cards-06": {
    "background": {
      "output": "\n@mixin color-accent-credit-cards-06-background {\n  background-color: var( --color-accent-credit-cards-06-color , rgba(46,147,199,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards {\n    background-color: var( --color-accent-credit-cards-06-color , rgba(46,147,199,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-credit-cards-06-text {\n  color: var( --color-accent-credit-cards-06-color , rgba(46,147,199,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards {\n    color: var( --color-accent-credit-cards-06-color , rgba(46,147,199,1) );\n  }\n</style>\n<div id='color-accent-credit-cards'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-credit-cards-06-border {\n  border-color: var( --color-accent-credit-cards-06-color , rgba(46,147,199,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards {\n    border: 1px solid white;\n    border-color: var( --color-accent-credit-cards-06-color , rgba(46,147,199,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-credit-cards-06-hover-text {\n  &:hover { color: var( --color-accent-credit-cards-06-color , rgba(46,147,199,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-credit-cards:hover { \n    color: var( --color-accent-credit-cards-06-color , rgba(46,147,199,1) ); \n  }\n</style>\n<div id='color-accent-credit-cards'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-credit-cards-06-hover-text {\n  &:hover { background-color: var( --color-accent-credit-cards-06-color , rgba(46,147,199,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-credit-cards:hover {\n    background-color: var( --color-accent-credit-cards-06-color , rgba(46,147,199,1) );\n  }\n  #color-accent-credit-cards {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards'>hover over box</div>"
    }
  },
  "colors-accent-credit-cards-light": {
    "background": {
      "output": "\n@mixin color-accent-credit-cards-light-background {\n  background-color: var( --color-accent-credit-cards-light-color , rgba(46,147,199,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards {\n    background-color: var( --color-accent-credit-cards-light-color , rgba(46,147,199,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-credit-cards-light-text {\n  color: var( --color-accent-credit-cards-light-color , rgba(46,147,199,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards {\n    color: var( --color-accent-credit-cards-light-color , rgba(46,147,199,1) );\n  }\n</style>\n<div id='color-accent-credit-cards'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-credit-cards-light-border {\n  border-color: var( --color-accent-credit-cards-light-color , rgba(46,147,199,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards {\n    border: 1px solid white;\n    border-color: var( --color-accent-credit-cards-light-color , rgba(46,147,199,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-credit-cards-light-hover-text {\n  &:hover { color: var( --color-accent-credit-cards-light-color , rgba(46,147,199,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-credit-cards:hover { \n    color: var( --color-accent-credit-cards-light-color , rgba(46,147,199,1) ); \n  }\n</style>\n<div id='color-accent-credit-cards'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-credit-cards-light-hover-text {\n  &:hover { background-color: var( --color-accent-credit-cards-light-color , rgba(46,147,199,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-credit-cards:hover {\n    background-color: var( --color-accent-credit-cards-light-color , rgba(46,147,199,1) );\n  }\n  #color-accent-credit-cards {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards'>hover over box</div>"
    }
  },
  "colors-accent-credit-cards-07": {
    "background": {
      "output": "\n@mixin color-accent-credit-cards-07-background {\n  background-color: var( --color-accent-credit-cards-07-color , rgba(94,173,213,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards {\n    background-color: var( --color-accent-credit-cards-07-color , rgba(94,173,213,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-credit-cards-07-text {\n  color: var( --color-accent-credit-cards-07-color , rgba(94,173,213,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards {\n    color: var( --color-accent-credit-cards-07-color , rgba(94,173,213,1) );\n  }\n</style>\n<div id='color-accent-credit-cards'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-credit-cards-07-border {\n  border-color: var( --color-accent-credit-cards-07-color , rgba(94,173,213,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards {\n    border: 1px solid white;\n    border-color: var( --color-accent-credit-cards-07-color , rgba(94,173,213,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-credit-cards-07-hover-text {\n  &:hover { color: var( --color-accent-credit-cards-07-color , rgba(94,173,213,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-credit-cards:hover { \n    color: var( --color-accent-credit-cards-07-color , rgba(94,173,213,1) ); \n  }\n</style>\n<div id='color-accent-credit-cards'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-credit-cards-07-hover-text {\n  &:hover { background-color: var( --color-accent-credit-cards-07-color , rgba(94,173,213,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-credit-cards:hover {\n    background-color: var( --color-accent-credit-cards-07-color , rgba(94,173,213,1) );\n  }\n  #color-accent-credit-cards {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards'>hover over box</div>"
    }
  },
  "colors-accent-credit-cards-lighter": {
    "background": {
      "output": "\n@mixin color-accent-credit-cards-lighter-background {\n  background-color: var( --color-accent-credit-cards-lighter-color , rgba(94,173,213,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards {\n    background-color: var( --color-accent-credit-cards-lighter-color , rgba(94,173,213,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-credit-cards-lighter-text {\n  color: var( --color-accent-credit-cards-lighter-color , rgba(94,173,213,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards {\n    color: var( --color-accent-credit-cards-lighter-color , rgba(94,173,213,1) );\n  }\n</style>\n<div id='color-accent-credit-cards'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-credit-cards-lighter-border {\n  border-color: var( --color-accent-credit-cards-lighter-color , rgba(94,173,213,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards {\n    border: 1px solid white;\n    border-color: var( --color-accent-credit-cards-lighter-color , rgba(94,173,213,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-credit-cards-lighter-hover-text {\n  &:hover { color: var( --color-accent-credit-cards-lighter-color , rgba(94,173,213,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-credit-cards:hover { \n    color: var( --color-accent-credit-cards-lighter-color , rgba(94,173,213,1) ); \n  }\n</style>\n<div id='color-accent-credit-cards'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-credit-cards-lighter-hover-text {\n  &:hover { background-color: var( --color-accent-credit-cards-lighter-color , rgba(94,173,213,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-credit-cards:hover {\n    background-color: var( --color-accent-credit-cards-lighter-color , rgba(94,173,213,1) );\n  }\n  #color-accent-credit-cards {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards'>hover over box</div>"
    }
  },
  "colors-accent-credit-cards-08": {
    "background": {
      "output": "\n@mixin color-accent-credit-cards-08-background {\n  background-color: var( --color-accent-credit-cards-08-color , rgba(140,197,227,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards {\n    background-color: var( --color-accent-credit-cards-08-color , rgba(140,197,227,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-credit-cards-08-text {\n  color: var( --color-accent-credit-cards-08-color , rgba(140,197,227,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards {\n    color: var( --color-accent-credit-cards-08-color , rgba(140,197,227,1) );\n  }\n</style>\n<div id='color-accent-credit-cards'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-credit-cards-08-border {\n  border-color: var( --color-accent-credit-cards-08-color , rgba(140,197,227,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards {\n    border: 1px solid white;\n    border-color: var( --color-accent-credit-cards-08-color , rgba(140,197,227,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-credit-cards-08-hover-text {\n  &:hover { color: var( --color-accent-credit-cards-08-color , rgba(140,197,227,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-credit-cards:hover { \n    color: var( --color-accent-credit-cards-08-color , rgba(140,197,227,1) ); \n  }\n</style>\n<div id='color-accent-credit-cards'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-credit-cards-08-hover-text {\n  &:hover { background-color: var( --color-accent-credit-cards-08-color , rgba(140,197,227,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-credit-cards:hover {\n    background-color: var( --color-accent-credit-cards-08-color , rgba(140,197,227,1) );\n  }\n  #color-accent-credit-cards {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards'>hover over box</div>"
    }
  },
  "colors-accent-credit-cards-lightest": {
    "background": {
      "output": "\n@mixin color-accent-credit-cards-lightest-background {\n  background-color: var( --color-accent-credit-cards-lightest-color , rgba(140,197,227,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards {\n    background-color: var( --color-accent-credit-cards-lightest-color , rgba(140,197,227,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-credit-cards-lightest-text {\n  color: var( --color-accent-credit-cards-lightest-color , rgba(140,197,227,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards {\n    color: var( --color-accent-credit-cards-lightest-color , rgba(140,197,227,1) );\n  }\n</style>\n<div id='color-accent-credit-cards'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-credit-cards-lightest-border {\n  border-color: var( --color-accent-credit-cards-lightest-color , rgba(140,197,227,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards {\n    border: 1px solid white;\n    border-color: var( --color-accent-credit-cards-lightest-color , rgba(140,197,227,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-credit-cards-lightest-hover-text {\n  &:hover { color: var( --color-accent-credit-cards-lightest-color , rgba(140,197,227,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-credit-cards:hover { \n    color: var( --color-accent-credit-cards-lightest-color , rgba(140,197,227,1) ); \n  }\n</style>\n<div id='color-accent-credit-cards'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-credit-cards-lightest-hover-text {\n  &:hover { background-color: var( --color-accent-credit-cards-lightest-color , rgba(140,197,227,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-credit-cards:hover {\n    background-color: var( --color-accent-credit-cards-lightest-color , rgba(140,197,227,1) );\n  }\n  #color-accent-credit-cards {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards'>hover over box</div>"
    }
  },
  "colors-accent-credit-cards-09": {
    "background": {
      "output": "\n@mixin color-accent-credit-cards-09-background {\n  background-color: var( --color-accent-credit-cards-09-color , rgba(189,224,242,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards {\n    background-color: var( --color-accent-credit-cards-09-color , rgba(189,224,242,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-credit-cards-09-text {\n  color: var( --color-accent-credit-cards-09-color , rgba(189,224,242,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards {\n    color: var( --color-accent-credit-cards-09-color , rgba(189,224,242,1) );\n  }\n</style>\n<div id='color-accent-credit-cards'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-credit-cards-09-border {\n  border-color: var( --color-accent-credit-cards-09-color , rgba(189,224,242,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards {\n    border: 1px solid white;\n    border-color: var( --color-accent-credit-cards-09-color , rgba(189,224,242,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-credit-cards-09-hover-text {\n  &:hover { color: var( --color-accent-credit-cards-09-color , rgba(189,224,242,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-credit-cards:hover { \n    color: var( --color-accent-credit-cards-09-color , rgba(189,224,242,1) ); \n  }\n</style>\n<div id='color-accent-credit-cards'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-credit-cards-09-hover-text {\n  &:hover { background-color: var( --color-accent-credit-cards-09-color , rgba(189,224,242,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-credit-cards:hover {\n    background-color: var( --color-accent-credit-cards-09-color , rgba(189,224,242,1) );\n  }\n  #color-accent-credit-cards {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards'>hover over box</div>"
    }
  },
  "colors-accent-credit-cards-095": {
    "background": {
      "output": "\n@mixin color-accent-credit-cards-095-background {\n  background-color: var( --color-accent-credit-cards-095-color , rgba(236,249,255,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards {\n    background-color: var( --color-accent-credit-cards-095-color , rgba(236,249,255,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-credit-cards-095-text {\n  color: var( --color-accent-credit-cards-095-color , rgba(236,249,255,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards {\n    color: var( --color-accent-credit-cards-095-color , rgba(236,249,255,1) );\n  }\n</style>\n<div id='color-accent-credit-cards'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-credit-cards-095-border {\n  border-color: var( --color-accent-credit-cards-095-color , rgba(236,249,255,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards {\n    border: 1px solid white;\n    border-color: var( --color-accent-credit-cards-095-color , rgba(236,249,255,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-credit-cards-095-hover-text {\n  &:hover { color: var( --color-accent-credit-cards-095-color , rgba(236,249,255,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-credit-cards:hover { \n    color: var( --color-accent-credit-cards-095-color , rgba(236,249,255,1) ); \n  }\n</style>\n<div id='color-accent-credit-cards'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-credit-cards-095-hover-text {\n  &:hover { background-color: var( --color-accent-credit-cards-095-color , rgba(236,249,255,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-credit-cards:hover {\n    background-color: var( --color-accent-credit-cards-095-color , rgba(236,249,255,1) );\n  }\n  #color-accent-credit-cards {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards'>hover over box</div>"
    }
  },
  "colors-accent-credit-cards-text-": {
    "background": {
      "output": "\n@mixin color-accent-credit-cards-text-background {\n  background-color: var( --color-accent-credit-cards-text-color , rgba(1,51,77,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards-text {\n    background-color: var( --color-accent-credit-cards-text-color , rgba(1,51,77,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards-text'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-credit-cards-text-text {\n  color: var( --color-accent-credit-cards-text-color , rgba(1,51,77,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards-text {\n    color: var( --color-accent-credit-cards-text-color , rgba(1,51,77,1) );\n  }\n</style>\n<div id='color-accent-credit-cards-text'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-credit-cards-text-border {\n  border-color: var( --color-accent-credit-cards-text-color , rgba(1,51,77,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards-text {\n    border: 1px solid white;\n    border-color: var( --color-accent-credit-cards-text-color , rgba(1,51,77,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards-text'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-credit-cards-text-hover-text {\n  &:hover { color: var( --color-accent-credit-cards-text-color , rgba(1,51,77,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-credit-cards-text:hover { \n    color: var( --color-accent-credit-cards-text-color , rgba(1,51,77,1) ); \n  }\n</style>\n<div id='color-accent-credit-cards-text'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-credit-cards-text-hover-text {\n  &:hover { background-color: var( --color-accent-credit-cards-text-color , rgba(1,51,77,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-credit-cards-text:hover {\n    background-color: var( --color-accent-credit-cards-text-color , rgba(1,51,77,1) );\n  }\n  #color-accent-credit-cards-text {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards-text'>hover over box</div>"
    }
  },
  "colors-accent-credit-cards-text-light": {
    "background": {
      "output": "\n@mixin color-accent-credit-cards-text-light-background {\n  background-color: var( --color-accent-credit-cards-text-light-color , rgba(2,64,96,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards-text {\n    background-color: var( --color-accent-credit-cards-text-light-color , rgba(2,64,96,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards-text'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-credit-cards-text-light-text {\n  color: var( --color-accent-credit-cards-text-light-color , rgba(2,64,96,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards-text {\n    color: var( --color-accent-credit-cards-text-light-color , rgba(2,64,96,1) );\n  }\n</style>\n<div id='color-accent-credit-cards-text'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-credit-cards-text-light-border {\n  border-color: var( --color-accent-credit-cards-text-light-color , rgba(2,64,96,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards-text {\n    border: 1px solid white;\n    border-color: var( --color-accent-credit-cards-text-light-color , rgba(2,64,96,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards-text'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-credit-cards-text-light-hover-text {\n  &:hover { color: var( --color-accent-credit-cards-text-light-color , rgba(2,64,96,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-credit-cards-text:hover { \n    color: var( --color-accent-credit-cards-text-light-color , rgba(2,64,96,1) ); \n  }\n</style>\n<div id='color-accent-credit-cards-text'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-credit-cards-text-light-hover-text {\n  &:hover { background-color: var( --color-accent-credit-cards-text-light-color , rgba(2,64,96,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-credit-cards-text:hover {\n    background-color: var( --color-accent-credit-cards-text-light-color , rgba(2,64,96,1) );\n  }\n  #color-accent-credit-cards-text {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards-text'>hover over box</div>"
    }
  },
  "colors-accent-credit-cards-text-lighter": {
    "background": {
      "output": "\n@mixin color-accent-credit-cards-text-lighter-background {\n  background-color: var( --color-accent-credit-cards-text-lighter-color , rgba(1,79,118,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards-text {\n    background-color: var( --color-accent-credit-cards-text-lighter-color , rgba(1,79,118,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards-text'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-credit-cards-text-lighter-text {\n  color: var( --color-accent-credit-cards-text-lighter-color , rgba(1,79,118,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards-text {\n    color: var( --color-accent-credit-cards-text-lighter-color , rgba(1,79,118,1) );\n  }\n</style>\n<div id='color-accent-credit-cards-text'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-credit-cards-text-lighter-border {\n  border-color: var( --color-accent-credit-cards-text-lighter-color , rgba(1,79,118,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards-text {\n    border: 1px solid white;\n    border-color: var( --color-accent-credit-cards-text-lighter-color , rgba(1,79,118,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards-text'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-credit-cards-text-lighter-hover-text {\n  &:hover { color: var( --color-accent-credit-cards-text-lighter-color , rgba(1,79,118,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-credit-cards-text:hover { \n    color: var( --color-accent-credit-cards-text-lighter-color , rgba(1,79,118,1) ); \n  }\n</style>\n<div id='color-accent-credit-cards-text'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-credit-cards-text-lighter-hover-text {\n  &:hover { background-color: var( --color-accent-credit-cards-text-lighter-color , rgba(1,79,118,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-credit-cards-text:hover {\n    background-color: var( --color-accent-credit-cards-text-lighter-color , rgba(1,79,118,1) );\n  }\n  #color-accent-credit-cards-text {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards-text'>hover over box</div>"
    }
  },
  "colors-accent-credit-cards-text-lightest": {
    "background": {
      "output": "\n@mixin color-accent-credit-cards-text-lightest-background {\n  background-color: var( --color-accent-credit-cards-text-lightest-color , rgba(1,88,132,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards-text {\n    background-color: var( --color-accent-credit-cards-text-lightest-color , rgba(1,88,132,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards-text'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-credit-cards-text-lightest-text {\n  color: var( --color-accent-credit-cards-text-lightest-color , rgba(1,88,132,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards-text {\n    color: var( --color-accent-credit-cards-text-lightest-color , rgba(1,88,132,1) );\n  }\n</style>\n<div id='color-accent-credit-cards-text'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-credit-cards-text-lightest-border {\n  border-color: var( --color-accent-credit-cards-text-lightest-color , rgba(1,88,132,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards-text {\n    border: 1px solid white;\n    border-color: var( --color-accent-credit-cards-text-lightest-color , rgba(1,88,132,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards-text'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-credit-cards-text-lightest-hover-text {\n  &:hover { color: var( --color-accent-credit-cards-text-lightest-color , rgba(1,88,132,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-credit-cards-text:hover { \n    color: var( --color-accent-credit-cards-text-lightest-color , rgba(1,88,132,1) ); \n  }\n</style>\n<div id='color-accent-credit-cards-text'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-credit-cards-text-lightest-hover-text {\n  &:hover { background-color: var( --color-accent-credit-cards-text-lightest-color , rgba(1,88,132,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-credit-cards-text:hover {\n    background-color: var( --color-accent-credit-cards-text-lightest-color , rgba(1,88,132,1) );\n  }\n  #color-accent-credit-cards-text {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards-text'>hover over box</div>"
    }
  },
  "colors-accent-credit-cards-text-inv": {
    "background": {
      "output": "\n@mixin color-accent-credit-cards-text-inv-background {\n  background-color: var( --color-accent-credit-cards-text-inv-color , rgba(236,249,255,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards-text {\n    background-color: var( --color-accent-credit-cards-text-inv-color , rgba(236,249,255,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards-text'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-credit-cards-text-inv-text {\n  color: var( --color-accent-credit-cards-text-inv-color , rgba(236,249,255,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards-text {\n    color: var( --color-accent-credit-cards-text-inv-color , rgba(236,249,255,1) );\n  }\n</style>\n<div id='color-accent-credit-cards-text'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-credit-cards-text-inv-border {\n  border-color: var( --color-accent-credit-cards-text-inv-color , rgba(236,249,255,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards-text {\n    border: 1px solid white;\n    border-color: var( --color-accent-credit-cards-text-inv-color , rgba(236,249,255,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards-text'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-credit-cards-text-inv-hover-text {\n  &:hover { color: var( --color-accent-credit-cards-text-inv-color , rgba(236,249,255,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-credit-cards-text:hover { \n    color: var( --color-accent-credit-cards-text-inv-color , rgba(236,249,255,1) ); \n  }\n</style>\n<div id='color-accent-credit-cards-text'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-credit-cards-text-inv-hover-text {\n  &:hover { background-color: var( --color-accent-credit-cards-text-inv-color , rgba(236,249,255,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-credit-cards-text:hover {\n    background-color: var( --color-accent-credit-cards-text-inv-color , rgba(236,249,255,1) );\n  }\n  #color-accent-credit-cards-text {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards-text'>hover over box</div>"
    }
  },
  "colors-accent-credit-cards-text-inv-dark": {
    "background": {
      "output": "\n@mixin color-accent-credit-cards-text-inv-dark-background {\n  background-color: var( --color-accent-credit-cards-text-inv-dark-color , rgba(211,235,248,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards-text {\n    background-color: var( --color-accent-credit-cards-text-inv-dark-color , rgba(211,235,248,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards-text'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-credit-cards-text-inv-dark-text {\n  color: var( --color-accent-credit-cards-text-inv-dark-color , rgba(211,235,248,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards-text {\n    color: var( --color-accent-credit-cards-text-inv-dark-color , rgba(211,235,248,1) );\n  }\n</style>\n<div id='color-accent-credit-cards-text'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-credit-cards-text-inv-dark-border {\n  border-color: var( --color-accent-credit-cards-text-inv-dark-color , rgba(211,235,248,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards-text {\n    border: 1px solid white;\n    border-color: var( --color-accent-credit-cards-text-inv-dark-color , rgba(211,235,248,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards-text'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-credit-cards-text-inv-dark-hover-text {\n  &:hover { color: var( --color-accent-credit-cards-text-inv-dark-color , rgba(211,235,248,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-credit-cards-text:hover { \n    color: var( --color-accent-credit-cards-text-inv-dark-color , rgba(211,235,248,1) ); \n  }\n</style>\n<div id='color-accent-credit-cards-text'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-credit-cards-text-inv-dark-hover-text {\n  &:hover { background-color: var( --color-accent-credit-cards-text-inv-dark-color , rgba(211,235,248,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-credit-cards-text:hover {\n    background-color: var( --color-accent-credit-cards-text-inv-dark-color , rgba(211,235,248,1) );\n  }\n  #color-accent-credit-cards-text {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards-text'>hover over box</div>"
    }
  },
  "colors-accent-credit-cards-text-inv-darker": {
    "background": {
      "output": "\n@mixin color-accent-credit-cards-text-inv-darker-background {\n  background-color: var( --color-accent-credit-cards-text-inv-darker-color , rgba(180,219,240,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards-text {\n    background-color: var( --color-accent-credit-cards-text-inv-darker-color , rgba(180,219,240,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards-text'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-credit-cards-text-inv-darker-text {\n  color: var( --color-accent-credit-cards-text-inv-darker-color , rgba(180,219,240,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards-text {\n    color: var( --color-accent-credit-cards-text-inv-darker-color , rgba(180,219,240,1) );\n  }\n</style>\n<div id='color-accent-credit-cards-text'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-credit-cards-text-inv-darker-border {\n  border-color: var( --color-accent-credit-cards-text-inv-darker-color , rgba(180,219,240,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards-text {\n    border: 1px solid white;\n    border-color: var( --color-accent-credit-cards-text-inv-darker-color , rgba(180,219,240,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards-text'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-credit-cards-text-inv-darker-hover-text {\n  &:hover { color: var( --color-accent-credit-cards-text-inv-darker-color , rgba(180,219,240,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-credit-cards-text:hover { \n    color: var( --color-accent-credit-cards-text-inv-darker-color , rgba(180,219,240,1) ); \n  }\n</style>\n<div id='color-accent-credit-cards-text'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-credit-cards-text-inv-darker-hover-text {\n  &:hover { background-color: var( --color-accent-credit-cards-text-inv-darker-color , rgba(180,219,240,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-credit-cards-text:hover {\n    background-color: var( --color-accent-credit-cards-text-inv-darker-color , rgba(180,219,240,1) );\n  }\n  #color-accent-credit-cards-text {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards-text'>hover over box</div>"
    }
  },
  "colors-accent-credit-cards-text-inv-darkest": {
    "background": {
      "output": "\n@mixin color-accent-credit-cards-text-inv-darkest-background {\n  background-color: var( --color-accent-credit-cards-text-inv-darkest-color , rgba(140,197,227,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards-text {\n    background-color: var( --color-accent-credit-cards-text-inv-darkest-color , rgba(140,197,227,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards-text'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-credit-cards-text-inv-darkest-text {\n  color: var( --color-accent-credit-cards-text-inv-darkest-color , rgba(140,197,227,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards-text {\n    color: var( --color-accent-credit-cards-text-inv-darkest-color , rgba(140,197,227,1) );\n  }\n</style>\n<div id='color-accent-credit-cards-text'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-credit-cards-text-inv-darkest-border {\n  border-color: var( --color-accent-credit-cards-text-inv-darkest-color , rgba(140,197,227,1) );\n}",
      "example": "\n<style>\n  #color-accent-credit-cards-text {\n    border: 1px solid white;\n    border-color: var( --color-accent-credit-cards-text-inv-darkest-color , rgba(140,197,227,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards-text'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-credit-cards-text-inv-darkest-hover-text {\n  &:hover { color: var( --color-accent-credit-cards-text-inv-darkest-color , rgba(140,197,227,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-credit-cards-text:hover { \n    color: var( --color-accent-credit-cards-text-inv-darkest-color , rgba(140,197,227,1) ); \n  }\n</style>\n<div id='color-accent-credit-cards-text'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-credit-cards-text-inv-darkest-hover-text {\n  &:hover { background-color: var( --color-accent-credit-cards-text-inv-darkest-color , rgba(140,197,227,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-credit-cards-text:hover {\n    background-color: var( --color-accent-credit-cards-text-inv-darkest-color , rgba(140,197,227,1) );\n  }\n  #color-accent-credit-cards-text {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-credit-cards-text'>hover over box</div>"
    }
  },
  "colors-accent-student-01": {
    "background": {
      "output": "\n@mixin color-accent-student-01-background {\n  background-color: var( --color-accent-student-01-color , rgba(1,56,49,1) );\n}",
      "example": "\n<style>\n  #color-accent-student {\n    background-color: var( --color-accent-student-01-color , rgba(1,56,49,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-student-01-text {\n  color: var( --color-accent-student-01-color , rgba(1,56,49,1) );\n}",
      "example": "\n<style>\n  #color-accent-student {\n    color: var( --color-accent-student-01-color , rgba(1,56,49,1) );\n  }\n</style>\n<div id='color-accent-student'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-student-01-border {\n  border-color: var( --color-accent-student-01-color , rgba(1,56,49,1) );\n}",
      "example": "\n<style>\n  #color-accent-student {\n    border: 1px solid white;\n    border-color: var( --color-accent-student-01-color , rgba(1,56,49,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-student-01-hover-text {\n  &:hover { color: var( --color-accent-student-01-color , rgba(1,56,49,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-student:hover { \n    color: var( --color-accent-student-01-color , rgba(1,56,49,1) ); \n  }\n</style>\n<div id='color-accent-student'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-student-01-hover-text {\n  &:hover { background-color: var( --color-accent-student-01-color , rgba(1,56,49,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-student:hover {\n    background-color: var( --color-accent-student-01-color , rgba(1,56,49,1) );\n  }\n  #color-accent-student {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student'>hover over box</div>"
    }
  },
  "colors-accent-student-02": {
    "background": {
      "output": "\n@mixin color-accent-student-02-background {\n  background-color: var( --color-accent-student-02-color , rgba(1,75,67,1) );\n}",
      "example": "\n<style>\n  #color-accent-student {\n    background-color: var( --color-accent-student-02-color , rgba(1,75,67,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-student-02-text {\n  color: var( --color-accent-student-02-color , rgba(1,75,67,1) );\n}",
      "example": "\n<style>\n  #color-accent-student {\n    color: var( --color-accent-student-02-color , rgba(1,75,67,1) );\n  }\n</style>\n<div id='color-accent-student'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-student-02-border {\n  border-color: var( --color-accent-student-02-color , rgba(1,75,67,1) );\n}",
      "example": "\n<style>\n  #color-accent-student {\n    border: 1px solid white;\n    border-color: var( --color-accent-student-02-color , rgba(1,75,67,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-student-02-hover-text {\n  &:hover { color: var( --color-accent-student-02-color , rgba(1,75,67,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-student:hover { \n    color: var( --color-accent-student-02-color , rgba(1,75,67,1) ); \n  }\n</style>\n<div id='color-accent-student'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-student-02-hover-text {\n  &:hover { background-color: var( --color-accent-student-02-color , rgba(1,75,67,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-student:hover {\n    background-color: var( --color-accent-student-02-color , rgba(1,75,67,1) );\n  }\n  #color-accent-student {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student'>hover over box</div>"
    }
  },
  "colors-accent-student-darkest": {
    "background": {
      "output": "\n@mixin color-accent-student-darkest-background {\n  background-color: var( --color-accent-student-darkest-color , rgba(1,75,67,1) );\n}",
      "example": "\n<style>\n  #color-accent-student {\n    background-color: var( --color-accent-student-darkest-color , rgba(1,75,67,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-student-darkest-text {\n  color: var( --color-accent-student-darkest-color , rgba(1,75,67,1) );\n}",
      "example": "\n<style>\n  #color-accent-student {\n    color: var( --color-accent-student-darkest-color , rgba(1,75,67,1) );\n  }\n</style>\n<div id='color-accent-student'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-student-darkest-border {\n  border-color: var( --color-accent-student-darkest-color , rgba(1,75,67,1) );\n}",
      "example": "\n<style>\n  #color-accent-student {\n    border: 1px solid white;\n    border-color: var( --color-accent-student-darkest-color , rgba(1,75,67,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-student-darkest-hover-text {\n  &:hover { color: var( --color-accent-student-darkest-color , rgba(1,75,67,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-student:hover { \n    color: var( --color-accent-student-darkest-color , rgba(1,75,67,1) ); \n  }\n</style>\n<div id='color-accent-student'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-student-darkest-hover-text {\n  &:hover { background-color: var( --color-accent-student-darkest-color , rgba(1,75,67,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-student:hover {\n    background-color: var( --color-accent-student-darkest-color , rgba(1,75,67,1) );\n  }\n  #color-accent-student {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student'>hover over box</div>"
    }
  },
  "colors-accent-student-03": {
    "background": {
      "output": "\n@mixin color-accent-student-03-background {\n  background-color: var( --color-accent-student-03-color , rgba(1,94,83,1) );\n}",
      "example": "\n<style>\n  #color-accent-student {\n    background-color: var( --color-accent-student-03-color , rgba(1,94,83,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-student-03-text {\n  color: var( --color-accent-student-03-color , rgba(1,94,83,1) );\n}",
      "example": "\n<style>\n  #color-accent-student {\n    color: var( --color-accent-student-03-color , rgba(1,94,83,1) );\n  }\n</style>\n<div id='color-accent-student'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-student-03-border {\n  border-color: var( --color-accent-student-03-color , rgba(1,94,83,1) );\n}",
      "example": "\n<style>\n  #color-accent-student {\n    border: 1px solid white;\n    border-color: var( --color-accent-student-03-color , rgba(1,94,83,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-student-03-hover-text {\n  &:hover { color: var( --color-accent-student-03-color , rgba(1,94,83,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-student:hover { \n    color: var( --color-accent-student-03-color , rgba(1,94,83,1) ); \n  }\n</style>\n<div id='color-accent-student'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-student-03-hover-text {\n  &:hover { background-color: var( --color-accent-student-03-color , rgba(1,94,83,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-student:hover {\n    background-color: var( --color-accent-student-03-color , rgba(1,94,83,1) );\n  }\n  #color-accent-student {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student'>hover over box</div>"
    }
  },
  "colors-accent-student-darker": {
    "background": {
      "output": "\n@mixin color-accent-student-darker-background {\n  background-color: var( --color-accent-student-darker-color , rgba(1,94,83,1) );\n}",
      "example": "\n<style>\n  #color-accent-student {\n    background-color: var( --color-accent-student-darker-color , rgba(1,94,83,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-student-darker-text {\n  color: var( --color-accent-student-darker-color , rgba(1,94,83,1) );\n}",
      "example": "\n<style>\n  #color-accent-student {\n    color: var( --color-accent-student-darker-color , rgba(1,94,83,1) );\n  }\n</style>\n<div id='color-accent-student'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-student-darker-border {\n  border-color: var( --color-accent-student-darker-color , rgba(1,94,83,1) );\n}",
      "example": "\n<style>\n  #color-accent-student {\n    border: 1px solid white;\n    border-color: var( --color-accent-student-darker-color , rgba(1,94,83,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-student-darker-hover-text {\n  &:hover { color: var( --color-accent-student-darker-color , rgba(1,94,83,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-student:hover { \n    color: var( --color-accent-student-darker-color , rgba(1,94,83,1) ); \n  }\n</style>\n<div id='color-accent-student'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-student-darker-hover-text {\n  &:hover { background-color: var( --color-accent-student-darker-color , rgba(1,94,83,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-student:hover {\n    background-color: var( --color-accent-student-darker-color , rgba(1,94,83,1) );\n  }\n  #color-accent-student {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student'>hover over box</div>"
    }
  },
  "colors-accent-student-04": {
    "background": {
      "output": "\n@mixin color-accent-student-04-background {\n  background-color: var( --color-accent-student-04-color , rgba(1,113,100,1) );\n}",
      "example": "\n<style>\n  #color-accent-student {\n    background-color: var( --color-accent-student-04-color , rgba(1,113,100,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-student-04-text {\n  color: var( --color-accent-student-04-color , rgba(1,113,100,1) );\n}",
      "example": "\n<style>\n  #color-accent-student {\n    color: var( --color-accent-student-04-color , rgba(1,113,100,1) );\n  }\n</style>\n<div id='color-accent-student'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-student-04-border {\n  border-color: var( --color-accent-student-04-color , rgba(1,113,100,1) );\n}",
      "example": "\n<style>\n  #color-accent-student {\n    border: 1px solid white;\n    border-color: var( --color-accent-student-04-color , rgba(1,113,100,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-student-04-hover-text {\n  &:hover { color: var( --color-accent-student-04-color , rgba(1,113,100,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-student:hover { \n    color: var( --color-accent-student-04-color , rgba(1,113,100,1) ); \n  }\n</style>\n<div id='color-accent-student'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-student-04-hover-text {\n  &:hover { background-color: var( --color-accent-student-04-color , rgba(1,113,100,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-student:hover {\n    background-color: var( --color-accent-student-04-color , rgba(1,113,100,1) );\n  }\n  #color-accent-student {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student'>hover over box</div>"
    }
  },
  "colors-accent-student-dark": {
    "background": {
      "output": "\n@mixin color-accent-student-dark-background {\n  background-color: var( --color-accent-student-dark-color , rgba(1,113,100,1) );\n}",
      "example": "\n<style>\n  #color-accent-student {\n    background-color: var( --color-accent-student-dark-color , rgba(1,113,100,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-student-dark-text {\n  color: var( --color-accent-student-dark-color , rgba(1,113,100,1) );\n}",
      "example": "\n<style>\n  #color-accent-student {\n    color: var( --color-accent-student-dark-color , rgba(1,113,100,1) );\n  }\n</style>\n<div id='color-accent-student'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-student-dark-border {\n  border-color: var( --color-accent-student-dark-color , rgba(1,113,100,1) );\n}",
      "example": "\n<style>\n  #color-accent-student {\n    border: 1px solid white;\n    border-color: var( --color-accent-student-dark-color , rgba(1,113,100,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-student-dark-hover-text {\n  &:hover { color: var( --color-accent-student-dark-color , rgba(1,113,100,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-student:hover { \n    color: var( --color-accent-student-dark-color , rgba(1,113,100,1) ); \n  }\n</style>\n<div id='color-accent-student'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-student-dark-hover-text {\n  &:hover { background-color: var( --color-accent-student-dark-color , rgba(1,113,100,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-student:hover {\n    background-color: var( --color-accent-student-dark-color , rgba(1,113,100,1) );\n  }\n  #color-accent-student {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student'>hover over box</div>"
    }
  },
  "colors-accent-student-05": {
    "background": {
      "output": "\n@mixin color-accent-student-05-background {\n  background-color: var( --color-accent-student-05-color , rgba(0,131,116,1) );\n}",
      "example": "\n<style>\n  #color-accent-student {\n    background-color: var( --color-accent-student-05-color , rgba(0,131,116,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-student-05-text {\n  color: var( --color-accent-student-05-color , rgba(0,131,116,1) );\n}",
      "example": "\n<style>\n  #color-accent-student {\n    color: var( --color-accent-student-05-color , rgba(0,131,116,1) );\n  }\n</style>\n<div id='color-accent-student'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-student-05-border {\n  border-color: var( --color-accent-student-05-color , rgba(0,131,116,1) );\n}",
      "example": "\n<style>\n  #color-accent-student {\n    border: 1px solid white;\n    border-color: var( --color-accent-student-05-color , rgba(0,131,116,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-student-05-hover-text {\n  &:hover { color: var( --color-accent-student-05-color , rgba(0,131,116,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-student:hover { \n    color: var( --color-accent-student-05-color , rgba(0,131,116,1) ); \n  }\n</style>\n<div id='color-accent-student'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-student-05-hover-text {\n  &:hover { background-color: var( --color-accent-student-05-color , rgba(0,131,116,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-student:hover {\n    background-color: var( --color-accent-student-05-color , rgba(0,131,116,1) );\n  }\n  #color-accent-student {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student'>hover over box</div>"
    }
  },
  "colors-accent-student-": {
    "background": {
      "output": "\n@mixin color-accent-student-background {\n  background-color: var( --color-accent-student-color , rgba(0,131,116,1) );\n}",
      "example": "\n<style>\n  #color-accent-student {\n    background-color: var( --color-accent-student-color , rgba(0,131,116,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-student-text {\n  color: var( --color-accent-student-color , rgba(0,131,116,1) );\n}",
      "example": "\n<style>\n  #color-accent-student {\n    color: var( --color-accent-student-color , rgba(0,131,116,1) );\n  }\n</style>\n<div id='color-accent-student'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-student-border {\n  border-color: var( --color-accent-student-color , rgba(0,131,116,1) );\n}",
      "example": "\n<style>\n  #color-accent-student {\n    border: 1px solid white;\n    border-color: var( --color-accent-student-color , rgba(0,131,116,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-student-hover-text {\n  &:hover { color: var( --color-accent-student-color , rgba(0,131,116,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-student:hover { \n    color: var( --color-accent-student-color , rgba(0,131,116,1) ); \n  }\n</style>\n<div id='color-accent-student'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-student-hover-text {\n  &:hover { background-color: var( --color-accent-student-color , rgba(0,131,116,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-student:hover {\n    background-color: var( --color-accent-student-color , rgba(0,131,116,1) );\n  }\n  #color-accent-student {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student'>hover over box</div>"
    }
  },
  "colors-accent-student-06": {
    "background": {
      "output": "\n@mixin color-accent-student-06-background {\n  background-color: var( --color-accent-student-06-color , rgba(47,156,143,1) );\n}",
      "example": "\n<style>\n  #color-accent-student {\n    background-color: var( --color-accent-student-06-color , rgba(47,156,143,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-student-06-text {\n  color: var( --color-accent-student-06-color , rgba(47,156,143,1) );\n}",
      "example": "\n<style>\n  #color-accent-student {\n    color: var( --color-accent-student-06-color , rgba(47,156,143,1) );\n  }\n</style>\n<div id='color-accent-student'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-student-06-border {\n  border-color: var( --color-accent-student-06-color , rgba(47,156,143,1) );\n}",
      "example": "\n<style>\n  #color-accent-student {\n    border: 1px solid white;\n    border-color: var( --color-accent-student-06-color , rgba(47,156,143,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-student-06-hover-text {\n  &:hover { color: var( --color-accent-student-06-color , rgba(47,156,143,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-student:hover { \n    color: var( --color-accent-student-06-color , rgba(47,156,143,1) ); \n  }\n</style>\n<div id='color-accent-student'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-student-06-hover-text {\n  &:hover { background-color: var( --color-accent-student-06-color , rgba(47,156,143,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-student:hover {\n    background-color: var( --color-accent-student-06-color , rgba(47,156,143,1) );\n  }\n  #color-accent-student {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student'>hover over box</div>"
    }
  },
  "colors-accent-student-light": {
    "background": {
      "output": "\n@mixin color-accent-student-light-background {\n  background-color: var( --color-accent-student-light-color , rgba(47,156,143,1) );\n}",
      "example": "\n<style>\n  #color-accent-student {\n    background-color: var( --color-accent-student-light-color , rgba(47,156,143,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-student-light-text {\n  color: var( --color-accent-student-light-color , rgba(47,156,143,1) );\n}",
      "example": "\n<style>\n  #color-accent-student {\n    color: var( --color-accent-student-light-color , rgba(47,156,143,1) );\n  }\n</style>\n<div id='color-accent-student'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-student-light-border {\n  border-color: var( --color-accent-student-light-color , rgba(47,156,143,1) );\n}",
      "example": "\n<style>\n  #color-accent-student {\n    border: 1px solid white;\n    border-color: var( --color-accent-student-light-color , rgba(47,156,143,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-student-light-hover-text {\n  &:hover { color: var( --color-accent-student-light-color , rgba(47,156,143,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-student:hover { \n    color: var( --color-accent-student-light-color , rgba(47,156,143,1) ); \n  }\n</style>\n<div id='color-accent-student'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-student-light-hover-text {\n  &:hover { background-color: var( --color-accent-student-light-color , rgba(47,156,143,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-student:hover {\n    background-color: var( --color-accent-student-light-color , rgba(47,156,143,1) );\n  }\n  #color-accent-student {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student'>hover over box</div>"
    }
  },
  "colors-accent-student-07": {
    "background": {
      "output": "\n@mixin color-accent-student-07-background {\n  background-color: var( --color-accent-student-07-color , rgba(97,181,172,1) );\n}",
      "example": "\n<style>\n  #color-accent-student {\n    background-color: var( --color-accent-student-07-color , rgba(97,181,172,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-student-07-text {\n  color: var( --color-accent-student-07-color , rgba(97,181,172,1) );\n}",
      "example": "\n<style>\n  #color-accent-student {\n    color: var( --color-accent-student-07-color , rgba(97,181,172,1) );\n  }\n</style>\n<div id='color-accent-student'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-student-07-border {\n  border-color: var( --color-accent-student-07-color , rgba(97,181,172,1) );\n}",
      "example": "\n<style>\n  #color-accent-student {\n    border: 1px solid white;\n    border-color: var( --color-accent-student-07-color , rgba(97,181,172,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-student-07-hover-text {\n  &:hover { color: var( --color-accent-student-07-color , rgba(97,181,172,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-student:hover { \n    color: var( --color-accent-student-07-color , rgba(97,181,172,1) ); \n  }\n</style>\n<div id='color-accent-student'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-student-07-hover-text {\n  &:hover { background-color: var( --color-accent-student-07-color , rgba(97,181,172,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-student:hover {\n    background-color: var( --color-accent-student-07-color , rgba(97,181,172,1) );\n  }\n  #color-accent-student {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student'>hover over box</div>"
    }
  },
  "colors-accent-student-lighter": {
    "background": {
      "output": "\n@mixin color-accent-student-lighter-background {\n  background-color: var( --color-accent-student-lighter-color , rgba(97,181,172,1) );\n}",
      "example": "\n<style>\n  #color-accent-student {\n    background-color: var( --color-accent-student-lighter-color , rgba(97,181,172,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-student-lighter-text {\n  color: var( --color-accent-student-lighter-color , rgba(97,181,172,1) );\n}",
      "example": "\n<style>\n  #color-accent-student {\n    color: var( --color-accent-student-lighter-color , rgba(97,181,172,1) );\n  }\n</style>\n<div id='color-accent-student'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-student-lighter-border {\n  border-color: var( --color-accent-student-lighter-color , rgba(97,181,172,1) );\n}",
      "example": "\n<style>\n  #color-accent-student {\n    border: 1px solid white;\n    border-color: var( --color-accent-student-lighter-color , rgba(97,181,172,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-student-lighter-hover-text {\n  &:hover { color: var( --color-accent-student-lighter-color , rgba(97,181,172,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-student:hover { \n    color: var( --color-accent-student-lighter-color , rgba(97,181,172,1) ); \n  }\n</style>\n<div id='color-accent-student'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-student-lighter-hover-text {\n  &:hover { background-color: var( --color-accent-student-lighter-color , rgba(97,181,172,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-student:hover {\n    background-color: var( --color-accent-student-lighter-color , rgba(97,181,172,1) );\n  }\n  #color-accent-student {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student'>hover over box</div>"
    }
  },
  "colors-accent-student-08": {
    "background": {
      "output": "\n@mixin color-accent-student-08-background {\n  background-color: var( --color-accent-student-08-color , rgba(144,206,199,1) );\n}",
      "example": "\n<style>\n  #color-accent-student {\n    background-color: var( --color-accent-student-08-color , rgba(144,206,199,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-student-08-text {\n  color: var( --color-accent-student-08-color , rgba(144,206,199,1) );\n}",
      "example": "\n<style>\n  #color-accent-student {\n    color: var( --color-accent-student-08-color , rgba(144,206,199,1) );\n  }\n</style>\n<div id='color-accent-student'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-student-08-border {\n  border-color: var( --color-accent-student-08-color , rgba(144,206,199,1) );\n}",
      "example": "\n<style>\n  #color-accent-student {\n    border: 1px solid white;\n    border-color: var( --color-accent-student-08-color , rgba(144,206,199,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-student-08-hover-text {\n  &:hover { color: var( --color-accent-student-08-color , rgba(144,206,199,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-student:hover { \n    color: var( --color-accent-student-08-color , rgba(144,206,199,1) ); \n  }\n</style>\n<div id='color-accent-student'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-student-08-hover-text {\n  &:hover { background-color: var( --color-accent-student-08-color , rgba(144,206,199,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-student:hover {\n    background-color: var( --color-accent-student-08-color , rgba(144,206,199,1) );\n  }\n  #color-accent-student {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student'>hover over box</div>"
    }
  },
  "colors-accent-student-lightest": {
    "background": {
      "output": "\n@mixin color-accent-student-lightest-background {\n  background-color: var( --color-accent-student-lightest-color , rgba(144,206,199,1) );\n}",
      "example": "\n<style>\n  #color-accent-student {\n    background-color: var( --color-accent-student-lightest-color , rgba(144,206,199,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-student-lightest-text {\n  color: var( --color-accent-student-lightest-color , rgba(144,206,199,1) );\n}",
      "example": "\n<style>\n  #color-accent-student {\n    color: var( --color-accent-student-lightest-color , rgba(144,206,199,1) );\n  }\n</style>\n<div id='color-accent-student'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-student-lightest-border {\n  border-color: var( --color-accent-student-lightest-color , rgba(144,206,199,1) );\n}",
      "example": "\n<style>\n  #color-accent-student {\n    border: 1px solid white;\n    border-color: var( --color-accent-student-lightest-color , rgba(144,206,199,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-student-lightest-hover-text {\n  &:hover { color: var( --color-accent-student-lightest-color , rgba(144,206,199,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-student:hover { \n    color: var( --color-accent-student-lightest-color , rgba(144,206,199,1) ); \n  }\n</style>\n<div id='color-accent-student'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-student-lightest-hover-text {\n  &:hover { background-color: var( --color-accent-student-lightest-color , rgba(144,206,199,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-student:hover {\n    background-color: var( --color-accent-student-lightest-color , rgba(144,206,199,1) );\n  }\n  #color-accent-student {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student'>hover over box</div>"
    }
  },
  "colors-accent-student-09": {
    "background": {
      "output": "\n@mixin color-accent-student-09-background {\n  background-color: var( --color-accent-student-09-color , rgba(192,231,226,1) );\n}",
      "example": "\n<style>\n  #color-accent-student {\n    background-color: var( --color-accent-student-09-color , rgba(192,231,226,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-student-09-text {\n  color: var( --color-accent-student-09-color , rgba(192,231,226,1) );\n}",
      "example": "\n<style>\n  #color-accent-student {\n    color: var( --color-accent-student-09-color , rgba(192,231,226,1) );\n  }\n</style>\n<div id='color-accent-student'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-student-09-border {\n  border-color: var( --color-accent-student-09-color , rgba(192,231,226,1) );\n}",
      "example": "\n<style>\n  #color-accent-student {\n    border: 1px solid white;\n    border-color: var( --color-accent-student-09-color , rgba(192,231,226,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-student-09-hover-text {\n  &:hover { color: var( --color-accent-student-09-color , rgba(192,231,226,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-student:hover { \n    color: var( --color-accent-student-09-color , rgba(192,231,226,1) ); \n  }\n</style>\n<div id='color-accent-student'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-student-09-hover-text {\n  &:hover { background-color: var( --color-accent-student-09-color , rgba(192,231,226,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-student:hover {\n    background-color: var( --color-accent-student-09-color , rgba(192,231,226,1) );\n  }\n  #color-accent-student {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student'>hover over box</div>"
    }
  },
  "colors-accent-student-095": {
    "background": {
      "output": "\n@mixin color-accent-student-095-background {\n  background-color: var( --color-accent-student-095-color , rgba(239,255,254,1) );\n}",
      "example": "\n<style>\n  #color-accent-student {\n    background-color: var( --color-accent-student-095-color , rgba(239,255,254,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-student-095-text {\n  color: var( --color-accent-student-095-color , rgba(239,255,254,1) );\n}",
      "example": "\n<style>\n  #color-accent-student {\n    color: var( --color-accent-student-095-color , rgba(239,255,254,1) );\n  }\n</style>\n<div id='color-accent-student'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-student-095-border {\n  border-color: var( --color-accent-student-095-color , rgba(239,255,254,1) );\n}",
      "example": "\n<style>\n  #color-accent-student {\n    border: 1px solid white;\n    border-color: var( --color-accent-student-095-color , rgba(239,255,254,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-student-095-hover-text {\n  &:hover { color: var( --color-accent-student-095-color , rgba(239,255,254,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-student:hover { \n    color: var( --color-accent-student-095-color , rgba(239,255,254,1) ); \n  }\n</style>\n<div id='color-accent-student'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-student-095-hover-text {\n  &:hover { background-color: var( --color-accent-student-095-color , rgba(239,255,254,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-student:hover {\n    background-color: var( --color-accent-student-095-color , rgba(239,255,254,1) );\n  }\n  #color-accent-student {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student'>hover over box</div>"
    }
  },
  "colors-accent-student-text-": {
    "background": {
      "output": "\n@mixin color-accent-student-text-background {\n  background-color: var( --color-accent-student-text-color , rgba(1,56,49,1) );\n}",
      "example": "\n<style>\n  #color-accent-student-text {\n    background-color: var( --color-accent-student-text-color , rgba(1,56,49,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student-text'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-student-text-text {\n  color: var( --color-accent-student-text-color , rgba(1,56,49,1) );\n}",
      "example": "\n<style>\n  #color-accent-student-text {\n    color: var( --color-accent-student-text-color , rgba(1,56,49,1) );\n  }\n</style>\n<div id='color-accent-student-text'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-student-text-border {\n  border-color: var( --color-accent-student-text-color , rgba(1,56,49,1) );\n}",
      "example": "\n<style>\n  #color-accent-student-text {\n    border: 1px solid white;\n    border-color: var( --color-accent-student-text-color , rgba(1,56,49,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student-text'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-student-text-hover-text {\n  &:hover { color: var( --color-accent-student-text-color , rgba(1,56,49,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-student-text:hover { \n    color: var( --color-accent-student-text-color , rgba(1,56,49,1) ); \n  }\n</style>\n<div id='color-accent-student-text'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-student-text-hover-text {\n  &:hover { background-color: var( --color-accent-student-text-color , rgba(1,56,49,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-student-text:hover {\n    background-color: var( --color-accent-student-text-color , rgba(1,56,49,1) );\n  }\n  #color-accent-student-text {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student-text'>hover over box</div>"
    }
  },
  "colors-accent-student-text-light": {
    "background": {
      "output": "\n@mixin color-accent-student-text-light-background {\n  background-color: var( --color-accent-student-text-light-color , rgba(0,73,64,1) );\n}",
      "example": "\n<style>\n  #color-accent-student-text {\n    background-color: var( --color-accent-student-text-light-color , rgba(0,73,64,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student-text'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-student-text-light-text {\n  color: var( --color-accent-student-text-light-color , rgba(0,73,64,1) );\n}",
      "example": "\n<style>\n  #color-accent-student-text {\n    color: var( --color-accent-student-text-light-color , rgba(0,73,64,1) );\n  }\n</style>\n<div id='color-accent-student-text'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-student-text-light-border {\n  border-color: var( --color-accent-student-text-light-color , rgba(0,73,64,1) );\n}",
      "example": "\n<style>\n  #color-accent-student-text {\n    border: 1px solid white;\n    border-color: var( --color-accent-student-text-light-color , rgba(0,73,64,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student-text'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-student-text-light-hover-text {\n  &:hover { color: var( --color-accent-student-text-light-color , rgba(0,73,64,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-student-text:hover { \n    color: var( --color-accent-student-text-light-color , rgba(0,73,64,1) ); \n  }\n</style>\n<div id='color-accent-student-text'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-student-text-light-hover-text {\n  &:hover { background-color: var( --color-accent-student-text-light-color , rgba(0,73,64,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-student-text:hover {\n    background-color: var( --color-accent-student-text-light-color , rgba(0,73,64,1) );\n  }\n  #color-accent-student-text {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student-text'>hover over box</div>"
    }
  },
  "colors-accent-student-text-lighter": {
    "background": {
      "output": "\n@mixin color-accent-student-text-lighter-background {\n  background-color: var( --color-accent-student-text-lighter-color , rgba(0,80,70,1) );\n}",
      "example": "\n<style>\n  #color-accent-student-text {\n    background-color: var( --color-accent-student-text-lighter-color , rgba(0,80,70,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student-text'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-student-text-lighter-text {\n  color: var( --color-accent-student-text-lighter-color , rgba(0,80,70,1) );\n}",
      "example": "\n<style>\n  #color-accent-student-text {\n    color: var( --color-accent-student-text-lighter-color , rgba(0,80,70,1) );\n  }\n</style>\n<div id='color-accent-student-text'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-student-text-lighter-border {\n  border-color: var( --color-accent-student-text-lighter-color , rgba(0,80,70,1) );\n}",
      "example": "\n<style>\n  #color-accent-student-text {\n    border: 1px solid white;\n    border-color: var( --color-accent-student-text-lighter-color , rgba(0,80,70,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student-text'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-student-text-lighter-hover-text {\n  &:hover { color: var( --color-accent-student-text-lighter-color , rgba(0,80,70,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-student-text:hover { \n    color: var( --color-accent-student-text-lighter-color , rgba(0,80,70,1) ); \n  }\n</style>\n<div id='color-accent-student-text'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-student-text-lighter-hover-text {\n  &:hover { background-color: var( --color-accent-student-text-lighter-color , rgba(0,80,70,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-student-text:hover {\n    background-color: var( --color-accent-student-text-lighter-color , rgba(0,80,70,1) );\n  }\n  #color-accent-student-text {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student-text'>hover over box</div>"
    }
  },
  "colors-accent-student-text-lightest": {
    "background": {
      "output": "\n@mixin color-accent-student-text-lightest-background {\n  background-color: var( --color-accent-student-text-lightest-color , rgba(0,111,97,1) );\n}",
      "example": "\n<style>\n  #color-accent-student-text {\n    background-color: var( --color-accent-student-text-lightest-color , rgba(0,111,97,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student-text'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-student-text-lightest-text {\n  color: var( --color-accent-student-text-lightest-color , rgba(0,111,97,1) );\n}",
      "example": "\n<style>\n  #color-accent-student-text {\n    color: var( --color-accent-student-text-lightest-color , rgba(0,111,97,1) );\n  }\n</style>\n<div id='color-accent-student-text'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-student-text-lightest-border {\n  border-color: var( --color-accent-student-text-lightest-color , rgba(0,111,97,1) );\n}",
      "example": "\n<style>\n  #color-accent-student-text {\n    border: 1px solid white;\n    border-color: var( --color-accent-student-text-lightest-color , rgba(0,111,97,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student-text'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-student-text-lightest-hover-text {\n  &:hover { color: var( --color-accent-student-text-lightest-color , rgba(0,111,97,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-student-text:hover { \n    color: var( --color-accent-student-text-lightest-color , rgba(0,111,97,1) ); \n  }\n</style>\n<div id='color-accent-student-text'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-student-text-lightest-hover-text {\n  &:hover { background-color: var( --color-accent-student-text-lightest-color , rgba(0,111,97,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-student-text:hover {\n    background-color: var( --color-accent-student-text-lightest-color , rgba(0,111,97,1) );\n  }\n  #color-accent-student-text {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student-text'>hover over box</div>"
    }
  },
  "colors-accent-student-text-inv": {
    "background": {
      "output": "\n@mixin color-accent-student-text-inv-background {\n  background-color: var( --color-accent-student-text-inv-color , rgba(239,255,254,1) );\n}",
      "example": "\n<style>\n  #color-accent-student-text {\n    background-color: var( --color-accent-student-text-inv-color , rgba(239,255,254,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student-text'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-student-text-inv-text {\n  color: var( --color-accent-student-text-inv-color , rgba(239,255,254,1) );\n}",
      "example": "\n<style>\n  #color-accent-student-text {\n    color: var( --color-accent-student-text-inv-color , rgba(239,255,254,1) );\n  }\n</style>\n<div id='color-accent-student-text'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-student-text-inv-border {\n  border-color: var( --color-accent-student-text-inv-color , rgba(239,255,254,1) );\n}",
      "example": "\n<style>\n  #color-accent-student-text {\n    border: 1px solid white;\n    border-color: var( --color-accent-student-text-inv-color , rgba(239,255,254,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student-text'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-student-text-inv-hover-text {\n  &:hover { color: var( --color-accent-student-text-inv-color , rgba(239,255,254,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-student-text:hover { \n    color: var( --color-accent-student-text-inv-color , rgba(239,255,254,1) ); \n  }\n</style>\n<div id='color-accent-student-text'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-student-text-inv-hover-text {\n  &:hover { background-color: var( --color-accent-student-text-inv-color , rgba(239,255,254,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-student-text:hover {\n    background-color: var( --color-accent-student-text-inv-color , rgba(239,255,254,1) );\n  }\n  #color-accent-student-text {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student-text'>hover over box</div>"
    }
  },
  "colors-accent-student-text-inv-dark": {
    "background": {
      "output": "\n@mixin color-accent-student-text-inv-dark-background {\n  background-color: var( --color-accent-student-text-inv-dark-color , rgba(208,245,243,1) );\n}",
      "example": "\n<style>\n  #color-accent-student-text {\n    background-color: var( --color-accent-student-text-inv-dark-color , rgba(208,245,243,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student-text'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-student-text-inv-dark-text {\n  color: var( --color-accent-student-text-inv-dark-color , rgba(208,245,243,1) );\n}",
      "example": "\n<style>\n  #color-accent-student-text {\n    color: var( --color-accent-student-text-inv-dark-color , rgba(208,245,243,1) );\n  }\n</style>\n<div id='color-accent-student-text'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-student-text-inv-dark-border {\n  border-color: var( --color-accent-student-text-inv-dark-color , rgba(208,245,243,1) );\n}",
      "example": "\n<style>\n  #color-accent-student-text {\n    border: 1px solid white;\n    border-color: var( --color-accent-student-text-inv-dark-color , rgba(208,245,243,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student-text'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-student-text-inv-dark-hover-text {\n  &:hover { color: var( --color-accent-student-text-inv-dark-color , rgba(208,245,243,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-student-text:hover { \n    color: var( --color-accent-student-text-inv-dark-color , rgba(208,245,243,1) ); \n  }\n</style>\n<div id='color-accent-student-text'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-student-text-inv-dark-hover-text {\n  &:hover { background-color: var( --color-accent-student-text-inv-dark-color , rgba(208,245,243,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-student-text:hover {\n    background-color: var( --color-accent-student-text-inv-dark-color , rgba(208,245,243,1) );\n  }\n  #color-accent-student-text {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student-text'>hover over box</div>"
    }
  },
  "colors-accent-student-text-inv-darker": {
    "background": {
      "output": "\n@mixin color-accent-student-text-inv-darker-background {\n  background-color: var( --color-accent-student-text-inv-darker-color , rgba(140,214,206,1) );\n}",
      "example": "\n<style>\n  #color-accent-student-text {\n    background-color: var( --color-accent-student-text-inv-darker-color , rgba(140,214,206,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student-text'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-student-text-inv-darker-text {\n  color: var( --color-accent-student-text-inv-darker-color , rgba(140,214,206,1) );\n}",
      "example": "\n<style>\n  #color-accent-student-text {\n    color: var( --color-accent-student-text-inv-darker-color , rgba(140,214,206,1) );\n  }\n</style>\n<div id='color-accent-student-text'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-student-text-inv-darker-border {\n  border-color: var( --color-accent-student-text-inv-darker-color , rgba(140,214,206,1) );\n}",
      "example": "\n<style>\n  #color-accent-student-text {\n    border: 1px solid white;\n    border-color: var( --color-accent-student-text-inv-darker-color , rgba(140,214,206,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student-text'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-student-text-inv-darker-hover-text {\n  &:hover { color: var( --color-accent-student-text-inv-darker-color , rgba(140,214,206,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-student-text:hover { \n    color: var( --color-accent-student-text-inv-darker-color , rgba(140,214,206,1) ); \n  }\n</style>\n<div id='color-accent-student-text'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-student-text-inv-darker-hover-text {\n  &:hover { background-color: var( --color-accent-student-text-inv-darker-color , rgba(140,214,206,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-student-text:hover {\n    background-color: var( --color-accent-student-text-inv-darker-color , rgba(140,214,206,1) );\n  }\n  #color-accent-student-text {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student-text'>hover over box</div>"
    }
  },
  "colors-accent-student-text-inv-darkest": {
    "background": {
      "output": "\n@mixin color-accent-student-text-inv-darkest-background {\n  background-color: var( --color-accent-student-text-inv-darkest-color , rgba(97,181,172,1) );\n}",
      "example": "\n<style>\n  #color-accent-student-text {\n    background-color: var( --color-accent-student-text-inv-darkest-color , rgba(97,181,172,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student-text'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-student-text-inv-darkest-text {\n  color: var( --color-accent-student-text-inv-darkest-color , rgba(97,181,172,1) );\n}",
      "example": "\n<style>\n  #color-accent-student-text {\n    color: var( --color-accent-student-text-inv-darkest-color , rgba(97,181,172,1) );\n  }\n</style>\n<div id='color-accent-student-text'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-student-text-inv-darkest-border {\n  border-color: var( --color-accent-student-text-inv-darkest-color , rgba(97,181,172,1) );\n}",
      "example": "\n<style>\n  #color-accent-student-text {\n    border: 1px solid white;\n    border-color: var( --color-accent-student-text-inv-darkest-color , rgba(97,181,172,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student-text'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-student-text-inv-darkest-hover-text {\n  &:hover { color: var( --color-accent-student-text-inv-darkest-color , rgba(97,181,172,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-student-text:hover { \n    color: var( --color-accent-student-text-inv-darkest-color , rgba(97,181,172,1) ); \n  }\n</style>\n<div id='color-accent-student-text'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-student-text-inv-darkest-hover-text {\n  &:hover { background-color: var( --color-accent-student-text-inv-darkest-color , rgba(97,181,172,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-student-text:hover {\n    background-color: var( --color-accent-student-text-inv-darkest-color , rgba(97,181,172,1) );\n  }\n  #color-accent-student-text {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-student-text'>hover over box</div>"
    }
  },
  "colors-accent-savings-01": {
    "background": {
      "output": "\n@mixin color-accent-savings-01-background {\n  background-color: var( --color-accent-savings-01-color , rgba(45,17,1,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings {\n    background-color: var( --color-accent-savings-01-color , rgba(45,17,1,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-savings-01-text {\n  color: var( --color-accent-savings-01-color , rgba(45,17,1,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings {\n    color: var( --color-accent-savings-01-color , rgba(45,17,1,1) );\n  }\n</style>\n<div id='color-accent-savings'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-savings-01-border {\n  border-color: var( --color-accent-savings-01-color , rgba(45,17,1,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings {\n    border: 1px solid white;\n    border-color: var( --color-accent-savings-01-color , rgba(45,17,1,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-savings-01-hover-text {\n  &:hover { color: var( --color-accent-savings-01-color , rgba(45,17,1,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-savings:hover { \n    color: var( --color-accent-savings-01-color , rgba(45,17,1,1) ); \n  }\n</style>\n<div id='color-accent-savings'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-savings-01-hover-text {\n  &:hover { background-color: var( --color-accent-savings-01-color , rgba(45,17,1,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-savings:hover {\n    background-color: var( --color-accent-savings-01-color , rgba(45,17,1,1) );\n  }\n  #color-accent-savings {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings'>hover over box</div>"
    }
  },
  "colors-accent-savings-02": {
    "background": {
      "output": "\n@mixin color-accent-savings-02-background {\n  background-color: var( --color-accent-savings-02-color , rgba(83,32,1,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings {\n    background-color: var( --color-accent-savings-02-color , rgba(83,32,1,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-savings-02-text {\n  color: var( --color-accent-savings-02-color , rgba(83,32,1,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings {\n    color: var( --color-accent-savings-02-color , rgba(83,32,1,1) );\n  }\n</style>\n<div id='color-accent-savings'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-savings-02-border {\n  border-color: var( --color-accent-savings-02-color , rgba(83,32,1,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings {\n    border: 1px solid white;\n    border-color: var( --color-accent-savings-02-color , rgba(83,32,1,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-savings-02-hover-text {\n  &:hover { color: var( --color-accent-savings-02-color , rgba(83,32,1,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-savings:hover { \n    color: var( --color-accent-savings-02-color , rgba(83,32,1,1) ); \n  }\n</style>\n<div id='color-accent-savings'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-savings-02-hover-text {\n  &:hover { background-color: var( --color-accent-savings-02-color , rgba(83,32,1,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-savings:hover {\n    background-color: var( --color-accent-savings-02-color , rgba(83,32,1,1) );\n  }\n  #color-accent-savings {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings'>hover over box</div>"
    }
  },
  "colors-accent-savings-darkest": {
    "background": {
      "output": "\n@mixin color-accent-savings-darkest-background {\n  background-color: var( --color-accent-savings-darkest-color , rgba(83,32,1,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings {\n    background-color: var( --color-accent-savings-darkest-color , rgba(83,32,1,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-savings-darkest-text {\n  color: var( --color-accent-savings-darkest-color , rgba(83,32,1,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings {\n    color: var( --color-accent-savings-darkest-color , rgba(83,32,1,1) );\n  }\n</style>\n<div id='color-accent-savings'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-savings-darkest-border {\n  border-color: var( --color-accent-savings-darkest-color , rgba(83,32,1,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings {\n    border: 1px solid white;\n    border-color: var( --color-accent-savings-darkest-color , rgba(83,32,1,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-savings-darkest-hover-text {\n  &:hover { color: var( --color-accent-savings-darkest-color , rgba(83,32,1,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-savings:hover { \n    color: var( --color-accent-savings-darkest-color , rgba(83,32,1,1) ); \n  }\n</style>\n<div id='color-accent-savings'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-savings-darkest-hover-text {\n  &:hover { background-color: var( --color-accent-savings-darkest-color , rgba(83,32,1,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-savings:hover {\n    background-color: var( --color-accent-savings-darkest-color , rgba(83,32,1,1) );\n  }\n  #color-accent-savings {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings'>hover over box</div>"
    }
  },
  "colors-accent-savings-03": {
    "background": {
      "output": "\n@mixin color-accent-savings-03-background {\n  background-color: var( --color-accent-savings-03-color , rgba(123,47,1,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings {\n    background-color: var( --color-accent-savings-03-color , rgba(123,47,1,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-savings-03-text {\n  color: var( --color-accent-savings-03-color , rgba(123,47,1,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings {\n    color: var( --color-accent-savings-03-color , rgba(123,47,1,1) );\n  }\n</style>\n<div id='color-accent-savings'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-savings-03-border {\n  border-color: var( --color-accent-savings-03-color , rgba(123,47,1,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings {\n    border: 1px solid white;\n    border-color: var( --color-accent-savings-03-color , rgba(123,47,1,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-savings-03-hover-text {\n  &:hover { color: var( --color-accent-savings-03-color , rgba(123,47,1,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-savings:hover { \n    color: var( --color-accent-savings-03-color , rgba(123,47,1,1) ); \n  }\n</style>\n<div id='color-accent-savings'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-savings-03-hover-text {\n  &:hover { background-color: var( --color-accent-savings-03-color , rgba(123,47,1,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-savings:hover {\n    background-color: var( --color-accent-savings-03-color , rgba(123,47,1,1) );\n  }\n  #color-accent-savings {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings'>hover over box</div>"
    }
  },
  "colors-accent-savings-darker": {
    "background": {
      "output": "\n@mixin color-accent-savings-darker-background {\n  background-color: var( --color-accent-savings-darker-color , rgba(123,47,1,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings {\n    background-color: var( --color-accent-savings-darker-color , rgba(123,47,1,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-savings-darker-text {\n  color: var( --color-accent-savings-darker-color , rgba(123,47,1,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings {\n    color: var( --color-accent-savings-darker-color , rgba(123,47,1,1) );\n  }\n</style>\n<div id='color-accent-savings'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-savings-darker-border {\n  border-color: var( --color-accent-savings-darker-color , rgba(123,47,1,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings {\n    border: 1px solid white;\n    border-color: var( --color-accent-savings-darker-color , rgba(123,47,1,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-savings-darker-hover-text {\n  &:hover { color: var( --color-accent-savings-darker-color , rgba(123,47,1,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-savings:hover { \n    color: var( --color-accent-savings-darker-color , rgba(123,47,1,1) ); \n  }\n</style>\n<div id='color-accent-savings'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-savings-darker-hover-text {\n  &:hover { background-color: var( --color-accent-savings-darker-color , rgba(123,47,1,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-savings:hover {\n    background-color: var( --color-accent-savings-darker-color , rgba(123,47,1,1) );\n  }\n  #color-accent-savings {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings'>hover over box</div>"
    }
  },
  "colors-accent-savings-04": {
    "background": {
      "output": "\n@mixin color-accent-savings-04-background {\n  background-color: var( --color-accent-savings-04-color , rgba(161,61,1,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings {\n    background-color: var( --color-accent-savings-04-color , rgba(161,61,1,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-savings-04-text {\n  color: var( --color-accent-savings-04-color , rgba(161,61,1,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings {\n    color: var( --color-accent-savings-04-color , rgba(161,61,1,1) );\n  }\n</style>\n<div id='color-accent-savings'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-savings-04-border {\n  border-color: var( --color-accent-savings-04-color , rgba(161,61,1,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings {\n    border: 1px solid white;\n    border-color: var( --color-accent-savings-04-color , rgba(161,61,1,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-savings-04-hover-text {\n  &:hover { color: var( --color-accent-savings-04-color , rgba(161,61,1,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-savings:hover { \n    color: var( --color-accent-savings-04-color , rgba(161,61,1,1) ); \n  }\n</style>\n<div id='color-accent-savings'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-savings-04-hover-text {\n  &:hover { background-color: var( --color-accent-savings-04-color , rgba(161,61,1,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-savings:hover {\n    background-color: var( --color-accent-savings-04-color , rgba(161,61,1,1) );\n  }\n  #color-accent-savings {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings'>hover over box</div>"
    }
  },
  "colors-accent-savings-dark": {
    "background": {
      "output": "\n@mixin color-accent-savings-dark-background {\n  background-color: var( --color-accent-savings-dark-color , rgba(161,61,1,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings {\n    background-color: var( --color-accent-savings-dark-color , rgba(161,61,1,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-savings-dark-text {\n  color: var( --color-accent-savings-dark-color , rgba(161,61,1,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings {\n    color: var( --color-accent-savings-dark-color , rgba(161,61,1,1) );\n  }\n</style>\n<div id='color-accent-savings'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-savings-dark-border {\n  border-color: var( --color-accent-savings-dark-color , rgba(161,61,1,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings {\n    border: 1px solid white;\n    border-color: var( --color-accent-savings-dark-color , rgba(161,61,1,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-savings-dark-hover-text {\n  &:hover { color: var( --color-accent-savings-dark-color , rgba(161,61,1,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-savings:hover { \n    color: var( --color-accent-savings-dark-color , rgba(161,61,1,1) ); \n  }\n</style>\n<div id='color-accent-savings'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-savings-dark-hover-text {\n  &:hover { background-color: var( --color-accent-savings-dark-color , rgba(161,61,1,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-savings:hover {\n    background-color: var( --color-accent-savings-dark-color , rgba(161,61,1,1) );\n  }\n  #color-accent-savings {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings'>hover over box</div>"
    }
  },
  "colors-accent-savings-05": {
    "background": {
      "output": "\n@mixin color-accent-savings-05-background {\n  background-color: var( --color-accent-savings-05-color , rgba(203,77,0,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings {\n    background-color: var( --color-accent-savings-05-color , rgba(203,77,0,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-savings-05-text {\n  color: var( --color-accent-savings-05-color , rgba(203,77,0,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings {\n    color: var( --color-accent-savings-05-color , rgba(203,77,0,1) );\n  }\n</style>\n<div id='color-accent-savings'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-savings-05-border {\n  border-color: var( --color-accent-savings-05-color , rgba(203,77,0,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings {\n    border: 1px solid white;\n    border-color: var( --color-accent-savings-05-color , rgba(203,77,0,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-savings-05-hover-text {\n  &:hover { color: var( --color-accent-savings-05-color , rgba(203,77,0,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-savings:hover { \n    color: var( --color-accent-savings-05-color , rgba(203,77,0,1) ); \n  }\n</style>\n<div id='color-accent-savings'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-savings-05-hover-text {\n  &:hover { background-color: var( --color-accent-savings-05-color , rgba(203,77,0,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-savings:hover {\n    background-color: var( --color-accent-savings-05-color , rgba(203,77,0,1) );\n  }\n  #color-accent-savings {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings'>hover over box</div>"
    }
  },
  "colors-accent-savings-": {
    "background": {
      "output": "\n@mixin color-accent-savings-background {\n  background-color: var( --color-accent-savings-color , rgba(203,77,0,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings {\n    background-color: var( --color-accent-savings-color , rgba(203,77,0,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-savings-text {\n  color: var( --color-accent-savings-color , rgba(203,77,0,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings {\n    color: var( --color-accent-savings-color , rgba(203,77,0,1) );\n  }\n</style>\n<div id='color-accent-savings'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-savings-border {\n  border-color: var( --color-accent-savings-color , rgba(203,77,0,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings {\n    border: 1px solid white;\n    border-color: var( --color-accent-savings-color , rgba(203,77,0,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-savings-hover-text {\n  &:hover { color: var( --color-accent-savings-color , rgba(203,77,0,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-savings:hover { \n    color: var( --color-accent-savings-color , rgba(203,77,0,1) ); \n  }\n</style>\n<div id='color-accent-savings'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-savings-hover-text {\n  &:hover { background-color: var( --color-accent-savings-color , rgba(203,77,0,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-savings:hover {\n    background-color: var( --color-accent-savings-color , rgba(203,77,0,1) );\n  }\n  #color-accent-savings {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings'>hover over box</div>"
    }
  },
  "colors-accent-savings-06": {
    "background": {
      "output": "\n@mixin color-accent-savings-06-background {\n  background-color: var( --color-accent-savings-06-color , rgba(214,110,47,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings {\n    background-color: var( --color-accent-savings-06-color , rgba(214,110,47,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-savings-06-text {\n  color: var( --color-accent-savings-06-color , rgba(214,110,47,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings {\n    color: var( --color-accent-savings-06-color , rgba(214,110,47,1) );\n  }\n</style>\n<div id='color-accent-savings'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-savings-06-border {\n  border-color: var( --color-accent-savings-06-color , rgba(214,110,47,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings {\n    border: 1px solid white;\n    border-color: var( --color-accent-savings-06-color , rgba(214,110,47,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-savings-06-hover-text {\n  &:hover { color: var( --color-accent-savings-06-color , rgba(214,110,47,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-savings:hover { \n    color: var( --color-accent-savings-06-color , rgba(214,110,47,1) ); \n  }\n</style>\n<div id='color-accent-savings'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-savings-06-hover-text {\n  &:hover { background-color: var( --color-accent-savings-06-color , rgba(214,110,47,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-savings:hover {\n    background-color: var( --color-accent-savings-06-color , rgba(214,110,47,1) );\n  }\n  #color-accent-savings {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings'>hover over box</div>"
    }
  },
  "colors-accent-savings-light": {
    "background": {
      "output": "\n@mixin color-accent-savings-light-background {\n  background-color: var( --color-accent-savings-light-color , rgba(214,110,47,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings {\n    background-color: var( --color-accent-savings-light-color , rgba(214,110,47,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-savings-light-text {\n  color: var( --color-accent-savings-light-color , rgba(214,110,47,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings {\n    color: var( --color-accent-savings-light-color , rgba(214,110,47,1) );\n  }\n</style>\n<div id='color-accent-savings'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-savings-light-border {\n  border-color: var( --color-accent-savings-light-color , rgba(214,110,47,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings {\n    border: 1px solid white;\n    border-color: var( --color-accent-savings-light-color , rgba(214,110,47,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-savings-light-hover-text {\n  &:hover { color: var( --color-accent-savings-light-color , rgba(214,110,47,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-savings:hover { \n    color: var( --color-accent-savings-light-color , rgba(214,110,47,1) ); \n  }\n</style>\n<div id='color-accent-savings'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-savings-light-hover-text {\n  &:hover { background-color: var( --color-accent-savings-light-color , rgba(214,110,47,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-savings:hover {\n    background-color: var( --color-accent-savings-light-color , rgba(214,110,47,1) );\n  }\n  #color-accent-savings {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings'>hover over box</div>"
    }
  },
  "colors-accent-savings-07": {
    "background": {
      "output": "\n@mixin color-accent-savings-07-background {\n  background-color: var( --color-accent-savings-07-color , rgba(224,143,94,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings {\n    background-color: var( --color-accent-savings-07-color , rgba(224,143,94,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-savings-07-text {\n  color: var( --color-accent-savings-07-color , rgba(224,143,94,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings {\n    color: var( --color-accent-savings-07-color , rgba(224,143,94,1) );\n  }\n</style>\n<div id='color-accent-savings'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-savings-07-border {\n  border-color: var( --color-accent-savings-07-color , rgba(224,143,94,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings {\n    border: 1px solid white;\n    border-color: var( --color-accent-savings-07-color , rgba(224,143,94,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-savings-07-hover-text {\n  &:hover { color: var( --color-accent-savings-07-color , rgba(224,143,94,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-savings:hover { \n    color: var( --color-accent-savings-07-color , rgba(224,143,94,1) ); \n  }\n</style>\n<div id='color-accent-savings'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-savings-07-hover-text {\n  &:hover { background-color: var( --color-accent-savings-07-color , rgba(224,143,94,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-savings:hover {\n    background-color: var( --color-accent-savings-07-color , rgba(224,143,94,1) );\n  }\n  #color-accent-savings {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings'>hover over box</div>"
    }
  },
  "colors-accent-savings-lighter": {
    "background": {
      "output": "\n@mixin color-accent-savings-lighter-background {\n  background-color: var( --color-accent-savings-lighter-color , rgba(224,143,94,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings {\n    background-color: var( --color-accent-savings-lighter-color , rgba(224,143,94,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-savings-lighter-text {\n  color: var( --color-accent-savings-lighter-color , rgba(224,143,94,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings {\n    color: var( --color-accent-savings-lighter-color , rgba(224,143,94,1) );\n  }\n</style>\n<div id='color-accent-savings'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-savings-lighter-border {\n  border-color: var( --color-accent-savings-lighter-color , rgba(224,143,94,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings {\n    border: 1px solid white;\n    border-color: var( --color-accent-savings-lighter-color , rgba(224,143,94,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-savings-lighter-hover-text {\n  &:hover { color: var( --color-accent-savings-lighter-color , rgba(224,143,94,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-savings:hover { \n    color: var( --color-accent-savings-lighter-color , rgba(224,143,94,1) ); \n  }\n</style>\n<div id='color-accent-savings'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-savings-lighter-hover-text {\n  &:hover { background-color: var( --color-accent-savings-lighter-color , rgba(224,143,94,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-savings:hover {\n    background-color: var( --color-accent-savings-lighter-color , rgba(224,143,94,1) );\n  }\n  #color-accent-savings {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings'>hover over box</div>"
    }
  },
  "colors-accent-savings-08": {
    "background": {
      "output": "\n@mixin color-accent-savings-08-background {\n  background-color: var( --color-accent-savings-08-color , rgba(234,177,142,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings {\n    background-color: var( --color-accent-savings-08-color , rgba(234,177,142,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-savings-08-text {\n  color: var( --color-accent-savings-08-color , rgba(234,177,142,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings {\n    color: var( --color-accent-savings-08-color , rgba(234,177,142,1) );\n  }\n</style>\n<div id='color-accent-savings'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-savings-08-border {\n  border-color: var( --color-accent-savings-08-color , rgba(234,177,142,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings {\n    border: 1px solid white;\n    border-color: var( --color-accent-savings-08-color , rgba(234,177,142,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-savings-08-hover-text {\n  &:hover { color: var( --color-accent-savings-08-color , rgba(234,177,142,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-savings:hover { \n    color: var( --color-accent-savings-08-color , rgba(234,177,142,1) ); \n  }\n</style>\n<div id='color-accent-savings'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-savings-08-hover-text {\n  &:hover { background-color: var( --color-accent-savings-08-color , rgba(234,177,142,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-savings:hover {\n    background-color: var( --color-accent-savings-08-color , rgba(234,177,142,1) );\n  }\n  #color-accent-savings {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings'>hover over box</div>"
    }
  },
  "colors-accent-savings-lightest": {
    "background": {
      "output": "\n@mixin color-accent-savings-lightest-background {\n  background-color: var( --color-accent-savings-lightest-color , rgba(234,177,142,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings {\n    background-color: var( --color-accent-savings-lightest-color , rgba(234,177,142,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-savings-lightest-text {\n  color: var( --color-accent-savings-lightest-color , rgba(234,177,142,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings {\n    color: var( --color-accent-savings-lightest-color , rgba(234,177,142,1) );\n  }\n</style>\n<div id='color-accent-savings'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-savings-lightest-border {\n  border-color: var( --color-accent-savings-lightest-color , rgba(234,177,142,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings {\n    border: 1px solid white;\n    border-color: var( --color-accent-savings-lightest-color , rgba(234,177,142,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-savings-lightest-hover-text {\n  &:hover { color: var( --color-accent-savings-lightest-color , rgba(234,177,142,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-savings:hover { \n    color: var( --color-accent-savings-lightest-color , rgba(234,177,142,1) ); \n  }\n</style>\n<div id='color-accent-savings'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-savings-lightest-hover-text {\n  &:hover { background-color: var( --color-accent-savings-lightest-color , rgba(234,177,142,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-savings:hover {\n    background-color: var( --color-accent-savings-lightest-color , rgba(234,177,142,1) );\n  }\n  #color-accent-savings {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings'>hover over box</div>"
    }
  },
  "colors-accent-savings-09": {
    "background": {
      "output": "\n@mixin color-accent-savings-09-background {\n  background-color: var( --color-accent-savings-09-color , rgba(245,213,193,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings {\n    background-color: var( --color-accent-savings-09-color , rgba(245,213,193,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-savings-09-text {\n  color: var( --color-accent-savings-09-color , rgba(245,213,193,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings {\n    color: var( --color-accent-savings-09-color , rgba(245,213,193,1) );\n  }\n</style>\n<div id='color-accent-savings'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-savings-09-border {\n  border-color: var( --color-accent-savings-09-color , rgba(245,213,193,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings {\n    border: 1px solid white;\n    border-color: var( --color-accent-savings-09-color , rgba(245,213,193,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-savings-09-hover-text {\n  &:hover { color: var( --color-accent-savings-09-color , rgba(245,213,193,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-savings:hover { \n    color: var( --color-accent-savings-09-color , rgba(245,213,193,1) ); \n  }\n</style>\n<div id='color-accent-savings'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-savings-09-hover-text {\n  &:hover { background-color: var( --color-accent-savings-09-color , rgba(245,213,193,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-savings:hover {\n    background-color: var( --color-accent-savings-09-color , rgba(245,213,193,1) );\n  }\n  #color-accent-savings {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings'>hover over box</div>"
    }
  },
  "colors-accent-savings-095": {
    "background": {
      "output": "\n@mixin color-accent-savings-095-background {\n  background-color: var( --color-accent-savings-095-color , rgba(255,246,241,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings {\n    background-color: var( --color-accent-savings-095-color , rgba(255,246,241,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-savings-095-text {\n  color: var( --color-accent-savings-095-color , rgba(255,246,241,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings {\n    color: var( --color-accent-savings-095-color , rgba(255,246,241,1) );\n  }\n</style>\n<div id='color-accent-savings'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-savings-095-border {\n  border-color: var( --color-accent-savings-095-color , rgba(255,246,241,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings {\n    border: 1px solid white;\n    border-color: var( --color-accent-savings-095-color , rgba(255,246,241,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-savings-095-hover-text {\n  &:hover { color: var( --color-accent-savings-095-color , rgba(255,246,241,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-savings:hover { \n    color: var( --color-accent-savings-095-color , rgba(255,246,241,1) ); \n  }\n</style>\n<div id='color-accent-savings'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-savings-095-hover-text {\n  &:hover { background-color: var( --color-accent-savings-095-color , rgba(255,246,241,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-savings:hover {\n    background-color: var( --color-accent-savings-095-color , rgba(255,246,241,1) );\n  }\n  #color-accent-savings {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings'>hover over box</div>"
    }
  },
  "colors-accent-savings-text-": {
    "background": {
      "output": "\n@mixin color-accent-savings-text-background {\n  background-color: var( --color-accent-savings-text-color , rgba(45,17,1,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings-text {\n    background-color: var( --color-accent-savings-text-color , rgba(45,17,1,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings-text'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-savings-text-text {\n  color: var( --color-accent-savings-text-color , rgba(45,17,1,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings-text {\n    color: var( --color-accent-savings-text-color , rgba(45,17,1,1) );\n  }\n</style>\n<div id='color-accent-savings-text'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-savings-text-border {\n  border-color: var( --color-accent-savings-text-color , rgba(45,17,1,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings-text {\n    border: 1px solid white;\n    border-color: var( --color-accent-savings-text-color , rgba(45,17,1,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings-text'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-savings-text-hover-text {\n  &:hover { color: var( --color-accent-savings-text-color , rgba(45,17,1,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-savings-text:hover { \n    color: var( --color-accent-savings-text-color , rgba(45,17,1,1) ); \n  }\n</style>\n<div id='color-accent-savings-text'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-savings-text-hover-text {\n  &:hover { background-color: var( --color-accent-savings-text-color , rgba(45,17,1,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-savings-text:hover {\n    background-color: var( --color-accent-savings-text-color , rgba(45,17,1,1) );\n  }\n  #color-accent-savings-text {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings-text'>hover over box</div>"
    }
  },
  "colors-accent-savings-text-light": {
    "background": {
      "output": "\n@mixin color-accent-savings-text-light-background {\n  background-color: var( --color-accent-savings-text-light-color , rgba(71,26,1,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings-text {\n    background-color: var( --color-accent-savings-text-light-color , rgba(71,26,1,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings-text'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-savings-text-light-text {\n  color: var( --color-accent-savings-text-light-color , rgba(71,26,1,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings-text {\n    color: var( --color-accent-savings-text-light-color , rgba(71,26,1,1) );\n  }\n</style>\n<div id='color-accent-savings-text'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-savings-text-light-border {\n  border-color: var( --color-accent-savings-text-light-color , rgba(71,26,1,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings-text {\n    border: 1px solid white;\n    border-color: var( --color-accent-savings-text-light-color , rgba(71,26,1,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings-text'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-savings-text-light-hover-text {\n  &:hover { color: var( --color-accent-savings-text-light-color , rgba(71,26,1,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-savings-text:hover { \n    color: var( --color-accent-savings-text-light-color , rgba(71,26,1,1) ); \n  }\n</style>\n<div id='color-accent-savings-text'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-savings-text-light-hover-text {\n  &:hover { background-color: var( --color-accent-savings-text-light-color , rgba(71,26,1,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-savings-text:hover {\n    background-color: var( --color-accent-savings-text-light-color , rgba(71,26,1,1) );\n  }\n  #color-accent-savings-text {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings-text'>hover over box</div>"
    }
  },
  "colors-accent-savings-text-lighter": {
    "background": {
      "output": "\n@mixin color-accent-savings-text-lighter-background {\n  background-color: var( --color-accent-savings-text-lighter-color , rgba(99,37,0,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings-text {\n    background-color: var( --color-accent-savings-text-lighter-color , rgba(99,37,0,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings-text'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-savings-text-lighter-text {\n  color: var( --color-accent-savings-text-lighter-color , rgba(99,37,0,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings-text {\n    color: var( --color-accent-savings-text-lighter-color , rgba(99,37,0,1) );\n  }\n</style>\n<div id='color-accent-savings-text'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-savings-text-lighter-border {\n  border-color: var( --color-accent-savings-text-lighter-color , rgba(99,37,0,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings-text {\n    border: 1px solid white;\n    border-color: var( --color-accent-savings-text-lighter-color , rgba(99,37,0,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings-text'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-savings-text-lighter-hover-text {\n  &:hover { color: var( --color-accent-savings-text-lighter-color , rgba(99,37,0,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-savings-text:hover { \n    color: var( --color-accent-savings-text-lighter-color , rgba(99,37,0,1) ); \n  }\n</style>\n<div id='color-accent-savings-text'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-savings-text-lighter-hover-text {\n  &:hover { background-color: var( --color-accent-savings-text-lighter-color , rgba(99,37,0,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-savings-text:hover {\n    background-color: var( --color-accent-savings-text-lighter-color , rgba(99,37,0,1) );\n  }\n  #color-accent-savings-text {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings-text'>hover over box</div>"
    }
  },
  "colors-accent-savings-text-lightest": {
    "background": {
      "output": "\n@mixin color-accent-savings-text-lightest-background {\n  background-color: var( --color-accent-savings-text-lightest-color , rgba(123,47,1,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings-text {\n    background-color: var( --color-accent-savings-text-lightest-color , rgba(123,47,1,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings-text'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-savings-text-lightest-text {\n  color: var( --color-accent-savings-text-lightest-color , rgba(123,47,1,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings-text {\n    color: var( --color-accent-savings-text-lightest-color , rgba(123,47,1,1) );\n  }\n</style>\n<div id='color-accent-savings-text'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-savings-text-lightest-border {\n  border-color: var( --color-accent-savings-text-lightest-color , rgba(123,47,1,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings-text {\n    border: 1px solid white;\n    border-color: var( --color-accent-savings-text-lightest-color , rgba(123,47,1,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings-text'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-savings-text-lightest-hover-text {\n  &:hover { color: var( --color-accent-savings-text-lightest-color , rgba(123,47,1,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-savings-text:hover { \n    color: var( --color-accent-savings-text-lightest-color , rgba(123,47,1,1) ); \n  }\n</style>\n<div id='color-accent-savings-text'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-savings-text-lightest-hover-text {\n  &:hover { background-color: var( --color-accent-savings-text-lightest-color , rgba(123,47,1,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-savings-text:hover {\n    background-color: var( --color-accent-savings-text-lightest-color , rgba(123,47,1,1) );\n  }\n  #color-accent-savings-text {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings-text'>hover over box</div>"
    }
  },
  "colors-accent-savings-text-inv": {
    "background": {
      "output": "\n@mixin color-accent-savings-text-inv-background {\n  background-color: var( --color-accent-savings-text-inv-color , rgba(255,246,241,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings-text {\n    background-color: var( --color-accent-savings-text-inv-color , rgba(255,246,241,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings-text'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-savings-text-inv-text {\n  color: var( --color-accent-savings-text-inv-color , rgba(255,246,241,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings-text {\n    color: var( --color-accent-savings-text-inv-color , rgba(255,246,241,1) );\n  }\n</style>\n<div id='color-accent-savings-text'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-savings-text-inv-border {\n  border-color: var( --color-accent-savings-text-inv-color , rgba(255,246,241,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings-text {\n    border: 1px solid white;\n    border-color: var( --color-accent-savings-text-inv-color , rgba(255,246,241,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings-text'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-savings-text-inv-hover-text {\n  &:hover { color: var( --color-accent-savings-text-inv-color , rgba(255,246,241,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-savings-text:hover { \n    color: var( --color-accent-savings-text-inv-color , rgba(255,246,241,1) ); \n  }\n</style>\n<div id='color-accent-savings-text'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-savings-text-inv-hover-text {\n  &:hover { background-color: var( --color-accent-savings-text-inv-color , rgba(255,246,241,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-savings-text:hover {\n    background-color: var( --color-accent-savings-text-inv-color , rgba(255,246,241,1) );\n  }\n  #color-accent-savings-text {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings-text'>hover over box</div>"
    }
  },
  "colors-accent-savings-text-inv-dark": {
    "background": {
      "output": "\n@mixin color-accent-savings-text-inv-dark-background {\n  background-color: var( --color-accent-savings-text-inv-dark-color , rgba(255,229,215,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings-text {\n    background-color: var( --color-accent-savings-text-inv-dark-color , rgba(255,229,215,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings-text'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-savings-text-inv-dark-text {\n  color: var( --color-accent-savings-text-inv-dark-color , rgba(255,229,215,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings-text {\n    color: var( --color-accent-savings-text-inv-dark-color , rgba(255,229,215,1) );\n  }\n</style>\n<div id='color-accent-savings-text'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-savings-text-inv-dark-border {\n  border-color: var( --color-accent-savings-text-inv-dark-color , rgba(255,229,215,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings-text {\n    border: 1px solid white;\n    border-color: var( --color-accent-savings-text-inv-dark-color , rgba(255,229,215,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings-text'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-savings-text-inv-dark-hover-text {\n  &:hover { color: var( --color-accent-savings-text-inv-dark-color , rgba(255,229,215,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-savings-text:hover { \n    color: var( --color-accent-savings-text-inv-dark-color , rgba(255,229,215,1) ); \n  }\n</style>\n<div id='color-accent-savings-text'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-savings-text-inv-dark-hover-text {\n  &:hover { background-color: var( --color-accent-savings-text-inv-dark-color , rgba(255,229,215,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-savings-text:hover {\n    background-color: var( --color-accent-savings-text-inv-dark-color , rgba(255,229,215,1) );\n  }\n  #color-accent-savings-text {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings-text'>hover over box</div>"
    }
  },
  "colors-accent-savings-text-inv-darker": {
    "background": {
      "output": "\n@mixin color-accent-savings-text-inv-darker-background {\n  background-color: var( --color-accent-savings-text-inv-darker-color , rgba(246,202,175,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings-text {\n    background-color: var( --color-accent-savings-text-inv-darker-color , rgba(246,202,175,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings-text'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-savings-text-inv-darker-text {\n  color: var( --color-accent-savings-text-inv-darker-color , rgba(246,202,175,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings-text {\n    color: var( --color-accent-savings-text-inv-darker-color , rgba(246,202,175,1) );\n  }\n</style>\n<div id='color-accent-savings-text'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-savings-text-inv-darker-border {\n  border-color: var( --color-accent-savings-text-inv-darker-color , rgba(246,202,175,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings-text {\n    border: 1px solid white;\n    border-color: var( --color-accent-savings-text-inv-darker-color , rgba(246,202,175,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings-text'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-savings-text-inv-darker-hover-text {\n  &:hover { color: var( --color-accent-savings-text-inv-darker-color , rgba(246,202,175,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-savings-text:hover { \n    color: var( --color-accent-savings-text-inv-darker-color , rgba(246,202,175,1) ); \n  }\n</style>\n<div id='color-accent-savings-text'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-savings-text-inv-darker-hover-text {\n  &:hover { background-color: var( --color-accent-savings-text-inv-darker-color , rgba(246,202,175,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-savings-text:hover {\n    background-color: var( --color-accent-savings-text-inv-darker-color , rgba(246,202,175,1) );\n  }\n  #color-accent-savings-text {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings-text'>hover over box</div>"
    }
  },
  "colors-accent-savings-text-inv-darkest": {
    "background": {
      "output": "\n@mixin color-accent-savings-text-inv-darkest-background {\n  background-color: var( --color-accent-savings-text-inv-darkest-color , rgba(224,143,94,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings-text {\n    background-color: var( --color-accent-savings-text-inv-darkest-color , rgba(224,143,94,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings-text'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-savings-text-inv-darkest-text {\n  color: var( --color-accent-savings-text-inv-darkest-color , rgba(224,143,94,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings-text {\n    color: var( --color-accent-savings-text-inv-darkest-color , rgba(224,143,94,1) );\n  }\n</style>\n<div id='color-accent-savings-text'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-savings-text-inv-darkest-border {\n  border-color: var( --color-accent-savings-text-inv-darkest-color , rgba(224,143,94,1) );\n}",
      "example": "\n<style>\n  #color-accent-savings-text {\n    border: 1px solid white;\n    border-color: var( --color-accent-savings-text-inv-darkest-color , rgba(224,143,94,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings-text'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-savings-text-inv-darkest-hover-text {\n  &:hover { color: var( --color-accent-savings-text-inv-darkest-color , rgba(224,143,94,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-savings-text:hover { \n    color: var( --color-accent-savings-text-inv-darkest-color , rgba(224,143,94,1) ); \n  }\n</style>\n<div id='color-accent-savings-text'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-savings-text-inv-darkest-hover-text {\n  &:hover { background-color: var( --color-accent-savings-text-inv-darkest-color , rgba(224,143,94,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-savings-text:hover {\n    background-color: var( --color-accent-savings-text-inv-darkest-color , rgba(224,143,94,1) );\n  }\n  #color-accent-savings-text {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-savings-text'>hover over box</div>"
    }
  },
  "colors-accent-checking-01": {
    "background": {
      "output": "\n@mixin color-accent-checking-01-background {\n  background-color: var( --color-accent-checking-01-color , rgba(69,1,3,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking {\n    background-color: var( --color-accent-checking-01-color , rgba(69,1,3,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-checking-01-text {\n  color: var( --color-accent-checking-01-color , rgba(69,1,3,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking {\n    color: var( --color-accent-checking-01-color , rgba(69,1,3,1) );\n  }\n</style>\n<div id='color-accent-checking'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-checking-01-border {\n  border-color: var( --color-accent-checking-01-color , rgba(69,1,3,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking {\n    border: 1px solid white;\n    border-color: var( --color-accent-checking-01-color , rgba(69,1,3,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-checking-01-hover-text {\n  &:hover { color: var( --color-accent-checking-01-color , rgba(69,1,3,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking:hover { \n    color: var( --color-accent-checking-01-color , rgba(69,1,3,1) ); \n  }\n</style>\n<div id='color-accent-checking'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-checking-01-hover-text {\n  &:hover { background-color: var( --color-accent-checking-01-color , rgba(69,1,3,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking:hover {\n    background-color: var( --color-accent-checking-01-color , rgba(69,1,3,1) );\n  }\n  #color-accent-checking {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking'>hover over box</div>"
    }
  },
  "colors-accent-checking-02": {
    "background": {
      "output": "\n@mixin color-accent-checking-02-background {\n  background-color: var( --color-accent-checking-02-color , rgba(101,11,13,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking {\n    background-color: var( --color-accent-checking-02-color , rgba(101,11,13,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-checking-02-text {\n  color: var( --color-accent-checking-02-color , rgba(101,11,13,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking {\n    color: var( --color-accent-checking-02-color , rgba(101,11,13,1) );\n  }\n</style>\n<div id='color-accent-checking'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-checking-02-border {\n  border-color: var( --color-accent-checking-02-color , rgba(101,11,13,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking {\n    border: 1px solid white;\n    border-color: var( --color-accent-checking-02-color , rgba(101,11,13,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-checking-02-hover-text {\n  &:hover { color: var( --color-accent-checking-02-color , rgba(101,11,13,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking:hover { \n    color: var( --color-accent-checking-02-color , rgba(101,11,13,1) ); \n  }\n</style>\n<div id='color-accent-checking'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-checking-02-hover-text {\n  &:hover { background-color: var( --color-accent-checking-02-color , rgba(101,11,13,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking:hover {\n    background-color: var( --color-accent-checking-02-color , rgba(101,11,13,1) );\n  }\n  #color-accent-checking {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking'>hover over box</div>"
    }
  },
  "colors-accent-checking-darkest": {
    "background": {
      "output": "\n@mixin color-accent-checking-darkest-background {\n  background-color: var( --color-accent-checking-darkest-color , rgba(101,11,13,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking {\n    background-color: var( --color-accent-checking-darkest-color , rgba(101,11,13,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-checking-darkest-text {\n  color: var( --color-accent-checking-darkest-color , rgba(101,11,13,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking {\n    color: var( --color-accent-checking-darkest-color , rgba(101,11,13,1) );\n  }\n</style>\n<div id='color-accent-checking'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-checking-darkest-border {\n  border-color: var( --color-accent-checking-darkest-color , rgba(101,11,13,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking {\n    border: 1px solid white;\n    border-color: var( --color-accent-checking-darkest-color , rgba(101,11,13,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-checking-darkest-hover-text {\n  &:hover { color: var( --color-accent-checking-darkest-color , rgba(101,11,13,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking:hover { \n    color: var( --color-accent-checking-darkest-color , rgba(101,11,13,1) ); \n  }\n</style>\n<div id='color-accent-checking'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-checking-darkest-hover-text {\n  &:hover { background-color: var( --color-accent-checking-darkest-color , rgba(101,11,13,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking:hover {\n    background-color: var( --color-accent-checking-darkest-color , rgba(101,11,13,1) );\n  }\n  #color-accent-checking {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking'>hover over box</div>"
    }
  },
  "colors-accent-checking-03": {
    "background": {
      "output": "\n@mixin color-accent-checking-03-background {\n  background-color: var( --color-accent-checking-03-color , rgba(134,21,24,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking {\n    background-color: var( --color-accent-checking-03-color , rgba(134,21,24,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-checking-03-text {\n  color: var( --color-accent-checking-03-color , rgba(134,21,24,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking {\n    color: var( --color-accent-checking-03-color , rgba(134,21,24,1) );\n  }\n</style>\n<div id='color-accent-checking'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-checking-03-border {\n  border-color: var( --color-accent-checking-03-color , rgba(134,21,24,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking {\n    border: 1px solid white;\n    border-color: var( --color-accent-checking-03-color , rgba(134,21,24,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-checking-03-hover-text {\n  &:hover { color: var( --color-accent-checking-03-color , rgba(134,21,24,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking:hover { \n    color: var( --color-accent-checking-03-color , rgba(134,21,24,1) ); \n  }\n</style>\n<div id='color-accent-checking'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-checking-03-hover-text {\n  &:hover { background-color: var( --color-accent-checking-03-color , rgba(134,21,24,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking:hover {\n    background-color: var( --color-accent-checking-03-color , rgba(134,21,24,1) );\n  }\n  #color-accent-checking {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking'>hover over box</div>"
    }
  },
  "colors-accent-checking-darker": {
    "background": {
      "output": "\n@mixin color-accent-checking-darker-background {\n  background-color: var( --color-accent-checking-darker-color , rgba(134,21,24,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking {\n    background-color: var( --color-accent-checking-darker-color , rgba(134,21,24,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-checking-darker-text {\n  color: var( --color-accent-checking-darker-color , rgba(134,21,24,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking {\n    color: var( --color-accent-checking-darker-color , rgba(134,21,24,1) );\n  }\n</style>\n<div id='color-accent-checking'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-checking-darker-border {\n  border-color: var( --color-accent-checking-darker-color , rgba(134,21,24,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking {\n    border: 1px solid white;\n    border-color: var( --color-accent-checking-darker-color , rgba(134,21,24,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-checking-darker-hover-text {\n  &:hover { color: var( --color-accent-checking-darker-color , rgba(134,21,24,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking:hover { \n    color: var( --color-accent-checking-darker-color , rgba(134,21,24,1) ); \n  }\n</style>\n<div id='color-accent-checking'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-checking-darker-hover-text {\n  &:hover { background-color: var( --color-accent-checking-darker-color , rgba(134,21,24,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking:hover {\n    background-color: var( --color-accent-checking-darker-color , rgba(134,21,24,1) );\n  }\n  #color-accent-checking {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking'>hover over box</div>"
    }
  },
  "colors-accent-checking-04": {
    "background": {
      "output": "\n@mixin color-accent-checking-04-background {\n  background-color: var( --color-accent-checking-04-color , rgba(167,30,34,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking {\n    background-color: var( --color-accent-checking-04-color , rgba(167,30,34,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-checking-04-text {\n  color: var( --color-accent-checking-04-color , rgba(167,30,34,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking {\n    color: var( --color-accent-checking-04-color , rgba(167,30,34,1) );\n  }\n</style>\n<div id='color-accent-checking'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-checking-04-border {\n  border-color: var( --color-accent-checking-04-color , rgba(167,30,34,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking {\n    border: 1px solid white;\n    border-color: var( --color-accent-checking-04-color , rgba(167,30,34,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-checking-04-hover-text {\n  &:hover { color: var( --color-accent-checking-04-color , rgba(167,30,34,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking:hover { \n    color: var( --color-accent-checking-04-color , rgba(167,30,34,1) ); \n  }\n</style>\n<div id='color-accent-checking'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-checking-04-hover-text {\n  &:hover { background-color: var( --color-accent-checking-04-color , rgba(167,30,34,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking:hover {\n    background-color: var( --color-accent-checking-04-color , rgba(167,30,34,1) );\n  }\n  #color-accent-checking {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking'>hover over box</div>"
    }
  },
  "colors-accent-checking-dark": {
    "background": {
      "output": "\n@mixin color-accent-checking-dark-background {\n  background-color: var( --color-accent-checking-dark-color , rgba(167,30,34,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking {\n    background-color: var( --color-accent-checking-dark-color , rgba(167,30,34,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-checking-dark-text {\n  color: var( --color-accent-checking-dark-color , rgba(167,30,34,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking {\n    color: var( --color-accent-checking-dark-color , rgba(167,30,34,1) );\n  }\n</style>\n<div id='color-accent-checking'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-checking-dark-border {\n  border-color: var( --color-accent-checking-dark-color , rgba(167,30,34,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking {\n    border: 1px solid white;\n    border-color: var( --color-accent-checking-dark-color , rgba(167,30,34,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-checking-dark-hover-text {\n  &:hover { color: var( --color-accent-checking-dark-color , rgba(167,30,34,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking:hover { \n    color: var( --color-accent-checking-dark-color , rgba(167,30,34,1) ); \n  }\n</style>\n<div id='color-accent-checking'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-checking-dark-hover-text {\n  &:hover { background-color: var( --color-accent-checking-dark-color , rgba(167,30,34,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking:hover {\n    background-color: var( --color-accent-checking-dark-color , rgba(167,30,34,1) );\n  }\n  #color-accent-checking {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking'>hover over box</div>"
    }
  },
  "colors-accent-checking-05": {
    "background": {
      "output": "\n@mixin color-accent-checking-05-background {\n  background-color: var( --color-accent-checking-05-color , rgba(201,40,45,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking {\n    background-color: var( --color-accent-checking-05-color , rgba(201,40,45,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-checking-05-text {\n  color: var( --color-accent-checking-05-color , rgba(201,40,45,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking {\n    color: var( --color-accent-checking-05-color , rgba(201,40,45,1) );\n  }\n</style>\n<div id='color-accent-checking'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-checking-05-border {\n  border-color: var( --color-accent-checking-05-color , rgba(201,40,45,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking {\n    border: 1px solid white;\n    border-color: var( --color-accent-checking-05-color , rgba(201,40,45,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-checking-05-hover-text {\n  &:hover { color: var( --color-accent-checking-05-color , rgba(201,40,45,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking:hover { \n    color: var( --color-accent-checking-05-color , rgba(201,40,45,1) ); \n  }\n</style>\n<div id='color-accent-checking'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-checking-05-hover-text {\n  &:hover { background-color: var( --color-accent-checking-05-color , rgba(201,40,45,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking:hover {\n    background-color: var( --color-accent-checking-05-color , rgba(201,40,45,1) );\n  }\n  #color-accent-checking {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking'>hover over box</div>"
    }
  },
  "colors-accent-checking-": {
    "background": {
      "output": "\n@mixin color-accent-checking-background {\n  background-color: var( --color-accent-checking-color , rgba(201,40,45,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking {\n    background-color: var( --color-accent-checking-color , rgba(201,40,45,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-checking-text {\n  color: var( --color-accent-checking-color , rgba(201,40,45,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking {\n    color: var( --color-accent-checking-color , rgba(201,40,45,1) );\n  }\n</style>\n<div id='color-accent-checking'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-checking-border {\n  border-color: var( --color-accent-checking-color , rgba(201,40,45,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking {\n    border: 1px solid white;\n    border-color: var( --color-accent-checking-color , rgba(201,40,45,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-checking-hover-text {\n  &:hover { color: var( --color-accent-checking-color , rgba(201,40,45,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking:hover { \n    color: var( --color-accent-checking-color , rgba(201,40,45,1) ); \n  }\n</style>\n<div id='color-accent-checking'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-checking-hover-text {\n  &:hover { background-color: var( --color-accent-checking-color , rgba(201,40,45,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking:hover {\n    background-color: var( --color-accent-checking-color , rgba(201,40,45,1) );\n  }\n  #color-accent-checking {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking'>hover over box</div>"
    }
  },
  "colors-accent-checking-06": {
    "background": {
      "output": "\n@mixin color-accent-checking-06-background {\n  background-color: var( --color-accent-checking-06-color , rgba(212,78,82,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking {\n    background-color: var( --color-accent-checking-06-color , rgba(212,78,82,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-checking-06-text {\n  color: var( --color-accent-checking-06-color , rgba(212,78,82,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking {\n    color: var( --color-accent-checking-06-color , rgba(212,78,82,1) );\n  }\n</style>\n<div id='color-accent-checking'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-checking-06-border {\n  border-color: var( --color-accent-checking-06-color , rgba(212,78,82,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking {\n    border: 1px solid white;\n    border-color: var( --color-accent-checking-06-color , rgba(212,78,82,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-checking-06-hover-text {\n  &:hover { color: var( --color-accent-checking-06-color , rgba(212,78,82,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking:hover { \n    color: var( --color-accent-checking-06-color , rgba(212,78,82,1) ); \n  }\n</style>\n<div id='color-accent-checking'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-checking-06-hover-text {\n  &:hover { background-color: var( --color-accent-checking-06-color , rgba(212,78,82,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking:hover {\n    background-color: var( --color-accent-checking-06-color , rgba(212,78,82,1) );\n  }\n  #color-accent-checking {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking'>hover over box</div>"
    }
  },
  "colors-accent-checking-light": {
    "background": {
      "output": "\n@mixin color-accent-checking-light-background {\n  background-color: var( --color-accent-checking-light-color , rgba(212,78,82,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking {\n    background-color: var( --color-accent-checking-light-color , rgba(212,78,82,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-checking-light-text {\n  color: var( --color-accent-checking-light-color , rgba(212,78,82,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking {\n    color: var( --color-accent-checking-light-color , rgba(212,78,82,1) );\n  }\n</style>\n<div id='color-accent-checking'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-checking-light-border {\n  border-color: var( --color-accent-checking-light-color , rgba(212,78,82,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking {\n    border: 1px solid white;\n    border-color: var( --color-accent-checking-light-color , rgba(212,78,82,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-checking-light-hover-text {\n  &:hover { color: var( --color-accent-checking-light-color , rgba(212,78,82,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking:hover { \n    color: var( --color-accent-checking-light-color , rgba(212,78,82,1) ); \n  }\n</style>\n<div id='color-accent-checking'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-checking-light-hover-text {\n  &:hover { background-color: var( --color-accent-checking-light-color , rgba(212,78,82,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking:hover {\n    background-color: var( --color-accent-checking-light-color , rgba(212,78,82,1) );\n  }\n  #color-accent-checking {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking'>hover over box</div>"
    }
  },
  "colors-accent-checking-07": {
    "background": {
      "output": "\n@mixin color-accent-checking-07-background {\n  background-color: var( --color-accent-checking-07-color , rgba(222,115,118,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking {\n    background-color: var( --color-accent-checking-07-color , rgba(222,115,118,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-checking-07-text {\n  color: var( --color-accent-checking-07-color , rgba(222,115,118,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking {\n    color: var( --color-accent-checking-07-color , rgba(222,115,118,1) );\n  }\n</style>\n<div id='color-accent-checking'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-checking-07-border {\n  border-color: var( --color-accent-checking-07-color , rgba(222,115,118,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking {\n    border: 1px solid white;\n    border-color: var( --color-accent-checking-07-color , rgba(222,115,118,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-checking-07-hover-text {\n  &:hover { color: var( --color-accent-checking-07-color , rgba(222,115,118,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking:hover { \n    color: var( --color-accent-checking-07-color , rgba(222,115,118,1) ); \n  }\n</style>\n<div id='color-accent-checking'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-checking-07-hover-text {\n  &:hover { background-color: var( --color-accent-checking-07-color , rgba(222,115,118,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking:hover {\n    background-color: var( --color-accent-checking-07-color , rgba(222,115,118,1) );\n  }\n  #color-accent-checking {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking'>hover over box</div>"
    }
  },
  "colors-accent-checking-lighter": {
    "background": {
      "output": "\n@mixin color-accent-checking-lighter-background {\n  background-color: var( --color-accent-checking-lighter-color , rgba(222,115,118,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking {\n    background-color: var( --color-accent-checking-lighter-color , rgba(222,115,118,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-checking-lighter-text {\n  color: var( --color-accent-checking-lighter-color , rgba(222,115,118,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking {\n    color: var( --color-accent-checking-lighter-color , rgba(222,115,118,1) );\n  }\n</style>\n<div id='color-accent-checking'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-checking-lighter-border {\n  border-color: var( --color-accent-checking-lighter-color , rgba(222,115,118,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking {\n    border: 1px solid white;\n    border-color: var( --color-accent-checking-lighter-color , rgba(222,115,118,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-checking-lighter-hover-text {\n  &:hover { color: var( --color-accent-checking-lighter-color , rgba(222,115,118,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking:hover { \n    color: var( --color-accent-checking-lighter-color , rgba(222,115,118,1) ); \n  }\n</style>\n<div id='color-accent-checking'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-checking-lighter-hover-text {\n  &:hover { background-color: var( --color-accent-checking-lighter-color , rgba(222,115,118,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking:hover {\n    background-color: var( --color-accent-checking-lighter-color , rgba(222,115,118,1) );\n  }\n  #color-accent-checking {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking'>hover over box</div>"
    }
  },
  "colors-accent-checking-08": {
    "background": {
      "output": "\n@mixin color-accent-checking-08-background {\n  background-color: var( --color-accent-checking-08-color , rgba(233,155,158,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking {\n    background-color: var( --color-accent-checking-08-color , rgba(233,155,158,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-checking-08-text {\n  color: var( --color-accent-checking-08-color , rgba(233,155,158,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking {\n    color: var( --color-accent-checking-08-color , rgba(233,155,158,1) );\n  }\n</style>\n<div id='color-accent-checking'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-checking-08-border {\n  border-color: var( --color-accent-checking-08-color , rgba(233,155,158,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking {\n    border: 1px solid white;\n    border-color: var( --color-accent-checking-08-color , rgba(233,155,158,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-checking-08-hover-text {\n  &:hover { color: var( --color-accent-checking-08-color , rgba(233,155,158,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking:hover { \n    color: var( --color-accent-checking-08-color , rgba(233,155,158,1) ); \n  }\n</style>\n<div id='color-accent-checking'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-checking-08-hover-text {\n  &:hover { background-color: var( --color-accent-checking-08-color , rgba(233,155,158,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking:hover {\n    background-color: var( --color-accent-checking-08-color , rgba(233,155,158,1) );\n  }\n  #color-accent-checking {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking'>hover over box</div>"
    }
  },
  "colors-accent-checking-lightest": {
    "background": {
      "output": "\n@mixin color-accent-checking-lightest-background {\n  background-color: var( --color-accent-checking-lightest-color , rgba(233,155,158,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking {\n    background-color: var( --color-accent-checking-lightest-color , rgba(233,155,158,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-checking-lightest-text {\n  color: var( --color-accent-checking-lightest-color , rgba(233,155,158,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking {\n    color: var( --color-accent-checking-lightest-color , rgba(233,155,158,1) );\n  }\n</style>\n<div id='color-accent-checking'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-checking-lightest-border {\n  border-color: var( --color-accent-checking-lightest-color , rgba(233,155,158,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking {\n    border: 1px solid white;\n    border-color: var( --color-accent-checking-lightest-color , rgba(233,155,158,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-checking-lightest-hover-text {\n  &:hover { color: var( --color-accent-checking-lightest-color , rgba(233,155,158,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking:hover { \n    color: var( --color-accent-checking-lightest-color , rgba(233,155,158,1) ); \n  }\n</style>\n<div id='color-accent-checking'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-checking-lightest-hover-text {\n  &:hover { background-color: var( --color-accent-checking-lightest-color , rgba(233,155,158,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking:hover {\n    background-color: var( --color-accent-checking-lightest-color , rgba(233,155,158,1) );\n  }\n  #color-accent-checking {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking'>hover over box</div>"
    }
  },
  "colors-accent-checking-09": {
    "background": {
      "output": "\n@mixin color-accent-checking-09-background {\n  background-color: var( --color-accent-checking-09-color , rgba(245,197,199,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking {\n    background-color: var( --color-accent-checking-09-color , rgba(245,197,199,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-checking-09-text {\n  color: var( --color-accent-checking-09-color , rgba(245,197,199,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking {\n    color: var( --color-accent-checking-09-color , rgba(245,197,199,1) );\n  }\n</style>\n<div id='color-accent-checking'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-checking-09-border {\n  border-color: var( --color-accent-checking-09-color , rgba(245,197,199,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking {\n    border: 1px solid white;\n    border-color: var( --color-accent-checking-09-color , rgba(245,197,199,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-checking-09-hover-text {\n  &:hover { color: var( --color-accent-checking-09-color , rgba(245,197,199,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking:hover { \n    color: var( --color-accent-checking-09-color , rgba(245,197,199,1) ); \n  }\n</style>\n<div id='color-accent-checking'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-checking-09-hover-text {\n  &:hover { background-color: var( --color-accent-checking-09-color , rgba(245,197,199,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking:hover {\n    background-color: var( --color-accent-checking-09-color , rgba(245,197,199,1) );\n  }\n  #color-accent-checking {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking'>hover over box</div>"
    }
  },
  "colors-accent-checking-095": {
    "background": {
      "output": "\n@mixin color-accent-checking-095-background {\n  background-color: var( --color-accent-checking-095-color , rgba(255,236,237,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking {\n    background-color: var( --color-accent-checking-095-color , rgba(255,236,237,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-checking-095-text {\n  color: var( --color-accent-checking-095-color , rgba(255,236,237,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking {\n    color: var( --color-accent-checking-095-color , rgba(255,236,237,1) );\n  }\n</style>\n<div id='color-accent-checking'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-checking-095-border {\n  border-color: var( --color-accent-checking-095-color , rgba(255,236,237,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking {\n    border: 1px solid white;\n    border-color: var( --color-accent-checking-095-color , rgba(255,236,237,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-checking-095-hover-text {\n  &:hover { color: var( --color-accent-checking-095-color , rgba(255,236,237,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking:hover { \n    color: var( --color-accent-checking-095-color , rgba(255,236,237,1) ); \n  }\n</style>\n<div id='color-accent-checking'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-checking-095-hover-text {\n  &:hover { background-color: var( --color-accent-checking-095-color , rgba(255,236,237,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking:hover {\n    background-color: var( --color-accent-checking-095-color , rgba(255,236,237,1) );\n  }\n  #color-accent-checking {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking'>hover over box</div>"
    }
  },
  "colors-accent-checking-text-": {
    "background": {
      "output": "\n@mixin color-accent-checking-text-background {\n  background-color: var( --color-accent-checking-text-color , rgba(69,1,3,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-text {\n    background-color: var( --color-accent-checking-text-color , rgba(69,1,3,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-text'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-checking-text-text {\n  color: var( --color-accent-checking-text-color , rgba(69,1,3,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-text {\n    color: var( --color-accent-checking-text-color , rgba(69,1,3,1) );\n  }\n</style>\n<div id='color-accent-checking-text'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-checking-text-border {\n  border-color: var( --color-accent-checking-text-color , rgba(69,1,3,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-text {\n    border: 1px solid white;\n    border-color: var( --color-accent-checking-text-color , rgba(69,1,3,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-text'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-checking-text-hover-text {\n  &:hover { color: var( --color-accent-checking-text-color , rgba(69,1,3,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking-text:hover { \n    color: var( --color-accent-checking-text-color , rgba(69,1,3,1) ); \n  }\n</style>\n<div id='color-accent-checking-text'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-checking-text-hover-text {\n  &:hover { background-color: var( --color-accent-checking-text-color , rgba(69,1,3,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking-text:hover {\n    background-color: var( --color-accent-checking-text-color , rgba(69,1,3,1) );\n  }\n  #color-accent-checking-text {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-text'>hover over box</div>"
    }
  },
  "colors-accent-checking-text-light": {
    "background": {
      "output": "\n@mixin color-accent-checking-text-light-background {\n  background-color: var( --color-accent-checking-text-light-color , rgba(69,1,3,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-text {\n    background-color: var( --color-accent-checking-text-light-color , rgba(69,1,3,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-text'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-checking-text-light-text {\n  color: var( --color-accent-checking-text-light-color , rgba(69,1,3,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-text {\n    color: var( --color-accent-checking-text-light-color , rgba(69,1,3,1) );\n  }\n</style>\n<div id='color-accent-checking-text'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-checking-text-light-border {\n  border-color: var( --color-accent-checking-text-light-color , rgba(69,1,3,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-text {\n    border: 1px solid white;\n    border-color: var( --color-accent-checking-text-light-color , rgba(69,1,3,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-text'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-checking-text-light-hover-text {\n  &:hover { color: var( --color-accent-checking-text-light-color , rgba(69,1,3,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking-text:hover { \n    color: var( --color-accent-checking-text-light-color , rgba(69,1,3,1) ); \n  }\n</style>\n<div id='color-accent-checking-text'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-checking-text-light-hover-text {\n  &:hover { background-color: var( --color-accent-checking-text-light-color , rgba(69,1,3,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking-text:hover {\n    background-color: var( --color-accent-checking-text-light-color , rgba(69,1,3,1) );\n  }\n  #color-accent-checking-text {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-text'>hover over box</div>"
    }
  },
  "colors-accent-checking-text-lighter": {
    "background": {
      "output": "\n@mixin color-accent-checking-text-lighter-background {\n  background-color: var( --color-accent-checking-text-lighter-color , rgba(134,21,24,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-text {\n    background-color: var( --color-accent-checking-text-lighter-color , rgba(134,21,24,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-text'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-checking-text-lighter-text {\n  color: var( --color-accent-checking-text-lighter-color , rgba(134,21,24,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-text {\n    color: var( --color-accent-checking-text-lighter-color , rgba(134,21,24,1) );\n  }\n</style>\n<div id='color-accent-checking-text'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-checking-text-lighter-border {\n  border-color: var( --color-accent-checking-text-lighter-color , rgba(134,21,24,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-text {\n    border: 1px solid white;\n    border-color: var( --color-accent-checking-text-lighter-color , rgba(134,21,24,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-text'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-checking-text-lighter-hover-text {\n  &:hover { color: var( --color-accent-checking-text-lighter-color , rgba(134,21,24,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking-text:hover { \n    color: var( --color-accent-checking-text-lighter-color , rgba(134,21,24,1) ); \n  }\n</style>\n<div id='color-accent-checking-text'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-checking-text-lighter-hover-text {\n  &:hover { background-color: var( --color-accent-checking-text-lighter-color , rgba(134,21,24,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking-text:hover {\n    background-color: var( --color-accent-checking-text-lighter-color , rgba(134,21,24,1) );\n  }\n  #color-accent-checking-text {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-text'>hover over box</div>"
    }
  },
  "colors-accent-checking-text-lightest": {
    "background": {
      "output": "\n@mixin color-accent-checking-text-lightest-background {\n  background-color: var( --color-accent-checking-text-lightest-color , rgba(134,21,24,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-text {\n    background-color: var( --color-accent-checking-text-lightest-color , rgba(134,21,24,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-text'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-checking-text-lightest-text {\n  color: var( --color-accent-checking-text-lightest-color , rgba(134,21,24,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-text {\n    color: var( --color-accent-checking-text-lightest-color , rgba(134,21,24,1) );\n  }\n</style>\n<div id='color-accent-checking-text'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-checking-text-lightest-border {\n  border-color: var( --color-accent-checking-text-lightest-color , rgba(134,21,24,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-text {\n    border: 1px solid white;\n    border-color: var( --color-accent-checking-text-lightest-color , rgba(134,21,24,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-text'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-checking-text-lightest-hover-text {\n  &:hover { color: var( --color-accent-checking-text-lightest-color , rgba(134,21,24,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking-text:hover { \n    color: var( --color-accent-checking-text-lightest-color , rgba(134,21,24,1) ); \n  }\n</style>\n<div id='color-accent-checking-text'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-checking-text-lightest-hover-text {\n  &:hover { background-color: var( --color-accent-checking-text-lightest-color , rgba(134,21,24,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking-text:hover {\n    background-color: var( --color-accent-checking-text-lightest-color , rgba(134,21,24,1) );\n  }\n  #color-accent-checking-text {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-text'>hover over box</div>"
    }
  },
  "colors-accent-checking-text-inv": {
    "background": {
      "output": "\n@mixin color-accent-checking-text-inv-background {\n  background-color: var( --color-accent-checking-text-inv-color , rgba(255,236,237,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-text {\n    background-color: var( --color-accent-checking-text-inv-color , rgba(255,236,237,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-text'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-checking-text-inv-text {\n  color: var( --color-accent-checking-text-inv-color , rgba(255,236,237,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-text {\n    color: var( --color-accent-checking-text-inv-color , rgba(255,236,237,1) );\n  }\n</style>\n<div id='color-accent-checking-text'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-checking-text-inv-border {\n  border-color: var( --color-accent-checking-text-inv-color , rgba(255,236,237,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-text {\n    border: 1px solid white;\n    border-color: var( --color-accent-checking-text-inv-color , rgba(255,236,237,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-text'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-checking-text-inv-hover-text {\n  &:hover { color: var( --color-accent-checking-text-inv-color , rgba(255,236,237,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking-text:hover { \n    color: var( --color-accent-checking-text-inv-color , rgba(255,236,237,1) ); \n  }\n</style>\n<div id='color-accent-checking-text'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-checking-text-inv-hover-text {\n  &:hover { background-color: var( --color-accent-checking-text-inv-color , rgba(255,236,237,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking-text:hover {\n    background-color: var( --color-accent-checking-text-inv-color , rgba(255,236,237,1) );\n  }\n  #color-accent-checking-text {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-text'>hover over box</div>"
    }
  },
  "colors-accent-checking-text-inv-dark": {
    "background": {
      "output": "\n@mixin color-accent-checking-text-inv-dark-background {\n  background-color: var( --color-accent-checking-text-inv-dark-color , rgba(243,181,185,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-text {\n    background-color: var( --color-accent-checking-text-inv-dark-color , rgba(243,181,185,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-text'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-checking-text-inv-dark-text {\n  color: var( --color-accent-checking-text-inv-dark-color , rgba(243,181,185,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-text {\n    color: var( --color-accent-checking-text-inv-dark-color , rgba(243,181,185,1) );\n  }\n</style>\n<div id='color-accent-checking-text'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-checking-text-inv-dark-border {\n  border-color: var( --color-accent-checking-text-inv-dark-color , rgba(243,181,185,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-text {\n    border: 1px solid white;\n    border-color: var( --color-accent-checking-text-inv-dark-color , rgba(243,181,185,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-text'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-checking-text-inv-dark-hover-text {\n  &:hover { color: var( --color-accent-checking-text-inv-dark-color , rgba(243,181,185,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking-text:hover { \n    color: var( --color-accent-checking-text-inv-dark-color , rgba(243,181,185,1) ); \n  }\n</style>\n<div id='color-accent-checking-text'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-checking-text-inv-dark-hover-text {\n  &:hover { background-color: var( --color-accent-checking-text-inv-dark-color , rgba(243,181,185,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking-text:hover {\n    background-color: var( --color-accent-checking-text-inv-dark-color , rgba(243,181,185,1) );\n  }\n  #color-accent-checking-text {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-text'>hover over box</div>"
    }
  },
  "colors-accent-checking-text-inv-darker": {
    "background": {
      "output": "\n@mixin color-accent-checking-text-inv-darker-background {\n  background-color: var( --color-accent-checking-text-inv-darker-color , rgba(236,146,149,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-text {\n    background-color: var( --color-accent-checking-text-inv-darker-color , rgba(236,146,149,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-text'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-checking-text-inv-darker-text {\n  color: var( --color-accent-checking-text-inv-darker-color , rgba(236,146,149,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-text {\n    color: var( --color-accent-checking-text-inv-darker-color , rgba(236,146,149,1) );\n  }\n</style>\n<div id='color-accent-checking-text'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-checking-text-inv-darker-border {\n  border-color: var( --color-accent-checking-text-inv-darker-color , rgba(236,146,149,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-text {\n    border: 1px solid white;\n    border-color: var( --color-accent-checking-text-inv-darker-color , rgba(236,146,149,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-text'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-checking-text-inv-darker-hover-text {\n  &:hover { color: var( --color-accent-checking-text-inv-darker-color , rgba(236,146,149,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking-text:hover { \n    color: var( --color-accent-checking-text-inv-darker-color , rgba(236,146,149,1) ); \n  }\n</style>\n<div id='color-accent-checking-text'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-checking-text-inv-darker-hover-text {\n  &:hover { background-color: var( --color-accent-checking-text-inv-darker-color , rgba(236,146,149,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking-text:hover {\n    background-color: var( --color-accent-checking-text-inv-darker-color , rgba(236,146,149,1) );\n  }\n  #color-accent-checking-text {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-text'>hover over box</div>"
    }
  },
  "colors-accent-checking-text-inv-darkest": {
    "background": {
      "output": "\n@mixin color-accent-checking-text-inv-darkest-background {\n  background-color: var( --color-accent-checking-text-inv-darkest-color , rgba(222,115,118,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-text {\n    background-color: var( --color-accent-checking-text-inv-darkest-color , rgba(222,115,118,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-text'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-checking-text-inv-darkest-text {\n  color: var( --color-accent-checking-text-inv-darkest-color , rgba(222,115,118,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-text {\n    color: var( --color-accent-checking-text-inv-darkest-color , rgba(222,115,118,1) );\n  }\n</style>\n<div id='color-accent-checking-text'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-checking-text-inv-darkest-border {\n  border-color: var( --color-accent-checking-text-inv-darkest-color , rgba(222,115,118,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-text {\n    border: 1px solid white;\n    border-color: var( --color-accent-checking-text-inv-darkest-color , rgba(222,115,118,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-text'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-checking-text-inv-darkest-hover-text {\n  &:hover { color: var( --color-accent-checking-text-inv-darkest-color , rgba(222,115,118,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking-text:hover { \n    color: var( --color-accent-checking-text-inv-darkest-color , rgba(222,115,118,1) ); \n  }\n</style>\n<div id='color-accent-checking-text'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-checking-text-inv-darkest-hover-text {\n  &:hover { background-color: var( --color-accent-checking-text-inv-darkest-color , rgba(222,115,118,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking-text:hover {\n    background-color: var( --color-accent-checking-text-inv-darkest-color , rgba(222,115,118,1) );\n  }\n  #color-accent-checking-text {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-text'>hover over box</div>"
    }
  },
  "colors-accent-checking-purple-01": {
    "background": {
      "output": "\n@mixin color-accent-checking-purple-01-background {\n  background-color: var( --color-accent-checking-purple-01-color , rgba(36,1,51,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple {\n    background-color: var( --color-accent-checking-purple-01-color , rgba(36,1,51,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-checking-purple-01-text {\n  color: var( --color-accent-checking-purple-01-color , rgba(36,1,51,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple {\n    color: var( --color-accent-checking-purple-01-color , rgba(36,1,51,1) );\n  }\n</style>\n<div id='color-accent-checking-purple'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-checking-purple-01-border {\n  border-color: var( --color-accent-checking-purple-01-color , rgba(36,1,51,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple {\n    border: 1px solid white;\n    border-color: var( --color-accent-checking-purple-01-color , rgba(36,1,51,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-checking-purple-01-hover-text {\n  &:hover { color: var( --color-accent-checking-purple-01-color , rgba(36,1,51,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking-purple:hover { \n    color: var( --color-accent-checking-purple-01-color , rgba(36,1,51,1) ); \n  }\n</style>\n<div id='color-accent-checking-purple'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-checking-purple-01-hover-text {\n  &:hover { background-color: var( --color-accent-checking-purple-01-color , rgba(36,1,51,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking-purple:hover {\n    background-color: var( --color-accent-checking-purple-01-color , rgba(36,1,51,1) );\n  }\n  #color-accent-checking-purple {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple'>hover over box</div>"
    }
  },
  "colors-accent-checking-purple-02": {
    "background": {
      "output": "\n@mixin color-accent-checking-purple-02-background {\n  background-color: var( --color-accent-checking-purple-02-color , rgba(64,20,83,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple {\n    background-color: var( --color-accent-checking-purple-02-color , rgba(64,20,83,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-checking-purple-02-text {\n  color: var( --color-accent-checking-purple-02-color , rgba(64,20,83,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple {\n    color: var( --color-accent-checking-purple-02-color , rgba(64,20,83,1) );\n  }\n</style>\n<div id='color-accent-checking-purple'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-checking-purple-02-border {\n  border-color: var( --color-accent-checking-purple-02-color , rgba(64,20,83,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple {\n    border: 1px solid white;\n    border-color: var( --color-accent-checking-purple-02-color , rgba(64,20,83,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-checking-purple-02-hover-text {\n  &:hover { color: var( --color-accent-checking-purple-02-color , rgba(64,20,83,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking-purple:hover { \n    color: var( --color-accent-checking-purple-02-color , rgba(64,20,83,1) ); \n  }\n</style>\n<div id='color-accent-checking-purple'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-checking-purple-02-hover-text {\n  &:hover { background-color: var( --color-accent-checking-purple-02-color , rgba(64,20,83,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking-purple:hover {\n    background-color: var( --color-accent-checking-purple-02-color , rgba(64,20,83,1) );\n  }\n  #color-accent-checking-purple {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple'>hover over box</div>"
    }
  },
  "colors-accent-checking-purple-darkest": {
    "background": {
      "output": "\n@mixin color-accent-checking-purple-darkest-background {\n  background-color: var( --color-accent-checking-purple-darkest-color , rgba(64,20,83,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple {\n    background-color: var( --color-accent-checking-purple-darkest-color , rgba(64,20,83,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-checking-purple-darkest-text {\n  color: var( --color-accent-checking-purple-darkest-color , rgba(64,20,83,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple {\n    color: var( --color-accent-checking-purple-darkest-color , rgba(64,20,83,1) );\n  }\n</style>\n<div id='color-accent-checking-purple'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-checking-purple-darkest-border {\n  border-color: var( --color-accent-checking-purple-darkest-color , rgba(64,20,83,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple {\n    border: 1px solid white;\n    border-color: var( --color-accent-checking-purple-darkest-color , rgba(64,20,83,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-checking-purple-darkest-hover-text {\n  &:hover { color: var( --color-accent-checking-purple-darkest-color , rgba(64,20,83,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking-purple:hover { \n    color: var( --color-accent-checking-purple-darkest-color , rgba(64,20,83,1) ); \n  }\n</style>\n<div id='color-accent-checking-purple'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-checking-purple-darkest-hover-text {\n  &:hover { background-color: var( --color-accent-checking-purple-darkest-color , rgba(64,20,83,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking-purple:hover {\n    background-color: var( --color-accent-checking-purple-darkest-color , rgba(64,20,83,1) );\n  }\n  #color-accent-checking-purple {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple'>hover over box</div>"
    }
  },
  "colors-accent-checking-purple-03": {
    "background": {
      "output": "\n@mixin color-accent-checking-purple-03-background {\n  background-color: var( --color-accent-checking-purple-03-color , rgba(92,39,114,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple {\n    background-color: var( --color-accent-checking-purple-03-color , rgba(92,39,114,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-checking-purple-03-text {\n  color: var( --color-accent-checking-purple-03-color , rgba(92,39,114,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple {\n    color: var( --color-accent-checking-purple-03-color , rgba(92,39,114,1) );\n  }\n</style>\n<div id='color-accent-checking-purple'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-checking-purple-03-border {\n  border-color: var( --color-accent-checking-purple-03-color , rgba(92,39,114,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple {\n    border: 1px solid white;\n    border-color: var( --color-accent-checking-purple-03-color , rgba(92,39,114,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-checking-purple-03-hover-text {\n  &:hover { color: var( --color-accent-checking-purple-03-color , rgba(92,39,114,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking-purple:hover { \n    color: var( --color-accent-checking-purple-03-color , rgba(92,39,114,1) ); \n  }\n</style>\n<div id='color-accent-checking-purple'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-checking-purple-03-hover-text {\n  &:hover { background-color: var( --color-accent-checking-purple-03-color , rgba(92,39,114,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking-purple:hover {\n    background-color: var( --color-accent-checking-purple-03-color , rgba(92,39,114,1) );\n  }\n  #color-accent-checking-purple {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple'>hover over box</div>"
    }
  },
  "colors-accent-checking-purple-darker": {
    "background": {
      "output": "\n@mixin color-accent-checking-purple-darker-background {\n  background-color: var( --color-accent-checking-purple-darker-color , rgba(92,39,114,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple {\n    background-color: var( --color-accent-checking-purple-darker-color , rgba(92,39,114,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-checking-purple-darker-text {\n  color: var( --color-accent-checking-purple-darker-color , rgba(92,39,114,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple {\n    color: var( --color-accent-checking-purple-darker-color , rgba(92,39,114,1) );\n  }\n</style>\n<div id='color-accent-checking-purple'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-checking-purple-darker-border {\n  border-color: var( --color-accent-checking-purple-darker-color , rgba(92,39,114,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple {\n    border: 1px solid white;\n    border-color: var( --color-accent-checking-purple-darker-color , rgba(92,39,114,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-checking-purple-darker-hover-text {\n  &:hover { color: var( --color-accent-checking-purple-darker-color , rgba(92,39,114,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking-purple:hover { \n    color: var( --color-accent-checking-purple-darker-color , rgba(92,39,114,1) ); \n  }\n</style>\n<div id='color-accent-checking-purple'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-checking-purple-darker-hover-text {\n  &:hover { background-color: var( --color-accent-checking-purple-darker-color , rgba(92,39,114,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking-purple:hover {\n    background-color: var( --color-accent-checking-purple-darker-color , rgba(92,39,114,1) );\n  }\n  #color-accent-checking-purple {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple'>hover over box</div>"
    }
  },
  "colors-accent-checking-purple-04": {
    "background": {
      "output": "\n@mixin color-accent-checking-purple-04-background {\n  background-color: var( --color-accent-checking-purple-04-color , rgba(119,58,145,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple {\n    background-color: var( --color-accent-checking-purple-04-color , rgba(119,58,145,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-checking-purple-04-text {\n  color: var( --color-accent-checking-purple-04-color , rgba(119,58,145,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple {\n    color: var( --color-accent-checking-purple-04-color , rgba(119,58,145,1) );\n  }\n</style>\n<div id='color-accent-checking-purple'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-checking-purple-04-border {\n  border-color: var( --color-accent-checking-purple-04-color , rgba(119,58,145,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple {\n    border: 1px solid white;\n    border-color: var( --color-accent-checking-purple-04-color , rgba(119,58,145,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-checking-purple-04-hover-text {\n  &:hover { color: var( --color-accent-checking-purple-04-color , rgba(119,58,145,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking-purple:hover { \n    color: var( --color-accent-checking-purple-04-color , rgba(119,58,145,1) ); \n  }\n</style>\n<div id='color-accent-checking-purple'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-checking-purple-04-hover-text {\n  &:hover { background-color: var( --color-accent-checking-purple-04-color , rgba(119,58,145,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking-purple:hover {\n    background-color: var( --color-accent-checking-purple-04-color , rgba(119,58,145,1) );\n  }\n  #color-accent-checking-purple {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple'>hover over box</div>"
    }
  },
  "colors-accent-checking-purple-dark": {
    "background": {
      "output": "\n@mixin color-accent-checking-purple-dark-background {\n  background-color: var( --color-accent-checking-purple-dark-color , rgba(119,58,145,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple {\n    background-color: var( --color-accent-checking-purple-dark-color , rgba(119,58,145,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-checking-purple-dark-text {\n  color: var( --color-accent-checking-purple-dark-color , rgba(119,58,145,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple {\n    color: var( --color-accent-checking-purple-dark-color , rgba(119,58,145,1) );\n  }\n</style>\n<div id='color-accent-checking-purple'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-checking-purple-dark-border {\n  border-color: var( --color-accent-checking-purple-dark-color , rgba(119,58,145,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple {\n    border: 1px solid white;\n    border-color: var( --color-accent-checking-purple-dark-color , rgba(119,58,145,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-checking-purple-dark-hover-text {\n  &:hover { color: var( --color-accent-checking-purple-dark-color , rgba(119,58,145,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking-purple:hover { \n    color: var( --color-accent-checking-purple-dark-color , rgba(119,58,145,1) ); \n  }\n</style>\n<div id='color-accent-checking-purple'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-checking-purple-dark-hover-text {\n  &:hover { background-color: var( --color-accent-checking-purple-dark-color , rgba(119,58,145,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking-purple:hover {\n    background-color: var( --color-accent-checking-purple-dark-color , rgba(119,58,145,1) );\n  }\n  #color-accent-checking-purple {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple'>hover over box</div>"
    }
  },
  "colors-accent-checking-purple-05": {
    "background": {
      "output": "\n@mixin color-accent-checking-purple-05-background {\n  background-color: var( --color-accent-checking-purple-05-color , rgba(148,77,178,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple {\n    background-color: var( --color-accent-checking-purple-05-color , rgba(148,77,178,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-checking-purple-05-text {\n  color: var( --color-accent-checking-purple-05-color , rgba(148,77,178,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple {\n    color: var( --color-accent-checking-purple-05-color , rgba(148,77,178,1) );\n  }\n</style>\n<div id='color-accent-checking-purple'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-checking-purple-05-border {\n  border-color: var( --color-accent-checking-purple-05-color , rgba(148,77,178,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple {\n    border: 1px solid white;\n    border-color: var( --color-accent-checking-purple-05-color , rgba(148,77,178,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-checking-purple-05-hover-text {\n  &:hover { color: var( --color-accent-checking-purple-05-color , rgba(148,77,178,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking-purple:hover { \n    color: var( --color-accent-checking-purple-05-color , rgba(148,77,178,1) ); \n  }\n</style>\n<div id='color-accent-checking-purple'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-checking-purple-05-hover-text {\n  &:hover { background-color: var( --color-accent-checking-purple-05-color , rgba(148,77,178,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking-purple:hover {\n    background-color: var( --color-accent-checking-purple-05-color , rgba(148,77,178,1) );\n  }\n  #color-accent-checking-purple {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple'>hover over box</div>"
    }
  },
  "colors-accent-checking-purple-": {
    "background": {
      "output": "\n@mixin color-accent-checking-purple-background {\n  background-color: var( --color-accent-checking-purple-color , rgba(148,77,178,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple {\n    background-color: var( --color-accent-checking-purple-color , rgba(148,77,178,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-checking-purple-text {\n  color: var( --color-accent-checking-purple-color , rgba(148,77,178,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple {\n    color: var( --color-accent-checking-purple-color , rgba(148,77,178,1) );\n  }\n</style>\n<div id='color-accent-checking-purple'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-checking-purple-border {\n  border-color: var( --color-accent-checking-purple-color , rgba(148,77,178,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple {\n    border: 1px solid white;\n    border-color: var( --color-accent-checking-purple-color , rgba(148,77,178,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-checking-purple-hover-text {\n  &:hover { color: var( --color-accent-checking-purple-color , rgba(148,77,178,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking-purple:hover { \n    color: var( --color-accent-checking-purple-color , rgba(148,77,178,1) ); \n  }\n</style>\n<div id='color-accent-checking-purple'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-checking-purple-hover-text {\n  &:hover { background-color: var( --color-accent-checking-purple-color , rgba(148,77,178,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking-purple:hover {\n    background-color: var( --color-accent-checking-purple-color , rgba(148,77,178,1) );\n  }\n  #color-accent-checking-purple {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple'>hover over box</div>"
    }
  },
  "colors-accent-checking-purple-06": {
    "background": {
      "output": "\n@mixin color-accent-checking-purple-06-background {\n  background-color: var( --color-accent-checking-purple-06-color , rgba(168,109,193,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple {\n    background-color: var( --color-accent-checking-purple-06-color , rgba(168,109,193,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-checking-purple-06-text {\n  color: var( --color-accent-checking-purple-06-color , rgba(168,109,193,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple {\n    color: var( --color-accent-checking-purple-06-color , rgba(168,109,193,1) );\n  }\n</style>\n<div id='color-accent-checking-purple'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-checking-purple-06-border {\n  border-color: var( --color-accent-checking-purple-06-color , rgba(168,109,193,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple {\n    border: 1px solid white;\n    border-color: var( --color-accent-checking-purple-06-color , rgba(168,109,193,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-checking-purple-06-hover-text {\n  &:hover { color: var( --color-accent-checking-purple-06-color , rgba(168,109,193,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking-purple:hover { \n    color: var( --color-accent-checking-purple-06-color , rgba(168,109,193,1) ); \n  }\n</style>\n<div id='color-accent-checking-purple'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-checking-purple-06-hover-text {\n  &:hover { background-color: var( --color-accent-checking-purple-06-color , rgba(168,109,193,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking-purple:hover {\n    background-color: var( --color-accent-checking-purple-06-color , rgba(168,109,193,1) );\n  }\n  #color-accent-checking-purple {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple'>hover over box</div>"
    }
  },
  "colors-accent-checking-purple-light": {
    "background": {
      "output": "\n@mixin color-accent-checking-purple-light-background {\n  background-color: var( --color-accent-checking-purple-light-color , rgba(168,109,193,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple {\n    background-color: var( --color-accent-checking-purple-light-color , rgba(168,109,193,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-checking-purple-light-text {\n  color: var( --color-accent-checking-purple-light-color , rgba(168,109,193,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple {\n    color: var( --color-accent-checking-purple-light-color , rgba(168,109,193,1) );\n  }\n</style>\n<div id='color-accent-checking-purple'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-checking-purple-light-border {\n  border-color: var( --color-accent-checking-purple-light-color , rgba(168,109,193,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple {\n    border: 1px solid white;\n    border-color: var( --color-accent-checking-purple-light-color , rgba(168,109,193,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-checking-purple-light-hover-text {\n  &:hover { color: var( --color-accent-checking-purple-light-color , rgba(168,109,193,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking-purple:hover { \n    color: var( --color-accent-checking-purple-light-color , rgba(168,109,193,1) ); \n  }\n</style>\n<div id='color-accent-checking-purple'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-checking-purple-light-hover-text {\n  &:hover { background-color: var( --color-accent-checking-purple-light-color , rgba(168,109,193,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking-purple:hover {\n    background-color: var( --color-accent-checking-purple-light-color , rgba(168,109,193,1) );\n  }\n  #color-accent-checking-purple {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple'>hover over box</div>"
    }
  },
  "colors-accent-checking-purple-07": {
    "background": {
      "output": "\n@mixin color-accent-checking-purple-07-background {\n  background-color: var( --color-accent-checking-purple-07-color , rgba(188,140,208,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple {\n    background-color: var( --color-accent-checking-purple-07-color , rgba(188,140,208,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-checking-purple-07-text {\n  color: var( --color-accent-checking-purple-07-color , rgba(188,140,208,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple {\n    color: var( --color-accent-checking-purple-07-color , rgba(188,140,208,1) );\n  }\n</style>\n<div id='color-accent-checking-purple'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-checking-purple-07-border {\n  border-color: var( --color-accent-checking-purple-07-color , rgba(188,140,208,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple {\n    border: 1px solid white;\n    border-color: var( --color-accent-checking-purple-07-color , rgba(188,140,208,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-checking-purple-07-hover-text {\n  &:hover { color: var( --color-accent-checking-purple-07-color , rgba(188,140,208,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking-purple:hover { \n    color: var( --color-accent-checking-purple-07-color , rgba(188,140,208,1) ); \n  }\n</style>\n<div id='color-accent-checking-purple'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-checking-purple-07-hover-text {\n  &:hover { background-color: var( --color-accent-checking-purple-07-color , rgba(188,140,208,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking-purple:hover {\n    background-color: var( --color-accent-checking-purple-07-color , rgba(188,140,208,1) );\n  }\n  #color-accent-checking-purple {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple'>hover over box</div>"
    }
  },
  "colors-accent-checking-purple-lighter": {
    "background": {
      "output": "\n@mixin color-accent-checking-purple-lighter-background {\n  background-color: var( --color-accent-checking-purple-lighter-color , rgba(188,140,208,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple {\n    background-color: var( --color-accent-checking-purple-lighter-color , rgba(188,140,208,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-checking-purple-lighter-text {\n  color: var( --color-accent-checking-purple-lighter-color , rgba(188,140,208,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple {\n    color: var( --color-accent-checking-purple-lighter-color , rgba(188,140,208,1) );\n  }\n</style>\n<div id='color-accent-checking-purple'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-checking-purple-lighter-border {\n  border-color: var( --color-accent-checking-purple-lighter-color , rgba(188,140,208,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple {\n    border: 1px solid white;\n    border-color: var( --color-accent-checking-purple-lighter-color , rgba(188,140,208,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-checking-purple-lighter-hover-text {\n  &:hover { color: var( --color-accent-checking-purple-lighter-color , rgba(188,140,208,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking-purple:hover { \n    color: var( --color-accent-checking-purple-lighter-color , rgba(188,140,208,1) ); \n  }\n</style>\n<div id='color-accent-checking-purple'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-checking-purple-lighter-hover-text {\n  &:hover { background-color: var( --color-accent-checking-purple-lighter-color , rgba(188,140,208,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking-purple:hover {\n    background-color: var( --color-accent-checking-purple-lighter-color , rgba(188,140,208,1) );\n  }\n  #color-accent-checking-purple {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple'>hover over box</div>"
    }
  },
  "colors-accent-checking-purple-08": {
    "background": {
      "output": "\n@mixin color-accent-checking-purple-08-background {\n  background-color: var( --color-accent-checking-purple-08-color , rgba(208,172,224,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple {\n    background-color: var( --color-accent-checking-purple-08-color , rgba(208,172,224,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-checking-purple-08-text {\n  color: var( --color-accent-checking-purple-08-color , rgba(208,172,224,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple {\n    color: var( --color-accent-checking-purple-08-color , rgba(208,172,224,1) );\n  }\n</style>\n<div id='color-accent-checking-purple'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-checking-purple-08-border {\n  border-color: var( --color-accent-checking-purple-08-color , rgba(208,172,224,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple {\n    border: 1px solid white;\n    border-color: var( --color-accent-checking-purple-08-color , rgba(208,172,224,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-checking-purple-08-hover-text {\n  &:hover { color: var( --color-accent-checking-purple-08-color , rgba(208,172,224,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking-purple:hover { \n    color: var( --color-accent-checking-purple-08-color , rgba(208,172,224,1) ); \n  }\n</style>\n<div id='color-accent-checking-purple'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-checking-purple-08-hover-text {\n  &:hover { background-color: var( --color-accent-checking-purple-08-color , rgba(208,172,224,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking-purple:hover {\n    background-color: var( --color-accent-checking-purple-08-color , rgba(208,172,224,1) );\n  }\n  #color-accent-checking-purple {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple'>hover over box</div>"
    }
  },
  "colors-accent-checking-purple-lightest": {
    "background": {
      "output": "\n@mixin color-accent-checking-purple-lightest-background {\n  background-color: var( --color-accent-checking-purple-lightest-color , rgba(208,172,224,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple {\n    background-color: var( --color-accent-checking-purple-lightest-color , rgba(208,172,224,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-checking-purple-lightest-text {\n  color: var( --color-accent-checking-purple-lightest-color , rgba(208,172,224,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple {\n    color: var( --color-accent-checking-purple-lightest-color , rgba(208,172,224,1) );\n  }\n</style>\n<div id='color-accent-checking-purple'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-checking-purple-lightest-border {\n  border-color: var( --color-accent-checking-purple-lightest-color , rgba(208,172,224,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple {\n    border: 1px solid white;\n    border-color: var( --color-accent-checking-purple-lightest-color , rgba(208,172,224,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-checking-purple-lightest-hover-text {\n  &:hover { color: var( --color-accent-checking-purple-lightest-color , rgba(208,172,224,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking-purple:hover { \n    color: var( --color-accent-checking-purple-lightest-color , rgba(208,172,224,1) ); \n  }\n</style>\n<div id='color-accent-checking-purple'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-checking-purple-lightest-hover-text {\n  &:hover { background-color: var( --color-accent-checking-purple-lightest-color , rgba(208,172,224,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking-purple:hover {\n    background-color: var( --color-accent-checking-purple-lightest-color , rgba(208,172,224,1) );\n  }\n  #color-accent-checking-purple {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple'>hover over box</div>"
    }
  },
  "colors-accent-checking-purple-09": {
    "background": {
      "output": "\n@mixin color-accent-checking-purple-09-background {\n  background-color: var( --color-accent-checking-purple-09-color , rgba(230,206,240,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple {\n    background-color: var( --color-accent-checking-purple-09-color , rgba(230,206,240,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-checking-purple-09-text {\n  color: var( --color-accent-checking-purple-09-color , rgba(230,206,240,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple {\n    color: var( --color-accent-checking-purple-09-color , rgba(230,206,240,1) );\n  }\n</style>\n<div id='color-accent-checking-purple'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-checking-purple-09-border {\n  border-color: var( --color-accent-checking-purple-09-color , rgba(230,206,240,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple {\n    border: 1px solid white;\n    border-color: var( --color-accent-checking-purple-09-color , rgba(230,206,240,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-checking-purple-09-hover-text {\n  &:hover { color: var( --color-accent-checking-purple-09-color , rgba(230,206,240,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking-purple:hover { \n    color: var( --color-accent-checking-purple-09-color , rgba(230,206,240,1) ); \n  }\n</style>\n<div id='color-accent-checking-purple'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-checking-purple-09-hover-text {\n  &:hover { background-color: var( --color-accent-checking-purple-09-color , rgba(230,206,240,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking-purple:hover {\n    background-color: var( --color-accent-checking-purple-09-color , rgba(230,206,240,1) );\n  }\n  #color-accent-checking-purple {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple'>hover over box</div>"
    }
  },
  "colors-accent-checking-purple-095": {
    "background": {
      "output": "\n@mixin color-accent-checking-purple-095-background {\n  background-color: var( --color-accent-checking-purple-095-color , rgba(251,239,255,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple {\n    background-color: var( --color-accent-checking-purple-095-color , rgba(251,239,255,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-checking-purple-095-text {\n  color: var( --color-accent-checking-purple-095-color , rgba(251,239,255,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple {\n    color: var( --color-accent-checking-purple-095-color , rgba(251,239,255,1) );\n  }\n</style>\n<div id='color-accent-checking-purple'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-checking-purple-095-border {\n  border-color: var( --color-accent-checking-purple-095-color , rgba(251,239,255,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple {\n    border: 1px solid white;\n    border-color: var( --color-accent-checking-purple-095-color , rgba(251,239,255,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-checking-purple-095-hover-text {\n  &:hover { color: var( --color-accent-checking-purple-095-color , rgba(251,239,255,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking-purple:hover { \n    color: var( --color-accent-checking-purple-095-color , rgba(251,239,255,1) ); \n  }\n</style>\n<div id='color-accent-checking-purple'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-checking-purple-095-hover-text {\n  &:hover { background-color: var( --color-accent-checking-purple-095-color , rgba(251,239,255,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking-purple:hover {\n    background-color: var( --color-accent-checking-purple-095-color , rgba(251,239,255,1) );\n  }\n  #color-accent-checking-purple {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple'>hover over box</div>"
    }
  },
  "colors-accent-checking-purple-text-": {
    "background": {
      "output": "\n@mixin color-accent-checking-purple-text-background {\n  background-color: var( --color-accent-checking-purple-text-color , rgba(36,1,51,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple-text {\n    background-color: var( --color-accent-checking-purple-text-color , rgba(36,1,51,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple-text'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-checking-purple-text-text {\n  color: var( --color-accent-checking-purple-text-color , rgba(36,1,51,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple-text {\n    color: var( --color-accent-checking-purple-text-color , rgba(36,1,51,1) );\n  }\n</style>\n<div id='color-accent-checking-purple-text'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-checking-purple-text-border {\n  border-color: var( --color-accent-checking-purple-text-color , rgba(36,1,51,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple-text {\n    border: 1px solid white;\n    border-color: var( --color-accent-checking-purple-text-color , rgba(36,1,51,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple-text'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-checking-purple-text-hover-text {\n  &:hover { color: var( --color-accent-checking-purple-text-color , rgba(36,1,51,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking-purple-text:hover { \n    color: var( --color-accent-checking-purple-text-color , rgba(36,1,51,1) ); \n  }\n</style>\n<div id='color-accent-checking-purple-text'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-checking-purple-text-hover-text {\n  &:hover { background-color: var( --color-accent-checking-purple-text-color , rgba(36,1,51,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking-purple-text:hover {\n    background-color: var( --color-accent-checking-purple-text-color , rgba(36,1,51,1) );\n  }\n  #color-accent-checking-purple-text {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple-text'>hover over box</div>"
    }
  },
  "colors-accent-checking-purple-text-light": {
    "background": {
      "output": "\n@mixin color-accent-checking-purple-text-light-background {\n  background-color: var( --color-accent-checking-purple-text-light-color , rgba(36,1,51,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple-text {\n    background-color: var( --color-accent-checking-purple-text-light-color , rgba(36,1,51,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple-text'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-checking-purple-text-light-text {\n  color: var( --color-accent-checking-purple-text-light-color , rgba(36,1,51,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple-text {\n    color: var( --color-accent-checking-purple-text-light-color , rgba(36,1,51,1) );\n  }\n</style>\n<div id='color-accent-checking-purple-text'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-checking-purple-text-light-border {\n  border-color: var( --color-accent-checking-purple-text-light-color , rgba(36,1,51,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple-text {\n    border: 1px solid white;\n    border-color: var( --color-accent-checking-purple-text-light-color , rgba(36,1,51,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple-text'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-checking-purple-text-light-hover-text {\n  &:hover { color: var( --color-accent-checking-purple-text-light-color , rgba(36,1,51,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking-purple-text:hover { \n    color: var( --color-accent-checking-purple-text-light-color , rgba(36,1,51,1) ); \n  }\n</style>\n<div id='color-accent-checking-purple-text'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-checking-purple-text-light-hover-text {\n  &:hover { background-color: var( --color-accent-checking-purple-text-light-color , rgba(36,1,51,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking-purple-text:hover {\n    background-color: var( --color-accent-checking-purple-text-light-color , rgba(36,1,51,1) );\n  }\n  #color-accent-checking-purple-text {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple-text'>hover over box</div>"
    }
  },
  "colors-accent-checking-purple-text-lighter": {
    "background": {
      "output": "\n@mixin color-accent-checking-purple-text-lighter-background {\n  background-color: var( --color-accent-checking-purple-text-lighter-color , rgba(92,39,114,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple-text {\n    background-color: var( --color-accent-checking-purple-text-lighter-color , rgba(92,39,114,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple-text'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-checking-purple-text-lighter-text {\n  color: var( --color-accent-checking-purple-text-lighter-color , rgba(92,39,114,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple-text {\n    color: var( --color-accent-checking-purple-text-lighter-color , rgba(92,39,114,1) );\n  }\n</style>\n<div id='color-accent-checking-purple-text'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-checking-purple-text-lighter-border {\n  border-color: var( --color-accent-checking-purple-text-lighter-color , rgba(92,39,114,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple-text {\n    border: 1px solid white;\n    border-color: var( --color-accent-checking-purple-text-lighter-color , rgba(92,39,114,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple-text'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-checking-purple-text-lighter-hover-text {\n  &:hover { color: var( --color-accent-checking-purple-text-lighter-color , rgba(92,39,114,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking-purple-text:hover { \n    color: var( --color-accent-checking-purple-text-lighter-color , rgba(92,39,114,1) ); \n  }\n</style>\n<div id='color-accent-checking-purple-text'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-checking-purple-text-lighter-hover-text {\n  &:hover { background-color: var( --color-accent-checking-purple-text-lighter-color , rgba(92,39,114,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking-purple-text:hover {\n    background-color: var( --color-accent-checking-purple-text-lighter-color , rgba(92,39,114,1) );\n  }\n  #color-accent-checking-purple-text {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple-text'>hover over box</div>"
    }
  },
  "colors-accent-checking-purple-text-lightest": {
    "background": {
      "output": "\n@mixin color-accent-checking-purple-text-lightest-background {\n  background-color: var( --color-accent-checking-purple-text-lightest-color , rgba(92,39,114,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple-text {\n    background-color: var( --color-accent-checking-purple-text-lightest-color , rgba(92,39,114,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple-text'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-checking-purple-text-lightest-text {\n  color: var( --color-accent-checking-purple-text-lightest-color , rgba(92,39,114,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple-text {\n    color: var( --color-accent-checking-purple-text-lightest-color , rgba(92,39,114,1) );\n  }\n</style>\n<div id='color-accent-checking-purple-text'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-checking-purple-text-lightest-border {\n  border-color: var( --color-accent-checking-purple-text-lightest-color , rgba(92,39,114,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple-text {\n    border: 1px solid white;\n    border-color: var( --color-accent-checking-purple-text-lightest-color , rgba(92,39,114,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple-text'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-checking-purple-text-lightest-hover-text {\n  &:hover { color: var( --color-accent-checking-purple-text-lightest-color , rgba(92,39,114,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking-purple-text:hover { \n    color: var( --color-accent-checking-purple-text-lightest-color , rgba(92,39,114,1) ); \n  }\n</style>\n<div id='color-accent-checking-purple-text'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-checking-purple-text-lightest-hover-text {\n  &:hover { background-color: var( --color-accent-checking-purple-text-lightest-color , rgba(92,39,114,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking-purple-text:hover {\n    background-color: var( --color-accent-checking-purple-text-lightest-color , rgba(92,39,114,1) );\n  }\n  #color-accent-checking-purple-text {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple-text'>hover over box</div>"
    }
  },
  "colors-accent-checking-purple-text-inv": {
    "background": {
      "output": "\n@mixin color-accent-checking-purple-text-inv-background {\n  background-color: var( --color-accent-checking-purple-text-inv-color , rgba(251,239,255,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple-text {\n    background-color: var( --color-accent-checking-purple-text-inv-color , rgba(251,239,255,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple-text'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-checking-purple-text-inv-text {\n  color: var( --color-accent-checking-purple-text-inv-color , rgba(251,239,255,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple-text {\n    color: var( --color-accent-checking-purple-text-inv-color , rgba(251,239,255,1) );\n  }\n</style>\n<div id='color-accent-checking-purple-text'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-checking-purple-text-inv-border {\n  border-color: var( --color-accent-checking-purple-text-inv-color , rgba(251,239,255,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple-text {\n    border: 1px solid white;\n    border-color: var( --color-accent-checking-purple-text-inv-color , rgba(251,239,255,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple-text'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-checking-purple-text-inv-hover-text {\n  &:hover { color: var( --color-accent-checking-purple-text-inv-color , rgba(251,239,255,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking-purple-text:hover { \n    color: var( --color-accent-checking-purple-text-inv-color , rgba(251,239,255,1) ); \n  }\n</style>\n<div id='color-accent-checking-purple-text'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-checking-purple-text-inv-hover-text {\n  &:hover { background-color: var( --color-accent-checking-purple-text-inv-color , rgba(251,239,255,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking-purple-text:hover {\n    background-color: var( --color-accent-checking-purple-text-inv-color , rgba(251,239,255,1) );\n  }\n  #color-accent-checking-purple-text {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple-text'>hover over box</div>"
    }
  },
  "colors-accent-checking-purple-text-inv-dark": {
    "background": {
      "output": "\n@mixin color-accent-checking-purple-text-inv-dark-background {\n  background-color: var( --color-accent-checking-purple-text-inv-dark-color , rgba(244,212,255,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple-text {\n    background-color: var( --color-accent-checking-purple-text-inv-dark-color , rgba(244,212,255,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple-text'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-checking-purple-text-inv-dark-text {\n  color: var( --color-accent-checking-purple-text-inv-dark-color , rgba(244,212,255,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple-text {\n    color: var( --color-accent-checking-purple-text-inv-dark-color , rgba(244,212,255,1) );\n  }\n</style>\n<div id='color-accent-checking-purple-text'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-checking-purple-text-inv-dark-border {\n  border-color: var( --color-accent-checking-purple-text-inv-dark-color , rgba(244,212,255,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple-text {\n    border: 1px solid white;\n    border-color: var( --color-accent-checking-purple-text-inv-dark-color , rgba(244,212,255,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple-text'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-checking-purple-text-inv-dark-hover-text {\n  &:hover { color: var( --color-accent-checking-purple-text-inv-dark-color , rgba(244,212,255,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking-purple-text:hover { \n    color: var( --color-accent-checking-purple-text-inv-dark-color , rgba(244,212,255,1) ); \n  }\n</style>\n<div id='color-accent-checking-purple-text'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-checking-purple-text-inv-dark-hover-text {\n  &:hover { background-color: var( --color-accent-checking-purple-text-inv-dark-color , rgba(244,212,255,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking-purple-text:hover {\n    background-color: var( --color-accent-checking-purple-text-inv-dark-color , rgba(244,212,255,1) );\n  }\n  #color-accent-checking-purple-text {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple-text'>hover over box</div>"
    }
  },
  "colors-accent-checking-purple-text-inv-darker": {
    "background": {
      "output": "\n@mixin color-accent-checking-purple-text-inv-darker-background {\n  background-color: var( --color-accent-checking-purple-text-inv-darker-color , rgba(216,176,233,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple-text {\n    background-color: var( --color-accent-checking-purple-text-inv-darker-color , rgba(216,176,233,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple-text'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-checking-purple-text-inv-darker-text {\n  color: var( --color-accent-checking-purple-text-inv-darker-color , rgba(216,176,233,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple-text {\n    color: var( --color-accent-checking-purple-text-inv-darker-color , rgba(216,176,233,1) );\n  }\n</style>\n<div id='color-accent-checking-purple-text'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-checking-purple-text-inv-darker-border {\n  border-color: var( --color-accent-checking-purple-text-inv-darker-color , rgba(216,176,233,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple-text {\n    border: 1px solid white;\n    border-color: var( --color-accent-checking-purple-text-inv-darker-color , rgba(216,176,233,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple-text'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-checking-purple-text-inv-darker-hover-text {\n  &:hover { color: var( --color-accent-checking-purple-text-inv-darker-color , rgba(216,176,233,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking-purple-text:hover { \n    color: var( --color-accent-checking-purple-text-inv-darker-color , rgba(216,176,233,1) ); \n  }\n</style>\n<div id='color-accent-checking-purple-text'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-checking-purple-text-inv-darker-hover-text {\n  &:hover { background-color: var( --color-accent-checking-purple-text-inv-darker-color , rgba(216,176,233,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking-purple-text:hover {\n    background-color: var( --color-accent-checking-purple-text-inv-darker-color , rgba(216,176,233,1) );\n  }\n  #color-accent-checking-purple-text {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple-text'>hover over box</div>"
    }
  },
  "colors-accent-checking-purple-text-inv-darkest": {
    "background": {
      "output": "\n@mixin color-accent-checking-purple-text-inv-darkest-background {\n  background-color: var( --color-accent-checking-purple-text-inv-darkest-color , rgba(188,140,208,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple-text {\n    background-color: var( --color-accent-checking-purple-text-inv-darkest-color , rgba(188,140,208,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple-text'></div>"
    },
    "text": {
      "output": "\n@mixin color-accent-checking-purple-text-inv-darkest-text {\n  color: var( --color-accent-checking-purple-text-inv-darkest-color , rgba(188,140,208,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple-text {\n    color: var( --color-accent-checking-purple-text-inv-darkest-color , rgba(188,140,208,1) );\n  }\n</style>\n<div id='color-accent-checking-purple-text'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-accent-checking-purple-text-inv-darkest-border {\n  border-color: var( --color-accent-checking-purple-text-inv-darkest-color , rgba(188,140,208,1) );\n}",
      "example": "\n<style>\n  #color-accent-checking-purple-text {\n    border: 1px solid white;\n    border-color: var( --color-accent-checking-purple-text-inv-darkest-color , rgba(188,140,208,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple-text'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-accent-checking-purple-text-inv-darkest-hover-text {\n  &:hover { color: var( --color-accent-checking-purple-text-inv-darkest-color , rgba(188,140,208,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking-purple-text:hover { \n    color: var( --color-accent-checking-purple-text-inv-darkest-color , rgba(188,140,208,1) ); \n  }\n</style>\n<div id='color-accent-checking-purple-text'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-accent-checking-purple-text-inv-darkest-hover-text {\n  &:hover { background-color: var( --color-accent-checking-purple-text-inv-darkest-color , rgba(188,140,208,1) ); }\n}",
      "example": "\n<style>\n  #color-accent-checking-purple-text:hover {\n    background-color: var( --color-accent-checking-purple-text-inv-darkest-color , rgba(188,140,208,1) );\n  }\n  #color-accent-checking-purple-text {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-accent-checking-purple-text'>hover over box</div>"
    }
  },
  "colors-icon-": {
    "background": {
      "output": "\n@mixin color-icon-background {\n  background-color: var( --color-icon-color , rgba(1,1,1,1) );\n}",
      "example": "\n<style>\n  #color-icon {\n    background-color: var( --color-icon-color , rgba(1,1,1,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-icon'></div>"
    },
    "text": {
      "output": "\n@mixin color-icon-text {\n  color: var( --color-icon-color , rgba(1,1,1,1) );\n}",
      "example": "\n<style>\n  #color-icon {\n    color: var( --color-icon-color , rgba(1,1,1,1) );\n  }\n</style>\n<div id='color-icon'>colored text</div>"
    },
    "border": {
      "output": "\n@mixin color-icon-border {\n  border-color: var( --color-icon-color , rgba(1,1,1,1) );\n}",
      "example": "\n<style>\n  #color-icon {\n    border: 1px solid white;\n    border-color: var( --color-icon-color , rgba(1,1,1,1) );\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-icon'></div>"
    },
    "hover-text": {
      "output": "\n@mixin color-icon-hover-text {\n  &:hover { color: var( --color-icon-color , rgba(1,1,1,1) ); }\n}",
      "example": "\n<style>\n  #color-icon:hover { \n    color: var( --color-icon-color , rgba(1,1,1,1) ); \n  }\n</style>\n<div id='color-icon'>hover over text</div>"
    },
    "hover-background": {
      "output": "\n@mixin color-icon-hover-text {\n  &:hover { background-color: var( --color-icon-color , rgba(1,1,1,1) ); }\n}",
      "example": "\n<style>\n  #color-icon:hover {\n    background-color: var( --color-icon-color , rgba(1,1,1,1) );\n  }\n  #color-icon {\n    background-color: #eee;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='color-icon'>hover over box</div>"
    }
  },
  "typography-header-1-": {
    "": {
      "output": "\n@mixin type-header-1 { \n  position: relative;\n  font-size: var( --type-header-1-font-size , 22px );\n  text-align: var( --type-header-1-text-align-horizontal , LEFT );\n  color: var( --type-header-1-color , rgba(0,0,0,1) );\n  font-family: var( --type-header-1-font-family , 'Open Sans' );\n  font-weight: var( --type-header-1-font-weight , 400 );\n  line-height: var( --type-header-1-line-height , 25.3px );\n  letter-spacing: var( --type-header-1-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-header-1 { \n    position: relative;\n    font-size: var( --type-header-1-font-size , 22px );\n    text-align: var( --type-header-1-text-align-horizontal , LEFT );\n    color: var( --type-header-1-color , rgba(0,0,0,1) );\n    font-family: var( --type-header-1-font-family , 'Open Sans' );\n    font-weight: var( --type-header-1-font-weight , 400 );\n    line-height: var( --type-header-1-line-height , 25.3px );\n    letter-spacing: var( --type-header-1-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-header-1'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-header-1--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-header-1 { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-header-1'></div>"
    },
    "width": {
      "output": "\n@mixin type-header-1--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-header-1 { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-header-1'></div>"
    },
    "height": {
      "output": "\n@mixin type-header-1--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-header-1 { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-header-1'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-header-1--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-header-1 { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-header-1'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-header-1--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-header-1-left , NOT-FOUND );\n  margin-right: var( --type-header-1-right , NOT-FOUND );\n  margin-top: var( --type-header-1-top , NOT-FOUND );\n  margin-bottom: var( --type-header-1-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-header-1-left , NOT-FOUND ) + var( --type-header-1-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-header-1 { \n    display: inline-block;\n  margin-left: var( --type-header-1-left , NOT-FOUND );\n  margin-right: var( --type-header-1-right , NOT-FOUND );\n  margin-top: var( --type-header-1-top , NOT-FOUND );\n  margin-bottom: var( --type-header-1-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-header-1-left , NOT-FOUND ) + var( --type-header-1-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-header-1'>content</div>"
    }
  },
  "typography-header-2-": {
    "": {
      "output": "\n@mixin type-header-2 { \n  position: relative;\n  font-size: var( --type-header-2-font-size , 20px );\n  text-align: var( --type-header-2-text-align-horizontal , LEFT );\n  color: var( --type-header-2-color , rgba(0,0,0,1) );\n  font-family: var( --type-header-2-font-family , 'Open Sans' );\n  font-weight: var( --type-header-2-font-weight , 400 );\n  line-height: var( --type-header-2-line-height , 23.44px );\n  letter-spacing: var( --type-header-2-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-header-2 { \n    position: relative;\n    font-size: var( --type-header-2-font-size , 20px );\n    text-align: var( --type-header-2-text-align-horizontal , LEFT );\n    color: var( --type-header-2-color , rgba(0,0,0,1) );\n    font-family: var( --type-header-2-font-family , 'Open Sans' );\n    font-weight: var( --type-header-2-font-weight , 400 );\n    line-height: var( --type-header-2-line-height , 23.44px );\n    letter-spacing: var( --type-header-2-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-header-2'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-header-2--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-header-2 { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-header-2'></div>"
    },
    "width": {
      "output": "\n@mixin type-header-2--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-header-2 { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-header-2'></div>"
    },
    "height": {
      "output": "\n@mixin type-header-2--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-header-2 { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-header-2'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-header-2--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-header-2 { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-header-2'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-header-2--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-header-2-left , NOT-FOUND );\n  margin-right: var( --type-header-2-right , NOT-FOUND );\n  margin-top: var( --type-header-2-top , NOT-FOUND );\n  margin-bottom: var( --type-header-2-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-header-2-left , NOT-FOUND ) + var( --type-header-2-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-header-2 { \n    display: inline-block;\n  margin-left: var( --type-header-2-left , NOT-FOUND );\n  margin-right: var( --type-header-2-right , NOT-FOUND );\n  margin-top: var( --type-header-2-top , NOT-FOUND );\n  margin-bottom: var( --type-header-2-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-header-2-left , NOT-FOUND ) + var( --type-header-2-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-header-2'>content</div>"
    }
  },
  "typography-header-3-": {
    "": {
      "output": "\n@mixin type-header-3 { \n  position: relative;\n  font-size: var( --type-header-3-font-size , 18px );\n  text-align: var( --type-header-3-text-align-horizontal , LEFT );\n  color: var( --type-header-3-color , rgba(0,0,0,1) );\n  font-family: var( --type-header-3-font-family , 'Open Sans' );\n  font-weight: var( --type-header-3-font-weight , 600 );\n  line-height: var( --type-header-3-line-height , 25.2px );\n  letter-spacing: var( --type-header-3-letter-spacing , 0.18px ); \n}",
      "example": "\n<style>\n  #type-header-3 { \n    position: relative;\n    font-size: var( --type-header-3-font-size , 18px );\n    text-align: var( --type-header-3-text-align-horizontal , LEFT );\n    color: var( --type-header-3-color , rgba(0,0,0,1) );\n    font-family: var( --type-header-3-font-family , 'Open Sans' );\n    font-weight: var( --type-header-3-font-weight , 600 );\n    line-height: var( --type-header-3-line-height , 25.2px );\n    letter-spacing: var( --type-header-3-letter-spacing , 0.18px ); \n  }\n</style>\n<div id='type-header-3'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-header-3--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-header-3 { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-header-3'></div>"
    },
    "width": {
      "output": "\n@mixin type-header-3--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-header-3 { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-header-3'></div>"
    },
    "height": {
      "output": "\n@mixin type-header-3--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-header-3 { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-header-3'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-header-3--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-header-3 { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-header-3'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-header-3--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-header-3-left , NOT-FOUND );\n  margin-right: var( --type-header-3-right , NOT-FOUND );\n  margin-top: var( --type-header-3-top , NOT-FOUND );\n  margin-bottom: var( --type-header-3-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-header-3-left , NOT-FOUND ) + var( --type-header-3-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-header-3 { \n    display: inline-block;\n  margin-left: var( --type-header-3-left , NOT-FOUND );\n  margin-right: var( --type-header-3-right , NOT-FOUND );\n  margin-top: var( --type-header-3-top , NOT-FOUND );\n  margin-bottom: var( --type-header-3-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-header-3-left , NOT-FOUND ) + var( --type-header-3-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-header-3'>content</div>"
    }
  },
  "typography-paragraph-1-": {
    "": {
      "output": "\n@mixin type-paragraph-1 { \n  position: relative;\n  font-size: var( --type-paragraph-1-font-size , 14px );\n  text-align: var( --type-paragraph-1-text-align-horizontal , LEFT );\n  color: var( --type-paragraph-1-color , rgba(0,0,0,1) );\n  font-family: var( --type-paragraph-1-font-family , 'Open Sans' );\n  font-weight: var( --type-paragraph-1-font-weight , 400 );\n  line-height: var( --type-paragraph-1-line-height , 16.41px );\n  letter-spacing: var( --type-paragraph-1-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-paragraph-1 { \n    position: relative;\n    font-size: var( --type-paragraph-1-font-size , 14px );\n    text-align: var( --type-paragraph-1-text-align-horizontal , LEFT );\n    color: var( --type-paragraph-1-color , rgba(0,0,0,1) );\n    font-family: var( --type-paragraph-1-font-family , 'Open Sans' );\n    font-weight: var( --type-paragraph-1-font-weight , 400 );\n    line-height: var( --type-paragraph-1-line-height , 16.41px );\n    letter-spacing: var( --type-paragraph-1-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-paragraph-1'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-paragraph-1--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-paragraph-1 { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-paragraph-1'></div>"
    },
    "width": {
      "output": "\n@mixin type-paragraph-1--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-paragraph-1 { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-paragraph-1'></div>"
    },
    "height": {
      "output": "\n@mixin type-paragraph-1--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-paragraph-1 { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-paragraph-1'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-paragraph-1--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-paragraph-1 { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-paragraph-1'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-paragraph-1--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-paragraph-1-left , NOT-FOUND );\n  margin-right: var( --type-paragraph-1-right , NOT-FOUND );\n  margin-top: var( --type-paragraph-1-top , NOT-FOUND );\n  margin-bottom: var( --type-paragraph-1-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-paragraph-1-left , NOT-FOUND ) + var( --type-paragraph-1-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-paragraph-1 { \n    display: inline-block;\n  margin-left: var( --type-paragraph-1-left , NOT-FOUND );\n  margin-right: var( --type-paragraph-1-right , NOT-FOUND );\n  margin-top: var( --type-paragraph-1-top , NOT-FOUND );\n  margin-bottom: var( --type-paragraph-1-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-paragraph-1-left , NOT-FOUND ) + var( --type-paragraph-1-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-paragraph-1'>content</div>"
    }
  },
  "typography-paragraph-2-": {
    "": {
      "output": "\n@mixin type-paragraph-2 { \n  position: relative;\n  font-size: var( --type-paragraph-2-font-size , 12px );\n  text-align: var( --type-paragraph-2-text-align-horizontal , LEFT );\n  color: var( --type-paragraph-2-color , rgba(0,0,0,1) );\n  font-family: var( --type-paragraph-2-font-family , 'Open Sans' );\n  font-weight: var( --type-paragraph-2-font-weight , 400 );\n  line-height: var( --type-paragraph-2-line-height , 14.06px );\n  letter-spacing: var( --type-paragraph-2-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-paragraph-2 { \n    position: relative;\n    font-size: var( --type-paragraph-2-font-size , 12px );\n    text-align: var( --type-paragraph-2-text-align-horizontal , LEFT );\n    color: var( --type-paragraph-2-color , rgba(0,0,0,1) );\n    font-family: var( --type-paragraph-2-font-family , 'Open Sans' );\n    font-weight: var( --type-paragraph-2-font-weight , 400 );\n    line-height: var( --type-paragraph-2-line-height , 14.06px );\n    letter-spacing: var( --type-paragraph-2-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-paragraph-2'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-paragraph-2--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-paragraph-2 { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-paragraph-2'></div>"
    },
    "width": {
      "output": "\n@mixin type-paragraph-2--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-paragraph-2 { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-paragraph-2'></div>"
    },
    "height": {
      "output": "\n@mixin type-paragraph-2--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-paragraph-2 { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-paragraph-2'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-paragraph-2--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-paragraph-2 { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-paragraph-2'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-paragraph-2--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-paragraph-2-left , NOT-FOUND );\n  margin-right: var( --type-paragraph-2-right , NOT-FOUND );\n  margin-top: var( --type-paragraph-2-top , NOT-FOUND );\n  margin-bottom: var( --type-paragraph-2-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-paragraph-2-left , NOT-FOUND ) + var( --type-paragraph-2-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-paragraph-2 { \n    display: inline-block;\n  margin-left: var( --type-paragraph-2-left , NOT-FOUND );\n  margin-right: var( --type-paragraph-2-right , NOT-FOUND );\n  margin-top: var( --type-paragraph-2-top , NOT-FOUND );\n  margin-bottom: var( --type-paragraph-2-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-paragraph-2-left , NOT-FOUND ) + var( --type-paragraph-2-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-paragraph-2'>content</div>"
    }
  },
  "typography-paragraph-3-": {
    "": {
      "output": "\n@mixin type-paragraph-3 { \n  position: relative;\n  font-size: var( --type-paragraph-3-font-size , 11px );\n  text-align: var( --type-paragraph-3-text-align-horizontal , LEFT );\n  color: var( --type-paragraph-3-color , rgba(0,0,0,1) );\n  font-family: var( --type-paragraph-3-font-family , 'Open Sans' );\n  font-weight: var( --type-paragraph-3-font-weight , 400 );\n  line-height: var( --type-paragraph-3-line-height , 12.89px );\n  letter-spacing: var( --type-paragraph-3-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-paragraph-3 { \n    position: relative;\n    font-size: var( --type-paragraph-3-font-size , 11px );\n    text-align: var( --type-paragraph-3-text-align-horizontal , LEFT );\n    color: var( --type-paragraph-3-color , rgba(0,0,0,1) );\n    font-family: var( --type-paragraph-3-font-family , 'Open Sans' );\n    font-weight: var( --type-paragraph-3-font-weight , 400 );\n    line-height: var( --type-paragraph-3-line-height , 12.89px );\n    letter-spacing: var( --type-paragraph-3-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-paragraph-3'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-paragraph-3--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-paragraph-3 { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-paragraph-3'></div>"
    },
    "width": {
      "output": "\n@mixin type-paragraph-3--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-paragraph-3 { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-paragraph-3'></div>"
    },
    "height": {
      "output": "\n@mixin type-paragraph-3--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-paragraph-3 { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-paragraph-3'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-paragraph-3--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-paragraph-3 { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-paragraph-3'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-paragraph-3--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-paragraph-3-left , NOT-FOUND );\n  margin-right: var( --type-paragraph-3-right , NOT-FOUND );\n  margin-top: var( --type-paragraph-3-top , NOT-FOUND );\n  margin-bottom: var( --type-paragraph-3-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-paragraph-3-left , NOT-FOUND ) + var( --type-paragraph-3-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-paragraph-3 { \n    display: inline-block;\n  margin-left: var( --type-paragraph-3-left , NOT-FOUND );\n  margin-right: var( --type-paragraph-3-right , NOT-FOUND );\n  margin-top: var( --type-paragraph-3-top , NOT-FOUND );\n  margin-bottom: var( --type-paragraph-3-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-paragraph-3-left , NOT-FOUND ) + var( --type-paragraph-3-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-paragraph-3'>content</div>"
    }
  },
  "typography-text-text-10": {
    "": {
      "output": "\n@mixin type-text-10 { \n  position: relative;\n  font-size: var( --type-text-10-font-size , 30px );\n  text-align: var( --type-text-10-text-align-horizontal , LEFT );\n  color: var( --type-text-10-color , rgba(0,0,0,1) );\n  font-family: var( --type-text-10-font-family , 'Proxima Nova' );\n  font-weight: var( --type-text-10-font-weight , 400 );\n  line-height: var( --type-text-10-line-height , 35.16px );\n  letter-spacing: var( --type-text-10-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-text { \n    position: relative;\n    font-size: var( --type-text-10-font-size , 30px );\n    text-align: var( --type-text-10-text-align-horizontal , LEFT );\n    color: var( --type-text-10-color , rgba(0,0,0,1) );\n    font-family: var( --type-text-10-font-family , 'Proxima Nova' );\n    font-weight: var( --type-text-10-font-weight , 400 );\n    line-height: var( --type-text-10-line-height , 35.16px );\n    letter-spacing: var( --type-text-10-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-text'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-text-10--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text'></div>"
    },
    "width": {
      "output": "\n@mixin type-text-10--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text'></div>"
    },
    "height": {
      "output": "\n@mixin type-text-10--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-text-10--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-text { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-text'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-text-10--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-text-10-left , NOT-FOUND );\n  margin-right: var( --type-text-10-right , NOT-FOUND );\n  margin-top: var( --type-text-10-top , NOT-FOUND );\n  margin-bottom: var( --type-text-10-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-10-left , NOT-FOUND ) + var( --type-text-10-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-text { \n    display: inline-block;\n  margin-left: var( --type-text-10-left , NOT-FOUND );\n  margin-right: var( --type-text-10-right , NOT-FOUND );\n  margin-top: var( --type-text-10-top , NOT-FOUND );\n  margin-bottom: var( --type-text-10-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-10-left , NOT-FOUND ) + var( --type-text-10-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text'>content</div>"
    }
  },
  "typography-text-text-09": {
    "": {
      "output": "\n@mixin type-text-09 { \n  position: relative;\n  font-size: var( --type-text-09-font-size , 24px );\n  text-align: var( --type-text-09-text-align-horizontal , LEFT );\n  color: var( --type-text-09-color , rgba(0,0,0,1) );\n  font-family: var( --type-text-09-font-family , 'Proxima Nova' );\n  font-weight: var( --type-text-09-font-weight , 400 );\n  line-height: var( --type-text-09-line-height , 28.13px );\n  letter-spacing: var( --type-text-09-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-text { \n    position: relative;\n    font-size: var( --type-text-09-font-size , 24px );\n    text-align: var( --type-text-09-text-align-horizontal , LEFT );\n    color: var( --type-text-09-color , rgba(0,0,0,1) );\n    font-family: var( --type-text-09-font-family , 'Proxima Nova' );\n    font-weight: var( --type-text-09-font-weight , 400 );\n    line-height: var( --type-text-09-line-height , 28.13px );\n    letter-spacing: var( --type-text-09-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-text'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-text-09--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text'></div>"
    },
    "width": {
      "output": "\n@mixin type-text-09--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text'></div>"
    },
    "height": {
      "output": "\n@mixin type-text-09--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-text-09--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-text { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-text'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-text-09--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-text-09-left , NOT-FOUND );\n  margin-right: var( --type-text-09-right , NOT-FOUND );\n  margin-top: var( --type-text-09-top , NOT-FOUND );\n  margin-bottom: var( --type-text-09-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-09-left , NOT-FOUND ) + var( --type-text-09-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-text { \n    display: inline-block;\n  margin-left: var( --type-text-09-left , NOT-FOUND );\n  margin-right: var( --type-text-09-right , NOT-FOUND );\n  margin-top: var( --type-text-09-top , NOT-FOUND );\n  margin-bottom: var( --type-text-09-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-09-left , NOT-FOUND ) + var( --type-text-09-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text'>content</div>"
    }
  },
  "typography-text-text-08": {
    "": {
      "output": "\n@mixin type-text-08 { \n  position: relative;\n  font-size: var( --type-text-08-font-size , 21px );\n  text-align: var( --type-text-08-text-align-horizontal , LEFT );\n  color: var( --type-text-08-color , rgba(0,0,0,1) );\n  font-family: var( --type-text-08-font-family , 'Proxima Nova' );\n  font-weight: var( --type-text-08-font-weight , 400 );\n  line-height: var( --type-text-08-line-height , 24.61px );\n  letter-spacing: var( --type-text-08-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-text { \n    position: relative;\n    font-size: var( --type-text-08-font-size , 21px );\n    text-align: var( --type-text-08-text-align-horizontal , LEFT );\n    color: var( --type-text-08-color , rgba(0,0,0,1) );\n    font-family: var( --type-text-08-font-family , 'Proxima Nova' );\n    font-weight: var( --type-text-08-font-weight , 400 );\n    line-height: var( --type-text-08-line-height , 24.61px );\n    letter-spacing: var( --type-text-08-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-text'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-text-08--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text'></div>"
    },
    "width": {
      "output": "\n@mixin type-text-08--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text'></div>"
    },
    "height": {
      "output": "\n@mixin type-text-08--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-text-08--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-text { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-text'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-text-08--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-text-08-left , NOT-FOUND );\n  margin-right: var( --type-text-08-right , NOT-FOUND );\n  margin-top: var( --type-text-08-top , NOT-FOUND );\n  margin-bottom: var( --type-text-08-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-08-left , NOT-FOUND ) + var( --type-text-08-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-text { \n    display: inline-block;\n  margin-left: var( --type-text-08-left , NOT-FOUND );\n  margin-right: var( --type-text-08-right , NOT-FOUND );\n  margin-top: var( --type-text-08-top , NOT-FOUND );\n  margin-bottom: var( --type-text-08-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-08-left , NOT-FOUND ) + var( --type-text-08-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text'>content</div>"
    }
  },
  "typography-text-text-largest": {
    "": {
      "output": "\n@mixin type-text-largest { \n  position: relative;\n  font-size: var( --type-text-largest-font-size , 21px );\n  text-align: var( --type-text-largest-text-align-horizontal , LEFT );\n  color: var( --type-text-largest-color , rgba(0,0,0,1) );\n  font-family: var( --type-text-largest-font-family , 'Proxima Nova' );\n  font-weight: var( --type-text-largest-font-weight , 400 );\n  line-height: var( --type-text-largest-line-height , 24.61px );\n  letter-spacing: var( --type-text-largest-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-text { \n    position: relative;\n    font-size: var( --type-text-largest-font-size , 21px );\n    text-align: var( --type-text-largest-text-align-horizontal , LEFT );\n    color: var( --type-text-largest-color , rgba(0,0,0,1) );\n    font-family: var( --type-text-largest-font-family , 'Proxima Nova' );\n    font-weight: var( --type-text-largest-font-weight , 400 );\n    line-height: var( --type-text-largest-line-height , 24.61px );\n    letter-spacing: var( --type-text-largest-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-text'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-text-largest--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text'></div>"
    },
    "width": {
      "output": "\n@mixin type-text-largest--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text'></div>"
    },
    "height": {
      "output": "\n@mixin type-text-largest--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-text-largest--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-text { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-text'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-text-largest--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-text-largest-left , NOT-FOUND );\n  margin-right: var( --type-text-largest-right , NOT-FOUND );\n  margin-top: var( --type-text-largest-top , NOT-FOUND );\n  margin-bottom: var( --type-text-largest-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-largest-left , NOT-FOUND ) + var( --type-text-largest-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-text { \n    display: inline-block;\n  margin-left: var( --type-text-largest-left , NOT-FOUND );\n  margin-right: var( --type-text-largest-right , NOT-FOUND );\n  margin-top: var( --type-text-largest-top , NOT-FOUND );\n  margin-bottom: var( --type-text-largest-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-largest-left , NOT-FOUND ) + var( --type-text-largest-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text'>content</div>"
    }
  },
  "typography-text-text-07": {
    "": {
      "output": "\n@mixin type-text-07 { \n  position: relative;\n  font-size: var( --type-text-07-font-size , 18px );\n  text-align: var( --type-text-07-text-align-horizontal , LEFT );\n  color: var( --type-text-07-color , rgba(0,0,0,1) );\n  font-family: var( --type-text-07-font-family , 'Proxima Nova' );\n  font-weight: var( --type-text-07-font-weight , 400 );\n  line-height: var( --type-text-07-line-height , 21.09px );\n  letter-spacing: var( --type-text-07-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-text { \n    position: relative;\n    font-size: var( --type-text-07-font-size , 18px );\n    text-align: var( --type-text-07-text-align-horizontal , LEFT );\n    color: var( --type-text-07-color , rgba(0,0,0,1) );\n    font-family: var( --type-text-07-font-family , 'Proxima Nova' );\n    font-weight: var( --type-text-07-font-weight , 400 );\n    line-height: var( --type-text-07-line-height , 21.09px );\n    letter-spacing: var( --type-text-07-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-text'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-text-07--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text'></div>"
    },
    "width": {
      "output": "\n@mixin type-text-07--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text'></div>"
    },
    "height": {
      "output": "\n@mixin type-text-07--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-text-07--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-text { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-text'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-text-07--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-text-07-left , NOT-FOUND );\n  margin-right: var( --type-text-07-right , NOT-FOUND );\n  margin-top: var( --type-text-07-top , NOT-FOUND );\n  margin-bottom: var( --type-text-07-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-07-left , NOT-FOUND ) + var( --type-text-07-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-text { \n    display: inline-block;\n  margin-left: var( --type-text-07-left , NOT-FOUND );\n  margin-right: var( --type-text-07-right , NOT-FOUND );\n  margin-top: var( --type-text-07-top , NOT-FOUND );\n  margin-bottom: var( --type-text-07-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-07-left , NOT-FOUND ) + var( --type-text-07-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text'>content</div>"
    }
  },
  "typography-text-text-larger": {
    "": {
      "output": "\n@mixin type-text-larger { \n  position: relative;\n  font-size: var( --type-text-larger-font-size , 18px );\n  text-align: var( --type-text-larger-text-align-horizontal , LEFT );\n  color: var( --type-text-larger-color , rgba(0,0,0,1) );\n  font-family: var( --type-text-larger-font-family , 'Proxima Nova' );\n  font-weight: var( --type-text-larger-font-weight , 400 );\n  line-height: var( --type-text-larger-line-height , 21.09px );\n  letter-spacing: var( --type-text-larger-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-text { \n    position: relative;\n    font-size: var( --type-text-larger-font-size , 18px );\n    text-align: var( --type-text-larger-text-align-horizontal , LEFT );\n    color: var( --type-text-larger-color , rgba(0,0,0,1) );\n    font-family: var( --type-text-larger-font-family , 'Proxima Nova' );\n    font-weight: var( --type-text-larger-font-weight , 400 );\n    line-height: var( --type-text-larger-line-height , 21.09px );\n    letter-spacing: var( --type-text-larger-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-text'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-text-larger--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text'></div>"
    },
    "width": {
      "output": "\n@mixin type-text-larger--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text'></div>"
    },
    "height": {
      "output": "\n@mixin type-text-larger--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-text-larger--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-text { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-text'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-text-larger--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-text-larger-left , NOT-FOUND );\n  margin-right: var( --type-text-larger-right , NOT-FOUND );\n  margin-top: var( --type-text-larger-top , NOT-FOUND );\n  margin-bottom: var( --type-text-larger-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-larger-left , NOT-FOUND ) + var( --type-text-larger-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-text { \n    display: inline-block;\n  margin-left: var( --type-text-larger-left , NOT-FOUND );\n  margin-right: var( --type-text-larger-right , NOT-FOUND );\n  margin-top: var( --type-text-larger-top , NOT-FOUND );\n  margin-bottom: var( --type-text-larger-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-larger-left , NOT-FOUND ) + var( --type-text-larger-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text'>content</div>"
    }
  },
  "typography-text-text-06": {
    "": {
      "output": "\n@mixin type-text-06 { \n  position: relative;\n  font-size: var( --type-text-06-font-size , 16px );\n  text-align: var( --type-text-06-text-align-horizontal , LEFT );\n  color: var( --type-text-06-color , rgba(0,0,0,1) );\n  font-family: var( --type-text-06-font-family , 'Proxima Nova' );\n  font-weight: var( --type-text-06-font-weight , 400 );\n  line-height: var( --type-text-06-line-height , 18.75px );\n  letter-spacing: var( --type-text-06-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-text { \n    position: relative;\n    font-size: var( --type-text-06-font-size , 16px );\n    text-align: var( --type-text-06-text-align-horizontal , LEFT );\n    color: var( --type-text-06-color , rgba(0,0,0,1) );\n    font-family: var( --type-text-06-font-family , 'Proxima Nova' );\n    font-weight: var( --type-text-06-font-weight , 400 );\n    line-height: var( --type-text-06-line-height , 18.75px );\n    letter-spacing: var( --type-text-06-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-text'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-text-06--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text'></div>"
    },
    "width": {
      "output": "\n@mixin type-text-06--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text'></div>"
    },
    "height": {
      "output": "\n@mixin type-text-06--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-text-06--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-text { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-text'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-text-06--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-text-06-left , NOT-FOUND );\n  margin-right: var( --type-text-06-right , NOT-FOUND );\n  margin-top: var( --type-text-06-top , NOT-FOUND );\n  margin-bottom: var( --type-text-06-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-06-left , NOT-FOUND ) + var( --type-text-06-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-text { \n    display: inline-block;\n  margin-left: var( --type-text-06-left , NOT-FOUND );\n  margin-right: var( --type-text-06-right , NOT-FOUND );\n  margin-top: var( --type-text-06-top , NOT-FOUND );\n  margin-bottom: var( --type-text-06-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-06-left , NOT-FOUND ) + var( --type-text-06-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text'>content</div>"
    }
  },
  "typography-text-text-large": {
    "": {
      "output": "\n@mixin type-text-large { \n  position: relative;\n  font-size: var( --type-text-large-font-size , 16px );\n  text-align: var( --type-text-large-text-align-horizontal , LEFT );\n  color: var( --type-text-large-color , rgba(0,0,0,1) );\n  font-family: var( --type-text-large-font-family , 'Proxima Nova' );\n  font-weight: var( --type-text-large-font-weight , 400 );\n  line-height: var( --type-text-large-line-height , 18.75px );\n  letter-spacing: var( --type-text-large-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-text { \n    position: relative;\n    font-size: var( --type-text-large-font-size , 16px );\n    text-align: var( --type-text-large-text-align-horizontal , LEFT );\n    color: var( --type-text-large-color , rgba(0,0,0,1) );\n    font-family: var( --type-text-large-font-family , 'Proxima Nova' );\n    font-weight: var( --type-text-large-font-weight , 400 );\n    line-height: var( --type-text-large-line-height , 18.75px );\n    letter-spacing: var( --type-text-large-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-text'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-text-large--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text'></div>"
    },
    "width": {
      "output": "\n@mixin type-text-large--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text'></div>"
    },
    "height": {
      "output": "\n@mixin type-text-large--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-text-large--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-text { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-text'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-text-large--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-text-large-left , NOT-FOUND );\n  margin-right: var( --type-text-large-right , NOT-FOUND );\n  margin-top: var( --type-text-large-top , NOT-FOUND );\n  margin-bottom: var( --type-text-large-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-large-left , NOT-FOUND ) + var( --type-text-large-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-text { \n    display: inline-block;\n  margin-left: var( --type-text-large-left , NOT-FOUND );\n  margin-right: var( --type-text-large-right , NOT-FOUND );\n  margin-top: var( --type-text-large-top , NOT-FOUND );\n  margin-bottom: var( --type-text-large-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-large-left , NOT-FOUND ) + var( --type-text-large-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text'>content</div>"
    }
  },
  "typography-text-text-05": {
    "": {
      "output": "\n@mixin type-text-05 { \n  position: relative;\n  font-size: var( --type-text-05-font-size , 15px );\n  text-align: var( --type-text-05-text-align-horizontal , LEFT );\n  color: var( --type-text-05-color , rgba(0,0,0,1) );\n  font-family: var( --type-text-05-font-family , 'Proxima Nova' );\n  font-weight: var( --type-text-05-font-weight , 400 );\n  line-height: var( --type-text-05-line-height , 17.58px );\n  letter-spacing: var( --type-text-05-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-text { \n    position: relative;\n    font-size: var( --type-text-05-font-size , 15px );\n    text-align: var( --type-text-05-text-align-horizontal , LEFT );\n    color: var( --type-text-05-color , rgba(0,0,0,1) );\n    font-family: var( --type-text-05-font-family , 'Proxima Nova' );\n    font-weight: var( --type-text-05-font-weight , 400 );\n    line-height: var( --type-text-05-line-height , 17.58px );\n    letter-spacing: var( --type-text-05-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-text'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-text-05--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text'></div>"
    },
    "width": {
      "output": "\n@mixin type-text-05--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text'></div>"
    },
    "height": {
      "output": "\n@mixin type-text-05--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-text-05--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-text { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-text'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-text-05--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-text-05-left , NOT-FOUND );\n  margin-right: var( --type-text-05-right , NOT-FOUND );\n  margin-top: var( --type-text-05-top , NOT-FOUND );\n  margin-bottom: var( --type-text-05-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-05-left , NOT-FOUND ) + var( --type-text-05-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-text { \n    display: inline-block;\n  margin-left: var( --type-text-05-left , NOT-FOUND );\n  margin-right: var( --type-text-05-right , NOT-FOUND );\n  margin-top: var( --type-text-05-top , NOT-FOUND );\n  margin-bottom: var( --type-text-05-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-05-left , NOT-FOUND ) + var( --type-text-05-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text'>content</div>"
    }
  },
  "typography-text-text-": {
    "": {
      "output": "\n@mixin type-text { \n  position: relative;\n  font-size: var( --type-text-font-size , 15px );\n  text-align: var( --type-text-text-align-horizontal , LEFT );\n  color: var( --type-text-color , rgba(0,0,0,1) );\n  font-family: var( --type-text-font-family , 'Proxima Nova' );\n  font-weight: var( --type-text-font-weight , 400 );\n  line-height: var( --type-text-line-height , 17.58px );\n  letter-spacing: var( --type-text-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-text { \n    position: relative;\n    font-size: var( --type-text-font-size , 15px );\n    text-align: var( --type-text-text-align-horizontal , LEFT );\n    color: var( --type-text-color , rgba(0,0,0,1) );\n    font-family: var( --type-text-font-family , 'Proxima Nova' );\n    font-weight: var( --type-text-font-weight , 400 );\n    line-height: var( --type-text-line-height , 17.58px );\n    letter-spacing: var( --type-text-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-text'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-text--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text'></div>"
    },
    "width": {
      "output": "\n@mixin type-text--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text'></div>"
    },
    "height": {
      "output": "\n@mixin type-text--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-text--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-text { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-text'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-text--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-text-left , NOT-FOUND );\n  margin-right: var( --type-text-right , NOT-FOUND );\n  margin-top: var( --type-text-top , NOT-FOUND );\n  margin-bottom: var( --type-text-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-left , NOT-FOUND ) + var( --type-text-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-text { \n    display: inline-block;\n  margin-left: var( --type-text-left , NOT-FOUND );\n  margin-right: var( --type-text-right , NOT-FOUND );\n  margin-top: var( --type-text-top , NOT-FOUND );\n  margin-bottom: var( --type-text-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-left , NOT-FOUND ) + var( --type-text-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text'>content</div>"
    }
  },
  "typography-text-text-04": {
    "": {
      "output": "\n@mixin type-text-04 { \n  position: relative;\n  font-size: var( --type-text-04-font-size , 12px );\n  text-align: var( --type-text-04-text-align-horizontal , LEFT );\n  color: var( --type-text-04-color , rgba(0,0,0,1) );\n  font-family: var( --type-text-04-font-family , 'Proxima Nova' );\n  font-weight: var( --type-text-04-font-weight , 400 );\n  line-height: var( --type-text-04-line-height , 14.06px );\n  letter-spacing: var( --type-text-04-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-text { \n    position: relative;\n    font-size: var( --type-text-04-font-size , 12px );\n    text-align: var( --type-text-04-text-align-horizontal , LEFT );\n    color: var( --type-text-04-color , rgba(0,0,0,1) );\n    font-family: var( --type-text-04-font-family , 'Proxima Nova' );\n    font-weight: var( --type-text-04-font-weight , 400 );\n    line-height: var( --type-text-04-line-height , 14.06px );\n    letter-spacing: var( --type-text-04-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-text'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-text-04--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text'></div>"
    },
    "width": {
      "output": "\n@mixin type-text-04--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text'></div>"
    },
    "height": {
      "output": "\n@mixin type-text-04--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-text-04--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-text { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-text'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-text-04--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-text-04-left , NOT-FOUND );\n  margin-right: var( --type-text-04-right , NOT-FOUND );\n  margin-top: var( --type-text-04-top , NOT-FOUND );\n  margin-bottom: var( --type-text-04-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-04-left , NOT-FOUND ) + var( --type-text-04-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-text { \n    display: inline-block;\n  margin-left: var( --type-text-04-left , NOT-FOUND );\n  margin-right: var( --type-text-04-right , NOT-FOUND );\n  margin-top: var( --type-text-04-top , NOT-FOUND );\n  margin-bottom: var( --type-text-04-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-04-left , NOT-FOUND ) + var( --type-text-04-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text'>content</div>"
    }
  },
  "typography-text-text-small": {
    "": {
      "output": "\n@mixin type-text-small { \n  position: relative;\n  font-size: var( --type-text-small-font-size , 12px );\n  text-align: var( --type-text-small-text-align-horizontal , LEFT );\n  color: var( --type-text-small-color , rgba(0,0,0,1) );\n  font-family: var( --type-text-small-font-family , 'Proxima Nova' );\n  font-weight: var( --type-text-small-font-weight , 400 );\n  line-height: var( --type-text-small-line-height , 14.06px );\n  letter-spacing: var( --type-text-small-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-text { \n    position: relative;\n    font-size: var( --type-text-small-font-size , 12px );\n    text-align: var( --type-text-small-text-align-horizontal , LEFT );\n    color: var( --type-text-small-color , rgba(0,0,0,1) );\n    font-family: var( --type-text-small-font-family , 'Proxima Nova' );\n    font-weight: var( --type-text-small-font-weight , 400 );\n    line-height: var( --type-text-small-line-height , 14.06px );\n    letter-spacing: var( --type-text-small-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-text'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-text-small--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text'></div>"
    },
    "width": {
      "output": "\n@mixin type-text-small--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text'></div>"
    },
    "height": {
      "output": "\n@mixin type-text-small--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-text-small--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-text { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-text'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-text-small--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-text-small-left , NOT-FOUND );\n  margin-right: var( --type-text-small-right , NOT-FOUND );\n  margin-top: var( --type-text-small-top , NOT-FOUND );\n  margin-bottom: var( --type-text-small-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-small-left , NOT-FOUND ) + var( --type-text-small-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-text { \n    display: inline-block;\n  margin-left: var( --type-text-small-left , NOT-FOUND );\n  margin-right: var( --type-text-small-right , NOT-FOUND );\n  margin-top: var( --type-text-small-top , NOT-FOUND );\n  margin-bottom: var( --type-text-small-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-small-left , NOT-FOUND ) + var( --type-text-small-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text'>content</div>"
    }
  },
  "typography-text-text-03": {
    "": {
      "output": "\n@mixin type-text-03 { \n  position: relative;\n  font-size: var( --type-text-03-font-size , 11px );\n  text-align: var( --type-text-03-text-align-horizontal , LEFT );\n  color: var( --type-text-03-color , rgba(0,0,0,1) );\n  font-family: var( --type-text-03-font-family , 'Proxima Nova' );\n  font-weight: var( --type-text-03-font-weight , 400 );\n  line-height: var( --type-text-03-line-height , 12.89px );\n  letter-spacing: var( --type-text-03-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-text { \n    position: relative;\n    font-size: var( --type-text-03-font-size , 11px );\n    text-align: var( --type-text-03-text-align-horizontal , LEFT );\n    color: var( --type-text-03-color , rgba(0,0,0,1) );\n    font-family: var( --type-text-03-font-family , 'Proxima Nova' );\n    font-weight: var( --type-text-03-font-weight , 400 );\n    line-height: var( --type-text-03-line-height , 12.89px );\n    letter-spacing: var( --type-text-03-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-text'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-text-03--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text'></div>"
    },
    "width": {
      "output": "\n@mixin type-text-03--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text'></div>"
    },
    "height": {
      "output": "\n@mixin type-text-03--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-text-03--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-text { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-text'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-text-03--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-text-03-left , NOT-FOUND );\n  margin-right: var( --type-text-03-right , NOT-FOUND );\n  margin-top: var( --type-text-03-top , NOT-FOUND );\n  margin-bottom: var( --type-text-03-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-03-left , NOT-FOUND ) + var( --type-text-03-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-text { \n    display: inline-block;\n  margin-left: var( --type-text-03-left , NOT-FOUND );\n  margin-right: var( --type-text-03-right , NOT-FOUND );\n  margin-top: var( --type-text-03-top , NOT-FOUND );\n  margin-bottom: var( --type-text-03-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-03-left , NOT-FOUND ) + var( --type-text-03-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text'>content</div>"
    }
  },
  "typography-text-text-smaller": {
    "": {
      "output": "\n@mixin type-text-smaller { \n  position: relative;\n  font-size: var( --type-text-smaller-font-size , 11px );\n  text-align: var( --type-text-smaller-text-align-horizontal , LEFT );\n  color: var( --type-text-smaller-color , rgba(0,0,0,1) );\n  font-family: var( --type-text-smaller-font-family , 'Proxima Nova' );\n  font-weight: var( --type-text-smaller-font-weight , 400 );\n  line-height: var( --type-text-smaller-line-height , 12.89px );\n  letter-spacing: var( --type-text-smaller-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-text { \n    position: relative;\n    font-size: var( --type-text-smaller-font-size , 11px );\n    text-align: var( --type-text-smaller-text-align-horizontal , LEFT );\n    color: var( --type-text-smaller-color , rgba(0,0,0,1) );\n    font-family: var( --type-text-smaller-font-family , 'Proxima Nova' );\n    font-weight: var( --type-text-smaller-font-weight , 400 );\n    line-height: var( --type-text-smaller-line-height , 12.89px );\n    letter-spacing: var( --type-text-smaller-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-text'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-text-smaller--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text'></div>"
    },
    "width": {
      "output": "\n@mixin type-text-smaller--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text'></div>"
    },
    "height": {
      "output": "\n@mixin type-text-smaller--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-text-smaller--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-text { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-text'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-text-smaller--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-text-smaller-left , NOT-FOUND );\n  margin-right: var( --type-text-smaller-right , NOT-FOUND );\n  margin-top: var( --type-text-smaller-top , NOT-FOUND );\n  margin-bottom: var( --type-text-smaller-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-smaller-left , NOT-FOUND ) + var( --type-text-smaller-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-text { \n    display: inline-block;\n  margin-left: var( --type-text-smaller-left , NOT-FOUND );\n  margin-right: var( --type-text-smaller-right , NOT-FOUND );\n  margin-top: var( --type-text-smaller-top , NOT-FOUND );\n  margin-bottom: var( --type-text-smaller-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-smaller-left , NOT-FOUND ) + var( --type-text-smaller-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text'>content</div>"
    }
  },
  "typography-text-text-02": {
    "": {
      "output": "\n@mixin type-text-02 { \n  position: relative;\n  font-size: var( --type-text-02-font-size , 9px );\n  text-align: var( --type-text-02-text-align-horizontal , LEFT );\n  color: var( --type-text-02-color , rgba(0,0,0,1) );\n  font-family: var( --type-text-02-font-family , 'Proxima Nova' );\n  font-weight: var( --type-text-02-font-weight , 400 );\n  line-height: var( --type-text-02-line-height , 10.55px );\n  letter-spacing: var( --type-text-02-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-text { \n    position: relative;\n    font-size: var( --type-text-02-font-size , 9px );\n    text-align: var( --type-text-02-text-align-horizontal , LEFT );\n    color: var( --type-text-02-color , rgba(0,0,0,1) );\n    font-family: var( --type-text-02-font-family , 'Proxima Nova' );\n    font-weight: var( --type-text-02-font-weight , 400 );\n    line-height: var( --type-text-02-line-height , 10.55px );\n    letter-spacing: var( --type-text-02-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-text'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-text-02--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text'></div>"
    },
    "width": {
      "output": "\n@mixin type-text-02--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text'></div>"
    },
    "height": {
      "output": "\n@mixin type-text-02--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-text-02--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-text { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-text'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-text-02--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-text-02-left , NOT-FOUND );\n  margin-right: var( --type-text-02-right , NOT-FOUND );\n  margin-top: var( --type-text-02-top , NOT-FOUND );\n  margin-bottom: var( --type-text-02-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-02-left , NOT-FOUND ) + var( --type-text-02-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-text { \n    display: inline-block;\n  margin-left: var( --type-text-02-left , NOT-FOUND );\n  margin-right: var( --type-text-02-right , NOT-FOUND );\n  margin-top: var( --type-text-02-top , NOT-FOUND );\n  margin-bottom: var( --type-text-02-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-02-left , NOT-FOUND ) + var( --type-text-02-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text'>content</div>"
    }
  },
  "typography-text-text-smallest": {
    "": {
      "output": "\n@mixin type-text-smallest { \n  position: relative;\n  font-size: var( --type-text-smallest-font-size , 9px );\n  text-align: var( --type-text-smallest-text-align-horizontal , LEFT );\n  color: var( --type-text-smallest-color , rgba(0,0,0,1) );\n  font-family: var( --type-text-smallest-font-family , 'Proxima Nova' );\n  font-weight: var( --type-text-smallest-font-weight , 400 );\n  line-height: var( --type-text-smallest-line-height , 10.55px );\n  letter-spacing: var( --type-text-smallest-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-text { \n    position: relative;\n    font-size: var( --type-text-smallest-font-size , 9px );\n    text-align: var( --type-text-smallest-text-align-horizontal , LEFT );\n    color: var( --type-text-smallest-color , rgba(0,0,0,1) );\n    font-family: var( --type-text-smallest-font-family , 'Proxima Nova' );\n    font-weight: var( --type-text-smallest-font-weight , 400 );\n    line-height: var( --type-text-smallest-line-height , 10.55px );\n    letter-spacing: var( --type-text-smallest-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-text'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-text-smallest--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text'></div>"
    },
    "width": {
      "output": "\n@mixin type-text-smallest--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text'></div>"
    },
    "height": {
      "output": "\n@mixin type-text-smallest--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-text-smallest--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-text { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-text'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-text-smallest--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-text-smallest-left , NOT-FOUND );\n  margin-right: var( --type-text-smallest-right , NOT-FOUND );\n  margin-top: var( --type-text-smallest-top , NOT-FOUND );\n  margin-bottom: var( --type-text-smallest-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-smallest-left , NOT-FOUND ) + var( --type-text-smallest-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-text { \n    display: inline-block;\n  margin-left: var( --type-text-smallest-left , NOT-FOUND );\n  margin-right: var( --type-text-smallest-right , NOT-FOUND );\n  margin-top: var( --type-text-smallest-top , NOT-FOUND );\n  margin-bottom: var( --type-text-smallest-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-smallest-left , NOT-FOUND ) + var( --type-text-smallest-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text'>content</div>"
    }
  },
  "typography-text-text-01": {
    "": {
      "output": "\n@mixin type-text-01 { \n  position: relative;\n  font-size: var( --type-text-01-font-size , 8px );\n  text-align: var( --type-text-01-text-align-horizontal , LEFT );\n  color: var( --type-text-01-color , rgba(0,0,0,1) );\n  font-family: var( --type-text-01-font-family , 'Proxima Nova' );\n  font-weight: var( --type-text-01-font-weight , 400 );\n  line-height: var( --type-text-01-line-height , 9.38px );\n  letter-spacing: var( --type-text-01-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-text { \n    position: relative;\n    font-size: var( --type-text-01-font-size , 8px );\n    text-align: var( --type-text-01-text-align-horizontal , LEFT );\n    color: var( --type-text-01-color , rgba(0,0,0,1) );\n    font-family: var( --type-text-01-font-family , 'Proxima Nova' );\n    font-weight: var( --type-text-01-font-weight , 400 );\n    line-height: var( --type-text-01-line-height , 9.38px );\n    letter-spacing: var( --type-text-01-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-text'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-text-01--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text'></div>"
    },
    "width": {
      "output": "\n@mixin type-text-01--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text'></div>"
    },
    "height": {
      "output": "\n@mixin type-text-01--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-text-01--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-text { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-text'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-text-01--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-text-01-left , NOT-FOUND );\n  margin-right: var( --type-text-01-right , NOT-FOUND );\n  margin-top: var( --type-text-01-top , NOT-FOUND );\n  margin-bottom: var( --type-text-01-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-01-left , NOT-FOUND ) + var( --type-text-01-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-text { \n    display: inline-block;\n  margin-left: var( --type-text-01-left , NOT-FOUND );\n  margin-right: var( --type-text-01-right , NOT-FOUND );\n  margin-top: var( --type-text-01-top , NOT-FOUND );\n  margin-bottom: var( --type-text-01-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-01-left , NOT-FOUND ) + var( --type-text-01-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text'>content</div>"
    }
  },
  "typography-text-semibold-text-semibold-10": {
    "": {
      "output": "\n@mixin type-text-semibold-10 { \n  position: relative;\n  font-size: var( --type-text-semibold-10-font-size , 30px );\n  text-align: var( --type-text-semibold-10-text-align-horizontal , LEFT );\n  color: var( --type-text-semibold-10-color , rgba(0,0,0,1) );\n  font-family: var( --type-text-semibold-10-font-family , 'Proxima Nova' );\n  font-weight: var( --type-text-semibold-10-font-weight , 600 );\n  line-height: var( --type-text-semibold-10-line-height , 35.16px );\n  letter-spacing: var( --type-text-semibold-10-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-text-semibold { \n    position: relative;\n    font-size: var( --type-text-semibold-10-font-size , 30px );\n    text-align: var( --type-text-semibold-10-text-align-horizontal , LEFT );\n    color: var( --type-text-semibold-10-color , rgba(0,0,0,1) );\n    font-family: var( --type-text-semibold-10-font-family , 'Proxima Nova' );\n    font-weight: var( --type-text-semibold-10-font-weight , 600 );\n    line-height: var( --type-text-semibold-10-line-height , 35.16px );\n    letter-spacing: var( --type-text-semibold-10-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-text-semibold-10--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-semibold { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "width": {
      "output": "\n@mixin type-text-semibold-10--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-semibold { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "height": {
      "output": "\n@mixin type-text-semibold-10--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-semibold { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-text-semibold-10--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-text-semibold { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-text-semibold-10--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-text-semibold-10-left , NOT-FOUND );\n  margin-right: var( --type-text-semibold-10-right , NOT-FOUND );\n  margin-top: var( --type-text-semibold-10-top , NOT-FOUND );\n  margin-bottom: var( --type-text-semibold-10-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-semibold-10-left , NOT-FOUND ) + var( --type-text-semibold-10-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-text-semibold { \n    display: inline-block;\n  margin-left: var( --type-text-semibold-10-left , NOT-FOUND );\n  margin-right: var( --type-text-semibold-10-right , NOT-FOUND );\n  margin-top: var( --type-text-semibold-10-top , NOT-FOUND );\n  margin-bottom: var( --type-text-semibold-10-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-semibold-10-left , NOT-FOUND ) + var( --type-text-semibold-10-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-semibold'>content</div>"
    }
  },
  "typography-text-semibold-text-semibold-09": {
    "": {
      "output": "\n@mixin type-text-semibold-09 { \n  position: relative;\n  font-size: var( --type-text-semibold-09-font-size , 24px );\n  text-align: var( --type-text-semibold-09-text-align-horizontal , LEFT );\n  color: var( --type-text-semibold-09-color , rgba(0,0,0,1) );\n  font-family: var( --type-text-semibold-09-font-family , 'Proxima Nova' );\n  font-weight: var( --type-text-semibold-09-font-weight , 600 );\n  line-height: var( --type-text-semibold-09-line-height , 28.13px );\n  letter-spacing: var( --type-text-semibold-09-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-text-semibold { \n    position: relative;\n    font-size: var( --type-text-semibold-09-font-size , 24px );\n    text-align: var( --type-text-semibold-09-text-align-horizontal , LEFT );\n    color: var( --type-text-semibold-09-color , rgba(0,0,0,1) );\n    font-family: var( --type-text-semibold-09-font-family , 'Proxima Nova' );\n    font-weight: var( --type-text-semibold-09-font-weight , 600 );\n    line-height: var( --type-text-semibold-09-line-height , 28.13px );\n    letter-spacing: var( --type-text-semibold-09-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-text-semibold-09--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-semibold { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "width": {
      "output": "\n@mixin type-text-semibold-09--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-semibold { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "height": {
      "output": "\n@mixin type-text-semibold-09--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-semibold { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-text-semibold-09--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-text-semibold { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-text-semibold-09--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-text-semibold-09-left , NOT-FOUND );\n  margin-right: var( --type-text-semibold-09-right , NOT-FOUND );\n  margin-top: var( --type-text-semibold-09-top , NOT-FOUND );\n  margin-bottom: var( --type-text-semibold-09-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-semibold-09-left , NOT-FOUND ) + var( --type-text-semibold-09-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-text-semibold { \n    display: inline-block;\n  margin-left: var( --type-text-semibold-09-left , NOT-FOUND );\n  margin-right: var( --type-text-semibold-09-right , NOT-FOUND );\n  margin-top: var( --type-text-semibold-09-top , NOT-FOUND );\n  margin-bottom: var( --type-text-semibold-09-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-semibold-09-left , NOT-FOUND ) + var( --type-text-semibold-09-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-semibold'>content</div>"
    }
  },
  "typography-text-semibold-text-semibold-08": {
    "": {
      "output": "\n@mixin type-text-semibold-08 { \n  position: relative;\n  font-size: var( --type-text-semibold-08-font-size , 21px );\n  text-align: var( --type-text-semibold-08-text-align-horizontal , LEFT );\n  color: var( --type-text-semibold-08-color , rgba(0,0,0,1) );\n  font-family: var( --type-text-semibold-08-font-family , 'Proxima Nova' );\n  font-weight: var( --type-text-semibold-08-font-weight , 600 );\n  line-height: var( --type-text-semibold-08-line-height , 24.61px );\n  letter-spacing: var( --type-text-semibold-08-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-text-semibold { \n    position: relative;\n    font-size: var( --type-text-semibold-08-font-size , 21px );\n    text-align: var( --type-text-semibold-08-text-align-horizontal , LEFT );\n    color: var( --type-text-semibold-08-color , rgba(0,0,0,1) );\n    font-family: var( --type-text-semibold-08-font-family , 'Proxima Nova' );\n    font-weight: var( --type-text-semibold-08-font-weight , 600 );\n    line-height: var( --type-text-semibold-08-line-height , 24.61px );\n    letter-spacing: var( --type-text-semibold-08-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-text-semibold-08--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-semibold { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "width": {
      "output": "\n@mixin type-text-semibold-08--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-semibold { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "height": {
      "output": "\n@mixin type-text-semibold-08--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-semibold { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-text-semibold-08--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-text-semibold { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-text-semibold-08--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-text-semibold-08-left , NOT-FOUND );\n  margin-right: var( --type-text-semibold-08-right , NOT-FOUND );\n  margin-top: var( --type-text-semibold-08-top , NOT-FOUND );\n  margin-bottom: var( --type-text-semibold-08-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-semibold-08-left , NOT-FOUND ) + var( --type-text-semibold-08-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-text-semibold { \n    display: inline-block;\n  margin-left: var( --type-text-semibold-08-left , NOT-FOUND );\n  margin-right: var( --type-text-semibold-08-right , NOT-FOUND );\n  margin-top: var( --type-text-semibold-08-top , NOT-FOUND );\n  margin-bottom: var( --type-text-semibold-08-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-semibold-08-left , NOT-FOUND ) + var( --type-text-semibold-08-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-semibold'>content</div>"
    }
  },
  "typography-text-semibold-text-semibold-largest": {
    "": {
      "output": "\n@mixin type-text-semibold-largest { \n  position: relative;\n  font-size: var( --type-text-semibold-largest-font-size , 21px );\n  text-align: var( --type-text-semibold-largest-text-align-horizontal , LEFT );\n  color: var( --type-text-semibold-largest-color , rgba(0,0,0,1) );\n  font-family: var( --type-text-semibold-largest-font-family , 'Proxima Nova' );\n  font-weight: var( --type-text-semibold-largest-font-weight , 600 );\n  line-height: var( --type-text-semibold-largest-line-height , 24.61px );\n  letter-spacing: var( --type-text-semibold-largest-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-text-semibold { \n    position: relative;\n    font-size: var( --type-text-semibold-largest-font-size , 21px );\n    text-align: var( --type-text-semibold-largest-text-align-horizontal , LEFT );\n    color: var( --type-text-semibold-largest-color , rgba(0,0,0,1) );\n    font-family: var( --type-text-semibold-largest-font-family , 'Proxima Nova' );\n    font-weight: var( --type-text-semibold-largest-font-weight , 600 );\n    line-height: var( --type-text-semibold-largest-line-height , 24.61px );\n    letter-spacing: var( --type-text-semibold-largest-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-text-semibold-largest--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-semibold { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "width": {
      "output": "\n@mixin type-text-semibold-largest--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-semibold { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "height": {
      "output": "\n@mixin type-text-semibold-largest--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-semibold { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-text-semibold-largest--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-text-semibold { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-text-semibold-largest--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-text-semibold-largest-left , NOT-FOUND );\n  margin-right: var( --type-text-semibold-largest-right , NOT-FOUND );\n  margin-top: var( --type-text-semibold-largest-top , NOT-FOUND );\n  margin-bottom: var( --type-text-semibold-largest-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-semibold-largest-left , NOT-FOUND ) + var( --type-text-semibold-largest-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-text-semibold { \n    display: inline-block;\n  margin-left: var( --type-text-semibold-largest-left , NOT-FOUND );\n  margin-right: var( --type-text-semibold-largest-right , NOT-FOUND );\n  margin-top: var( --type-text-semibold-largest-top , NOT-FOUND );\n  margin-bottom: var( --type-text-semibold-largest-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-semibold-largest-left , NOT-FOUND ) + var( --type-text-semibold-largest-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-semibold'>content</div>"
    }
  },
  "typography-text-semibold-text-semibold-07": {
    "": {
      "output": "\n@mixin type-text-semibold-07 { \n  position: relative;\n  font-size: var( --type-text-semibold-07-font-size , 18px );\n  text-align: var( --type-text-semibold-07-text-align-horizontal , LEFT );\n  color: var( --type-text-semibold-07-color , rgba(0,0,0,1) );\n  font-family: var( --type-text-semibold-07-font-family , 'Proxima Nova' );\n  font-weight: var( --type-text-semibold-07-font-weight , 600 );\n  line-height: var( --type-text-semibold-07-line-height , 21.09px );\n  letter-spacing: var( --type-text-semibold-07-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-text-semibold { \n    position: relative;\n    font-size: var( --type-text-semibold-07-font-size , 18px );\n    text-align: var( --type-text-semibold-07-text-align-horizontal , LEFT );\n    color: var( --type-text-semibold-07-color , rgba(0,0,0,1) );\n    font-family: var( --type-text-semibold-07-font-family , 'Proxima Nova' );\n    font-weight: var( --type-text-semibold-07-font-weight , 600 );\n    line-height: var( --type-text-semibold-07-line-height , 21.09px );\n    letter-spacing: var( --type-text-semibold-07-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-text-semibold-07--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-semibold { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "width": {
      "output": "\n@mixin type-text-semibold-07--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-semibold { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "height": {
      "output": "\n@mixin type-text-semibold-07--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-semibold { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-text-semibold-07--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-text-semibold { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-text-semibold-07--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-text-semibold-07-left , NOT-FOUND );\n  margin-right: var( --type-text-semibold-07-right , NOT-FOUND );\n  margin-top: var( --type-text-semibold-07-top , NOT-FOUND );\n  margin-bottom: var( --type-text-semibold-07-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-semibold-07-left , NOT-FOUND ) + var( --type-text-semibold-07-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-text-semibold { \n    display: inline-block;\n  margin-left: var( --type-text-semibold-07-left , NOT-FOUND );\n  margin-right: var( --type-text-semibold-07-right , NOT-FOUND );\n  margin-top: var( --type-text-semibold-07-top , NOT-FOUND );\n  margin-bottom: var( --type-text-semibold-07-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-semibold-07-left , NOT-FOUND ) + var( --type-text-semibold-07-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-semibold'>content</div>"
    }
  },
  "typography-text-semibold-text-semibold-larger": {
    "": {
      "output": "\n@mixin type-text-semibold-larger { \n  position: relative;\n  font-size: var( --type-text-semibold-larger-font-size , 18px );\n  text-align: var( --type-text-semibold-larger-text-align-horizontal , LEFT );\n  color: var( --type-text-semibold-larger-color , rgba(0,0,0,1) );\n  font-family: var( --type-text-semibold-larger-font-family , 'Proxima Nova' );\n  font-weight: var( --type-text-semibold-larger-font-weight , 600 );\n  line-height: var( --type-text-semibold-larger-line-height , 21.09px );\n  letter-spacing: var( --type-text-semibold-larger-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-text-semibold { \n    position: relative;\n    font-size: var( --type-text-semibold-larger-font-size , 18px );\n    text-align: var( --type-text-semibold-larger-text-align-horizontal , LEFT );\n    color: var( --type-text-semibold-larger-color , rgba(0,0,0,1) );\n    font-family: var( --type-text-semibold-larger-font-family , 'Proxima Nova' );\n    font-weight: var( --type-text-semibold-larger-font-weight , 600 );\n    line-height: var( --type-text-semibold-larger-line-height , 21.09px );\n    letter-spacing: var( --type-text-semibold-larger-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-text-semibold-larger--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-semibold { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "width": {
      "output": "\n@mixin type-text-semibold-larger--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-semibold { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "height": {
      "output": "\n@mixin type-text-semibold-larger--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-semibold { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-text-semibold-larger--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-text-semibold { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-text-semibold-larger--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-text-semibold-larger-left , NOT-FOUND );\n  margin-right: var( --type-text-semibold-larger-right , NOT-FOUND );\n  margin-top: var( --type-text-semibold-larger-top , NOT-FOUND );\n  margin-bottom: var( --type-text-semibold-larger-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-semibold-larger-left , NOT-FOUND ) + var( --type-text-semibold-larger-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-text-semibold { \n    display: inline-block;\n  margin-left: var( --type-text-semibold-larger-left , NOT-FOUND );\n  margin-right: var( --type-text-semibold-larger-right , NOT-FOUND );\n  margin-top: var( --type-text-semibold-larger-top , NOT-FOUND );\n  margin-bottom: var( --type-text-semibold-larger-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-semibold-larger-left , NOT-FOUND ) + var( --type-text-semibold-larger-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-semibold'>content</div>"
    }
  },
  "typography-text-semibold-text-semibold-06": {
    "": {
      "output": "\n@mixin type-text-semibold-06 { \n  position: relative;\n  font-size: var( --type-text-semibold-06-font-size , 16px );\n  text-align: var( --type-text-semibold-06-text-align-horizontal , LEFT );\n  color: var( --type-text-semibold-06-color , rgba(0,0,0,1) );\n  font-family: var( --type-text-semibold-06-font-family , 'Proxima Nova' );\n  font-weight: var( --type-text-semibold-06-font-weight , 600 );\n  line-height: var( --type-text-semibold-06-line-height , 18.75px );\n  letter-spacing: var( --type-text-semibold-06-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-text-semibold { \n    position: relative;\n    font-size: var( --type-text-semibold-06-font-size , 16px );\n    text-align: var( --type-text-semibold-06-text-align-horizontal , LEFT );\n    color: var( --type-text-semibold-06-color , rgba(0,0,0,1) );\n    font-family: var( --type-text-semibold-06-font-family , 'Proxima Nova' );\n    font-weight: var( --type-text-semibold-06-font-weight , 600 );\n    line-height: var( --type-text-semibold-06-line-height , 18.75px );\n    letter-spacing: var( --type-text-semibold-06-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-text-semibold-06--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-semibold { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "width": {
      "output": "\n@mixin type-text-semibold-06--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-semibold { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "height": {
      "output": "\n@mixin type-text-semibold-06--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-semibold { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-text-semibold-06--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-text-semibold { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-text-semibold-06--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-text-semibold-06-left , NOT-FOUND );\n  margin-right: var( --type-text-semibold-06-right , NOT-FOUND );\n  margin-top: var( --type-text-semibold-06-top , NOT-FOUND );\n  margin-bottom: var( --type-text-semibold-06-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-semibold-06-left , NOT-FOUND ) + var( --type-text-semibold-06-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-text-semibold { \n    display: inline-block;\n  margin-left: var( --type-text-semibold-06-left , NOT-FOUND );\n  margin-right: var( --type-text-semibold-06-right , NOT-FOUND );\n  margin-top: var( --type-text-semibold-06-top , NOT-FOUND );\n  margin-bottom: var( --type-text-semibold-06-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-semibold-06-left , NOT-FOUND ) + var( --type-text-semibold-06-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-semibold'>content</div>"
    }
  },
  "typography-text-semibold-text-semibold-large": {
    "": {
      "output": "\n@mixin type-text-semibold-large { \n  position: relative;\n  font-size: var( --type-text-semibold-large-font-size , 16px );\n  text-align: var( --type-text-semibold-large-text-align-horizontal , LEFT );\n  color: var( --type-text-semibold-large-color , rgba(0,0,0,1) );\n  font-family: var( --type-text-semibold-large-font-family , 'Proxima Nova' );\n  font-weight: var( --type-text-semibold-large-font-weight , 600 );\n  line-height: var( --type-text-semibold-large-line-height , 18.75px );\n  letter-spacing: var( --type-text-semibold-large-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-text-semibold { \n    position: relative;\n    font-size: var( --type-text-semibold-large-font-size , 16px );\n    text-align: var( --type-text-semibold-large-text-align-horizontal , LEFT );\n    color: var( --type-text-semibold-large-color , rgba(0,0,0,1) );\n    font-family: var( --type-text-semibold-large-font-family , 'Proxima Nova' );\n    font-weight: var( --type-text-semibold-large-font-weight , 600 );\n    line-height: var( --type-text-semibold-large-line-height , 18.75px );\n    letter-spacing: var( --type-text-semibold-large-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-text-semibold-large--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-semibold { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "width": {
      "output": "\n@mixin type-text-semibold-large--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-semibold { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "height": {
      "output": "\n@mixin type-text-semibold-large--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-semibold { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-text-semibold-large--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-text-semibold { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-text-semibold-large--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-text-semibold-large-left , NOT-FOUND );\n  margin-right: var( --type-text-semibold-large-right , NOT-FOUND );\n  margin-top: var( --type-text-semibold-large-top , NOT-FOUND );\n  margin-bottom: var( --type-text-semibold-large-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-semibold-large-left , NOT-FOUND ) + var( --type-text-semibold-large-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-text-semibold { \n    display: inline-block;\n  margin-left: var( --type-text-semibold-large-left , NOT-FOUND );\n  margin-right: var( --type-text-semibold-large-right , NOT-FOUND );\n  margin-top: var( --type-text-semibold-large-top , NOT-FOUND );\n  margin-bottom: var( --type-text-semibold-large-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-semibold-large-left , NOT-FOUND ) + var( --type-text-semibold-large-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-semibold'>content</div>"
    }
  },
  "typography-text-semibold-text-semibold-05": {
    "": {
      "output": "\n@mixin type-text-semibold-05 { \n  position: relative;\n  font-size: var( --type-text-semibold-05-font-size , 15px );\n  text-align: var( --type-text-semibold-05-text-align-horizontal , LEFT );\n  color: var( --type-text-semibold-05-color , rgba(0,0,0,1) );\n  font-family: var( --type-text-semibold-05-font-family , 'Proxima Nova' );\n  font-weight: var( --type-text-semibold-05-font-weight , 600 );\n  line-height: var( --type-text-semibold-05-line-height , 17.58px );\n  letter-spacing: var( --type-text-semibold-05-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-text-semibold { \n    position: relative;\n    font-size: var( --type-text-semibold-05-font-size , 15px );\n    text-align: var( --type-text-semibold-05-text-align-horizontal , LEFT );\n    color: var( --type-text-semibold-05-color , rgba(0,0,0,1) );\n    font-family: var( --type-text-semibold-05-font-family , 'Proxima Nova' );\n    font-weight: var( --type-text-semibold-05-font-weight , 600 );\n    line-height: var( --type-text-semibold-05-line-height , 17.58px );\n    letter-spacing: var( --type-text-semibold-05-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-text-semibold-05--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-semibold { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "width": {
      "output": "\n@mixin type-text-semibold-05--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-semibold { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "height": {
      "output": "\n@mixin type-text-semibold-05--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-semibold { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-text-semibold-05--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-text-semibold { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-text-semibold-05--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-text-semibold-05-left , NOT-FOUND );\n  margin-right: var( --type-text-semibold-05-right , NOT-FOUND );\n  margin-top: var( --type-text-semibold-05-top , NOT-FOUND );\n  margin-bottom: var( --type-text-semibold-05-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-semibold-05-left , NOT-FOUND ) + var( --type-text-semibold-05-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-text-semibold { \n    display: inline-block;\n  margin-left: var( --type-text-semibold-05-left , NOT-FOUND );\n  margin-right: var( --type-text-semibold-05-right , NOT-FOUND );\n  margin-top: var( --type-text-semibold-05-top , NOT-FOUND );\n  margin-bottom: var( --type-text-semibold-05-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-semibold-05-left , NOT-FOUND ) + var( --type-text-semibold-05-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-semibold'>content</div>"
    }
  },
  "typography-text-semibold-text-semibold-": {
    "": {
      "output": "\n@mixin type-text-semibold { \n  position: relative;\n  font-size: var( --type-text-semibold-font-size , 15px );\n  text-align: var( --type-text-semibold-text-align-horizontal , LEFT );\n  color: var( --type-text-semibold-color , rgba(0,0,0,1) );\n  font-family: var( --type-text-semibold-font-family , 'Proxima Nova' );\n  font-weight: var( --type-text-semibold-font-weight , 600 );\n  line-height: var( --type-text-semibold-line-height , 17.58px );\n  letter-spacing: var( --type-text-semibold-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-text-semibold { \n    position: relative;\n    font-size: var( --type-text-semibold-font-size , 15px );\n    text-align: var( --type-text-semibold-text-align-horizontal , LEFT );\n    color: var( --type-text-semibold-color , rgba(0,0,0,1) );\n    font-family: var( --type-text-semibold-font-family , 'Proxima Nova' );\n    font-weight: var( --type-text-semibold-font-weight , 600 );\n    line-height: var( --type-text-semibold-line-height , 17.58px );\n    letter-spacing: var( --type-text-semibold-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-text-semibold--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-semibold { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "width": {
      "output": "\n@mixin type-text-semibold--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-semibold { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "height": {
      "output": "\n@mixin type-text-semibold--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-semibold { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-text-semibold--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-text-semibold { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-text-semibold--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-text-semibold-left , NOT-FOUND );\n  margin-right: var( --type-text-semibold-right , NOT-FOUND );\n  margin-top: var( --type-text-semibold-top , NOT-FOUND );\n  margin-bottom: var( --type-text-semibold-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-semibold-left , NOT-FOUND ) + var( --type-text-semibold-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-text-semibold { \n    display: inline-block;\n  margin-left: var( --type-text-semibold-left , NOT-FOUND );\n  margin-right: var( --type-text-semibold-right , NOT-FOUND );\n  margin-top: var( --type-text-semibold-top , NOT-FOUND );\n  margin-bottom: var( --type-text-semibold-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-semibold-left , NOT-FOUND ) + var( --type-text-semibold-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-semibold'>content</div>"
    }
  },
  "typography-text-semibold-text-semibold-04": {
    "": {
      "output": "\n@mixin type-text-semibold-04 { \n  position: relative;\n  font-size: var( --type-text-semibold-04-font-size , 12px );\n  text-align: var( --type-text-semibold-04-text-align-horizontal , LEFT );\n  color: var( --type-text-semibold-04-color , rgba(0,0,0,1) );\n  font-family: var( --type-text-semibold-04-font-family , 'Proxima Nova' );\n  font-weight: var( --type-text-semibold-04-font-weight , 600 );\n  line-height: var( --type-text-semibold-04-line-height , 14.06px );\n  letter-spacing: var( --type-text-semibold-04-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-text-semibold { \n    position: relative;\n    font-size: var( --type-text-semibold-04-font-size , 12px );\n    text-align: var( --type-text-semibold-04-text-align-horizontal , LEFT );\n    color: var( --type-text-semibold-04-color , rgba(0,0,0,1) );\n    font-family: var( --type-text-semibold-04-font-family , 'Proxima Nova' );\n    font-weight: var( --type-text-semibold-04-font-weight , 600 );\n    line-height: var( --type-text-semibold-04-line-height , 14.06px );\n    letter-spacing: var( --type-text-semibold-04-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-text-semibold-04--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-semibold { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "width": {
      "output": "\n@mixin type-text-semibold-04--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-semibold { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "height": {
      "output": "\n@mixin type-text-semibold-04--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-semibold { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-text-semibold-04--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-text-semibold { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-text-semibold-04--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-text-semibold-04-left , NOT-FOUND );\n  margin-right: var( --type-text-semibold-04-right , NOT-FOUND );\n  margin-top: var( --type-text-semibold-04-top , NOT-FOUND );\n  margin-bottom: var( --type-text-semibold-04-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-semibold-04-left , NOT-FOUND ) + var( --type-text-semibold-04-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-text-semibold { \n    display: inline-block;\n  margin-left: var( --type-text-semibold-04-left , NOT-FOUND );\n  margin-right: var( --type-text-semibold-04-right , NOT-FOUND );\n  margin-top: var( --type-text-semibold-04-top , NOT-FOUND );\n  margin-bottom: var( --type-text-semibold-04-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-semibold-04-left , NOT-FOUND ) + var( --type-text-semibold-04-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-semibold'>content</div>"
    }
  },
  "typography-text-semibold-text-semibold-small": {
    "": {
      "output": "\n@mixin type-text-semibold-small { \n  position: relative;\n  font-size: var( --type-text-semibold-small-font-size , 12px );\n  text-align: var( --type-text-semibold-small-text-align-horizontal , LEFT );\n  color: var( --type-text-semibold-small-color , rgba(0,0,0,1) );\n  font-family: var( --type-text-semibold-small-font-family , 'Proxima Nova' );\n  font-weight: var( --type-text-semibold-small-font-weight , 600 );\n  line-height: var( --type-text-semibold-small-line-height , 14.06px );\n  letter-spacing: var( --type-text-semibold-small-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-text-semibold { \n    position: relative;\n    font-size: var( --type-text-semibold-small-font-size , 12px );\n    text-align: var( --type-text-semibold-small-text-align-horizontal , LEFT );\n    color: var( --type-text-semibold-small-color , rgba(0,0,0,1) );\n    font-family: var( --type-text-semibold-small-font-family , 'Proxima Nova' );\n    font-weight: var( --type-text-semibold-small-font-weight , 600 );\n    line-height: var( --type-text-semibold-small-line-height , 14.06px );\n    letter-spacing: var( --type-text-semibold-small-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-text-semibold-small--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-semibold { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "width": {
      "output": "\n@mixin type-text-semibold-small--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-semibold { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "height": {
      "output": "\n@mixin type-text-semibold-small--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-semibold { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-text-semibold-small--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-text-semibold { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-text-semibold-small--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-text-semibold-small-left , NOT-FOUND );\n  margin-right: var( --type-text-semibold-small-right , NOT-FOUND );\n  margin-top: var( --type-text-semibold-small-top , NOT-FOUND );\n  margin-bottom: var( --type-text-semibold-small-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-semibold-small-left , NOT-FOUND ) + var( --type-text-semibold-small-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-text-semibold { \n    display: inline-block;\n  margin-left: var( --type-text-semibold-small-left , NOT-FOUND );\n  margin-right: var( --type-text-semibold-small-right , NOT-FOUND );\n  margin-top: var( --type-text-semibold-small-top , NOT-FOUND );\n  margin-bottom: var( --type-text-semibold-small-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-semibold-small-left , NOT-FOUND ) + var( --type-text-semibold-small-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-semibold'>content</div>"
    }
  },
  "typography-text-semibold-text-semibold-03": {
    "": {
      "output": "\n@mixin type-text-semibold-03 { \n  position: relative;\n  font-size: var( --type-text-semibold-03-font-size , 11px );\n  text-align: var( --type-text-semibold-03-text-align-horizontal , LEFT );\n  color: var( --type-text-semibold-03-color , rgba(0,0,0,1) );\n  font-family: var( --type-text-semibold-03-font-family , 'Proxima Nova' );\n  font-weight: var( --type-text-semibold-03-font-weight , 600 );\n  line-height: var( --type-text-semibold-03-line-height , 12.89px );\n  letter-spacing: var( --type-text-semibold-03-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-text-semibold { \n    position: relative;\n    font-size: var( --type-text-semibold-03-font-size , 11px );\n    text-align: var( --type-text-semibold-03-text-align-horizontal , LEFT );\n    color: var( --type-text-semibold-03-color , rgba(0,0,0,1) );\n    font-family: var( --type-text-semibold-03-font-family , 'Proxima Nova' );\n    font-weight: var( --type-text-semibold-03-font-weight , 600 );\n    line-height: var( --type-text-semibold-03-line-height , 12.89px );\n    letter-spacing: var( --type-text-semibold-03-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-text-semibold-03--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-semibold { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "width": {
      "output": "\n@mixin type-text-semibold-03--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-semibold { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "height": {
      "output": "\n@mixin type-text-semibold-03--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-semibold { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-text-semibold-03--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-text-semibold { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-text-semibold-03--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-text-semibold-03-left , NOT-FOUND );\n  margin-right: var( --type-text-semibold-03-right , NOT-FOUND );\n  margin-top: var( --type-text-semibold-03-top , NOT-FOUND );\n  margin-bottom: var( --type-text-semibold-03-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-semibold-03-left , NOT-FOUND ) + var( --type-text-semibold-03-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-text-semibold { \n    display: inline-block;\n  margin-left: var( --type-text-semibold-03-left , NOT-FOUND );\n  margin-right: var( --type-text-semibold-03-right , NOT-FOUND );\n  margin-top: var( --type-text-semibold-03-top , NOT-FOUND );\n  margin-bottom: var( --type-text-semibold-03-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-semibold-03-left , NOT-FOUND ) + var( --type-text-semibold-03-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-semibold'>content</div>"
    }
  },
  "typography-text-semibold-text-semibold-smaller": {
    "": {
      "output": "\n@mixin type-text-semibold-smaller { \n  position: relative;\n  font-size: var( --type-text-semibold-smaller-font-size , 11px );\n  text-align: var( --type-text-semibold-smaller-text-align-horizontal , LEFT );\n  color: var( --type-text-semibold-smaller-color , rgba(0,0,0,1) );\n  font-family: var( --type-text-semibold-smaller-font-family , 'Proxima Nova' );\n  font-weight: var( --type-text-semibold-smaller-font-weight , 600 );\n  line-height: var( --type-text-semibold-smaller-line-height , 12.89px );\n  letter-spacing: var( --type-text-semibold-smaller-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-text-semibold { \n    position: relative;\n    font-size: var( --type-text-semibold-smaller-font-size , 11px );\n    text-align: var( --type-text-semibold-smaller-text-align-horizontal , LEFT );\n    color: var( --type-text-semibold-smaller-color , rgba(0,0,0,1) );\n    font-family: var( --type-text-semibold-smaller-font-family , 'Proxima Nova' );\n    font-weight: var( --type-text-semibold-smaller-font-weight , 600 );\n    line-height: var( --type-text-semibold-smaller-line-height , 12.89px );\n    letter-spacing: var( --type-text-semibold-smaller-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-text-semibold-smaller--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-semibold { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "width": {
      "output": "\n@mixin type-text-semibold-smaller--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-semibold { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "height": {
      "output": "\n@mixin type-text-semibold-smaller--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-semibold { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-text-semibold-smaller--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-text-semibold { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-text-semibold-smaller--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-text-semibold-smaller-left , NOT-FOUND );\n  margin-right: var( --type-text-semibold-smaller-right , NOT-FOUND );\n  margin-top: var( --type-text-semibold-smaller-top , NOT-FOUND );\n  margin-bottom: var( --type-text-semibold-smaller-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-semibold-smaller-left , NOT-FOUND ) + var( --type-text-semibold-smaller-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-text-semibold { \n    display: inline-block;\n  margin-left: var( --type-text-semibold-smaller-left , NOT-FOUND );\n  margin-right: var( --type-text-semibold-smaller-right , NOT-FOUND );\n  margin-top: var( --type-text-semibold-smaller-top , NOT-FOUND );\n  margin-bottom: var( --type-text-semibold-smaller-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-semibold-smaller-left , NOT-FOUND ) + var( --type-text-semibold-smaller-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-semibold'>content</div>"
    }
  },
  "typography-text-semibold-text-semibold-02": {
    "": {
      "output": "\n@mixin type-text-semibold-02 { \n  position: relative;\n  font-size: var( --type-text-semibold-02-font-size , 9px );\n  text-align: var( --type-text-semibold-02-text-align-horizontal , LEFT );\n  color: var( --type-text-semibold-02-color , rgba(0,0,0,1) );\n  font-family: var( --type-text-semibold-02-font-family , 'Proxima Nova' );\n  font-weight: var( --type-text-semibold-02-font-weight , 600 );\n  line-height: var( --type-text-semibold-02-line-height , 10.55px );\n  letter-spacing: var( --type-text-semibold-02-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-text-semibold { \n    position: relative;\n    font-size: var( --type-text-semibold-02-font-size , 9px );\n    text-align: var( --type-text-semibold-02-text-align-horizontal , LEFT );\n    color: var( --type-text-semibold-02-color , rgba(0,0,0,1) );\n    font-family: var( --type-text-semibold-02-font-family , 'Proxima Nova' );\n    font-weight: var( --type-text-semibold-02-font-weight , 600 );\n    line-height: var( --type-text-semibold-02-line-height , 10.55px );\n    letter-spacing: var( --type-text-semibold-02-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-text-semibold-02--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-semibold { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "width": {
      "output": "\n@mixin type-text-semibold-02--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-semibold { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "height": {
      "output": "\n@mixin type-text-semibold-02--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-semibold { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-text-semibold-02--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-text-semibold { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-text-semibold-02--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-text-semibold-02-left , NOT-FOUND );\n  margin-right: var( --type-text-semibold-02-right , NOT-FOUND );\n  margin-top: var( --type-text-semibold-02-top , NOT-FOUND );\n  margin-bottom: var( --type-text-semibold-02-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-semibold-02-left , NOT-FOUND ) + var( --type-text-semibold-02-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-text-semibold { \n    display: inline-block;\n  margin-left: var( --type-text-semibold-02-left , NOT-FOUND );\n  margin-right: var( --type-text-semibold-02-right , NOT-FOUND );\n  margin-top: var( --type-text-semibold-02-top , NOT-FOUND );\n  margin-bottom: var( --type-text-semibold-02-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-semibold-02-left , NOT-FOUND ) + var( --type-text-semibold-02-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-semibold'>content</div>"
    }
  },
  "typography-text-semibold-text-semibold-smallest": {
    "": {
      "output": "\n@mixin type-text-semibold-smallest { \n  position: relative;\n  font-size: var( --type-text-semibold-smallest-font-size , 9px );\n  text-align: var( --type-text-semibold-smallest-text-align-horizontal , LEFT );\n  color: var( --type-text-semibold-smallest-color , rgba(0,0,0,1) );\n  font-family: var( --type-text-semibold-smallest-font-family , 'Proxima Nova' );\n  font-weight: var( --type-text-semibold-smallest-font-weight , 600 );\n  line-height: var( --type-text-semibold-smallest-line-height , 10.55px );\n  letter-spacing: var( --type-text-semibold-smallest-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-text-semibold { \n    position: relative;\n    font-size: var( --type-text-semibold-smallest-font-size , 9px );\n    text-align: var( --type-text-semibold-smallest-text-align-horizontal , LEFT );\n    color: var( --type-text-semibold-smallest-color , rgba(0,0,0,1) );\n    font-family: var( --type-text-semibold-smallest-font-family , 'Proxima Nova' );\n    font-weight: var( --type-text-semibold-smallest-font-weight , 600 );\n    line-height: var( --type-text-semibold-smallest-line-height , 10.55px );\n    letter-spacing: var( --type-text-semibold-smallest-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-text-semibold-smallest--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-semibold { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "width": {
      "output": "\n@mixin type-text-semibold-smallest--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-semibold { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "height": {
      "output": "\n@mixin type-text-semibold-smallest--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-semibold { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-text-semibold-smallest--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-text-semibold { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-text-semibold-smallest--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-text-semibold-smallest-left , NOT-FOUND );\n  margin-right: var( --type-text-semibold-smallest-right , NOT-FOUND );\n  margin-top: var( --type-text-semibold-smallest-top , NOT-FOUND );\n  margin-bottom: var( --type-text-semibold-smallest-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-semibold-smallest-left , NOT-FOUND ) + var( --type-text-semibold-smallest-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-text-semibold { \n    display: inline-block;\n  margin-left: var( --type-text-semibold-smallest-left , NOT-FOUND );\n  margin-right: var( --type-text-semibold-smallest-right , NOT-FOUND );\n  margin-top: var( --type-text-semibold-smallest-top , NOT-FOUND );\n  margin-bottom: var( --type-text-semibold-smallest-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-semibold-smallest-left , NOT-FOUND ) + var( --type-text-semibold-smallest-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-semibold'>content</div>"
    }
  },
  "typography-text-semibold-text-semibold-01": {
    "": {
      "output": "\n@mixin type-text-semibold-01 { \n  position: relative;\n  font-size: var( --type-text-semibold-01-font-size , 8px );\n  text-align: var( --type-text-semibold-01-text-align-horizontal , LEFT );\n  color: var( --type-text-semibold-01-color , rgba(0,0,0,1) );\n  font-family: var( --type-text-semibold-01-font-family , 'Proxima Nova' );\n  font-weight: var( --type-text-semibold-01-font-weight , 600 );\n  line-height: var( --type-text-semibold-01-line-height , 9.38px );\n  letter-spacing: var( --type-text-semibold-01-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-text-semibold { \n    position: relative;\n    font-size: var( --type-text-semibold-01-font-size , 8px );\n    text-align: var( --type-text-semibold-01-text-align-horizontal , LEFT );\n    color: var( --type-text-semibold-01-color , rgba(0,0,0,1) );\n    font-family: var( --type-text-semibold-01-font-family , 'Proxima Nova' );\n    font-weight: var( --type-text-semibold-01-font-weight , 600 );\n    line-height: var( --type-text-semibold-01-line-height , 9.38px );\n    letter-spacing: var( --type-text-semibold-01-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-text-semibold-01--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-semibold { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "width": {
      "output": "\n@mixin type-text-semibold-01--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-semibold { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "height": {
      "output": "\n@mixin type-text-semibold-01--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-semibold { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-text-semibold-01--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-text-semibold { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-text-semibold'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-text-semibold-01--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-text-semibold-01-left , NOT-FOUND );\n  margin-right: var( --type-text-semibold-01-right , NOT-FOUND );\n  margin-top: var( --type-text-semibold-01-top , NOT-FOUND );\n  margin-bottom: var( --type-text-semibold-01-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-semibold-01-left , NOT-FOUND ) + var( --type-text-semibold-01-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-text-semibold { \n    display: inline-block;\n  margin-left: var( --type-text-semibold-01-left , NOT-FOUND );\n  margin-right: var( --type-text-semibold-01-right , NOT-FOUND );\n  margin-top: var( --type-text-semibold-01-top , NOT-FOUND );\n  margin-bottom: var( --type-text-semibold-01-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-semibold-01-left , NOT-FOUND ) + var( --type-text-semibold-01-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-semibold'>content</div>"
    }
  },
  "typography-text-bold-text-bold-10": {
    "": {
      "output": "\n@mixin type-text-bold-10 { \n  position: relative;\n  font-size: var( --type-text-bold-10-font-size , 30px );\n  text-align: var( --type-text-bold-10-text-align-horizontal , LEFT );\n  color: var( --type-text-bold-10-color , rgba(0,0,0,1) );\n  font-family: var( --type-text-bold-10-font-family , 'Proxima Nova' );\n  font-weight: var( --type-text-bold-10-font-weight , 700 );\n  line-height: var( --type-text-bold-10-line-height , 35.16px );\n  letter-spacing: var( --type-text-bold-10-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-text-bold { \n    position: relative;\n    font-size: var( --type-text-bold-10-font-size , 30px );\n    text-align: var( --type-text-bold-10-text-align-horizontal , LEFT );\n    color: var( --type-text-bold-10-color , rgba(0,0,0,1) );\n    font-family: var( --type-text-bold-10-font-family , 'Proxima Nova' );\n    font-weight: var( --type-text-bold-10-font-weight , 700 );\n    line-height: var( --type-text-bold-10-line-height , 35.16px );\n    letter-spacing: var( --type-text-bold-10-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-text-bold-10--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-bold { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "width": {
      "output": "\n@mixin type-text-bold-10--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-bold { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "height": {
      "output": "\n@mixin type-text-bold-10--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-bold { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-text-bold-10--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-text-bold { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-text-bold-10--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-text-bold-10-left , NOT-FOUND );\n  margin-right: var( --type-text-bold-10-right , NOT-FOUND );\n  margin-top: var( --type-text-bold-10-top , NOT-FOUND );\n  margin-bottom: var( --type-text-bold-10-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-bold-10-left , NOT-FOUND ) + var( --type-text-bold-10-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-text-bold { \n    display: inline-block;\n  margin-left: var( --type-text-bold-10-left , NOT-FOUND );\n  margin-right: var( --type-text-bold-10-right , NOT-FOUND );\n  margin-top: var( --type-text-bold-10-top , NOT-FOUND );\n  margin-bottom: var( --type-text-bold-10-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-bold-10-left , NOT-FOUND ) + var( --type-text-bold-10-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-bold'>content</div>"
    }
  },
  "typography-text-bold-text-bold-09": {
    "": {
      "output": "\n@mixin type-text-bold-09 { \n  position: relative;\n  font-size: var( --type-text-bold-09-font-size , 24px );\n  text-align: var( --type-text-bold-09-text-align-horizontal , LEFT );\n  color: var( --type-text-bold-09-color , rgba(0,0,0,1) );\n  font-family: var( --type-text-bold-09-font-family , 'Proxima Nova' );\n  font-weight: var( --type-text-bold-09-font-weight , 700 );\n  line-height: var( --type-text-bold-09-line-height , 28.13px );\n  letter-spacing: var( --type-text-bold-09-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-text-bold { \n    position: relative;\n    font-size: var( --type-text-bold-09-font-size , 24px );\n    text-align: var( --type-text-bold-09-text-align-horizontal , LEFT );\n    color: var( --type-text-bold-09-color , rgba(0,0,0,1) );\n    font-family: var( --type-text-bold-09-font-family , 'Proxima Nova' );\n    font-weight: var( --type-text-bold-09-font-weight , 700 );\n    line-height: var( --type-text-bold-09-line-height , 28.13px );\n    letter-spacing: var( --type-text-bold-09-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-text-bold-09--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-bold { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "width": {
      "output": "\n@mixin type-text-bold-09--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-bold { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "height": {
      "output": "\n@mixin type-text-bold-09--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-bold { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-text-bold-09--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-text-bold { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-text-bold-09--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-text-bold-09-left , NOT-FOUND );\n  margin-right: var( --type-text-bold-09-right , NOT-FOUND );\n  margin-top: var( --type-text-bold-09-top , NOT-FOUND );\n  margin-bottom: var( --type-text-bold-09-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-bold-09-left , NOT-FOUND ) + var( --type-text-bold-09-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-text-bold { \n    display: inline-block;\n  margin-left: var( --type-text-bold-09-left , NOT-FOUND );\n  margin-right: var( --type-text-bold-09-right , NOT-FOUND );\n  margin-top: var( --type-text-bold-09-top , NOT-FOUND );\n  margin-bottom: var( --type-text-bold-09-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-bold-09-left , NOT-FOUND ) + var( --type-text-bold-09-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-bold'>content</div>"
    }
  },
  "typography-text-bold-text-bold-08": {
    "": {
      "output": "\n@mixin type-text-bold-08 { \n  position: relative;\n  font-size: var( --type-text-bold-08-font-size , 21px );\n  text-align: var( --type-text-bold-08-text-align-horizontal , LEFT );\n  color: var( --type-text-bold-08-color , rgba(0,0,0,1) );\n  font-family: var( --type-text-bold-08-font-family , 'Open Sans' );\n  font-weight: var( --type-text-bold-08-font-weight , 700 );\n  line-height: var( --type-text-bold-08-line-height , 24.61px );\n  letter-spacing: var( --type-text-bold-08-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-text-bold { \n    position: relative;\n    font-size: var( --type-text-bold-08-font-size , 21px );\n    text-align: var( --type-text-bold-08-text-align-horizontal , LEFT );\n    color: var( --type-text-bold-08-color , rgba(0,0,0,1) );\n    font-family: var( --type-text-bold-08-font-family , 'Open Sans' );\n    font-weight: var( --type-text-bold-08-font-weight , 700 );\n    line-height: var( --type-text-bold-08-line-height , 24.61px );\n    letter-spacing: var( --type-text-bold-08-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-text-bold-08--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-bold { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "width": {
      "output": "\n@mixin type-text-bold-08--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-bold { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "height": {
      "output": "\n@mixin type-text-bold-08--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-bold { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-text-bold-08--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-text-bold { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-text-bold-08--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-text-bold-08-left , NOT-FOUND );\n  margin-right: var( --type-text-bold-08-right , NOT-FOUND );\n  margin-top: var( --type-text-bold-08-top , NOT-FOUND );\n  margin-bottom: var( --type-text-bold-08-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-bold-08-left , NOT-FOUND ) + var( --type-text-bold-08-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-text-bold { \n    display: inline-block;\n  margin-left: var( --type-text-bold-08-left , NOT-FOUND );\n  margin-right: var( --type-text-bold-08-right , NOT-FOUND );\n  margin-top: var( --type-text-bold-08-top , NOT-FOUND );\n  margin-bottom: var( --type-text-bold-08-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-bold-08-left , NOT-FOUND ) + var( --type-text-bold-08-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-bold'>content</div>"
    }
  },
  "typography-text-bold-text-bold-largest": {
    "": {
      "output": "\n@mixin type-text-bold-largest { \n  position: relative;\n  font-size: var( --type-text-bold-largest-font-size , 21px );\n  text-align: var( --type-text-bold-largest-text-align-horizontal , LEFT );\n  color: var( --type-text-bold-largest-color , rgba(0,0,0,1) );\n  font-family: var( --type-text-bold-largest-font-family , 'Open Sans' );\n  font-weight: var( --type-text-bold-largest-font-weight , 700 );\n  line-height: var( --type-text-bold-largest-line-height , 24.61px );\n  letter-spacing: var( --type-text-bold-largest-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-text-bold { \n    position: relative;\n    font-size: var( --type-text-bold-largest-font-size , 21px );\n    text-align: var( --type-text-bold-largest-text-align-horizontal , LEFT );\n    color: var( --type-text-bold-largest-color , rgba(0,0,0,1) );\n    font-family: var( --type-text-bold-largest-font-family , 'Open Sans' );\n    font-weight: var( --type-text-bold-largest-font-weight , 700 );\n    line-height: var( --type-text-bold-largest-line-height , 24.61px );\n    letter-spacing: var( --type-text-bold-largest-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-text-bold-largest--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-bold { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "width": {
      "output": "\n@mixin type-text-bold-largest--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-bold { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "height": {
      "output": "\n@mixin type-text-bold-largest--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-bold { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-text-bold-largest--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-text-bold { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-text-bold-largest--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-text-bold-largest-left , NOT-FOUND );\n  margin-right: var( --type-text-bold-largest-right , NOT-FOUND );\n  margin-top: var( --type-text-bold-largest-top , NOT-FOUND );\n  margin-bottom: var( --type-text-bold-largest-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-bold-largest-left , NOT-FOUND ) + var( --type-text-bold-largest-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-text-bold { \n    display: inline-block;\n  margin-left: var( --type-text-bold-largest-left , NOT-FOUND );\n  margin-right: var( --type-text-bold-largest-right , NOT-FOUND );\n  margin-top: var( --type-text-bold-largest-top , NOT-FOUND );\n  margin-bottom: var( --type-text-bold-largest-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-bold-largest-left , NOT-FOUND ) + var( --type-text-bold-largest-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-bold'>content</div>"
    }
  },
  "typography-text-bold-text-bold-07": {
    "": {
      "output": "\n@mixin type-text-bold-07 { \n  position: relative;\n  font-size: var( --type-text-bold-07-font-size , 18px );\n  text-align: var( --type-text-bold-07-text-align-horizontal , LEFT );\n  color: var( --type-text-bold-07-color , rgba(0,0,0,1) );\n  font-family: var( --type-text-bold-07-font-family , 'Proxima Nova' );\n  font-weight: var( --type-text-bold-07-font-weight , 700 );\n  line-height: var( --type-text-bold-07-line-height , 21.09px );\n  letter-spacing: var( --type-text-bold-07-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-text-bold { \n    position: relative;\n    font-size: var( --type-text-bold-07-font-size , 18px );\n    text-align: var( --type-text-bold-07-text-align-horizontal , LEFT );\n    color: var( --type-text-bold-07-color , rgba(0,0,0,1) );\n    font-family: var( --type-text-bold-07-font-family , 'Proxima Nova' );\n    font-weight: var( --type-text-bold-07-font-weight , 700 );\n    line-height: var( --type-text-bold-07-line-height , 21.09px );\n    letter-spacing: var( --type-text-bold-07-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-text-bold-07--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-bold { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "width": {
      "output": "\n@mixin type-text-bold-07--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-bold { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "height": {
      "output": "\n@mixin type-text-bold-07--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-bold { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-text-bold-07--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-text-bold { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-text-bold-07--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-text-bold-07-left , NOT-FOUND );\n  margin-right: var( --type-text-bold-07-right , NOT-FOUND );\n  margin-top: var( --type-text-bold-07-top , NOT-FOUND );\n  margin-bottom: var( --type-text-bold-07-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-bold-07-left , NOT-FOUND ) + var( --type-text-bold-07-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-text-bold { \n    display: inline-block;\n  margin-left: var( --type-text-bold-07-left , NOT-FOUND );\n  margin-right: var( --type-text-bold-07-right , NOT-FOUND );\n  margin-top: var( --type-text-bold-07-top , NOT-FOUND );\n  margin-bottom: var( --type-text-bold-07-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-bold-07-left , NOT-FOUND ) + var( --type-text-bold-07-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-bold'>content</div>"
    }
  },
  "typography-text-bold-text-bold-larger": {
    "": {
      "output": "\n@mixin type-text-bold-larger { \n  position: relative;\n  font-size: var( --type-text-bold-larger-font-size , 18px );\n  text-align: var( --type-text-bold-larger-text-align-horizontal , LEFT );\n  color: var( --type-text-bold-larger-color , rgba(0,0,0,1) );\n  font-family: var( --type-text-bold-larger-font-family , 'Proxima Nova' );\n  font-weight: var( --type-text-bold-larger-font-weight , 700 );\n  line-height: var( --type-text-bold-larger-line-height , 21.09px );\n  letter-spacing: var( --type-text-bold-larger-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-text-bold { \n    position: relative;\n    font-size: var( --type-text-bold-larger-font-size , 18px );\n    text-align: var( --type-text-bold-larger-text-align-horizontal , LEFT );\n    color: var( --type-text-bold-larger-color , rgba(0,0,0,1) );\n    font-family: var( --type-text-bold-larger-font-family , 'Proxima Nova' );\n    font-weight: var( --type-text-bold-larger-font-weight , 700 );\n    line-height: var( --type-text-bold-larger-line-height , 21.09px );\n    letter-spacing: var( --type-text-bold-larger-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-text-bold-larger--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-bold { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "width": {
      "output": "\n@mixin type-text-bold-larger--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-bold { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "height": {
      "output": "\n@mixin type-text-bold-larger--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-bold { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-text-bold-larger--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-text-bold { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-text-bold-larger--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-text-bold-larger-left , NOT-FOUND );\n  margin-right: var( --type-text-bold-larger-right , NOT-FOUND );\n  margin-top: var( --type-text-bold-larger-top , NOT-FOUND );\n  margin-bottom: var( --type-text-bold-larger-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-bold-larger-left , NOT-FOUND ) + var( --type-text-bold-larger-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-text-bold { \n    display: inline-block;\n  margin-left: var( --type-text-bold-larger-left , NOT-FOUND );\n  margin-right: var( --type-text-bold-larger-right , NOT-FOUND );\n  margin-top: var( --type-text-bold-larger-top , NOT-FOUND );\n  margin-bottom: var( --type-text-bold-larger-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-bold-larger-left , NOT-FOUND ) + var( --type-text-bold-larger-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-bold'>content</div>"
    }
  },
  "typography-text-bold-text-bold-06": {
    "": {
      "output": "\n@mixin type-text-bold-06 { \n  position: relative;\n  font-size: var( --type-text-bold-06-font-size , 16px );\n  text-align: var( --type-text-bold-06-text-align-horizontal , LEFT );\n  color: var( --type-text-bold-06-color , rgba(0,0,0,1) );\n  font-family: var( --type-text-bold-06-font-family , 'Proxima Nova' );\n  font-weight: var( --type-text-bold-06-font-weight , 700 );\n  line-height: var( --type-text-bold-06-line-height , 18.75px );\n  letter-spacing: var( --type-text-bold-06-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-text-bold { \n    position: relative;\n    font-size: var( --type-text-bold-06-font-size , 16px );\n    text-align: var( --type-text-bold-06-text-align-horizontal , LEFT );\n    color: var( --type-text-bold-06-color , rgba(0,0,0,1) );\n    font-family: var( --type-text-bold-06-font-family , 'Proxima Nova' );\n    font-weight: var( --type-text-bold-06-font-weight , 700 );\n    line-height: var( --type-text-bold-06-line-height , 18.75px );\n    letter-spacing: var( --type-text-bold-06-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-text-bold-06--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-bold { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "width": {
      "output": "\n@mixin type-text-bold-06--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-bold { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "height": {
      "output": "\n@mixin type-text-bold-06--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-bold { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-text-bold-06--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-text-bold { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-text-bold-06--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-text-bold-06-left , NOT-FOUND );\n  margin-right: var( --type-text-bold-06-right , NOT-FOUND );\n  margin-top: var( --type-text-bold-06-top , NOT-FOUND );\n  margin-bottom: var( --type-text-bold-06-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-bold-06-left , NOT-FOUND ) + var( --type-text-bold-06-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-text-bold { \n    display: inline-block;\n  margin-left: var( --type-text-bold-06-left , NOT-FOUND );\n  margin-right: var( --type-text-bold-06-right , NOT-FOUND );\n  margin-top: var( --type-text-bold-06-top , NOT-FOUND );\n  margin-bottom: var( --type-text-bold-06-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-bold-06-left , NOT-FOUND ) + var( --type-text-bold-06-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-bold'>content</div>"
    }
  },
  "typography-text-bold-text-bold-large": {
    "": {
      "output": "\n@mixin type-text-bold-large { \n  position: relative;\n  font-size: var( --type-text-bold-large-font-size , 16px );\n  text-align: var( --type-text-bold-large-text-align-horizontal , LEFT );\n  color: var( --type-text-bold-large-color , rgba(0,0,0,1) );\n  font-family: var( --type-text-bold-large-font-family , 'Proxima Nova' );\n  font-weight: var( --type-text-bold-large-font-weight , 700 );\n  line-height: var( --type-text-bold-large-line-height , 18.75px );\n  letter-spacing: var( --type-text-bold-large-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-text-bold { \n    position: relative;\n    font-size: var( --type-text-bold-large-font-size , 16px );\n    text-align: var( --type-text-bold-large-text-align-horizontal , LEFT );\n    color: var( --type-text-bold-large-color , rgba(0,0,0,1) );\n    font-family: var( --type-text-bold-large-font-family , 'Proxima Nova' );\n    font-weight: var( --type-text-bold-large-font-weight , 700 );\n    line-height: var( --type-text-bold-large-line-height , 18.75px );\n    letter-spacing: var( --type-text-bold-large-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-text-bold-large--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-bold { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "width": {
      "output": "\n@mixin type-text-bold-large--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-bold { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "height": {
      "output": "\n@mixin type-text-bold-large--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-bold { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-text-bold-large--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-text-bold { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-text-bold-large--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-text-bold-large-left , NOT-FOUND );\n  margin-right: var( --type-text-bold-large-right , NOT-FOUND );\n  margin-top: var( --type-text-bold-large-top , NOT-FOUND );\n  margin-bottom: var( --type-text-bold-large-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-bold-large-left , NOT-FOUND ) + var( --type-text-bold-large-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-text-bold { \n    display: inline-block;\n  margin-left: var( --type-text-bold-large-left , NOT-FOUND );\n  margin-right: var( --type-text-bold-large-right , NOT-FOUND );\n  margin-top: var( --type-text-bold-large-top , NOT-FOUND );\n  margin-bottom: var( --type-text-bold-large-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-bold-large-left , NOT-FOUND ) + var( --type-text-bold-large-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-bold'>content</div>"
    }
  },
  "typography-text-bold-text-bold-05": {
    "": {
      "output": "\n@mixin type-text-bold-05 { \n  position: relative;\n  font-size: var( --type-text-bold-05-font-size , 15px );\n  text-align: var( --type-text-bold-05-text-align-horizontal , LEFT );\n  color: var( --type-text-bold-05-color , rgba(0,0,0,1) );\n  font-family: var( --type-text-bold-05-font-family , 'Proxima Nova' );\n  font-weight: var( --type-text-bold-05-font-weight , 700 );\n  line-height: var( --type-text-bold-05-line-height , 17.58px );\n  letter-spacing: var( --type-text-bold-05-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-text-bold { \n    position: relative;\n    font-size: var( --type-text-bold-05-font-size , 15px );\n    text-align: var( --type-text-bold-05-text-align-horizontal , LEFT );\n    color: var( --type-text-bold-05-color , rgba(0,0,0,1) );\n    font-family: var( --type-text-bold-05-font-family , 'Proxima Nova' );\n    font-weight: var( --type-text-bold-05-font-weight , 700 );\n    line-height: var( --type-text-bold-05-line-height , 17.58px );\n    letter-spacing: var( --type-text-bold-05-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-text-bold-05--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-bold { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "width": {
      "output": "\n@mixin type-text-bold-05--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-bold { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "height": {
      "output": "\n@mixin type-text-bold-05--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-bold { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-text-bold-05--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-text-bold { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-text-bold-05--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-text-bold-05-left , NOT-FOUND );\n  margin-right: var( --type-text-bold-05-right , NOT-FOUND );\n  margin-top: var( --type-text-bold-05-top , NOT-FOUND );\n  margin-bottom: var( --type-text-bold-05-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-bold-05-left , NOT-FOUND ) + var( --type-text-bold-05-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-text-bold { \n    display: inline-block;\n  margin-left: var( --type-text-bold-05-left , NOT-FOUND );\n  margin-right: var( --type-text-bold-05-right , NOT-FOUND );\n  margin-top: var( --type-text-bold-05-top , NOT-FOUND );\n  margin-bottom: var( --type-text-bold-05-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-bold-05-left , NOT-FOUND ) + var( --type-text-bold-05-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-bold'>content</div>"
    }
  },
  "typography-text-bold-text-bold-": {
    "": {
      "output": "\n@mixin type-text-bold { \n  position: relative;\n  font-size: var( --type-text-bold-font-size , 15px );\n  text-align: var( --type-text-bold-text-align-horizontal , LEFT );\n  color: var( --type-text-bold-color , rgba(0,0,0,1) );\n  font-family: var( --type-text-bold-font-family , 'Proxima Nova' );\n  font-weight: var( --type-text-bold-font-weight , 700 );\n  line-height: var( --type-text-bold-line-height , 17.58px );\n  letter-spacing: var( --type-text-bold-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-text-bold { \n    position: relative;\n    font-size: var( --type-text-bold-font-size , 15px );\n    text-align: var( --type-text-bold-text-align-horizontal , LEFT );\n    color: var( --type-text-bold-color , rgba(0,0,0,1) );\n    font-family: var( --type-text-bold-font-family , 'Proxima Nova' );\n    font-weight: var( --type-text-bold-font-weight , 700 );\n    line-height: var( --type-text-bold-line-height , 17.58px );\n    letter-spacing: var( --type-text-bold-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-text-bold--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-bold { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "width": {
      "output": "\n@mixin type-text-bold--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-bold { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "height": {
      "output": "\n@mixin type-text-bold--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-bold { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-text-bold--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-text-bold { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-text-bold--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-text-bold-left , NOT-FOUND );\n  margin-right: var( --type-text-bold-right , NOT-FOUND );\n  margin-top: var( --type-text-bold-top , NOT-FOUND );\n  margin-bottom: var( --type-text-bold-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-bold-left , NOT-FOUND ) + var( --type-text-bold-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-text-bold { \n    display: inline-block;\n  margin-left: var( --type-text-bold-left , NOT-FOUND );\n  margin-right: var( --type-text-bold-right , NOT-FOUND );\n  margin-top: var( --type-text-bold-top , NOT-FOUND );\n  margin-bottom: var( --type-text-bold-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-bold-left , NOT-FOUND ) + var( --type-text-bold-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-bold'>content</div>"
    }
  },
  "typography-text-bold-text-bold-04": {
    "": {
      "output": "\n@mixin type-text-bold-04 { \n  position: relative;\n  font-size: var( --type-text-bold-04-font-size , 12px );\n  text-align: var( --type-text-bold-04-text-align-horizontal , LEFT );\n  color: var( --type-text-bold-04-color , rgba(0,0,0,1) );\n  font-family: var( --type-text-bold-04-font-family , 'Proxima Nova' );\n  font-weight: var( --type-text-bold-04-font-weight , 700 );\n  line-height: var( --type-text-bold-04-line-height , 14.06px );\n  letter-spacing: var( --type-text-bold-04-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-text-bold { \n    position: relative;\n    font-size: var( --type-text-bold-04-font-size , 12px );\n    text-align: var( --type-text-bold-04-text-align-horizontal , LEFT );\n    color: var( --type-text-bold-04-color , rgba(0,0,0,1) );\n    font-family: var( --type-text-bold-04-font-family , 'Proxima Nova' );\n    font-weight: var( --type-text-bold-04-font-weight , 700 );\n    line-height: var( --type-text-bold-04-line-height , 14.06px );\n    letter-spacing: var( --type-text-bold-04-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-text-bold-04--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-bold { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "width": {
      "output": "\n@mixin type-text-bold-04--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-bold { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "height": {
      "output": "\n@mixin type-text-bold-04--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-bold { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-text-bold-04--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-text-bold { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-text-bold-04--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-text-bold-04-left , NOT-FOUND );\n  margin-right: var( --type-text-bold-04-right , NOT-FOUND );\n  margin-top: var( --type-text-bold-04-top , NOT-FOUND );\n  margin-bottom: var( --type-text-bold-04-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-bold-04-left , NOT-FOUND ) + var( --type-text-bold-04-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-text-bold { \n    display: inline-block;\n  margin-left: var( --type-text-bold-04-left , NOT-FOUND );\n  margin-right: var( --type-text-bold-04-right , NOT-FOUND );\n  margin-top: var( --type-text-bold-04-top , NOT-FOUND );\n  margin-bottom: var( --type-text-bold-04-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-bold-04-left , NOT-FOUND ) + var( --type-text-bold-04-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-bold'>content</div>"
    }
  },
  "typography-text-bold-text-bold-small": {
    "": {
      "output": "\n@mixin type-text-bold-small { \n  position: relative;\n  font-size: var( --type-text-bold-small-font-size , 12px );\n  text-align: var( --type-text-bold-small-text-align-horizontal , LEFT );\n  color: var( --type-text-bold-small-color , rgba(0,0,0,1) );\n  font-family: var( --type-text-bold-small-font-family , 'Proxima Nova' );\n  font-weight: var( --type-text-bold-small-font-weight , 700 );\n  line-height: var( --type-text-bold-small-line-height , 14.06px );\n  letter-spacing: var( --type-text-bold-small-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-text-bold { \n    position: relative;\n    font-size: var( --type-text-bold-small-font-size , 12px );\n    text-align: var( --type-text-bold-small-text-align-horizontal , LEFT );\n    color: var( --type-text-bold-small-color , rgba(0,0,0,1) );\n    font-family: var( --type-text-bold-small-font-family , 'Proxima Nova' );\n    font-weight: var( --type-text-bold-small-font-weight , 700 );\n    line-height: var( --type-text-bold-small-line-height , 14.06px );\n    letter-spacing: var( --type-text-bold-small-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-text-bold-small--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-bold { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "width": {
      "output": "\n@mixin type-text-bold-small--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-bold { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "height": {
      "output": "\n@mixin type-text-bold-small--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-bold { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-text-bold-small--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-text-bold { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-text-bold-small--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-text-bold-small-left , NOT-FOUND );\n  margin-right: var( --type-text-bold-small-right , NOT-FOUND );\n  margin-top: var( --type-text-bold-small-top , NOT-FOUND );\n  margin-bottom: var( --type-text-bold-small-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-bold-small-left , NOT-FOUND ) + var( --type-text-bold-small-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-text-bold { \n    display: inline-block;\n  margin-left: var( --type-text-bold-small-left , NOT-FOUND );\n  margin-right: var( --type-text-bold-small-right , NOT-FOUND );\n  margin-top: var( --type-text-bold-small-top , NOT-FOUND );\n  margin-bottom: var( --type-text-bold-small-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-bold-small-left , NOT-FOUND ) + var( --type-text-bold-small-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-bold'>content</div>"
    }
  },
  "typography-text-bold-text-bold-03": {
    "": {
      "output": "\n@mixin type-text-bold-03 { \n  position: relative;\n  font-size: var( --type-text-bold-03-font-size , 11px );\n  text-align: var( --type-text-bold-03-text-align-horizontal , LEFT );\n  color: var( --type-text-bold-03-color , rgba(0,0,0,1) );\n  font-family: var( --type-text-bold-03-font-family , 'Proxima Nova' );\n  font-weight: var( --type-text-bold-03-font-weight , 700 );\n  line-height: var( --type-text-bold-03-line-height , 12.89px );\n  letter-spacing: var( --type-text-bold-03-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-text-bold { \n    position: relative;\n    font-size: var( --type-text-bold-03-font-size , 11px );\n    text-align: var( --type-text-bold-03-text-align-horizontal , LEFT );\n    color: var( --type-text-bold-03-color , rgba(0,0,0,1) );\n    font-family: var( --type-text-bold-03-font-family , 'Proxima Nova' );\n    font-weight: var( --type-text-bold-03-font-weight , 700 );\n    line-height: var( --type-text-bold-03-line-height , 12.89px );\n    letter-spacing: var( --type-text-bold-03-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-text-bold-03--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-bold { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "width": {
      "output": "\n@mixin type-text-bold-03--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-bold { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "height": {
      "output": "\n@mixin type-text-bold-03--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-bold { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-text-bold-03--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-text-bold { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-text-bold-03--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-text-bold-03-left , NOT-FOUND );\n  margin-right: var( --type-text-bold-03-right , NOT-FOUND );\n  margin-top: var( --type-text-bold-03-top , NOT-FOUND );\n  margin-bottom: var( --type-text-bold-03-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-bold-03-left , NOT-FOUND ) + var( --type-text-bold-03-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-text-bold { \n    display: inline-block;\n  margin-left: var( --type-text-bold-03-left , NOT-FOUND );\n  margin-right: var( --type-text-bold-03-right , NOT-FOUND );\n  margin-top: var( --type-text-bold-03-top , NOT-FOUND );\n  margin-bottom: var( --type-text-bold-03-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-bold-03-left , NOT-FOUND ) + var( --type-text-bold-03-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-bold'>content</div>"
    }
  },
  "typography-text-bold-text-bold-smaller": {
    "": {
      "output": "\n@mixin type-text-bold-smaller { \n  position: relative;\n  font-size: var( --type-text-bold-smaller-font-size , 11px );\n  text-align: var( --type-text-bold-smaller-text-align-horizontal , LEFT );\n  color: var( --type-text-bold-smaller-color , rgba(0,0,0,1) );\n  font-family: var( --type-text-bold-smaller-font-family , 'Proxima Nova' );\n  font-weight: var( --type-text-bold-smaller-font-weight , 700 );\n  line-height: var( --type-text-bold-smaller-line-height , 12.89px );\n  letter-spacing: var( --type-text-bold-smaller-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-text-bold { \n    position: relative;\n    font-size: var( --type-text-bold-smaller-font-size , 11px );\n    text-align: var( --type-text-bold-smaller-text-align-horizontal , LEFT );\n    color: var( --type-text-bold-smaller-color , rgba(0,0,0,1) );\n    font-family: var( --type-text-bold-smaller-font-family , 'Proxima Nova' );\n    font-weight: var( --type-text-bold-smaller-font-weight , 700 );\n    line-height: var( --type-text-bold-smaller-line-height , 12.89px );\n    letter-spacing: var( --type-text-bold-smaller-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-text-bold-smaller--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-bold { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "width": {
      "output": "\n@mixin type-text-bold-smaller--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-bold { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "height": {
      "output": "\n@mixin type-text-bold-smaller--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-bold { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-text-bold-smaller--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-text-bold { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-text-bold-smaller--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-text-bold-smaller-left , NOT-FOUND );\n  margin-right: var( --type-text-bold-smaller-right , NOT-FOUND );\n  margin-top: var( --type-text-bold-smaller-top , NOT-FOUND );\n  margin-bottom: var( --type-text-bold-smaller-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-bold-smaller-left , NOT-FOUND ) + var( --type-text-bold-smaller-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-text-bold { \n    display: inline-block;\n  margin-left: var( --type-text-bold-smaller-left , NOT-FOUND );\n  margin-right: var( --type-text-bold-smaller-right , NOT-FOUND );\n  margin-top: var( --type-text-bold-smaller-top , NOT-FOUND );\n  margin-bottom: var( --type-text-bold-smaller-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-bold-smaller-left , NOT-FOUND ) + var( --type-text-bold-smaller-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-bold'>content</div>"
    }
  },
  "typography-text-bold-text-bold-02": {
    "": {
      "output": "\n@mixin type-text-bold-02 { \n  position: relative;\n  font-size: var( --type-text-bold-02-font-size , 9px );\n  text-align: var( --type-text-bold-02-text-align-horizontal , LEFT );\n  color: var( --type-text-bold-02-color , rgba(0,0,0,1) );\n  font-family: var( --type-text-bold-02-font-family , 'Proxima Nova' );\n  font-weight: var( --type-text-bold-02-font-weight , 700 );\n  line-height: var( --type-text-bold-02-line-height , 10.55px );\n  letter-spacing: var( --type-text-bold-02-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-text-bold { \n    position: relative;\n    font-size: var( --type-text-bold-02-font-size , 9px );\n    text-align: var( --type-text-bold-02-text-align-horizontal , LEFT );\n    color: var( --type-text-bold-02-color , rgba(0,0,0,1) );\n    font-family: var( --type-text-bold-02-font-family , 'Proxima Nova' );\n    font-weight: var( --type-text-bold-02-font-weight , 700 );\n    line-height: var( --type-text-bold-02-line-height , 10.55px );\n    letter-spacing: var( --type-text-bold-02-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-text-bold-02--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-bold { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "width": {
      "output": "\n@mixin type-text-bold-02--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-bold { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "height": {
      "output": "\n@mixin type-text-bold-02--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-bold { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-text-bold-02--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-text-bold { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-text-bold-02--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-text-bold-02-left , NOT-FOUND );\n  margin-right: var( --type-text-bold-02-right , NOT-FOUND );\n  margin-top: var( --type-text-bold-02-top , NOT-FOUND );\n  margin-bottom: var( --type-text-bold-02-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-bold-02-left , NOT-FOUND ) + var( --type-text-bold-02-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-text-bold { \n    display: inline-block;\n  margin-left: var( --type-text-bold-02-left , NOT-FOUND );\n  margin-right: var( --type-text-bold-02-right , NOT-FOUND );\n  margin-top: var( --type-text-bold-02-top , NOT-FOUND );\n  margin-bottom: var( --type-text-bold-02-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-bold-02-left , NOT-FOUND ) + var( --type-text-bold-02-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-bold'>content</div>"
    }
  },
  "typography-text-bold-text-bold-smallest": {
    "": {
      "output": "\n@mixin type-text-bold-smallest { \n  position: relative;\n  font-size: var( --type-text-bold-smallest-font-size , 9px );\n  text-align: var( --type-text-bold-smallest-text-align-horizontal , LEFT );\n  color: var( --type-text-bold-smallest-color , rgba(0,0,0,1) );\n  font-family: var( --type-text-bold-smallest-font-family , 'Proxima Nova' );\n  font-weight: var( --type-text-bold-smallest-font-weight , 700 );\n  line-height: var( --type-text-bold-smallest-line-height , 10.55px );\n  letter-spacing: var( --type-text-bold-smallest-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-text-bold { \n    position: relative;\n    font-size: var( --type-text-bold-smallest-font-size , 9px );\n    text-align: var( --type-text-bold-smallest-text-align-horizontal , LEFT );\n    color: var( --type-text-bold-smallest-color , rgba(0,0,0,1) );\n    font-family: var( --type-text-bold-smallest-font-family , 'Proxima Nova' );\n    font-weight: var( --type-text-bold-smallest-font-weight , 700 );\n    line-height: var( --type-text-bold-smallest-line-height , 10.55px );\n    letter-spacing: var( --type-text-bold-smallest-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-text-bold-smallest--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-bold { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "width": {
      "output": "\n@mixin type-text-bold-smallest--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-bold { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "height": {
      "output": "\n@mixin type-text-bold-smallest--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-bold { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-text-bold-smallest--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-text-bold { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-text-bold-smallest--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-text-bold-smallest-left , NOT-FOUND );\n  margin-right: var( --type-text-bold-smallest-right , NOT-FOUND );\n  margin-top: var( --type-text-bold-smallest-top , NOT-FOUND );\n  margin-bottom: var( --type-text-bold-smallest-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-bold-smallest-left , NOT-FOUND ) + var( --type-text-bold-smallest-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-text-bold { \n    display: inline-block;\n  margin-left: var( --type-text-bold-smallest-left , NOT-FOUND );\n  margin-right: var( --type-text-bold-smallest-right , NOT-FOUND );\n  margin-top: var( --type-text-bold-smallest-top , NOT-FOUND );\n  margin-bottom: var( --type-text-bold-smallest-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-bold-smallest-left , NOT-FOUND ) + var( --type-text-bold-smallest-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-bold'>content</div>"
    }
  },
  "typography-text-bold-text-bold-01": {
    "": {
      "output": "\n@mixin type-text-bold-01 { \n  position: relative;\n  font-size: var( --type-text-bold-01-font-size , 8px );\n  text-align: var( --type-text-bold-01-text-align-horizontal , LEFT );\n  color: var( --type-text-bold-01-color , rgba(0,0,0,1) );\n  font-family: var( --type-text-bold-01-font-family , 'Proxima Nova' );\n  font-weight: var( --type-text-bold-01-font-weight , 700 );\n  line-height: var( --type-text-bold-01-line-height , 9.38px );\n  letter-spacing: var( --type-text-bold-01-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-text-bold { \n    position: relative;\n    font-size: var( --type-text-bold-01-font-size , 8px );\n    text-align: var( --type-text-bold-01-text-align-horizontal , LEFT );\n    color: var( --type-text-bold-01-color , rgba(0,0,0,1) );\n    font-family: var( --type-text-bold-01-font-family , 'Proxima Nova' );\n    font-weight: var( --type-text-bold-01-font-weight , 700 );\n    line-height: var( --type-text-bold-01-line-height , 9.38px );\n    letter-spacing: var( --type-text-bold-01-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-text-bold-01--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-bold { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "width": {
      "output": "\n@mixin type-text-bold-01--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-bold { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "height": {
      "output": "\n@mixin type-text-bold-01--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-bold { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-text-bold-01--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-text-bold { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-text-bold'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-text-bold-01--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-text-bold-01-left , NOT-FOUND );\n  margin-right: var( --type-text-bold-01-right , NOT-FOUND );\n  margin-top: var( --type-text-bold-01-top , NOT-FOUND );\n  margin-bottom: var( --type-text-bold-01-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-bold-01-left , NOT-FOUND ) + var( --type-text-bold-01-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-text-bold { \n    display: inline-block;\n  margin-left: var( --type-text-bold-01-left , NOT-FOUND );\n  margin-right: var( --type-text-bold-01-right , NOT-FOUND );\n  margin-top: var( --type-text-bold-01-top , NOT-FOUND );\n  margin-bottom: var( --type-text-bold-01-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-bold-01-left , NOT-FOUND ) + var( --type-text-bold-01-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-bold'>content</div>"
    }
  },
  "typography-text-uppercase-text-uppercase-10": {
    "": {
      "output": "\n@mixin type-text-uppercase-10 { \n  position: relative;\n  font-size: var( --type-text-uppercase-10-font-size , 30px );\n  text-align: var( --type-text-uppercase-10-text-align-horizontal , LEFT );\n  color: var( --type-text-uppercase-10-color , rgba(0,0,0,1) );\n  font-family: var( --type-text-uppercase-10-font-family , 'Proxima Nova' );\n  font-weight: var( --type-text-uppercase-10-font-weight , 500 );\n  line-height: var( --type-text-uppercase-10-line-height , 35.16px );\n  letter-spacing: var( --type-text-uppercase-10-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    position: relative;\n    font-size: var( --type-text-uppercase-10-font-size , 30px );\n    text-align: var( --type-text-uppercase-10-text-align-horizontal , LEFT );\n    color: var( --type-text-uppercase-10-color , rgba(0,0,0,1) );\n    font-family: var( --type-text-uppercase-10-font-family , 'Proxima Nova' );\n    font-weight: var( --type-text-uppercase-10-font-weight , 500 );\n    line-height: var( --type-text-uppercase-10-line-height , 35.16px );\n    letter-spacing: var( --type-text-uppercase-10-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-text-uppercase-10--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "width": {
      "output": "\n@mixin type-text-uppercase-10--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "height": {
      "output": "\n@mixin type-text-uppercase-10--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-text-uppercase-10--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-text-uppercase { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-text-uppercase-10--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-text-uppercase-10-left , NOT-FOUND );\n  margin-right: var( --type-text-uppercase-10-right , NOT-FOUND );\n  margin-top: var( --type-text-uppercase-10-top , NOT-FOUND );\n  margin-bottom: var( --type-text-uppercase-10-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-uppercase-10-left , NOT-FOUND ) + var( --type-text-uppercase-10-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    display: inline-block;\n  margin-left: var( --type-text-uppercase-10-left , NOT-FOUND );\n  margin-right: var( --type-text-uppercase-10-right , NOT-FOUND );\n  margin-top: var( --type-text-uppercase-10-top , NOT-FOUND );\n  margin-bottom: var( --type-text-uppercase-10-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-uppercase-10-left , NOT-FOUND ) + var( --type-text-uppercase-10-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-uppercase'>content</div>"
    }
  },
  "typography-text-uppercase-text-uppercase-09": {
    "": {
      "output": "\n@mixin type-text-uppercase-09 { \n  position: relative;\n  font-size: var( --type-text-uppercase-09-font-size , 24px );\n  text-align: var( --type-text-uppercase-09-text-align-horizontal , LEFT );\n  color: var( --type-text-uppercase-09-color , rgba(0,0,0,1) );\n  font-family: var( --type-text-uppercase-09-font-family , 'Proxima Nova' );\n  font-weight: var( --type-text-uppercase-09-font-weight , 500 );\n  line-height: var( --type-text-uppercase-09-line-height , 28.13px );\n  letter-spacing: var( --type-text-uppercase-09-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    position: relative;\n    font-size: var( --type-text-uppercase-09-font-size , 24px );\n    text-align: var( --type-text-uppercase-09-text-align-horizontal , LEFT );\n    color: var( --type-text-uppercase-09-color , rgba(0,0,0,1) );\n    font-family: var( --type-text-uppercase-09-font-family , 'Proxima Nova' );\n    font-weight: var( --type-text-uppercase-09-font-weight , 500 );\n    line-height: var( --type-text-uppercase-09-line-height , 28.13px );\n    letter-spacing: var( --type-text-uppercase-09-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-text-uppercase-09--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "width": {
      "output": "\n@mixin type-text-uppercase-09--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "height": {
      "output": "\n@mixin type-text-uppercase-09--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-text-uppercase-09--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-text-uppercase { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-text-uppercase-09--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-text-uppercase-09-left , NOT-FOUND );\n  margin-right: var( --type-text-uppercase-09-right , NOT-FOUND );\n  margin-top: var( --type-text-uppercase-09-top , NOT-FOUND );\n  margin-bottom: var( --type-text-uppercase-09-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-uppercase-09-left , NOT-FOUND ) + var( --type-text-uppercase-09-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    display: inline-block;\n  margin-left: var( --type-text-uppercase-09-left , NOT-FOUND );\n  margin-right: var( --type-text-uppercase-09-right , NOT-FOUND );\n  margin-top: var( --type-text-uppercase-09-top , NOT-FOUND );\n  margin-bottom: var( --type-text-uppercase-09-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-uppercase-09-left , NOT-FOUND ) + var( --type-text-uppercase-09-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-uppercase'>content</div>"
    }
  },
  "typography-text-uppercase-text-uppercase-08": {
    "": {
      "output": "\n@mixin type-text-uppercase-08 { \n  position: relative;\n  font-size: var( --type-text-uppercase-08-font-size , 21px );\n  text-align: var( --type-text-uppercase-08-text-align-horizontal , LEFT );\n  color: var( --type-text-uppercase-08-color , rgba(0,0,0,1) );\n  font-family: var( --type-text-uppercase-08-font-family , 'Proxima Nova' );\n  font-weight: var( --type-text-uppercase-08-font-weight , 500 );\n  line-height: var( --type-text-uppercase-08-line-height , 24.61px );\n  letter-spacing: var( --type-text-uppercase-08-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    position: relative;\n    font-size: var( --type-text-uppercase-08-font-size , 21px );\n    text-align: var( --type-text-uppercase-08-text-align-horizontal , LEFT );\n    color: var( --type-text-uppercase-08-color , rgba(0,0,0,1) );\n    font-family: var( --type-text-uppercase-08-font-family , 'Proxima Nova' );\n    font-weight: var( --type-text-uppercase-08-font-weight , 500 );\n    line-height: var( --type-text-uppercase-08-line-height , 24.61px );\n    letter-spacing: var( --type-text-uppercase-08-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-text-uppercase-08--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "width": {
      "output": "\n@mixin type-text-uppercase-08--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "height": {
      "output": "\n@mixin type-text-uppercase-08--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-text-uppercase-08--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-text-uppercase { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-text-uppercase-08--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-text-uppercase-08-left , NOT-FOUND );\n  margin-right: var( --type-text-uppercase-08-right , NOT-FOUND );\n  margin-top: var( --type-text-uppercase-08-top , NOT-FOUND );\n  margin-bottom: var( --type-text-uppercase-08-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-uppercase-08-left , NOT-FOUND ) + var( --type-text-uppercase-08-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    display: inline-block;\n  margin-left: var( --type-text-uppercase-08-left , NOT-FOUND );\n  margin-right: var( --type-text-uppercase-08-right , NOT-FOUND );\n  margin-top: var( --type-text-uppercase-08-top , NOT-FOUND );\n  margin-bottom: var( --type-text-uppercase-08-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-uppercase-08-left , NOT-FOUND ) + var( --type-text-uppercase-08-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-uppercase'>content</div>"
    }
  },
  "typography-text-uppercase-text-uppercase-largest": {
    "": {
      "output": "\n@mixin type-text-uppercase-largest { \n  position: relative;\n  font-size: var( --type-text-uppercase-largest-font-size , 21px );\n  text-align: var( --type-text-uppercase-largest-text-align-horizontal , LEFT );\n  color: var( --type-text-uppercase-largest-color , rgba(0,0,0,1) );\n  font-family: var( --type-text-uppercase-largest-font-family , 'Proxima Nova' );\n  font-weight: var( --type-text-uppercase-largest-font-weight , 500 );\n  line-height: var( --type-text-uppercase-largest-line-height , 24.61px );\n  letter-spacing: var( --type-text-uppercase-largest-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    position: relative;\n    font-size: var( --type-text-uppercase-largest-font-size , 21px );\n    text-align: var( --type-text-uppercase-largest-text-align-horizontal , LEFT );\n    color: var( --type-text-uppercase-largest-color , rgba(0,0,0,1) );\n    font-family: var( --type-text-uppercase-largest-font-family , 'Proxima Nova' );\n    font-weight: var( --type-text-uppercase-largest-font-weight , 500 );\n    line-height: var( --type-text-uppercase-largest-line-height , 24.61px );\n    letter-spacing: var( --type-text-uppercase-largest-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-text-uppercase-largest--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "width": {
      "output": "\n@mixin type-text-uppercase-largest--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "height": {
      "output": "\n@mixin type-text-uppercase-largest--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-text-uppercase-largest--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-text-uppercase { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-text-uppercase-largest--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-text-uppercase-largest-left , NOT-FOUND );\n  margin-right: var( --type-text-uppercase-largest-right , NOT-FOUND );\n  margin-top: var( --type-text-uppercase-largest-top , NOT-FOUND );\n  margin-bottom: var( --type-text-uppercase-largest-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-uppercase-largest-left , NOT-FOUND ) + var( --type-text-uppercase-largest-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    display: inline-block;\n  margin-left: var( --type-text-uppercase-largest-left , NOT-FOUND );\n  margin-right: var( --type-text-uppercase-largest-right , NOT-FOUND );\n  margin-top: var( --type-text-uppercase-largest-top , NOT-FOUND );\n  margin-bottom: var( --type-text-uppercase-largest-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-uppercase-largest-left , NOT-FOUND ) + var( --type-text-uppercase-largest-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-uppercase'>content</div>"
    }
  },
  "typography-text-uppercase-text-uppercase-07": {
    "": {
      "output": "\n@mixin type-text-uppercase-07 { \n  position: relative;\n  font-size: var( --type-text-uppercase-07-font-size , 18px );\n  text-align: var( --type-text-uppercase-07-text-align-horizontal , LEFT );\n  color: var( --type-text-uppercase-07-color , rgba(0,0,0,1) );\n  font-family: var( --type-text-uppercase-07-font-family , 'Proxima Nova' );\n  font-weight: var( --type-text-uppercase-07-font-weight , 500 );\n  line-height: var( --type-text-uppercase-07-line-height , 21.09px );\n  letter-spacing: var( --type-text-uppercase-07-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    position: relative;\n    font-size: var( --type-text-uppercase-07-font-size , 18px );\n    text-align: var( --type-text-uppercase-07-text-align-horizontal , LEFT );\n    color: var( --type-text-uppercase-07-color , rgba(0,0,0,1) );\n    font-family: var( --type-text-uppercase-07-font-family , 'Proxima Nova' );\n    font-weight: var( --type-text-uppercase-07-font-weight , 500 );\n    line-height: var( --type-text-uppercase-07-line-height , 21.09px );\n    letter-spacing: var( --type-text-uppercase-07-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-text-uppercase-07--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "width": {
      "output": "\n@mixin type-text-uppercase-07--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "height": {
      "output": "\n@mixin type-text-uppercase-07--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-text-uppercase-07--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-text-uppercase { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-text-uppercase-07--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-text-uppercase-07-left , NOT-FOUND );\n  margin-right: var( --type-text-uppercase-07-right , NOT-FOUND );\n  margin-top: var( --type-text-uppercase-07-top , NOT-FOUND );\n  margin-bottom: var( --type-text-uppercase-07-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-uppercase-07-left , NOT-FOUND ) + var( --type-text-uppercase-07-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    display: inline-block;\n  margin-left: var( --type-text-uppercase-07-left , NOT-FOUND );\n  margin-right: var( --type-text-uppercase-07-right , NOT-FOUND );\n  margin-top: var( --type-text-uppercase-07-top , NOT-FOUND );\n  margin-bottom: var( --type-text-uppercase-07-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-uppercase-07-left , NOT-FOUND ) + var( --type-text-uppercase-07-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-uppercase'>content</div>"
    }
  },
  "typography-text-uppercase-text-uppercase-larger": {
    "": {
      "output": "\n@mixin type-text-uppercase-larger { \n  position: relative;\n  font-size: var( --type-text-uppercase-larger-font-size , 18px );\n  text-align: var( --type-text-uppercase-larger-text-align-horizontal , LEFT );\n  color: var( --type-text-uppercase-larger-color , rgba(0,0,0,1) );\n  font-family: var( --type-text-uppercase-larger-font-family , 'Proxima Nova' );\n  font-weight: var( --type-text-uppercase-larger-font-weight , 500 );\n  line-height: var( --type-text-uppercase-larger-line-height , 21.09px );\n  letter-spacing: var( --type-text-uppercase-larger-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    position: relative;\n    font-size: var( --type-text-uppercase-larger-font-size , 18px );\n    text-align: var( --type-text-uppercase-larger-text-align-horizontal , LEFT );\n    color: var( --type-text-uppercase-larger-color , rgba(0,0,0,1) );\n    font-family: var( --type-text-uppercase-larger-font-family , 'Proxima Nova' );\n    font-weight: var( --type-text-uppercase-larger-font-weight , 500 );\n    line-height: var( --type-text-uppercase-larger-line-height , 21.09px );\n    letter-spacing: var( --type-text-uppercase-larger-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-text-uppercase-larger--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "width": {
      "output": "\n@mixin type-text-uppercase-larger--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "height": {
      "output": "\n@mixin type-text-uppercase-larger--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-text-uppercase-larger--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-text-uppercase { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-text-uppercase-larger--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-text-uppercase-larger-left , NOT-FOUND );\n  margin-right: var( --type-text-uppercase-larger-right , NOT-FOUND );\n  margin-top: var( --type-text-uppercase-larger-top , NOT-FOUND );\n  margin-bottom: var( --type-text-uppercase-larger-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-uppercase-larger-left , NOT-FOUND ) + var( --type-text-uppercase-larger-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    display: inline-block;\n  margin-left: var( --type-text-uppercase-larger-left , NOT-FOUND );\n  margin-right: var( --type-text-uppercase-larger-right , NOT-FOUND );\n  margin-top: var( --type-text-uppercase-larger-top , NOT-FOUND );\n  margin-bottom: var( --type-text-uppercase-larger-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-uppercase-larger-left , NOT-FOUND ) + var( --type-text-uppercase-larger-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-uppercase'>content</div>"
    }
  },
  "typography-text-uppercase-text-uppercase-06": {
    "": {
      "output": "\n@mixin type-text-uppercase-06 { \n  position: relative;\n  font-size: var( --type-text-uppercase-06-font-size , 16px );\n  text-align: var( --type-text-uppercase-06-text-align-horizontal , LEFT );\n  color: var( --type-text-uppercase-06-color , rgba(0,0,0,1) );\n  font-family: var( --type-text-uppercase-06-font-family , 'Proxima Nova' );\n  font-weight: var( --type-text-uppercase-06-font-weight , 500 );\n  line-height: var( --type-text-uppercase-06-line-height , 18.75px );\n  letter-spacing: var( --type-text-uppercase-06-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    position: relative;\n    font-size: var( --type-text-uppercase-06-font-size , 16px );\n    text-align: var( --type-text-uppercase-06-text-align-horizontal , LEFT );\n    color: var( --type-text-uppercase-06-color , rgba(0,0,0,1) );\n    font-family: var( --type-text-uppercase-06-font-family , 'Proxima Nova' );\n    font-weight: var( --type-text-uppercase-06-font-weight , 500 );\n    line-height: var( --type-text-uppercase-06-line-height , 18.75px );\n    letter-spacing: var( --type-text-uppercase-06-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-text-uppercase-06--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "width": {
      "output": "\n@mixin type-text-uppercase-06--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "height": {
      "output": "\n@mixin type-text-uppercase-06--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-text-uppercase-06--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-text-uppercase { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-text-uppercase-06--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-text-uppercase-06-left , NOT-FOUND );\n  margin-right: var( --type-text-uppercase-06-right , NOT-FOUND );\n  margin-top: var( --type-text-uppercase-06-top , NOT-FOUND );\n  margin-bottom: var( --type-text-uppercase-06-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-uppercase-06-left , NOT-FOUND ) + var( --type-text-uppercase-06-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    display: inline-block;\n  margin-left: var( --type-text-uppercase-06-left , NOT-FOUND );\n  margin-right: var( --type-text-uppercase-06-right , NOT-FOUND );\n  margin-top: var( --type-text-uppercase-06-top , NOT-FOUND );\n  margin-bottom: var( --type-text-uppercase-06-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-uppercase-06-left , NOT-FOUND ) + var( --type-text-uppercase-06-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-uppercase'>content</div>"
    }
  },
  "typography-text-uppercase-text-uppercase-large": {
    "": {
      "output": "\n@mixin type-text-uppercase-large { \n  position: relative;\n  font-size: var( --type-text-uppercase-large-font-size , 16px );\n  text-align: var( --type-text-uppercase-large-text-align-horizontal , LEFT );\n  color: var( --type-text-uppercase-large-color , rgba(0,0,0,1) );\n  font-family: var( --type-text-uppercase-large-font-family , 'Proxima Nova' );\n  font-weight: var( --type-text-uppercase-large-font-weight , 500 );\n  line-height: var( --type-text-uppercase-large-line-height , 18.75px );\n  letter-spacing: var( --type-text-uppercase-large-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    position: relative;\n    font-size: var( --type-text-uppercase-large-font-size , 16px );\n    text-align: var( --type-text-uppercase-large-text-align-horizontal , LEFT );\n    color: var( --type-text-uppercase-large-color , rgba(0,0,0,1) );\n    font-family: var( --type-text-uppercase-large-font-family , 'Proxima Nova' );\n    font-weight: var( --type-text-uppercase-large-font-weight , 500 );\n    line-height: var( --type-text-uppercase-large-line-height , 18.75px );\n    letter-spacing: var( --type-text-uppercase-large-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-text-uppercase-large--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "width": {
      "output": "\n@mixin type-text-uppercase-large--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "height": {
      "output": "\n@mixin type-text-uppercase-large--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-text-uppercase-large--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-text-uppercase { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-text-uppercase-large--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-text-uppercase-large-left , NOT-FOUND );\n  margin-right: var( --type-text-uppercase-large-right , NOT-FOUND );\n  margin-top: var( --type-text-uppercase-large-top , NOT-FOUND );\n  margin-bottom: var( --type-text-uppercase-large-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-uppercase-large-left , NOT-FOUND ) + var( --type-text-uppercase-large-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    display: inline-block;\n  margin-left: var( --type-text-uppercase-large-left , NOT-FOUND );\n  margin-right: var( --type-text-uppercase-large-right , NOT-FOUND );\n  margin-top: var( --type-text-uppercase-large-top , NOT-FOUND );\n  margin-bottom: var( --type-text-uppercase-large-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-uppercase-large-left , NOT-FOUND ) + var( --type-text-uppercase-large-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-uppercase'>content</div>"
    }
  },
  "typography-text-uppercase-text-uppercase-05": {
    "": {
      "output": "\n@mixin type-text-uppercase-05 { \n  position: relative;\n  font-size: var( --type-text-uppercase-05-font-size , 15px );\n  text-align: var( --type-text-uppercase-05-text-align-horizontal , LEFT );\n  color: var( --type-text-uppercase-05-color , rgba(0,0,0,1) );\n  font-family: var( --type-text-uppercase-05-font-family , 'Proxima Nova' );\n  font-weight: var( --type-text-uppercase-05-font-weight , 500 );\n  line-height: var( --type-text-uppercase-05-line-height , 17.58px );\n  letter-spacing: var( --type-text-uppercase-05-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    position: relative;\n    font-size: var( --type-text-uppercase-05-font-size , 15px );\n    text-align: var( --type-text-uppercase-05-text-align-horizontal , LEFT );\n    color: var( --type-text-uppercase-05-color , rgba(0,0,0,1) );\n    font-family: var( --type-text-uppercase-05-font-family , 'Proxima Nova' );\n    font-weight: var( --type-text-uppercase-05-font-weight , 500 );\n    line-height: var( --type-text-uppercase-05-line-height , 17.58px );\n    letter-spacing: var( --type-text-uppercase-05-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-text-uppercase-05--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "width": {
      "output": "\n@mixin type-text-uppercase-05--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "height": {
      "output": "\n@mixin type-text-uppercase-05--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-text-uppercase-05--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-text-uppercase { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-text-uppercase-05--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-text-uppercase-05-left , NOT-FOUND );\n  margin-right: var( --type-text-uppercase-05-right , NOT-FOUND );\n  margin-top: var( --type-text-uppercase-05-top , NOT-FOUND );\n  margin-bottom: var( --type-text-uppercase-05-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-uppercase-05-left , NOT-FOUND ) + var( --type-text-uppercase-05-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    display: inline-block;\n  margin-left: var( --type-text-uppercase-05-left , NOT-FOUND );\n  margin-right: var( --type-text-uppercase-05-right , NOT-FOUND );\n  margin-top: var( --type-text-uppercase-05-top , NOT-FOUND );\n  margin-bottom: var( --type-text-uppercase-05-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-uppercase-05-left , NOT-FOUND ) + var( --type-text-uppercase-05-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-uppercase'>content</div>"
    }
  },
  "typography-text-uppercase-text-uppercase-": {
    "": {
      "output": "\n@mixin type-text-uppercase { \n  position: relative;\n  font-size: var( --type-text-uppercase-font-size , 15px );\n  text-align: var( --type-text-uppercase-text-align-horizontal , LEFT );\n  color: var( --type-text-uppercase-color , rgba(0,0,0,1) );\n  font-family: var( --type-text-uppercase-font-family , 'Proxima Nova' );\n  font-weight: var( --type-text-uppercase-font-weight , 500 );\n  line-height: var( --type-text-uppercase-line-height , 17.58px );\n  letter-spacing: var( --type-text-uppercase-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    position: relative;\n    font-size: var( --type-text-uppercase-font-size , 15px );\n    text-align: var( --type-text-uppercase-text-align-horizontal , LEFT );\n    color: var( --type-text-uppercase-color , rgba(0,0,0,1) );\n    font-family: var( --type-text-uppercase-font-family , 'Proxima Nova' );\n    font-weight: var( --type-text-uppercase-font-weight , 500 );\n    line-height: var( --type-text-uppercase-line-height , 17.58px );\n    letter-spacing: var( --type-text-uppercase-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-text-uppercase--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "width": {
      "output": "\n@mixin type-text-uppercase--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "height": {
      "output": "\n@mixin type-text-uppercase--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-text-uppercase--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-text-uppercase { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-text-uppercase--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-text-uppercase-left , NOT-FOUND );\n  margin-right: var( --type-text-uppercase-right , NOT-FOUND );\n  margin-top: var( --type-text-uppercase-top , NOT-FOUND );\n  margin-bottom: var( --type-text-uppercase-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-uppercase-left , NOT-FOUND ) + var( --type-text-uppercase-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    display: inline-block;\n  margin-left: var( --type-text-uppercase-left , NOT-FOUND );\n  margin-right: var( --type-text-uppercase-right , NOT-FOUND );\n  margin-top: var( --type-text-uppercase-top , NOT-FOUND );\n  margin-bottom: var( --type-text-uppercase-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-uppercase-left , NOT-FOUND ) + var( --type-text-uppercase-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-uppercase'>content</div>"
    }
  },
  "typography-text-uppercase-text-uppercase-04": {
    "": {
      "output": "\n@mixin type-text-uppercase-04 { \n  position: relative;\n  font-size: var( --type-text-uppercase-04-font-size , 12px );\n  text-align: var( --type-text-uppercase-04-text-align-horizontal , LEFT );\n  color: var( --type-text-uppercase-04-color , rgba(0,0,0,1) );\n  font-family: var( --type-text-uppercase-04-font-family , 'Proxima Nova' );\n  font-weight: var( --type-text-uppercase-04-font-weight , 500 );\n  line-height: var( --type-text-uppercase-04-line-height , 14.06px );\n  letter-spacing: var( --type-text-uppercase-04-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    position: relative;\n    font-size: var( --type-text-uppercase-04-font-size , 12px );\n    text-align: var( --type-text-uppercase-04-text-align-horizontal , LEFT );\n    color: var( --type-text-uppercase-04-color , rgba(0,0,0,1) );\n    font-family: var( --type-text-uppercase-04-font-family , 'Proxima Nova' );\n    font-weight: var( --type-text-uppercase-04-font-weight , 500 );\n    line-height: var( --type-text-uppercase-04-line-height , 14.06px );\n    letter-spacing: var( --type-text-uppercase-04-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-text-uppercase-04--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "width": {
      "output": "\n@mixin type-text-uppercase-04--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "height": {
      "output": "\n@mixin type-text-uppercase-04--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-text-uppercase-04--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-text-uppercase { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-text-uppercase-04--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-text-uppercase-04-left , NOT-FOUND );\n  margin-right: var( --type-text-uppercase-04-right , NOT-FOUND );\n  margin-top: var( --type-text-uppercase-04-top , NOT-FOUND );\n  margin-bottom: var( --type-text-uppercase-04-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-uppercase-04-left , NOT-FOUND ) + var( --type-text-uppercase-04-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    display: inline-block;\n  margin-left: var( --type-text-uppercase-04-left , NOT-FOUND );\n  margin-right: var( --type-text-uppercase-04-right , NOT-FOUND );\n  margin-top: var( --type-text-uppercase-04-top , NOT-FOUND );\n  margin-bottom: var( --type-text-uppercase-04-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-uppercase-04-left , NOT-FOUND ) + var( --type-text-uppercase-04-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-uppercase'>content</div>"
    }
  },
  "typography-text-uppercase-text-uppercase-small": {
    "": {
      "output": "\n@mixin type-text-uppercase-small { \n  position: relative;\n  font-size: var( --type-text-uppercase-small-font-size , 12px );\n  text-align: var( --type-text-uppercase-small-text-align-horizontal , LEFT );\n  color: var( --type-text-uppercase-small-color , rgba(0,0,0,1) );\n  font-family: var( --type-text-uppercase-small-font-family , 'Proxima Nova' );\n  font-weight: var( --type-text-uppercase-small-font-weight , 500 );\n  line-height: var( --type-text-uppercase-small-line-height , 14.06px );\n  letter-spacing: var( --type-text-uppercase-small-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    position: relative;\n    font-size: var( --type-text-uppercase-small-font-size , 12px );\n    text-align: var( --type-text-uppercase-small-text-align-horizontal , LEFT );\n    color: var( --type-text-uppercase-small-color , rgba(0,0,0,1) );\n    font-family: var( --type-text-uppercase-small-font-family , 'Proxima Nova' );\n    font-weight: var( --type-text-uppercase-small-font-weight , 500 );\n    line-height: var( --type-text-uppercase-small-line-height , 14.06px );\n    letter-spacing: var( --type-text-uppercase-small-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-text-uppercase-small--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "width": {
      "output": "\n@mixin type-text-uppercase-small--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "height": {
      "output": "\n@mixin type-text-uppercase-small--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-text-uppercase-small--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-text-uppercase { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-text-uppercase-small--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-text-uppercase-small-left , NOT-FOUND );\n  margin-right: var( --type-text-uppercase-small-right , NOT-FOUND );\n  margin-top: var( --type-text-uppercase-small-top , NOT-FOUND );\n  margin-bottom: var( --type-text-uppercase-small-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-uppercase-small-left , NOT-FOUND ) + var( --type-text-uppercase-small-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    display: inline-block;\n  margin-left: var( --type-text-uppercase-small-left , NOT-FOUND );\n  margin-right: var( --type-text-uppercase-small-right , NOT-FOUND );\n  margin-top: var( --type-text-uppercase-small-top , NOT-FOUND );\n  margin-bottom: var( --type-text-uppercase-small-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-uppercase-small-left , NOT-FOUND ) + var( --type-text-uppercase-small-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-uppercase'>content</div>"
    }
  },
  "typography-text-uppercase-text-uppercase-03": {
    "": {
      "output": "\n@mixin type-text-uppercase-03 { \n  position: relative;\n  font-size: var( --type-text-uppercase-03-font-size , 11px );\n  text-align: var( --type-text-uppercase-03-text-align-horizontal , LEFT );\n  color: var( --type-text-uppercase-03-color , rgba(0,0,0,1) );\n  font-family: var( --type-text-uppercase-03-font-family , 'Proxima Nova' );\n  font-weight: var( --type-text-uppercase-03-font-weight , 500 );\n  line-height: var( --type-text-uppercase-03-line-height , 12.89px );\n  letter-spacing: var( --type-text-uppercase-03-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    position: relative;\n    font-size: var( --type-text-uppercase-03-font-size , 11px );\n    text-align: var( --type-text-uppercase-03-text-align-horizontal , LEFT );\n    color: var( --type-text-uppercase-03-color , rgba(0,0,0,1) );\n    font-family: var( --type-text-uppercase-03-font-family , 'Proxima Nova' );\n    font-weight: var( --type-text-uppercase-03-font-weight , 500 );\n    line-height: var( --type-text-uppercase-03-line-height , 12.89px );\n    letter-spacing: var( --type-text-uppercase-03-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-text-uppercase-03--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "width": {
      "output": "\n@mixin type-text-uppercase-03--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "height": {
      "output": "\n@mixin type-text-uppercase-03--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-text-uppercase-03--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-text-uppercase { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-text-uppercase-03--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-text-uppercase-03-left , NOT-FOUND );\n  margin-right: var( --type-text-uppercase-03-right , NOT-FOUND );\n  margin-top: var( --type-text-uppercase-03-top , NOT-FOUND );\n  margin-bottom: var( --type-text-uppercase-03-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-uppercase-03-left , NOT-FOUND ) + var( --type-text-uppercase-03-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    display: inline-block;\n  margin-left: var( --type-text-uppercase-03-left , NOT-FOUND );\n  margin-right: var( --type-text-uppercase-03-right , NOT-FOUND );\n  margin-top: var( --type-text-uppercase-03-top , NOT-FOUND );\n  margin-bottom: var( --type-text-uppercase-03-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-uppercase-03-left , NOT-FOUND ) + var( --type-text-uppercase-03-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-uppercase'>content</div>"
    }
  },
  "typography-text-uppercase-text-uppercase-smaller": {
    "": {
      "output": "\n@mixin type-text-uppercase-smaller { \n  position: relative;\n  font-size: var( --type-text-uppercase-smaller-font-size , 11px );\n  text-align: var( --type-text-uppercase-smaller-text-align-horizontal , LEFT );\n  color: var( --type-text-uppercase-smaller-color , rgba(0,0,0,1) );\n  font-family: var( --type-text-uppercase-smaller-font-family , 'Proxima Nova' );\n  font-weight: var( --type-text-uppercase-smaller-font-weight , 500 );\n  line-height: var( --type-text-uppercase-smaller-line-height , 12.89px );\n  letter-spacing: var( --type-text-uppercase-smaller-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    position: relative;\n    font-size: var( --type-text-uppercase-smaller-font-size , 11px );\n    text-align: var( --type-text-uppercase-smaller-text-align-horizontal , LEFT );\n    color: var( --type-text-uppercase-smaller-color , rgba(0,0,0,1) );\n    font-family: var( --type-text-uppercase-smaller-font-family , 'Proxima Nova' );\n    font-weight: var( --type-text-uppercase-smaller-font-weight , 500 );\n    line-height: var( --type-text-uppercase-smaller-line-height , 12.89px );\n    letter-spacing: var( --type-text-uppercase-smaller-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-text-uppercase-smaller--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "width": {
      "output": "\n@mixin type-text-uppercase-smaller--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "height": {
      "output": "\n@mixin type-text-uppercase-smaller--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-text-uppercase-smaller--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-text-uppercase { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-text-uppercase-smaller--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-text-uppercase-smaller-left , NOT-FOUND );\n  margin-right: var( --type-text-uppercase-smaller-right , NOT-FOUND );\n  margin-top: var( --type-text-uppercase-smaller-top , NOT-FOUND );\n  margin-bottom: var( --type-text-uppercase-smaller-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-uppercase-smaller-left , NOT-FOUND ) + var( --type-text-uppercase-smaller-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    display: inline-block;\n  margin-left: var( --type-text-uppercase-smaller-left , NOT-FOUND );\n  margin-right: var( --type-text-uppercase-smaller-right , NOT-FOUND );\n  margin-top: var( --type-text-uppercase-smaller-top , NOT-FOUND );\n  margin-bottom: var( --type-text-uppercase-smaller-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-uppercase-smaller-left , NOT-FOUND ) + var( --type-text-uppercase-smaller-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-uppercase'>content</div>"
    }
  },
  "typography-text-uppercase-text-uppercase-02": {
    "": {
      "output": "\n@mixin type-text-uppercase-02 { \n  position: relative;\n  font-size: var( --type-text-uppercase-02-font-size , 9px );\n  text-align: var( --type-text-uppercase-02-text-align-horizontal , LEFT );\n  color: var( --type-text-uppercase-02-color , rgba(0,0,0,1) );\n  font-family: var( --type-text-uppercase-02-font-family , 'Proxima Nova' );\n  font-weight: var( --type-text-uppercase-02-font-weight , 500 );\n  line-height: var( --type-text-uppercase-02-line-height , 10.55px );\n  letter-spacing: var( --type-text-uppercase-02-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    position: relative;\n    font-size: var( --type-text-uppercase-02-font-size , 9px );\n    text-align: var( --type-text-uppercase-02-text-align-horizontal , LEFT );\n    color: var( --type-text-uppercase-02-color , rgba(0,0,0,1) );\n    font-family: var( --type-text-uppercase-02-font-family , 'Proxima Nova' );\n    font-weight: var( --type-text-uppercase-02-font-weight , 500 );\n    line-height: var( --type-text-uppercase-02-line-height , 10.55px );\n    letter-spacing: var( --type-text-uppercase-02-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-text-uppercase-02--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "width": {
      "output": "\n@mixin type-text-uppercase-02--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "height": {
      "output": "\n@mixin type-text-uppercase-02--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-text-uppercase-02--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-text-uppercase { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-text-uppercase-02--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-text-uppercase-02-left , NOT-FOUND );\n  margin-right: var( --type-text-uppercase-02-right , NOT-FOUND );\n  margin-top: var( --type-text-uppercase-02-top , NOT-FOUND );\n  margin-bottom: var( --type-text-uppercase-02-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-uppercase-02-left , NOT-FOUND ) + var( --type-text-uppercase-02-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    display: inline-block;\n  margin-left: var( --type-text-uppercase-02-left , NOT-FOUND );\n  margin-right: var( --type-text-uppercase-02-right , NOT-FOUND );\n  margin-top: var( --type-text-uppercase-02-top , NOT-FOUND );\n  margin-bottom: var( --type-text-uppercase-02-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-uppercase-02-left , NOT-FOUND ) + var( --type-text-uppercase-02-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-uppercase'>content</div>"
    }
  },
  "typography-text-uppercase-text-uppercase-smallest": {
    "": {
      "output": "\n@mixin type-text-uppercase-smallest { \n  position: relative;\n  font-size: var( --type-text-uppercase-smallest-font-size , 9px );\n  text-align: var( --type-text-uppercase-smallest-text-align-horizontal , LEFT );\n  color: var( --type-text-uppercase-smallest-color , rgba(0,0,0,1) );\n  font-family: var( --type-text-uppercase-smallest-font-family , 'Proxima Nova' );\n  font-weight: var( --type-text-uppercase-smallest-font-weight , 500 );\n  line-height: var( --type-text-uppercase-smallest-line-height , 10.55px );\n  letter-spacing: var( --type-text-uppercase-smallest-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    position: relative;\n    font-size: var( --type-text-uppercase-smallest-font-size , 9px );\n    text-align: var( --type-text-uppercase-smallest-text-align-horizontal , LEFT );\n    color: var( --type-text-uppercase-smallest-color , rgba(0,0,0,1) );\n    font-family: var( --type-text-uppercase-smallest-font-family , 'Proxima Nova' );\n    font-weight: var( --type-text-uppercase-smallest-font-weight , 500 );\n    line-height: var( --type-text-uppercase-smallest-line-height , 10.55px );\n    letter-spacing: var( --type-text-uppercase-smallest-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-text-uppercase-smallest--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "width": {
      "output": "\n@mixin type-text-uppercase-smallest--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "height": {
      "output": "\n@mixin type-text-uppercase-smallest--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-text-uppercase-smallest--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-text-uppercase { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-text-uppercase-smallest--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-text-uppercase-smallest-left , NOT-FOUND );\n  margin-right: var( --type-text-uppercase-smallest-right , NOT-FOUND );\n  margin-top: var( --type-text-uppercase-smallest-top , NOT-FOUND );\n  margin-bottom: var( --type-text-uppercase-smallest-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-uppercase-smallest-left , NOT-FOUND ) + var( --type-text-uppercase-smallest-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    display: inline-block;\n  margin-left: var( --type-text-uppercase-smallest-left , NOT-FOUND );\n  margin-right: var( --type-text-uppercase-smallest-right , NOT-FOUND );\n  margin-top: var( --type-text-uppercase-smallest-top , NOT-FOUND );\n  margin-bottom: var( --type-text-uppercase-smallest-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-uppercase-smallest-left , NOT-FOUND ) + var( --type-text-uppercase-smallest-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-uppercase'>content</div>"
    }
  },
  "typography-text-uppercase-text-uppercase-01": {
    "": {
      "output": "\n@mixin type-text-uppercase-01 { \n  position: relative;\n  font-size: var( --type-text-uppercase-01-font-size , 8px );\n  text-align: var( --type-text-uppercase-01-text-align-horizontal , LEFT );\n  color: var( --type-text-uppercase-01-color , rgba(0,0,0,1) );\n  font-family: var( --type-text-uppercase-01-font-family , 'Proxima Nova' );\n  font-weight: var( --type-text-uppercase-01-font-weight , 500 );\n  line-height: var( --type-text-uppercase-01-line-height , 9.38px );\n  letter-spacing: var( --type-text-uppercase-01-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    position: relative;\n    font-size: var( --type-text-uppercase-01-font-size , 8px );\n    text-align: var( --type-text-uppercase-01-text-align-horizontal , LEFT );\n    color: var( --type-text-uppercase-01-color , rgba(0,0,0,1) );\n    font-family: var( --type-text-uppercase-01-font-family , 'Proxima Nova' );\n    font-weight: var( --type-text-uppercase-01-font-weight , 500 );\n    line-height: var( --type-text-uppercase-01-line-height , 9.38px );\n    letter-spacing: var( --type-text-uppercase-01-letter-spacing , 0px ); \n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "sizing": {
      "output": "\n@mixin type-text-uppercase-01--sizing {\n  width: NOT-FOUND;\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    width: NOT-FOUND;\n    height: NOT-FOUND;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "width": {
      "output": "\n@mixin type-text-uppercase-01--width {\n  width: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    width: NOT-FOUND;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "height": {
      "output": "\n@mixin type-text-uppercase-01--height {\n  height: NOT-FOUND;\n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    height: NOT-FOUND;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin type-text-uppercase-01--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #type-text-uppercase { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='type-text-uppercase'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin type-text-uppercase-01--html-autolayout {\n  display: inline-block;\n  margin-left: var( --type-text-uppercase-01-left , NOT-FOUND );\n  margin-right: var( --type-text-uppercase-01-right , NOT-FOUND );\n  margin-top: var( --type-text-uppercase-01-top , NOT-FOUND );\n  margin-bottom: var( --type-text-uppercase-01-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-uppercase-01-left , NOT-FOUND ) + var( --type-text-uppercase-01-right , NOT-FOUND ) ) );\n}",
      "example": "\n<style>\n  #type-text-uppercase { \n    display: inline-block;\n  margin-left: var( --type-text-uppercase-01-left , NOT-FOUND );\n  margin-right: var( --type-text-uppercase-01-right , NOT-FOUND );\n  margin-top: var( --type-text-uppercase-01-top , NOT-FOUND );\n  margin-bottom: var( --type-text-uppercase-01-bottom , NOT-FOUND );\n  width: calc( 100% - ( var( --type-text-uppercase-01-left , NOT-FOUND ) + var( --type-text-uppercase-01-right , NOT-FOUND ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='type-text-uppercase'>content</div>"
    }
  },
  "effects-shadow-": {
    "": {
      "output": "\n@mixin effect-shadow { \n  box-shadow: var( --effect-shadow-shadow , 0px 0px 8px 0px rgba(0,0,0,0.27) ); \n}",
      "example": "\n<style>\n  #effect-shadow { \n    box-shadow: var( --effect-shadow-shadow , 0px 0px 8px 0px rgba(0,0,0,0.27) ); \n    width: 100px; height: 100px;\n  }\n</style>\n<div id='effect-shadow'></div>"
    }
  },
  "effects-shadow-dark-": {
    "": {
      "output": "\n@mixin effect-shadow-dark { \n  box-shadow: var( --effect-shadow-dark-shadow , 0px 0px 8px 0px rgba(0,0,0,0.27) ); \n}",
      "example": "\n<style>\n  #effect-shadow-dark { \n    box-shadow: var( --effect-shadow-dark-shadow , 0px 0px 8px 0px rgba(0,0,0,0.27) ); \n    width: 100px; height: 100px;\n  }\n</style>\n<div id='effect-shadow-dark'></div>"
    }
  },
  "effects-focus-": {
    "": {
      "output": "\n@mixin effect-focus { \n  box-shadow: var( --effect-focus-shadow , 0px 0px 0px 2px rgba(53,155,249,1) ); \n}",
      "example": "\n<style>\n  #effect-focus { \n    box-shadow: var( --effect-focus-shadow , 0px 0px 0px 2px rgba(53,155,249,1) ); \n    width: 100px; height: 100px;\n  }\n</style>\n<div id='effect-focus'></div>"
    }
  },
  "icons-edit-12": {
    "": {
      "output": "\n@mixin icon-edit-12 { \n  background-image: var( --icon-edit-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-edit-12-width , 12px );\n  height: var( --icon-edit-12-height , 12px );\n  background-size: var( --icon-edit-12-background-size , 12px 12px ); \n}",
      "example": "\n<style>\n  #icon-edit { \n    background-image: var( --icon-edit-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-edit-12-width , 12px );\n    height: var( --icon-edit-12-height , 12px );\n    background-size: var( --icon-edit-12-background-size , 12px 12px ); \n  }\n</style>\n<div id='icon-edit'></div>"
    }
  },
  "icons-edit-16": {
    "": {
      "output": "\n@mixin icon-edit-16 { \n  background-image: var( --icon-edit-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-edit-16-width , 16px );\n  height: var( --icon-edit-16-height , 16px );\n  background-size: var( --icon-edit-16-background-size , 16px 16px ); \n}",
      "example": "\n<style>\n  #icon-edit { \n    background-image: var( --icon-edit-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-edit-16-width , 16px );\n    height: var( --icon-edit-16-height , 16px );\n    background-size: var( --icon-edit-16-background-size , 16px 16px ); \n  }\n</style>\n<div id='icon-edit'></div>"
    }
  },
  "icons-edit-": {
    "": {
      "output": "\n@mixin icon-edit { \n  background-image: var( --icon-edit-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-edit-width , 24px );\n  height: var( --icon-edit-height , 24px );\n  background-size: var( --icon-edit-background-size , 24px 24px ); \n}",
      "example": "\n<style>\n  #icon-edit { \n    background-image: var( --icon-edit-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-edit-width , 24px );\n    height: var( --icon-edit-height , 24px );\n    background-size: var( --icon-edit-background-size , 24px 24px ); \n  }\n</style>\n<div id='icon-edit'></div>"
    }
  },
  "icons-edit-24": {
    "": {
      "output": "\n@mixin icon-edit-24 { \n  background-image: var( --icon-edit-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-edit-24-width , 24px );\n  height: var( --icon-edit-24-height , 24px );\n  background-size: var( --icon-edit-24-background-size , 24px 24px ); \n}",
      "example": "\n<style>\n  #icon-edit { \n    background-image: var( --icon-edit-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-edit-24-width , 24px );\n    height: var( --icon-edit-24-height , 24px );\n    background-size: var( --icon-edit-24-background-size , 24px 24px ); \n  }\n</style>\n<div id='icon-edit'></div>"
    }
  },
  "icons-edit-32": {
    "": {
      "output": "\n@mixin icon-edit-32 { \n  background-image: var( --icon-edit-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-edit-32-width , 32px );\n  height: var( --icon-edit-32-height , 32px );\n  background-size: var( --icon-edit-32-background-size , 32px 32px ); \n}",
      "example": "\n<style>\n  #icon-edit { \n    background-image: var( --icon-edit-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-edit-32-width , 32px );\n    height: var( --icon-edit-32-height , 32px );\n    background-size: var( --icon-edit-32-background-size , 32px 32px ); \n  }\n</style>\n<div id='icon-edit'></div>"
    }
  },
  "icons-edit-48": {
    "": {
      "output": "\n@mixin icon-edit-48 { \n  background-image: var( --icon-edit-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-edit-48-width , 48px );\n  height: var( --icon-edit-48-height , 48px );\n  background-size: var( --icon-edit-48-background-size , 48px 48px ); \n}",
      "example": "\n<style>\n  #icon-edit { \n    background-image: var( --icon-edit-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-edit-48-width , 48px );\n    height: var( --icon-edit-48-height , 48px );\n    background-size: var( --icon-edit-48-background-size , 48px 48px ); \n  }\n</style>\n<div id='icon-edit'></div>"
    }
  },
  "icons-edit-64": {
    "": {
      "output": "\n@mixin icon-edit-64 { \n  background-image: var( --icon-edit-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-edit-64-width , 64px );\n  height: var( --icon-edit-64-height , 64px );\n  background-size: var( --icon-edit-64-background-size , 64px 64px ); \n}",
      "example": "\n<style>\n  #icon-edit { \n    background-image: var( --icon-edit-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-edit-64-width , 64px );\n    height: var( --icon-edit-64-height , 64px );\n    background-size: var( --icon-edit-64-background-size , 64px 64px ); \n  }\n</style>\n<div id='icon-edit'></div>"
    }
  },
  "icons-pin-verification-12": {
    "": {
      "output": "\n@mixin icon-pin-verification-12 { \n  background-image: var( --icon-pin-verification-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-pin-verification-12-width , 12px );\n  height: var( --icon-pin-verification-12-height , 12px );\n  background-size: var( --icon-pin-verification-12-background-size , 12px 12px ); \n}",
      "example": "\n<style>\n  #icon-pin-verification { \n    background-image: var( --icon-pin-verification-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-pin-verification-12-width , 12px );\n    height: var( --icon-pin-verification-12-height , 12px );\n    background-size: var( --icon-pin-verification-12-background-size , 12px 12px ); \n  }\n</style>\n<div id='icon-pin-verification'></div>"
    }
  },
  "icons-pin-verification-16": {
    "": {
      "output": "\n@mixin icon-pin-verification-16 { \n  background-image: var( --icon-pin-verification-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-pin-verification-16-width , 16px );\n  height: var( --icon-pin-verification-16-height , 16px );\n  background-size: var( --icon-pin-verification-16-background-size , 16px 16px ); \n}",
      "example": "\n<style>\n  #icon-pin-verification { \n    background-image: var( --icon-pin-verification-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-pin-verification-16-width , 16px );\n    height: var( --icon-pin-verification-16-height , 16px );\n    background-size: var( --icon-pin-verification-16-background-size , 16px 16px ); \n  }\n</style>\n<div id='icon-pin-verification'></div>"
    }
  },
  "icons-pin-verification-": {
    "": {
      "output": "\n@mixin icon-pin-verification { \n  background-image: var( --icon-pin-verification-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-pin-verification-width , 24px );\n  height: var( --icon-pin-verification-height , 24px );\n  background-size: var( --icon-pin-verification-background-size , 24px 24px ); \n}",
      "example": "\n<style>\n  #icon-pin-verification { \n    background-image: var( --icon-pin-verification-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-pin-verification-width , 24px );\n    height: var( --icon-pin-verification-height , 24px );\n    background-size: var( --icon-pin-verification-background-size , 24px 24px ); \n  }\n</style>\n<div id='icon-pin-verification'></div>"
    }
  },
  "icons-pin-verification-24": {
    "": {
      "output": "\n@mixin icon-pin-verification-24 { \n  background-image: var( --icon-pin-verification-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-pin-verification-24-width , 24px );\n  height: var( --icon-pin-verification-24-height , 24px );\n  background-size: var( --icon-pin-verification-24-background-size , 24px 24px ); \n}",
      "example": "\n<style>\n  #icon-pin-verification { \n    background-image: var( --icon-pin-verification-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-pin-verification-24-width , 24px );\n    height: var( --icon-pin-verification-24-height , 24px );\n    background-size: var( --icon-pin-verification-24-background-size , 24px 24px ); \n  }\n</style>\n<div id='icon-pin-verification'></div>"
    }
  },
  "icons-pin-verification-32": {
    "": {
      "output": "\n@mixin icon-pin-verification-32 { \n  background-image: var( --icon-pin-verification-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-pin-verification-32-width , 32px );\n  height: var( --icon-pin-verification-32-height , 32px );\n  background-size: var( --icon-pin-verification-32-background-size , 32px 32px ); \n}",
      "example": "\n<style>\n  #icon-pin-verification { \n    background-image: var( --icon-pin-verification-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-pin-verification-32-width , 32px );\n    height: var( --icon-pin-verification-32-height , 32px );\n    background-size: var( --icon-pin-verification-32-background-size , 32px 32px ); \n  }\n</style>\n<div id='icon-pin-verification'></div>"
    }
  },
  "icons-pin-verification-48": {
    "": {
      "output": "\n@mixin icon-pin-verification-48 { \n  background-image: var( --icon-pin-verification-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-pin-verification-48-width , 48px );\n  height: var( --icon-pin-verification-48-height , 48px );\n  background-size: var( --icon-pin-verification-48-background-size , 48px 48px ); \n}",
      "example": "\n<style>\n  #icon-pin-verification { \n    background-image: var( --icon-pin-verification-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-pin-verification-48-width , 48px );\n    height: var( --icon-pin-verification-48-height , 48px );\n    background-size: var( --icon-pin-verification-48-background-size , 48px 48px ); \n  }\n</style>\n<div id='icon-pin-verification'></div>"
    }
  },
  "icons-pin-verification-64": {
    "": {
      "output": "\n@mixin icon-pin-verification-64 { \n  background-image: var( --icon-pin-verification-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-pin-verification-64-width , 64px );\n  height: var( --icon-pin-verification-64-height , 64px );\n  background-size: var( --icon-pin-verification-64-background-size , 64px 64px ); \n}",
      "example": "\n<style>\n  #icon-pin-verification { \n    background-image: var( --icon-pin-verification-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-pin-verification-64-width , 64px );\n    height: var( --icon-pin-verification-64-height , 64px );\n    background-size: var( --icon-pin-verification-64-background-size , 64px 64px ); \n  }\n</style>\n<div id='icon-pin-verification'></div>"
    }
  },
  "icons-show-password-12": {
    "": {
      "output": "\n@mixin icon-show-password-12 { \n  background-image: var( --icon-show-password-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-show-password-12-width , 12px );\n  height: var( --icon-show-password-12-height , 12px );\n  background-size: var( --icon-show-password-12-background-size , 12px 12px ); \n}",
      "example": "\n<style>\n  #icon-show-password { \n    background-image: var( --icon-show-password-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-show-password-12-width , 12px );\n    height: var( --icon-show-password-12-height , 12px );\n    background-size: var( --icon-show-password-12-background-size , 12px 12px ); \n  }\n</style>\n<div id='icon-show-password'></div>"
    }
  },
  "icons-show-password-16": {
    "": {
      "output": "\n@mixin icon-show-password-16 { \n  background-image: var( --icon-show-password-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-show-password-16-width , 16px );\n  height: var( --icon-show-password-16-height , 16px );\n  background-size: var( --icon-show-password-16-background-size , 16px 16px ); \n}",
      "example": "\n<style>\n  #icon-show-password { \n    background-image: var( --icon-show-password-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-show-password-16-width , 16px );\n    height: var( --icon-show-password-16-height , 16px );\n    background-size: var( --icon-show-password-16-background-size , 16px 16px ); \n  }\n</style>\n<div id='icon-show-password'></div>"
    }
  },
  "icons-show-password-": {
    "": {
      "output": "\n@mixin icon-show-password { \n  background-image: var( --icon-show-password-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-show-password-width , 24px );\n  height: var( --icon-show-password-height , 24px );\n  background-size: var( --icon-show-password-background-size , 24px 24px ); \n}",
      "example": "\n<style>\n  #icon-show-password { \n    background-image: var( --icon-show-password-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-show-password-width , 24px );\n    height: var( --icon-show-password-height , 24px );\n    background-size: var( --icon-show-password-background-size , 24px 24px ); \n  }\n</style>\n<div id='icon-show-password'></div>"
    }
  },
  "icons-show-password-24": {
    "": {
      "output": "\n@mixin icon-show-password-24 { \n  background-image: var( --icon-show-password-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-show-password-24-width , 24px );\n  height: var( --icon-show-password-24-height , 24px );\n  background-size: var( --icon-show-password-24-background-size , 24px 24px ); \n}",
      "example": "\n<style>\n  #icon-show-password { \n    background-image: var( --icon-show-password-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-show-password-24-width , 24px );\n    height: var( --icon-show-password-24-height , 24px );\n    background-size: var( --icon-show-password-24-background-size , 24px 24px ); \n  }\n</style>\n<div id='icon-show-password'></div>"
    }
  },
  "icons-show-password-32": {
    "": {
      "output": "\n@mixin icon-show-password-32 { \n  background-image: var( --icon-show-password-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-show-password-32-width , 32px );\n  height: var( --icon-show-password-32-height , 32px );\n  background-size: var( --icon-show-password-32-background-size , 32px 32px ); \n}",
      "example": "\n<style>\n  #icon-show-password { \n    background-image: var( --icon-show-password-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-show-password-32-width , 32px );\n    height: var( --icon-show-password-32-height , 32px );\n    background-size: var( --icon-show-password-32-background-size , 32px 32px ); \n  }\n</style>\n<div id='icon-show-password'></div>"
    }
  },
  "icons-show-password-48": {
    "": {
      "output": "\n@mixin icon-show-password-48 { \n  background-image: var( --icon-show-password-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-show-password-48-width , 48px );\n  height: var( --icon-show-password-48-height , 48px );\n  background-size: var( --icon-show-password-48-background-size , 48px 48px ); \n}",
      "example": "\n<style>\n  #icon-show-password { \n    background-image: var( --icon-show-password-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-show-password-48-width , 48px );\n    height: var( --icon-show-password-48-height , 48px );\n    background-size: var( --icon-show-password-48-background-size , 48px 48px ); \n  }\n</style>\n<div id='icon-show-password'></div>"
    }
  },
  "icons-show-password-64": {
    "": {
      "output": "\n@mixin icon-show-password-64 { \n  background-image: var( --icon-show-password-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-show-password-64-width , 64px );\n  height: var( --icon-show-password-64-height , 64px );\n  background-size: var( --icon-show-password-64-background-size , 64px 64px ); \n}",
      "example": "\n<style>\n  #icon-show-password { \n    background-image: var( --icon-show-password-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-show-password-64-width , 64px );\n    height: var( --icon-show-password-64-height , 64px );\n    background-size: var( --icon-show-password-64-background-size , 64px 64px ); \n  }\n</style>\n<div id='icon-show-password'></div>"
    }
  },
  "icons-placeholder-12": {
    "": {
      "output": "\n@mixin icon-placeholder-12 { \n  background-image: var( --icon-placeholder-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-placeholder-12-width , 12px );\n  height: var( --icon-placeholder-12-height , 12px );\n  background-size: var( --icon-placeholder-12-background-size , 12px 12px ); \n}",
      "example": "\n<style>\n  #icon-placeholder { \n    background-image: var( --icon-placeholder-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-placeholder-12-width , 12px );\n    height: var( --icon-placeholder-12-height , 12px );\n    background-size: var( --icon-placeholder-12-background-size , 12px 12px ); \n  }\n</style>\n<div id='icon-placeholder'></div>"
    }
  },
  "icons-placeholder-16": {
    "": {
      "output": "\n@mixin icon-placeholder-16 { \n  background-image: var( --icon-placeholder-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-placeholder-16-width , 16px );\n  height: var( --icon-placeholder-16-height , 16px );\n  background-size: var( --icon-placeholder-16-background-size , 16px 16px ); \n}",
      "example": "\n<style>\n  #icon-placeholder { \n    background-image: var( --icon-placeholder-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-placeholder-16-width , 16px );\n    height: var( --icon-placeholder-16-height , 16px );\n    background-size: var( --icon-placeholder-16-background-size , 16px 16px ); \n  }\n</style>\n<div id='icon-placeholder'></div>"
    }
  },
  "icons-placeholder-": {
    "": {
      "output": "\n@mixin icon-placeholder { \n  background-image: var( --icon-placeholder-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-placeholder-width , 24px );\n  height: var( --icon-placeholder-height , 24px );\n  background-size: var( --icon-placeholder-background-size , 24px 24px ); \n}",
      "example": "\n<style>\n  #icon-placeholder { \n    background-image: var( --icon-placeholder-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-placeholder-width , 24px );\n    height: var( --icon-placeholder-height , 24px );\n    background-size: var( --icon-placeholder-background-size , 24px 24px ); \n  }\n</style>\n<div id='icon-placeholder'></div>"
    }
  },
  "icons-placeholder-24": {
    "": {
      "output": "\n@mixin icon-placeholder-24 { \n  background-image: var( --icon-placeholder-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-placeholder-24-width , 24px );\n  height: var( --icon-placeholder-24-height , 24px );\n  background-size: var( --icon-placeholder-24-background-size , 24px 24px ); \n}",
      "example": "\n<style>\n  #icon-placeholder { \n    background-image: var( --icon-placeholder-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-placeholder-24-width , 24px );\n    height: var( --icon-placeholder-24-height , 24px );\n    background-size: var( --icon-placeholder-24-background-size , 24px 24px ); \n  }\n</style>\n<div id='icon-placeholder'></div>"
    }
  },
  "icons-placeholder-32": {
    "": {
      "output": "\n@mixin icon-placeholder-32 { \n  background-image: var( --icon-placeholder-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-placeholder-32-width , 32px );\n  height: var( --icon-placeholder-32-height , 32px );\n  background-size: var( --icon-placeholder-32-background-size , 32px 32px ); \n}",
      "example": "\n<style>\n  #icon-placeholder { \n    background-image: var( --icon-placeholder-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-placeholder-32-width , 32px );\n    height: var( --icon-placeholder-32-height , 32px );\n    background-size: var( --icon-placeholder-32-background-size , 32px 32px ); \n  }\n</style>\n<div id='icon-placeholder'></div>"
    }
  },
  "icons-placeholder-48": {
    "": {
      "output": "\n@mixin icon-placeholder-48 { \n  background-image: var( --icon-placeholder-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-placeholder-48-width , 48px );\n  height: var( --icon-placeholder-48-height , 48px );\n  background-size: var( --icon-placeholder-48-background-size , 48px 48px ); \n}",
      "example": "\n<style>\n  #icon-placeholder { \n    background-image: var( --icon-placeholder-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-placeholder-48-width , 48px );\n    height: var( --icon-placeholder-48-height , 48px );\n    background-size: var( --icon-placeholder-48-background-size , 48px 48px ); \n  }\n</style>\n<div id='icon-placeholder'></div>"
    }
  },
  "icons-placeholder-64": {
    "": {
      "output": "\n@mixin icon-placeholder-64 { \n  background-image: var( --icon-placeholder-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-placeholder-64-width , 64px );\n  height: var( --icon-placeholder-64-height , 64px );\n  background-size: var( --icon-placeholder-64-background-size , 64px 64px ); \n}",
      "example": "\n<style>\n  #icon-placeholder { \n    background-image: var( --icon-placeholder-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-placeholder-64-width , 64px );\n    height: var( --icon-placeholder-64-height , 64px );\n    background-size: var( --icon-placeholder-64-background-size , 64px 64px ); \n  }\n</style>\n<div id='icon-placeholder'></div>"
    }
  },
  "icons-summit-central-logo-12": {
    "": {
      "output": "\n@mixin icon-summit-central-logo-12 { \n  background-image: var( --icon-summit-central-logo-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-summit-central-logo-12-width , 12px );\n  height: var( --icon-summit-central-logo-12-height , 12px );\n  background-size: var( --icon-summit-central-logo-12-background-size , 12px 12px ); \n}",
      "example": "\n<style>\n  #icon-summit-central-logo { \n    background-image: var( --icon-summit-central-logo-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-summit-central-logo-12-width , 12px );\n    height: var( --icon-summit-central-logo-12-height , 12px );\n    background-size: var( --icon-summit-central-logo-12-background-size , 12px 12px ); \n  }\n</style>\n<div id='icon-summit-central-logo'></div>"
    }
  },
  "icons-summit-central-logo-16": {
    "": {
      "output": "\n@mixin icon-summit-central-logo-16 { \n  background-image: var( --icon-summit-central-logo-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-summit-central-logo-16-width , 16px );\n  height: var( --icon-summit-central-logo-16-height , 16px );\n  background-size: var( --icon-summit-central-logo-16-background-size , 16px 16px ); \n}",
      "example": "\n<style>\n  #icon-summit-central-logo { \n    background-image: var( --icon-summit-central-logo-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-summit-central-logo-16-width , 16px );\n    height: var( --icon-summit-central-logo-16-height , 16px );\n    background-size: var( --icon-summit-central-logo-16-background-size , 16px 16px ); \n  }\n</style>\n<div id='icon-summit-central-logo'></div>"
    }
  },
  "icons-summit-central-logo-": {
    "": {
      "output": "\n@mixin icon-summit-central-logo { \n  background-image: var( --icon-summit-central-logo-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-summit-central-logo-width , 24px );\n  height: var( --icon-summit-central-logo-height , 24px );\n  background-size: var( --icon-summit-central-logo-background-size , 24px 24px ); \n}",
      "example": "\n<style>\n  #icon-summit-central-logo { \n    background-image: var( --icon-summit-central-logo-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-summit-central-logo-width , 24px );\n    height: var( --icon-summit-central-logo-height , 24px );\n    background-size: var( --icon-summit-central-logo-background-size , 24px 24px ); \n  }\n</style>\n<div id='icon-summit-central-logo'></div>"
    }
  },
  "icons-summit-central-logo-24": {
    "": {
      "output": "\n@mixin icon-summit-central-logo-24 { \n  background-image: var( --icon-summit-central-logo-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-summit-central-logo-24-width , 24px );\n  height: var( --icon-summit-central-logo-24-height , 24px );\n  background-size: var( --icon-summit-central-logo-24-background-size , 24px 24px ); \n}",
      "example": "\n<style>\n  #icon-summit-central-logo { \n    background-image: var( --icon-summit-central-logo-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-summit-central-logo-24-width , 24px );\n    height: var( --icon-summit-central-logo-24-height , 24px );\n    background-size: var( --icon-summit-central-logo-24-background-size , 24px 24px ); \n  }\n</style>\n<div id='icon-summit-central-logo'></div>"
    }
  },
  "icons-summit-central-logo-32": {
    "": {
      "output": "\n@mixin icon-summit-central-logo-32 { \n  background-image: var( --icon-summit-central-logo-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-summit-central-logo-32-width , 32px );\n  height: var( --icon-summit-central-logo-32-height , 32px );\n  background-size: var( --icon-summit-central-logo-32-background-size , 32px 32px ); \n}",
      "example": "\n<style>\n  #icon-summit-central-logo { \n    background-image: var( --icon-summit-central-logo-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-summit-central-logo-32-width , 32px );\n    height: var( --icon-summit-central-logo-32-height , 32px );\n    background-size: var( --icon-summit-central-logo-32-background-size , 32px 32px ); \n  }\n</style>\n<div id='icon-summit-central-logo'></div>"
    }
  },
  "icons-summit-central-logo-48": {
    "": {
      "output": "\n@mixin icon-summit-central-logo-48 { \n  background-image: var( --icon-summit-central-logo-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-summit-central-logo-48-width , 48px );\n  height: var( --icon-summit-central-logo-48-height , 48px );\n  background-size: var( --icon-summit-central-logo-48-background-size , 48px 48px ); \n}",
      "example": "\n<style>\n  #icon-summit-central-logo { \n    background-image: var( --icon-summit-central-logo-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-summit-central-logo-48-width , 48px );\n    height: var( --icon-summit-central-logo-48-height , 48px );\n    background-size: var( --icon-summit-central-logo-48-background-size , 48px 48px ); \n  }\n</style>\n<div id='icon-summit-central-logo'></div>"
    }
  },
  "icons-summit-central-logo-64": {
    "": {
      "output": "\n@mixin icon-summit-central-logo-64 { \n  background-image: var( --icon-summit-central-logo-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-summit-central-logo-64-width , 64px );\n  height: var( --icon-summit-central-logo-64-height , 64px );\n  background-size: var( --icon-summit-central-logo-64-background-size , 64px 64px ); \n}",
      "example": "\n<style>\n  #icon-summit-central-logo { \n    background-image: var( --icon-summit-central-logo-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-summit-central-logo-64-width , 64px );\n    height: var( --icon-summit-central-logo-64-height , 64px );\n    background-size: var( --icon-summit-central-logo-64-background-size , 64px 64px ); \n  }\n</style>\n<div id='icon-summit-central-logo'></div>"
    }
  },
  "icons-dashboard-12": {
    "": {
      "output": "\n@mixin icon-dashboard-12 { \n  background-image: var( --icon-dashboard-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-dashboard-12-width , 12px );\n  height: var( --icon-dashboard-12-height , 12px );\n  background-size: var( --icon-dashboard-12-background-size , 12px 12px ); \n}",
      "example": "\n<style>\n  #icon-dashboard { \n    background-image: var( --icon-dashboard-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-dashboard-12-width , 12px );\n    height: var( --icon-dashboard-12-height , 12px );\n    background-size: var( --icon-dashboard-12-background-size , 12px 12px ); \n  }\n</style>\n<div id='icon-dashboard'></div>"
    }
  },
  "icons-dashboard-16": {
    "": {
      "output": "\n@mixin icon-dashboard-16 { \n  background-image: var( --icon-dashboard-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-dashboard-16-width , 16px );\n  height: var( --icon-dashboard-16-height , 16px );\n  background-size: var( --icon-dashboard-16-background-size , 16px 16px ); \n}",
      "example": "\n<style>\n  #icon-dashboard { \n    background-image: var( --icon-dashboard-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-dashboard-16-width , 16px );\n    height: var( --icon-dashboard-16-height , 16px );\n    background-size: var( --icon-dashboard-16-background-size , 16px 16px ); \n  }\n</style>\n<div id='icon-dashboard'></div>"
    }
  },
  "icons-dashboard-": {
    "": {
      "output": "\n@mixin icon-dashboard { \n  background-image: var( --icon-dashboard-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-dashboard-width , 24px );\n  height: var( --icon-dashboard-height , 24px );\n  background-size: var( --icon-dashboard-background-size , 24px 24px ); \n}",
      "example": "\n<style>\n  #icon-dashboard { \n    background-image: var( --icon-dashboard-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-dashboard-width , 24px );\n    height: var( --icon-dashboard-height , 24px );\n    background-size: var( --icon-dashboard-background-size , 24px 24px ); \n  }\n</style>\n<div id='icon-dashboard'></div>"
    }
  },
  "icons-dashboard-24": {
    "": {
      "output": "\n@mixin icon-dashboard-24 { \n  background-image: var( --icon-dashboard-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-dashboard-24-width , 24px );\n  height: var( --icon-dashboard-24-height , 24px );\n  background-size: var( --icon-dashboard-24-background-size , 24px 24px ); \n}",
      "example": "\n<style>\n  #icon-dashboard { \n    background-image: var( --icon-dashboard-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-dashboard-24-width , 24px );\n    height: var( --icon-dashboard-24-height , 24px );\n    background-size: var( --icon-dashboard-24-background-size , 24px 24px ); \n  }\n</style>\n<div id='icon-dashboard'></div>"
    }
  },
  "icons-dashboard-32": {
    "": {
      "output": "\n@mixin icon-dashboard-32 { \n  background-image: var( --icon-dashboard-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-dashboard-32-width , 32px );\n  height: var( --icon-dashboard-32-height , 32px );\n  background-size: var( --icon-dashboard-32-background-size , 32px 32px ); \n}",
      "example": "\n<style>\n  #icon-dashboard { \n    background-image: var( --icon-dashboard-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-dashboard-32-width , 32px );\n    height: var( --icon-dashboard-32-height , 32px );\n    background-size: var( --icon-dashboard-32-background-size , 32px 32px ); \n  }\n</style>\n<div id='icon-dashboard'></div>"
    }
  },
  "icons-dashboard-48": {
    "": {
      "output": "\n@mixin icon-dashboard-48 { \n  background-image: var( --icon-dashboard-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-dashboard-48-width , 48px );\n  height: var( --icon-dashboard-48-height , 48px );\n  background-size: var( --icon-dashboard-48-background-size , 48px 48px ); \n}",
      "example": "\n<style>\n  #icon-dashboard { \n    background-image: var( --icon-dashboard-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-dashboard-48-width , 48px );\n    height: var( --icon-dashboard-48-height , 48px );\n    background-size: var( --icon-dashboard-48-background-size , 48px 48px ); \n  }\n</style>\n<div id='icon-dashboard'></div>"
    }
  },
  "icons-dashboard-64": {
    "": {
      "output": "\n@mixin icon-dashboard-64 { \n  background-image: var( --icon-dashboard-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-dashboard-64-width , 64px );\n  height: var( --icon-dashboard-64-height , 64px );\n  background-size: var( --icon-dashboard-64-background-size , 64px 64px ); \n}",
      "example": "\n<style>\n  #icon-dashboard { \n    background-image: var( --icon-dashboard-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-dashboard-64-width , 64px );\n    height: var( --icon-dashboard-64-height , 64px );\n    background-size: var( --icon-dashboard-64-background-size , 64px 64px ); \n  }\n</style>\n<div id='icon-dashboard'></div>"
    }
  },
  "icons-member-banking-12": {
    "": {
      "output": "\n@mixin icon-member-banking-12 { \n  background-image: var( --icon-member-banking-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-member-banking-12-width , 12px );\n  height: var( --icon-member-banking-12-height , 12px );\n  background-size: var( --icon-member-banking-12-background-size , 12px 12px ); \n}",
      "example": "\n<style>\n  #icon-member-banking { \n    background-image: var( --icon-member-banking-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-member-banking-12-width , 12px );\n    height: var( --icon-member-banking-12-height , 12px );\n    background-size: var( --icon-member-banking-12-background-size , 12px 12px ); \n  }\n</style>\n<div id='icon-member-banking'></div>"
    }
  },
  "icons-member-banking-16": {
    "": {
      "output": "\n@mixin icon-member-banking-16 { \n  background-image: var( --icon-member-banking-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-member-banking-16-width , 16px );\n  height: var( --icon-member-banking-16-height , 16px );\n  background-size: var( --icon-member-banking-16-background-size , 16px 16px ); \n}",
      "example": "\n<style>\n  #icon-member-banking { \n    background-image: var( --icon-member-banking-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-member-banking-16-width , 16px );\n    height: var( --icon-member-banking-16-height , 16px );\n    background-size: var( --icon-member-banking-16-background-size , 16px 16px ); \n  }\n</style>\n<div id='icon-member-banking'></div>"
    }
  },
  "icons-member-banking-": {
    "": {
      "output": "\n@mixin icon-member-banking { \n  background-image: var( --icon-member-banking-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-member-banking-width , 24px );\n  height: var( --icon-member-banking-height , 24px );\n  background-size: var( --icon-member-banking-background-size , 24px 24px ); \n}",
      "example": "\n<style>\n  #icon-member-banking { \n    background-image: var( --icon-member-banking-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-member-banking-width , 24px );\n    height: var( --icon-member-banking-height , 24px );\n    background-size: var( --icon-member-banking-background-size , 24px 24px ); \n  }\n</style>\n<div id='icon-member-banking'></div>"
    }
  },
  "icons-member-banking-24": {
    "": {
      "output": "\n@mixin icon-member-banking-24 { \n  background-image: var( --icon-member-banking-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-member-banking-24-width , 24px );\n  height: var( --icon-member-banking-24-height , 24px );\n  background-size: var( --icon-member-banking-24-background-size , 24px 24px ); \n}",
      "example": "\n<style>\n  #icon-member-banking { \n    background-image: var( --icon-member-banking-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-member-banking-24-width , 24px );\n    height: var( --icon-member-banking-24-height , 24px );\n    background-size: var( --icon-member-banking-24-background-size , 24px 24px ); \n  }\n</style>\n<div id='icon-member-banking'></div>"
    }
  },
  "icons-member-banking-32": {
    "": {
      "output": "\n@mixin icon-member-banking-32 { \n  background-image: var( --icon-member-banking-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-member-banking-32-width , 32px );\n  height: var( --icon-member-banking-32-height , 32px );\n  background-size: var( --icon-member-banking-32-background-size , 32px 32px ); \n}",
      "example": "\n<style>\n  #icon-member-banking { \n    background-image: var( --icon-member-banking-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-member-banking-32-width , 32px );\n    height: var( --icon-member-banking-32-height , 32px );\n    background-size: var( --icon-member-banking-32-background-size , 32px 32px ); \n  }\n</style>\n<div id='icon-member-banking'></div>"
    }
  },
  "icons-member-banking-48": {
    "": {
      "output": "\n@mixin icon-member-banking-48 { \n  background-image: var( --icon-member-banking-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-member-banking-48-width , 48px );\n  height: var( --icon-member-banking-48-height , 48px );\n  background-size: var( --icon-member-banking-48-background-size , 48px 48px ); \n}",
      "example": "\n<style>\n  #icon-member-banking { \n    background-image: var( --icon-member-banking-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-member-banking-48-width , 48px );\n    height: var( --icon-member-banking-48-height , 48px );\n    background-size: var( --icon-member-banking-48-background-size , 48px 48px ); \n  }\n</style>\n<div id='icon-member-banking'></div>"
    }
  },
  "icons-member-banking-64": {
    "": {
      "output": "\n@mixin icon-member-banking-64 { \n  background-image: var( --icon-member-banking-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-member-banking-64-width , 64px );\n  height: var( --icon-member-banking-64-height , 64px );\n  background-size: var( --icon-member-banking-64-background-size , 64px 64px ); \n}",
      "example": "\n<style>\n  #icon-member-banking { \n    background-image: var( --icon-member-banking-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-member-banking-64-width , 64px );\n    height: var( --icon-member-banking-64-height , 64px );\n    background-size: var( --icon-member-banking-64-background-size , 64px 64px ); \n  }\n</style>\n<div id='icon-member-banking'></div>"
    }
  },
  "icons-search-12": {
    "": {
      "output": "\n@mixin icon-search-12 { \n  background-image: var( --icon-search-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-search-12-width , 12px );\n  height: var( --icon-search-12-height , 12px );\n  background-size: var( --icon-search-12-background-size , 12px 12px ); \n}",
      "example": "\n<style>\n  #icon-search { \n    background-image: var( --icon-search-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-search-12-width , 12px );\n    height: var( --icon-search-12-height , 12px );\n    background-size: var( --icon-search-12-background-size , 12px 12px ); \n  }\n</style>\n<div id='icon-search'></div>"
    }
  },
  "icons-search-16": {
    "": {
      "output": "\n@mixin icon-search-16 { \n  background-image: var( --icon-search-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-search-16-width , 16px );\n  height: var( --icon-search-16-height , 16px );\n  background-size: var( --icon-search-16-background-size , 16px 16px ); \n}",
      "example": "\n<style>\n  #icon-search { \n    background-image: var( --icon-search-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-search-16-width , 16px );\n    height: var( --icon-search-16-height , 16px );\n    background-size: var( --icon-search-16-background-size , 16px 16px ); \n  }\n</style>\n<div id='icon-search'></div>"
    }
  },
  "icons-search-": {
    "": {
      "output": "\n@mixin icon-search { \n  background-image: var( --icon-search-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-search-width , 24px );\n  height: var( --icon-search-height , 24px );\n  background-size: var( --icon-search-background-size , 24px 24px ); \n}",
      "example": "\n<style>\n  #icon-search { \n    background-image: var( --icon-search-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-search-width , 24px );\n    height: var( --icon-search-height , 24px );\n    background-size: var( --icon-search-background-size , 24px 24px ); \n  }\n</style>\n<div id='icon-search'></div>"
    }
  },
  "icons-search-24": {
    "": {
      "output": "\n@mixin icon-search-24 { \n  background-image: var( --icon-search-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-search-24-width , 24px );\n  height: var( --icon-search-24-height , 24px );\n  background-size: var( --icon-search-24-background-size , 24px 24px ); \n}",
      "example": "\n<style>\n  #icon-search { \n    background-image: var( --icon-search-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-search-24-width , 24px );\n    height: var( --icon-search-24-height , 24px );\n    background-size: var( --icon-search-24-background-size , 24px 24px ); \n  }\n</style>\n<div id='icon-search'></div>"
    }
  },
  "icons-search-32": {
    "": {
      "output": "\n@mixin icon-search-32 { \n  background-image: var( --icon-search-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-search-32-width , 32px );\n  height: var( --icon-search-32-height , 32px );\n  background-size: var( --icon-search-32-background-size , 32px 32px ); \n}",
      "example": "\n<style>\n  #icon-search { \n    background-image: var( --icon-search-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-search-32-width , 32px );\n    height: var( --icon-search-32-height , 32px );\n    background-size: var( --icon-search-32-background-size , 32px 32px ); \n  }\n</style>\n<div id='icon-search'></div>"
    }
  },
  "icons-search-48": {
    "": {
      "output": "\n@mixin icon-search-48 { \n  background-image: var( --icon-search-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-search-48-width , 48px );\n  height: var( --icon-search-48-height , 48px );\n  background-size: var( --icon-search-48-background-size , 48px 48px ); \n}",
      "example": "\n<style>\n  #icon-search { \n    background-image: var( --icon-search-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-search-48-width , 48px );\n    height: var( --icon-search-48-height , 48px );\n    background-size: var( --icon-search-48-background-size , 48px 48px ); \n  }\n</style>\n<div id='icon-search'></div>"
    }
  },
  "icons-search-64": {
    "": {
      "output": "\n@mixin icon-search-64 { \n  background-image: var( --icon-search-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-search-64-width , 64px );\n  height: var( --icon-search-64-height , 64px );\n  background-size: var( --icon-search-64-background-size , 64px 64px ); \n}",
      "example": "\n<style>\n  #icon-search { \n    background-image: var( --icon-search-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-search-64-width , 64px );\n    height: var( --icon-search-64-height , 64px );\n    background-size: var( --icon-search-64-background-size , 64px 64px ); \n  }\n</style>\n<div id='icon-search'></div>"
    }
  },
  "icons-profile-12": {
    "": {
      "output": "\n@mixin icon-profile-12 { \n  background-image: var( --icon-profile-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-profile-12-width , 12px );\n  height: var( --icon-profile-12-height , 12px );\n  background-size: var( --icon-profile-12-background-size , 12px 12px ); \n}",
      "example": "\n<style>\n  #icon-profile { \n    background-image: var( --icon-profile-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-profile-12-width , 12px );\n    height: var( --icon-profile-12-height , 12px );\n    background-size: var( --icon-profile-12-background-size , 12px 12px ); \n  }\n</style>\n<div id='icon-profile'></div>"
    }
  },
  "icons-profile-16": {
    "": {
      "output": "\n@mixin icon-profile-16 { \n  background-image: var( --icon-profile-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-profile-16-width , 16px );\n  height: var( --icon-profile-16-height , 16px );\n  background-size: var( --icon-profile-16-background-size , 16px 16px ); \n}",
      "example": "\n<style>\n  #icon-profile { \n    background-image: var( --icon-profile-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-profile-16-width , 16px );\n    height: var( --icon-profile-16-height , 16px );\n    background-size: var( --icon-profile-16-background-size , 16px 16px ); \n  }\n</style>\n<div id='icon-profile'></div>"
    }
  },
  "icons-profile-": {
    "": {
      "output": "\n@mixin icon-profile { \n  background-image: var( --icon-profile-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-profile-width , 24px );\n  height: var( --icon-profile-height , 24px );\n  background-size: var( --icon-profile-background-size , 24px 24px ); \n}",
      "example": "\n<style>\n  #icon-profile { \n    background-image: var( --icon-profile-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-profile-width , 24px );\n    height: var( --icon-profile-height , 24px );\n    background-size: var( --icon-profile-background-size , 24px 24px ); \n  }\n</style>\n<div id='icon-profile'></div>"
    }
  },
  "icons-profile-24": {
    "": {
      "output": "\n@mixin icon-profile-24 { \n  background-image: var( --icon-profile-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-profile-24-width , 24px );\n  height: var( --icon-profile-24-height , 24px );\n  background-size: var( --icon-profile-24-background-size , 24px 24px ); \n}",
      "example": "\n<style>\n  #icon-profile { \n    background-image: var( --icon-profile-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-profile-24-width , 24px );\n    height: var( --icon-profile-24-height , 24px );\n    background-size: var( --icon-profile-24-background-size , 24px 24px ); \n  }\n</style>\n<div id='icon-profile'></div>"
    }
  },
  "icons-profile-32": {
    "": {
      "output": "\n@mixin icon-profile-32 { \n  background-image: var( --icon-profile-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-profile-32-width , 32px );\n  height: var( --icon-profile-32-height , 32px );\n  background-size: var( --icon-profile-32-background-size , 32px 32px ); \n}",
      "example": "\n<style>\n  #icon-profile { \n    background-image: var( --icon-profile-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-profile-32-width , 32px );\n    height: var( --icon-profile-32-height , 32px );\n    background-size: var( --icon-profile-32-background-size , 32px 32px ); \n  }\n</style>\n<div id='icon-profile'></div>"
    }
  },
  "icons-profile-48": {
    "": {
      "output": "\n@mixin icon-profile-48 { \n  background-image: var( --icon-profile-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-profile-48-width , 48px );\n  height: var( --icon-profile-48-height , 48px );\n  background-size: var( --icon-profile-48-background-size , 48px 48px ); \n}",
      "example": "\n<style>\n  #icon-profile { \n    background-image: var( --icon-profile-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-profile-48-width , 48px );\n    height: var( --icon-profile-48-height , 48px );\n    background-size: var( --icon-profile-48-background-size , 48px 48px ); \n  }\n</style>\n<div id='icon-profile'></div>"
    }
  },
  "icons-profile-64": {
    "": {
      "output": "\n@mixin icon-profile-64 { \n  background-image: var( --icon-profile-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-profile-64-width , 64px );\n  height: var( --icon-profile-64-height , 64px );\n  background-size: var( --icon-profile-64-background-size , 64px 64px ); \n}",
      "example": "\n<style>\n  #icon-profile { \n    background-image: var( --icon-profile-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-profile-64-width , 64px );\n    height: var( --icon-profile-64-height , 64px );\n    background-size: var( --icon-profile-64-background-size , 64px 64px ); \n  }\n</style>\n<div id='icon-profile'></div>"
    }
  },
  "icons-insights-12": {
    "": {
      "output": "\n@mixin icon-insights-12 { \n  background-image: var( --icon-insights-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-insights-12-width , 12px );\n  height: var( --icon-insights-12-height , 12px );\n  background-size: var( --icon-insights-12-background-size , 12px 12px ); \n}",
      "example": "\n<style>\n  #icon-insights { \n    background-image: var( --icon-insights-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-insights-12-width , 12px );\n    height: var( --icon-insights-12-height , 12px );\n    background-size: var( --icon-insights-12-background-size , 12px 12px ); \n  }\n</style>\n<div id='icon-insights'></div>"
    }
  },
  "icons-insights-16": {
    "": {
      "output": "\n@mixin icon-insights-16 { \n  background-image: var( --icon-insights-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-insights-16-width , 16px );\n  height: var( --icon-insights-16-height , 16px );\n  background-size: var( --icon-insights-16-background-size , 16px 16px ); \n}",
      "example": "\n<style>\n  #icon-insights { \n    background-image: var( --icon-insights-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-insights-16-width , 16px );\n    height: var( --icon-insights-16-height , 16px );\n    background-size: var( --icon-insights-16-background-size , 16px 16px ); \n  }\n</style>\n<div id='icon-insights'></div>"
    }
  },
  "icons-insights-": {
    "": {
      "output": "\n@mixin icon-insights { \n  background-image: var( --icon-insights-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-insights-width , 24px );\n  height: var( --icon-insights-height , 24px );\n  background-size: var( --icon-insights-background-size , 24px 24px ); \n}",
      "example": "\n<style>\n  #icon-insights { \n    background-image: var( --icon-insights-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-insights-width , 24px );\n    height: var( --icon-insights-height , 24px );\n    background-size: var( --icon-insights-background-size , 24px 24px ); \n  }\n</style>\n<div id='icon-insights'></div>"
    }
  },
  "icons-insights-24": {
    "": {
      "output": "\n@mixin icon-insights-24 { \n  background-image: var( --icon-insights-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-insights-24-width , 24px );\n  height: var( --icon-insights-24-height , 24px );\n  background-size: var( --icon-insights-24-background-size , 24px 24px ); \n}",
      "example": "\n<style>\n  #icon-insights { \n    background-image: var( --icon-insights-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-insights-24-width , 24px );\n    height: var( --icon-insights-24-height , 24px );\n    background-size: var( --icon-insights-24-background-size , 24px 24px ); \n  }\n</style>\n<div id='icon-insights'></div>"
    }
  },
  "icons-insights-32": {
    "": {
      "output": "\n@mixin icon-insights-32 { \n  background-image: var( --icon-insights-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-insights-32-width , 32px );\n  height: var( --icon-insights-32-height , 32px );\n  background-size: var( --icon-insights-32-background-size , 32px 32px ); \n}",
      "example": "\n<style>\n  #icon-insights { \n    background-image: var( --icon-insights-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-insights-32-width , 32px );\n    height: var( --icon-insights-32-height , 32px );\n    background-size: var( --icon-insights-32-background-size , 32px 32px ); \n  }\n</style>\n<div id='icon-insights'></div>"
    }
  },
  "icons-insights-48": {
    "": {
      "output": "\n@mixin icon-insights-48 { \n  background-image: var( --icon-insights-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-insights-48-width , 48px );\n  height: var( --icon-insights-48-height , 48px );\n  background-size: var( --icon-insights-48-background-size , 48px 48px ); \n}",
      "example": "\n<style>\n  #icon-insights { \n    background-image: var( --icon-insights-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-insights-48-width , 48px );\n    height: var( --icon-insights-48-height , 48px );\n    background-size: var( --icon-insights-48-background-size , 48px 48px ); \n  }\n</style>\n<div id='icon-insights'></div>"
    }
  },
  "icons-insights-64": {
    "": {
      "output": "\n@mixin icon-insights-64 { \n  background-image: var( --icon-insights-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-insights-64-width , 64px );\n  height: var( --icon-insights-64-height , 64px );\n  background-size: var( --icon-insights-64-background-size , 64px 64px ); \n}",
      "example": "\n<style>\n  #icon-insights { \n    background-image: var( --icon-insights-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-insights-64-width , 64px );\n    height: var( --icon-insights-64-height , 64px );\n    background-size: var( --icon-insights-64-background-size , 64px 64px ); \n  }\n</style>\n<div id='icon-insights'></div>"
    }
  },
  "icons-comment-12": {
    "": {
      "output": "\n@mixin icon-comment-12 { \n  background-image: var( --icon-comment-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-comment-12-width , 12px );\n  height: var( --icon-comment-12-height , 12px );\n  background-size: var( --icon-comment-12-background-size , 12px 12px ); \n}",
      "example": "\n<style>\n  #icon-comment { \n    background-image: var( --icon-comment-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-comment-12-width , 12px );\n    height: var( --icon-comment-12-height , 12px );\n    background-size: var( --icon-comment-12-background-size , 12px 12px ); \n  }\n</style>\n<div id='icon-comment'></div>"
    }
  },
  "icons-comment-16": {
    "": {
      "output": "\n@mixin icon-comment-16 { \n  background-image: var( --icon-comment-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-comment-16-width , 16px );\n  height: var( --icon-comment-16-height , 16px );\n  background-size: var( --icon-comment-16-background-size , 16px 16px ); \n}",
      "example": "\n<style>\n  #icon-comment { \n    background-image: var( --icon-comment-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-comment-16-width , 16px );\n    height: var( --icon-comment-16-height , 16px );\n    background-size: var( --icon-comment-16-background-size , 16px 16px ); \n  }\n</style>\n<div id='icon-comment'></div>"
    }
  },
  "icons-comment-": {
    "": {
      "output": "\n@mixin icon-comment { \n  background-image: var( --icon-comment-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-comment-width , 24px );\n  height: var( --icon-comment-height , 24px );\n  background-size: var( --icon-comment-background-size , 24px 24px ); \n}",
      "example": "\n<style>\n  #icon-comment { \n    background-image: var( --icon-comment-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-comment-width , 24px );\n    height: var( --icon-comment-height , 24px );\n    background-size: var( --icon-comment-background-size , 24px 24px ); \n  }\n</style>\n<div id='icon-comment'></div>"
    }
  },
  "icons-comment-24": {
    "": {
      "output": "\n@mixin icon-comment-24 { \n  background-image: var( --icon-comment-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-comment-24-width , 24px );\n  height: var( --icon-comment-24-height , 24px );\n  background-size: var( --icon-comment-24-background-size , 24px 24px ); \n}",
      "example": "\n<style>\n  #icon-comment { \n    background-image: var( --icon-comment-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-comment-24-width , 24px );\n    height: var( --icon-comment-24-height , 24px );\n    background-size: var( --icon-comment-24-background-size , 24px 24px ); \n  }\n</style>\n<div id='icon-comment'></div>"
    }
  },
  "icons-comment-32": {
    "": {
      "output": "\n@mixin icon-comment-32 { \n  background-image: var( --icon-comment-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-comment-32-width , 32px );\n  height: var( --icon-comment-32-height , 32px );\n  background-size: var( --icon-comment-32-background-size , 32px 32px ); \n}",
      "example": "\n<style>\n  #icon-comment { \n    background-image: var( --icon-comment-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-comment-32-width , 32px );\n    height: var( --icon-comment-32-height , 32px );\n    background-size: var( --icon-comment-32-background-size , 32px 32px ); \n  }\n</style>\n<div id='icon-comment'></div>"
    }
  },
  "icons-comment-48": {
    "": {
      "output": "\n@mixin icon-comment-48 { \n  background-image: var( --icon-comment-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-comment-48-width , 48px );\n  height: var( --icon-comment-48-height , 48px );\n  background-size: var( --icon-comment-48-background-size , 48px 48px ); \n}",
      "example": "\n<style>\n  #icon-comment { \n    background-image: var( --icon-comment-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-comment-48-width , 48px );\n    height: var( --icon-comment-48-height , 48px );\n    background-size: var( --icon-comment-48-background-size , 48px 48px ); \n  }\n</style>\n<div id='icon-comment'></div>"
    }
  },
  "icons-comment-64": {
    "": {
      "output": "\n@mixin icon-comment-64 { \n  background-image: var( --icon-comment-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-comment-64-width , 64px );\n  height: var( --icon-comment-64-height , 64px );\n  background-size: var( --icon-comment-64-background-size , 64px 64px ); \n}",
      "example": "\n<style>\n  #icon-comment { \n    background-image: var( --icon-comment-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-comment-64-width , 64px );\n    height: var( --icon-comment-64-height , 64px );\n    background-size: var( --icon-comment-64-background-size , 64px 64px ); \n  }\n</style>\n<div id='icon-comment'></div>"
    }
  },
  "icons-accounts-12": {
    "": {
      "output": "\n@mixin icon-accounts-12 { \n  background-image: var( --icon-accounts-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-accounts-12-width , 12px );\n  height: var( --icon-accounts-12-height , 12px );\n  background-size: var( --icon-accounts-12-background-size , 12px 12px ); \n}",
      "example": "\n<style>\n  #icon-accounts { \n    background-image: var( --icon-accounts-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-accounts-12-width , 12px );\n    height: var( --icon-accounts-12-height , 12px );\n    background-size: var( --icon-accounts-12-background-size , 12px 12px ); \n  }\n</style>\n<div id='icon-accounts'></div>"
    }
  },
  "icons-accounts-16": {
    "": {
      "output": "\n@mixin icon-accounts-16 { \n  background-image: var( --icon-accounts-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-accounts-16-width , 16px );\n  height: var( --icon-accounts-16-height , 16px );\n  background-size: var( --icon-accounts-16-background-size , 16px 16px ); \n}",
      "example": "\n<style>\n  #icon-accounts { \n    background-image: var( --icon-accounts-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-accounts-16-width , 16px );\n    height: var( --icon-accounts-16-height , 16px );\n    background-size: var( --icon-accounts-16-background-size , 16px 16px ); \n  }\n</style>\n<div id='icon-accounts'></div>"
    }
  },
  "icons-accounts-": {
    "": {
      "output": "\n@mixin icon-accounts { \n  background-image: var( --icon-accounts-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-accounts-width , 24px );\n  height: var( --icon-accounts-height , 24px );\n  background-size: var( --icon-accounts-background-size , 24px 24px ); \n}",
      "example": "\n<style>\n  #icon-accounts { \n    background-image: var( --icon-accounts-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-accounts-width , 24px );\n    height: var( --icon-accounts-height , 24px );\n    background-size: var( --icon-accounts-background-size , 24px 24px ); \n  }\n</style>\n<div id='icon-accounts'></div>"
    }
  },
  "icons-accounts-24": {
    "": {
      "output": "\n@mixin icon-accounts-24 { \n  background-image: var( --icon-accounts-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-accounts-24-width , 24px );\n  height: var( --icon-accounts-24-height , 24px );\n  background-size: var( --icon-accounts-24-background-size , 24px 24px ); \n}",
      "example": "\n<style>\n  #icon-accounts { \n    background-image: var( --icon-accounts-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-accounts-24-width , 24px );\n    height: var( --icon-accounts-24-height , 24px );\n    background-size: var( --icon-accounts-24-background-size , 24px 24px ); \n  }\n</style>\n<div id='icon-accounts'></div>"
    }
  },
  "icons-accounts-32": {
    "": {
      "output": "\n@mixin icon-accounts-32 { \n  background-image: var( --icon-accounts-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-accounts-32-width , 32px );\n  height: var( --icon-accounts-32-height , 32px );\n  background-size: var( --icon-accounts-32-background-size , 32px 32px ); \n}",
      "example": "\n<style>\n  #icon-accounts { \n    background-image: var( --icon-accounts-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-accounts-32-width , 32px );\n    height: var( --icon-accounts-32-height , 32px );\n    background-size: var( --icon-accounts-32-background-size , 32px 32px ); \n  }\n</style>\n<div id='icon-accounts'></div>"
    }
  },
  "icons-accounts-48": {
    "": {
      "output": "\n@mixin icon-accounts-48 { \n  background-image: var( --icon-accounts-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-accounts-48-width , 48px );\n  height: var( --icon-accounts-48-height , 48px );\n  background-size: var( --icon-accounts-48-background-size , 48px 48px ); \n}",
      "example": "\n<style>\n  #icon-accounts { \n    background-image: var( --icon-accounts-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-accounts-48-width , 48px );\n    height: var( --icon-accounts-48-height , 48px );\n    background-size: var( --icon-accounts-48-background-size , 48px 48px ); \n  }\n</style>\n<div id='icon-accounts'></div>"
    }
  },
  "icons-accounts-64": {
    "": {
      "output": "\n@mixin icon-accounts-64 { \n  background-image: var( --icon-accounts-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-accounts-64-width , 64px );\n  height: var( --icon-accounts-64-height , 64px );\n  background-size: var( --icon-accounts-64-background-size , 64px 64px ); \n}",
      "example": "\n<style>\n  #icon-accounts { \n    background-image: var( --icon-accounts-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-accounts-64-width , 64px );\n    height: var( --icon-accounts-64-height , 64px );\n    background-size: var( --icon-accounts-64-background-size , 64px 64px ); \n  }\n</style>\n<div id='icon-accounts'></div>"
    }
  },
  "icons-appointment-12": {
    "": {
      "output": "\n@mixin icon-appointment-12 { \n  background-image: var( --icon-appointment-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-appointment-12-width , 12px );\n  height: var( --icon-appointment-12-height , 12px );\n  background-size: var( --icon-appointment-12-background-size , 12px 12px ); \n}",
      "example": "\n<style>\n  #icon-appointment { \n    background-image: var( --icon-appointment-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-appointment-12-width , 12px );\n    height: var( --icon-appointment-12-height , 12px );\n    background-size: var( --icon-appointment-12-background-size , 12px 12px ); \n  }\n</style>\n<div id='icon-appointment'></div>"
    }
  },
  "icons-appointment-16": {
    "": {
      "output": "\n@mixin icon-appointment-16 { \n  background-image: var( --icon-appointment-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-appointment-16-width , 16px );\n  height: var( --icon-appointment-16-height , 16px );\n  background-size: var( --icon-appointment-16-background-size , 16px 16px ); \n}",
      "example": "\n<style>\n  #icon-appointment { \n    background-image: var( --icon-appointment-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-appointment-16-width , 16px );\n    height: var( --icon-appointment-16-height , 16px );\n    background-size: var( --icon-appointment-16-background-size , 16px 16px ); \n  }\n</style>\n<div id='icon-appointment'></div>"
    }
  },
  "icons-appointment-": {
    "": {
      "output": "\n@mixin icon-appointment { \n  background-image: var( --icon-appointment-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-appointment-width , 24px );\n  height: var( --icon-appointment-height , 24px );\n  background-size: var( --icon-appointment-background-size , 24px 24px ); \n}",
      "example": "\n<style>\n  #icon-appointment { \n    background-image: var( --icon-appointment-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-appointment-width , 24px );\n    height: var( --icon-appointment-height , 24px );\n    background-size: var( --icon-appointment-background-size , 24px 24px ); \n  }\n</style>\n<div id='icon-appointment'></div>"
    }
  },
  "icons-appointment-24": {
    "": {
      "output": "\n@mixin icon-appointment-24 { \n  background-image: var( --icon-appointment-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-appointment-24-width , 24px );\n  height: var( --icon-appointment-24-height , 24px );\n  background-size: var( --icon-appointment-24-background-size , 24px 24px ); \n}",
      "example": "\n<style>\n  #icon-appointment { \n    background-image: var( --icon-appointment-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-appointment-24-width , 24px );\n    height: var( --icon-appointment-24-height , 24px );\n    background-size: var( --icon-appointment-24-background-size , 24px 24px ); \n  }\n</style>\n<div id='icon-appointment'></div>"
    }
  },
  "icons-appointment-32": {
    "": {
      "output": "\n@mixin icon-appointment-32 { \n  background-image: var( --icon-appointment-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-appointment-32-width , 32px );\n  height: var( --icon-appointment-32-height , 32px );\n  background-size: var( --icon-appointment-32-background-size , 32px 32px ); \n}",
      "example": "\n<style>\n  #icon-appointment { \n    background-image: var( --icon-appointment-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-appointment-32-width , 32px );\n    height: var( --icon-appointment-32-height , 32px );\n    background-size: var( --icon-appointment-32-background-size , 32px 32px ); \n  }\n</style>\n<div id='icon-appointment'></div>"
    }
  },
  "icons-appointment-48": {
    "": {
      "output": "\n@mixin icon-appointment-48 { \n  background-image: var( --icon-appointment-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-appointment-48-width , 48px );\n  height: var( --icon-appointment-48-height , 48px );\n  background-size: var( --icon-appointment-48-background-size , 48px 48px ); \n}",
      "example": "\n<style>\n  #icon-appointment { \n    background-image: var( --icon-appointment-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-appointment-48-width , 48px );\n    height: var( --icon-appointment-48-height , 48px );\n    background-size: var( --icon-appointment-48-background-size , 48px 48px ); \n  }\n</style>\n<div id='icon-appointment'></div>"
    }
  },
  "icons-appointment-64": {
    "": {
      "output": "\n@mixin icon-appointment-64 { \n  background-image: var( --icon-appointment-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-appointment-64-width , 64px );\n  height: var( --icon-appointment-64-height , 64px );\n  background-size: var( --icon-appointment-64-background-size , 64px 64px ); \n}",
      "example": "\n<style>\n  #icon-appointment { \n    background-image: var( --icon-appointment-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-appointment-64-width , 64px );\n    height: var( --icon-appointment-64-height , 64px );\n    background-size: var( --icon-appointment-64-background-size , 64px 64px ); \n  }\n</style>\n<div id='icon-appointment'></div>"
    }
  },
  "icons-relationship-12": {
    "": {
      "output": "\n@mixin icon-relationship-12 { \n  background-image: var( --icon-relationship-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-relationship-12-width , 12px );\n  height: var( --icon-relationship-12-height , 12px );\n  background-size: var( --icon-relationship-12-background-size , 12px 12px ); \n}",
      "example": "\n<style>\n  #icon-relationship { \n    background-image: var( --icon-relationship-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-relationship-12-width , 12px );\n    height: var( --icon-relationship-12-height , 12px );\n    background-size: var( --icon-relationship-12-background-size , 12px 12px ); \n  }\n</style>\n<div id='icon-relationship'></div>"
    }
  },
  "icons-relationship-16": {
    "": {
      "output": "\n@mixin icon-relationship-16 { \n  background-image: var( --icon-relationship-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-relationship-16-width , 16px );\n  height: var( --icon-relationship-16-height , 16px );\n  background-size: var( --icon-relationship-16-background-size , 16px 16px ); \n}",
      "example": "\n<style>\n  #icon-relationship { \n    background-image: var( --icon-relationship-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-relationship-16-width , 16px );\n    height: var( --icon-relationship-16-height , 16px );\n    background-size: var( --icon-relationship-16-background-size , 16px 16px ); \n  }\n</style>\n<div id='icon-relationship'></div>"
    }
  },
  "icons-relationship-": {
    "": {
      "output": "\n@mixin icon-relationship { \n  background-image: var( --icon-relationship-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-relationship-width , 24px );\n  height: var( --icon-relationship-height , 24px );\n  background-size: var( --icon-relationship-background-size , 24px 24px ); \n}",
      "example": "\n<style>\n  #icon-relationship { \n    background-image: var( --icon-relationship-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-relationship-width , 24px );\n    height: var( --icon-relationship-height , 24px );\n    background-size: var( --icon-relationship-background-size , 24px 24px ); \n  }\n</style>\n<div id='icon-relationship'></div>"
    }
  },
  "icons-relationship-24": {
    "": {
      "output": "\n@mixin icon-relationship-24 { \n  background-image: var( --icon-relationship-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-relationship-24-width , 24px );\n  height: var( --icon-relationship-24-height , 24px );\n  background-size: var( --icon-relationship-24-background-size , 24px 24px ); \n}",
      "example": "\n<style>\n  #icon-relationship { \n    background-image: var( --icon-relationship-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-relationship-24-width , 24px );\n    height: var( --icon-relationship-24-height , 24px );\n    background-size: var( --icon-relationship-24-background-size , 24px 24px ); \n  }\n</style>\n<div id='icon-relationship'></div>"
    }
  },
  "icons-relationship-32": {
    "": {
      "output": "\n@mixin icon-relationship-32 { \n  background-image: var( --icon-relationship-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-relationship-32-width , 32px );\n  height: var( --icon-relationship-32-height , 32px );\n  background-size: var( --icon-relationship-32-background-size , 32px 32px ); \n}",
      "example": "\n<style>\n  #icon-relationship { \n    background-image: var( --icon-relationship-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-relationship-32-width , 32px );\n    height: var( --icon-relationship-32-height , 32px );\n    background-size: var( --icon-relationship-32-background-size , 32px 32px ); \n  }\n</style>\n<div id='icon-relationship'></div>"
    }
  },
  "icons-relationship-48": {
    "": {
      "output": "\n@mixin icon-relationship-48 { \n  background-image: var( --icon-relationship-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-relationship-48-width , 48px );\n  height: var( --icon-relationship-48-height , 48px );\n  background-size: var( --icon-relationship-48-background-size , 48px 48px ); \n}",
      "example": "\n<style>\n  #icon-relationship { \n    background-image: var( --icon-relationship-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-relationship-48-width , 48px );\n    height: var( --icon-relationship-48-height , 48px );\n    background-size: var( --icon-relationship-48-background-size , 48px 48px ); \n  }\n</style>\n<div id='icon-relationship'></div>"
    }
  },
  "icons-relationship-64": {
    "": {
      "output": "\n@mixin icon-relationship-64 { \n  background-image: var( --icon-relationship-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-relationship-64-width , 64px );\n  height: var( --icon-relationship-64-height , 64px );\n  background-size: var( --icon-relationship-64-background-size , 64px 64px ); \n}",
      "example": "\n<style>\n  #icon-relationship { \n    background-image: var( --icon-relationship-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-relationship-64-width , 64px );\n    height: var( --icon-relationship-64-height , 64px );\n    background-size: var( --icon-relationship-64-background-size , 64px 64px ); \n  }\n</style>\n<div id='icon-relationship'></div>"
    }
  },
  "icons-deposit-12": {
    "": {
      "output": "\n@mixin icon-deposit-12 { \n  background-image: var( --icon-deposit-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-deposit-12-width , 12px );\n  height: var( --icon-deposit-12-height , 12px );\n  background-size: var( --icon-deposit-12-background-size , 12px 12px ); \n}",
      "example": "\n<style>\n  #icon-deposit { \n    background-image: var( --icon-deposit-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-deposit-12-width , 12px );\n    height: var( --icon-deposit-12-height , 12px );\n    background-size: var( --icon-deposit-12-background-size , 12px 12px ); \n  }\n</style>\n<div id='icon-deposit'></div>"
    }
  },
  "icons-deposit-16": {
    "": {
      "output": "\n@mixin icon-deposit-16 { \n  background-image: var( --icon-deposit-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-deposit-16-width , 16px );\n  height: var( --icon-deposit-16-height , 16px );\n  background-size: var( --icon-deposit-16-background-size , 16px 16px ); \n}",
      "example": "\n<style>\n  #icon-deposit { \n    background-image: var( --icon-deposit-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-deposit-16-width , 16px );\n    height: var( --icon-deposit-16-height , 16px );\n    background-size: var( --icon-deposit-16-background-size , 16px 16px ); \n  }\n</style>\n<div id='icon-deposit'></div>"
    }
  },
  "icons-deposit-": {
    "": {
      "output": "\n@mixin icon-deposit { \n  background-image: var( --icon-deposit-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-deposit-width , 24px );\n  height: var( --icon-deposit-height , 24px );\n  background-size: var( --icon-deposit-background-size , 24px 24px ); \n}",
      "example": "\n<style>\n  #icon-deposit { \n    background-image: var( --icon-deposit-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-deposit-width , 24px );\n    height: var( --icon-deposit-height , 24px );\n    background-size: var( --icon-deposit-background-size , 24px 24px ); \n  }\n</style>\n<div id='icon-deposit'></div>"
    }
  },
  "icons-deposit-24": {
    "": {
      "output": "\n@mixin icon-deposit-24 { \n  background-image: var( --icon-deposit-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-deposit-24-width , 24px );\n  height: var( --icon-deposit-24-height , 24px );\n  background-size: var( --icon-deposit-24-background-size , 24px 24px ); \n}",
      "example": "\n<style>\n  #icon-deposit { \n    background-image: var( --icon-deposit-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-deposit-24-width , 24px );\n    height: var( --icon-deposit-24-height , 24px );\n    background-size: var( --icon-deposit-24-background-size , 24px 24px ); \n  }\n</style>\n<div id='icon-deposit'></div>"
    }
  },
  "icons-deposit-32": {
    "": {
      "output": "\n@mixin icon-deposit-32 { \n  background-image: var( --icon-deposit-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-deposit-32-width , 32px );\n  height: var( --icon-deposit-32-height , 32px );\n  background-size: var( --icon-deposit-32-background-size , 32px 32px ); \n}",
      "example": "\n<style>\n  #icon-deposit { \n    background-image: var( --icon-deposit-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-deposit-32-width , 32px );\n    height: var( --icon-deposit-32-height , 32px );\n    background-size: var( --icon-deposit-32-background-size , 32px 32px ); \n  }\n</style>\n<div id='icon-deposit'></div>"
    }
  },
  "icons-deposit-48": {
    "": {
      "output": "\n@mixin icon-deposit-48 { \n  background-image: var( --icon-deposit-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-deposit-48-width , 48px );\n  height: var( --icon-deposit-48-height , 48px );\n  background-size: var( --icon-deposit-48-background-size , 48px 48px ); \n}",
      "example": "\n<style>\n  #icon-deposit { \n    background-image: var( --icon-deposit-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-deposit-48-width , 48px );\n    height: var( --icon-deposit-48-height , 48px );\n    background-size: var( --icon-deposit-48-background-size , 48px 48px ); \n  }\n</style>\n<div id='icon-deposit'></div>"
    }
  },
  "icons-deposit-64": {
    "": {
      "output": "\n@mixin icon-deposit-64 { \n  background-image: var( --icon-deposit-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-deposit-64-width , 64px );\n  height: var( --icon-deposit-64-height , 64px );\n  background-size: var( --icon-deposit-64-background-size , 64px 64px ); \n}",
      "example": "\n<style>\n  #icon-deposit { \n    background-image: var( --icon-deposit-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-deposit-64-width , 64px );\n    height: var( --icon-deposit-64-height , 64px );\n    background-size: var( --icon-deposit-64-background-size , 64px 64px ); \n  }\n</style>\n<div id='icon-deposit'></div>"
    }
  },
  "icons-withdrawl-12": {
    "": {
      "output": "\n@mixin icon-withdrawl-12 { \n  background-image: var( --icon-withdrawl-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-withdrawl-12-width , 12px );\n  height: var( --icon-withdrawl-12-height , 12px );\n  background-size: var( --icon-withdrawl-12-background-size , 12px 12px ); \n}",
      "example": "\n<style>\n  #icon-withdrawl { \n    background-image: var( --icon-withdrawl-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-withdrawl-12-width , 12px );\n    height: var( --icon-withdrawl-12-height , 12px );\n    background-size: var( --icon-withdrawl-12-background-size , 12px 12px ); \n  }\n</style>\n<div id='icon-withdrawl'></div>"
    }
  },
  "icons-withdrawl-16": {
    "": {
      "output": "\n@mixin icon-withdrawl-16 { \n  background-image: var( --icon-withdrawl-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-withdrawl-16-width , 16px );\n  height: var( --icon-withdrawl-16-height , 16px );\n  background-size: var( --icon-withdrawl-16-background-size , 16px 16px ); \n}",
      "example": "\n<style>\n  #icon-withdrawl { \n    background-image: var( --icon-withdrawl-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-withdrawl-16-width , 16px );\n    height: var( --icon-withdrawl-16-height , 16px );\n    background-size: var( --icon-withdrawl-16-background-size , 16px 16px ); \n  }\n</style>\n<div id='icon-withdrawl'></div>"
    }
  },
  "icons-withdrawl-": {
    "": {
      "output": "\n@mixin icon-withdrawl { \n  background-image: var( --icon-withdrawl-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-withdrawl-width , 24px );\n  height: var( --icon-withdrawl-height , 24px );\n  background-size: var( --icon-withdrawl-background-size , 24px 24px ); \n}",
      "example": "\n<style>\n  #icon-withdrawl { \n    background-image: var( --icon-withdrawl-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-withdrawl-width , 24px );\n    height: var( --icon-withdrawl-height , 24px );\n    background-size: var( --icon-withdrawl-background-size , 24px 24px ); \n  }\n</style>\n<div id='icon-withdrawl'></div>"
    }
  },
  "icons-withdrawl-24": {
    "": {
      "output": "\n@mixin icon-withdrawl-24 { \n  background-image: var( --icon-withdrawl-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-withdrawl-24-width , 24px );\n  height: var( --icon-withdrawl-24-height , 24px );\n  background-size: var( --icon-withdrawl-24-background-size , 24px 24px ); \n}",
      "example": "\n<style>\n  #icon-withdrawl { \n    background-image: var( --icon-withdrawl-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-withdrawl-24-width , 24px );\n    height: var( --icon-withdrawl-24-height , 24px );\n    background-size: var( --icon-withdrawl-24-background-size , 24px 24px ); \n  }\n</style>\n<div id='icon-withdrawl'></div>"
    }
  },
  "icons-withdrawl-32": {
    "": {
      "output": "\n@mixin icon-withdrawl-32 { \n  background-image: var( --icon-withdrawl-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-withdrawl-32-width , 32px );\n  height: var( --icon-withdrawl-32-height , 32px );\n  background-size: var( --icon-withdrawl-32-background-size , 32px 32px ); \n}",
      "example": "\n<style>\n  #icon-withdrawl { \n    background-image: var( --icon-withdrawl-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-withdrawl-32-width , 32px );\n    height: var( --icon-withdrawl-32-height , 32px );\n    background-size: var( --icon-withdrawl-32-background-size , 32px 32px ); \n  }\n</style>\n<div id='icon-withdrawl'></div>"
    }
  },
  "icons-withdrawl-48": {
    "": {
      "output": "\n@mixin icon-withdrawl-48 { \n  background-image: var( --icon-withdrawl-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-withdrawl-48-width , 48px );\n  height: var( --icon-withdrawl-48-height , 48px );\n  background-size: var( --icon-withdrawl-48-background-size , 48px 48px ); \n}",
      "example": "\n<style>\n  #icon-withdrawl { \n    background-image: var( --icon-withdrawl-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-withdrawl-48-width , 48px );\n    height: var( --icon-withdrawl-48-height , 48px );\n    background-size: var( --icon-withdrawl-48-background-size , 48px 48px ); \n  }\n</style>\n<div id='icon-withdrawl'></div>"
    }
  },
  "icons-withdrawl-64": {
    "": {
      "output": "\n@mixin icon-withdrawl-64 { \n  background-image: var( --icon-withdrawl-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-withdrawl-64-width , 64px );\n  height: var( --icon-withdrawl-64-height , 64px );\n  background-size: var( --icon-withdrawl-64-background-size , 64px 64px ); \n}",
      "example": "\n<style>\n  #icon-withdrawl { \n    background-image: var( --icon-withdrawl-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-withdrawl-64-width , 64px );\n    height: var( --icon-withdrawl-64-height , 64px );\n    background-size: var( --icon-withdrawl-64-background-size , 64px 64px ); \n  }\n</style>\n<div id='icon-withdrawl'></div>"
    }
  },
  "icons-transfer-12": {
    "": {
      "output": "\n@mixin icon-transfer-12 { \n  background-image: var( --icon-transfer-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-transfer-12-width , 12px );\n  height: var( --icon-transfer-12-height , 12px );\n  background-size: var( --icon-transfer-12-background-size , 12px 12px ); \n}",
      "example": "\n<style>\n  #icon-transfer { \n    background-image: var( --icon-transfer-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-transfer-12-width , 12px );\n    height: var( --icon-transfer-12-height , 12px );\n    background-size: var( --icon-transfer-12-background-size , 12px 12px ); \n  }\n</style>\n<div id='icon-transfer'></div>"
    }
  },
  "icons-transfer-16": {
    "": {
      "output": "\n@mixin icon-transfer-16 { \n  background-image: var( --icon-transfer-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-transfer-16-width , 16px );\n  height: var( --icon-transfer-16-height , 16px );\n  background-size: var( --icon-transfer-16-background-size , 16px 16px ); \n}",
      "example": "\n<style>\n  #icon-transfer { \n    background-image: var( --icon-transfer-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-transfer-16-width , 16px );\n    height: var( --icon-transfer-16-height , 16px );\n    background-size: var( --icon-transfer-16-background-size , 16px 16px ); \n  }\n</style>\n<div id='icon-transfer'></div>"
    }
  },
  "icons-transfer-": {
    "": {
      "output": "\n@mixin icon-transfer { \n  background-image: var( --icon-transfer-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-transfer-width , 24px );\n  height: var( --icon-transfer-height , 24px );\n  background-size: var( --icon-transfer-background-size , 24px 24px ); \n}",
      "example": "\n<style>\n  #icon-transfer { \n    background-image: var( --icon-transfer-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-transfer-width , 24px );\n    height: var( --icon-transfer-height , 24px );\n    background-size: var( --icon-transfer-background-size , 24px 24px ); \n  }\n</style>\n<div id='icon-transfer'></div>"
    }
  },
  "icons-transfer-24": {
    "": {
      "output": "\n@mixin icon-transfer-24 { \n  background-image: var( --icon-transfer-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-transfer-24-width , 24px );\n  height: var( --icon-transfer-24-height , 24px );\n  background-size: var( --icon-transfer-24-background-size , 24px 24px ); \n}",
      "example": "\n<style>\n  #icon-transfer { \n    background-image: var( --icon-transfer-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-transfer-24-width , 24px );\n    height: var( --icon-transfer-24-height , 24px );\n    background-size: var( --icon-transfer-24-background-size , 24px 24px ); \n  }\n</style>\n<div id='icon-transfer'></div>"
    }
  },
  "icons-transfer-32": {
    "": {
      "output": "\n@mixin icon-transfer-32 { \n  background-image: var( --icon-transfer-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-transfer-32-width , 32px );\n  height: var( --icon-transfer-32-height , 32px );\n  background-size: var( --icon-transfer-32-background-size , 32px 32px ); \n}",
      "example": "\n<style>\n  #icon-transfer { \n    background-image: var( --icon-transfer-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-transfer-32-width , 32px );\n    height: var( --icon-transfer-32-height , 32px );\n    background-size: var( --icon-transfer-32-background-size , 32px 32px ); \n  }\n</style>\n<div id='icon-transfer'></div>"
    }
  },
  "icons-transfer-48": {
    "": {
      "output": "\n@mixin icon-transfer-48 { \n  background-image: var( --icon-transfer-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-transfer-48-width , 48px );\n  height: var( --icon-transfer-48-height , 48px );\n  background-size: var( --icon-transfer-48-background-size , 48px 48px ); \n}",
      "example": "\n<style>\n  #icon-transfer { \n    background-image: var( --icon-transfer-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-transfer-48-width , 48px );\n    height: var( --icon-transfer-48-height , 48px );\n    background-size: var( --icon-transfer-48-background-size , 48px 48px ); \n  }\n</style>\n<div id='icon-transfer'></div>"
    }
  },
  "icons-transfer-64": {
    "": {
      "output": "\n@mixin icon-transfer-64 { \n  background-image: var( --icon-transfer-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-transfer-64-width , 64px );\n  height: var( --icon-transfer-64-height , 64px );\n  background-size: var( --icon-transfer-64-background-size , 64px 64px ); \n}",
      "example": "\n<style>\n  #icon-transfer { \n    background-image: var( --icon-transfer-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-transfer-64-width , 64px );\n    height: var( --icon-transfer-64-height , 64px );\n    background-size: var( --icon-transfer-64-background-size , 64px 64px ); \n  }\n</style>\n<div id='icon-transfer'></div>"
    }
  },
  "icons-correct-12": {
    "": {
      "output": "\n@mixin icon-correct-12 { \n  background-image: var( --icon-correct-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-correct-12-width , 12px );\n  height: var( --icon-correct-12-height , 12px );\n  background-size: var( --icon-correct-12-background-size , 12px 12px ); \n}",
      "example": "\n<style>\n  #icon-correct { \n    background-image: var( --icon-correct-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-correct-12-width , 12px );\n    height: var( --icon-correct-12-height , 12px );\n    background-size: var( --icon-correct-12-background-size , 12px 12px ); \n  }\n</style>\n<div id='icon-correct'></div>"
    }
  },
  "icons-correct-16": {
    "": {
      "output": "\n@mixin icon-correct-16 { \n  background-image: var( --icon-correct-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-correct-16-width , 16px );\n  height: var( --icon-correct-16-height , 16px );\n  background-size: var( --icon-correct-16-background-size , 16px 16px ); \n}",
      "example": "\n<style>\n  #icon-correct { \n    background-image: var( --icon-correct-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-correct-16-width , 16px );\n    height: var( --icon-correct-16-height , 16px );\n    background-size: var( --icon-correct-16-background-size , 16px 16px ); \n  }\n</style>\n<div id='icon-correct'></div>"
    }
  },
  "icons-correct-": {
    "": {
      "output": "\n@mixin icon-correct { \n  background-image: var( --icon-correct-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-correct-width , 24px );\n  height: var( --icon-correct-height , 24px );\n  background-size: var( --icon-correct-background-size , 24px 24px ); \n}",
      "example": "\n<style>\n  #icon-correct { \n    background-image: var( --icon-correct-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-correct-width , 24px );\n    height: var( --icon-correct-height , 24px );\n    background-size: var( --icon-correct-background-size , 24px 24px ); \n  }\n</style>\n<div id='icon-correct'></div>"
    }
  },
  "icons-correct-24": {
    "": {
      "output": "\n@mixin icon-correct-24 { \n  background-image: var( --icon-correct-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-correct-24-width , 24px );\n  height: var( --icon-correct-24-height , 24px );\n  background-size: var( --icon-correct-24-background-size , 24px 24px ); \n}",
      "example": "\n<style>\n  #icon-correct { \n    background-image: var( --icon-correct-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-correct-24-width , 24px );\n    height: var( --icon-correct-24-height , 24px );\n    background-size: var( --icon-correct-24-background-size , 24px 24px ); \n  }\n</style>\n<div id='icon-correct'></div>"
    }
  },
  "icons-correct-32": {
    "": {
      "output": "\n@mixin icon-correct-32 { \n  background-image: var( --icon-correct-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-correct-32-width , 32px );\n  height: var( --icon-correct-32-height , 32px );\n  background-size: var( --icon-correct-32-background-size , 32px 32px ); \n}",
      "example": "\n<style>\n  #icon-correct { \n    background-image: var( --icon-correct-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-correct-32-width , 32px );\n    height: var( --icon-correct-32-height , 32px );\n    background-size: var( --icon-correct-32-background-size , 32px 32px ); \n  }\n</style>\n<div id='icon-correct'></div>"
    }
  },
  "icons-correct-48": {
    "": {
      "output": "\n@mixin icon-correct-48 { \n  background-image: var( --icon-correct-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-correct-48-width , 48px );\n  height: var( --icon-correct-48-height , 48px );\n  background-size: var( --icon-correct-48-background-size , 48px 48px ); \n}",
      "example": "\n<style>\n  #icon-correct { \n    background-image: var( --icon-correct-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-correct-48-width , 48px );\n    height: var( --icon-correct-48-height , 48px );\n    background-size: var( --icon-correct-48-background-size , 48px 48px ); \n  }\n</style>\n<div id='icon-correct'></div>"
    }
  },
  "icons-correct-64": {
    "": {
      "output": "\n@mixin icon-correct-64 { \n  background-image: var( --icon-correct-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-correct-64-width , 64px );\n  height: var( --icon-correct-64-height , 64px );\n  background-size: var( --icon-correct-64-background-size , 64px 64px ); \n}",
      "example": "\n<style>\n  #icon-correct { \n    background-image: var( --icon-correct-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-correct-64-width , 64px );\n    height: var( --icon-correct-64-height , 64px );\n    background-size: var( --icon-correct-64-background-size , 64px 64px ); \n  }\n</style>\n<div id='icon-correct'></div>"
    }
  },
  "icons-radio-12": {
    "": {
      "output": "\n@mixin icon-radio-12 { \n  background-image: var( --icon-radio-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-radio-12-width , 12px );\n  height: var( --icon-radio-12-height , 12px );\n  background-size: var( --icon-radio-12-background-size , 12px 12px ); \n}",
      "example": "\n<style>\n  #icon-radio { \n    background-image: var( --icon-radio-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-radio-12-width , 12px );\n    height: var( --icon-radio-12-height , 12px );\n    background-size: var( --icon-radio-12-background-size , 12px 12px ); \n  }\n</style>\n<div id='icon-radio'></div>"
    }
  },
  "icons-radio-16": {
    "": {
      "output": "\n@mixin icon-radio-16 { \n  background-image: var( --icon-radio-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-radio-16-width , 16px );\n  height: var( --icon-radio-16-height , 16px );\n  background-size: var( --icon-radio-16-background-size , 16px 16px ); \n}",
      "example": "\n<style>\n  #icon-radio { \n    background-image: var( --icon-radio-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-radio-16-width , 16px );\n    height: var( --icon-radio-16-height , 16px );\n    background-size: var( --icon-radio-16-background-size , 16px 16px ); \n  }\n</style>\n<div id='icon-radio'></div>"
    }
  },
  "icons-radio-": {
    "": {
      "output": "\n@mixin icon-radio { \n  background-image: var( --icon-radio-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-radio-width , 24px );\n  height: var( --icon-radio-height , 24px );\n  background-size: var( --icon-radio-background-size , 24px 24px ); \n}",
      "example": "\n<style>\n  #icon-radio { \n    background-image: var( --icon-radio-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-radio-width , 24px );\n    height: var( --icon-radio-height , 24px );\n    background-size: var( --icon-radio-background-size , 24px 24px ); \n  }\n</style>\n<div id='icon-radio'></div>"
    }
  },
  "icons-radio-24": {
    "": {
      "output": "\n@mixin icon-radio-24 { \n  background-image: var( --icon-radio-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-radio-24-width , 24px );\n  height: var( --icon-radio-24-height , 24px );\n  background-size: var( --icon-radio-24-background-size , 24px 24px ); \n}",
      "example": "\n<style>\n  #icon-radio { \n    background-image: var( --icon-radio-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-radio-24-width , 24px );\n    height: var( --icon-radio-24-height , 24px );\n    background-size: var( --icon-radio-24-background-size , 24px 24px ); \n  }\n</style>\n<div id='icon-radio'></div>"
    }
  },
  "icons-radio-32": {
    "": {
      "output": "\n@mixin icon-radio-32 { \n  background-image: var( --icon-radio-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-radio-32-width , 32px );\n  height: var( --icon-radio-32-height , 32px );\n  background-size: var( --icon-radio-32-background-size , 32px 32px ); \n}",
      "example": "\n<style>\n  #icon-radio { \n    background-image: var( --icon-radio-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-radio-32-width , 32px );\n    height: var( --icon-radio-32-height , 32px );\n    background-size: var( --icon-radio-32-background-size , 32px 32px ); \n  }\n</style>\n<div id='icon-radio'></div>"
    }
  },
  "icons-radio-48": {
    "": {
      "output": "\n@mixin icon-radio-48 { \n  background-image: var( --icon-radio-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-radio-48-width , 48px );\n  height: var( --icon-radio-48-height , 48px );\n  background-size: var( --icon-radio-48-background-size , 48px 48px ); \n}",
      "example": "\n<style>\n  #icon-radio { \n    background-image: var( --icon-radio-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-radio-48-width , 48px );\n    height: var( --icon-radio-48-height , 48px );\n    background-size: var( --icon-radio-48-background-size , 48px 48px ); \n  }\n</style>\n<div id='icon-radio'></div>"
    }
  },
  "icons-radio-64": {
    "": {
      "output": "\n@mixin icon-radio-64 { \n  background-image: var( --icon-radio-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-radio-64-width , 64px );\n  height: var( --icon-radio-64-height , 64px );\n  background-size: var( --icon-radio-64-background-size , 64px 64px ); \n}",
      "example": "\n<style>\n  #icon-radio { \n    background-image: var( --icon-radio-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-radio-64-width , 64px );\n    height: var( --icon-radio-64-height , 64px );\n    background-size: var( --icon-radio-64-background-size , 64px 64px ); \n  }\n</style>\n<div id='icon-radio'></div>"
    }
  },
  "icons-radio-selected-12": {
    "": {
      "output": "\n@mixin icon-radio-selected-12 { \n  background-image: var( --icon-radio-selected-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-radio-selected-12-width , 12px );\n  height: var( --icon-radio-selected-12-height , 12px );\n  background-size: var( --icon-radio-selected-12-background-size , 12px 12px ); \n}",
      "example": "\n<style>\n  #icon-radio-selected { \n    background-image: var( --icon-radio-selected-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-radio-selected-12-width , 12px );\n    height: var( --icon-radio-selected-12-height , 12px );\n    background-size: var( --icon-radio-selected-12-background-size , 12px 12px ); \n  }\n</style>\n<div id='icon-radio-selected'></div>"
    }
  },
  "icons-radio-selected-16": {
    "": {
      "output": "\n@mixin icon-radio-selected-16 { \n  background-image: var( --icon-radio-selected-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-radio-selected-16-width , 16px );\n  height: var( --icon-radio-selected-16-height , 16px );\n  background-size: var( --icon-radio-selected-16-background-size , 16px 16px ); \n}",
      "example": "\n<style>\n  #icon-radio-selected { \n    background-image: var( --icon-radio-selected-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-radio-selected-16-width , 16px );\n    height: var( --icon-radio-selected-16-height , 16px );\n    background-size: var( --icon-radio-selected-16-background-size , 16px 16px ); \n  }\n</style>\n<div id='icon-radio-selected'></div>"
    }
  },
  "icons-radio-selected-": {
    "": {
      "output": "\n@mixin icon-radio-selected { \n  background-image: var( --icon-radio-selected-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-radio-selected-width , 24px );\n  height: var( --icon-radio-selected-height , 24px );\n  background-size: var( --icon-radio-selected-background-size , 24px 24px ); \n}",
      "example": "\n<style>\n  #icon-radio-selected { \n    background-image: var( --icon-radio-selected-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-radio-selected-width , 24px );\n    height: var( --icon-radio-selected-height , 24px );\n    background-size: var( --icon-radio-selected-background-size , 24px 24px ); \n  }\n</style>\n<div id='icon-radio-selected'></div>"
    }
  },
  "icons-radio-selected-24": {
    "": {
      "output": "\n@mixin icon-radio-selected-24 { \n  background-image: var( --icon-radio-selected-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-radio-selected-24-width , 24px );\n  height: var( --icon-radio-selected-24-height , 24px );\n  background-size: var( --icon-radio-selected-24-background-size , 24px 24px ); \n}",
      "example": "\n<style>\n  #icon-radio-selected { \n    background-image: var( --icon-radio-selected-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-radio-selected-24-width , 24px );\n    height: var( --icon-radio-selected-24-height , 24px );\n    background-size: var( --icon-radio-selected-24-background-size , 24px 24px ); \n  }\n</style>\n<div id='icon-radio-selected'></div>"
    }
  },
  "icons-radio-selected-32": {
    "": {
      "output": "\n@mixin icon-radio-selected-32 { \n  background-image: var( --icon-radio-selected-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-radio-selected-32-width , 32px );\n  height: var( --icon-radio-selected-32-height , 32px );\n  background-size: var( --icon-radio-selected-32-background-size , 32px 32px ); \n}",
      "example": "\n<style>\n  #icon-radio-selected { \n    background-image: var( --icon-radio-selected-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-radio-selected-32-width , 32px );\n    height: var( --icon-radio-selected-32-height , 32px );\n    background-size: var( --icon-radio-selected-32-background-size , 32px 32px ); \n  }\n</style>\n<div id='icon-radio-selected'></div>"
    }
  },
  "icons-radio-selected-48": {
    "": {
      "output": "\n@mixin icon-radio-selected-48 { \n  background-image: var( --icon-radio-selected-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-radio-selected-48-width , 48px );\n  height: var( --icon-radio-selected-48-height , 48px );\n  background-size: var( --icon-radio-selected-48-background-size , 48px 48px ); \n}",
      "example": "\n<style>\n  #icon-radio-selected { \n    background-image: var( --icon-radio-selected-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-radio-selected-48-width , 48px );\n    height: var( --icon-radio-selected-48-height , 48px );\n    background-size: var( --icon-radio-selected-48-background-size , 48px 48px ); \n  }\n</style>\n<div id='icon-radio-selected'></div>"
    }
  },
  "icons-radio-selected-64": {
    "": {
      "output": "\n@mixin icon-radio-selected-64 { \n  background-image: var( --icon-radio-selected-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-radio-selected-64-width , 64px );\n  height: var( --icon-radio-selected-64-height , 64px );\n  background-size: var( --icon-radio-selected-64-background-size , 64px 64px ); \n}",
      "example": "\n<style>\n  #icon-radio-selected { \n    background-image: var( --icon-radio-selected-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-radio-selected-64-width , 64px );\n    height: var( --icon-radio-selected-64-height , 64px );\n    background-size: var( --icon-radio-selected-64-background-size , 64px 64px ); \n  }\n</style>\n<div id='icon-radio-selected'></div>"
    }
  },
  "icons-checkbox-12": {
    "": {
      "output": "\n@mixin icon-checkbox-12 { \n  background-image: var( --icon-checkbox-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-checkbox-12-width , 12px );\n  height: var( --icon-checkbox-12-height , 12px );\n  background-size: var( --icon-checkbox-12-background-size , 12px 12px ); \n}",
      "example": "\n<style>\n  #icon-checkbox { \n    background-image: var( --icon-checkbox-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-checkbox-12-width , 12px );\n    height: var( --icon-checkbox-12-height , 12px );\n    background-size: var( --icon-checkbox-12-background-size , 12px 12px ); \n  }\n</style>\n<div id='icon-checkbox'></div>"
    }
  },
  "icons-checkbox-16": {
    "": {
      "output": "\n@mixin icon-checkbox-16 { \n  background-image: var( --icon-checkbox-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-checkbox-16-width , 16px );\n  height: var( --icon-checkbox-16-height , 16px );\n  background-size: var( --icon-checkbox-16-background-size , 16px 16px ); \n}",
      "example": "\n<style>\n  #icon-checkbox { \n    background-image: var( --icon-checkbox-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-checkbox-16-width , 16px );\n    height: var( --icon-checkbox-16-height , 16px );\n    background-size: var( --icon-checkbox-16-background-size , 16px 16px ); \n  }\n</style>\n<div id='icon-checkbox'></div>"
    }
  },
  "icons-checkbox-": {
    "": {
      "output": "\n@mixin icon-checkbox { \n  background-image: var( --icon-checkbox-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-checkbox-width , 24px );\n  height: var( --icon-checkbox-height , 24px );\n  background-size: var( --icon-checkbox-background-size , 24px 24px ); \n}",
      "example": "\n<style>\n  #icon-checkbox { \n    background-image: var( --icon-checkbox-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-checkbox-width , 24px );\n    height: var( --icon-checkbox-height , 24px );\n    background-size: var( --icon-checkbox-background-size , 24px 24px ); \n  }\n</style>\n<div id='icon-checkbox'></div>"
    }
  },
  "icons-checkbox-24": {
    "": {
      "output": "\n@mixin icon-checkbox-24 { \n  background-image: var( --icon-checkbox-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-checkbox-24-width , 24px );\n  height: var( --icon-checkbox-24-height , 24px );\n  background-size: var( --icon-checkbox-24-background-size , 24px 24px ); \n}",
      "example": "\n<style>\n  #icon-checkbox { \n    background-image: var( --icon-checkbox-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-checkbox-24-width , 24px );\n    height: var( --icon-checkbox-24-height , 24px );\n    background-size: var( --icon-checkbox-24-background-size , 24px 24px ); \n  }\n</style>\n<div id='icon-checkbox'></div>"
    }
  },
  "icons-checkbox-32": {
    "": {
      "output": "\n@mixin icon-checkbox-32 { \n  background-image: var( --icon-checkbox-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-checkbox-32-width , 32px );\n  height: var( --icon-checkbox-32-height , 32px );\n  background-size: var( --icon-checkbox-32-background-size , 32px 32px ); \n}",
      "example": "\n<style>\n  #icon-checkbox { \n    background-image: var( --icon-checkbox-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-checkbox-32-width , 32px );\n    height: var( --icon-checkbox-32-height , 32px );\n    background-size: var( --icon-checkbox-32-background-size , 32px 32px ); \n  }\n</style>\n<div id='icon-checkbox'></div>"
    }
  },
  "icons-checkbox-48": {
    "": {
      "output": "\n@mixin icon-checkbox-48 { \n  background-image: var( --icon-checkbox-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-checkbox-48-width , 48px );\n  height: var( --icon-checkbox-48-height , 48px );\n  background-size: var( --icon-checkbox-48-background-size , 48px 48px ); \n}",
      "example": "\n<style>\n  #icon-checkbox { \n    background-image: var( --icon-checkbox-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-checkbox-48-width , 48px );\n    height: var( --icon-checkbox-48-height , 48px );\n    background-size: var( --icon-checkbox-48-background-size , 48px 48px ); \n  }\n</style>\n<div id='icon-checkbox'></div>"
    }
  },
  "icons-checkbox-64": {
    "": {
      "output": "\n@mixin icon-checkbox-64 { \n  background-image: var( --icon-checkbox-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-checkbox-64-width , 64px );\n  height: var( --icon-checkbox-64-height , 64px );\n  background-size: var( --icon-checkbox-64-background-size , 64px 64px ); \n}",
      "example": "\n<style>\n  #icon-checkbox { \n    background-image: var( --icon-checkbox-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-checkbox-64-width , 64px );\n    height: var( --icon-checkbox-64-height , 64px );\n    background-size: var( --icon-checkbox-64-background-size , 64px 64px ); \n  }\n</style>\n<div id='icon-checkbox'></div>"
    }
  },
  "icons-checkbox-selected-12": {
    "": {
      "output": "\n@mixin icon-checkbox-selected-12 { \n  background-image: var( --icon-checkbox-selected-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-checkbox-selected-12-width , 12px );\n  height: var( --icon-checkbox-selected-12-height , 12px );\n  background-size: var( --icon-checkbox-selected-12-background-size , 12px 12px ); \n}",
      "example": "\n<style>\n  #icon-checkbox-selected { \n    background-image: var( --icon-checkbox-selected-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-checkbox-selected-12-width , 12px );\n    height: var( --icon-checkbox-selected-12-height , 12px );\n    background-size: var( --icon-checkbox-selected-12-background-size , 12px 12px ); \n  }\n</style>\n<div id='icon-checkbox-selected'></div>"
    }
  },
  "icons-checkbox-selected-16": {
    "": {
      "output": "\n@mixin icon-checkbox-selected-16 { \n  background-image: var( --icon-checkbox-selected-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-checkbox-selected-16-width , 16px );\n  height: var( --icon-checkbox-selected-16-height , 16px );\n  background-size: var( --icon-checkbox-selected-16-background-size , 16px 16px ); \n}",
      "example": "\n<style>\n  #icon-checkbox-selected { \n    background-image: var( --icon-checkbox-selected-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-checkbox-selected-16-width , 16px );\n    height: var( --icon-checkbox-selected-16-height , 16px );\n    background-size: var( --icon-checkbox-selected-16-background-size , 16px 16px ); \n  }\n</style>\n<div id='icon-checkbox-selected'></div>"
    }
  },
  "icons-checkbox-selected-": {
    "": {
      "output": "\n@mixin icon-checkbox-selected { \n  background-image: var( --icon-checkbox-selected-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-checkbox-selected-width , 24px );\n  height: var( --icon-checkbox-selected-height , 24px );\n  background-size: var( --icon-checkbox-selected-background-size , 24px 24px ); \n}",
      "example": "\n<style>\n  #icon-checkbox-selected { \n    background-image: var( --icon-checkbox-selected-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-checkbox-selected-width , 24px );\n    height: var( --icon-checkbox-selected-height , 24px );\n    background-size: var( --icon-checkbox-selected-background-size , 24px 24px ); \n  }\n</style>\n<div id='icon-checkbox-selected'></div>"
    }
  },
  "icons-checkbox-selected-24": {
    "": {
      "output": "\n@mixin icon-checkbox-selected-24 { \n  background-image: var( --icon-checkbox-selected-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-checkbox-selected-24-width , 24px );\n  height: var( --icon-checkbox-selected-24-height , 24px );\n  background-size: var( --icon-checkbox-selected-24-background-size , 24px 24px ); \n}",
      "example": "\n<style>\n  #icon-checkbox-selected { \n    background-image: var( --icon-checkbox-selected-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-checkbox-selected-24-width , 24px );\n    height: var( --icon-checkbox-selected-24-height , 24px );\n    background-size: var( --icon-checkbox-selected-24-background-size , 24px 24px ); \n  }\n</style>\n<div id='icon-checkbox-selected'></div>"
    }
  },
  "icons-checkbox-selected-32": {
    "": {
      "output": "\n@mixin icon-checkbox-selected-32 { \n  background-image: var( --icon-checkbox-selected-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-checkbox-selected-32-width , 32px );\n  height: var( --icon-checkbox-selected-32-height , 32px );\n  background-size: var( --icon-checkbox-selected-32-background-size , 32px 32px ); \n}",
      "example": "\n<style>\n  #icon-checkbox-selected { \n    background-image: var( --icon-checkbox-selected-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-checkbox-selected-32-width , 32px );\n    height: var( --icon-checkbox-selected-32-height , 32px );\n    background-size: var( --icon-checkbox-selected-32-background-size , 32px 32px ); \n  }\n</style>\n<div id='icon-checkbox-selected'></div>"
    }
  },
  "icons-checkbox-selected-48": {
    "": {
      "output": "\n@mixin icon-checkbox-selected-48 { \n  background-image: var( --icon-checkbox-selected-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-checkbox-selected-48-width , 48px );\n  height: var( --icon-checkbox-selected-48-height , 48px );\n  background-size: var( --icon-checkbox-selected-48-background-size , 48px 48px ); \n}",
      "example": "\n<style>\n  #icon-checkbox-selected { \n    background-image: var( --icon-checkbox-selected-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-checkbox-selected-48-width , 48px );\n    height: var( --icon-checkbox-selected-48-height , 48px );\n    background-size: var( --icon-checkbox-selected-48-background-size , 48px 48px ); \n  }\n</style>\n<div id='icon-checkbox-selected'></div>"
    }
  },
  "icons-checkbox-selected-64": {
    "": {
      "output": "\n@mixin icon-checkbox-selected-64 { \n  background-image: var( --icon-checkbox-selected-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --icon-checkbox-selected-64-width , 64px );\n  height: var( --icon-checkbox-selected-64-height , 64px );\n  background-size: var( --icon-checkbox-selected-64-background-size , 64px 64px ); \n}",
      "example": "\n<style>\n  #icon-checkbox-selected { \n    background-image: var( --icon-checkbox-selected-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --icon-checkbox-selected-64-width , 64px );\n    height: var( --icon-checkbox-selected-64-height , 64px );\n    background-size: var( --icon-checkbox-selected-64-background-size , 64px 64px ); \n  }\n</style>\n<div id='icon-checkbox-selected'></div>"
    }
  },
  "graphics-scu-logo-": {
    "": {
      "output": "\n@mixin graphic-scu-logo { \n  background-image: var( --graphic-scu-logo-svg );\n  background-position: center;\n  background-repeat: no-repeat;\n  width: var( --graphic-scu-logo-width , 144px );\n  height: var( --graphic-scu-logo-height , 80px );\n  background-size: var( --graphic-scu-logo-background-size , 144px 80px ); \n}",
      "example": "\n<style>\n  #graphic-scu-logo { \n    background-image: var( --graphic-scu-logo-svg );\n    background-position: center;\n    background-repeat: no-repeat;\n    width: var( --graphic-scu-logo-width , 144px );\n    height: var( --graphic-scu-logo-height , 80px );\n    background-size: var( --graphic-scu-logo-background-size , 144px 80px ); \n  }\n</style>\n<div id='graphic-scu-logo'></div>"
    }
  },
  "components-scu-button-primary-": {
    "box": {
      "output": "\n@mixin comp-scu-button-primary { \n  position: relative; \n}",
      "example": "\n<style>\n  #comp-scu-button-primary { \n    position: relative; \n  }\n</style>\n<div id='comp-scu-button-primary'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-button-primary--sizing {\n  width: 83px;\n  height: 41px;\n}",
      "example": "\n<style>\n  #comp-scu-button-primary { \n    width: 83px;\n    height: 41px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-primary'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-button-primary--width {\n  width: 83px;\n}",
      "example": "\n<style>\n  #comp-scu-button-primary { \n    width: 83px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-primary'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-button-primary--height {\n  height: 41px;\n}",
      "example": "\n<style>\n  #comp-scu-button-primary { \n    height: 41px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-primary'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-button-primary--figma-autolayout { \n  display: flex;\n  flex-flow: column nowrap;\n  padding-left: var( --comp-scu-button-primary-padding-left , 0px );\n  padding-right: var( --comp-scu-button-primary-padding-right , 0px );\n  padding-top: var( --comp-scu-button-primary-padding-top , 0px );\n  padding-bottom: var( --comp-scu-button-primary-padding-bottom , 0px );\n  & > *:not(:last-child) { margin-bottom: var( --comp-scu-button-primary-item-spacing , 0px ); } \n}",
      "example": "\n<style>\n  #comp-scu-button-primary { \n    display: flex;\n    flex-flow: column nowrap;\n    padding-left: var( --comp-scu-button-primary-padding-left , 0px );\n    padding-right: var( --comp-scu-button-primary-padding-right , 0px );\n    padding-top: var( --comp-scu-button-primary-padding-top , 0px );\n    padding-bottom: var( --comp-scu-button-primary-padding-bottom , 0px );\n    & > *:not(:last-child) { margin-bottom: var( --comp-scu-button-primary-item-spacing , 0px ); } \n  }\n</style>\n<div id='comp-scu-button-primary'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-button-primary--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #comp-scu-button-primary { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-button-primary'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-button-primary--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-button-primary-left , 0px );\n  margin-right: var( --comp-scu-button-primary-right , 0px );\n  margin-top: var( --comp-scu-button-primary-top , 0px );\n  margin-bottom: var( --comp-scu-button-primary-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-button-primary-left , 0px ) + var( --comp-scu-button-primary-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-button-primary { \n    display: inline-block;\n  margin-left: var( --comp-scu-button-primary-left , 0px );\n  margin-right: var( --comp-scu-button-primary-right , 0px );\n  margin-top: var( --comp-scu-button-primary-top , 0px );\n  margin-bottom: var( --comp-scu-button-primary-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-button-primary-left , 0px ) + var( --comp-scu-button-primary-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-primary'>content</div>"
    }
  },
  "components-scu-button-primary-default-": {
    "box": {
      "output": "\n@mixin comp-scu-button-primary-default { \n  position: relative;\n  background-color: var( --comp-scu-button-primary-default-background-color , rgba(99,166,10,1) );\n  border-radius: var( --comp-scu-button-primary-default-corner-radius , 200px ); \n}",
      "example": "\n<style>\n  #comp-scu-button-primary-default { \n    position: relative;\n    background-color: var( --comp-scu-button-primary-default-background-color , rgba(99,166,10,1) );\n    border-radius: var( --comp-scu-button-primary-default-corner-radius , 200px ); \n  }\n</style>\n<div id='comp-scu-button-primary-default'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 11px;\n    bottom: 11px;\n    left: 24px;\n    right: 24px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-button-primary-default--sizing {\n  width: 83px;\n  height: 41px;\n}",
      "example": "\n<style>\n  #comp-scu-button-primary-default { \n    width: 83px;\n    height: 41px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-primary-default'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-button-primary-default--width {\n  width: 83px;\n}",
      "example": "\n<style>\n  #comp-scu-button-primary-default { \n    width: 83px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-primary-default'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-button-primary-default--height {\n  height: 41px;\n}",
      "example": "\n<style>\n  #comp-scu-button-primary-default { \n    height: 41px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-primary-default'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-button-primary-default--figma-autolayout { \n  display: flex;\n  flex-flow: row nowrap;\n  padding-left: var( --comp-scu-button-primary-default-padding-left , 24px );\n  padding-right: var( --comp-scu-button-primary-default-padding-right , 24px );\n  padding-top: var( --comp-scu-button-primary-default-padding-top , 11px );\n  padding-bottom: var( --comp-scu-button-primary-default-padding-bottom , 11px );\n  & > *:not(:last-child) { margin-right: var( --comp-scu-button-primary-default-item-spacing , 0px ); } \n}",
      "example": "\n<style>\n  #comp-scu-button-primary-default { \n    display: flex;\n    flex-flow: row nowrap;\n    padding-left: var( --comp-scu-button-primary-default-padding-left , 24px );\n    padding-right: var( --comp-scu-button-primary-default-padding-right , 24px );\n    padding-top: var( --comp-scu-button-primary-default-padding-top , 11px );\n    padding-bottom: var( --comp-scu-button-primary-default-padding-bottom , 11px );\n    & > *:not(:last-child) { margin-right: var( --comp-scu-button-primary-default-item-spacing , 0px ); } \n  }\n</style>\n<div id='comp-scu-button-primary-default'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-button-primary-default--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #comp-scu-button-primary-default { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-button-primary-default'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-button-primary-default--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-button-primary-default-left , 0px );\n  margin-right: var( --comp-scu-button-primary-default-right , 0px );\n  margin-top: var( --comp-scu-button-primary-default-top , 0px );\n  margin-bottom: var( --comp-scu-button-primary-default-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-button-primary-default-left , 0px ) + var( --comp-scu-button-primary-default-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-button-primary-default { \n    display: inline-block;\n  margin-left: var( --comp-scu-button-primary-default-left , 0px );\n  margin-right: var( --comp-scu-button-primary-default-right , 0px );\n  margin-top: var( --comp-scu-button-primary-default-top , 0px );\n  margin-bottom: var( --comp-scu-button-primary-default-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-button-primary-default-left , 0px ) + var( --comp-scu-button-primary-default-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-primary-default'>content</div>"
    }
  },
  "components-scu-button-primary-default-label-": {
    "": {
      "output": "\n@mixin comp-scu-button-primary-default-label { \n  position: relative;\n  font-size: var( --comp-scu-button-primary-default-label-font-size , 16px );\n  text-align: var( --comp-scu-button-primary-default-label-text-align-horizontal , CENTER );\n  color: var( --comp-scu-button-primary-default-label-color , rgba(255,255,255,1) );\n  font-family: var( --comp-scu-button-primary-default-label-font-family , 'Proxima Nova' );\n  font-weight: var( --comp-scu-button-primary-default-label-font-weight , 700 );\n  line-height: var( --comp-scu-button-primary-default-label-line-height , 18.75px );\n  letter-spacing: var( --comp-scu-button-primary-default-label-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-button-primary-default-label { \n    position: relative;\n    font-size: var( --comp-scu-button-primary-default-label-font-size , 16px );\n    text-align: var( --comp-scu-button-primary-default-label-text-align-horizontal , CENTER );\n    color: var( --comp-scu-button-primary-default-label-color , rgba(255,255,255,1) );\n    font-family: var( --comp-scu-button-primary-default-label-font-family , 'Proxima Nova' );\n    font-weight: var( --comp-scu-button-primary-default-label-font-weight , 700 );\n    line-height: var( --comp-scu-button-primary-default-label-line-height , 18.75px );\n    letter-spacing: var( --comp-scu-button-primary-default-label-letter-spacing , 0px ); \n  }\n</style>\n<div id='comp-scu-button-primary-default-label'></div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-button-primary-default-label--sizing {\n  width: 35px;\n  height: 19px;\n}",
      "example": "\n<style>\n  #comp-scu-button-primary-default-label { \n    width: 35px;\n    height: 19px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-primary-default-label'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-button-primary-default-label--width {\n  width: 35px;\n}",
      "example": "\n<style>\n  #comp-scu-button-primary-default-label { \n    width: 35px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-primary-default-label'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-button-primary-default-label--height {\n  height: 19px;\n}",
      "example": "\n<style>\n  #comp-scu-button-primary-default-label { \n    height: 19px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-primary-default-label'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-button-primary-default-label--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #comp-scu-button-primary-default-label { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-button-primary-default-label'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-button-primary-default-label--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-button-primary-default-label-left , 24px );\n  margin-right: var( --comp-scu-button-primary-default-label-right , 24px );\n  margin-top: var( --comp-scu-button-primary-default-label-top , 11px );\n  margin-bottom: var( --comp-scu-button-primary-default-label-bottom , 11px );\n  width: calc( 100% - ( var( --comp-scu-button-primary-default-label-left , 24px ) + var( --comp-scu-button-primary-default-label-right , 24px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-button-primary-default-label { \n    display: inline-block;\n  margin-left: var( --comp-scu-button-primary-default-label-left , 24px );\n  margin-right: var( --comp-scu-button-primary-default-label-right , 24px );\n  margin-top: var( --comp-scu-button-primary-default-label-top , 11px );\n  margin-bottom: var( --comp-scu-button-primary-default-label-bottom , 11px );\n  width: calc( 100% - ( var( --comp-scu-button-primary-default-label-left , 24px ) + var( --comp-scu-button-primary-default-label-right , 24px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-primary-default-label'>content</div>"
    }
  },
  "components-scu-button-primary-hover-": {
    "box": {
      "output": "\n@mixin comp-scu-button-primary-hover { \n  position: relative;\n  background-color: var( --comp-scu-button-primary-hover-background-color , rgba(42,73,1,1) );\n  border-radius: var( --comp-scu-button-primary-hover-corner-radius , 200px ); \n}",
      "example": "\n<style>\n  #comp-scu-button-primary-hover { \n    position: relative;\n    background-color: var( --comp-scu-button-primary-hover-background-color , rgba(42,73,1,1) );\n    border-radius: var( --comp-scu-button-primary-hover-corner-radius , 200px ); \n  }\n</style>\n<div id='comp-scu-button-primary-hover'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 11px;\n    bottom: 11px;\n    left: 24px;\n    right: 24px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-button-primary-hover--sizing {\n  width: 93px;\n  height: 32px;\n}",
      "example": "\n<style>\n  #comp-scu-button-primary-hover { \n    width: 93px;\n    height: 32px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-primary-hover'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-button-primary-hover--width {\n  width: 93px;\n}",
      "example": "\n<style>\n  #comp-scu-button-primary-hover { \n    width: 93px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-primary-hover'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-button-primary-hover--height {\n  height: 32px;\n}",
      "example": "\n<style>\n  #comp-scu-button-primary-hover { \n    height: 32px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-primary-hover'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-button-primary-hover--figma-autolayout { \n  display: flex;\n  flex-flow: row nowrap;\n  padding-left: var( --comp-scu-button-primary-hover-padding-left , 24px );\n  padding-right: var( --comp-scu-button-primary-hover-padding-right , 24px );\n  padding-top: var( --comp-scu-button-primary-hover-padding-top , 11px );\n  padding-bottom: var( --comp-scu-button-primary-hover-padding-bottom , 11px );\n  & > *:not(:last-child) { margin-right: var( --comp-scu-button-primary-hover-item-spacing , 0px ); } \n}",
      "example": "\n<style>\n  #comp-scu-button-primary-hover { \n    display: flex;\n    flex-flow: row nowrap;\n    padding-left: var( --comp-scu-button-primary-hover-padding-left , 24px );\n    padding-right: var( --comp-scu-button-primary-hover-padding-right , 24px );\n    padding-top: var( --comp-scu-button-primary-hover-padding-top , 11px );\n    padding-bottom: var( --comp-scu-button-primary-hover-padding-bottom , 11px );\n    & > *:not(:last-child) { margin-right: var( --comp-scu-button-primary-hover-item-spacing , 0px ); } \n  }\n</style>\n<div id='comp-scu-button-primary-hover'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-button-primary-hover--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #comp-scu-button-primary-hover { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-button-primary-hover'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-button-primary-hover--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-button-primary-hover-left , 0px );\n  margin-right: var( --comp-scu-button-primary-hover-right , -10px );\n  margin-top: var( --comp-scu-button-primary-hover-top , 42px );\n  margin-bottom: var( --comp-scu-button-primary-hover-bottom , -33px );\n  width: calc( 100% - ( var( --comp-scu-button-primary-hover-left , 0px ) + var( --comp-scu-button-primary-hover-right , -10px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-button-primary-hover { \n    display: inline-block;\n  margin-left: var( --comp-scu-button-primary-hover-left , 0px );\n  margin-right: var( --comp-scu-button-primary-hover-right , -10px );\n  margin-top: var( --comp-scu-button-primary-hover-top , 42px );\n  margin-bottom: var( --comp-scu-button-primary-hover-bottom , -33px );\n  width: calc( 100% - ( var( --comp-scu-button-primary-hover-left , 0px ) + var( --comp-scu-button-primary-hover-right , -10px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-primary-hover'>content</div>"
    }
  },
  "components-scu-button-primary-hover-label-": {
    "": {
      "output": "\n@mixin comp-scu-button-primary-hover-label { \n  position: relative;\n  font-size: var( --comp-scu-button-primary-hover-label-font-size , 16px );\n  text-align: var( --comp-scu-button-primary-hover-label-text-align-horizontal , CENTER );\n  color: var( --comp-scu-button-primary-hover-label-color , rgba(255,255,255,1) );\n  font-family: var( --comp-scu-button-primary-hover-label-font-family , 'Proxima Nova' );\n  font-weight: var( --comp-scu-button-primary-hover-label-font-weight , 700 );\n  line-height: var( --comp-scu-button-primary-hover-label-line-height , 18.75px );\n  letter-spacing: var( --comp-scu-button-primary-hover-label-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-button-primary-hover-label { \n    position: relative;\n    font-size: var( --comp-scu-button-primary-hover-label-font-size , 16px );\n    text-align: var( --comp-scu-button-primary-hover-label-text-align-horizontal , CENTER );\n    color: var( --comp-scu-button-primary-hover-label-color , rgba(255,255,255,1) );\n    font-family: var( --comp-scu-button-primary-hover-label-font-family , 'Proxima Nova' );\n    font-weight: var( --comp-scu-button-primary-hover-label-font-weight , 700 );\n    line-height: var( --comp-scu-button-primary-hover-label-line-height , 18.75px );\n    letter-spacing: var( --comp-scu-button-primary-hover-label-letter-spacing , 0px ); \n  }\n</style>\n<div id='comp-scu-button-primary-hover-label'></div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-button-primary-hover-label--sizing {\n  width: 35px;\n  height: 19px;\n}",
      "example": "\n<style>\n  #comp-scu-button-primary-hover-label { \n    width: 35px;\n    height: 19px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-primary-hover-label'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-button-primary-hover-label--width {\n  width: 35px;\n}",
      "example": "\n<style>\n  #comp-scu-button-primary-hover-label { \n    width: 35px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-primary-hover-label'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-button-primary-hover-label--height {\n  height: 19px;\n}",
      "example": "\n<style>\n  #comp-scu-button-primary-hover-label { \n    height: 19px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-primary-hover-label'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-button-primary-hover-label--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #comp-scu-button-primary-hover-label { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-button-primary-hover-label'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-button-primary-hover-label--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-button-primary-hover-label-left , 29px );\n  margin-right: var( --comp-scu-button-primary-hover-label-right , 29px );\n  margin-top: var( --comp-scu-button-primary-hover-label-top , 7px );\n  margin-bottom: var( --comp-scu-button-primary-hover-label-bottom , 6px );\n  width: calc( 100% - ( var( --comp-scu-button-primary-hover-label-left , 29px ) + var( --comp-scu-button-primary-hover-label-right , 29px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-button-primary-hover-label { \n    display: inline-block;\n  margin-left: var( --comp-scu-button-primary-hover-label-left , 29px );\n  margin-right: var( --comp-scu-button-primary-hover-label-right , 29px );\n  margin-top: var( --comp-scu-button-primary-hover-label-top , 7px );\n  margin-bottom: var( --comp-scu-button-primary-hover-label-bottom , 6px );\n  width: calc( 100% - ( var( --comp-scu-button-primary-hover-label-left , 29px ) + var( --comp-scu-button-primary-hover-label-right , 29px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-primary-hover-label'>content</div>"
    }
  },
  "components-scu-button-primary-focus-": {
    "box": {
      "output": "\n@mixin comp-scu-button-primary-focus { \n  position: relative;\n  background-color: var( --comp-scu-button-primary-focus-background-color , rgba(126,182,51,1) );\n  border-radius: var( --comp-scu-button-primary-focus-corner-radius , 200px );\n  box-shadow: var( --comp-scu-button-primary-focus-shadow , 0px 0px 0px 2px rgba(53,155,249,1) ); \n}",
      "example": "\n<style>\n  #comp-scu-button-primary-focus { \n    position: relative;\n    background-color: var( --comp-scu-button-primary-focus-background-color , rgba(126,182,51,1) );\n    border-radius: var( --comp-scu-button-primary-focus-corner-radius , 200px );\n    box-shadow: var( --comp-scu-button-primary-focus-shadow , 0px 0px 0px 2px rgba(53,155,249,1) ); \n  }\n</style>\n<div id='comp-scu-button-primary-focus'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 11px;\n    bottom: 11px;\n    left: 24px;\n    right: 24px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-button-primary-focus--sizing {\n  width: 93px;\n  height: 32px;\n}",
      "example": "\n<style>\n  #comp-scu-button-primary-focus { \n    width: 93px;\n    height: 32px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-primary-focus'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-button-primary-focus--width {\n  width: 93px;\n}",
      "example": "\n<style>\n  #comp-scu-button-primary-focus { \n    width: 93px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-primary-focus'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-button-primary-focus--height {\n  height: 32px;\n}",
      "example": "\n<style>\n  #comp-scu-button-primary-focus { \n    height: 32px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-primary-focus'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-button-primary-focus--figma-autolayout { \n  display: flex;\n  flex-flow: row nowrap;\n  padding-left: var( --comp-scu-button-primary-focus-padding-left , 24px );\n  padding-right: var( --comp-scu-button-primary-focus-padding-right , 24px );\n  padding-top: var( --comp-scu-button-primary-focus-padding-top , 11px );\n  padding-bottom: var( --comp-scu-button-primary-focus-padding-bottom , 11px );\n  & > *:not(:last-child) { margin-right: var( --comp-scu-button-primary-focus-item-spacing , 0px ); } \n}",
      "example": "\n<style>\n  #comp-scu-button-primary-focus { \n    display: flex;\n    flex-flow: row nowrap;\n    padding-left: var( --comp-scu-button-primary-focus-padding-left , 24px );\n    padding-right: var( --comp-scu-button-primary-focus-padding-right , 24px );\n    padding-top: var( --comp-scu-button-primary-focus-padding-top , 11px );\n    padding-bottom: var( --comp-scu-button-primary-focus-padding-bottom , 11px );\n    & > *:not(:last-child) { margin-right: var( --comp-scu-button-primary-focus-item-spacing , 0px ); } \n  }\n</style>\n<div id='comp-scu-button-primary-focus'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-button-primary-focus--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #comp-scu-button-primary-focus { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-button-primary-focus'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-button-primary-focus--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-button-primary-focus-left , 0px );\n  margin-right: var( --comp-scu-button-primary-focus-right , -10px );\n  margin-top: var( --comp-scu-button-primary-focus-top , 84px );\n  margin-bottom: var( --comp-scu-button-primary-focus-bottom , -75px );\n  width: calc( 100% - ( var( --comp-scu-button-primary-focus-left , 0px ) + var( --comp-scu-button-primary-focus-right , -10px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-button-primary-focus { \n    display: inline-block;\n  margin-left: var( --comp-scu-button-primary-focus-left , 0px );\n  margin-right: var( --comp-scu-button-primary-focus-right , -10px );\n  margin-top: var( --comp-scu-button-primary-focus-top , 84px );\n  margin-bottom: var( --comp-scu-button-primary-focus-bottom , -75px );\n  width: calc( 100% - ( var( --comp-scu-button-primary-focus-left , 0px ) + var( --comp-scu-button-primary-focus-right , -10px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-primary-focus'>content</div>"
    }
  },
  "components-scu-button-primary-focus-label-": {
    "": {
      "output": "\n@mixin comp-scu-button-primary-focus-label { \n  position: relative;\n  font-size: var( --comp-scu-button-primary-focus-label-font-size , 16px );\n  text-align: var( --comp-scu-button-primary-focus-label-text-align-horizontal , CENTER );\n  color: var( --comp-scu-button-primary-focus-label-color , rgba(255,255,255,1) );\n  font-family: var( --comp-scu-button-primary-focus-label-font-family , 'Proxima Nova' );\n  font-weight: var( --comp-scu-button-primary-focus-label-font-weight , 700 );\n  line-height: var( --comp-scu-button-primary-focus-label-line-height , 18.75px );\n  letter-spacing: var( --comp-scu-button-primary-focus-label-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-button-primary-focus-label { \n    position: relative;\n    font-size: var( --comp-scu-button-primary-focus-label-font-size , 16px );\n    text-align: var( --comp-scu-button-primary-focus-label-text-align-horizontal , CENTER );\n    color: var( --comp-scu-button-primary-focus-label-color , rgba(255,255,255,1) );\n    font-family: var( --comp-scu-button-primary-focus-label-font-family , 'Proxima Nova' );\n    font-weight: var( --comp-scu-button-primary-focus-label-font-weight , 700 );\n    line-height: var( --comp-scu-button-primary-focus-label-line-height , 18.75px );\n    letter-spacing: var( --comp-scu-button-primary-focus-label-letter-spacing , 0px ); \n  }\n</style>\n<div id='comp-scu-button-primary-focus-label'></div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-button-primary-focus-label--sizing {\n  width: 35px;\n  height: 19px;\n}",
      "example": "\n<style>\n  #comp-scu-button-primary-focus-label { \n    width: 35px;\n    height: 19px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-primary-focus-label'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-button-primary-focus-label--width {\n  width: 35px;\n}",
      "example": "\n<style>\n  #comp-scu-button-primary-focus-label { \n    width: 35px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-primary-focus-label'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-button-primary-focus-label--height {\n  height: 19px;\n}",
      "example": "\n<style>\n  #comp-scu-button-primary-focus-label { \n    height: 19px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-primary-focus-label'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-button-primary-focus-label--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #comp-scu-button-primary-focus-label { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-button-primary-focus-label'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-button-primary-focus-label--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-button-primary-focus-label-left , 29px );\n  margin-right: var( --comp-scu-button-primary-focus-label-right , 29px );\n  margin-top: var( --comp-scu-button-primary-focus-label-top , 7px );\n  margin-bottom: var( --comp-scu-button-primary-focus-label-bottom , 6px );\n  width: calc( 100% - ( var( --comp-scu-button-primary-focus-label-left , 29px ) + var( --comp-scu-button-primary-focus-label-right , 29px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-button-primary-focus-label { \n    display: inline-block;\n  margin-left: var( --comp-scu-button-primary-focus-label-left , 29px );\n  margin-right: var( --comp-scu-button-primary-focus-label-right , 29px );\n  margin-top: var( --comp-scu-button-primary-focus-label-top , 7px );\n  margin-bottom: var( --comp-scu-button-primary-focus-label-bottom , 6px );\n  width: calc( 100% - ( var( --comp-scu-button-primary-focus-label-left , 29px ) + var( --comp-scu-button-primary-focus-label-right , 29px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-primary-focus-label'>content</div>"
    }
  },
  "components-scu-button-primary-disabled-": {
    "box": {
      "output": "\n@mixin comp-scu-button-primary-disabled { \n  position: relative;\n  background-color: var( --comp-scu-button-primary-disabled-background-color , rgba(126,182,51,1) );\n  border-radius: var( --comp-scu-button-primary-disabled-corner-radius , 200px ); \n}",
      "example": "\n<style>\n  #comp-scu-button-primary-disabled { \n    position: relative;\n    background-color: var( --comp-scu-button-primary-disabled-background-color , rgba(126,182,51,1) );\n    border-radius: var( --comp-scu-button-primary-disabled-corner-radius , 200px ); \n  }\n</style>\n<div id='comp-scu-button-primary-disabled'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 11px;\n    bottom: 11px;\n    left: 24px;\n    right: 24px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-button-primary-disabled--sizing {\n  width: 93px;\n  height: 32px;\n}",
      "example": "\n<style>\n  #comp-scu-button-primary-disabled { \n    width: 93px;\n    height: 32px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-primary-disabled'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-button-primary-disabled--width {\n  width: 93px;\n}",
      "example": "\n<style>\n  #comp-scu-button-primary-disabled { \n    width: 93px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-primary-disabled'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-button-primary-disabled--height {\n  height: 32px;\n}",
      "example": "\n<style>\n  #comp-scu-button-primary-disabled { \n    height: 32px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-primary-disabled'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-button-primary-disabled--figma-autolayout { \n  display: flex;\n  flex-flow: row nowrap;\n  padding-left: var( --comp-scu-button-primary-disabled-padding-left , 24px );\n  padding-right: var( --comp-scu-button-primary-disabled-padding-right , 24px );\n  padding-top: var( --comp-scu-button-primary-disabled-padding-top , 11px );\n  padding-bottom: var( --comp-scu-button-primary-disabled-padding-bottom , 11px );\n  & > *:not(:last-child) { margin-right: var( --comp-scu-button-primary-disabled-item-spacing , 0px ); } \n}",
      "example": "\n<style>\n  #comp-scu-button-primary-disabled { \n    display: flex;\n    flex-flow: row nowrap;\n    padding-left: var( --comp-scu-button-primary-disabled-padding-left , 24px );\n    padding-right: var( --comp-scu-button-primary-disabled-padding-right , 24px );\n    padding-top: var( --comp-scu-button-primary-disabled-padding-top , 11px );\n    padding-bottom: var( --comp-scu-button-primary-disabled-padding-bottom , 11px );\n    & > *:not(:last-child) { margin-right: var( --comp-scu-button-primary-disabled-item-spacing , 0px ); } \n  }\n</style>\n<div id='comp-scu-button-primary-disabled'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-button-primary-disabled--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #comp-scu-button-primary-disabled { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-button-primary-disabled'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-button-primary-disabled--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-button-primary-disabled-left , 0px );\n  margin-right: var( --comp-scu-button-primary-disabled-right , -10px );\n  margin-top: var( --comp-scu-button-primary-disabled-top , 0px );\n  margin-bottom: var( --comp-scu-button-primary-disabled-bottom , 9px );\n  width: calc( 100% - ( var( --comp-scu-button-primary-disabled-left , 0px ) + var( --comp-scu-button-primary-disabled-right , -10px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-button-primary-disabled { \n    display: inline-block;\n  margin-left: var( --comp-scu-button-primary-disabled-left , 0px );\n  margin-right: var( --comp-scu-button-primary-disabled-right , -10px );\n  margin-top: var( --comp-scu-button-primary-disabled-top , 0px );\n  margin-bottom: var( --comp-scu-button-primary-disabled-bottom , 9px );\n  width: calc( 100% - ( var( --comp-scu-button-primary-disabled-left , 0px ) + var( --comp-scu-button-primary-disabled-right , -10px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-primary-disabled'>content</div>"
    }
  },
  "components-scu-button-primary-disabled-label-": {
    "": {
      "output": "\n@mixin comp-scu-button-primary-disabled-label { \n  position: relative;\n  font-size: var( --comp-scu-button-primary-disabled-label-font-size , 16px );\n  text-align: var( --comp-scu-button-primary-disabled-label-text-align-horizontal , CENTER );\n  color: var( --comp-scu-button-primary-disabled-label-color , rgba(180,216,133,1) );\n  font-family: var( --comp-scu-button-primary-disabled-label-font-family , 'Proxima Nova' );\n  font-weight: var( --comp-scu-button-primary-disabled-label-font-weight , 700 );\n  line-height: var( --comp-scu-button-primary-disabled-label-line-height , 18.75px );\n  letter-spacing: var( --comp-scu-button-primary-disabled-label-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-button-primary-disabled-label { \n    position: relative;\n    font-size: var( --comp-scu-button-primary-disabled-label-font-size , 16px );\n    text-align: var( --comp-scu-button-primary-disabled-label-text-align-horizontal , CENTER );\n    color: var( --comp-scu-button-primary-disabled-label-color , rgba(180,216,133,1) );\n    font-family: var( --comp-scu-button-primary-disabled-label-font-family , 'Proxima Nova' );\n    font-weight: var( --comp-scu-button-primary-disabled-label-font-weight , 700 );\n    line-height: var( --comp-scu-button-primary-disabled-label-line-height , 18.75px );\n    letter-spacing: var( --comp-scu-button-primary-disabled-label-letter-spacing , 0px ); \n  }\n</style>\n<div id='comp-scu-button-primary-disabled-label'></div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-button-primary-disabled-label--sizing {\n  width: 35px;\n  height: 19px;\n}",
      "example": "\n<style>\n  #comp-scu-button-primary-disabled-label { \n    width: 35px;\n    height: 19px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-primary-disabled-label'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-button-primary-disabled-label--width {\n  width: 35px;\n}",
      "example": "\n<style>\n  #comp-scu-button-primary-disabled-label { \n    width: 35px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-primary-disabled-label'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-button-primary-disabled-label--height {\n  height: 19px;\n}",
      "example": "\n<style>\n  #comp-scu-button-primary-disabled-label { \n    height: 19px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-primary-disabled-label'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-button-primary-disabled-label--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #comp-scu-button-primary-disabled-label { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-button-primary-disabled-label'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-button-primary-disabled-label--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-button-primary-disabled-label-left , 29px );\n  margin-right: var( --comp-scu-button-primary-disabled-label-right , 29px );\n  margin-top: var( --comp-scu-button-primary-disabled-label-top , 7px );\n  margin-bottom: var( --comp-scu-button-primary-disabled-label-bottom , 6px );\n  width: calc( 100% - ( var( --comp-scu-button-primary-disabled-label-left , 29px ) + var( --comp-scu-button-primary-disabled-label-right , 29px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-button-primary-disabled-label { \n    display: inline-block;\n  margin-left: var( --comp-scu-button-primary-disabled-label-left , 29px );\n  margin-right: var( --comp-scu-button-primary-disabled-label-right , 29px );\n  margin-top: var( --comp-scu-button-primary-disabled-label-top , 7px );\n  margin-bottom: var( --comp-scu-button-primary-disabled-label-bottom , 6px );\n  width: calc( 100% - ( var( --comp-scu-button-primary-disabled-label-left , 29px ) + var( --comp-scu-button-primary-disabled-label-right , 29px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-primary-disabled-label'>content</div>"
    }
  },
  "components-scu-button-outline-": {
    "box": {
      "output": "\n@mixin comp-scu-button-outline { \n  position: relative; \n}",
      "example": "\n<style>\n  #comp-scu-button-outline { \n    position: relative; \n  }\n</style>\n<div id='comp-scu-button-outline'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-button-outline--sizing {\n  width: 90px;\n  height: 17px;\n}",
      "example": "\n<style>\n  #comp-scu-button-outline { \n    width: 90px;\n    height: 17px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-outline'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-button-outline--width {\n  width: 90px;\n}",
      "example": "\n<style>\n  #comp-scu-button-outline { \n    width: 90px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-outline'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-button-outline--height {\n  height: 17px;\n}",
      "example": "\n<style>\n  #comp-scu-button-outline { \n    height: 17px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-outline'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-button-outline--figma-autolayout { \n   \n}",
      "example": "\n<style>\n  #comp-scu-button-outline { \n     \n  }\n</style>\n<div id='comp-scu-button-outline'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-button-outline--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #comp-scu-button-outline { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-button-outline'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-button-outline--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-button-outline-left , 0px );\n  margin-right: var( --comp-scu-button-outline-right , 0px );\n  margin-top: var( --comp-scu-button-outline-top , 0px );\n  margin-bottom: var( --comp-scu-button-outline-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-button-outline-left , 0px ) + var( --comp-scu-button-outline-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-button-outline { \n    display: inline-block;\n  margin-left: var( --comp-scu-button-outline-left , 0px );\n  margin-right: var( --comp-scu-button-outline-right , 0px );\n  margin-top: var( --comp-scu-button-outline-top , 0px );\n  margin-bottom: var( --comp-scu-button-outline-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-button-outline-left , 0px ) + var( --comp-scu-button-outline-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-outline'>content</div>"
    }
  },
  "components-scu-button-outline-default-": {
    "box": {
      "output": "\n@mixin comp-scu-button-outline-default { \n  position: relative;\n  background-color: var( --comp-scu-button-outline-default-background-color , rgba(255,255,255,1) );\n  border-radius: var( --comp-scu-button-outline-default-corner-radius , 200px );\n  border-width: var( --comp-scu-button-outline-default-stroke-weight , 1px );\n  border-style: solid;\n  border-color: var( --comp-scu-button-outline-default-stroke-color , rgba(99,166,10,1) ); \n}",
      "example": "\n<style>\n  #comp-scu-button-outline-default { \n    position: relative;\n    background-color: var( --comp-scu-button-outline-default-background-color , rgba(255,255,255,1) );\n    border-radius: var( --comp-scu-button-outline-default-corner-radius , 200px );\n    border-width: var( --comp-scu-button-outline-default-stroke-weight , 1px );\n    border-style: solid;\n    border-color: var( --comp-scu-button-outline-default-stroke-color , rgba(99,166,10,1) ); \n  }\n</style>\n<div id='comp-scu-button-outline-default'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 11px;\n    bottom: 11px;\n    left: 24px;\n    right: 24px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-button-outline-default--sizing {\n  width: 82px;\n  height: 41px;\n}",
      "example": "\n<style>\n  #comp-scu-button-outline-default { \n    width: 82px;\n    height: 41px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-outline-default'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-button-outline-default--width {\n  width: 82px;\n}",
      "example": "\n<style>\n  #comp-scu-button-outline-default { \n    width: 82px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-outline-default'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-button-outline-default--height {\n  height: 41px;\n}",
      "example": "\n<style>\n  #comp-scu-button-outline-default { \n    height: 41px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-outline-default'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-button-outline-default--figma-autolayout { \n  display: flex;\n  flex-flow: row nowrap;\n  padding-left: var( --comp-scu-button-outline-default-padding-left , 24px );\n  padding-right: var( --comp-scu-button-outline-default-padding-right , 24px );\n  padding-top: var( --comp-scu-button-outline-default-padding-top , 11px );\n  padding-bottom: var( --comp-scu-button-outline-default-padding-bottom , 11px );\n  & > *:not(:last-child) { margin-right: var( --comp-scu-button-outline-default-item-spacing , 0px ); } \n}",
      "example": "\n<style>\n  #comp-scu-button-outline-default { \n    display: flex;\n    flex-flow: row nowrap;\n    padding-left: var( --comp-scu-button-outline-default-padding-left , 24px );\n    padding-right: var( --comp-scu-button-outline-default-padding-right , 24px );\n    padding-top: var( --comp-scu-button-outline-default-padding-top , 11px );\n    padding-bottom: var( --comp-scu-button-outline-default-padding-bottom , 11px );\n    & > *:not(:last-child) { margin-right: var( --comp-scu-button-outline-default-item-spacing , 0px ); } \n  }\n</style>\n<div id='comp-scu-button-outline-default'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-button-outline-default--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-button-outline-default-left , 4px );\n  right: var( --comp-scu-button-outline-default-right , 4px );\n  top: var( --comp-scu-button-outline-default-top , -12px );\n  bottom: var( --comp-scu-button-outline-default-bottom , -12px ); \n}",
      "example": "\n<style>\n  #comp-scu-button-outline-default { \n    position: absolute;\n    left: var( --comp-scu-button-outline-default-left , 4px );\n    right: var( --comp-scu-button-outline-default-right , 4px );\n    top: var( --comp-scu-button-outline-default-top , -12px );\n    bottom: var( --comp-scu-button-outline-default-bottom , -12px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-button-outline-default'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-button-outline-default--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-button-outline-default-left , 4px );\n  margin-right: var( --comp-scu-button-outline-default-right , 4px );\n  margin-top: var( --comp-scu-button-outline-default-top , -12px );\n  margin-bottom: var( --comp-scu-button-outline-default-bottom , -12px );\n  width: calc( 100% - ( var( --comp-scu-button-outline-default-left , 4px ) + var( --comp-scu-button-outline-default-right , 4px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-button-outline-default { \n    display: inline-block;\n  margin-left: var( --comp-scu-button-outline-default-left , 4px );\n  margin-right: var( --comp-scu-button-outline-default-right , 4px );\n  margin-top: var( --comp-scu-button-outline-default-top , -12px );\n  margin-bottom: var( --comp-scu-button-outline-default-bottom , -12px );\n  width: calc( 100% - ( var( --comp-scu-button-outline-default-left , 4px ) + var( --comp-scu-button-outline-default-right , 4px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-outline-default'>content</div>"
    }
  },
  "components-scu-button-outline-default-label-": {
    "": {
      "output": "\n@mixin comp-scu-button-outline-default-label { \n  position: relative;\n  font-size: var( --comp-scu-button-outline-default-label-font-size , 16px );\n  text-align: var( --comp-scu-button-outline-default-label-text-align-horizontal , CENTER );\n  color: var( --comp-scu-button-outline-default-label-color , rgba(58,99,3,1) );\n  font-family: var( --comp-scu-button-outline-default-label-font-family , 'Proxima Nova' );\n  font-weight: var( --comp-scu-button-outline-default-label-font-weight , 400 );\n  line-height: var( --comp-scu-button-outline-default-label-line-height , 18.75px );\n  letter-spacing: var( --comp-scu-button-outline-default-label-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-button-outline-default-label { \n    position: relative;\n    font-size: var( --comp-scu-button-outline-default-label-font-size , 16px );\n    text-align: var( --comp-scu-button-outline-default-label-text-align-horizontal , CENTER );\n    color: var( --comp-scu-button-outline-default-label-color , rgba(58,99,3,1) );\n    font-family: var( --comp-scu-button-outline-default-label-font-family , 'Proxima Nova' );\n    font-weight: var( --comp-scu-button-outline-default-label-font-weight , 400 );\n    line-height: var( --comp-scu-button-outline-default-label-line-height , 18.75px );\n    letter-spacing: var( --comp-scu-button-outline-default-label-letter-spacing , 0px ); \n  }\n</style>\n<div id='comp-scu-button-outline-default-label'></div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-button-outline-default-label--sizing {\n  width: 34px;\n  height: 19px;\n}",
      "example": "\n<style>\n  #comp-scu-button-outline-default-label { \n    width: 34px;\n    height: 19px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-outline-default-label'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-button-outline-default-label--width {\n  width: 34px;\n}",
      "example": "\n<style>\n  #comp-scu-button-outline-default-label { \n    width: 34px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-outline-default-label'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-button-outline-default-label--height {\n  height: 19px;\n}",
      "example": "\n<style>\n  #comp-scu-button-outline-default-label { \n    height: 19px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-outline-default-label'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-button-outline-default-label--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #comp-scu-button-outline-default-label { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-button-outline-default-label'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-button-outline-default-label--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-button-outline-default-label-left , 24px );\n  margin-right: var( --comp-scu-button-outline-default-label-right , 24px );\n  margin-top: var( --comp-scu-button-outline-default-label-top , 11px );\n  margin-bottom: var( --comp-scu-button-outline-default-label-bottom , 11px );\n  width: calc( 100% - ( var( --comp-scu-button-outline-default-label-left , 24px ) + var( --comp-scu-button-outline-default-label-right , 24px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-button-outline-default-label { \n    display: inline-block;\n  margin-left: var( --comp-scu-button-outline-default-label-left , 24px );\n  margin-right: var( --comp-scu-button-outline-default-label-right , 24px );\n  margin-top: var( --comp-scu-button-outline-default-label-top , 11px );\n  margin-bottom: var( --comp-scu-button-outline-default-label-bottom , 11px );\n  width: calc( 100% - ( var( --comp-scu-button-outline-default-label-left , 24px ) + var( --comp-scu-button-outline-default-label-right , 24px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-outline-default-label'>content</div>"
    }
  },
  "components-scu-button-outline-hover-": {
    "box": {
      "output": "\n@mixin comp-scu-button-outline-hover { \n  position: relative;\n  background-color: var( --comp-scu-button-outline-hover-background-color , rgba(251,255,246,1) );\n  border-radius: var( --comp-scu-button-outline-hover-corner-radius , 200px );\n  border-width: var( --comp-scu-button-outline-hover-stroke-weight , 1px );\n  border-style: solid;\n  border-color: var( --comp-scu-button-outline-hover-stroke-color , rgba(99,166,10,1) ); \n}",
      "example": "\n<style>\n  #comp-scu-button-outline-hover { \n    position: relative;\n    background-color: var( --comp-scu-button-outline-hover-background-color , rgba(251,255,246,1) );\n    border-radius: var( --comp-scu-button-outline-hover-corner-radius , 200px );\n    border-width: var( --comp-scu-button-outline-hover-stroke-weight , 1px );\n    border-style: solid;\n    border-color: var( --comp-scu-button-outline-hover-stroke-color , rgba(99,166,10,1) ); \n  }\n</style>\n<div id='comp-scu-button-outline-hover'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 11px;\n    bottom: 11px;\n    left: 24px;\n    right: 24px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-button-outline-hover--sizing {\n  width: 90px;\n  height: 17px;\n}",
      "example": "\n<style>\n  #comp-scu-button-outline-hover { \n    width: 90px;\n    height: 17px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-outline-hover'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-button-outline-hover--width {\n  width: 90px;\n}",
      "example": "\n<style>\n  #comp-scu-button-outline-hover { \n    width: 90px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-outline-hover'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-button-outline-hover--height {\n  height: 17px;\n}",
      "example": "\n<style>\n  #comp-scu-button-outline-hover { \n    height: 17px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-outline-hover'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-button-outline-hover--figma-autolayout { \n  display: flex;\n  flex-flow: row nowrap;\n  padding-left: var( --comp-scu-button-outline-hover-padding-left , 24px );\n  padding-right: var( --comp-scu-button-outline-hover-padding-right , 24px );\n  padding-top: var( --comp-scu-button-outline-hover-padding-top , 11px );\n  padding-bottom: var( --comp-scu-button-outline-hover-padding-bottom , 11px );\n  & > *:not(:last-child) { margin-right: var( --comp-scu-button-outline-hover-item-spacing , 0px ); } \n}",
      "example": "\n<style>\n  #comp-scu-button-outline-hover { \n    display: flex;\n    flex-flow: row nowrap;\n    padding-left: var( --comp-scu-button-outline-hover-padding-left , 24px );\n    padding-right: var( --comp-scu-button-outline-hover-padding-right , 24px );\n    padding-top: var( --comp-scu-button-outline-hover-padding-top , 11px );\n    padding-bottom: var( --comp-scu-button-outline-hover-padding-bottom , 11px );\n    & > *:not(:last-child) { margin-right: var( --comp-scu-button-outline-hover-item-spacing , 0px ); } \n  }\n</style>\n<div id='comp-scu-button-outline-hover'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-button-outline-hover--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-button-outline-hover-left , 0px );\n  right: var( --comp-scu-button-outline-hover-right , 0px );\n  top: var( --comp-scu-button-outline-hover-top , 0px );\n  bottom: var( --comp-scu-button-outline-hover-bottom , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-button-outline-hover { \n    position: absolute;\n    left: var( --comp-scu-button-outline-hover-left , 0px );\n    right: var( --comp-scu-button-outline-hover-right , 0px );\n    top: var( --comp-scu-button-outline-hover-top , 0px );\n    bottom: var( --comp-scu-button-outline-hover-bottom , 0px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-button-outline-hover'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-button-outline-hover--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-button-outline-hover-left , 0px );\n  margin-right: var( --comp-scu-button-outline-hover-right , 0px );\n  margin-top: var( --comp-scu-button-outline-hover-top , 0px );\n  margin-bottom: var( --comp-scu-button-outline-hover-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-button-outline-hover-left , 0px ) + var( --comp-scu-button-outline-hover-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-button-outline-hover { \n    display: inline-block;\n  margin-left: var( --comp-scu-button-outline-hover-left , 0px );\n  margin-right: var( --comp-scu-button-outline-hover-right , 0px );\n  margin-top: var( --comp-scu-button-outline-hover-top , 0px );\n  margin-bottom: var( --comp-scu-button-outline-hover-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-button-outline-hover-left , 0px ) + var( --comp-scu-button-outline-hover-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-outline-hover'>content</div>"
    }
  },
  "components-scu-button-outline-hover-label-": {
    "": {
      "output": "\n@mixin comp-scu-button-outline-hover-label { \n  position: relative;\n  font-size: var( --comp-scu-button-outline-hover-label-font-size , 16px );\n  text-align: var( --comp-scu-button-outline-hover-label-text-align-horizontal , CENTER );\n  color: var( --comp-scu-button-outline-hover-label-color , rgba(58,99,3,1) );\n  font-family: var( --comp-scu-button-outline-hover-label-font-family , 'Proxima Nova' );\n  font-weight: var( --comp-scu-button-outline-hover-label-font-weight , 400 );\n  line-height: var( --comp-scu-button-outline-hover-label-line-height , 18.75px );\n  letter-spacing: var( --comp-scu-button-outline-hover-label-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-button-outline-hover-label { \n    position: relative;\n    font-size: var( --comp-scu-button-outline-hover-label-font-size , 16px );\n    text-align: var( --comp-scu-button-outline-hover-label-text-align-horizontal , CENTER );\n    color: var( --comp-scu-button-outline-hover-label-color , rgba(58,99,3,1) );\n    font-family: var( --comp-scu-button-outline-hover-label-font-family , 'Proxima Nova' );\n    font-weight: var( --comp-scu-button-outline-hover-label-font-weight , 400 );\n    line-height: var( --comp-scu-button-outline-hover-label-line-height , 18.75px );\n    letter-spacing: var( --comp-scu-button-outline-hover-label-letter-spacing , 0px ); \n  }\n</style>\n<div id='comp-scu-button-outline-hover-label'></div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-button-outline-hover-label--sizing {\n  width: 34px;\n  height: 19px;\n}",
      "example": "\n<style>\n  #comp-scu-button-outline-hover-label { \n    width: 34px;\n    height: 19px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-outline-hover-label'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-button-outline-hover-label--width {\n  width: 34px;\n}",
      "example": "\n<style>\n  #comp-scu-button-outline-hover-label { \n    width: 34px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-outline-hover-label'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-button-outline-hover-label--height {\n  height: 19px;\n}",
      "example": "\n<style>\n  #comp-scu-button-outline-hover-label { \n    height: 19px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-outline-hover-label'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-button-outline-hover-label--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #comp-scu-button-outline-hover-label { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-button-outline-hover-label'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-button-outline-hover-label--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-button-outline-hover-label-left , 23px );\n  margin-right: var( --comp-scu-button-outline-hover-label-right , 33px );\n  margin-top: var( --comp-scu-button-outline-hover-label-top , 11px );\n  margin-bottom: var( --comp-scu-button-outline-hover-label-bottom , -13px );\n  width: calc( 100% - ( var( --comp-scu-button-outline-hover-label-left , 23px ) + var( --comp-scu-button-outline-hover-label-right , 33px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-button-outline-hover-label { \n    display: inline-block;\n  margin-left: var( --comp-scu-button-outline-hover-label-left , 23px );\n  margin-right: var( --comp-scu-button-outline-hover-label-right , 33px );\n  margin-top: var( --comp-scu-button-outline-hover-label-top , 11px );\n  margin-bottom: var( --comp-scu-button-outline-hover-label-bottom , -13px );\n  width: calc( 100% - ( var( --comp-scu-button-outline-hover-label-left , 23px ) + var( --comp-scu-button-outline-hover-label-right , 33px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-outline-hover-label'>content</div>"
    }
  },
  "components-scu-button-outline-focus-": {
    "box": {
      "output": "\n@mixin comp-scu-button-outline-focus { \n  position: relative;\n  background-color: var( --comp-scu-button-outline-focus-background-color , rgba(255,255,255,1) );\n  border-radius: var( --comp-scu-button-outline-focus-corner-radius , 200px );\n  border-width: var( --comp-scu-button-outline-focus-stroke-weight , 1px );\n  border-style: solid;\n  border-color: var( --comp-scu-button-outline-focus-stroke-color , rgba(99,166,10,1) );\n  box-shadow: var( --comp-scu-button-outline-focus-shadow , 0px 0px 0px 2px rgba(53,155,249,1) ); \n}",
      "example": "\n<style>\n  #comp-scu-button-outline-focus { \n    position: relative;\n    background-color: var( --comp-scu-button-outline-focus-background-color , rgba(255,255,255,1) );\n    border-radius: var( --comp-scu-button-outline-focus-corner-radius , 200px );\n    border-width: var( --comp-scu-button-outline-focus-stroke-weight , 1px );\n    border-style: solid;\n    border-color: var( --comp-scu-button-outline-focus-stroke-color , rgba(99,166,10,1) );\n    box-shadow: var( --comp-scu-button-outline-focus-shadow , 0px 0px 0px 2px rgba(53,155,249,1) ); \n  }\n</style>\n<div id='comp-scu-button-outline-focus'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 11px;\n    bottom: 11px;\n    left: 24px;\n    right: 24px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-button-outline-focus--sizing {\n  width: 90px;\n  height: 17px;\n}",
      "example": "\n<style>\n  #comp-scu-button-outline-focus { \n    width: 90px;\n    height: 17px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-outline-focus'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-button-outline-focus--width {\n  width: 90px;\n}",
      "example": "\n<style>\n  #comp-scu-button-outline-focus { \n    width: 90px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-outline-focus'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-button-outline-focus--height {\n  height: 17px;\n}",
      "example": "\n<style>\n  #comp-scu-button-outline-focus { \n    height: 17px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-outline-focus'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-button-outline-focus--figma-autolayout { \n  display: flex;\n  flex-flow: row nowrap;\n  padding-left: var( --comp-scu-button-outline-focus-padding-left , 24px );\n  padding-right: var( --comp-scu-button-outline-focus-padding-right , 24px );\n  padding-top: var( --comp-scu-button-outline-focus-padding-top , 11px );\n  padding-bottom: var( --comp-scu-button-outline-focus-padding-bottom , 11px );\n  & > *:not(:last-child) { margin-right: var( --comp-scu-button-outline-focus-item-spacing , 0px ); } \n}",
      "example": "\n<style>\n  #comp-scu-button-outline-focus { \n    display: flex;\n    flex-flow: row nowrap;\n    padding-left: var( --comp-scu-button-outline-focus-padding-left , 24px );\n    padding-right: var( --comp-scu-button-outline-focus-padding-right , 24px );\n    padding-top: var( --comp-scu-button-outline-focus-padding-top , 11px );\n    padding-bottom: var( --comp-scu-button-outline-focus-padding-bottom , 11px );\n    & > *:not(:last-child) { margin-right: var( --comp-scu-button-outline-focus-item-spacing , 0px ); } \n  }\n</style>\n<div id='comp-scu-button-outline-focus'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-button-outline-focus--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-button-outline-focus-left , 0px );\n  right: var( --comp-scu-button-outline-focus-right , 0px );\n  top: var( --comp-scu-button-outline-focus-top , 0px );\n  bottom: var( --comp-scu-button-outline-focus-bottom , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-button-outline-focus { \n    position: absolute;\n    left: var( --comp-scu-button-outline-focus-left , 0px );\n    right: var( --comp-scu-button-outline-focus-right , 0px );\n    top: var( --comp-scu-button-outline-focus-top , 0px );\n    bottom: var( --comp-scu-button-outline-focus-bottom , 0px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-button-outline-focus'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-button-outline-focus--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-button-outline-focus-left , 0px );\n  margin-right: var( --comp-scu-button-outline-focus-right , 0px );\n  margin-top: var( --comp-scu-button-outline-focus-top , 0px );\n  margin-bottom: var( --comp-scu-button-outline-focus-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-button-outline-focus-left , 0px ) + var( --comp-scu-button-outline-focus-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-button-outline-focus { \n    display: inline-block;\n  margin-left: var( --comp-scu-button-outline-focus-left , 0px );\n  margin-right: var( --comp-scu-button-outline-focus-right , 0px );\n  margin-top: var( --comp-scu-button-outline-focus-top , 0px );\n  margin-bottom: var( --comp-scu-button-outline-focus-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-button-outline-focus-left , 0px ) + var( --comp-scu-button-outline-focus-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-outline-focus'>content</div>"
    }
  },
  "components-scu-button-outline-focus-label-": {
    "": {
      "output": "\n@mixin comp-scu-button-outline-focus-label { \n  position: relative;\n  font-size: var( --comp-scu-button-outline-focus-label-font-size , 16px );\n  text-align: var( --comp-scu-button-outline-focus-label-text-align-horizontal , CENTER );\n  color: var( --comp-scu-button-outline-focus-label-color , rgba(58,99,3,1) );\n  font-family: var( --comp-scu-button-outline-focus-label-font-family , 'Proxima Nova' );\n  font-weight: var( --comp-scu-button-outline-focus-label-font-weight , 400 );\n  line-height: var( --comp-scu-button-outline-focus-label-line-height , 18.75px );\n  letter-spacing: var( --comp-scu-button-outline-focus-label-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-button-outline-focus-label { \n    position: relative;\n    font-size: var( --comp-scu-button-outline-focus-label-font-size , 16px );\n    text-align: var( --comp-scu-button-outline-focus-label-text-align-horizontal , CENTER );\n    color: var( --comp-scu-button-outline-focus-label-color , rgba(58,99,3,1) );\n    font-family: var( --comp-scu-button-outline-focus-label-font-family , 'Proxima Nova' );\n    font-weight: var( --comp-scu-button-outline-focus-label-font-weight , 400 );\n    line-height: var( --comp-scu-button-outline-focus-label-line-height , 18.75px );\n    letter-spacing: var( --comp-scu-button-outline-focus-label-letter-spacing , 0px ); \n  }\n</style>\n<div id='comp-scu-button-outline-focus-label'></div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-button-outline-focus-label--sizing {\n  width: 34px;\n  height: 19px;\n}",
      "example": "\n<style>\n  #comp-scu-button-outline-focus-label { \n    width: 34px;\n    height: 19px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-outline-focus-label'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-button-outline-focus-label--width {\n  width: 34px;\n}",
      "example": "\n<style>\n  #comp-scu-button-outline-focus-label { \n    width: 34px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-outline-focus-label'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-button-outline-focus-label--height {\n  height: 19px;\n}",
      "example": "\n<style>\n  #comp-scu-button-outline-focus-label { \n    height: 19px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-outline-focus-label'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-button-outline-focus-label--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #comp-scu-button-outline-focus-label { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-button-outline-focus-label'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-button-outline-focus-label--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-button-outline-focus-label-left , 23px );\n  margin-right: var( --comp-scu-button-outline-focus-label-right , 33px );\n  margin-top: var( --comp-scu-button-outline-focus-label-top , 11px );\n  margin-bottom: var( --comp-scu-button-outline-focus-label-bottom , -13px );\n  width: calc( 100% - ( var( --comp-scu-button-outline-focus-label-left , 23px ) + var( --comp-scu-button-outline-focus-label-right , 33px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-button-outline-focus-label { \n    display: inline-block;\n  margin-left: var( --comp-scu-button-outline-focus-label-left , 23px );\n  margin-right: var( --comp-scu-button-outline-focus-label-right , 33px );\n  margin-top: var( --comp-scu-button-outline-focus-label-top , 11px );\n  margin-bottom: var( --comp-scu-button-outline-focus-label-bottom , -13px );\n  width: calc( 100% - ( var( --comp-scu-button-outline-focus-label-left , 23px ) + var( --comp-scu-button-outline-focus-label-right , 33px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-outline-focus-label'>content</div>"
    }
  },
  "components-scu-button-outline-disabled-": {
    "box": {
      "output": "\n@mixin comp-scu-button-outline-disabled { \n  position: relative;\n  background-color: var( --comp-scu-button-outline-disabled-background-color , rgba(255,255,255,1) );\n  border-radius: var( --comp-scu-button-outline-disabled-corner-radius , 200px );\n  border-width: var( --comp-scu-button-outline-disabled-stroke-weight , 1px );\n  border-style: solid;\n  border-color: var( --comp-scu-button-outline-disabled-stroke-color , rgba(187,218,146,1) ); \n}",
      "example": "\n<style>\n  #comp-scu-button-outline-disabled { \n    position: relative;\n    background-color: var( --comp-scu-button-outline-disabled-background-color , rgba(255,255,255,1) );\n    border-radius: var( --comp-scu-button-outline-disabled-corner-radius , 200px );\n    border-width: var( --comp-scu-button-outline-disabled-stroke-weight , 1px );\n    border-style: solid;\n    border-color: var( --comp-scu-button-outline-disabled-stroke-color , rgba(187,218,146,1) ); \n  }\n</style>\n<div id='comp-scu-button-outline-disabled'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 11px;\n    bottom: 11px;\n    left: 24px;\n    right: 24px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-button-outline-disabled--sizing {\n  width: 80px;\n  height: 40px;\n}",
      "example": "\n<style>\n  #comp-scu-button-outline-disabled { \n    width: 80px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-outline-disabled'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-button-outline-disabled--width {\n  width: 80px;\n}",
      "example": "\n<style>\n  #comp-scu-button-outline-disabled { \n    width: 80px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-outline-disabled'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-button-outline-disabled--height {\n  height: 40px;\n}",
      "example": "\n<style>\n  #comp-scu-button-outline-disabled { \n    height: 40px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-outline-disabled'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-button-outline-disabled--figma-autolayout { \n  display: flex;\n  flex-flow: row nowrap;\n  padding-left: var( --comp-scu-button-outline-disabled-padding-left , 24px );\n  padding-right: var( --comp-scu-button-outline-disabled-padding-right , 24px );\n  padding-top: var( --comp-scu-button-outline-disabled-padding-top , 11px );\n  padding-bottom: var( --comp-scu-button-outline-disabled-padding-bottom , 11px );\n  & > *:not(:last-child) { margin-right: var( --comp-scu-button-outline-disabled-item-spacing , 0px ); } \n}",
      "example": "\n<style>\n  #comp-scu-button-outline-disabled { \n    display: flex;\n    flex-flow: row nowrap;\n    padding-left: var( --comp-scu-button-outline-disabled-padding-left , 24px );\n    padding-right: var( --comp-scu-button-outline-disabled-padding-right , 24px );\n    padding-top: var( --comp-scu-button-outline-disabled-padding-top , 11px );\n    padding-bottom: var( --comp-scu-button-outline-disabled-padding-bottom , 11px );\n    & > *:not(:last-child) { margin-right: var( --comp-scu-button-outline-disabled-item-spacing , 0px ); } \n  }\n</style>\n<div id='comp-scu-button-outline-disabled'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-button-outline-disabled--absolute-layout {\n  position: absolute;\n  right: var( --comp-scu-button-outline-disabled-left , 10px );\n  width: var( --comp-scu-button-outline-disabled-width , 80px );\n  bottom: var( --comp-scu-button-outline-disabled-bottom , 0px );\n  height: var( --comp-scu-button-outline-disabled-height , 40px ); \n}",
      "example": "\n<style>\n  #comp-scu-button-outline-disabled { \n    position: absolute;\n    right: var( --comp-scu-button-outline-disabled-left , 10px );\n    width: var( --comp-scu-button-outline-disabled-width , 80px );\n    bottom: var( --comp-scu-button-outline-disabled-bottom , 0px );\n    height: var( --comp-scu-button-outline-disabled-height , 40px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-button-outline-disabled'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-button-outline-disabled--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-button-outline-disabled-left , 10px );\n  margin-right: var( --comp-scu-button-outline-disabled-right , 0px );\n  margin-top: var( --comp-scu-button-outline-disabled-top , -23px );\n  margin-bottom: var( --comp-scu-button-outline-disabled-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-button-outline-disabled-left , 10px ) + var( --comp-scu-button-outline-disabled-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-button-outline-disabled { \n    display: inline-block;\n  margin-left: var( --comp-scu-button-outline-disabled-left , 10px );\n  margin-right: var( --comp-scu-button-outline-disabled-right , 0px );\n  margin-top: var( --comp-scu-button-outline-disabled-top , -23px );\n  margin-bottom: var( --comp-scu-button-outline-disabled-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-button-outline-disabled-left , 10px ) + var( --comp-scu-button-outline-disabled-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-outline-disabled'>content</div>"
    }
  },
  "components-scu-button-outline-disabled-label-": {
    "": {
      "output": "\n@mixin comp-scu-button-outline-disabled-label { \n  position: relative;\n  font-size: var( --comp-scu-button-outline-disabled-label-font-size , 16px );\n  text-align: var( --comp-scu-button-outline-disabled-label-text-align-horizontal , CENTER );\n  color: var( --comp-scu-button-outline-disabled-label-color , rgba(201,227,166,1) );\n  font-family: var( --comp-scu-button-outline-disabled-label-font-family , 'Proxima Nova' );\n  font-weight: var( --comp-scu-button-outline-disabled-label-font-weight , 400 );\n  line-height: var( --comp-scu-button-outline-disabled-label-line-height , 18.75px );\n  letter-spacing: var( --comp-scu-button-outline-disabled-label-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-button-outline-disabled-label { \n    position: relative;\n    font-size: var( --comp-scu-button-outline-disabled-label-font-size , 16px );\n    text-align: var( --comp-scu-button-outline-disabled-label-text-align-horizontal , CENTER );\n    color: var( --comp-scu-button-outline-disabled-label-color , rgba(201,227,166,1) );\n    font-family: var( --comp-scu-button-outline-disabled-label-font-family , 'Proxima Nova' );\n    font-weight: var( --comp-scu-button-outline-disabled-label-font-weight , 400 );\n    line-height: var( --comp-scu-button-outline-disabled-label-line-height , 18.75px );\n    letter-spacing: var( --comp-scu-button-outline-disabled-label-letter-spacing , 0px ); \n  }\n</style>\n<div id='comp-scu-button-outline-disabled-label'></div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-button-outline-disabled-label--sizing {\n  width: 34px;\n  height: 19px;\n}",
      "example": "\n<style>\n  #comp-scu-button-outline-disabled-label { \n    width: 34px;\n    height: 19px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-outline-disabled-label'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-button-outline-disabled-label--width {\n  width: 34px;\n}",
      "example": "\n<style>\n  #comp-scu-button-outline-disabled-label { \n    width: 34px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-outline-disabled-label'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-button-outline-disabled-label--height {\n  height: 19px;\n}",
      "example": "\n<style>\n  #comp-scu-button-outline-disabled-label { \n    height: 19px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-outline-disabled-label'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-button-outline-disabled-label--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #comp-scu-button-outline-disabled-label { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-button-outline-disabled-label'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-button-outline-disabled-label--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-button-outline-disabled-label-left , 23px );\n  margin-right: var( --comp-scu-button-outline-disabled-label-right , 23px );\n  margin-top: var( --comp-scu-button-outline-disabled-label-top , 11px );\n  margin-bottom: var( --comp-scu-button-outline-disabled-label-bottom , 10px );\n  width: calc( 100% - ( var( --comp-scu-button-outline-disabled-label-left , 23px ) + var( --comp-scu-button-outline-disabled-label-right , 23px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-button-outline-disabled-label { \n    display: inline-block;\n  margin-left: var( --comp-scu-button-outline-disabled-label-left , 23px );\n  margin-right: var( --comp-scu-button-outline-disabled-label-right , 23px );\n  margin-top: var( --comp-scu-button-outline-disabled-label-top , 11px );\n  margin-bottom: var( --comp-scu-button-outline-disabled-label-bottom , 10px );\n  width: calc( 100% - ( var( --comp-scu-button-outline-disabled-label-left , 23px ) + var( --comp-scu-button-outline-disabled-label-right , 23px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-outline-disabled-label'>content</div>"
    }
  },
  "components-scu-button-grey-": {
    "box": {
      "output": "\n@mixin comp-scu-button-grey { \n  position: relative; \n}",
      "example": "\n<style>\n  #comp-scu-button-grey { \n    position: relative; \n  }\n</style>\n<div id='comp-scu-button-grey'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-button-grey--sizing {\n  width: 93px;\n  height: 17px;\n}",
      "example": "\n<style>\n  #comp-scu-button-grey { \n    width: 93px;\n    height: 17px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-grey'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-button-grey--width {\n  width: 93px;\n}",
      "example": "\n<style>\n  #comp-scu-button-grey { \n    width: 93px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-grey'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-button-grey--height {\n  height: 17px;\n}",
      "example": "\n<style>\n  #comp-scu-button-grey { \n    height: 17px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-grey'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-button-grey--figma-autolayout { \n   \n}",
      "example": "\n<style>\n  #comp-scu-button-grey { \n     \n  }\n</style>\n<div id='comp-scu-button-grey'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-button-grey--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #comp-scu-button-grey { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-button-grey'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-button-grey--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-button-grey-left , 0px );\n  margin-right: var( --comp-scu-button-grey-right , 0px );\n  margin-top: var( --comp-scu-button-grey-top , 0px );\n  margin-bottom: var( --comp-scu-button-grey-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-button-grey-left , 0px ) + var( --comp-scu-button-grey-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-button-grey { \n    display: inline-block;\n  margin-left: var( --comp-scu-button-grey-left , 0px );\n  margin-right: var( --comp-scu-button-grey-right , 0px );\n  margin-top: var( --comp-scu-button-grey-top , 0px );\n  margin-bottom: var( --comp-scu-button-grey-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-button-grey-left , 0px ) + var( --comp-scu-button-grey-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-grey'>content</div>"
    }
  },
  "components-scu-button-grey-default-": {
    "box": {
      "output": "\n@mixin comp-scu-button-grey-default { \n  position: relative;\n  background-color: var( --comp-scu-button-grey-default-background-color , rgba(219,219,219,1) );\n  border-radius: var( --comp-scu-button-grey-default-corner-radius , 200px ); \n}",
      "example": "\n<style>\n  #comp-scu-button-grey-default { \n    position: relative;\n    background-color: var( --comp-scu-button-grey-default-background-color , rgba(219,219,219,1) );\n    border-radius: var( --comp-scu-button-grey-default-corner-radius , 200px ); \n  }\n</style>\n<div id='comp-scu-button-grey-default'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 11px;\n    bottom: 11px;\n    left: 24px;\n    right: 24px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-button-grey-default--sizing {\n  width: 82px;\n  height: 41px;\n}",
      "example": "\n<style>\n  #comp-scu-button-grey-default { \n    width: 82px;\n    height: 41px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-grey-default'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-button-grey-default--width {\n  width: 82px;\n}",
      "example": "\n<style>\n  #comp-scu-button-grey-default { \n    width: 82px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-grey-default'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-button-grey-default--height {\n  height: 41px;\n}",
      "example": "\n<style>\n  #comp-scu-button-grey-default { \n    height: 41px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-grey-default'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-button-grey-default--figma-autolayout { \n  display: flex;\n  flex-flow: row nowrap;\n  padding-left: var( --comp-scu-button-grey-default-padding-left , 24px );\n  padding-right: var( --comp-scu-button-grey-default-padding-right , 24px );\n  padding-top: var( --comp-scu-button-grey-default-padding-top , 11px );\n  padding-bottom: var( --comp-scu-button-grey-default-padding-bottom , 11px );\n  & > *:not(:last-child) { margin-right: var( --comp-scu-button-grey-default-item-spacing , 0px ); } \n}",
      "example": "\n<style>\n  #comp-scu-button-grey-default { \n    display: flex;\n    flex-flow: row nowrap;\n    padding-left: var( --comp-scu-button-grey-default-padding-left , 24px );\n    padding-right: var( --comp-scu-button-grey-default-padding-right , 24px );\n    padding-top: var( --comp-scu-button-grey-default-padding-top , 11px );\n    padding-bottom: var( --comp-scu-button-grey-default-padding-bottom , 11px );\n    & > *:not(:last-child) { margin-right: var( --comp-scu-button-grey-default-item-spacing , 0px ); } \n  }\n</style>\n<div id='comp-scu-button-grey-default'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-button-grey-default--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-button-grey-default-left , 5.5px );\n  right: var( --comp-scu-button-grey-default-right , 5.5px );\n  top: var( --comp-scu-button-grey-default-top , -12px );\n  bottom: var( --comp-scu-button-grey-default-bottom , -12px ); \n}",
      "example": "\n<style>\n  #comp-scu-button-grey-default { \n    position: absolute;\n    left: var( --comp-scu-button-grey-default-left , 5.5px );\n    right: var( --comp-scu-button-grey-default-right , 5.5px );\n    top: var( --comp-scu-button-grey-default-top , -12px );\n    bottom: var( --comp-scu-button-grey-default-bottom , -12px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-button-grey-default'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-button-grey-default--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-button-grey-default-left , 5.5px );\n  margin-right: var( --comp-scu-button-grey-default-right , 5.5px );\n  margin-top: var( --comp-scu-button-grey-default-top , -12px );\n  margin-bottom: var( --comp-scu-button-grey-default-bottom , -12px );\n  width: calc( 100% - ( var( --comp-scu-button-grey-default-left , 5.5px ) + var( --comp-scu-button-grey-default-right , 5.5px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-button-grey-default { \n    display: inline-block;\n  margin-left: var( --comp-scu-button-grey-default-left , 5.5px );\n  margin-right: var( --comp-scu-button-grey-default-right , 5.5px );\n  margin-top: var( --comp-scu-button-grey-default-top , -12px );\n  margin-bottom: var( --comp-scu-button-grey-default-bottom , -12px );\n  width: calc( 100% - ( var( --comp-scu-button-grey-default-left , 5.5px ) + var( --comp-scu-button-grey-default-right , 5.5px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-grey-default'>content</div>"
    }
  },
  "components-scu-button-grey-default-label-": {
    "": {
      "output": "\n@mixin comp-scu-button-grey-default-label { \n  position: relative;\n  font-size: var( --comp-scu-button-grey-default-label-font-size , 16px );\n  text-align: var( --comp-scu-button-grey-default-label-text-align-horizontal , CENTER );\n  color: var( --comp-scu-button-grey-default-label-color , rgba(0,0,0,1) );\n  font-family: var( --comp-scu-button-grey-default-label-font-family , 'Proxima Nova' );\n  font-weight: var( --comp-scu-button-grey-default-label-font-weight , 400 );\n  line-height: var( --comp-scu-button-grey-default-label-line-height , 18.75px );\n  letter-spacing: var( --comp-scu-button-grey-default-label-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-button-grey-default-label { \n    position: relative;\n    font-size: var( --comp-scu-button-grey-default-label-font-size , 16px );\n    text-align: var( --comp-scu-button-grey-default-label-text-align-horizontal , CENTER );\n    color: var( --comp-scu-button-grey-default-label-color , rgba(0,0,0,1) );\n    font-family: var( --comp-scu-button-grey-default-label-font-family , 'Proxima Nova' );\n    font-weight: var( --comp-scu-button-grey-default-label-font-weight , 400 );\n    line-height: var( --comp-scu-button-grey-default-label-line-height , 18.75px );\n    letter-spacing: var( --comp-scu-button-grey-default-label-letter-spacing , 0px ); \n  }\n</style>\n<div id='comp-scu-button-grey-default-label'></div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-button-grey-default-label--sizing {\n  width: 34px;\n  height: 19px;\n}",
      "example": "\n<style>\n  #comp-scu-button-grey-default-label { \n    width: 34px;\n    height: 19px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-grey-default-label'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-button-grey-default-label--width {\n  width: 34px;\n}",
      "example": "\n<style>\n  #comp-scu-button-grey-default-label { \n    width: 34px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-grey-default-label'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-button-grey-default-label--height {\n  height: 19px;\n}",
      "example": "\n<style>\n  #comp-scu-button-grey-default-label { \n    height: 19px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-grey-default-label'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-button-grey-default-label--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #comp-scu-button-grey-default-label { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-button-grey-default-label'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-button-grey-default-label--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-button-grey-default-label-left , 24px );\n  margin-right: var( --comp-scu-button-grey-default-label-right , 24px );\n  margin-top: var( --comp-scu-button-grey-default-label-top , 11px );\n  margin-bottom: var( --comp-scu-button-grey-default-label-bottom , 11px );\n  width: calc( 100% - ( var( --comp-scu-button-grey-default-label-left , 24px ) + var( --comp-scu-button-grey-default-label-right , 24px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-button-grey-default-label { \n    display: inline-block;\n  margin-left: var( --comp-scu-button-grey-default-label-left , 24px );\n  margin-right: var( --comp-scu-button-grey-default-label-right , 24px );\n  margin-top: var( --comp-scu-button-grey-default-label-top , 11px );\n  margin-bottom: var( --comp-scu-button-grey-default-label-bottom , 11px );\n  width: calc( 100% - ( var( --comp-scu-button-grey-default-label-left , 24px ) + var( --comp-scu-button-grey-default-label-right , 24px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-grey-default-label'>content</div>"
    }
  },
  "components-scu-button-grey-hover-": {
    "box": {
      "output": "\n@mixin comp-scu-button-grey-hover { \n  position: relative;\n  background-color: var( --comp-scu-button-grey-hover-background-color , rgba(235,235,235,1) );\n  border-radius: var( --comp-scu-button-grey-hover-corner-radius , 200px ); \n}",
      "example": "\n<style>\n  #comp-scu-button-grey-hover { \n    position: relative;\n    background-color: var( --comp-scu-button-grey-hover-background-color , rgba(235,235,235,1) );\n    border-radius: var( --comp-scu-button-grey-hover-corner-radius , 200px ); \n  }\n</style>\n<div id='comp-scu-button-grey-hover'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 11px;\n    bottom: 11px;\n    left: 24px;\n    right: 24px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-button-grey-hover--sizing {\n  width: 93px;\n  height: 17px;\n}",
      "example": "\n<style>\n  #comp-scu-button-grey-hover { \n    width: 93px;\n    height: 17px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-grey-hover'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-button-grey-hover--width {\n  width: 93px;\n}",
      "example": "\n<style>\n  #comp-scu-button-grey-hover { \n    width: 93px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-grey-hover'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-button-grey-hover--height {\n  height: 17px;\n}",
      "example": "\n<style>\n  #comp-scu-button-grey-hover { \n    height: 17px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-grey-hover'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-button-grey-hover--figma-autolayout { \n  display: flex;\n  flex-flow: row nowrap;\n  padding-left: var( --comp-scu-button-grey-hover-padding-left , 24px );\n  padding-right: var( --comp-scu-button-grey-hover-padding-right , 24px );\n  padding-top: var( --comp-scu-button-grey-hover-padding-top , 11px );\n  padding-bottom: var( --comp-scu-button-grey-hover-padding-bottom , 11px );\n  & > *:not(:last-child) { margin-right: var( --comp-scu-button-grey-hover-item-spacing , 0px ); } \n}",
      "example": "\n<style>\n  #comp-scu-button-grey-hover { \n    display: flex;\n    flex-flow: row nowrap;\n    padding-left: var( --comp-scu-button-grey-hover-padding-left , 24px );\n    padding-right: var( --comp-scu-button-grey-hover-padding-right , 24px );\n    padding-top: var( --comp-scu-button-grey-hover-padding-top , 11px );\n    padding-bottom: var( --comp-scu-button-grey-hover-padding-bottom , 11px );\n    & > *:not(:last-child) { margin-right: var( --comp-scu-button-grey-hover-item-spacing , 0px ); } \n  }\n</style>\n<div id='comp-scu-button-grey-hover'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-button-grey-hover--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-button-grey-hover-left , 0px );\n  right: var( --comp-scu-button-grey-hover-right , 0px );\n  top: var( --comp-scu-button-grey-hover-top , 0px );\n  bottom: var( --comp-scu-button-grey-hover-bottom , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-button-grey-hover { \n    position: absolute;\n    left: var( --comp-scu-button-grey-hover-left , 0px );\n    right: var( --comp-scu-button-grey-hover-right , 0px );\n    top: var( --comp-scu-button-grey-hover-top , 0px );\n    bottom: var( --comp-scu-button-grey-hover-bottom , 0px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-button-grey-hover'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-button-grey-hover--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-button-grey-hover-left , 0px );\n  margin-right: var( --comp-scu-button-grey-hover-right , 0px );\n  margin-top: var( --comp-scu-button-grey-hover-top , 0px );\n  margin-bottom: var( --comp-scu-button-grey-hover-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-button-grey-hover-left , 0px ) + var( --comp-scu-button-grey-hover-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-button-grey-hover { \n    display: inline-block;\n  margin-left: var( --comp-scu-button-grey-hover-left , 0px );\n  margin-right: var( --comp-scu-button-grey-hover-right , 0px );\n  margin-top: var( --comp-scu-button-grey-hover-top , 0px );\n  margin-bottom: var( --comp-scu-button-grey-hover-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-button-grey-hover-left , 0px ) + var( --comp-scu-button-grey-hover-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-grey-hover'>content</div>"
    }
  },
  "components-scu-button-grey-hover-label-": {
    "": {
      "output": "\n@mixin comp-scu-button-grey-hover-label { \n  position: relative;\n  font-size: var( --comp-scu-button-grey-hover-label-font-size , 16px );\n  text-align: var( --comp-scu-button-grey-hover-label-text-align-horizontal , CENTER );\n  color: var( --comp-scu-button-grey-hover-label-color , rgba(0,0,0,1) );\n  font-family: var( --comp-scu-button-grey-hover-label-font-family , 'Proxima Nova' );\n  font-weight: var( --comp-scu-button-grey-hover-label-font-weight , 400 );\n  line-height: var( --comp-scu-button-grey-hover-label-line-height , 18.75px );\n  letter-spacing: var( --comp-scu-button-grey-hover-label-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-button-grey-hover-label { \n    position: relative;\n    font-size: var( --comp-scu-button-grey-hover-label-font-size , 16px );\n    text-align: var( --comp-scu-button-grey-hover-label-text-align-horizontal , CENTER );\n    color: var( --comp-scu-button-grey-hover-label-color , rgba(0,0,0,1) );\n    font-family: var( --comp-scu-button-grey-hover-label-font-family , 'Proxima Nova' );\n    font-weight: var( --comp-scu-button-grey-hover-label-font-weight , 400 );\n    line-height: var( --comp-scu-button-grey-hover-label-line-height , 18.75px );\n    letter-spacing: var( --comp-scu-button-grey-hover-label-letter-spacing , 0px ); \n  }\n</style>\n<div id='comp-scu-button-grey-hover-label'></div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-button-grey-hover-label--sizing {\n  width: 34px;\n  height: 19px;\n}",
      "example": "\n<style>\n  #comp-scu-button-grey-hover-label { \n    width: 34px;\n    height: 19px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-grey-hover-label'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-button-grey-hover-label--width {\n  width: 34px;\n}",
      "example": "\n<style>\n  #comp-scu-button-grey-hover-label { \n    width: 34px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-grey-hover-label'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-button-grey-hover-label--height {\n  height: 19px;\n}",
      "example": "\n<style>\n  #comp-scu-button-grey-hover-label { \n    height: 19px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-grey-hover-label'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-button-grey-hover-label--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #comp-scu-button-grey-hover-label { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-button-grey-hover-label'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-button-grey-hover-label--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-button-grey-hover-label-left , 23px );\n  margin-right: var( --comp-scu-button-grey-hover-label-right , 36px );\n  margin-top: var( --comp-scu-button-grey-hover-label-top , 11px );\n  margin-bottom: var( --comp-scu-button-grey-hover-label-bottom , -13px );\n  width: calc( 100% - ( var( --comp-scu-button-grey-hover-label-left , 23px ) + var( --comp-scu-button-grey-hover-label-right , 36px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-button-grey-hover-label { \n    display: inline-block;\n  margin-left: var( --comp-scu-button-grey-hover-label-left , 23px );\n  margin-right: var( --comp-scu-button-grey-hover-label-right , 36px );\n  margin-top: var( --comp-scu-button-grey-hover-label-top , 11px );\n  margin-bottom: var( --comp-scu-button-grey-hover-label-bottom , -13px );\n  width: calc( 100% - ( var( --comp-scu-button-grey-hover-label-left , 23px ) + var( --comp-scu-button-grey-hover-label-right , 36px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-grey-hover-label'>content</div>"
    }
  },
  "components-scu-button-grey-focus-": {
    "box": {
      "output": "\n@mixin comp-scu-button-grey-focus { \n  position: relative;\n  background-color: var( --comp-scu-button-grey-focus-background-color , rgba(219,219,219,1) );\n  border-radius: var( --comp-scu-button-grey-focus-corner-radius , 200px );\n  box-shadow: var( --comp-scu-button-grey-focus-shadow , 0px 0px 0px 2px rgba(53,155,249,1) ); \n}",
      "example": "\n<style>\n  #comp-scu-button-grey-focus { \n    position: relative;\n    background-color: var( --comp-scu-button-grey-focus-background-color , rgba(219,219,219,1) );\n    border-radius: var( --comp-scu-button-grey-focus-corner-radius , 200px );\n    box-shadow: var( --comp-scu-button-grey-focus-shadow , 0px 0px 0px 2px rgba(53,155,249,1) ); \n  }\n</style>\n<div id='comp-scu-button-grey-focus'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 11px;\n    bottom: 11px;\n    left: 24px;\n    right: 24px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-button-grey-focus--sizing {\n  width: 93px;\n  height: 17px;\n}",
      "example": "\n<style>\n  #comp-scu-button-grey-focus { \n    width: 93px;\n    height: 17px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-grey-focus'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-button-grey-focus--width {\n  width: 93px;\n}",
      "example": "\n<style>\n  #comp-scu-button-grey-focus { \n    width: 93px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-grey-focus'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-button-grey-focus--height {\n  height: 17px;\n}",
      "example": "\n<style>\n  #comp-scu-button-grey-focus { \n    height: 17px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-grey-focus'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-button-grey-focus--figma-autolayout { \n  display: flex;\n  flex-flow: row nowrap;\n  padding-left: var( --comp-scu-button-grey-focus-padding-left , 24px );\n  padding-right: var( --comp-scu-button-grey-focus-padding-right , 24px );\n  padding-top: var( --comp-scu-button-grey-focus-padding-top , 11px );\n  padding-bottom: var( --comp-scu-button-grey-focus-padding-bottom , 11px );\n  & > *:not(:last-child) { margin-right: var( --comp-scu-button-grey-focus-item-spacing , 0px ); } \n}",
      "example": "\n<style>\n  #comp-scu-button-grey-focus { \n    display: flex;\n    flex-flow: row nowrap;\n    padding-left: var( --comp-scu-button-grey-focus-padding-left , 24px );\n    padding-right: var( --comp-scu-button-grey-focus-padding-right , 24px );\n    padding-top: var( --comp-scu-button-grey-focus-padding-top , 11px );\n    padding-bottom: var( --comp-scu-button-grey-focus-padding-bottom , 11px );\n    & > *:not(:last-child) { margin-right: var( --comp-scu-button-grey-focus-item-spacing , 0px ); } \n  }\n</style>\n<div id='comp-scu-button-grey-focus'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-button-grey-focus--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-button-grey-focus-left , 0px );\n  right: var( --comp-scu-button-grey-focus-right , 0px );\n  top: var( --comp-scu-button-grey-focus-top , 0px );\n  bottom: var( --comp-scu-button-grey-focus-bottom , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-button-grey-focus { \n    position: absolute;\n    left: var( --comp-scu-button-grey-focus-left , 0px );\n    right: var( --comp-scu-button-grey-focus-right , 0px );\n    top: var( --comp-scu-button-grey-focus-top , 0px );\n    bottom: var( --comp-scu-button-grey-focus-bottom , 0px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-button-grey-focus'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-button-grey-focus--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-button-grey-focus-left , 0px );\n  margin-right: var( --comp-scu-button-grey-focus-right , 0px );\n  margin-top: var( --comp-scu-button-grey-focus-top , 0px );\n  margin-bottom: var( --comp-scu-button-grey-focus-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-button-grey-focus-left , 0px ) + var( --comp-scu-button-grey-focus-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-button-grey-focus { \n    display: inline-block;\n  margin-left: var( --comp-scu-button-grey-focus-left , 0px );\n  margin-right: var( --comp-scu-button-grey-focus-right , 0px );\n  margin-top: var( --comp-scu-button-grey-focus-top , 0px );\n  margin-bottom: var( --comp-scu-button-grey-focus-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-button-grey-focus-left , 0px ) + var( --comp-scu-button-grey-focus-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-grey-focus'>content</div>"
    }
  },
  "components-scu-button-grey-focus-label-": {
    "": {
      "output": "\n@mixin comp-scu-button-grey-focus-label { \n  position: relative;\n  font-size: var( --comp-scu-button-grey-focus-label-font-size , 16px );\n  text-align: var( --comp-scu-button-grey-focus-label-text-align-horizontal , CENTER );\n  color: var( --comp-scu-button-grey-focus-label-color , rgba(0,0,0,1) );\n  font-family: var( --comp-scu-button-grey-focus-label-font-family , 'Proxima Nova' );\n  font-weight: var( --comp-scu-button-grey-focus-label-font-weight , 400 );\n  line-height: var( --comp-scu-button-grey-focus-label-line-height , 18.75px );\n  letter-spacing: var( --comp-scu-button-grey-focus-label-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-button-grey-focus-label { \n    position: relative;\n    font-size: var( --comp-scu-button-grey-focus-label-font-size , 16px );\n    text-align: var( --comp-scu-button-grey-focus-label-text-align-horizontal , CENTER );\n    color: var( --comp-scu-button-grey-focus-label-color , rgba(0,0,0,1) );\n    font-family: var( --comp-scu-button-grey-focus-label-font-family , 'Proxima Nova' );\n    font-weight: var( --comp-scu-button-grey-focus-label-font-weight , 400 );\n    line-height: var( --comp-scu-button-grey-focus-label-line-height , 18.75px );\n    letter-spacing: var( --comp-scu-button-grey-focus-label-letter-spacing , 0px ); \n  }\n</style>\n<div id='comp-scu-button-grey-focus-label'></div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-button-grey-focus-label--sizing {\n  width: 34px;\n  height: 19px;\n}",
      "example": "\n<style>\n  #comp-scu-button-grey-focus-label { \n    width: 34px;\n    height: 19px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-grey-focus-label'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-button-grey-focus-label--width {\n  width: 34px;\n}",
      "example": "\n<style>\n  #comp-scu-button-grey-focus-label { \n    width: 34px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-grey-focus-label'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-button-grey-focus-label--height {\n  height: 19px;\n}",
      "example": "\n<style>\n  #comp-scu-button-grey-focus-label { \n    height: 19px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-grey-focus-label'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-button-grey-focus-label--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #comp-scu-button-grey-focus-label { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-button-grey-focus-label'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-button-grey-focus-label--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-button-grey-focus-label-left , 23px );\n  margin-right: var( --comp-scu-button-grey-focus-label-right , 36px );\n  margin-top: var( --comp-scu-button-grey-focus-label-top , 11px );\n  margin-bottom: var( --comp-scu-button-grey-focus-label-bottom , -13px );\n  width: calc( 100% - ( var( --comp-scu-button-grey-focus-label-left , 23px ) + var( --comp-scu-button-grey-focus-label-right , 36px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-button-grey-focus-label { \n    display: inline-block;\n  margin-left: var( --comp-scu-button-grey-focus-label-left , 23px );\n  margin-right: var( --comp-scu-button-grey-focus-label-right , 36px );\n  margin-top: var( --comp-scu-button-grey-focus-label-top , 11px );\n  margin-bottom: var( --comp-scu-button-grey-focus-label-bottom , -13px );\n  width: calc( 100% - ( var( --comp-scu-button-grey-focus-label-left , 23px ) + var( --comp-scu-button-grey-focus-label-right , 36px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-grey-focus-label'>content</div>"
    }
  },
  "components-scu-button-grey-disabled-": {
    "box": {
      "output": "\n@mixin comp-scu-button-grey-disabled { \n  position: relative;\n  background-color: var( --comp-scu-button-grey-disabled-background-color , rgba(235,235,235,1) );\n  border-radius: var( --comp-scu-button-grey-disabled-corner-radius , 200px ); \n}",
      "example": "\n<style>\n  #comp-scu-button-grey-disabled { \n    position: relative;\n    background-color: var( --comp-scu-button-grey-disabled-background-color , rgba(235,235,235,1) );\n    border-radius: var( --comp-scu-button-grey-disabled-corner-radius , 200px ); \n  }\n</style>\n<div id='comp-scu-button-grey-disabled'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 11px;\n    bottom: 11px;\n    left: 24px;\n    right: 24px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-button-grey-disabled--sizing {\n  width: 93px;\n  height: 17px;\n}",
      "example": "\n<style>\n  #comp-scu-button-grey-disabled { \n    width: 93px;\n    height: 17px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-grey-disabled'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-button-grey-disabled--width {\n  width: 93px;\n}",
      "example": "\n<style>\n  #comp-scu-button-grey-disabled { \n    width: 93px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-grey-disabled'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-button-grey-disabled--height {\n  height: 17px;\n}",
      "example": "\n<style>\n  #comp-scu-button-grey-disabled { \n    height: 17px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-grey-disabled'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-button-grey-disabled--figma-autolayout { \n  display: flex;\n  flex-flow: row nowrap;\n  padding-left: var( --comp-scu-button-grey-disabled-padding-left , 24px );\n  padding-right: var( --comp-scu-button-grey-disabled-padding-right , 24px );\n  padding-top: var( --comp-scu-button-grey-disabled-padding-top , 11px );\n  padding-bottom: var( --comp-scu-button-grey-disabled-padding-bottom , 11px );\n  & > *:not(:last-child) { margin-right: var( --comp-scu-button-grey-disabled-item-spacing , 0px ); } \n}",
      "example": "\n<style>\n  #comp-scu-button-grey-disabled { \n    display: flex;\n    flex-flow: row nowrap;\n    padding-left: var( --comp-scu-button-grey-disabled-padding-left , 24px );\n    padding-right: var( --comp-scu-button-grey-disabled-padding-right , 24px );\n    padding-top: var( --comp-scu-button-grey-disabled-padding-top , 11px );\n    padding-bottom: var( --comp-scu-button-grey-disabled-padding-bottom , 11px );\n    & > *:not(:last-child) { margin-right: var( --comp-scu-button-grey-disabled-item-spacing , 0px ); } \n  }\n</style>\n<div id='comp-scu-button-grey-disabled'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-button-grey-disabled--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-button-grey-disabled-left , 0px );\n  right: var( --comp-scu-button-grey-disabled-right , 0px );\n  top: var( --comp-scu-button-grey-disabled-top , 0px );\n  bottom: var( --comp-scu-button-grey-disabled-bottom , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-button-grey-disabled { \n    position: absolute;\n    left: var( --comp-scu-button-grey-disabled-left , 0px );\n    right: var( --comp-scu-button-grey-disabled-right , 0px );\n    top: var( --comp-scu-button-grey-disabled-top , 0px );\n    bottom: var( --comp-scu-button-grey-disabled-bottom , 0px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-button-grey-disabled'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-button-grey-disabled--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-button-grey-disabled-left , 0px );\n  margin-right: var( --comp-scu-button-grey-disabled-right , 0px );\n  margin-top: var( --comp-scu-button-grey-disabled-top , 0px );\n  margin-bottom: var( --comp-scu-button-grey-disabled-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-button-grey-disabled-left , 0px ) + var( --comp-scu-button-grey-disabled-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-button-grey-disabled { \n    display: inline-block;\n  margin-left: var( --comp-scu-button-grey-disabled-left , 0px );\n  margin-right: var( --comp-scu-button-grey-disabled-right , 0px );\n  margin-top: var( --comp-scu-button-grey-disabled-top , 0px );\n  margin-bottom: var( --comp-scu-button-grey-disabled-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-button-grey-disabled-left , 0px ) + var( --comp-scu-button-grey-disabled-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-grey-disabled'>content</div>"
    }
  },
  "components-scu-button-grey-disabled-label-": {
    "": {
      "output": "\n@mixin comp-scu-button-grey-disabled-label { \n  position: relative;\n  font-size: var( --comp-scu-button-grey-disabled-label-font-size , 16px );\n  text-align: var( --comp-scu-button-grey-disabled-label-text-align-horizontal , CENTER );\n  color: var( --comp-scu-button-grey-disabled-label-color , rgba(196,196,196,1) );\n  font-family: var( --comp-scu-button-grey-disabled-label-font-family , 'Proxima Nova' );\n  font-weight: var( --comp-scu-button-grey-disabled-label-font-weight , 400 );\n  line-height: var( --comp-scu-button-grey-disabled-label-line-height , 18.75px );\n  letter-spacing: var( --comp-scu-button-grey-disabled-label-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-button-grey-disabled-label { \n    position: relative;\n    font-size: var( --comp-scu-button-grey-disabled-label-font-size , 16px );\n    text-align: var( --comp-scu-button-grey-disabled-label-text-align-horizontal , CENTER );\n    color: var( --comp-scu-button-grey-disabled-label-color , rgba(196,196,196,1) );\n    font-family: var( --comp-scu-button-grey-disabled-label-font-family , 'Proxima Nova' );\n    font-weight: var( --comp-scu-button-grey-disabled-label-font-weight , 400 );\n    line-height: var( --comp-scu-button-grey-disabled-label-line-height , 18.75px );\n    letter-spacing: var( --comp-scu-button-grey-disabled-label-letter-spacing , 0px ); \n  }\n</style>\n<div id='comp-scu-button-grey-disabled-label'></div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-button-grey-disabled-label--sizing {\n  width: 34px;\n  height: 19px;\n}",
      "example": "\n<style>\n  #comp-scu-button-grey-disabled-label { \n    width: 34px;\n    height: 19px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-grey-disabled-label'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-button-grey-disabled-label--width {\n  width: 34px;\n}",
      "example": "\n<style>\n  #comp-scu-button-grey-disabled-label { \n    width: 34px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-grey-disabled-label'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-button-grey-disabled-label--height {\n  height: 19px;\n}",
      "example": "\n<style>\n  #comp-scu-button-grey-disabled-label { \n    height: 19px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-grey-disabled-label'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-button-grey-disabled-label--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #comp-scu-button-grey-disabled-label { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-button-grey-disabled-label'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-button-grey-disabled-label--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-button-grey-disabled-label-left , 23px );\n  margin-right: var( --comp-scu-button-grey-disabled-label-right , 36px );\n  margin-top: var( --comp-scu-button-grey-disabled-label-top , 11px );\n  margin-bottom: var( --comp-scu-button-grey-disabled-label-bottom , -13px );\n  width: calc( 100% - ( var( --comp-scu-button-grey-disabled-label-left , 23px ) + var( --comp-scu-button-grey-disabled-label-right , 36px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-button-grey-disabled-label { \n    display: inline-block;\n  margin-left: var( --comp-scu-button-grey-disabled-label-left , 23px );\n  margin-right: var( --comp-scu-button-grey-disabled-label-right , 36px );\n  margin-top: var( --comp-scu-button-grey-disabled-label-top , 11px );\n  margin-bottom: var( --comp-scu-button-grey-disabled-label-bottom , -13px );\n  width: calc( 100% - ( var( --comp-scu-button-grey-disabled-label-left , 23px ) + var( --comp-scu-button-grey-disabled-label-right , 36px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-grey-disabled-label'>content</div>"
    }
  },
  "components-scu-button-link-": {
    "box": {
      "output": "\n@mixin comp-scu-button-link { \n  position: relative; \n}",
      "example": "\n<style>\n  #comp-scu-button-link { \n    position: relative; \n  }\n</style>\n<div id='comp-scu-button-link'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-button-link--sizing {\n  width: 90px;\n  height: 17px;\n}",
      "example": "\n<style>\n  #comp-scu-button-link { \n    width: 90px;\n    height: 17px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-link'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-button-link--width {\n  width: 90px;\n}",
      "example": "\n<style>\n  #comp-scu-button-link { \n    width: 90px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-link'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-button-link--height {\n  height: 17px;\n}",
      "example": "\n<style>\n  #comp-scu-button-link { \n    height: 17px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-link'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-button-link--figma-autolayout { \n   \n}",
      "example": "\n<style>\n  #comp-scu-button-link { \n     \n  }\n</style>\n<div id='comp-scu-button-link'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-button-link--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #comp-scu-button-link { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-button-link'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-button-link--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-button-link-left , 0px );\n  margin-right: var( --comp-scu-button-link-right , 0px );\n  margin-top: var( --comp-scu-button-link-top , 0px );\n  margin-bottom: var( --comp-scu-button-link-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-button-link-left , 0px ) + var( --comp-scu-button-link-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-button-link { \n    display: inline-block;\n  margin-left: var( --comp-scu-button-link-left , 0px );\n  margin-right: var( --comp-scu-button-link-right , 0px );\n  margin-top: var( --comp-scu-button-link-top , 0px );\n  margin-bottom: var( --comp-scu-button-link-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-button-link-left , 0px ) + var( --comp-scu-button-link-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-link'>content</div>"
    }
  },
  "components-scu-button-link-default-": {
    "box": {
      "output": "\n@mixin comp-scu-button-link-default { \n  position: relative;\n  border-radius: var( --comp-scu-button-link-default-corner-radius , 200px ); \n}",
      "example": "\n<style>\n  #comp-scu-button-link-default { \n    position: relative;\n    border-radius: var( --comp-scu-button-link-default-corner-radius , 200px ); \n  }\n</style>\n<div id='comp-scu-button-link-default'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 11px;\n    bottom: 11px;\n    left: 24px;\n    right: 24px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-button-link-default--sizing {\n  width: 82px;\n  height: 41px;\n}",
      "example": "\n<style>\n  #comp-scu-button-link-default { \n    width: 82px;\n    height: 41px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-link-default'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-button-link-default--width {\n  width: 82px;\n}",
      "example": "\n<style>\n  #comp-scu-button-link-default { \n    width: 82px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-link-default'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-button-link-default--height {\n  height: 41px;\n}",
      "example": "\n<style>\n  #comp-scu-button-link-default { \n    height: 41px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-link-default'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-button-link-default--figma-autolayout { \n  display: flex;\n  flex-flow: row nowrap;\n  padding-left: var( --comp-scu-button-link-default-padding-left , 24px );\n  padding-right: var( --comp-scu-button-link-default-padding-right , 24px );\n  padding-top: var( --comp-scu-button-link-default-padding-top , 11px );\n  padding-bottom: var( --comp-scu-button-link-default-padding-bottom , 11px );\n  & > *:not(:last-child) { margin-right: var( --comp-scu-button-link-default-item-spacing , 0px ); } \n}",
      "example": "\n<style>\n  #comp-scu-button-link-default { \n    display: flex;\n    flex-flow: row nowrap;\n    padding-left: var( --comp-scu-button-link-default-padding-left , 24px );\n    padding-right: var( --comp-scu-button-link-default-padding-right , 24px );\n    padding-top: var( --comp-scu-button-link-default-padding-top , 11px );\n    padding-bottom: var( --comp-scu-button-link-default-padding-bottom , 11px );\n    & > *:not(:last-child) { margin-right: var( --comp-scu-button-link-default-item-spacing , 0px ); } \n  }\n</style>\n<div id='comp-scu-button-link-default'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-button-link-default--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-button-link-default-left , 4px );\n  right: var( --comp-scu-button-link-default-right , 4px );\n  top: var( --comp-scu-button-link-default-top , -12px );\n  bottom: var( --comp-scu-button-link-default-bottom , -12px ); \n}",
      "example": "\n<style>\n  #comp-scu-button-link-default { \n    position: absolute;\n    left: var( --comp-scu-button-link-default-left , 4px );\n    right: var( --comp-scu-button-link-default-right , 4px );\n    top: var( --comp-scu-button-link-default-top , -12px );\n    bottom: var( --comp-scu-button-link-default-bottom , -12px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-button-link-default'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-button-link-default--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-button-link-default-left , 4px );\n  margin-right: var( --comp-scu-button-link-default-right , 4px );\n  margin-top: var( --comp-scu-button-link-default-top , -12px );\n  margin-bottom: var( --comp-scu-button-link-default-bottom , -12px );\n  width: calc( 100% - ( var( --comp-scu-button-link-default-left , 4px ) + var( --comp-scu-button-link-default-right , 4px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-button-link-default { \n    display: inline-block;\n  margin-left: var( --comp-scu-button-link-default-left , 4px );\n  margin-right: var( --comp-scu-button-link-default-right , 4px );\n  margin-top: var( --comp-scu-button-link-default-top , -12px );\n  margin-bottom: var( --comp-scu-button-link-default-bottom , -12px );\n  width: calc( 100% - ( var( --comp-scu-button-link-default-left , 4px ) + var( --comp-scu-button-link-default-right , 4px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-link-default'>content</div>"
    }
  },
  "components-scu-button-link-default-label-": {
    "": {
      "output": "\n@mixin comp-scu-button-link-default-label { \n  position: relative;\n  font-size: var( --comp-scu-button-link-default-label-font-size , 16px );\n  text-align: var( --comp-scu-button-link-default-label-text-align-horizontal , CENTER );\n  color: var( --comp-scu-button-link-default-label-color , rgba(0,0,0,1) );\n  font-family: var( --comp-scu-button-link-default-label-font-family , 'Proxima Nova' );\n  font-weight: var( --comp-scu-button-link-default-label-font-weight , 400 );\n  line-height: var( --comp-scu-button-link-default-label-line-height , 18.75px );\n  letter-spacing: var( --comp-scu-button-link-default-label-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-button-link-default-label { \n    position: relative;\n    font-size: var( --comp-scu-button-link-default-label-font-size , 16px );\n    text-align: var( --comp-scu-button-link-default-label-text-align-horizontal , CENTER );\n    color: var( --comp-scu-button-link-default-label-color , rgba(0,0,0,1) );\n    font-family: var( --comp-scu-button-link-default-label-font-family , 'Proxima Nova' );\n    font-weight: var( --comp-scu-button-link-default-label-font-weight , 400 );\n    line-height: var( --comp-scu-button-link-default-label-line-height , 18.75px );\n    letter-spacing: var( --comp-scu-button-link-default-label-letter-spacing , 0px ); \n  }\n</style>\n<div id='comp-scu-button-link-default-label'></div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-button-link-default-label--sizing {\n  width: 34px;\n  height: 19px;\n}",
      "example": "\n<style>\n  #comp-scu-button-link-default-label { \n    width: 34px;\n    height: 19px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-link-default-label'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-button-link-default-label--width {\n  width: 34px;\n}",
      "example": "\n<style>\n  #comp-scu-button-link-default-label { \n    width: 34px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-link-default-label'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-button-link-default-label--height {\n  height: 19px;\n}",
      "example": "\n<style>\n  #comp-scu-button-link-default-label { \n    height: 19px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-link-default-label'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-button-link-default-label--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #comp-scu-button-link-default-label { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-button-link-default-label'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-button-link-default-label--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-button-link-default-label-left , 24px );\n  margin-right: var( --comp-scu-button-link-default-label-right , 24px );\n  margin-top: var( --comp-scu-button-link-default-label-top , 11px );\n  margin-bottom: var( --comp-scu-button-link-default-label-bottom , 11px );\n  width: calc( 100% - ( var( --comp-scu-button-link-default-label-left , 24px ) + var( --comp-scu-button-link-default-label-right , 24px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-button-link-default-label { \n    display: inline-block;\n  margin-left: var( --comp-scu-button-link-default-label-left , 24px );\n  margin-right: var( --comp-scu-button-link-default-label-right , 24px );\n  margin-top: var( --comp-scu-button-link-default-label-top , 11px );\n  margin-bottom: var( --comp-scu-button-link-default-label-bottom , 11px );\n  width: calc( 100% - ( var( --comp-scu-button-link-default-label-left , 24px ) + var( --comp-scu-button-link-default-label-right , 24px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-link-default-label'>content</div>"
    }
  },
  "components-scu-button-link-hover-": {
    "box": {
      "output": "\n@mixin comp-scu-button-link-hover { \n  position: relative;\n  border-radius: var( --comp-scu-button-link-hover-corner-radius , 200px ); \n}",
      "example": "\n<style>\n  #comp-scu-button-link-hover { \n    position: relative;\n    border-radius: var( --comp-scu-button-link-hover-corner-radius , 200px ); \n  }\n</style>\n<div id='comp-scu-button-link-hover'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 11px;\n    bottom: 11px;\n    left: 24px;\n    right: 24px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-button-link-hover--sizing {\n  width: 90px;\n  height: 17px;\n}",
      "example": "\n<style>\n  #comp-scu-button-link-hover { \n    width: 90px;\n    height: 17px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-link-hover'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-button-link-hover--width {\n  width: 90px;\n}",
      "example": "\n<style>\n  #comp-scu-button-link-hover { \n    width: 90px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-link-hover'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-button-link-hover--height {\n  height: 17px;\n}",
      "example": "\n<style>\n  #comp-scu-button-link-hover { \n    height: 17px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-link-hover'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-button-link-hover--figma-autolayout { \n  display: flex;\n  flex-flow: row nowrap;\n  padding-left: var( --comp-scu-button-link-hover-padding-left , 24px );\n  padding-right: var( --comp-scu-button-link-hover-padding-right , 24px );\n  padding-top: var( --comp-scu-button-link-hover-padding-top , 11px );\n  padding-bottom: var( --comp-scu-button-link-hover-padding-bottom , 11px );\n  & > *:not(:last-child) { margin-right: var( --comp-scu-button-link-hover-item-spacing , 0px ); } \n}",
      "example": "\n<style>\n  #comp-scu-button-link-hover { \n    display: flex;\n    flex-flow: row nowrap;\n    padding-left: var( --comp-scu-button-link-hover-padding-left , 24px );\n    padding-right: var( --comp-scu-button-link-hover-padding-right , 24px );\n    padding-top: var( --comp-scu-button-link-hover-padding-top , 11px );\n    padding-bottom: var( --comp-scu-button-link-hover-padding-bottom , 11px );\n    & > *:not(:last-child) { margin-right: var( --comp-scu-button-link-hover-item-spacing , 0px ); } \n  }\n</style>\n<div id='comp-scu-button-link-hover'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-button-link-hover--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-button-link-hover-left , 0px );\n  right: var( --comp-scu-button-link-hover-right , 0px );\n  top: var( --comp-scu-button-link-hover-top , 0px );\n  bottom: var( --comp-scu-button-link-hover-bottom , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-button-link-hover { \n    position: absolute;\n    left: var( --comp-scu-button-link-hover-left , 0px );\n    right: var( --comp-scu-button-link-hover-right , 0px );\n    top: var( --comp-scu-button-link-hover-top , 0px );\n    bottom: var( --comp-scu-button-link-hover-bottom , 0px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-button-link-hover'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-button-link-hover--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-button-link-hover-left , 0px );\n  margin-right: var( --comp-scu-button-link-hover-right , 0px );\n  margin-top: var( --comp-scu-button-link-hover-top , 0px );\n  margin-bottom: var( --comp-scu-button-link-hover-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-button-link-hover-left , 0px ) + var( --comp-scu-button-link-hover-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-button-link-hover { \n    display: inline-block;\n  margin-left: var( --comp-scu-button-link-hover-left , 0px );\n  margin-right: var( --comp-scu-button-link-hover-right , 0px );\n  margin-top: var( --comp-scu-button-link-hover-top , 0px );\n  margin-bottom: var( --comp-scu-button-link-hover-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-button-link-hover-left , 0px ) + var( --comp-scu-button-link-hover-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-link-hover'>content</div>"
    }
  },
  "components-scu-button-link-hover-label-": {
    "": {
      "output": "\n@mixin comp-scu-button-link-hover-label { \n  position: relative;\n  font-size: var( --comp-scu-button-link-hover-label-font-size , 16px );\n  text-align: var( --comp-scu-button-link-hover-label-text-align-horizontal , CENTER );\n  color: var( --comp-scu-button-link-hover-label-color , rgba(0,0,0,1) );\n  font-family: var( --comp-scu-button-link-hover-label-font-family , 'Proxima Nova' );\n  font-weight: var( --comp-scu-button-link-hover-label-font-weight , 400 );\n  line-height: var( --comp-scu-button-link-hover-label-line-height , 18.75px );\n  letter-spacing: var( --comp-scu-button-link-hover-label-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-button-link-hover-label { \n    position: relative;\n    font-size: var( --comp-scu-button-link-hover-label-font-size , 16px );\n    text-align: var( --comp-scu-button-link-hover-label-text-align-horizontal , CENTER );\n    color: var( --comp-scu-button-link-hover-label-color , rgba(0,0,0,1) );\n    font-family: var( --comp-scu-button-link-hover-label-font-family , 'Proxima Nova' );\n    font-weight: var( --comp-scu-button-link-hover-label-font-weight , 400 );\n    line-height: var( --comp-scu-button-link-hover-label-line-height , 18.75px );\n    letter-spacing: var( --comp-scu-button-link-hover-label-letter-spacing , 0px ); \n  }\n</style>\n<div id='comp-scu-button-link-hover-label'></div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-button-link-hover-label--sizing {\n  width: 34px;\n  height: 19px;\n}",
      "example": "\n<style>\n  #comp-scu-button-link-hover-label { \n    width: 34px;\n    height: 19px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-link-hover-label'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-button-link-hover-label--width {\n  width: 34px;\n}",
      "example": "\n<style>\n  #comp-scu-button-link-hover-label { \n    width: 34px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-link-hover-label'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-button-link-hover-label--height {\n  height: 19px;\n}",
      "example": "\n<style>\n  #comp-scu-button-link-hover-label { \n    height: 19px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-link-hover-label'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-button-link-hover-label--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #comp-scu-button-link-hover-label { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-button-link-hover-label'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-button-link-hover-label--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-button-link-hover-label-left , 23px );\n  margin-right: var( --comp-scu-button-link-hover-label-right , 33px );\n  margin-top: var( --comp-scu-button-link-hover-label-top , 11px );\n  margin-bottom: var( --comp-scu-button-link-hover-label-bottom , -13px );\n  width: calc( 100% - ( var( --comp-scu-button-link-hover-label-left , 23px ) + var( --comp-scu-button-link-hover-label-right , 33px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-button-link-hover-label { \n    display: inline-block;\n  margin-left: var( --comp-scu-button-link-hover-label-left , 23px );\n  margin-right: var( --comp-scu-button-link-hover-label-right , 33px );\n  margin-top: var( --comp-scu-button-link-hover-label-top , 11px );\n  margin-bottom: var( --comp-scu-button-link-hover-label-bottom , -13px );\n  width: calc( 100% - ( var( --comp-scu-button-link-hover-label-left , 23px ) + var( --comp-scu-button-link-hover-label-right , 33px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-link-hover-label'>content</div>"
    }
  },
  "components-scu-button-link-focus-": {
    "box": {
      "output": "\n@mixin comp-scu-button-link-focus { \n  position: relative;\n  background-color: var( --comp-scu-button-link-focus-background-color , rgba(255,255,255,1) );\n  border-radius: var( --comp-scu-button-link-focus-corner-radius , 200px );\n  box-shadow: var( --comp-scu-button-link-focus-shadow , 0px 0px 0px 2px rgba(53,155,249,1) ); \n}",
      "example": "\n<style>\n  #comp-scu-button-link-focus { \n    position: relative;\n    background-color: var( --comp-scu-button-link-focus-background-color , rgba(255,255,255,1) );\n    border-radius: var( --comp-scu-button-link-focus-corner-radius , 200px );\n    box-shadow: var( --comp-scu-button-link-focus-shadow , 0px 0px 0px 2px rgba(53,155,249,1) ); \n  }\n</style>\n<div id='comp-scu-button-link-focus'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 11px;\n    bottom: 11px;\n    left: 24px;\n    right: 24px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-button-link-focus--sizing {\n  width: 90px;\n  height: 17px;\n}",
      "example": "\n<style>\n  #comp-scu-button-link-focus { \n    width: 90px;\n    height: 17px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-link-focus'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-button-link-focus--width {\n  width: 90px;\n}",
      "example": "\n<style>\n  #comp-scu-button-link-focus { \n    width: 90px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-link-focus'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-button-link-focus--height {\n  height: 17px;\n}",
      "example": "\n<style>\n  #comp-scu-button-link-focus { \n    height: 17px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-link-focus'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-button-link-focus--figma-autolayout { \n  display: flex;\n  flex-flow: row nowrap;\n  padding-left: var( --comp-scu-button-link-focus-padding-left , 24px );\n  padding-right: var( --comp-scu-button-link-focus-padding-right , 24px );\n  padding-top: var( --comp-scu-button-link-focus-padding-top , 11px );\n  padding-bottom: var( --comp-scu-button-link-focus-padding-bottom , 11px );\n  & > *:not(:last-child) { margin-right: var( --comp-scu-button-link-focus-item-spacing , 0px ); } \n}",
      "example": "\n<style>\n  #comp-scu-button-link-focus { \n    display: flex;\n    flex-flow: row nowrap;\n    padding-left: var( --comp-scu-button-link-focus-padding-left , 24px );\n    padding-right: var( --comp-scu-button-link-focus-padding-right , 24px );\n    padding-top: var( --comp-scu-button-link-focus-padding-top , 11px );\n    padding-bottom: var( --comp-scu-button-link-focus-padding-bottom , 11px );\n    & > *:not(:last-child) { margin-right: var( --comp-scu-button-link-focus-item-spacing , 0px ); } \n  }\n</style>\n<div id='comp-scu-button-link-focus'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-button-link-focus--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-button-link-focus-left , 0px );\n  right: var( --comp-scu-button-link-focus-right , 0px );\n  top: var( --comp-scu-button-link-focus-top , 0px );\n  bottom: var( --comp-scu-button-link-focus-bottom , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-button-link-focus { \n    position: absolute;\n    left: var( --comp-scu-button-link-focus-left , 0px );\n    right: var( --comp-scu-button-link-focus-right , 0px );\n    top: var( --comp-scu-button-link-focus-top , 0px );\n    bottom: var( --comp-scu-button-link-focus-bottom , 0px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-button-link-focus'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-button-link-focus--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-button-link-focus-left , 0px );\n  margin-right: var( --comp-scu-button-link-focus-right , 0px );\n  margin-top: var( --comp-scu-button-link-focus-top , 0px );\n  margin-bottom: var( --comp-scu-button-link-focus-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-button-link-focus-left , 0px ) + var( --comp-scu-button-link-focus-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-button-link-focus { \n    display: inline-block;\n  margin-left: var( --comp-scu-button-link-focus-left , 0px );\n  margin-right: var( --comp-scu-button-link-focus-right , 0px );\n  margin-top: var( --comp-scu-button-link-focus-top , 0px );\n  margin-bottom: var( --comp-scu-button-link-focus-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-button-link-focus-left , 0px ) + var( --comp-scu-button-link-focus-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-link-focus'>content</div>"
    }
  },
  "components-scu-button-link-focus-label-": {
    "": {
      "output": "\n@mixin comp-scu-button-link-focus-label { \n  position: relative;\n  font-size: var( --comp-scu-button-link-focus-label-font-size , 16px );\n  text-align: var( --comp-scu-button-link-focus-label-text-align-horizontal , CENTER );\n  color: var( --comp-scu-button-link-focus-label-color , rgba(0,0,0,1) );\n  font-family: var( --comp-scu-button-link-focus-label-font-family , 'Proxima Nova' );\n  font-weight: var( --comp-scu-button-link-focus-label-font-weight , 400 );\n  line-height: var( --comp-scu-button-link-focus-label-line-height , 18.75px );\n  letter-spacing: var( --comp-scu-button-link-focus-label-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-button-link-focus-label { \n    position: relative;\n    font-size: var( --comp-scu-button-link-focus-label-font-size , 16px );\n    text-align: var( --comp-scu-button-link-focus-label-text-align-horizontal , CENTER );\n    color: var( --comp-scu-button-link-focus-label-color , rgba(0,0,0,1) );\n    font-family: var( --comp-scu-button-link-focus-label-font-family , 'Proxima Nova' );\n    font-weight: var( --comp-scu-button-link-focus-label-font-weight , 400 );\n    line-height: var( --comp-scu-button-link-focus-label-line-height , 18.75px );\n    letter-spacing: var( --comp-scu-button-link-focus-label-letter-spacing , 0px ); \n  }\n</style>\n<div id='comp-scu-button-link-focus-label'></div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-button-link-focus-label--sizing {\n  width: 34px;\n  height: 19px;\n}",
      "example": "\n<style>\n  #comp-scu-button-link-focus-label { \n    width: 34px;\n    height: 19px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-link-focus-label'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-button-link-focus-label--width {\n  width: 34px;\n}",
      "example": "\n<style>\n  #comp-scu-button-link-focus-label { \n    width: 34px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-link-focus-label'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-button-link-focus-label--height {\n  height: 19px;\n}",
      "example": "\n<style>\n  #comp-scu-button-link-focus-label { \n    height: 19px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-link-focus-label'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-button-link-focus-label--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #comp-scu-button-link-focus-label { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-button-link-focus-label'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-button-link-focus-label--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-button-link-focus-label-left , 23px );\n  margin-right: var( --comp-scu-button-link-focus-label-right , 33px );\n  margin-top: var( --comp-scu-button-link-focus-label-top , 11px );\n  margin-bottom: var( --comp-scu-button-link-focus-label-bottom , -13px );\n  width: calc( 100% - ( var( --comp-scu-button-link-focus-label-left , 23px ) + var( --comp-scu-button-link-focus-label-right , 33px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-button-link-focus-label { \n    display: inline-block;\n  margin-left: var( --comp-scu-button-link-focus-label-left , 23px );\n  margin-right: var( --comp-scu-button-link-focus-label-right , 33px );\n  margin-top: var( --comp-scu-button-link-focus-label-top , 11px );\n  margin-bottom: var( --comp-scu-button-link-focus-label-bottom , -13px );\n  width: calc( 100% - ( var( --comp-scu-button-link-focus-label-left , 23px ) + var( --comp-scu-button-link-focus-label-right , 33px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-link-focus-label'>content</div>"
    }
  },
  "components-scu-button-link-disabled-": {
    "box": {
      "output": "\n@mixin comp-scu-button-link-disabled { \n  position: relative;\n  border-radius: var( --comp-scu-button-link-disabled-corner-radius , 200px ); \n}",
      "example": "\n<style>\n  #comp-scu-button-link-disabled { \n    position: relative;\n    border-radius: var( --comp-scu-button-link-disabled-corner-radius , 200px ); \n  }\n</style>\n<div id='comp-scu-button-link-disabled'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 11px;\n    bottom: 11px;\n    left: 24px;\n    right: 24px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-button-link-disabled--sizing {\n  width: 80px;\n  height: 40px;\n}",
      "example": "\n<style>\n  #comp-scu-button-link-disabled { \n    width: 80px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-link-disabled'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-button-link-disabled--width {\n  width: 80px;\n}",
      "example": "\n<style>\n  #comp-scu-button-link-disabled { \n    width: 80px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-link-disabled'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-button-link-disabled--height {\n  height: 40px;\n}",
      "example": "\n<style>\n  #comp-scu-button-link-disabled { \n    height: 40px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-link-disabled'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-button-link-disabled--figma-autolayout { \n  display: flex;\n  flex-flow: row nowrap;\n  padding-left: var( --comp-scu-button-link-disabled-padding-left , 24px );\n  padding-right: var( --comp-scu-button-link-disabled-padding-right , 24px );\n  padding-top: var( --comp-scu-button-link-disabled-padding-top , 11px );\n  padding-bottom: var( --comp-scu-button-link-disabled-padding-bottom , 11px );\n  & > *:not(:last-child) { margin-right: var( --comp-scu-button-link-disabled-item-spacing , 0px ); } \n}",
      "example": "\n<style>\n  #comp-scu-button-link-disabled { \n    display: flex;\n    flex-flow: row nowrap;\n    padding-left: var( --comp-scu-button-link-disabled-padding-left , 24px );\n    padding-right: var( --comp-scu-button-link-disabled-padding-right , 24px );\n    padding-top: var( --comp-scu-button-link-disabled-padding-top , 11px );\n    padding-bottom: var( --comp-scu-button-link-disabled-padding-bottom , 11px );\n    & > *:not(:last-child) { margin-right: var( --comp-scu-button-link-disabled-item-spacing , 0px ); } \n  }\n</style>\n<div id='comp-scu-button-link-disabled'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-button-link-disabled--absolute-layout {\n  position: absolute;\n  right: var( --comp-scu-button-link-disabled-left , 10px );\n  width: var( --comp-scu-button-link-disabled-width , 80px );\n  bottom: var( --comp-scu-button-link-disabled-bottom , 0px );\n  height: var( --comp-scu-button-link-disabled-height , 40px ); \n}",
      "example": "\n<style>\n  #comp-scu-button-link-disabled { \n    position: absolute;\n    right: var( --comp-scu-button-link-disabled-left , 10px );\n    width: var( --comp-scu-button-link-disabled-width , 80px );\n    bottom: var( --comp-scu-button-link-disabled-bottom , 0px );\n    height: var( --comp-scu-button-link-disabled-height , 40px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-button-link-disabled'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-button-link-disabled--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-button-link-disabled-left , 10px );\n  margin-right: var( --comp-scu-button-link-disabled-right , 0px );\n  margin-top: var( --comp-scu-button-link-disabled-top , -23px );\n  margin-bottom: var( --comp-scu-button-link-disabled-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-button-link-disabled-left , 10px ) + var( --comp-scu-button-link-disabled-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-button-link-disabled { \n    display: inline-block;\n  margin-left: var( --comp-scu-button-link-disabled-left , 10px );\n  margin-right: var( --comp-scu-button-link-disabled-right , 0px );\n  margin-top: var( --comp-scu-button-link-disabled-top , -23px );\n  margin-bottom: var( --comp-scu-button-link-disabled-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-button-link-disabled-left , 10px ) + var( --comp-scu-button-link-disabled-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-link-disabled'>content</div>"
    }
  },
  "components-scu-button-link-disabled-label-": {
    "": {
      "output": "\n@mixin comp-scu-button-link-disabled-label { \n  position: relative;\n  font-size: var( --comp-scu-button-link-disabled-label-font-size , 16px );\n  text-align: var( --comp-scu-button-link-disabled-label-text-align-horizontal , CENTER );\n  color: var( --comp-scu-button-link-disabled-label-color , rgba(89,89,89,1) );\n  font-family: var( --comp-scu-button-link-disabled-label-font-family , 'Proxima Nova' );\n  font-weight: var( --comp-scu-button-link-disabled-label-font-weight , 400 );\n  line-height: var( --comp-scu-button-link-disabled-label-line-height , 18.75px );\n  letter-spacing: var( --comp-scu-button-link-disabled-label-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-button-link-disabled-label { \n    position: relative;\n    font-size: var( --comp-scu-button-link-disabled-label-font-size , 16px );\n    text-align: var( --comp-scu-button-link-disabled-label-text-align-horizontal , CENTER );\n    color: var( --comp-scu-button-link-disabled-label-color , rgba(89,89,89,1) );\n    font-family: var( --comp-scu-button-link-disabled-label-font-family , 'Proxima Nova' );\n    font-weight: var( --comp-scu-button-link-disabled-label-font-weight , 400 );\n    line-height: var( --comp-scu-button-link-disabled-label-line-height , 18.75px );\n    letter-spacing: var( --comp-scu-button-link-disabled-label-letter-spacing , 0px ); \n  }\n</style>\n<div id='comp-scu-button-link-disabled-label'></div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-button-link-disabled-label--sizing {\n  width: 34px;\n  height: 19px;\n}",
      "example": "\n<style>\n  #comp-scu-button-link-disabled-label { \n    width: 34px;\n    height: 19px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-link-disabled-label'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-button-link-disabled-label--width {\n  width: 34px;\n}",
      "example": "\n<style>\n  #comp-scu-button-link-disabled-label { \n    width: 34px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-link-disabled-label'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-button-link-disabled-label--height {\n  height: 19px;\n}",
      "example": "\n<style>\n  #comp-scu-button-link-disabled-label { \n    height: 19px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-link-disabled-label'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-button-link-disabled-label--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #comp-scu-button-link-disabled-label { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-button-link-disabled-label'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-button-link-disabled-label--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-button-link-disabled-label-left , 23px );\n  margin-right: var( --comp-scu-button-link-disabled-label-right , 23px );\n  margin-top: var( --comp-scu-button-link-disabled-label-top , 11px );\n  margin-bottom: var( --comp-scu-button-link-disabled-label-bottom , 10px );\n  width: calc( 100% - ( var( --comp-scu-button-link-disabled-label-left , 23px ) + var( --comp-scu-button-link-disabled-label-right , 23px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-button-link-disabled-label { \n    display: inline-block;\n  margin-left: var( --comp-scu-button-link-disabled-label-left , 23px );\n  margin-right: var( --comp-scu-button-link-disabled-label-right , 23px );\n  margin-top: var( --comp-scu-button-link-disabled-label-top , 11px );\n  margin-bottom: var( --comp-scu-button-link-disabled-label-bottom , 10px );\n  width: calc( 100% - ( var( --comp-scu-button-link-disabled-label-left , 23px ) + var( --comp-scu-button-link-disabled-label-right , 23px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-button-link-disabled-label'>content</div>"
    }
  },
  "components-scu-icon-button-primary-": {
    "box": {
      "output": "\n@mixin comp-scu-icon-button-primary { \n  position: relative; \n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary { \n    position: relative; \n  }\n</style>\n<div id='comp-scu-icon-button-primary'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-icon-button-primary--sizing {\n  width: 113px;\n  height: 37px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary { \n    width: 113px;\n    height: 37px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-primary'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-icon-button-primary--width {\n  width: 113px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary { \n    width: 113px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-primary'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-icon-button-primary--height {\n  height: 37px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary { \n    height: 37px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-primary'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-icon-button-primary--figma-autolayout { \n   \n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary { \n     \n  }\n</style>\n<div id='comp-scu-icon-button-primary'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-icon-button-primary--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-icon-button-primary'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-icon-button-primary--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-icon-button-primary-left , 0px );\n  margin-right: var( --comp-scu-icon-button-primary-right , 0px );\n  margin-top: var( --comp-scu-icon-button-primary-top , 0px );\n  margin-bottom: var( --comp-scu-icon-button-primary-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-icon-button-primary-left , 0px ) + var( --comp-scu-icon-button-primary-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary { \n    display: inline-block;\n  margin-left: var( --comp-scu-icon-button-primary-left , 0px );\n  margin-right: var( --comp-scu-icon-button-primary-right , 0px );\n  margin-top: var( --comp-scu-icon-button-primary-top , 0px );\n  margin-bottom: var( --comp-scu-icon-button-primary-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-icon-button-primary-left , 0px ) + var( --comp-scu-icon-button-primary-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-primary'>content</div>"
    }
  },
  "components-scu-icon-button-primary-default-": {
    "box": {
      "output": "\n@mixin comp-scu-icon-button-primary-default { \n  position: relative;\n  background-color: var( --comp-scu-icon-button-primary-default-background-color , rgba(99,166,10,1) );\n  border-radius: var( --comp-scu-icon-button-primary-default-corner-radius , 200px ); \n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-default { \n    position: relative;\n    background-color: var( --comp-scu-icon-button-primary-default-background-color , rgba(99,166,10,1) );\n    border-radius: var( --comp-scu-icon-button-primary-default-corner-radius , 200px ); \n  }\n</style>\n<div id='comp-scu-icon-button-primary-default'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 8px;\n    bottom: 8px;\n    left: 24px;\n    right: 24px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-icon-button-primary-default--sizing {\n  width: 115px;\n  height: 40px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-default { \n    width: 115px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-primary-default'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-icon-button-primary-default--width {\n  width: 115px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-default { \n    width: 115px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-primary-default'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-icon-button-primary-default--height {\n  height: 40px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-default { \n    height: 40px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-primary-default'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-icon-button-primary-default--figma-autolayout { \n  display: flex;\n  flex-flow: row nowrap;\n  padding-left: var( --comp-scu-icon-button-primary-default-padding-left , 24px );\n  padding-right: var( --comp-scu-icon-button-primary-default-padding-right , 24px );\n  padding-top: var( --comp-scu-icon-button-primary-default-padding-top , 8px );\n  padding-bottom: var( --comp-scu-icon-button-primary-default-padding-bottom , 8px );\n  & > *:not(:last-child) { margin-right: var( --comp-scu-icon-button-primary-default-item-spacing , 8px ); } \n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-default { \n    display: flex;\n    flex-flow: row nowrap;\n    padding-left: var( --comp-scu-icon-button-primary-default-padding-left , 24px );\n    padding-right: var( --comp-scu-icon-button-primary-default-padding-right , 24px );\n    padding-top: var( --comp-scu-icon-button-primary-default-padding-top , 8px );\n    padding-bottom: var( --comp-scu-icon-button-primary-default-padding-bottom , 8px );\n    & > *:not(:last-child) { margin-right: var( --comp-scu-icon-button-primary-default-item-spacing , 8px ); } \n  }\n</style>\n<div id='comp-scu-icon-button-primary-default'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-icon-button-primary-default--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-icon-button-primary-default-left , -1px );\n  right: var( --comp-scu-icon-button-primary-default-right , -1px );\n  top: var( --comp-scu-icon-button-primary-default-top , -1.5px );\n  bottom: var( --comp-scu-icon-button-primary-default-bottom , -1.5px ); \n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-default { \n    position: absolute;\n    left: var( --comp-scu-icon-button-primary-default-left , -1px );\n    right: var( --comp-scu-icon-button-primary-default-right , -1px );\n    top: var( --comp-scu-icon-button-primary-default-top , -1.5px );\n    bottom: var( --comp-scu-icon-button-primary-default-bottom , -1.5px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-icon-button-primary-default'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-icon-button-primary-default--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-icon-button-primary-default-left , -1px );\n  margin-right: var( --comp-scu-icon-button-primary-default-right , -1px );\n  margin-top: var( --comp-scu-icon-button-primary-default-top , -1.5px );\n  margin-bottom: var( --comp-scu-icon-button-primary-default-bottom , -1.5px );\n  width: calc( 100% - ( var( --comp-scu-icon-button-primary-default-left , -1px ) + var( --comp-scu-icon-button-primary-default-right , -1px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-default { \n    display: inline-block;\n  margin-left: var( --comp-scu-icon-button-primary-default-left , -1px );\n  margin-right: var( --comp-scu-icon-button-primary-default-right , -1px );\n  margin-top: var( --comp-scu-icon-button-primary-default-top , -1.5px );\n  margin-bottom: var( --comp-scu-icon-button-primary-default-bottom , -1.5px );\n  width: calc( 100% - ( var( --comp-scu-icon-button-primary-default-left , -1px ) + var( --comp-scu-icon-button-primary-default-right , -1px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-primary-default'>content</div>"
    }
  },
  "components-scu-icon-button-primary-default-icon-": {
    "box": {
      "output": "\n@mixin comp-scu-icon-button-primary-default-icon { \n  position: relative;\n  background-color: var( --comp-scu-icon-button-primary-default-icon-background-color , rgba(255,255,255,1) ); \n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-default-icon { \n    position: relative;\n    background-color: var( --comp-scu-icon-button-primary-default-icon-background-color , rgba(255,255,255,1) ); \n  }\n</style>\n<div id='comp-scu-icon-button-primary-default-icon'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-icon-button-primary-default-icon--sizing {\n  width: 24px;\n  height: 24px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-default-icon { \n    width: 24px;\n    height: 24px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-primary-default-icon'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-icon-button-primary-default-icon--width {\n  width: 24px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-default-icon { \n    width: 24px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-primary-default-icon'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-icon-button-primary-default-icon--height {\n  height: 24px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-default-icon { \n    height: 24px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-primary-default-icon'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-icon-button-primary-default-icon--figma-autolayout { \n   \n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-default-icon { \n     \n  }\n</style>\n<div id='comp-scu-icon-button-primary-default-icon'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-icon-button-primary-default-icon--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-default-icon { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-icon-button-primary-default-icon'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-icon-button-primary-default-icon--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-icon-button-primary-default-icon-left , 24px );\n  margin-right: var( --comp-scu-icon-button-primary-default-icon-right , 67px );\n  margin-top: var( --comp-scu-icon-button-primary-default-icon-top , 8px );\n  margin-bottom: var( --comp-scu-icon-button-primary-default-icon-bottom , 8px );\n  width: calc( 100% - ( var( --comp-scu-icon-button-primary-default-icon-left , 24px ) + var( --comp-scu-icon-button-primary-default-icon-right , 67px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-default-icon { \n    display: inline-block;\n  margin-left: var( --comp-scu-icon-button-primary-default-icon-left , 24px );\n  margin-right: var( --comp-scu-icon-button-primary-default-icon-right , 67px );\n  margin-top: var( --comp-scu-icon-button-primary-default-icon-top , 8px );\n  margin-bottom: var( --comp-scu-icon-button-primary-default-icon-bottom , 8px );\n  width: calc( 100% - ( var( --comp-scu-icon-button-primary-default-icon-left , 24px ) + var( --comp-scu-icon-button-primary-default-icon-right , 67px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-primary-default-icon'>content</div>"
    }
  },
  "components-scu-icon-button-primary-default-label-": {
    "": {
      "output": "\n@mixin comp-scu-icon-button-primary-default-label { \n  position: relative;\n  font-size: var( --comp-scu-icon-button-primary-default-label-font-size , 16px );\n  text-align: var( --comp-scu-icon-button-primary-default-label-text-align-horizontal , CENTER );\n  color: var( --comp-scu-icon-button-primary-default-label-color , rgba(255,255,255,1) );\n  font-family: var( --comp-scu-icon-button-primary-default-label-font-family , 'Proxima Nova' );\n  font-weight: var( --comp-scu-icon-button-primary-default-label-font-weight , 700 );\n  line-height: var( --comp-scu-icon-button-primary-default-label-line-height , 18.75px );\n  letter-spacing: var( --comp-scu-icon-button-primary-default-label-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-default-label { \n    position: relative;\n    font-size: var( --comp-scu-icon-button-primary-default-label-font-size , 16px );\n    text-align: var( --comp-scu-icon-button-primary-default-label-text-align-horizontal , CENTER );\n    color: var( --comp-scu-icon-button-primary-default-label-color , rgba(255,255,255,1) );\n    font-family: var( --comp-scu-icon-button-primary-default-label-font-family , 'Proxima Nova' );\n    font-weight: var( --comp-scu-icon-button-primary-default-label-font-weight , 700 );\n    line-height: var( --comp-scu-icon-button-primary-default-label-line-height , 18.75px );\n    letter-spacing: var( --comp-scu-icon-button-primary-default-label-letter-spacing , 0px ); \n  }\n</style>\n<div id='comp-scu-icon-button-primary-default-label'></div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-icon-button-primary-default-label--sizing {\n  width: 35px;\n  height: 19px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-default-label { \n    width: 35px;\n    height: 19px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-primary-default-label'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-icon-button-primary-default-label--width {\n  width: 35px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-default-label { \n    width: 35px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-primary-default-label'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-icon-button-primary-default-label--height {\n  height: 19px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-default-label { \n    height: 19px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-primary-default-label'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-icon-button-primary-default-label--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-default-label { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-icon-button-primary-default-label'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-icon-button-primary-default-label--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-icon-button-primary-default-label-left , 56px );\n  margin-right: var( --comp-scu-icon-button-primary-default-label-right , 24px );\n  margin-top: var( --comp-scu-icon-button-primary-default-label-top , 10.5px );\n  margin-bottom: var( --comp-scu-icon-button-primary-default-label-bottom , 10.5px );\n  width: calc( 100% - ( var( --comp-scu-icon-button-primary-default-label-left , 56px ) + var( --comp-scu-icon-button-primary-default-label-right , 24px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-default-label { \n    display: inline-block;\n  margin-left: var( --comp-scu-icon-button-primary-default-label-left , 56px );\n  margin-right: var( --comp-scu-icon-button-primary-default-label-right , 24px );\n  margin-top: var( --comp-scu-icon-button-primary-default-label-top , 10.5px );\n  margin-bottom: var( --comp-scu-icon-button-primary-default-label-bottom , 10.5px );\n  width: calc( 100% - ( var( --comp-scu-icon-button-primary-default-label-left , 56px ) + var( --comp-scu-icon-button-primary-default-label-right , 24px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-primary-default-label'>content</div>"
    }
  },
  "components-scu-icon-button-primary-hover-": {
    "box": {
      "output": "\n@mixin comp-scu-icon-button-primary-hover { \n  position: relative;\n  background-color: var( --comp-scu-icon-button-primary-hover-background-color , rgba(42,73,1,1) );\n  border-radius: var( --comp-scu-icon-button-primary-hover-corner-radius , 200px ); \n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-hover { \n    position: relative;\n    background-color: var( --comp-scu-icon-button-primary-hover-background-color , rgba(42,73,1,1) );\n    border-radius: var( --comp-scu-icon-button-primary-hover-corner-radius , 200px ); \n  }\n</style>\n<div id='comp-scu-icon-button-primary-hover'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 8px;\n    bottom: 8px;\n    left: 24px;\n    right: 24px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-icon-button-primary-hover--sizing {\n  width: 113px;\n  height: 37px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-hover { \n    width: 113px;\n    height: 37px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-primary-hover'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-icon-button-primary-hover--width {\n  width: 113px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-hover { \n    width: 113px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-primary-hover'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-icon-button-primary-hover--height {\n  height: 37px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-hover { \n    height: 37px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-primary-hover'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-icon-button-primary-hover--figma-autolayout { \n  display: flex;\n  flex-flow: row nowrap;\n  padding-left: var( --comp-scu-icon-button-primary-hover-padding-left , 24px );\n  padding-right: var( --comp-scu-icon-button-primary-hover-padding-right , 24px );\n  padding-top: var( --comp-scu-icon-button-primary-hover-padding-top , 8px );\n  padding-bottom: var( --comp-scu-icon-button-primary-hover-padding-bottom , 8px );\n  & > *:not(:last-child) { margin-right: var( --comp-scu-icon-button-primary-hover-item-spacing , 8px ); } \n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-hover { \n    display: flex;\n    flex-flow: row nowrap;\n    padding-left: var( --comp-scu-icon-button-primary-hover-padding-left , 24px );\n    padding-right: var( --comp-scu-icon-button-primary-hover-padding-right , 24px );\n    padding-top: var( --comp-scu-icon-button-primary-hover-padding-top , 8px );\n    padding-bottom: var( --comp-scu-icon-button-primary-hover-padding-bottom , 8px );\n    & > *:not(:last-child) { margin-right: var( --comp-scu-icon-button-primary-hover-item-spacing , 8px ); } \n  }\n</style>\n<div id='comp-scu-icon-button-primary-hover'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-icon-button-primary-hover--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-icon-button-primary-hover-left , 0px );\n  right: var( --comp-scu-icon-button-primary-hover-right , 0px );\n  top: var( --comp-scu-icon-button-primary-hover-top , 0px );\n  bottom: var( --comp-scu-icon-button-primary-hover-bottom , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-hover { \n    position: absolute;\n    left: var( --comp-scu-icon-button-primary-hover-left , 0px );\n    right: var( --comp-scu-icon-button-primary-hover-right , 0px );\n    top: var( --comp-scu-icon-button-primary-hover-top , 0px );\n    bottom: var( --comp-scu-icon-button-primary-hover-bottom , 0px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-icon-button-primary-hover'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-icon-button-primary-hover--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-icon-button-primary-hover-left , 0px );\n  margin-right: var( --comp-scu-icon-button-primary-hover-right , 0px );\n  margin-top: var( --comp-scu-icon-button-primary-hover-top , 0px );\n  margin-bottom: var( --comp-scu-icon-button-primary-hover-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-icon-button-primary-hover-left , 0px ) + var( --comp-scu-icon-button-primary-hover-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-hover { \n    display: inline-block;\n  margin-left: var( --comp-scu-icon-button-primary-hover-left , 0px );\n  margin-right: var( --comp-scu-icon-button-primary-hover-right , 0px );\n  margin-top: var( --comp-scu-icon-button-primary-hover-top , 0px );\n  margin-bottom: var( --comp-scu-icon-button-primary-hover-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-icon-button-primary-hover-left , 0px ) + var( --comp-scu-icon-button-primary-hover-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-primary-hover'>content</div>"
    }
  },
  "components-scu-icon-button-primary-hover-icon-": {
    "box": {
      "output": "\n@mixin comp-scu-icon-button-primary-hover-icon { \n  position: relative;\n  background-color: var( --comp-scu-icon-button-primary-hover-icon-background-color , rgba(255,255,255,1) ); \n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-hover-icon { \n    position: relative;\n    background-color: var( --comp-scu-icon-button-primary-hover-icon-background-color , rgba(255,255,255,1) ); \n  }\n</style>\n<div id='comp-scu-icon-button-primary-hover-icon'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-icon-button-primary-hover-icon--sizing {\n  width: 24px;\n  height: 24px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-hover-icon { \n    width: 24px;\n    height: 24px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-primary-hover-icon'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-icon-button-primary-hover-icon--width {\n  width: 24px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-hover-icon { \n    width: 24px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-primary-hover-icon'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-icon-button-primary-hover-icon--height {\n  height: 24px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-hover-icon { \n    height: 24px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-primary-hover-icon'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-icon-button-primary-hover-icon--figma-autolayout { \n   \n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-hover-icon { \n     \n  }\n</style>\n<div id='comp-scu-icon-button-primary-hover-icon'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-icon-button-primary-hover-icon--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-hover-icon { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-icon-button-primary-hover-icon'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-icon-button-primary-hover-icon--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-icon-button-primary-hover-icon-left , 24px );\n  margin-right: var( --comp-scu-icon-button-primary-hover-icon-right , 65px );\n  margin-top: var( --comp-scu-icon-button-primary-hover-icon-top , 8px );\n  margin-bottom: var( --comp-scu-icon-button-primary-hover-icon-bottom , 5px );\n  width: calc( 100% - ( var( --comp-scu-icon-button-primary-hover-icon-left , 24px ) + var( --comp-scu-icon-button-primary-hover-icon-right , 65px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-hover-icon { \n    display: inline-block;\n  margin-left: var( --comp-scu-icon-button-primary-hover-icon-left , 24px );\n  margin-right: var( --comp-scu-icon-button-primary-hover-icon-right , 65px );\n  margin-top: var( --comp-scu-icon-button-primary-hover-icon-top , 8px );\n  margin-bottom: var( --comp-scu-icon-button-primary-hover-icon-bottom , 5px );\n  width: calc( 100% - ( var( --comp-scu-icon-button-primary-hover-icon-left , 24px ) + var( --comp-scu-icon-button-primary-hover-icon-right , 65px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-primary-hover-icon'>content</div>"
    }
  },
  "components-scu-icon-button-primary-hover-label-": {
    "": {
      "output": "\n@mixin comp-scu-icon-button-primary-hover-label { \n  position: relative;\n  font-size: var( --comp-scu-icon-button-primary-hover-label-font-size , 16px );\n  text-align: var( --comp-scu-icon-button-primary-hover-label-text-align-horizontal , CENTER );\n  color: var( --comp-scu-icon-button-primary-hover-label-color , rgba(255,255,255,1) );\n  font-family: var( --comp-scu-icon-button-primary-hover-label-font-family , 'Proxima Nova' );\n  font-weight: var( --comp-scu-icon-button-primary-hover-label-font-weight , 700 );\n  line-height: var( --comp-scu-icon-button-primary-hover-label-line-height , 18.75px );\n  letter-spacing: var( --comp-scu-icon-button-primary-hover-label-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-hover-label { \n    position: relative;\n    font-size: var( --comp-scu-icon-button-primary-hover-label-font-size , 16px );\n    text-align: var( --comp-scu-icon-button-primary-hover-label-text-align-horizontal , CENTER );\n    color: var( --comp-scu-icon-button-primary-hover-label-color , rgba(255,255,255,1) );\n    font-family: var( --comp-scu-icon-button-primary-hover-label-font-family , 'Proxima Nova' );\n    font-weight: var( --comp-scu-icon-button-primary-hover-label-font-weight , 700 );\n    line-height: var( --comp-scu-icon-button-primary-hover-label-line-height , 18.75px );\n    letter-spacing: var( --comp-scu-icon-button-primary-hover-label-letter-spacing , 0px ); \n  }\n</style>\n<div id='comp-scu-icon-button-primary-hover-label'></div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-icon-button-primary-hover-label--sizing {\n  width: 35px;\n  height: 19px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-hover-label { \n    width: 35px;\n    height: 19px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-primary-hover-label'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-icon-button-primary-hover-label--width {\n  width: 35px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-hover-label { \n    width: 35px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-primary-hover-label'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-icon-button-primary-hover-label--height {\n  height: 19px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-hover-label { \n    height: 19px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-primary-hover-label'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-icon-button-primary-hover-label--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-hover-label { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-icon-button-primary-hover-label'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-icon-button-primary-hover-label--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-icon-button-primary-hover-label-left , 55px );\n  margin-right: var( --comp-scu-icon-button-primary-hover-label-right , 23px );\n  margin-top: var( --comp-scu-icon-button-primary-hover-label-top , 11px );\n  margin-bottom: var( --comp-scu-icon-button-primary-hover-label-bottom , 7px );\n  width: calc( 100% - ( var( --comp-scu-icon-button-primary-hover-label-left , 55px ) + var( --comp-scu-icon-button-primary-hover-label-right , 23px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-hover-label { \n    display: inline-block;\n  margin-left: var( --comp-scu-icon-button-primary-hover-label-left , 55px );\n  margin-right: var( --comp-scu-icon-button-primary-hover-label-right , 23px );\n  margin-top: var( --comp-scu-icon-button-primary-hover-label-top , 11px );\n  margin-bottom: var( --comp-scu-icon-button-primary-hover-label-bottom , 7px );\n  width: calc( 100% - ( var( --comp-scu-icon-button-primary-hover-label-left , 55px ) + var( --comp-scu-icon-button-primary-hover-label-right , 23px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-primary-hover-label'>content</div>"
    }
  },
  "components-scu-icon-button-primary-focus-": {
    "box": {
      "output": "\n@mixin comp-scu-icon-button-primary-focus { \n  position: relative;\n  background-color: var( --comp-scu-icon-button-primary-focus-background-color , rgba(126,182,51,1) );\n  border-radius: var( --comp-scu-icon-button-primary-focus-corner-radius , 200px );\n  box-shadow: var( --comp-scu-icon-button-primary-focus-shadow , 0px 0px 0px 2px rgba(53,155,249,1) ); \n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-focus { \n    position: relative;\n    background-color: var( --comp-scu-icon-button-primary-focus-background-color , rgba(126,182,51,1) );\n    border-radius: var( --comp-scu-icon-button-primary-focus-corner-radius , 200px );\n    box-shadow: var( --comp-scu-icon-button-primary-focus-shadow , 0px 0px 0px 2px rgba(53,155,249,1) ); \n  }\n</style>\n<div id='comp-scu-icon-button-primary-focus'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 8px;\n    bottom: 8px;\n    left: 24px;\n    right: 24px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-icon-button-primary-focus--sizing {\n  width: 113px;\n  height: 37px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-focus { \n    width: 113px;\n    height: 37px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-primary-focus'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-icon-button-primary-focus--width {\n  width: 113px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-focus { \n    width: 113px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-primary-focus'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-icon-button-primary-focus--height {\n  height: 37px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-focus { \n    height: 37px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-primary-focus'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-icon-button-primary-focus--figma-autolayout { \n  display: flex;\n  flex-flow: row nowrap;\n  padding-left: var( --comp-scu-icon-button-primary-focus-padding-left , 24px );\n  padding-right: var( --comp-scu-icon-button-primary-focus-padding-right , 24px );\n  padding-top: var( --comp-scu-icon-button-primary-focus-padding-top , 8px );\n  padding-bottom: var( --comp-scu-icon-button-primary-focus-padding-bottom , 8px );\n  & > *:not(:last-child) { margin-right: var( --comp-scu-icon-button-primary-focus-item-spacing , 8px ); } \n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-focus { \n    display: flex;\n    flex-flow: row nowrap;\n    padding-left: var( --comp-scu-icon-button-primary-focus-padding-left , 24px );\n    padding-right: var( --comp-scu-icon-button-primary-focus-padding-right , 24px );\n    padding-top: var( --comp-scu-icon-button-primary-focus-padding-top , 8px );\n    padding-bottom: var( --comp-scu-icon-button-primary-focus-padding-bottom , 8px );\n    & > *:not(:last-child) { margin-right: var( --comp-scu-icon-button-primary-focus-item-spacing , 8px ); } \n  }\n</style>\n<div id='comp-scu-icon-button-primary-focus'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-icon-button-primary-focus--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-icon-button-primary-focus-left , 0px );\n  right: var( --comp-scu-icon-button-primary-focus-right , 0px );\n  top: var( --comp-scu-icon-button-primary-focus-top , 0px );\n  bottom: var( --comp-scu-icon-button-primary-focus-bottom , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-focus { \n    position: absolute;\n    left: var( --comp-scu-icon-button-primary-focus-left , 0px );\n    right: var( --comp-scu-icon-button-primary-focus-right , 0px );\n    top: var( --comp-scu-icon-button-primary-focus-top , 0px );\n    bottom: var( --comp-scu-icon-button-primary-focus-bottom , 0px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-icon-button-primary-focus'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-icon-button-primary-focus--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-icon-button-primary-focus-left , 0px );\n  margin-right: var( --comp-scu-icon-button-primary-focus-right , 0px );\n  margin-top: var( --comp-scu-icon-button-primary-focus-top , 0px );\n  margin-bottom: var( --comp-scu-icon-button-primary-focus-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-icon-button-primary-focus-left , 0px ) + var( --comp-scu-icon-button-primary-focus-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-focus { \n    display: inline-block;\n  margin-left: var( --comp-scu-icon-button-primary-focus-left , 0px );\n  margin-right: var( --comp-scu-icon-button-primary-focus-right , 0px );\n  margin-top: var( --comp-scu-icon-button-primary-focus-top , 0px );\n  margin-bottom: var( --comp-scu-icon-button-primary-focus-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-icon-button-primary-focus-left , 0px ) + var( --comp-scu-icon-button-primary-focus-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-primary-focus'>content</div>"
    }
  },
  "components-scu-icon-button-primary-focus-icon-": {
    "box": {
      "output": "\n@mixin comp-scu-icon-button-primary-focus-icon { \n  position: relative;\n  background-color: var( --comp-scu-icon-button-primary-focus-icon-background-color , rgba(255,255,255,1) ); \n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-focus-icon { \n    position: relative;\n    background-color: var( --comp-scu-icon-button-primary-focus-icon-background-color , rgba(255,255,255,1) ); \n  }\n</style>\n<div id='comp-scu-icon-button-primary-focus-icon'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-icon-button-primary-focus-icon--sizing {\n  width: 24px;\n  height: 24px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-focus-icon { \n    width: 24px;\n    height: 24px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-primary-focus-icon'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-icon-button-primary-focus-icon--width {\n  width: 24px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-focus-icon { \n    width: 24px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-primary-focus-icon'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-icon-button-primary-focus-icon--height {\n  height: 24px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-focus-icon { \n    height: 24px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-primary-focus-icon'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-icon-button-primary-focus-icon--figma-autolayout { \n   \n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-focus-icon { \n     \n  }\n</style>\n<div id='comp-scu-icon-button-primary-focus-icon'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-icon-button-primary-focus-icon--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-focus-icon { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-icon-button-primary-focus-icon'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-icon-button-primary-focus-icon--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-icon-button-primary-focus-icon-left , 24px );\n  margin-right: var( --comp-scu-icon-button-primary-focus-icon-right , 65px );\n  margin-top: var( --comp-scu-icon-button-primary-focus-icon-top , 8px );\n  margin-bottom: var( --comp-scu-icon-button-primary-focus-icon-bottom , 5px );\n  width: calc( 100% - ( var( --comp-scu-icon-button-primary-focus-icon-left , 24px ) + var( --comp-scu-icon-button-primary-focus-icon-right , 65px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-focus-icon { \n    display: inline-block;\n  margin-left: var( --comp-scu-icon-button-primary-focus-icon-left , 24px );\n  margin-right: var( --comp-scu-icon-button-primary-focus-icon-right , 65px );\n  margin-top: var( --comp-scu-icon-button-primary-focus-icon-top , 8px );\n  margin-bottom: var( --comp-scu-icon-button-primary-focus-icon-bottom , 5px );\n  width: calc( 100% - ( var( --comp-scu-icon-button-primary-focus-icon-left , 24px ) + var( --comp-scu-icon-button-primary-focus-icon-right , 65px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-primary-focus-icon'>content</div>"
    }
  },
  "components-scu-icon-button-primary-focus-label-": {
    "": {
      "output": "\n@mixin comp-scu-icon-button-primary-focus-label { \n  position: relative;\n  font-size: var( --comp-scu-icon-button-primary-focus-label-font-size , 16px );\n  text-align: var( --comp-scu-icon-button-primary-focus-label-text-align-horizontal , CENTER );\n  color: var( --comp-scu-icon-button-primary-focus-label-color , rgba(255,255,255,1) );\n  font-family: var( --comp-scu-icon-button-primary-focus-label-font-family , 'Proxima Nova' );\n  font-weight: var( --comp-scu-icon-button-primary-focus-label-font-weight , 700 );\n  line-height: var( --comp-scu-icon-button-primary-focus-label-line-height , 18.75px );\n  letter-spacing: var( --comp-scu-icon-button-primary-focus-label-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-focus-label { \n    position: relative;\n    font-size: var( --comp-scu-icon-button-primary-focus-label-font-size , 16px );\n    text-align: var( --comp-scu-icon-button-primary-focus-label-text-align-horizontal , CENTER );\n    color: var( --comp-scu-icon-button-primary-focus-label-color , rgba(255,255,255,1) );\n    font-family: var( --comp-scu-icon-button-primary-focus-label-font-family , 'Proxima Nova' );\n    font-weight: var( --comp-scu-icon-button-primary-focus-label-font-weight , 700 );\n    line-height: var( --comp-scu-icon-button-primary-focus-label-line-height , 18.75px );\n    letter-spacing: var( --comp-scu-icon-button-primary-focus-label-letter-spacing , 0px ); \n  }\n</style>\n<div id='comp-scu-icon-button-primary-focus-label'></div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-icon-button-primary-focus-label--sizing {\n  width: 35px;\n  height: 19px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-focus-label { \n    width: 35px;\n    height: 19px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-primary-focus-label'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-icon-button-primary-focus-label--width {\n  width: 35px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-focus-label { \n    width: 35px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-primary-focus-label'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-icon-button-primary-focus-label--height {\n  height: 19px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-focus-label { \n    height: 19px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-primary-focus-label'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-icon-button-primary-focus-label--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-focus-label { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-icon-button-primary-focus-label'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-icon-button-primary-focus-label--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-icon-button-primary-focus-label-left , 55px );\n  margin-right: var( --comp-scu-icon-button-primary-focus-label-right , 23px );\n  margin-top: var( --comp-scu-icon-button-primary-focus-label-top , 11px );\n  margin-bottom: var( --comp-scu-icon-button-primary-focus-label-bottom , 7px );\n  width: calc( 100% - ( var( --comp-scu-icon-button-primary-focus-label-left , 55px ) + var( --comp-scu-icon-button-primary-focus-label-right , 23px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-focus-label { \n    display: inline-block;\n  margin-left: var( --comp-scu-icon-button-primary-focus-label-left , 55px );\n  margin-right: var( --comp-scu-icon-button-primary-focus-label-right , 23px );\n  margin-top: var( --comp-scu-icon-button-primary-focus-label-top , 11px );\n  margin-bottom: var( --comp-scu-icon-button-primary-focus-label-bottom , 7px );\n  width: calc( 100% - ( var( --comp-scu-icon-button-primary-focus-label-left , 55px ) + var( --comp-scu-icon-button-primary-focus-label-right , 23px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-primary-focus-label'>content</div>"
    }
  },
  "components-scu-icon-button-primary-disabled-": {
    "box": {
      "output": "\n@mixin comp-scu-icon-button-primary-disabled { \n  position: relative;\n  background-color: var( --comp-scu-icon-button-primary-disabled-background-color , rgba(126,182,51,1) );\n  border-radius: var( --comp-scu-icon-button-primary-disabled-corner-radius , 200px ); \n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-disabled { \n    position: relative;\n    background-color: var( --comp-scu-icon-button-primary-disabled-background-color , rgba(126,182,51,1) );\n    border-radius: var( --comp-scu-icon-button-primary-disabled-corner-radius , 200px ); \n  }\n</style>\n<div id='comp-scu-icon-button-primary-disabled'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 8px;\n    bottom: 8px;\n    left: 24px;\n    right: 24px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-icon-button-primary-disabled--sizing {\n  width: 113px;\n  height: 40px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-disabled { \n    width: 113px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-primary-disabled'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-icon-button-primary-disabled--width {\n  width: 113px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-disabled { \n    width: 113px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-primary-disabled'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-icon-button-primary-disabled--height {\n  height: 40px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-disabled { \n    height: 40px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-primary-disabled'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-icon-button-primary-disabled--figma-autolayout { \n  display: flex;\n  flex-flow: row nowrap;\n  padding-left: var( --comp-scu-icon-button-primary-disabled-padding-left , 24px );\n  padding-right: var( --comp-scu-icon-button-primary-disabled-padding-right , 24px );\n  padding-top: var( --comp-scu-icon-button-primary-disabled-padding-top , 8px );\n  padding-bottom: var( --comp-scu-icon-button-primary-disabled-padding-bottom , 8px );\n  & > *:not(:last-child) { margin-right: var( --comp-scu-icon-button-primary-disabled-item-spacing , 8px ); } \n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-disabled { \n    display: flex;\n    flex-flow: row nowrap;\n    padding-left: var( --comp-scu-icon-button-primary-disabled-padding-left , 24px );\n    padding-right: var( --comp-scu-icon-button-primary-disabled-padding-right , 24px );\n    padding-top: var( --comp-scu-icon-button-primary-disabled-padding-top , 8px );\n    padding-bottom: var( --comp-scu-icon-button-primary-disabled-padding-bottom , 8px );\n    & > *:not(:last-child) { margin-right: var( --comp-scu-icon-button-primary-disabled-item-spacing , 8px ); } \n  }\n</style>\n<div id='comp-scu-icon-button-primary-disabled'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-icon-button-primary-disabled--absolute-layout {\n  position: absolute;\n  right: var( --comp-scu-icon-button-primary-disabled-left , 0px );\n  width: var( --comp-scu-icon-button-primary-disabled-width , 113px );\n  bottom: var( --comp-scu-icon-button-primary-disabled-bottom , 0px );\n  height: var( --comp-scu-icon-button-primary-disabled-height , 40px ); \n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-disabled { \n    position: absolute;\n    right: var( --comp-scu-icon-button-primary-disabled-left , 0px );\n    width: var( --comp-scu-icon-button-primary-disabled-width , 113px );\n    bottom: var( --comp-scu-icon-button-primary-disabled-bottom , 0px );\n    height: var( --comp-scu-icon-button-primary-disabled-height , 40px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-icon-button-primary-disabled'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-icon-button-primary-disabled--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-icon-button-primary-disabled-left , 0px );\n  margin-right: var( --comp-scu-icon-button-primary-disabled-right , 0px );\n  margin-top: var( --comp-scu-icon-button-primary-disabled-top , -3px );\n  margin-bottom: var( --comp-scu-icon-button-primary-disabled-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-icon-button-primary-disabled-left , 0px ) + var( --comp-scu-icon-button-primary-disabled-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-disabled { \n    display: inline-block;\n  margin-left: var( --comp-scu-icon-button-primary-disabled-left , 0px );\n  margin-right: var( --comp-scu-icon-button-primary-disabled-right , 0px );\n  margin-top: var( --comp-scu-icon-button-primary-disabled-top , -3px );\n  margin-bottom: var( --comp-scu-icon-button-primary-disabled-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-icon-button-primary-disabled-left , 0px ) + var( --comp-scu-icon-button-primary-disabled-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-primary-disabled'>content</div>"
    }
  },
  "components-scu-icon-button-primary-disabled-icon-": {
    "box": {
      "output": "\n@mixin comp-scu-icon-button-primary-disabled-icon { \n  position: relative;\n  background-color: var( --comp-scu-icon-button-primary-disabled-icon-background-color , rgba(255,255,255,1) ); \n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-disabled-icon { \n    position: relative;\n    background-color: var( --comp-scu-icon-button-primary-disabled-icon-background-color , rgba(255,255,255,1) ); \n  }\n</style>\n<div id='comp-scu-icon-button-primary-disabled-icon'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-icon-button-primary-disabled-icon--sizing {\n  width: 24px;\n  height: 24px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-disabled-icon { \n    width: 24px;\n    height: 24px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-primary-disabled-icon'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-icon-button-primary-disabled-icon--width {\n  width: 24px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-disabled-icon { \n    width: 24px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-primary-disabled-icon'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-icon-button-primary-disabled-icon--height {\n  height: 24px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-disabled-icon { \n    height: 24px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-primary-disabled-icon'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-icon-button-primary-disabled-icon--figma-autolayout { \n   \n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-disabled-icon { \n     \n  }\n</style>\n<div id='comp-scu-icon-button-primary-disabled-icon'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-icon-button-primary-disabled-icon--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-disabled-icon { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-icon-button-primary-disabled-icon'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-icon-button-primary-disabled-icon--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-icon-button-primary-disabled-icon-left , 24px );\n  margin-right: var( --comp-scu-icon-button-primary-disabled-icon-right , 65px );\n  margin-top: var( --comp-scu-icon-button-primary-disabled-icon-top , 8px );\n  margin-bottom: var( --comp-scu-icon-button-primary-disabled-icon-bottom , 8px );\n  width: calc( 100% - ( var( --comp-scu-icon-button-primary-disabled-icon-left , 24px ) + var( --comp-scu-icon-button-primary-disabled-icon-right , 65px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-disabled-icon { \n    display: inline-block;\n  margin-left: var( --comp-scu-icon-button-primary-disabled-icon-left , 24px );\n  margin-right: var( --comp-scu-icon-button-primary-disabled-icon-right , 65px );\n  margin-top: var( --comp-scu-icon-button-primary-disabled-icon-top , 8px );\n  margin-bottom: var( --comp-scu-icon-button-primary-disabled-icon-bottom , 8px );\n  width: calc( 100% - ( var( --comp-scu-icon-button-primary-disabled-icon-left , 24px ) + var( --comp-scu-icon-button-primary-disabled-icon-right , 65px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-primary-disabled-icon'>content</div>"
    }
  },
  "components-scu-icon-button-primary-disabled-label-": {
    "": {
      "output": "\n@mixin comp-scu-icon-button-primary-disabled-label { \n  position: relative;\n  font-size: var( --comp-scu-icon-button-primary-disabled-label-font-size , 16px );\n  text-align: var( --comp-scu-icon-button-primary-disabled-label-text-align-horizontal , CENTER );\n  color: var( --comp-scu-icon-button-primary-disabled-label-color , rgba(180,216,133,1) );\n  font-family: var( --comp-scu-icon-button-primary-disabled-label-font-family , 'Proxima Nova' );\n  font-weight: var( --comp-scu-icon-button-primary-disabled-label-font-weight , 700 );\n  line-height: var( --comp-scu-icon-button-primary-disabled-label-line-height , 18.75px );\n  letter-spacing: var( --comp-scu-icon-button-primary-disabled-label-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-disabled-label { \n    position: relative;\n    font-size: var( --comp-scu-icon-button-primary-disabled-label-font-size , 16px );\n    text-align: var( --comp-scu-icon-button-primary-disabled-label-text-align-horizontal , CENTER );\n    color: var( --comp-scu-icon-button-primary-disabled-label-color , rgba(180,216,133,1) );\n    font-family: var( --comp-scu-icon-button-primary-disabled-label-font-family , 'Proxima Nova' );\n    font-weight: var( --comp-scu-icon-button-primary-disabled-label-font-weight , 700 );\n    line-height: var( --comp-scu-icon-button-primary-disabled-label-line-height , 18.75px );\n    letter-spacing: var( --comp-scu-icon-button-primary-disabled-label-letter-spacing , 0px ); \n  }\n</style>\n<div id='comp-scu-icon-button-primary-disabled-label'></div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-icon-button-primary-disabled-label--sizing {\n  width: 35px;\n  height: 19px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-disabled-label { \n    width: 35px;\n    height: 19px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-primary-disabled-label'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-icon-button-primary-disabled-label--width {\n  width: 35px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-disabled-label { \n    width: 35px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-primary-disabled-label'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-icon-button-primary-disabled-label--height {\n  height: 19px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-disabled-label { \n    height: 19px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-primary-disabled-label'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-icon-button-primary-disabled-label--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-disabled-label { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-icon-button-primary-disabled-label'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-icon-button-primary-disabled-label--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-icon-button-primary-disabled-label-left , 55px );\n  margin-right: var( --comp-scu-icon-button-primary-disabled-label-right , 23px );\n  margin-top: var( --comp-scu-icon-button-primary-disabled-label-top , 11px );\n  margin-bottom: var( --comp-scu-icon-button-primary-disabled-label-bottom , 10px );\n  width: calc( 100% - ( var( --comp-scu-icon-button-primary-disabled-label-left , 55px ) + var( --comp-scu-icon-button-primary-disabled-label-right , 23px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-primary-disabled-label { \n    display: inline-block;\n  margin-left: var( --comp-scu-icon-button-primary-disabled-label-left , 55px );\n  margin-right: var( --comp-scu-icon-button-primary-disabled-label-right , 23px );\n  margin-top: var( --comp-scu-icon-button-primary-disabled-label-top , 11px );\n  margin-bottom: var( --comp-scu-icon-button-primary-disabled-label-bottom , 10px );\n  width: calc( 100% - ( var( --comp-scu-icon-button-primary-disabled-label-left , 55px ) + var( --comp-scu-icon-button-primary-disabled-label-right , 23px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-primary-disabled-label'>content</div>"
    }
  },
  "components-scu-icon-button-outline-": {
    "box": {
      "output": "\n@mixin comp-scu-icon-button-outline { \n  position: relative; \n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline { \n    position: relative; \n  }\n</style>\n<div id='comp-scu-icon-button-outline'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-icon-button-outline--sizing {\n  width: 116px;\n  height: 37px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline { \n    width: 116px;\n    height: 37px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-outline'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-icon-button-outline--width {\n  width: 116px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline { \n    width: 116px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-outline'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-icon-button-outline--height {\n  height: 37px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline { \n    height: 37px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-outline'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-icon-button-outline--figma-autolayout { \n   \n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline { \n     \n  }\n</style>\n<div id='comp-scu-icon-button-outline'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-icon-button-outline--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-icon-button-outline'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-icon-button-outline--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-icon-button-outline-left , 0px );\n  margin-right: var( --comp-scu-icon-button-outline-right , 0px );\n  margin-top: var( --comp-scu-icon-button-outline-top , 0px );\n  margin-bottom: var( --comp-scu-icon-button-outline-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-icon-button-outline-left , 0px ) + var( --comp-scu-icon-button-outline-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline { \n    display: inline-block;\n  margin-left: var( --comp-scu-icon-button-outline-left , 0px );\n  margin-right: var( --comp-scu-icon-button-outline-right , 0px );\n  margin-top: var( --comp-scu-icon-button-outline-top , 0px );\n  margin-bottom: var( --comp-scu-icon-button-outline-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-icon-button-outline-left , 0px ) + var( --comp-scu-icon-button-outline-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-outline'>content</div>"
    }
  },
  "components-scu-icon-button-outline-default-": {
    "box": {
      "output": "\n@mixin comp-scu-icon-button-outline-default { \n  position: relative;\n  background-color: var( --comp-scu-icon-button-outline-default-background-color , rgba(255,255,255,1) );\n  border-radius: var( --comp-scu-icon-button-outline-default-corner-radius , 200px );\n  border-width: var( --comp-scu-icon-button-outline-default-stroke-weight , 1px );\n  border-style: solid;\n  border-color: var( --comp-scu-icon-button-outline-default-stroke-color , rgba(99,166,10,1) ); \n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-default { \n    position: relative;\n    background-color: var( --comp-scu-icon-button-outline-default-background-color , rgba(255,255,255,1) );\n    border-radius: var( --comp-scu-icon-button-outline-default-corner-radius , 200px );\n    border-width: var( --comp-scu-icon-button-outline-default-stroke-weight , 1px );\n    border-style: solid;\n    border-color: var( --comp-scu-icon-button-outline-default-stroke-color , rgba(99,166,10,1) ); \n  }\n</style>\n<div id='comp-scu-icon-button-outline-default'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 8px;\n    bottom: 8px;\n    left: 24px;\n    right: 24px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-icon-button-outline-default--sizing {\n  width: 114px;\n  height: 40px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-default { \n    width: 114px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-outline-default'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-icon-button-outline-default--width {\n  width: 114px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-default { \n    width: 114px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-outline-default'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-icon-button-outline-default--height {\n  height: 40px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-default { \n    height: 40px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-outline-default'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-icon-button-outline-default--figma-autolayout { \n  display: flex;\n  flex-flow: row nowrap;\n  padding-left: var( --comp-scu-icon-button-outline-default-padding-left , 24px );\n  padding-right: var( --comp-scu-icon-button-outline-default-padding-right , 24px );\n  padding-top: var( --comp-scu-icon-button-outline-default-padding-top , 8px );\n  padding-bottom: var( --comp-scu-icon-button-outline-default-padding-bottom , 8px );\n  & > *:not(:last-child) { margin-right: var( --comp-scu-icon-button-outline-default-item-spacing , 8px ); } \n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-default { \n    display: flex;\n    flex-flow: row nowrap;\n    padding-left: var( --comp-scu-icon-button-outline-default-padding-left , 24px );\n    padding-right: var( --comp-scu-icon-button-outline-default-padding-right , 24px );\n    padding-top: var( --comp-scu-icon-button-outline-default-padding-top , 8px );\n    padding-bottom: var( --comp-scu-icon-button-outline-default-padding-bottom , 8px );\n    & > *:not(:last-child) { margin-right: var( --comp-scu-icon-button-outline-default-item-spacing , 8px ); } \n  }\n</style>\n<div id='comp-scu-icon-button-outline-default'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-icon-button-outline-default--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-icon-button-outline-default-left , 1px );\n  right: var( --comp-scu-icon-button-outline-default-right , 1px );\n  top: var( --comp-scu-icon-button-outline-default-top , -1.5px );\n  bottom: var( --comp-scu-icon-button-outline-default-bottom , -1.5px ); \n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-default { \n    position: absolute;\n    left: var( --comp-scu-icon-button-outline-default-left , 1px );\n    right: var( --comp-scu-icon-button-outline-default-right , 1px );\n    top: var( --comp-scu-icon-button-outline-default-top , -1.5px );\n    bottom: var( --comp-scu-icon-button-outline-default-bottom , -1.5px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-icon-button-outline-default'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-icon-button-outline-default--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-icon-button-outline-default-left , 1px );\n  margin-right: var( --comp-scu-icon-button-outline-default-right , 1px );\n  margin-top: var( --comp-scu-icon-button-outline-default-top , -1.5px );\n  margin-bottom: var( --comp-scu-icon-button-outline-default-bottom , -1.5px );\n  width: calc( 100% - ( var( --comp-scu-icon-button-outline-default-left , 1px ) + var( --comp-scu-icon-button-outline-default-right , 1px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-default { \n    display: inline-block;\n  margin-left: var( --comp-scu-icon-button-outline-default-left , 1px );\n  margin-right: var( --comp-scu-icon-button-outline-default-right , 1px );\n  margin-top: var( --comp-scu-icon-button-outline-default-top , -1.5px );\n  margin-bottom: var( --comp-scu-icon-button-outline-default-bottom , -1.5px );\n  width: calc( 100% - ( var( --comp-scu-icon-button-outline-default-left , 1px ) + var( --comp-scu-icon-button-outline-default-right , 1px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-outline-default'>content</div>"
    }
  },
  "components-scu-icon-button-outline-default-icon-": {
    "box": {
      "output": "\n@mixin comp-scu-icon-button-outline-default-icon { \n  position: relative;\n  background-color: var( --comp-scu-icon-button-outline-default-icon-background-color , rgba(255,255,255,1) ); \n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-default-icon { \n    position: relative;\n    background-color: var( --comp-scu-icon-button-outline-default-icon-background-color , rgba(255,255,255,1) ); \n  }\n</style>\n<div id='comp-scu-icon-button-outline-default-icon'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-icon-button-outline-default-icon--sizing {\n  width: 24px;\n  height: 24px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-default-icon { \n    width: 24px;\n    height: 24px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-outline-default-icon'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-icon-button-outline-default-icon--width {\n  width: 24px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-default-icon { \n    width: 24px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-outline-default-icon'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-icon-button-outline-default-icon--height {\n  height: 24px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-default-icon { \n    height: 24px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-outline-default-icon'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-icon-button-outline-default-icon--figma-autolayout { \n   \n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-default-icon { \n     \n  }\n</style>\n<div id='comp-scu-icon-button-outline-default-icon'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-icon-button-outline-default-icon--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-default-icon { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-icon-button-outline-default-icon'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-icon-button-outline-default-icon--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-icon-button-outline-default-icon-left , 24px );\n  margin-right: var( --comp-scu-icon-button-outline-default-icon-right , 66px );\n  margin-top: var( --comp-scu-icon-button-outline-default-icon-top , 8px );\n  margin-bottom: var( --comp-scu-icon-button-outline-default-icon-bottom , 8px );\n  width: calc( 100% - ( var( --comp-scu-icon-button-outline-default-icon-left , 24px ) + var( --comp-scu-icon-button-outline-default-icon-right , 66px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-default-icon { \n    display: inline-block;\n  margin-left: var( --comp-scu-icon-button-outline-default-icon-left , 24px );\n  margin-right: var( --comp-scu-icon-button-outline-default-icon-right , 66px );\n  margin-top: var( --comp-scu-icon-button-outline-default-icon-top , 8px );\n  margin-bottom: var( --comp-scu-icon-button-outline-default-icon-bottom , 8px );\n  width: calc( 100% - ( var( --comp-scu-icon-button-outline-default-icon-left , 24px ) + var( --comp-scu-icon-button-outline-default-icon-right , 66px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-outline-default-icon'>content</div>"
    }
  },
  "components-scu-icon-button-outline-default-label-": {
    "": {
      "output": "\n@mixin comp-scu-icon-button-outline-default-label { \n  position: relative;\n  font-size: var( --comp-scu-icon-button-outline-default-label-font-size , 16px );\n  text-align: var( --comp-scu-icon-button-outline-default-label-text-align-horizontal , CENTER );\n  color: var( --comp-scu-icon-button-outline-default-label-color , rgba(86,144,8,1) );\n  font-family: var( --comp-scu-icon-button-outline-default-label-font-family , 'Proxima Nova' );\n  font-weight: var( --comp-scu-icon-button-outline-default-label-font-weight , 400 );\n  line-height: var( --comp-scu-icon-button-outline-default-label-line-height , 18.75px );\n  letter-spacing: var( --comp-scu-icon-button-outline-default-label-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-default-label { \n    position: relative;\n    font-size: var( --comp-scu-icon-button-outline-default-label-font-size , 16px );\n    text-align: var( --comp-scu-icon-button-outline-default-label-text-align-horizontal , CENTER );\n    color: var( --comp-scu-icon-button-outline-default-label-color , rgba(86,144,8,1) );\n    font-family: var( --comp-scu-icon-button-outline-default-label-font-family , 'Proxima Nova' );\n    font-weight: var( --comp-scu-icon-button-outline-default-label-font-weight , 400 );\n    line-height: var( --comp-scu-icon-button-outline-default-label-line-height , 18.75px );\n    letter-spacing: var( --comp-scu-icon-button-outline-default-label-letter-spacing , 0px ); \n  }\n</style>\n<div id='comp-scu-icon-button-outline-default-label'></div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-icon-button-outline-default-label--sizing {\n  width: 34px;\n  height: 19px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-default-label { \n    width: 34px;\n    height: 19px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-outline-default-label'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-icon-button-outline-default-label--width {\n  width: 34px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-default-label { \n    width: 34px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-outline-default-label'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-icon-button-outline-default-label--height {\n  height: 19px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-default-label { \n    height: 19px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-outline-default-label'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-icon-button-outline-default-label--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-default-label { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-icon-button-outline-default-label'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-icon-button-outline-default-label--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-icon-button-outline-default-label-left , 56px );\n  margin-right: var( --comp-scu-icon-button-outline-default-label-right , 24px );\n  margin-top: var( --comp-scu-icon-button-outline-default-label-top , 10.5px );\n  margin-bottom: var( --comp-scu-icon-button-outline-default-label-bottom , 10.5px );\n  width: calc( 100% - ( var( --comp-scu-icon-button-outline-default-label-left , 56px ) + var( --comp-scu-icon-button-outline-default-label-right , 24px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-default-label { \n    display: inline-block;\n  margin-left: var( --comp-scu-icon-button-outline-default-label-left , 56px );\n  margin-right: var( --comp-scu-icon-button-outline-default-label-right , 24px );\n  margin-top: var( --comp-scu-icon-button-outline-default-label-top , 10.5px );\n  margin-bottom: var( --comp-scu-icon-button-outline-default-label-bottom , 10.5px );\n  width: calc( 100% - ( var( --comp-scu-icon-button-outline-default-label-left , 56px ) + var( --comp-scu-icon-button-outline-default-label-right , 24px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-outline-default-label'>content</div>"
    }
  },
  "components-scu-icon-button-outline-hover-": {
    "box": {
      "output": "\n@mixin comp-scu-icon-button-outline-hover { \n  position: relative;\n  background-color: var( --comp-scu-icon-button-outline-hover-background-color , rgba(251,255,246,1) );\n  border-radius: var( --comp-scu-icon-button-outline-hover-corner-radius , 200px );\n  border-width: var( --comp-scu-icon-button-outline-hover-stroke-weight , 1px );\n  border-style: solid;\n  border-color: var( --comp-scu-icon-button-outline-hover-stroke-color , rgba(99,166,10,1) ); \n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-hover { \n    position: relative;\n    background-color: var( --comp-scu-icon-button-outline-hover-background-color , rgba(251,255,246,1) );\n    border-radius: var( --comp-scu-icon-button-outline-hover-corner-radius , 200px );\n    border-width: var( --comp-scu-icon-button-outline-hover-stroke-weight , 1px );\n    border-style: solid;\n    border-color: var( --comp-scu-icon-button-outline-hover-stroke-color , rgba(99,166,10,1) ); \n  }\n</style>\n<div id='comp-scu-icon-button-outline-hover'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 8px;\n    bottom: 8px;\n    left: 24px;\n    right: 24px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-icon-button-outline-hover--sizing {\n  width: 116px;\n  height: 37px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-hover { \n    width: 116px;\n    height: 37px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-outline-hover'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-icon-button-outline-hover--width {\n  width: 116px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-hover { \n    width: 116px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-outline-hover'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-icon-button-outline-hover--height {\n  height: 37px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-hover { \n    height: 37px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-outline-hover'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-icon-button-outline-hover--figma-autolayout { \n  display: flex;\n  flex-flow: row nowrap;\n  padding-left: var( --comp-scu-icon-button-outline-hover-padding-left , 24px );\n  padding-right: var( --comp-scu-icon-button-outline-hover-padding-right , 24px );\n  padding-top: var( --comp-scu-icon-button-outline-hover-padding-top , 8px );\n  padding-bottom: var( --comp-scu-icon-button-outline-hover-padding-bottom , 8px );\n  & > *:not(:last-child) { margin-right: var( --comp-scu-icon-button-outline-hover-item-spacing , 8px ); } \n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-hover { \n    display: flex;\n    flex-flow: row nowrap;\n    padding-left: var( --comp-scu-icon-button-outline-hover-padding-left , 24px );\n    padding-right: var( --comp-scu-icon-button-outline-hover-padding-right , 24px );\n    padding-top: var( --comp-scu-icon-button-outline-hover-padding-top , 8px );\n    padding-bottom: var( --comp-scu-icon-button-outline-hover-padding-bottom , 8px );\n    & > *:not(:last-child) { margin-right: var( --comp-scu-icon-button-outline-hover-item-spacing , 8px ); } \n  }\n</style>\n<div id='comp-scu-icon-button-outline-hover'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-icon-button-outline-hover--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-icon-button-outline-hover-left , 0px );\n  right: var( --comp-scu-icon-button-outline-hover-right , 0px );\n  top: var( --comp-scu-icon-button-outline-hover-top , 0px );\n  bottom: var( --comp-scu-icon-button-outline-hover-bottom , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-hover { \n    position: absolute;\n    left: var( --comp-scu-icon-button-outline-hover-left , 0px );\n    right: var( --comp-scu-icon-button-outline-hover-right , 0px );\n    top: var( --comp-scu-icon-button-outline-hover-top , 0px );\n    bottom: var( --comp-scu-icon-button-outline-hover-bottom , 0px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-icon-button-outline-hover'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-icon-button-outline-hover--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-icon-button-outline-hover-left , 0px );\n  margin-right: var( --comp-scu-icon-button-outline-hover-right , 0px );\n  margin-top: var( --comp-scu-icon-button-outline-hover-top , 0px );\n  margin-bottom: var( --comp-scu-icon-button-outline-hover-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-icon-button-outline-hover-left , 0px ) + var( --comp-scu-icon-button-outline-hover-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-hover { \n    display: inline-block;\n  margin-left: var( --comp-scu-icon-button-outline-hover-left , 0px );\n  margin-right: var( --comp-scu-icon-button-outline-hover-right , 0px );\n  margin-top: var( --comp-scu-icon-button-outline-hover-top , 0px );\n  margin-bottom: var( --comp-scu-icon-button-outline-hover-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-icon-button-outline-hover-left , 0px ) + var( --comp-scu-icon-button-outline-hover-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-outline-hover'>content</div>"
    }
  },
  "components-scu-icon-button-outline-hover-icon-": {
    "box": {
      "output": "\n@mixin comp-scu-icon-button-outline-hover-icon { \n  position: relative;\n  background-color: var( --comp-scu-icon-button-outline-hover-icon-background-color , rgba(255,255,255,1) ); \n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-hover-icon { \n    position: relative;\n    background-color: var( --comp-scu-icon-button-outline-hover-icon-background-color , rgba(255,255,255,1) ); \n  }\n</style>\n<div id='comp-scu-icon-button-outline-hover-icon'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-icon-button-outline-hover-icon--sizing {\n  width: 24px;\n  height: 24px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-hover-icon { \n    width: 24px;\n    height: 24px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-outline-hover-icon'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-icon-button-outline-hover-icon--width {\n  width: 24px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-hover-icon { \n    width: 24px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-outline-hover-icon'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-icon-button-outline-hover-icon--height {\n  height: 24px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-hover-icon { \n    height: 24px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-outline-hover-icon'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-icon-button-outline-hover-icon--figma-autolayout { \n   \n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-hover-icon { \n     \n  }\n</style>\n<div id='comp-scu-icon-button-outline-hover-icon'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-icon-button-outline-hover-icon--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-hover-icon { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-icon-button-outline-hover-icon'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-icon-button-outline-hover-icon--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-icon-button-outline-hover-icon-left , 24px );\n  margin-right: var( --comp-scu-icon-button-outline-hover-icon-right , 68px );\n  margin-top: var( --comp-scu-icon-button-outline-hover-icon-top , 8px );\n  margin-bottom: var( --comp-scu-icon-button-outline-hover-icon-bottom , 5px );\n  width: calc( 100% - ( var( --comp-scu-icon-button-outline-hover-icon-left , 24px ) + var( --comp-scu-icon-button-outline-hover-icon-right , 68px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-hover-icon { \n    display: inline-block;\n  margin-left: var( --comp-scu-icon-button-outline-hover-icon-left , 24px );\n  margin-right: var( --comp-scu-icon-button-outline-hover-icon-right , 68px );\n  margin-top: var( --comp-scu-icon-button-outline-hover-icon-top , 8px );\n  margin-bottom: var( --comp-scu-icon-button-outline-hover-icon-bottom , 5px );\n  width: calc( 100% - ( var( --comp-scu-icon-button-outline-hover-icon-left , 24px ) + var( --comp-scu-icon-button-outline-hover-icon-right , 68px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-outline-hover-icon'>content</div>"
    }
  },
  "components-scu-icon-button-outline-hover-label-": {
    "": {
      "output": "\n@mixin comp-scu-icon-button-outline-hover-label { \n  position: relative;\n  font-size: var( --comp-scu-icon-button-outline-hover-label-font-size , 16px );\n  text-align: var( --comp-scu-icon-button-outline-hover-label-text-align-horizontal , CENTER );\n  color: var( --comp-scu-icon-button-outline-hover-label-color , rgba(86,144,8,1) );\n  font-family: var( --comp-scu-icon-button-outline-hover-label-font-family , 'Proxima Nova' );\n  font-weight: var( --comp-scu-icon-button-outline-hover-label-font-weight , 400 );\n  line-height: var( --comp-scu-icon-button-outline-hover-label-line-height , 18.75px );\n  letter-spacing: var( --comp-scu-icon-button-outline-hover-label-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-hover-label { \n    position: relative;\n    font-size: var( --comp-scu-icon-button-outline-hover-label-font-size , 16px );\n    text-align: var( --comp-scu-icon-button-outline-hover-label-text-align-horizontal , CENTER );\n    color: var( --comp-scu-icon-button-outline-hover-label-color , rgba(86,144,8,1) );\n    font-family: var( --comp-scu-icon-button-outline-hover-label-font-family , 'Proxima Nova' );\n    font-weight: var( --comp-scu-icon-button-outline-hover-label-font-weight , 400 );\n    line-height: var( --comp-scu-icon-button-outline-hover-label-line-height , 18.75px );\n    letter-spacing: var( --comp-scu-icon-button-outline-hover-label-letter-spacing , 0px ); \n  }\n</style>\n<div id='comp-scu-icon-button-outline-hover-label'></div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-icon-button-outline-hover-label--sizing {\n  width: 34px;\n  height: 19px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-hover-label { \n    width: 34px;\n    height: 19px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-outline-hover-label'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-icon-button-outline-hover-label--width {\n  width: 34px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-hover-label { \n    width: 34px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-outline-hover-label'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-icon-button-outline-hover-label--height {\n  height: 19px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-hover-label { \n    height: 19px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-outline-hover-label'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-icon-button-outline-hover-label--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-hover-label { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-icon-button-outline-hover-label'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-icon-button-outline-hover-label--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-icon-button-outline-hover-label-left , 55px );\n  margin-right: var( --comp-scu-icon-button-outline-hover-label-right , 27px );\n  margin-top: var( --comp-scu-icon-button-outline-hover-label-top , 11px );\n  margin-bottom: var( --comp-scu-icon-button-outline-hover-label-bottom , 7px );\n  width: calc( 100% - ( var( --comp-scu-icon-button-outline-hover-label-left , 55px ) + var( --comp-scu-icon-button-outline-hover-label-right , 27px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-hover-label { \n    display: inline-block;\n  margin-left: var( --comp-scu-icon-button-outline-hover-label-left , 55px );\n  margin-right: var( --comp-scu-icon-button-outline-hover-label-right , 27px );\n  margin-top: var( --comp-scu-icon-button-outline-hover-label-top , 11px );\n  margin-bottom: var( --comp-scu-icon-button-outline-hover-label-bottom , 7px );\n  width: calc( 100% - ( var( --comp-scu-icon-button-outline-hover-label-left , 55px ) + var( --comp-scu-icon-button-outline-hover-label-right , 27px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-outline-hover-label'>content</div>"
    }
  },
  "components-scu-icon-button-outline-focus-": {
    "box": {
      "output": "\n@mixin comp-scu-icon-button-outline-focus { \n  position: relative;\n  background-color: var( --comp-scu-icon-button-outline-focus-background-color , rgba(255,255,255,1) );\n  border-radius: var( --comp-scu-icon-button-outline-focus-corner-radius , 200px );\n  box-shadow: var( --comp-scu-icon-button-outline-focus-shadow , 0px 0px 0px 2px rgba(53,155,249,1) ); \n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-focus { \n    position: relative;\n    background-color: var( --comp-scu-icon-button-outline-focus-background-color , rgba(255,255,255,1) );\n    border-radius: var( --comp-scu-icon-button-outline-focus-corner-radius , 200px );\n    box-shadow: var( --comp-scu-icon-button-outline-focus-shadow , 0px 0px 0px 2px rgba(53,155,249,1) ); \n  }\n</style>\n<div id='comp-scu-icon-button-outline-focus'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 8px;\n    bottom: 8px;\n    left: 24px;\n    right: 24px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-icon-button-outline-focus--sizing {\n  width: 116px;\n  height: 37px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-focus { \n    width: 116px;\n    height: 37px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-outline-focus'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-icon-button-outline-focus--width {\n  width: 116px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-focus { \n    width: 116px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-outline-focus'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-icon-button-outline-focus--height {\n  height: 37px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-focus { \n    height: 37px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-outline-focus'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-icon-button-outline-focus--figma-autolayout { \n  display: flex;\n  flex-flow: row nowrap;\n  padding-left: var( --comp-scu-icon-button-outline-focus-padding-left , 24px );\n  padding-right: var( --comp-scu-icon-button-outline-focus-padding-right , 24px );\n  padding-top: var( --comp-scu-icon-button-outline-focus-padding-top , 8px );\n  padding-bottom: var( --comp-scu-icon-button-outline-focus-padding-bottom , 8px );\n  & > *:not(:last-child) { margin-right: var( --comp-scu-icon-button-outline-focus-item-spacing , 8px ); } \n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-focus { \n    display: flex;\n    flex-flow: row nowrap;\n    padding-left: var( --comp-scu-icon-button-outline-focus-padding-left , 24px );\n    padding-right: var( --comp-scu-icon-button-outline-focus-padding-right , 24px );\n    padding-top: var( --comp-scu-icon-button-outline-focus-padding-top , 8px );\n    padding-bottom: var( --comp-scu-icon-button-outline-focus-padding-bottom , 8px );\n    & > *:not(:last-child) { margin-right: var( --comp-scu-icon-button-outline-focus-item-spacing , 8px ); } \n  }\n</style>\n<div id='comp-scu-icon-button-outline-focus'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-icon-button-outline-focus--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-icon-button-outline-focus-left , 0px );\n  right: var( --comp-scu-icon-button-outline-focus-right , 0px );\n  top: var( --comp-scu-icon-button-outline-focus-top , 0px );\n  bottom: var( --comp-scu-icon-button-outline-focus-bottom , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-focus { \n    position: absolute;\n    left: var( --comp-scu-icon-button-outline-focus-left , 0px );\n    right: var( --comp-scu-icon-button-outline-focus-right , 0px );\n    top: var( --comp-scu-icon-button-outline-focus-top , 0px );\n    bottom: var( --comp-scu-icon-button-outline-focus-bottom , 0px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-icon-button-outline-focus'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-icon-button-outline-focus--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-icon-button-outline-focus-left , 0px );\n  margin-right: var( --comp-scu-icon-button-outline-focus-right , 0px );\n  margin-top: var( --comp-scu-icon-button-outline-focus-top , 0px );\n  margin-bottom: var( --comp-scu-icon-button-outline-focus-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-icon-button-outline-focus-left , 0px ) + var( --comp-scu-icon-button-outline-focus-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-focus { \n    display: inline-block;\n  margin-left: var( --comp-scu-icon-button-outline-focus-left , 0px );\n  margin-right: var( --comp-scu-icon-button-outline-focus-right , 0px );\n  margin-top: var( --comp-scu-icon-button-outline-focus-top , 0px );\n  margin-bottom: var( --comp-scu-icon-button-outline-focus-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-icon-button-outline-focus-left , 0px ) + var( --comp-scu-icon-button-outline-focus-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-outline-focus'>content</div>"
    }
  },
  "components-scu-icon-button-outline-focus-icon-": {
    "box": {
      "output": "\n@mixin comp-scu-icon-button-outline-focus-icon { \n  position: relative;\n  background-color: var( --comp-scu-icon-button-outline-focus-icon-background-color , rgba(255,255,255,1) ); \n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-focus-icon { \n    position: relative;\n    background-color: var( --comp-scu-icon-button-outline-focus-icon-background-color , rgba(255,255,255,1) ); \n  }\n</style>\n<div id='comp-scu-icon-button-outline-focus-icon'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-icon-button-outline-focus-icon--sizing {\n  width: 24px;\n  height: 24px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-focus-icon { \n    width: 24px;\n    height: 24px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-outline-focus-icon'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-icon-button-outline-focus-icon--width {\n  width: 24px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-focus-icon { \n    width: 24px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-outline-focus-icon'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-icon-button-outline-focus-icon--height {\n  height: 24px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-focus-icon { \n    height: 24px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-outline-focus-icon'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-icon-button-outline-focus-icon--figma-autolayout { \n   \n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-focus-icon { \n     \n  }\n</style>\n<div id='comp-scu-icon-button-outline-focus-icon'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-icon-button-outline-focus-icon--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-focus-icon { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-icon-button-outline-focus-icon'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-icon-button-outline-focus-icon--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-icon-button-outline-focus-icon-left , 24px );\n  margin-right: var( --comp-scu-icon-button-outline-focus-icon-right , 68px );\n  margin-top: var( --comp-scu-icon-button-outline-focus-icon-top , 8px );\n  margin-bottom: var( --comp-scu-icon-button-outline-focus-icon-bottom , 5px );\n  width: calc( 100% - ( var( --comp-scu-icon-button-outline-focus-icon-left , 24px ) + var( --comp-scu-icon-button-outline-focus-icon-right , 68px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-focus-icon { \n    display: inline-block;\n  margin-left: var( --comp-scu-icon-button-outline-focus-icon-left , 24px );\n  margin-right: var( --comp-scu-icon-button-outline-focus-icon-right , 68px );\n  margin-top: var( --comp-scu-icon-button-outline-focus-icon-top , 8px );\n  margin-bottom: var( --comp-scu-icon-button-outline-focus-icon-bottom , 5px );\n  width: calc( 100% - ( var( --comp-scu-icon-button-outline-focus-icon-left , 24px ) + var( --comp-scu-icon-button-outline-focus-icon-right , 68px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-outline-focus-icon'>content</div>"
    }
  },
  "components-scu-icon-button-outline-focus-label-": {
    "": {
      "output": "\n@mixin comp-scu-icon-button-outline-focus-label { \n  position: relative;\n  font-size: var( --comp-scu-icon-button-outline-focus-label-font-size , 16px );\n  text-align: var( --comp-scu-icon-button-outline-focus-label-text-align-horizontal , CENTER );\n  color: var( --comp-scu-icon-button-outline-focus-label-color , rgba(86,144,8,1) );\n  font-family: var( --comp-scu-icon-button-outline-focus-label-font-family , 'Proxima Nova' );\n  font-weight: var( --comp-scu-icon-button-outline-focus-label-font-weight , 400 );\n  line-height: var( --comp-scu-icon-button-outline-focus-label-line-height , 18.75px );\n  letter-spacing: var( --comp-scu-icon-button-outline-focus-label-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-focus-label { \n    position: relative;\n    font-size: var( --comp-scu-icon-button-outline-focus-label-font-size , 16px );\n    text-align: var( --comp-scu-icon-button-outline-focus-label-text-align-horizontal , CENTER );\n    color: var( --comp-scu-icon-button-outline-focus-label-color , rgba(86,144,8,1) );\n    font-family: var( --comp-scu-icon-button-outline-focus-label-font-family , 'Proxima Nova' );\n    font-weight: var( --comp-scu-icon-button-outline-focus-label-font-weight , 400 );\n    line-height: var( --comp-scu-icon-button-outline-focus-label-line-height , 18.75px );\n    letter-spacing: var( --comp-scu-icon-button-outline-focus-label-letter-spacing , 0px ); \n  }\n</style>\n<div id='comp-scu-icon-button-outline-focus-label'></div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-icon-button-outline-focus-label--sizing {\n  width: 34px;\n  height: 19px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-focus-label { \n    width: 34px;\n    height: 19px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-outline-focus-label'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-icon-button-outline-focus-label--width {\n  width: 34px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-focus-label { \n    width: 34px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-outline-focus-label'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-icon-button-outline-focus-label--height {\n  height: 19px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-focus-label { \n    height: 19px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-outline-focus-label'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-icon-button-outline-focus-label--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-focus-label { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-icon-button-outline-focus-label'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-icon-button-outline-focus-label--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-icon-button-outline-focus-label-left , 55px );\n  margin-right: var( --comp-scu-icon-button-outline-focus-label-right , 27px );\n  margin-top: var( --comp-scu-icon-button-outline-focus-label-top , 11px );\n  margin-bottom: var( --comp-scu-icon-button-outline-focus-label-bottom , 7px );\n  width: calc( 100% - ( var( --comp-scu-icon-button-outline-focus-label-left , 55px ) + var( --comp-scu-icon-button-outline-focus-label-right , 27px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-focus-label { \n    display: inline-block;\n  margin-left: var( --comp-scu-icon-button-outline-focus-label-left , 55px );\n  margin-right: var( --comp-scu-icon-button-outline-focus-label-right , 27px );\n  margin-top: var( --comp-scu-icon-button-outline-focus-label-top , 11px );\n  margin-bottom: var( --comp-scu-icon-button-outline-focus-label-bottom , 7px );\n  width: calc( 100% - ( var( --comp-scu-icon-button-outline-focus-label-left , 55px ) + var( --comp-scu-icon-button-outline-focus-label-right , 27px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-outline-focus-label'>content</div>"
    }
  },
  "components-scu-icon-button-outline-disabled-": {
    "box": {
      "output": "\n@mixin comp-scu-icon-button-outline-disabled { \n  position: relative;\n  background-color: var( --comp-scu-icon-button-outline-disabled-background-color , rgba(255,255,255,1) );\n  border-radius: var( --comp-scu-icon-button-outline-disabled-corner-radius , 200px );\n  border-width: var( --comp-scu-icon-button-outline-disabled-stroke-weight , 1px );\n  border-style: solid;\n  border-color: var( --comp-scu-icon-button-outline-disabled-stroke-color , rgba(187,218,146,1) ); \n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-disabled { \n    position: relative;\n    background-color: var( --comp-scu-icon-button-outline-disabled-background-color , rgba(255,255,255,1) );\n    border-radius: var( --comp-scu-icon-button-outline-disabled-corner-radius , 200px );\n    border-width: var( --comp-scu-icon-button-outline-disabled-stroke-weight , 1px );\n    border-style: solid;\n    border-color: var( --comp-scu-icon-button-outline-disabled-stroke-color , rgba(187,218,146,1) ); \n  }\n</style>\n<div id='comp-scu-icon-button-outline-disabled'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 8px;\n    bottom: 8px;\n    left: 24px;\n    right: 24px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-icon-button-outline-disabled--sizing {\n  width: 112px;\n  height: 40px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-disabled { \n    width: 112px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-outline-disabled'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-icon-button-outline-disabled--width {\n  width: 112px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-disabled { \n    width: 112px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-outline-disabled'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-icon-button-outline-disabled--height {\n  height: 40px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-disabled { \n    height: 40px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-outline-disabled'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-icon-button-outline-disabled--figma-autolayout { \n  display: flex;\n  flex-flow: row nowrap;\n  padding-left: var( --comp-scu-icon-button-outline-disabled-padding-left , 24px );\n  padding-right: var( --comp-scu-icon-button-outline-disabled-padding-right , 24px );\n  padding-top: var( --comp-scu-icon-button-outline-disabled-padding-top , 8px );\n  padding-bottom: var( --comp-scu-icon-button-outline-disabled-padding-bottom , 8px );\n  & > *:not(:last-child) { margin-right: var( --comp-scu-icon-button-outline-disabled-item-spacing , 8px ); } \n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-disabled { \n    display: flex;\n    flex-flow: row nowrap;\n    padding-left: var( --comp-scu-icon-button-outline-disabled-padding-left , 24px );\n    padding-right: var( --comp-scu-icon-button-outline-disabled-padding-right , 24px );\n    padding-top: var( --comp-scu-icon-button-outline-disabled-padding-top , 8px );\n    padding-bottom: var( --comp-scu-icon-button-outline-disabled-padding-bottom , 8px );\n    & > *:not(:last-child) { margin-right: var( --comp-scu-icon-button-outline-disabled-item-spacing , 8px ); } \n  }\n</style>\n<div id='comp-scu-icon-button-outline-disabled'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-icon-button-outline-disabled--absolute-layout {\n  position: absolute;\n  right: var( --comp-scu-icon-button-outline-disabled-left , 4px );\n  width: var( --comp-scu-icon-button-outline-disabled-width , 112px );\n  bottom: var( --comp-scu-icon-button-outline-disabled-bottom , 0px );\n  height: var( --comp-scu-icon-button-outline-disabled-height , 40px ); \n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-disabled { \n    position: absolute;\n    right: var( --comp-scu-icon-button-outline-disabled-left , 4px );\n    width: var( --comp-scu-icon-button-outline-disabled-width , 112px );\n    bottom: var( --comp-scu-icon-button-outline-disabled-bottom , 0px );\n    height: var( --comp-scu-icon-button-outline-disabled-height , 40px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-icon-button-outline-disabled'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-icon-button-outline-disabled--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-icon-button-outline-disabled-left , 4px );\n  margin-right: var( --comp-scu-icon-button-outline-disabled-right , 0px );\n  margin-top: var( --comp-scu-icon-button-outline-disabled-top , -3px );\n  margin-bottom: var( --comp-scu-icon-button-outline-disabled-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-icon-button-outline-disabled-left , 4px ) + var( --comp-scu-icon-button-outline-disabled-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-disabled { \n    display: inline-block;\n  margin-left: var( --comp-scu-icon-button-outline-disabled-left , 4px );\n  margin-right: var( --comp-scu-icon-button-outline-disabled-right , 0px );\n  margin-top: var( --comp-scu-icon-button-outline-disabled-top , -3px );\n  margin-bottom: var( --comp-scu-icon-button-outline-disabled-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-icon-button-outline-disabled-left , 4px ) + var( --comp-scu-icon-button-outline-disabled-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-outline-disabled'>content</div>"
    }
  },
  "components-scu-icon-button-outline-disabled-icon-": {
    "box": {
      "output": "\n@mixin comp-scu-icon-button-outline-disabled-icon { \n  position: relative;\n  background-color: var( --comp-scu-icon-button-outline-disabled-icon-background-color , rgba(255,255,255,1) ); \n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-disabled-icon { \n    position: relative;\n    background-color: var( --comp-scu-icon-button-outline-disabled-icon-background-color , rgba(255,255,255,1) ); \n  }\n</style>\n<div id='comp-scu-icon-button-outline-disabled-icon'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-icon-button-outline-disabled-icon--sizing {\n  width: 24px;\n  height: 24px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-disabled-icon { \n    width: 24px;\n    height: 24px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-outline-disabled-icon'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-icon-button-outline-disabled-icon--width {\n  width: 24px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-disabled-icon { \n    width: 24px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-outline-disabled-icon'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-icon-button-outline-disabled-icon--height {\n  height: 24px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-disabled-icon { \n    height: 24px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-outline-disabled-icon'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-icon-button-outline-disabled-icon--figma-autolayout { \n   \n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-disabled-icon { \n     \n  }\n</style>\n<div id='comp-scu-icon-button-outline-disabled-icon'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-icon-button-outline-disabled-icon--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-disabled-icon { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-icon-button-outline-disabled-icon'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-icon-button-outline-disabled-icon--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-icon-button-outline-disabled-icon-left , 24px );\n  margin-right: var( --comp-scu-icon-button-outline-disabled-icon-right , 64px );\n  margin-top: var( --comp-scu-icon-button-outline-disabled-icon-top , 8px );\n  margin-bottom: var( --comp-scu-icon-button-outline-disabled-icon-bottom , 8px );\n  width: calc( 100% - ( var( --comp-scu-icon-button-outline-disabled-icon-left , 24px ) + var( --comp-scu-icon-button-outline-disabled-icon-right , 64px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-disabled-icon { \n    display: inline-block;\n  margin-left: var( --comp-scu-icon-button-outline-disabled-icon-left , 24px );\n  margin-right: var( --comp-scu-icon-button-outline-disabled-icon-right , 64px );\n  margin-top: var( --comp-scu-icon-button-outline-disabled-icon-top , 8px );\n  margin-bottom: var( --comp-scu-icon-button-outline-disabled-icon-bottom , 8px );\n  width: calc( 100% - ( var( --comp-scu-icon-button-outline-disabled-icon-left , 24px ) + var( --comp-scu-icon-button-outline-disabled-icon-right , 64px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-outline-disabled-icon'>content</div>"
    }
  },
  "components-scu-icon-button-outline-disabled-label-": {
    "": {
      "output": "\n@mixin comp-scu-icon-button-outline-disabled-label { \n  position: relative;\n  font-size: var( --comp-scu-icon-button-outline-disabled-label-font-size , 16px );\n  text-align: var( --comp-scu-icon-button-outline-disabled-label-text-align-horizontal , CENTER );\n  color: var( --comp-scu-icon-button-outline-disabled-label-color , rgba(201,227,166,1) );\n  font-family: var( --comp-scu-icon-button-outline-disabled-label-font-family , 'Proxima Nova' );\n  font-weight: var( --comp-scu-icon-button-outline-disabled-label-font-weight , 400 );\n  line-height: var( --comp-scu-icon-button-outline-disabled-label-line-height , 18.75px );\n  letter-spacing: var( --comp-scu-icon-button-outline-disabled-label-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-disabled-label { \n    position: relative;\n    font-size: var( --comp-scu-icon-button-outline-disabled-label-font-size , 16px );\n    text-align: var( --comp-scu-icon-button-outline-disabled-label-text-align-horizontal , CENTER );\n    color: var( --comp-scu-icon-button-outline-disabled-label-color , rgba(201,227,166,1) );\n    font-family: var( --comp-scu-icon-button-outline-disabled-label-font-family , 'Proxima Nova' );\n    font-weight: var( --comp-scu-icon-button-outline-disabled-label-font-weight , 400 );\n    line-height: var( --comp-scu-icon-button-outline-disabled-label-line-height , 18.75px );\n    letter-spacing: var( --comp-scu-icon-button-outline-disabled-label-letter-spacing , 0px ); \n  }\n</style>\n<div id='comp-scu-icon-button-outline-disabled-label'></div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-icon-button-outline-disabled-label--sizing {\n  width: 34px;\n  height: 19px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-disabled-label { \n    width: 34px;\n    height: 19px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-outline-disabled-label'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-icon-button-outline-disabled-label--width {\n  width: 34px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-disabled-label { \n    width: 34px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-outline-disabled-label'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-icon-button-outline-disabled-label--height {\n  height: 19px;\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-disabled-label { \n    height: 19px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-outline-disabled-label'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-icon-button-outline-disabled-label--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-disabled-label { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-icon-button-outline-disabled-label'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-icon-button-outline-disabled-label--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-icon-button-outline-disabled-label-left , 55px );\n  margin-right: var( --comp-scu-icon-button-outline-disabled-label-right , 23px );\n  margin-top: var( --comp-scu-icon-button-outline-disabled-label-top , 11px );\n  margin-bottom: var( --comp-scu-icon-button-outline-disabled-label-bottom , 10px );\n  width: calc( 100% - ( var( --comp-scu-icon-button-outline-disabled-label-left , 55px ) + var( --comp-scu-icon-button-outline-disabled-label-right , 23px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-icon-button-outline-disabled-label { \n    display: inline-block;\n  margin-left: var( --comp-scu-icon-button-outline-disabled-label-left , 55px );\n  margin-right: var( --comp-scu-icon-button-outline-disabled-label-right , 23px );\n  margin-top: var( --comp-scu-icon-button-outline-disabled-label-top , 11px );\n  margin-bottom: var( --comp-scu-icon-button-outline-disabled-label-bottom , 10px );\n  width: calc( 100% - ( var( --comp-scu-icon-button-outline-disabled-label-left , 55px ) + var( --comp-scu-icon-button-outline-disabled-label-right , 23px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-icon-button-outline-disabled-label'>content</div>"
    }
  },
  "components-scu-nav-item-v-": {
    "box": {
      "output": "\n@mixin comp-scu-nav-item-v { \n  position: relative;\n  background-color: var( --comp-scu-nav-item-v-background-color , rgba(255,255,255,1) ); \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v { \n    position: relative;\n    background-color: var( --comp-scu-nav-item-v-background-color , rgba(255,255,255,1) ); \n  }\n</style>\n<div id='comp-scu-nav-item-v'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-nav-item-v--sizing {\n  width: 246px;\n  height: 40px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v { \n    width: 246px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-nav-item-v--width {\n  width: 246px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v { \n    width: 246px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-nav-item-v--height {\n  height: 40px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v { \n    height: 40px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-nav-item-v--figma-autolayout { \n   \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v { \n     \n  }\n</style>\n<div id='comp-scu-nav-item-v'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-nav-item-v--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-nav-item-v'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-nav-item-v--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-nav-item-v-left , 0px );\n  margin-right: var( --comp-scu-nav-item-v-right , 0px );\n  margin-top: var( --comp-scu-nav-item-v-top , 0px );\n  margin-bottom: var( --comp-scu-nav-item-v-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-nav-item-v-left , 0px ) + var( --comp-scu-nav-item-v-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v { \n    display: inline-block;\n  margin-left: var( --comp-scu-nav-item-v-left , 0px );\n  margin-right: var( --comp-scu-nav-item-v-right , 0px );\n  margin-top: var( --comp-scu-nav-item-v-top , 0px );\n  margin-bottom: var( --comp-scu-nav-item-v-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-nav-item-v-left , 0px ) + var( --comp-scu-nav-item-v-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v'>content</div>"
    }
  },
  "components-scu-nav-item-v-default-": {
    "box": {
      "output": "\n@mixin comp-scu-nav-item-v-default { \n  position: relative; \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-default { \n    position: relative; \n  }\n</style>\n<div id='comp-scu-nav-item-v-default'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-nav-item-v-default--sizing {\n  width: 246px;\n  height: 40px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-default { \n    width: 246px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-default'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-nav-item-v-default--width {\n  width: 246px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-default { \n    width: 246px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-default'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-nav-item-v-default--height {\n  height: 40px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-default { \n    height: 40px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-default'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-nav-item-v-default--figma-autolayout { \n   \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-default { \n     \n  }\n</style>\n<div id='comp-scu-nav-item-v-default'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-nav-item-v-default--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-nav-item-v-default-left , 0px );\n  right: var( --comp-scu-nav-item-v-default-right , 0px );\n  top: var( --comp-scu-nav-item-v-default-top , 0px );\n  bottom: var( --comp-scu-nav-item-v-default-bottom , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-default { \n    position: absolute;\n    left: var( --comp-scu-nav-item-v-default-left , 0px );\n    right: var( --comp-scu-nav-item-v-default-right , 0px );\n    top: var( --comp-scu-nav-item-v-default-top , 0px );\n    bottom: var( --comp-scu-nav-item-v-default-bottom , 0px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-nav-item-v-default'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-nav-item-v-default--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-nav-item-v-default-left , 0px );\n  margin-right: var( --comp-scu-nav-item-v-default-right , 0px );\n  margin-top: var( --comp-scu-nav-item-v-default-top , 0px );\n  margin-bottom: var( --comp-scu-nav-item-v-default-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-nav-item-v-default-left , 0px ) + var( --comp-scu-nav-item-v-default-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-default { \n    display: inline-block;\n  margin-left: var( --comp-scu-nav-item-v-default-left , 0px );\n  margin-right: var( --comp-scu-nav-item-v-default-right , 0px );\n  margin-top: var( --comp-scu-nav-item-v-default-top , 0px );\n  margin-bottom: var( --comp-scu-nav-item-v-default-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-nav-item-v-default-left , 0px ) + var( --comp-scu-nav-item-v-default-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-default'>content</div>"
    }
  },
  "components-scu-nav-item-v-default-label-": {
    "": {
      "output": "\n@mixin comp-scu-nav-item-v-default-label { \n  position: relative;\n  font-size: var( --comp-scu-nav-item-v-default-label-font-size , 15px );\n  text-align: var( --comp-scu-nav-item-v-default-label-text-align-horizontal , LEFT );\n  color: var( --comp-scu-nav-item-v-default-label-color , rgba(54,54,54,1) );\n  font-family: var( --comp-scu-nav-item-v-default-label-font-family , 'Proxima Nova' );\n  font-weight: var( --comp-scu-nav-item-v-default-label-font-weight , 400 );\n  line-height: var( --comp-scu-nav-item-v-default-label-line-height , 17.58px );\n  letter-spacing: var( --comp-scu-nav-item-v-default-label-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-default-label { \n    position: relative;\n    font-size: var( --comp-scu-nav-item-v-default-label-font-size , 15px );\n    text-align: var( --comp-scu-nav-item-v-default-label-text-align-horizontal , LEFT );\n    color: var( --comp-scu-nav-item-v-default-label-color , rgba(54,54,54,1) );\n    font-family: var( --comp-scu-nav-item-v-default-label-font-family , 'Proxima Nova' );\n    font-weight: var( --comp-scu-nav-item-v-default-label-font-weight , 400 );\n    line-height: var( --comp-scu-nav-item-v-default-label-line-height , 17.58px );\n    letter-spacing: var( --comp-scu-nav-item-v-default-label-letter-spacing , 0px ); \n  }\n</style>\n<div id='comp-scu-nav-item-v-default-label'></div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-nav-item-v-default-label--sizing {\n  width: 209px;\n  height: 18px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-default-label { \n    width: 209px;\n    height: 18px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-default-label'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-nav-item-v-default-label--width {\n  width: 209px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-default-label { \n    width: 209px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-default-label'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-nav-item-v-default-label--height {\n  height: 18px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-default-label { \n    height: 18px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-default-label'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-nav-item-v-default-label--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-nav-item-v-default-label-left , 32px );\n  right: var( --comp-scu-nav-item-v-default-label-right , 5px );\n  top: var( --comp-scu-nav-item-v-default-label-top , 11px );\n  bottom: var( --comp-scu-nav-item-v-default-label-bottom , 11px ); \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-default-label { \n    position: absolute;\n    left: var( --comp-scu-nav-item-v-default-label-left , 32px );\n    right: var( --comp-scu-nav-item-v-default-label-right , 5px );\n    top: var( --comp-scu-nav-item-v-default-label-top , 11px );\n    bottom: var( --comp-scu-nav-item-v-default-label-bottom , 11px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-nav-item-v-default-label'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-nav-item-v-default-label--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-nav-item-v-default-label-left , 32px );\n  margin-right: var( --comp-scu-nav-item-v-default-label-right , 5px );\n  margin-top: var( --comp-scu-nav-item-v-default-label-top , 11px );\n  margin-bottom: var( --comp-scu-nav-item-v-default-label-bottom , 11px );\n  width: calc( 100% - ( var( --comp-scu-nav-item-v-default-label-left , 32px ) + var( --comp-scu-nav-item-v-default-label-right , 5px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-default-label { \n    display: inline-block;\n  margin-left: var( --comp-scu-nav-item-v-default-label-left , 32px );\n  margin-right: var( --comp-scu-nav-item-v-default-label-right , 5px );\n  margin-top: var( --comp-scu-nav-item-v-default-label-top , 11px );\n  margin-bottom: var( --comp-scu-nav-item-v-default-label-bottom , 11px );\n  width: calc( 100% - ( var( --comp-scu-nav-item-v-default-label-left , 32px ) + var( --comp-scu-nav-item-v-default-label-right , 5px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-default-label'>content</div>"
    }
  },
  "components-scu-nav-item-v-default-line-top-": {
    "box": {
      "output": "\n@mixin comp-scu-nav-item-v-default-line-top { \n  position: relative;\n  background-color: var( --comp-scu-nav-item-v-default-line-top-background-color , rgba(235,235,235,1) ); \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-default-line-top { \n    position: relative;\n    background-color: var( --comp-scu-nav-item-v-default-line-top-background-color , rgba(235,235,235,1) ); \n  }\n</style>\n<div id='comp-scu-nav-item-v-default-line-top'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-nav-item-v-default-line-top--sizing {\n  width: 246px;\n  height: 1px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-default-line-top { \n    width: 246px;\n    height: 1px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-default-line-top'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-nav-item-v-default-line-top--width {\n  width: 246px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-default-line-top { \n    width: 246px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-default-line-top'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-nav-item-v-default-line-top--height {\n  height: 1px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-default-line-top { \n    height: 1px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-default-line-top'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-nav-item-v-default-line-top--figma-autolayout { \n   \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-default-line-top { \n     \n  }\n</style>\n<div id='comp-scu-nav-item-v-default-line-top'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-nav-item-v-default-line-top--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-nav-item-v-default-line-top-left , 0px );\n  right: var( --comp-scu-nav-item-v-default-line-top-right , 0px );\n  top: var( --comp-scu-nav-item-v-default-line-top-top , 0px );\n  height: var( --comp-scu-nav-item-v-default-line-top-height , 1px ); \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-default-line-top { \n    position: absolute;\n    left: var( --comp-scu-nav-item-v-default-line-top-left , 0px );\n    right: var( --comp-scu-nav-item-v-default-line-top-right , 0px );\n    top: var( --comp-scu-nav-item-v-default-line-top-top , 0px );\n    height: var( --comp-scu-nav-item-v-default-line-top-height , 1px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-nav-item-v-default-line-top'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-nav-item-v-default-line-top--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-nav-item-v-default-line-top-left , 0px );\n  margin-right: var( --comp-scu-nav-item-v-default-line-top-right , 0px );\n  margin-top: var( --comp-scu-nav-item-v-default-line-top-top , 0px );\n  margin-bottom: var( --comp-scu-nav-item-v-default-line-top-bottom , 39px );\n  width: calc( 100% - ( var( --comp-scu-nav-item-v-default-line-top-left , 0px ) + var( --comp-scu-nav-item-v-default-line-top-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-default-line-top { \n    display: inline-block;\n  margin-left: var( --comp-scu-nav-item-v-default-line-top-left , 0px );\n  margin-right: var( --comp-scu-nav-item-v-default-line-top-right , 0px );\n  margin-top: var( --comp-scu-nav-item-v-default-line-top-top , 0px );\n  margin-bottom: var( --comp-scu-nav-item-v-default-line-top-bottom , 39px );\n  width: calc( 100% - ( var( --comp-scu-nav-item-v-default-line-top-left , 0px ) + var( --comp-scu-nav-item-v-default-line-top-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-default-line-top'>content</div>"
    }
  },
  "components-scu-nav-item-v-default-line-bottom-": {
    "box": {
      "output": "\n@mixin comp-scu-nav-item-v-default-line-bottom { \n  position: relative;\n  background-color: var( --comp-scu-nav-item-v-default-line-bottom-background-color , rgba(235,235,235,1) ); \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-default-line-bottom { \n    position: relative;\n    background-color: var( --comp-scu-nav-item-v-default-line-bottom-background-color , rgba(235,235,235,1) ); \n  }\n</style>\n<div id='comp-scu-nav-item-v-default-line-bottom'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-nav-item-v-default-line-bottom--sizing {\n  width: 246px;\n  height: 1px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-default-line-bottom { \n    width: 246px;\n    height: 1px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-default-line-bottom'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-nav-item-v-default-line-bottom--width {\n  width: 246px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-default-line-bottom { \n    width: 246px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-default-line-bottom'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-nav-item-v-default-line-bottom--height {\n  height: 1px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-default-line-bottom { \n    height: 1px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-default-line-bottom'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-nav-item-v-default-line-bottom--figma-autolayout { \n   \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-default-line-bottom { \n     \n  }\n</style>\n<div id='comp-scu-nav-item-v-default-line-bottom'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-nav-item-v-default-line-bottom--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-nav-item-v-default-line-bottom-left , 0px );\n  right: var( --comp-scu-nav-item-v-default-line-bottom-right , 0px );\n  bottom: var( --comp-scu-nav-item-v-default-line-bottom-bottom , 0px );\n  height: var( --comp-scu-nav-item-v-default-line-bottom-height , 1px ); \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-default-line-bottom { \n    position: absolute;\n    left: var( --comp-scu-nav-item-v-default-line-bottom-left , 0px );\n    right: var( --comp-scu-nav-item-v-default-line-bottom-right , 0px );\n    bottom: var( --comp-scu-nav-item-v-default-line-bottom-bottom , 0px );\n    height: var( --comp-scu-nav-item-v-default-line-bottom-height , 1px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-nav-item-v-default-line-bottom'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-nav-item-v-default-line-bottom--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-nav-item-v-default-line-bottom-left , 0px );\n  margin-right: var( --comp-scu-nav-item-v-default-line-bottom-right , 0px );\n  margin-top: var( --comp-scu-nav-item-v-default-line-bottom-top , 39px );\n  margin-bottom: var( --comp-scu-nav-item-v-default-line-bottom-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-nav-item-v-default-line-bottom-left , 0px ) + var( --comp-scu-nav-item-v-default-line-bottom-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-default-line-bottom { \n    display: inline-block;\n  margin-left: var( --comp-scu-nav-item-v-default-line-bottom-left , 0px );\n  margin-right: var( --comp-scu-nav-item-v-default-line-bottom-right , 0px );\n  margin-top: var( --comp-scu-nav-item-v-default-line-bottom-top , 39px );\n  margin-bottom: var( --comp-scu-nav-item-v-default-line-bottom-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-nav-item-v-default-line-bottom-left , 0px ) + var( --comp-scu-nav-item-v-default-line-bottom-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-default-line-bottom'>content</div>"
    }
  },
  "components-scu-nav-item-v-default-selected-": {
    "box": {
      "output": "\n@mixin comp-scu-nav-item-v-default-selected { \n  position: relative; \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-default-selected { \n    position: relative; \n  }\n</style>\n<div id='comp-scu-nav-item-v-default-selected'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-nav-item-v-default-selected--sizing {\n  width: 3px;\n  height: 40px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-default-selected { \n    width: 3px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-default-selected'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-nav-item-v-default-selected--width {\n  width: 3px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-default-selected { \n    width: 3px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-default-selected'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-nav-item-v-default-selected--height {\n  height: 40px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-default-selected { \n    height: 40px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-default-selected'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-nav-item-v-default-selected--figma-autolayout { \n   \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-default-selected { \n     \n  }\n</style>\n<div id='comp-scu-nav-item-v-default-selected'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-nav-item-v-default-selected--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-nav-item-v-default-selected-left , 0px );\n  width: var( --comp-scu-nav-item-v-default-selected-width , 3px );\n  top: var( --comp-scu-nav-item-v-default-selected-top , 0px );\n  bottom: var( --comp-scu-nav-item-v-default-selected-bottom , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-default-selected { \n    position: absolute;\n    left: var( --comp-scu-nav-item-v-default-selected-left , 0px );\n    width: var( --comp-scu-nav-item-v-default-selected-width , 3px );\n    top: var( --comp-scu-nav-item-v-default-selected-top , 0px );\n    bottom: var( --comp-scu-nav-item-v-default-selected-bottom , 0px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-nav-item-v-default-selected'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-nav-item-v-default-selected--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-nav-item-v-default-selected-left , 0px );\n  margin-right: var( --comp-scu-nav-item-v-default-selected-right , 243px );\n  margin-top: var( --comp-scu-nav-item-v-default-selected-top , 0px );\n  margin-bottom: var( --comp-scu-nav-item-v-default-selected-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-nav-item-v-default-selected-left , 0px ) + var( --comp-scu-nav-item-v-default-selected-right , 243px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-default-selected { \n    display: inline-block;\n  margin-left: var( --comp-scu-nav-item-v-default-selected-left , 0px );\n  margin-right: var( --comp-scu-nav-item-v-default-selected-right , 243px );\n  margin-top: var( --comp-scu-nav-item-v-default-selected-top , 0px );\n  margin-bottom: var( --comp-scu-nav-item-v-default-selected-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-nav-item-v-default-selected-left , 0px ) + var( --comp-scu-nav-item-v-default-selected-right , 243px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-default-selected'>content</div>"
    }
  },
  "components-scu-nav-item-v-hover-": {
    "box": {
      "output": "\n@mixin comp-scu-nav-item-v-hover { \n  position: relative;\n  background-color: var( --comp-scu-nav-item-v-hover-background-color , rgba(248,248,248,1) ); \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-hover { \n    position: relative;\n    background-color: var( --comp-scu-nav-item-v-hover-background-color , rgba(248,248,248,1) ); \n  }\n</style>\n<div id='comp-scu-nav-item-v-hover'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-nav-item-v-hover--sizing {\n  width: 246px;\n  height: 40px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-hover { \n    width: 246px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-hover'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-nav-item-v-hover--width {\n  width: 246px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-hover { \n    width: 246px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-hover'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-nav-item-v-hover--height {\n  height: 40px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-hover { \n    height: 40px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-hover'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-nav-item-v-hover--figma-autolayout { \n   \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-hover { \n     \n  }\n</style>\n<div id='comp-scu-nav-item-v-hover'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-nav-item-v-hover--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-nav-item-v-hover-left , 0px );\n  right: var( --comp-scu-nav-item-v-hover-right , 0px );\n  top: var( --comp-scu-nav-item-v-hover-top , 0px );\n  bottom: var( --comp-scu-nav-item-v-hover-bottom , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-hover { \n    position: absolute;\n    left: var( --comp-scu-nav-item-v-hover-left , 0px );\n    right: var( --comp-scu-nav-item-v-hover-right , 0px );\n    top: var( --comp-scu-nav-item-v-hover-top , 0px );\n    bottom: var( --comp-scu-nav-item-v-hover-bottom , 0px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-nav-item-v-hover'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-nav-item-v-hover--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-nav-item-v-hover-left , 0px );\n  margin-right: var( --comp-scu-nav-item-v-hover-right , 0px );\n  margin-top: var( --comp-scu-nav-item-v-hover-top , 0px );\n  margin-bottom: var( --comp-scu-nav-item-v-hover-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-nav-item-v-hover-left , 0px ) + var( --comp-scu-nav-item-v-hover-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-hover { \n    display: inline-block;\n  margin-left: var( --comp-scu-nav-item-v-hover-left , 0px );\n  margin-right: var( --comp-scu-nav-item-v-hover-right , 0px );\n  margin-top: var( --comp-scu-nav-item-v-hover-top , 0px );\n  margin-bottom: var( --comp-scu-nav-item-v-hover-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-nav-item-v-hover-left , 0px ) + var( --comp-scu-nav-item-v-hover-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-hover'>content</div>"
    }
  },
  "components-scu-nav-item-v-hover-label-": {
    "": {
      "output": "\n@mixin comp-scu-nav-item-v-hover-label { \n  position: relative;\n  font-size: var( --comp-scu-nav-item-v-hover-label-font-size , 15px );\n  text-align: var( --comp-scu-nav-item-v-hover-label-text-align-horizontal , LEFT );\n  color: var( --comp-scu-nav-item-v-hover-label-color , rgba(54,54,54,1) );\n  font-family: var( --comp-scu-nav-item-v-hover-label-font-family , 'Proxima Nova' );\n  font-weight: var( --comp-scu-nav-item-v-hover-label-font-weight , 400 );\n  line-height: var( --comp-scu-nav-item-v-hover-label-line-height , 17.58px );\n  letter-spacing: var( --comp-scu-nav-item-v-hover-label-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-hover-label { \n    position: relative;\n    font-size: var( --comp-scu-nav-item-v-hover-label-font-size , 15px );\n    text-align: var( --comp-scu-nav-item-v-hover-label-text-align-horizontal , LEFT );\n    color: var( --comp-scu-nav-item-v-hover-label-color , rgba(54,54,54,1) );\n    font-family: var( --comp-scu-nav-item-v-hover-label-font-family , 'Proxima Nova' );\n    font-weight: var( --comp-scu-nav-item-v-hover-label-font-weight , 400 );\n    line-height: var( --comp-scu-nav-item-v-hover-label-line-height , 17.58px );\n    letter-spacing: var( --comp-scu-nav-item-v-hover-label-letter-spacing , 0px ); \n  }\n</style>\n<div id='comp-scu-nav-item-v-hover-label'></div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-nav-item-v-hover-label--sizing {\n  width: 209px;\n  height: 18px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-hover-label { \n    width: 209px;\n    height: 18px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-hover-label'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-nav-item-v-hover-label--width {\n  width: 209px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-hover-label { \n    width: 209px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-hover-label'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-nav-item-v-hover-label--height {\n  height: 18px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-hover-label { \n    height: 18px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-hover-label'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-nav-item-v-hover-label--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-nav-item-v-hover-label-left , 32px );\n  right: var( --comp-scu-nav-item-v-hover-label-right , 5px );\n  top: var( --comp-scu-nav-item-v-hover-label-top , 11px );\n  bottom: var( --comp-scu-nav-item-v-hover-label-bottom , 11px ); \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-hover-label { \n    position: absolute;\n    left: var( --comp-scu-nav-item-v-hover-label-left , 32px );\n    right: var( --comp-scu-nav-item-v-hover-label-right , 5px );\n    top: var( --comp-scu-nav-item-v-hover-label-top , 11px );\n    bottom: var( --comp-scu-nav-item-v-hover-label-bottom , 11px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-nav-item-v-hover-label'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-nav-item-v-hover-label--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-nav-item-v-hover-label-left , 32px );\n  margin-right: var( --comp-scu-nav-item-v-hover-label-right , 5px );\n  margin-top: var( --comp-scu-nav-item-v-hover-label-top , 11px );\n  margin-bottom: var( --comp-scu-nav-item-v-hover-label-bottom , 11px );\n  width: calc( 100% - ( var( --comp-scu-nav-item-v-hover-label-left , 32px ) + var( --comp-scu-nav-item-v-hover-label-right , 5px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-hover-label { \n    display: inline-block;\n  margin-left: var( --comp-scu-nav-item-v-hover-label-left , 32px );\n  margin-right: var( --comp-scu-nav-item-v-hover-label-right , 5px );\n  margin-top: var( --comp-scu-nav-item-v-hover-label-top , 11px );\n  margin-bottom: var( --comp-scu-nav-item-v-hover-label-bottom , 11px );\n  width: calc( 100% - ( var( --comp-scu-nav-item-v-hover-label-left , 32px ) + var( --comp-scu-nav-item-v-hover-label-right , 5px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-hover-label'>content</div>"
    }
  },
  "components-scu-nav-item-v-hover-line-top-": {
    "box": {
      "output": "\n@mixin comp-scu-nav-item-v-hover-line-top { \n  position: relative;\n  background-color: var( --comp-scu-nav-item-v-hover-line-top-background-color , rgba(235,235,235,1) ); \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-hover-line-top { \n    position: relative;\n    background-color: var( --comp-scu-nav-item-v-hover-line-top-background-color , rgba(235,235,235,1) ); \n  }\n</style>\n<div id='comp-scu-nav-item-v-hover-line-top'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-nav-item-v-hover-line-top--sizing {\n  width: 246px;\n  height: 1px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-hover-line-top { \n    width: 246px;\n    height: 1px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-hover-line-top'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-nav-item-v-hover-line-top--width {\n  width: 246px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-hover-line-top { \n    width: 246px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-hover-line-top'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-nav-item-v-hover-line-top--height {\n  height: 1px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-hover-line-top { \n    height: 1px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-hover-line-top'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-nav-item-v-hover-line-top--figma-autolayout { \n   \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-hover-line-top { \n     \n  }\n</style>\n<div id='comp-scu-nav-item-v-hover-line-top'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-nav-item-v-hover-line-top--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-nav-item-v-hover-line-top-left , 0px );\n  right: var( --comp-scu-nav-item-v-hover-line-top-right , 0px );\n  top: var( --comp-scu-nav-item-v-hover-line-top-top , 0px );\n  height: var( --comp-scu-nav-item-v-hover-line-top-height , 1px ); \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-hover-line-top { \n    position: absolute;\n    left: var( --comp-scu-nav-item-v-hover-line-top-left , 0px );\n    right: var( --comp-scu-nav-item-v-hover-line-top-right , 0px );\n    top: var( --comp-scu-nav-item-v-hover-line-top-top , 0px );\n    height: var( --comp-scu-nav-item-v-hover-line-top-height , 1px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-nav-item-v-hover-line-top'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-nav-item-v-hover-line-top--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-nav-item-v-hover-line-top-left , 0px );\n  margin-right: var( --comp-scu-nav-item-v-hover-line-top-right , 0px );\n  margin-top: var( --comp-scu-nav-item-v-hover-line-top-top , 0px );\n  margin-bottom: var( --comp-scu-nav-item-v-hover-line-top-bottom , 39px );\n  width: calc( 100% - ( var( --comp-scu-nav-item-v-hover-line-top-left , 0px ) + var( --comp-scu-nav-item-v-hover-line-top-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-hover-line-top { \n    display: inline-block;\n  margin-left: var( --comp-scu-nav-item-v-hover-line-top-left , 0px );\n  margin-right: var( --comp-scu-nav-item-v-hover-line-top-right , 0px );\n  margin-top: var( --comp-scu-nav-item-v-hover-line-top-top , 0px );\n  margin-bottom: var( --comp-scu-nav-item-v-hover-line-top-bottom , 39px );\n  width: calc( 100% - ( var( --comp-scu-nav-item-v-hover-line-top-left , 0px ) + var( --comp-scu-nav-item-v-hover-line-top-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-hover-line-top'>content</div>"
    }
  },
  "components-scu-nav-item-v-hover-line-bottom-": {
    "box": {
      "output": "\n@mixin comp-scu-nav-item-v-hover-line-bottom { \n  position: relative;\n  background-color: var( --comp-scu-nav-item-v-hover-line-bottom-background-color , rgba(235,235,235,1) ); \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-hover-line-bottom { \n    position: relative;\n    background-color: var( --comp-scu-nav-item-v-hover-line-bottom-background-color , rgba(235,235,235,1) ); \n  }\n</style>\n<div id='comp-scu-nav-item-v-hover-line-bottom'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-nav-item-v-hover-line-bottom--sizing {\n  width: 246px;\n  height: 1px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-hover-line-bottom { \n    width: 246px;\n    height: 1px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-hover-line-bottom'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-nav-item-v-hover-line-bottom--width {\n  width: 246px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-hover-line-bottom { \n    width: 246px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-hover-line-bottom'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-nav-item-v-hover-line-bottom--height {\n  height: 1px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-hover-line-bottom { \n    height: 1px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-hover-line-bottom'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-nav-item-v-hover-line-bottom--figma-autolayout { \n   \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-hover-line-bottom { \n     \n  }\n</style>\n<div id='comp-scu-nav-item-v-hover-line-bottom'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-nav-item-v-hover-line-bottom--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-nav-item-v-hover-line-bottom-left , 0px );\n  right: var( --comp-scu-nav-item-v-hover-line-bottom-right , 0px );\n  bottom: var( --comp-scu-nav-item-v-hover-line-bottom-bottom , 0px );\n  height: var( --comp-scu-nav-item-v-hover-line-bottom-height , 1px ); \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-hover-line-bottom { \n    position: absolute;\n    left: var( --comp-scu-nav-item-v-hover-line-bottom-left , 0px );\n    right: var( --comp-scu-nav-item-v-hover-line-bottom-right , 0px );\n    bottom: var( --comp-scu-nav-item-v-hover-line-bottom-bottom , 0px );\n    height: var( --comp-scu-nav-item-v-hover-line-bottom-height , 1px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-nav-item-v-hover-line-bottom'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-nav-item-v-hover-line-bottom--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-nav-item-v-hover-line-bottom-left , 0px );\n  margin-right: var( --comp-scu-nav-item-v-hover-line-bottom-right , 0px );\n  margin-top: var( --comp-scu-nav-item-v-hover-line-bottom-top , 39px );\n  margin-bottom: var( --comp-scu-nav-item-v-hover-line-bottom-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-nav-item-v-hover-line-bottom-left , 0px ) + var( --comp-scu-nav-item-v-hover-line-bottom-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-hover-line-bottom { \n    display: inline-block;\n  margin-left: var( --comp-scu-nav-item-v-hover-line-bottom-left , 0px );\n  margin-right: var( --comp-scu-nav-item-v-hover-line-bottom-right , 0px );\n  margin-top: var( --comp-scu-nav-item-v-hover-line-bottom-top , 39px );\n  margin-bottom: var( --comp-scu-nav-item-v-hover-line-bottom-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-nav-item-v-hover-line-bottom-left , 0px ) + var( --comp-scu-nav-item-v-hover-line-bottom-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-hover-line-bottom'>content</div>"
    }
  },
  "components-scu-nav-item-v-hover-selected-": {
    "box": {
      "output": "\n@mixin comp-scu-nav-item-v-hover-selected { \n  position: relative; \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-hover-selected { \n    position: relative; \n  }\n</style>\n<div id='comp-scu-nav-item-v-hover-selected'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-nav-item-v-hover-selected--sizing {\n  width: 3px;\n  height: 40px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-hover-selected { \n    width: 3px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-hover-selected'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-nav-item-v-hover-selected--width {\n  width: 3px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-hover-selected { \n    width: 3px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-hover-selected'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-nav-item-v-hover-selected--height {\n  height: 40px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-hover-selected { \n    height: 40px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-hover-selected'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-nav-item-v-hover-selected--figma-autolayout { \n   \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-hover-selected { \n     \n  }\n</style>\n<div id='comp-scu-nav-item-v-hover-selected'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-nav-item-v-hover-selected--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-nav-item-v-hover-selected-left , 0px );\n  width: var( --comp-scu-nav-item-v-hover-selected-width , 3px );\n  top: var( --comp-scu-nav-item-v-hover-selected-top , 0px );\n  bottom: var( --comp-scu-nav-item-v-hover-selected-bottom , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-hover-selected { \n    position: absolute;\n    left: var( --comp-scu-nav-item-v-hover-selected-left , 0px );\n    width: var( --comp-scu-nav-item-v-hover-selected-width , 3px );\n    top: var( --comp-scu-nav-item-v-hover-selected-top , 0px );\n    bottom: var( --comp-scu-nav-item-v-hover-selected-bottom , 0px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-nav-item-v-hover-selected'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-nav-item-v-hover-selected--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-nav-item-v-hover-selected-left , 0px );\n  margin-right: var( --comp-scu-nav-item-v-hover-selected-right , 243px );\n  margin-top: var( --comp-scu-nav-item-v-hover-selected-top , 0px );\n  margin-bottom: var( --comp-scu-nav-item-v-hover-selected-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-nav-item-v-hover-selected-left , 0px ) + var( --comp-scu-nav-item-v-hover-selected-right , 243px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-hover-selected { \n    display: inline-block;\n  margin-left: var( --comp-scu-nav-item-v-hover-selected-left , 0px );\n  margin-right: var( --comp-scu-nav-item-v-hover-selected-right , 243px );\n  margin-top: var( --comp-scu-nav-item-v-hover-selected-top , 0px );\n  margin-bottom: var( --comp-scu-nav-item-v-hover-selected-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-nav-item-v-hover-selected-left , 0px ) + var( --comp-scu-nav-item-v-hover-selected-right , 243px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-hover-selected'>content</div>"
    }
  },
  "components-scu-nav-item-v-focused-": {
    "box": {
      "output": "\n@mixin comp-scu-nav-item-v-focused { \n  position: relative;\n  background-color: var( --comp-scu-nav-item-v-focused-background-color , rgba(255,255,255,1) );\n  border-radius: var( --comp-scu-nav-item-v-focused-corner-radius , 2px );\n  box-shadow: var( --comp-scu-nav-item-v-focused-shadow , 0px 0px 0px 2px rgba(53,155,249,1) ); \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-focused { \n    position: relative;\n    background-color: var( --comp-scu-nav-item-v-focused-background-color , rgba(255,255,255,1) );\n    border-radius: var( --comp-scu-nav-item-v-focused-corner-radius , 2px );\n    box-shadow: var( --comp-scu-nav-item-v-focused-shadow , 0px 0px 0px 2px rgba(53,155,249,1) ); \n  }\n</style>\n<div id='comp-scu-nav-item-v-focused'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-nav-item-v-focused--sizing {\n  width: 246px;\n  height: 40px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-focused { \n    width: 246px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-focused'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-nav-item-v-focused--width {\n  width: 246px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-focused { \n    width: 246px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-focused'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-nav-item-v-focused--height {\n  height: 40px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-focused { \n    height: 40px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-focused'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-nav-item-v-focused--figma-autolayout { \n   \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-focused { \n     \n  }\n</style>\n<div id='comp-scu-nav-item-v-focused'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-nav-item-v-focused--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-nav-item-v-focused-left , 0px );\n  right: var( --comp-scu-nav-item-v-focused-right , 0px );\n  top: var( --comp-scu-nav-item-v-focused-top , 0px );\n  bottom: var( --comp-scu-nav-item-v-focused-bottom , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-focused { \n    position: absolute;\n    left: var( --comp-scu-nav-item-v-focused-left , 0px );\n    right: var( --comp-scu-nav-item-v-focused-right , 0px );\n    top: var( --comp-scu-nav-item-v-focused-top , 0px );\n    bottom: var( --comp-scu-nav-item-v-focused-bottom , 0px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-nav-item-v-focused'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-nav-item-v-focused--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-nav-item-v-focused-left , 0px );\n  margin-right: var( --comp-scu-nav-item-v-focused-right , 0px );\n  margin-top: var( --comp-scu-nav-item-v-focused-top , 0px );\n  margin-bottom: var( --comp-scu-nav-item-v-focused-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-nav-item-v-focused-left , 0px ) + var( --comp-scu-nav-item-v-focused-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-focused { \n    display: inline-block;\n  margin-left: var( --comp-scu-nav-item-v-focused-left , 0px );\n  margin-right: var( --comp-scu-nav-item-v-focused-right , 0px );\n  margin-top: var( --comp-scu-nav-item-v-focused-top , 0px );\n  margin-bottom: var( --comp-scu-nav-item-v-focused-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-nav-item-v-focused-left , 0px ) + var( --comp-scu-nav-item-v-focused-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-focused'>content</div>"
    }
  },
  "components-scu-nav-item-v-focused-label-": {
    "": {
      "output": "\n@mixin comp-scu-nav-item-v-focused-label { \n  position: relative;\n  font-size: var( --comp-scu-nav-item-v-focused-label-font-size , 15px );\n  text-align: var( --comp-scu-nav-item-v-focused-label-text-align-horizontal , LEFT );\n  color: var( --comp-scu-nav-item-v-focused-label-color , rgba(54,54,54,1) );\n  font-family: var( --comp-scu-nav-item-v-focused-label-font-family , 'Proxima Nova' );\n  font-weight: var( --comp-scu-nav-item-v-focused-label-font-weight , 400 );\n  line-height: var( --comp-scu-nav-item-v-focused-label-line-height , 17.58px );\n  letter-spacing: var( --comp-scu-nav-item-v-focused-label-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-focused-label { \n    position: relative;\n    font-size: var( --comp-scu-nav-item-v-focused-label-font-size , 15px );\n    text-align: var( --comp-scu-nav-item-v-focused-label-text-align-horizontal , LEFT );\n    color: var( --comp-scu-nav-item-v-focused-label-color , rgba(54,54,54,1) );\n    font-family: var( --comp-scu-nav-item-v-focused-label-font-family , 'Proxima Nova' );\n    font-weight: var( --comp-scu-nav-item-v-focused-label-font-weight , 400 );\n    line-height: var( --comp-scu-nav-item-v-focused-label-line-height , 17.58px );\n    letter-spacing: var( --comp-scu-nav-item-v-focused-label-letter-spacing , 0px ); \n  }\n</style>\n<div id='comp-scu-nav-item-v-focused-label'></div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-nav-item-v-focused-label--sizing {\n  width: 209px;\n  height: 18px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-focused-label { \n    width: 209px;\n    height: 18px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-focused-label'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-nav-item-v-focused-label--width {\n  width: 209px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-focused-label { \n    width: 209px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-focused-label'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-nav-item-v-focused-label--height {\n  height: 18px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-focused-label { \n    height: 18px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-focused-label'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-nav-item-v-focused-label--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-nav-item-v-focused-label-left , 32px );\n  right: var( --comp-scu-nav-item-v-focused-label-right , 5px );\n  top: var( --comp-scu-nav-item-v-focused-label-top , 11px );\n  bottom: var( --comp-scu-nav-item-v-focused-label-bottom , 11px ); \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-focused-label { \n    position: absolute;\n    left: var( --comp-scu-nav-item-v-focused-label-left , 32px );\n    right: var( --comp-scu-nav-item-v-focused-label-right , 5px );\n    top: var( --comp-scu-nav-item-v-focused-label-top , 11px );\n    bottom: var( --comp-scu-nav-item-v-focused-label-bottom , 11px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-nav-item-v-focused-label'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-nav-item-v-focused-label--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-nav-item-v-focused-label-left , 32px );\n  margin-right: var( --comp-scu-nav-item-v-focused-label-right , 5px );\n  margin-top: var( --comp-scu-nav-item-v-focused-label-top , 11px );\n  margin-bottom: var( --comp-scu-nav-item-v-focused-label-bottom , 11px );\n  width: calc( 100% - ( var( --comp-scu-nav-item-v-focused-label-left , 32px ) + var( --comp-scu-nav-item-v-focused-label-right , 5px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-focused-label { \n    display: inline-block;\n  margin-left: var( --comp-scu-nav-item-v-focused-label-left , 32px );\n  margin-right: var( --comp-scu-nav-item-v-focused-label-right , 5px );\n  margin-top: var( --comp-scu-nav-item-v-focused-label-top , 11px );\n  margin-bottom: var( --comp-scu-nav-item-v-focused-label-bottom , 11px );\n  width: calc( 100% - ( var( --comp-scu-nav-item-v-focused-label-left , 32px ) + var( --comp-scu-nav-item-v-focused-label-right , 5px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-focused-label'>content</div>"
    }
  },
  "components-scu-nav-item-v-focused-line-top-": {
    "box": {
      "output": "\n@mixin comp-scu-nav-item-v-focused-line-top { \n  position: relative;\n  background-color: var( --comp-scu-nav-item-v-focused-line-top-background-color , rgba(235,235,235,1) ); \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-focused-line-top { \n    position: relative;\n    background-color: var( --comp-scu-nav-item-v-focused-line-top-background-color , rgba(235,235,235,1) ); \n  }\n</style>\n<div id='comp-scu-nav-item-v-focused-line-top'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-nav-item-v-focused-line-top--sizing {\n  width: 246px;\n  height: 1px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-focused-line-top { \n    width: 246px;\n    height: 1px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-focused-line-top'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-nav-item-v-focused-line-top--width {\n  width: 246px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-focused-line-top { \n    width: 246px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-focused-line-top'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-nav-item-v-focused-line-top--height {\n  height: 1px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-focused-line-top { \n    height: 1px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-focused-line-top'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-nav-item-v-focused-line-top--figma-autolayout { \n   \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-focused-line-top { \n     \n  }\n</style>\n<div id='comp-scu-nav-item-v-focused-line-top'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-nav-item-v-focused-line-top--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-nav-item-v-focused-line-top-left , 0px );\n  right: var( --comp-scu-nav-item-v-focused-line-top-right , 0px );\n  top: var( --comp-scu-nav-item-v-focused-line-top-top , 0px );\n  height: var( --comp-scu-nav-item-v-focused-line-top-height , 1px ); \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-focused-line-top { \n    position: absolute;\n    left: var( --comp-scu-nav-item-v-focused-line-top-left , 0px );\n    right: var( --comp-scu-nav-item-v-focused-line-top-right , 0px );\n    top: var( --comp-scu-nav-item-v-focused-line-top-top , 0px );\n    height: var( --comp-scu-nav-item-v-focused-line-top-height , 1px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-nav-item-v-focused-line-top'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-nav-item-v-focused-line-top--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-nav-item-v-focused-line-top-left , 0px );\n  margin-right: var( --comp-scu-nav-item-v-focused-line-top-right , 0px );\n  margin-top: var( --comp-scu-nav-item-v-focused-line-top-top , 0px );\n  margin-bottom: var( --comp-scu-nav-item-v-focused-line-top-bottom , 39px );\n  width: calc( 100% - ( var( --comp-scu-nav-item-v-focused-line-top-left , 0px ) + var( --comp-scu-nav-item-v-focused-line-top-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-focused-line-top { \n    display: inline-block;\n  margin-left: var( --comp-scu-nav-item-v-focused-line-top-left , 0px );\n  margin-right: var( --comp-scu-nav-item-v-focused-line-top-right , 0px );\n  margin-top: var( --comp-scu-nav-item-v-focused-line-top-top , 0px );\n  margin-bottom: var( --comp-scu-nav-item-v-focused-line-top-bottom , 39px );\n  width: calc( 100% - ( var( --comp-scu-nav-item-v-focused-line-top-left , 0px ) + var( --comp-scu-nav-item-v-focused-line-top-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-focused-line-top'>content</div>"
    }
  },
  "components-scu-nav-item-v-focused-line-bottom-": {
    "box": {
      "output": "\n@mixin comp-scu-nav-item-v-focused-line-bottom { \n  position: relative;\n  background-color: var( --comp-scu-nav-item-v-focused-line-bottom-background-color , rgba(235,235,235,1) ); \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-focused-line-bottom { \n    position: relative;\n    background-color: var( --comp-scu-nav-item-v-focused-line-bottom-background-color , rgba(235,235,235,1) ); \n  }\n</style>\n<div id='comp-scu-nav-item-v-focused-line-bottom'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-nav-item-v-focused-line-bottom--sizing {\n  width: 246px;\n  height: 1px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-focused-line-bottom { \n    width: 246px;\n    height: 1px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-focused-line-bottom'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-nav-item-v-focused-line-bottom--width {\n  width: 246px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-focused-line-bottom { \n    width: 246px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-focused-line-bottom'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-nav-item-v-focused-line-bottom--height {\n  height: 1px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-focused-line-bottom { \n    height: 1px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-focused-line-bottom'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-nav-item-v-focused-line-bottom--figma-autolayout { \n   \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-focused-line-bottom { \n     \n  }\n</style>\n<div id='comp-scu-nav-item-v-focused-line-bottom'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-nav-item-v-focused-line-bottom--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-nav-item-v-focused-line-bottom-left , 0px );\n  right: var( --comp-scu-nav-item-v-focused-line-bottom-right , 0px );\n  bottom: var( --comp-scu-nav-item-v-focused-line-bottom-bottom , 0px );\n  height: var( --comp-scu-nav-item-v-focused-line-bottom-height , 1px ); \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-focused-line-bottom { \n    position: absolute;\n    left: var( --comp-scu-nav-item-v-focused-line-bottom-left , 0px );\n    right: var( --comp-scu-nav-item-v-focused-line-bottom-right , 0px );\n    bottom: var( --comp-scu-nav-item-v-focused-line-bottom-bottom , 0px );\n    height: var( --comp-scu-nav-item-v-focused-line-bottom-height , 1px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-nav-item-v-focused-line-bottom'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-nav-item-v-focused-line-bottom--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-nav-item-v-focused-line-bottom-left , 0px );\n  margin-right: var( --comp-scu-nav-item-v-focused-line-bottom-right , 0px );\n  margin-top: var( --comp-scu-nav-item-v-focused-line-bottom-top , 39px );\n  margin-bottom: var( --comp-scu-nav-item-v-focused-line-bottom-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-nav-item-v-focused-line-bottom-left , 0px ) + var( --comp-scu-nav-item-v-focused-line-bottom-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-focused-line-bottom { \n    display: inline-block;\n  margin-left: var( --comp-scu-nav-item-v-focused-line-bottom-left , 0px );\n  margin-right: var( --comp-scu-nav-item-v-focused-line-bottom-right , 0px );\n  margin-top: var( --comp-scu-nav-item-v-focused-line-bottom-top , 39px );\n  margin-bottom: var( --comp-scu-nav-item-v-focused-line-bottom-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-nav-item-v-focused-line-bottom-left , 0px ) + var( --comp-scu-nav-item-v-focused-line-bottom-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-focused-line-bottom'>content</div>"
    }
  },
  "components-scu-nav-item-v-focused-selected-": {
    "box": {
      "output": "\n@mixin comp-scu-nav-item-v-focused-selected { \n  position: relative; \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-focused-selected { \n    position: relative; \n  }\n</style>\n<div id='comp-scu-nav-item-v-focused-selected'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-nav-item-v-focused-selected--sizing {\n  width: 3px;\n  height: 40px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-focused-selected { \n    width: 3px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-focused-selected'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-nav-item-v-focused-selected--width {\n  width: 3px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-focused-selected { \n    width: 3px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-focused-selected'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-nav-item-v-focused-selected--height {\n  height: 40px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-focused-selected { \n    height: 40px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-focused-selected'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-nav-item-v-focused-selected--figma-autolayout { \n   \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-focused-selected { \n     \n  }\n</style>\n<div id='comp-scu-nav-item-v-focused-selected'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-nav-item-v-focused-selected--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-nav-item-v-focused-selected-left , 0px );\n  width: var( --comp-scu-nav-item-v-focused-selected-width , 3px );\n  top: var( --comp-scu-nav-item-v-focused-selected-top , 0px );\n  bottom: var( --comp-scu-nav-item-v-focused-selected-bottom , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-focused-selected { \n    position: absolute;\n    left: var( --comp-scu-nav-item-v-focused-selected-left , 0px );\n    width: var( --comp-scu-nav-item-v-focused-selected-width , 3px );\n    top: var( --comp-scu-nav-item-v-focused-selected-top , 0px );\n    bottom: var( --comp-scu-nav-item-v-focused-selected-bottom , 0px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-nav-item-v-focused-selected'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-nav-item-v-focused-selected--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-nav-item-v-focused-selected-left , 0px );\n  margin-right: var( --comp-scu-nav-item-v-focused-selected-right , 243px );\n  margin-top: var( --comp-scu-nav-item-v-focused-selected-top , 0px );\n  margin-bottom: var( --comp-scu-nav-item-v-focused-selected-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-nav-item-v-focused-selected-left , 0px ) + var( --comp-scu-nav-item-v-focused-selected-right , 243px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-focused-selected { \n    display: inline-block;\n  margin-left: var( --comp-scu-nav-item-v-focused-selected-left , 0px );\n  margin-right: var( --comp-scu-nav-item-v-focused-selected-right , 243px );\n  margin-top: var( --comp-scu-nav-item-v-focused-selected-top , 0px );\n  margin-bottom: var( --comp-scu-nav-item-v-focused-selected-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-nav-item-v-focused-selected-left , 0px ) + var( --comp-scu-nav-item-v-focused-selected-right , 243px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-focused-selected'>content</div>"
    }
  },
  "components-scu-nav-item-v-selected-": {
    "box": {
      "output": "\n@mixin comp-scu-nav-item-v-selected { \n  position: relative; \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-selected { \n    position: relative; \n  }\n</style>\n<div id='comp-scu-nav-item-v-selected'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-nav-item-v-selected--sizing {\n  width: 246px;\n  height: 40px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-selected { \n    width: 246px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-selected'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-nav-item-v-selected--width {\n  width: 246px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-selected { \n    width: 246px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-selected'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-nav-item-v-selected--height {\n  height: 40px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-selected { \n    height: 40px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-selected'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-nav-item-v-selected--figma-autolayout { \n   \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-selected { \n     \n  }\n</style>\n<div id='comp-scu-nav-item-v-selected'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-nav-item-v-selected--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-nav-item-v-selected-left , 0px );\n  right: var( --comp-scu-nav-item-v-selected-right , 0px );\n  top: var( --comp-scu-nav-item-v-selected-top , 0px );\n  bottom: var( --comp-scu-nav-item-v-selected-bottom , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-selected { \n    position: absolute;\n    left: var( --comp-scu-nav-item-v-selected-left , 0px );\n    right: var( --comp-scu-nav-item-v-selected-right , 0px );\n    top: var( --comp-scu-nav-item-v-selected-top , 0px );\n    bottom: var( --comp-scu-nav-item-v-selected-bottom , 0px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-nav-item-v-selected'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-nav-item-v-selected--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-nav-item-v-selected-left , 0px );\n  margin-right: var( --comp-scu-nav-item-v-selected-right , 0px );\n  margin-top: var( --comp-scu-nav-item-v-selected-top , 0px );\n  margin-bottom: var( --comp-scu-nav-item-v-selected-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-nav-item-v-selected-left , 0px ) + var( --comp-scu-nav-item-v-selected-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-selected { \n    display: inline-block;\n  margin-left: var( --comp-scu-nav-item-v-selected-left , 0px );\n  margin-right: var( --comp-scu-nav-item-v-selected-right , 0px );\n  margin-top: var( --comp-scu-nav-item-v-selected-top , 0px );\n  margin-bottom: var( --comp-scu-nav-item-v-selected-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-nav-item-v-selected-left , 0px ) + var( --comp-scu-nav-item-v-selected-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-selected'>content</div>"
    }
  },
  "components-scu-nav-item-v-selected-label-": {
    "": {
      "output": "\n@mixin comp-scu-nav-item-v-selected-label { \n  position: relative;\n  font-size: var( --comp-scu-nav-item-v-selected-label-font-size , 15px );\n  text-align: var( --comp-scu-nav-item-v-selected-label-text-align-horizontal , LEFT );\n  color: var( --comp-scu-nav-item-v-selected-label-color , rgba(64,109,3,1) );\n  font-family: var( --comp-scu-nav-item-v-selected-label-font-family , 'Proxima Nova' );\n  font-weight: var( --comp-scu-nav-item-v-selected-label-font-weight , 400 );\n  line-height: var( --comp-scu-nav-item-v-selected-label-line-height , 17.58px );\n  letter-spacing: var( --comp-scu-nav-item-v-selected-label-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-selected-label { \n    position: relative;\n    font-size: var( --comp-scu-nav-item-v-selected-label-font-size , 15px );\n    text-align: var( --comp-scu-nav-item-v-selected-label-text-align-horizontal , LEFT );\n    color: var( --comp-scu-nav-item-v-selected-label-color , rgba(64,109,3,1) );\n    font-family: var( --comp-scu-nav-item-v-selected-label-font-family , 'Proxima Nova' );\n    font-weight: var( --comp-scu-nav-item-v-selected-label-font-weight , 400 );\n    line-height: var( --comp-scu-nav-item-v-selected-label-line-height , 17.58px );\n    letter-spacing: var( --comp-scu-nav-item-v-selected-label-letter-spacing , 0px ); \n  }\n</style>\n<div id='comp-scu-nav-item-v-selected-label'></div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-nav-item-v-selected-label--sizing {\n  width: 209px;\n  height: 18px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-selected-label { \n    width: 209px;\n    height: 18px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-selected-label'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-nav-item-v-selected-label--width {\n  width: 209px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-selected-label { \n    width: 209px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-selected-label'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-nav-item-v-selected-label--height {\n  height: 18px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-selected-label { \n    height: 18px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-selected-label'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-nav-item-v-selected-label--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-nav-item-v-selected-label-left , 32px );\n  right: var( --comp-scu-nav-item-v-selected-label-right , 5px );\n  top: var( --comp-scu-nav-item-v-selected-label-top , 11px );\n  bottom: var( --comp-scu-nav-item-v-selected-label-bottom , 11px ); \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-selected-label { \n    position: absolute;\n    left: var( --comp-scu-nav-item-v-selected-label-left , 32px );\n    right: var( --comp-scu-nav-item-v-selected-label-right , 5px );\n    top: var( --comp-scu-nav-item-v-selected-label-top , 11px );\n    bottom: var( --comp-scu-nav-item-v-selected-label-bottom , 11px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-nav-item-v-selected-label'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-nav-item-v-selected-label--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-nav-item-v-selected-label-left , 32px );\n  margin-right: var( --comp-scu-nav-item-v-selected-label-right , 5px );\n  margin-top: var( --comp-scu-nav-item-v-selected-label-top , 11px );\n  margin-bottom: var( --comp-scu-nav-item-v-selected-label-bottom , 11px );\n  width: calc( 100% - ( var( --comp-scu-nav-item-v-selected-label-left , 32px ) + var( --comp-scu-nav-item-v-selected-label-right , 5px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-selected-label { \n    display: inline-block;\n  margin-left: var( --comp-scu-nav-item-v-selected-label-left , 32px );\n  margin-right: var( --comp-scu-nav-item-v-selected-label-right , 5px );\n  margin-top: var( --comp-scu-nav-item-v-selected-label-top , 11px );\n  margin-bottom: var( --comp-scu-nav-item-v-selected-label-bottom , 11px );\n  width: calc( 100% - ( var( --comp-scu-nav-item-v-selected-label-left , 32px ) + var( --comp-scu-nav-item-v-selected-label-right , 5px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-selected-label'>content</div>"
    }
  },
  "components-scu-nav-item-v-selected-line-top-": {
    "box": {
      "output": "\n@mixin comp-scu-nav-item-v-selected-line-top { \n  position: relative;\n  background-color: var( --comp-scu-nav-item-v-selected-line-top-background-color , rgba(235,235,235,1) ); \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-selected-line-top { \n    position: relative;\n    background-color: var( --comp-scu-nav-item-v-selected-line-top-background-color , rgba(235,235,235,1) ); \n  }\n</style>\n<div id='comp-scu-nav-item-v-selected-line-top'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-nav-item-v-selected-line-top--sizing {\n  width: 246px;\n  height: 1px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-selected-line-top { \n    width: 246px;\n    height: 1px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-selected-line-top'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-nav-item-v-selected-line-top--width {\n  width: 246px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-selected-line-top { \n    width: 246px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-selected-line-top'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-nav-item-v-selected-line-top--height {\n  height: 1px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-selected-line-top { \n    height: 1px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-selected-line-top'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-nav-item-v-selected-line-top--figma-autolayout { \n   \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-selected-line-top { \n     \n  }\n</style>\n<div id='comp-scu-nav-item-v-selected-line-top'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-nav-item-v-selected-line-top--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-nav-item-v-selected-line-top-left , 0px );\n  right: var( --comp-scu-nav-item-v-selected-line-top-right , 0px );\n  top: var( --comp-scu-nav-item-v-selected-line-top-top , 0px );\n  height: var( --comp-scu-nav-item-v-selected-line-top-height , 1px ); \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-selected-line-top { \n    position: absolute;\n    left: var( --comp-scu-nav-item-v-selected-line-top-left , 0px );\n    right: var( --comp-scu-nav-item-v-selected-line-top-right , 0px );\n    top: var( --comp-scu-nav-item-v-selected-line-top-top , 0px );\n    height: var( --comp-scu-nav-item-v-selected-line-top-height , 1px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-nav-item-v-selected-line-top'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-nav-item-v-selected-line-top--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-nav-item-v-selected-line-top-left , 0px );\n  margin-right: var( --comp-scu-nav-item-v-selected-line-top-right , 0px );\n  margin-top: var( --comp-scu-nav-item-v-selected-line-top-top , 0px );\n  margin-bottom: var( --comp-scu-nav-item-v-selected-line-top-bottom , 39px );\n  width: calc( 100% - ( var( --comp-scu-nav-item-v-selected-line-top-left , 0px ) + var( --comp-scu-nav-item-v-selected-line-top-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-selected-line-top { \n    display: inline-block;\n  margin-left: var( --comp-scu-nav-item-v-selected-line-top-left , 0px );\n  margin-right: var( --comp-scu-nav-item-v-selected-line-top-right , 0px );\n  margin-top: var( --comp-scu-nav-item-v-selected-line-top-top , 0px );\n  margin-bottom: var( --comp-scu-nav-item-v-selected-line-top-bottom , 39px );\n  width: calc( 100% - ( var( --comp-scu-nav-item-v-selected-line-top-left , 0px ) + var( --comp-scu-nav-item-v-selected-line-top-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-selected-line-top'>content</div>"
    }
  },
  "components-scu-nav-item-v-selected-line-bottom-": {
    "box": {
      "output": "\n@mixin comp-scu-nav-item-v-selected-line-bottom { \n  position: relative;\n  background-color: var( --comp-scu-nav-item-v-selected-line-bottom-background-color , rgba(235,235,235,1) ); \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-selected-line-bottom { \n    position: relative;\n    background-color: var( --comp-scu-nav-item-v-selected-line-bottom-background-color , rgba(235,235,235,1) ); \n  }\n</style>\n<div id='comp-scu-nav-item-v-selected-line-bottom'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-nav-item-v-selected-line-bottom--sizing {\n  width: 246px;\n  height: 1px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-selected-line-bottom { \n    width: 246px;\n    height: 1px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-selected-line-bottom'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-nav-item-v-selected-line-bottom--width {\n  width: 246px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-selected-line-bottom { \n    width: 246px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-selected-line-bottom'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-nav-item-v-selected-line-bottom--height {\n  height: 1px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-selected-line-bottom { \n    height: 1px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-selected-line-bottom'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-nav-item-v-selected-line-bottom--figma-autolayout { \n   \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-selected-line-bottom { \n     \n  }\n</style>\n<div id='comp-scu-nav-item-v-selected-line-bottom'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-nav-item-v-selected-line-bottom--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-nav-item-v-selected-line-bottom-left , 0px );\n  right: var( --comp-scu-nav-item-v-selected-line-bottom-right , 0px );\n  bottom: var( --comp-scu-nav-item-v-selected-line-bottom-bottom , 0px );\n  height: var( --comp-scu-nav-item-v-selected-line-bottom-height , 1px ); \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-selected-line-bottom { \n    position: absolute;\n    left: var( --comp-scu-nav-item-v-selected-line-bottom-left , 0px );\n    right: var( --comp-scu-nav-item-v-selected-line-bottom-right , 0px );\n    bottom: var( --comp-scu-nav-item-v-selected-line-bottom-bottom , 0px );\n    height: var( --comp-scu-nav-item-v-selected-line-bottom-height , 1px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-nav-item-v-selected-line-bottom'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-nav-item-v-selected-line-bottom--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-nav-item-v-selected-line-bottom-left , 0px );\n  margin-right: var( --comp-scu-nav-item-v-selected-line-bottom-right , 0px );\n  margin-top: var( --comp-scu-nav-item-v-selected-line-bottom-top , 39px );\n  margin-bottom: var( --comp-scu-nav-item-v-selected-line-bottom-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-nav-item-v-selected-line-bottom-left , 0px ) + var( --comp-scu-nav-item-v-selected-line-bottom-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-selected-line-bottom { \n    display: inline-block;\n  margin-left: var( --comp-scu-nav-item-v-selected-line-bottom-left , 0px );\n  margin-right: var( --comp-scu-nav-item-v-selected-line-bottom-right , 0px );\n  margin-top: var( --comp-scu-nav-item-v-selected-line-bottom-top , 39px );\n  margin-bottom: var( --comp-scu-nav-item-v-selected-line-bottom-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-nav-item-v-selected-line-bottom-left , 0px ) + var( --comp-scu-nav-item-v-selected-line-bottom-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-selected-line-bottom'>content</div>"
    }
  },
  "components-scu-nav-item-v-selected-selected-": {
    "box": {
      "output": "\n@mixin comp-scu-nav-item-v-selected-selected { \n  position: relative;\n  background-color: var( --comp-scu-nav-item-v-selected-selected-background-color , rgba(99,166,10,1) ); \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-selected-selected { \n    position: relative;\n    background-color: var( --comp-scu-nav-item-v-selected-selected-background-color , rgba(99,166,10,1) ); \n  }\n</style>\n<div id='comp-scu-nav-item-v-selected-selected'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-nav-item-v-selected-selected--sizing {\n  width: 3px;\n  height: 40px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-selected-selected { \n    width: 3px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-selected-selected'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-nav-item-v-selected-selected--width {\n  width: 3px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-selected-selected { \n    width: 3px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-selected-selected'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-nav-item-v-selected-selected--height {\n  height: 40px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-selected-selected { \n    height: 40px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-selected-selected'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-nav-item-v-selected-selected--figma-autolayout { \n   \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-selected-selected { \n     \n  }\n</style>\n<div id='comp-scu-nav-item-v-selected-selected'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-nav-item-v-selected-selected--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-nav-item-v-selected-selected-left , 0px );\n  width: var( --comp-scu-nav-item-v-selected-selected-width , 3px );\n  top: var( --comp-scu-nav-item-v-selected-selected-top , 0px );\n  bottom: var( --comp-scu-nav-item-v-selected-selected-bottom , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-selected-selected { \n    position: absolute;\n    left: var( --comp-scu-nav-item-v-selected-selected-left , 0px );\n    width: var( --comp-scu-nav-item-v-selected-selected-width , 3px );\n    top: var( --comp-scu-nav-item-v-selected-selected-top , 0px );\n    bottom: var( --comp-scu-nav-item-v-selected-selected-bottom , 0px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-nav-item-v-selected-selected'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-nav-item-v-selected-selected--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-nav-item-v-selected-selected-left , 0px );\n  margin-right: var( --comp-scu-nav-item-v-selected-selected-right , 243px );\n  margin-top: var( --comp-scu-nav-item-v-selected-selected-top , 0px );\n  margin-bottom: var( --comp-scu-nav-item-v-selected-selected-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-nav-item-v-selected-selected-left , 0px ) + var( --comp-scu-nav-item-v-selected-selected-right , 243px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-selected-selected { \n    display: inline-block;\n  margin-left: var( --comp-scu-nav-item-v-selected-selected-left , 0px );\n  margin-right: var( --comp-scu-nav-item-v-selected-selected-right , 243px );\n  margin-top: var( --comp-scu-nav-item-v-selected-selected-top , 0px );\n  margin-bottom: var( --comp-scu-nav-item-v-selected-selected-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-nav-item-v-selected-selected-left , 0px ) + var( --comp-scu-nav-item-v-selected-selected-right , 243px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-selected-selected'>content</div>"
    }
  },
  "components-scu-nav-item-v-selected-hover-": {
    "box": {
      "output": "\n@mixin comp-scu-nav-item-v-selected-hover { \n  position: relative;\n  background-color: var( --comp-scu-nav-item-v-selected-hover-background-color , rgba(251,255,246,1) ); \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-selected-hover { \n    position: relative;\n    background-color: var( --comp-scu-nav-item-v-selected-hover-background-color , rgba(251,255,246,1) ); \n  }\n</style>\n<div id='comp-scu-nav-item-v-selected-hover'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-nav-item-v-selected-hover--sizing {\n  width: 246px;\n  height: 40px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-selected-hover { \n    width: 246px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-selected-hover'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-nav-item-v-selected-hover--width {\n  width: 246px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-selected-hover { \n    width: 246px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-selected-hover'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-nav-item-v-selected-hover--height {\n  height: 40px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-selected-hover { \n    height: 40px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-selected-hover'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-nav-item-v-selected-hover--figma-autolayout { \n   \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-selected-hover { \n     \n  }\n</style>\n<div id='comp-scu-nav-item-v-selected-hover'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-nav-item-v-selected-hover--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-nav-item-v-selected-hover-left , 0px );\n  right: var( --comp-scu-nav-item-v-selected-hover-right , 0px );\n  top: var( --comp-scu-nav-item-v-selected-hover-top , 0px );\n  bottom: var( --comp-scu-nav-item-v-selected-hover-bottom , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-selected-hover { \n    position: absolute;\n    left: var( --comp-scu-nav-item-v-selected-hover-left , 0px );\n    right: var( --comp-scu-nav-item-v-selected-hover-right , 0px );\n    top: var( --comp-scu-nav-item-v-selected-hover-top , 0px );\n    bottom: var( --comp-scu-nav-item-v-selected-hover-bottom , 0px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-nav-item-v-selected-hover'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-nav-item-v-selected-hover--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-nav-item-v-selected-hover-left , 0px );\n  margin-right: var( --comp-scu-nav-item-v-selected-hover-right , 0px );\n  margin-top: var( --comp-scu-nav-item-v-selected-hover-top , 0px );\n  margin-bottom: var( --comp-scu-nav-item-v-selected-hover-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-nav-item-v-selected-hover-left , 0px ) + var( --comp-scu-nav-item-v-selected-hover-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-selected-hover { \n    display: inline-block;\n  margin-left: var( --comp-scu-nav-item-v-selected-hover-left , 0px );\n  margin-right: var( --comp-scu-nav-item-v-selected-hover-right , 0px );\n  margin-top: var( --comp-scu-nav-item-v-selected-hover-top , 0px );\n  margin-bottom: var( --comp-scu-nav-item-v-selected-hover-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-nav-item-v-selected-hover-left , 0px ) + var( --comp-scu-nav-item-v-selected-hover-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-selected-hover'>content</div>"
    }
  },
  "components-scu-nav-item-v-selected-hover-label-": {
    "": {
      "output": "\n@mixin comp-scu-nav-item-v-selected-hover-label { \n  position: relative;\n  font-size: var( --comp-scu-nav-item-v-selected-hover-label-font-size , 15px );\n  text-align: var( --comp-scu-nav-item-v-selected-hover-label-text-align-horizontal , LEFT );\n  color: var( --comp-scu-nav-item-v-selected-hover-label-color , rgba(64,109,3,1) );\n  font-family: var( --comp-scu-nav-item-v-selected-hover-label-font-family , 'Proxima Nova' );\n  font-weight: var( --comp-scu-nav-item-v-selected-hover-label-font-weight , 400 );\n  line-height: var( --comp-scu-nav-item-v-selected-hover-label-line-height , 17.58px );\n  letter-spacing: var( --comp-scu-nav-item-v-selected-hover-label-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-selected-hover-label { \n    position: relative;\n    font-size: var( --comp-scu-nav-item-v-selected-hover-label-font-size , 15px );\n    text-align: var( --comp-scu-nav-item-v-selected-hover-label-text-align-horizontal , LEFT );\n    color: var( --comp-scu-nav-item-v-selected-hover-label-color , rgba(64,109,3,1) );\n    font-family: var( --comp-scu-nav-item-v-selected-hover-label-font-family , 'Proxima Nova' );\n    font-weight: var( --comp-scu-nav-item-v-selected-hover-label-font-weight , 400 );\n    line-height: var( --comp-scu-nav-item-v-selected-hover-label-line-height , 17.58px );\n    letter-spacing: var( --comp-scu-nav-item-v-selected-hover-label-letter-spacing , 0px ); \n  }\n</style>\n<div id='comp-scu-nav-item-v-selected-hover-label'></div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-nav-item-v-selected-hover-label--sizing {\n  width: 209px;\n  height: 18px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-selected-hover-label { \n    width: 209px;\n    height: 18px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-selected-hover-label'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-nav-item-v-selected-hover-label--width {\n  width: 209px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-selected-hover-label { \n    width: 209px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-selected-hover-label'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-nav-item-v-selected-hover-label--height {\n  height: 18px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-selected-hover-label { \n    height: 18px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-selected-hover-label'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-nav-item-v-selected-hover-label--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-nav-item-v-selected-hover-label-left , 32px );\n  right: var( --comp-scu-nav-item-v-selected-hover-label-right , 5px );\n  top: var( --comp-scu-nav-item-v-selected-hover-label-top , 11px );\n  bottom: var( --comp-scu-nav-item-v-selected-hover-label-bottom , 11px ); \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-selected-hover-label { \n    position: absolute;\n    left: var( --comp-scu-nav-item-v-selected-hover-label-left , 32px );\n    right: var( --comp-scu-nav-item-v-selected-hover-label-right , 5px );\n    top: var( --comp-scu-nav-item-v-selected-hover-label-top , 11px );\n    bottom: var( --comp-scu-nav-item-v-selected-hover-label-bottom , 11px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-nav-item-v-selected-hover-label'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-nav-item-v-selected-hover-label--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-nav-item-v-selected-hover-label-left , 32px );\n  margin-right: var( --comp-scu-nav-item-v-selected-hover-label-right , 5px );\n  margin-top: var( --comp-scu-nav-item-v-selected-hover-label-top , 11px );\n  margin-bottom: var( --comp-scu-nav-item-v-selected-hover-label-bottom , 11px );\n  width: calc( 100% - ( var( --comp-scu-nav-item-v-selected-hover-label-left , 32px ) + var( --comp-scu-nav-item-v-selected-hover-label-right , 5px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-selected-hover-label { \n    display: inline-block;\n  margin-left: var( --comp-scu-nav-item-v-selected-hover-label-left , 32px );\n  margin-right: var( --comp-scu-nav-item-v-selected-hover-label-right , 5px );\n  margin-top: var( --comp-scu-nav-item-v-selected-hover-label-top , 11px );\n  margin-bottom: var( --comp-scu-nav-item-v-selected-hover-label-bottom , 11px );\n  width: calc( 100% - ( var( --comp-scu-nav-item-v-selected-hover-label-left , 32px ) + var( --comp-scu-nav-item-v-selected-hover-label-right , 5px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-selected-hover-label'>content</div>"
    }
  },
  "components-scu-nav-item-v-selected-hover-line-top-": {
    "box": {
      "output": "\n@mixin comp-scu-nav-item-v-selected-hover-line-top { \n  position: relative;\n  background-color: var( --comp-scu-nav-item-v-selected-hover-line-top-background-color , rgba(235,235,235,1) ); \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-selected-hover-line-top { \n    position: relative;\n    background-color: var( --comp-scu-nav-item-v-selected-hover-line-top-background-color , rgba(235,235,235,1) ); \n  }\n</style>\n<div id='comp-scu-nav-item-v-selected-hover-line-top'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-nav-item-v-selected-hover-line-top--sizing {\n  width: 246px;\n  height: 1px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-selected-hover-line-top { \n    width: 246px;\n    height: 1px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-selected-hover-line-top'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-nav-item-v-selected-hover-line-top--width {\n  width: 246px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-selected-hover-line-top { \n    width: 246px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-selected-hover-line-top'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-nav-item-v-selected-hover-line-top--height {\n  height: 1px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-selected-hover-line-top { \n    height: 1px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-selected-hover-line-top'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-nav-item-v-selected-hover-line-top--figma-autolayout { \n   \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-selected-hover-line-top { \n     \n  }\n</style>\n<div id='comp-scu-nav-item-v-selected-hover-line-top'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-nav-item-v-selected-hover-line-top--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-nav-item-v-selected-hover-line-top-left , 0px );\n  right: var( --comp-scu-nav-item-v-selected-hover-line-top-right , 0px );\n  top: var( --comp-scu-nav-item-v-selected-hover-line-top-top , 0px );\n  height: var( --comp-scu-nav-item-v-selected-hover-line-top-height , 1px ); \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-selected-hover-line-top { \n    position: absolute;\n    left: var( --comp-scu-nav-item-v-selected-hover-line-top-left , 0px );\n    right: var( --comp-scu-nav-item-v-selected-hover-line-top-right , 0px );\n    top: var( --comp-scu-nav-item-v-selected-hover-line-top-top , 0px );\n    height: var( --comp-scu-nav-item-v-selected-hover-line-top-height , 1px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-nav-item-v-selected-hover-line-top'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-nav-item-v-selected-hover-line-top--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-nav-item-v-selected-hover-line-top-left , 0px );\n  margin-right: var( --comp-scu-nav-item-v-selected-hover-line-top-right , 0px );\n  margin-top: var( --comp-scu-nav-item-v-selected-hover-line-top-top , 0px );\n  margin-bottom: var( --comp-scu-nav-item-v-selected-hover-line-top-bottom , 39px );\n  width: calc( 100% - ( var( --comp-scu-nav-item-v-selected-hover-line-top-left , 0px ) + var( --comp-scu-nav-item-v-selected-hover-line-top-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-selected-hover-line-top { \n    display: inline-block;\n  margin-left: var( --comp-scu-nav-item-v-selected-hover-line-top-left , 0px );\n  margin-right: var( --comp-scu-nav-item-v-selected-hover-line-top-right , 0px );\n  margin-top: var( --comp-scu-nav-item-v-selected-hover-line-top-top , 0px );\n  margin-bottom: var( --comp-scu-nav-item-v-selected-hover-line-top-bottom , 39px );\n  width: calc( 100% - ( var( --comp-scu-nav-item-v-selected-hover-line-top-left , 0px ) + var( --comp-scu-nav-item-v-selected-hover-line-top-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-selected-hover-line-top'>content</div>"
    }
  },
  "components-scu-nav-item-v-selected-hover-line-bottom-": {
    "box": {
      "output": "\n@mixin comp-scu-nav-item-v-selected-hover-line-bottom { \n  position: relative;\n  background-color: var( --comp-scu-nav-item-v-selected-hover-line-bottom-background-color , rgba(235,235,235,1) ); \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-selected-hover-line-bottom { \n    position: relative;\n    background-color: var( --comp-scu-nav-item-v-selected-hover-line-bottom-background-color , rgba(235,235,235,1) ); \n  }\n</style>\n<div id='comp-scu-nav-item-v-selected-hover-line-bottom'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-nav-item-v-selected-hover-line-bottom--sizing {\n  width: 246px;\n  height: 1px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-selected-hover-line-bottom { \n    width: 246px;\n    height: 1px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-selected-hover-line-bottom'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-nav-item-v-selected-hover-line-bottom--width {\n  width: 246px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-selected-hover-line-bottom { \n    width: 246px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-selected-hover-line-bottom'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-nav-item-v-selected-hover-line-bottom--height {\n  height: 1px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-selected-hover-line-bottom { \n    height: 1px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-selected-hover-line-bottom'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-nav-item-v-selected-hover-line-bottom--figma-autolayout { \n   \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-selected-hover-line-bottom { \n     \n  }\n</style>\n<div id='comp-scu-nav-item-v-selected-hover-line-bottom'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-nav-item-v-selected-hover-line-bottom--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-nav-item-v-selected-hover-line-bottom-left , 0px );\n  right: var( --comp-scu-nav-item-v-selected-hover-line-bottom-right , 0px );\n  bottom: var( --comp-scu-nav-item-v-selected-hover-line-bottom-bottom , 0px );\n  height: var( --comp-scu-nav-item-v-selected-hover-line-bottom-height , 1px ); \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-selected-hover-line-bottom { \n    position: absolute;\n    left: var( --comp-scu-nav-item-v-selected-hover-line-bottom-left , 0px );\n    right: var( --comp-scu-nav-item-v-selected-hover-line-bottom-right , 0px );\n    bottom: var( --comp-scu-nav-item-v-selected-hover-line-bottom-bottom , 0px );\n    height: var( --comp-scu-nav-item-v-selected-hover-line-bottom-height , 1px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-nav-item-v-selected-hover-line-bottom'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-nav-item-v-selected-hover-line-bottom--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-nav-item-v-selected-hover-line-bottom-left , 0px );\n  margin-right: var( --comp-scu-nav-item-v-selected-hover-line-bottom-right , 0px );\n  margin-top: var( --comp-scu-nav-item-v-selected-hover-line-bottom-top , 39px );\n  margin-bottom: var( --comp-scu-nav-item-v-selected-hover-line-bottom-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-nav-item-v-selected-hover-line-bottom-left , 0px ) + var( --comp-scu-nav-item-v-selected-hover-line-bottom-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-selected-hover-line-bottom { \n    display: inline-block;\n  margin-left: var( --comp-scu-nav-item-v-selected-hover-line-bottom-left , 0px );\n  margin-right: var( --comp-scu-nav-item-v-selected-hover-line-bottom-right , 0px );\n  margin-top: var( --comp-scu-nav-item-v-selected-hover-line-bottom-top , 39px );\n  margin-bottom: var( --comp-scu-nav-item-v-selected-hover-line-bottom-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-nav-item-v-selected-hover-line-bottom-left , 0px ) + var( --comp-scu-nav-item-v-selected-hover-line-bottom-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-selected-hover-line-bottom'>content</div>"
    }
  },
  "components-scu-nav-item-v-selected-hover-selected-": {
    "box": {
      "output": "\n@mixin comp-scu-nav-item-v-selected-hover-selected { \n  position: relative;\n  background-color: var( --comp-scu-nav-item-v-selected-hover-selected-background-color , rgba(99,166,10,1) ); \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-selected-hover-selected { \n    position: relative;\n    background-color: var( --comp-scu-nav-item-v-selected-hover-selected-background-color , rgba(99,166,10,1) ); \n  }\n</style>\n<div id='comp-scu-nav-item-v-selected-hover-selected'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-nav-item-v-selected-hover-selected--sizing {\n  width: 3px;\n  height: 40px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-selected-hover-selected { \n    width: 3px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-selected-hover-selected'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-nav-item-v-selected-hover-selected--width {\n  width: 3px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-selected-hover-selected { \n    width: 3px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-selected-hover-selected'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-nav-item-v-selected-hover-selected--height {\n  height: 40px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-selected-hover-selected { \n    height: 40px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-selected-hover-selected'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-nav-item-v-selected-hover-selected--figma-autolayout { \n   \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-selected-hover-selected { \n     \n  }\n</style>\n<div id='comp-scu-nav-item-v-selected-hover-selected'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-nav-item-v-selected-hover-selected--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-nav-item-v-selected-hover-selected-left , 0px );\n  width: var( --comp-scu-nav-item-v-selected-hover-selected-width , 3px );\n  top: var( --comp-scu-nav-item-v-selected-hover-selected-top , 0px );\n  bottom: var( --comp-scu-nav-item-v-selected-hover-selected-bottom , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-selected-hover-selected { \n    position: absolute;\n    left: var( --comp-scu-nav-item-v-selected-hover-selected-left , 0px );\n    width: var( --comp-scu-nav-item-v-selected-hover-selected-width , 3px );\n    top: var( --comp-scu-nav-item-v-selected-hover-selected-top , 0px );\n    bottom: var( --comp-scu-nav-item-v-selected-hover-selected-bottom , 0px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-nav-item-v-selected-hover-selected'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-nav-item-v-selected-hover-selected--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-nav-item-v-selected-hover-selected-left , 0px );\n  margin-right: var( --comp-scu-nav-item-v-selected-hover-selected-right , 243px );\n  margin-top: var( --comp-scu-nav-item-v-selected-hover-selected-top , 0px );\n  margin-bottom: var( --comp-scu-nav-item-v-selected-hover-selected-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-nav-item-v-selected-hover-selected-left , 0px ) + var( --comp-scu-nav-item-v-selected-hover-selected-right , 243px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-v-selected-hover-selected { \n    display: inline-block;\n  margin-left: var( --comp-scu-nav-item-v-selected-hover-selected-left , 0px );\n  margin-right: var( --comp-scu-nav-item-v-selected-hover-selected-right , 243px );\n  margin-top: var( --comp-scu-nav-item-v-selected-hover-selected-top , 0px );\n  margin-bottom: var( --comp-scu-nav-item-v-selected-hover-selected-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-nav-item-v-selected-hover-selected-left , 0px ) + var( --comp-scu-nav-item-v-selected-hover-selected-right , 243px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-v-selected-hover-selected'>content</div>"
    }
  },
  "components-scu-nav-item-h-icon-": {
    "box": {
      "output": "\n@mixin comp-scu-nav-item-h-icon { \n  position: relative; \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-h-icon { \n    position: relative; \n  }\n</style>\n<div id='comp-scu-nav-item-h-icon'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-nav-item-h-icon--sizing {\n  width: 77px;\n  height: 48px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-h-icon { \n    width: 77px;\n    height: 48px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-h-icon'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-nav-item-h-icon--width {\n  width: 77px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-h-icon { \n    width: 77px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-h-icon'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-nav-item-h-icon--height {\n  height: 48px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-h-icon { \n    height: 48px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-h-icon'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-nav-item-h-icon--figma-autolayout { \n  display: flex;\n  flex-flow: column nowrap;\n  padding-left: var( --comp-scu-nav-item-h-icon-padding-left , 0px );\n  padding-right: var( --comp-scu-nav-item-h-icon-padding-right , 0px );\n  padding-top: var( --comp-scu-nav-item-h-icon-padding-top , 0px );\n  padding-bottom: var( --comp-scu-nav-item-h-icon-padding-bottom , 0px );\n  & > *:not(:last-child) { margin-bottom: var( --comp-scu-nav-item-h-icon-item-spacing , 5px ); } \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-h-icon { \n    display: flex;\n    flex-flow: column nowrap;\n    padding-left: var( --comp-scu-nav-item-h-icon-padding-left , 0px );\n    padding-right: var( --comp-scu-nav-item-h-icon-padding-right , 0px );\n    padding-top: var( --comp-scu-nav-item-h-icon-padding-top , 0px );\n    padding-bottom: var( --comp-scu-nav-item-h-icon-padding-bottom , 0px );\n    & > *:not(:last-child) { margin-bottom: var( --comp-scu-nav-item-h-icon-item-spacing , 5px ); } \n  }\n</style>\n<div id='comp-scu-nav-item-h-icon'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-nav-item-h-icon--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-h-icon { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-nav-item-h-icon'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-nav-item-h-icon--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-nav-item-h-icon-left , 0px );\n  margin-right: var( --comp-scu-nav-item-h-icon-right , 0px );\n  margin-top: var( --comp-scu-nav-item-h-icon-top , 0px );\n  margin-bottom: var( --comp-scu-nav-item-h-icon-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-nav-item-h-icon-left , 0px ) + var( --comp-scu-nav-item-h-icon-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-h-icon { \n    display: inline-block;\n  margin-left: var( --comp-scu-nav-item-h-icon-left , 0px );\n  margin-right: var( --comp-scu-nav-item-h-icon-right , 0px );\n  margin-top: var( --comp-scu-nav-item-h-icon-top , 0px );\n  margin-bottom: var( --comp-scu-nav-item-h-icon-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-nav-item-h-icon-left , 0px ) + var( --comp-scu-nav-item-h-icon-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-h-icon'>content</div>"
    }
  },
  "components-scu-nav-item-h-icon-icon-box-": {
    "box": {
      "output": "\n@mixin comp-scu-nav-item-h-icon-icon-box { \n  position: relative; \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-h-icon-icon-box { \n    position: relative; \n  }\n</style>\n<div id='comp-scu-nav-item-h-icon-icon-box'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-nav-item-h-icon-icon-box--sizing {\n  width: 60px;\n  height: 26px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-h-icon-icon-box { \n    width: 60px;\n    height: 26px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-h-icon-icon-box'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-nav-item-h-icon-icon-box--width {\n  width: 60px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-h-icon-icon-box { \n    width: 60px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-h-icon-icon-box'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-nav-item-h-icon-icon-box--height {\n  height: 26px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-h-icon-icon-box { \n    height: 26px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-h-icon-icon-box'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-nav-item-h-icon-icon-box--figma-autolayout { \n   \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-h-icon-icon-box { \n     \n  }\n</style>\n<div id='comp-scu-nav-item-h-icon-icon-box'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-nav-item-h-icon-icon-box--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-h-icon-icon-box { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-nav-item-h-icon-icon-box'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-nav-item-h-icon-icon-box--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-nav-item-h-icon-icon-box-left , 8.5px );\n  margin-right: var( --comp-scu-nav-item-h-icon-icon-box-right , 8.5px );\n  margin-top: var( --comp-scu-nav-item-h-icon-icon-box-top , 0px );\n  margin-bottom: var( --comp-scu-nav-item-h-icon-icon-box-bottom , 22px );\n  width: calc( 100% - ( var( --comp-scu-nav-item-h-icon-icon-box-left , 8.5px ) + var( --comp-scu-nav-item-h-icon-icon-box-right , 8.5px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-h-icon-icon-box { \n    display: inline-block;\n  margin-left: var( --comp-scu-nav-item-h-icon-icon-box-left , 8.5px );\n  margin-right: var( --comp-scu-nav-item-h-icon-icon-box-right , 8.5px );\n  margin-top: var( --comp-scu-nav-item-h-icon-icon-box-top , 0px );\n  margin-bottom: var( --comp-scu-nav-item-h-icon-icon-box-bottom , 22px );\n  width: calc( 100% - ( var( --comp-scu-nav-item-h-icon-icon-box-left , 8.5px ) + var( --comp-scu-nav-item-h-icon-icon-box-right , 8.5px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-h-icon-icon-box'>content</div>"
    }
  },
  "components-scu-nav-item-h-icon-icon-box-i-c-o-n-24-": {
    "box": {
      "output": "\n@mixin comp-scu-nav-item-h-icon-icon-box-i-c-o-n-24 { \n  position: relative;\n  background-color: var( --comp-scu-nav-item-h-icon-icon-box-i-c-o-n-24-background-color , rgba(255,255,255,1) ); \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-h-icon-icon-box-i-c-o-n-24 { \n    position: relative;\n    background-color: var( --comp-scu-nav-item-h-icon-icon-box-i-c-o-n-24-background-color , rgba(255,255,255,1) ); \n  }\n</style>\n<div id='comp-scu-nav-item-h-icon-icon-box-i-c-o-n-24'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-nav-item-h-icon-icon-box-i-c-o-n-24--sizing {\n  width: 24px;\n  height: 24px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-h-icon-icon-box-i-c-o-n-24 { \n    width: 24px;\n    height: 24px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-h-icon-icon-box-i-c-o-n-24'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-nav-item-h-icon-icon-box-i-c-o-n-24--width {\n  width: 24px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-h-icon-icon-box-i-c-o-n-24 { \n    width: 24px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-h-icon-icon-box-i-c-o-n-24'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-nav-item-h-icon-icon-box-i-c-o-n-24--height {\n  height: 24px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-h-icon-icon-box-i-c-o-n-24 { \n    height: 24px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-h-icon-icon-box-i-c-o-n-24'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-nav-item-h-icon-icon-box-i-c-o-n-24--figma-autolayout { \n   \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-h-icon-icon-box-i-c-o-n-24 { \n     \n  }\n</style>\n<div id='comp-scu-nav-item-h-icon-icon-box-i-c-o-n-24'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-nav-item-h-icon-icon-box-i-c-o-n-24--absolute-layout {\n  position: absolute;\n  left: calc( 50% - 12px );\n  width: var( --comp-scu-nav-item-h-icon-icon-box-i-c-o-n-24-width , 24px );\n  top: calc( 50% - 12px );\n  height: var( --comp-scu-nav-item-h-icon-icon-box-i-c-o-n-24-height , 24px ); \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-h-icon-icon-box-i-c-o-n-24 { \n    position: absolute;\n    left: calc( 50% - 12px );\n    width: var( --comp-scu-nav-item-h-icon-icon-box-i-c-o-n-24-width , 24px );\n    top: calc( 50% - 12px );\n    height: var( --comp-scu-nav-item-h-icon-icon-box-i-c-o-n-24-height , 24px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-nav-item-h-icon-icon-box-i-c-o-n-24'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-nav-item-h-icon-icon-box-i-c-o-n-24--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-nav-item-h-icon-icon-box-i-c-o-n-24-left , 18px );\n  margin-right: var( --comp-scu-nav-item-h-icon-icon-box-i-c-o-n-24-right , 18px );\n  margin-top: var( --comp-scu-nav-item-h-icon-icon-box-i-c-o-n-24-top , 1px );\n  margin-bottom: var( --comp-scu-nav-item-h-icon-icon-box-i-c-o-n-24-bottom , 1px );\n  width: calc( 100% - ( var( --comp-scu-nav-item-h-icon-icon-box-i-c-o-n-24-left , 18px ) + var( --comp-scu-nav-item-h-icon-icon-box-i-c-o-n-24-right , 18px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-h-icon-icon-box-i-c-o-n-24 { \n    display: inline-block;\n  margin-left: var( --comp-scu-nav-item-h-icon-icon-box-i-c-o-n-24-left , 18px );\n  margin-right: var( --comp-scu-nav-item-h-icon-icon-box-i-c-o-n-24-right , 18px );\n  margin-top: var( --comp-scu-nav-item-h-icon-icon-box-i-c-o-n-24-top , 1px );\n  margin-bottom: var( --comp-scu-nav-item-h-icon-icon-box-i-c-o-n-24-bottom , 1px );\n  width: calc( 100% - ( var( --comp-scu-nav-item-h-icon-icon-box-i-c-o-n-24-left , 18px ) + var( --comp-scu-nav-item-h-icon-icon-box-i-c-o-n-24-right , 18px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-h-icon-icon-box-i-c-o-n-24'>content</div>"
    }
  },
  "components-scu-nav-item-h-icon-icon-box-notification-": {
    "box": {
      "output": "\n@mixin comp-scu-nav-item-h-icon-icon-box-notification { \n  position: relative;\n  background-color: var( --comp-scu-nav-item-h-icon-icon-box-notification-background-color , rgba(99,166,10,1) );\n  border-radius: var( --comp-scu-nav-item-h-icon-icon-box-notification-corner-radius , 10px );\n  border-width: var( --comp-scu-nav-item-h-icon-icon-box-notification-stroke-weight , 3px );\n  border-style: solid;\n  border-color: var( --comp-scu-nav-item-h-icon-icon-box-notification-stroke-color , rgba(255,255,255,1) ); \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-h-icon-icon-box-notification { \n    position: relative;\n    background-color: var( --comp-scu-nav-item-h-icon-icon-box-notification-background-color , rgba(99,166,10,1) );\n    border-radius: var( --comp-scu-nav-item-h-icon-icon-box-notification-corner-radius , 10px );\n    border-width: var( --comp-scu-nav-item-h-icon-icon-box-notification-stroke-weight , 3px );\n    border-style: solid;\n    border-color: var( --comp-scu-nav-item-h-icon-icon-box-notification-stroke-color , rgba(255,255,255,1) ); \n  }\n</style>\n<div id='comp-scu-nav-item-h-icon-icon-box-notification'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-nav-item-h-icon-icon-box-notification--sizing {\n  width: 12px;\n  height: 12px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-h-icon-icon-box-notification { \n    width: 12px;\n    height: 12px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-h-icon-icon-box-notification'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-nav-item-h-icon-icon-box-notification--width {\n  width: 12px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-h-icon-icon-box-notification { \n    width: 12px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-h-icon-icon-box-notification'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-nav-item-h-icon-icon-box-notification--height {\n  height: 12px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-h-icon-icon-box-notification { \n    height: 12px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-h-icon-icon-box-notification'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-nav-item-h-icon-icon-box-notification--figma-autolayout { \n   \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-h-icon-icon-box-notification { \n     \n  }\n</style>\n<div id='comp-scu-nav-item-h-icon-icon-box-notification'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-nav-item-h-icon-icon-box-notification--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-nav-item-h-icon-icon-box-notification-left , 35px );\n  right: var( --comp-scu-nav-item-h-icon-icon-box-notification-right , 13px );\n  top: var( --comp-scu-nav-item-h-icon-icon-box-notification-top , 0.666748046875px );\n  height: var( --comp-scu-nav-item-h-icon-icon-box-notification-height , 12px ); \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-h-icon-icon-box-notification { \n    position: absolute;\n    left: var( --comp-scu-nav-item-h-icon-icon-box-notification-left , 35px );\n    right: var( --comp-scu-nav-item-h-icon-icon-box-notification-right , 13px );\n    top: var( --comp-scu-nav-item-h-icon-icon-box-notification-top , 0.666748046875px );\n    height: var( --comp-scu-nav-item-h-icon-icon-box-notification-height , 12px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-nav-item-h-icon-icon-box-notification'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-nav-item-h-icon-icon-box-notification--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-nav-item-h-icon-icon-box-notification-left , 35px );\n  margin-right: var( --comp-scu-nav-item-h-icon-icon-box-notification-right , 13px );\n  margin-top: var( --comp-scu-nav-item-h-icon-icon-box-notification-top , 0.666748046875px );\n  margin-bottom: var( --comp-scu-nav-item-h-icon-icon-box-notification-bottom , 13.333251953125px );\n  width: calc( 100% - ( var( --comp-scu-nav-item-h-icon-icon-box-notification-left , 35px ) + var( --comp-scu-nav-item-h-icon-icon-box-notification-right , 13px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-h-icon-icon-box-notification { \n    display: inline-block;\n  margin-left: var( --comp-scu-nav-item-h-icon-icon-box-notification-left , 35px );\n  margin-right: var( --comp-scu-nav-item-h-icon-icon-box-notification-right , 13px );\n  margin-top: var( --comp-scu-nav-item-h-icon-icon-box-notification-top , 0.666748046875px );\n  margin-bottom: var( --comp-scu-nav-item-h-icon-icon-box-notification-bottom , 13.333251953125px );\n  width: calc( 100% - ( var( --comp-scu-nav-item-h-icon-icon-box-notification-left , 35px ) + var( --comp-scu-nav-item-h-icon-icon-box-notification-right , 13px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-h-icon-icon-box-notification'>content</div>"
    }
  },
  "components-scu-nav-item-h-icon-icon-box-notification-number-": {
    "": {
      "output": "\n@mixin comp-scu-nav-item-h-icon-icon-box-notification-number { \n  position: relative;\n  font-size: var( --comp-scu-nav-item-h-icon-icon-box-notification-number-font-size , 9px );\n  text-align: var( --comp-scu-nav-item-h-icon-icon-box-notification-number-text-align-horizontal , CENTER );\n  color: var( --comp-scu-nav-item-h-icon-icon-box-notification-number-color , rgba(255,255,255,1) );\n  font-family: var( --comp-scu-nav-item-h-icon-icon-box-notification-number-font-family , 'Proxima Nova' );\n  font-weight: var( --comp-scu-nav-item-h-icon-icon-box-notification-number-font-weight , 700 );\n  line-height: var( --comp-scu-nav-item-h-icon-icon-box-notification-number-line-height , 10.55px );\n  letter-spacing: var( --comp-scu-nav-item-h-icon-icon-box-notification-number-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-h-icon-icon-box-notification-number { \n    position: relative;\n    font-size: var( --comp-scu-nav-item-h-icon-icon-box-notification-number-font-size , 9px );\n    text-align: var( --comp-scu-nav-item-h-icon-icon-box-notification-number-text-align-horizontal , CENTER );\n    color: var( --comp-scu-nav-item-h-icon-icon-box-notification-number-color , rgba(255,255,255,1) );\n    font-family: var( --comp-scu-nav-item-h-icon-icon-box-notification-number-font-family , 'Proxima Nova' );\n    font-weight: var( --comp-scu-nav-item-h-icon-icon-box-notification-number-font-weight , 700 );\n    line-height: var( --comp-scu-nav-item-h-icon-icon-box-notification-number-line-height , 10.55px );\n    letter-spacing: var( --comp-scu-nav-item-h-icon-icon-box-notification-number-letter-spacing , 0px ); \n  }\n</style>\n<div id='comp-scu-nav-item-h-icon-icon-box-notification-number'></div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-nav-item-h-icon-icon-box-notification-number--sizing {\n  width: 12px;\n  height: 12px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-h-icon-icon-box-notification-number { \n    width: 12px;\n    height: 12px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-h-icon-icon-box-notification-number'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-nav-item-h-icon-icon-box-notification-number--width {\n  width: 12px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-h-icon-icon-box-notification-number { \n    width: 12px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-h-icon-icon-box-notification-number'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-nav-item-h-icon-icon-box-notification-number--height {\n  height: 12px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-h-icon-icon-box-notification-number { \n    height: 12px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-h-icon-icon-box-notification-number'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-nav-item-h-icon-icon-box-notification-number--absolute-layout {\n  position: absolute;\n  left: calc( 50% - 6px );\n  width: var( --comp-scu-nav-item-h-icon-icon-box-notification-number-width , 12px );\n  top: calc( 52.78% - 6px );\n  height: var( --comp-scu-nav-item-h-icon-icon-box-notification-number-height , 12px ); \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-h-icon-icon-box-notification-number { \n    position: absolute;\n    left: calc( 50% - 6px );\n    width: var( --comp-scu-nav-item-h-icon-icon-box-notification-number-width , 12px );\n    top: calc( 52.78% - 6px );\n    height: var( --comp-scu-nav-item-h-icon-icon-box-notification-number-height , 12px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-nav-item-h-icon-icon-box-notification-number'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-nav-item-h-icon-icon-box-notification-number--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-nav-item-h-icon-icon-box-notification-number-left , 0px );\n  margin-right: var( --comp-scu-nav-item-h-icon-icon-box-notification-number-right , 0px );\n  margin-top: var( --comp-scu-nav-item-h-icon-icon-box-notification-number-top , 0.333251953125px );\n  margin-bottom: var( --comp-scu-nav-item-h-icon-icon-box-notification-number-bottom , -0.333251953125px );\n  width: calc( 100% - ( var( --comp-scu-nav-item-h-icon-icon-box-notification-number-left , 0px ) + var( --comp-scu-nav-item-h-icon-icon-box-notification-number-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-h-icon-icon-box-notification-number { \n    display: inline-block;\n  margin-left: var( --comp-scu-nav-item-h-icon-icon-box-notification-number-left , 0px );\n  margin-right: var( --comp-scu-nav-item-h-icon-icon-box-notification-number-right , 0px );\n  margin-top: var( --comp-scu-nav-item-h-icon-icon-box-notification-number-top , 0.333251953125px );\n  margin-bottom: var( --comp-scu-nav-item-h-icon-icon-box-notification-number-bottom , -0.333251953125px );\n  width: calc( 100% - ( var( --comp-scu-nav-item-h-icon-icon-box-notification-number-left , 0px ) + var( --comp-scu-nav-item-h-icon-icon-box-notification-number-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-h-icon-icon-box-notification-number'>content</div>"
    }
  },
  "components-scu-nav-item-h-icon-comments-": {
    "": {
      "output": "\n@mixin comp-scu-nav-item-h-icon-comments { \n  position: relative;\n  font-size: var( --comp-scu-nav-item-h-icon-comments-font-size , 9px );\n  text-align: var( --comp-scu-nav-item-h-icon-comments-text-align-horizontal , CENTER );\n  color: var( --comp-scu-nav-item-h-icon-comments-color , rgba(86,144,8,1) );\n  font-family: var( --comp-scu-nav-item-h-icon-comments-font-family , 'Proxima Nova' );\n  font-weight: var( --comp-scu-nav-item-h-icon-comments-font-weight , 700 );\n  line-height: var( --comp-scu-nav-item-h-icon-comments-line-height , 10.55px );\n  letter-spacing: var( --comp-scu-nav-item-h-icon-comments-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-h-icon-comments { \n    position: relative;\n    font-size: var( --comp-scu-nav-item-h-icon-comments-font-size , 9px );\n    text-align: var( --comp-scu-nav-item-h-icon-comments-text-align-horizontal , CENTER );\n    color: var( --comp-scu-nav-item-h-icon-comments-color , rgba(86,144,8,1) );\n    font-family: var( --comp-scu-nav-item-h-icon-comments-font-family , 'Proxima Nova' );\n    font-weight: var( --comp-scu-nav-item-h-icon-comments-font-weight , 700 );\n    line-height: var( --comp-scu-nav-item-h-icon-comments-line-height , 10.55px );\n    letter-spacing: var( --comp-scu-nav-item-h-icon-comments-letter-spacing , 0px ); \n  }\n</style>\n<div id='comp-scu-nav-item-h-icon-comments'></div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-nav-item-h-icon-comments--sizing {\n  width: 77px;\n  height: 11px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-h-icon-comments { \n    width: 77px;\n    height: 11px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-h-icon-comments'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-nav-item-h-icon-comments--width {\n  width: 77px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-h-icon-comments { \n    width: 77px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-h-icon-comments'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-nav-item-h-icon-comments--height {\n  height: 11px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-h-icon-comments { \n    height: 11px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-h-icon-comments'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-nav-item-h-icon-comments--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-h-icon-comments { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-nav-item-h-icon-comments'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-nav-item-h-icon-comments--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-nav-item-h-icon-comments-left , 0px );\n  margin-right: var( --comp-scu-nav-item-h-icon-comments-right , 0px );\n  margin-top: var( --comp-scu-nav-item-h-icon-comments-top , 31px );\n  margin-bottom: var( --comp-scu-nav-item-h-icon-comments-bottom , 6px );\n  width: calc( 100% - ( var( --comp-scu-nav-item-h-icon-comments-left , 0px ) + var( --comp-scu-nav-item-h-icon-comments-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-h-icon-comments { \n    display: inline-block;\n  margin-left: var( --comp-scu-nav-item-h-icon-comments-left , 0px );\n  margin-right: var( --comp-scu-nav-item-h-icon-comments-right , 0px );\n  margin-top: var( --comp-scu-nav-item-h-icon-comments-top , 31px );\n  margin-bottom: var( --comp-scu-nav-item-h-icon-comments-bottom , 6px );\n  width: calc( 100% - ( var( --comp-scu-nav-item-h-icon-comments-left , 0px ) + var( --comp-scu-nav-item-h-icon-comments-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-h-icon-comments'>content</div>"
    }
  },
  "components-scu-nav-item-h-icon-select-": {
    "box": {
      "output": "\n@mixin comp-scu-nav-item-h-icon-select { \n  position: relative;\n  background-color: var( --comp-scu-nav-item-h-icon-select-background-color , rgba(99,166,10,1) ); \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-h-icon-select { \n    position: relative;\n    background-color: var( --comp-scu-nav-item-h-icon-select-background-color , rgba(99,166,10,1) ); \n  }\n</style>\n<div id='comp-scu-nav-item-h-icon-select'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-nav-item-h-icon-select--sizing {\n  width: 77px;\n  height: 1px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-h-icon-select { \n    width: 77px;\n    height: 1px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-h-icon-select'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-nav-item-h-icon-select--width {\n  width: 77px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-h-icon-select { \n    width: 77px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-h-icon-select'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-nav-item-h-icon-select--height {\n  height: 1px;\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-h-icon-select { \n    height: 1px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-h-icon-select'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-nav-item-h-icon-select--figma-autolayout { \n   \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-h-icon-select { \n     \n  }\n</style>\n<div id='comp-scu-nav-item-h-icon-select'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-nav-item-h-icon-select--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #comp-scu-nav-item-h-icon-select { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-nav-item-h-icon-select'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-nav-item-h-icon-select--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-nav-item-h-icon-select-left , 0px );\n  margin-right: var( --comp-scu-nav-item-h-icon-select-right , 0px );\n  margin-top: var( --comp-scu-nav-item-h-icon-select-top , 47px );\n  margin-bottom: var( --comp-scu-nav-item-h-icon-select-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-nav-item-h-icon-select-left , 0px ) + var( --comp-scu-nav-item-h-icon-select-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-nav-item-h-icon-select { \n    display: inline-block;\n  margin-left: var( --comp-scu-nav-item-h-icon-select-left , 0px );\n  margin-right: var( --comp-scu-nav-item-h-icon-select-right , 0px );\n  margin-top: var( --comp-scu-nav-item-h-icon-select-top , 47px );\n  margin-bottom: var( --comp-scu-nav-item-h-icon-select-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-nav-item-h-icon-select-left , 0px ) + var( --comp-scu-nav-item-h-icon-select-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-nav-item-h-icon-select'>content</div>"
    }
  },
  "components-beta-scu-button-2-": {
    "box": {
      "output": "\n@mixin comp-beta-scu-button-2 { \n  position: relative; \n}",
      "example": "\n<style>\n  #comp-beta-scu-button-2 { \n    position: relative; \n  }\n</style>\n<div id='comp-beta-scu-button-2'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-beta-scu-button-2--sizing {\n  width: 87px;\n  height: 40px;\n}",
      "example": "\n<style>\n  #comp-beta-scu-button-2 { \n    width: 87px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-beta-scu-button-2'></div>"
    },
    "width": {
      "output": "\n@mixin comp-beta-scu-button-2--width {\n  width: 87px;\n}",
      "example": "\n<style>\n  #comp-beta-scu-button-2 { \n    width: 87px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-beta-scu-button-2'></div>"
    },
    "height": {
      "output": "\n@mixin comp-beta-scu-button-2--height {\n  height: 40px;\n}",
      "example": "\n<style>\n  #comp-beta-scu-button-2 { \n    height: 40px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-beta-scu-button-2'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-beta-scu-button-2--figma-autolayout { \n   \n}",
      "example": "\n<style>\n  #comp-beta-scu-button-2 { \n     \n  }\n</style>\n<div id='comp-beta-scu-button-2'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-beta-scu-button-2--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #comp-beta-scu-button-2 { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-beta-scu-button-2'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-beta-scu-button-2--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-beta-scu-button-2-left , 0px );\n  margin-right: var( --comp-beta-scu-button-2-right , 0px );\n  margin-top: var( --comp-beta-scu-button-2-top , 0px );\n  margin-bottom: var( --comp-beta-scu-button-2-bottom , 0px );\n  width: calc( 100% - ( var( --comp-beta-scu-button-2-left , 0px ) + var( --comp-beta-scu-button-2-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-beta-scu-button-2 { \n    display: inline-block;\n  margin-left: var( --comp-beta-scu-button-2-left , 0px );\n  margin-right: var( --comp-beta-scu-button-2-right , 0px );\n  margin-top: var( --comp-beta-scu-button-2-top , 0px );\n  margin-bottom: var( --comp-beta-scu-button-2-bottom , 0px );\n  width: calc( 100% - ( var( --comp-beta-scu-button-2-left , 0px ) + var( --comp-beta-scu-button-2-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-beta-scu-button-2'>content</div>"
    }
  },
  "components-beta-scu-button-2-scu-button-2-background-": {
    "box": {
      "output": "\n@mixin comp-beta-scu-button-2-scu-button-2-background { \n  position: relative;\n  background-color: var( --comp-beta-scu-button-2-scu-button-2-background-background-color , rgba(99,166,10,1) );\n  border-radius: var( --comp-beta-scu-button-2-scu-button-2-background-corner-radius , 200px ); \n}",
      "example": "\n<style>\n  #comp-beta-scu-button-2-scu-button-2-background { \n    position: relative;\n    background-color: var( --comp-beta-scu-button-2-scu-button-2-background-background-color , rgba(99,166,10,1) );\n    border-radius: var( --comp-beta-scu-button-2-scu-button-2-background-corner-radius , 200px ); \n  }\n</style>\n<div id='comp-beta-scu-button-2-scu-button-2-background'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-beta-scu-button-2-scu-button-2-background--sizing {\n  width: 86px;\n  height: 40px;\n}",
      "example": "\n<style>\n  #comp-beta-scu-button-2-scu-button-2-background { \n    width: 86px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-beta-scu-button-2-scu-button-2-background'></div>"
    },
    "width": {
      "output": "\n@mixin comp-beta-scu-button-2-scu-button-2-background--width {\n  width: 86px;\n}",
      "example": "\n<style>\n  #comp-beta-scu-button-2-scu-button-2-background { \n    width: 86px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-beta-scu-button-2-scu-button-2-background'></div>"
    },
    "height": {
      "output": "\n@mixin comp-beta-scu-button-2-scu-button-2-background--height {\n  height: 40px;\n}",
      "example": "\n<style>\n  #comp-beta-scu-button-2-scu-button-2-background { \n    height: 40px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-beta-scu-button-2-scu-button-2-background'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-beta-scu-button-2-scu-button-2-background--figma-autolayout { \n   \n}",
      "example": "\n<style>\n  #comp-beta-scu-button-2-scu-button-2-background { \n     \n  }\n</style>\n<div id='comp-beta-scu-button-2-scu-button-2-background'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-beta-scu-button-2-scu-button-2-background--absolute-layout {\n  position: absolute;\n  left: var( --comp-beta-scu-button-2-scu-button-2-background-left , 0.75px );\n  right: var( --comp-beta-scu-button-2-scu-button-2-background-right , 0.25px );\n  top: var( --comp-beta-scu-button-2-scu-button-2-background-top , 0px );\n  bottom: var( --comp-beta-scu-button-2-scu-button-2-background-bottom , 0px ); \n}",
      "example": "\n<style>\n  #comp-beta-scu-button-2-scu-button-2-background { \n    position: absolute;\n    left: var( --comp-beta-scu-button-2-scu-button-2-background-left , 0.75px );\n    right: var( --comp-beta-scu-button-2-scu-button-2-background-right , 0.25px );\n    top: var( --comp-beta-scu-button-2-scu-button-2-background-top , 0px );\n    bottom: var( --comp-beta-scu-button-2-scu-button-2-background-bottom , 0px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-beta-scu-button-2-scu-button-2-background'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-beta-scu-button-2-scu-button-2-background--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-beta-scu-button-2-scu-button-2-background-left , 0.75px );\n  margin-right: var( --comp-beta-scu-button-2-scu-button-2-background-right , 0.25px );\n  margin-top: var( --comp-beta-scu-button-2-scu-button-2-background-top , 0px );\n  margin-bottom: var( --comp-beta-scu-button-2-scu-button-2-background-bottom , 0px );\n  width: calc( 100% - ( var( --comp-beta-scu-button-2-scu-button-2-background-left , 0.75px ) + var( --comp-beta-scu-button-2-scu-button-2-background-right , 0.25px ) ) );\n}",
      "example": "\n<style>\n  #comp-beta-scu-button-2-scu-button-2-background { \n    display: inline-block;\n  margin-left: var( --comp-beta-scu-button-2-scu-button-2-background-left , 0.75px );\n  margin-right: var( --comp-beta-scu-button-2-scu-button-2-background-right , 0.25px );\n  margin-top: var( --comp-beta-scu-button-2-scu-button-2-background-top , 0px );\n  margin-bottom: var( --comp-beta-scu-button-2-scu-button-2-background-bottom , 0px );\n  width: calc( 100% - ( var( --comp-beta-scu-button-2-scu-button-2-background-left , 0.75px ) + var( --comp-beta-scu-button-2-scu-button-2-background-right , 0.25px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-beta-scu-button-2-scu-button-2-background'>content</div>"
    }
  },
  "components-beta-scu-button-2-label-": {
    "": {
      "output": "\n@mixin comp-beta-scu-button-2-label { \n  position: relative;\n  font-size: var( --comp-beta-scu-button-2-label-font-size , 16px );\n  text-align: var( --comp-beta-scu-button-2-label-text-align-horizontal , CENTER );\n  color: var( --comp-beta-scu-button-2-label-color , rgba(255,255,255,1) );\n  font-family: var( --comp-beta-scu-button-2-label-font-family , 'Proxima Nova' );\n  font-weight: var( --comp-beta-scu-button-2-label-font-weight , 700 );\n  line-height: var( --comp-beta-scu-button-2-label-line-height , 18.75px );\n  letter-spacing: var( --comp-beta-scu-button-2-label-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #comp-beta-scu-button-2-label { \n    position: relative;\n    font-size: var( --comp-beta-scu-button-2-label-font-size , 16px );\n    text-align: var( --comp-beta-scu-button-2-label-text-align-horizontal , CENTER );\n    color: var( --comp-beta-scu-button-2-label-color , rgba(255,255,255,1) );\n    font-family: var( --comp-beta-scu-button-2-label-font-family , 'Proxima Nova' );\n    font-weight: var( --comp-beta-scu-button-2-label-font-weight , 700 );\n    line-height: var( --comp-beta-scu-button-2-label-line-height , 18.75px );\n    letter-spacing: var( --comp-beta-scu-button-2-label-letter-spacing , 0px ); \n  }\n</style>\n<div id='comp-beta-scu-button-2-label'></div>"
    },
    "sizing": {
      "output": "\n@mixin comp-beta-scu-button-2-label--sizing {\n  width: 39px;\n  height: 40px;\n}",
      "example": "\n<style>\n  #comp-beta-scu-button-2-label { \n    width: 39px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-beta-scu-button-2-label'></div>"
    },
    "width": {
      "output": "\n@mixin comp-beta-scu-button-2-label--width {\n  width: 39px;\n}",
      "example": "\n<style>\n  #comp-beta-scu-button-2-label { \n    width: 39px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-beta-scu-button-2-label'></div>"
    },
    "height": {
      "output": "\n@mixin comp-beta-scu-button-2-label--height {\n  height: 40px;\n}",
      "example": "\n<style>\n  #comp-beta-scu-button-2-label { \n    height: 40px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-beta-scu-button-2-label'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-beta-scu-button-2-label--absolute-layout {\n  position: absolute;\n  left: var( --comp-beta-scu-button-2-label-left , 24px );\n  right: var( --comp-beta-scu-button-2-label-right , 24px );\n  top: var( --comp-beta-scu-button-2-label-top , 0px );\n  bottom: var( --comp-beta-scu-button-2-label-bottom , 0px ); \n}",
      "example": "\n<style>\n  #comp-beta-scu-button-2-label { \n    position: absolute;\n    left: var( --comp-beta-scu-button-2-label-left , 24px );\n    right: var( --comp-beta-scu-button-2-label-right , 24px );\n    top: var( --comp-beta-scu-button-2-label-top , 0px );\n    bottom: var( --comp-beta-scu-button-2-label-bottom , 0px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-beta-scu-button-2-label'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-beta-scu-button-2-label--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-beta-scu-button-2-label-left , 24px );\n  margin-right: var( --comp-beta-scu-button-2-label-right , 24px );\n  margin-top: var( --comp-beta-scu-button-2-label-top , 0px );\n  margin-bottom: var( --comp-beta-scu-button-2-label-bottom , 0px );\n  width: calc( 100% - ( var( --comp-beta-scu-button-2-label-left , 24px ) + var( --comp-beta-scu-button-2-label-right , 24px ) ) );\n}",
      "example": "\n<style>\n  #comp-beta-scu-button-2-label { \n    display: inline-block;\n  margin-left: var( --comp-beta-scu-button-2-label-left , 24px );\n  margin-right: var( --comp-beta-scu-button-2-label-right , 24px );\n  margin-top: var( --comp-beta-scu-button-2-label-top , 0px );\n  margin-bottom: var( --comp-beta-scu-button-2-label-bottom , 0px );\n  width: calc( 100% - ( var( --comp-beta-scu-button-2-label-left , 24px ) + var( --comp-beta-scu-button-2-label-right , 24px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-beta-scu-button-2-label'>content</div>"
    }
  },
  "components-scu-input-text-": {
    "box": {
      "output": "\n@mixin comp-scu-input-text { \n  position: relative; \n}",
      "example": "\n<style>\n  #comp-scu-input-text { \n    position: relative; \n  }\n</style>\n<div id='comp-scu-input-text'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-input-text--sizing {\n  width: 263px;\n  height: 72px;\n}",
      "example": "\n<style>\n  #comp-scu-input-text { \n    width: 263px;\n    height: 72px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-text'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-input-text--width {\n  width: 263px;\n}",
      "example": "\n<style>\n  #comp-scu-input-text { \n    width: 263px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-text'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-input-text--height {\n  height: 72px;\n}",
      "example": "\n<style>\n  #comp-scu-input-text { \n    height: 72px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-text'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-input-text--figma-autolayout { \n   \n}",
      "example": "\n<style>\n  #comp-scu-input-text { \n     \n  }\n</style>\n<div id='comp-scu-input-text'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-input-text--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #comp-scu-input-text { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-input-text'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-input-text--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-input-text-left , 0px );\n  margin-right: var( --comp-scu-input-text-right , 0px );\n  margin-top: var( --comp-scu-input-text-top , 0px );\n  margin-bottom: var( --comp-scu-input-text-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-input-text-left , 0px ) + var( --comp-scu-input-text-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-input-text { \n    display: inline-block;\n  margin-left: var( --comp-scu-input-text-left , 0px );\n  margin-right: var( --comp-scu-input-text-right , 0px );\n  margin-top: var( --comp-scu-input-text-top , 0px );\n  margin-bottom: var( --comp-scu-input-text-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-input-text-left , 0px ) + var( --comp-scu-input-text-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-text'>content</div>"
    }
  },
  "components-scu-input-text-scu-input-field-": {
    "box": {
      "output": "\n@mixin comp-scu-input-text-scu-input-field { \n  position: relative;\n  background-color: var( --comp-scu-input-text-scu-input-field-background-color , rgba(255,255,255,1) ); \n}",
      "example": "\n<style>\n  #comp-scu-input-text-scu-input-field { \n    position: relative;\n    background-color: var( --comp-scu-input-text-scu-input-field-background-color , rgba(255,255,255,1) ); \n  }\n</style>\n<div id='comp-scu-input-text-scu-input-field'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-input-text-scu-input-field--sizing {\n  width: 263px;\n  height: 36px;\n}",
      "example": "\n<style>\n  #comp-scu-input-text-scu-input-field { \n    width: 263px;\n    height: 36px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-text-scu-input-field'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-input-text-scu-input-field--width {\n  width: 263px;\n}",
      "example": "\n<style>\n  #comp-scu-input-text-scu-input-field { \n    width: 263px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-text-scu-input-field'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-input-text-scu-input-field--height {\n  height: 36px;\n}",
      "example": "\n<style>\n  #comp-scu-input-text-scu-input-field { \n    height: 36px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-text-scu-input-field'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-input-text-scu-input-field--figma-autolayout { \n   \n}",
      "example": "\n<style>\n  #comp-scu-input-text-scu-input-field { \n     \n  }\n</style>\n<div id='comp-scu-input-text-scu-input-field'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-input-text-scu-input-field--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-input-text-scu-input-field-left , 0px );\n  right: var( --comp-scu-input-text-scu-input-field-right , 0px );\n  top: var( --comp-scu-input-text-scu-input-field-top , 18px );\n  bottom: var( --comp-scu-input-text-scu-input-field-bottom , 18px ); \n}",
      "example": "\n<style>\n  #comp-scu-input-text-scu-input-field { \n    position: absolute;\n    left: var( --comp-scu-input-text-scu-input-field-left , 0px );\n    right: var( --comp-scu-input-text-scu-input-field-right , 0px );\n    top: var( --comp-scu-input-text-scu-input-field-top , 18px );\n    bottom: var( --comp-scu-input-text-scu-input-field-bottom , 18px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-input-text-scu-input-field'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-input-text-scu-input-field--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-input-text-scu-input-field-left , 0px );\n  margin-right: var( --comp-scu-input-text-scu-input-field-right , 0px );\n  margin-top: var( --comp-scu-input-text-scu-input-field-top , 18px );\n  margin-bottom: var( --comp-scu-input-text-scu-input-field-bottom , 18px );\n  width: calc( 100% - ( var( --comp-scu-input-text-scu-input-field-left , 0px ) + var( --comp-scu-input-text-scu-input-field-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-input-text-scu-input-field { \n    display: inline-block;\n  margin-left: var( --comp-scu-input-text-scu-input-field-left , 0px );\n  margin-right: var( --comp-scu-input-text-scu-input-field-right , 0px );\n  margin-top: var( --comp-scu-input-text-scu-input-field-top , 18px );\n  margin-bottom: var( --comp-scu-input-text-scu-input-field-bottom , 18px );\n  width: calc( 100% - ( var( --comp-scu-input-text-scu-input-field-left , 0px ) + var( --comp-scu-input-text-scu-input-field-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-text-scu-input-field'>content</div>"
    }
  },
  "components-scu-input-text-scu-input-field-default-": {
    "box": {
      "output": "\n@mixin comp-scu-input-text-scu-input-field-default { \n  position: relative;\n  background-color: var( --comp-scu-input-text-scu-input-field-default-background-color , rgba(255,255,255,1) );\n  border-radius: var( --comp-scu-input-text-scu-input-field-default-corner-radius , 2px );\n  border-width: var( --comp-scu-input-text-scu-input-field-default-stroke-weight , 1px );\n  border-style: solid;\n  border-color: var( --comp-scu-input-text-scu-input-field-default-stroke-color , rgba(196,196,196,1) ); \n}",
      "example": "\n<style>\n  #comp-scu-input-text-scu-input-field-default { \n    position: relative;\n    background-color: var( --comp-scu-input-text-scu-input-field-default-background-color , rgba(255,255,255,1) );\n    border-radius: var( --comp-scu-input-text-scu-input-field-default-corner-radius , 2px );\n    border-width: var( --comp-scu-input-text-scu-input-field-default-stroke-weight , 1px );\n    border-style: solid;\n    border-color: var( --comp-scu-input-text-scu-input-field-default-stroke-color , rgba(196,196,196,1) ); \n  }\n</style>\n<div id='comp-scu-input-text-scu-input-field-default'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-input-text-scu-input-field-default--sizing {\n  width: 263px;\n  height: 36px;\n}",
      "example": "\n<style>\n  #comp-scu-input-text-scu-input-field-default { \n    width: 263px;\n    height: 36px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-text-scu-input-field-default'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-input-text-scu-input-field-default--width {\n  width: 263px;\n}",
      "example": "\n<style>\n  #comp-scu-input-text-scu-input-field-default { \n    width: 263px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-text-scu-input-field-default'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-input-text-scu-input-field-default--height {\n  height: 36px;\n}",
      "example": "\n<style>\n  #comp-scu-input-text-scu-input-field-default { \n    height: 36px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-text-scu-input-field-default'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-input-text-scu-input-field-default--figma-autolayout { \n   \n}",
      "example": "\n<style>\n  #comp-scu-input-text-scu-input-field-default { \n     \n  }\n</style>\n<div id='comp-scu-input-text-scu-input-field-default'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-input-text-scu-input-field-default--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-input-text-scu-input-field-default-left , 0px );\n  right: var( --comp-scu-input-text-scu-input-field-default-right , 0px );\n  top: var( --comp-scu-input-text-scu-input-field-default-top , 0px );\n  bottom: var( --comp-scu-input-text-scu-input-field-default-bottom , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-input-text-scu-input-field-default { \n    position: absolute;\n    left: var( --comp-scu-input-text-scu-input-field-default-left , 0px );\n    right: var( --comp-scu-input-text-scu-input-field-default-right , 0px );\n    top: var( --comp-scu-input-text-scu-input-field-default-top , 0px );\n    bottom: var( --comp-scu-input-text-scu-input-field-default-bottom , 0px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-input-text-scu-input-field-default'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-input-text-scu-input-field-default--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-input-text-scu-input-field-default-left , 0px );\n  margin-right: var( --comp-scu-input-text-scu-input-field-default-right , 0px );\n  margin-top: var( --comp-scu-input-text-scu-input-field-default-top , 0px );\n  margin-bottom: var( --comp-scu-input-text-scu-input-field-default-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-input-text-scu-input-field-default-left , 0px ) + var( --comp-scu-input-text-scu-input-field-default-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-input-text-scu-input-field-default { \n    display: inline-block;\n  margin-left: var( --comp-scu-input-text-scu-input-field-default-left , 0px );\n  margin-right: var( --comp-scu-input-text-scu-input-field-default-right , 0px );\n  margin-top: var( --comp-scu-input-text-scu-input-field-default-top , 0px );\n  margin-bottom: var( --comp-scu-input-text-scu-input-field-default-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-input-text-scu-input-field-default-left , 0px ) + var( --comp-scu-input-text-scu-input-field-default-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-text-scu-input-field-default'>content</div>"
    }
  },
  "components-scu-input-text-scu-input-field-default-input-": {
    "": {
      "output": "\n@mixin comp-scu-input-text-scu-input-field-default-input { \n  position: relative;\n  font-size: var( --comp-scu-input-text-scu-input-field-default-input-font-size , 15px );\n  text-align: var( --comp-scu-input-text-scu-input-field-default-input-text-align-horizontal , LEFT );\n  color: var( --comp-scu-input-text-scu-input-field-default-input-color , rgba(0,0,0,1) );\n  font-family: var( --comp-scu-input-text-scu-input-field-default-input-font-family , 'Proxima Nova' );\n  font-weight: var( --comp-scu-input-text-scu-input-field-default-input-font-weight , 400 );\n  line-height: var( --comp-scu-input-text-scu-input-field-default-input-line-height , 17.58px );\n  letter-spacing: var( --comp-scu-input-text-scu-input-field-default-input-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-input-text-scu-input-field-default-input { \n    position: relative;\n    font-size: var( --comp-scu-input-text-scu-input-field-default-input-font-size , 15px );\n    text-align: var( --comp-scu-input-text-scu-input-field-default-input-text-align-horizontal , LEFT );\n    color: var( --comp-scu-input-text-scu-input-field-default-input-color , rgba(0,0,0,1) );\n    font-family: var( --comp-scu-input-text-scu-input-field-default-input-font-family , 'Proxima Nova' );\n    font-weight: var( --comp-scu-input-text-scu-input-field-default-input-font-weight , 400 );\n    line-height: var( --comp-scu-input-text-scu-input-field-default-input-line-height , 17.58px );\n    letter-spacing: var( --comp-scu-input-text-scu-input-field-default-input-letter-spacing , 0px ); \n  }\n</style>\n<div id='comp-scu-input-text-scu-input-field-default-input'></div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-input-text-scu-input-field-default-input--sizing {\n  width: 238px;\n  height: 18px;\n}",
      "example": "\n<style>\n  #comp-scu-input-text-scu-input-field-default-input { \n    width: 238px;\n    height: 18px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-text-scu-input-field-default-input'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-input-text-scu-input-field-default-input--width {\n  width: 238px;\n}",
      "example": "\n<style>\n  #comp-scu-input-text-scu-input-field-default-input { \n    width: 238px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-text-scu-input-field-default-input'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-input-text-scu-input-field-default-input--height {\n  height: 18px;\n}",
      "example": "\n<style>\n  #comp-scu-input-text-scu-input-field-default-input { \n    height: 18px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-text-scu-input-field-default-input'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-input-text-scu-input-field-default-input--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-input-text-scu-input-field-default-input-left , 11px );\n  right: var( --comp-scu-input-text-scu-input-field-default-input-right , 14px );\n  top: var( --comp-scu-input-text-scu-input-field-default-input-top , 10px );\n  bottom: var( --comp-scu-input-text-scu-input-field-default-input-bottom , 8px ); \n}",
      "example": "\n<style>\n  #comp-scu-input-text-scu-input-field-default-input { \n    position: absolute;\n    left: var( --comp-scu-input-text-scu-input-field-default-input-left , 11px );\n    right: var( --comp-scu-input-text-scu-input-field-default-input-right , 14px );\n    top: var( --comp-scu-input-text-scu-input-field-default-input-top , 10px );\n    bottom: var( --comp-scu-input-text-scu-input-field-default-input-bottom , 8px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-input-text-scu-input-field-default-input'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-input-text-scu-input-field-default-input--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-input-text-scu-input-field-default-input-left , 11px );\n  margin-right: var( --comp-scu-input-text-scu-input-field-default-input-right , 14px );\n  margin-top: var( --comp-scu-input-text-scu-input-field-default-input-top , 10px );\n  margin-bottom: var( --comp-scu-input-text-scu-input-field-default-input-bottom , 8px );\n  width: calc( 100% - ( var( --comp-scu-input-text-scu-input-field-default-input-left , 11px ) + var( --comp-scu-input-text-scu-input-field-default-input-right , 14px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-input-text-scu-input-field-default-input { \n    display: inline-block;\n  margin-left: var( --comp-scu-input-text-scu-input-field-default-input-left , 11px );\n  margin-right: var( --comp-scu-input-text-scu-input-field-default-input-right , 14px );\n  margin-top: var( --comp-scu-input-text-scu-input-field-default-input-top , 10px );\n  margin-bottom: var( --comp-scu-input-text-scu-input-field-default-input-bottom , 8px );\n  width: calc( 100% - ( var( --comp-scu-input-text-scu-input-field-default-input-left , 11px ) + var( --comp-scu-input-text-scu-input-field-default-input-right , 14px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-text-scu-input-field-default-input'>content</div>"
    }
  },
  "components-scu-input-text-scu-input-field-default-placeholder-": {
    "": {
      "output": "\n@mixin comp-scu-input-text-scu-input-field-default-placeholder { \n  position: relative;\n  font-size: var( --comp-scu-input-text-scu-input-field-default-placeholder-font-size , 15px );\n  text-align: var( --comp-scu-input-text-scu-input-field-default-placeholder-text-align-horizontal , LEFT );\n  color: var( --comp-scu-input-text-scu-input-field-default-placeholder-color , rgba(89,89,89,1) );\n  font-family: var( --comp-scu-input-text-scu-input-field-default-placeholder-font-family , 'Proxima Nova' );\n  font-weight: var( --comp-scu-input-text-scu-input-field-default-placeholder-font-weight , 400 );\n  line-height: var( --comp-scu-input-text-scu-input-field-default-placeholder-line-height , 17.58px );\n  letter-spacing: var( --comp-scu-input-text-scu-input-field-default-placeholder-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-input-text-scu-input-field-default-placeholder { \n    position: relative;\n    font-size: var( --comp-scu-input-text-scu-input-field-default-placeholder-font-size , 15px );\n    text-align: var( --comp-scu-input-text-scu-input-field-default-placeholder-text-align-horizontal , LEFT );\n    color: var( --comp-scu-input-text-scu-input-field-default-placeholder-color , rgba(89,89,89,1) );\n    font-family: var( --comp-scu-input-text-scu-input-field-default-placeholder-font-family , 'Proxima Nova' );\n    font-weight: var( --comp-scu-input-text-scu-input-field-default-placeholder-font-weight , 400 );\n    line-height: var( --comp-scu-input-text-scu-input-field-default-placeholder-line-height , 17.58px );\n    letter-spacing: var( --comp-scu-input-text-scu-input-field-default-placeholder-letter-spacing , 0px ); \n  }\n</style>\n<div id='comp-scu-input-text-scu-input-field-default-placeholder'></div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-input-text-scu-input-field-default-placeholder--sizing {\n  width: 239px;\n  height: 18px;\n}",
      "example": "\n<style>\n  #comp-scu-input-text-scu-input-field-default-placeholder { \n    width: 239px;\n    height: 18px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-text-scu-input-field-default-placeholder'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-input-text-scu-input-field-default-placeholder--width {\n  width: 239px;\n}",
      "example": "\n<style>\n  #comp-scu-input-text-scu-input-field-default-placeholder { \n    width: 239px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-text-scu-input-field-default-placeholder'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-input-text-scu-input-field-default-placeholder--height {\n  height: 18px;\n}",
      "example": "\n<style>\n  #comp-scu-input-text-scu-input-field-default-placeholder { \n    height: 18px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-text-scu-input-field-default-placeholder'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-input-text-scu-input-field-default-placeholder--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-input-text-scu-input-field-default-placeholder-left , 10px );\n  right: var( --comp-scu-input-text-scu-input-field-default-placeholder-right , 14px );\n  top: var( --comp-scu-input-text-scu-input-field-default-placeholder-top , 10px );\n  bottom: var( --comp-scu-input-text-scu-input-field-default-placeholder-bottom , 8px ); \n}",
      "example": "\n<style>\n  #comp-scu-input-text-scu-input-field-default-placeholder { \n    position: absolute;\n    left: var( --comp-scu-input-text-scu-input-field-default-placeholder-left , 10px );\n    right: var( --comp-scu-input-text-scu-input-field-default-placeholder-right , 14px );\n    top: var( --comp-scu-input-text-scu-input-field-default-placeholder-top , 10px );\n    bottom: var( --comp-scu-input-text-scu-input-field-default-placeholder-bottom , 8px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-input-text-scu-input-field-default-placeholder'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-input-text-scu-input-field-default-placeholder--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-input-text-scu-input-field-default-placeholder-left , 10px );\n  margin-right: var( --comp-scu-input-text-scu-input-field-default-placeholder-right , 14px );\n  margin-top: var( --comp-scu-input-text-scu-input-field-default-placeholder-top , 10px );\n  margin-bottom: var( --comp-scu-input-text-scu-input-field-default-placeholder-bottom , 8px );\n  width: calc( 100% - ( var( --comp-scu-input-text-scu-input-field-default-placeholder-left , 10px ) + var( --comp-scu-input-text-scu-input-field-default-placeholder-right , 14px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-input-text-scu-input-field-default-placeholder { \n    display: inline-block;\n  margin-left: var( --comp-scu-input-text-scu-input-field-default-placeholder-left , 10px );\n  margin-right: var( --comp-scu-input-text-scu-input-field-default-placeholder-right , 14px );\n  margin-top: var( --comp-scu-input-text-scu-input-field-default-placeholder-top , 10px );\n  margin-bottom: var( --comp-scu-input-text-scu-input-field-default-placeholder-bottom , 8px );\n  width: calc( 100% - ( var( --comp-scu-input-text-scu-input-field-default-placeholder-left , 10px ) + var( --comp-scu-input-text-scu-input-field-default-placeholder-right , 14px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-text-scu-input-field-default-placeholder'>content</div>"
    }
  },
  "components-scu-input-text-scu-input-field-error-": {
    "box": {
      "output": "\n@mixin comp-scu-input-text-scu-input-field-error { \n  position: relative;\n  background-color: var( --comp-scu-input-text-scu-input-field-error-background-color , rgba(255,255,255,1) );\n  border-radius: var( --comp-scu-input-text-scu-input-field-error-corner-radius , 2px );\n  border-width: var( --comp-scu-input-text-scu-input-field-error-stroke-weight , 1px );\n  border-style: solid;\n  border-color: var( --comp-scu-input-text-scu-input-field-error-stroke-color , rgba(208,51,57,1) ); \n}",
      "example": "\n<style>\n  #comp-scu-input-text-scu-input-field-error { \n    position: relative;\n    background-color: var( --comp-scu-input-text-scu-input-field-error-background-color , rgba(255,255,255,1) );\n    border-radius: var( --comp-scu-input-text-scu-input-field-error-corner-radius , 2px );\n    border-width: var( --comp-scu-input-text-scu-input-field-error-stroke-weight , 1px );\n    border-style: solid;\n    border-color: var( --comp-scu-input-text-scu-input-field-error-stroke-color , rgba(208,51,57,1) ); \n  }\n</style>\n<div id='comp-scu-input-text-scu-input-field-error'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-input-text-scu-input-field-error--sizing {\n  width: 263px;\n  height: 36px;\n}",
      "example": "\n<style>\n  #comp-scu-input-text-scu-input-field-error { \n    width: 263px;\n    height: 36px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-text-scu-input-field-error'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-input-text-scu-input-field-error--width {\n  width: 263px;\n}",
      "example": "\n<style>\n  #comp-scu-input-text-scu-input-field-error { \n    width: 263px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-text-scu-input-field-error'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-input-text-scu-input-field-error--height {\n  height: 36px;\n}",
      "example": "\n<style>\n  #comp-scu-input-text-scu-input-field-error { \n    height: 36px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-text-scu-input-field-error'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-input-text-scu-input-field-error--figma-autolayout { \n   \n}",
      "example": "\n<style>\n  #comp-scu-input-text-scu-input-field-error { \n     \n  }\n</style>\n<div id='comp-scu-input-text-scu-input-field-error'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-input-text-scu-input-field-error--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-input-text-scu-input-field-error-left , 0px );\n  right: var( --comp-scu-input-text-scu-input-field-error-right , 0px );\n  top: var( --comp-scu-input-text-scu-input-field-error-top , 0px );\n  bottom: var( --comp-scu-input-text-scu-input-field-error-bottom , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-input-text-scu-input-field-error { \n    position: absolute;\n    left: var( --comp-scu-input-text-scu-input-field-error-left , 0px );\n    right: var( --comp-scu-input-text-scu-input-field-error-right , 0px );\n    top: var( --comp-scu-input-text-scu-input-field-error-top , 0px );\n    bottom: var( --comp-scu-input-text-scu-input-field-error-bottom , 0px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-input-text-scu-input-field-error'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-input-text-scu-input-field-error--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-input-text-scu-input-field-error-left , 0px );\n  margin-right: var( --comp-scu-input-text-scu-input-field-error-right , 0px );\n  margin-top: var( --comp-scu-input-text-scu-input-field-error-top , 0px );\n  margin-bottom: var( --comp-scu-input-text-scu-input-field-error-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-input-text-scu-input-field-error-left , 0px ) + var( --comp-scu-input-text-scu-input-field-error-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-input-text-scu-input-field-error { \n    display: inline-block;\n  margin-left: var( --comp-scu-input-text-scu-input-field-error-left , 0px );\n  margin-right: var( --comp-scu-input-text-scu-input-field-error-right , 0px );\n  margin-top: var( --comp-scu-input-text-scu-input-field-error-top , 0px );\n  margin-bottom: var( --comp-scu-input-text-scu-input-field-error-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-input-text-scu-input-field-error-left , 0px ) + var( --comp-scu-input-text-scu-input-field-error-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-text-scu-input-field-error'>content</div>"
    }
  },
  "components-scu-input-text-scu-input-field-error-input-": {
    "": {
      "output": "\n@mixin comp-scu-input-text-scu-input-field-error-input { \n  position: relative;\n  font-size: var( --comp-scu-input-text-scu-input-field-error-input-font-size , 15px );\n  text-align: var( --comp-scu-input-text-scu-input-field-error-input-text-align-horizontal , LEFT );\n  color: var( --comp-scu-input-text-scu-input-field-error-input-color , rgba(0,0,0,1) );\n  font-family: var( --comp-scu-input-text-scu-input-field-error-input-font-family , 'Proxima Nova' );\n  font-weight: var( --comp-scu-input-text-scu-input-field-error-input-font-weight , 400 );\n  line-height: var( --comp-scu-input-text-scu-input-field-error-input-line-height , 17.58px );\n  letter-spacing: var( --comp-scu-input-text-scu-input-field-error-input-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-input-text-scu-input-field-error-input { \n    position: relative;\n    font-size: var( --comp-scu-input-text-scu-input-field-error-input-font-size , 15px );\n    text-align: var( --comp-scu-input-text-scu-input-field-error-input-text-align-horizontal , LEFT );\n    color: var( --comp-scu-input-text-scu-input-field-error-input-color , rgba(0,0,0,1) );\n    font-family: var( --comp-scu-input-text-scu-input-field-error-input-font-family , 'Proxima Nova' );\n    font-weight: var( --comp-scu-input-text-scu-input-field-error-input-font-weight , 400 );\n    line-height: var( --comp-scu-input-text-scu-input-field-error-input-line-height , 17.58px );\n    letter-spacing: var( --comp-scu-input-text-scu-input-field-error-input-letter-spacing , 0px ); \n  }\n</style>\n<div id='comp-scu-input-text-scu-input-field-error-input'></div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-input-text-scu-input-field-error-input--sizing {\n  width: 238px;\n  height: 18px;\n}",
      "example": "\n<style>\n  #comp-scu-input-text-scu-input-field-error-input { \n    width: 238px;\n    height: 18px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-text-scu-input-field-error-input'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-input-text-scu-input-field-error-input--width {\n  width: 238px;\n}",
      "example": "\n<style>\n  #comp-scu-input-text-scu-input-field-error-input { \n    width: 238px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-text-scu-input-field-error-input'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-input-text-scu-input-field-error-input--height {\n  height: 18px;\n}",
      "example": "\n<style>\n  #comp-scu-input-text-scu-input-field-error-input { \n    height: 18px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-text-scu-input-field-error-input'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-input-text-scu-input-field-error-input--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-input-text-scu-input-field-error-input-left , 11px );\n  right: var( --comp-scu-input-text-scu-input-field-error-input-right , 14px );\n  top: var( --comp-scu-input-text-scu-input-field-error-input-top , 10px );\n  bottom: var( --comp-scu-input-text-scu-input-field-error-input-bottom , 8px ); \n}",
      "example": "\n<style>\n  #comp-scu-input-text-scu-input-field-error-input { \n    position: absolute;\n    left: var( --comp-scu-input-text-scu-input-field-error-input-left , 11px );\n    right: var( --comp-scu-input-text-scu-input-field-error-input-right , 14px );\n    top: var( --comp-scu-input-text-scu-input-field-error-input-top , 10px );\n    bottom: var( --comp-scu-input-text-scu-input-field-error-input-bottom , 8px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-input-text-scu-input-field-error-input'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-input-text-scu-input-field-error-input--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-input-text-scu-input-field-error-input-left , 11px );\n  margin-right: var( --comp-scu-input-text-scu-input-field-error-input-right , 14px );\n  margin-top: var( --comp-scu-input-text-scu-input-field-error-input-top , 10px );\n  margin-bottom: var( --comp-scu-input-text-scu-input-field-error-input-bottom , 8px );\n  width: calc( 100% - ( var( --comp-scu-input-text-scu-input-field-error-input-left , 11px ) + var( --comp-scu-input-text-scu-input-field-error-input-right , 14px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-input-text-scu-input-field-error-input { \n    display: inline-block;\n  margin-left: var( --comp-scu-input-text-scu-input-field-error-input-left , 11px );\n  margin-right: var( --comp-scu-input-text-scu-input-field-error-input-right , 14px );\n  margin-top: var( --comp-scu-input-text-scu-input-field-error-input-top , 10px );\n  margin-bottom: var( --comp-scu-input-text-scu-input-field-error-input-bottom , 8px );\n  width: calc( 100% - ( var( --comp-scu-input-text-scu-input-field-error-input-left , 11px ) + var( --comp-scu-input-text-scu-input-field-error-input-right , 14px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-text-scu-input-field-error-input'>content</div>"
    }
  },
  "components-scu-input-text-scu-input-field-error-placeholder-": {
    "": {
      "output": "\n@mixin comp-scu-input-text-scu-input-field-error-placeholder { \n  position: relative;\n  font-size: var( --comp-scu-input-text-scu-input-field-error-placeholder-font-size , 15px );\n  text-align: var( --comp-scu-input-text-scu-input-field-error-placeholder-text-align-horizontal , LEFT );\n  color: var( --comp-scu-input-text-scu-input-field-error-placeholder-color , rgba(89,89,89,1) );\n  font-family: var( --comp-scu-input-text-scu-input-field-error-placeholder-font-family , 'Proxima Nova' );\n  font-weight: var( --comp-scu-input-text-scu-input-field-error-placeholder-font-weight , 400 );\n  line-height: var( --comp-scu-input-text-scu-input-field-error-placeholder-line-height , 17.58px );\n  letter-spacing: var( --comp-scu-input-text-scu-input-field-error-placeholder-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-input-text-scu-input-field-error-placeholder { \n    position: relative;\n    font-size: var( --comp-scu-input-text-scu-input-field-error-placeholder-font-size , 15px );\n    text-align: var( --comp-scu-input-text-scu-input-field-error-placeholder-text-align-horizontal , LEFT );\n    color: var( --comp-scu-input-text-scu-input-field-error-placeholder-color , rgba(89,89,89,1) );\n    font-family: var( --comp-scu-input-text-scu-input-field-error-placeholder-font-family , 'Proxima Nova' );\n    font-weight: var( --comp-scu-input-text-scu-input-field-error-placeholder-font-weight , 400 );\n    line-height: var( --comp-scu-input-text-scu-input-field-error-placeholder-line-height , 17.58px );\n    letter-spacing: var( --comp-scu-input-text-scu-input-field-error-placeholder-letter-spacing , 0px ); \n  }\n</style>\n<div id='comp-scu-input-text-scu-input-field-error-placeholder'></div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-input-text-scu-input-field-error-placeholder--sizing {\n  width: 239px;\n  height: 18px;\n}",
      "example": "\n<style>\n  #comp-scu-input-text-scu-input-field-error-placeholder { \n    width: 239px;\n    height: 18px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-text-scu-input-field-error-placeholder'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-input-text-scu-input-field-error-placeholder--width {\n  width: 239px;\n}",
      "example": "\n<style>\n  #comp-scu-input-text-scu-input-field-error-placeholder { \n    width: 239px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-text-scu-input-field-error-placeholder'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-input-text-scu-input-field-error-placeholder--height {\n  height: 18px;\n}",
      "example": "\n<style>\n  #comp-scu-input-text-scu-input-field-error-placeholder { \n    height: 18px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-text-scu-input-field-error-placeholder'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-input-text-scu-input-field-error-placeholder--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-input-text-scu-input-field-error-placeholder-left , 10px );\n  right: var( --comp-scu-input-text-scu-input-field-error-placeholder-right , 14px );\n  top: var( --comp-scu-input-text-scu-input-field-error-placeholder-top , 10px );\n  bottom: var( --comp-scu-input-text-scu-input-field-error-placeholder-bottom , 8px ); \n}",
      "example": "\n<style>\n  #comp-scu-input-text-scu-input-field-error-placeholder { \n    position: absolute;\n    left: var( --comp-scu-input-text-scu-input-field-error-placeholder-left , 10px );\n    right: var( --comp-scu-input-text-scu-input-field-error-placeholder-right , 14px );\n    top: var( --comp-scu-input-text-scu-input-field-error-placeholder-top , 10px );\n    bottom: var( --comp-scu-input-text-scu-input-field-error-placeholder-bottom , 8px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-input-text-scu-input-field-error-placeholder'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-input-text-scu-input-field-error-placeholder--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-input-text-scu-input-field-error-placeholder-left , 10px );\n  margin-right: var( --comp-scu-input-text-scu-input-field-error-placeholder-right , 14px );\n  margin-top: var( --comp-scu-input-text-scu-input-field-error-placeholder-top , 10px );\n  margin-bottom: var( --comp-scu-input-text-scu-input-field-error-placeholder-bottom , 8px );\n  width: calc( 100% - ( var( --comp-scu-input-text-scu-input-field-error-placeholder-left , 10px ) + var( --comp-scu-input-text-scu-input-field-error-placeholder-right , 14px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-input-text-scu-input-field-error-placeholder { \n    display: inline-block;\n  margin-left: var( --comp-scu-input-text-scu-input-field-error-placeholder-left , 10px );\n  margin-right: var( --comp-scu-input-text-scu-input-field-error-placeholder-right , 14px );\n  margin-top: var( --comp-scu-input-text-scu-input-field-error-placeholder-top , 10px );\n  margin-bottom: var( --comp-scu-input-text-scu-input-field-error-placeholder-bottom , 8px );\n  width: calc( 100% - ( var( --comp-scu-input-text-scu-input-field-error-placeholder-left , 10px ) + var( --comp-scu-input-text-scu-input-field-error-placeholder-right , 14px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-text-scu-input-field-error-placeholder'>content</div>"
    }
  },
  "components-scu-input-text-scu-input-error-": {
    "box": {
      "output": "\n@mixin comp-scu-input-text-scu-input-error { \n  position: relative;\n  background-color: var( --comp-scu-input-text-scu-input-error-background-color , rgba(255,255,255,1) ); \n}",
      "example": "\n<style>\n  #comp-scu-input-text-scu-input-error { \n    position: relative;\n    background-color: var( --comp-scu-input-text-scu-input-error-background-color , rgba(255,255,255,1) ); \n  }\n</style>\n<div id='comp-scu-input-text-scu-input-error'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-input-text-scu-input-error--sizing {\n  width: 263px;\n  height: 15px;\n}",
      "example": "\n<style>\n  #comp-scu-input-text-scu-input-error { \n    width: 263px;\n    height: 15px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-text-scu-input-error'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-input-text-scu-input-error--width {\n  width: 263px;\n}",
      "example": "\n<style>\n  #comp-scu-input-text-scu-input-error { \n    width: 263px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-text-scu-input-error'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-input-text-scu-input-error--height {\n  height: 15px;\n}",
      "example": "\n<style>\n  #comp-scu-input-text-scu-input-error { \n    height: 15px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-text-scu-input-error'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-input-text-scu-input-error--figma-autolayout { \n   \n}",
      "example": "\n<style>\n  #comp-scu-input-text-scu-input-error { \n     \n  }\n</style>\n<div id='comp-scu-input-text-scu-input-error'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-input-text-scu-input-error--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-input-text-scu-input-error-left , 0px );\n  right: var( --comp-scu-input-text-scu-input-error-right , 0px );\n  bottom: var( --comp-scu-input-text-scu-input-error-bottom , 0px );\n  height: var( --comp-scu-input-text-scu-input-error-height , 15px ); \n}",
      "example": "\n<style>\n  #comp-scu-input-text-scu-input-error { \n    position: absolute;\n    left: var( --comp-scu-input-text-scu-input-error-left , 0px );\n    right: var( --comp-scu-input-text-scu-input-error-right , 0px );\n    bottom: var( --comp-scu-input-text-scu-input-error-bottom , 0px );\n    height: var( --comp-scu-input-text-scu-input-error-height , 15px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-input-text-scu-input-error'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-input-text-scu-input-error--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-input-text-scu-input-error-left , 0px );\n  margin-right: var( --comp-scu-input-text-scu-input-error-right , 0px );\n  margin-top: var( --comp-scu-input-text-scu-input-error-top , 57px );\n  margin-bottom: var( --comp-scu-input-text-scu-input-error-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-input-text-scu-input-error-left , 0px ) + var( --comp-scu-input-text-scu-input-error-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-input-text-scu-input-error { \n    display: inline-block;\n  margin-left: var( --comp-scu-input-text-scu-input-error-left , 0px );\n  margin-right: var( --comp-scu-input-text-scu-input-error-right , 0px );\n  margin-top: var( --comp-scu-input-text-scu-input-error-top , 57px );\n  margin-bottom: var( --comp-scu-input-text-scu-input-error-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-input-text-scu-input-error-left , 0px ) + var( --comp-scu-input-text-scu-input-error-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-text-scu-input-error'>content</div>"
    }
  },
  "components-scu-input-text-scu-input-error-error-": {
    "": {
      "output": "\n@mixin comp-scu-input-text-scu-input-error-error { \n  position: relative;\n  font-size: var( --comp-scu-input-text-scu-input-error-error-font-size , 12px );\n  text-align: var( --comp-scu-input-text-scu-input-error-error-text-align-horizontal , LEFT );\n  color: var( --comp-scu-input-text-scu-input-error-error-color , rgba(208,51,57,1) );\n  font-family: var( --comp-scu-input-text-scu-input-error-error-font-family , 'Proxima Nova' );\n  font-weight: var( --comp-scu-input-text-scu-input-error-error-font-weight , 400 );\n  line-height: var( --comp-scu-input-text-scu-input-error-error-line-height , 14.06px );\n  letter-spacing: var( --comp-scu-input-text-scu-input-error-error-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-input-text-scu-input-error-error { \n    position: relative;\n    font-size: var( --comp-scu-input-text-scu-input-error-error-font-size , 12px );\n    text-align: var( --comp-scu-input-text-scu-input-error-error-text-align-horizontal , LEFT );\n    color: var( --comp-scu-input-text-scu-input-error-error-color , rgba(208,51,57,1) );\n    font-family: var( --comp-scu-input-text-scu-input-error-error-font-family , 'Proxima Nova' );\n    font-weight: var( --comp-scu-input-text-scu-input-error-error-font-weight , 400 );\n    line-height: var( --comp-scu-input-text-scu-input-error-error-line-height , 14.06px );\n    letter-spacing: var( --comp-scu-input-text-scu-input-error-error-letter-spacing , 0px ); \n  }\n</style>\n<div id='comp-scu-input-text-scu-input-error-error'></div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-input-text-scu-input-error-error--sizing {\n  width: 263px;\n  height: 15px;\n}",
      "example": "\n<style>\n  #comp-scu-input-text-scu-input-error-error { \n    width: 263px;\n    height: 15px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-text-scu-input-error-error'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-input-text-scu-input-error-error--width {\n  width: 263px;\n}",
      "example": "\n<style>\n  #comp-scu-input-text-scu-input-error-error { \n    width: 263px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-text-scu-input-error-error'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-input-text-scu-input-error-error--height {\n  height: 15px;\n}",
      "example": "\n<style>\n  #comp-scu-input-text-scu-input-error-error { \n    height: 15px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-text-scu-input-error-error'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-input-text-scu-input-error-error--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-input-text-scu-input-error-error-left , 0px );\n  right: var( --comp-scu-input-text-scu-input-error-error-right , 0px );\n  top: var( --comp-scu-input-text-scu-input-error-error-top , 0px );\n  bottom: var( --comp-scu-input-text-scu-input-error-error-bottom , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-input-text-scu-input-error-error { \n    position: absolute;\n    left: var( --comp-scu-input-text-scu-input-error-error-left , 0px );\n    right: var( --comp-scu-input-text-scu-input-error-error-right , 0px );\n    top: var( --comp-scu-input-text-scu-input-error-error-top , 0px );\n    bottom: var( --comp-scu-input-text-scu-input-error-error-bottom , 0px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-input-text-scu-input-error-error'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-input-text-scu-input-error-error--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-input-text-scu-input-error-error-left , 0px );\n  margin-right: var( --comp-scu-input-text-scu-input-error-error-right , 0px );\n  margin-top: var( --comp-scu-input-text-scu-input-error-error-top , 0px );\n  margin-bottom: var( --comp-scu-input-text-scu-input-error-error-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-input-text-scu-input-error-error-left , 0px ) + var( --comp-scu-input-text-scu-input-error-error-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-input-text-scu-input-error-error { \n    display: inline-block;\n  margin-left: var( --comp-scu-input-text-scu-input-error-error-left , 0px );\n  margin-right: var( --comp-scu-input-text-scu-input-error-error-right , 0px );\n  margin-top: var( --comp-scu-input-text-scu-input-error-error-top , 0px );\n  margin-bottom: var( --comp-scu-input-text-scu-input-error-error-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-input-text-scu-input-error-error-left , 0px ) + var( --comp-scu-input-text-scu-input-error-error-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-text-scu-input-error-error'>content</div>"
    }
  },
  "components-scu-input-text-scu-input-label-": {
    "box": {
      "output": "\n@mixin comp-scu-input-text-scu-input-label { \n  position: relative;\n  background-color: var( --comp-scu-input-text-scu-input-label-background-color , rgba(255,255,255,1) ); \n}",
      "example": "\n<style>\n  #comp-scu-input-text-scu-input-label { \n    position: relative;\n    background-color: var( --comp-scu-input-text-scu-input-label-background-color , rgba(255,255,255,1) ); \n  }\n</style>\n<div id='comp-scu-input-text-scu-input-label'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-input-text-scu-input-label--sizing {\n  width: 263px;\n  height: 15px;\n}",
      "example": "\n<style>\n  #comp-scu-input-text-scu-input-label { \n    width: 263px;\n    height: 15px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-text-scu-input-label'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-input-text-scu-input-label--width {\n  width: 263px;\n}",
      "example": "\n<style>\n  #comp-scu-input-text-scu-input-label { \n    width: 263px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-text-scu-input-label'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-input-text-scu-input-label--height {\n  height: 15px;\n}",
      "example": "\n<style>\n  #comp-scu-input-text-scu-input-label { \n    height: 15px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-text-scu-input-label'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-input-text-scu-input-label--figma-autolayout { \n   \n}",
      "example": "\n<style>\n  #comp-scu-input-text-scu-input-label { \n     \n  }\n</style>\n<div id='comp-scu-input-text-scu-input-label'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-input-text-scu-input-label--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-input-text-scu-input-label-left , 0px );\n  right: var( --comp-scu-input-text-scu-input-label-right , 0px );\n  top: var( --comp-scu-input-text-scu-input-label-top , 0px );\n  height: var( --comp-scu-input-text-scu-input-label-height , 15px ); \n}",
      "example": "\n<style>\n  #comp-scu-input-text-scu-input-label { \n    position: absolute;\n    left: var( --comp-scu-input-text-scu-input-label-left , 0px );\n    right: var( --comp-scu-input-text-scu-input-label-right , 0px );\n    top: var( --comp-scu-input-text-scu-input-label-top , 0px );\n    height: var( --comp-scu-input-text-scu-input-label-height , 15px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-input-text-scu-input-label'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-input-text-scu-input-label--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-input-text-scu-input-label-left , 0px );\n  margin-right: var( --comp-scu-input-text-scu-input-label-right , 0px );\n  margin-top: var( --comp-scu-input-text-scu-input-label-top , 0px );\n  margin-bottom: var( --comp-scu-input-text-scu-input-label-bottom , 57px );\n  width: calc( 100% - ( var( --comp-scu-input-text-scu-input-label-left , 0px ) + var( --comp-scu-input-text-scu-input-label-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-input-text-scu-input-label { \n    display: inline-block;\n  margin-left: var( --comp-scu-input-text-scu-input-label-left , 0px );\n  margin-right: var( --comp-scu-input-text-scu-input-label-right , 0px );\n  margin-top: var( --comp-scu-input-text-scu-input-label-top , 0px );\n  margin-bottom: var( --comp-scu-input-text-scu-input-label-bottom , 57px );\n  width: calc( 100% - ( var( --comp-scu-input-text-scu-input-label-left , 0px ) + var( --comp-scu-input-text-scu-input-label-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-text-scu-input-label'>content</div>"
    }
  },
  "components-scu-input-text-scu-input-label-label-": {
    "": {
      "output": "\n@mixin comp-scu-input-text-scu-input-label-label { \n  position: relative;\n  font-size: var( --comp-scu-input-text-scu-input-label-label-font-size , 12px );\n  text-align: var( --comp-scu-input-text-scu-input-label-label-text-align-horizontal , LEFT );\n  color: var( --comp-scu-input-text-scu-input-label-label-color , rgba(0,0,0,1) );\n  font-family: var( --comp-scu-input-text-scu-input-label-label-font-family , 'Proxima Nova' );\n  font-weight: var( --comp-scu-input-text-scu-input-label-label-font-weight , 700 );\n  line-height: var( --comp-scu-input-text-scu-input-label-label-line-height , 14.06px );\n  letter-spacing: var( --comp-scu-input-text-scu-input-label-label-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-input-text-scu-input-label-label { \n    position: relative;\n    font-size: var( --comp-scu-input-text-scu-input-label-label-font-size , 12px );\n    text-align: var( --comp-scu-input-text-scu-input-label-label-text-align-horizontal , LEFT );\n    color: var( --comp-scu-input-text-scu-input-label-label-color , rgba(0,0,0,1) );\n    font-family: var( --comp-scu-input-text-scu-input-label-label-font-family , 'Proxima Nova' );\n    font-weight: var( --comp-scu-input-text-scu-input-label-label-font-weight , 700 );\n    line-height: var( --comp-scu-input-text-scu-input-label-label-line-height , 14.06px );\n    letter-spacing: var( --comp-scu-input-text-scu-input-label-label-letter-spacing , 0px ); \n  }\n</style>\n<div id='comp-scu-input-text-scu-input-label-label'></div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-input-text-scu-input-label-label--sizing {\n  width: 263px;\n  height: 15px;\n}",
      "example": "\n<style>\n  #comp-scu-input-text-scu-input-label-label { \n    width: 263px;\n    height: 15px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-text-scu-input-label-label'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-input-text-scu-input-label-label--width {\n  width: 263px;\n}",
      "example": "\n<style>\n  #comp-scu-input-text-scu-input-label-label { \n    width: 263px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-text-scu-input-label-label'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-input-text-scu-input-label-label--height {\n  height: 15px;\n}",
      "example": "\n<style>\n  #comp-scu-input-text-scu-input-label-label { \n    height: 15px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-text-scu-input-label-label'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-input-text-scu-input-label-label--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-input-text-scu-input-label-label-left , 0px );\n  right: var( --comp-scu-input-text-scu-input-label-label-right , 0px );\n  top: var( --comp-scu-input-text-scu-input-label-label-top , 0px );\n  bottom: var( --comp-scu-input-text-scu-input-label-label-bottom , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-input-text-scu-input-label-label { \n    position: absolute;\n    left: var( --comp-scu-input-text-scu-input-label-label-left , 0px );\n    right: var( --comp-scu-input-text-scu-input-label-label-right , 0px );\n    top: var( --comp-scu-input-text-scu-input-label-label-top , 0px );\n    bottom: var( --comp-scu-input-text-scu-input-label-label-bottom , 0px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-input-text-scu-input-label-label'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-input-text-scu-input-label-label--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-input-text-scu-input-label-label-left , 0px );\n  margin-right: var( --comp-scu-input-text-scu-input-label-label-right , 0px );\n  margin-top: var( --comp-scu-input-text-scu-input-label-label-top , 0px );\n  margin-bottom: var( --comp-scu-input-text-scu-input-label-label-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-input-text-scu-input-label-label-left , 0px ) + var( --comp-scu-input-text-scu-input-label-label-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-input-text-scu-input-label-label { \n    display: inline-block;\n  margin-left: var( --comp-scu-input-text-scu-input-label-label-left , 0px );\n  margin-right: var( --comp-scu-input-text-scu-input-label-label-right , 0px );\n  margin-top: var( --comp-scu-input-text-scu-input-label-label-top , 0px );\n  margin-bottom: var( --comp-scu-input-text-scu-input-label-label-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-input-text-scu-input-label-label-left , 0px ) + var( --comp-scu-input-text-scu-input-label-label-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-text-scu-input-label-label'>content</div>"
    }
  },
  "components-scu-input-textarea-": {
    "box": {
      "output": "\n@mixin comp-scu-input-textarea { \n  position: relative; \n}",
      "example": "\n<style>\n  #comp-scu-input-textarea { \n    position: relative; \n  }\n</style>\n<div id='comp-scu-input-textarea'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-input-textarea--sizing {\n  width: 285px;\n  height: 128px;\n}",
      "example": "\n<style>\n  #comp-scu-input-textarea { \n    width: 285px;\n    height: 128px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-textarea'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-input-textarea--width {\n  width: 285px;\n}",
      "example": "\n<style>\n  #comp-scu-input-textarea { \n    width: 285px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-textarea'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-input-textarea--height {\n  height: 128px;\n}",
      "example": "\n<style>\n  #comp-scu-input-textarea { \n    height: 128px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-textarea'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-input-textarea--figma-autolayout { \n   \n}",
      "example": "\n<style>\n  #comp-scu-input-textarea { \n     \n  }\n</style>\n<div id='comp-scu-input-textarea'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-input-textarea--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #comp-scu-input-textarea { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-input-textarea'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-input-textarea--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-input-textarea-left , 0px );\n  margin-right: var( --comp-scu-input-textarea-right , 0px );\n  margin-top: var( --comp-scu-input-textarea-top , 0px );\n  margin-bottom: var( --comp-scu-input-textarea-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-input-textarea-left , 0px ) + var( --comp-scu-input-textarea-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-input-textarea { \n    display: inline-block;\n  margin-left: var( --comp-scu-input-textarea-left , 0px );\n  margin-right: var( --comp-scu-input-textarea-right , 0px );\n  margin-top: var( --comp-scu-input-textarea-top , 0px );\n  margin-bottom: var( --comp-scu-input-textarea-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-input-textarea-left , 0px ) + var( --comp-scu-input-textarea-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-textarea'>content</div>"
    }
  },
  "components-scu-input-textarea-label-": {
    "": {
      "output": "\n@mixin comp-scu-input-textarea-label { \n  position: relative;\n  font-size: var( --comp-scu-input-textarea-label-font-size , 12px );\n  text-align: var( --comp-scu-input-textarea-label-text-align-horizontal , LEFT );\n  color: var( --comp-scu-input-textarea-label-color , rgba(54,54,54,1) );\n  font-family: var( --comp-scu-input-textarea-label-font-family , 'Proxima Nova' );\n  font-weight: var( --comp-scu-input-textarea-label-font-weight , 700 );\n  line-height: var( --comp-scu-input-textarea-label-line-height , 14.06px );\n  letter-spacing: var( --comp-scu-input-textarea-label-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-input-textarea-label { \n    position: relative;\n    font-size: var( --comp-scu-input-textarea-label-font-size , 12px );\n    text-align: var( --comp-scu-input-textarea-label-text-align-horizontal , LEFT );\n    color: var( --comp-scu-input-textarea-label-color , rgba(54,54,54,1) );\n    font-family: var( --comp-scu-input-textarea-label-font-family , 'Proxima Nova' );\n    font-weight: var( --comp-scu-input-textarea-label-font-weight , 700 );\n    line-height: var( --comp-scu-input-textarea-label-line-height , 14.06px );\n    letter-spacing: var( --comp-scu-input-textarea-label-letter-spacing , 0px ); \n  }\n</style>\n<div id='comp-scu-input-textarea-label'></div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-input-textarea-label--sizing {\n  width: 285px;\n  height: 15px;\n}",
      "example": "\n<style>\n  #comp-scu-input-textarea-label { \n    width: 285px;\n    height: 15px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-textarea-label'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-input-textarea-label--width {\n  width: 285px;\n}",
      "example": "\n<style>\n  #comp-scu-input-textarea-label { \n    width: 285px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-textarea-label'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-input-textarea-label--height {\n  height: 15px;\n}",
      "example": "\n<style>\n  #comp-scu-input-textarea-label { \n    height: 15px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-textarea-label'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-input-textarea-label--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-input-textarea-label-left , 0px );\n  right: var( --comp-scu-input-textarea-label-right , 0px );\n  top: var( --comp-scu-input-textarea-label-top , 0px );\n  height: var( --comp-scu-input-textarea-label-height , 15px ); \n}",
      "example": "\n<style>\n  #comp-scu-input-textarea-label { \n    position: absolute;\n    left: var( --comp-scu-input-textarea-label-left , 0px );\n    right: var( --comp-scu-input-textarea-label-right , 0px );\n    top: var( --comp-scu-input-textarea-label-top , 0px );\n    height: var( --comp-scu-input-textarea-label-height , 15px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-input-textarea-label'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-input-textarea-label--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-input-textarea-label-left , 0px );\n  margin-right: var( --comp-scu-input-textarea-label-right , 0px );\n  margin-top: var( --comp-scu-input-textarea-label-top , 0px );\n  margin-bottom: var( --comp-scu-input-textarea-label-bottom , 113px );\n  width: calc( 100% - ( var( --comp-scu-input-textarea-label-left , 0px ) + var( --comp-scu-input-textarea-label-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-input-textarea-label { \n    display: inline-block;\n  margin-left: var( --comp-scu-input-textarea-label-left , 0px );\n  margin-right: var( --comp-scu-input-textarea-label-right , 0px );\n  margin-top: var( --comp-scu-input-textarea-label-top , 0px );\n  margin-bottom: var( --comp-scu-input-textarea-label-bottom , 113px );\n  width: calc( 100% - ( var( --comp-scu-input-textarea-label-left , 0px ) + var( --comp-scu-input-textarea-label-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-textarea-label'>content</div>"
    }
  },
  "components-scu-input-textarea-scu-input-error-": {
    "box": {
      "output": "\n@mixin comp-scu-input-textarea-scu-input-error { \n  position: relative;\n  background-color: var( --comp-scu-input-textarea-scu-input-error-background-color , rgba(255,255,255,1) ); \n}",
      "example": "\n<style>\n  #comp-scu-input-textarea-scu-input-error { \n    position: relative;\n    background-color: var( --comp-scu-input-textarea-scu-input-error-background-color , rgba(255,255,255,1) ); \n  }\n</style>\n<div id='comp-scu-input-textarea-scu-input-error'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-input-textarea-scu-input-error--sizing {\n  width: 285px;\n  height: 15px;\n}",
      "example": "\n<style>\n  #comp-scu-input-textarea-scu-input-error { \n    width: 285px;\n    height: 15px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-textarea-scu-input-error'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-input-textarea-scu-input-error--width {\n  width: 285px;\n}",
      "example": "\n<style>\n  #comp-scu-input-textarea-scu-input-error { \n    width: 285px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-textarea-scu-input-error'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-input-textarea-scu-input-error--height {\n  height: 15px;\n}",
      "example": "\n<style>\n  #comp-scu-input-textarea-scu-input-error { \n    height: 15px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-textarea-scu-input-error'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-input-textarea-scu-input-error--figma-autolayout { \n   \n}",
      "example": "\n<style>\n  #comp-scu-input-textarea-scu-input-error { \n     \n  }\n</style>\n<div id='comp-scu-input-textarea-scu-input-error'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-input-textarea-scu-input-error--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-input-textarea-scu-input-error-left , 0px );\n  right: var( --comp-scu-input-textarea-scu-input-error-right , 0px );\n  bottom: var( --comp-scu-input-textarea-scu-input-error-bottom , 0px );\n  height: var( --comp-scu-input-textarea-scu-input-error-height , 15px ); \n}",
      "example": "\n<style>\n  #comp-scu-input-textarea-scu-input-error { \n    position: absolute;\n    left: var( --comp-scu-input-textarea-scu-input-error-left , 0px );\n    right: var( --comp-scu-input-textarea-scu-input-error-right , 0px );\n    bottom: var( --comp-scu-input-textarea-scu-input-error-bottom , 0px );\n    height: var( --comp-scu-input-textarea-scu-input-error-height , 15px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-input-textarea-scu-input-error'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-input-textarea-scu-input-error--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-input-textarea-scu-input-error-left , 0px );\n  margin-right: var( --comp-scu-input-textarea-scu-input-error-right , 0px );\n  margin-top: var( --comp-scu-input-textarea-scu-input-error-top , 113px );\n  margin-bottom: var( --comp-scu-input-textarea-scu-input-error-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-input-textarea-scu-input-error-left , 0px ) + var( --comp-scu-input-textarea-scu-input-error-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-input-textarea-scu-input-error { \n    display: inline-block;\n  margin-left: var( --comp-scu-input-textarea-scu-input-error-left , 0px );\n  margin-right: var( --comp-scu-input-textarea-scu-input-error-right , 0px );\n  margin-top: var( --comp-scu-input-textarea-scu-input-error-top , 113px );\n  margin-bottom: var( --comp-scu-input-textarea-scu-input-error-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-input-textarea-scu-input-error-left , 0px ) + var( --comp-scu-input-textarea-scu-input-error-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-textarea-scu-input-error'>content</div>"
    }
  },
  "components-scu-input-textarea-scu-input-error-error-": {
    "": {
      "output": "\n@mixin comp-scu-input-textarea-scu-input-error-error { \n  position: relative;\n  font-size: var( --comp-scu-input-textarea-scu-input-error-error-font-size , 12px );\n  text-align: var( --comp-scu-input-textarea-scu-input-error-error-text-align-horizontal , LEFT );\n  color: var( --comp-scu-input-textarea-scu-input-error-error-color , rgba(208,51,57,1) );\n  font-family: var( --comp-scu-input-textarea-scu-input-error-error-font-family , 'Proxima Nova' );\n  font-weight: var( --comp-scu-input-textarea-scu-input-error-error-font-weight , 400 );\n  line-height: var( --comp-scu-input-textarea-scu-input-error-error-line-height , 14.06px );\n  letter-spacing: var( --comp-scu-input-textarea-scu-input-error-error-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-input-textarea-scu-input-error-error { \n    position: relative;\n    font-size: var( --comp-scu-input-textarea-scu-input-error-error-font-size , 12px );\n    text-align: var( --comp-scu-input-textarea-scu-input-error-error-text-align-horizontal , LEFT );\n    color: var( --comp-scu-input-textarea-scu-input-error-error-color , rgba(208,51,57,1) );\n    font-family: var( --comp-scu-input-textarea-scu-input-error-error-font-family , 'Proxima Nova' );\n    font-weight: var( --comp-scu-input-textarea-scu-input-error-error-font-weight , 400 );\n    line-height: var( --comp-scu-input-textarea-scu-input-error-error-line-height , 14.06px );\n    letter-spacing: var( --comp-scu-input-textarea-scu-input-error-error-letter-spacing , 0px ); \n  }\n</style>\n<div id='comp-scu-input-textarea-scu-input-error-error'></div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-input-textarea-scu-input-error-error--sizing {\n  width: 285px;\n  height: 15px;\n}",
      "example": "\n<style>\n  #comp-scu-input-textarea-scu-input-error-error { \n    width: 285px;\n    height: 15px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-textarea-scu-input-error-error'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-input-textarea-scu-input-error-error--width {\n  width: 285px;\n}",
      "example": "\n<style>\n  #comp-scu-input-textarea-scu-input-error-error { \n    width: 285px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-textarea-scu-input-error-error'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-input-textarea-scu-input-error-error--height {\n  height: 15px;\n}",
      "example": "\n<style>\n  #comp-scu-input-textarea-scu-input-error-error { \n    height: 15px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-textarea-scu-input-error-error'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-input-textarea-scu-input-error-error--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-input-textarea-scu-input-error-error-left , 0px );\n  right: var( --comp-scu-input-textarea-scu-input-error-error-right , 0px );\n  top: var( --comp-scu-input-textarea-scu-input-error-error-top , 0px );\n  bottom: var( --comp-scu-input-textarea-scu-input-error-error-bottom , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-input-textarea-scu-input-error-error { \n    position: absolute;\n    left: var( --comp-scu-input-textarea-scu-input-error-error-left , 0px );\n    right: var( --comp-scu-input-textarea-scu-input-error-error-right , 0px );\n    top: var( --comp-scu-input-textarea-scu-input-error-error-top , 0px );\n    bottom: var( --comp-scu-input-textarea-scu-input-error-error-bottom , 0px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-input-textarea-scu-input-error-error'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-input-textarea-scu-input-error-error--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-input-textarea-scu-input-error-error-left , 0px );\n  margin-right: var( --comp-scu-input-textarea-scu-input-error-error-right , 0px );\n  margin-top: var( --comp-scu-input-textarea-scu-input-error-error-top , 0px );\n  margin-bottom: var( --comp-scu-input-textarea-scu-input-error-error-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-input-textarea-scu-input-error-error-left , 0px ) + var( --comp-scu-input-textarea-scu-input-error-error-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-input-textarea-scu-input-error-error { \n    display: inline-block;\n  margin-left: var( --comp-scu-input-textarea-scu-input-error-error-left , 0px );\n  margin-right: var( --comp-scu-input-textarea-scu-input-error-error-right , 0px );\n  margin-top: var( --comp-scu-input-textarea-scu-input-error-error-top , 0px );\n  margin-bottom: var( --comp-scu-input-textarea-scu-input-error-error-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-input-textarea-scu-input-error-error-left , 0px ) + var( --comp-scu-input-textarea-scu-input-error-error-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-textarea-scu-input-error-error'>content</div>"
    }
  },
  "components-scu-input-textarea-scu-input-field-": {
    "box": {
      "output": "\n@mixin comp-scu-input-textarea-scu-input-field { \n  position: relative;\n  background-color: var( --comp-scu-input-textarea-scu-input-field-background-color , rgba(255,255,255,1) ); \n}",
      "example": "\n<style>\n  #comp-scu-input-textarea-scu-input-field { \n    position: relative;\n    background-color: var( --comp-scu-input-textarea-scu-input-field-background-color , rgba(255,255,255,1) ); \n  }\n</style>\n<div id='comp-scu-input-textarea-scu-input-field'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-input-textarea-scu-input-field--sizing {\n  width: 285px;\n  height: 92px;\n}",
      "example": "\n<style>\n  #comp-scu-input-textarea-scu-input-field { \n    width: 285px;\n    height: 92px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-textarea-scu-input-field'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-input-textarea-scu-input-field--width {\n  width: 285px;\n}",
      "example": "\n<style>\n  #comp-scu-input-textarea-scu-input-field { \n    width: 285px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-textarea-scu-input-field'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-input-textarea-scu-input-field--height {\n  height: 92px;\n}",
      "example": "\n<style>\n  #comp-scu-input-textarea-scu-input-field { \n    height: 92px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-textarea-scu-input-field'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-input-textarea-scu-input-field--figma-autolayout { \n   \n}",
      "example": "\n<style>\n  #comp-scu-input-textarea-scu-input-field { \n     \n  }\n</style>\n<div id='comp-scu-input-textarea-scu-input-field'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-input-textarea-scu-input-field--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-input-textarea-scu-input-field-left , 0px );\n  right: var( --comp-scu-input-textarea-scu-input-field-right , 0px );\n  top: var( --comp-scu-input-textarea-scu-input-field-top , 18px );\n  bottom: var( --comp-scu-input-textarea-scu-input-field-bottom , 18px ); \n}",
      "example": "\n<style>\n  #comp-scu-input-textarea-scu-input-field { \n    position: absolute;\n    left: var( --comp-scu-input-textarea-scu-input-field-left , 0px );\n    right: var( --comp-scu-input-textarea-scu-input-field-right , 0px );\n    top: var( --comp-scu-input-textarea-scu-input-field-top , 18px );\n    bottom: var( --comp-scu-input-textarea-scu-input-field-bottom , 18px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-input-textarea-scu-input-field'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-input-textarea-scu-input-field--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-input-textarea-scu-input-field-left , 0px );\n  margin-right: var( --comp-scu-input-textarea-scu-input-field-right , 0px );\n  margin-top: var( --comp-scu-input-textarea-scu-input-field-top , 18px );\n  margin-bottom: var( --comp-scu-input-textarea-scu-input-field-bottom , 18px );\n  width: calc( 100% - ( var( --comp-scu-input-textarea-scu-input-field-left , 0px ) + var( --comp-scu-input-textarea-scu-input-field-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-input-textarea-scu-input-field { \n    display: inline-block;\n  margin-left: var( --comp-scu-input-textarea-scu-input-field-left , 0px );\n  margin-right: var( --comp-scu-input-textarea-scu-input-field-right , 0px );\n  margin-top: var( --comp-scu-input-textarea-scu-input-field-top , 18px );\n  margin-bottom: var( --comp-scu-input-textarea-scu-input-field-bottom , 18px );\n  width: calc( 100% - ( var( --comp-scu-input-textarea-scu-input-field-left , 0px ) + var( --comp-scu-input-textarea-scu-input-field-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-textarea-scu-input-field'>content</div>"
    }
  },
  "components-scu-input-textarea-scu-input-field-default-": {
    "box": {
      "output": "\n@mixin comp-scu-input-textarea-scu-input-field-default { \n  position: relative;\n  background-color: var( --comp-scu-input-textarea-scu-input-field-default-background-color , rgba(255,255,255,1) );\n  border-radius: var( --comp-scu-input-textarea-scu-input-field-default-corner-radius , 2px );\n  border-width: var( --comp-scu-input-textarea-scu-input-field-default-stroke-weight , 1px );\n  border-style: solid;\n  border-color: var( --comp-scu-input-textarea-scu-input-field-default-stroke-color , rgba(196,196,196,1) ); \n}",
      "example": "\n<style>\n  #comp-scu-input-textarea-scu-input-field-default { \n    position: relative;\n    background-color: var( --comp-scu-input-textarea-scu-input-field-default-background-color , rgba(255,255,255,1) );\n    border-radius: var( --comp-scu-input-textarea-scu-input-field-default-corner-radius , 2px );\n    border-width: var( --comp-scu-input-textarea-scu-input-field-default-stroke-weight , 1px );\n    border-style: solid;\n    border-color: var( --comp-scu-input-textarea-scu-input-field-default-stroke-color , rgba(196,196,196,1) ); \n  }\n</style>\n<div id='comp-scu-input-textarea-scu-input-field-default'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-input-textarea-scu-input-field-default--sizing {\n  width: 285px;\n  height: 92px;\n}",
      "example": "\n<style>\n  #comp-scu-input-textarea-scu-input-field-default { \n    width: 285px;\n    height: 92px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-textarea-scu-input-field-default'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-input-textarea-scu-input-field-default--width {\n  width: 285px;\n}",
      "example": "\n<style>\n  #comp-scu-input-textarea-scu-input-field-default { \n    width: 285px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-textarea-scu-input-field-default'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-input-textarea-scu-input-field-default--height {\n  height: 92px;\n}",
      "example": "\n<style>\n  #comp-scu-input-textarea-scu-input-field-default { \n    height: 92px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-textarea-scu-input-field-default'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-input-textarea-scu-input-field-default--figma-autolayout { \n   \n}",
      "example": "\n<style>\n  #comp-scu-input-textarea-scu-input-field-default { \n     \n  }\n</style>\n<div id='comp-scu-input-textarea-scu-input-field-default'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-input-textarea-scu-input-field-default--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-input-textarea-scu-input-field-default-left , 0px );\n  right: var( --comp-scu-input-textarea-scu-input-field-default-right , 0px );\n  top: var( --comp-scu-input-textarea-scu-input-field-default-top , 0px );\n  bottom: var( --comp-scu-input-textarea-scu-input-field-default-bottom , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-input-textarea-scu-input-field-default { \n    position: absolute;\n    left: var( --comp-scu-input-textarea-scu-input-field-default-left , 0px );\n    right: var( --comp-scu-input-textarea-scu-input-field-default-right , 0px );\n    top: var( --comp-scu-input-textarea-scu-input-field-default-top , 0px );\n    bottom: var( --comp-scu-input-textarea-scu-input-field-default-bottom , 0px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-input-textarea-scu-input-field-default'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-input-textarea-scu-input-field-default--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-input-textarea-scu-input-field-default-left , 0px );\n  margin-right: var( --comp-scu-input-textarea-scu-input-field-default-right , 0px );\n  margin-top: var( --comp-scu-input-textarea-scu-input-field-default-top , 0px );\n  margin-bottom: var( --comp-scu-input-textarea-scu-input-field-default-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-input-textarea-scu-input-field-default-left , 0px ) + var( --comp-scu-input-textarea-scu-input-field-default-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-input-textarea-scu-input-field-default { \n    display: inline-block;\n  margin-left: var( --comp-scu-input-textarea-scu-input-field-default-left , 0px );\n  margin-right: var( --comp-scu-input-textarea-scu-input-field-default-right , 0px );\n  margin-top: var( --comp-scu-input-textarea-scu-input-field-default-top , 0px );\n  margin-bottom: var( --comp-scu-input-textarea-scu-input-field-default-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-input-textarea-scu-input-field-default-left , 0px ) + var( --comp-scu-input-textarea-scu-input-field-default-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-textarea-scu-input-field-default'>content</div>"
    }
  },
  "components-scu-input-textarea-scu-input-field-default-input-": {
    "": {
      "output": "\n@mixin comp-scu-input-textarea-scu-input-field-default-input { \n  position: relative;\n  font-size: var( --comp-scu-input-textarea-scu-input-field-default-input-font-size , 15px );\n  text-align: var( --comp-scu-input-textarea-scu-input-field-default-input-text-align-horizontal , LEFT );\n  color: var( --comp-scu-input-textarea-scu-input-field-default-input-color , rgba(0,0,0,1) );\n  font-family: var( --comp-scu-input-textarea-scu-input-field-default-input-font-family , 'Proxima Nova' );\n  font-weight: var( --comp-scu-input-textarea-scu-input-field-default-input-font-weight , 400 );\n  line-height: var( --comp-scu-input-textarea-scu-input-field-default-input-line-height , 17.58px );\n  letter-spacing: var( --comp-scu-input-textarea-scu-input-field-default-input-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-input-textarea-scu-input-field-default-input { \n    position: relative;\n    font-size: var( --comp-scu-input-textarea-scu-input-field-default-input-font-size , 15px );\n    text-align: var( --comp-scu-input-textarea-scu-input-field-default-input-text-align-horizontal , LEFT );\n    color: var( --comp-scu-input-textarea-scu-input-field-default-input-color , rgba(0,0,0,1) );\n    font-family: var( --comp-scu-input-textarea-scu-input-field-default-input-font-family , 'Proxima Nova' );\n    font-weight: var( --comp-scu-input-textarea-scu-input-field-default-input-font-weight , 400 );\n    line-height: var( --comp-scu-input-textarea-scu-input-field-default-input-line-height , 17.58px );\n    letter-spacing: var( --comp-scu-input-textarea-scu-input-field-default-input-letter-spacing , 0px ); \n  }\n</style>\n<div id='comp-scu-input-textarea-scu-input-field-default-input'></div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-input-textarea-scu-input-field-default-input--sizing {\n  width: 260px;\n  height: 18px;\n}",
      "example": "\n<style>\n  #comp-scu-input-textarea-scu-input-field-default-input { \n    width: 260px;\n    height: 18px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-textarea-scu-input-field-default-input'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-input-textarea-scu-input-field-default-input--width {\n  width: 260px;\n}",
      "example": "\n<style>\n  #comp-scu-input-textarea-scu-input-field-default-input { \n    width: 260px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-textarea-scu-input-field-default-input'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-input-textarea-scu-input-field-default-input--height {\n  height: 18px;\n}",
      "example": "\n<style>\n  #comp-scu-input-textarea-scu-input-field-default-input { \n    height: 18px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-textarea-scu-input-field-default-input'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-input-textarea-scu-input-field-default-input--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-input-textarea-scu-input-field-default-input-left , 11px );\n  right: var( --comp-scu-input-textarea-scu-input-field-default-input-right , 14px );\n  top: var( --comp-scu-input-textarea-scu-input-field-default-input-top , 10px );\n  bottom: var( --comp-scu-input-textarea-scu-input-field-default-input-bottom , 64px ); \n}",
      "example": "\n<style>\n  #comp-scu-input-textarea-scu-input-field-default-input { \n    position: absolute;\n    left: var( --comp-scu-input-textarea-scu-input-field-default-input-left , 11px );\n    right: var( --comp-scu-input-textarea-scu-input-field-default-input-right , 14px );\n    top: var( --comp-scu-input-textarea-scu-input-field-default-input-top , 10px );\n    bottom: var( --comp-scu-input-textarea-scu-input-field-default-input-bottom , 64px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-input-textarea-scu-input-field-default-input'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-input-textarea-scu-input-field-default-input--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-input-textarea-scu-input-field-default-input-left , 11px );\n  margin-right: var( --comp-scu-input-textarea-scu-input-field-default-input-right , 14px );\n  margin-top: var( --comp-scu-input-textarea-scu-input-field-default-input-top , 10px );\n  margin-bottom: var( --comp-scu-input-textarea-scu-input-field-default-input-bottom , 64px );\n  width: calc( 100% - ( var( --comp-scu-input-textarea-scu-input-field-default-input-left , 11px ) + var( --comp-scu-input-textarea-scu-input-field-default-input-right , 14px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-input-textarea-scu-input-field-default-input { \n    display: inline-block;\n  margin-left: var( --comp-scu-input-textarea-scu-input-field-default-input-left , 11px );\n  margin-right: var( --comp-scu-input-textarea-scu-input-field-default-input-right , 14px );\n  margin-top: var( --comp-scu-input-textarea-scu-input-field-default-input-top , 10px );\n  margin-bottom: var( --comp-scu-input-textarea-scu-input-field-default-input-bottom , 64px );\n  width: calc( 100% - ( var( --comp-scu-input-textarea-scu-input-field-default-input-left , 11px ) + var( --comp-scu-input-textarea-scu-input-field-default-input-right , 14px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-textarea-scu-input-field-default-input'>content</div>"
    }
  },
  "components-scu-input-textarea-scu-input-field-default-placeholder-": {
    "": {
      "output": "\n@mixin comp-scu-input-textarea-scu-input-field-default-placeholder { \n  position: relative;\n  font-size: var( --comp-scu-input-textarea-scu-input-field-default-placeholder-font-size , 15px );\n  text-align: var( --comp-scu-input-textarea-scu-input-field-default-placeholder-text-align-horizontal , LEFT );\n  color: var( --comp-scu-input-textarea-scu-input-field-default-placeholder-color , rgba(89,89,89,1) );\n  font-family: var( --comp-scu-input-textarea-scu-input-field-default-placeholder-font-family , 'Proxima Nova' );\n  font-weight: var( --comp-scu-input-textarea-scu-input-field-default-placeholder-font-weight , 400 );\n  line-height: var( --comp-scu-input-textarea-scu-input-field-default-placeholder-line-height , 17.58px );\n  letter-spacing: var( --comp-scu-input-textarea-scu-input-field-default-placeholder-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-input-textarea-scu-input-field-default-placeholder { \n    position: relative;\n    font-size: var( --comp-scu-input-textarea-scu-input-field-default-placeholder-font-size , 15px );\n    text-align: var( --comp-scu-input-textarea-scu-input-field-default-placeholder-text-align-horizontal , LEFT );\n    color: var( --comp-scu-input-textarea-scu-input-field-default-placeholder-color , rgba(89,89,89,1) );\n    font-family: var( --comp-scu-input-textarea-scu-input-field-default-placeholder-font-family , 'Proxima Nova' );\n    font-weight: var( --comp-scu-input-textarea-scu-input-field-default-placeholder-font-weight , 400 );\n    line-height: var( --comp-scu-input-textarea-scu-input-field-default-placeholder-line-height , 17.58px );\n    letter-spacing: var( --comp-scu-input-textarea-scu-input-field-default-placeholder-letter-spacing , 0px ); \n  }\n</style>\n<div id='comp-scu-input-textarea-scu-input-field-default-placeholder'></div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-input-textarea-scu-input-field-default-placeholder--sizing {\n  width: 261px;\n  height: 18px;\n}",
      "example": "\n<style>\n  #comp-scu-input-textarea-scu-input-field-default-placeholder { \n    width: 261px;\n    height: 18px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-textarea-scu-input-field-default-placeholder'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-input-textarea-scu-input-field-default-placeholder--width {\n  width: 261px;\n}",
      "example": "\n<style>\n  #comp-scu-input-textarea-scu-input-field-default-placeholder { \n    width: 261px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-textarea-scu-input-field-default-placeholder'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-input-textarea-scu-input-field-default-placeholder--height {\n  height: 18px;\n}",
      "example": "\n<style>\n  #comp-scu-input-textarea-scu-input-field-default-placeholder { \n    height: 18px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-textarea-scu-input-field-default-placeholder'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-input-textarea-scu-input-field-default-placeholder--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-input-textarea-scu-input-field-default-placeholder-left , 10px );\n  right: var( --comp-scu-input-textarea-scu-input-field-default-placeholder-right , 14px );\n  top: var( --comp-scu-input-textarea-scu-input-field-default-placeholder-top , 10px );\n  bottom: var( --comp-scu-input-textarea-scu-input-field-default-placeholder-bottom , 64px ); \n}",
      "example": "\n<style>\n  #comp-scu-input-textarea-scu-input-field-default-placeholder { \n    position: absolute;\n    left: var( --comp-scu-input-textarea-scu-input-field-default-placeholder-left , 10px );\n    right: var( --comp-scu-input-textarea-scu-input-field-default-placeholder-right , 14px );\n    top: var( --comp-scu-input-textarea-scu-input-field-default-placeholder-top , 10px );\n    bottom: var( --comp-scu-input-textarea-scu-input-field-default-placeholder-bottom , 64px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-input-textarea-scu-input-field-default-placeholder'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-input-textarea-scu-input-field-default-placeholder--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-input-textarea-scu-input-field-default-placeholder-left , 10px );\n  margin-right: var( --comp-scu-input-textarea-scu-input-field-default-placeholder-right , 14px );\n  margin-top: var( --comp-scu-input-textarea-scu-input-field-default-placeholder-top , 10px );\n  margin-bottom: var( --comp-scu-input-textarea-scu-input-field-default-placeholder-bottom , 64px );\n  width: calc( 100% - ( var( --comp-scu-input-textarea-scu-input-field-default-placeholder-left , 10px ) + var( --comp-scu-input-textarea-scu-input-field-default-placeholder-right , 14px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-input-textarea-scu-input-field-default-placeholder { \n    display: inline-block;\n  margin-left: var( --comp-scu-input-textarea-scu-input-field-default-placeholder-left , 10px );\n  margin-right: var( --comp-scu-input-textarea-scu-input-field-default-placeholder-right , 14px );\n  margin-top: var( --comp-scu-input-textarea-scu-input-field-default-placeholder-top , 10px );\n  margin-bottom: var( --comp-scu-input-textarea-scu-input-field-default-placeholder-bottom , 64px );\n  width: calc( 100% - ( var( --comp-scu-input-textarea-scu-input-field-default-placeholder-left , 10px ) + var( --comp-scu-input-textarea-scu-input-field-default-placeholder-right , 14px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-textarea-scu-input-field-default-placeholder'>content</div>"
    }
  },
  "components-scu-input-textarea-scu-input-field-error-": {
    "box": {
      "output": "\n@mixin comp-scu-input-textarea-scu-input-field-error { \n  position: relative;\n  background-color: var( --comp-scu-input-textarea-scu-input-field-error-background-color , rgba(255,255,255,1) );\n  border-radius: var( --comp-scu-input-textarea-scu-input-field-error-corner-radius , 2px );\n  border-width: var( --comp-scu-input-textarea-scu-input-field-error-stroke-weight , 1px );\n  border-style: solid;\n  border-color: var( --comp-scu-input-textarea-scu-input-field-error-stroke-color , rgba(208,51,57,1) ); \n}",
      "example": "\n<style>\n  #comp-scu-input-textarea-scu-input-field-error { \n    position: relative;\n    background-color: var( --comp-scu-input-textarea-scu-input-field-error-background-color , rgba(255,255,255,1) );\n    border-radius: var( --comp-scu-input-textarea-scu-input-field-error-corner-radius , 2px );\n    border-width: var( --comp-scu-input-textarea-scu-input-field-error-stroke-weight , 1px );\n    border-style: solid;\n    border-color: var( --comp-scu-input-textarea-scu-input-field-error-stroke-color , rgba(208,51,57,1) ); \n  }\n</style>\n<div id='comp-scu-input-textarea-scu-input-field-error'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-input-textarea-scu-input-field-error--sizing {\n  width: 285px;\n  height: 92px;\n}",
      "example": "\n<style>\n  #comp-scu-input-textarea-scu-input-field-error { \n    width: 285px;\n    height: 92px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-textarea-scu-input-field-error'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-input-textarea-scu-input-field-error--width {\n  width: 285px;\n}",
      "example": "\n<style>\n  #comp-scu-input-textarea-scu-input-field-error { \n    width: 285px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-textarea-scu-input-field-error'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-input-textarea-scu-input-field-error--height {\n  height: 92px;\n}",
      "example": "\n<style>\n  #comp-scu-input-textarea-scu-input-field-error { \n    height: 92px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-textarea-scu-input-field-error'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-input-textarea-scu-input-field-error--figma-autolayout { \n   \n}",
      "example": "\n<style>\n  #comp-scu-input-textarea-scu-input-field-error { \n     \n  }\n</style>\n<div id='comp-scu-input-textarea-scu-input-field-error'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-input-textarea-scu-input-field-error--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-input-textarea-scu-input-field-error-left , 0px );\n  right: var( --comp-scu-input-textarea-scu-input-field-error-right , 0px );\n  top: var( --comp-scu-input-textarea-scu-input-field-error-top , 0px );\n  bottom: var( --comp-scu-input-textarea-scu-input-field-error-bottom , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-input-textarea-scu-input-field-error { \n    position: absolute;\n    left: var( --comp-scu-input-textarea-scu-input-field-error-left , 0px );\n    right: var( --comp-scu-input-textarea-scu-input-field-error-right , 0px );\n    top: var( --comp-scu-input-textarea-scu-input-field-error-top , 0px );\n    bottom: var( --comp-scu-input-textarea-scu-input-field-error-bottom , 0px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-input-textarea-scu-input-field-error'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-input-textarea-scu-input-field-error--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-input-textarea-scu-input-field-error-left , 0px );\n  margin-right: var( --comp-scu-input-textarea-scu-input-field-error-right , 0px );\n  margin-top: var( --comp-scu-input-textarea-scu-input-field-error-top , 0px );\n  margin-bottom: var( --comp-scu-input-textarea-scu-input-field-error-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-input-textarea-scu-input-field-error-left , 0px ) + var( --comp-scu-input-textarea-scu-input-field-error-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-input-textarea-scu-input-field-error { \n    display: inline-block;\n  margin-left: var( --comp-scu-input-textarea-scu-input-field-error-left , 0px );\n  margin-right: var( --comp-scu-input-textarea-scu-input-field-error-right , 0px );\n  margin-top: var( --comp-scu-input-textarea-scu-input-field-error-top , 0px );\n  margin-bottom: var( --comp-scu-input-textarea-scu-input-field-error-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-input-textarea-scu-input-field-error-left , 0px ) + var( --comp-scu-input-textarea-scu-input-field-error-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-textarea-scu-input-field-error'>content</div>"
    }
  },
  "components-scu-input-textarea-scu-input-field-error-input-": {
    "": {
      "output": "\n@mixin comp-scu-input-textarea-scu-input-field-error-input { \n  position: relative;\n  font-size: var( --comp-scu-input-textarea-scu-input-field-error-input-font-size , 15px );\n  text-align: var( --comp-scu-input-textarea-scu-input-field-error-input-text-align-horizontal , LEFT );\n  color: var( --comp-scu-input-textarea-scu-input-field-error-input-color , rgba(0,0,0,1) );\n  font-family: var( --comp-scu-input-textarea-scu-input-field-error-input-font-family , 'Proxima Nova' );\n  font-weight: var( --comp-scu-input-textarea-scu-input-field-error-input-font-weight , 400 );\n  line-height: var( --comp-scu-input-textarea-scu-input-field-error-input-line-height , 17.58px );\n  letter-spacing: var( --comp-scu-input-textarea-scu-input-field-error-input-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-input-textarea-scu-input-field-error-input { \n    position: relative;\n    font-size: var( --comp-scu-input-textarea-scu-input-field-error-input-font-size , 15px );\n    text-align: var( --comp-scu-input-textarea-scu-input-field-error-input-text-align-horizontal , LEFT );\n    color: var( --comp-scu-input-textarea-scu-input-field-error-input-color , rgba(0,0,0,1) );\n    font-family: var( --comp-scu-input-textarea-scu-input-field-error-input-font-family , 'Proxima Nova' );\n    font-weight: var( --comp-scu-input-textarea-scu-input-field-error-input-font-weight , 400 );\n    line-height: var( --comp-scu-input-textarea-scu-input-field-error-input-line-height , 17.58px );\n    letter-spacing: var( --comp-scu-input-textarea-scu-input-field-error-input-letter-spacing , 0px ); \n  }\n</style>\n<div id='comp-scu-input-textarea-scu-input-field-error-input'></div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-input-textarea-scu-input-field-error-input--sizing {\n  width: 238px;\n  height: 18px;\n}",
      "example": "\n<style>\n  #comp-scu-input-textarea-scu-input-field-error-input { \n    width: 238px;\n    height: 18px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-textarea-scu-input-field-error-input'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-input-textarea-scu-input-field-error-input--width {\n  width: 238px;\n}",
      "example": "\n<style>\n  #comp-scu-input-textarea-scu-input-field-error-input { \n    width: 238px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-textarea-scu-input-field-error-input'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-input-textarea-scu-input-field-error-input--height {\n  height: 18px;\n}",
      "example": "\n<style>\n  #comp-scu-input-textarea-scu-input-field-error-input { \n    height: 18px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-textarea-scu-input-field-error-input'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-input-textarea-scu-input-field-error-input--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-input-textarea-scu-input-field-error-input-left , 11px );\n  right: var( --comp-scu-input-textarea-scu-input-field-error-input-right , 36px );\n  top: var( --comp-scu-input-textarea-scu-input-field-error-input-top , 10px );\n  bottom: var( --comp-scu-input-textarea-scu-input-field-error-input-bottom , 64px ); \n}",
      "example": "\n<style>\n  #comp-scu-input-textarea-scu-input-field-error-input { \n    position: absolute;\n    left: var( --comp-scu-input-textarea-scu-input-field-error-input-left , 11px );\n    right: var( --comp-scu-input-textarea-scu-input-field-error-input-right , 36px );\n    top: var( --comp-scu-input-textarea-scu-input-field-error-input-top , 10px );\n    bottom: var( --comp-scu-input-textarea-scu-input-field-error-input-bottom , 64px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-input-textarea-scu-input-field-error-input'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-input-textarea-scu-input-field-error-input--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-input-textarea-scu-input-field-error-input-left , 11px );\n  margin-right: var( --comp-scu-input-textarea-scu-input-field-error-input-right , 36px );\n  margin-top: var( --comp-scu-input-textarea-scu-input-field-error-input-top , 10px );\n  margin-bottom: var( --comp-scu-input-textarea-scu-input-field-error-input-bottom , 64px );\n  width: calc( 100% - ( var( --comp-scu-input-textarea-scu-input-field-error-input-left , 11px ) + var( --comp-scu-input-textarea-scu-input-field-error-input-right , 36px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-input-textarea-scu-input-field-error-input { \n    display: inline-block;\n  margin-left: var( --comp-scu-input-textarea-scu-input-field-error-input-left , 11px );\n  margin-right: var( --comp-scu-input-textarea-scu-input-field-error-input-right , 36px );\n  margin-top: var( --comp-scu-input-textarea-scu-input-field-error-input-top , 10px );\n  margin-bottom: var( --comp-scu-input-textarea-scu-input-field-error-input-bottom , 64px );\n  width: calc( 100% - ( var( --comp-scu-input-textarea-scu-input-field-error-input-left , 11px ) + var( --comp-scu-input-textarea-scu-input-field-error-input-right , 36px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-textarea-scu-input-field-error-input'>content</div>"
    }
  },
  "components-scu-input-textarea-scu-input-field-error-placeholder-": {
    "": {
      "output": "\n@mixin comp-scu-input-textarea-scu-input-field-error-placeholder { \n  position: relative;\n  font-size: var( --comp-scu-input-textarea-scu-input-field-error-placeholder-font-size , 15px );\n  text-align: var( --comp-scu-input-textarea-scu-input-field-error-placeholder-text-align-horizontal , LEFT );\n  color: var( --comp-scu-input-textarea-scu-input-field-error-placeholder-color , rgba(89,89,89,1) );\n  font-family: var( --comp-scu-input-textarea-scu-input-field-error-placeholder-font-family , 'Proxima Nova' );\n  font-weight: var( --comp-scu-input-textarea-scu-input-field-error-placeholder-font-weight , 400 );\n  line-height: var( --comp-scu-input-textarea-scu-input-field-error-placeholder-line-height , 17.58px );\n  letter-spacing: var( --comp-scu-input-textarea-scu-input-field-error-placeholder-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-input-textarea-scu-input-field-error-placeholder { \n    position: relative;\n    font-size: var( --comp-scu-input-textarea-scu-input-field-error-placeholder-font-size , 15px );\n    text-align: var( --comp-scu-input-textarea-scu-input-field-error-placeholder-text-align-horizontal , LEFT );\n    color: var( --comp-scu-input-textarea-scu-input-field-error-placeholder-color , rgba(89,89,89,1) );\n    font-family: var( --comp-scu-input-textarea-scu-input-field-error-placeholder-font-family , 'Proxima Nova' );\n    font-weight: var( --comp-scu-input-textarea-scu-input-field-error-placeholder-font-weight , 400 );\n    line-height: var( --comp-scu-input-textarea-scu-input-field-error-placeholder-line-height , 17.58px );\n    letter-spacing: var( --comp-scu-input-textarea-scu-input-field-error-placeholder-letter-spacing , 0px ); \n  }\n</style>\n<div id='comp-scu-input-textarea-scu-input-field-error-placeholder'></div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-input-textarea-scu-input-field-error-placeholder--sizing {\n  width: 239px;\n  height: 18px;\n}",
      "example": "\n<style>\n  #comp-scu-input-textarea-scu-input-field-error-placeholder { \n    width: 239px;\n    height: 18px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-textarea-scu-input-field-error-placeholder'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-input-textarea-scu-input-field-error-placeholder--width {\n  width: 239px;\n}",
      "example": "\n<style>\n  #comp-scu-input-textarea-scu-input-field-error-placeholder { \n    width: 239px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-textarea-scu-input-field-error-placeholder'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-input-textarea-scu-input-field-error-placeholder--height {\n  height: 18px;\n}",
      "example": "\n<style>\n  #comp-scu-input-textarea-scu-input-field-error-placeholder { \n    height: 18px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-textarea-scu-input-field-error-placeholder'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-input-textarea-scu-input-field-error-placeholder--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-input-textarea-scu-input-field-error-placeholder-left , 10px );\n  right: var( --comp-scu-input-textarea-scu-input-field-error-placeholder-right , 36px );\n  top: var( --comp-scu-input-textarea-scu-input-field-error-placeholder-top , 10px );\n  bottom: var( --comp-scu-input-textarea-scu-input-field-error-placeholder-bottom , 64px ); \n}",
      "example": "\n<style>\n  #comp-scu-input-textarea-scu-input-field-error-placeholder { \n    position: absolute;\n    left: var( --comp-scu-input-textarea-scu-input-field-error-placeholder-left , 10px );\n    right: var( --comp-scu-input-textarea-scu-input-field-error-placeholder-right , 36px );\n    top: var( --comp-scu-input-textarea-scu-input-field-error-placeholder-top , 10px );\n    bottom: var( --comp-scu-input-textarea-scu-input-field-error-placeholder-bottom , 64px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-input-textarea-scu-input-field-error-placeholder'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-input-textarea-scu-input-field-error-placeholder--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-input-textarea-scu-input-field-error-placeholder-left , 10px );\n  margin-right: var( --comp-scu-input-textarea-scu-input-field-error-placeholder-right , 36px );\n  margin-top: var( --comp-scu-input-textarea-scu-input-field-error-placeholder-top , 10px );\n  margin-bottom: var( --comp-scu-input-textarea-scu-input-field-error-placeholder-bottom , 64px );\n  width: calc( 100% - ( var( --comp-scu-input-textarea-scu-input-field-error-placeholder-left , 10px ) + var( --comp-scu-input-textarea-scu-input-field-error-placeholder-right , 36px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-input-textarea-scu-input-field-error-placeholder { \n    display: inline-block;\n  margin-left: var( --comp-scu-input-textarea-scu-input-field-error-placeholder-left , 10px );\n  margin-right: var( --comp-scu-input-textarea-scu-input-field-error-placeholder-right , 36px );\n  margin-top: var( --comp-scu-input-textarea-scu-input-field-error-placeholder-top , 10px );\n  margin-bottom: var( --comp-scu-input-textarea-scu-input-field-error-placeholder-bottom , 64px );\n  width: calc( 100% - ( var( --comp-scu-input-textarea-scu-input-field-error-placeholder-left , 10px ) + var( --comp-scu-input-textarea-scu-input-field-error-placeholder-right , 36px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-textarea-scu-input-field-error-placeholder'>content</div>"
    }
  },
  "components-scu-input-radio-": {
    "box": {
      "output": "\n@mixin comp-scu-input-radio { \n  position: relative; \n}",
      "example": "\n<style>\n  #comp-scu-input-radio { \n    position: relative; \n  }\n</style>\n<div id='comp-scu-input-radio'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-input-radio--sizing {\n  width: 263px;\n  height: 34px;\n}",
      "example": "\n<style>\n  #comp-scu-input-radio { \n    width: 263px;\n    height: 34px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-radio'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-input-radio--width {\n  width: 263px;\n}",
      "example": "\n<style>\n  #comp-scu-input-radio { \n    width: 263px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-radio'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-input-radio--height {\n  height: 34px;\n}",
      "example": "\n<style>\n  #comp-scu-input-radio { \n    height: 34px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-radio'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-input-radio--figma-autolayout { \n   \n}",
      "example": "\n<style>\n  #comp-scu-input-radio { \n     \n  }\n</style>\n<div id='comp-scu-input-radio'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-input-radio--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #comp-scu-input-radio { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-input-radio'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-input-radio--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-input-radio-left , 0px );\n  margin-right: var( --comp-scu-input-radio-right , 0px );\n  margin-top: var( --comp-scu-input-radio-top , 0px );\n  margin-bottom: var( --comp-scu-input-radio-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-input-radio-left , 0px ) + var( --comp-scu-input-radio-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-input-radio { \n    display: inline-block;\n  margin-left: var( --comp-scu-input-radio-left , 0px );\n  margin-right: var( --comp-scu-input-radio-right , 0px );\n  margin-top: var( --comp-scu-input-radio-top , 0px );\n  margin-bottom: var( --comp-scu-input-radio-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-input-radio-left , 0px ) + var( --comp-scu-input-radio-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-radio'>content</div>"
    }
  },
  "components-scu-input-radio-default-": {
    "box": {
      "output": "\n@mixin comp-scu-input-radio-default { \n  position: relative;\n  background-color: var( --comp-scu-input-radio-default-background-color , rgba(255,255,255,1) ); \n}",
      "example": "\n<style>\n  #comp-scu-input-radio-default { \n    position: relative;\n    background-color: var( --comp-scu-input-radio-default-background-color , rgba(255,255,255,1) ); \n  }\n</style>\n<div id='comp-scu-input-radio-default'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-input-radio-default--sizing {\n  width: 263px;\n  height: 34px;\n}",
      "example": "\n<style>\n  #comp-scu-input-radio-default { \n    width: 263px;\n    height: 34px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-radio-default'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-input-radio-default--width {\n  width: 263px;\n}",
      "example": "\n<style>\n  #comp-scu-input-radio-default { \n    width: 263px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-radio-default'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-input-radio-default--height {\n  height: 34px;\n}",
      "example": "\n<style>\n  #comp-scu-input-radio-default { \n    height: 34px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-radio-default'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-input-radio-default--figma-autolayout { \n   \n}",
      "example": "\n<style>\n  #comp-scu-input-radio-default { \n     \n  }\n</style>\n<div id='comp-scu-input-radio-default'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-input-radio-default--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-input-radio-default-left , 0px );\n  right: var( --comp-scu-input-radio-default-right , 0px );\n  top: var( --comp-scu-input-radio-default-top , 0px );\n  bottom: var( --comp-scu-input-radio-default-bottom , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-input-radio-default { \n    position: absolute;\n    left: var( --comp-scu-input-radio-default-left , 0px );\n    right: var( --comp-scu-input-radio-default-right , 0px );\n    top: var( --comp-scu-input-radio-default-top , 0px );\n    bottom: var( --comp-scu-input-radio-default-bottom , 0px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-input-radio-default'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-input-radio-default--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-input-radio-default-left , 0px );\n  margin-right: var( --comp-scu-input-radio-default-right , 0px );\n  margin-top: var( --comp-scu-input-radio-default-top , 0px );\n  margin-bottom: var( --comp-scu-input-radio-default-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-input-radio-default-left , 0px ) + var( --comp-scu-input-radio-default-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-input-radio-default { \n    display: inline-block;\n  margin-left: var( --comp-scu-input-radio-default-left , 0px );\n  margin-right: var( --comp-scu-input-radio-default-right , 0px );\n  margin-top: var( --comp-scu-input-radio-default-top , 0px );\n  margin-bottom: var( --comp-scu-input-radio-default-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-input-radio-default-left , 0px ) + var( --comp-scu-input-radio-default-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-radio-default'>content</div>"
    }
  },
  "components-scu-input-radio-default-label-": {
    "": {
      "output": "\n@mixin comp-scu-input-radio-default-label { \n  position: relative;\n  font-size: var( --comp-scu-input-radio-default-label-font-size , 15px );\n  text-align: var( --comp-scu-input-radio-default-label-text-align-horizontal , LEFT );\n  color: var( --comp-scu-input-radio-default-label-color , rgba(0,0,0,1) );\n  font-family: var( --comp-scu-input-radio-default-label-font-family , 'Proxima Nova' );\n  font-weight: var( --comp-scu-input-radio-default-label-font-weight , 400 );\n  line-height: var( --comp-scu-input-radio-default-label-line-height , 17.58px );\n  letter-spacing: var( --comp-scu-input-radio-default-label-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-input-radio-default-label { \n    position: relative;\n    font-size: var( --comp-scu-input-radio-default-label-font-size , 15px );\n    text-align: var( --comp-scu-input-radio-default-label-text-align-horizontal , LEFT );\n    color: var( --comp-scu-input-radio-default-label-color , rgba(0,0,0,1) );\n    font-family: var( --comp-scu-input-radio-default-label-font-family , 'Proxima Nova' );\n    font-weight: var( --comp-scu-input-radio-default-label-font-weight , 400 );\n    line-height: var( --comp-scu-input-radio-default-label-line-height , 17.58px );\n    letter-spacing: var( --comp-scu-input-radio-default-label-letter-spacing , 0px ); \n  }\n</style>\n<div id='comp-scu-input-radio-default-label'></div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-input-radio-default-label--sizing {\n  width: 236px;\n  height: 18px;\n}",
      "example": "\n<style>\n  #comp-scu-input-radio-default-label { \n    width: 236px;\n    height: 18px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-radio-default-label'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-input-radio-default-label--width {\n  width: 236px;\n}",
      "example": "\n<style>\n  #comp-scu-input-radio-default-label { \n    width: 236px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-radio-default-label'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-input-radio-default-label--height {\n  height: 18px;\n}",
      "example": "\n<style>\n  #comp-scu-input-radio-default-label { \n    height: 18px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-radio-default-label'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-input-radio-default-label--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-input-radio-default-label-left , 27px );\n  right: var( --comp-scu-input-radio-default-label-right , 0px );\n  top: var( --comp-scu-input-radio-default-label-top , 0px );\n  bottom: var( --comp-scu-input-radio-default-label-bottom , 16px ); \n}",
      "example": "\n<style>\n  #comp-scu-input-radio-default-label { \n    position: absolute;\n    left: var( --comp-scu-input-radio-default-label-left , 27px );\n    right: var( --comp-scu-input-radio-default-label-right , 0px );\n    top: var( --comp-scu-input-radio-default-label-top , 0px );\n    bottom: var( --comp-scu-input-radio-default-label-bottom , 16px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-input-radio-default-label'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-input-radio-default-label--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-input-radio-default-label-left , 27px );\n  margin-right: var( --comp-scu-input-radio-default-label-right , 0px );\n  margin-top: var( --comp-scu-input-radio-default-label-top , 0px );\n  margin-bottom: var( --comp-scu-input-radio-default-label-bottom , 16px );\n  width: calc( 100% - ( var( --comp-scu-input-radio-default-label-left , 27px ) + var( --comp-scu-input-radio-default-label-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-input-radio-default-label { \n    display: inline-block;\n  margin-left: var( --comp-scu-input-radio-default-label-left , 27px );\n  margin-right: var( --comp-scu-input-radio-default-label-right , 0px );\n  margin-top: var( --comp-scu-input-radio-default-label-top , 0px );\n  margin-bottom: var( --comp-scu-input-radio-default-label-bottom , 16px );\n  width: calc( 100% - ( var( --comp-scu-input-radio-default-label-left , 27px ) + var( --comp-scu-input-radio-default-label-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-radio-default-label'>content</div>"
    }
  },
  "components-scu-input-radio-default-scu-input-error-": {
    "box": {
      "output": "\n@mixin comp-scu-input-radio-default-scu-input-error { \n  position: relative;\n  background-color: var( --comp-scu-input-radio-default-scu-input-error-background-color , rgba(255,255,255,1) ); \n}",
      "example": "\n<style>\n  #comp-scu-input-radio-default-scu-input-error { \n    position: relative;\n    background-color: var( --comp-scu-input-radio-default-scu-input-error-background-color , rgba(255,255,255,1) ); \n  }\n</style>\n<div id='comp-scu-input-radio-default-scu-input-error'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-input-radio-default-scu-input-error--sizing {\n  width: 263px;\n  height: 15px;\n}",
      "example": "\n<style>\n  #comp-scu-input-radio-default-scu-input-error { \n    width: 263px;\n    height: 15px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-radio-default-scu-input-error'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-input-radio-default-scu-input-error--width {\n  width: 263px;\n}",
      "example": "\n<style>\n  #comp-scu-input-radio-default-scu-input-error { \n    width: 263px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-radio-default-scu-input-error'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-input-radio-default-scu-input-error--height {\n  height: 15px;\n}",
      "example": "\n<style>\n  #comp-scu-input-radio-default-scu-input-error { \n    height: 15px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-radio-default-scu-input-error'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-input-radio-default-scu-input-error--figma-autolayout { \n   \n}",
      "example": "\n<style>\n  #comp-scu-input-radio-default-scu-input-error { \n     \n  }\n</style>\n<div id='comp-scu-input-radio-default-scu-input-error'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-input-radio-default-scu-input-error--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-input-radio-default-scu-input-error-left , 0px );\n  right: var( --comp-scu-input-radio-default-scu-input-error-right , 0px );\n  bottom: var( --comp-scu-input-radio-default-scu-input-error-bottom , 0px );\n  height: var( --comp-scu-input-radio-default-scu-input-error-height , 15px ); \n}",
      "example": "\n<style>\n  #comp-scu-input-radio-default-scu-input-error { \n    position: absolute;\n    left: var( --comp-scu-input-radio-default-scu-input-error-left , 0px );\n    right: var( --comp-scu-input-radio-default-scu-input-error-right , 0px );\n    bottom: var( --comp-scu-input-radio-default-scu-input-error-bottom , 0px );\n    height: var( --comp-scu-input-radio-default-scu-input-error-height , 15px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-input-radio-default-scu-input-error'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-input-radio-default-scu-input-error--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-input-radio-default-scu-input-error-left , 0px );\n  margin-right: var( --comp-scu-input-radio-default-scu-input-error-right , 0px );\n  margin-top: var( --comp-scu-input-radio-default-scu-input-error-top , 19px );\n  margin-bottom: var( --comp-scu-input-radio-default-scu-input-error-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-input-radio-default-scu-input-error-left , 0px ) + var( --comp-scu-input-radio-default-scu-input-error-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-input-radio-default-scu-input-error { \n    display: inline-block;\n  margin-left: var( --comp-scu-input-radio-default-scu-input-error-left , 0px );\n  margin-right: var( --comp-scu-input-radio-default-scu-input-error-right , 0px );\n  margin-top: var( --comp-scu-input-radio-default-scu-input-error-top , 19px );\n  margin-bottom: var( --comp-scu-input-radio-default-scu-input-error-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-input-radio-default-scu-input-error-left , 0px ) + var( --comp-scu-input-radio-default-scu-input-error-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-radio-default-scu-input-error'>content</div>"
    }
  },
  "components-scu-input-radio-default-scu-input-error-error-": {
    "": {
      "output": "\n@mixin comp-scu-input-radio-default-scu-input-error-error { \n  position: relative;\n  font-size: var( --comp-scu-input-radio-default-scu-input-error-error-font-size , 12px );\n  text-align: var( --comp-scu-input-radio-default-scu-input-error-error-text-align-horizontal , LEFT );\n  color: var( --comp-scu-input-radio-default-scu-input-error-error-color , rgba(208,51,57,1) );\n  font-family: var( --comp-scu-input-radio-default-scu-input-error-error-font-family , 'Proxima Nova' );\n  font-weight: var( --comp-scu-input-radio-default-scu-input-error-error-font-weight , 400 );\n  line-height: var( --comp-scu-input-radio-default-scu-input-error-error-line-height , 14.06px );\n  letter-spacing: var( --comp-scu-input-radio-default-scu-input-error-error-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-input-radio-default-scu-input-error-error { \n    position: relative;\n    font-size: var( --comp-scu-input-radio-default-scu-input-error-error-font-size , 12px );\n    text-align: var( --comp-scu-input-radio-default-scu-input-error-error-text-align-horizontal , LEFT );\n    color: var( --comp-scu-input-radio-default-scu-input-error-error-color , rgba(208,51,57,1) );\n    font-family: var( --comp-scu-input-radio-default-scu-input-error-error-font-family , 'Proxima Nova' );\n    font-weight: var( --comp-scu-input-radio-default-scu-input-error-error-font-weight , 400 );\n    line-height: var( --comp-scu-input-radio-default-scu-input-error-error-line-height , 14.06px );\n    letter-spacing: var( --comp-scu-input-radio-default-scu-input-error-error-letter-spacing , 0px ); \n  }\n</style>\n<div id='comp-scu-input-radio-default-scu-input-error-error'></div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-input-radio-default-scu-input-error-error--sizing {\n  width: 263px;\n  height: 15px;\n}",
      "example": "\n<style>\n  #comp-scu-input-radio-default-scu-input-error-error { \n    width: 263px;\n    height: 15px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-radio-default-scu-input-error-error'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-input-radio-default-scu-input-error-error--width {\n  width: 263px;\n}",
      "example": "\n<style>\n  #comp-scu-input-radio-default-scu-input-error-error { \n    width: 263px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-radio-default-scu-input-error-error'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-input-radio-default-scu-input-error-error--height {\n  height: 15px;\n}",
      "example": "\n<style>\n  #comp-scu-input-radio-default-scu-input-error-error { \n    height: 15px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-radio-default-scu-input-error-error'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-input-radio-default-scu-input-error-error--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-input-radio-default-scu-input-error-error-left , 0px );\n  right: var( --comp-scu-input-radio-default-scu-input-error-error-right , 0px );\n  top: var( --comp-scu-input-radio-default-scu-input-error-error-top , 0px );\n  bottom: var( --comp-scu-input-radio-default-scu-input-error-error-bottom , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-input-radio-default-scu-input-error-error { \n    position: absolute;\n    left: var( --comp-scu-input-radio-default-scu-input-error-error-left , 0px );\n    right: var( --comp-scu-input-radio-default-scu-input-error-error-right , 0px );\n    top: var( --comp-scu-input-radio-default-scu-input-error-error-top , 0px );\n    bottom: var( --comp-scu-input-radio-default-scu-input-error-error-bottom , 0px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-input-radio-default-scu-input-error-error'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-input-radio-default-scu-input-error-error--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-input-radio-default-scu-input-error-error-left , 0px );\n  margin-right: var( --comp-scu-input-radio-default-scu-input-error-error-right , 0px );\n  margin-top: var( --comp-scu-input-radio-default-scu-input-error-error-top , 0px );\n  margin-bottom: var( --comp-scu-input-radio-default-scu-input-error-error-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-input-radio-default-scu-input-error-error-left , 0px ) + var( --comp-scu-input-radio-default-scu-input-error-error-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-input-radio-default-scu-input-error-error { \n    display: inline-block;\n  margin-left: var( --comp-scu-input-radio-default-scu-input-error-error-left , 0px );\n  margin-right: var( --comp-scu-input-radio-default-scu-input-error-error-right , 0px );\n  margin-top: var( --comp-scu-input-radio-default-scu-input-error-error-top , 0px );\n  margin-bottom: var( --comp-scu-input-radio-default-scu-input-error-error-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-input-radio-default-scu-input-error-error-left , 0px ) + var( --comp-scu-input-radio-default-scu-input-error-error-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-radio-default-scu-input-error-error'>content</div>"
    }
  },
  "components-scu-input-radio-default-i-c-o-n-16-": {
    "box": {
      "output": "\n@mixin comp-scu-input-radio-default-i-c-o-n-16 { \n  position: relative;\n  background-color: var( --comp-scu-input-radio-default-i-c-o-n-16-background-color , rgba(255,255,255,1) ); \n}",
      "example": "\n<style>\n  #comp-scu-input-radio-default-i-c-o-n-16 { \n    position: relative;\n    background-color: var( --comp-scu-input-radio-default-i-c-o-n-16-background-color , rgba(255,255,255,1) ); \n  }\n</style>\n<div id='comp-scu-input-radio-default-i-c-o-n-16'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-input-radio-default-i-c-o-n-16--sizing {\n  width: 16px;\n  height: 16px;\n}",
      "example": "\n<style>\n  #comp-scu-input-radio-default-i-c-o-n-16 { \n    width: 16px;\n    height: 16px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-radio-default-i-c-o-n-16'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-input-radio-default-i-c-o-n-16--width {\n  width: 16px;\n}",
      "example": "\n<style>\n  #comp-scu-input-radio-default-i-c-o-n-16 { \n    width: 16px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-radio-default-i-c-o-n-16'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-input-radio-default-i-c-o-n-16--height {\n  height: 16px;\n}",
      "example": "\n<style>\n  #comp-scu-input-radio-default-i-c-o-n-16 { \n    height: 16px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-radio-default-i-c-o-n-16'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-input-radio-default-i-c-o-n-16--figma-autolayout { \n   \n}",
      "example": "\n<style>\n  #comp-scu-input-radio-default-i-c-o-n-16 { \n     \n  }\n</style>\n<div id='comp-scu-input-radio-default-i-c-o-n-16'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-input-radio-default-i-c-o-n-16--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-input-radio-default-i-c-o-n-16-left , 0px );\n  width: var( --comp-scu-input-radio-default-i-c-o-n-16-width , 16px );\n  top: var( --comp-scu-input-radio-default-i-c-o-n-16-top , 0px );\n  height: var( --comp-scu-input-radio-default-i-c-o-n-16-height , 16px ); \n}",
      "example": "\n<style>\n  #comp-scu-input-radio-default-i-c-o-n-16 { \n    position: absolute;\n    left: var( --comp-scu-input-radio-default-i-c-o-n-16-left , 0px );\n    width: var( --comp-scu-input-radio-default-i-c-o-n-16-width , 16px );\n    top: var( --comp-scu-input-radio-default-i-c-o-n-16-top , 0px );\n    height: var( --comp-scu-input-radio-default-i-c-o-n-16-height , 16px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-input-radio-default-i-c-o-n-16'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-input-radio-default-i-c-o-n-16--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-input-radio-default-i-c-o-n-16-left , 0px );\n  margin-right: var( --comp-scu-input-radio-default-i-c-o-n-16-right , 247px );\n  margin-top: var( --comp-scu-input-radio-default-i-c-o-n-16-top , 0px );\n  margin-bottom: var( --comp-scu-input-radio-default-i-c-o-n-16-bottom , 18px );\n  width: calc( 100% - ( var( --comp-scu-input-radio-default-i-c-o-n-16-left , 0px ) + var( --comp-scu-input-radio-default-i-c-o-n-16-right , 247px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-input-radio-default-i-c-o-n-16 { \n    display: inline-block;\n  margin-left: var( --comp-scu-input-radio-default-i-c-o-n-16-left , 0px );\n  margin-right: var( --comp-scu-input-radio-default-i-c-o-n-16-right , 247px );\n  margin-top: var( --comp-scu-input-radio-default-i-c-o-n-16-top , 0px );\n  margin-bottom: var( --comp-scu-input-radio-default-i-c-o-n-16-bottom , 18px );\n  width: calc( 100% - ( var( --comp-scu-input-radio-default-i-c-o-n-16-left , 0px ) + var( --comp-scu-input-radio-default-i-c-o-n-16-right , 247px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-radio-default-i-c-o-n-16'>content</div>"
    }
  },
  "components-scu-input-radio-selected-": {
    "box": {
      "output": "\n@mixin comp-scu-input-radio-selected { \n  position: relative;\n  background-color: var( --comp-scu-input-radio-selected-background-color , rgba(255,255,255,1) ); \n}",
      "example": "\n<style>\n  #comp-scu-input-radio-selected { \n    position: relative;\n    background-color: var( --comp-scu-input-radio-selected-background-color , rgba(255,255,255,1) ); \n  }\n</style>\n<div id='comp-scu-input-radio-selected'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-input-radio-selected--sizing {\n  width: 263px;\n  height: 34px;\n}",
      "example": "\n<style>\n  #comp-scu-input-radio-selected { \n    width: 263px;\n    height: 34px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-radio-selected'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-input-radio-selected--width {\n  width: 263px;\n}",
      "example": "\n<style>\n  #comp-scu-input-radio-selected { \n    width: 263px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-radio-selected'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-input-radio-selected--height {\n  height: 34px;\n}",
      "example": "\n<style>\n  #comp-scu-input-radio-selected { \n    height: 34px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-radio-selected'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-input-radio-selected--figma-autolayout { \n   \n}",
      "example": "\n<style>\n  #comp-scu-input-radio-selected { \n     \n  }\n</style>\n<div id='comp-scu-input-radio-selected'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-input-radio-selected--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-input-radio-selected-left , 0px );\n  right: var( --comp-scu-input-radio-selected-right , 0px );\n  top: var( --comp-scu-input-radio-selected-top , 0px );\n  bottom: var( --comp-scu-input-radio-selected-bottom , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-input-radio-selected { \n    position: absolute;\n    left: var( --comp-scu-input-radio-selected-left , 0px );\n    right: var( --comp-scu-input-radio-selected-right , 0px );\n    top: var( --comp-scu-input-radio-selected-top , 0px );\n    bottom: var( --comp-scu-input-radio-selected-bottom , 0px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-input-radio-selected'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-input-radio-selected--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-input-radio-selected-left , 0px );\n  margin-right: var( --comp-scu-input-radio-selected-right , 0px );\n  margin-top: var( --comp-scu-input-radio-selected-top , 0px );\n  margin-bottom: var( --comp-scu-input-radio-selected-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-input-radio-selected-left , 0px ) + var( --comp-scu-input-radio-selected-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-input-radio-selected { \n    display: inline-block;\n  margin-left: var( --comp-scu-input-radio-selected-left , 0px );\n  margin-right: var( --comp-scu-input-radio-selected-right , 0px );\n  margin-top: var( --comp-scu-input-radio-selected-top , 0px );\n  margin-bottom: var( --comp-scu-input-radio-selected-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-input-radio-selected-left , 0px ) + var( --comp-scu-input-radio-selected-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-radio-selected'>content</div>"
    }
  },
  "components-scu-input-radio-selected-label-": {
    "": {
      "output": "\n@mixin comp-scu-input-radio-selected-label { \n  position: relative;\n  font-size: var( --comp-scu-input-radio-selected-label-font-size , 15px );\n  text-align: var( --comp-scu-input-radio-selected-label-text-align-horizontal , LEFT );\n  color: var( --comp-scu-input-radio-selected-label-color , rgba(0,0,0,1) );\n  font-family: var( --comp-scu-input-radio-selected-label-font-family , 'Proxima Nova' );\n  font-weight: var( --comp-scu-input-radio-selected-label-font-weight , 400 );\n  line-height: var( --comp-scu-input-radio-selected-label-line-height , 17.58px );\n  letter-spacing: var( --comp-scu-input-radio-selected-label-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-input-radio-selected-label { \n    position: relative;\n    font-size: var( --comp-scu-input-radio-selected-label-font-size , 15px );\n    text-align: var( --comp-scu-input-radio-selected-label-text-align-horizontal , LEFT );\n    color: var( --comp-scu-input-radio-selected-label-color , rgba(0,0,0,1) );\n    font-family: var( --comp-scu-input-radio-selected-label-font-family , 'Proxima Nova' );\n    font-weight: var( --comp-scu-input-radio-selected-label-font-weight , 400 );\n    line-height: var( --comp-scu-input-radio-selected-label-line-height , 17.58px );\n    letter-spacing: var( --comp-scu-input-radio-selected-label-letter-spacing , 0px ); \n  }\n</style>\n<div id='comp-scu-input-radio-selected-label'></div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-input-radio-selected-label--sizing {\n  width: 236px;\n  height: 18px;\n}",
      "example": "\n<style>\n  #comp-scu-input-radio-selected-label { \n    width: 236px;\n    height: 18px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-radio-selected-label'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-input-radio-selected-label--width {\n  width: 236px;\n}",
      "example": "\n<style>\n  #comp-scu-input-radio-selected-label { \n    width: 236px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-radio-selected-label'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-input-radio-selected-label--height {\n  height: 18px;\n}",
      "example": "\n<style>\n  #comp-scu-input-radio-selected-label { \n    height: 18px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-radio-selected-label'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-input-radio-selected-label--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-input-radio-selected-label-left , 27px );\n  right: var( --comp-scu-input-radio-selected-label-right , 0px );\n  top: var( --comp-scu-input-radio-selected-label-top , 0px );\n  bottom: var( --comp-scu-input-radio-selected-label-bottom , 16px ); \n}",
      "example": "\n<style>\n  #comp-scu-input-radio-selected-label { \n    position: absolute;\n    left: var( --comp-scu-input-radio-selected-label-left , 27px );\n    right: var( --comp-scu-input-radio-selected-label-right , 0px );\n    top: var( --comp-scu-input-radio-selected-label-top , 0px );\n    bottom: var( --comp-scu-input-radio-selected-label-bottom , 16px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-input-radio-selected-label'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-input-radio-selected-label--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-input-radio-selected-label-left , 27px );\n  margin-right: var( --comp-scu-input-radio-selected-label-right , 0px );\n  margin-top: var( --comp-scu-input-radio-selected-label-top , 0px );\n  margin-bottom: var( --comp-scu-input-radio-selected-label-bottom , 16px );\n  width: calc( 100% - ( var( --comp-scu-input-radio-selected-label-left , 27px ) + var( --comp-scu-input-radio-selected-label-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-input-radio-selected-label { \n    display: inline-block;\n  margin-left: var( --comp-scu-input-radio-selected-label-left , 27px );\n  margin-right: var( --comp-scu-input-radio-selected-label-right , 0px );\n  margin-top: var( --comp-scu-input-radio-selected-label-top , 0px );\n  margin-bottom: var( --comp-scu-input-radio-selected-label-bottom , 16px );\n  width: calc( 100% - ( var( --comp-scu-input-radio-selected-label-left , 27px ) + var( --comp-scu-input-radio-selected-label-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-radio-selected-label'>content</div>"
    }
  },
  "components-scu-input-radio-selected-scu-input-error-": {
    "box": {
      "output": "\n@mixin comp-scu-input-radio-selected-scu-input-error { \n  position: relative;\n  background-color: var( --comp-scu-input-radio-selected-scu-input-error-background-color , rgba(255,255,255,1) ); \n}",
      "example": "\n<style>\n  #comp-scu-input-radio-selected-scu-input-error { \n    position: relative;\n    background-color: var( --comp-scu-input-radio-selected-scu-input-error-background-color , rgba(255,255,255,1) ); \n  }\n</style>\n<div id='comp-scu-input-radio-selected-scu-input-error'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-input-radio-selected-scu-input-error--sizing {\n  width: 263px;\n  height: 15px;\n}",
      "example": "\n<style>\n  #comp-scu-input-radio-selected-scu-input-error { \n    width: 263px;\n    height: 15px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-radio-selected-scu-input-error'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-input-radio-selected-scu-input-error--width {\n  width: 263px;\n}",
      "example": "\n<style>\n  #comp-scu-input-radio-selected-scu-input-error { \n    width: 263px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-radio-selected-scu-input-error'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-input-radio-selected-scu-input-error--height {\n  height: 15px;\n}",
      "example": "\n<style>\n  #comp-scu-input-radio-selected-scu-input-error { \n    height: 15px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-radio-selected-scu-input-error'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-input-radio-selected-scu-input-error--figma-autolayout { \n   \n}",
      "example": "\n<style>\n  #comp-scu-input-radio-selected-scu-input-error { \n     \n  }\n</style>\n<div id='comp-scu-input-radio-selected-scu-input-error'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-input-radio-selected-scu-input-error--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-input-radio-selected-scu-input-error-left , 0px );\n  right: var( --comp-scu-input-radio-selected-scu-input-error-right , 0px );\n  bottom: var( --comp-scu-input-radio-selected-scu-input-error-bottom , 0px );\n  height: var( --comp-scu-input-radio-selected-scu-input-error-height , 15px ); \n}",
      "example": "\n<style>\n  #comp-scu-input-radio-selected-scu-input-error { \n    position: absolute;\n    left: var( --comp-scu-input-radio-selected-scu-input-error-left , 0px );\n    right: var( --comp-scu-input-radio-selected-scu-input-error-right , 0px );\n    bottom: var( --comp-scu-input-radio-selected-scu-input-error-bottom , 0px );\n    height: var( --comp-scu-input-radio-selected-scu-input-error-height , 15px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-input-radio-selected-scu-input-error'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-input-radio-selected-scu-input-error--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-input-radio-selected-scu-input-error-left , 0px );\n  margin-right: var( --comp-scu-input-radio-selected-scu-input-error-right , 0px );\n  margin-top: var( --comp-scu-input-radio-selected-scu-input-error-top , 19px );\n  margin-bottom: var( --comp-scu-input-radio-selected-scu-input-error-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-input-radio-selected-scu-input-error-left , 0px ) + var( --comp-scu-input-radio-selected-scu-input-error-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-input-radio-selected-scu-input-error { \n    display: inline-block;\n  margin-left: var( --comp-scu-input-radio-selected-scu-input-error-left , 0px );\n  margin-right: var( --comp-scu-input-radio-selected-scu-input-error-right , 0px );\n  margin-top: var( --comp-scu-input-radio-selected-scu-input-error-top , 19px );\n  margin-bottom: var( --comp-scu-input-radio-selected-scu-input-error-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-input-radio-selected-scu-input-error-left , 0px ) + var( --comp-scu-input-radio-selected-scu-input-error-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-radio-selected-scu-input-error'>content</div>"
    }
  },
  "components-scu-input-radio-selected-scu-input-error-error-": {
    "": {
      "output": "\n@mixin comp-scu-input-radio-selected-scu-input-error-error { \n  position: relative;\n  font-size: var( --comp-scu-input-radio-selected-scu-input-error-error-font-size , 12px );\n  text-align: var( --comp-scu-input-radio-selected-scu-input-error-error-text-align-horizontal , LEFT );\n  color: var( --comp-scu-input-radio-selected-scu-input-error-error-color , rgba(208,51,57,1) );\n  font-family: var( --comp-scu-input-radio-selected-scu-input-error-error-font-family , 'Proxima Nova' );\n  font-weight: var( --comp-scu-input-radio-selected-scu-input-error-error-font-weight , 400 );\n  line-height: var( --comp-scu-input-radio-selected-scu-input-error-error-line-height , 14.06px );\n  letter-spacing: var( --comp-scu-input-radio-selected-scu-input-error-error-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-input-radio-selected-scu-input-error-error { \n    position: relative;\n    font-size: var( --comp-scu-input-radio-selected-scu-input-error-error-font-size , 12px );\n    text-align: var( --comp-scu-input-radio-selected-scu-input-error-error-text-align-horizontal , LEFT );\n    color: var( --comp-scu-input-radio-selected-scu-input-error-error-color , rgba(208,51,57,1) );\n    font-family: var( --comp-scu-input-radio-selected-scu-input-error-error-font-family , 'Proxima Nova' );\n    font-weight: var( --comp-scu-input-radio-selected-scu-input-error-error-font-weight , 400 );\n    line-height: var( --comp-scu-input-radio-selected-scu-input-error-error-line-height , 14.06px );\n    letter-spacing: var( --comp-scu-input-radio-selected-scu-input-error-error-letter-spacing , 0px ); \n  }\n</style>\n<div id='comp-scu-input-radio-selected-scu-input-error-error'></div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-input-radio-selected-scu-input-error-error--sizing {\n  width: 263px;\n  height: 15px;\n}",
      "example": "\n<style>\n  #comp-scu-input-radio-selected-scu-input-error-error { \n    width: 263px;\n    height: 15px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-radio-selected-scu-input-error-error'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-input-radio-selected-scu-input-error-error--width {\n  width: 263px;\n}",
      "example": "\n<style>\n  #comp-scu-input-radio-selected-scu-input-error-error { \n    width: 263px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-radio-selected-scu-input-error-error'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-input-radio-selected-scu-input-error-error--height {\n  height: 15px;\n}",
      "example": "\n<style>\n  #comp-scu-input-radio-selected-scu-input-error-error { \n    height: 15px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-radio-selected-scu-input-error-error'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-input-radio-selected-scu-input-error-error--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-input-radio-selected-scu-input-error-error-left , 0px );\n  right: var( --comp-scu-input-radio-selected-scu-input-error-error-right , 0px );\n  top: var( --comp-scu-input-radio-selected-scu-input-error-error-top , 0px );\n  bottom: var( --comp-scu-input-radio-selected-scu-input-error-error-bottom , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-input-radio-selected-scu-input-error-error { \n    position: absolute;\n    left: var( --comp-scu-input-radio-selected-scu-input-error-error-left , 0px );\n    right: var( --comp-scu-input-radio-selected-scu-input-error-error-right , 0px );\n    top: var( --comp-scu-input-radio-selected-scu-input-error-error-top , 0px );\n    bottom: var( --comp-scu-input-radio-selected-scu-input-error-error-bottom , 0px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-input-radio-selected-scu-input-error-error'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-input-radio-selected-scu-input-error-error--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-input-radio-selected-scu-input-error-error-left , 0px );\n  margin-right: var( --comp-scu-input-radio-selected-scu-input-error-error-right , 0px );\n  margin-top: var( --comp-scu-input-radio-selected-scu-input-error-error-top , 0px );\n  margin-bottom: var( --comp-scu-input-radio-selected-scu-input-error-error-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-input-radio-selected-scu-input-error-error-left , 0px ) + var( --comp-scu-input-radio-selected-scu-input-error-error-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-input-radio-selected-scu-input-error-error { \n    display: inline-block;\n  margin-left: var( --comp-scu-input-radio-selected-scu-input-error-error-left , 0px );\n  margin-right: var( --comp-scu-input-radio-selected-scu-input-error-error-right , 0px );\n  margin-top: var( --comp-scu-input-radio-selected-scu-input-error-error-top , 0px );\n  margin-bottom: var( --comp-scu-input-radio-selected-scu-input-error-error-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-input-radio-selected-scu-input-error-error-left , 0px ) + var( --comp-scu-input-radio-selected-scu-input-error-error-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-radio-selected-scu-input-error-error'>content</div>"
    }
  },
  "components-scu-input-radio-selected-i-c-o-n-16-": {
    "box": {
      "output": "\n@mixin comp-scu-input-radio-selected-i-c-o-n-16 { \n  position: relative;\n  background-color: var( --comp-scu-input-radio-selected-i-c-o-n-16-background-color , rgba(255,255,255,1) ); \n}",
      "example": "\n<style>\n  #comp-scu-input-radio-selected-i-c-o-n-16 { \n    position: relative;\n    background-color: var( --comp-scu-input-radio-selected-i-c-o-n-16-background-color , rgba(255,255,255,1) ); \n  }\n</style>\n<div id='comp-scu-input-radio-selected-i-c-o-n-16'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-input-radio-selected-i-c-o-n-16--sizing {\n  width: 16px;\n  height: 16px;\n}",
      "example": "\n<style>\n  #comp-scu-input-radio-selected-i-c-o-n-16 { \n    width: 16px;\n    height: 16px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-radio-selected-i-c-o-n-16'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-input-radio-selected-i-c-o-n-16--width {\n  width: 16px;\n}",
      "example": "\n<style>\n  #comp-scu-input-radio-selected-i-c-o-n-16 { \n    width: 16px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-radio-selected-i-c-o-n-16'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-input-radio-selected-i-c-o-n-16--height {\n  height: 16px;\n}",
      "example": "\n<style>\n  #comp-scu-input-radio-selected-i-c-o-n-16 { \n    height: 16px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-radio-selected-i-c-o-n-16'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-input-radio-selected-i-c-o-n-16--figma-autolayout { \n   \n}",
      "example": "\n<style>\n  #comp-scu-input-radio-selected-i-c-o-n-16 { \n     \n  }\n</style>\n<div id='comp-scu-input-radio-selected-i-c-o-n-16'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-input-radio-selected-i-c-o-n-16--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-input-radio-selected-i-c-o-n-16-left , 0px );\n  width: var( --comp-scu-input-radio-selected-i-c-o-n-16-width , 16px );\n  top: var( --comp-scu-input-radio-selected-i-c-o-n-16-top , 0px );\n  height: var( --comp-scu-input-radio-selected-i-c-o-n-16-height , 16px ); \n}",
      "example": "\n<style>\n  #comp-scu-input-radio-selected-i-c-o-n-16 { \n    position: absolute;\n    left: var( --comp-scu-input-radio-selected-i-c-o-n-16-left , 0px );\n    width: var( --comp-scu-input-radio-selected-i-c-o-n-16-width , 16px );\n    top: var( --comp-scu-input-radio-selected-i-c-o-n-16-top , 0px );\n    height: var( --comp-scu-input-radio-selected-i-c-o-n-16-height , 16px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-input-radio-selected-i-c-o-n-16'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-input-radio-selected-i-c-o-n-16--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-input-radio-selected-i-c-o-n-16-left , 0px );\n  margin-right: var( --comp-scu-input-radio-selected-i-c-o-n-16-right , 247px );\n  margin-top: var( --comp-scu-input-radio-selected-i-c-o-n-16-top , 0px );\n  margin-bottom: var( --comp-scu-input-radio-selected-i-c-o-n-16-bottom , 18px );\n  width: calc( 100% - ( var( --comp-scu-input-radio-selected-i-c-o-n-16-left , 0px ) + var( --comp-scu-input-radio-selected-i-c-o-n-16-right , 247px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-input-radio-selected-i-c-o-n-16 { \n    display: inline-block;\n  margin-left: var( --comp-scu-input-radio-selected-i-c-o-n-16-left , 0px );\n  margin-right: var( --comp-scu-input-radio-selected-i-c-o-n-16-right , 247px );\n  margin-top: var( --comp-scu-input-radio-selected-i-c-o-n-16-top , 0px );\n  margin-bottom: var( --comp-scu-input-radio-selected-i-c-o-n-16-bottom , 18px );\n  width: calc( 100% - ( var( --comp-scu-input-radio-selected-i-c-o-n-16-left , 0px ) + var( --comp-scu-input-radio-selected-i-c-o-n-16-right , 247px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-radio-selected-i-c-o-n-16'>content</div>"
    }
  },
  "components-scu-input-checkbox-": {
    "box": {
      "output": "\n@mixin comp-scu-input-checkbox { \n  position: relative; \n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox { \n    position: relative; \n  }\n</style>\n<div id='comp-scu-input-checkbox'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-input-checkbox--sizing {\n  width: 263px;\n  height: 34px;\n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox { \n    width: 263px;\n    height: 34px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-checkbox'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-input-checkbox--width {\n  width: 263px;\n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox { \n    width: 263px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-checkbox'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-input-checkbox--height {\n  height: 34px;\n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox { \n    height: 34px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-checkbox'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-input-checkbox--figma-autolayout { \n   \n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox { \n     \n  }\n</style>\n<div id='comp-scu-input-checkbox'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-input-checkbox--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-input-checkbox'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-input-checkbox--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-input-checkbox-left , 0px );\n  margin-right: var( --comp-scu-input-checkbox-right , 0px );\n  margin-top: var( --comp-scu-input-checkbox-top , 0px );\n  margin-bottom: var( --comp-scu-input-checkbox-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-input-checkbox-left , 0px ) + var( --comp-scu-input-checkbox-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox { \n    display: inline-block;\n  margin-left: var( --comp-scu-input-checkbox-left , 0px );\n  margin-right: var( --comp-scu-input-checkbox-right , 0px );\n  margin-top: var( --comp-scu-input-checkbox-top , 0px );\n  margin-bottom: var( --comp-scu-input-checkbox-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-input-checkbox-left , 0px ) + var( --comp-scu-input-checkbox-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-checkbox'>content</div>"
    }
  },
  "components-scu-input-checkbox-default-": {
    "box": {
      "output": "\n@mixin comp-scu-input-checkbox-default { \n  position: relative;\n  background-color: var( --comp-scu-input-checkbox-default-background-color , rgba(255,255,255,1) ); \n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox-default { \n    position: relative;\n    background-color: var( --comp-scu-input-checkbox-default-background-color , rgba(255,255,255,1) ); \n  }\n</style>\n<div id='comp-scu-input-checkbox-default'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-input-checkbox-default--sizing {\n  width: 263px;\n  height: 34px;\n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox-default { \n    width: 263px;\n    height: 34px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-checkbox-default'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-input-checkbox-default--width {\n  width: 263px;\n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox-default { \n    width: 263px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-checkbox-default'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-input-checkbox-default--height {\n  height: 34px;\n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox-default { \n    height: 34px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-checkbox-default'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-input-checkbox-default--figma-autolayout { \n   \n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox-default { \n     \n  }\n</style>\n<div id='comp-scu-input-checkbox-default'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-input-checkbox-default--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-input-checkbox-default-left , 0px );\n  right: var( --comp-scu-input-checkbox-default-right , 0px );\n  top: var( --comp-scu-input-checkbox-default-top , 0px );\n  bottom: var( --comp-scu-input-checkbox-default-bottom , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox-default { \n    position: absolute;\n    left: var( --comp-scu-input-checkbox-default-left , 0px );\n    right: var( --comp-scu-input-checkbox-default-right , 0px );\n    top: var( --comp-scu-input-checkbox-default-top , 0px );\n    bottom: var( --comp-scu-input-checkbox-default-bottom , 0px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-input-checkbox-default'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-input-checkbox-default--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-input-checkbox-default-left , 0px );\n  margin-right: var( --comp-scu-input-checkbox-default-right , 0px );\n  margin-top: var( --comp-scu-input-checkbox-default-top , 0px );\n  margin-bottom: var( --comp-scu-input-checkbox-default-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-input-checkbox-default-left , 0px ) + var( --comp-scu-input-checkbox-default-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox-default { \n    display: inline-block;\n  margin-left: var( --comp-scu-input-checkbox-default-left , 0px );\n  margin-right: var( --comp-scu-input-checkbox-default-right , 0px );\n  margin-top: var( --comp-scu-input-checkbox-default-top , 0px );\n  margin-bottom: var( --comp-scu-input-checkbox-default-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-input-checkbox-default-left , 0px ) + var( --comp-scu-input-checkbox-default-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-checkbox-default'>content</div>"
    }
  },
  "components-scu-input-checkbox-default-label-": {
    "": {
      "output": "\n@mixin comp-scu-input-checkbox-default-label { \n  position: relative;\n  font-size: var( --comp-scu-input-checkbox-default-label-font-size , 15px );\n  text-align: var( --comp-scu-input-checkbox-default-label-text-align-horizontal , LEFT );\n  color: var( --comp-scu-input-checkbox-default-label-color , rgba(0,0,0,1) );\n  font-family: var( --comp-scu-input-checkbox-default-label-font-family , 'Proxima Nova' );\n  font-weight: var( --comp-scu-input-checkbox-default-label-font-weight , 400 );\n  line-height: var( --comp-scu-input-checkbox-default-label-line-height , 17.58px );\n  letter-spacing: var( --comp-scu-input-checkbox-default-label-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox-default-label { \n    position: relative;\n    font-size: var( --comp-scu-input-checkbox-default-label-font-size , 15px );\n    text-align: var( --comp-scu-input-checkbox-default-label-text-align-horizontal , LEFT );\n    color: var( --comp-scu-input-checkbox-default-label-color , rgba(0,0,0,1) );\n    font-family: var( --comp-scu-input-checkbox-default-label-font-family , 'Proxima Nova' );\n    font-weight: var( --comp-scu-input-checkbox-default-label-font-weight , 400 );\n    line-height: var( --comp-scu-input-checkbox-default-label-line-height , 17.58px );\n    letter-spacing: var( --comp-scu-input-checkbox-default-label-letter-spacing , 0px ); \n  }\n</style>\n<div id='comp-scu-input-checkbox-default-label'></div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-input-checkbox-default-label--sizing {\n  width: 236px;\n  height: 18px;\n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox-default-label { \n    width: 236px;\n    height: 18px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-checkbox-default-label'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-input-checkbox-default-label--width {\n  width: 236px;\n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox-default-label { \n    width: 236px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-checkbox-default-label'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-input-checkbox-default-label--height {\n  height: 18px;\n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox-default-label { \n    height: 18px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-checkbox-default-label'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-input-checkbox-default-label--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-input-checkbox-default-label-left , 27px );\n  right: var( --comp-scu-input-checkbox-default-label-right , 0px );\n  top: var( --comp-scu-input-checkbox-default-label-top , 0px );\n  height: var( --comp-scu-input-checkbox-default-label-height , 18px ); \n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox-default-label { \n    position: absolute;\n    left: var( --comp-scu-input-checkbox-default-label-left , 27px );\n    right: var( --comp-scu-input-checkbox-default-label-right , 0px );\n    top: var( --comp-scu-input-checkbox-default-label-top , 0px );\n    height: var( --comp-scu-input-checkbox-default-label-height , 18px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-input-checkbox-default-label'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-input-checkbox-default-label--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-input-checkbox-default-label-left , 27px );\n  margin-right: var( --comp-scu-input-checkbox-default-label-right , 0px );\n  margin-top: var( --comp-scu-input-checkbox-default-label-top , 0px );\n  margin-bottom: var( --comp-scu-input-checkbox-default-label-bottom , 16px );\n  width: calc( 100% - ( var( --comp-scu-input-checkbox-default-label-left , 27px ) + var( --comp-scu-input-checkbox-default-label-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox-default-label { \n    display: inline-block;\n  margin-left: var( --comp-scu-input-checkbox-default-label-left , 27px );\n  margin-right: var( --comp-scu-input-checkbox-default-label-right , 0px );\n  margin-top: var( --comp-scu-input-checkbox-default-label-top , 0px );\n  margin-bottom: var( --comp-scu-input-checkbox-default-label-bottom , 16px );\n  width: calc( 100% - ( var( --comp-scu-input-checkbox-default-label-left , 27px ) + var( --comp-scu-input-checkbox-default-label-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-checkbox-default-label'>content</div>"
    }
  },
  "components-scu-input-checkbox-default-scu-input-error-": {
    "box": {
      "output": "\n@mixin comp-scu-input-checkbox-default-scu-input-error { \n  position: relative;\n  background-color: var( --comp-scu-input-checkbox-default-scu-input-error-background-color , rgba(255,255,255,1) ); \n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox-default-scu-input-error { \n    position: relative;\n    background-color: var( --comp-scu-input-checkbox-default-scu-input-error-background-color , rgba(255,255,255,1) ); \n  }\n</style>\n<div id='comp-scu-input-checkbox-default-scu-input-error'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-input-checkbox-default-scu-input-error--sizing {\n  width: 263px;\n  height: 15px;\n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox-default-scu-input-error { \n    width: 263px;\n    height: 15px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-checkbox-default-scu-input-error'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-input-checkbox-default-scu-input-error--width {\n  width: 263px;\n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox-default-scu-input-error { \n    width: 263px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-checkbox-default-scu-input-error'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-input-checkbox-default-scu-input-error--height {\n  height: 15px;\n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox-default-scu-input-error { \n    height: 15px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-checkbox-default-scu-input-error'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-input-checkbox-default-scu-input-error--figma-autolayout { \n   \n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox-default-scu-input-error { \n     \n  }\n</style>\n<div id='comp-scu-input-checkbox-default-scu-input-error'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-input-checkbox-default-scu-input-error--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-input-checkbox-default-scu-input-error-left , 0px );\n  right: var( --comp-scu-input-checkbox-default-scu-input-error-right , 0px );\n  bottom: var( --comp-scu-input-checkbox-default-scu-input-error-bottom , 3px );\n  height: var( --comp-scu-input-checkbox-default-scu-input-error-height , 15px ); \n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox-default-scu-input-error { \n    position: absolute;\n    left: var( --comp-scu-input-checkbox-default-scu-input-error-left , 0px );\n    right: var( --comp-scu-input-checkbox-default-scu-input-error-right , 0px );\n    bottom: var( --comp-scu-input-checkbox-default-scu-input-error-bottom , 3px );\n    height: var( --comp-scu-input-checkbox-default-scu-input-error-height , 15px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-input-checkbox-default-scu-input-error'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-input-checkbox-default-scu-input-error--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-input-checkbox-default-scu-input-error-left , 0px );\n  margin-right: var( --comp-scu-input-checkbox-default-scu-input-error-right , 0px );\n  margin-top: var( --comp-scu-input-checkbox-default-scu-input-error-top , 16px );\n  margin-bottom: var( --comp-scu-input-checkbox-default-scu-input-error-bottom , 3px );\n  width: calc( 100% - ( var( --comp-scu-input-checkbox-default-scu-input-error-left , 0px ) + var( --comp-scu-input-checkbox-default-scu-input-error-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox-default-scu-input-error { \n    display: inline-block;\n  margin-left: var( --comp-scu-input-checkbox-default-scu-input-error-left , 0px );\n  margin-right: var( --comp-scu-input-checkbox-default-scu-input-error-right , 0px );\n  margin-top: var( --comp-scu-input-checkbox-default-scu-input-error-top , 16px );\n  margin-bottom: var( --comp-scu-input-checkbox-default-scu-input-error-bottom , 3px );\n  width: calc( 100% - ( var( --comp-scu-input-checkbox-default-scu-input-error-left , 0px ) + var( --comp-scu-input-checkbox-default-scu-input-error-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-checkbox-default-scu-input-error'>content</div>"
    }
  },
  "components-scu-input-checkbox-default-scu-input-error-error-": {
    "": {
      "output": "\n@mixin comp-scu-input-checkbox-default-scu-input-error-error { \n  position: relative;\n  font-size: var( --comp-scu-input-checkbox-default-scu-input-error-error-font-size , 12px );\n  text-align: var( --comp-scu-input-checkbox-default-scu-input-error-error-text-align-horizontal , LEFT );\n  color: var( --comp-scu-input-checkbox-default-scu-input-error-error-color , rgba(208,51,57,1) );\n  font-family: var( --comp-scu-input-checkbox-default-scu-input-error-error-font-family , 'Proxima Nova' );\n  font-weight: var( --comp-scu-input-checkbox-default-scu-input-error-error-font-weight , 400 );\n  line-height: var( --comp-scu-input-checkbox-default-scu-input-error-error-line-height , 14.06px );\n  letter-spacing: var( --comp-scu-input-checkbox-default-scu-input-error-error-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox-default-scu-input-error-error { \n    position: relative;\n    font-size: var( --comp-scu-input-checkbox-default-scu-input-error-error-font-size , 12px );\n    text-align: var( --comp-scu-input-checkbox-default-scu-input-error-error-text-align-horizontal , LEFT );\n    color: var( --comp-scu-input-checkbox-default-scu-input-error-error-color , rgba(208,51,57,1) );\n    font-family: var( --comp-scu-input-checkbox-default-scu-input-error-error-font-family , 'Proxima Nova' );\n    font-weight: var( --comp-scu-input-checkbox-default-scu-input-error-error-font-weight , 400 );\n    line-height: var( --comp-scu-input-checkbox-default-scu-input-error-error-line-height , 14.06px );\n    letter-spacing: var( --comp-scu-input-checkbox-default-scu-input-error-error-letter-spacing , 0px ); \n  }\n</style>\n<div id='comp-scu-input-checkbox-default-scu-input-error-error'></div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-input-checkbox-default-scu-input-error-error--sizing {\n  width: 263px;\n  height: 15px;\n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox-default-scu-input-error-error { \n    width: 263px;\n    height: 15px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-checkbox-default-scu-input-error-error'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-input-checkbox-default-scu-input-error-error--width {\n  width: 263px;\n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox-default-scu-input-error-error { \n    width: 263px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-checkbox-default-scu-input-error-error'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-input-checkbox-default-scu-input-error-error--height {\n  height: 15px;\n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox-default-scu-input-error-error { \n    height: 15px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-checkbox-default-scu-input-error-error'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-input-checkbox-default-scu-input-error-error--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-input-checkbox-default-scu-input-error-error-left , 0px );\n  right: var( --comp-scu-input-checkbox-default-scu-input-error-error-right , 0px );\n  top: var( --comp-scu-input-checkbox-default-scu-input-error-error-top , 0px );\n  bottom: var( --comp-scu-input-checkbox-default-scu-input-error-error-bottom , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox-default-scu-input-error-error { \n    position: absolute;\n    left: var( --comp-scu-input-checkbox-default-scu-input-error-error-left , 0px );\n    right: var( --comp-scu-input-checkbox-default-scu-input-error-error-right , 0px );\n    top: var( --comp-scu-input-checkbox-default-scu-input-error-error-top , 0px );\n    bottom: var( --comp-scu-input-checkbox-default-scu-input-error-error-bottom , 0px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-input-checkbox-default-scu-input-error-error'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-input-checkbox-default-scu-input-error-error--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-input-checkbox-default-scu-input-error-error-left , 0px );\n  margin-right: var( --comp-scu-input-checkbox-default-scu-input-error-error-right , 0px );\n  margin-top: var( --comp-scu-input-checkbox-default-scu-input-error-error-top , 0px );\n  margin-bottom: var( --comp-scu-input-checkbox-default-scu-input-error-error-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-input-checkbox-default-scu-input-error-error-left , 0px ) + var( --comp-scu-input-checkbox-default-scu-input-error-error-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox-default-scu-input-error-error { \n    display: inline-block;\n  margin-left: var( --comp-scu-input-checkbox-default-scu-input-error-error-left , 0px );\n  margin-right: var( --comp-scu-input-checkbox-default-scu-input-error-error-right , 0px );\n  margin-top: var( --comp-scu-input-checkbox-default-scu-input-error-error-top , 0px );\n  margin-bottom: var( --comp-scu-input-checkbox-default-scu-input-error-error-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-input-checkbox-default-scu-input-error-error-left , 0px ) + var( --comp-scu-input-checkbox-default-scu-input-error-error-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-checkbox-default-scu-input-error-error'>content</div>"
    }
  },
  "components-scu-input-checkbox-default-i-c-o-n-16-": {
    "box": {
      "output": "\n@mixin comp-scu-input-checkbox-default-i-c-o-n-16 { \n  position: relative;\n  background-color: var( --comp-scu-input-checkbox-default-i-c-o-n-16-background-color , rgba(255,255,255,1) ); \n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox-default-i-c-o-n-16 { \n    position: relative;\n    background-color: var( --comp-scu-input-checkbox-default-i-c-o-n-16-background-color , rgba(255,255,255,1) ); \n  }\n</style>\n<div id='comp-scu-input-checkbox-default-i-c-o-n-16'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-input-checkbox-default-i-c-o-n-16--sizing {\n  width: 16px;\n  height: 16px;\n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox-default-i-c-o-n-16 { \n    width: 16px;\n    height: 16px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-checkbox-default-i-c-o-n-16'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-input-checkbox-default-i-c-o-n-16--width {\n  width: 16px;\n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox-default-i-c-o-n-16 { \n    width: 16px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-checkbox-default-i-c-o-n-16'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-input-checkbox-default-i-c-o-n-16--height {\n  height: 16px;\n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox-default-i-c-o-n-16 { \n    height: 16px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-checkbox-default-i-c-o-n-16'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-input-checkbox-default-i-c-o-n-16--figma-autolayout { \n   \n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox-default-i-c-o-n-16 { \n     \n  }\n</style>\n<div id='comp-scu-input-checkbox-default-i-c-o-n-16'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-input-checkbox-default-i-c-o-n-16--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-input-checkbox-default-i-c-o-n-16-left , 0px );\n  width: var( --comp-scu-input-checkbox-default-i-c-o-n-16-width , 16px );\n  top: var( --comp-scu-input-checkbox-default-i-c-o-n-16-top , 0px );\n  height: var( --comp-scu-input-checkbox-default-i-c-o-n-16-height , 16px ); \n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox-default-i-c-o-n-16 { \n    position: absolute;\n    left: var( --comp-scu-input-checkbox-default-i-c-o-n-16-left , 0px );\n    width: var( --comp-scu-input-checkbox-default-i-c-o-n-16-width , 16px );\n    top: var( --comp-scu-input-checkbox-default-i-c-o-n-16-top , 0px );\n    height: var( --comp-scu-input-checkbox-default-i-c-o-n-16-height , 16px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-input-checkbox-default-i-c-o-n-16'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-input-checkbox-default-i-c-o-n-16--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-input-checkbox-default-i-c-o-n-16-left , 0px );\n  margin-right: var( --comp-scu-input-checkbox-default-i-c-o-n-16-right , 247px );\n  margin-top: var( --comp-scu-input-checkbox-default-i-c-o-n-16-top , 0px );\n  margin-bottom: var( --comp-scu-input-checkbox-default-i-c-o-n-16-bottom , 18px );\n  width: calc( 100% - ( var( --comp-scu-input-checkbox-default-i-c-o-n-16-left , 0px ) + var( --comp-scu-input-checkbox-default-i-c-o-n-16-right , 247px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox-default-i-c-o-n-16 { \n    display: inline-block;\n  margin-left: var( --comp-scu-input-checkbox-default-i-c-o-n-16-left , 0px );\n  margin-right: var( --comp-scu-input-checkbox-default-i-c-o-n-16-right , 247px );\n  margin-top: var( --comp-scu-input-checkbox-default-i-c-o-n-16-top , 0px );\n  margin-bottom: var( --comp-scu-input-checkbox-default-i-c-o-n-16-bottom , 18px );\n  width: calc( 100% - ( var( --comp-scu-input-checkbox-default-i-c-o-n-16-left , 0px ) + var( --comp-scu-input-checkbox-default-i-c-o-n-16-right , 247px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-checkbox-default-i-c-o-n-16'>content</div>"
    }
  },
  "components-scu-input-checkbox-selected-": {
    "box": {
      "output": "\n@mixin comp-scu-input-checkbox-selected { \n  position: relative;\n  background-color: var( --comp-scu-input-checkbox-selected-background-color , rgba(255,255,255,1) ); \n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox-selected { \n    position: relative;\n    background-color: var( --comp-scu-input-checkbox-selected-background-color , rgba(255,255,255,1) ); \n  }\n</style>\n<div id='comp-scu-input-checkbox-selected'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-input-checkbox-selected--sizing {\n  width: 263px;\n  height: 34px;\n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox-selected { \n    width: 263px;\n    height: 34px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-checkbox-selected'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-input-checkbox-selected--width {\n  width: 263px;\n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox-selected { \n    width: 263px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-checkbox-selected'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-input-checkbox-selected--height {\n  height: 34px;\n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox-selected { \n    height: 34px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-checkbox-selected'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-input-checkbox-selected--figma-autolayout { \n   \n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox-selected { \n     \n  }\n</style>\n<div id='comp-scu-input-checkbox-selected'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-input-checkbox-selected--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-input-checkbox-selected-left , 0px );\n  right: var( --comp-scu-input-checkbox-selected-right , 0px );\n  top: var( --comp-scu-input-checkbox-selected-top , 0px );\n  bottom: var( --comp-scu-input-checkbox-selected-bottom , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox-selected { \n    position: absolute;\n    left: var( --comp-scu-input-checkbox-selected-left , 0px );\n    right: var( --comp-scu-input-checkbox-selected-right , 0px );\n    top: var( --comp-scu-input-checkbox-selected-top , 0px );\n    bottom: var( --comp-scu-input-checkbox-selected-bottom , 0px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-input-checkbox-selected'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-input-checkbox-selected--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-input-checkbox-selected-left , 0px );\n  margin-right: var( --comp-scu-input-checkbox-selected-right , 0px );\n  margin-top: var( --comp-scu-input-checkbox-selected-top , 0px );\n  margin-bottom: var( --comp-scu-input-checkbox-selected-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-input-checkbox-selected-left , 0px ) + var( --comp-scu-input-checkbox-selected-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox-selected { \n    display: inline-block;\n  margin-left: var( --comp-scu-input-checkbox-selected-left , 0px );\n  margin-right: var( --comp-scu-input-checkbox-selected-right , 0px );\n  margin-top: var( --comp-scu-input-checkbox-selected-top , 0px );\n  margin-bottom: var( --comp-scu-input-checkbox-selected-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-input-checkbox-selected-left , 0px ) + var( --comp-scu-input-checkbox-selected-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-checkbox-selected'>content</div>"
    }
  },
  "components-scu-input-checkbox-selected-label-": {
    "": {
      "output": "\n@mixin comp-scu-input-checkbox-selected-label { \n  position: relative;\n  font-size: var( --comp-scu-input-checkbox-selected-label-font-size , 15px );\n  text-align: var( --comp-scu-input-checkbox-selected-label-text-align-horizontal , LEFT );\n  color: var( --comp-scu-input-checkbox-selected-label-color , rgba(0,0,0,1) );\n  font-family: var( --comp-scu-input-checkbox-selected-label-font-family , 'Proxima Nova' );\n  font-weight: var( --comp-scu-input-checkbox-selected-label-font-weight , 400 );\n  line-height: var( --comp-scu-input-checkbox-selected-label-line-height , 17.58px );\n  letter-spacing: var( --comp-scu-input-checkbox-selected-label-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox-selected-label { \n    position: relative;\n    font-size: var( --comp-scu-input-checkbox-selected-label-font-size , 15px );\n    text-align: var( --comp-scu-input-checkbox-selected-label-text-align-horizontal , LEFT );\n    color: var( --comp-scu-input-checkbox-selected-label-color , rgba(0,0,0,1) );\n    font-family: var( --comp-scu-input-checkbox-selected-label-font-family , 'Proxima Nova' );\n    font-weight: var( --comp-scu-input-checkbox-selected-label-font-weight , 400 );\n    line-height: var( --comp-scu-input-checkbox-selected-label-line-height , 17.58px );\n    letter-spacing: var( --comp-scu-input-checkbox-selected-label-letter-spacing , 0px ); \n  }\n</style>\n<div id='comp-scu-input-checkbox-selected-label'></div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-input-checkbox-selected-label--sizing {\n  width: 236px;\n  height: 18px;\n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox-selected-label { \n    width: 236px;\n    height: 18px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-checkbox-selected-label'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-input-checkbox-selected-label--width {\n  width: 236px;\n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox-selected-label { \n    width: 236px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-checkbox-selected-label'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-input-checkbox-selected-label--height {\n  height: 18px;\n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox-selected-label { \n    height: 18px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-checkbox-selected-label'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-input-checkbox-selected-label--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-input-checkbox-selected-label-left , 27px );\n  right: var( --comp-scu-input-checkbox-selected-label-right , 0px );\n  top: var( --comp-scu-input-checkbox-selected-label-top , 0px );\n  height: var( --comp-scu-input-checkbox-selected-label-height , 18px ); \n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox-selected-label { \n    position: absolute;\n    left: var( --comp-scu-input-checkbox-selected-label-left , 27px );\n    right: var( --comp-scu-input-checkbox-selected-label-right , 0px );\n    top: var( --comp-scu-input-checkbox-selected-label-top , 0px );\n    height: var( --comp-scu-input-checkbox-selected-label-height , 18px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-input-checkbox-selected-label'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-input-checkbox-selected-label--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-input-checkbox-selected-label-left , 27px );\n  margin-right: var( --comp-scu-input-checkbox-selected-label-right , 0px );\n  margin-top: var( --comp-scu-input-checkbox-selected-label-top , 0px );\n  margin-bottom: var( --comp-scu-input-checkbox-selected-label-bottom , 16px );\n  width: calc( 100% - ( var( --comp-scu-input-checkbox-selected-label-left , 27px ) + var( --comp-scu-input-checkbox-selected-label-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox-selected-label { \n    display: inline-block;\n  margin-left: var( --comp-scu-input-checkbox-selected-label-left , 27px );\n  margin-right: var( --comp-scu-input-checkbox-selected-label-right , 0px );\n  margin-top: var( --comp-scu-input-checkbox-selected-label-top , 0px );\n  margin-bottom: var( --comp-scu-input-checkbox-selected-label-bottom , 16px );\n  width: calc( 100% - ( var( --comp-scu-input-checkbox-selected-label-left , 27px ) + var( --comp-scu-input-checkbox-selected-label-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-checkbox-selected-label'>content</div>"
    }
  },
  "components-scu-input-checkbox-selected-scu-input-error-": {
    "box": {
      "output": "\n@mixin comp-scu-input-checkbox-selected-scu-input-error { \n  position: relative;\n  background-color: var( --comp-scu-input-checkbox-selected-scu-input-error-background-color , rgba(255,255,255,1) ); \n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox-selected-scu-input-error { \n    position: relative;\n    background-color: var( --comp-scu-input-checkbox-selected-scu-input-error-background-color , rgba(255,255,255,1) ); \n  }\n</style>\n<div id='comp-scu-input-checkbox-selected-scu-input-error'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-input-checkbox-selected-scu-input-error--sizing {\n  width: 263px;\n  height: 15px;\n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox-selected-scu-input-error { \n    width: 263px;\n    height: 15px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-checkbox-selected-scu-input-error'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-input-checkbox-selected-scu-input-error--width {\n  width: 263px;\n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox-selected-scu-input-error { \n    width: 263px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-checkbox-selected-scu-input-error'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-input-checkbox-selected-scu-input-error--height {\n  height: 15px;\n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox-selected-scu-input-error { \n    height: 15px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-checkbox-selected-scu-input-error'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-input-checkbox-selected-scu-input-error--figma-autolayout { \n   \n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox-selected-scu-input-error { \n     \n  }\n</style>\n<div id='comp-scu-input-checkbox-selected-scu-input-error'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-input-checkbox-selected-scu-input-error--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-input-checkbox-selected-scu-input-error-left , 0px );\n  right: var( --comp-scu-input-checkbox-selected-scu-input-error-right , 0px );\n  bottom: var( --comp-scu-input-checkbox-selected-scu-input-error-bottom , -3px );\n  height: var( --comp-scu-input-checkbox-selected-scu-input-error-height , 15px ); \n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox-selected-scu-input-error { \n    position: absolute;\n    left: var( --comp-scu-input-checkbox-selected-scu-input-error-left , 0px );\n    right: var( --comp-scu-input-checkbox-selected-scu-input-error-right , 0px );\n    bottom: var( --comp-scu-input-checkbox-selected-scu-input-error-bottom , -3px );\n    height: var( --comp-scu-input-checkbox-selected-scu-input-error-height , 15px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-input-checkbox-selected-scu-input-error'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-input-checkbox-selected-scu-input-error--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-input-checkbox-selected-scu-input-error-left , 0px );\n  margin-right: var( --comp-scu-input-checkbox-selected-scu-input-error-right , 0px );\n  margin-top: var( --comp-scu-input-checkbox-selected-scu-input-error-top , 22px );\n  margin-bottom: var( --comp-scu-input-checkbox-selected-scu-input-error-bottom , -3px );\n  width: calc( 100% - ( var( --comp-scu-input-checkbox-selected-scu-input-error-left , 0px ) + var( --comp-scu-input-checkbox-selected-scu-input-error-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox-selected-scu-input-error { \n    display: inline-block;\n  margin-left: var( --comp-scu-input-checkbox-selected-scu-input-error-left , 0px );\n  margin-right: var( --comp-scu-input-checkbox-selected-scu-input-error-right , 0px );\n  margin-top: var( --comp-scu-input-checkbox-selected-scu-input-error-top , 22px );\n  margin-bottom: var( --comp-scu-input-checkbox-selected-scu-input-error-bottom , -3px );\n  width: calc( 100% - ( var( --comp-scu-input-checkbox-selected-scu-input-error-left , 0px ) + var( --comp-scu-input-checkbox-selected-scu-input-error-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-checkbox-selected-scu-input-error'>content</div>"
    }
  },
  "components-scu-input-checkbox-selected-scu-input-error-error-": {
    "": {
      "output": "\n@mixin comp-scu-input-checkbox-selected-scu-input-error-error { \n  position: relative;\n  font-size: var( --comp-scu-input-checkbox-selected-scu-input-error-error-font-size , 12px );\n  text-align: var( --comp-scu-input-checkbox-selected-scu-input-error-error-text-align-horizontal , LEFT );\n  color: var( --comp-scu-input-checkbox-selected-scu-input-error-error-color , rgba(208,51,57,1) );\n  font-family: var( --comp-scu-input-checkbox-selected-scu-input-error-error-font-family , 'Proxima Nova' );\n  font-weight: var( --comp-scu-input-checkbox-selected-scu-input-error-error-font-weight , 400 );\n  line-height: var( --comp-scu-input-checkbox-selected-scu-input-error-error-line-height , 14.06px );\n  letter-spacing: var( --comp-scu-input-checkbox-selected-scu-input-error-error-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox-selected-scu-input-error-error { \n    position: relative;\n    font-size: var( --comp-scu-input-checkbox-selected-scu-input-error-error-font-size , 12px );\n    text-align: var( --comp-scu-input-checkbox-selected-scu-input-error-error-text-align-horizontal , LEFT );\n    color: var( --comp-scu-input-checkbox-selected-scu-input-error-error-color , rgba(208,51,57,1) );\n    font-family: var( --comp-scu-input-checkbox-selected-scu-input-error-error-font-family , 'Proxima Nova' );\n    font-weight: var( --comp-scu-input-checkbox-selected-scu-input-error-error-font-weight , 400 );\n    line-height: var( --comp-scu-input-checkbox-selected-scu-input-error-error-line-height , 14.06px );\n    letter-spacing: var( --comp-scu-input-checkbox-selected-scu-input-error-error-letter-spacing , 0px ); \n  }\n</style>\n<div id='comp-scu-input-checkbox-selected-scu-input-error-error'></div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-input-checkbox-selected-scu-input-error-error--sizing {\n  width: 263px;\n  height: 15px;\n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox-selected-scu-input-error-error { \n    width: 263px;\n    height: 15px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-checkbox-selected-scu-input-error-error'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-input-checkbox-selected-scu-input-error-error--width {\n  width: 263px;\n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox-selected-scu-input-error-error { \n    width: 263px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-checkbox-selected-scu-input-error-error'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-input-checkbox-selected-scu-input-error-error--height {\n  height: 15px;\n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox-selected-scu-input-error-error { \n    height: 15px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-checkbox-selected-scu-input-error-error'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-input-checkbox-selected-scu-input-error-error--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-input-checkbox-selected-scu-input-error-error-left , 0px );\n  right: var( --comp-scu-input-checkbox-selected-scu-input-error-error-right , 0px );\n  top: var( --comp-scu-input-checkbox-selected-scu-input-error-error-top , 0px );\n  bottom: var( --comp-scu-input-checkbox-selected-scu-input-error-error-bottom , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox-selected-scu-input-error-error { \n    position: absolute;\n    left: var( --comp-scu-input-checkbox-selected-scu-input-error-error-left , 0px );\n    right: var( --comp-scu-input-checkbox-selected-scu-input-error-error-right , 0px );\n    top: var( --comp-scu-input-checkbox-selected-scu-input-error-error-top , 0px );\n    bottom: var( --comp-scu-input-checkbox-selected-scu-input-error-error-bottom , 0px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-input-checkbox-selected-scu-input-error-error'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-input-checkbox-selected-scu-input-error-error--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-input-checkbox-selected-scu-input-error-error-left , 0px );\n  margin-right: var( --comp-scu-input-checkbox-selected-scu-input-error-error-right , 0px );\n  margin-top: var( --comp-scu-input-checkbox-selected-scu-input-error-error-top , 0px );\n  margin-bottom: var( --comp-scu-input-checkbox-selected-scu-input-error-error-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-input-checkbox-selected-scu-input-error-error-left , 0px ) + var( --comp-scu-input-checkbox-selected-scu-input-error-error-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox-selected-scu-input-error-error { \n    display: inline-block;\n  margin-left: var( --comp-scu-input-checkbox-selected-scu-input-error-error-left , 0px );\n  margin-right: var( --comp-scu-input-checkbox-selected-scu-input-error-error-right , 0px );\n  margin-top: var( --comp-scu-input-checkbox-selected-scu-input-error-error-top , 0px );\n  margin-bottom: var( --comp-scu-input-checkbox-selected-scu-input-error-error-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-input-checkbox-selected-scu-input-error-error-left , 0px ) + var( --comp-scu-input-checkbox-selected-scu-input-error-error-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-checkbox-selected-scu-input-error-error'>content</div>"
    }
  },
  "components-scu-input-checkbox-selected-i-c-o-n-16-": {
    "box": {
      "output": "\n@mixin comp-scu-input-checkbox-selected-i-c-o-n-16 { \n  position: relative;\n  background-color: var( --comp-scu-input-checkbox-selected-i-c-o-n-16-background-color , rgba(255,255,255,1) ); \n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox-selected-i-c-o-n-16 { \n    position: relative;\n    background-color: var( --comp-scu-input-checkbox-selected-i-c-o-n-16-background-color , rgba(255,255,255,1) ); \n  }\n</style>\n<div id='comp-scu-input-checkbox-selected-i-c-o-n-16'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-input-checkbox-selected-i-c-o-n-16--sizing {\n  width: 16px;\n  height: 16px;\n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox-selected-i-c-o-n-16 { \n    width: 16px;\n    height: 16px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-checkbox-selected-i-c-o-n-16'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-input-checkbox-selected-i-c-o-n-16--width {\n  width: 16px;\n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox-selected-i-c-o-n-16 { \n    width: 16px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-checkbox-selected-i-c-o-n-16'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-input-checkbox-selected-i-c-o-n-16--height {\n  height: 16px;\n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox-selected-i-c-o-n-16 { \n    height: 16px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-checkbox-selected-i-c-o-n-16'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-input-checkbox-selected-i-c-o-n-16--figma-autolayout { \n   \n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox-selected-i-c-o-n-16 { \n     \n  }\n</style>\n<div id='comp-scu-input-checkbox-selected-i-c-o-n-16'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-input-checkbox-selected-i-c-o-n-16--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-input-checkbox-selected-i-c-o-n-16-left , 0px );\n  width: var( --comp-scu-input-checkbox-selected-i-c-o-n-16-width , 16px );\n  top: var( --comp-scu-input-checkbox-selected-i-c-o-n-16-top , 0px );\n  height: var( --comp-scu-input-checkbox-selected-i-c-o-n-16-height , 16px ); \n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox-selected-i-c-o-n-16 { \n    position: absolute;\n    left: var( --comp-scu-input-checkbox-selected-i-c-o-n-16-left , 0px );\n    width: var( --comp-scu-input-checkbox-selected-i-c-o-n-16-width , 16px );\n    top: var( --comp-scu-input-checkbox-selected-i-c-o-n-16-top , 0px );\n    height: var( --comp-scu-input-checkbox-selected-i-c-o-n-16-height , 16px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-input-checkbox-selected-i-c-o-n-16'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-input-checkbox-selected-i-c-o-n-16--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-input-checkbox-selected-i-c-o-n-16-left , 0px );\n  margin-right: var( --comp-scu-input-checkbox-selected-i-c-o-n-16-right , 247px );\n  margin-top: var( --comp-scu-input-checkbox-selected-i-c-o-n-16-top , 0px );\n  margin-bottom: var( --comp-scu-input-checkbox-selected-i-c-o-n-16-bottom , 18px );\n  width: calc( 100% - ( var( --comp-scu-input-checkbox-selected-i-c-o-n-16-left , 0px ) + var( --comp-scu-input-checkbox-selected-i-c-o-n-16-right , 247px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-input-checkbox-selected-i-c-o-n-16 { \n    display: inline-block;\n  margin-left: var( --comp-scu-input-checkbox-selected-i-c-o-n-16-left , 0px );\n  margin-right: var( --comp-scu-input-checkbox-selected-i-c-o-n-16-right , 247px );\n  margin-top: var( --comp-scu-input-checkbox-selected-i-c-o-n-16-top , 0px );\n  margin-bottom: var( --comp-scu-input-checkbox-selected-i-c-o-n-16-bottom , 18px );\n  width: calc( 100% - ( var( --comp-scu-input-checkbox-selected-i-c-o-n-16-left , 0px ) + var( --comp-scu-input-checkbox-selected-i-c-o-n-16-right , 247px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-input-checkbox-selected-i-c-o-n-16'>content</div>"
    }
  },
  "components-scu-member-profile-": {
    "box": {
      "output": "\n@mixin comp-scu-member-profile { \n  position: relative; \n}",
      "example": "\n<style>\n  #comp-scu-member-profile { \n    position: relative; \n  }\n</style>\n<div id='comp-scu-member-profile'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-member-profile--sizing {\n  width: 138px;\n  height: 95px;\n}",
      "example": "\n<style>\n  #comp-scu-member-profile { \n    width: 138px;\n    height: 95px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-member-profile'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-member-profile--width {\n  width: 138px;\n}",
      "example": "\n<style>\n  #comp-scu-member-profile { \n    width: 138px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-member-profile'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-member-profile--height {\n  height: 95px;\n}",
      "example": "\n<style>\n  #comp-scu-member-profile { \n    height: 95px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-member-profile'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-member-profile--figma-autolayout { \n  display: flex;\n  flex-flow: column nowrap;\n  padding-left: var( --comp-scu-member-profile-padding-left , 0px );\n  padding-right: var( --comp-scu-member-profile-padding-right , 0px );\n  padding-top: var( --comp-scu-member-profile-padding-top , 0px );\n  padding-bottom: var( --comp-scu-member-profile-padding-bottom , 0px );\n  & > *:not(:last-child) { margin-bottom: var( --comp-scu-member-profile-item-spacing , 7px ); } \n}",
      "example": "\n<style>\n  #comp-scu-member-profile { \n    display: flex;\n    flex-flow: column nowrap;\n    padding-left: var( --comp-scu-member-profile-padding-left , 0px );\n    padding-right: var( --comp-scu-member-profile-padding-right , 0px );\n    padding-top: var( --comp-scu-member-profile-padding-top , 0px );\n    padding-bottom: var( --comp-scu-member-profile-padding-bottom , 0px );\n    & > *:not(:last-child) { margin-bottom: var( --comp-scu-member-profile-item-spacing , 7px ); } \n  }\n</style>\n<div id='comp-scu-member-profile'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-member-profile--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #comp-scu-member-profile { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-member-profile'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-member-profile--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-member-profile-left , 0px );\n  margin-right: var( --comp-scu-member-profile-right , 0px );\n  margin-top: var( --comp-scu-member-profile-top , 0px );\n  margin-bottom: var( --comp-scu-member-profile-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-member-profile-left , 0px ) + var( --comp-scu-member-profile-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-member-profile { \n    display: inline-block;\n  margin-left: var( --comp-scu-member-profile-left , 0px );\n  margin-right: var( --comp-scu-member-profile-right , 0px );\n  margin-top: var( --comp-scu-member-profile-top , 0px );\n  margin-bottom: var( --comp-scu-member-profile-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-member-profile-left , 0px ) + var( --comp-scu-member-profile-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-member-profile'>content</div>"
    }
  },
  "components-scu-member-profile-member-picture-": {
    "box": {
      "output": "\n@mixin comp-scu-member-profile-member-picture { \n  position: relative;\n  background-color: var( --comp-scu-member-profile-member-picture-background-color , rgba(255,255,255,1) );\n  border-radius: var( --comp-scu-member-profile-member-picture-corner-radius , 28px ); \n}",
      "example": "\n<style>\n  #comp-scu-member-profile-member-picture { \n    position: relative;\n    background-color: var( --comp-scu-member-profile-member-picture-background-color , rgba(255,255,255,1) );\n    border-radius: var( --comp-scu-member-profile-member-picture-corner-radius , 28px ); \n  }\n</style>\n<div id='comp-scu-member-profile-member-picture'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-member-profile-member-picture--sizing {\n  width: 54px;\n  height: 54px;\n}",
      "example": "\n<style>\n  #comp-scu-member-profile-member-picture { \n    width: 54px;\n    height: 54px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-member-profile-member-picture'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-member-profile-member-picture--width {\n  width: 54px;\n}",
      "example": "\n<style>\n  #comp-scu-member-profile-member-picture { \n    width: 54px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-member-profile-member-picture'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-member-profile-member-picture--height {\n  height: 54px;\n}",
      "example": "\n<style>\n  #comp-scu-member-profile-member-picture { \n    height: 54px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-member-profile-member-picture'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-member-profile-member-picture--figma-autolayout { \n   \n}",
      "example": "\n<style>\n  #comp-scu-member-profile-member-picture { \n     \n  }\n</style>\n<div id='comp-scu-member-profile-member-picture'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-member-profile-member-picture--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #comp-scu-member-profile-member-picture { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-member-profile-member-picture'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-member-profile-member-picture--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-member-profile-member-picture-left , 42px );\n  margin-right: var( --comp-scu-member-profile-member-picture-right , 42px );\n  margin-top: var( --comp-scu-member-profile-member-picture-top , 0px );\n  margin-bottom: var( --comp-scu-member-profile-member-picture-bottom , 41px );\n  width: calc( 100% - ( var( --comp-scu-member-profile-member-picture-left , 42px ) + var( --comp-scu-member-profile-member-picture-right , 42px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-member-profile-member-picture { \n    display: inline-block;\n  margin-left: var( --comp-scu-member-profile-member-picture-left , 42px );\n  margin-right: var( --comp-scu-member-profile-member-picture-right , 42px );\n  margin-top: var( --comp-scu-member-profile-member-picture-top , 0px );\n  margin-bottom: var( --comp-scu-member-profile-member-picture-bottom , 41px );\n  width: calc( 100% - ( var( --comp-scu-member-profile-member-picture-left , 42px ) + var( --comp-scu-member-profile-member-picture-right , 42px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-member-profile-member-picture'>content</div>"
    }
  },
  "components-scu-member-profile-member-picture-screen-shot-2020-10-16-at-12-38-1-": {
    "box": {
      "output": "\n@mixin comp-scu-member-profile-member-picture-screen-shot-2020-10-16-at-12-38-1 { \n  position: relative;\n  background-color: var( --comp-scu-member-profile-member-picture-screen-shot-2020-10-16-at-12-38-1-background-color , rgba(0,0,0,0) ); \n}",
      "example": "\n<style>\n  #comp-scu-member-profile-member-picture-screen-shot-2020-10-16-at-12-38-1 { \n    position: relative;\n    background-color: var( --comp-scu-member-profile-member-picture-screen-shot-2020-10-16-at-12-38-1-background-color , rgba(0,0,0,0) ); \n  }\n</style>\n<div id='comp-scu-member-profile-member-picture-screen-shot-2020-10-16-at-12-38-1'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-member-profile-member-picture-screen-shot-2020-10-16-at-12-38-1--sizing {\n  width: 149px;\n  height: 120px;\n}",
      "example": "\n<style>\n  #comp-scu-member-profile-member-picture-screen-shot-2020-10-16-at-12-38-1 { \n    width: 149px;\n    height: 120px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-member-profile-member-picture-screen-shot-2020-10-16-at-12-38-1'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-member-profile-member-picture-screen-shot-2020-10-16-at-12-38-1--width {\n  width: 149px;\n}",
      "example": "\n<style>\n  #comp-scu-member-profile-member-picture-screen-shot-2020-10-16-at-12-38-1 { \n    width: 149px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-member-profile-member-picture-screen-shot-2020-10-16-at-12-38-1'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-member-profile-member-picture-screen-shot-2020-10-16-at-12-38-1--height {\n  height: 120px;\n}",
      "example": "\n<style>\n  #comp-scu-member-profile-member-picture-screen-shot-2020-10-16-at-12-38-1 { \n    height: 120px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-member-profile-member-picture-screen-shot-2020-10-16-at-12-38-1'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-member-profile-member-picture-screen-shot-2020-10-16-at-12-38-1--figma-autolayout { \n   \n}",
      "example": "\n<style>\n  #comp-scu-member-profile-member-picture-screen-shot-2020-10-16-at-12-38-1 { \n     \n  }\n</style>\n<div id='comp-scu-member-profile-member-picture-screen-shot-2020-10-16-at-12-38-1'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-member-profile-member-picture-screen-shot-2020-10-16-at-12-38-1--absolute-layout {\n  position: absolute;\n  left: var( --comp-scu-member-profile-member-picture-screen-shot-2020-10-16-at-12-38-1-left , -41px );\n  width: var( --comp-scu-member-profile-member-picture-screen-shot-2020-10-16-at-12-38-1-width , 149px );\n  top: var( --comp-scu-member-profile-member-picture-screen-shot-2020-10-16-at-12-38-1-top , -9px );\n  height: var( --comp-scu-member-profile-member-picture-screen-shot-2020-10-16-at-12-38-1-height , 120px ); \n}",
      "example": "\n<style>\n  #comp-scu-member-profile-member-picture-screen-shot-2020-10-16-at-12-38-1 { \n    position: absolute;\n    left: var( --comp-scu-member-profile-member-picture-screen-shot-2020-10-16-at-12-38-1-left , -41px );\n    width: var( --comp-scu-member-profile-member-picture-screen-shot-2020-10-16-at-12-38-1-width , 149px );\n    top: var( --comp-scu-member-profile-member-picture-screen-shot-2020-10-16-at-12-38-1-top , -9px );\n    height: var( --comp-scu-member-profile-member-picture-screen-shot-2020-10-16-at-12-38-1-height , 120px ); \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-member-profile-member-picture-screen-shot-2020-10-16-at-12-38-1'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-member-profile-member-picture-screen-shot-2020-10-16-at-12-38-1--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-member-profile-member-picture-screen-shot-2020-10-16-at-12-38-1-left , -41px );\n  margin-right: var( --comp-scu-member-profile-member-picture-screen-shot-2020-10-16-at-12-38-1-right , -54px );\n  margin-top: var( --comp-scu-member-profile-member-picture-screen-shot-2020-10-16-at-12-38-1-top , -9px );\n  margin-bottom: var( --comp-scu-member-profile-member-picture-screen-shot-2020-10-16-at-12-38-1-bottom , -57px );\n  width: calc( 100% - ( var( --comp-scu-member-profile-member-picture-screen-shot-2020-10-16-at-12-38-1-left , -41px ) + var( --comp-scu-member-profile-member-picture-screen-shot-2020-10-16-at-12-38-1-right , -54px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-member-profile-member-picture-screen-shot-2020-10-16-at-12-38-1 { \n    display: inline-block;\n  margin-left: var( --comp-scu-member-profile-member-picture-screen-shot-2020-10-16-at-12-38-1-left , -41px );\n  margin-right: var( --comp-scu-member-profile-member-picture-screen-shot-2020-10-16-at-12-38-1-right , -54px );\n  margin-top: var( --comp-scu-member-profile-member-picture-screen-shot-2020-10-16-at-12-38-1-top , -9px );\n  margin-bottom: var( --comp-scu-member-profile-member-picture-screen-shot-2020-10-16-at-12-38-1-bottom , -57px );\n  width: calc( 100% - ( var( --comp-scu-member-profile-member-picture-screen-shot-2020-10-16-at-12-38-1-left , -41px ) + var( --comp-scu-member-profile-member-picture-screen-shot-2020-10-16-at-12-38-1-right , -54px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-member-profile-member-picture-screen-shot-2020-10-16-at-12-38-1'>content</div>"
    }
  },
  "components-scu-member-profile-label-box-": {
    "box": {
      "output": "\n@mixin comp-scu-member-profile-label-box { \n  position: relative; \n}",
      "example": "\n<style>\n  #comp-scu-member-profile-label-box { \n    position: relative; \n  }\n</style>\n<div id='comp-scu-member-profile-label-box'>\n  <div class='childOutline' style='\n    /*position: absolute;\n    top: 0px;\n    bottom: 0px;\n    left: 0px;\n    right: 0px;\n    border: 2px dotted rgba(150,150,150,0.5);*/\n  '></div>\n</div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-member-profile-label-box--sizing {\n  width: 138px;\n  height: 34px;\n}",
      "example": "\n<style>\n  #comp-scu-member-profile-label-box { \n    width: 138px;\n    height: 34px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-member-profile-label-box'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-member-profile-label-box--width {\n  width: 138px;\n}",
      "example": "\n<style>\n  #comp-scu-member-profile-label-box { \n    width: 138px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-member-profile-label-box'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-member-profile-label-box--height {\n  height: 34px;\n}",
      "example": "\n<style>\n  #comp-scu-member-profile-label-box { \n    height: 34px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-member-profile-label-box'></div>"
    },
    "figma-autolayout": {
      "output": "\n@mixin comp-scu-member-profile-label-box--figma-autolayout { \n  display: flex;\n  flex-flow: column nowrap;\n  padding-left: var( --comp-scu-member-profile-label-box-padding-left , 0px );\n  padding-right: var( --comp-scu-member-profile-label-box-padding-right , 0px );\n  padding-top: var( --comp-scu-member-profile-label-box-padding-top , 0px );\n  padding-bottom: var( --comp-scu-member-profile-label-box-padding-bottom , 0px );\n  & > *:not(:last-child) { margin-bottom: var( --comp-scu-member-profile-label-box-item-spacing , 0px ); } \n}",
      "example": "\n<style>\n  #comp-scu-member-profile-label-box { \n    display: flex;\n    flex-flow: column nowrap;\n    padding-left: var( --comp-scu-member-profile-label-box-padding-left , 0px );\n    padding-right: var( --comp-scu-member-profile-label-box-padding-right , 0px );\n    padding-top: var( --comp-scu-member-profile-label-box-padding-top , 0px );\n    padding-bottom: var( --comp-scu-member-profile-label-box-padding-bottom , 0px );\n    & > *:not(:last-child) { margin-bottom: var( --comp-scu-member-profile-label-box-item-spacing , 0px ); } \n  }\n</style>\n<div id='comp-scu-member-profile-label-box'>\n  <div>\n    <div>element 1</div>\n    <div>element 2</div>\n  </div>\n</div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-member-profile-label-box--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #comp-scu-member-profile-label-box { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-member-profile-label-box'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-member-profile-label-box--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-member-profile-label-box-left , 0px );\n  margin-right: var( --comp-scu-member-profile-label-box-right , 0px );\n  margin-top: var( --comp-scu-member-profile-label-box-top , 61px );\n  margin-bottom: var( --comp-scu-member-profile-label-box-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-member-profile-label-box-left , 0px ) + var( --comp-scu-member-profile-label-box-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-member-profile-label-box { \n    display: inline-block;\n  margin-left: var( --comp-scu-member-profile-label-box-left , 0px );\n  margin-right: var( --comp-scu-member-profile-label-box-right , 0px );\n  margin-top: var( --comp-scu-member-profile-label-box-top , 61px );\n  margin-bottom: var( --comp-scu-member-profile-label-box-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-member-profile-label-box-left , 0px ) + var( --comp-scu-member-profile-label-box-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-member-profile-label-box'>content</div>"
    }
  },
  "components-scu-member-profile-label-box-member-name-": {
    "": {
      "output": "\n@mixin comp-scu-member-profile-label-box-member-name { \n  position: relative;\n  font-size: var( --comp-scu-member-profile-label-box-member-name-font-size , 18px );\n  text-align: var( --comp-scu-member-profile-label-box-member-name-text-align-horizontal , CENTER );\n  color: var( --comp-scu-member-profile-label-box-member-name-color , rgba(54,54,54,1) );\n  font-family: var( --comp-scu-member-profile-label-box-member-name-font-family , 'Proxima Nova' );\n  font-weight: var( --comp-scu-member-profile-label-box-member-name-font-weight , 700 );\n  line-height: var( --comp-scu-member-profile-label-box-member-name-line-height , 21.09px );\n  letter-spacing: var( --comp-scu-member-profile-label-box-member-name-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-member-profile-label-box-member-name { \n    position: relative;\n    font-size: var( --comp-scu-member-profile-label-box-member-name-font-size , 18px );\n    text-align: var( --comp-scu-member-profile-label-box-member-name-text-align-horizontal , CENTER );\n    color: var( --comp-scu-member-profile-label-box-member-name-color , rgba(54,54,54,1) );\n    font-family: var( --comp-scu-member-profile-label-box-member-name-font-family , 'Proxima Nova' );\n    font-weight: var( --comp-scu-member-profile-label-box-member-name-font-weight , 700 );\n    line-height: var( --comp-scu-member-profile-label-box-member-name-line-height , 21.09px );\n    letter-spacing: var( --comp-scu-member-profile-label-box-member-name-letter-spacing , 0px ); \n  }\n</style>\n<div id='comp-scu-member-profile-label-box-member-name'></div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-member-profile-label-box-member-name--sizing {\n  width: 138px;\n  height: 21px;\n}",
      "example": "\n<style>\n  #comp-scu-member-profile-label-box-member-name { \n    width: 138px;\n    height: 21px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-member-profile-label-box-member-name'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-member-profile-label-box-member-name--width {\n  width: 138px;\n}",
      "example": "\n<style>\n  #comp-scu-member-profile-label-box-member-name { \n    width: 138px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-member-profile-label-box-member-name'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-member-profile-label-box-member-name--height {\n  height: 21px;\n}",
      "example": "\n<style>\n  #comp-scu-member-profile-label-box-member-name { \n    height: 21px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-member-profile-label-box-member-name'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-member-profile-label-box-member-name--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #comp-scu-member-profile-label-box-member-name { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-member-profile-label-box-member-name'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-member-profile-label-box-member-name--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-member-profile-label-box-member-name-left , 0px );\n  margin-right: var( --comp-scu-member-profile-label-box-member-name-right , 0px );\n  margin-top: var( --comp-scu-member-profile-label-box-member-name-top , 0px );\n  margin-bottom: var( --comp-scu-member-profile-label-box-member-name-bottom , 13px );\n  width: calc( 100% - ( var( --comp-scu-member-profile-label-box-member-name-left , 0px ) + var( --comp-scu-member-profile-label-box-member-name-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-member-profile-label-box-member-name { \n    display: inline-block;\n  margin-left: var( --comp-scu-member-profile-label-box-member-name-left , 0px );\n  margin-right: var( --comp-scu-member-profile-label-box-member-name-right , 0px );\n  margin-top: var( --comp-scu-member-profile-label-box-member-name-top , 0px );\n  margin-bottom: var( --comp-scu-member-profile-label-box-member-name-bottom , 13px );\n  width: calc( 100% - ( var( --comp-scu-member-profile-label-box-member-name-left , 0px ) + var( --comp-scu-member-profile-label-box-member-name-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-member-profile-label-box-member-name'>content</div>"
    }
  },
  "components-scu-member-profile-label-box-member-since-": {
    "": {
      "output": "\n@mixin comp-scu-member-profile-label-box-member-since { \n  position: relative;\n  font-size: var( --comp-scu-member-profile-label-box-member-since-font-size , 11px );\n  text-align: var( --comp-scu-member-profile-label-box-member-since-text-align-horizontal , CENTER );\n  color: var( --comp-scu-member-profile-label-box-member-since-color , rgba(89,89,89,1) );\n  font-family: var( --comp-scu-member-profile-label-box-member-since-font-family , 'Proxima Nova' );\n  font-weight: var( --comp-scu-member-profile-label-box-member-since-font-weight , 400 );\n  line-height: var( --comp-scu-member-profile-label-box-member-since-line-height , 12.89px );\n  letter-spacing: var( --comp-scu-member-profile-label-box-member-since-letter-spacing , 0px ); \n}",
      "example": "\n<style>\n  #comp-scu-member-profile-label-box-member-since { \n    position: relative;\n    font-size: var( --comp-scu-member-profile-label-box-member-since-font-size , 11px );\n    text-align: var( --comp-scu-member-profile-label-box-member-since-text-align-horizontal , CENTER );\n    color: var( --comp-scu-member-profile-label-box-member-since-color , rgba(89,89,89,1) );\n    font-family: var( --comp-scu-member-profile-label-box-member-since-font-family , 'Proxima Nova' );\n    font-weight: var( --comp-scu-member-profile-label-box-member-since-font-weight , 400 );\n    line-height: var( --comp-scu-member-profile-label-box-member-since-line-height , 12.89px );\n    letter-spacing: var( --comp-scu-member-profile-label-box-member-since-letter-spacing , 0px ); \n  }\n</style>\n<div id='comp-scu-member-profile-label-box-member-since'></div>"
    },
    "sizing": {
      "output": "\n@mixin comp-scu-member-profile-label-box-member-since--sizing {\n  width: 138px;\n  height: 13px;\n}",
      "example": "\n<style>\n  #comp-scu-member-profile-label-box-member-since { \n    width: 138px;\n    height: 13px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-member-profile-label-box-member-since'></div>"
    },
    "width": {
      "output": "\n@mixin comp-scu-member-profile-label-box-member-since--width {\n  width: 138px;\n}",
      "example": "\n<style>\n  #comp-scu-member-profile-label-box-member-since { \n    width: 138px;\n    height: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-member-profile-label-box-member-since'></div>"
    },
    "height": {
      "output": "\n@mixin comp-scu-member-profile-label-box-member-since--height {\n  height: 13px;\n}",
      "example": "\n<style>\n  #comp-scu-member-profile-label-box-member-since { \n    height: 13px;\n    width: 40px;\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-member-profile-label-box-member-since'></div>"
    },
    "absolute-layout": {
      "output": "\n@mixin comp-scu-member-profile-label-box-member-since--absolute-layout {\n   \n}",
      "example": "\n<style>\n  #comp-scu-member-profile-label-box-member-since { \n     \n    background-color: #aaa; \n    width: 40px; height: 40px;\n  }\n</style>\n<div id='comp-scu-member-profile-label-box-member-since'></div>"
    },
    "html-autolayout": {
      "output": "\n@mixin comp-scu-member-profile-label-box-member-since--html-autolayout {\n  display: inline-block;\n  margin-left: var( --comp-scu-member-profile-label-box-member-since-left , 0px );\n  margin-right: var( --comp-scu-member-profile-label-box-member-since-right , 0px );\n  margin-top: var( --comp-scu-member-profile-label-box-member-since-top , 21px );\n  margin-bottom: var( --comp-scu-member-profile-label-box-member-since-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-member-profile-label-box-member-since-left , 0px ) + var( --comp-scu-member-profile-label-box-member-since-right , 0px ) ) );\n}",
      "example": "\n<style>\n  #comp-scu-member-profile-label-box-member-since { \n    display: inline-block;\n  margin-left: var( --comp-scu-member-profile-label-box-member-since-left , 0px );\n  margin-right: var( --comp-scu-member-profile-label-box-member-since-right , 0px );\n  margin-top: var( --comp-scu-member-profile-label-box-member-since-top , 21px );\n  margin-bottom: var( --comp-scu-member-profile-label-box-member-since-bottom , 0px );\n  width: calc( 100% - ( var( --comp-scu-member-profile-label-box-member-since-left , 0px ) + var( --comp-scu-member-profile-label-box-member-since-right , 0px ) ) );\n    background-color: #aaa;\n  }\n</style>\n<div id='comp-scu-member-profile-label-box-member-since'>content</div>"
    }
  },
  "layouts-flex-v": {
    "": {
      "output": "\n@mixin flex-v { \n  display: flex;\n  -ms-flex-direction: var( --flex-v-ms-flex-direction , column );\n  -ms-flex-pack: var( --flex-v-ms-flex-pack , start );\n  -ms-flex-align: var( --flex-v-ms-flex-align , center );\n  flex-flow: var( --flex-v-flex-flow , column nowrap );\n  justify-content: var( --flex-v-justify-content , flex-start );\n  align-items: var( --flex-v-align-items , center ); \n}",
      "example": "\n<style>\n  #flex { \n    display: flex;\n    -ms-flex-direction: var( --flex-v-ms-flex-direction , column );\n    -ms-flex-pack: var( --flex-v-ms-flex-pack , start );\n    -ms-flex-align: var( --flex-v-ms-flex-align , center );\n    flex-flow: var( --flex-v-flex-flow , column nowrap );\n    justify-content: var( --flex-v-justify-content , flex-start );\n    align-items: var( --flex-v-align-items , center ); \n  }\n</style>\n<div id='flex' style=\"height:100vh;\">\n  <div style=\"border: 1px solid grey; padding: 4px;\">1</div>\n  <div style=\"border: 1px solid grey; padding: 4px;\">2</div>\n  <div style=\"border: 1px solid grey; padding: 4px;\">3</div>\n</div>"
    }
  },
  "layouts-flex-v-stretch": {
    "": {
      "output": "\n@mixin flex-v-stretch { \n  display: flex;\n  -ms-flex-direction: var( --flex-v-stretch-ms-flex-direction , column );\n  -ms-flex-pack: var( --flex-v-stretch-ms-flex-pack , start );\n  -ms-flex-align: var( --flex-v-stretch-ms-flex-align , stretch );\n  flex-flow: var( --flex-v-stretch-flex-flow , column nowrap );\n  justify-content: var( --flex-v-stretch-justify-content , flex-start );\n  align-items: var( --flex-v-stretch-align-items , stretch ); \n}",
      "example": "\n<style>\n  #flex { \n    display: flex;\n    -ms-flex-direction: var( --flex-v-stretch-ms-flex-direction , column );\n    -ms-flex-pack: var( --flex-v-stretch-ms-flex-pack , start );\n    -ms-flex-align: var( --flex-v-stretch-ms-flex-align , stretch );\n    flex-flow: var( --flex-v-stretch-flex-flow , column nowrap );\n    justify-content: var( --flex-v-stretch-justify-content , flex-start );\n    align-items: var( --flex-v-stretch-align-items , stretch ); \n  }\n</style>\n<div id='flex' style=\"height:100vh;\">\n  <div style=\"border: 1px solid grey; padding: 4px;\">1</div>\n  <div style=\"border: 1px solid grey; padding: 4px;\">2</div>\n  <div style=\"border: 1px solid grey; padding: 4px;\">3</div>\n</div>"
    }
  },
  "layouts-flex-v-left": {
    "": {
      "output": "\n@mixin flex-v-left { \n  display: flex;\n  -ms-flex-direction: var( --flex-v-left-ms-flex-direction , column );\n  -ms-flex-pack: var( --flex-v-left-ms-flex-pack , start );\n  -ms-flex-align: var( --flex-v-left-ms-flex-align , start );\n  flex-flow: var( --flex-v-left-flex-flow , column nowrap );\n  justify-content: var( --flex-v-left-justify-content , flex-start );\n  align-items: var( --flex-v-left-align-items , flex-start ); \n}",
      "example": "\n<style>\n  #flex { \n    display: flex;\n    -ms-flex-direction: var( --flex-v-left-ms-flex-direction , column );\n    -ms-flex-pack: var( --flex-v-left-ms-flex-pack , start );\n    -ms-flex-align: var( --flex-v-left-ms-flex-align , start );\n    flex-flow: var( --flex-v-left-flex-flow , column nowrap );\n    justify-content: var( --flex-v-left-justify-content , flex-start );\n    align-items: var( --flex-v-left-align-items , flex-start ); \n  }\n</style>\n<div id='flex' style=\"height:100vh;\">\n  <div style=\"border: 1px solid grey; padding: 4px;\">1</div>\n  <div style=\"border: 1px solid grey; padding: 4px;\">2</div>\n  <div style=\"border: 1px solid grey; padding: 4px;\">3</div>\n</div>"
    }
  },
  "layouts-flex-v-left-center": {
    "": {
      "output": "\n@mixin flex-v-left-center { \n  display: flex;\n  -ms-flex-direction: var( --flex-v-left-center-ms-flex-direction , column );\n  -ms-flex-pack: var( --flex-v-left-center-ms-flex-pack , center );\n  -ms-flex-align: var( --flex-v-left-center-ms-flex-align , start );\n  flex-flow: var( --flex-v-left-center-flex-flow , column nowrap );\n  justify-content: var( --flex-v-left-center-justify-content , center );\n  align-items: var( --flex-v-left-center-align-items , flex-start ); \n}",
      "example": "\n<style>\n  #flex { \n    display: flex;\n    -ms-flex-direction: var( --flex-v-left-center-ms-flex-direction , column );\n    -ms-flex-pack: var( --flex-v-left-center-ms-flex-pack , center );\n    -ms-flex-align: var( --flex-v-left-center-ms-flex-align , start );\n    flex-flow: var( --flex-v-left-center-flex-flow , column nowrap );\n    justify-content: var( --flex-v-left-center-justify-content , center );\n    align-items: var( --flex-v-left-center-align-items , flex-start ); \n  }\n</style>\n<div id='flex' style=\"height:100vh;\">\n  <div style=\"border: 1px solid grey; padding: 4px;\">1</div>\n  <div style=\"border: 1px solid grey; padding: 4px;\">2</div>\n  <div style=\"border: 1px solid grey; padding: 4px;\">3</div>\n</div>"
    }
  },
  "layouts-flex-v-center": {
    "": {
      "output": "\n@mixin flex-v-center { \n  display: flex;\n  -ms-flex-direction: var( --flex-v-center-ms-flex-direction , column );\n  -ms-flex-pack: var( --flex-v-center-ms-flex-pack , center );\n  -ms-flex-align: var( --flex-v-center-ms-flex-align , center );\n  flex-flow: var( --flex-v-center-flex-flow , column nowrap );\n  justify-content: var( --flex-v-center-justify-content , center );\n  align-items: var( --flex-v-center-align-items , center ); \n}",
      "example": "\n<style>\n  #flex { \n    display: flex;\n    -ms-flex-direction: var( --flex-v-center-ms-flex-direction , column );\n    -ms-flex-pack: var( --flex-v-center-ms-flex-pack , center );\n    -ms-flex-align: var( --flex-v-center-ms-flex-align , center );\n    flex-flow: var( --flex-v-center-flex-flow , column nowrap );\n    justify-content: var( --flex-v-center-justify-content , center );\n    align-items: var( --flex-v-center-align-items , center ); \n  }\n</style>\n<div id='flex' style=\"height:100vh;\">\n  <div style=\"border: 1px solid grey; padding: 4px;\">1</div>\n  <div style=\"border: 1px solid grey; padding: 4px;\">2</div>\n  <div style=\"border: 1px solid grey; padding: 4px;\">3</div>\n</div>"
    }
  },
  "layouts-flex-v-left-bottom": {
    "": {
      "output": "\n@mixin flex-v-left-bottom { \n  display: flex;\n  -ms-flex-direction: var( --flex-v-left-bottom-ms-flex-direction , column );\n  -ms-flex-pack: var( --flex-v-left-bottom-ms-flex-pack , end );\n  -ms-flex-align: var( --flex-v-left-bottom-ms-flex-align , start );\n  flex-flow: var( --flex-v-left-bottom-flex-flow , column nowrap );\n  justify-content: var( --flex-v-left-bottom-justify-content , flex-end );\n  align-items: var( --flex-v-left-bottom-align-items , flex-start ); \n}",
      "example": "\n<style>\n  #flex { \n    display: flex;\n    -ms-flex-direction: var( --flex-v-left-bottom-ms-flex-direction , column );\n    -ms-flex-pack: var( --flex-v-left-bottom-ms-flex-pack , end );\n    -ms-flex-align: var( --flex-v-left-bottom-ms-flex-align , start );\n    flex-flow: var( --flex-v-left-bottom-flex-flow , column nowrap );\n    justify-content: var( --flex-v-left-bottom-justify-content , flex-end );\n    align-items: var( --flex-v-left-bottom-align-items , flex-start ); \n  }\n</style>\n<div id='flex' style=\"height:100vh;\">\n  <div style=\"border: 1px solid grey; padding: 4px;\">1</div>\n  <div style=\"border: 1px solid grey; padding: 4px;\">2</div>\n  <div style=\"border: 1px solid grey; padding: 4px;\">3</div>\n</div>"
    }
  },
  "layouts-flex-v-right": {
    "": {
      "output": "\n@mixin flex-v-right { \n  display: flex;\n  -ms-flex-direction: var( --flex-v-right-ms-flex-direction , column );\n  -ms-flex-pack: var( --flex-v-right-ms-flex-pack , start );\n  -ms-flex-align: var( --flex-v-right-ms-flex-align , end );\n  flex-flow: var( --flex-v-right-flex-flow , column nowrap );\n  justify-content: var( --flex-v-right-justify-content , flex-start );\n  align-items: var( --flex-v-right-align-items , flex-end ); \n}",
      "example": "\n<style>\n  #flex { \n    display: flex;\n    -ms-flex-direction: var( --flex-v-right-ms-flex-direction , column );\n    -ms-flex-pack: var( --flex-v-right-ms-flex-pack , start );\n    -ms-flex-align: var( --flex-v-right-ms-flex-align , end );\n    flex-flow: var( --flex-v-right-flex-flow , column nowrap );\n    justify-content: var( --flex-v-right-justify-content , flex-start );\n    align-items: var( --flex-v-right-align-items , flex-end ); \n  }\n</style>\n<div id='flex' style=\"height:100vh;\">\n  <div style=\"border: 1px solid grey; padding: 4px;\">1</div>\n  <div style=\"border: 1px solid grey; padding: 4px;\">2</div>\n  <div style=\"border: 1px solid grey; padding: 4px;\">3</div>\n</div>"
    }
  },
  "layouts-flex-v-right-center": {
    "": {
      "output": "\n@mixin flex-v-right-center { \n  display: flex;\n  -ms-flex-direction: var( --flex-v-right-center-ms-flex-direction , column );\n  -ms-flex-pack: var( --flex-v-right-center-ms-flex-pack , center );\n  -ms-flex-align: var( --flex-v-right-center-ms-flex-align , end );\n  flex-flow: var( --flex-v-right-center-flex-flow , column nowrap );\n  justify-content: var( --flex-v-right-center-justify-content , center );\n  align-items: var( --flex-v-right-center-align-items , flex-end ); \n}",
      "example": "\n<style>\n  #flex { \n    display: flex;\n    -ms-flex-direction: var( --flex-v-right-center-ms-flex-direction , column );\n    -ms-flex-pack: var( --flex-v-right-center-ms-flex-pack , center );\n    -ms-flex-align: var( --flex-v-right-center-ms-flex-align , end );\n    flex-flow: var( --flex-v-right-center-flex-flow , column nowrap );\n    justify-content: var( --flex-v-right-center-justify-content , center );\n    align-items: var( --flex-v-right-center-align-items , flex-end ); \n  }\n</style>\n<div id='flex' style=\"height:100vh;\">\n  <div style=\"border: 1px solid grey; padding: 4px;\">1</div>\n  <div style=\"border: 1px solid grey; padding: 4px;\">2</div>\n  <div style=\"border: 1px solid grey; padding: 4px;\">3</div>\n</div>"
    }
  },
  "layouts-flex-v-right-bottom": {
    "": {
      "output": "\n@mixin flex-v-right-bottom { \n  display: flex;\n  -ms-flex-direction: var( --flex-v-right-bottom-ms-flex-direction , column );\n  -ms-flex-pack: var( --flex-v-right-bottom-ms-flex-pack , end );\n  -ms-flex-align: var( --flex-v-right-bottom-ms-flex-align , end );\n  flex-flow: var( --flex-v-right-bottom-flex-flow , column nowrap );\n  justify-content: var( --flex-v-right-bottom-justify-content , flex-end );\n  align-items: var( --flex-v-right-bottom-align-items , flex-end ); \n}",
      "example": "\n<style>\n  #flex { \n    display: flex;\n    -ms-flex-direction: var( --flex-v-right-bottom-ms-flex-direction , column );\n    -ms-flex-pack: var( --flex-v-right-bottom-ms-flex-pack , end );\n    -ms-flex-align: var( --flex-v-right-bottom-ms-flex-align , end );\n    flex-flow: var( --flex-v-right-bottom-flex-flow , column nowrap );\n    justify-content: var( --flex-v-right-bottom-justify-content , flex-end );\n    align-items: var( --flex-v-right-bottom-align-items , flex-end ); \n  }\n</style>\n<div id='flex' style=\"height:100vh;\">\n  <div style=\"border: 1px solid grey; padding: 4px;\">1</div>\n  <div style=\"border: 1px solid grey; padding: 4px;\">2</div>\n  <div style=\"border: 1px solid grey; padding: 4px;\">3</div>\n</div>"
    }
  },
  "layouts-flex-v-bottom": {
    "": {
      "output": "\n@mixin flex-v-bottom { \n  display: flex;\n  -ms-flex-direction: var( --flex-v-bottom-ms-flex-direction , column );\n  -ms-flex-pack: var( --flex-v-bottom-ms-flex-pack , end );\n  -ms-flex-align: var( --flex-v-bottom-ms-flex-align , center );\n  flex-flow: var( --flex-v-bottom-flex-flow , column nowrap );\n  justify-content: var( --flex-v-bottom-justify-content , flex-end );\n  align-items: var( --flex-v-bottom-align-items , center ); \n}",
      "example": "\n<style>\n  #flex { \n    display: flex;\n    -ms-flex-direction: var( --flex-v-bottom-ms-flex-direction , column );\n    -ms-flex-pack: var( --flex-v-bottom-ms-flex-pack , end );\n    -ms-flex-align: var( --flex-v-bottom-ms-flex-align , center );\n    flex-flow: var( --flex-v-bottom-flex-flow , column nowrap );\n    justify-content: var( --flex-v-bottom-justify-content , flex-end );\n    align-items: var( --flex-v-bottom-align-items , center ); \n  }\n</style>\n<div id='flex' style=\"height:100vh;\">\n  <div style=\"border: 1px solid grey; padding: 4px;\">1</div>\n  <div style=\"border: 1px solid grey; padding: 4px;\">2</div>\n  <div style=\"border: 1px solid grey; padding: 4px;\">3</div>\n</div>"
    }
  },
  "layouts-flex-h": {
    "": {
      "output": "\n@mixin flex-h { \n  display: flex;\n  -ms-flex-direction: var( --flex-h-ms-flex-direction , row );\n  -ms-flex-pack: var( --flex-h-ms-flex-pack , start );\n  -ms-flex-align: var( --flex-h-ms-flex-align , center );\n  flex-flow: var( --flex-h-flex-flow , row nowrap );\n  justify-content: var( --flex-h-justify-content , flex-start );\n  align-items: var( --flex-h-align-items , center ); \n}",
      "example": "\n<style>\n  #flex { \n    display: flex;\n    -ms-flex-direction: var( --flex-h-ms-flex-direction , row );\n    -ms-flex-pack: var( --flex-h-ms-flex-pack , start );\n    -ms-flex-align: var( --flex-h-ms-flex-align , center );\n    flex-flow: var( --flex-h-flex-flow , row nowrap );\n    justify-content: var( --flex-h-justify-content , flex-start );\n    align-items: var( --flex-h-align-items , center ); \n  }\n</style>\n<div id='flex' style=\"height:100vh;\">\n  <div style=\"border: 1px solid grey; padding: 4px;\">1</div>\n  <div style=\"border: 1px solid grey; padding: 4px;\">2</div>\n  <div style=\"border: 1px solid grey; padding: 4px;\">3</div>\n</div>"
    }
  },
  "layouts-flex-h-stretch": {
    "": {
      "output": "\n@mixin flex-h-stretch { \n  display: flex;\n  -ms-flex-direction: var( --flex-h-stretch-ms-flex-direction , row );\n  -ms-flex-pack: var( --flex-h-stretch-ms-flex-pack , start );\n  -ms-flex-align: var( --flex-h-stretch-ms-flex-align , stretch );\n  flex-flow: var( --flex-h-stretch-flex-flow , row nowrap );\n  justify-content: var( --flex-h-stretch-justify-content , flex-start );\n  align-items: var( --flex-h-stretch-align-items , stretch ); \n}",
      "example": "\n<style>\n  #flex { \n    display: flex;\n    -ms-flex-direction: var( --flex-h-stretch-ms-flex-direction , row );\n    -ms-flex-pack: var( --flex-h-stretch-ms-flex-pack , start );\n    -ms-flex-align: var( --flex-h-stretch-ms-flex-align , stretch );\n    flex-flow: var( --flex-h-stretch-flex-flow , row nowrap );\n    justify-content: var( --flex-h-stretch-justify-content , flex-start );\n    align-items: var( --flex-h-stretch-align-items , stretch ); \n  }\n</style>\n<div id='flex' style=\"height:100vh;\">\n  <div style=\"border: 1px solid grey; padding: 4px;\">1</div>\n  <div style=\"border: 1px solid grey; padding: 4px;\">2</div>\n  <div style=\"border: 1px solid grey; padding: 4px;\">3</div>\n</div>"
    }
  },
  "layouts-flex-h-baseline": {
    "": {
      "output": "\n@mixin flex-h-baseline { \n  display: flex;\n  -ms-flex-direction: var( --flex-h-baseline-ms-flex-direction , row );\n  -ms-flex-pack: var( --flex-h-baseline-ms-flex-pack , start );\n  -ms-flex-align: var( --flex-h-baseline-ms-flex-align , baseline );\n  flex-flow: var( --flex-h-baseline-flex-flow , row nowrap );\n  justify-content: var( --flex-h-baseline-justify-content , flex-start );\n  align-items: var( --flex-h-baseline-align-items , baseline ); \n}",
      "example": "\n<style>\n  #flex { \n    display: flex;\n    -ms-flex-direction: var( --flex-h-baseline-ms-flex-direction , row );\n    -ms-flex-pack: var( --flex-h-baseline-ms-flex-pack , start );\n    -ms-flex-align: var( --flex-h-baseline-ms-flex-align , baseline );\n    flex-flow: var( --flex-h-baseline-flex-flow , row nowrap );\n    justify-content: var( --flex-h-baseline-justify-content , flex-start );\n    align-items: var( --flex-h-baseline-align-items , baseline ); \n  }\n</style>\n<div id='flex' style=\"height:100vh;\">\n  <div style=\"border: 1px solid grey; padding: 4px;\">1</div>\n  <div style=\"border: 1px solid grey; padding: 4px;\">2</div>\n  <div style=\"border: 1px solid grey; padding: 4px;\">3</div>\n</div>"
    }
  },
  "layouts-flex-h-top": {
    "": {
      "output": "\n@mixin flex-h-top { \n  display: flex;\n  -ms-flex-direction: var( --flex-h-top-ms-flex-direction , row );\n  -ms-flex-pack: var( --flex-h-top-ms-flex-pack , start );\n  -ms-flex-align: var( --flex-h-top-ms-flex-align , start );\n  flex-flow: var( --flex-h-top-flex-flow , row nowrap );\n  justify-content: var( --flex-h-top-justify-content , flex-start );\n  align-items: var( --flex-h-top-align-items , flex-start ); \n}",
      "example": "\n<style>\n  #flex { \n    display: flex;\n    -ms-flex-direction: var( --flex-h-top-ms-flex-direction , row );\n    -ms-flex-pack: var( --flex-h-top-ms-flex-pack , start );\n    -ms-flex-align: var( --flex-h-top-ms-flex-align , start );\n    flex-flow: var( --flex-h-top-flex-flow , row nowrap );\n    justify-content: var( --flex-h-top-justify-content , flex-start );\n    align-items: var( --flex-h-top-align-items , flex-start ); \n  }\n</style>\n<div id='flex' style=\"height:100vh;\">\n  <div style=\"border: 1px solid grey; padding: 4px;\">1</div>\n  <div style=\"border: 1px solid grey; padding: 4px;\">2</div>\n  <div style=\"border: 1px solid grey; padding: 4px;\">3</div>\n</div>"
    }
  },
  "layouts-flex-h-right": {
    "": {
      "output": "\n@mixin flex-h-right { \n  display: flex;\n  -ms-flex-direction: var( --flex-h-right-ms-flex-direction , row );\n  -ms-flex-pack: var( --flex-h-right-ms-flex-pack , end );\n  -ms-flex-align: var( --flex-h-right-ms-flex-align , center );\n  flex-flow: var( --flex-h-right-flex-flow , row nowrap );\n  justify-content: var( --flex-h-right-justify-content , flex-end );\n  align-items: var( --flex-h-right-align-items , center ); \n}",
      "example": "\n<style>\n  #flex { \n    display: flex;\n    -ms-flex-direction: var( --flex-h-right-ms-flex-direction , row );\n    -ms-flex-pack: var( --flex-h-right-ms-flex-pack , end );\n    -ms-flex-align: var( --flex-h-right-ms-flex-align , center );\n    flex-flow: var( --flex-h-right-flex-flow , row nowrap );\n    justify-content: var( --flex-h-right-justify-content , flex-end );\n    align-items: var( --flex-h-right-align-items , center ); \n  }\n</style>\n<div id='flex' style=\"height:100vh;\">\n  <div style=\"border: 1px solid grey; padding: 4px;\">1</div>\n  <div style=\"border: 1px solid grey; padding: 4px;\">2</div>\n  <div style=\"border: 1px solid grey; padding: 4px;\">3</div>\n</div>"
    }
  },
  "layouts-flex-h-center-right": {
    "": {
      "output": "\n@mixin flex-h-center-right { \n  display: flex;\n  -ms-flex-direction: var( --flex-h-center-right-ms-flex-direction , row );\n  -ms-flex-pack: var( --flex-h-center-right-ms-flex-pack , end );\n  -ms-flex-align: var( --flex-h-center-right-ms-flex-align , center );\n  flex-flow: var( --flex-h-center-right-flex-flow , row nowrap );\n  justify-content: var( --flex-h-center-right-justify-content , flex-end );\n  align-items: var( --flex-h-center-right-align-items , center ); \n}",
      "example": "\n<style>\n  #flex { \n    display: flex;\n    -ms-flex-direction: var( --flex-h-center-right-ms-flex-direction , row );\n    -ms-flex-pack: var( --flex-h-center-right-ms-flex-pack , end );\n    -ms-flex-align: var( --flex-h-center-right-ms-flex-align , center );\n    flex-flow: var( --flex-h-center-right-flex-flow , row nowrap );\n    justify-content: var( --flex-h-center-right-justify-content , flex-end );\n    align-items: var( --flex-h-center-right-align-items , center ); \n  }\n</style>\n<div id='flex' style=\"height:100vh;\">\n  <div style=\"border: 1px solid grey; padding: 4px;\">1</div>\n  <div style=\"border: 1px solid grey; padding: 4px;\">2</div>\n  <div style=\"border: 1px solid grey; padding: 4px;\">3</div>\n</div>"
    }
  },
  "layouts-flex-h-center-left": {
    "": {
      "output": "\n@mixin flex-h-center-left { \n  display: flex;\n  -ms-flex-direction: var( --flex-h-center-left-ms-flex-direction , row );\n  -ms-flex-pack: var( --flex-h-center-left-ms-flex-pack , end );\n  -ms-flex-align: var( --flex-h-center-left-ms-flex-align , center );\n  flex-flow: var( --flex-h-center-left-flex-flow , row nowrap );\n  justify-content: var( --flex-h-center-left-justify-content , flex-start );\n  align-items: var( --flex-h-center-left-align-items , center ); \n}",
      "example": "\n<style>\n  #flex { \n    display: flex;\n    -ms-flex-direction: var( --flex-h-center-left-ms-flex-direction , row );\n    -ms-flex-pack: var( --flex-h-center-left-ms-flex-pack , end );\n    -ms-flex-align: var( --flex-h-center-left-ms-flex-align , center );\n    flex-flow: var( --flex-h-center-left-flex-flow , row nowrap );\n    justify-content: var( --flex-h-center-left-justify-content , flex-start );\n    align-items: var( --flex-h-center-left-align-items , center ); \n  }\n</style>\n<div id='flex' style=\"height:100vh;\">\n  <div style=\"border: 1px solid grey; padding: 4px;\">1</div>\n  <div style=\"border: 1px solid grey; padding: 4px;\">2</div>\n  <div style=\"border: 1px solid grey; padding: 4px;\">3</div>\n</div>"
    }
  },
  "layouts-flex-h-top-right": {
    "": {
      "output": "\n@mixin flex-h-top-right { \n  display: flex;\n  -ms-flex-direction: var( --flex-h-top-right-ms-flex-direction , row );\n  -ms-flex-pack: var( --flex-h-top-right-ms-flex-pack , end );\n  -ms-flex-align: var( --flex-h-top-right-ms-flex-align , start );\n  flex-flow: var( --flex-h-top-right-flex-flow , row nowrap );\n  justify-content: var( --flex-h-top-right-justify-content , flex-end );\n  align-items: var( --flex-h-top-right-align-items , flex-start ); \n}",
      "example": "\n<style>\n  #flex { \n    display: flex;\n    -ms-flex-direction: var( --flex-h-top-right-ms-flex-direction , row );\n    -ms-flex-pack: var( --flex-h-top-right-ms-flex-pack , end );\n    -ms-flex-align: var( --flex-h-top-right-ms-flex-align , start );\n    flex-flow: var( --flex-h-top-right-flex-flow , row nowrap );\n    justify-content: var( --flex-h-top-right-justify-content , flex-end );\n    align-items: var( --flex-h-top-right-align-items , flex-start ); \n  }\n</style>\n<div id='flex' style=\"height:100vh;\">\n  <div style=\"border: 1px solid grey; padding: 4px;\">1</div>\n  <div style=\"border: 1px solid grey; padding: 4px;\">2</div>\n  <div style=\"border: 1px solid grey; padding: 4px;\">3</div>\n</div>"
    }
  },
  "layouts-flex-h-bottom": {
    "": {
      "output": "\n@mixin flex-h-bottom { \n  display: flex;\n  -ms-flex-direction: var( --flex-h-bottom-ms-flex-direction , row );\n  -ms-flex-pack: var( --flex-h-bottom-ms-flex-pack , start );\n  -ms-flex-align: var( --flex-h-bottom-ms-flex-align , end );\n  flex-flow: var( --flex-h-bottom-flex-flow , row nowrap );\n  justify-content: var( --flex-h-bottom-justify-content , flex-start );\n  align-items: var( --flex-h-bottom-align-items , flex-end ); \n}",
      "example": "\n<style>\n  #flex { \n    display: flex;\n    -ms-flex-direction: var( --flex-h-bottom-ms-flex-direction , row );\n    -ms-flex-pack: var( --flex-h-bottom-ms-flex-pack , start );\n    -ms-flex-align: var( --flex-h-bottom-ms-flex-align , end );\n    flex-flow: var( --flex-h-bottom-flex-flow , row nowrap );\n    justify-content: var( --flex-h-bottom-justify-content , flex-start );\n    align-items: var( --flex-h-bottom-align-items , flex-end ); \n  }\n</style>\n<div id='flex' style=\"height:100vh;\">\n  <div style=\"border: 1px solid grey; padding: 4px;\">1</div>\n  <div style=\"border: 1px solid grey; padding: 4px;\">2</div>\n  <div style=\"border: 1px solid grey; padding: 4px;\">3</div>\n</div>"
    }
  },
  "layouts-flex-h-bottom-right": {
    "": {
      "output": "\n@mixin flex-h-bottom-right { \n  display: flex;\n  -ms-flex-direction: var( --flex-h-bottom-right-ms-flex-direction , row );\n  -ms-flex-pack: var( --flex-h-bottom-right-ms-flex-pack , end );\n  -ms-flex-align: var( --flex-h-bottom-right-ms-flex-align , end );\n  flex-flow: var( --flex-h-bottom-right-flex-flow , row nowrap );\n  justify-content: var( --flex-h-bottom-right-justify-content , flex-end );\n  align-items: var( --flex-h-bottom-right-align-items , flex-end ); \n}",
      "example": "\n<style>\n  #flex { \n    display: flex;\n    -ms-flex-direction: var( --flex-h-bottom-right-ms-flex-direction , row );\n    -ms-flex-pack: var( --flex-h-bottom-right-ms-flex-pack , end );\n    -ms-flex-align: var( --flex-h-bottom-right-ms-flex-align , end );\n    flex-flow: var( --flex-h-bottom-right-flex-flow , row nowrap );\n    justify-content: var( --flex-h-bottom-right-justify-content , flex-end );\n    align-items: var( --flex-h-bottom-right-align-items , flex-end ); \n  }\n</style>\n<div id='flex' style=\"height:100vh;\">\n  <div style=\"border: 1px solid grey; padding: 4px;\">1</div>\n  <div style=\"border: 1px solid grey; padding: 4px;\">2</div>\n  <div style=\"border: 1px solid grey; padding: 4px;\">3</div>\n</div>"
    }
  },
  "layouts-flex-h-bottom-center": {
    "": {
      "output": "\n@mixin flex-h-bottom-center { \n  display: flex;\n  -ms-flex-direction: var( --flex-h-bottom-center-ms-flex-direction , row );\n  -ms-flex-pack: var( --flex-h-bottom-center-ms-flex-pack , end );\n  -ms-flex-align: var( --flex-h-bottom-center-ms-flex-align , end );\n  flex-flow: var( --flex-h-bottom-center-flex-flow , row nowrap );\n  justify-content: var( --flex-h-bottom-center-justify-content , center );\n  align-items: var( --flex-h-bottom-center-align-items , flex-end ); \n}",
      "example": "\n<style>\n  #flex { \n    display: flex;\n    -ms-flex-direction: var( --flex-h-bottom-center-ms-flex-direction , row );\n    -ms-flex-pack: var( --flex-h-bottom-center-ms-flex-pack , end );\n    -ms-flex-align: var( --flex-h-bottom-center-ms-flex-align , end );\n    flex-flow: var( --flex-h-bottom-center-flex-flow , row nowrap );\n    justify-content: var( --flex-h-bottom-center-justify-content , center );\n    align-items: var( --flex-h-bottom-center-align-items , flex-end ); \n  }\n</style>\n<div id='flex' style=\"height:100vh;\">\n  <div style=\"border: 1px solid grey; padding: 4px;\">1</div>\n  <div style=\"border: 1px solid grey; padding: 4px;\">2</div>\n  <div style=\"border: 1px solid grey; padding: 4px;\">3</div>\n</div>"
    }
  },
  "layouts-flex-center": {
    "": {
      "output": "\n@mixin flex-center { \n  display: flex;\n  -ms-flex-direction: var( --flex-center-ms-flex-direction , row );\n  -ms-flex-pack: var( --flex-center-ms-flex-pack , center );\n  -ms-flex-align: var( --flex-center-ms-flex-align , center );\n  flex-flow: var( --flex-center-flex-flow , row nowrap );\n  justify-content: var( --flex-center-justify-content , center );\n  align-items: var( --flex-center-align-items , center ); \n}",
      "example": "\n<style>\n  #flex { \n    display: flex;\n    -ms-flex-direction: var( --flex-center-ms-flex-direction , row );\n    -ms-flex-pack: var( --flex-center-ms-flex-pack , center );\n    -ms-flex-align: var( --flex-center-ms-flex-align , center );\n    flex-flow: var( --flex-center-flex-flow , row nowrap );\n    justify-content: var( --flex-center-justify-content , center );\n    align-items: var( --flex-center-align-items , center ); \n  }\n</style>\n<div id='flex' style=\"height:100vh;\">\n  <div style=\"border: 1px solid grey; padding: 4px;\">1</div>\n  <div style=\"border: 1px solid grey; padding: 4px;\">2</div>\n  <div style=\"border: 1px solid grey; padding: 4px;\">3</div>\n</div>"
    }
  },
  "layouts-flex-h-center": {
    "": {
      "output": "\n@mixin flex-h-center { \n  display: flex;\n  -ms-flex-direction: var( --flex-h-center-ms-flex-direction , row );\n  -ms-flex-pack: var( --flex-h-center-ms-flex-pack , center );\n  -ms-flex-align: var( --flex-h-center-ms-flex-align , center );\n  flex-flow: var( --flex-h-center-flex-flow , row nowrap );\n  justify-content: var( --flex-h-center-justify-content , center );\n  align-items: var( --flex-h-center-align-items , center ); \n}",
      "example": "\n<style>\n  #flex { \n    display: flex;\n    -ms-flex-direction: var( --flex-h-center-ms-flex-direction , row );\n    -ms-flex-pack: var( --flex-h-center-ms-flex-pack , center );\n    -ms-flex-align: var( --flex-h-center-ms-flex-align , center );\n    flex-flow: var( --flex-h-center-flex-flow , row nowrap );\n    justify-content: var( --flex-h-center-justify-content , center );\n    align-items: var( --flex-h-center-align-items , center ); \n  }\n</style>\n<div id='flex' style=\"height:100vh;\">\n  <div style=\"border: 1px solid grey; padding: 4px;\">1</div>\n  <div style=\"border: 1px solid grey; padding: 4px;\">2</div>\n  <div style=\"border: 1px solid grey; padding: 4px;\">3</div>\n</div>"
    }
  },
  "layouts-flex-right": {
    "": {
      "output": "\n@mixin flex-right { \n  display: flex;\n  -ms-flex-direction: var( --flex-right-ms-flex-direction , row );\n  -ms-flex-pack: var( --flex-right-ms-flex-pack , end );\n  -ms-flex-align: var( --flex-right-ms-flex-align , center );\n  flex-flow: var( --flex-right-flex-flow , row nowrap );\n  justify-content: var( --flex-right-justify-content , flex-end );\n  align-items: var( --flex-right-align-items , center ); \n}",
      "example": "\n<style>\n  #flex { \n    display: flex;\n    -ms-flex-direction: var( --flex-right-ms-flex-direction , row );\n    -ms-flex-pack: var( --flex-right-ms-flex-pack , end );\n    -ms-flex-align: var( --flex-right-ms-flex-align , center );\n    flex-flow: var( --flex-right-flex-flow , row nowrap );\n    justify-content: var( --flex-right-justify-content , flex-end );\n    align-items: var( --flex-right-align-items , center ); \n  }\n</style>\n<div id='flex' style=\"height:100vh;\">\n  <div style=\"border: 1px solid grey; padding: 4px;\">1</div>\n  <div style=\"border: 1px solid grey; padding: 4px;\">2</div>\n  <div style=\"border: 1px solid grey; padding: 4px;\">3</div>\n</div>"
    }
  },
  "layouts-flex-left": {
    "": {
      "output": "\n@mixin flex-left { \n  display: flex;\n  -ms-flex-direction: var( --flex-left-ms-flex-direction , row );\n  -ms-flex-pack: var( --flex-left-ms-flex-pack , start );\n  -ms-flex-align: var( --flex-left-ms-flex-align , center );\n  flex-flow: var( --flex-left-flex-flow , row nowrap );\n  justify-content: var( --flex-left-justify-content , flex-start );\n  align-items: var( --flex-left-align-items , center ); \n}",
      "example": "\n<style>\n  #flex { \n    display: flex;\n    -ms-flex-direction: var( --flex-left-ms-flex-direction , row );\n    -ms-flex-pack: var( --flex-left-ms-flex-pack , start );\n    -ms-flex-align: var( --flex-left-ms-flex-align , center );\n    flex-flow: var( --flex-left-flex-flow , row nowrap );\n    justify-content: var( --flex-left-justify-content , flex-start );\n    align-items: var( --flex-left-align-items , center ); \n  }\n</style>\n<div id='flex' style=\"height:100vh;\">\n  <div style=\"border: 1px solid grey; padding: 4px;\">1</div>\n  <div style=\"border: 1px solid grey; padding: 4px;\">2</div>\n  <div style=\"border: 1px solid grey; padding: 4px;\">3</div>\n</div>"
    }
  },
  "layouts-flex-fill-": {
    "text": {
      "output": "\n@mixin flex-fill { \n  flex: var( --flex-fill , 1 ); \n}",
      "example": "\n<style>\n  #flex-fill-7692278 { \n    flex: var( --flex-fill , 1 ); \n  }\n</style>\n<div style=\"display: flex; height:100vh; width: 100vw;\">\n  <div style=\"border: 1px solid grey; padding: 4px;\">1</div>\n  <div id='flex-fill-7692278' style=\"border: 1px solid grey; padding: 4px;\">fill</div>\n  <div style=\"border: 1px solid grey; padding: 4px;\">3</div>\n</div>"
    }
  },
  "layouts-flex-fill-container-": {
    "text": {
      "output": "\n@mixin flex-fill-container { \n  position: var( --flex-fill-container-position , absolute );\n\ttop: var( --flex-fill-container-top , 0 );\n\tright: var( --flex-fill-container-right , 0 );\n\tbottom: var( --flex-fill-container-bottom , 0 );\n\tleft: var( --flex-fill-container-left , 0 ); \n}",
      "example": "\n<style>\n  #flex-fill-container-80057354 { \n    position: var( --flex-fill-container-position , absolute );\n\t\ttop: var( --flex-fill-container-top , 0 );\n\t\tright: var( --flex-fill-container-right , 0 );\n\t\tbottom: var( --flex-fill-container-bottom , 0 );\n\t\tleft: var( --flex-fill-container-left , 0 ); \n  }\n</style>\n<div style=\"display:flex; background-color: #fff; height:100vh;\">\n  <div id='flex-fill-container-80057354' style=\"background:yellow;\">.flex-fill-container (yellow)</div>\n</div>"
    }
  },
  "layouts-flex-align-self-flex-start": {
    "text": {
      "output": "\n@mixin flex-align-self-flex-start { \n  -ms-flex-item-align: var( --flex-align-self-flex-start , flex-start );\n\talign-self: var( --flex-align-self-flex-start , flex-start ); \n}",
      "example": "\n<style>\n  #flex-align-self-17279827 { \n    -ms-flex-item-align: var( --flex-align-self-flex-start , flex-start );\n\t\talign-self: var( --flex-align-self-flex-start , flex-start ); \n  }\n</style>\n<div style=\"display: flex; width: 100vw; height:100vh; background:#fff;\">\n  <div style=\"border: 1px solid grey; padding: 4px;\">1</div>\n  <div id='flex-align-self-17279827' style=\"border: 1px solid #CCC; padding: 4px;\">2 (flex-item)</div>\n  <div style=\"border: 1px solid grey; padding: 4px;\">3</div>\n</div>"
    }
  },
  "layouts-flex-align-self-start": {
    "text": {
      "output": "\n@mixin flex-align-self-start { \n  -ms-flex-item-align: var( --flex-align-self-start , flex-start );\n\talign-self: var( --flex-align-self-start , flex-start ); \n}",
      "example": "\n<style>\n  #flex-align-self-91147685 { \n    -ms-flex-item-align: var( --flex-align-self-start , flex-start );\n\t\talign-self: var( --flex-align-self-start , flex-start ); \n  }\n</style>\n<div style=\"display: flex; width: 100vw; height:100vh; background:#fff;\">\n  <div style=\"border: 1px solid grey; padding: 4px;\">1</div>\n  <div id='flex-align-self-91147685' style=\"border: 1px solid #CCC; padding: 4px;\">2 (flex-item)</div>\n  <div style=\"border: 1px solid grey; padding: 4px;\">3</div>\n</div>"
    }
  },
  "layouts-flex-align-self-flex-end": {
    "text": {
      "output": "\n@mixin flex-align-self-flex-end { \n  -ms-flex-item-align: var( --flex-align-self-flex-end , flex-end );\n\talign-self: var( --flex-align-self-flex-end , flex-end ); \n}",
      "example": "\n<style>\n  #flex-align-self-11912571 { \n    -ms-flex-item-align: var( --flex-align-self-flex-end , flex-end );\n\t\talign-self: var( --flex-align-self-flex-end , flex-end ); \n  }\n</style>\n<div style=\"display: flex; width: 100vw; height:100vh; background:#fff;\">\n  <div style=\"border: 1px solid grey; padding: 4px;\">1</div>\n  <div id='flex-align-self-11912571' style=\"border: 1px solid #CCC; padding: 4px;\">2 (flex-item)</div>\n  <div style=\"border: 1px solid grey; padding: 4px;\">3</div>\n</div>"
    }
  },
  "layouts-flex-align-self-end": {
    "text": {
      "output": "\n@mixin flex-align-self-end { \n  -ms-flex-item-align: var( --flex-align-self-end , flex-end );\n\talign-self: var( --flex-align-self-end , flex-end ); \n}",
      "example": "\n<style>\n  #flex-align-self-28797409 { \n    -ms-flex-item-align: var( --flex-align-self-end , flex-end );\n\t\talign-self: var( --flex-align-self-end , flex-end ); \n  }\n</style>\n<div style=\"display: flex; width: 100vw; height:100vh; background:#fff;\">\n  <div style=\"border: 1px solid grey; padding: 4px;\">1</div>\n  <div id='flex-align-self-28797409' style=\"border: 1px solid #CCC; padding: 4px;\">2 (flex-item)</div>\n  <div style=\"border: 1px solid grey; padding: 4px;\">3</div>\n</div>"
    }
  },
  "layouts-flex-align-self-center": {
    "text": {
      "output": "\n@mixin flex-align-self-center { \n  -ms-flex-item-align: var( --flex-align-self-center , center );\n\talign-self: var( --flex-align-self-center , center ); \n}",
      "example": "\n<style>\n  #flex-align-self-91481671 { \n    -ms-flex-item-align: var( --flex-align-self-center , center );\n\t\talign-self: var( --flex-align-self-center , center ); \n  }\n</style>\n<div style=\"display: flex; width: 100vw; height:100vh; background:#fff;\">\n  <div style=\"border: 1px solid grey; padding: 4px;\">1</div>\n  <div id='flex-align-self-91481671' style=\"border: 1px solid #CCC; padding: 4px;\">2 (flex-item)</div>\n  <div style=\"border: 1px solid grey; padding: 4px;\">3</div>\n</div>"
    }
  },
  "layouts-flex-align-self-baseline": {
    "text": {
      "output": "\n@mixin flex-align-self-baseline { \n  -ms-flex-item-align: var( --flex-align-self-baseline , baseline );\n\talign-self: var( --flex-align-self-baseline , baseline ); \n}",
      "example": "\n<style>\n  #flex-align-self-11084685 { \n    -ms-flex-item-align: var( --flex-align-self-baseline , baseline );\n\t\talign-self: var( --flex-align-self-baseline , baseline ); \n  }\n</style>\n<div style=\"display: flex; width: 100vw; height:100vh; background:#fff;\">\n  <div style=\"border: 1px solid grey; padding: 4px;\">1</div>\n  <div id='flex-align-self-11084685' style=\"border: 1px solid #CCC; padding: 4px;\">2 (flex-item)</div>\n  <div style=\"border: 1px solid grey; padding: 4px;\">3</div>\n</div>"
    }
  },
  "layouts-flex-align-self-stretch": {
    "text": {
      "output": "\n@mixin flex-align-self-stretch { \n  -ms-flex-item-align: var( --flex-align-self-stretch , stretch );\n\talign-self: var( --flex-align-self-stretch , stretch ); \n}",
      "example": "\n<style>\n  #flex-align-self-14692960 { \n    -ms-flex-item-align: var( --flex-align-self-stretch , stretch );\n\t\talign-self: var( --flex-align-self-stretch , stretch ); \n  }\n</style>\n<div style=\"display: flex; width: 100vw; height:100vh; background:#fff;\">\n  <div style=\"border: 1px solid grey; padding: 4px;\">1</div>\n  <div id='flex-align-self-14692960' style=\"border: 1px solid #CCC; padding: 4px;\">2 (flex-item)</div>\n  <div style=\"border: 1px solid grey; padding: 4px;\">3</div>\n</div>"
    }
  },
  "layouts-flex-space-between": {
    "text": {
      "output": "\n@mixin flex-space-between { \n  -ms-flex-pack: var( --flex-space-between , space-between );\n\tjustify-content: var( --flex-space-between , space-between ); \n}",
      "example": "\n<style>\n  #flex-space-62981 { \n    -ms-flex-pack: var( --flex-space-between , space-between );\n\t\tjustify-content: var( --flex-space-between , space-between ); \n  }\n</style>\n<div id='flex-space-62981' style=\"display: flex; width: 100%; background:#fff;\">\n  <div style=\"border: 1px solid grey; width: 25%; height: 100px; padding: 4px;\">1</div>\n  <div style=\"border: 1px solid grey; width: 25%; height: 100px; padding: 4px;\">2</div>\n  <div style=\"border: 1px solid grey; width: 25%; height: 100px; padding: 4px;\">3</div>\n</div>"
    }
  },
  "layouts-flex-space-around": {
    "text": {
      "output": "\n@mixin flex-space-around { \n  -ms-flex-pack: var( --flex-space-around , space-around );\n\tjustify-content: var( --flex-space-around , space-around ); \n}",
      "example": "\n<style>\n  #flex-space-42701140 { \n    -ms-flex-pack: var( --flex-space-around , space-around );\n\t\tjustify-content: var( --flex-space-around , space-around ); \n  }\n</style>\n<div id='flex-space-42701140' style=\"display: flex; width: 100%; background:#fff;\">\n  <div style=\"border: 1px solid grey; width: 25%; height: 100px; padding: 4px;\">1</div>\n  <div style=\"border: 1px solid grey; width: 25%; height: 100px; padding: 4px;\">2</div>\n  <div style=\"border: 1px solid grey; width: 25%; height: 100px; padding: 4px;\">3</div>\n</div>"
    }
  },
  "layouts-spacing-0": {
    "size": {
      "output": "\n@mixin spacing-0-size {\n  width: var( --spacing-0 , 0px );\n  height: var( --spacing-0 , 0px );\n}",
      "example": "\n<style>\n  #spacing-0 {\n    background-color: #aaa;\n    width: 0px;\n    height: 0px;\n  }\n</style>\n<div id='spacing-0'></div>"
    },
    "width": {
      "output": "\n@mixin spacing-0-width {\n  width: var( --spacing-0 , 0px  );\n}",
      "example": "\n<style>\n  #spacing-0-99671991 {\n    background-color: #aaa;\n    width: 0px;\n    height: 100px;\n  }\n</style>\n<div id='spacing-0-99671991'></div>"
    },
    "height": {
      "output": "\n@mixin spacing-0-height {\n  height: var( --spacing-0 , 0px  );\n}",
      "example": "\n<style>\n  #spacing-0-92920035 {\n    background-color: #aaa;\n    height: 0px;\n    width: 100px;\n  }\n</style>\n<div id='spacing-0-92920035'></div>"
    },
    "min-width": {
      "output": "\n@mixin spacing-0-min-width {\n  min-width: var( --spacing-0 , 0px  );\n}",
      "example": "\n<style>\n  #spacing-0-40392082 {\n    background-color: #aaa;\n    min-width: 0px;\n    height: 100px; width: 100%;\n  }\n</style>\n<div id='spacing-0-40392082'></div>"
    },
    "min-height": {
      "output": "\n@mixin spacing-0-min-height {\n  min-height: var( --spacing-0 , 0px  );\n}",
      "example": "\n<style>\n  #spacing-0-33602057 {\n    background-color: #aaa;\n    min-height: 0px;\n    width: 100px; height: 100%;\n  }\n</style>\n<div id='spacing-0-33602057'></div>"
    },
    "top": {
      "output": "\n@mixin spacing-0-top {\n  top: var( --spacing-0 , 0px  );\n}",
      "example": "\n<style>\n  #spacing-0-27170306 {\n    background-color: #aaa;\n    top: 0px;\n    position: absolute; width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-0-27170306'></div>"
    },
    "bottom": {
      "output": "\n@mixin spacing-0-bottom {\n  bottom: var( --spacing-0 , 0px  );\n}",
      "example": "\n<style>\n  #spacing-0-43029958 {\n    background-color: #aaa;\n    bottom: 0px;\n    position: absolute; width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-0-43029958'></div>"
    },
    "left": {
      "output": "\n@mixin spacing-0-left {\n  left: var( --spacing-0 , 0px  );\n}",
      "example": "\n<style>\n  #spacing-0-99408720 {\n    background-color: #aaa;\n    left: 0px;\n    position: absolute; width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-0-99408720'></div>"
    },
    "right": {
      "output": "\n@mixin spacing-0-right {\n  right: var( --spacing-0 , 0px  );\n}",
      "example": "\n<style>\n  #spacing-0-37574624 {\n    background-color: #aaa;\n    right: 0px;\n    position: absolute; width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-0-37574624'></div>"
    },
    "margin": {
      "output": "\n@mixin spacing-0-margin {\n  margin: var( --spacing-0 , 0px  );\n}",
      "example": "\n<style>\n  #spacing-0-57655669 {\n    background-color: #aaa;\n    margin: 0px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-0-57655669'></div>"
    },
    "margin-width": {
      "output": "\n@mixin spacing-0-margin-width {\n  margin-left: var( --spacing-0 , 0px );\n  margin-right: var( --spacing-0 , 0px );\n}",
      "example": "\n<style>\n  #spacing-0 {\n    background-color: #aaa;\n    margin-left: 0px;\n    margin-right: 0px;\n  }\n</style>\n<div id='spacing-0'></div>"
    },
    "margin-height": {
      "output": "\n@mixin spacing-0-margin-height {\n  margin-top: 0px;\n  margin-bottom: 0px;\n}",
      "example": "\n<style>\n  #spacing-0 {\n    background-color: #aaa;\n    margin-top: var( --spacing-0 , 0px );\n    margin-bottom: var( --spacing-0 , 0px );\n  }\n</style>\n<div id='spacing-0'></div>"
    },
    "margin-left": {
      "output": "\n@mixin spacing-0-margin-left {\n  margin-left: var( --spacing-0 , 0px  );\n}",
      "example": "\n<style>\n  #spacing-0-97206688 {\n    background-color: #aaa;\n    margin-left: 0px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-0-97206688'></div>"
    },
    "margin-right": {
      "output": "\n@mixin spacing-0-margin-right {\n  margin-right: var( --spacing-0 , 0px  );\n}",
      "example": "\n<style>\n  #spacing-0-45045162 {\n    background-color: #aaa;\n    margin-right: 0px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-0-45045162'></div>"
    },
    "margin-top": {
      "output": "\n@mixin spacing-0-margin-top {\n  margin-top: var( --spacing-0 , 0px  );\n}",
      "example": "\n<style>\n  #spacing-0-70540097 {\n    background-color: #aaa;\n    margin-top: 0px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-0-70540097'></div>"
    },
    "margin-bottom": {
      "output": "\n@mixin spacing-0-margin-bottom {\n  margin-bottom: var( --spacing-0 , 0px  );\n}",
      "example": "\n<style>\n  #spacing-0-68276041 {\n    background-color: #aaa;\n    margin-bottom: 0px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-0-68276041'></div>"
    },
    "padding": {
      "output": "\n@mixin spacing-0-padding {\n  padding: var( --spacing-0 , 0px  );\n}",
      "example": "\n<style>\n  #spacing-0-73441537 {\n    background-color: #aaa;\n    padding: 0px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-0-73441537'></div>"
    },
    "padding-width": {
      "output": "\n@mixin spacing-0-padding-width {\n  padding-left: var( --spacing-0 , 0px );\n  padding-right: var( --spacing-0 , 0px );\n}",
      "example": "\n<style>\n  #spacing-0 {\n    background-color: #aaa;\n    padding-left: 0px;\n    padding-right: 0px;\n  }\n</style>\n<div id='spacing-0'></div>"
    },
    "padding-height": {
      "output": "\n@mixin spacing-0-padding-height {\n  padding-top: var( --spacing-0 , 0px );\n  padding-bottom: var( --spacing-0 , 0px );\n}",
      "example": "\n<style>\n  #spacing-0 {\n    background-color: #aaa;\n    padding-top: 0px;\n    padding-bottom: 0px;\n  }\n</style>\n<div id='spacing-0'></div>"
    },
    "padding-left": {
      "output": "\n@mixin spacing-0-padding-left {\n  padding-left: var( --spacing-0 , 0px  );\n}",
      "example": "\n<style>\n  #spacing-0-49679046 {\n    background-color: #aaa;\n    padding-left: 0px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-0-49679046'></div>"
    },
    "padding-right": {
      "output": "\n@mixin spacing-0-padding-right {\n  padding-right: var( --spacing-0 , 0px  );\n}",
      "example": "\n<style>\n  #spacing-0-83535160 {\n    background-color: #aaa;\n    padding-right: 0px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-0-83535160'></div>"
    },
    "padding-top": {
      "output": "\n@mixin spacing-0-padding-top {\n  padding-top: var( --spacing-0 , 0px  );\n}",
      "example": "\n<style>\n  #spacing-0-90132014 {\n    background-color: #aaa;\n    padding-top: 0px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-0-90132014'></div>"
    },
    "padding-bottom": {
      "output": "\n@mixin spacing-0-padding-bottom {\n  padding-bottom: var( --spacing-0 , 0px  );\n}",
      "example": "\n<style>\n  #spacing-0-25292211 {\n    background-color: #aaa;\n    padding-bottom: 0px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-0-25292211'></div>"
    }
  },
  "layouts-spacing-1": {
    "size": {
      "output": "\n@mixin spacing-1-size {\n  width: var( --spacing-1 , 8px );\n  height: var( --spacing-1 , 8px );\n}",
      "example": "\n<style>\n  #spacing-1 {\n    background-color: #aaa;\n    width: 8px;\n    height: 8px;\n  }\n</style>\n<div id='spacing-1'></div>"
    },
    "width": {
      "output": "\n@mixin spacing-1-width {\n  width: var( --spacing-1 , 8px  );\n}",
      "example": "\n<style>\n  #spacing-1-69464053 {\n    background-color: #aaa;\n    width: 8px;\n    height: 100px;\n  }\n</style>\n<div id='spacing-1-69464053'></div>"
    },
    "height": {
      "output": "\n@mixin spacing-1-height {\n  height: var( --spacing-1 , 8px  );\n}",
      "example": "\n<style>\n  #spacing-1-72711960 {\n    background-color: #aaa;\n    height: 8px;\n    width: 100px;\n  }\n</style>\n<div id='spacing-1-72711960'></div>"
    },
    "min-width": {
      "output": "\n@mixin spacing-1-min-width {\n  min-width: var( --spacing-1 , 8px  );\n}",
      "example": "\n<style>\n  #spacing-1-83735238 {\n    background-color: #aaa;\n    min-width: 8px;\n    height: 100px; width: 100%;\n  }\n</style>\n<div id='spacing-1-83735238'></div>"
    },
    "min-height": {
      "output": "\n@mixin spacing-1-min-height {\n  min-height: var( --spacing-1 , 8px  );\n}",
      "example": "\n<style>\n  #spacing-1-90161652 {\n    background-color: #aaa;\n    min-height: 8px;\n    width: 100px; height: 100%;\n  }\n</style>\n<div id='spacing-1-90161652'></div>"
    },
    "top": {
      "output": "\n@mixin spacing-1-top {\n  top: var( --spacing-1 , 8px  );\n}",
      "example": "\n<style>\n  #spacing-1-38718192 {\n    background-color: #aaa;\n    top: 8px;\n    position: absolute; width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-1-38718192'></div>"
    },
    "bottom": {
      "output": "\n@mixin spacing-1-bottom {\n  bottom: var( --spacing-1 , 8px  );\n}",
      "example": "\n<style>\n  #spacing-1-9460647 {\n    background-color: #aaa;\n    bottom: 8px;\n    position: absolute; width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-1-9460647'></div>"
    },
    "left": {
      "output": "\n@mixin spacing-1-left {\n  left: var( --spacing-1 , 8px  );\n}",
      "example": "\n<style>\n  #spacing-1-31521239 {\n    background-color: #aaa;\n    left: 8px;\n    position: absolute; width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-1-31521239'></div>"
    },
    "right": {
      "output": "\n@mixin spacing-1-right {\n  right: var( --spacing-1 , 8px  );\n}",
      "example": "\n<style>\n  #spacing-1-39897313 {\n    background-color: #aaa;\n    right: 8px;\n    position: absolute; width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-1-39897313'></div>"
    },
    "margin": {
      "output": "\n@mixin spacing-1-margin {\n  margin: var( --spacing-1 , 8px  );\n}",
      "example": "\n<style>\n  #spacing-1-95209405 {\n    background-color: #aaa;\n    margin: 8px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-1-95209405'></div>"
    },
    "margin-width": {
      "output": "\n@mixin spacing-1-margin-width {\n  margin-left: var( --spacing-1 , 8px );\n  margin-right: var( --spacing-1 , 8px );\n}",
      "example": "\n<style>\n  #spacing-1 {\n    background-color: #aaa;\n    margin-left: 8px;\n    margin-right: 8px;\n  }\n</style>\n<div id='spacing-1'></div>"
    },
    "margin-height": {
      "output": "\n@mixin spacing-1-margin-height {\n  margin-top: 8px;\n  margin-bottom: 8px;\n}",
      "example": "\n<style>\n  #spacing-1 {\n    background-color: #aaa;\n    margin-top: var( --spacing-1 , 8px );\n    margin-bottom: var( --spacing-1 , 8px );\n  }\n</style>\n<div id='spacing-1'></div>"
    },
    "margin-left": {
      "output": "\n@mixin spacing-1-margin-left {\n  margin-left: var( --spacing-1 , 8px  );\n}",
      "example": "\n<style>\n  #spacing-1-65918031 {\n    background-color: #aaa;\n    margin-left: 8px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-1-65918031'></div>"
    },
    "margin-right": {
      "output": "\n@mixin spacing-1-margin-right {\n  margin-right: var( --spacing-1 , 8px  );\n}",
      "example": "\n<style>\n  #spacing-1-59094295 {\n    background-color: #aaa;\n    margin-right: 8px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-1-59094295'></div>"
    },
    "margin-top": {
      "output": "\n@mixin spacing-1-margin-top {\n  margin-top: var( --spacing-1 , 8px  );\n}",
      "example": "\n<style>\n  #spacing-1-59366472 {\n    background-color: #aaa;\n    margin-top: 8px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-1-59366472'></div>"
    },
    "margin-bottom": {
      "output": "\n@mixin spacing-1-margin-bottom {\n  margin-bottom: var( --spacing-1 , 8px  );\n}",
      "example": "\n<style>\n  #spacing-1-6421972 {\n    background-color: #aaa;\n    margin-bottom: 8px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-1-6421972'></div>"
    },
    "padding": {
      "output": "\n@mixin spacing-1-padding {\n  padding: var( --spacing-1 , 8px  );\n}",
      "example": "\n<style>\n  #spacing-1-47206914 {\n    background-color: #aaa;\n    padding: 8px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-1-47206914'></div>"
    },
    "padding-width": {
      "output": "\n@mixin spacing-1-padding-width {\n  padding-left: var( --spacing-1 , 8px );\n  padding-right: var( --spacing-1 , 8px );\n}",
      "example": "\n<style>\n  #spacing-1 {\n    background-color: #aaa;\n    padding-left: 8px;\n    padding-right: 8px;\n  }\n</style>\n<div id='spacing-1'></div>"
    },
    "padding-height": {
      "output": "\n@mixin spacing-1-padding-height {\n  padding-top: var( --spacing-1 , 8px );\n  padding-bottom: var( --spacing-1 , 8px );\n}",
      "example": "\n<style>\n  #spacing-1 {\n    background-color: #aaa;\n    padding-top: 8px;\n    padding-bottom: 8px;\n  }\n</style>\n<div id='spacing-1'></div>"
    },
    "padding-left": {
      "output": "\n@mixin spacing-1-padding-left {\n  padding-left: var( --spacing-1 , 8px  );\n}",
      "example": "\n<style>\n  #spacing-1-63586233 {\n    background-color: #aaa;\n    padding-left: 8px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-1-63586233'></div>"
    },
    "padding-right": {
      "output": "\n@mixin spacing-1-padding-right {\n  padding-right: var( --spacing-1 , 8px  );\n}",
      "example": "\n<style>\n  #spacing-1-59543029 {\n    background-color: #aaa;\n    padding-right: 8px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-1-59543029'></div>"
    },
    "padding-top": {
      "output": "\n@mixin spacing-1-padding-top {\n  padding-top: var( --spacing-1 , 8px  );\n}",
      "example": "\n<style>\n  #spacing-1-36994104 {\n    background-color: #aaa;\n    padding-top: 8px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-1-36994104'></div>"
    },
    "padding-bottom": {
      "output": "\n@mixin spacing-1-padding-bottom {\n  padding-bottom: var( --spacing-1 , 8px  );\n}",
      "example": "\n<style>\n  #spacing-1-43287726 {\n    background-color: #aaa;\n    padding-bottom: 8px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-1-43287726'></div>"
    }
  },
  "layouts-spacing-2": {
    "size": {
      "output": "\n@mixin spacing-2-size {\n  width: var( --spacing-2 , 16px );\n  height: var( --spacing-2 , 16px );\n}",
      "example": "\n<style>\n  #spacing-2 {\n    background-color: #aaa;\n    width: 16px;\n    height: 16px;\n  }\n</style>\n<div id='spacing-2'></div>"
    },
    "width": {
      "output": "\n@mixin spacing-2-width {\n  width: var( --spacing-2 , 16px  );\n}",
      "example": "\n<style>\n  #spacing-2-12065508 {\n    background-color: #aaa;\n    width: 16px;\n    height: 100px;\n  }\n</style>\n<div id='spacing-2-12065508'></div>"
    },
    "height": {
      "output": "\n@mixin spacing-2-height {\n  height: var( --spacing-2 , 16px  );\n}",
      "example": "\n<style>\n  #spacing-2-29071775 {\n    background-color: #aaa;\n    height: 16px;\n    width: 100px;\n  }\n</style>\n<div id='spacing-2-29071775'></div>"
    },
    "min-width": {
      "output": "\n@mixin spacing-2-min-width {\n  min-width: var( --spacing-2 , 16px  );\n}",
      "example": "\n<style>\n  #spacing-2-11123935 {\n    background-color: #aaa;\n    min-width: 16px;\n    height: 100px; width: 100%;\n  }\n</style>\n<div id='spacing-2-11123935'></div>"
    },
    "min-height": {
      "output": "\n@mixin spacing-2-min-height {\n  min-height: var( --spacing-2 , 16px  );\n}",
      "example": "\n<style>\n  #spacing-2-62656354 {\n    background-color: #aaa;\n    min-height: 16px;\n    width: 100px; height: 100%;\n  }\n</style>\n<div id='spacing-2-62656354'></div>"
    },
    "top": {
      "output": "\n@mixin spacing-2-top {\n  top: var( --spacing-2 , 16px  );\n}",
      "example": "\n<style>\n  #spacing-2-47361240 {\n    background-color: #aaa;\n    top: 16px;\n    position: absolute; width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-2-47361240'></div>"
    },
    "bottom": {
      "output": "\n@mixin spacing-2-bottom {\n  bottom: var( --spacing-2 , 16px  );\n}",
      "example": "\n<style>\n  #spacing-2-84261633 {\n    background-color: #aaa;\n    bottom: 16px;\n    position: absolute; width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-2-84261633'></div>"
    },
    "left": {
      "output": "\n@mixin spacing-2-left {\n  left: var( --spacing-2 , 16px  );\n}",
      "example": "\n<style>\n  #spacing-2-41520581 {\n    background-color: #aaa;\n    left: 16px;\n    position: absolute; width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-2-41520581'></div>"
    },
    "right": {
      "output": "\n@mixin spacing-2-right {\n  right: var( --spacing-2 , 16px  );\n}",
      "example": "\n<style>\n  #spacing-2-15365453 {\n    background-color: #aaa;\n    right: 16px;\n    position: absolute; width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-2-15365453'></div>"
    },
    "margin": {
      "output": "\n@mixin spacing-2-margin {\n  margin: var( --spacing-2 , 16px  );\n}",
      "example": "\n<style>\n  #spacing-2-89296110 {\n    background-color: #aaa;\n    margin: 16px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-2-89296110'></div>"
    },
    "margin-width": {
      "output": "\n@mixin spacing-2-margin-width {\n  margin-left: var( --spacing-2 , 16px );\n  margin-right: var( --spacing-2 , 16px );\n}",
      "example": "\n<style>\n  #spacing-2 {\n    background-color: #aaa;\n    margin-left: 16px;\n    margin-right: 16px;\n  }\n</style>\n<div id='spacing-2'></div>"
    },
    "margin-height": {
      "output": "\n@mixin spacing-2-margin-height {\n  margin-top: 16px;\n  margin-bottom: 16px;\n}",
      "example": "\n<style>\n  #spacing-2 {\n    background-color: #aaa;\n    margin-top: var( --spacing-2 , 16px );\n    margin-bottom: var( --spacing-2 , 16px );\n  }\n</style>\n<div id='spacing-2'></div>"
    },
    "margin-left": {
      "output": "\n@mixin spacing-2-margin-left {\n  margin-left: var( --spacing-2 , 16px  );\n}",
      "example": "\n<style>\n  #spacing-2-22900819 {\n    background-color: #aaa;\n    margin-left: 16px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-2-22900819'></div>"
    },
    "margin-right": {
      "output": "\n@mixin spacing-2-margin-right {\n  margin-right: var( --spacing-2 , 16px  );\n}",
      "example": "\n<style>\n  #spacing-2-58393053 {\n    background-color: #aaa;\n    margin-right: 16px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-2-58393053'></div>"
    },
    "margin-top": {
      "output": "\n@mixin spacing-2-margin-top {\n  margin-top: var( --spacing-2 , 16px  );\n}",
      "example": "\n<style>\n  #spacing-2-13047201 {\n    background-color: #aaa;\n    margin-top: 16px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-2-13047201'></div>"
    },
    "margin-bottom": {
      "output": "\n@mixin spacing-2-margin-bottom {\n  margin-bottom: var( --spacing-2 , 16px  );\n}",
      "example": "\n<style>\n  #spacing-2-21099013 {\n    background-color: #aaa;\n    margin-bottom: 16px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-2-21099013'></div>"
    },
    "padding": {
      "output": "\n@mixin spacing-2-padding {\n  padding: var( --spacing-2 , 16px  );\n}",
      "example": "\n<style>\n  #spacing-2-68336269 {\n    background-color: #aaa;\n    padding: 16px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-2-68336269'></div>"
    },
    "padding-width": {
      "output": "\n@mixin spacing-2-padding-width {\n  padding-left: var( --spacing-2 , 16px );\n  padding-right: var( --spacing-2 , 16px );\n}",
      "example": "\n<style>\n  #spacing-2 {\n    background-color: #aaa;\n    padding-left: 16px;\n    padding-right: 16px;\n  }\n</style>\n<div id='spacing-2'></div>"
    },
    "padding-height": {
      "output": "\n@mixin spacing-2-padding-height {\n  padding-top: var( --spacing-2 , 16px );\n  padding-bottom: var( --spacing-2 , 16px );\n}",
      "example": "\n<style>\n  #spacing-2 {\n    background-color: #aaa;\n    padding-top: 16px;\n    padding-bottom: 16px;\n  }\n</style>\n<div id='spacing-2'></div>"
    },
    "padding-left": {
      "output": "\n@mixin spacing-2-padding-left {\n  padding-left: var( --spacing-2 , 16px  );\n}",
      "example": "\n<style>\n  #spacing-2-72059275 {\n    background-color: #aaa;\n    padding-left: 16px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-2-72059275'></div>"
    },
    "padding-right": {
      "output": "\n@mixin spacing-2-padding-right {\n  padding-right: var( --spacing-2 , 16px  );\n}",
      "example": "\n<style>\n  #spacing-2-13730648 {\n    background-color: #aaa;\n    padding-right: 16px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-2-13730648'></div>"
    },
    "padding-top": {
      "output": "\n@mixin spacing-2-padding-top {\n  padding-top: var( --spacing-2 , 16px  );\n}",
      "example": "\n<style>\n  #spacing-2-50078286 {\n    background-color: #aaa;\n    padding-top: 16px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-2-50078286'></div>"
    },
    "padding-bottom": {
      "output": "\n@mixin spacing-2-padding-bottom {\n  padding-bottom: var( --spacing-2 , 16px  );\n}",
      "example": "\n<style>\n  #spacing-2-75342550 {\n    background-color: #aaa;\n    padding-bottom: 16px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-2-75342550'></div>"
    }
  },
  "layouts-spacing-3": {
    "size": {
      "output": "\n@mixin spacing-3-size {\n  width: var( --spacing-3 , 24px );\n  height: var( --spacing-3 , 24px );\n}",
      "example": "\n<style>\n  #spacing-3 {\n    background-color: #aaa;\n    width: 24px;\n    height: 24px;\n  }\n</style>\n<div id='spacing-3'></div>"
    },
    "width": {
      "output": "\n@mixin spacing-3-width {\n  width: var( --spacing-3 , 24px  );\n}",
      "example": "\n<style>\n  #spacing-3-84153757 {\n    background-color: #aaa;\n    width: 24px;\n    height: 100px;\n  }\n</style>\n<div id='spacing-3-84153757'></div>"
    },
    "height": {
      "output": "\n@mixin spacing-3-height {\n  height: var( --spacing-3 , 24px  );\n}",
      "example": "\n<style>\n  #spacing-3-33616999 {\n    background-color: #aaa;\n    height: 24px;\n    width: 100px;\n  }\n</style>\n<div id='spacing-3-33616999'></div>"
    },
    "min-width": {
      "output": "\n@mixin spacing-3-min-width {\n  min-width: var( --spacing-3 , 24px  );\n}",
      "example": "\n<style>\n  #spacing-3-91958981 {\n    background-color: #aaa;\n    min-width: 24px;\n    height: 100px; width: 100%;\n  }\n</style>\n<div id='spacing-3-91958981'></div>"
    },
    "min-height": {
      "output": "\n@mixin spacing-3-min-height {\n  min-height: var( --spacing-3 , 24px  );\n}",
      "example": "\n<style>\n  #spacing-3-12038656 {\n    background-color: #aaa;\n    min-height: 24px;\n    width: 100px; height: 100%;\n  }\n</style>\n<div id='spacing-3-12038656'></div>"
    },
    "top": {
      "output": "\n@mixin spacing-3-top {\n  top: var( --spacing-3 , 24px  );\n}",
      "example": "\n<style>\n  #spacing-3-43907160 {\n    background-color: #aaa;\n    top: 24px;\n    position: absolute; width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-3-43907160'></div>"
    },
    "bottom": {
      "output": "\n@mixin spacing-3-bottom {\n  bottom: var( --spacing-3 , 24px  );\n}",
      "example": "\n<style>\n  #spacing-3-59877526 {\n    background-color: #aaa;\n    bottom: 24px;\n    position: absolute; width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-3-59877526'></div>"
    },
    "left": {
      "output": "\n@mixin spacing-3-left {\n  left: var( --spacing-3 , 24px  );\n}",
      "example": "\n<style>\n  #spacing-3-44253952 {\n    background-color: #aaa;\n    left: 24px;\n    position: absolute; width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-3-44253952'></div>"
    },
    "right": {
      "output": "\n@mixin spacing-3-right {\n  right: var( --spacing-3 , 24px  );\n}",
      "example": "\n<style>\n  #spacing-3-25114043 {\n    background-color: #aaa;\n    right: 24px;\n    position: absolute; width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-3-25114043'></div>"
    },
    "margin": {
      "output": "\n@mixin spacing-3-margin {\n  margin: var( --spacing-3 , 24px  );\n}",
      "example": "\n<style>\n  #spacing-3-87848721 {\n    background-color: #aaa;\n    margin: 24px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-3-87848721'></div>"
    },
    "margin-width": {
      "output": "\n@mixin spacing-3-margin-width {\n  margin-left: var( --spacing-3 , 24px );\n  margin-right: var( --spacing-3 , 24px );\n}",
      "example": "\n<style>\n  #spacing-3 {\n    background-color: #aaa;\n    margin-left: 24px;\n    margin-right: 24px;\n  }\n</style>\n<div id='spacing-3'></div>"
    },
    "margin-height": {
      "output": "\n@mixin spacing-3-margin-height {\n  margin-top: 24px;\n  margin-bottom: 24px;\n}",
      "example": "\n<style>\n  #spacing-3 {\n    background-color: #aaa;\n    margin-top: var( --spacing-3 , 24px );\n    margin-bottom: var( --spacing-3 , 24px );\n  }\n</style>\n<div id='spacing-3'></div>"
    },
    "margin-left": {
      "output": "\n@mixin spacing-3-margin-left {\n  margin-left: var( --spacing-3 , 24px  );\n}",
      "example": "\n<style>\n  #spacing-3-61865440 {\n    background-color: #aaa;\n    margin-left: 24px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-3-61865440'></div>"
    },
    "margin-right": {
      "output": "\n@mixin spacing-3-margin-right {\n  margin-right: var( --spacing-3 , 24px  );\n}",
      "example": "\n<style>\n  #spacing-3-67675886 {\n    background-color: #aaa;\n    margin-right: 24px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-3-67675886'></div>"
    },
    "margin-top": {
      "output": "\n@mixin spacing-3-margin-top {\n  margin-top: var( --spacing-3 , 24px  );\n}",
      "example": "\n<style>\n  #spacing-3-80089497 {\n    background-color: #aaa;\n    margin-top: 24px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-3-80089497'></div>"
    },
    "margin-bottom": {
      "output": "\n@mixin spacing-3-margin-bottom {\n  margin-bottom: var( --spacing-3 , 24px  );\n}",
      "example": "\n<style>\n  #spacing-3-37287441 {\n    background-color: #aaa;\n    margin-bottom: 24px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-3-37287441'></div>"
    },
    "padding": {
      "output": "\n@mixin spacing-3-padding {\n  padding: var( --spacing-3 , 24px  );\n}",
      "example": "\n<style>\n  #spacing-3-69396283 {\n    background-color: #aaa;\n    padding: 24px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-3-69396283'></div>"
    },
    "padding-width": {
      "output": "\n@mixin spacing-3-padding-width {\n  padding-left: var( --spacing-3 , 24px );\n  padding-right: var( --spacing-3 , 24px );\n}",
      "example": "\n<style>\n  #spacing-3 {\n    background-color: #aaa;\n    padding-left: 24px;\n    padding-right: 24px;\n  }\n</style>\n<div id='spacing-3'></div>"
    },
    "padding-height": {
      "output": "\n@mixin spacing-3-padding-height {\n  padding-top: var( --spacing-3 , 24px );\n  padding-bottom: var( --spacing-3 , 24px );\n}",
      "example": "\n<style>\n  #spacing-3 {\n    background-color: #aaa;\n    padding-top: 24px;\n    padding-bottom: 24px;\n  }\n</style>\n<div id='spacing-3'></div>"
    },
    "padding-left": {
      "output": "\n@mixin spacing-3-padding-left {\n  padding-left: var( --spacing-3 , 24px  );\n}",
      "example": "\n<style>\n  #spacing-3-48270054 {\n    background-color: #aaa;\n    padding-left: 24px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-3-48270054'></div>"
    },
    "padding-right": {
      "output": "\n@mixin spacing-3-padding-right {\n  padding-right: var( --spacing-3 , 24px  );\n}",
      "example": "\n<style>\n  #spacing-3-69499534 {\n    background-color: #aaa;\n    padding-right: 24px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-3-69499534'></div>"
    },
    "padding-top": {
      "output": "\n@mixin spacing-3-padding-top {\n  padding-top: var( --spacing-3 , 24px  );\n}",
      "example": "\n<style>\n  #spacing-3-11828349 {\n    background-color: #aaa;\n    padding-top: 24px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-3-11828349'></div>"
    },
    "padding-bottom": {
      "output": "\n@mixin spacing-3-padding-bottom {\n  padding-bottom: var( --spacing-3 , 24px  );\n}",
      "example": "\n<style>\n  #spacing-3-93221596 {\n    background-color: #aaa;\n    padding-bottom: 24px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-3-93221596'></div>"
    }
  },
  "layouts-spacing-4": {
    "size": {
      "output": "\n@mixin spacing-4-size {\n  width: var( --spacing-4 , 32px );\n  height: var( --spacing-4 , 32px );\n}",
      "example": "\n<style>\n  #spacing-4 {\n    background-color: #aaa;\n    width: 32px;\n    height: 32px;\n  }\n</style>\n<div id='spacing-4'></div>"
    },
    "width": {
      "output": "\n@mixin spacing-4-width {\n  width: var( --spacing-4 , 32px  );\n}",
      "example": "\n<style>\n  #spacing-4-64588098 {\n    background-color: #aaa;\n    width: 32px;\n    height: 100px;\n  }\n</style>\n<div id='spacing-4-64588098'></div>"
    },
    "height": {
      "output": "\n@mixin spacing-4-height {\n  height: var( --spacing-4 , 32px  );\n}",
      "example": "\n<style>\n  #spacing-4-77245290 {\n    background-color: #aaa;\n    height: 32px;\n    width: 100px;\n  }\n</style>\n<div id='spacing-4-77245290'></div>"
    },
    "min-width": {
      "output": "\n@mixin spacing-4-min-width {\n  min-width: var( --spacing-4 , 32px  );\n}",
      "example": "\n<style>\n  #spacing-4-24723963 {\n    background-color: #aaa;\n    min-width: 32px;\n    height: 100px; width: 100%;\n  }\n</style>\n<div id='spacing-4-24723963'></div>"
    },
    "min-height": {
      "output": "\n@mixin spacing-4-min-height {\n  min-height: var( --spacing-4 , 32px  );\n}",
      "example": "\n<style>\n  #spacing-4-5550312 {\n    background-color: #aaa;\n    min-height: 32px;\n    width: 100px; height: 100%;\n  }\n</style>\n<div id='spacing-4-5550312'></div>"
    },
    "top": {
      "output": "\n@mixin spacing-4-top {\n  top: var( --spacing-4 , 32px  );\n}",
      "example": "\n<style>\n  #spacing-4-55461392 {\n    background-color: #aaa;\n    top: 32px;\n    position: absolute; width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-4-55461392'></div>"
    },
    "bottom": {
      "output": "\n@mixin spacing-4-bottom {\n  bottom: var( --spacing-4 , 32px  );\n}",
      "example": "\n<style>\n  #spacing-4-71657744 {\n    background-color: #aaa;\n    bottom: 32px;\n    position: absolute; width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-4-71657744'></div>"
    },
    "left": {
      "output": "\n@mixin spacing-4-left {\n  left: var( --spacing-4 , 32px  );\n}",
      "example": "\n<style>\n  #spacing-4-15942169 {\n    background-color: #aaa;\n    left: 32px;\n    position: absolute; width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-4-15942169'></div>"
    },
    "right": {
      "output": "\n@mixin spacing-4-right {\n  right: var( --spacing-4 , 32px  );\n}",
      "example": "\n<style>\n  #spacing-4-22443219 {\n    background-color: #aaa;\n    right: 32px;\n    position: absolute; width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-4-22443219'></div>"
    },
    "margin": {
      "output": "\n@mixin spacing-4-margin {\n  margin: var( --spacing-4 , 32px  );\n}",
      "example": "\n<style>\n  #spacing-4-93605101 {\n    background-color: #aaa;\n    margin: 32px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-4-93605101'></div>"
    },
    "margin-width": {
      "output": "\n@mixin spacing-4-margin-width {\n  margin-left: var( --spacing-4 , 32px );\n  margin-right: var( --spacing-4 , 32px );\n}",
      "example": "\n<style>\n  #spacing-4 {\n    background-color: #aaa;\n    margin-left: 32px;\n    margin-right: 32px;\n  }\n</style>\n<div id='spacing-4'></div>"
    },
    "margin-height": {
      "output": "\n@mixin spacing-4-margin-height {\n  margin-top: 32px;\n  margin-bottom: 32px;\n}",
      "example": "\n<style>\n  #spacing-4 {\n    background-color: #aaa;\n    margin-top: var( --spacing-4 , 32px );\n    margin-bottom: var( --spacing-4 , 32px );\n  }\n</style>\n<div id='spacing-4'></div>"
    },
    "margin-left": {
      "output": "\n@mixin spacing-4-margin-left {\n  margin-left: var( --spacing-4 , 32px  );\n}",
      "example": "\n<style>\n  #spacing-4-91278508 {\n    background-color: #aaa;\n    margin-left: 32px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-4-91278508'></div>"
    },
    "margin-right": {
      "output": "\n@mixin spacing-4-margin-right {\n  margin-right: var( --spacing-4 , 32px  );\n}",
      "example": "\n<style>\n  #spacing-4-94964337 {\n    background-color: #aaa;\n    margin-right: 32px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-4-94964337'></div>"
    },
    "margin-top": {
      "output": "\n@mixin spacing-4-margin-top {\n  margin-top: var( --spacing-4 , 32px  );\n}",
      "example": "\n<style>\n  #spacing-4-26059393 {\n    background-color: #aaa;\n    margin-top: 32px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-4-26059393'></div>"
    },
    "margin-bottom": {
      "output": "\n@mixin spacing-4-margin-bottom {\n  margin-bottom: var( --spacing-4 , 32px  );\n}",
      "example": "\n<style>\n  #spacing-4-95014015 {\n    background-color: #aaa;\n    margin-bottom: 32px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-4-95014015'></div>"
    },
    "padding": {
      "output": "\n@mixin spacing-4-padding {\n  padding: var( --spacing-4 , 32px  );\n}",
      "example": "\n<style>\n  #spacing-4-78190916 {\n    background-color: #aaa;\n    padding: 32px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-4-78190916'></div>"
    },
    "padding-width": {
      "output": "\n@mixin spacing-4-padding-width {\n  padding-left: var( --spacing-4 , 32px );\n  padding-right: var( --spacing-4 , 32px );\n}",
      "example": "\n<style>\n  #spacing-4 {\n    background-color: #aaa;\n    padding-left: 32px;\n    padding-right: 32px;\n  }\n</style>\n<div id='spacing-4'></div>"
    },
    "padding-height": {
      "output": "\n@mixin spacing-4-padding-height {\n  padding-top: var( --spacing-4 , 32px );\n  padding-bottom: var( --spacing-4 , 32px );\n}",
      "example": "\n<style>\n  #spacing-4 {\n    background-color: #aaa;\n    padding-top: 32px;\n    padding-bottom: 32px;\n  }\n</style>\n<div id='spacing-4'></div>"
    },
    "padding-left": {
      "output": "\n@mixin spacing-4-padding-left {\n  padding-left: var( --spacing-4 , 32px  );\n}",
      "example": "\n<style>\n  #spacing-4-59793814 {\n    background-color: #aaa;\n    padding-left: 32px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-4-59793814'></div>"
    },
    "padding-right": {
      "output": "\n@mixin spacing-4-padding-right {\n  padding-right: var( --spacing-4 , 32px  );\n}",
      "example": "\n<style>\n  #spacing-4-68043303 {\n    background-color: #aaa;\n    padding-right: 32px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-4-68043303'></div>"
    },
    "padding-top": {
      "output": "\n@mixin spacing-4-padding-top {\n  padding-top: var( --spacing-4 , 32px  );\n}",
      "example": "\n<style>\n  #spacing-4-17831696 {\n    background-color: #aaa;\n    padding-top: 32px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-4-17831696'></div>"
    },
    "padding-bottom": {
      "output": "\n@mixin spacing-4-padding-bottom {\n  padding-bottom: var( --spacing-4 , 32px  );\n}",
      "example": "\n<style>\n  #spacing-4-88818149 {\n    background-color: #aaa;\n    padding-bottom: 32px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-4-88818149'></div>"
    }
  },
  "layouts-spacing-5": {
    "size": {
      "output": "\n@mixin spacing-5-size {\n  width: var( --spacing-5 , 40px );\n  height: var( --spacing-5 , 40px );\n}",
      "example": "\n<style>\n  #spacing-5 {\n    background-color: #aaa;\n    width: 40px;\n    height: 40px;\n  }\n</style>\n<div id='spacing-5'></div>"
    },
    "width": {
      "output": "\n@mixin spacing-5-width {\n  width: var( --spacing-5 , 40px  );\n}",
      "example": "\n<style>\n  #spacing-5-21002567 {\n    background-color: #aaa;\n    width: 40px;\n    height: 100px;\n  }\n</style>\n<div id='spacing-5-21002567'></div>"
    },
    "height": {
      "output": "\n@mixin spacing-5-height {\n  height: var( --spacing-5 , 40px  );\n}",
      "example": "\n<style>\n  #spacing-5-62413124 {\n    background-color: #aaa;\n    height: 40px;\n    width: 100px;\n  }\n</style>\n<div id='spacing-5-62413124'></div>"
    },
    "min-width": {
      "output": "\n@mixin spacing-5-min-width {\n  min-width: var( --spacing-5 , 40px  );\n}",
      "example": "\n<style>\n  #spacing-5-50811340 {\n    background-color: #aaa;\n    min-width: 40px;\n    height: 100px; width: 100%;\n  }\n</style>\n<div id='spacing-5-50811340'></div>"
    },
    "min-height": {
      "output": "\n@mixin spacing-5-min-height {\n  min-height: var( --spacing-5 , 40px  );\n}",
      "example": "\n<style>\n  #spacing-5-93261015 {\n    background-color: #aaa;\n    min-height: 40px;\n    width: 100px; height: 100%;\n  }\n</style>\n<div id='spacing-5-93261015'></div>"
    },
    "top": {
      "output": "\n@mixin spacing-5-top {\n  top: var( --spacing-5 , 40px  );\n}",
      "example": "\n<style>\n  #spacing-5-53926371 {\n    background-color: #aaa;\n    top: 40px;\n    position: absolute; width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-5-53926371'></div>"
    },
    "bottom": {
      "output": "\n@mixin spacing-5-bottom {\n  bottom: var( --spacing-5 , 40px  );\n}",
      "example": "\n<style>\n  #spacing-5-27987494 {\n    background-color: #aaa;\n    bottom: 40px;\n    position: absolute; width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-5-27987494'></div>"
    },
    "left": {
      "output": "\n@mixin spacing-5-left {\n  left: var( --spacing-5 , 40px  );\n}",
      "example": "\n<style>\n  #spacing-5-58049170 {\n    background-color: #aaa;\n    left: 40px;\n    position: absolute; width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-5-58049170'></div>"
    },
    "right": {
      "output": "\n@mixin spacing-5-right {\n  right: var( --spacing-5 , 40px  );\n}",
      "example": "\n<style>\n  #spacing-5-93195572 {\n    background-color: #aaa;\n    right: 40px;\n    position: absolute; width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-5-93195572'></div>"
    },
    "margin": {
      "output": "\n@mixin spacing-5-margin {\n  margin: var( --spacing-5 , 40px  );\n}",
      "example": "\n<style>\n  #spacing-5-16076938 {\n    background-color: #aaa;\n    margin: 40px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-5-16076938'></div>"
    },
    "margin-width": {
      "output": "\n@mixin spacing-5-margin-width {\n  margin-left: var( --spacing-5 , 40px );\n  margin-right: var( --spacing-5 , 40px );\n}",
      "example": "\n<style>\n  #spacing-5 {\n    background-color: #aaa;\n    margin-left: 40px;\n    margin-right: 40px;\n  }\n</style>\n<div id='spacing-5'></div>"
    },
    "margin-height": {
      "output": "\n@mixin spacing-5-margin-height {\n  margin-top: 40px;\n  margin-bottom: 40px;\n}",
      "example": "\n<style>\n  #spacing-5 {\n    background-color: #aaa;\n    margin-top: var( --spacing-5 , 40px );\n    margin-bottom: var( --spacing-5 , 40px );\n  }\n</style>\n<div id='spacing-5'></div>"
    },
    "margin-left": {
      "output": "\n@mixin spacing-5-margin-left {\n  margin-left: var( --spacing-5 , 40px  );\n}",
      "example": "\n<style>\n  #spacing-5-74573832 {\n    background-color: #aaa;\n    margin-left: 40px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-5-74573832'></div>"
    },
    "margin-right": {
      "output": "\n@mixin spacing-5-margin-right {\n  margin-right: var( --spacing-5 , 40px  );\n}",
      "example": "\n<style>\n  #spacing-5-15469464 {\n    background-color: #aaa;\n    margin-right: 40px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-5-15469464'></div>"
    },
    "margin-top": {
      "output": "\n@mixin spacing-5-margin-top {\n  margin-top: var( --spacing-5 , 40px  );\n}",
      "example": "\n<style>\n  #spacing-5-81196956 {\n    background-color: #aaa;\n    margin-top: 40px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-5-81196956'></div>"
    },
    "margin-bottom": {
      "output": "\n@mixin spacing-5-margin-bottom {\n  margin-bottom: var( --spacing-5 , 40px  );\n}",
      "example": "\n<style>\n  #spacing-5-75126817 {\n    background-color: #aaa;\n    margin-bottom: 40px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-5-75126817'></div>"
    },
    "padding": {
      "output": "\n@mixin spacing-5-padding {\n  padding: var( --spacing-5 , 40px  );\n}",
      "example": "\n<style>\n  #spacing-5-238169 {\n    background-color: #aaa;\n    padding: 40px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-5-238169'></div>"
    },
    "padding-width": {
      "output": "\n@mixin spacing-5-padding-width {\n  padding-left: var( --spacing-5 , 40px );\n  padding-right: var( --spacing-5 , 40px );\n}",
      "example": "\n<style>\n  #spacing-5 {\n    background-color: #aaa;\n    padding-left: 40px;\n    padding-right: 40px;\n  }\n</style>\n<div id='spacing-5'></div>"
    },
    "padding-height": {
      "output": "\n@mixin spacing-5-padding-height {\n  padding-top: var( --spacing-5 , 40px );\n  padding-bottom: var( --spacing-5 , 40px );\n}",
      "example": "\n<style>\n  #spacing-5 {\n    background-color: #aaa;\n    padding-top: 40px;\n    padding-bottom: 40px;\n  }\n</style>\n<div id='spacing-5'></div>"
    },
    "padding-left": {
      "output": "\n@mixin spacing-5-padding-left {\n  padding-left: var( --spacing-5 , 40px  );\n}",
      "example": "\n<style>\n  #spacing-5-79241693 {\n    background-color: #aaa;\n    padding-left: 40px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-5-79241693'></div>"
    },
    "padding-right": {
      "output": "\n@mixin spacing-5-padding-right {\n  padding-right: var( --spacing-5 , 40px  );\n}",
      "example": "\n<style>\n  #spacing-5-87274290 {\n    background-color: #aaa;\n    padding-right: 40px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-5-87274290'></div>"
    },
    "padding-top": {
      "output": "\n@mixin spacing-5-padding-top {\n  padding-top: var( --spacing-5 , 40px  );\n}",
      "example": "\n<style>\n  #spacing-5-93884586 {\n    background-color: #aaa;\n    padding-top: 40px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-5-93884586'></div>"
    },
    "padding-bottom": {
      "output": "\n@mixin spacing-5-padding-bottom {\n  padding-bottom: var( --spacing-5 , 40px  );\n}",
      "example": "\n<style>\n  #spacing-5-83126342 {\n    background-color: #aaa;\n    padding-bottom: 40px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-5-83126342'></div>"
    }
  },
  "layouts-spacing-6": {
    "size": {
      "output": "\n@mixin spacing-6-size {\n  width: var( --spacing-6 , 48px );\n  height: var( --spacing-6 , 48px );\n}",
      "example": "\n<style>\n  #spacing-6 {\n    background-color: #aaa;\n    width: 48px;\n    height: 48px;\n  }\n</style>\n<div id='spacing-6'></div>"
    },
    "width": {
      "output": "\n@mixin spacing-6-width {\n  width: var( --spacing-6 , 48px  );\n}",
      "example": "\n<style>\n  #spacing-6-96000765 {\n    background-color: #aaa;\n    width: 48px;\n    height: 100px;\n  }\n</style>\n<div id='spacing-6-96000765'></div>"
    },
    "height": {
      "output": "\n@mixin spacing-6-height {\n  height: var( --spacing-6 , 48px  );\n}",
      "example": "\n<style>\n  #spacing-6-41769735 {\n    background-color: #aaa;\n    height: 48px;\n    width: 100px;\n  }\n</style>\n<div id='spacing-6-41769735'></div>"
    },
    "min-width": {
      "output": "\n@mixin spacing-6-min-width {\n  min-width: var( --spacing-6 , 48px  );\n}",
      "example": "\n<style>\n  #spacing-6-29537735 {\n    background-color: #aaa;\n    min-width: 48px;\n    height: 100px; width: 100%;\n  }\n</style>\n<div id='spacing-6-29537735'></div>"
    },
    "min-height": {
      "output": "\n@mixin spacing-6-min-height {\n  min-height: var( --spacing-6 , 48px  );\n}",
      "example": "\n<style>\n  #spacing-6-44716326 {\n    background-color: #aaa;\n    min-height: 48px;\n    width: 100px; height: 100%;\n  }\n</style>\n<div id='spacing-6-44716326'></div>"
    },
    "top": {
      "output": "\n@mixin spacing-6-top {\n  top: var( --spacing-6 , 48px  );\n}",
      "example": "\n<style>\n  #spacing-6-27810317 {\n    background-color: #aaa;\n    top: 48px;\n    position: absolute; width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-6-27810317'></div>"
    },
    "bottom": {
      "output": "\n@mixin spacing-6-bottom {\n  bottom: var( --spacing-6 , 48px  );\n}",
      "example": "\n<style>\n  #spacing-6-86482107 {\n    background-color: #aaa;\n    bottom: 48px;\n    position: absolute; width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-6-86482107'></div>"
    },
    "left": {
      "output": "\n@mixin spacing-6-left {\n  left: var( --spacing-6 , 48px  );\n}",
      "example": "\n<style>\n  #spacing-6-5089612 {\n    background-color: #aaa;\n    left: 48px;\n    position: absolute; width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-6-5089612'></div>"
    },
    "right": {
      "output": "\n@mixin spacing-6-right {\n  right: var( --spacing-6 , 48px  );\n}",
      "example": "\n<style>\n  #spacing-6-32444948 {\n    background-color: #aaa;\n    right: 48px;\n    position: absolute; width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-6-32444948'></div>"
    },
    "margin": {
      "output": "\n@mixin spacing-6-margin {\n  margin: var( --spacing-6 , 48px  );\n}",
      "example": "\n<style>\n  #spacing-6-26781679 {\n    background-color: #aaa;\n    margin: 48px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-6-26781679'></div>"
    },
    "margin-width": {
      "output": "\n@mixin spacing-6-margin-width {\n  margin-left: var( --spacing-6 , 48px );\n  margin-right: var( --spacing-6 , 48px );\n}",
      "example": "\n<style>\n  #spacing-6 {\n    background-color: #aaa;\n    margin-left: 48px;\n    margin-right: 48px;\n  }\n</style>\n<div id='spacing-6'></div>"
    },
    "margin-height": {
      "output": "\n@mixin spacing-6-margin-height {\n  margin-top: 48px;\n  margin-bottom: 48px;\n}",
      "example": "\n<style>\n  #spacing-6 {\n    background-color: #aaa;\n    margin-top: var( --spacing-6 , 48px );\n    margin-bottom: var( --spacing-6 , 48px );\n  }\n</style>\n<div id='spacing-6'></div>"
    },
    "margin-left": {
      "output": "\n@mixin spacing-6-margin-left {\n  margin-left: var( --spacing-6 , 48px  );\n}",
      "example": "\n<style>\n  #spacing-6-85944653 {\n    background-color: #aaa;\n    margin-left: 48px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-6-85944653'></div>"
    },
    "margin-right": {
      "output": "\n@mixin spacing-6-margin-right {\n  margin-right: var( --spacing-6 , 48px  );\n}",
      "example": "\n<style>\n  #spacing-6-75661287 {\n    background-color: #aaa;\n    margin-right: 48px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-6-75661287'></div>"
    },
    "margin-top": {
      "output": "\n@mixin spacing-6-margin-top {\n  margin-top: var( --spacing-6 , 48px  );\n}",
      "example": "\n<style>\n  #spacing-6-42167443 {\n    background-color: #aaa;\n    margin-top: 48px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-6-42167443'></div>"
    },
    "margin-bottom": {
      "output": "\n@mixin spacing-6-margin-bottom {\n  margin-bottom: var( --spacing-6 , 48px  );\n}",
      "example": "\n<style>\n  #spacing-6-67706418 {\n    background-color: #aaa;\n    margin-bottom: 48px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-6-67706418'></div>"
    },
    "padding": {
      "output": "\n@mixin spacing-6-padding {\n  padding: var( --spacing-6 , 48px  );\n}",
      "example": "\n<style>\n  #spacing-6-6146488 {\n    background-color: #aaa;\n    padding: 48px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-6-6146488'></div>"
    },
    "padding-width": {
      "output": "\n@mixin spacing-6-padding-width {\n  padding-left: var( --spacing-6 , 48px );\n  padding-right: var( --spacing-6 , 48px );\n}",
      "example": "\n<style>\n  #spacing-6 {\n    background-color: #aaa;\n    padding-left: 48px;\n    padding-right: 48px;\n  }\n</style>\n<div id='spacing-6'></div>"
    },
    "padding-height": {
      "output": "\n@mixin spacing-6-padding-height {\n  padding-top: var( --spacing-6 , 48px );\n  padding-bottom: var( --spacing-6 , 48px );\n}",
      "example": "\n<style>\n  #spacing-6 {\n    background-color: #aaa;\n    padding-top: 48px;\n    padding-bottom: 48px;\n  }\n</style>\n<div id='spacing-6'></div>"
    },
    "padding-left": {
      "output": "\n@mixin spacing-6-padding-left {\n  padding-left: var( --spacing-6 , 48px  );\n}",
      "example": "\n<style>\n  #spacing-6-7815823 {\n    background-color: #aaa;\n    padding-left: 48px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-6-7815823'></div>"
    },
    "padding-right": {
      "output": "\n@mixin spacing-6-padding-right {\n  padding-right: var( --spacing-6 , 48px  );\n}",
      "example": "\n<style>\n  #spacing-6-14214709 {\n    background-color: #aaa;\n    padding-right: 48px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-6-14214709'></div>"
    },
    "padding-top": {
      "output": "\n@mixin spacing-6-padding-top {\n  padding-top: var( --spacing-6 , 48px  );\n}",
      "example": "\n<style>\n  #spacing-6-74155898 {\n    background-color: #aaa;\n    padding-top: 48px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-6-74155898'></div>"
    },
    "padding-bottom": {
      "output": "\n@mixin spacing-6-padding-bottom {\n  padding-bottom: var( --spacing-6 , 48px  );\n}",
      "example": "\n<style>\n  #spacing-6-21066745 {\n    background-color: #aaa;\n    padding-bottom: 48px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-6-21066745'></div>"
    }
  },
  "layouts-spacing-7": {
    "size": {
      "output": "\n@mixin spacing-7-size {\n  width: var( --spacing-7 , 56px );\n  height: var( --spacing-7 , 56px );\n}",
      "example": "\n<style>\n  #spacing-7 {\n    background-color: #aaa;\n    width: 56px;\n    height: 56px;\n  }\n</style>\n<div id='spacing-7'></div>"
    },
    "width": {
      "output": "\n@mixin spacing-7-width {\n  width: var( --spacing-7 , 56px  );\n}",
      "example": "\n<style>\n  #spacing-7-31402491 {\n    background-color: #aaa;\n    width: 56px;\n    height: 100px;\n  }\n</style>\n<div id='spacing-7-31402491'></div>"
    },
    "height": {
      "output": "\n@mixin spacing-7-height {\n  height: var( --spacing-7 , 56px  );\n}",
      "example": "\n<style>\n  #spacing-7-29728725 {\n    background-color: #aaa;\n    height: 56px;\n    width: 100px;\n  }\n</style>\n<div id='spacing-7-29728725'></div>"
    },
    "min-width": {
      "output": "\n@mixin spacing-7-min-width {\n  min-width: var( --spacing-7 , 56px  );\n}",
      "example": "\n<style>\n  #spacing-7-90264201 {\n    background-color: #aaa;\n    min-width: 56px;\n    height: 100px; width: 100%;\n  }\n</style>\n<div id='spacing-7-90264201'></div>"
    },
    "min-height": {
      "output": "\n@mixin spacing-7-min-height {\n  min-height: var( --spacing-7 , 56px  );\n}",
      "example": "\n<style>\n  #spacing-7-23409791 {\n    background-color: #aaa;\n    min-height: 56px;\n    width: 100px; height: 100%;\n  }\n</style>\n<div id='spacing-7-23409791'></div>"
    },
    "top": {
      "output": "\n@mixin spacing-7-top {\n  top: var( --spacing-7 , 56px  );\n}",
      "example": "\n<style>\n  #spacing-7-63893145 {\n    background-color: #aaa;\n    top: 56px;\n    position: absolute; width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-7-63893145'></div>"
    },
    "bottom": {
      "output": "\n@mixin spacing-7-bottom {\n  bottom: var( --spacing-7 , 56px  );\n}",
      "example": "\n<style>\n  #spacing-7-82825795 {\n    background-color: #aaa;\n    bottom: 56px;\n    position: absolute; width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-7-82825795'></div>"
    },
    "left": {
      "output": "\n@mixin spacing-7-left {\n  left: var( --spacing-7 , 56px  );\n}",
      "example": "\n<style>\n  #spacing-7-66869174 {\n    background-color: #aaa;\n    left: 56px;\n    position: absolute; width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-7-66869174'></div>"
    },
    "right": {
      "output": "\n@mixin spacing-7-right {\n  right: var( --spacing-7 , 56px  );\n}",
      "example": "\n<style>\n  #spacing-7-51677918 {\n    background-color: #aaa;\n    right: 56px;\n    position: absolute; width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-7-51677918'></div>"
    },
    "margin": {
      "output": "\n@mixin spacing-7-margin {\n  margin: var( --spacing-7 , 56px  );\n}",
      "example": "\n<style>\n  #spacing-7-76452946 {\n    background-color: #aaa;\n    margin: 56px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-7-76452946'></div>"
    },
    "margin-width": {
      "output": "\n@mixin spacing-7-margin-width {\n  margin-left: var( --spacing-7 , 56px );\n  margin-right: var( --spacing-7 , 56px );\n}",
      "example": "\n<style>\n  #spacing-7 {\n    background-color: #aaa;\n    margin-left: 56px;\n    margin-right: 56px;\n  }\n</style>\n<div id='spacing-7'></div>"
    },
    "margin-height": {
      "output": "\n@mixin spacing-7-margin-height {\n  margin-top: 56px;\n  margin-bottom: 56px;\n}",
      "example": "\n<style>\n  #spacing-7 {\n    background-color: #aaa;\n    margin-top: var( --spacing-7 , 56px );\n    margin-bottom: var( --spacing-7 , 56px );\n  }\n</style>\n<div id='spacing-7'></div>"
    },
    "margin-left": {
      "output": "\n@mixin spacing-7-margin-left {\n  margin-left: var( --spacing-7 , 56px  );\n}",
      "example": "\n<style>\n  #spacing-7-96137818 {\n    background-color: #aaa;\n    margin-left: 56px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-7-96137818'></div>"
    },
    "margin-right": {
      "output": "\n@mixin spacing-7-margin-right {\n  margin-right: var( --spacing-7 , 56px  );\n}",
      "example": "\n<style>\n  #spacing-7-97525344 {\n    background-color: #aaa;\n    margin-right: 56px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-7-97525344'></div>"
    },
    "margin-top": {
      "output": "\n@mixin spacing-7-margin-top {\n  margin-top: var( --spacing-7 , 56px  );\n}",
      "example": "\n<style>\n  #spacing-7-64582046 {\n    background-color: #aaa;\n    margin-top: 56px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-7-64582046'></div>"
    },
    "margin-bottom": {
      "output": "\n@mixin spacing-7-margin-bottom {\n  margin-bottom: var( --spacing-7 , 56px  );\n}",
      "example": "\n<style>\n  #spacing-7-44112565 {\n    background-color: #aaa;\n    margin-bottom: 56px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-7-44112565'></div>"
    },
    "padding": {
      "output": "\n@mixin spacing-7-padding {\n  padding: var( --spacing-7 , 56px  );\n}",
      "example": "\n<style>\n  #spacing-7-6834218 {\n    background-color: #aaa;\n    padding: 56px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-7-6834218'></div>"
    },
    "padding-width": {
      "output": "\n@mixin spacing-7-padding-width {\n  padding-left: var( --spacing-7 , 56px );\n  padding-right: var( --spacing-7 , 56px );\n}",
      "example": "\n<style>\n  #spacing-7 {\n    background-color: #aaa;\n    padding-left: 56px;\n    padding-right: 56px;\n  }\n</style>\n<div id='spacing-7'></div>"
    },
    "padding-height": {
      "output": "\n@mixin spacing-7-padding-height {\n  padding-top: var( --spacing-7 , 56px );\n  padding-bottom: var( --spacing-7 , 56px );\n}",
      "example": "\n<style>\n  #spacing-7 {\n    background-color: #aaa;\n    padding-top: 56px;\n    padding-bottom: 56px;\n  }\n</style>\n<div id='spacing-7'></div>"
    },
    "padding-left": {
      "output": "\n@mixin spacing-7-padding-left {\n  padding-left: var( --spacing-7 , 56px  );\n}",
      "example": "\n<style>\n  #spacing-7-86433801 {\n    background-color: #aaa;\n    padding-left: 56px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-7-86433801'></div>"
    },
    "padding-right": {
      "output": "\n@mixin spacing-7-padding-right {\n  padding-right: var( --spacing-7 , 56px  );\n}",
      "example": "\n<style>\n  #spacing-7-96728518 {\n    background-color: #aaa;\n    padding-right: 56px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-7-96728518'></div>"
    },
    "padding-top": {
      "output": "\n@mixin spacing-7-padding-top {\n  padding-top: var( --spacing-7 , 56px  );\n}",
      "example": "\n<style>\n  #spacing-7-32180494 {\n    background-color: #aaa;\n    padding-top: 56px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-7-32180494'></div>"
    },
    "padding-bottom": {
      "output": "\n@mixin spacing-7-padding-bottom {\n  padding-bottom: var( --spacing-7 , 56px  );\n}",
      "example": "\n<style>\n  #spacing-7-18848963 {\n    background-color: #aaa;\n    padding-bottom: 56px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-7-18848963'></div>"
    }
  },
  "layouts-spacing-8": {
    "size": {
      "output": "\n@mixin spacing-8-size {\n  width: var( --spacing-8 , 64px );\n  height: var( --spacing-8 , 64px );\n}",
      "example": "\n<style>\n  #spacing-8 {\n    background-color: #aaa;\n    width: 64px;\n    height: 64px;\n  }\n</style>\n<div id='spacing-8'></div>"
    },
    "width": {
      "output": "\n@mixin spacing-8-width {\n  width: var( --spacing-8 , 64px  );\n}",
      "example": "\n<style>\n  #spacing-8-58675122 {\n    background-color: #aaa;\n    width: 64px;\n    height: 100px;\n  }\n</style>\n<div id='spacing-8-58675122'></div>"
    },
    "height": {
      "output": "\n@mixin spacing-8-height {\n  height: var( --spacing-8 , 64px  );\n}",
      "example": "\n<style>\n  #spacing-8-76728766 {\n    background-color: #aaa;\n    height: 64px;\n    width: 100px;\n  }\n</style>\n<div id='spacing-8-76728766'></div>"
    },
    "min-width": {
      "output": "\n@mixin spacing-8-min-width {\n  min-width: var( --spacing-8 , 64px  );\n}",
      "example": "\n<style>\n  #spacing-8-2111081 {\n    background-color: #aaa;\n    min-width: 64px;\n    height: 100px; width: 100%;\n  }\n</style>\n<div id='spacing-8-2111081'></div>"
    },
    "min-height": {
      "output": "\n@mixin spacing-8-min-height {\n  min-height: var( --spacing-8 , 64px  );\n}",
      "example": "\n<style>\n  #spacing-8-92422082 {\n    background-color: #aaa;\n    min-height: 64px;\n    width: 100px; height: 100%;\n  }\n</style>\n<div id='spacing-8-92422082'></div>"
    },
    "top": {
      "output": "\n@mixin spacing-8-top {\n  top: var( --spacing-8 , 64px  );\n}",
      "example": "\n<style>\n  #spacing-8-4211150 {\n    background-color: #aaa;\n    top: 64px;\n    position: absolute; width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-8-4211150'></div>"
    },
    "bottom": {
      "output": "\n@mixin spacing-8-bottom {\n  bottom: var( --spacing-8 , 64px  );\n}",
      "example": "\n<style>\n  #spacing-8-11762976 {\n    background-color: #aaa;\n    bottom: 64px;\n    position: absolute; width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-8-11762976'></div>"
    },
    "left": {
      "output": "\n@mixin spacing-8-left {\n  left: var( --spacing-8 , 64px  );\n}",
      "example": "\n<style>\n  #spacing-8-25872902 {\n    background-color: #aaa;\n    left: 64px;\n    position: absolute; width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-8-25872902'></div>"
    },
    "right": {
      "output": "\n@mixin spacing-8-right {\n  right: var( --spacing-8 , 64px  );\n}",
      "example": "\n<style>\n  #spacing-8-57931933 {\n    background-color: #aaa;\n    right: 64px;\n    position: absolute; width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-8-57931933'></div>"
    },
    "margin": {
      "output": "\n@mixin spacing-8-margin {\n  margin: var( --spacing-8 , 64px  );\n}",
      "example": "\n<style>\n  #spacing-8-63339704 {\n    background-color: #aaa;\n    margin: 64px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-8-63339704'></div>"
    },
    "margin-width": {
      "output": "\n@mixin spacing-8-margin-width {\n  margin-left: var( --spacing-8 , 64px );\n  margin-right: var( --spacing-8 , 64px );\n}",
      "example": "\n<style>\n  #spacing-8 {\n    background-color: #aaa;\n    margin-left: 64px;\n    margin-right: 64px;\n  }\n</style>\n<div id='spacing-8'></div>"
    },
    "margin-height": {
      "output": "\n@mixin spacing-8-margin-height {\n  margin-top: 64px;\n  margin-bottom: 64px;\n}",
      "example": "\n<style>\n  #spacing-8 {\n    background-color: #aaa;\n    margin-top: var( --spacing-8 , 64px );\n    margin-bottom: var( --spacing-8 , 64px );\n  }\n</style>\n<div id='spacing-8'></div>"
    },
    "margin-left": {
      "output": "\n@mixin spacing-8-margin-left {\n  margin-left: var( --spacing-8 , 64px  );\n}",
      "example": "\n<style>\n  #spacing-8-46274856 {\n    background-color: #aaa;\n    margin-left: 64px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-8-46274856'></div>"
    },
    "margin-right": {
      "output": "\n@mixin spacing-8-margin-right {\n  margin-right: var( --spacing-8 , 64px  );\n}",
      "example": "\n<style>\n  #spacing-8-29701264 {\n    background-color: #aaa;\n    margin-right: 64px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-8-29701264'></div>"
    },
    "margin-top": {
      "output": "\n@mixin spacing-8-margin-top {\n  margin-top: var( --spacing-8 , 64px  );\n}",
      "example": "\n<style>\n  #spacing-8-40931884 {\n    background-color: #aaa;\n    margin-top: 64px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-8-40931884'></div>"
    },
    "margin-bottom": {
      "output": "\n@mixin spacing-8-margin-bottom {\n  margin-bottom: var( --spacing-8 , 64px  );\n}",
      "example": "\n<style>\n  #spacing-8-43016759 {\n    background-color: #aaa;\n    margin-bottom: 64px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-8-43016759'></div>"
    },
    "padding": {
      "output": "\n@mixin spacing-8-padding {\n  padding: var( --spacing-8 , 64px  );\n}",
      "example": "\n<style>\n  #spacing-8-38356190 {\n    background-color: #aaa;\n    padding: 64px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-8-38356190'></div>"
    },
    "padding-width": {
      "output": "\n@mixin spacing-8-padding-width {\n  padding-left: var( --spacing-8 , 64px );\n  padding-right: var( --spacing-8 , 64px );\n}",
      "example": "\n<style>\n  #spacing-8 {\n    background-color: #aaa;\n    padding-left: 64px;\n    padding-right: 64px;\n  }\n</style>\n<div id='spacing-8'></div>"
    },
    "padding-height": {
      "output": "\n@mixin spacing-8-padding-height {\n  padding-top: var( --spacing-8 , 64px );\n  padding-bottom: var( --spacing-8 , 64px );\n}",
      "example": "\n<style>\n  #spacing-8 {\n    background-color: #aaa;\n    padding-top: 64px;\n    padding-bottom: 64px;\n  }\n</style>\n<div id='spacing-8'></div>"
    },
    "padding-left": {
      "output": "\n@mixin spacing-8-padding-left {\n  padding-left: var( --spacing-8 , 64px  );\n}",
      "example": "\n<style>\n  #spacing-8-91364788 {\n    background-color: #aaa;\n    padding-left: 64px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-8-91364788'></div>"
    },
    "padding-right": {
      "output": "\n@mixin spacing-8-padding-right {\n  padding-right: var( --spacing-8 , 64px  );\n}",
      "example": "\n<style>\n  #spacing-8-53953052 {\n    background-color: #aaa;\n    padding-right: 64px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-8-53953052'></div>"
    },
    "padding-top": {
      "output": "\n@mixin spacing-8-padding-top {\n  padding-top: var( --spacing-8 , 64px  );\n}",
      "example": "\n<style>\n  #spacing-8-97253079 {\n    background-color: #aaa;\n    padding-top: 64px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-8-97253079'></div>"
    },
    "padding-bottom": {
      "output": "\n@mixin spacing-8-padding-bottom {\n  padding-bottom: var( --spacing-8 , 64px  );\n}",
      "example": "\n<style>\n  #spacing-8-14579169 {\n    background-color: #aaa;\n    padding-bottom: 64px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-8-14579169'></div>"
    }
  },
  "layouts-spacing-9": {
    "size": {
      "output": "\n@mixin spacing-9-size {\n  width: var( --spacing-9 , 72px );\n  height: var( --spacing-9 , 72px );\n}",
      "example": "\n<style>\n  #spacing-9 {\n    background-color: #aaa;\n    width: 72px;\n    height: 72px;\n  }\n</style>\n<div id='spacing-9'></div>"
    },
    "width": {
      "output": "\n@mixin spacing-9-width {\n  width: var( --spacing-9 , 72px  );\n}",
      "example": "\n<style>\n  #spacing-9-47988041 {\n    background-color: #aaa;\n    width: 72px;\n    height: 100px;\n  }\n</style>\n<div id='spacing-9-47988041'></div>"
    },
    "height": {
      "output": "\n@mixin spacing-9-height {\n  height: var( --spacing-9 , 72px  );\n}",
      "example": "\n<style>\n  #spacing-9-38856402 {\n    background-color: #aaa;\n    height: 72px;\n    width: 100px;\n  }\n</style>\n<div id='spacing-9-38856402'></div>"
    },
    "min-width": {
      "output": "\n@mixin spacing-9-min-width {\n  min-width: var( --spacing-9 , 72px  );\n}",
      "example": "\n<style>\n  #spacing-9-77801286 {\n    background-color: #aaa;\n    min-width: 72px;\n    height: 100px; width: 100%;\n  }\n</style>\n<div id='spacing-9-77801286'></div>"
    },
    "min-height": {
      "output": "\n@mixin spacing-9-min-height {\n  min-height: var( --spacing-9 , 72px  );\n}",
      "example": "\n<style>\n  #spacing-9-25018369 {\n    background-color: #aaa;\n    min-height: 72px;\n    width: 100px; height: 100%;\n  }\n</style>\n<div id='spacing-9-25018369'></div>"
    },
    "top": {
      "output": "\n@mixin spacing-9-top {\n  top: var( --spacing-9 , 72px  );\n}",
      "example": "\n<style>\n  #spacing-9-2975899 {\n    background-color: #aaa;\n    top: 72px;\n    position: absolute; width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-9-2975899'></div>"
    },
    "bottom": {
      "output": "\n@mixin spacing-9-bottom {\n  bottom: var( --spacing-9 , 72px  );\n}",
      "example": "\n<style>\n  #spacing-9-2326372 {\n    background-color: #aaa;\n    bottom: 72px;\n    position: absolute; width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-9-2326372'></div>"
    },
    "left": {
      "output": "\n@mixin spacing-9-left {\n  left: var( --spacing-9 , 72px  );\n}",
      "example": "\n<style>\n  #spacing-9-11997689 {\n    background-color: #aaa;\n    left: 72px;\n    position: absolute; width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-9-11997689'></div>"
    },
    "right": {
      "output": "\n@mixin spacing-9-right {\n  right: var( --spacing-9 , 72px  );\n}",
      "example": "\n<style>\n  #spacing-9-55174858 {\n    background-color: #aaa;\n    right: 72px;\n    position: absolute; width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-9-55174858'></div>"
    },
    "margin": {
      "output": "\n@mixin spacing-9-margin {\n  margin: var( --spacing-9 , 72px  );\n}",
      "example": "\n<style>\n  #spacing-9-71939578 {\n    background-color: #aaa;\n    margin: 72px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-9-71939578'></div>"
    },
    "margin-width": {
      "output": "\n@mixin spacing-9-margin-width {\n  margin-left: var( --spacing-9 , 72px );\n  margin-right: var( --spacing-9 , 72px );\n}",
      "example": "\n<style>\n  #spacing-9 {\n    background-color: #aaa;\n    margin-left: 72px;\n    margin-right: 72px;\n  }\n</style>\n<div id='spacing-9'></div>"
    },
    "margin-height": {
      "output": "\n@mixin spacing-9-margin-height {\n  margin-top: 72px;\n  margin-bottom: 72px;\n}",
      "example": "\n<style>\n  #spacing-9 {\n    background-color: #aaa;\n    margin-top: var( --spacing-9 , 72px );\n    margin-bottom: var( --spacing-9 , 72px );\n  }\n</style>\n<div id='spacing-9'></div>"
    },
    "margin-left": {
      "output": "\n@mixin spacing-9-margin-left {\n  margin-left: var( --spacing-9 , 72px  );\n}",
      "example": "\n<style>\n  #spacing-9-32237403 {\n    background-color: #aaa;\n    margin-left: 72px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-9-32237403'></div>"
    },
    "margin-right": {
      "output": "\n@mixin spacing-9-margin-right {\n  margin-right: var( --spacing-9 , 72px  );\n}",
      "example": "\n<style>\n  #spacing-9-22721384 {\n    background-color: #aaa;\n    margin-right: 72px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-9-22721384'></div>"
    },
    "margin-top": {
      "output": "\n@mixin spacing-9-margin-top {\n  margin-top: var( --spacing-9 , 72px  );\n}",
      "example": "\n<style>\n  #spacing-9-43764855 {\n    background-color: #aaa;\n    margin-top: 72px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-9-43764855'></div>"
    },
    "margin-bottom": {
      "output": "\n@mixin spacing-9-margin-bottom {\n  margin-bottom: var( --spacing-9 , 72px  );\n}",
      "example": "\n<style>\n  #spacing-9-75845772 {\n    background-color: #aaa;\n    margin-bottom: 72px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-9-75845772'></div>"
    },
    "padding": {
      "output": "\n@mixin spacing-9-padding {\n  padding: var( --spacing-9 , 72px  );\n}",
      "example": "\n<style>\n  #spacing-9-40066002 {\n    background-color: #aaa;\n    padding: 72px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-9-40066002'></div>"
    },
    "padding-width": {
      "output": "\n@mixin spacing-9-padding-width {\n  padding-left: var( --spacing-9 , 72px );\n  padding-right: var( --spacing-9 , 72px );\n}",
      "example": "\n<style>\n  #spacing-9 {\n    background-color: #aaa;\n    padding-left: 72px;\n    padding-right: 72px;\n  }\n</style>\n<div id='spacing-9'></div>"
    },
    "padding-height": {
      "output": "\n@mixin spacing-9-padding-height {\n  padding-top: var( --spacing-9 , 72px );\n  padding-bottom: var( --spacing-9 , 72px );\n}",
      "example": "\n<style>\n  #spacing-9 {\n    background-color: #aaa;\n    padding-top: 72px;\n    padding-bottom: 72px;\n  }\n</style>\n<div id='spacing-9'></div>"
    },
    "padding-left": {
      "output": "\n@mixin spacing-9-padding-left {\n  padding-left: var( --spacing-9 , 72px  );\n}",
      "example": "\n<style>\n  #spacing-9-7572957 {\n    background-color: #aaa;\n    padding-left: 72px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-9-7572957'></div>"
    },
    "padding-right": {
      "output": "\n@mixin spacing-9-padding-right {\n  padding-right: var( --spacing-9 , 72px  );\n}",
      "example": "\n<style>\n  #spacing-9-16823606 {\n    background-color: #aaa;\n    padding-right: 72px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-9-16823606'></div>"
    },
    "padding-top": {
      "output": "\n@mixin spacing-9-padding-top {\n  padding-top: var( --spacing-9 , 72px  );\n}",
      "example": "\n<style>\n  #spacing-9-21323336 {\n    background-color: #aaa;\n    padding-top: 72px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-9-21323336'></div>"
    },
    "padding-bottom": {
      "output": "\n@mixin spacing-9-padding-bottom {\n  padding-bottom: var( --spacing-9 , 72px  );\n}",
      "example": "\n<style>\n  #spacing-9-23681821 {\n    background-color: #aaa;\n    padding-bottom: 72px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-9-23681821'></div>"
    }
  },
  "layouts-spacing-10": {
    "size": {
      "output": "\n@mixin spacing-10-size {\n  width: var( --spacing-10 , 80px );\n  height: var( --spacing-10 , 80px );\n}",
      "example": "\n<style>\n  #spacing-10 {\n    background-color: #aaa;\n    width: 80px;\n    height: 80px;\n  }\n</style>\n<div id='spacing-10'></div>"
    },
    "width": {
      "output": "\n@mixin spacing-10-width {\n  width: var( --spacing-10 , 80px  );\n}",
      "example": "\n<style>\n  #spacing-10-81590579 {\n    background-color: #aaa;\n    width: 80px;\n    height: 100px;\n  }\n</style>\n<div id='spacing-10-81590579'></div>"
    },
    "height": {
      "output": "\n@mixin spacing-10-height {\n  height: var( --spacing-10 , 80px  );\n}",
      "example": "\n<style>\n  #spacing-10-58696010 {\n    background-color: #aaa;\n    height: 80px;\n    width: 100px;\n  }\n</style>\n<div id='spacing-10-58696010'></div>"
    },
    "min-width": {
      "output": "\n@mixin spacing-10-min-width {\n  min-width: var( --spacing-10 , 80px  );\n}",
      "example": "\n<style>\n  #spacing-10-53652178 {\n    background-color: #aaa;\n    min-width: 80px;\n    height: 100px; width: 100%;\n  }\n</style>\n<div id='spacing-10-53652178'></div>"
    },
    "min-height": {
      "output": "\n@mixin spacing-10-min-height {\n  min-height: var( --spacing-10 , 80px  );\n}",
      "example": "\n<style>\n  #spacing-10-68657716 {\n    background-color: #aaa;\n    min-height: 80px;\n    width: 100px; height: 100%;\n  }\n</style>\n<div id='spacing-10-68657716'></div>"
    },
    "top": {
      "output": "\n@mixin spacing-10-top {\n  top: var( --spacing-10 , 80px  );\n}",
      "example": "\n<style>\n  #spacing-10-45181350 {\n    background-color: #aaa;\n    top: 80px;\n    position: absolute; width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-10-45181350'></div>"
    },
    "bottom": {
      "output": "\n@mixin spacing-10-bottom {\n  bottom: var( --spacing-10 , 80px  );\n}",
      "example": "\n<style>\n  #spacing-10-61876360 {\n    background-color: #aaa;\n    bottom: 80px;\n    position: absolute; width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-10-61876360'></div>"
    },
    "left": {
      "output": "\n@mixin spacing-10-left {\n  left: var( --spacing-10 , 80px  );\n}",
      "example": "\n<style>\n  #spacing-10-86170437 {\n    background-color: #aaa;\n    left: 80px;\n    position: absolute; width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-10-86170437'></div>"
    },
    "right": {
      "output": "\n@mixin spacing-10-right {\n  right: var( --spacing-10 , 80px  );\n}",
      "example": "\n<style>\n  #spacing-10-15965705 {\n    background-color: #aaa;\n    right: 80px;\n    position: absolute; width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-10-15965705'></div>"
    },
    "margin": {
      "output": "\n@mixin spacing-10-margin {\n  margin: var( --spacing-10 , 80px  );\n}",
      "example": "\n<style>\n  #spacing-10-18529938 {\n    background-color: #aaa;\n    margin: 80px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-10-18529938'></div>"
    },
    "margin-width": {
      "output": "\n@mixin spacing-10-margin-width {\n  margin-left: var( --spacing-10 , 80px );\n  margin-right: var( --spacing-10 , 80px );\n}",
      "example": "\n<style>\n  #spacing-10 {\n    background-color: #aaa;\n    margin-left: 80px;\n    margin-right: 80px;\n  }\n</style>\n<div id='spacing-10'></div>"
    },
    "margin-height": {
      "output": "\n@mixin spacing-10-margin-height {\n  margin-top: 80px;\n  margin-bottom: 80px;\n}",
      "example": "\n<style>\n  #spacing-10 {\n    background-color: #aaa;\n    margin-top: var( --spacing-10 , 80px );\n    margin-bottom: var( --spacing-10 , 80px );\n  }\n</style>\n<div id='spacing-10'></div>"
    },
    "margin-left": {
      "output": "\n@mixin spacing-10-margin-left {\n  margin-left: var( --spacing-10 , 80px  );\n}",
      "example": "\n<style>\n  #spacing-10-23503580 {\n    background-color: #aaa;\n    margin-left: 80px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-10-23503580'></div>"
    },
    "margin-right": {
      "output": "\n@mixin spacing-10-margin-right {\n  margin-right: var( --spacing-10 , 80px  );\n}",
      "example": "\n<style>\n  #spacing-10-68908198 {\n    background-color: #aaa;\n    margin-right: 80px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-10-68908198'></div>"
    },
    "margin-top": {
      "output": "\n@mixin spacing-10-margin-top {\n  margin-top: var( --spacing-10 , 80px  );\n}",
      "example": "\n<style>\n  #spacing-10-33021079 {\n    background-color: #aaa;\n    margin-top: 80px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-10-33021079'></div>"
    },
    "margin-bottom": {
      "output": "\n@mixin spacing-10-margin-bottom {\n  margin-bottom: var( --spacing-10 , 80px  );\n}",
      "example": "\n<style>\n  #spacing-10-80597522 {\n    background-color: #aaa;\n    margin-bottom: 80px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-10-80597522'></div>"
    },
    "padding": {
      "output": "\n@mixin spacing-10-padding {\n  padding: var( --spacing-10 , 80px  );\n}",
      "example": "\n<style>\n  #spacing-10-51062990 {\n    background-color: #aaa;\n    padding: 80px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-10-51062990'></div>"
    },
    "padding-width": {
      "output": "\n@mixin spacing-10-padding-width {\n  padding-left: var( --spacing-10 , 80px );\n  padding-right: var( --spacing-10 , 80px );\n}",
      "example": "\n<style>\n  #spacing-10 {\n    background-color: #aaa;\n    padding-left: 80px;\n    padding-right: 80px;\n  }\n</style>\n<div id='spacing-10'></div>"
    },
    "padding-height": {
      "output": "\n@mixin spacing-10-padding-height {\n  padding-top: var( --spacing-10 , 80px );\n  padding-bottom: var( --spacing-10 , 80px );\n}",
      "example": "\n<style>\n  #spacing-10 {\n    background-color: #aaa;\n    padding-top: 80px;\n    padding-bottom: 80px;\n  }\n</style>\n<div id='spacing-10'></div>"
    },
    "padding-left": {
      "output": "\n@mixin spacing-10-padding-left {\n  padding-left: var( --spacing-10 , 80px  );\n}",
      "example": "\n<style>\n  #spacing-10-37053347 {\n    background-color: #aaa;\n    padding-left: 80px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-10-37053347'></div>"
    },
    "padding-right": {
      "output": "\n@mixin spacing-10-padding-right {\n  padding-right: var( --spacing-10 , 80px  );\n}",
      "example": "\n<style>\n  #spacing-10-32082302 {\n    background-color: #aaa;\n    padding-right: 80px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-10-32082302'></div>"
    },
    "padding-top": {
      "output": "\n@mixin spacing-10-padding-top {\n  padding-top: var( --spacing-10 , 80px  );\n}",
      "example": "\n<style>\n  #spacing-10-27651361 {\n    background-color: #aaa;\n    padding-top: 80px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-10-27651361'></div>"
    },
    "padding-bottom": {
      "output": "\n@mixin spacing-10-padding-bottom {\n  padding-bottom: var( --spacing-10 , 80px  );\n}",
      "example": "\n<style>\n  #spacing-10-73044940 {\n    background-color: #aaa;\n    padding-bottom: 80px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-10-73044940'></div>"
    }
  },
  "layouts-spacing-11": {
    "size": {
      "output": "\n@mixin spacing-11-size {\n  width: var( --spacing-11 , 88px );\n  height: var( --spacing-11 , 88px );\n}",
      "example": "\n<style>\n  #spacing-11 {\n    background-color: #aaa;\n    width: 88px;\n    height: 88px;\n  }\n</style>\n<div id='spacing-11'></div>"
    },
    "width": {
      "output": "\n@mixin spacing-11-width {\n  width: var( --spacing-11 , 88px  );\n}",
      "example": "\n<style>\n  #spacing-11-64854113 {\n    background-color: #aaa;\n    width: 88px;\n    height: 100px;\n  }\n</style>\n<div id='spacing-11-64854113'></div>"
    },
    "height": {
      "output": "\n@mixin spacing-11-height {\n  height: var( --spacing-11 , 88px  );\n}",
      "example": "\n<style>\n  #spacing-11-16947570 {\n    background-color: #aaa;\n    height: 88px;\n    width: 100px;\n  }\n</style>\n<div id='spacing-11-16947570'></div>"
    },
    "min-width": {
      "output": "\n@mixin spacing-11-min-width {\n  min-width: var( --spacing-11 , 88px  );\n}",
      "example": "\n<style>\n  #spacing-11-63488605 {\n    background-color: #aaa;\n    min-width: 88px;\n    height: 100px; width: 100%;\n  }\n</style>\n<div id='spacing-11-63488605'></div>"
    },
    "min-height": {
      "output": "\n@mixin spacing-11-min-height {\n  min-height: var( --spacing-11 , 88px  );\n}",
      "example": "\n<style>\n  #spacing-11-7191773 {\n    background-color: #aaa;\n    min-height: 88px;\n    width: 100px; height: 100%;\n  }\n</style>\n<div id='spacing-11-7191773'></div>"
    },
    "top": {
      "output": "\n@mixin spacing-11-top {\n  top: var( --spacing-11 , 88px  );\n}",
      "example": "\n<style>\n  #spacing-11-61942413 {\n    background-color: #aaa;\n    top: 88px;\n    position: absolute; width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-11-61942413'></div>"
    },
    "bottom": {
      "output": "\n@mixin spacing-11-bottom {\n  bottom: var( --spacing-11 , 88px  );\n}",
      "example": "\n<style>\n  #spacing-11-16594251 {\n    background-color: #aaa;\n    bottom: 88px;\n    position: absolute; width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-11-16594251'></div>"
    },
    "left": {
      "output": "\n@mixin spacing-11-left {\n  left: var( --spacing-11 , 88px  );\n}",
      "example": "\n<style>\n  #spacing-11-22289330 {\n    background-color: #aaa;\n    left: 88px;\n    position: absolute; width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-11-22289330'></div>"
    },
    "right": {
      "output": "\n@mixin spacing-11-right {\n  right: var( --spacing-11 , 88px  );\n}",
      "example": "\n<style>\n  #spacing-11-17712560 {\n    background-color: #aaa;\n    right: 88px;\n    position: absolute; width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-11-17712560'></div>"
    },
    "margin": {
      "output": "\n@mixin spacing-11-margin {\n  margin: var( --spacing-11 , 88px  );\n}",
      "example": "\n<style>\n  #spacing-11-1800288 {\n    background-color: #aaa;\n    margin: 88px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-11-1800288'></div>"
    },
    "margin-width": {
      "output": "\n@mixin spacing-11-margin-width {\n  margin-left: var( --spacing-11 , 88px );\n  margin-right: var( --spacing-11 , 88px );\n}",
      "example": "\n<style>\n  #spacing-11 {\n    background-color: #aaa;\n    margin-left: 88px;\n    margin-right: 88px;\n  }\n</style>\n<div id='spacing-11'></div>"
    },
    "margin-height": {
      "output": "\n@mixin spacing-11-margin-height {\n  margin-top: 88px;\n  margin-bottom: 88px;\n}",
      "example": "\n<style>\n  #spacing-11 {\n    background-color: #aaa;\n    margin-top: var( --spacing-11 , 88px );\n    margin-bottom: var( --spacing-11 , 88px );\n  }\n</style>\n<div id='spacing-11'></div>"
    },
    "margin-left": {
      "output": "\n@mixin spacing-11-margin-left {\n  margin-left: var( --spacing-11 , 88px  );\n}",
      "example": "\n<style>\n  #spacing-11-78222548 {\n    background-color: #aaa;\n    margin-left: 88px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-11-78222548'></div>"
    },
    "margin-right": {
      "output": "\n@mixin spacing-11-margin-right {\n  margin-right: var( --spacing-11 , 88px  );\n}",
      "example": "\n<style>\n  #spacing-11-58472792 {\n    background-color: #aaa;\n    margin-right: 88px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-11-58472792'></div>"
    },
    "margin-top": {
      "output": "\n@mixin spacing-11-margin-top {\n  margin-top: var( --spacing-11 , 88px  );\n}",
      "example": "\n<style>\n  #spacing-11-46985771 {\n    background-color: #aaa;\n    margin-top: 88px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-11-46985771'></div>"
    },
    "margin-bottom": {
      "output": "\n@mixin spacing-11-margin-bottom {\n  margin-bottom: var( --spacing-11 , 88px  );\n}",
      "example": "\n<style>\n  #spacing-11-38757367 {\n    background-color: #aaa;\n    margin-bottom: 88px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-11-38757367'></div>"
    },
    "padding": {
      "output": "\n@mixin spacing-11-padding {\n  padding: var( --spacing-11 , 88px  );\n}",
      "example": "\n<style>\n  #spacing-11-68614754 {\n    background-color: #aaa;\n    padding: 88px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-11-68614754'></div>"
    },
    "padding-width": {
      "output": "\n@mixin spacing-11-padding-width {\n  padding-left: var( --spacing-11 , 88px );\n  padding-right: var( --spacing-11 , 88px );\n}",
      "example": "\n<style>\n  #spacing-11 {\n    background-color: #aaa;\n    padding-left: 88px;\n    padding-right: 88px;\n  }\n</style>\n<div id='spacing-11'></div>"
    },
    "padding-height": {
      "output": "\n@mixin spacing-11-padding-height {\n  padding-top: var( --spacing-11 , 88px );\n  padding-bottom: var( --spacing-11 , 88px );\n}",
      "example": "\n<style>\n  #spacing-11 {\n    background-color: #aaa;\n    padding-top: 88px;\n    padding-bottom: 88px;\n  }\n</style>\n<div id='spacing-11'></div>"
    },
    "padding-left": {
      "output": "\n@mixin spacing-11-padding-left {\n  padding-left: var( --spacing-11 , 88px  );\n}",
      "example": "\n<style>\n  #spacing-11-33462234 {\n    background-color: #aaa;\n    padding-left: 88px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-11-33462234'></div>"
    },
    "padding-right": {
      "output": "\n@mixin spacing-11-padding-right {\n  padding-right: var( --spacing-11 , 88px  );\n}",
      "example": "\n<style>\n  #spacing-11-78411057 {\n    background-color: #aaa;\n    padding-right: 88px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-11-78411057'></div>"
    },
    "padding-top": {
      "output": "\n@mixin spacing-11-padding-top {\n  padding-top: var( --spacing-11 , 88px  );\n}",
      "example": "\n<style>\n  #spacing-11-37772810 {\n    background-color: #aaa;\n    padding-top: 88px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-11-37772810'></div>"
    },
    "padding-bottom": {
      "output": "\n@mixin spacing-11-padding-bottom {\n  padding-bottom: var( --spacing-11 , 88px  );\n}",
      "example": "\n<style>\n  #spacing-11-20973177 {\n    background-color: #aaa;\n    padding-bottom: 88px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-11-20973177'></div>"
    }
  },
  "layouts-spacing-12": {
    "size": {
      "output": "\n@mixin spacing-12-size {\n  width: var( --spacing-12 , 96px );\n  height: var( --spacing-12 , 96px );\n}",
      "example": "\n<style>\n  #spacing-12 {\n    background-color: #aaa;\n    width: 96px;\n    height: 96px;\n  }\n</style>\n<div id='spacing-12'></div>"
    },
    "width": {
      "output": "\n@mixin spacing-12-width {\n  width: var( --spacing-12 , 96px  );\n}",
      "example": "\n<style>\n  #spacing-12-11568419 {\n    background-color: #aaa;\n    width: 96px;\n    height: 100px;\n  }\n</style>\n<div id='spacing-12-11568419'></div>"
    },
    "height": {
      "output": "\n@mixin spacing-12-height {\n  height: var( --spacing-12 , 96px  );\n}",
      "example": "\n<style>\n  #spacing-12-7257703 {\n    background-color: #aaa;\n    height: 96px;\n    width: 100px;\n  }\n</style>\n<div id='spacing-12-7257703'></div>"
    },
    "min-width": {
      "output": "\n@mixin spacing-12-min-width {\n  min-width: var( --spacing-12 , 96px  );\n}",
      "example": "\n<style>\n  #spacing-12-24906340 {\n    background-color: #aaa;\n    min-width: 96px;\n    height: 100px; width: 100%;\n  }\n</style>\n<div id='spacing-12-24906340'></div>"
    },
    "min-height": {
      "output": "\n@mixin spacing-12-min-height {\n  min-height: var( --spacing-12 , 96px  );\n}",
      "example": "\n<style>\n  #spacing-12-97772847 {\n    background-color: #aaa;\n    min-height: 96px;\n    width: 100px; height: 100%;\n  }\n</style>\n<div id='spacing-12-97772847'></div>"
    },
    "top": {
      "output": "\n@mixin spacing-12-top {\n  top: var( --spacing-12 , 96px  );\n}",
      "example": "\n<style>\n  #spacing-12-2714297 {\n    background-color: #aaa;\n    top: 96px;\n    position: absolute; width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-12-2714297'></div>"
    },
    "bottom": {
      "output": "\n@mixin spacing-12-bottom {\n  bottom: var( --spacing-12 , 96px  );\n}",
      "example": "\n<style>\n  #spacing-12-66631774 {\n    background-color: #aaa;\n    bottom: 96px;\n    position: absolute; width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-12-66631774'></div>"
    },
    "left": {
      "output": "\n@mixin spacing-12-left {\n  left: var( --spacing-12 , 96px  );\n}",
      "example": "\n<style>\n  #spacing-12-87326759 {\n    background-color: #aaa;\n    left: 96px;\n    position: absolute; width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-12-87326759'></div>"
    },
    "right": {
      "output": "\n@mixin spacing-12-right {\n  right: var( --spacing-12 , 96px  );\n}",
      "example": "\n<style>\n  #spacing-12-68884310 {\n    background-color: #aaa;\n    right: 96px;\n    position: absolute; width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-12-68884310'></div>"
    },
    "margin": {
      "output": "\n@mixin spacing-12-margin {\n  margin: var( --spacing-12 , 96px  );\n}",
      "example": "\n<style>\n  #spacing-12-47562123 {\n    background-color: #aaa;\n    margin: 96px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-12-47562123'></div>"
    },
    "margin-width": {
      "output": "\n@mixin spacing-12-margin-width {\n  margin-left: var( --spacing-12 , 96px );\n  margin-right: var( --spacing-12 , 96px );\n}",
      "example": "\n<style>\n  #spacing-12 {\n    background-color: #aaa;\n    margin-left: 96px;\n    margin-right: 96px;\n  }\n</style>\n<div id='spacing-12'></div>"
    },
    "margin-height": {
      "output": "\n@mixin spacing-12-margin-height {\n  margin-top: 96px;\n  margin-bottom: 96px;\n}",
      "example": "\n<style>\n  #spacing-12 {\n    background-color: #aaa;\n    margin-top: var( --spacing-12 , 96px );\n    margin-bottom: var( --spacing-12 , 96px );\n  }\n</style>\n<div id='spacing-12'></div>"
    },
    "margin-left": {
      "output": "\n@mixin spacing-12-margin-left {\n  margin-left: var( --spacing-12 , 96px  );\n}",
      "example": "\n<style>\n  #spacing-12-21848249 {\n    background-color: #aaa;\n    margin-left: 96px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-12-21848249'></div>"
    },
    "margin-right": {
      "output": "\n@mixin spacing-12-margin-right {\n  margin-right: var( --spacing-12 , 96px  );\n}",
      "example": "\n<style>\n  #spacing-12-20559591 {\n    background-color: #aaa;\n    margin-right: 96px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-12-20559591'></div>"
    },
    "margin-top": {
      "output": "\n@mixin spacing-12-margin-top {\n  margin-top: var( --spacing-12 , 96px  );\n}",
      "example": "\n<style>\n  #spacing-12-51946098 {\n    background-color: #aaa;\n    margin-top: 96px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-12-51946098'></div>"
    },
    "margin-bottom": {
      "output": "\n@mixin spacing-12-margin-bottom {\n  margin-bottom: var( --spacing-12 , 96px  );\n}",
      "example": "\n<style>\n  #spacing-12-8669003 {\n    background-color: #aaa;\n    margin-bottom: 96px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-12-8669003'></div>"
    },
    "padding": {
      "output": "\n@mixin spacing-12-padding {\n  padding: var( --spacing-12 , 96px  );\n}",
      "example": "\n<style>\n  #spacing-12-98925977 {\n    background-color: #aaa;\n    padding: 96px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-12-98925977'></div>"
    },
    "padding-width": {
      "output": "\n@mixin spacing-12-padding-width {\n  padding-left: var( --spacing-12 , 96px );\n  padding-right: var( --spacing-12 , 96px );\n}",
      "example": "\n<style>\n  #spacing-12 {\n    background-color: #aaa;\n    padding-left: 96px;\n    padding-right: 96px;\n  }\n</style>\n<div id='spacing-12'></div>"
    },
    "padding-height": {
      "output": "\n@mixin spacing-12-padding-height {\n  padding-top: var( --spacing-12 , 96px );\n  padding-bottom: var( --spacing-12 , 96px );\n}",
      "example": "\n<style>\n  #spacing-12 {\n    background-color: #aaa;\n    padding-top: 96px;\n    padding-bottom: 96px;\n  }\n</style>\n<div id='spacing-12'></div>"
    },
    "padding-left": {
      "output": "\n@mixin spacing-12-padding-left {\n  padding-left: var( --spacing-12 , 96px  );\n}",
      "example": "\n<style>\n  #spacing-12-80386891 {\n    background-color: #aaa;\n    padding-left: 96px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-12-80386891'></div>"
    },
    "padding-right": {
      "output": "\n@mixin spacing-12-padding-right {\n  padding-right: var( --spacing-12 , 96px  );\n}",
      "example": "\n<style>\n  #spacing-12-69064826 {\n    background-color: #aaa;\n    padding-right: 96px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-12-69064826'></div>"
    },
    "padding-top": {
      "output": "\n@mixin spacing-12-padding-top {\n  padding-top: var( --spacing-12 , 96px  );\n}",
      "example": "\n<style>\n  #spacing-12-9704463 {\n    background-color: #aaa;\n    padding-top: 96px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-12-9704463'></div>"
    },
    "padding-bottom": {
      "output": "\n@mixin spacing-12-padding-bottom {\n  padding-bottom: var( --spacing-12 , 96px  );\n}",
      "example": "\n<style>\n  #spacing-12-74856259 {\n    background-color: #aaa;\n    padding-bottom: 96px;\n    width: 100px; height: 100px;\n  }\n</style>\n<div id='spacing-12-74856259'></div>"
    }
  },
  "layouts-col-0": {
    "width": {
      "output": "\n@mixin col-0-width {\n  width: var( --col-0 , 0% );\n}",
      "example": "\n<style>\n  #col-0 {\n    background-color: #aaa;\n    width: 0%;\n    height: 100px;\n  }\n</style>\n<div id='col-0'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-0-min-width {\n  min-width: var( --col-0 , 0% );\n}",
      "example": "\n<style>\n  #col-0 {\n    background-color: #aaa;\n    min-width: 0%;\n    height: 100px;\n  }\n</style>\n<div id='col-0'></div>"
    },
    "left": {
      "output": "\n@mixin col-0-left {\n  left: var( --col-0 , 0% );\n}",
      "example": "\n<style>\n  #col-0 {\n    background-color: #aaa;\n    left: 0%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-0'></div>"
    },
    "right": {
      "output": "\n@mixin col-0-right {\n  right: var( --col-0 , 0% );\n}",
      "example": "\n<style>\n  #col-0 {\n    background-color: #aaa;\n    right: 0%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-0'></div>"
    }
  },
  "layouts-col-0-3": {
    "width": {
      "output": "\n@mixin col-0-3-width {\n  width: var( --col-0-3 , 2.0833% );\n}",
      "example": "\n<style>\n  #col-0-3 {\n    background-color: #aaa;\n    width: 2.0833%;\n    height: 100px;\n  }\n</style>\n<div id='col-0-3'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-0-3-min-width {\n  min-width: var( --col-0-3 , 2.0833% );\n}",
      "example": "\n<style>\n  #col-0-3 {\n    background-color: #aaa;\n    min-width: 2.0833%;\n    height: 100px;\n  }\n</style>\n<div id='col-0-3'></div>"
    },
    "left": {
      "output": "\n@mixin col-0-3-left {\n  left: var( --col-0-3 , 2.0833% );\n}",
      "example": "\n<style>\n  #col-0-3 {\n    background-color: #aaa;\n    left: 2.0833%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-0-3'></div>"
    },
    "right": {
      "output": "\n@mixin col-0-3-right {\n  right: var( --col-0-3 , 2.0833% );\n}",
      "example": "\n<style>\n  #col-0-3 {\n    background-color: #aaa;\n    right: 2.0833%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-0-3'></div>"
    }
  },
  "layouts-col-0-4": {
    "width": {
      "output": "\n@mixin col-0-4-width {\n  width: var( --col-0-4 , 2.7778% );\n}",
      "example": "\n<style>\n  #col-0-4 {\n    background-color: #aaa;\n    width: 2.7778%;\n    height: 100px;\n  }\n</style>\n<div id='col-0-4'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-0-4-min-width {\n  min-width: var( --col-0-4 , 2.7778% );\n}",
      "example": "\n<style>\n  #col-0-4 {\n    background-color: #aaa;\n    min-width: 2.7778%;\n    height: 100px;\n  }\n</style>\n<div id='col-0-4'></div>"
    },
    "left": {
      "output": "\n@mixin col-0-4-left {\n  left: var( --col-0-4 , 2.7778% );\n}",
      "example": "\n<style>\n  #col-0-4 {\n    background-color: #aaa;\n    left: 2.7778%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-0-4'></div>"
    },
    "right": {
      "output": "\n@mixin col-0-4-right {\n  right: var( --col-0-4 , 2.7778% );\n}",
      "example": "\n<style>\n  #col-0-4 {\n    background-color: #aaa;\n    right: 2.7778%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-0-4'></div>"
    }
  },
  "layouts-col-0-6": {
    "width": {
      "output": "\n@mixin col-0-6-width {\n  width: var( --col-0-6 , 4.1667% );\n}",
      "example": "\n<style>\n  #col-0-6 {\n    background-color: #aaa;\n    width: 4.1667%;\n    height: 100px;\n  }\n</style>\n<div id='col-0-6'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-0-6-min-width {\n  min-width: var( --col-0-6 , 4.1667% );\n}",
      "example": "\n<style>\n  #col-0-6 {\n    background-color: #aaa;\n    min-width: 4.1667%;\n    height: 100px;\n  }\n</style>\n<div id='col-0-6'></div>"
    },
    "left": {
      "output": "\n@mixin col-0-6-left {\n  left: var( --col-0-6 , 4.1667% );\n}",
      "example": "\n<style>\n  #col-0-6 {\n    background-color: #aaa;\n    left: 4.1667%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-0-6'></div>"
    },
    "right": {
      "output": "\n@mixin col-0-6-right {\n  right: var( --col-0-6 , 4.1667% );\n}",
      "example": "\n<style>\n  #col-0-6 {\n    background-color: #aaa;\n    right: 4.1667%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-0-6'></div>"
    }
  },
  "layouts-col-0-8": {
    "width": {
      "output": "\n@mixin col-0-8-width {\n  width: var( --col-0-8 , 5.5556% );\n}",
      "example": "\n<style>\n  #col-0-8 {\n    background-color: #aaa;\n    width: 5.5556%;\n    height: 100px;\n  }\n</style>\n<div id='col-0-8'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-0-8-min-width {\n  min-width: var( --col-0-8 , 5.5556% );\n}",
      "example": "\n<style>\n  #col-0-8 {\n    background-color: #aaa;\n    min-width: 5.5556%;\n    height: 100px;\n  }\n</style>\n<div id='col-0-8'></div>"
    },
    "left": {
      "output": "\n@mixin col-0-8-left {\n  left: var( --col-0-8 , 5.5556% );\n}",
      "example": "\n<style>\n  #col-0-8 {\n    background-color: #aaa;\n    left: 5.5556%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-0-8'></div>"
    },
    "right": {
      "output": "\n@mixin col-0-8-right {\n  right: var( --col-0-8 , 5.5556% );\n}",
      "example": "\n<style>\n  #col-0-8 {\n    background-color: #aaa;\n    right: 5.5556%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-0-8'></div>"
    }
  },
  "layouts-col-0-9": {
    "width": {
      "output": "\n@mixin col-0-9-width {\n  width: var( --col-0-9 , 6.25% );\n}",
      "example": "\n<style>\n  #col-0-9 {\n    background-color: #aaa;\n    width: 6.25%;\n    height: 100px;\n  }\n</style>\n<div id='col-0-9'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-0-9-min-width {\n  min-width: var( --col-0-9 , 6.25% );\n}",
      "example": "\n<style>\n  #col-0-9 {\n    background-color: #aaa;\n    min-width: 6.25%;\n    height: 100px;\n  }\n</style>\n<div id='col-0-9'></div>"
    },
    "left": {
      "output": "\n@mixin col-0-9-left {\n  left: var( --col-0-9 , 6.25% );\n}",
      "example": "\n<style>\n  #col-0-9 {\n    background-color: #aaa;\n    left: 6.25%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-0-9'></div>"
    },
    "right": {
      "output": "\n@mixin col-0-9-right {\n  right: var( --col-0-9 , 6.25% );\n}",
      "example": "\n<style>\n  #col-0-9 {\n    background-color: #aaa;\n    right: 6.25%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-0-9'></div>"
    }
  },
  "layouts-col-1": {
    "width": {
      "output": "\n@mixin col-1-width {\n  width: var( --col-1 , 8.3333% );\n}",
      "example": "\n<style>\n  #col-1 {\n    background-color: #aaa;\n    width: 8.3333%;\n    height: 100px;\n  }\n</style>\n<div id='col-1'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-1-min-width {\n  min-width: var( --col-1 , 8.3333% );\n}",
      "example": "\n<style>\n  #col-1 {\n    background-color: #aaa;\n    min-width: 8.3333%;\n    height: 100px;\n  }\n</style>\n<div id='col-1'></div>"
    },
    "left": {
      "output": "\n@mixin col-1-left {\n  left: var( --col-1 , 8.3333% );\n}",
      "example": "\n<style>\n  #col-1 {\n    background-color: #aaa;\n    left: 8.3333%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-1'></div>"
    },
    "right": {
      "output": "\n@mixin col-1-right {\n  right: var( --col-1 , 8.3333% );\n}",
      "example": "\n<style>\n  #col-1 {\n    background-color: #aaa;\n    right: 8.3333%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-1'></div>"
    }
  },
  "layouts-col-1-3": {
    "width": {
      "output": "\n@mixin col-1-3-width {\n  width: var( --col-1-3 , 10.4167% );\n}",
      "example": "\n<style>\n  #col-1-3 {\n    background-color: #aaa;\n    width: 10.4167%;\n    height: 100px;\n  }\n</style>\n<div id='col-1-3'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-1-3-min-width {\n  min-width: var( --col-1-3 , 10.4167% );\n}",
      "example": "\n<style>\n  #col-1-3 {\n    background-color: #aaa;\n    min-width: 10.4167%;\n    height: 100px;\n  }\n</style>\n<div id='col-1-3'></div>"
    },
    "left": {
      "output": "\n@mixin col-1-3-left {\n  left: var( --col-1-3 , 10.4167% );\n}",
      "example": "\n<style>\n  #col-1-3 {\n    background-color: #aaa;\n    left: 10.4167%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-1-3'></div>"
    },
    "right": {
      "output": "\n@mixin col-1-3-right {\n  right: var( --col-1-3 , 10.4167% );\n}",
      "example": "\n<style>\n  #col-1-3 {\n    background-color: #aaa;\n    right: 10.4167%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-1-3'></div>"
    }
  },
  "layouts-col-1-4": {
    "width": {
      "output": "\n@mixin col-1-4-width {\n  width: var( --col-1-4 , 11.1111% );\n}",
      "example": "\n<style>\n  #col-1-4 {\n    background-color: #aaa;\n    width: 11.1111%;\n    height: 100px;\n  }\n</style>\n<div id='col-1-4'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-1-4-min-width {\n  min-width: var( --col-1-4 , 11.1111% );\n}",
      "example": "\n<style>\n  #col-1-4 {\n    background-color: #aaa;\n    min-width: 11.1111%;\n    height: 100px;\n  }\n</style>\n<div id='col-1-4'></div>"
    },
    "left": {
      "output": "\n@mixin col-1-4-left {\n  left: var( --col-1-4 , 11.1111% );\n}",
      "example": "\n<style>\n  #col-1-4 {\n    background-color: #aaa;\n    left: 11.1111%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-1-4'></div>"
    },
    "right": {
      "output": "\n@mixin col-1-4-right {\n  right: var( --col-1-4 , 11.1111% );\n}",
      "example": "\n<style>\n  #col-1-4 {\n    background-color: #aaa;\n    right: 11.1111%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-1-4'></div>"
    }
  },
  "layouts-col-1-6": {
    "width": {
      "output": "\n@mixin col-1-6-width {\n  width: var( --col-1-6 , 12.5% );\n}",
      "example": "\n<style>\n  #col-1-6 {\n    background-color: #aaa;\n    width: 12.5%;\n    height: 100px;\n  }\n</style>\n<div id='col-1-6'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-1-6-min-width {\n  min-width: var( --col-1-6 , 12.5% );\n}",
      "example": "\n<style>\n  #col-1-6 {\n    background-color: #aaa;\n    min-width: 12.5%;\n    height: 100px;\n  }\n</style>\n<div id='col-1-6'></div>"
    },
    "left": {
      "output": "\n@mixin col-1-6-left {\n  left: var( --col-1-6 , 12.5% );\n}",
      "example": "\n<style>\n  #col-1-6 {\n    background-color: #aaa;\n    left: 12.5%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-1-6'></div>"
    },
    "right": {
      "output": "\n@mixin col-1-6-right {\n  right: var( --col-1-6 , 12.5% );\n}",
      "example": "\n<style>\n  #col-1-6 {\n    background-color: #aaa;\n    right: 12.5%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-1-6'></div>"
    }
  },
  "layouts-col-1-8": {
    "width": {
      "output": "\n@mixin col-1-8-width {\n  width: var( --col-1-8 , 13.8889% );\n}",
      "example": "\n<style>\n  #col-1-8 {\n    background-color: #aaa;\n    width: 13.8889%;\n    height: 100px;\n  }\n</style>\n<div id='col-1-8'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-1-8-min-width {\n  min-width: var( --col-1-8 , 13.8889% );\n}",
      "example": "\n<style>\n  #col-1-8 {\n    background-color: #aaa;\n    min-width: 13.8889%;\n    height: 100px;\n  }\n</style>\n<div id='col-1-8'></div>"
    },
    "left": {
      "output": "\n@mixin col-1-8-left {\n  left: var( --col-1-8 , 13.8889% );\n}",
      "example": "\n<style>\n  #col-1-8 {\n    background-color: #aaa;\n    left: 13.8889%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-1-8'></div>"
    },
    "right": {
      "output": "\n@mixin col-1-8-right {\n  right: var( --col-1-8 , 13.8889% );\n}",
      "example": "\n<style>\n  #col-1-8 {\n    background-color: #aaa;\n    right: 13.8889%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-1-8'></div>"
    }
  },
  "layouts-col-1-9": {
    "width": {
      "output": "\n@mixin col-1-9-width {\n  width: var( --col-1-9 , 14.5833% );\n}",
      "example": "\n<style>\n  #col-1-9 {\n    background-color: #aaa;\n    width: 14.5833%;\n    height: 100px;\n  }\n</style>\n<div id='col-1-9'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-1-9-min-width {\n  min-width: var( --col-1-9 , 14.5833% );\n}",
      "example": "\n<style>\n  #col-1-9 {\n    background-color: #aaa;\n    min-width: 14.5833%;\n    height: 100px;\n  }\n</style>\n<div id='col-1-9'></div>"
    },
    "left": {
      "output": "\n@mixin col-1-9-left {\n  left: var( --col-1-9 , 14.5833% );\n}",
      "example": "\n<style>\n  #col-1-9 {\n    background-color: #aaa;\n    left: 14.5833%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-1-9'></div>"
    },
    "right": {
      "output": "\n@mixin col-1-9-right {\n  right: var( --col-1-9 , 14.5833% );\n}",
      "example": "\n<style>\n  #col-1-9 {\n    background-color: #aaa;\n    right: 14.5833%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-1-9'></div>"
    }
  },
  "layouts-col-2": {
    "width": {
      "output": "\n@mixin col-2-width {\n  width: var( --col-2 , 16.6667% );\n}",
      "example": "\n<style>\n  #col-2 {\n    background-color: #aaa;\n    width: 16.6667%;\n    height: 100px;\n  }\n</style>\n<div id='col-2'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-2-min-width {\n  min-width: var( --col-2 , 16.6667% );\n}",
      "example": "\n<style>\n  #col-2 {\n    background-color: #aaa;\n    min-width: 16.6667%;\n    height: 100px;\n  }\n</style>\n<div id='col-2'></div>"
    },
    "left": {
      "output": "\n@mixin col-2-left {\n  left: var( --col-2 , 16.6667% );\n}",
      "example": "\n<style>\n  #col-2 {\n    background-color: #aaa;\n    left: 16.6667%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-2'></div>"
    },
    "right": {
      "output": "\n@mixin col-2-right {\n  right: var( --col-2 , 16.6667% );\n}",
      "example": "\n<style>\n  #col-2 {\n    background-color: #aaa;\n    right: 16.6667%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-2'></div>"
    }
  },
  "layouts-col-2-3": {
    "width": {
      "output": "\n@mixin col-2-3-width {\n  width: var( --col-2-3 , 18.75% );\n}",
      "example": "\n<style>\n  #col-2-3 {\n    background-color: #aaa;\n    width: 18.75%;\n    height: 100px;\n  }\n</style>\n<div id='col-2-3'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-2-3-min-width {\n  min-width: var( --col-2-3 , 18.75% );\n}",
      "example": "\n<style>\n  #col-2-3 {\n    background-color: #aaa;\n    min-width: 18.75%;\n    height: 100px;\n  }\n</style>\n<div id='col-2-3'></div>"
    },
    "left": {
      "output": "\n@mixin col-2-3-left {\n  left: var( --col-2-3 , 18.75% );\n}",
      "example": "\n<style>\n  #col-2-3 {\n    background-color: #aaa;\n    left: 18.75%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-2-3'></div>"
    },
    "right": {
      "output": "\n@mixin col-2-3-right {\n  right: var( --col-2-3 , 18.75% );\n}",
      "example": "\n<style>\n  #col-2-3 {\n    background-color: #aaa;\n    right: 18.75%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-2-3'></div>"
    }
  },
  "layouts-col-2-4": {
    "width": {
      "output": "\n@mixin col-2-4-width {\n  width: var( --col-2-4 , 19.4444% );\n}",
      "example": "\n<style>\n  #col-2-4 {\n    background-color: #aaa;\n    width: 19.4444%;\n    height: 100px;\n  }\n</style>\n<div id='col-2-4'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-2-4-min-width {\n  min-width: var( --col-2-4 , 19.4444% );\n}",
      "example": "\n<style>\n  #col-2-4 {\n    background-color: #aaa;\n    min-width: 19.4444%;\n    height: 100px;\n  }\n</style>\n<div id='col-2-4'></div>"
    },
    "left": {
      "output": "\n@mixin col-2-4-left {\n  left: var( --col-2-4 , 19.4444% );\n}",
      "example": "\n<style>\n  #col-2-4 {\n    background-color: #aaa;\n    left: 19.4444%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-2-4'></div>"
    },
    "right": {
      "output": "\n@mixin col-2-4-right {\n  right: var( --col-2-4 , 19.4444% );\n}",
      "example": "\n<style>\n  #col-2-4 {\n    background-color: #aaa;\n    right: 19.4444%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-2-4'></div>"
    }
  },
  "layouts-col-2-6": {
    "width": {
      "output": "\n@mixin col-2-6-width {\n  width: var( --col-2-6 , 20.8333% );\n}",
      "example": "\n<style>\n  #col-2-6 {\n    background-color: #aaa;\n    width: 20.8333%;\n    height: 100px;\n  }\n</style>\n<div id='col-2-6'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-2-6-min-width {\n  min-width: var( --col-2-6 , 20.8333% );\n}",
      "example": "\n<style>\n  #col-2-6 {\n    background-color: #aaa;\n    min-width: 20.8333%;\n    height: 100px;\n  }\n</style>\n<div id='col-2-6'></div>"
    },
    "left": {
      "output": "\n@mixin col-2-6-left {\n  left: var( --col-2-6 , 20.8333% );\n}",
      "example": "\n<style>\n  #col-2-6 {\n    background-color: #aaa;\n    left: 20.8333%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-2-6'></div>"
    },
    "right": {
      "output": "\n@mixin col-2-6-right {\n  right: var( --col-2-6 , 20.8333% );\n}",
      "example": "\n<style>\n  #col-2-6 {\n    background-color: #aaa;\n    right: 20.8333%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-2-6'></div>"
    }
  },
  "layouts-col-2-8": {
    "width": {
      "output": "\n@mixin col-2-8-width {\n  width: var( --col-2-8 , 22.2222% );\n}",
      "example": "\n<style>\n  #col-2-8 {\n    background-color: #aaa;\n    width: 22.2222%;\n    height: 100px;\n  }\n</style>\n<div id='col-2-8'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-2-8-min-width {\n  min-width: var( --col-2-8 , 22.2222% );\n}",
      "example": "\n<style>\n  #col-2-8 {\n    background-color: #aaa;\n    min-width: 22.2222%;\n    height: 100px;\n  }\n</style>\n<div id='col-2-8'></div>"
    },
    "left": {
      "output": "\n@mixin col-2-8-left {\n  left: var( --col-2-8 , 22.2222% );\n}",
      "example": "\n<style>\n  #col-2-8 {\n    background-color: #aaa;\n    left: 22.2222%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-2-8'></div>"
    },
    "right": {
      "output": "\n@mixin col-2-8-right {\n  right: var( --col-2-8 , 22.2222% );\n}",
      "example": "\n<style>\n  #col-2-8 {\n    background-color: #aaa;\n    right: 22.2222%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-2-8'></div>"
    }
  },
  "layouts-col-2-9": {
    "width": {
      "output": "\n@mixin col-2-9-width {\n  width: var( --col-2-9 , 22.9167% );\n}",
      "example": "\n<style>\n  #col-2-9 {\n    background-color: #aaa;\n    width: 22.9167%;\n    height: 100px;\n  }\n</style>\n<div id='col-2-9'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-2-9-min-width {\n  min-width: var( --col-2-9 , 22.9167% );\n}",
      "example": "\n<style>\n  #col-2-9 {\n    background-color: #aaa;\n    min-width: 22.9167%;\n    height: 100px;\n  }\n</style>\n<div id='col-2-9'></div>"
    },
    "left": {
      "output": "\n@mixin col-2-9-left {\n  left: var( --col-2-9 , 22.9167% );\n}",
      "example": "\n<style>\n  #col-2-9 {\n    background-color: #aaa;\n    left: 22.9167%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-2-9'></div>"
    },
    "right": {
      "output": "\n@mixin col-2-9-right {\n  right: var( --col-2-9 , 22.9167% );\n}",
      "example": "\n<style>\n  #col-2-9 {\n    background-color: #aaa;\n    right: 22.9167%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-2-9'></div>"
    }
  },
  "layouts-col-3": {
    "width": {
      "output": "\n@mixin col-3-width {\n  width: var( --col-3 , 25% );\n}",
      "example": "\n<style>\n  #col-3 {\n    background-color: #aaa;\n    width: 25%;\n    height: 100px;\n  }\n</style>\n<div id='col-3'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-3-min-width {\n  min-width: var( --col-3 , 25% );\n}",
      "example": "\n<style>\n  #col-3 {\n    background-color: #aaa;\n    min-width: 25%;\n    height: 100px;\n  }\n</style>\n<div id='col-3'></div>"
    },
    "left": {
      "output": "\n@mixin col-3-left {\n  left: var( --col-3 , 25% );\n}",
      "example": "\n<style>\n  #col-3 {\n    background-color: #aaa;\n    left: 25%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-3'></div>"
    },
    "right": {
      "output": "\n@mixin col-3-right {\n  right: var( --col-3 , 25% );\n}",
      "example": "\n<style>\n  #col-3 {\n    background-color: #aaa;\n    right: 25%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-3'></div>"
    }
  },
  "layouts-col-3-3": {
    "width": {
      "output": "\n@mixin col-3-3-width {\n  width: var( --col-3-3 , 27.0833% );\n}",
      "example": "\n<style>\n  #col-3-3 {\n    background-color: #aaa;\n    width: 27.0833%;\n    height: 100px;\n  }\n</style>\n<div id='col-3-3'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-3-3-min-width {\n  min-width: var( --col-3-3 , 27.0833% );\n}",
      "example": "\n<style>\n  #col-3-3 {\n    background-color: #aaa;\n    min-width: 27.0833%;\n    height: 100px;\n  }\n</style>\n<div id='col-3-3'></div>"
    },
    "left": {
      "output": "\n@mixin col-3-3-left {\n  left: var( --col-3-3 , 27.0833% );\n}",
      "example": "\n<style>\n  #col-3-3 {\n    background-color: #aaa;\n    left: 27.0833%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-3-3'></div>"
    },
    "right": {
      "output": "\n@mixin col-3-3-right {\n  right: var( --col-3-3 , 27.0833% );\n}",
      "example": "\n<style>\n  #col-3-3 {\n    background-color: #aaa;\n    right: 27.0833%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-3-3'></div>"
    }
  },
  "layouts-col-3-4": {
    "width": {
      "output": "\n@mixin col-3-4-width {\n  width: var( --col-3-4 , 27.7778% );\n}",
      "example": "\n<style>\n  #col-3-4 {\n    background-color: #aaa;\n    width: 27.7778%;\n    height: 100px;\n  }\n</style>\n<div id='col-3-4'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-3-4-min-width {\n  min-width: var( --col-3-4 , 27.7778% );\n}",
      "example": "\n<style>\n  #col-3-4 {\n    background-color: #aaa;\n    min-width: 27.7778%;\n    height: 100px;\n  }\n</style>\n<div id='col-3-4'></div>"
    },
    "left": {
      "output": "\n@mixin col-3-4-left {\n  left: var( --col-3-4 , 27.7778% );\n}",
      "example": "\n<style>\n  #col-3-4 {\n    background-color: #aaa;\n    left: 27.7778%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-3-4'></div>"
    },
    "right": {
      "output": "\n@mixin col-3-4-right {\n  right: var( --col-3-4 , 27.7778% );\n}",
      "example": "\n<style>\n  #col-3-4 {\n    background-color: #aaa;\n    right: 27.7778%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-3-4'></div>"
    }
  },
  "layouts-col-3-6": {
    "width": {
      "output": "\n@mixin col-3-6-width {\n  width: var( --col-3-6 , 29.1667% );\n}",
      "example": "\n<style>\n  #col-3-6 {\n    background-color: #aaa;\n    width: 29.1667%;\n    height: 100px;\n  }\n</style>\n<div id='col-3-6'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-3-6-min-width {\n  min-width: var( --col-3-6 , 29.1667% );\n}",
      "example": "\n<style>\n  #col-3-6 {\n    background-color: #aaa;\n    min-width: 29.1667%;\n    height: 100px;\n  }\n</style>\n<div id='col-3-6'></div>"
    },
    "left": {
      "output": "\n@mixin col-3-6-left {\n  left: var( --col-3-6 , 29.1667% );\n}",
      "example": "\n<style>\n  #col-3-6 {\n    background-color: #aaa;\n    left: 29.1667%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-3-6'></div>"
    },
    "right": {
      "output": "\n@mixin col-3-6-right {\n  right: var( --col-3-6 , 29.1667% );\n}",
      "example": "\n<style>\n  #col-3-6 {\n    background-color: #aaa;\n    right: 29.1667%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-3-6'></div>"
    }
  },
  "layouts-col-3-8": {
    "width": {
      "output": "\n@mixin col-3-8-width {\n  width: var( --col-3-8 , 30.5556% );\n}",
      "example": "\n<style>\n  #col-3-8 {\n    background-color: #aaa;\n    width: 30.5556%;\n    height: 100px;\n  }\n</style>\n<div id='col-3-8'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-3-8-min-width {\n  min-width: var( --col-3-8 , 30.5556% );\n}",
      "example": "\n<style>\n  #col-3-8 {\n    background-color: #aaa;\n    min-width: 30.5556%;\n    height: 100px;\n  }\n</style>\n<div id='col-3-8'></div>"
    },
    "left": {
      "output": "\n@mixin col-3-8-left {\n  left: var( --col-3-8 , 30.5556% );\n}",
      "example": "\n<style>\n  #col-3-8 {\n    background-color: #aaa;\n    left: 30.5556%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-3-8'></div>"
    },
    "right": {
      "output": "\n@mixin col-3-8-right {\n  right: var( --col-3-8 , 30.5556% );\n}",
      "example": "\n<style>\n  #col-3-8 {\n    background-color: #aaa;\n    right: 30.5556%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-3-8'></div>"
    }
  },
  "layouts-col-3-9": {
    "width": {
      "output": "\n@mixin col-3-9-width {\n  width: var( --col-3-9 , 31.25% );\n}",
      "example": "\n<style>\n  #col-3-9 {\n    background-color: #aaa;\n    width: 31.25%;\n    height: 100px;\n  }\n</style>\n<div id='col-3-9'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-3-9-min-width {\n  min-width: var( --col-3-9 , 31.25% );\n}",
      "example": "\n<style>\n  #col-3-9 {\n    background-color: #aaa;\n    min-width: 31.25%;\n    height: 100px;\n  }\n</style>\n<div id='col-3-9'></div>"
    },
    "left": {
      "output": "\n@mixin col-3-9-left {\n  left: var( --col-3-9 , 31.25% );\n}",
      "example": "\n<style>\n  #col-3-9 {\n    background-color: #aaa;\n    left: 31.25%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-3-9'></div>"
    },
    "right": {
      "output": "\n@mixin col-3-9-right {\n  right: var( --col-3-9 , 31.25% );\n}",
      "example": "\n<style>\n  #col-3-9 {\n    background-color: #aaa;\n    right: 31.25%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-3-9'></div>"
    }
  },
  "layouts-col-4": {
    "width": {
      "output": "\n@mixin col-4-width {\n  width: var( --col-4 , 33.3333% );\n}",
      "example": "\n<style>\n  #col-4 {\n    background-color: #aaa;\n    width: 33.3333%;\n    height: 100px;\n  }\n</style>\n<div id='col-4'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-4-min-width {\n  min-width: var( --col-4 , 33.3333% );\n}",
      "example": "\n<style>\n  #col-4 {\n    background-color: #aaa;\n    min-width: 33.3333%;\n    height: 100px;\n  }\n</style>\n<div id='col-4'></div>"
    },
    "left": {
      "output": "\n@mixin col-4-left {\n  left: var( --col-4 , 33.3333% );\n}",
      "example": "\n<style>\n  #col-4 {\n    background-color: #aaa;\n    left: 33.3333%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-4'></div>"
    },
    "right": {
      "output": "\n@mixin col-4-right {\n  right: var( --col-4 , 33.3333% );\n}",
      "example": "\n<style>\n  #col-4 {\n    background-color: #aaa;\n    right: 33.3333%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-4'></div>"
    }
  },
  "layouts-col-4-3": {
    "width": {
      "output": "\n@mixin col-4-3-width {\n  width: var( --col-4-3 , 35.4167% );\n}",
      "example": "\n<style>\n  #col-4-3 {\n    background-color: #aaa;\n    width: 35.4167%;\n    height: 100px;\n  }\n</style>\n<div id='col-4-3'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-4-3-min-width {\n  min-width: var( --col-4-3 , 35.4167% );\n}",
      "example": "\n<style>\n  #col-4-3 {\n    background-color: #aaa;\n    min-width: 35.4167%;\n    height: 100px;\n  }\n</style>\n<div id='col-4-3'></div>"
    },
    "left": {
      "output": "\n@mixin col-4-3-left {\n  left: var( --col-4-3 , 35.4167% );\n}",
      "example": "\n<style>\n  #col-4-3 {\n    background-color: #aaa;\n    left: 35.4167%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-4-3'></div>"
    },
    "right": {
      "output": "\n@mixin col-4-3-right {\n  right: var( --col-4-3 , 35.4167% );\n}",
      "example": "\n<style>\n  #col-4-3 {\n    background-color: #aaa;\n    right: 35.4167%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-4-3'></div>"
    }
  },
  "layouts-col-4-4": {
    "width": {
      "output": "\n@mixin col-4-4-width {\n  width: var( --col-4-4 , 36.1111% );\n}",
      "example": "\n<style>\n  #col-4-4 {\n    background-color: #aaa;\n    width: 36.1111%;\n    height: 100px;\n  }\n</style>\n<div id='col-4-4'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-4-4-min-width {\n  min-width: var( --col-4-4 , 36.1111% );\n}",
      "example": "\n<style>\n  #col-4-4 {\n    background-color: #aaa;\n    min-width: 36.1111%;\n    height: 100px;\n  }\n</style>\n<div id='col-4-4'></div>"
    },
    "left": {
      "output": "\n@mixin col-4-4-left {\n  left: var( --col-4-4 , 36.1111% );\n}",
      "example": "\n<style>\n  #col-4-4 {\n    background-color: #aaa;\n    left: 36.1111%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-4-4'></div>"
    },
    "right": {
      "output": "\n@mixin col-4-4-right {\n  right: var( --col-4-4 , 36.1111% );\n}",
      "example": "\n<style>\n  #col-4-4 {\n    background-color: #aaa;\n    right: 36.1111%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-4-4'></div>"
    }
  },
  "layouts-col-4-6": {
    "width": {
      "output": "\n@mixin col-4-6-width {\n  width: var( --col-4-6 , 37.5% );\n}",
      "example": "\n<style>\n  #col-4-6 {\n    background-color: #aaa;\n    width: 37.5%;\n    height: 100px;\n  }\n</style>\n<div id='col-4-6'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-4-6-min-width {\n  min-width: var( --col-4-6 , 37.5% );\n}",
      "example": "\n<style>\n  #col-4-6 {\n    background-color: #aaa;\n    min-width: 37.5%;\n    height: 100px;\n  }\n</style>\n<div id='col-4-6'></div>"
    },
    "left": {
      "output": "\n@mixin col-4-6-left {\n  left: var( --col-4-6 , 37.5% );\n}",
      "example": "\n<style>\n  #col-4-6 {\n    background-color: #aaa;\n    left: 37.5%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-4-6'></div>"
    },
    "right": {
      "output": "\n@mixin col-4-6-right {\n  right: var( --col-4-6 , 37.5% );\n}",
      "example": "\n<style>\n  #col-4-6 {\n    background-color: #aaa;\n    right: 37.5%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-4-6'></div>"
    }
  },
  "layouts-col-4-8": {
    "width": {
      "output": "\n@mixin col-4-8-width {\n  width: var( --col-4-8 , 38.8889% );\n}",
      "example": "\n<style>\n  #col-4-8 {\n    background-color: #aaa;\n    width: 38.8889%;\n    height: 100px;\n  }\n</style>\n<div id='col-4-8'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-4-8-min-width {\n  min-width: var( --col-4-8 , 38.8889% );\n}",
      "example": "\n<style>\n  #col-4-8 {\n    background-color: #aaa;\n    min-width: 38.8889%;\n    height: 100px;\n  }\n</style>\n<div id='col-4-8'></div>"
    },
    "left": {
      "output": "\n@mixin col-4-8-left {\n  left: var( --col-4-8 , 38.8889% );\n}",
      "example": "\n<style>\n  #col-4-8 {\n    background-color: #aaa;\n    left: 38.8889%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-4-8'></div>"
    },
    "right": {
      "output": "\n@mixin col-4-8-right {\n  right: var( --col-4-8 , 38.8889% );\n}",
      "example": "\n<style>\n  #col-4-8 {\n    background-color: #aaa;\n    right: 38.8889%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-4-8'></div>"
    }
  },
  "layouts-col-4-9": {
    "width": {
      "output": "\n@mixin col-4-9-width {\n  width: var( --col-4-9 , 39.5833% );\n}",
      "example": "\n<style>\n  #col-4-9 {\n    background-color: #aaa;\n    width: 39.5833%;\n    height: 100px;\n  }\n</style>\n<div id='col-4-9'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-4-9-min-width {\n  min-width: var( --col-4-9 , 39.5833% );\n}",
      "example": "\n<style>\n  #col-4-9 {\n    background-color: #aaa;\n    min-width: 39.5833%;\n    height: 100px;\n  }\n</style>\n<div id='col-4-9'></div>"
    },
    "left": {
      "output": "\n@mixin col-4-9-left {\n  left: var( --col-4-9 , 39.5833% );\n}",
      "example": "\n<style>\n  #col-4-9 {\n    background-color: #aaa;\n    left: 39.5833%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-4-9'></div>"
    },
    "right": {
      "output": "\n@mixin col-4-9-right {\n  right: var( --col-4-9 , 39.5833% );\n}",
      "example": "\n<style>\n  #col-4-9 {\n    background-color: #aaa;\n    right: 39.5833%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-4-9'></div>"
    }
  },
  "layouts-col-5": {
    "width": {
      "output": "\n@mixin col-5-width {\n  width: var( --col-5 , 41.6667% );\n}",
      "example": "\n<style>\n  #col-5 {\n    background-color: #aaa;\n    width: 41.6667%;\n    height: 100px;\n  }\n</style>\n<div id='col-5'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-5-min-width {\n  min-width: var( --col-5 , 41.6667% );\n}",
      "example": "\n<style>\n  #col-5 {\n    background-color: #aaa;\n    min-width: 41.6667%;\n    height: 100px;\n  }\n</style>\n<div id='col-5'></div>"
    },
    "left": {
      "output": "\n@mixin col-5-left {\n  left: var( --col-5 , 41.6667% );\n}",
      "example": "\n<style>\n  #col-5 {\n    background-color: #aaa;\n    left: 41.6667%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-5'></div>"
    },
    "right": {
      "output": "\n@mixin col-5-right {\n  right: var( --col-5 , 41.6667% );\n}",
      "example": "\n<style>\n  #col-5 {\n    background-color: #aaa;\n    right: 41.6667%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-5'></div>"
    }
  },
  "layouts-col-5-3": {
    "width": {
      "output": "\n@mixin col-5-3-width {\n  width: var( --col-5-3 , 43.75% );\n}",
      "example": "\n<style>\n  #col-5-3 {\n    background-color: #aaa;\n    width: 43.75%;\n    height: 100px;\n  }\n</style>\n<div id='col-5-3'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-5-3-min-width {\n  min-width: var( --col-5-3 , 43.75% );\n}",
      "example": "\n<style>\n  #col-5-3 {\n    background-color: #aaa;\n    min-width: 43.75%;\n    height: 100px;\n  }\n</style>\n<div id='col-5-3'></div>"
    },
    "left": {
      "output": "\n@mixin col-5-3-left {\n  left: var( --col-5-3 , 43.75% );\n}",
      "example": "\n<style>\n  #col-5-3 {\n    background-color: #aaa;\n    left: 43.75%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-5-3'></div>"
    },
    "right": {
      "output": "\n@mixin col-5-3-right {\n  right: var( --col-5-3 , 43.75% );\n}",
      "example": "\n<style>\n  #col-5-3 {\n    background-color: #aaa;\n    right: 43.75%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-5-3'></div>"
    }
  },
  "layouts-col-5-4": {
    "width": {
      "output": "\n@mixin col-5-4-width {\n  width: var( --col-5-4 , 44.4444% );\n}",
      "example": "\n<style>\n  #col-5-4 {\n    background-color: #aaa;\n    width: 44.4444%;\n    height: 100px;\n  }\n</style>\n<div id='col-5-4'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-5-4-min-width {\n  min-width: var( --col-5-4 , 44.4444% );\n}",
      "example": "\n<style>\n  #col-5-4 {\n    background-color: #aaa;\n    min-width: 44.4444%;\n    height: 100px;\n  }\n</style>\n<div id='col-5-4'></div>"
    },
    "left": {
      "output": "\n@mixin col-5-4-left {\n  left: var( --col-5-4 , 44.4444% );\n}",
      "example": "\n<style>\n  #col-5-4 {\n    background-color: #aaa;\n    left: 44.4444%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-5-4'></div>"
    },
    "right": {
      "output": "\n@mixin col-5-4-right {\n  right: var( --col-5-4 , 44.4444% );\n}",
      "example": "\n<style>\n  #col-5-4 {\n    background-color: #aaa;\n    right: 44.4444%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-5-4'></div>"
    }
  },
  "layouts-col-5-6": {
    "width": {
      "output": "\n@mixin col-5-6-width {\n  width: var( --col-5-6 , 45.8333% );\n}",
      "example": "\n<style>\n  #col-5-6 {\n    background-color: #aaa;\n    width: 45.8333%;\n    height: 100px;\n  }\n</style>\n<div id='col-5-6'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-5-6-min-width {\n  min-width: var( --col-5-6 , 45.8333% );\n}",
      "example": "\n<style>\n  #col-5-6 {\n    background-color: #aaa;\n    min-width: 45.8333%;\n    height: 100px;\n  }\n</style>\n<div id='col-5-6'></div>"
    },
    "left": {
      "output": "\n@mixin col-5-6-left {\n  left: var( --col-5-6 , 45.8333% );\n}",
      "example": "\n<style>\n  #col-5-6 {\n    background-color: #aaa;\n    left: 45.8333%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-5-6'></div>"
    },
    "right": {
      "output": "\n@mixin col-5-6-right {\n  right: var( --col-5-6 , 45.8333% );\n}",
      "example": "\n<style>\n  #col-5-6 {\n    background-color: #aaa;\n    right: 45.8333%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-5-6'></div>"
    }
  },
  "layouts-col-5-8": {
    "width": {
      "output": "\n@mixin col-5-8-width {\n  width: var( --col-5-8 , 47.2222% );\n}",
      "example": "\n<style>\n  #col-5-8 {\n    background-color: #aaa;\n    width: 47.2222%;\n    height: 100px;\n  }\n</style>\n<div id='col-5-8'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-5-8-min-width {\n  min-width: var( --col-5-8 , 47.2222% );\n}",
      "example": "\n<style>\n  #col-5-8 {\n    background-color: #aaa;\n    min-width: 47.2222%;\n    height: 100px;\n  }\n</style>\n<div id='col-5-8'></div>"
    },
    "left": {
      "output": "\n@mixin col-5-8-left {\n  left: var( --col-5-8 , 47.2222% );\n}",
      "example": "\n<style>\n  #col-5-8 {\n    background-color: #aaa;\n    left: 47.2222%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-5-8'></div>"
    },
    "right": {
      "output": "\n@mixin col-5-8-right {\n  right: var( --col-5-8 , 47.2222% );\n}",
      "example": "\n<style>\n  #col-5-8 {\n    background-color: #aaa;\n    right: 47.2222%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-5-8'></div>"
    }
  },
  "layouts-col-5-9": {
    "width": {
      "output": "\n@mixin col-5-9-width {\n  width: var( --col-5-9 , 47.9167% );\n}",
      "example": "\n<style>\n  #col-5-9 {\n    background-color: #aaa;\n    width: 47.9167%;\n    height: 100px;\n  }\n</style>\n<div id='col-5-9'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-5-9-min-width {\n  min-width: var( --col-5-9 , 47.9167% );\n}",
      "example": "\n<style>\n  #col-5-9 {\n    background-color: #aaa;\n    min-width: 47.9167%;\n    height: 100px;\n  }\n</style>\n<div id='col-5-9'></div>"
    },
    "left": {
      "output": "\n@mixin col-5-9-left {\n  left: var( --col-5-9 , 47.9167% );\n}",
      "example": "\n<style>\n  #col-5-9 {\n    background-color: #aaa;\n    left: 47.9167%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-5-9'></div>"
    },
    "right": {
      "output": "\n@mixin col-5-9-right {\n  right: var( --col-5-9 , 47.9167% );\n}",
      "example": "\n<style>\n  #col-5-9 {\n    background-color: #aaa;\n    right: 47.9167%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-5-9'></div>"
    }
  },
  "layouts-col-6": {
    "width": {
      "output": "\n@mixin col-6-width {\n  width: var( --col-6 , 50% );\n}",
      "example": "\n<style>\n  #col-6 {\n    background-color: #aaa;\n    width: 50%;\n    height: 100px;\n  }\n</style>\n<div id='col-6'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-6-min-width {\n  min-width: var( --col-6 , 50% );\n}",
      "example": "\n<style>\n  #col-6 {\n    background-color: #aaa;\n    min-width: 50%;\n    height: 100px;\n  }\n</style>\n<div id='col-6'></div>"
    },
    "left": {
      "output": "\n@mixin col-6-left {\n  left: var( --col-6 , 50% );\n}",
      "example": "\n<style>\n  #col-6 {\n    background-color: #aaa;\n    left: 50%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-6'></div>"
    },
    "right": {
      "output": "\n@mixin col-6-right {\n  right: var( --col-6 , 50% );\n}",
      "example": "\n<style>\n  #col-6 {\n    background-color: #aaa;\n    right: 50%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-6'></div>"
    }
  },
  "layouts-col-6-3": {
    "width": {
      "output": "\n@mixin col-6-3-width {\n  width: var( --col-6-3 , 52.0833% );\n}",
      "example": "\n<style>\n  #col-6-3 {\n    background-color: #aaa;\n    width: 52.0833%;\n    height: 100px;\n  }\n</style>\n<div id='col-6-3'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-6-3-min-width {\n  min-width: var( --col-6-3 , 52.0833% );\n}",
      "example": "\n<style>\n  #col-6-3 {\n    background-color: #aaa;\n    min-width: 52.0833%;\n    height: 100px;\n  }\n</style>\n<div id='col-6-3'></div>"
    },
    "left": {
      "output": "\n@mixin col-6-3-left {\n  left: var( --col-6-3 , 52.0833% );\n}",
      "example": "\n<style>\n  #col-6-3 {\n    background-color: #aaa;\n    left: 52.0833%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-6-3'></div>"
    },
    "right": {
      "output": "\n@mixin col-6-3-right {\n  right: var( --col-6-3 , 52.0833% );\n}",
      "example": "\n<style>\n  #col-6-3 {\n    background-color: #aaa;\n    right: 52.0833%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-6-3'></div>"
    }
  },
  "layouts-col-6-4": {
    "width": {
      "output": "\n@mixin col-6-4-width {\n  width: var( --col-6-4 , 52.7778% );\n}",
      "example": "\n<style>\n  #col-6-4 {\n    background-color: #aaa;\n    width: 52.7778%;\n    height: 100px;\n  }\n</style>\n<div id='col-6-4'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-6-4-min-width {\n  min-width: var( --col-6-4 , 52.7778% );\n}",
      "example": "\n<style>\n  #col-6-4 {\n    background-color: #aaa;\n    min-width: 52.7778%;\n    height: 100px;\n  }\n</style>\n<div id='col-6-4'></div>"
    },
    "left": {
      "output": "\n@mixin col-6-4-left {\n  left: var( --col-6-4 , 52.7778% );\n}",
      "example": "\n<style>\n  #col-6-4 {\n    background-color: #aaa;\n    left: 52.7778%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-6-4'></div>"
    },
    "right": {
      "output": "\n@mixin col-6-4-right {\n  right: var( --col-6-4 , 52.7778% );\n}",
      "example": "\n<style>\n  #col-6-4 {\n    background-color: #aaa;\n    right: 52.7778%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-6-4'></div>"
    }
  },
  "layouts-col-6-6": {
    "width": {
      "output": "\n@mixin col-6-6-width {\n  width: var( --col-6-6 , 54.1667% );\n}",
      "example": "\n<style>\n  #col-6-6 {\n    background-color: #aaa;\n    width: 54.1667%;\n    height: 100px;\n  }\n</style>\n<div id='col-6-6'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-6-6-min-width {\n  min-width: var( --col-6-6 , 54.1667% );\n}",
      "example": "\n<style>\n  #col-6-6 {\n    background-color: #aaa;\n    min-width: 54.1667%;\n    height: 100px;\n  }\n</style>\n<div id='col-6-6'></div>"
    },
    "left": {
      "output": "\n@mixin col-6-6-left {\n  left: var( --col-6-6 , 54.1667% );\n}",
      "example": "\n<style>\n  #col-6-6 {\n    background-color: #aaa;\n    left: 54.1667%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-6-6'></div>"
    },
    "right": {
      "output": "\n@mixin col-6-6-right {\n  right: var( --col-6-6 , 54.1667% );\n}",
      "example": "\n<style>\n  #col-6-6 {\n    background-color: #aaa;\n    right: 54.1667%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-6-6'></div>"
    }
  },
  "layouts-col-6-8": {
    "width": {
      "output": "\n@mixin col-6-8-width {\n  width: var( --col-6-8 , 55.5556% );\n}",
      "example": "\n<style>\n  #col-6-8 {\n    background-color: #aaa;\n    width: 55.5556%;\n    height: 100px;\n  }\n</style>\n<div id='col-6-8'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-6-8-min-width {\n  min-width: var( --col-6-8 , 55.5556% );\n}",
      "example": "\n<style>\n  #col-6-8 {\n    background-color: #aaa;\n    min-width: 55.5556%;\n    height: 100px;\n  }\n</style>\n<div id='col-6-8'></div>"
    },
    "left": {
      "output": "\n@mixin col-6-8-left {\n  left: var( --col-6-8 , 55.5556% );\n}",
      "example": "\n<style>\n  #col-6-8 {\n    background-color: #aaa;\n    left: 55.5556%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-6-8'></div>"
    },
    "right": {
      "output": "\n@mixin col-6-8-right {\n  right: var( --col-6-8 , 55.5556% );\n}",
      "example": "\n<style>\n  #col-6-8 {\n    background-color: #aaa;\n    right: 55.5556%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-6-8'></div>"
    }
  },
  "layouts-col-6-9": {
    "width": {
      "output": "\n@mixin col-6-9-width {\n  width: var( --col-6-9 , 56.25% );\n}",
      "example": "\n<style>\n  #col-6-9 {\n    background-color: #aaa;\n    width: 56.25%;\n    height: 100px;\n  }\n</style>\n<div id='col-6-9'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-6-9-min-width {\n  min-width: var( --col-6-9 , 56.25% );\n}",
      "example": "\n<style>\n  #col-6-9 {\n    background-color: #aaa;\n    min-width: 56.25%;\n    height: 100px;\n  }\n</style>\n<div id='col-6-9'></div>"
    },
    "left": {
      "output": "\n@mixin col-6-9-left {\n  left: var( --col-6-9 , 56.25% );\n}",
      "example": "\n<style>\n  #col-6-9 {\n    background-color: #aaa;\n    left: 56.25%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-6-9'></div>"
    },
    "right": {
      "output": "\n@mixin col-6-9-right {\n  right: var( --col-6-9 , 56.25% );\n}",
      "example": "\n<style>\n  #col-6-9 {\n    background-color: #aaa;\n    right: 56.25%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-6-9'></div>"
    }
  },
  "layouts-col-7": {
    "width": {
      "output": "\n@mixin col-7-width {\n  width: var( --col-7 , 58.3333% );\n}",
      "example": "\n<style>\n  #col-7 {\n    background-color: #aaa;\n    width: 58.3333%;\n    height: 100px;\n  }\n</style>\n<div id='col-7'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-7-min-width {\n  min-width: var( --col-7 , 58.3333% );\n}",
      "example": "\n<style>\n  #col-7 {\n    background-color: #aaa;\n    min-width: 58.3333%;\n    height: 100px;\n  }\n</style>\n<div id='col-7'></div>"
    },
    "left": {
      "output": "\n@mixin col-7-left {\n  left: var( --col-7 , 58.3333% );\n}",
      "example": "\n<style>\n  #col-7 {\n    background-color: #aaa;\n    left: 58.3333%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-7'></div>"
    },
    "right": {
      "output": "\n@mixin col-7-right {\n  right: var( --col-7 , 58.3333% );\n}",
      "example": "\n<style>\n  #col-7 {\n    background-color: #aaa;\n    right: 58.3333%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-7'></div>"
    }
  },
  "layouts-col-7-3": {
    "width": {
      "output": "\n@mixin col-7-3-width {\n  width: var( --col-7-3 , 60.4167% );\n}",
      "example": "\n<style>\n  #col-7-3 {\n    background-color: #aaa;\n    width: 60.4167%;\n    height: 100px;\n  }\n</style>\n<div id='col-7-3'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-7-3-min-width {\n  min-width: var( --col-7-3 , 60.4167% );\n}",
      "example": "\n<style>\n  #col-7-3 {\n    background-color: #aaa;\n    min-width: 60.4167%;\n    height: 100px;\n  }\n</style>\n<div id='col-7-3'></div>"
    },
    "left": {
      "output": "\n@mixin col-7-3-left {\n  left: var( --col-7-3 , 60.4167% );\n}",
      "example": "\n<style>\n  #col-7-3 {\n    background-color: #aaa;\n    left: 60.4167%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-7-3'></div>"
    },
    "right": {
      "output": "\n@mixin col-7-3-right {\n  right: var( --col-7-3 , 60.4167% );\n}",
      "example": "\n<style>\n  #col-7-3 {\n    background-color: #aaa;\n    right: 60.4167%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-7-3'></div>"
    }
  },
  "layouts-col-7-4": {
    "width": {
      "output": "\n@mixin col-7-4-width {\n  width: var( --col-7-4 , 61.1111% );\n}",
      "example": "\n<style>\n  #col-7-4 {\n    background-color: #aaa;\n    width: 61.1111%;\n    height: 100px;\n  }\n</style>\n<div id='col-7-4'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-7-4-min-width {\n  min-width: var( --col-7-4 , 61.1111% );\n}",
      "example": "\n<style>\n  #col-7-4 {\n    background-color: #aaa;\n    min-width: 61.1111%;\n    height: 100px;\n  }\n</style>\n<div id='col-7-4'></div>"
    },
    "left": {
      "output": "\n@mixin col-7-4-left {\n  left: var( --col-7-4 , 61.1111% );\n}",
      "example": "\n<style>\n  #col-7-4 {\n    background-color: #aaa;\n    left: 61.1111%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-7-4'></div>"
    },
    "right": {
      "output": "\n@mixin col-7-4-right {\n  right: var( --col-7-4 , 61.1111% );\n}",
      "example": "\n<style>\n  #col-7-4 {\n    background-color: #aaa;\n    right: 61.1111%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-7-4'></div>"
    }
  },
  "layouts-col-7-6": {
    "width": {
      "output": "\n@mixin col-7-6-width {\n  width: var( --col-7-6 , 62.5% );\n}",
      "example": "\n<style>\n  #col-7-6 {\n    background-color: #aaa;\n    width: 62.5%;\n    height: 100px;\n  }\n</style>\n<div id='col-7-6'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-7-6-min-width {\n  min-width: var( --col-7-6 , 62.5% );\n}",
      "example": "\n<style>\n  #col-7-6 {\n    background-color: #aaa;\n    min-width: 62.5%;\n    height: 100px;\n  }\n</style>\n<div id='col-7-6'></div>"
    },
    "left": {
      "output": "\n@mixin col-7-6-left {\n  left: var( --col-7-6 , 62.5% );\n}",
      "example": "\n<style>\n  #col-7-6 {\n    background-color: #aaa;\n    left: 62.5%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-7-6'></div>"
    },
    "right": {
      "output": "\n@mixin col-7-6-right {\n  right: var( --col-7-6 , 62.5% );\n}",
      "example": "\n<style>\n  #col-7-6 {\n    background-color: #aaa;\n    right: 62.5%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-7-6'></div>"
    }
  },
  "layouts-col-7-8": {
    "width": {
      "output": "\n@mixin col-7-8-width {\n  width: var( --col-7-8 , 63.8889% );\n}",
      "example": "\n<style>\n  #col-7-8 {\n    background-color: #aaa;\n    width: 63.8889%;\n    height: 100px;\n  }\n</style>\n<div id='col-7-8'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-7-8-min-width {\n  min-width: var( --col-7-8 , 63.8889% );\n}",
      "example": "\n<style>\n  #col-7-8 {\n    background-color: #aaa;\n    min-width: 63.8889%;\n    height: 100px;\n  }\n</style>\n<div id='col-7-8'></div>"
    },
    "left": {
      "output": "\n@mixin col-7-8-left {\n  left: var( --col-7-8 , 63.8889% );\n}",
      "example": "\n<style>\n  #col-7-8 {\n    background-color: #aaa;\n    left: 63.8889%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-7-8'></div>"
    },
    "right": {
      "output": "\n@mixin col-7-8-right {\n  right: var( --col-7-8 , 63.8889% );\n}",
      "example": "\n<style>\n  #col-7-8 {\n    background-color: #aaa;\n    right: 63.8889%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-7-8'></div>"
    }
  },
  "layouts-col-7-9": {
    "width": {
      "output": "\n@mixin col-7-9-width {\n  width: var( --col-7-9 , 64.5833% );\n}",
      "example": "\n<style>\n  #col-7-9 {\n    background-color: #aaa;\n    width: 64.5833%;\n    height: 100px;\n  }\n</style>\n<div id='col-7-9'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-7-9-min-width {\n  min-width: var( --col-7-9 , 64.5833% );\n}",
      "example": "\n<style>\n  #col-7-9 {\n    background-color: #aaa;\n    min-width: 64.5833%;\n    height: 100px;\n  }\n</style>\n<div id='col-7-9'></div>"
    },
    "left": {
      "output": "\n@mixin col-7-9-left {\n  left: var( --col-7-9 , 64.5833% );\n}",
      "example": "\n<style>\n  #col-7-9 {\n    background-color: #aaa;\n    left: 64.5833%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-7-9'></div>"
    },
    "right": {
      "output": "\n@mixin col-7-9-right {\n  right: var( --col-7-9 , 64.5833% );\n}",
      "example": "\n<style>\n  #col-7-9 {\n    background-color: #aaa;\n    right: 64.5833%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-7-9'></div>"
    }
  },
  "layouts-col-8": {
    "width": {
      "output": "\n@mixin col-8-width {\n  width: var( --col-8 , 66.6667% );\n}",
      "example": "\n<style>\n  #col-8 {\n    background-color: #aaa;\n    width: 66.6667%;\n    height: 100px;\n  }\n</style>\n<div id='col-8'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-8-min-width {\n  min-width: var( --col-8 , 66.6667% );\n}",
      "example": "\n<style>\n  #col-8 {\n    background-color: #aaa;\n    min-width: 66.6667%;\n    height: 100px;\n  }\n</style>\n<div id='col-8'></div>"
    },
    "left": {
      "output": "\n@mixin col-8-left {\n  left: var( --col-8 , 66.6667% );\n}",
      "example": "\n<style>\n  #col-8 {\n    background-color: #aaa;\n    left: 66.6667%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-8'></div>"
    },
    "right": {
      "output": "\n@mixin col-8-right {\n  right: var( --col-8 , 66.6667% );\n}",
      "example": "\n<style>\n  #col-8 {\n    background-color: #aaa;\n    right: 66.6667%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-8'></div>"
    }
  },
  "layouts-col-8-3": {
    "width": {
      "output": "\n@mixin col-8-3-width {\n  width: var( --col-8-3 , 68.75% );\n}",
      "example": "\n<style>\n  #col-8-3 {\n    background-color: #aaa;\n    width: 68.75%;\n    height: 100px;\n  }\n</style>\n<div id='col-8-3'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-8-3-min-width {\n  min-width: var( --col-8-3 , 68.75% );\n}",
      "example": "\n<style>\n  #col-8-3 {\n    background-color: #aaa;\n    min-width: 68.75%;\n    height: 100px;\n  }\n</style>\n<div id='col-8-3'></div>"
    },
    "left": {
      "output": "\n@mixin col-8-3-left {\n  left: var( --col-8-3 , 68.75% );\n}",
      "example": "\n<style>\n  #col-8-3 {\n    background-color: #aaa;\n    left: 68.75%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-8-3'></div>"
    },
    "right": {
      "output": "\n@mixin col-8-3-right {\n  right: var( --col-8-3 , 68.75% );\n}",
      "example": "\n<style>\n  #col-8-3 {\n    background-color: #aaa;\n    right: 68.75%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-8-3'></div>"
    }
  },
  "layouts-col-8-4": {
    "width": {
      "output": "\n@mixin col-8-4-width {\n  width: var( --col-8-4 , 69.4444% );\n}",
      "example": "\n<style>\n  #col-8-4 {\n    background-color: #aaa;\n    width: 69.4444%;\n    height: 100px;\n  }\n</style>\n<div id='col-8-4'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-8-4-min-width {\n  min-width: var( --col-8-4 , 69.4444% );\n}",
      "example": "\n<style>\n  #col-8-4 {\n    background-color: #aaa;\n    min-width: 69.4444%;\n    height: 100px;\n  }\n</style>\n<div id='col-8-4'></div>"
    },
    "left": {
      "output": "\n@mixin col-8-4-left {\n  left: var( --col-8-4 , 69.4444% );\n}",
      "example": "\n<style>\n  #col-8-4 {\n    background-color: #aaa;\n    left: 69.4444%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-8-4'></div>"
    },
    "right": {
      "output": "\n@mixin col-8-4-right {\n  right: var( --col-8-4 , 69.4444% );\n}",
      "example": "\n<style>\n  #col-8-4 {\n    background-color: #aaa;\n    right: 69.4444%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-8-4'></div>"
    }
  },
  "layouts-col-8-6": {
    "width": {
      "output": "\n@mixin col-8-6-width {\n  width: var( --col-8-6 , 70.8333% );\n}",
      "example": "\n<style>\n  #col-8-6 {\n    background-color: #aaa;\n    width: 70.8333%;\n    height: 100px;\n  }\n</style>\n<div id='col-8-6'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-8-6-min-width {\n  min-width: var( --col-8-6 , 70.8333% );\n}",
      "example": "\n<style>\n  #col-8-6 {\n    background-color: #aaa;\n    min-width: 70.8333%;\n    height: 100px;\n  }\n</style>\n<div id='col-8-6'></div>"
    },
    "left": {
      "output": "\n@mixin col-8-6-left {\n  left: var( --col-8-6 , 70.8333% );\n}",
      "example": "\n<style>\n  #col-8-6 {\n    background-color: #aaa;\n    left: 70.8333%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-8-6'></div>"
    },
    "right": {
      "output": "\n@mixin col-8-6-right {\n  right: var( --col-8-6 , 70.8333% );\n}",
      "example": "\n<style>\n  #col-8-6 {\n    background-color: #aaa;\n    right: 70.8333%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-8-6'></div>"
    }
  },
  "layouts-col-8-8": {
    "width": {
      "output": "\n@mixin col-8-8-width {\n  width: var( --col-8-8 , 72.2222% );\n}",
      "example": "\n<style>\n  #col-8-8 {\n    background-color: #aaa;\n    width: 72.2222%;\n    height: 100px;\n  }\n</style>\n<div id='col-8-8'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-8-8-min-width {\n  min-width: var( --col-8-8 , 72.2222% );\n}",
      "example": "\n<style>\n  #col-8-8 {\n    background-color: #aaa;\n    min-width: 72.2222%;\n    height: 100px;\n  }\n</style>\n<div id='col-8-8'></div>"
    },
    "left": {
      "output": "\n@mixin col-8-8-left {\n  left: var( --col-8-8 , 72.2222% );\n}",
      "example": "\n<style>\n  #col-8-8 {\n    background-color: #aaa;\n    left: 72.2222%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-8-8'></div>"
    },
    "right": {
      "output": "\n@mixin col-8-8-right {\n  right: var( --col-8-8 , 72.2222% );\n}",
      "example": "\n<style>\n  #col-8-8 {\n    background-color: #aaa;\n    right: 72.2222%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-8-8'></div>"
    }
  },
  "layouts-col-8-9": {
    "width": {
      "output": "\n@mixin col-8-9-width {\n  width: var( --col-8-9 , 72.9167% );\n}",
      "example": "\n<style>\n  #col-8-9 {\n    background-color: #aaa;\n    width: 72.9167%;\n    height: 100px;\n  }\n</style>\n<div id='col-8-9'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-8-9-min-width {\n  min-width: var( --col-8-9 , 72.9167% );\n}",
      "example": "\n<style>\n  #col-8-9 {\n    background-color: #aaa;\n    min-width: 72.9167%;\n    height: 100px;\n  }\n</style>\n<div id='col-8-9'></div>"
    },
    "left": {
      "output": "\n@mixin col-8-9-left {\n  left: var( --col-8-9 , 72.9167% );\n}",
      "example": "\n<style>\n  #col-8-9 {\n    background-color: #aaa;\n    left: 72.9167%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-8-9'></div>"
    },
    "right": {
      "output": "\n@mixin col-8-9-right {\n  right: var( --col-8-9 , 72.9167% );\n}",
      "example": "\n<style>\n  #col-8-9 {\n    background-color: #aaa;\n    right: 72.9167%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-8-9'></div>"
    }
  },
  "layouts-col-9": {
    "width": {
      "output": "\n@mixin col-9-width {\n  width: var( --col-9 , 75% );\n}",
      "example": "\n<style>\n  #col-9 {\n    background-color: #aaa;\n    width: 75%;\n    height: 100px;\n  }\n</style>\n<div id='col-9'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-9-min-width {\n  min-width: var( --col-9 , 75% );\n}",
      "example": "\n<style>\n  #col-9 {\n    background-color: #aaa;\n    min-width: 75%;\n    height: 100px;\n  }\n</style>\n<div id='col-9'></div>"
    },
    "left": {
      "output": "\n@mixin col-9-left {\n  left: var( --col-9 , 75% );\n}",
      "example": "\n<style>\n  #col-9 {\n    background-color: #aaa;\n    left: 75%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-9'></div>"
    },
    "right": {
      "output": "\n@mixin col-9-right {\n  right: var( --col-9 , 75% );\n}",
      "example": "\n<style>\n  #col-9 {\n    background-color: #aaa;\n    right: 75%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-9'></div>"
    }
  },
  "layouts-col-9-3": {
    "width": {
      "output": "\n@mixin col-9-3-width {\n  width: var( --col-9-3 , 77.0833% );\n}",
      "example": "\n<style>\n  #col-9-3 {\n    background-color: #aaa;\n    width: 77.0833%;\n    height: 100px;\n  }\n</style>\n<div id='col-9-3'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-9-3-min-width {\n  min-width: var( --col-9-3 , 77.0833% );\n}",
      "example": "\n<style>\n  #col-9-3 {\n    background-color: #aaa;\n    min-width: 77.0833%;\n    height: 100px;\n  }\n</style>\n<div id='col-9-3'></div>"
    },
    "left": {
      "output": "\n@mixin col-9-3-left {\n  left: var( --col-9-3 , 77.0833% );\n}",
      "example": "\n<style>\n  #col-9-3 {\n    background-color: #aaa;\n    left: 77.0833%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-9-3'></div>"
    },
    "right": {
      "output": "\n@mixin col-9-3-right {\n  right: var( --col-9-3 , 77.0833% );\n}",
      "example": "\n<style>\n  #col-9-3 {\n    background-color: #aaa;\n    right: 77.0833%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-9-3'></div>"
    }
  },
  "layouts-col-9-4": {
    "width": {
      "output": "\n@mixin col-9-4-width {\n  width: var( --col-9-4 , 77.7778% );\n}",
      "example": "\n<style>\n  #col-9-4 {\n    background-color: #aaa;\n    width: 77.7778%;\n    height: 100px;\n  }\n</style>\n<div id='col-9-4'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-9-4-min-width {\n  min-width: var( --col-9-4 , 77.7778% );\n}",
      "example": "\n<style>\n  #col-9-4 {\n    background-color: #aaa;\n    min-width: 77.7778%;\n    height: 100px;\n  }\n</style>\n<div id='col-9-4'></div>"
    },
    "left": {
      "output": "\n@mixin col-9-4-left {\n  left: var( --col-9-4 , 77.7778% );\n}",
      "example": "\n<style>\n  #col-9-4 {\n    background-color: #aaa;\n    left: 77.7778%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-9-4'></div>"
    },
    "right": {
      "output": "\n@mixin col-9-4-right {\n  right: var( --col-9-4 , 77.7778% );\n}",
      "example": "\n<style>\n  #col-9-4 {\n    background-color: #aaa;\n    right: 77.7778%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-9-4'></div>"
    }
  },
  "layouts-col-9-6": {
    "width": {
      "output": "\n@mixin col-9-6-width {\n  width: var( --col-9-6 , 79.1667% );\n}",
      "example": "\n<style>\n  #col-9-6 {\n    background-color: #aaa;\n    width: 79.1667%;\n    height: 100px;\n  }\n</style>\n<div id='col-9-6'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-9-6-min-width {\n  min-width: var( --col-9-6 , 79.1667% );\n}",
      "example": "\n<style>\n  #col-9-6 {\n    background-color: #aaa;\n    min-width: 79.1667%;\n    height: 100px;\n  }\n</style>\n<div id='col-9-6'></div>"
    },
    "left": {
      "output": "\n@mixin col-9-6-left {\n  left: var( --col-9-6 , 79.1667% );\n}",
      "example": "\n<style>\n  #col-9-6 {\n    background-color: #aaa;\n    left: 79.1667%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-9-6'></div>"
    },
    "right": {
      "output": "\n@mixin col-9-6-right {\n  right: var( --col-9-6 , 79.1667% );\n}",
      "example": "\n<style>\n  #col-9-6 {\n    background-color: #aaa;\n    right: 79.1667%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-9-6'></div>"
    }
  },
  "layouts-col-9-8": {
    "width": {
      "output": "\n@mixin col-9-8-width {\n  width: var( --col-9-8 , 80.5556% );\n}",
      "example": "\n<style>\n  #col-9-8 {\n    background-color: #aaa;\n    width: 80.5556%;\n    height: 100px;\n  }\n</style>\n<div id='col-9-8'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-9-8-min-width {\n  min-width: var( --col-9-8 , 80.5556% );\n}",
      "example": "\n<style>\n  #col-9-8 {\n    background-color: #aaa;\n    min-width: 80.5556%;\n    height: 100px;\n  }\n</style>\n<div id='col-9-8'></div>"
    },
    "left": {
      "output": "\n@mixin col-9-8-left {\n  left: var( --col-9-8 , 80.5556% );\n}",
      "example": "\n<style>\n  #col-9-8 {\n    background-color: #aaa;\n    left: 80.5556%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-9-8'></div>"
    },
    "right": {
      "output": "\n@mixin col-9-8-right {\n  right: var( --col-9-8 , 80.5556% );\n}",
      "example": "\n<style>\n  #col-9-8 {\n    background-color: #aaa;\n    right: 80.5556%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-9-8'></div>"
    }
  },
  "layouts-col-9-9": {
    "width": {
      "output": "\n@mixin col-9-9-width {\n  width: var( --col-9-9 , 81.25% );\n}",
      "example": "\n<style>\n  #col-9-9 {\n    background-color: #aaa;\n    width: 81.25%;\n    height: 100px;\n  }\n</style>\n<div id='col-9-9'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-9-9-min-width {\n  min-width: var( --col-9-9 , 81.25% );\n}",
      "example": "\n<style>\n  #col-9-9 {\n    background-color: #aaa;\n    min-width: 81.25%;\n    height: 100px;\n  }\n</style>\n<div id='col-9-9'></div>"
    },
    "left": {
      "output": "\n@mixin col-9-9-left {\n  left: var( --col-9-9 , 81.25% );\n}",
      "example": "\n<style>\n  #col-9-9 {\n    background-color: #aaa;\n    left: 81.25%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-9-9'></div>"
    },
    "right": {
      "output": "\n@mixin col-9-9-right {\n  right: var( --col-9-9 , 81.25% );\n}",
      "example": "\n<style>\n  #col-9-9 {\n    background-color: #aaa;\n    right: 81.25%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-9-9'></div>"
    }
  },
  "layouts-col-10": {
    "width": {
      "output": "\n@mixin col-10-width {\n  width: var( --col-10 , 83.3333% );\n}",
      "example": "\n<style>\n  #col-10 {\n    background-color: #aaa;\n    width: 83.3333%;\n    height: 100px;\n  }\n</style>\n<div id='col-10'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-10-min-width {\n  min-width: var( --col-10 , 83.3333% );\n}",
      "example": "\n<style>\n  #col-10 {\n    background-color: #aaa;\n    min-width: 83.3333%;\n    height: 100px;\n  }\n</style>\n<div id='col-10'></div>"
    },
    "left": {
      "output": "\n@mixin col-10-left {\n  left: var( --col-10 , 83.3333% );\n}",
      "example": "\n<style>\n  #col-10 {\n    background-color: #aaa;\n    left: 83.3333%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-10'></div>"
    },
    "right": {
      "output": "\n@mixin col-10-right {\n  right: var( --col-10 , 83.3333% );\n}",
      "example": "\n<style>\n  #col-10 {\n    background-color: #aaa;\n    right: 83.3333%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-10'></div>"
    }
  },
  "layouts-col-10-3": {
    "width": {
      "output": "\n@mixin col-10-3-width {\n  width: var( --col-10-3 , 85.4167% );\n}",
      "example": "\n<style>\n  #col-10-3 {\n    background-color: #aaa;\n    width: 85.4167%;\n    height: 100px;\n  }\n</style>\n<div id='col-10-3'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-10-3-min-width {\n  min-width: var( --col-10-3 , 85.4167% );\n}",
      "example": "\n<style>\n  #col-10-3 {\n    background-color: #aaa;\n    min-width: 85.4167%;\n    height: 100px;\n  }\n</style>\n<div id='col-10-3'></div>"
    },
    "left": {
      "output": "\n@mixin col-10-3-left {\n  left: var( --col-10-3 , 85.4167% );\n}",
      "example": "\n<style>\n  #col-10-3 {\n    background-color: #aaa;\n    left: 85.4167%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-10-3'></div>"
    },
    "right": {
      "output": "\n@mixin col-10-3-right {\n  right: var( --col-10-3 , 85.4167% );\n}",
      "example": "\n<style>\n  #col-10-3 {\n    background-color: #aaa;\n    right: 85.4167%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-10-3'></div>"
    }
  },
  "layouts-col-10-4": {
    "width": {
      "output": "\n@mixin col-10-4-width {\n  width: var( --col-10-4 , 86.1111% );\n}",
      "example": "\n<style>\n  #col-10-4 {\n    background-color: #aaa;\n    width: 86.1111%;\n    height: 100px;\n  }\n</style>\n<div id='col-10-4'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-10-4-min-width {\n  min-width: var( --col-10-4 , 86.1111% );\n}",
      "example": "\n<style>\n  #col-10-4 {\n    background-color: #aaa;\n    min-width: 86.1111%;\n    height: 100px;\n  }\n</style>\n<div id='col-10-4'></div>"
    },
    "left": {
      "output": "\n@mixin col-10-4-left {\n  left: var( --col-10-4 , 86.1111% );\n}",
      "example": "\n<style>\n  #col-10-4 {\n    background-color: #aaa;\n    left: 86.1111%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-10-4'></div>"
    },
    "right": {
      "output": "\n@mixin col-10-4-right {\n  right: var( --col-10-4 , 86.1111% );\n}",
      "example": "\n<style>\n  #col-10-4 {\n    background-color: #aaa;\n    right: 86.1111%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-10-4'></div>"
    }
  },
  "layouts-col-10-6": {
    "width": {
      "output": "\n@mixin col-10-6-width {\n  width: var( --col-10-6 , 87.5% );\n}",
      "example": "\n<style>\n  #col-10-6 {\n    background-color: #aaa;\n    width: 87.5%;\n    height: 100px;\n  }\n</style>\n<div id='col-10-6'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-10-6-min-width {\n  min-width: var( --col-10-6 , 87.5% );\n}",
      "example": "\n<style>\n  #col-10-6 {\n    background-color: #aaa;\n    min-width: 87.5%;\n    height: 100px;\n  }\n</style>\n<div id='col-10-6'></div>"
    },
    "left": {
      "output": "\n@mixin col-10-6-left {\n  left: var( --col-10-6 , 87.5% );\n}",
      "example": "\n<style>\n  #col-10-6 {\n    background-color: #aaa;\n    left: 87.5%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-10-6'></div>"
    },
    "right": {
      "output": "\n@mixin col-10-6-right {\n  right: var( --col-10-6 , 87.5% );\n}",
      "example": "\n<style>\n  #col-10-6 {\n    background-color: #aaa;\n    right: 87.5%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-10-6'></div>"
    }
  },
  "layouts-col-10-8": {
    "width": {
      "output": "\n@mixin col-10-8-width {\n  width: var( --col-10-8 , 88.8889% );\n}",
      "example": "\n<style>\n  #col-10-8 {\n    background-color: #aaa;\n    width: 88.8889%;\n    height: 100px;\n  }\n</style>\n<div id='col-10-8'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-10-8-min-width {\n  min-width: var( --col-10-8 , 88.8889% );\n}",
      "example": "\n<style>\n  #col-10-8 {\n    background-color: #aaa;\n    min-width: 88.8889%;\n    height: 100px;\n  }\n</style>\n<div id='col-10-8'></div>"
    },
    "left": {
      "output": "\n@mixin col-10-8-left {\n  left: var( --col-10-8 , 88.8889% );\n}",
      "example": "\n<style>\n  #col-10-8 {\n    background-color: #aaa;\n    left: 88.8889%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-10-8'></div>"
    },
    "right": {
      "output": "\n@mixin col-10-8-right {\n  right: var( --col-10-8 , 88.8889% );\n}",
      "example": "\n<style>\n  #col-10-8 {\n    background-color: #aaa;\n    right: 88.8889%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-10-8'></div>"
    }
  },
  "layouts-col-10-9": {
    "width": {
      "output": "\n@mixin col-10-9-width {\n  width: var( --col-10-9 , 89.5833% );\n}",
      "example": "\n<style>\n  #col-10-9 {\n    background-color: #aaa;\n    width: 89.5833%;\n    height: 100px;\n  }\n</style>\n<div id='col-10-9'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-10-9-min-width {\n  min-width: var( --col-10-9 , 89.5833% );\n}",
      "example": "\n<style>\n  #col-10-9 {\n    background-color: #aaa;\n    min-width: 89.5833%;\n    height: 100px;\n  }\n</style>\n<div id='col-10-9'></div>"
    },
    "left": {
      "output": "\n@mixin col-10-9-left {\n  left: var( --col-10-9 , 89.5833% );\n}",
      "example": "\n<style>\n  #col-10-9 {\n    background-color: #aaa;\n    left: 89.5833%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-10-9'></div>"
    },
    "right": {
      "output": "\n@mixin col-10-9-right {\n  right: var( --col-10-9 , 89.5833% );\n}",
      "example": "\n<style>\n  #col-10-9 {\n    background-color: #aaa;\n    right: 89.5833%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-10-9'></div>"
    }
  },
  "layouts-col-11": {
    "width": {
      "output": "\n@mixin col-11-width {\n  width: var( --col-11 , 91.6667% );\n}",
      "example": "\n<style>\n  #col-11 {\n    background-color: #aaa;\n    width: 91.6667%;\n    height: 100px;\n  }\n</style>\n<div id='col-11'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-11-min-width {\n  min-width: var( --col-11 , 91.6667% );\n}",
      "example": "\n<style>\n  #col-11 {\n    background-color: #aaa;\n    min-width: 91.6667%;\n    height: 100px;\n  }\n</style>\n<div id='col-11'></div>"
    },
    "left": {
      "output": "\n@mixin col-11-left {\n  left: var( --col-11 , 91.6667% );\n}",
      "example": "\n<style>\n  #col-11 {\n    background-color: #aaa;\n    left: 91.6667%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-11'></div>"
    },
    "right": {
      "output": "\n@mixin col-11-right {\n  right: var( --col-11 , 91.6667% );\n}",
      "example": "\n<style>\n  #col-11 {\n    background-color: #aaa;\n    right: 91.6667%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-11'></div>"
    }
  },
  "layouts-col-11-3": {
    "width": {
      "output": "\n@mixin col-11-3-width {\n  width: var( --col-11-3 , 93.75% );\n}",
      "example": "\n<style>\n  #col-11-3 {\n    background-color: #aaa;\n    width: 93.75%;\n    height: 100px;\n  }\n</style>\n<div id='col-11-3'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-11-3-min-width {\n  min-width: var( --col-11-3 , 93.75% );\n}",
      "example": "\n<style>\n  #col-11-3 {\n    background-color: #aaa;\n    min-width: 93.75%;\n    height: 100px;\n  }\n</style>\n<div id='col-11-3'></div>"
    },
    "left": {
      "output": "\n@mixin col-11-3-left {\n  left: var( --col-11-3 , 93.75% );\n}",
      "example": "\n<style>\n  #col-11-3 {\n    background-color: #aaa;\n    left: 93.75%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-11-3'></div>"
    },
    "right": {
      "output": "\n@mixin col-11-3-right {\n  right: var( --col-11-3 , 93.75% );\n}",
      "example": "\n<style>\n  #col-11-3 {\n    background-color: #aaa;\n    right: 93.75%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-11-3'></div>"
    }
  },
  "layouts-col-11-4": {
    "width": {
      "output": "\n@mixin col-11-4-width {\n  width: var( --col-11-4 , 94.4444% );\n}",
      "example": "\n<style>\n  #col-11-4 {\n    background-color: #aaa;\n    width: 94.4444%;\n    height: 100px;\n  }\n</style>\n<div id='col-11-4'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-11-4-min-width {\n  min-width: var( --col-11-4 , 94.4444% );\n}",
      "example": "\n<style>\n  #col-11-4 {\n    background-color: #aaa;\n    min-width: 94.4444%;\n    height: 100px;\n  }\n</style>\n<div id='col-11-4'></div>"
    },
    "left": {
      "output": "\n@mixin col-11-4-left {\n  left: var( --col-11-4 , 94.4444% );\n}",
      "example": "\n<style>\n  #col-11-4 {\n    background-color: #aaa;\n    left: 94.4444%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-11-4'></div>"
    },
    "right": {
      "output": "\n@mixin col-11-4-right {\n  right: var( --col-11-4 , 94.4444% );\n}",
      "example": "\n<style>\n  #col-11-4 {\n    background-color: #aaa;\n    right: 94.4444%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-11-4'></div>"
    }
  },
  "layouts-col-11-6": {
    "width": {
      "output": "\n@mixin col-11-6-width {\n  width: var( --col-11-6 , 95.8333% );\n}",
      "example": "\n<style>\n  #col-11-6 {\n    background-color: #aaa;\n    width: 95.8333%;\n    height: 100px;\n  }\n</style>\n<div id='col-11-6'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-11-6-min-width {\n  min-width: var( --col-11-6 , 95.8333% );\n}",
      "example": "\n<style>\n  #col-11-6 {\n    background-color: #aaa;\n    min-width: 95.8333%;\n    height: 100px;\n  }\n</style>\n<div id='col-11-6'></div>"
    },
    "left": {
      "output": "\n@mixin col-11-6-left {\n  left: var( --col-11-6 , 95.8333% );\n}",
      "example": "\n<style>\n  #col-11-6 {\n    background-color: #aaa;\n    left: 95.8333%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-11-6'></div>"
    },
    "right": {
      "output": "\n@mixin col-11-6-right {\n  right: var( --col-11-6 , 95.8333% );\n}",
      "example": "\n<style>\n  #col-11-6 {\n    background-color: #aaa;\n    right: 95.8333%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-11-6'></div>"
    }
  },
  "layouts-col-11-8": {
    "width": {
      "output": "\n@mixin col-11-8-width {\n  width: var( --col-11-8 , 97.2222% );\n}",
      "example": "\n<style>\n  #col-11-8 {\n    background-color: #aaa;\n    width: 97.2222%;\n    height: 100px;\n  }\n</style>\n<div id='col-11-8'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-11-8-min-width {\n  min-width: var( --col-11-8 , 97.2222% );\n}",
      "example": "\n<style>\n  #col-11-8 {\n    background-color: #aaa;\n    min-width: 97.2222%;\n    height: 100px;\n  }\n</style>\n<div id='col-11-8'></div>"
    },
    "left": {
      "output": "\n@mixin col-11-8-left {\n  left: var( --col-11-8 , 97.2222% );\n}",
      "example": "\n<style>\n  #col-11-8 {\n    background-color: #aaa;\n    left: 97.2222%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-11-8'></div>"
    },
    "right": {
      "output": "\n@mixin col-11-8-right {\n  right: var( --col-11-8 , 97.2222% );\n}",
      "example": "\n<style>\n  #col-11-8 {\n    background-color: #aaa;\n    right: 97.2222%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-11-8'></div>"
    }
  },
  "layouts-col-11-9": {
    "width": {
      "output": "\n@mixin col-11-9-width {\n  width: var( --col-11-9 , 97.9167% );\n}",
      "example": "\n<style>\n  #col-11-9 {\n    background-color: #aaa;\n    width: 97.9167%;\n    height: 100px;\n  }\n</style>\n<div id='col-11-9'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-11-9-min-width {\n  min-width: var( --col-11-9 , 97.9167% );\n}",
      "example": "\n<style>\n  #col-11-9 {\n    background-color: #aaa;\n    min-width: 97.9167%;\n    height: 100px;\n  }\n</style>\n<div id='col-11-9'></div>"
    },
    "left": {
      "output": "\n@mixin col-11-9-left {\n  left: var( --col-11-9 , 97.9167% );\n}",
      "example": "\n<style>\n  #col-11-9 {\n    background-color: #aaa;\n    left: 97.9167%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-11-9'></div>"
    },
    "right": {
      "output": "\n@mixin col-11-9-right {\n  right: var( --col-11-9 , 97.9167% );\n}",
      "example": "\n<style>\n  #col-11-9 {\n    background-color: #aaa;\n    right: 97.9167%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-11-9'></div>"
    }
  },
  "layouts-col-12": {
    "width": {
      "output": "\n@mixin col-12-width {\n  width: var( --col-12 , 100% );\n}",
      "example": "\n<style>\n  #col-12 {\n    background-color: #aaa;\n    width: 100%;\n    height: 100px;\n  }\n</style>\n<div id='col-12'></div>"
    },
    "min-width": {
      "output": "\n@mixin col-12-min-width {\n  min-width: var( --col-12 , 100% );\n}",
      "example": "\n<style>\n  #col-12 {\n    background-color: #aaa;\n    min-width: 100%;\n    height: 100px;\n  }\n</style>\n<div id='col-12'></div>"
    },
    "left": {
      "output": "\n@mixin col-12-left {\n  left: var( --col-12 , 100% );\n}",
      "example": "\n<style>\n  #col-12 {\n    background-color: #aaa;\n    left: 100%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-12'></div>"
    },
    "right": {
      "output": "\n@mixin col-12-right {\n  right: var( --col-12 , 100% );\n}",
      "example": "\n<style>\n  #col-12 {\n    background-color: #aaa;\n    right: 100%;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='col-12'></div>"
    }
  },
  "layouts-colvw-0": {
    "width": {
      "output": "\n@mixin colvw-0-width {\n  width: var( --colvw-0 , 0vw );\n}",
      "example": "\n<style>\n  #colvw-0 {\n    background-color: #aaa;\n    width: 0vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-0'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-0-min-width {\n  min-width: var( --colvw-0 , 0vw );\n}",
      "example": "\n<style>\n  #colvw-0 {\n    background-color: #aaa;\n    min-width: 0vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-0'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-0-left {\n  left: var( --colvw-0 , 0vw );\n}",
      "example": "\n<style>\n  #colvw-0 {\n    background-color: #aaa;\n    left: 0vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-0'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-0-right {\n  right: var( --colvw-0 , 0vw );\n}",
      "example": "\n<style>\n  #colvw-0 {\n    background-color: #aaa;\n    right: 0vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-0'></div>"
    }
  },
  "layouts-colvw-0-3": {
    "width": {
      "output": "\n@mixin colvw-0-3-width {\n  width: var( --colvw-0-3 , 2.0833vw );\n}",
      "example": "\n<style>\n  #colvw-0-3 {\n    background-color: #aaa;\n    width: 2.0833vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-0-3'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-0-3-min-width {\n  min-width: var( --colvw-0-3 , 2.0833vw );\n}",
      "example": "\n<style>\n  #colvw-0-3 {\n    background-color: #aaa;\n    min-width: 2.0833vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-0-3'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-0-3-left {\n  left: var( --colvw-0-3 , 2.0833vw );\n}",
      "example": "\n<style>\n  #colvw-0-3 {\n    background-color: #aaa;\n    left: 2.0833vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-0-3'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-0-3-right {\n  right: var( --colvw-0-3 , 2.0833vw );\n}",
      "example": "\n<style>\n  #colvw-0-3 {\n    background-color: #aaa;\n    right: 2.0833vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-0-3'></div>"
    }
  },
  "layouts-colvw-0-4": {
    "width": {
      "output": "\n@mixin colvw-0-4-width {\n  width: var( --colvw-0-4 , 2.7778vw );\n}",
      "example": "\n<style>\n  #colvw-0-4 {\n    background-color: #aaa;\n    width: 2.7778vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-0-4'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-0-4-min-width {\n  min-width: var( --colvw-0-4 , 2.7778vw );\n}",
      "example": "\n<style>\n  #colvw-0-4 {\n    background-color: #aaa;\n    min-width: 2.7778vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-0-4'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-0-4-left {\n  left: var( --colvw-0-4 , 2.7778vw );\n}",
      "example": "\n<style>\n  #colvw-0-4 {\n    background-color: #aaa;\n    left: 2.7778vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-0-4'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-0-4-right {\n  right: var( --colvw-0-4 , 2.7778vw );\n}",
      "example": "\n<style>\n  #colvw-0-4 {\n    background-color: #aaa;\n    right: 2.7778vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-0-4'></div>"
    }
  },
  "layouts-colvw-0-6": {
    "width": {
      "output": "\n@mixin colvw-0-6-width {\n  width: var( --colvw-0-6 , 4.1667vw );\n}",
      "example": "\n<style>\n  #colvw-0-6 {\n    background-color: #aaa;\n    width: 4.1667vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-0-6'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-0-6-min-width {\n  min-width: var( --colvw-0-6 , 4.1667vw );\n}",
      "example": "\n<style>\n  #colvw-0-6 {\n    background-color: #aaa;\n    min-width: 4.1667vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-0-6'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-0-6-left {\n  left: var( --colvw-0-6 , 4.1667vw );\n}",
      "example": "\n<style>\n  #colvw-0-6 {\n    background-color: #aaa;\n    left: 4.1667vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-0-6'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-0-6-right {\n  right: var( --colvw-0-6 , 4.1667vw );\n}",
      "example": "\n<style>\n  #colvw-0-6 {\n    background-color: #aaa;\n    right: 4.1667vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-0-6'></div>"
    }
  },
  "layouts-colvw-0-8": {
    "width": {
      "output": "\n@mixin colvw-0-8-width {\n  width: var( --colvw-0-8 , 5.5556vw );\n}",
      "example": "\n<style>\n  #colvw-0-8 {\n    background-color: #aaa;\n    width: 5.5556vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-0-8'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-0-8-min-width {\n  min-width: var( --colvw-0-8 , 5.5556vw );\n}",
      "example": "\n<style>\n  #colvw-0-8 {\n    background-color: #aaa;\n    min-width: 5.5556vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-0-8'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-0-8-left {\n  left: var( --colvw-0-8 , 5.5556vw );\n}",
      "example": "\n<style>\n  #colvw-0-8 {\n    background-color: #aaa;\n    left: 5.5556vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-0-8'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-0-8-right {\n  right: var( --colvw-0-8 , 5.5556vw );\n}",
      "example": "\n<style>\n  #colvw-0-8 {\n    background-color: #aaa;\n    right: 5.5556vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-0-8'></div>"
    }
  },
  "layouts-colvw-0-9": {
    "width": {
      "output": "\n@mixin colvw-0-9-width {\n  width: var( --colvw-0-9 , 6.25vw );\n}",
      "example": "\n<style>\n  #colvw-0-9 {\n    background-color: #aaa;\n    width: 6.25vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-0-9'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-0-9-min-width {\n  min-width: var( --colvw-0-9 , 6.25vw );\n}",
      "example": "\n<style>\n  #colvw-0-9 {\n    background-color: #aaa;\n    min-width: 6.25vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-0-9'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-0-9-left {\n  left: var( --colvw-0-9 , 6.25vw );\n}",
      "example": "\n<style>\n  #colvw-0-9 {\n    background-color: #aaa;\n    left: 6.25vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-0-9'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-0-9-right {\n  right: var( --colvw-0-9 , 6.25vw );\n}",
      "example": "\n<style>\n  #colvw-0-9 {\n    background-color: #aaa;\n    right: 6.25vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-0-9'></div>"
    }
  },
  "layouts-colvw-1": {
    "width": {
      "output": "\n@mixin colvw-1-width {\n  width: var( --colvw-1 , 8.3333vw );\n}",
      "example": "\n<style>\n  #colvw-1 {\n    background-color: #aaa;\n    width: 8.3333vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-1'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-1-min-width {\n  min-width: var( --colvw-1 , 8.3333vw );\n}",
      "example": "\n<style>\n  #colvw-1 {\n    background-color: #aaa;\n    min-width: 8.3333vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-1'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-1-left {\n  left: var( --colvw-1 , 8.3333vw );\n}",
      "example": "\n<style>\n  #colvw-1 {\n    background-color: #aaa;\n    left: 8.3333vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-1'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-1-right {\n  right: var( --colvw-1 , 8.3333vw );\n}",
      "example": "\n<style>\n  #colvw-1 {\n    background-color: #aaa;\n    right: 8.3333vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-1'></div>"
    }
  },
  "layouts-colvw-1-3": {
    "width": {
      "output": "\n@mixin colvw-1-3-width {\n  width: var( --colvw-1-3 , 10.4167vw );\n}",
      "example": "\n<style>\n  #colvw-1-3 {\n    background-color: #aaa;\n    width: 10.4167vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-1-3'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-1-3-min-width {\n  min-width: var( --colvw-1-3 , 10.4167vw );\n}",
      "example": "\n<style>\n  #colvw-1-3 {\n    background-color: #aaa;\n    min-width: 10.4167vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-1-3'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-1-3-left {\n  left: var( --colvw-1-3 , 10.4167vw );\n}",
      "example": "\n<style>\n  #colvw-1-3 {\n    background-color: #aaa;\n    left: 10.4167vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-1-3'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-1-3-right {\n  right: var( --colvw-1-3 , 10.4167vw );\n}",
      "example": "\n<style>\n  #colvw-1-3 {\n    background-color: #aaa;\n    right: 10.4167vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-1-3'></div>"
    }
  },
  "layouts-colvw-1-4": {
    "width": {
      "output": "\n@mixin colvw-1-4-width {\n  width: var( --colvw-1-4 , 11.1111vw );\n}",
      "example": "\n<style>\n  #colvw-1-4 {\n    background-color: #aaa;\n    width: 11.1111vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-1-4'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-1-4-min-width {\n  min-width: var( --colvw-1-4 , 11.1111vw );\n}",
      "example": "\n<style>\n  #colvw-1-4 {\n    background-color: #aaa;\n    min-width: 11.1111vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-1-4'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-1-4-left {\n  left: var( --colvw-1-4 , 11.1111vw );\n}",
      "example": "\n<style>\n  #colvw-1-4 {\n    background-color: #aaa;\n    left: 11.1111vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-1-4'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-1-4-right {\n  right: var( --colvw-1-4 , 11.1111vw );\n}",
      "example": "\n<style>\n  #colvw-1-4 {\n    background-color: #aaa;\n    right: 11.1111vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-1-4'></div>"
    }
  },
  "layouts-colvw-1-6": {
    "width": {
      "output": "\n@mixin colvw-1-6-width {\n  width: var( --colvw-1-6 , 12.5vw );\n}",
      "example": "\n<style>\n  #colvw-1-6 {\n    background-color: #aaa;\n    width: 12.5vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-1-6'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-1-6-min-width {\n  min-width: var( --colvw-1-6 , 12.5vw );\n}",
      "example": "\n<style>\n  #colvw-1-6 {\n    background-color: #aaa;\n    min-width: 12.5vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-1-6'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-1-6-left {\n  left: var( --colvw-1-6 , 12.5vw );\n}",
      "example": "\n<style>\n  #colvw-1-6 {\n    background-color: #aaa;\n    left: 12.5vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-1-6'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-1-6-right {\n  right: var( --colvw-1-6 , 12.5vw );\n}",
      "example": "\n<style>\n  #colvw-1-6 {\n    background-color: #aaa;\n    right: 12.5vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-1-6'></div>"
    }
  },
  "layouts-colvw-1-8": {
    "width": {
      "output": "\n@mixin colvw-1-8-width {\n  width: var( --colvw-1-8 , 13.8889vw );\n}",
      "example": "\n<style>\n  #colvw-1-8 {\n    background-color: #aaa;\n    width: 13.8889vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-1-8'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-1-8-min-width {\n  min-width: var( --colvw-1-8 , 13.8889vw );\n}",
      "example": "\n<style>\n  #colvw-1-8 {\n    background-color: #aaa;\n    min-width: 13.8889vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-1-8'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-1-8-left {\n  left: var( --colvw-1-8 , 13.8889vw );\n}",
      "example": "\n<style>\n  #colvw-1-8 {\n    background-color: #aaa;\n    left: 13.8889vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-1-8'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-1-8-right {\n  right: var( --colvw-1-8 , 13.8889vw );\n}",
      "example": "\n<style>\n  #colvw-1-8 {\n    background-color: #aaa;\n    right: 13.8889vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-1-8'></div>"
    }
  },
  "layouts-colvw-1-9": {
    "width": {
      "output": "\n@mixin colvw-1-9-width {\n  width: var( --colvw-1-9 , 14.5833vw );\n}",
      "example": "\n<style>\n  #colvw-1-9 {\n    background-color: #aaa;\n    width: 14.5833vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-1-9'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-1-9-min-width {\n  min-width: var( --colvw-1-9 , 14.5833vw );\n}",
      "example": "\n<style>\n  #colvw-1-9 {\n    background-color: #aaa;\n    min-width: 14.5833vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-1-9'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-1-9-left {\n  left: var( --colvw-1-9 , 14.5833vw );\n}",
      "example": "\n<style>\n  #colvw-1-9 {\n    background-color: #aaa;\n    left: 14.5833vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-1-9'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-1-9-right {\n  right: var( --colvw-1-9 , 14.5833vw );\n}",
      "example": "\n<style>\n  #colvw-1-9 {\n    background-color: #aaa;\n    right: 14.5833vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-1-9'></div>"
    }
  },
  "layouts-colvw-2": {
    "width": {
      "output": "\n@mixin colvw-2-width {\n  width: var( --colvw-2 , 16.6667vw );\n}",
      "example": "\n<style>\n  #colvw-2 {\n    background-color: #aaa;\n    width: 16.6667vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-2'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-2-min-width {\n  min-width: var( --colvw-2 , 16.6667vw );\n}",
      "example": "\n<style>\n  #colvw-2 {\n    background-color: #aaa;\n    min-width: 16.6667vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-2'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-2-left {\n  left: var( --colvw-2 , 16.6667vw );\n}",
      "example": "\n<style>\n  #colvw-2 {\n    background-color: #aaa;\n    left: 16.6667vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-2'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-2-right {\n  right: var( --colvw-2 , 16.6667vw );\n}",
      "example": "\n<style>\n  #colvw-2 {\n    background-color: #aaa;\n    right: 16.6667vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-2'></div>"
    }
  },
  "layouts-colvw-2-3": {
    "width": {
      "output": "\n@mixin colvw-2-3-width {\n  width: var( --colvw-2-3 , 18.75vw );\n}",
      "example": "\n<style>\n  #colvw-2-3 {\n    background-color: #aaa;\n    width: 18.75vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-2-3'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-2-3-min-width {\n  min-width: var( --colvw-2-3 , 18.75vw );\n}",
      "example": "\n<style>\n  #colvw-2-3 {\n    background-color: #aaa;\n    min-width: 18.75vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-2-3'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-2-3-left {\n  left: var( --colvw-2-3 , 18.75vw );\n}",
      "example": "\n<style>\n  #colvw-2-3 {\n    background-color: #aaa;\n    left: 18.75vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-2-3'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-2-3-right {\n  right: var( --colvw-2-3 , 18.75vw );\n}",
      "example": "\n<style>\n  #colvw-2-3 {\n    background-color: #aaa;\n    right: 18.75vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-2-3'></div>"
    }
  },
  "layouts-colvw-2-4": {
    "width": {
      "output": "\n@mixin colvw-2-4-width {\n  width: var( --colvw-2-4 , 19.4444vw );\n}",
      "example": "\n<style>\n  #colvw-2-4 {\n    background-color: #aaa;\n    width: 19.4444vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-2-4'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-2-4-min-width {\n  min-width: var( --colvw-2-4 , 19.4444vw );\n}",
      "example": "\n<style>\n  #colvw-2-4 {\n    background-color: #aaa;\n    min-width: 19.4444vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-2-4'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-2-4-left {\n  left: var( --colvw-2-4 , 19.4444vw );\n}",
      "example": "\n<style>\n  #colvw-2-4 {\n    background-color: #aaa;\n    left: 19.4444vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-2-4'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-2-4-right {\n  right: var( --colvw-2-4 , 19.4444vw );\n}",
      "example": "\n<style>\n  #colvw-2-4 {\n    background-color: #aaa;\n    right: 19.4444vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-2-4'></div>"
    }
  },
  "layouts-colvw-2-6": {
    "width": {
      "output": "\n@mixin colvw-2-6-width {\n  width: var( --colvw-2-6 , 20.8333vw );\n}",
      "example": "\n<style>\n  #colvw-2-6 {\n    background-color: #aaa;\n    width: 20.8333vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-2-6'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-2-6-min-width {\n  min-width: var( --colvw-2-6 , 20.8333vw );\n}",
      "example": "\n<style>\n  #colvw-2-6 {\n    background-color: #aaa;\n    min-width: 20.8333vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-2-6'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-2-6-left {\n  left: var( --colvw-2-6 , 20.8333vw );\n}",
      "example": "\n<style>\n  #colvw-2-6 {\n    background-color: #aaa;\n    left: 20.8333vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-2-6'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-2-6-right {\n  right: var( --colvw-2-6 , 20.8333vw );\n}",
      "example": "\n<style>\n  #colvw-2-6 {\n    background-color: #aaa;\n    right: 20.8333vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-2-6'></div>"
    }
  },
  "layouts-colvw-2-8": {
    "width": {
      "output": "\n@mixin colvw-2-8-width {\n  width: var( --colvw-2-8 , 22.2222vw );\n}",
      "example": "\n<style>\n  #colvw-2-8 {\n    background-color: #aaa;\n    width: 22.2222vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-2-8'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-2-8-min-width {\n  min-width: var( --colvw-2-8 , 22.2222vw );\n}",
      "example": "\n<style>\n  #colvw-2-8 {\n    background-color: #aaa;\n    min-width: 22.2222vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-2-8'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-2-8-left {\n  left: var( --colvw-2-8 , 22.2222vw );\n}",
      "example": "\n<style>\n  #colvw-2-8 {\n    background-color: #aaa;\n    left: 22.2222vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-2-8'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-2-8-right {\n  right: var( --colvw-2-8 , 22.2222vw );\n}",
      "example": "\n<style>\n  #colvw-2-8 {\n    background-color: #aaa;\n    right: 22.2222vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-2-8'></div>"
    }
  },
  "layouts-colvw-2-9": {
    "width": {
      "output": "\n@mixin colvw-2-9-width {\n  width: var( --colvw-2-9 , 22.9167vw );\n}",
      "example": "\n<style>\n  #colvw-2-9 {\n    background-color: #aaa;\n    width: 22.9167vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-2-9'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-2-9-min-width {\n  min-width: var( --colvw-2-9 , 22.9167vw );\n}",
      "example": "\n<style>\n  #colvw-2-9 {\n    background-color: #aaa;\n    min-width: 22.9167vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-2-9'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-2-9-left {\n  left: var( --colvw-2-9 , 22.9167vw );\n}",
      "example": "\n<style>\n  #colvw-2-9 {\n    background-color: #aaa;\n    left: 22.9167vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-2-9'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-2-9-right {\n  right: var( --colvw-2-9 , 22.9167vw );\n}",
      "example": "\n<style>\n  #colvw-2-9 {\n    background-color: #aaa;\n    right: 22.9167vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-2-9'></div>"
    }
  },
  "layouts-colvw-3": {
    "width": {
      "output": "\n@mixin colvw-3-width {\n  width: var( --colvw-3 , 25vw );\n}",
      "example": "\n<style>\n  #colvw-3 {\n    background-color: #aaa;\n    width: 25vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-3'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-3-min-width {\n  min-width: var( --colvw-3 , 25vw );\n}",
      "example": "\n<style>\n  #colvw-3 {\n    background-color: #aaa;\n    min-width: 25vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-3'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-3-left {\n  left: var( --colvw-3 , 25vw );\n}",
      "example": "\n<style>\n  #colvw-3 {\n    background-color: #aaa;\n    left: 25vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-3'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-3-right {\n  right: var( --colvw-3 , 25vw );\n}",
      "example": "\n<style>\n  #colvw-3 {\n    background-color: #aaa;\n    right: 25vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-3'></div>"
    }
  },
  "layouts-colvw-3-3": {
    "width": {
      "output": "\n@mixin colvw-3-3-width {\n  width: var( --colvw-3-3 , 27.0833vw );\n}",
      "example": "\n<style>\n  #colvw-3-3 {\n    background-color: #aaa;\n    width: 27.0833vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-3-3'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-3-3-min-width {\n  min-width: var( --colvw-3-3 , 27.0833vw );\n}",
      "example": "\n<style>\n  #colvw-3-3 {\n    background-color: #aaa;\n    min-width: 27.0833vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-3-3'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-3-3-left {\n  left: var( --colvw-3-3 , 27.0833vw );\n}",
      "example": "\n<style>\n  #colvw-3-3 {\n    background-color: #aaa;\n    left: 27.0833vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-3-3'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-3-3-right {\n  right: var( --colvw-3-3 , 27.0833vw );\n}",
      "example": "\n<style>\n  #colvw-3-3 {\n    background-color: #aaa;\n    right: 27.0833vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-3-3'></div>"
    }
  },
  "layouts-colvw-3-4": {
    "width": {
      "output": "\n@mixin colvw-3-4-width {\n  width: var( --colvw-3-4 , 27.7778vw );\n}",
      "example": "\n<style>\n  #colvw-3-4 {\n    background-color: #aaa;\n    width: 27.7778vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-3-4'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-3-4-min-width {\n  min-width: var( --colvw-3-4 , 27.7778vw );\n}",
      "example": "\n<style>\n  #colvw-3-4 {\n    background-color: #aaa;\n    min-width: 27.7778vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-3-4'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-3-4-left {\n  left: var( --colvw-3-4 , 27.7778vw );\n}",
      "example": "\n<style>\n  #colvw-3-4 {\n    background-color: #aaa;\n    left: 27.7778vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-3-4'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-3-4-right {\n  right: var( --colvw-3-4 , 27.7778vw );\n}",
      "example": "\n<style>\n  #colvw-3-4 {\n    background-color: #aaa;\n    right: 27.7778vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-3-4'></div>"
    }
  },
  "layouts-colvw-3-6": {
    "width": {
      "output": "\n@mixin colvw-3-6-width {\n  width: var( --colvw-3-6 , 29.1667vw );\n}",
      "example": "\n<style>\n  #colvw-3-6 {\n    background-color: #aaa;\n    width: 29.1667vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-3-6'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-3-6-min-width {\n  min-width: var( --colvw-3-6 , 29.1667vw );\n}",
      "example": "\n<style>\n  #colvw-3-6 {\n    background-color: #aaa;\n    min-width: 29.1667vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-3-6'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-3-6-left {\n  left: var( --colvw-3-6 , 29.1667vw );\n}",
      "example": "\n<style>\n  #colvw-3-6 {\n    background-color: #aaa;\n    left: 29.1667vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-3-6'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-3-6-right {\n  right: var( --colvw-3-6 , 29.1667vw );\n}",
      "example": "\n<style>\n  #colvw-3-6 {\n    background-color: #aaa;\n    right: 29.1667vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-3-6'></div>"
    }
  },
  "layouts-colvw-3-8": {
    "width": {
      "output": "\n@mixin colvw-3-8-width {\n  width: var( --colvw-3-8 , 30.5556vw );\n}",
      "example": "\n<style>\n  #colvw-3-8 {\n    background-color: #aaa;\n    width: 30.5556vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-3-8'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-3-8-min-width {\n  min-width: var( --colvw-3-8 , 30.5556vw );\n}",
      "example": "\n<style>\n  #colvw-3-8 {\n    background-color: #aaa;\n    min-width: 30.5556vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-3-8'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-3-8-left {\n  left: var( --colvw-3-8 , 30.5556vw );\n}",
      "example": "\n<style>\n  #colvw-3-8 {\n    background-color: #aaa;\n    left: 30.5556vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-3-8'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-3-8-right {\n  right: var( --colvw-3-8 , 30.5556vw );\n}",
      "example": "\n<style>\n  #colvw-3-8 {\n    background-color: #aaa;\n    right: 30.5556vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-3-8'></div>"
    }
  },
  "layouts-colvw-3-9": {
    "width": {
      "output": "\n@mixin colvw-3-9-width {\n  width: var( --colvw-3-9 , 31.25vw );\n}",
      "example": "\n<style>\n  #colvw-3-9 {\n    background-color: #aaa;\n    width: 31.25vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-3-9'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-3-9-min-width {\n  min-width: var( --colvw-3-9 , 31.25vw );\n}",
      "example": "\n<style>\n  #colvw-3-9 {\n    background-color: #aaa;\n    min-width: 31.25vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-3-9'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-3-9-left {\n  left: var( --colvw-3-9 , 31.25vw );\n}",
      "example": "\n<style>\n  #colvw-3-9 {\n    background-color: #aaa;\n    left: 31.25vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-3-9'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-3-9-right {\n  right: var( --colvw-3-9 , 31.25vw );\n}",
      "example": "\n<style>\n  #colvw-3-9 {\n    background-color: #aaa;\n    right: 31.25vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-3-9'></div>"
    }
  },
  "layouts-colvw-4": {
    "width": {
      "output": "\n@mixin colvw-4-width {\n  width: var( --colvw-4 , 33.3333vw );\n}",
      "example": "\n<style>\n  #colvw-4 {\n    background-color: #aaa;\n    width: 33.3333vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-4'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-4-min-width {\n  min-width: var( --colvw-4 , 33.3333vw );\n}",
      "example": "\n<style>\n  #colvw-4 {\n    background-color: #aaa;\n    min-width: 33.3333vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-4'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-4-left {\n  left: var( --colvw-4 , 33.3333vw );\n}",
      "example": "\n<style>\n  #colvw-4 {\n    background-color: #aaa;\n    left: 33.3333vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-4'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-4-right {\n  right: var( --colvw-4 , 33.3333vw );\n}",
      "example": "\n<style>\n  #colvw-4 {\n    background-color: #aaa;\n    right: 33.3333vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-4'></div>"
    }
  },
  "layouts-colvw-4-3": {
    "width": {
      "output": "\n@mixin colvw-4-3-width {\n  width: var( --colvw-4-3 , 35.4167vw );\n}",
      "example": "\n<style>\n  #colvw-4-3 {\n    background-color: #aaa;\n    width: 35.4167vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-4-3'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-4-3-min-width {\n  min-width: var( --colvw-4-3 , 35.4167vw );\n}",
      "example": "\n<style>\n  #colvw-4-3 {\n    background-color: #aaa;\n    min-width: 35.4167vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-4-3'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-4-3-left {\n  left: var( --colvw-4-3 , 35.4167vw );\n}",
      "example": "\n<style>\n  #colvw-4-3 {\n    background-color: #aaa;\n    left: 35.4167vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-4-3'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-4-3-right {\n  right: var( --colvw-4-3 , 35.4167vw );\n}",
      "example": "\n<style>\n  #colvw-4-3 {\n    background-color: #aaa;\n    right: 35.4167vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-4-3'></div>"
    }
  },
  "layouts-colvw-4-4": {
    "width": {
      "output": "\n@mixin colvw-4-4-width {\n  width: var( --colvw-4-4 , 36.1111vw );\n}",
      "example": "\n<style>\n  #colvw-4-4 {\n    background-color: #aaa;\n    width: 36.1111vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-4-4'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-4-4-min-width {\n  min-width: var( --colvw-4-4 , 36.1111vw );\n}",
      "example": "\n<style>\n  #colvw-4-4 {\n    background-color: #aaa;\n    min-width: 36.1111vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-4-4'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-4-4-left {\n  left: var( --colvw-4-4 , 36.1111vw );\n}",
      "example": "\n<style>\n  #colvw-4-4 {\n    background-color: #aaa;\n    left: 36.1111vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-4-4'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-4-4-right {\n  right: var( --colvw-4-4 , 36.1111vw );\n}",
      "example": "\n<style>\n  #colvw-4-4 {\n    background-color: #aaa;\n    right: 36.1111vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-4-4'></div>"
    }
  },
  "layouts-colvw-4-6": {
    "width": {
      "output": "\n@mixin colvw-4-6-width {\n  width: var( --colvw-4-6 , 37.5vw );\n}",
      "example": "\n<style>\n  #colvw-4-6 {\n    background-color: #aaa;\n    width: 37.5vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-4-6'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-4-6-min-width {\n  min-width: var( --colvw-4-6 , 37.5vw );\n}",
      "example": "\n<style>\n  #colvw-4-6 {\n    background-color: #aaa;\n    min-width: 37.5vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-4-6'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-4-6-left {\n  left: var( --colvw-4-6 , 37.5vw );\n}",
      "example": "\n<style>\n  #colvw-4-6 {\n    background-color: #aaa;\n    left: 37.5vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-4-6'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-4-6-right {\n  right: var( --colvw-4-6 , 37.5vw );\n}",
      "example": "\n<style>\n  #colvw-4-6 {\n    background-color: #aaa;\n    right: 37.5vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-4-6'></div>"
    }
  },
  "layouts-colvw-4-8": {
    "width": {
      "output": "\n@mixin colvw-4-8-width {\n  width: var( --colvw-4-8 , 38.8889vw );\n}",
      "example": "\n<style>\n  #colvw-4-8 {\n    background-color: #aaa;\n    width: 38.8889vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-4-8'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-4-8-min-width {\n  min-width: var( --colvw-4-8 , 38.8889vw );\n}",
      "example": "\n<style>\n  #colvw-4-8 {\n    background-color: #aaa;\n    min-width: 38.8889vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-4-8'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-4-8-left {\n  left: var( --colvw-4-8 , 38.8889vw );\n}",
      "example": "\n<style>\n  #colvw-4-8 {\n    background-color: #aaa;\n    left: 38.8889vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-4-8'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-4-8-right {\n  right: var( --colvw-4-8 , 38.8889vw );\n}",
      "example": "\n<style>\n  #colvw-4-8 {\n    background-color: #aaa;\n    right: 38.8889vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-4-8'></div>"
    }
  },
  "layouts-colvw-4-9": {
    "width": {
      "output": "\n@mixin colvw-4-9-width {\n  width: var( --colvw-4-9 , 39.5833vw );\n}",
      "example": "\n<style>\n  #colvw-4-9 {\n    background-color: #aaa;\n    width: 39.5833vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-4-9'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-4-9-min-width {\n  min-width: var( --colvw-4-9 , 39.5833vw );\n}",
      "example": "\n<style>\n  #colvw-4-9 {\n    background-color: #aaa;\n    min-width: 39.5833vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-4-9'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-4-9-left {\n  left: var( --colvw-4-9 , 39.5833vw );\n}",
      "example": "\n<style>\n  #colvw-4-9 {\n    background-color: #aaa;\n    left: 39.5833vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-4-9'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-4-9-right {\n  right: var( --colvw-4-9 , 39.5833vw );\n}",
      "example": "\n<style>\n  #colvw-4-9 {\n    background-color: #aaa;\n    right: 39.5833vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-4-9'></div>"
    }
  },
  "layouts-colvw-5": {
    "width": {
      "output": "\n@mixin colvw-5-width {\n  width: var( --colvw-5 , 41.6667vw );\n}",
      "example": "\n<style>\n  #colvw-5 {\n    background-color: #aaa;\n    width: 41.6667vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-5'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-5-min-width {\n  min-width: var( --colvw-5 , 41.6667vw );\n}",
      "example": "\n<style>\n  #colvw-5 {\n    background-color: #aaa;\n    min-width: 41.6667vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-5'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-5-left {\n  left: var( --colvw-5 , 41.6667vw );\n}",
      "example": "\n<style>\n  #colvw-5 {\n    background-color: #aaa;\n    left: 41.6667vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-5'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-5-right {\n  right: var( --colvw-5 , 41.6667vw );\n}",
      "example": "\n<style>\n  #colvw-5 {\n    background-color: #aaa;\n    right: 41.6667vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-5'></div>"
    }
  },
  "layouts-colvw-5-3": {
    "width": {
      "output": "\n@mixin colvw-5-3-width {\n  width: var( --colvw-5-3 , 43.75vw );\n}",
      "example": "\n<style>\n  #colvw-5-3 {\n    background-color: #aaa;\n    width: 43.75vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-5-3'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-5-3-min-width {\n  min-width: var( --colvw-5-3 , 43.75vw );\n}",
      "example": "\n<style>\n  #colvw-5-3 {\n    background-color: #aaa;\n    min-width: 43.75vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-5-3'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-5-3-left {\n  left: var( --colvw-5-3 , 43.75vw );\n}",
      "example": "\n<style>\n  #colvw-5-3 {\n    background-color: #aaa;\n    left: 43.75vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-5-3'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-5-3-right {\n  right: var( --colvw-5-3 , 43.75vw );\n}",
      "example": "\n<style>\n  #colvw-5-3 {\n    background-color: #aaa;\n    right: 43.75vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-5-3'></div>"
    }
  },
  "layouts-colvw-5-4": {
    "width": {
      "output": "\n@mixin colvw-5-4-width {\n  width: var( --colvw-5-4 , 44.4444vw );\n}",
      "example": "\n<style>\n  #colvw-5-4 {\n    background-color: #aaa;\n    width: 44.4444vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-5-4'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-5-4-min-width {\n  min-width: var( --colvw-5-4 , 44.4444vw );\n}",
      "example": "\n<style>\n  #colvw-5-4 {\n    background-color: #aaa;\n    min-width: 44.4444vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-5-4'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-5-4-left {\n  left: var( --colvw-5-4 , 44.4444vw );\n}",
      "example": "\n<style>\n  #colvw-5-4 {\n    background-color: #aaa;\n    left: 44.4444vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-5-4'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-5-4-right {\n  right: var( --colvw-5-4 , 44.4444vw );\n}",
      "example": "\n<style>\n  #colvw-5-4 {\n    background-color: #aaa;\n    right: 44.4444vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-5-4'></div>"
    }
  },
  "layouts-colvw-5-6": {
    "width": {
      "output": "\n@mixin colvw-5-6-width {\n  width: var( --colvw-5-6 , 45.8333vw );\n}",
      "example": "\n<style>\n  #colvw-5-6 {\n    background-color: #aaa;\n    width: 45.8333vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-5-6'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-5-6-min-width {\n  min-width: var( --colvw-5-6 , 45.8333vw );\n}",
      "example": "\n<style>\n  #colvw-5-6 {\n    background-color: #aaa;\n    min-width: 45.8333vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-5-6'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-5-6-left {\n  left: var( --colvw-5-6 , 45.8333vw );\n}",
      "example": "\n<style>\n  #colvw-5-6 {\n    background-color: #aaa;\n    left: 45.8333vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-5-6'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-5-6-right {\n  right: var( --colvw-5-6 , 45.8333vw );\n}",
      "example": "\n<style>\n  #colvw-5-6 {\n    background-color: #aaa;\n    right: 45.8333vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-5-6'></div>"
    }
  },
  "layouts-colvw-5-8": {
    "width": {
      "output": "\n@mixin colvw-5-8-width {\n  width: var( --colvw-5-8 , 47.2222vw );\n}",
      "example": "\n<style>\n  #colvw-5-8 {\n    background-color: #aaa;\n    width: 47.2222vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-5-8'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-5-8-min-width {\n  min-width: var( --colvw-5-8 , 47.2222vw );\n}",
      "example": "\n<style>\n  #colvw-5-8 {\n    background-color: #aaa;\n    min-width: 47.2222vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-5-8'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-5-8-left {\n  left: var( --colvw-5-8 , 47.2222vw );\n}",
      "example": "\n<style>\n  #colvw-5-8 {\n    background-color: #aaa;\n    left: 47.2222vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-5-8'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-5-8-right {\n  right: var( --colvw-5-8 , 47.2222vw );\n}",
      "example": "\n<style>\n  #colvw-5-8 {\n    background-color: #aaa;\n    right: 47.2222vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-5-8'></div>"
    }
  },
  "layouts-colvw-5-9": {
    "width": {
      "output": "\n@mixin colvw-5-9-width {\n  width: var( --colvw-5-9 , 47.9167vw );\n}",
      "example": "\n<style>\n  #colvw-5-9 {\n    background-color: #aaa;\n    width: 47.9167vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-5-9'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-5-9-min-width {\n  min-width: var( --colvw-5-9 , 47.9167vw );\n}",
      "example": "\n<style>\n  #colvw-5-9 {\n    background-color: #aaa;\n    min-width: 47.9167vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-5-9'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-5-9-left {\n  left: var( --colvw-5-9 , 47.9167vw );\n}",
      "example": "\n<style>\n  #colvw-5-9 {\n    background-color: #aaa;\n    left: 47.9167vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-5-9'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-5-9-right {\n  right: var( --colvw-5-9 , 47.9167vw );\n}",
      "example": "\n<style>\n  #colvw-5-9 {\n    background-color: #aaa;\n    right: 47.9167vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-5-9'></div>"
    }
  },
  "layouts-colvw-6": {
    "width": {
      "output": "\n@mixin colvw-6-width {\n  width: var( --colvw-6 , 50vw );\n}",
      "example": "\n<style>\n  #colvw-6 {\n    background-color: #aaa;\n    width: 50vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-6'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-6-min-width {\n  min-width: var( --colvw-6 , 50vw );\n}",
      "example": "\n<style>\n  #colvw-6 {\n    background-color: #aaa;\n    min-width: 50vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-6'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-6-left {\n  left: var( --colvw-6 , 50vw );\n}",
      "example": "\n<style>\n  #colvw-6 {\n    background-color: #aaa;\n    left: 50vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-6'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-6-right {\n  right: var( --colvw-6 , 50vw );\n}",
      "example": "\n<style>\n  #colvw-6 {\n    background-color: #aaa;\n    right: 50vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-6'></div>"
    }
  },
  "layouts-colvw-6-3": {
    "width": {
      "output": "\n@mixin colvw-6-3-width {\n  width: var( --colvw-6-3 , 52.0833vw );\n}",
      "example": "\n<style>\n  #colvw-6-3 {\n    background-color: #aaa;\n    width: 52.0833vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-6-3'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-6-3-min-width {\n  min-width: var( --colvw-6-3 , 52.0833vw );\n}",
      "example": "\n<style>\n  #colvw-6-3 {\n    background-color: #aaa;\n    min-width: 52.0833vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-6-3'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-6-3-left {\n  left: var( --colvw-6-3 , 52.0833vw );\n}",
      "example": "\n<style>\n  #colvw-6-3 {\n    background-color: #aaa;\n    left: 52.0833vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-6-3'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-6-3-right {\n  right: var( --colvw-6-3 , 52.0833vw );\n}",
      "example": "\n<style>\n  #colvw-6-3 {\n    background-color: #aaa;\n    right: 52.0833vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-6-3'></div>"
    }
  },
  "layouts-colvw-6-4": {
    "width": {
      "output": "\n@mixin colvw-6-4-width {\n  width: var( --colvw-6-4 , 52.7778vw );\n}",
      "example": "\n<style>\n  #colvw-6-4 {\n    background-color: #aaa;\n    width: 52.7778vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-6-4'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-6-4-min-width {\n  min-width: var( --colvw-6-4 , 52.7778vw );\n}",
      "example": "\n<style>\n  #colvw-6-4 {\n    background-color: #aaa;\n    min-width: 52.7778vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-6-4'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-6-4-left {\n  left: var( --colvw-6-4 , 52.7778vw );\n}",
      "example": "\n<style>\n  #colvw-6-4 {\n    background-color: #aaa;\n    left: 52.7778vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-6-4'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-6-4-right {\n  right: var( --colvw-6-4 , 52.7778vw );\n}",
      "example": "\n<style>\n  #colvw-6-4 {\n    background-color: #aaa;\n    right: 52.7778vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-6-4'></div>"
    }
  },
  "layouts-colvw-6-6": {
    "width": {
      "output": "\n@mixin colvw-6-6-width {\n  width: var( --colvw-6-6 , 54.1667vw );\n}",
      "example": "\n<style>\n  #colvw-6-6 {\n    background-color: #aaa;\n    width: 54.1667vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-6-6'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-6-6-min-width {\n  min-width: var( --colvw-6-6 , 54.1667vw );\n}",
      "example": "\n<style>\n  #colvw-6-6 {\n    background-color: #aaa;\n    min-width: 54.1667vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-6-6'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-6-6-left {\n  left: var( --colvw-6-6 , 54.1667vw );\n}",
      "example": "\n<style>\n  #colvw-6-6 {\n    background-color: #aaa;\n    left: 54.1667vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-6-6'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-6-6-right {\n  right: var( --colvw-6-6 , 54.1667vw );\n}",
      "example": "\n<style>\n  #colvw-6-6 {\n    background-color: #aaa;\n    right: 54.1667vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-6-6'></div>"
    }
  },
  "layouts-colvw-6-8": {
    "width": {
      "output": "\n@mixin colvw-6-8-width {\n  width: var( --colvw-6-8 , 55.5556vw );\n}",
      "example": "\n<style>\n  #colvw-6-8 {\n    background-color: #aaa;\n    width: 55.5556vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-6-8'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-6-8-min-width {\n  min-width: var( --colvw-6-8 , 55.5556vw );\n}",
      "example": "\n<style>\n  #colvw-6-8 {\n    background-color: #aaa;\n    min-width: 55.5556vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-6-8'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-6-8-left {\n  left: var( --colvw-6-8 , 55.5556vw );\n}",
      "example": "\n<style>\n  #colvw-6-8 {\n    background-color: #aaa;\n    left: 55.5556vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-6-8'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-6-8-right {\n  right: var( --colvw-6-8 , 55.5556vw );\n}",
      "example": "\n<style>\n  #colvw-6-8 {\n    background-color: #aaa;\n    right: 55.5556vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-6-8'></div>"
    }
  },
  "layouts-colvw-6-9": {
    "width": {
      "output": "\n@mixin colvw-6-9-width {\n  width: var( --colvw-6-9 , 56.25vw );\n}",
      "example": "\n<style>\n  #colvw-6-9 {\n    background-color: #aaa;\n    width: 56.25vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-6-9'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-6-9-min-width {\n  min-width: var( --colvw-6-9 , 56.25vw );\n}",
      "example": "\n<style>\n  #colvw-6-9 {\n    background-color: #aaa;\n    min-width: 56.25vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-6-9'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-6-9-left {\n  left: var( --colvw-6-9 , 56.25vw );\n}",
      "example": "\n<style>\n  #colvw-6-9 {\n    background-color: #aaa;\n    left: 56.25vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-6-9'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-6-9-right {\n  right: var( --colvw-6-9 , 56.25vw );\n}",
      "example": "\n<style>\n  #colvw-6-9 {\n    background-color: #aaa;\n    right: 56.25vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-6-9'></div>"
    }
  },
  "layouts-colvw-7": {
    "width": {
      "output": "\n@mixin colvw-7-width {\n  width: var( --colvw-7 , 58.3333vw );\n}",
      "example": "\n<style>\n  #colvw-7 {\n    background-color: #aaa;\n    width: 58.3333vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-7'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-7-min-width {\n  min-width: var( --colvw-7 , 58.3333vw );\n}",
      "example": "\n<style>\n  #colvw-7 {\n    background-color: #aaa;\n    min-width: 58.3333vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-7'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-7-left {\n  left: var( --colvw-7 , 58.3333vw );\n}",
      "example": "\n<style>\n  #colvw-7 {\n    background-color: #aaa;\n    left: 58.3333vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-7'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-7-right {\n  right: var( --colvw-7 , 58.3333vw );\n}",
      "example": "\n<style>\n  #colvw-7 {\n    background-color: #aaa;\n    right: 58.3333vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-7'></div>"
    }
  },
  "layouts-colvw-7-3": {
    "width": {
      "output": "\n@mixin colvw-7-3-width {\n  width: var( --colvw-7-3 , 60.4167vw );\n}",
      "example": "\n<style>\n  #colvw-7-3 {\n    background-color: #aaa;\n    width: 60.4167vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-7-3'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-7-3-min-width {\n  min-width: var( --colvw-7-3 , 60.4167vw );\n}",
      "example": "\n<style>\n  #colvw-7-3 {\n    background-color: #aaa;\n    min-width: 60.4167vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-7-3'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-7-3-left {\n  left: var( --colvw-7-3 , 60.4167vw );\n}",
      "example": "\n<style>\n  #colvw-7-3 {\n    background-color: #aaa;\n    left: 60.4167vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-7-3'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-7-3-right {\n  right: var( --colvw-7-3 , 60.4167vw );\n}",
      "example": "\n<style>\n  #colvw-7-3 {\n    background-color: #aaa;\n    right: 60.4167vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-7-3'></div>"
    }
  },
  "layouts-colvw-7-4": {
    "width": {
      "output": "\n@mixin colvw-7-4-width {\n  width: var( --colvw-7-4 , 61.1111vw );\n}",
      "example": "\n<style>\n  #colvw-7-4 {\n    background-color: #aaa;\n    width: 61.1111vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-7-4'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-7-4-min-width {\n  min-width: var( --colvw-7-4 , 61.1111vw );\n}",
      "example": "\n<style>\n  #colvw-7-4 {\n    background-color: #aaa;\n    min-width: 61.1111vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-7-4'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-7-4-left {\n  left: var( --colvw-7-4 , 61.1111vw );\n}",
      "example": "\n<style>\n  #colvw-7-4 {\n    background-color: #aaa;\n    left: 61.1111vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-7-4'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-7-4-right {\n  right: var( --colvw-7-4 , 61.1111vw );\n}",
      "example": "\n<style>\n  #colvw-7-4 {\n    background-color: #aaa;\n    right: 61.1111vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-7-4'></div>"
    }
  },
  "layouts-colvw-7-6": {
    "width": {
      "output": "\n@mixin colvw-7-6-width {\n  width: var( --colvw-7-6 , 62.5vw );\n}",
      "example": "\n<style>\n  #colvw-7-6 {\n    background-color: #aaa;\n    width: 62.5vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-7-6'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-7-6-min-width {\n  min-width: var( --colvw-7-6 , 62.5vw );\n}",
      "example": "\n<style>\n  #colvw-7-6 {\n    background-color: #aaa;\n    min-width: 62.5vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-7-6'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-7-6-left {\n  left: var( --colvw-7-6 , 62.5vw );\n}",
      "example": "\n<style>\n  #colvw-7-6 {\n    background-color: #aaa;\n    left: 62.5vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-7-6'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-7-6-right {\n  right: var( --colvw-7-6 , 62.5vw );\n}",
      "example": "\n<style>\n  #colvw-7-6 {\n    background-color: #aaa;\n    right: 62.5vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-7-6'></div>"
    }
  },
  "layouts-colvw-7-8": {
    "width": {
      "output": "\n@mixin colvw-7-8-width {\n  width: var( --colvw-7-8 , 63.8889vw );\n}",
      "example": "\n<style>\n  #colvw-7-8 {\n    background-color: #aaa;\n    width: 63.8889vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-7-8'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-7-8-min-width {\n  min-width: var( --colvw-7-8 , 63.8889vw );\n}",
      "example": "\n<style>\n  #colvw-7-8 {\n    background-color: #aaa;\n    min-width: 63.8889vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-7-8'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-7-8-left {\n  left: var( --colvw-7-8 , 63.8889vw );\n}",
      "example": "\n<style>\n  #colvw-7-8 {\n    background-color: #aaa;\n    left: 63.8889vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-7-8'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-7-8-right {\n  right: var( --colvw-7-8 , 63.8889vw );\n}",
      "example": "\n<style>\n  #colvw-7-8 {\n    background-color: #aaa;\n    right: 63.8889vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-7-8'></div>"
    }
  },
  "layouts-colvw-7-9": {
    "width": {
      "output": "\n@mixin colvw-7-9-width {\n  width: var( --colvw-7-9 , 64.5833vw );\n}",
      "example": "\n<style>\n  #colvw-7-9 {\n    background-color: #aaa;\n    width: 64.5833vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-7-9'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-7-9-min-width {\n  min-width: var( --colvw-7-9 , 64.5833vw );\n}",
      "example": "\n<style>\n  #colvw-7-9 {\n    background-color: #aaa;\n    min-width: 64.5833vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-7-9'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-7-9-left {\n  left: var( --colvw-7-9 , 64.5833vw );\n}",
      "example": "\n<style>\n  #colvw-7-9 {\n    background-color: #aaa;\n    left: 64.5833vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-7-9'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-7-9-right {\n  right: var( --colvw-7-9 , 64.5833vw );\n}",
      "example": "\n<style>\n  #colvw-7-9 {\n    background-color: #aaa;\n    right: 64.5833vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-7-9'></div>"
    }
  },
  "layouts-colvw-8": {
    "width": {
      "output": "\n@mixin colvw-8-width {\n  width: var( --colvw-8 , 66.6667vw );\n}",
      "example": "\n<style>\n  #colvw-8 {\n    background-color: #aaa;\n    width: 66.6667vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-8'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-8-min-width {\n  min-width: var( --colvw-8 , 66.6667vw );\n}",
      "example": "\n<style>\n  #colvw-8 {\n    background-color: #aaa;\n    min-width: 66.6667vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-8'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-8-left {\n  left: var( --colvw-8 , 66.6667vw );\n}",
      "example": "\n<style>\n  #colvw-8 {\n    background-color: #aaa;\n    left: 66.6667vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-8'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-8-right {\n  right: var( --colvw-8 , 66.6667vw );\n}",
      "example": "\n<style>\n  #colvw-8 {\n    background-color: #aaa;\n    right: 66.6667vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-8'></div>"
    }
  },
  "layouts-colvw-8-3": {
    "width": {
      "output": "\n@mixin colvw-8-3-width {\n  width: var( --colvw-8-3 , 68.75vw );\n}",
      "example": "\n<style>\n  #colvw-8-3 {\n    background-color: #aaa;\n    width: 68.75vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-8-3'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-8-3-min-width {\n  min-width: var( --colvw-8-3 , 68.75vw );\n}",
      "example": "\n<style>\n  #colvw-8-3 {\n    background-color: #aaa;\n    min-width: 68.75vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-8-3'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-8-3-left {\n  left: var( --colvw-8-3 , 68.75vw );\n}",
      "example": "\n<style>\n  #colvw-8-3 {\n    background-color: #aaa;\n    left: 68.75vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-8-3'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-8-3-right {\n  right: var( --colvw-8-3 , 68.75vw );\n}",
      "example": "\n<style>\n  #colvw-8-3 {\n    background-color: #aaa;\n    right: 68.75vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-8-3'></div>"
    }
  },
  "layouts-colvw-8-4": {
    "width": {
      "output": "\n@mixin colvw-8-4-width {\n  width: var( --colvw-8-4 , 69.4444vw );\n}",
      "example": "\n<style>\n  #colvw-8-4 {\n    background-color: #aaa;\n    width: 69.4444vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-8-4'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-8-4-min-width {\n  min-width: var( --colvw-8-4 , 69.4444vw );\n}",
      "example": "\n<style>\n  #colvw-8-4 {\n    background-color: #aaa;\n    min-width: 69.4444vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-8-4'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-8-4-left {\n  left: var( --colvw-8-4 , 69.4444vw );\n}",
      "example": "\n<style>\n  #colvw-8-4 {\n    background-color: #aaa;\n    left: 69.4444vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-8-4'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-8-4-right {\n  right: var( --colvw-8-4 , 69.4444vw );\n}",
      "example": "\n<style>\n  #colvw-8-4 {\n    background-color: #aaa;\n    right: 69.4444vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-8-4'></div>"
    }
  },
  "layouts-colvw-8-6": {
    "width": {
      "output": "\n@mixin colvw-8-6-width {\n  width: var( --colvw-8-6 , 70.8333vw );\n}",
      "example": "\n<style>\n  #colvw-8-6 {\n    background-color: #aaa;\n    width: 70.8333vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-8-6'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-8-6-min-width {\n  min-width: var( --colvw-8-6 , 70.8333vw );\n}",
      "example": "\n<style>\n  #colvw-8-6 {\n    background-color: #aaa;\n    min-width: 70.8333vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-8-6'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-8-6-left {\n  left: var( --colvw-8-6 , 70.8333vw );\n}",
      "example": "\n<style>\n  #colvw-8-6 {\n    background-color: #aaa;\n    left: 70.8333vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-8-6'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-8-6-right {\n  right: var( --colvw-8-6 , 70.8333vw );\n}",
      "example": "\n<style>\n  #colvw-8-6 {\n    background-color: #aaa;\n    right: 70.8333vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-8-6'></div>"
    }
  },
  "layouts-colvw-8-8": {
    "width": {
      "output": "\n@mixin colvw-8-8-width {\n  width: var( --colvw-8-8 , 72.2222vw );\n}",
      "example": "\n<style>\n  #colvw-8-8 {\n    background-color: #aaa;\n    width: 72.2222vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-8-8'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-8-8-min-width {\n  min-width: var( --colvw-8-8 , 72.2222vw );\n}",
      "example": "\n<style>\n  #colvw-8-8 {\n    background-color: #aaa;\n    min-width: 72.2222vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-8-8'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-8-8-left {\n  left: var( --colvw-8-8 , 72.2222vw );\n}",
      "example": "\n<style>\n  #colvw-8-8 {\n    background-color: #aaa;\n    left: 72.2222vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-8-8'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-8-8-right {\n  right: var( --colvw-8-8 , 72.2222vw );\n}",
      "example": "\n<style>\n  #colvw-8-8 {\n    background-color: #aaa;\n    right: 72.2222vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-8-8'></div>"
    }
  },
  "layouts-colvw-8-9": {
    "width": {
      "output": "\n@mixin colvw-8-9-width {\n  width: var( --colvw-8-9 , 72.9167vw );\n}",
      "example": "\n<style>\n  #colvw-8-9 {\n    background-color: #aaa;\n    width: 72.9167vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-8-9'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-8-9-min-width {\n  min-width: var( --colvw-8-9 , 72.9167vw );\n}",
      "example": "\n<style>\n  #colvw-8-9 {\n    background-color: #aaa;\n    min-width: 72.9167vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-8-9'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-8-9-left {\n  left: var( --colvw-8-9 , 72.9167vw );\n}",
      "example": "\n<style>\n  #colvw-8-9 {\n    background-color: #aaa;\n    left: 72.9167vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-8-9'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-8-9-right {\n  right: var( --colvw-8-9 , 72.9167vw );\n}",
      "example": "\n<style>\n  #colvw-8-9 {\n    background-color: #aaa;\n    right: 72.9167vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-8-9'></div>"
    }
  },
  "layouts-colvw-9": {
    "width": {
      "output": "\n@mixin colvw-9-width {\n  width: var( --colvw-9 , 75vw );\n}",
      "example": "\n<style>\n  #colvw-9 {\n    background-color: #aaa;\n    width: 75vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-9'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-9-min-width {\n  min-width: var( --colvw-9 , 75vw );\n}",
      "example": "\n<style>\n  #colvw-9 {\n    background-color: #aaa;\n    min-width: 75vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-9'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-9-left {\n  left: var( --colvw-9 , 75vw );\n}",
      "example": "\n<style>\n  #colvw-9 {\n    background-color: #aaa;\n    left: 75vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-9'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-9-right {\n  right: var( --colvw-9 , 75vw );\n}",
      "example": "\n<style>\n  #colvw-9 {\n    background-color: #aaa;\n    right: 75vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-9'></div>"
    }
  },
  "layouts-colvw-9-3": {
    "width": {
      "output": "\n@mixin colvw-9-3-width {\n  width: var( --colvw-9-3 , 77.0833vw );\n}",
      "example": "\n<style>\n  #colvw-9-3 {\n    background-color: #aaa;\n    width: 77.0833vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-9-3'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-9-3-min-width {\n  min-width: var( --colvw-9-3 , 77.0833vw );\n}",
      "example": "\n<style>\n  #colvw-9-3 {\n    background-color: #aaa;\n    min-width: 77.0833vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-9-3'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-9-3-left {\n  left: var( --colvw-9-3 , 77.0833vw );\n}",
      "example": "\n<style>\n  #colvw-9-3 {\n    background-color: #aaa;\n    left: 77.0833vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-9-3'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-9-3-right {\n  right: var( --colvw-9-3 , 77.0833vw );\n}",
      "example": "\n<style>\n  #colvw-9-3 {\n    background-color: #aaa;\n    right: 77.0833vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-9-3'></div>"
    }
  },
  "layouts-colvw-9-4": {
    "width": {
      "output": "\n@mixin colvw-9-4-width {\n  width: var( --colvw-9-4 , 77.7778vw );\n}",
      "example": "\n<style>\n  #colvw-9-4 {\n    background-color: #aaa;\n    width: 77.7778vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-9-4'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-9-4-min-width {\n  min-width: var( --colvw-9-4 , 77.7778vw );\n}",
      "example": "\n<style>\n  #colvw-9-4 {\n    background-color: #aaa;\n    min-width: 77.7778vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-9-4'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-9-4-left {\n  left: var( --colvw-9-4 , 77.7778vw );\n}",
      "example": "\n<style>\n  #colvw-9-4 {\n    background-color: #aaa;\n    left: 77.7778vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-9-4'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-9-4-right {\n  right: var( --colvw-9-4 , 77.7778vw );\n}",
      "example": "\n<style>\n  #colvw-9-4 {\n    background-color: #aaa;\n    right: 77.7778vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-9-4'></div>"
    }
  },
  "layouts-colvw-9-6": {
    "width": {
      "output": "\n@mixin colvw-9-6-width {\n  width: var( --colvw-9-6 , 79.1667vw );\n}",
      "example": "\n<style>\n  #colvw-9-6 {\n    background-color: #aaa;\n    width: 79.1667vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-9-6'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-9-6-min-width {\n  min-width: var( --colvw-9-6 , 79.1667vw );\n}",
      "example": "\n<style>\n  #colvw-9-6 {\n    background-color: #aaa;\n    min-width: 79.1667vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-9-6'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-9-6-left {\n  left: var( --colvw-9-6 , 79.1667vw );\n}",
      "example": "\n<style>\n  #colvw-9-6 {\n    background-color: #aaa;\n    left: 79.1667vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-9-6'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-9-6-right {\n  right: var( --colvw-9-6 , 79.1667vw );\n}",
      "example": "\n<style>\n  #colvw-9-6 {\n    background-color: #aaa;\n    right: 79.1667vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-9-6'></div>"
    }
  },
  "layouts-colvw-9-8": {
    "width": {
      "output": "\n@mixin colvw-9-8-width {\n  width: var( --colvw-9-8 , 80.5556vw );\n}",
      "example": "\n<style>\n  #colvw-9-8 {\n    background-color: #aaa;\n    width: 80.5556vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-9-8'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-9-8-min-width {\n  min-width: var( --colvw-9-8 , 80.5556vw );\n}",
      "example": "\n<style>\n  #colvw-9-8 {\n    background-color: #aaa;\n    min-width: 80.5556vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-9-8'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-9-8-left {\n  left: var( --colvw-9-8 , 80.5556vw );\n}",
      "example": "\n<style>\n  #colvw-9-8 {\n    background-color: #aaa;\n    left: 80.5556vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-9-8'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-9-8-right {\n  right: var( --colvw-9-8 , 80.5556vw );\n}",
      "example": "\n<style>\n  #colvw-9-8 {\n    background-color: #aaa;\n    right: 80.5556vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-9-8'></div>"
    }
  },
  "layouts-colvw-9-9": {
    "width": {
      "output": "\n@mixin colvw-9-9-width {\n  width: var( --colvw-9-9 , 81.25vw );\n}",
      "example": "\n<style>\n  #colvw-9-9 {\n    background-color: #aaa;\n    width: 81.25vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-9-9'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-9-9-min-width {\n  min-width: var( --colvw-9-9 , 81.25vw );\n}",
      "example": "\n<style>\n  #colvw-9-9 {\n    background-color: #aaa;\n    min-width: 81.25vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-9-9'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-9-9-left {\n  left: var( --colvw-9-9 , 81.25vw );\n}",
      "example": "\n<style>\n  #colvw-9-9 {\n    background-color: #aaa;\n    left: 81.25vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-9-9'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-9-9-right {\n  right: var( --colvw-9-9 , 81.25vw );\n}",
      "example": "\n<style>\n  #colvw-9-9 {\n    background-color: #aaa;\n    right: 81.25vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-9-9'></div>"
    }
  },
  "layouts-colvw-10": {
    "width": {
      "output": "\n@mixin colvw-10-width {\n  width: var( --colvw-10 , 83.3333vw );\n}",
      "example": "\n<style>\n  #colvw-10 {\n    background-color: #aaa;\n    width: 83.3333vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-10'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-10-min-width {\n  min-width: var( --colvw-10 , 83.3333vw );\n}",
      "example": "\n<style>\n  #colvw-10 {\n    background-color: #aaa;\n    min-width: 83.3333vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-10'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-10-left {\n  left: var( --colvw-10 , 83.3333vw );\n}",
      "example": "\n<style>\n  #colvw-10 {\n    background-color: #aaa;\n    left: 83.3333vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-10'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-10-right {\n  right: var( --colvw-10 , 83.3333vw );\n}",
      "example": "\n<style>\n  #colvw-10 {\n    background-color: #aaa;\n    right: 83.3333vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-10'></div>"
    }
  },
  "layouts-colvw-10-3": {
    "width": {
      "output": "\n@mixin colvw-10-3-width {\n  width: var( --colvw-10-3 , 85.4167vw );\n}",
      "example": "\n<style>\n  #colvw-10-3 {\n    background-color: #aaa;\n    width: 85.4167vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-10-3'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-10-3-min-width {\n  min-width: var( --colvw-10-3 , 85.4167vw );\n}",
      "example": "\n<style>\n  #colvw-10-3 {\n    background-color: #aaa;\n    min-width: 85.4167vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-10-3'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-10-3-left {\n  left: var( --colvw-10-3 , 85.4167vw );\n}",
      "example": "\n<style>\n  #colvw-10-3 {\n    background-color: #aaa;\n    left: 85.4167vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-10-3'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-10-3-right {\n  right: var( --colvw-10-3 , 85.4167vw );\n}",
      "example": "\n<style>\n  #colvw-10-3 {\n    background-color: #aaa;\n    right: 85.4167vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-10-3'></div>"
    }
  },
  "layouts-colvw-10-4": {
    "width": {
      "output": "\n@mixin colvw-10-4-width {\n  width: var( --colvw-10-4 , 86.1111vw );\n}",
      "example": "\n<style>\n  #colvw-10-4 {\n    background-color: #aaa;\n    width: 86.1111vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-10-4'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-10-4-min-width {\n  min-width: var( --colvw-10-4 , 86.1111vw );\n}",
      "example": "\n<style>\n  #colvw-10-4 {\n    background-color: #aaa;\n    min-width: 86.1111vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-10-4'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-10-4-left {\n  left: var( --colvw-10-4 , 86.1111vw );\n}",
      "example": "\n<style>\n  #colvw-10-4 {\n    background-color: #aaa;\n    left: 86.1111vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-10-4'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-10-4-right {\n  right: var( --colvw-10-4 , 86.1111vw );\n}",
      "example": "\n<style>\n  #colvw-10-4 {\n    background-color: #aaa;\n    right: 86.1111vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-10-4'></div>"
    }
  },
  "layouts-colvw-10-6": {
    "width": {
      "output": "\n@mixin colvw-10-6-width {\n  width: var( --colvw-10-6 , 87.5vw );\n}",
      "example": "\n<style>\n  #colvw-10-6 {\n    background-color: #aaa;\n    width: 87.5vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-10-6'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-10-6-min-width {\n  min-width: var( --colvw-10-6 , 87.5vw );\n}",
      "example": "\n<style>\n  #colvw-10-6 {\n    background-color: #aaa;\n    min-width: 87.5vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-10-6'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-10-6-left {\n  left: var( --colvw-10-6 , 87.5vw );\n}",
      "example": "\n<style>\n  #colvw-10-6 {\n    background-color: #aaa;\n    left: 87.5vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-10-6'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-10-6-right {\n  right: var( --colvw-10-6 , 87.5vw );\n}",
      "example": "\n<style>\n  #colvw-10-6 {\n    background-color: #aaa;\n    right: 87.5vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-10-6'></div>"
    }
  },
  "layouts-colvw-10-8": {
    "width": {
      "output": "\n@mixin colvw-10-8-width {\n  width: var( --colvw-10-8 , 88.8889vw );\n}",
      "example": "\n<style>\n  #colvw-10-8 {\n    background-color: #aaa;\n    width: 88.8889vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-10-8'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-10-8-min-width {\n  min-width: var( --colvw-10-8 , 88.8889vw );\n}",
      "example": "\n<style>\n  #colvw-10-8 {\n    background-color: #aaa;\n    min-width: 88.8889vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-10-8'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-10-8-left {\n  left: var( --colvw-10-8 , 88.8889vw );\n}",
      "example": "\n<style>\n  #colvw-10-8 {\n    background-color: #aaa;\n    left: 88.8889vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-10-8'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-10-8-right {\n  right: var( --colvw-10-8 , 88.8889vw );\n}",
      "example": "\n<style>\n  #colvw-10-8 {\n    background-color: #aaa;\n    right: 88.8889vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-10-8'></div>"
    }
  },
  "layouts-colvw-10-9": {
    "width": {
      "output": "\n@mixin colvw-10-9-width {\n  width: var( --colvw-10-9 , 89.5833vw );\n}",
      "example": "\n<style>\n  #colvw-10-9 {\n    background-color: #aaa;\n    width: 89.5833vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-10-9'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-10-9-min-width {\n  min-width: var( --colvw-10-9 , 89.5833vw );\n}",
      "example": "\n<style>\n  #colvw-10-9 {\n    background-color: #aaa;\n    min-width: 89.5833vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-10-9'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-10-9-left {\n  left: var( --colvw-10-9 , 89.5833vw );\n}",
      "example": "\n<style>\n  #colvw-10-9 {\n    background-color: #aaa;\n    left: 89.5833vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-10-9'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-10-9-right {\n  right: var( --colvw-10-9 , 89.5833vw );\n}",
      "example": "\n<style>\n  #colvw-10-9 {\n    background-color: #aaa;\n    right: 89.5833vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-10-9'></div>"
    }
  },
  "layouts-colvw-11": {
    "width": {
      "output": "\n@mixin colvw-11-width {\n  width: var( --colvw-11 , 91.6667vw );\n}",
      "example": "\n<style>\n  #colvw-11 {\n    background-color: #aaa;\n    width: 91.6667vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-11'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-11-min-width {\n  min-width: var( --colvw-11 , 91.6667vw );\n}",
      "example": "\n<style>\n  #colvw-11 {\n    background-color: #aaa;\n    min-width: 91.6667vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-11'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-11-left {\n  left: var( --colvw-11 , 91.6667vw );\n}",
      "example": "\n<style>\n  #colvw-11 {\n    background-color: #aaa;\n    left: 91.6667vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-11'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-11-right {\n  right: var( --colvw-11 , 91.6667vw );\n}",
      "example": "\n<style>\n  #colvw-11 {\n    background-color: #aaa;\n    right: 91.6667vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-11'></div>"
    }
  },
  "layouts-colvw-11-3": {
    "width": {
      "output": "\n@mixin colvw-11-3-width {\n  width: var( --colvw-11-3 , 93.75vw );\n}",
      "example": "\n<style>\n  #colvw-11-3 {\n    background-color: #aaa;\n    width: 93.75vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-11-3'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-11-3-min-width {\n  min-width: var( --colvw-11-3 , 93.75vw );\n}",
      "example": "\n<style>\n  #colvw-11-3 {\n    background-color: #aaa;\n    min-width: 93.75vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-11-3'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-11-3-left {\n  left: var( --colvw-11-3 , 93.75vw );\n}",
      "example": "\n<style>\n  #colvw-11-3 {\n    background-color: #aaa;\n    left: 93.75vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-11-3'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-11-3-right {\n  right: var( --colvw-11-3 , 93.75vw );\n}",
      "example": "\n<style>\n  #colvw-11-3 {\n    background-color: #aaa;\n    right: 93.75vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-11-3'></div>"
    }
  },
  "layouts-colvw-11-4": {
    "width": {
      "output": "\n@mixin colvw-11-4-width {\n  width: var( --colvw-11-4 , 94.4444vw );\n}",
      "example": "\n<style>\n  #colvw-11-4 {\n    background-color: #aaa;\n    width: 94.4444vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-11-4'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-11-4-min-width {\n  min-width: var( --colvw-11-4 , 94.4444vw );\n}",
      "example": "\n<style>\n  #colvw-11-4 {\n    background-color: #aaa;\n    min-width: 94.4444vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-11-4'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-11-4-left {\n  left: var( --colvw-11-4 , 94.4444vw );\n}",
      "example": "\n<style>\n  #colvw-11-4 {\n    background-color: #aaa;\n    left: 94.4444vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-11-4'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-11-4-right {\n  right: var( --colvw-11-4 , 94.4444vw );\n}",
      "example": "\n<style>\n  #colvw-11-4 {\n    background-color: #aaa;\n    right: 94.4444vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-11-4'></div>"
    }
  },
  "layouts-colvw-11-6": {
    "width": {
      "output": "\n@mixin colvw-11-6-width {\n  width: var( --colvw-11-6 , 95.8333vw );\n}",
      "example": "\n<style>\n  #colvw-11-6 {\n    background-color: #aaa;\n    width: 95.8333vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-11-6'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-11-6-min-width {\n  min-width: var( --colvw-11-6 , 95.8333vw );\n}",
      "example": "\n<style>\n  #colvw-11-6 {\n    background-color: #aaa;\n    min-width: 95.8333vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-11-6'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-11-6-left {\n  left: var( --colvw-11-6 , 95.8333vw );\n}",
      "example": "\n<style>\n  #colvw-11-6 {\n    background-color: #aaa;\n    left: 95.8333vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-11-6'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-11-6-right {\n  right: var( --colvw-11-6 , 95.8333vw );\n}",
      "example": "\n<style>\n  #colvw-11-6 {\n    background-color: #aaa;\n    right: 95.8333vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-11-6'></div>"
    }
  },
  "layouts-colvw-11-8": {
    "width": {
      "output": "\n@mixin colvw-11-8-width {\n  width: var( --colvw-11-8 , 97.2222vw );\n}",
      "example": "\n<style>\n  #colvw-11-8 {\n    background-color: #aaa;\n    width: 97.2222vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-11-8'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-11-8-min-width {\n  min-width: var( --colvw-11-8 , 97.2222vw );\n}",
      "example": "\n<style>\n  #colvw-11-8 {\n    background-color: #aaa;\n    min-width: 97.2222vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-11-8'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-11-8-left {\n  left: var( --colvw-11-8 , 97.2222vw );\n}",
      "example": "\n<style>\n  #colvw-11-8 {\n    background-color: #aaa;\n    left: 97.2222vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-11-8'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-11-8-right {\n  right: var( --colvw-11-8 , 97.2222vw );\n}",
      "example": "\n<style>\n  #colvw-11-8 {\n    background-color: #aaa;\n    right: 97.2222vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-11-8'></div>"
    }
  },
  "layouts-colvw-11-9": {
    "width": {
      "output": "\n@mixin colvw-11-9-width {\n  width: var( --colvw-11-9 , 97.9167vw );\n}",
      "example": "\n<style>\n  #colvw-11-9 {\n    background-color: #aaa;\n    width: 97.9167vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-11-9'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-11-9-min-width {\n  min-width: var( --colvw-11-9 , 97.9167vw );\n}",
      "example": "\n<style>\n  #colvw-11-9 {\n    background-color: #aaa;\n    min-width: 97.9167vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-11-9'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-11-9-left {\n  left: var( --colvw-11-9 , 97.9167vw );\n}",
      "example": "\n<style>\n  #colvw-11-9 {\n    background-color: #aaa;\n    left: 97.9167vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-11-9'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-11-9-right {\n  right: var( --colvw-11-9 , 97.9167vw );\n}",
      "example": "\n<style>\n  #colvw-11-9 {\n    background-color: #aaa;\n    right: 97.9167vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-11-9'></div>"
    }
  },
  "layouts-colvw-12": {
    "width": {
      "output": "\n@mixin colvw-12-width {\n  width: var( --colvw-12 , 100vw );\n}",
      "example": "\n<style>\n  #colvw-12 {\n    background-color: #aaa;\n    width: 100vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-12'></div>"
    },
    "min-width": {
      "output": "\n@mixin colvw-12-min-width {\n  min-width: var( --colvw-12 , 100vw );\n}",
      "example": "\n<style>\n  #colvw-12 {\n    background-color: #aaa;\n    min-width: 100vw;\n    height: 100px;\n  }\n</style>\n<div id='colvw-12'></div>"
    },
    "left": {
      "output": "\n@mixin colvw-12-left {\n  left: var( --colvw-12 , 100vw );\n}",
      "example": "\n<style>\n  #colvw-12 {\n    background-color: #aaa;\n    left: 100vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-12'></div>"
    },
    "right": {
      "output": "\n@mixin colvw-12-right {\n  right: var( --colvw-12 , 100vw );\n}",
      "example": "\n<style>\n  #colvw-12 {\n    background-color: #aaa;\n    right: 100vw;\n    height: 100px; position: absolute;\n  }\n</style>\n<div id='colvw-12'></div>"
    }
  }
}