@vgip/meta-ui 2.0.0 → 2.1.0

package/vendor/volta3/scss/lib/_reset.scss

@@ -0,0 +1,110 @@
+//
+// Copyright (c) 2018-present, Vonage. All rights reserved.
+//
+
+div,
+span,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+a,
+em,
+img,
+ins,
+small,
+strong,
+sub,
+sup,
+i,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+footer,
+header,
+nav,
+section,
+time,
+mark,
+audio,
+video {
+  border: 0;
+  font: inherit;
+  font-size: 100%;
+  margin: 0;
+  padding: 0;
+  vertical-align: baseline;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+ol,
+ul {
+  list-style: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+main {
+  display: block; //for IE10-11
+}
+
+p,
+a,
+span,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+img {
+  height: auto;
+  max-width: 100%;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}

package/vendor/volta3/scss/lib/_type.scss

@@ -0,0 +1,345 @@
+@use "mediaqueries";
+@use "variables";
+
+//
+// Copyright (c) 2018-present, Vonage. All rights reserved.
+//
+
+@font-face {
+    font-family: 'Spezia';
+    font-style: normal;
+    font-weight: 600;
+    src: url(variables.$Vlt-font-url + 'Spezia-SemiBold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+       url(variables.$Vlt-font-url + 'Spezia-SemiBold.woff2') format('woff2'), /* Super Modern Browsers */
+       url(variables.$Vlt-font-url + 'Spezia-SemiBold.woff') format('woff'), /* Pretty Modern Browsers */
+       url(variables.$Vlt-font-url + 'Spezia-SemiBold.ttf')  format('truetype'), /* Safari, Android, iOS */
+}
+
+@font-face {
+    font-family: 'Spezia';
+    font-style: normal;
+    font-weight: 800;
+    src: url(variables.$Vlt-font-url + 'Spezia-WideMedium.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+       url(variables.$Vlt-font-url + 'Spezia-WideMedium.woff2') format('woff2'), /* Super Modern Browsers */
+       url(variables.$Vlt-font-url + 'Spezia-WideMedium.woff') format('woff'), /* Pretty Modern Browsers */
+       url(variables.$Vlt-font-url + 'Spezia-WideMedium.ttf')  format('truetype'), /* Safari, Android, iOS */
+}
+
+@font-face {
+    font-family: 'Spezia';
+    font-style: normal;
+    font-weight: 900;
+    src: url(variables.$Vlt-font-url + 'Spezia-WideMedium.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+       url(variables.$Vlt-font-url + 'Spezia-WideMedium.woff2') format('woff2'), /* Super Modern Browsers */
+       url(variables.$Vlt-font-url + 'Spezia-WideMedium.woff') format('woff'), /* Pretty Modern Browsers */
+       url(variables.$Vlt-font-url + 'Spezia-WideMedium.ttf')  format('truetype'), /* Safari, Android, iOS */
+}
+
+@font-face {
+    font-family: 'Spezia';
+    font-style: normal;
+    font-weight: normal;
+    src: url(variables.$Vlt-font-url + 'Spezia-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+       url(variables.$Vlt-font-url + 'Spezia-Regular.woff2') format('woff2'), /* Super Modern Browsers */
+       url(variables.$Vlt-font-url + 'Spezia-Regular.woff') format('woff'), /* Pretty Modern Browsers */
+       url(variables.$Vlt-font-url + 'Spezia-Regular.ttf')  format('truetype'), /* Safari, Android, iOS */
+}
+
+html {
+	font-size: 62.5%;
+}
+
+body {
+	color: variables.$black;
+	font-family: 'spezia', sans-serif;
+	font-size: 1.4rem;
+	line-height: 2rem;
+}
+
+* {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+input,
+select,
+textarea,
+button {
+	font-family: inherit;
+}
+
+p,
+th,
+td,
+label,
+button,
+li,
+a {
+	font-size: 1.4rem;
+	font-weight: 400;
+	line-height: 2rem;
+}
+
+b,
+strong {
+	font-weight: 600;
+}
+
+a {
+	text-decoration: none;
+}
+
+p,
+th,
+td,
+li,
+span,
+label,
+small,
+nav {
+	a:not([class]) {
+		@extend .Vlt-text-link !optional;
+	}
+}
+
+.Vlt-title,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	color: variables.$black;
+
+	a {
+		color: inherit;
+		font-size: inherit;
+		font-weight: inherit;
+		line-height: inherit;
+	}
+}
+
+p {
+	color: variables.$black;
+	margin-bottom: variables.$unit1;
+}
+
+.p-large {
+	font-size: 1.6rem;
+	line-height: 2.3rem;
+	margin-bottom: variables.$unit2;
+}
+
+.Vlt-title--icon {
+	display: flex;
+
+	svg {
+		fill: variables.$black;
+		margin-right: variables.$unit1;
+	}
+
+	code,
+	.Vlt-badge {
+		margin: 0 0.3em;
+	}
+}
+
+.Vlt-title {
+	&--margin-top1 {
+		margin-top: variables.$unit1;
+	}
+
+	&--margin-top2 {
+		margin-top: variables.$unit2;
+	}
+
+	&--margin-top3 {
+		margin-top: variables.$unit3;
+	}
+
+	&--margin-top4 {
+		margin-top: variables.$unit4;
+	}
+}
+
+.Vlt-title--center {
+	justify-content: center;
+	text-align: center;
+}
+
+.Vlt-title--nomargin {
+	margin: 0;
+}
+
+.Vlt-title--h1,
+h1 {
+	font-size: 3.1rem;
+	font-weight: 800;
+	letter-spacing: -2px;
+	line-height: 3.6rem;
+	margin-bottom: variables.$unit3;
+
+	@media #{mediaqueries.$L-plus} {
+		font-size: 3.9rem;
+		line-height: 4.3rem;
+	}
+
+	&.Vlt-title--icon svg {
+		flex: 0 0 25px;
+		height: 25px;
+		margin-top: 5px;
+		width: 25px;
+
+		@media #{mediaqueries.$L-plus} {
+			flex: 0 0 30px;
+			height: 30px;
+			width: 30px;
+		}
+	}
+}
+
+.Vlt-title--h2,
+h2 {
+	font-size: 2.7rem;
+	font-weight: 800;
+	letter-spacing: -1.5px;
+	line-height: 3.1rem;
+	margin-bottom: variables.$unit2;
+
+	@media #{mediaqueries.$L-plus} {
+		font-size: 2.9rem;
+		line-height: 3.4rem;
+	}
+
+	&.Vlt-title--icon svg {
+		flex: 0 0 21px;
+		height: 21px;
+		margin-top: 4px;
+		width: 21px;
+
+		@media #{mediaqueries.$L-plus} {
+			flex: 0 0 25px;
+			height: 25px;
+			width: 25px;
+		}
+	}
+}
+
+.Vlt-title--h3,
+h3 {
+	font-size: 2.3rem;
+	font-weight: 800;
+	letter-spacing: -1px;
+	line-height: 2.6rem;
+	margin-bottom: variables.$unit2;
+
+	@media #{mediaqueries.$L-plus} {
+		font-size: 2.3rem;
+		line-height: 2.6rem;
+	}
+
+	&.Vlt-title--icon svg {
+		flex: 0 0 21px;
+		height: 21px;
+		margin-top: 2px;
+		width: 21px;
+
+		@media #{mediaqueries.$L-plus} {
+			flex: 0 0 21px;
+			height: 21px;
+			width: 21px;
+		}
+	}
+}
+
+.Vlt-title--h4,
+h4 {
+	font-size: 1.9rem;
+	font-weight: 800;
+	letter-spacing: -1px;
+	line-height: 2.3rem;
+	margin-bottom: variables.$unit1;
+
+	@media #{mediaqueries.$L-plus} {
+		font-size: 2rem;
+		line-height: 2.5rem;
+	}
+
+	&.Vlt-title--icon svg {
+		flex: 0 0 16px;
+		height: 16px;
+		margin-top: 4px;
+		width: 16px;
+	}
+}
+
+.Vlt-title--h5,
+h5 {
+	font-size: 1.5rem;
+	font-weight: 600;
+	letter-spacing: -0.25px;
+	line-height: 2rem;
+	margin-bottom: variables.$unit1;
+
+	&.Vlt-title--icon svg {
+		flex: 0 0 14px;
+		height: 14px;
+		margin-top: 3px;
+		width: 14px;
+	}
+}
+
+small {
+	font-size: 1.2rem;
+	font-weight: 400;
+	line-height: 1.6rem;
+}
+
+.Vlt-title,
+h1,
+h2,
+h3,
+h4,
+h5,
+.p-large {
+	small {
+		font-size: 80%;
+		font-weight: inherit;
+		line-height: inherit;
+	}
+}
+
+code {
+	background-color: variables.$grey-lighter;
+	border-radius: 4px;
+	color: variables.$orange-dark;
+	font-family: monospace, monospace;
+	font-size: inherit;
+	line-height: inherit;
+	padding: 3px 4px;
+}
+
+p,
+ul {
+	+ .Vlt-title,
+	+ h1,
+	+ h2,
+	+ h3,
+	+ h4 {
+		padding-top: variables.$unit2;
+	}
+}
+
+.Vlt-text {
+	&--large {
+		font-size: 1.6rem;
+	}
+
+	&--larger {
+		font-size: 2.3rem;
+	}
+
+	&--largest {
+		font-size: 3.5rem;
+	}
+}

package/vendor/volta3/scss/lib/_utils.scss

@@ -0,0 +1,26 @@
+@use "sass:string";
+//
+// Copyright (c) 2018-present, Vonage. All rights reserved.
+//
+
+// // Calculeate brightness of a given color.
+// @function brightness($color) {
+// 	@return ((red($color) * .299) + (green($color) * .587) + (blue($color) * .114)) / 255 * 100%;
+// }
+
+// // Compares contrast of a given color to the light/dark arguments and returns whichever is most "contrasty"
+// @function color-contrast($color, $dark: $black, $light: $white) {
+
+// 	$color-brightness: brightness($color);
+// 	$light-text-brightness: brightness($light);
+// 	$dark-text-brightness: brightness($dark);
+
+// 	@return if(abs($color-brightness - $light-text-brightness) > abs($color-brightness - $dark-text-brightness), $light, $dark);
+// }
+
+@function encode-hex-code($hex) {
+    $hex: '#{$hex}';
+    $hex: string.slice($hex, 2, string.length($hex));
+
+    @return '%23' + $hex;
+}

package/vendor/volta3/scss/lib/_variables.scss

@@ -0,0 +1,115 @@
+//
+// Copyright (c) 2018-present, Vonage. All rights reserved.
+//
+
+$deep-black: #000000;
+$white: #ffffff;
+
+$orange-lighter: #fee3dd;
+$orange-light: #fcac98;
+$orange: #fa7454;
+$orange-dark: #c85e43;
+$orange-darker: #642f22;
+$orange-text: #594430;
+
+$blue-lighter: #d9eefc;
+$blue-light: #80c7f5;
+$blue: #669fc4;
+$blue-dark: #4d7793;
+$blue-darker: #335062;
+$blue-text: #3e4e57;
+
+$red-lighter: #fdecec;
+$red-light: #f79ca6;
+$red: #e84545;
+$red-dark: #ba3737;
+$red-darker: #5d1b1b;
+$red-text: #583c35;
+
+$green-lighter: #d7f2e8;
+$green-light: #86d8b9;
+$green: #06ba77;
+$green-dark: #2d966f;
+$green-darker: #173630;
+$green-text: #414f3e;
+
+$purple-lighter: #f3e9ff;
+$purple-light: #cfa5ff;
+$purple: #b779ff;
+$purple-dark: #871fff;
+$purple-darker: #441080;
+$purple-text: #50495a;
+
+$teal-lighter: #dbf3f6;
+$teal-light: #94dbe4;
+$teal: #4cc3d2;
+$teal-dark: #00848e;
+$teal-darker: #003136;
+$teal-text: #405352;
+
+$yellow-lighter: #fff8c0;
+$yellow-light: #ffe82e;
+$yellow: #ffc100;
+$yellow-dark: #9d7005;
+$yellow-darker: #583b00;
+$yellow-text: #595130;
+
+$indigo-lighter: #f7d3ec;
+$indigo-light: #eb90ce;
+$indigo: #d6219c;
+$indigo-dark: #ab197d;
+$indigo-darker: #560d3d;
+$indigo-text: #3e4155;
+
+$grey-lighter: #f3f3f5;
+$grey-light: #e1e2e6;
+$grey: #c2c4cc;
+$grey-dark: #9b9da3;
+$grey-darker: #616266;
+$black: #131415;
+
+$aqua-lighter: #d0e7f1;
+$aqua-light: #9ccde2;
+$aqua: #3298c4;
+$aqua-dark: #0070a1;
+$aqua-darker: #035879;
+$aqua-text: #004059;
+
+$gradient-blue: #7fc6f4;
+$gradient-peach: #fea18c;
+$gradient-pink: #d5279b;
+$gradient-purple: #8728fb;
+
+$gumdrops1: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%22367px%22%20height%3D%22250px%22%20preserveAspectRatio%3D%22none%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3C!--%20Generator%3A%20Sketch%2056.3%20(81716)%20-%20https%3A%2F%2Fsketch.com%20--%3E%0A%20%20%20%20%3Ctitle%3EGumdrops%201%3C%2Ftitle%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3ClinearGradient%20x1%3D%2213.3144563%25%22%20y1%3D%2234.7953338%25%22%20x2%3D%2250%25%22%20y2%3D%2266.5343565%25%22%20id%3D%22linearGradient-1%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20stop-color%3D%22%23871FFF%22%20offset%3D%220%25%22%3E%3C%2Fstop%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20stop-color%3D%22%237FC8F5%22%20offset%3D%22100%25%22%3E%3C%2Fstop%3E%0A%20%20%20%20%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%20%20%20%20%3ClinearGradient%20x1%3D%2289.0050238%25%22%20y1%3D%2234.3360213%25%22%20x2%3D%2250%25%22%20y2%3D%2267.4497767%25%22%20id%3D%22linearGradient-2%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20stop-color%3D%22%23FFA68C%22%20offset%3D%220%25%22%3E%3C%2Fstop%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20stop-color%3D%22%237FC8F5%22%20stop-opacity%3D%220%22%20offset%3D%22100%25%22%3E%3C%2Fstop%3E%0A%20%20%20%20%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%20%20%20%20%3Crect%20id%3D%22path-3%22%20x%3D%220%22%20y%3D%221267%22%20width%3D%22367%22%20height%3D%22250%22%3E%3C%2Frect%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Cg%20id%3D%22Components%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22gradients%22%20transform%3D%22translate(-264.000000%2C%20-1527.000000)%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Group-2%22%20transform%3D%22translate(264.000000%2C%20260.000000)%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Gumdrops-1%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20fill%3D%22url(%23linearGradient-1)%22%20xlink%3Ahref%3D%22%23path-3%22%3E%3C%2Fuse%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20fill%3D%22url(%23linearGradient-2)%22%20xlink%3Ahref%3D%22%23path-3%22%3E%3C%2Fuse%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E') 0 0 / 100% 100%;
+$gumdrops2: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%22367px%22%20height%3D%22250px%22%20preserveAspectRatio%3D%22none%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3C!--%20Generator%3A%20Sketch%2056.3%20(81716)%20-%20https%3A%2F%2Fsketch.com%20--%3E%0A%20%20%20%20%3Ctitle%3EGumdrops%202%3C%2Ftitle%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3ClinearGradient%20x1%3D%2217.1215089%25%22%20y1%3D%2236.5604745%25%22%20x2%3D%2250%25%22%20y2%3D%2264.0645185%25%22%20id%3D%22linearGradient-1%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20stop-color%3D%22%23FFA68C%22%20offset%3D%220%25%22%3E%3C%2Fstop%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20stop-color%3D%22%23871FFF%22%20offset%3D%22100%25%22%3E%3C%2Fstop%3E%0A%20%20%20%20%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%20%20%20%20%3ClinearGradient%20x1%3D%2286.1918852%25%22%20y1%3D%2235.5961581%25%22%20x2%3D%2236.8815991%25%22%20y2%3D%2276.4527216%25%22%20id%3D%22linearGradient-2%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20stop-color%3D%22%237FC8F5%22%20offset%3D%220%25%22%3E%3C%2Fstop%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20stop-color%3D%22%23871FFF%22%20stop-opacity%3D%220%22%20offset%3D%22100%25%22%3E%3C%2Fstop%3E%0A%20%20%20%20%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%20%20%20%20%3Crect%20id%3D%22path-3%22%20x%3D%22549%22%20y%3D%221267%22%20width%3D%22367%22%20height%3D%22250%22%3E%3C%2Frect%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Cg%20id%3D%22Components%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22gradients%22%20transform%3D%22translate(-813.000000%2C%20-1527.000000)%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Group-2%22%20transform%3D%22translate(264.000000%2C%20260.000000)%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Gumdrops-2%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20fill%3D%22url(%23linearGradient-1)%22%20xlink%3Ahref%3D%22%23path-3%22%3E%3C%2Fuse%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20fill%3D%22url(%23linearGradient-2)%22%20xlink%3Ahref%3D%22%23path-3%22%3E%3C%2Fuse%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E') 0 0 / 100% 100%;
+$gumdrops3: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%22367px%22%20height%3D%22250px%22%20preserveAspectRatio%3D%22none%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3C!--%20Generator%3A%20Sketch%2056.3%20(81716)%20-%20https%3A%2F%2Fsketch.com%20--%3E%0A%20%20%20%20%3Ctitle%3EGumdrops%203%3C%2Ftitle%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3ClinearGradient%20x1%3D%2214.549983%25%22%20y1%3D%2236.9106736%25%22%20x2%3D%2250%25%22%20y2%3D%2267.2917158%25%22%20id%3D%22linearGradient-1%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20stop-color%3D%22%237FC8F5%22%20offset%3D%220%25%22%3E%3C%2Fstop%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20stop-color%3D%22%23FFA68C%22%20offset%3D%22100%25%22%3E%3C%2Fstop%3E%0A%20%20%20%20%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%20%20%20%20%3ClinearGradient%20x1%3D%2289.0050238%25%22%20y1%3D%2234.3360213%25%22%20x2%3D%2250%25%22%20y2%3D%2267.1626569%25%22%20id%3D%22linearGradient-2%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20stop-color%3D%22%23871FFF%22%20offset%3D%220%25%22%3E%3C%2Fstop%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20stop-color%3D%22%23FFA68C%22%20stop-opacity%3D%220%22%20offset%3D%22100%25%22%3E%3C%2Fstop%3E%0A%20%20%20%20%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%20%20%20%20%3Crect%20id%3D%22path-3%22%20x%3D%221098%22%20y%3D%221267%22%20width%3D%22367%22%20height%3D%22250%22%3E%3C%2Frect%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Cg%20id%3D%22Components%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22gradients%22%20transform%3D%22translate(-1362.000000%2C%20-1527.000000)%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Group-2%22%20transform%3D%22translate(264.000000%2C%20260.000000)%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Gumdrops-3%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20fill%3D%22url(%23linearGradient-1)%22%20xlink%3Ahref%3D%22%23path-3%22%3E%3C%2Fuse%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20fill%3D%22url(%23linearGradient-2)%22%20xlink%3Ahref%3D%22%23path-3%22%3E%3C%2Fuse%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E') 0 0 / 100% 100%;
+$lovehearts1: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%22367px%22%20height%3D%22250px%22%20preserveAspectRatio%3D%22none%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3C!--%20Generator%3A%20Sketch%2056.3%20(81716)%20-%20https%3A%2F%2Fsketch.com%20--%3E%0A%20%20%20%20%3Ctitle%3ELovehearts%201%3C%2Ftitle%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3ClinearGradient%20x1%3D%2213.3144563%25%22%20y1%3D%2234.7953338%25%22%20x2%3D%2250%25%22%20y2%3D%2266.5343565%25%22%20id%3D%22linearGradient-1%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20stop-color%3D%22%23871FFF%22%20offset%3D%220%25%22%3E%3C%2Fstop%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20stop-color%3D%22%23FFA68C%22%20offset%3D%22100%25%22%3E%3C%2Fstop%3E%0A%20%20%20%20%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%20%20%20%20%3ClinearGradient%20x1%3D%2289.0050238%25%22%20y1%3D%2234.3360213%25%22%20x2%3D%2250%25%22%20y2%3D%2267.4497767%25%22%20id%3D%22linearGradient-2%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20stop-color%3D%22%23D6219C%22%20offset%3D%220%25%22%3E%3C%2Fstop%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20stop-color%3D%22%23FFA68C%22%20stop-opacity%3D%220%22%20offset%3D%22100%25%22%3E%3C%2Fstop%3E%0A%20%20%20%20%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%20%20%20%20%3Crect%20id%3D%22path-3%22%20x%3D%220%22%20y%3D%22868%22%20width%3D%22367%22%20height%3D%22250%22%3E%3C%2Frect%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Cg%20id%3D%22Components%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22gradients%22%20transform%3D%22translate(-264.000000%2C%20-1128.000000)%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Group-2%22%20transform%3D%22translate(264.000000%2C%20260.000000)%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Lovehearts-1%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20fill%3D%22url(%23linearGradient-1)%22%20xlink%3Ahref%3D%22%23path-3%22%3E%3C%2Fuse%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20fill%3D%22url(%23linearGradient-2)%22%20xlink%3Ahref%3D%22%23path-3%22%3E%3C%2Fuse%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E') 0 0 / 100% 100%;
+$lovehearts2: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%22367px%22%20height%3D%22250px%22%20preserveAspectRatio%3D%22none%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3C!--%20Generator%3A%20Sketch%2056.3%20(81716)%20-%20https%3A%2F%2Fsketch.com%20--%3E%0A%20%20%20%20%3Ctitle%3ELovehearts%202%3C%2Ftitle%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3ClinearGradient%20x1%3D%2213.3312755%25%22%20y1%3D%2235.0197434%25%22%20x2%3D%2250%25%22%20y2%3D%2268.0240162%25%22%20id%3D%22linearGradient-1%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20stop-color%3D%22%23D6219C%22%20offset%3D%220%25%22%3E%3C%2Fstop%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20stop-color%3D%22%23871FFF%22%20offset%3D%22100%25%22%3E%3C%2Fstop%3E%0A%20%20%20%20%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%20%20%20%20%3ClinearGradient%20x1%3D%2289.6436478%25%22%20y1%3D%2234.4795812%25%22%20x2%3D%2224.3581829%25%22%20y2%3D%2283.1645088%25%22%20id%3D%22linearGradient-2%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20stop-color%3D%22%23FFA68C%22%20offset%3D%220%25%22%3E%3C%2Fstop%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20stop-color%3D%22%23871FFF%22%20stop-opacity%3D%220%22%20offset%3D%22100%25%22%3E%3C%2Fstop%3E%0A%20%20%20%20%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%20%20%20%20%3Crect%20id%3D%22path-3%22%20x%3D%22549%22%20y%3D%22868%22%20width%3D%22367%22%20height%3D%22250%22%3E%3C%2Frect%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Cg%20id%3D%22Components%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22gradients%22%20transform%3D%22translate(-813.000000%2C%20-1128.000000)%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Group-2%22%20transform%3D%22translate(264.000000%2C%20260.000000)%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Lovehearts-2%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20fill%3D%22url(%23linearGradient-1)%22%20xlink%3Ahref%3D%22%23path-3%22%3E%3C%2Fuse%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20fill%3D%22url(%23linearGradient-2)%22%20xlink%3Ahref%3D%22%23path-3%22%3E%3C%2Fuse%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E') 0 0 / 100% 100%;
+$lovehearts3: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%22367px%22%20height%3D%22250px%22%20preserveAspectRatio%3D%22none%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3C!--%20Generator%3A%20Sketch%2056.3%20(81716)%20-%20https%3A%2F%2Fsketch.com%20--%3E%0A%20%20%20%20%3Ctitle%3ELovehearts%203%3C%2Ftitle%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3ClinearGradient%20x1%3D%2213.3312755%25%22%20y1%3D%2235.0197434%25%22%20x2%3D%2250%25%22%20y2%3D%2268.0240162%25%22%20id%3D%22linearGradient-1%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20stop-color%3D%22%23FFA68C%22%20offset%3D%220%25%22%3E%3C%2Fstop%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20stop-color%3D%22%23D6219C%22%20offset%3D%22100%25%22%3E%3C%2Fstop%3E%0A%20%20%20%20%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%20%20%20%20%3ClinearGradient%20x1%3D%2289.0050238%25%22%20y1%3D%2234.3360213%25%22%20x2%3D%2250%25%22%20y2%3D%2267.4497767%25%22%20id%3D%22linearGradient-2%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20stop-color%3D%22%23871FFF%22%20offset%3D%220%25%22%3E%3C%2Fstop%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20stop-color%3D%22%23D6219C%22%20stop-opacity%3D%220%22%20offset%3D%22100%25%22%3E%3C%2Fstop%3E%0A%20%20%20%20%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%20%20%20%20%3Crect%20id%3D%22path-3%22%20x%3D%221098%22%20y%3D%22868%22%20width%3D%22367%22%20height%3D%22250%22%3E%3C%2Frect%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Cg%20id%3D%22Components%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22gradients%22%20transform%3D%22translate(-1362.000000%2C%20-1128.000000)%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Group-2%22%20transform%3D%22translate(264.000000%2C%20260.000000)%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Lovehearts-3%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20fill%3D%22url(%23linearGradient-1)%22%20xlink%3Ahref%3D%22%23path-3%22%3E%3C%2Fuse%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20fill%3D%22url(%23linearGradient-2)%22%20xlink%3Ahref%3D%22%23path-3%22%3E%3C%2Fuse%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E') 0 0 / 100% 100%;
+$skittles1: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%22367px%22%20height%3D%22250px%22%20preserveAspectRatio%3D%22none%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3C!--%20Generator%3A%20Sketch%2056.3%20(81716)%20-%20https%3A%2F%2Fsketch.com%20--%3E%0A%20%20%20%20%3Ctitle%3ESkittles%201%3C%2Ftitle%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3ClinearGradient%20x1%3D%2213.3312755%25%22%20y1%3D%2235.0197434%25%22%20x2%3D%2250%25%22%20y2%3D%2268.0240162%25%22%20id%3D%22linearGradient-1%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20stop-color%3D%22%23D6219C%22%20offset%3D%220%25%22%3E%3C%2Fstop%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20stop-color%3D%22%23FFA78C%22%20offset%3D%22100%25%22%3E%3C%2Fstop%3E%0A%20%20%20%20%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%20%20%20%20%3ClinearGradient%20x1%3D%2289.0050238%25%22%20y1%3D%2234.3360213%25%22%20x2%3D%2250%25%22%20y2%3D%2267.4497767%25%22%20id%3D%22linearGradient-2%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20stop-color%3D%22%2380C7F5%22%20offset%3D%220%25%22%3E%3C%2Fstop%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20stop-color%3D%22%23FFA78C%22%20stop-opacity%3D%220%22%20offset%3D%22100%25%22%3E%3C%2Fstop%3E%0A%20%20%20%20%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%20%20%20%20%3Crect%20id%3D%22path-3%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22367%22%20height%3D%22250%22%3E%3C%2Frect%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Cg%20id%3D%22Components%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22gradients%22%20transform%3D%22translate(-264.000000%2C%20-260.000000)%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Group-2%22%20transform%3D%22translate(264.000000%2C%20260.000000)%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Skittles-1%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20fill%3D%22url(%23linearGradient-1)%22%20xlink%3Ahref%3D%22%23path-3%22%3E%3C%2Fuse%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20fill%3D%22url(%23linearGradient-2)%22%20xlink%3Ahref%3D%22%23path-3%22%3E%3C%2Fuse%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E') 0 0 / 100% 100%;
+$skittles2: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%22367px%22%20height%3D%22250px%22%20preserveAspectRatio%3D%22none%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3C!--%20Generator%3A%20Sketch%2056.3%20(81716)%20-%20https%3A%2F%2Fsketch.com%20--%3E%0A%20%20%20%20%3Ctitle%3ERectangle%20Copy%209%3C%2Ftitle%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3ClinearGradient%20x1%3D%2213.3312755%25%22%20y1%3D%2235.0197434%25%22%20x2%3D%2250%25%22%20y2%3D%2268.0240162%25%22%20id%3D%22linearGradient-1%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20stop-color%3D%22%2380C7F5%22%20offset%3D%220%25%22%3E%3C%2Fstop%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20stop-color%3D%22%23D6219C%22%20offset%3D%22100%25%22%3E%3C%2Fstop%3E%0A%20%20%20%20%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%20%20%20%20%3ClinearGradient%20x1%3D%2289.0050238%25%22%20y1%3D%2234.3360213%25%22%20x2%3D%2250%25%22%20y2%3D%2267.4497767%25%22%20id%3D%22linearGradient-2%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20stop-color%3D%22%23FFA78C%22%20offset%3D%220%25%22%3E%3C%2Fstop%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20stop-color%3D%22%23D6219C%22%20stop-opacity%3D%220%22%20offset%3D%22100%25%22%3E%3C%2Fstop%3E%0A%20%20%20%20%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%20%20%20%20%3Crect%20id%3D%22path-3%22%20x%3D%22549%22%20y%3D%220%22%20width%3D%22367%22%20height%3D%22250%22%3E%3C%2Frect%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Cg%20id%3D%22Components%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22gradients%22%20transform%3D%22translate(-813.000000%2C%20-260.000000)%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Group-2%22%20transform%3D%22translate(264.000000%2C%20260.000000)%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Rectangle-Copy-9%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20fill%3D%22url(%23linearGradient-1)%22%20xlink%3Ahref%3D%22%23path-3%22%3E%3C%2Fuse%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20fill%3D%22url(%23linearGradient-2)%22%20xlink%3Ahref%3D%22%23path-3%22%3E%3C%2Fuse%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E') 0 0 / 100% 100%;
+$skittles3: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%22367px%22%20height%3D%22250px%22%20preserveAspectRatio%3D%22none%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3C!--%20Generator%3A%20Sketch%2056.3%20(81716)%20-%20https%3A%2F%2Fsketch.com%20--%3E%0A%20%20%20%20%3Ctitle%3ESkittles%203%3C%2Ftitle%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3ClinearGradient%20x1%3D%2213.3312755%25%22%20y1%3D%2235.0197434%25%22%20x2%3D%2250%25%22%20y2%3D%2268.0240162%25%22%20id%3D%22linearGradient-1%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20stop-color%3D%22%23FFA78C%22%20offset%3D%220%25%22%3E%3C%2Fstop%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20stop-color%3D%22%2380C7F5%22%20offset%3D%22100%25%22%3E%3C%2Fstop%3E%0A%20%20%20%20%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%20%20%20%20%3ClinearGradient%20x1%3D%2289.0050238%25%22%20y1%3D%2234.3360213%25%22%20x2%3D%2250%25%22%20y2%3D%2267.4497767%25%22%20id%3D%22linearGradient-2%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20stop-color%3D%22%23D6219C%22%20offset%3D%220%25%22%3E%3C%2Fstop%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20stop-color%3D%22%2380C7F5%22%20stop-opacity%3D%220%22%20offset%3D%22100%25%22%3E%3C%2Fstop%3E%0A%20%20%20%20%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%20%20%20%20%3Crect%20id%3D%22path-3%22%20x%3D%221098%22%20y%3D%220%22%20width%3D%22367%22%20height%3D%22250%22%3E%3C%2Frect%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Cg%20id%3D%22Components%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22gradients%22%20transform%3D%22translate(-1362.000000%2C%20-260.000000)%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Group-2%22%20transform%3D%22translate(264.000000%2C%20260.000000)%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Skittles-3%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20fill%3D%22url(%23linearGradient-1)%22%20xlink%3Ahref%3D%22%23path-3%22%3E%3C%2Fuse%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20fill%3D%22url(%23linearGradient-2)%22%20xlink%3Ahref%3D%22%23path-3%22%3E%3C%2Fuse%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E') 0 0 / 100% 100%;
+$twizzlers1: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%22367px%22%20height%3D%22250px%22%20preserveAspectRatio%3D%22none%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3C!--%20Generator%3A%20Sketch%2056.3%20(81716)%20-%20https%3A%2F%2Fsketch.com%20--%3E%0A%20%20%20%20%3Ctitle%3ETwizzlers%201%3C%2Ftitle%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3ClinearGradient%20x1%3D%2213.3144563%25%22%20y1%3D%2234.7953338%25%22%20x2%3D%2250%25%22%20y2%3D%2266.5343565%25%22%20id%3D%22linearGradient-1%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20stop-color%3D%22%23871FFF%22%20offset%3D%220%25%22%3E%3C%2Fstop%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20stop-color%3D%22%2380C7F5%22%20offset%3D%22100%25%22%3E%3C%2Fstop%3E%0A%20%20%20%20%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%20%20%20%20%3ClinearGradient%20x1%3D%2289.0050238%25%22%20y1%3D%2234.3360213%25%22%20x2%3D%2250%25%22%20y2%3D%2267.4497767%25%22%20id%3D%22linearGradient-2%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20stop-color%3D%22%23D6219C%22%20offset%3D%220%25%22%3E%3C%2Fstop%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20stop-color%3D%22%2380C7F5%22%20stop-opacity%3D%220%22%20offset%3D%22100%25%22%3E%3C%2Fstop%3E%0A%20%20%20%20%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%20%20%20%20%3Crect%20id%3D%22path-3%22%20x%3D%220%22%20y%3D%22428%22%20width%3D%22367%22%20height%3D%22250%22%3E%3C%2Frect%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Cg%20id%3D%22Components%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22gradients%22%20transform%3D%22translate(-264.000000%2C%20-688.000000)%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Group-2%22%20transform%3D%22translate(264.000000%2C%20260.000000)%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Twizzlers-1%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20fill%3D%22url(%23linearGradient-1)%22%20xlink%3Ahref%3D%22%23path-3%22%3E%3C%2Fuse%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20fill%3D%22url(%23linearGradient-2)%22%20xlink%3Ahref%3D%22%23path-3%22%3E%3C%2Fuse%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E') 0 0 / 100% 100%;
+$twizzlers2: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%22367px%22%20height%3D%22250px%22%20preserveAspectRatio%3D%22none%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3C!--%20Generator%3A%20Sketch%2056.3%20(81716)%20-%20https%3A%2F%2Fsketch.com%20--%3E%0A%20%20%20%20%3Ctitle%3ETwizzlers%202%3C%2Ftitle%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3ClinearGradient%20x1%3D%2213.3312755%25%22%20y1%3D%2235.0197434%25%22%20x2%3D%2250%25%22%20y2%3D%2268.0240162%25%22%20id%3D%22linearGradient-1%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20stop-color%3D%22%23D6219C%22%20offset%3D%220%25%22%3E%3C%2Fstop%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20stop-color%3D%22%23871FFF%22%20offset%3D%22100%25%22%3E%3C%2Fstop%3E%0A%20%20%20%20%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%20%20%20%20%3ClinearGradient%20x1%3D%2289.6436478%25%22%20y1%3D%2234.4795812%25%22%20x2%3D%2224.3581829%25%22%20y2%3D%2283.1645088%25%22%20id%3D%22linearGradient-2%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20stop-color%3D%22%2380C7F5%22%20offset%3D%220%25%22%3E%3C%2Fstop%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20stop-color%3D%22%23871FFF%22%20stop-opacity%3D%220%22%20offset%3D%22100%25%22%3E%3C%2Fstop%3E%0A%20%20%20%20%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%20%20%20%20%3Crect%20id%3D%22path-3%22%20x%3D%22549%22%20y%3D%22428%22%20width%3D%22367%22%20height%3D%22250%22%3E%3C%2Frect%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Cg%20id%3D%22Components%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22gradients%22%20transform%3D%22translate(-813.000000%2C%20-688.000000)%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Group-2%22%20transform%3D%22translate(264.000000%2C%20260.000000)%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Twizzlers-2%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20fill%3D%22url(%23linearGradient-1)%22%20xlink%3Ahref%3D%22%23path-3%22%3E%3C%2Fuse%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20fill%3D%22url(%23linearGradient-2)%22%20xlink%3Ahref%3D%22%23path-3%22%3E%3C%2Fuse%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E') 0 0 / 100% 100%;
+$twizzlers3: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%22367px%22%20height%3D%22250px%22%20preserveAspectRatio%3D%22none%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3C!--%20Generator%3A%20Sketch%2056.3%20(81716)%20-%20https%3A%2F%2Fsketch.com%20--%3E%0A%20%20%20%20%3Ctitle%3ETwizzlers%203%3C%2Ftitle%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%0A%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%3ClinearGradient%20x1%3D%2213.5473433%25%22%20y1%3D%2234.8769086%25%22%20x2%3D%2250%25%22%20y2%3D%2265.6074248%25%22%20id%3D%22linearGradient-1%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20stop-color%3D%22%2380C7F5%22%20offset%3D%220%25%22%3E%3C%2Fstop%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20stop-color%3D%22%23D6219C%22%20offset%3D%22100%25%22%3E%3C%2Fstop%3E%0A%20%20%20%20%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%20%20%20%20%3ClinearGradient%20x1%3D%2284.1887347%25%22%20y1%3D%2238.7711517%25%22%20x2%3D%2250%25%22%20y2%3D%2267.4497767%25%22%20id%3D%22linearGradient-2%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20stop-color%3D%22%23871FFF%22%20offset%3D%220%25%22%3E%3C%2Fstop%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20stop-color%3D%22%23D6219C%22%20stop-opacity%3D%220%22%20offset%3D%22100%25%22%3E%3C%2Fstop%3E%0A%20%20%20%20%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%20%20%20%20%3Crect%20id%3D%22path-3%22%20x%3D%221098%22%20y%3D%22428%22%20width%3D%22367%22%20height%3D%22250%22%3E%3C%2Frect%3E%0A%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%3Cg%20id%3D%22Components%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22gradients%22%20transform%3D%22translate(-1362.000000%2C%20-688.000000)%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Group-2%22%20transform%3D%22translate(264.000000%2C%20260.000000)%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Twizzlers-3%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20fill%3D%22url(%23linearGradient-1)%22%20xlink%3Ahref%3D%22%23path-3%22%3E%3C%2Fuse%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cuse%20fill%3D%22url(%23linearGradient-2)%22%20xlink%3Ahref%3D%22%23path-3%22%3E%3C%2Fuse%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E') 0 0 / 100% 100%;
+
+$unitN: 0;
+$unit0: 4px;
+$unit1: 8px;
+$unit2: 16px;
+$unit3: 24px;
+$unit4: 32px;
+$unit5: 40px;
+$unit6: 6px;
+
+$Vlt-font-url: '/volta/' !default;
+
+$z-index-flash: 1000;
+$z-index-popups: 950;
+$z-index-modals: 900;
+$z-index-tooltips: 600;
+$z-index-sidenav: 650;
+$z-index-sidenav-mobile: 800; // Sidenav needs to be higher than the header for mobile
+$z-index-sidenav-mobile-trigger: 650; // Sidenav button on mobile needs to be lower than the header for mobile
+$z-index-header: 700;
+$z-index-dropdowns: 500;