diff --git a/README.md b/README.md
index eca53b2aa..ad7dee335 100644
--- a/README.md
+++ b/README.md
@@ -19,16 +19,17 @@ Quickly build and design new UI without writing CSS.
## Features
* Mobile-first CSS architecture
+* 490 accessible color combinations
* 8px baseline grid
* Multiple debugging utilities to reduce layout struggles
* Single-purpose class structure
* Optimized for maximum gzip compression
-* Lightweight (~19.4kB)
+* Lightweight (~14kB)
* Usable across projects
* Growing open source component library
-* Works well with plain HTML, React, Ember, Angular, Rails Svelte, Vue, and more
+* Works well with plain HTML, React, Ember, Angular, Rails and more
* Infinitely nestable responsive grid system
-* Works out of the box but easy to customize and extend
+* Built with PostCSS
## Getting Started
@@ -127,11 +128,11 @@ And of course...
Development of Tachyons is supported by
-* [Components AI](https://components.ai)
+* [Digital Ocean](https://digitalocean.com)
* [DWYL](https://dwyl.com)
* [VTEX](https://vtex.com)
* [Manifold](https://manifold.co)
## Help
-If you have a question or need help feel free to [open an issue here](https://github.com/tachyons-css/tachyons/issues/new).
+If you have a question or need help feel free to [open an issue here](https://github.com/tachyons-css/tachyons/issues/new) or jump into the [Tachyons slack channel](http://tachyons-slack-invite.herokuapp.com).
diff --git a/css/tachyons.css b/css/tachyons.css
index 5c6eeface..75387e6b8 100644
--- a/css/tachyons.css
+++ b/css/tachyons.css
@@ -1,4 +1,4 @@
-/*! TACHYONS v5.0.0.beta | http://tachyons.io */
+/*! TACHYONS v4.12.0 | http://tachyons.io */
/*
*
* ________ ______
@@ -22,7 +22,7 @@
*
*/
/* External Library Includes */
-/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
@@ -36,10 +36,6 @@ html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ }
* Remove the margin in all browsers.
*/
body { margin: 0; }
-/**
- * Render the `main` element consistently in IE.
- */
-main { display: block; }
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
@@ -188,511 +184,62 @@ template { display: none; }
* Add the correct display in IE 10.
*/
[hidden] { display: none; }
-/* Variables */
-/* Importing here will allow you to override any variables in the modules */
-/*
-
- CUSTOM MEDIA QUERIES
-
- Media query values can be changed to fit your own content.
- There are no magic bullets when it comes to media query width values.
- They should be declared in em units - and they should be set to meet
- the needs of your content. You can also add additional media queries,
- or remove some of the existing ones.
-
- These media queries can be referenced like so:
-
- @container (min-width:30em) {
- .example-s {
- background-color: red;
- }
- }
-
- @container (min-width:48em) {
- .example-m {
- background-color: red;
- }
- }
-
- @container (min-width:64em) {
- .example-l {
- background-color: red;
- }
- }
-
-*/
-/* Media Queries */
-/*
-
- VARIABLES
-
-
-*/
-:root {/*
- * COLORS
- * A balanced color system optimized for accessibility
- * Theme generated with https://components.ai/theme
- * The first six steps in each scale are accessible with white
- *
- */
- --tint-0: hsla( 0, 0%, 100%, .035 );
- --tint-1: hsla( 0, 0%, 100%, .1 );
- --tint-2: hsla( 0, 0%, 100%, .19 );
- --tint-3: hsla( 0, 0%, 100%, .28 );
- --tint-4: hsla( 0, 0%, 100%, .36 );
- --tint-5: hsla( 0, 0%, 100%, .45 );
- --tint-6: hsla( 0, 0%, 100%, .55 );
- --tint-7: hsla( 0, 0%, 100%, .64 );
- --tint-8: hsla( 0, 0%, 100%, .73 );
- --tint-9: hsla( 0, 0%, 100%, .815 );
- --tint-10: hsla( 0, 0%, 100%, .895 );
- --tint-11: hsla( 0, 0%, 100%, .94 );
- --shadow-11: hsla( 0, 0%, 0%, .94 );
- --shadow-10: hsla( 0, 0%, 0%, .895 );
- --shadow-9: hsla( 0, 0%, 0%, .815 );
- --shadow-8: hsla( 0, 0%, 0%, .73 );
- --shadow-7: hsla( 0, 0%, 0%, .64 );
- --shadow-6: hsla( 0, 0%, 0%, .55 );
- --shadow-5: hsla( 0, 0%, 0%, .45 );
- --shadow-4: hsla( 0, 0%, 0%, .36 );
- --shadow-3: hsla( 0, 0%, 0%, .28 );
- --shadow-2: hsla( 0, 0%, 0%, .19 );
- --shadow-1: hsla( 0, 0%, 0%, .1 );
- --shadow-0: hsla( 0, 0%, 0%, .035 );
- --gray-0: #000;
- --gray-1: #171717;
- --gray-2: #2f2f2f;
- --gray-3: #464646;
- --gray-4: #5e5e5e;
- --gray-5: #757575;
- --gray-6: #8c8c8c;
- --gray-7: #a3a3a3;
- --gray-8: #bababa;
- --gray-9: #d1d1d1;
- --gray-10: #e8e8e8;
- --gray-11: #fff;
- --slate-gray-0: #09090b;
- --slate-gray-1: #1d1d22;
- --slate-gray-2: #313138;
- --slate-gray-3: #45444f;
- --slate-gray-4: #595866;
- --slate-gray-5: #6d6c7d;
- --slate-gray-6: #838292;
- --slate-gray-7: #9a9aa7;
- --slate-gray-8: #b2b1bb;
- --slate-gray-9: #c9c9d0;
- --slate-gray-10: #e1e0e4;
- --slate-gray-11: #f8f8f9;
- --blue-1: #071e3f;
- --blue-2: #0c3166;
- --blue-3: #10448d;
- --blue-4: #1556b4;
- --blue-5: #1969db;
- --blue-6: #317fed;
- --blue-7: #5797f0;
- --blue-8: #7daef4;
- --blue-9: #a3c6f7;
- --blue-10: #c9ddfa;
- --blue-11: #eff5fe;
- --indigo-0: #080614;
- --indigo-1: #19143f;
- --indigo-2: #2a216a;
- --indigo-3: #3a2e95;
- --indigo-4: #4b3bc0;
- --indigo-5: #5c49eb;
- --indigo-6: #725fff;
- --indigo-7: #8c7cff;
- --indigo-8: #a69aff;
- --indigo-9: #c0b7ff;
- --indigo-10: #dad5ff;
- --indigo-11: #f4f3ff;
- --violet-0: #110517;
- --violet-1: #2e0d3e;
- --violet-2: #4b1465;
- --violet-3: #681c8c;
- --violet-4: #8424b3;
- --violet-5: #a12cda;
- --violet-6: #b543ec;
- --violet-7: #c366f0;
- --violet-8: #d089f3;
- --violet-9: #deabf7;
- --violet-10: #eccefa;
- --violet-11: #f9f0fe;
- --magenta-0: #13040f;
- --magenta-1: #350a2c;
- --magenta-2: #581148;
- --magenta-3: #7b1765;
- --magenta-4: #9e1e82;
- --magenta-5: #c1249e;
- --magenta-6: #d43cb2;
- --magenta-7: #dc61c1;
- --magenta-8: #e485cf;
- --magenta-9: #eca9dd;
- --magenta-10: #f4ceec;
- --magenta-11: #fcf2fa;
- --red-0: #120205;
- --red-1: #39050f;
- --red-2: #5f0819;
- --red-3: #860b24;
- --red-4: #ac0e2e;
- --red-5: #d31138;
- --red-6: #e7284e;
- --red-7: #ec506f;
- --red-8: #f07790;
- --red-9: #f49fb0;
- --red-10: #f9c7d1;
- --red-11: #fdeef1;
- --red-orange-0: #190b05;
- --red-orange-1: #3d1307;
- --red-orange-2: #601b0a;
- --red-orange-3: #84240c;
- --red-orange-4: #a72c0e;
- --red-orange-5: #cb3411;
- --red-orange-6: #ee3c13;
- --red-orange-7: #fe562f;
- --red-orange-8: #fe7d5e;
- --red-orange-9: #ffa48e;
- --red-orange-10: #ffccbe;
- --red-orange-11: #fff3ee;
- --orange-0: #150d04;
- --orange-1: #2e1c08;
- --orange-2: #472a0c;
- --orange-3: #603910;
- --orange-4: #794714;
- --orange-5: #a65d13;
- --orange-6: #d37413;
- --orange-7: #ff8a14;
- --orange-8: #ffa54a;
- --orange-9: #ffc081;
- --orange-10: #ffdab7;
- --orange-11: #fff5ed;
- --gold-0: #140e05;
- --gold-1: #2c1f0a;
- --gold-2: #432f0e;
- --gold-3: #5b4013;
- --gold-4: #725118;
- --gold-5: #946818;
- --gold-6: #d4950d;
- --gold-7: #eeb028;
- --gold-8: #f2c259;
- --gold-9: #f7d38a;
- --gold-10: #fbe5bc;
- --gold-11: #fff5e9;
- --yellow-0: #111006;
- --yellow-1: #252405;
- --yellow-2: #3a3804;
- --yellow-3: #4e4d03;
- --yellow-4: #636101;
- --yellow-5: #777500;
- --yellow-6: #ccc500;
- --yellow-7: #fcf433;
- --yellow-8: #fdf67a;
- --yellow-9: #fdf89b;
- --yellow-10: #fef9bb;
- --yellow-11: #fefadb;
- --green-0: #091108;
- --green-1: #0f2611;
- --green-2: #153c1a;
- --green-3: #1b5122;
- --green-4: #21662b;
- --green-5: #25833a;
- --green-6: #26b056;
- --green-7: #35d272;
- --green-8: #63dd90;
- --green-9: #90e8ae;
- --green-10: #bdf3cc;
- --green-11: #eafeea;
- --teal-0: #07100c;
- --teal-1: #0c231a;
- --teal-2: #113628;
- --teal-3: #164936;
- --teal-4: #1b5b45;
- --teal-5: #177f63;
- --teal-6: #12a282;
- --teal-7: #2abb9b;
- --teal-8: #5acab1;
- --teal-9: #8bdac7;
- --teal-10: #bbe9dc;
- --teal-11: #ecf8f2;
- --cyan-0: #0a1211;
- --cyan-1: #102425;
- --cyan-2: #153639;
- --cyan-3: #1b484c;
- --cyan-4: #215a60;
- --cyan-5: #247981;
- --cyan-6: #24a9b6;
- --cyan-7: #28d6e6;
- --cyan-8: #57e0ec;
- --cyan-9: #85eaf2;
- --cyan-10: #b4f5f9;
- --cyan-11: #e2ffff;
- --transparent: hsla( 0, 0, 0, 0 );
- @supports (color: color(display-p3 1 1 1)) {
- :root { --blue-0: color( display-p3 0 .07 .25 ); --blue-1: color( display-p3 0 .09 .32 ); --blue-2: color( display-p3 0 .11 .42 ); --blue-3: color( display-p3 0 .15 .53 ); --blue-4: color( display-p3 0 .16 .7 ); --blue-5: color( display-p3 0 .22 .88 ); --blue-6: color( display-p3 .06 .37 1 ); --blue-7: color( display-p3 .38 .59 1 ); --blue-8: color( display-p3 .66 .79 1 ); --blue-9: color( display-p3 .79 .86 .99 ); --blue-10: color( display-p3 .87 .92 .99 ); --blue-11: color( display-p3 .92 .95 1 ); --indigo-0: color( display-p3 .06 .03 .21 ); --indigo-1: color( display-p3 .09 .07 .26 ); --indigo-2: color( display-p3 .15 .11 .42 ); --indigo-3: color( display-p3 .18 .14 .57 ); --indigo-4: color( display-p3 .2 .18 .75 ); --indigo-5: color( display-p3 .26 .22 1 ); --indigo-6: color( display-p3 .28 .28 1 ); --indigo-7: color( display-p3 .47 .49 1 ); --indigo-8: color( display-p3 .67 .68 1 ); --indigo-9: color( display-p3 .81 .81 .98 ); --indigo-10: color( display-p3 .87 .92 .99 ); --indigo-11: color( display-p3 .92 .95 1 ); }
- }
- --degrees-1: 0;
- --degrees-2: 45deg;
- --degrees-3: 90deg;
- --degrees-4: 135deg;
- --degrees-5: 180deg;
- --degrees-6: 225deg;
- --degrees-7: 270deg;
- --degrees-8: 315deg;
- --gradient-degree-0: var( --degrees-1, 0 );
- --gradient-degree: var( --degrees-2, 45deg );
- --gradient-degree-2: var( --degrees-4, 135deg );
- --gradient-stripe-width: 12px;
- --gradient-stripe-width-2: var( --border-width-1 );
- --gradient-color-1: var( --blue-2 );
- --gradient-color-2: var( --magenta-6 );
- --gradient-color-3: var( --red-5 );
- --gradient-color-4: var( --indigo-5 );
- --gradient-color-5: var( --violet-0 );
- --gradient-color-6: var( --violet-5 );
- --gradient-color-7: var( --magenta-0 );
- --gradient-color-8: var( --magenta-5 );
- --gradient-color-9: var( --red-0 );
- --gradient-color-10: var( --red-5 );
- --gradient-color-11: var( --red-orange-0 );
- --gradient-color-12: var( --red-orange-5 );
- --gradient-color-13: var( --orange-0 );
- --gradient-color-14: var( --orange-5 );
- --gradient-color-15: var( --gold-0 );
- --gradient-color-16: var( --gold-5 );
- --gradient-color-17: var( --yellow-0 );
- --gradient-color-18: var( --yellow-5 );
- --gradient-color-19: var( --green-0 );
- --gradient-color-20: var( --green-5 );
- --gradient-color-21: var( --teal-0 );
- --gradient-color-22: var( --teal-5 );
- --gradient-color-23: var( --cyan-0 );
- --gradient-color-24: var( --cyan-5 );
- --gradient-stop: 50%;
- --font-size-1: 12px;
- --font-size-2: 14px;
- --font-size-3: 16px;
- --font-size-4: 20px;
- --font-size-5: 24px;
- --font-size-6: 32px;
- --font-size-7: 48px;
- --font-size-8: 64px;
- --font-size-9: 96px;
- --font-size-10: 128px;
- --font-size-11: 192px;
- --font-size-12: 256px;
- --measure-narrow: 45ch;
- --measure: 66ch;
- --measure-wide: 80ch;
- --border-radius-0: 0;
- --border-radius-1: 4px;
- --border-radius-2: 6px;
- --border-radius-3: 8px;
- --border-radius-4: 12px;
- --border-radius-5: 16px;
- --border-radius-6: 20px;
- --border-radius-7: 24px;
- --border-radius-8: 32px;
- --border-radius-9: 48px;
- --border-radius-10: 64px;
- --border-radius-11: 9999px;
- --border-radius: var( --border-radius-2 );
- --border-width-0: 0;
- --border-width-1: 1px;
- --border-width-2: 2px;
- --border-width-3: 4px;
- --border-width-4: 8px;
- --border-width-5: 16px;
- --border-width: var( --border-width-1, 1px );
- --border-color: var( --gray-5, gray );
- --line-height-solid: 1;
- --line-height-heading: 1.25;
- --line-height-body: 1.5;
- --letter-spacing-tracked: .1em;
- --letter-spacing-tight: -0.05em;
- --letter-spacing-large: .25em;
- --font-family-heading: Inter, -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
- --font-family-body: Inter, -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
- --font-family-mono: Inconsolata, Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
- --spacing-0: 0;
- --spacing-1: 2px;
- --spacing-2: 4px;
- --spacing-3: 8px;
- --spacing-4: 16px;
- --spacing-5: 32px;
- --spacing-6: 64px;
- --spacing-7: 128px;
- --spacing-8: 256px;
- --spacing-9: 512px;
- --size-0: 0;
- --size-1: 1rem;
- --size-2: 2rem;
- --size-3: 3rem;
- --size-4: 4rem;
- --size-5: 8rem;
- --size-6: 16rem;
- --size-7: 32rem;
- --size-8: 64rem;
- --shadow-color: 0 0 0;
- --shadow-color-invert: 255 255 255;
- --shadow-border-width: 1px;
- --shadow-opacity: .25; /* Opacity scale */
- --opacity-0: 0;
- --opacity-1: .025;
- --opacity-2: .05;
- --opacity-3: .1;
- --opacity-4: .2;
- --opacity-5: .3;
- --opacity-6: .4;
- --opacity-7: .5;
- --opacity-8: .6;
- --opacity-9: .7;
- --opacity-10: .8;
- --opacity-11: .9;
- --opacity-12: 1;
- --duration-0: 125ms;
- --duration-1: 250ms;
- --duration-2: 500ms;
- --easing-function-0: cubic-bezier( .543, 1.086, .5, -0.383 );
- --easing-function-1: ease;
- --easing-function-2: ease-out;
- --easing-function-3: ease-in-out;
- --easing-function-4: linear;
-}
-/*
-
- GRADIENTS
-
-
-*/
-.gradient-1 { background: linear-gradient( var( --gradient-degree ), var( --gradient-color-1 ), var( --gradient-color-2 ) ); }
-.gradient-2 { background: linear-gradient( var( --gradient-degree ), var( --gradient-color-1 ) var( --gradient-stop ), var( --gradient-color-2 ) var( --gradient-stop ) ); }
-.gradient-3 { background: repeating-linear-gradient( var( --gradient-degree ), transparent 0, transparent var( --gradient-stripe-width ), var( --gradient-color-1 ) var( --gradient-stripe-width ), var( --gradient-color-1 ) calc( var( --gradient-stripe-width ) + var( --gradient-stripe-width-2 ) ) ); }
-.gradient-4 { background: repeating-radial-gradient( circle, transparent 0, transparent var( --gradient-stripe-width ), var( --gradient-color-1 ) var( --gradient-stripe-width ), var( --gradient-color-1 ) calc( var( --gradient-stripe-width ) + var( --gradient-stripe-width-2 ) ) ); }
-@container (min-width:30em) { }
-@container (min-width:48em) { }
-@container (min-width:64em) { }
/* Modules */
/*
BOX SIZING
*/
-*, *::before, *::after, .border-box, .border-box::before, .border-box::after { box-sizing: border-box; }
-.content-box { box-sizing: content-box; }
-/*
-
- CONTAINER-TYPE
-
- Media Query Extensions:
- -s = small
- -m = medium
- -l = large
-
- MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/container-type
-
-*/
-.container-size { container-type: size; }
-.root, .container-inline { container-type: inline-size; }
-.container-normal { container-type: normal; }
-@container (min-width:30em) {
- .container-size-s { container-type: size; }
- .container-inline-s { container-type: inline-size; }
- .container-normal-s { container-type: normal; }
-}
-@container (min-width:48em) {
- .container-size-m { container-type: size; }
- .container-inline-m { container-type: inline-size; }
- .container-normal-m { container-type: normal; }
-}
-@container (min-width:64em) {
- .container-size-l { container-type: size; }
- .container-inline-l { container-type: inline-size; }
- .container-normal-l { container-type: normal; }
-}
-/*
-
- ALL
-
- MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/all
-
-*/
-.unset { all: unset; }
-.initial { all: initial; }
-.inherit { all: inherit; }
-.revert { all: revert; }
+html, body, div, article, aside, section, main, nav, footer, header, form,
+fieldset, legend, pre, code, a, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt,
+dd, blockquote, figcaption, figure, textarea, table, td, th, tr,
+input[type="email"], input[type="number"], input[type="password"],
+input[type="tel"], input[type="text"], input[type="url"], .border-box { box-sizing: border-box; }
/*
ASPECT RATIOS
- MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
*/
-.aspect-ratio-16x9 { aspect-ratio: 16 / 9; }
-.aspect-ratio-9x16 { aspect-ratio: 9 / 16; }
-.aspect-ratio-4x3 { aspect-ratio: 4 / 3; }
-.aspect-ratio-3x4 { aspect-ratio: 3 / 4; }
-.aspect-ratio-6x4 { aspect-ratio: 6 / 4; }
-.aspect-ratio-4x6 { aspect-ratio: 4 / 6; }
-.aspect-ratio-8x5 { aspect-ratio: 8 / 5; }
-.aspect-ratio-5x8 { aspect-ratio: 5 / 8; }
-.aspect-ratio-7x5 { aspect-ratio: 7 / 5; }
-.aspect-ratio-5x7 { aspect-ratio: 5 / 7; }
-.aspect-ratio-square, .aspect-ratio-1x1 { aspect-ratio: 1 / 1; }
-@container (min-width:30em) {
- .aspect-ratio-16x9-s { aspect-ratio: 16 / 9; }
- .aspect-ratio-9x16-s { aspect-ratio: 9 / 16; }
- .aspect-ratio-4x3-s { aspect-ratio: 4 / 3; }
- .aspect-ratio-3x4-s { aspect-ratio: 3 / 4; }
- .aspect-ratio-6x4-s { aspect-ratio: 6 / 4; }
- .aspect-ratio-4x6-s { aspect-ratio: 4 / 6; }
- .aspect-ratio-8x5-s { aspect-ratio: 8 / 5; }
- .aspect-ratio-5x8-s { aspect-ratio: 5 / 8; }
- .aspect-ratio-7x5-s { aspect-ratio: 7 / 5; }
- .aspect-ratio-5x7-s { aspect-ratio: 5 / 7; }
- .aspect-ratio-square-s, .aspect-ratio-1x1-s { aspect-ratio: 1 / 1; }
-}
-@container (min-width:48em) {
- .aspect-ratio-16x9-m { aspect-ratio: 16 / 9; }
- .aspect-ratio-9x16-m { aspect-ratio: 9 / 16; }
- .aspect-ratio-4x3-m { aspect-ratio: 4 / 3; }
- .aspect-ratio-3x4-m { aspect-ratio: 3 / 4; }
- .aspect-ratio-6x4-m { aspect-ratio: 6 / 4; }
- .aspect-ratio-4x6-m { aspect-ratio: 4 / 6; }
- .aspect-ratio-8x5-m { aspect-ratio: 8 / 5; }
- .aspect-ratio-5x8-m { aspect-ratio: 5 / 8; }
- .aspect-ratio-7x5-m { aspect-ratio: 7 / 5; }
- .aspect-ratio-5x7-m { aspect-ratio: 5 / 7; }
- .aspect-ratio-square-m, .aspect-ratio-1x1-m { aspect-ratio: 1 / 1; }
-}
-@container (min-width:64em) {
- .aspect-ratio-16x9-l { aspect-ratio: 16 / 9; }
- .aspect-ratio-9x16-l { aspect-ratio: 9 / 16; }
- .aspect-ratio-4x3-l { aspect-ratio: 4 / 3; }
- .aspect-ratio-3x4-l { aspect-ratio: 3 / 4; }
- .aspect-ratio-6x4-l { aspect-ratio: 6 / 4; }
- .aspect-ratio-4x6-l { aspect-ratio: 4 / 6; }
- .aspect-ratio-8x5-l { aspect-ratio: 8 / 5; }
- .aspect-ratio-5x8-l { aspect-ratio: 5 / 8; }
- .aspect-ratio-7x5-l { aspect-ratio: 7 / 5; }
- .aspect-ratio-5x7-l { aspect-ratio: 5 / 7; }
- .aspect-ratio-square-l, .aspect-ratio-1x1-l { aspect-ratio: 1 / 1; }
-}
+/* This is for fluid media that is embedded from third party sites like youtube, vimeo etc.
+ * Wrap the outer element in aspect-ratio and then extend it with the desired ratio i.e
+ * Make sure there are no height and width attributes on the embedded media.
+ * Adapted from: https://github.com/suitcss/components-flex-embed
+ *
+ * Example:
+ *
+ *
+ *
+ *
+ *
+ * */
+.aspect-ratio { height: 0; position: relative; }
+.aspect-ratio--16x9 { padding-bottom: 56.25%; }
+.aspect-ratio--9x16 { padding-bottom: 177.77%; }
+.aspect-ratio--4x3 { padding-bottom: 75%; }
+.aspect-ratio--3x4 { padding-bottom: 133.33%; }
+.aspect-ratio--6x4 { padding-bottom: 66.6%; }
+.aspect-ratio--4x6 { padding-bottom: 150%; }
+.aspect-ratio--8x5 { padding-bottom: 62.5%; }
+.aspect-ratio--5x8 { padding-bottom: 160%; }
+.aspect-ratio--7x5 { padding-bottom: 71.42%; }
+.aspect-ratio--5x7 { padding-bottom: 140%; }
+.aspect-ratio--1x1 { padding-bottom: 100%; }
+.aspect-ratio--object { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 100; }
/*
IMAGES
Docs: http://tachyons.io/docs/elements/images/
*/
-img { display: block; max-width: 100%; }
-.random-image { background-image: url( https://source.unsplash.com/random/ ); background-size: cover; }
-.random-image-landscape { background-image: url( https://source.unsplash.com/random/1920x1080 ); background-size: cover; }
-.random-image-portrait { background-image: url( https://source.unsplash.com/random/1080x1920 ); background-size: cover; }
+/* Responsive images! */
+img { max-width: 100%; }
/*
BACKGROUND SIZE
Docs: http://tachyons.io/docs/themes/background-size/
Media Query Extensions:
- -s = small
+ -ns = not-small
-m = medium
-l = large
@@ -703,50 +250,6 @@ img { display: block; max-width: 100%; }
*/
.cover { background-size: cover !important; }
.contain { background-size: contain !important; }
-.bg1 { background-size: 4px; }
-.bg2 { background-size: 8px; }
-.bg3 { background-size: 16px; }
-.bg4 { background-size: 32px; }
-.bg5 { background-size: 64px; }
-.bg6 { background-size: 100%; }
-.bg7 { background-size: 150%; }
-.bg8 { background-size: 200%; }
-@container (min-width:30em) {
- .cover-s { background-size: cover !important; }
- .contain-s { background-size: contain !important; }
- .bg1-s { background-size: 4px; }
- .bg2-s { background-size: 8px; }
- .bg3-s { background-size: 16px; }
- .bg4-s { background-size: 32px; }
- .bg5-s { background-size: 64px; }
- .bg6-s { background-size: 100%; }
- .bg7-s { background-size: 150%; }
- .bg8-s { background-size: 200%; }
-}
-@container (min-width:48em) {
- .cover-m { background-size: cover !important; }
- .contain-m { background-size: contain !important; }
- .bg1-m { background-size: 4px; }
- .bg2-m { background-size: 8px; }
- .bg3-m { background-size: 16px; }
- .bg4-m { background-size: 32px; }
- .bg5-m { background-size: 64px; }
- .bg6-m { background-size: 100%; }
- .bg7-m { background-size: 150%; }
- .bg8-m { background-size: 200%; }
-}
-@container (min-width:64em) {
- .cover-l { background-size: cover !important; }
- .contain-l { background-size: contain !important; }
- .bg1-l { background-size: 4px; }
- .bg2-l { background-size: 8px; }
- .bg3-l { background-size: 16px; }
- .bg4-l { background-size: 32px; }
- .bg5-l { background-size: 64px; }
- .bg6-l { background-size: 100%; }
- .bg7-l { background-size: 150%; }
- .bg8-l { background-size: 200%; }
-}
/*
BACKGROUND POSITION
@@ -762,7 +265,7 @@ img { display: block; max-width: 100%; }
-left = center left
Media Query Extensions:
- -s = small
+ -ns = not-small
-m = medium
-l = large
@@ -772,59 +275,19 @@ img { display: block; max-width: 100%; }
.bg-right { background-repeat: no-repeat; background-position: center right; }
.bg-bottom { background-repeat: no-repeat; background-position: bottom center; }
.bg-left { background-repeat: no-repeat; background-position: center left; }
-@container (min-width:30em) {
- .bg-center-s { background-repeat: no-repeat; background-position: center center; }
- .bg-top-s { background-repeat: no-repeat; background-position: top center; }
- .bg-right-s { background-repeat: no-repeat; background-position: center right; }
- .bg-bottom-s { background-repeat: no-repeat; background-position: bottom center; }
- .bg-left-s { background-repeat: no-repeat; background-position: center left; }
-}
-@container (min-width:48em) {
- .bg-center-m { background-repeat: no-repeat; background-position: center center; }
- .bg-top-m { background-repeat: no-repeat; background-position: top center; }
- .bg-right-m { background-repeat: no-repeat; background-position: center right; }
- .bg-bottom-m { background-repeat: no-repeat; background-position: bottom center; }
- .bg-left-m { background-repeat: no-repeat; background-position: center left; }
-}
-@container (min-width:64em) {
- .bg-center-l { background-repeat: no-repeat; background-position: center center; }
- .bg-top-l { background-repeat: no-repeat; background-position: top center; }
- .bg-right-l { background-repeat: no-repeat; background-position: center right; }
- .bg-bottom-l { background-repeat: no-repeat; background-position: bottom center; }
- .bg-left-l { background-repeat: no-repeat; background-position: center left; }
-}
/*
OUTLINES
Media Query Extensions:
- -s = small
+ -ns = not-small
-m = medium
-l = large
*/
-.outline { outline: var( --border-width, 1px ) solid currentColor; }
-.outline-color { outline: var( --border-width, 1px ) solid var( --border-color, gray ); }
-.outline-transparent { outline: var( --border-width, 1px ) solid transparent; }
+.outline { outline: 1px solid; }
+.outline-transparent { outline: 1px solid transparent; }
.outline-0 { outline: 0; }
-@container (min-width:30em) {
- .outline-s { outline: var( --border-width, 1px ) solid currentColor; }
- .outline-color-s { outline: var( --border-width, 1px ) solid var( --border-color, gray ); }
- .outline-transparent-s { outline: var( --border-width, 1px ) solid transparent; }
- .outline-0-s { outline: 0; }
-}
-@container (min-width:48em) {
- .outline-m { outline: var( --border-width, 1px ) solid currentColor; }
- .outline-color-m { outline: var( --border-width, 1px ) solid var( --border-color, gray ); }
- .outline-transparent-m { outline: var( --border-width, 1px ) solid transparent; }
- .outline-0-m { outline: 0; }
-}
-@container (min-width:64em) {
- .outline-l { outline: var( --border-width, 1px ) solid currentColor; }
- .outline-color-l { outline: var( --border-width, 1px ) solid var( --border-color, gray ); }
- .outline-transparent-l { outline: var( --border-width, 1px ) solid transparent; }
- .outline-0-l { outline: 0; }
-}
/*
BORDERS
@@ -842,41 +305,17 @@ img { display: block; max-width: 100%; }
n = none
Media Query Extensions:
- -s = small
+ -ns = not-small
-m = medium
-l = large
*/
-.ba { border-style: solid; border-width: var( --border-width, 1px ); }
-.bt { border-top-style: solid; border-top-width: var( --border-width, 1px ); }
-.br { border-right-style: solid; border-right-width: var( --border-width, 1px ); }
-.bb { border-bottom-style: solid; border-bottom-width: var( --border-width, 1px ); }
-.bl { border-left-style: solid; border-left-width: var( --border-width, 1px ); }
+.ba { border-style: solid; border-width: 1px; }
+.bt { border-top-style: solid; border-top-width: 1px; }
+.br { border-right-style: solid; border-right-width: 1px; }
+.bb { border-bottom-style: solid; border-bottom-width: 1px; }
+.bl { border-left-style: solid; border-left-width: 1px; }
.bn { border-style: none; border-width: 0; }
-@container (min-width:30em) {
- .ba-s { border-style: solid; border-width: var( --border-width, 1px ); }
- .bt-s { border-top-style: solid; border-top-width: var( --border-width, 1px ); }
- .br-s { border-right-style: solid; border-right-width: var( --border-width, 1px ); }
- .bb-s { border-bottom-style: solid; border-bottom-width: var( --border-width, 1px ); }
- .bl-s { border-left-style: solid; border-left-width: var( --border-width, 1px ); }
- .bn-s { border-style: none; border-width: 0; }
-}
-@container (min-width:48em) {
- .ba-m { border-style: solid; border-width: var( --border-width, 1px ); }
- .bt-m { border-top-style: solid; border-top-width: var( --border-width, 1px ); }
- .br-m { border-right-style: solid; border-right-width: var( --border-width, 1px ); }
- .bb-m { border-bottom-style: solid; border-bottom-width: var( --border-width, 1px ); }
- .bl-m { border-left-style: solid; border-left-width: var( --border-width, 1px ); }
- .bn-m { border-style: none; border-width: 0; }
-}
-@container (min-width:64em) {
- .ba-l { border-style: solid; border-width: var( --border-width, 1px ); }
- .bt-l { border-top-style: solid; border-top-width: var( --border-width, 1px ); }
- .br-l { border-right-style: solid; border-right-width: var( --border-width, 1px ); }
- .bb-l { border-bottom-style: solid; border-bottom-width: var( --border-width, 1px ); }
- .bl-l { border-left-style: solid; border-left-width: var( --border-width, 1px ); }
- .bn-l { border-style: none; border-width: 0; }
-}
/*
BORDER COLORS
@@ -896,11 +335,67 @@ img { display: block; max-width: 100%; }
--color-name = each color variable name is also a border color name
*/
-.b--color { border-color: var( --border-color, gray ); }
-.b--light { border-color: var( --overlay-tint-2, gray ); }
-.b--dark { border-color: var( --overlay-shadow-9, gray ); }
+.b--black { border-color: #000; }
+.b--near-black { border-color: #111; }
+.b--dark-gray { border-color: #333; }
+.b--mid-gray { border-color: #555; }
+.b--gray { border-color: #777; }
+.b--silver { border-color: #999; }
+.b--light-silver { border-color: #aaa; }
+.b--moon-gray { border-color: #ccc; }
+.b--light-gray { border-color: #eee; }
+.b--near-white { border-color: #f4f4f4; }
+.b--white { border-color: #fff; }
+.b--white-90 { border-color: rgba( 255, 255, 255, .9 ); }
+.b--white-80 { border-color: rgba( 255, 255, 255, .8 ); }
+.b--white-70 { border-color: rgba( 255, 255, 255, .7 ); }
+.b--white-60 { border-color: rgba( 255, 255, 255, .6 ); }
+.b--white-50 { border-color: rgba( 255, 255, 255, .5 ); }
+.b--white-40 { border-color: rgba( 255, 255, 255, .4 ); }
+.b--white-30 { border-color: rgba( 255, 255, 255, .3 ); }
+.b--white-20 { border-color: rgba( 255, 255, 255, .2 ); }
+.b--white-10 { border-color: rgba( 255, 255, 255, .1 ); }
+.b--white-05 { border-color: rgba( 255, 255, 255, .05 ); }
+.b--white-025 { border-color: rgba( 255, 255, 255, .025 ); }
+.b--white-0125 { border-color: rgba( 255, 255, 255, .0125 ); }
+.b--black-90 { border-color: rgba( 0, 0, 0, .9 ); }
+.b--black-80 { border-color: rgba( 0, 0, 0, .8 ); }
+.b--black-70 { border-color: rgba( 0, 0, 0, .7 ); }
+.b--black-60 { border-color: rgba( 0, 0, 0, .6 ); }
+.b--black-50 { border-color: rgba( 0, 0, 0, .5 ); }
+.b--black-40 { border-color: rgba( 0, 0, 0, .4 ); }
+.b--black-30 { border-color: rgba( 0, 0, 0, .3 ); }
+.b--black-20 { border-color: rgba( 0, 0, 0, .2 ); }
+.b--black-10 { border-color: rgba( 0, 0, 0, .1 ); }
+.b--black-05 { border-color: rgba( 0, 0, 0, .05 ); }
+.b--black-025 { border-color: rgba( 0, 0, 0, .025 ); }
+.b--black-0125 { border-color: rgba( 0, 0, 0, .0125 ); }
+.b--dark-red { border-color: #e7040f; }
+.b--red { border-color: #ff4136; }
+.b--light-red { border-color: #ff725c; }
+.b--orange { border-color: #ff6300; }
+.b--gold { border-color: #ffb700; }
+.b--yellow { border-color: #ffd700; }
+.b--light-yellow { border-color: #fbf1a9; }
+.b--purple { border-color: #5e2ca5; }
+.b--light-purple { border-color: #a463f2; }
+.b--dark-pink { border-color: #d5008f; }
+.b--hot-pink { border-color: #ff41b4; }
+.b--pink { border-color: #ff80cc; }
+.b--light-pink { border-color: #ffa3d7; }
+.b--dark-green { border-color: #137752; }
+.b--green { border-color: #19a974; }
+.b--light-green { border-color: #9eebcf; }
+.b--navy { border-color: #001b44; }
+.b--dark-blue { border-color: #00449e; }
+.b--blue { border-color: #357edd; }
+.b--light-blue { border-color: #96ccff; }
+.b--lightest-blue { border-color: #cdecff; }
+.b--washed-blue { border-color: #f6fffe; }
+.b--washed-green { border-color: #e8fdf5; }
+.b--washed-yellow { border-color: #fffceb; }
+.b--washed-red { border-color: #ffdfdf; }
.b--transparent { border-color: transparent; }
-.b--current { border-color: currentColor; }
.b--inherit { border-color: inherit; }
.b--initial { border-color: initial; }
.b--unset { border-color: unset; }
@@ -908,7 +403,6 @@ img { display: block; max-width: 100%; }
BORDER RADIUS
Docs: http://tachyons.io/docs/themes/border-radius/
- Interactive examples: https://components.ai/u/system/cl7crcjia022509masfvq73ny/cl7ztbozs1650909l6rllmvpko
Base:
br = border-radius
@@ -919,32 +413,24 @@ img { display: block; max-width: 100%; }
2 = 2nd step in scale
3 = 3rd step in scale
4 = 4th step in scale
- 5 = 5th step in scale
- 6 = 6th step in scale
Literal values:
-100 = 100%
-pill = 9999px
Media Query Extensions:
- -n = small
+ -ns = not-small
-m = medium
-l = large
*/
-.br-primary { border-radius: var( --border-radius, 6px ); }
-.br0 { border-radius: var( --border-radius-0, 0 ); }
-.br1 { border-radius: var( --border-radius-1, 4px ); }
-.br2 { border-radius: var( --border-radius-2, 6px ); }
-.br3 { border-radius: var( --border-radius-3, 8px ); }
-.br4 { border-radius: var( --border-radius-4, 12px ); }
-.br5 { border-radius: var( --border-radius-5, 16px ); }
-.br6 { border-radius: var( --border-radius-6, 20px ); }
-.br7 { border-radius: var( --border-radius-7, 24px ); }
-.br8 { border-radius: var( --border-radius-8, 32px ); }
-.br9 { border-radius: var( --border-radius-9, 48px ); }
-.br10 { border-radius: var( --border-radius-10, 64px ); }
-.br11 { border-radius: var( --border-radius-11, 9999px ); }
+.br0 { border-radius: 0; }
+.br1 { border-radius: .125rem; }
+.br2 { border-radius: .25rem; }
+.br3 { border-radius: .5rem; }
+.br4 { border-radius: 1rem; }
+.br-100 { border-radius: 100%; }
+.br-pill { border-radius: 9999px; }
.br--bottom { border-top-left-radius: 0; border-top-right-radius: 0; }
.br--top { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.br--right { border-top-left-radius: 0; border-bottom-left-radius: 0; }
@@ -952,72 +438,6 @@ img { display: block; max-width: 100%; }
.br-inherit { border-radius: inherit; }
.br-initial { border-radius: initial; }
.br-unset { border-radius: unset; }
-@container (min-width:30em) {
- .br-primary-s { border-radius: var( --border-radius, 6px ); }
- .br0-s { border-radius: var( --border-radius-0, 0 ); }
- .br1-s { border-radius: var( --border-radius-1, 4px ); }
- .br2-s { border-radius: var( --border-radius-2, 6px ); }
- .br3-s { border-radius: var( --border-radius-3, 8px ); }
- .br4-s { border-radius: var( --border-radius-4, 12px ); }
- .br5-s { border-radius: var( --border-radius-5, 16px ); }
- .br6-s { border-radius: var( --border-radius-6, 20px ); }
- .br7-s { border-radius: var( --border-radius-7, 24px ); }
- .br8-s { border-radius: var( --border-radius-8, 32px ); }
- .br9-s { border-radius: var( --border-radius-9, 48px ); }
- .br10-s { border-radius: var( --border-radius-10, 64px ); }
- .br11-s { border-radius: var( --border-radius-11, 9999px ); }
- .br--bottom-s { border-top-left-radius: 0; border-top-right-radius: 0; }
- .br--top-s { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
- .br--right-s { border-top-left-radius: 0; border-bottom-left-radius: 0; }
- .br--left-s { border-top-right-radius: 0; border-bottom-right-radius: 0; }
- .br-inherit-s { border-radius: inherit; }
- .br-initial-s { border-radius: initial; }
- .br-unset-s { border-radius: unset; }
-}
-@container (min-width:48em) {
- .br-primary-m { border-radius: var( --border-radius, 6px ); }
- .br0-m { border-radius: var( --border-radius-0, 0 ); }
- .br1-m { border-radius: var( --border-radius-1, 4px ); }
- .br2-m { border-radius: var( --border-radius-2, 6px ); }
- .br3-m { border-radius: var( --border-radius-3, 8px ); }
- .br4-m { border-radius: var( --border-radius-4, 12px ); }
- .br5-m { border-radius: var( --border-radius-5, 16px ); }
- .br6-m { border-radius: var( --border-radius-6, 20px ); }
- .br7-m { border-radius: var( --border-radius-7, 24px ); }
- .br8-m { border-radius: var( --border-radius-8, 32px ); }
- .br9-m { border-radius: var( --border-radius-9, 48px ); }
- .br10-m { border-radius: var( --border-radius-10, 64px ); }
- .br11-m { border-radius: var( --border-radius-11, 9999px ); }
- .br--bottom-m { border-top-left-radius: 0; border-top-right-radius: 0; }
- .br--top-m { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
- .br--right-m { border-top-left-radius: 0; border-bottom-left-radius: 0; }
- .br--left-m { border-top-right-radius: 0; border-bottom-right-radius: 0; }
- .br-inherit-m { border-radius: inherit; }
- .br-initial-m { border-radius: initial; }
- .br-unset-m { border-radius: unset; }
-}
-@container (min-width:64em) {
- .br-primary-l { border-radius: var( --border-radius, 6px ); }
- .br0-l { border-radius: var( --border-radius-0, 0 ); }
- .br1-l { border-radius: var( --border-radius-1, 4px ); }
- .br2-l { border-radius: var( --border-radius-2, 6px ); }
- .br3-l { border-radius: var( --border-radius-3, 8px ); }
- .br4-l { border-radius: var( --border-radius-4, 12px ); }
- .br5-l { border-radius: var( --border-radius-5, 16px ); }
- .br6-l { border-radius: var( --border-radius-6, 20px ); }
- .br7-l { border-radius: var( --border-radius-7, 24px ); }
- .br8-l { border-radius: var( --border-radius-8, 32px ); }
- .br9-l { border-radius: var( --border-radius-9, 48px ); }
- .br10-l { border-radius: var( --border-radius-10, 64px ); }
- .br11-l { border-radius: var( --border-radius-11, 9999px ); }
- .br--bottom-l { border-top-left-radius: 0; border-top-right-radius: 0; }
- .br--top-l { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
- .br--right-l { border-top-left-radius: 0; border-bottom-left-radius: 0; }
- .br--left-l { border-top-right-radius: 0; border-bottom-right-radius: 0; }
- .br-inherit-l { border-radius: inherit; }
- .br-initial-l { border-radius: initial; }
- .br-unset-l { border-radius: unset; }
-}
/*
BORDER STYLES
@@ -1035,7 +455,7 @@ img { display: block; max-width: 100%; }
--solid = solid
Media Query Extensions:
- -s = small
+ -ns = not-small
-m = medium
-l = large
@@ -1044,24 +464,6 @@ img { display: block; max-width: 100%; }
.b--dashed { border-style: dashed; }
.b--solid { border-style: solid; }
.b--none { border-style: none; }
-@container (min-width:30em) {
- .b--dotted-s { border-style: dotted; }
- .b--dashed-s { border-style: dashed; }
- .b--solid-s { border-style: solid; }
- .b--none-s { border-style: none; }
-}
-@container (min-width:48em) {
- .b--dotted-m { border-style: dotted; }
- .b--dashed-m { border-style: dashed; }
- .b--solid-m { border-style: solid; }
- .b--none-m { border-style: none; }
-}
-@container (min-width:64em) {
- .b--dotted-l { border-style: dotted; }
- .b--dashed-l { border-style: dashed; }
- .b--solid-l { border-style: solid; }
- .b--none-l { border-style: none; }
-}
/*
BORDER WIDTHS
@@ -1079,130 +481,44 @@ img { display: block; max-width: 100%; }
5 = 5th step in border-width scale
Media Query Extensions:
- -s = small
+ -ns = not-small
-m = medium
-l = large
*/
-.bw { border-width: var( --border-width, 1px ); }
-.bw0 { border-width: var( --border-width-0, 0 ); }
-.bw1 { border-width: var( --border-width-1, 1px ); }
-.bw2 { border-width: var( --border-width-2, 2px ); }
-.bw3 { border-width: var( --border-width-3, 4px ); }
-.bw4 { border-width: var( --border-width-4, 8px ); }
-.bw5 { border-width: var( --border-width-5, 16px ); }
+.bw0 { border-width: 0; }
+.bw1 { border-width: .125rem; }
+.bw2 { border-width: .25rem; }
+.bw3 { border-width: .5rem; }
+.bw4 { border-width: 1rem; }
+.bw5 { border-width: 2rem; }
/* Resets */
.bt-0 { border-top-width: 0; }
.br-0 { border-right-width: 0; }
.bb-0 { border-bottom-width: 0; }
.bl-0 { border-left-width: 0; }
-@container (min-width:30em) {
- .bw-s { border-width: var( --border-width, 1px ); }
- .bw0-s { border-width: var( --border-width-0, 0 ); }
- .bw1-s { border-width: var( --border-width-1, 1px ); }
- .bw2-s { border-width: var( --border-width-2, 2px ); }
- .bw3-s { border-width: var( --border-width-3, 4px ); }
- .bw4-s { border-width: var( --border-width-4, 8px ); }
- .bw5-s { border-width: var( --border-width-5, 16px ); }
- .bt-0-s { border-top-width: 0; }
- .br-0-s { border-right-width: 0; }
- .bb-0-s { border-bottom-width: 0; }
- .bl-0-s { border-left-width: 0; }
-}
-@container (min-width:48em) {
- .bw-m { border-width: var( --border-width, 1px ); }
- .bw0-m { border-width: var( --border-width-0, 0 ); }
- .bw1-m { border-width: var( --border-width-1, 1px ); }
- .bw2-m { border-width: var( --border-width-2, 2px ); }
- .bw3-m { border-width: var( --border-width-3, 4px ); }
- .bw4-m { border-width: var( --border-width-4, 8px ); }
- .bw5-m { border-width: var( --border-width-5, 16px ); }
- .bt-0-m { border-top-width: 0; }
- .br-0-m { border-right-width: 0; }
- .bb-0-m { border-bottom-width: 0; }
- .bl-0-m { border-left-width: 0; }
-}
-@container (min-width:64em) {
- .bw-l { border-width: var( --border-width, 1px ); }
- .bw0-l { border-width: var( --border-width-0, 0 ); }
- .bw1-l { border-width: var( --border-width-1, 1px ); }
- .bw2-l { border-width: var( --border-width-2, 2px ); }
- .bw3-l { border-width: var( --border-width-3, 4px ); }
- .bw4-l { border-width: var( --border-width-4, 8px ); }
- .bw5-l { border-width: var( --border-width-5, 16px ); }
- .bt-0-l { border-top-width: 0; }
- .br-0-l { border-right-width: 0; }
- .bb-0-l { border-bottom-width: 0; }
- .bl-0-l { border-left-width: 0; }
-}
/*
BOX-SHADOW
Docs: http://tachyons.io/docs/themes/box-shadow/
- REF
- Layered shadows: https://tobiasahlin.com/blog/layered-smooth-box-shadows/
-
- Media Query Extensions:
- -s = small
- -m = medium
- -l = large
-
- */
-.shadow { box-shadow: var( --shadow, inset 0 0 1px 0 rgb( var( --shadow-color, 0 0 0 ) / var( --shadow-opacity, .5 ) ) ); }
-.shadow-hover:hover, .shadow-hover:focus { --shadow-opacity: .6; }
-/*
- * TODO: potential pattern
- .shadow-hover:hover {
- --shadow-opacity: .09;
- --shadow-x: 1px;
- --shadow-y: 1px;
- --shadow-blur: 1px;
- --shadow-spread: 1px;
- --shadow-multiplier: 2;
- }
-*/
-/* Box shadow based borders */
-.shadow-border-1 { box-shadow: inset 0 0 var( --shadow-border-width, 1px ) 0 rgb( var( --shadow-color, 0 0 0 ) / var( --shadow-opacity, .125 ) ); }
-.shadow-border-2 { box-shadow: inset 0 0 var( --shadow-border-width, 1px ) 0 rgb( var( --shadow-color, 0 0 0 ) / var( --shadow-opacity, .25 ) ); }
-.shadow-border-3 { box-shadow: inset 0 0 var( --shadow-border-width ) 0 currentColor; }
-.shadow-border-4 { box-shadow: inset 0 0 2px 0 rgb( var( --shadow-color-light, 255 255 255 ) / var( --shadow-opacity, .125 ) ); }
-.shadow-border-5 { box-shadow: inset 0 0 2px 0 rgb( var( --shadow-color, 0 0 0 ) / var( --shadow-opacity, .125 ) ); }
-.shadow-border-6 { box-shadow: inset 0 0 2px 0 currentColor; }
-.shadow-1 { box-shadow: 0 1px 1px rgb( var( --shadow-color, 0 0 0 ) / var( --shadow-opacity, .125 ) ), 0 2px 2px rgb( var( --shadow-color, 0 0 0 ) / var( --shadow-opacity, .125 ) ), 0 4px 4px rgb( var( --shadow-color, 0 0 0 ) / var( --shadow-opacity, .125 ) ), 0 8px 8px rgb( var( --shadow-color, 0 0 0 ) / var( --shadow-opacity, .125 ) ), 0 16px 16px rgb( var( --shadow-color, 0 0 0 ) / var( --shadow-opacity, .125 ) ); }
-.shadow-2 { box-shadow: 0 1px 1px rgb( var( --shadow-color, 0 0 0 ) / var( --shadow-opacity, .125 ) ), 0 2px 2px rgb( var( --shadow-color, 0 0 0 ) / var( --shadow-opacity, .125 ) ), 0 4px 4px rgb( var( --shadow-color, 0 0 0 ) / var( --shadow-opacity, .125 ) ), 0 8px 8px rgb( var( --shadow-color, 0 0 0 ) / var( --shadow-opacity, .125 ) ); }
-.shadow-3 { --shadow-opacity: .11; box-shadow: 0 1px 1px rgb( var( --shadow-color, 0 0 0 ) / var( --shadow-opacity, .11 ) ), 0 2px 2px rgb( var( --shadow-color, 0 0 0 ) / var( --shadow-opacity, .11 ) ), 0 4px 4px rgb( var( --shadow-color, 0 0 0 ) / var( --shadow-opacity, .11 ) ), 0 8px 8px rgb( var( --shadow-color, 0 0 0 ) / var( --shadow-opacity, .11 ) ), 0 16px 16px rgb( var( --shadow-color, 0 0 0 ) / var( --shadow-opacity, .11 ) ), 0 32px 32px rgb( var( --shadow-color, 0 0 0 ) / var( --shadow-opacity, .11 ) ); }
-.shadow-4 { --shadow-opacity: .05; box-shadow: 0 1px 1px rgb( var( --shadow-color, 0 0 0 ) / calc( var( --shadow-opacity, .25 ) * 5 ) ), 0 2px 2px rgb( var( --shadow-color, 0 0 0 ) / calc( var( --shadow-opacity, .20 ) * 4 ) ), 0 4px 4px rgb( var( --shadow-color, 0 0 0 ) / calc( var( --shadow-opacity, .15 ) * 3 ) ), 0 8px 8px rgb( var( --shadow-color, 0 0 0 ) / calc( var( --shadow-opacity, .10 ) * 2 ) ), 0 16px 16px rgb( var( --shadow-color, 0 0 0 ) / var( --shadow-opacity, .05 ) ); }
-.shadow-5 { --shadow-opacity: .08; box-shadow: 0 var( --shadow-y ) 1px rgb( var( --shadow-color, 0 0 0 ) / calc( var( --shadow-opacity, .08 ) * 1 ) ), 0 calc( var( --shadow-y ) * 2 ) 2px rgb( var( --shadow-color, 0 0 0 ) / calc( var( --shadow-opacity, .12 ) * 1.5 ) ), 0 calc( var( --shadow-y ) * 4 ) 4px rgb( var( --shadow-color, 0 0 0 ) / calc( var( --shadow-opacity, .16 ) * 2 ) ), 0 calc( var( --shadow-y ) * 8 ) 8px rgb( var( --shadow-color, 0 0 0 ) / calc( var( --shadow-opacity, .20 ) * 2.5 ) ); }
-.shadow-6 { --shadow-opacity: .07; box-shadow: 0 1px 2px rgb( var( --shadow-color, 0 0 0 ) / var( --shadow-opacity, .7 ) ), 0 2px 4px rgb( var( --shadow-color, 0 0 0 ) / var( --shadow-opacity, .7 ) ), 0 4px 8px rgb( var( --shadow-color, 0 0 0 ) / var( --shadow-opacity, .7 ) ), 0 8px 16px rgb( var( --shadow-color, 0 0 0 ) / var( --shadow-opacity, .7 ) ), 0 16px 32px rgb( var( --shadow-color, 0 0 0 ) / var( --shadow-opacity, .7 ) ), 0 32px 64px rgb( var( --shadow-color, 0 0 0 ) / var( --shadow-opacity, .7 ) ); }
-.shadow-7 { --shadow-opacity: .11; box-shadow: 0 1px 1px rgb( var( --shadow-color, 0 0 0 ) / var( --shadow-opacity, .11 ) ), 0 2px 2px rgb( var( --shadow-color, 0 0 0 ) / var( --shadow-opacity, .11 ) ), 0 4px 4px rgb( var( --shadow-color, 0 0 0 ) / var( --shadow-opacity, .11 ) ), 0 6px 8px rgb( var( --shadow-color, 0 0 0 ) / var( --shadow-opacity, .11 ) ), 0 8px 16px rgb( var( --shadow-color, 0 0 0 ) / var( --shadow-opacity, .11 ) ); }
-.shadow-8 { --shadow-opacity: .09; box-shadow: 0 2px 1px rgb( var( --shadow-color, 0 0 0 ) / .09 ), 0 4px 2px rgb( var( --shadow-color, 0 0 0 ) / .09 ), 0 8px 4px rgb( var( --shadow-color, 0 0 0 ) / .09 ), 0 16px 8px rgb( var( --shadow-color, 0 0 0 ) / .09 ), 0 32px 16px rgb( var( --shadow-color, 0 0 0 ) / .09 ); }
-/*
-
- TEXT-SHADOW
- Docs: http://tachyons.io/docs/themes/text-shadow/
-
Media Query Extensions:
- -s = small
+ -ns = not-small
-m = medium
-l = large
*/
-.text-shadow-1 { text-shadow: rgb( var( --shadow-color ) ) -4px 4px 0; }
-.text-shadow-2 { text-shadow: rgb( var( --shadow-color ) ) -8px 8px 0; }
-.text-shadow-3 { text-shadow: rgb( var( --shadow-color ) / var( --shadow-opacity, .5 ) ) -8px 8px 0; }
-.text-shadow-4 { text-shadow: rgba( var( --shadow-color ) / var( --shadow-opacity, .5 ) ) -4px 4px 8px; }
-.text-shadow-5 { text-shadow: rgb( var( --shadow-color ) ) 2px 0 0, rgb( var( --shadow-color ) ) 0 2px 0, rgb( var( --shadow-color ) ) -2px 0 0, rgb( var( --shadow-color ) ) 0 -2px 0, rgb( var( --shadow-color ) ) -2px -2px 0, rgb( var( --shadow-color ) ) 2px -2px 0, rgb( var( --shadow-color ) ) 2px 2px 0, rgb( var( --shadow-color ) ) -2px 2px 0; }
-.text-shadow-6 { text-shadow: rgb( var( --shadow-color-invert ) ) 2px 0 0, rgb( var( --shadow-color-invert ) ) 0 2px 0, rgb( var( --shadow-color-invert ) ) -2px 0 0, rgb( var( --shadow-color-invert ) ) 0 -2px 0, rgb( var( --shadow-color-invert ) ) -2px -2px 0, rgb( var( --shadow-color-invert ) ) 2px -2px 0, rgb( var( --shadow-color-invert ) ) 2px 2px 0, rgb( var( --shadow-color-invert ) ) -2px 2px 0; }
-@container (min-width:30em) { }
-@container (min-width:48em) { }
-@container (min-width:64em) { }
+.shadow-1 { box-shadow: 0 0 4px 2px rgba( 0, 0, 0, .2 ); }
+.shadow-2 { box-shadow: 0 0 8px 2px rgba( 0, 0, 0, .2 ); }
+.shadow-3 { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, .2 ); }
+.shadow-4 { box-shadow: 2px 2px 8px 0 rgba( 0, 0, 0, .2 ); }
+.shadow-5 { box-shadow: 4px 4px 8px 0 rgba( 0, 0, 0, .2 ); }
/*
CODE
*/
-.pre { max-width: 100%; overflow: auto; }
+.pre { overflow-x: auto; overflow-y: hidden; overflow: scroll; }
/*
COORDINATES
@@ -1224,7 +540,7 @@ img { display: block; max-width: 100%; }
--2 = literal value -2
Media Query Extensions:
- -s = small
+ -ns = not-small
-m = medium
-l = large
@@ -1233,92 +549,23 @@ img { display: block; max-width: 100%; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }
-.top-1 { top: var( --size, 1rem ); }
-.right-1 { right: var( --size, 1rem ); }
-.bottom-1 { bottom: var( --size, 1rem ); }
-.left-1 { left: var( --size, 1rem ); }
-.top-2 { top: calc( var( --size, 1rem ) * 2 ); }
-.right-2 { right: calc( var( --size, 1rem ) * 2 ); }
-.bottom-2 { bottom: calc( var( --size, 1rem ) * 2 ); }
-.left-2 { left: calc( var( --size, 1rem ) * 2 ); }
-.top--1 { top: calc( var( --size, 1rem ) * -1 ); }
-.right--1 { right: calc( var( --size, 1rem ) * -1 ); }
-.bottom--1 { bottom: calc( var( --size, 1rem ) * -1 ); }
-.left--1 { left: calc( var( --size, 1rem ) * -1 ); }
-.top--2 { top: calc( var( --size, 1rem ) * -2 ); }
-.right--2 { right: calc( var( --size, 1rem ) * -2 ); }
-.bottom--2 { bottom: calc( var( --size, 1rem ) * -2 ); }
-.left--2 { left: calc( var( --size, 1rem ) * -2 ); }
-.inset-0 { inset: 0; }
-@container (min-width:30em) {
- .top-0-s { top: 0; }
- .left-0-s { left: 0; }
- .right-0-s { right: 0; }
- .bottom-0-s { bottom: 0; }
- .top-1-s { top: var( --size, 1rem ); }
- .left-1-s { left: var( --size, 1rem ); }
- .right-1-s { right: var( --size, 1rem ); }
- .bottom-1-s { bottom: var( --size, 1rem ); }
- .top-2-s { top: calc( var( --size, 1rem ) * 2 ); }
- .left-2-s { left: calc( var( --size, 1rem ) * 2 ); }
- .right-2-s { right: calc( var( --size, 1rem ) * 2 ); }
- .bottom-2-s { bottom: calc( var( --size, 1rem ) * 2 ); }
- .top--1-s { top: calc( var( --size, 1rem ) * -1 ); }
- .right--1-s { right: calc( var( --size, 1rem ) * -1 ); }
- .bottom--1-s { bottom: calc( var( --size, 1rem ) * -1 ); }
- .left--1-s { left: calc( var( --size, 1rem ) * -1 ); }
- .top--2-s { top: calc( var( --size, 1rem ) * -2 ); }
- .right--2-s { right: calc( var( --size, 1rem ) * -2 ); }
- .bottom--2-s { bottom: calc( var( --size, 1rem ) * -2 ); }
- .left--2-s { left: calc( var( --size, 1rem ) * -2 ); }
- .inset-0-s { inset: 0; }
-}
-@container (min-width:48em) {
- .top-0-m { top: 0; }
- .left-0-m { left: 0; }
- .right-0-m { right: 0; }
- .bottom-0-m { bottom: 0; }
- .top-1-m { top: var( --size, 1rem ); }
- .left-1-m { left: var( --size, 1rem ); }
- .right-1-m { right: var( --size, 1rem ); }
- .bottom-1-m { bottom: var( --size, 1rem ); }
- .top-2-m { top: calc( var( --size, 1rem ) * 2 ); }
- .left-2-m { left: calc( var( --size, 1rem ) * 2 ); }
- .right-2-m { right: calc( var( --size, 1rem ) * 2 ); }
- .bottom-2-m { bottom: calc( var( --size, 1rem ) * 2 ); }
- .top--1-m { top: calc( var( --size, 1rem ) * -1 ); }
- .right--1-m { right: calc( var( --size, 1rem ) * -1 ); }
- .bottom--1-m { bottom: calc( var( --size, 1rem ) * -1 ); }
- .left--1-m { left: calc( var( --size, 1rem ) * -1 ); }
- .top--2-m { top: calc( var( --size, 1rem ) * -2 ); }
- .right--2-m { right: calc( var( --size, 1rem ) * -2 ); }
- .bottom--2-m { bottom: calc( var( --size, 1rem ) * -2 ); }
- .left--2-m { left: calc( var( --size, 1rem ) * -2 ); }
- .inset-0-m { inset: 0; }
-}
-@container (min-width:64em) {
- .top-0-l { top: 0; }
- .left-0-l { left: 0; }
- .right-0-l { right: 0; }
- .bottom-0-l { bottom: 0; }
- .top-1-l { top: var( --size, 1rem ); }
- .left-1-l { left: var( --size, 1rem ); }
- .right-1-l { right: var( --size, 1rem ); }
- .bottom-1-l { bottom: var( --size, 1rem ); }
- .top-2-l { top: calc( var( --size, 1rem ) * 2 ); }
- .left-2-l { left: calc( var( --size, 1rem ) * 2 ); }
- .right-2-l { right: calc( var( --size, 1rem ) * 2 ); }
- .bottom-2-l { bottom: calc( var( --size, 1rem ) * 2 ); }
- .top--1-l { top: calc( var( --size, 1rem ) * -1 ); }
- .right--1-l { right: calc( var( --size, 1rem ) * -1 ); }
- .bottom--1-l { bottom: calc( var( --size, 1rem ) * -1 ); }
- .left--1-l { left: calc( var( --size, 1rem ) * -1 ); }
- .top--2-l { top: calc( var( --size, 1rem ) * -2 ); }
- .right--2-l { right: calc( var( --size, 1rem ) * -2 ); }
- .bottom--2-l { bottom: calc( var( --size, 1rem ) * -2 ); }
- .left--2-l { left: calc( var( --size, 1rem ) * -2 ); }
- .inset-0-l { inset: 0; }
-}
+.top-1 { top: 1rem; }
+.right-1 { right: 1rem; }
+.bottom-1 { bottom: 1rem; }
+.left-1 { left: 1rem; }
+.top-2 { top: 2rem; }
+.right-2 { right: 2rem; }
+.bottom-2 { bottom: 2rem; }
+.left-2 { left: 2rem; }
+.top--1 { top: -1rem; }
+.right--1 { right: -1rem; }
+.bottom--1 { bottom: -1rem; }
+.left--1 { left: -1rem; }
+.top--2 { top: -2rem; }
+.right--2 { right: -2rem; }
+.bottom--2 { bottom: -2rem; }
+.left--2 { left: -2rem; }
+.absolute--fill { top: 0; right: 0; bottom: 0; left: 0; }
/*
CLEARFIX
@@ -1329,6 +576,7 @@ img { display: block; max-width: 100%; }
Ref: http://nicolasgallagher.com/micro-clearfix-hack/ */
.cf:before, .cf:after { content: " "; display: table; }
.cf:after { clear: both; }
+.cf { *zoom: 1; }
.cl { clear: left; }
.cr { clear: right; }
.cb { clear: both; }
@@ -1345,13 +593,15 @@ img { display: block; max-width: 100%; }
n = none
b = block
ib = inline-block
- if = inline-flex
- ig = inline-grid
- f = flex
- g = grid
+ it = inline-table
+ t = table
+ tc = table-cell
+ t-row = table-row
+ t-columm = table-column
+ t-column-group = table-column-group
Media Query Extensions:
- -s = small
+ -ns = not-small
-m = medium
-l = large
@@ -1360,4450 +610,2706 @@ img { display: block; max-width: 100%; }
.di { display: inline; }
.db { display: block; }
.dib { display: inline-block; }
-.df, .flex { display: flex; }
-.dif, .inline-flex { display: inline-flex; }
-.dg, .grid { display: grid; }
-.dig, .inline-grid { display: inline-grid; }
-@container (min-width:30em) {
- .dn-s { display: none; }
- .di-s { display: inline; }
- .db-s { display: block; }
- .dib-s { display: inline-block; }
- .df-s, .flex-s { display: flex; }
- .dif-s, .inline-flex-s { display: inline-flex; }
- .dg-s, .grid-s { display: grid; }
- .dig-s, .inline-grid-s { display: inline-grid; }
-}
-@container (min-width:48em) {
- .dn-m { display: none; }
- .di-m { display: inline; }
- .db-m { display: block; }
- .dib-m { display: inline-block; }
- .df-m, .flex-m { display: flex; }
- .dif-m, .inline-flex-m { display: inline-flex; }
- .dg-m, .grid-m { display: grid; }
- .dig-m, .inline-grid-m { display: inline-grid; }
-}
-@container (min-width:64em) {
- .dn-l { display: none; }
- .di-l { display: inline; }
- .db-l { display: block; }
- .dib-l { display: inline-block; }
- .df-l, .flex-l { display: flex; }
- .dif-l, .inline-flex-l { display: inline-flex; }
- .dg-l, .grid-l { display: grid; }
- .dig-l, .inline-grid-l { display: inline-grid; }
-}
-.glass1 { background: rgba( 255, 255, 255, 0 ); box-shadow: 0 4px 30px rgba( 0, 0, 0, .1 ); -webkit-backdrop-filter: blur( 20px ); backdrop-filter: blur( 20px ); border: 1px solid rgba( 255, 255, 255, .15 ); }
-.glass2 { background: rgba( 255, 255, 255, .05 ); box-shadow: 0 4px 30px rgba( 0, 0, 0, .1 ); -webkit-backdrop-filter: blur( 20px ); backdrop-filter: blur( 20px ); border: 1px solid rgba( 255, 255, 255, .15 ); }
-.glass3 { background: rgba( 255, 255, 255, .15 ); box-shadow: 0 4px 30px rgba( 0, 0, 0, .1 ); -webkit-backdrop-filter: blur( 20px ); backdrop-filter: blur( 20px ); border: 1px solid rgba( 255, 255, 255, .15 ); }
-.glass4 { background: rgba( 255, 255, 255, .25 ); box-shadow: 0 4px 30px rgba( 0, 0, 0, .1 ); -webkit-backdrop-filter: blur( 20px ); backdrop-filter: blur( 20px ); border: 1px solid rgba( 255, 255, 255, .15 ); }
-.glass5 { background: rgba( 255, 255, 255, 0 ); box-shadow: 0 4px 30px rgba( 0, 0, 0, .1 ); -webkit-backdrop-filter: blur( 16px ); backdrop-filter: blur( 16px ); border: 1px solid rgba( 255, 255, 255, .15 ); }
-.glass6 { background: rgba( 255, 255, 255, .05 ); box-shadow: 0 4px 30px rgba( 0, 0, 0, .1 ); -webkit-backdrop-filter: blur( 16px ); backdrop-filter: blur( 16px ); border: 1px solid rgba( 255, 255, 255, .15 ); }
-.glass7 { background: rgba( 255, 255, 255, .15 ); box-shadow: 0 4px 30px rgba( 0, 0, 0, .1 ); -webkit-backdrop-filter: blur( 16px ); backdrop-filter: blur( 16px ); border: 1px solid rgba( 255, 255, 255, .15 ); }
-.glass8 { background: rgba( 255, 255, 255, .25 ); box-shadow: 0 4px 30px rgba( 0, 0, 0, .1 ); -webkit-backdrop-filter: blur( 16px ); backdrop-filter: blur( 16px ); border: 1px solid rgba( 255, 255, 255, .15 ); }
-.glass9 { background: rgba( 255, 255, 255, .25 ); box-shadow: 0 4px 30px rgba( 0, 0, 0, .1 ); border: 1px solid rgba( 255, 255, 255, .15 ); }
-.glass10 { background: rgba( 255, 255, 255, 0 ); box-shadow: 0 4px 30px rgba( 0, 0, 0, .1 ); border: 1px solid rgba( 255, 255, 255, .15 ); }
-.glass1-hover:hover { background: rgba( 255, 255, 255, 0 ); box-shadow: 0 4px 30px rgba( 0, 0, 0, .1 ); -webkit-backdrop-filter: blur( 20px ); backdrop-filter: blur( 20px ); border: 1px solid rgba( 255, 255, 255, .15 ); }
-.glass2-hover:hover { background: rgba( 255, 255, 255, .05 ); box-shadow: 0 4px 30px rgba( 0, 0, 0, .1 ); -webkit-backdrop-filter: blur( 20px ); backdrop-filter: blur( 20px ); border: 1px solid rgba( 255, 255, 255, .15 ); }
-.glass3-hover:hover { background: rgba( 255, 255, 255, .15 ); box-shadow: 0 4px 30px rgba( 0, 0, 0, .1 ); -webkit-backdrop-filter: blur( 20px ); backdrop-filter: blur( 20px ); border: 1px solid rgba( 255, 255, 255, .15 ); }
-.glass4-hover:hover { background: rgba( 255, 255, 255, .25 ); box-shadow: 0 4px 30px rgba( 0, 0, 0, .1 ); -webkit-backdrop-filter: blur( 20px ); backdrop-filter: blur( 20px ); border: 1px solid rgba( 255, 255, 255, .15 ); }
-.glass5-hover:hover { background: rgba( 255, 255, 255, 0 ); box-shadow: 0 4px 30px rgba( 0, 0, 0, .1 ); -webkit-backdrop-filter: blur( 16px ); backdrop-filter: blur( 16px ); border: 1px solid rgba( 255, 255, 255, .15 ); }
-.glass6-hover:hover { background: rgba( 255, 255, 255, .05 ); box-shadow: 0 4px 30px rgba( 0, 0, 0, .1 ); -webkit-backdrop-filter: blur( 16px ); backdrop-filter: blur( 16px ); border: 1px solid rgba( 255, 255, 255, .15 ); }
-.glass7-hover:hover { background: rgba( 255, 255, 255, .15 ); box-shadow: 0 4px 30px rgba( 0, 0, 0, .1 ); -webkit-backdrop-filter: blur( 16px ); backdrop-filter: blur( 16px ); border: 1px solid rgba( 255, 255, 255, .15 ); }
-.glass8-hover:hover { background: rgba( 255, 255, 255, .25 ); box-shadow: 0 4px 30px rgba( 0, 0, 0, .1 ); -webkit-backdrop-filter: blur( 16px ); backdrop-filter: blur( 16px ); border: 1px solid rgba( 255, 255, 255, .15 ); }
-.glass9-hover:hover { background: rgba( 255, 255, 255, .25 ); box-shadow: 0 4px 30px rgba( 0, 0, 0, .1 ); border: 1px solid rgba( 255, 255, 255, .15 ); }
-.glass10-hover:hover { background: rgba( 255, 255, 255, 0 ); box-shadow: 0 4px 30px rgba( 0, 0, 0, .1 ); border: 1px solid rgba( 255, 255, 255, .15 ); }
-.glass1-focus:focus { background: rgba( 255, 255, 255, 0 ); box-shadow: 0 4px 30px rgba( 0, 0, 0, .1 ); -webkit-backdrop-filter: blur( 20px ); backdrop-filter: blur( 20px ); border: 1px solid rgba( 255, 255, 255, .15 ); }
-.glass2-focus:focus { background: rgba( 255, 255, 255, .05 ); box-shadow: 0 4px 30px rgba( 0, 0, 0, .1 ); -webkit-backdrop-filter: blur( 20px ); backdrop-filter: blur( 20px ); border: 1px solid rgba( 255, 255, 255, .15 ); }
-.glass3-focus:focus { background: rgba( 255, 255, 255, .15 ); box-shadow: 0 4px 30px rgba( 0, 0, 0, .1 ); -webkit-backdrop-filter: blur( 20px ); backdrop-filter: blur( 20px ); border: 1px solid rgba( 255, 255, 255, .15 ); }
-.glass4-focus:focus { background: rgba( 255, 255, 255, .25 ); box-shadow: 0 4px 30px rgba( 0, 0, 0, .1 ); -webkit-backdrop-filter: blur( 20px ); backdrop-filter: blur( 20px ); border: 1px solid rgba( 255, 255, 255, .15 ); }
-.glass5-focus:focus { background: rgba( 255, 255, 255, 0 ); box-shadow: 0 4px 30px rgba( 0, 0, 0, .1 ); -webkit-backdrop-filter: blur( 16px ); backdrop-filter: blur( 16px ); border: 1px solid rgba( 255, 255, 255, .15 ); }
-.glass6-focus:focus { background: rgba( 255, 255, 255, .05 ); box-shadow: 0 4px 30px rgba( 0, 0, 0, .1 ); -webkit-backdrop-filter: blur( 16px ); backdrop-filter: blur( 16px ); border: 1px solid rgba( 255, 255, 255, .15 ); }
-.glass7-focus:focus { background: rgba( 255, 255, 255, .15 ); box-shadow: 0 4px 30px rgba( 0, 0, 0, .1 ); -webkit-backdrop-filter: blur( 16px ); backdrop-filter: blur( 16px ); border: 1px solid rgba( 255, 255, 255, .15 ); }
-.glass8-focus:focus { background: rgba( 255, 255, 255, .25 ); box-shadow: 0 4px 30px rgba( 0, 0, 0, .1 ); -webkit-backdrop-filter: blur( 16px ); backdrop-filter: blur( 16px ); border: 1px solid rgba( 255, 255, 255, .15 ); }
-.glass9-focus:focus { background: rgba( 255, 255, 255, .25 ); box-shadow: 0 4px 30px rgba( 0, 0, 0, .1 ); border: 1px solid rgba( 255, 255, 255, .15 ); }
-.glass10-focus:focus { background: rgba( 255, 255, 255, 0 ); box-shadow: 0 4px 30px rgba( 0, 0, 0, .1 ); border: 1px solid rgba( 255, 255, 255, .15 ); }
+.dit { display: inline-table; }
+.dt { display: table; }
+.dtc { display: table-cell; }
+.dt-row { display: table-row; }
+.dt-row-group { display: table-row-group; }
+.dt-column { display: table-column; }
+.dt-column-group { display: table-column-group; }
+/*
+ This will set table to full width and then
+ all cells will be equal width
+*/
+.dt--fixed { table-layout: fixed; width: 100%; }
/*
- GAP: GRID AND FLEX SPACING
- Docs: http://tachyons.io/docs/layout/gap/
-
- Base:
- g = gap
+ FLEXBOX
- Media Query Extensions:
- -s = small
- -m = medium
- -l = large
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
*/
-.g0 { gap: var( --spacing-0, 0 ); }
-.g1 { gap: var( --spacing-1, 4px ); }
-.g2 { gap: var( --spacing-2, 8px ); }
-.g3 { gap: var( --spacing-3, 16px ); }
-.g4 { gap: var( --spacing-4, 32px ); }
-.g5 { gap: var( --spacing-5, 64px ); }
-.g6 { gap: var( --spacing-6, 128px ); }
-.g7 { gap: var( --spacing-7, 256px ); }
-@container (min-width:30em) {
- .g0-s { gap: var( --spacing-0, 0 ); }
- .g1-s { gap: var( --spacing-1, 4px ); }
- .g2-s { gap: var( --spacing-2, 8px ); }
- .g3-s { gap: var( --spacing-3, 16px ); }
- .g4-s { gap: var( --spacing-4, 32px ); }
- .g5-s { gap: var( --spacing-5, 64px ); }
- .g6-s { gap: var( --spacing-6, 128px ); }
- .g7-s { gap: var( --spacing-7, 256px ); }
-}
-@container (min-width:48em) {
- .g0-m { gap: var( --spacing-0, 0 ); }
- .g1-m { gap: var( --spacing-1, 4px ); }
- .g2-m { gap: var( --spacing-2, 8px ); }
- .g3-m { gap: var( --spacing-3, 16px ); }
- .g4-m { gap: var( --spacing-4, 32px ); }
- .g5-m { gap: var( --spacing-5, 64px ); }
- .g6-m { gap: var( --spacing-6, 128px ); }
- .g7-m { gap: var( --spacing-7, 256px ); }
-}
-@container (min-width:64em) {
- .g0-l { gap: var( --spacing-0 ); }
- .g1-l { gap: var( --spacing-1 ); }
- .g2-l { gap: var( --spacing-2 ); }
- .g3-l { gap: var( --spacing-3 ); }
- .g4-l { gap: var( --spacing-4 ); }
- .g5-l { gap: var( --spacing-5 ); }
- .g6-l { gap: var( --spacing-6 ); }
- .g7-l { gap: var( --spacing-7 ); }
-}
+.flex { display: flex; }
+.inline-flex { display: inline-flex; }
+/* 1. Fix for Chrome 44 bug.
+ * https://code.google.com/p/chromium/issues/detail?id=506893 */
+.flex-auto { flex: 1 1 auto; min-width: 0; /* 1 */ min-height: 0; /* 1 */ }
+.flex-none { flex: none; }
+.flex-column { flex-direction: column; }
+.flex-row { flex-direction: row; }
+.flex-wrap { flex-wrap: wrap; }
+.flex-nowrap { flex-wrap: nowrap; }
+.flex-wrap-reverse { flex-wrap: wrap-reverse; }
+.flex-column-reverse { flex-direction: column-reverse; }
+.flex-row-reverse { flex-direction: row-reverse; }
+.items-start { align-items: flex-start; }
+.items-end { align-items: flex-end; }
+.items-center { align-items: center; }
+.items-baseline { align-items: baseline; }
+.items-stretch { align-items: stretch; }
+.self-start { align-self: flex-start; }
+.self-end { align-self: flex-end; }
+.self-center { align-self: center; }
+.self-baseline { align-self: baseline; }
+.self-stretch { align-self: stretch; }
+.justify-start { justify-content: flex-start; }
+.justify-end { justify-content: flex-end; }
+.justify-center { justify-content: center; }
+.justify-between { justify-content: space-between; }
+.justify-around { justify-content: space-around; }
+.content-start { align-content: flex-start; }
+.content-end { align-content: flex-end; }
+.content-center { align-content: center; }
+.content-between { align-content: space-between; }
+.content-around { align-content: space-around; }
+.content-stretch { align-content: stretch; }
+.order-0 { order: 0; }
+.order-1 { order: 1; }
+.order-2 { order: 2; }
+.order-3 { order: 3; }
+.order-4 { order: 4; }
+.order-5 { order: 5; }
+.order-6 { order: 6; }
+.order-7 { order: 7; }
+.order-8 { order: 8; }
+.order-last { order: 99999; }
+.flex-grow-0 { flex-grow: 0; }
+.flex-grow-1 { flex-grow: 1; }
+.flex-shrink-0 { flex-shrink: 0; }
+.flex-shrink-1 { flex-shrink: 1; }
/*
- GAP: GRID AND FLEX SPACING
- Docs: http://tachyons.io/docs/layout/gap/
+
+ FLOATS
+ http://tachyons.io/docs/layout/floats/
+
+ 1. Floated elements are automatically rendered as block level elements.
+ Setting floats to display inline will fix the double margin bug in
+ ie6. You know... just in case.
+
+ 2. Don't forget to clearfix your floats with .cf
Base:
- g = gap
+ f = float
+ Modifiers:
+ l = left
+ r = right
+ n = none
Media Query Extensions:
- -s = small
+ -ns = not-small
-m = medium
-l = large
*/
-.gc0 { gap-column: var( --spacing-0, 0 ); }
-.gc1 { gap-column: var( --spacing-1, 4px ); }
-.gc2 { gap-column: var( --spacing-2, 8px ); }
-.gc3 { gap-column: var( --spacing-3, 16px ); }
-.gc4 { gap-column: var( --spacing-4, 32px ); }
-.gc5 { gap-column: var( --spacing-5, 64px ); }
-.gc6 { gap-column: var( --spacing-6, 128px ); }
-.gc7 { gap-column: var( --spacing-7, 256px ); }
-@container (min-width:30em) {
- .gc0-s { gap-column: var( --spacing-0, 0 ); }
- .gc1-s { gap-column: var( --spacing-1, 4px ); }
- .gc2-s { gap-column: var( --spacing-2, 8px ); }
- .gc3-s { gap-column: var( --spacing-3, 16px ); }
- .gc4-s { gap-column: var( --spacing-4, 32px ); }
- .gc5-s { gap-column: var( --spacing-5, 64px ); }
- .gc6-s { gap-column: var( --spacing-6, 128px ); }
- .gc7-s { gap-column: var( --spacing-7, 256px ); }
-}
-@container (min-width:48em) {
- .gc0-m { gap-column: var( --spacing-0, 0 ); }
- .gc1-m { gap-column: var( --spacing-1, 4px ); }
- .gc2-m { gap-column: var( --spacing-2, 8px ); }
- .gc3-m { gap-column: var( --spacing-3, 16px ); }
- .gc4-m { gap-column: var( --spacing-4, 32px ); }
- .gc5-m { gap-column: var( --spacing-5, 64px ); }
- .gc6-m { gap-column: var( --spacing-6, 128px ); }
- .gc7-m { gap-column: var( --spacing-7, 256px ); }
-}
-@container (min-width:64em) {
- .gc0-l { gap-column: var( --spacing-0 ); }
- .gc1-l { gap-column: var( --spacing-1 ); }
- .gc2-l { gap-column: var( --spacing-2 ); }
- .gc3-l { gap-column: var( --spacing-3 ); }
- .gc4-l { gap-column: var( --spacing-4 ); }
- .gc5-l { gap-column: var( --spacing-5 ); }
- .gc6-l { gap-column: var( --spacing-6 ); }
- .gc7-l { gap-column: var( --spacing-7 ); }
-}
+.fl { float: left; _display: inline; }
+.fr { float: right; _display: inline; }
+.fn { float: none; }
/*
- GAP: GRID AND FLEX SPACING
- Docs: http://tachyons.io/docs/layout/gap/
- Base:
- g = gap
+ FONT FAMILY GROUPS
+ Docs: http://tachyons.io/docs/typography/font-family/
+*/
+.sans-serif { font-family: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif; }
+.serif { font-family: georgia, times, serif; }
+.system-sans-serif { font-family: sans-serif; }
+.system-serif { font-family: serif; }
+/* Monospaced Typefaces (for code) */
+/* From http://cssfontstack.com */
+code, .code { font-family: Consolas, monaco, monospace; }
+.courier { font-family: 'Courier Next', courier, monospace; }
+/* Sans-Serif Typefaces */
+.helvetica { font-family: 'helvetica neue', helvetica, sans-serif; }
+.avenir { font-family: 'avenir next', avenir, sans-serif; }
+/* Serif Typefaces */
+.athelas { font-family: athelas, georgia, serif; }
+.georgia { font-family: georgia, serif; }
+.times { font-family: times, serif; }
+.bodoni { font-family: "Bodoni MT", serif; }
+.calisto { font-family: "Calisto MT", serif; }
+.garamond { font-family: garamond, serif; }
+.baskerville { font-family: baskerville, serif; }
+/*
+
+ FONT STYLE
+ Docs: http://tachyons.io/docs/typography/font-style/
Media Query Extensions:
- -s = small
+ -ns = not-small
-m = medium
-l = large
*/
-.gr0 { gap-row: var( --spacing-0, 0 ); }
-.gr1 { gap-row: var( --spacing-1, 4px ); }
-.gr2 { gap-row: var( --spacing-2, 8px ); }
-.gr3 { gap-row: var( --spacing-3, 16px ); }
-.gr4 { gap-row: var( --spacing-4, 32px ); }
-.gr5 { gap-row: var( --spacing-5, 64px ); }
-.gr6 { gap-row: var( --spacing-6, 128px ); }
-.gr7 { gap-row: var( --spacing-7, 256px ); }
-@container (min-width:30em) {
- .gr0-s { gap-row: var( --spacing-0, 0 ); }
- .gr1-s { gap-row: var( --spacing-1, 4px ); }
- .gr2-s { gap-row: var( --spacing-2, 8px ); }
- .gr3-s { gap-row: var( --spacing-3, 16px ); }
- .gr4-s { gap-row: var( --spacing-4, 32px ); }
- .gr5-s { gap-row: var( --spacing-5, 64px ); }
- .gr6-s { gap-row: var( --spacing-6, 128px ); }
- .gr7-s { gap-row: var( --spacing-7, 256px ); }
-}
-@container (min-width:48em) {
- .gr0-m { gap-row: var( --spacing-0, 0 ); }
- .gr1-m { gap-row: var( --spacing-1, 4px ); }
- .gr2-m { gap-row: var( --spacing-2, 8px ); }
- .gr3-m { gap-row: var( --spacing-3, 16px ); }
- .gr4-m { gap-row: var( --spacing-4, 32px ); }
- .gr5-m { gap-row: var( --spacing-5, 64px ); }
- .gr6-m { gap-row: var( --spacing-6, 128px ); }
- .gr7-m { gap-row: var( --spacing-7, 256px ); }
-}
-@container (min-width:64em) {
- .gr0-l { gap-row: var( --spacing-0 ); }
- .gr1-l { gap-row: var( --spacing-1 ); }
- .gr2-l { gap-row: var( --spacing-2 ); }
- .gr3-l { gap-row: var( --spacing-3 ); }
- .gr4-l { gap-row: var( --spacing-4 ); }
- .gr5-l { gap-row: var( --spacing-5 ); }
- .gr6-l { gap-row: var( --spacing-6 ); }
- .gr7-l { gap-row: var( --spacing-7 ); }
-}
+.i { font-style: italic; }
+.fs-normal { font-style: normal; }
/*
- Grid Template Columns
- Docs: http://tachyons.io/docs/layout/grid-template-columns/
-
- Base:
- cols = columns
+ FONT WEIGHT
+ Docs: http://tachyons.io/docs/typography/font-weight/
-*/
-.cols-1 { grid-template-columns: repeat( 1, 1fr ); }
-.cols-2 { grid-template-columns: repeat( 2, 1fr ); }
-.cols-3 { grid-template-columns: repeat( 3, 1fr ); }
-.cols-4 { grid-template-columns: repeat( 4, 1fr ); }
-.cols-5 { grid-template-columns: repeat( 5, 1fr ); }
-.cols-6 { grid-template-columns: repeat( 6, 1fr ); }
-.cols-7 { grid-template-columns: repeat( 7, 1fr ); }
-.cols-8 { grid-template-columns: repeat( 8, 1fr ); }
-.cols-9 { grid-template-columns: repeat( 9, 1fr ); }
-.cols-10 { grid-template-columns: repeat( 10, 1fr ); }
-.cols-11 { grid-template-columns: repeat( 11, 1fr ); }
-.cols-12 { grid-template-columns: repeat( 12, 1fr ); }
-.cols-13 { grid-template-columns: repeat( 13, 1fr ); }
-.cols-14 { grid-template-columns: repeat( 14, 1fr ); }
-.cols-15 { grid-template-columns: repeat( 15, 1fr ); }
-.cols-16 { grid-template-columns: repeat( 16, 1fr ); }
-.cols-min-32 { grid-template-columns: repeat( auto-fill, minmax( 32px, 1fr ) ); }
-.cols-min-64 { grid-template-columns: repeat( auto-fill, minmax( 64px, 1fr ) ); }
-.cols-min-128 { grid-template-columns: repeat( auto-fill, minmax( 128px, 1fr ) ); }
-.cols-min-192 { grid-template-columns: repeat( auto-fill, minmax( 192px, 1fr ) ); }
-.cols-min-240 { grid-template-columns: repeat( auto-fill, minmax( 240px, 1fr ) ); }
-.cols-min-256 { grid-template-columns: repeat( auto-fill, minmax( 256px, 1fr ) ); }
-.cols-min-320 { grid-template-columns: repeat( auto-fill, minmax( 320px, 1fr ) ); }
-.cols-min-480 { grid-template-columns: repeat( auto-fill, minmax( 480px, 1fr ) ); }
-.masonry { grid-template-columns: masonry; }
-.subgrid { grid-template-columns: subgrid; }
-.cols-none { grid-template-columns: none; }
-@container (min-width:30em) {
- .cols-1-s { grid-template-columns: repeat( 1, 1fr ); }
- .cols-2-s { grid-template-columns: repeat( 2, 1fr ); }
- .cols-3-s { grid-template-columns: repeat( 3, 1fr ); }
- .cols-4-s { grid-template-columns: repeat( 4, 1fr ); }
- .cols-5-s { grid-template-columns: repeat( 5, 1fr ); }
- .cols-6-s { grid-template-columns: repeat( 6, 1fr ); }
- .cols-7-s { grid-template-columns: repeat( 7, 1fr ); }
- .cols-8-s { grid-template-columns: repeat( 8, 1fr ); }
- .cols-9-s { grid-template-columns: repeat( 9, 1fr ); }
- .cols-10-s { grid-template-columns: repeat( 10, 1fr ); }
- .cols-11-s { grid-template-columns: repeat( 11, 1fr ); }
- .cols-12-s { grid-template-columns: repeat( 12, 1fr ); }
- .cols-13-s { grid-template-columns: repeat( 13, 1fr ); }
- .cols-14-s { grid-template-columns: repeat( 14, 1fr ); }
- .cols-15-s { grid-template-columns: repeat( 15, 1fr ); }
- .cols-16-s { grid-template-columns: repeat( 16, 1fr ); }
- .cols-min-32-s { grid-template-columns: repeat( auto-fill, minmax( 64px, 1fr ) ); }
- .cols-min-64-s { grid-template-columns: repeat( auto-fill, minmax( 64px, 1fr ) ); }
- .cols-min-128-s { grid-template-columns: repeat( auto-fill, minmax( 128px, 1fr ) ); }
- .cols-min-192-s { grid-template-columns: repeat( auto-fill, minmax( 192px, 1fr ) ); }
- .cols-min-240-s { grid-template-columns: repeat( auto-fill, minmax( 240px, 1fr ) ); }
- .cols-min-256-s { grid-template-columns: repeat( auto-fill, minmax( 256px, 1fr ) ); }
- .cols-min-320-s { grid-template-columns: repeat( auto-fill, minmax( 320px, 1fr ) ); }
- .cols-min-480-s { grid-template-columns: repeat( auto-fill, minmax( 480px, 1fr ) ); }
- .masonry-s { grid-template-columns: masonry; }
- .subgrid-s { grid-template-columns: subgrid; }
- .cols-none-s { grid-template-columns: none; }
-}
-@container (min-width:48em) {
- .cols-1-m { grid-template-columns: repeat( 1, 1fr ); }
- .cols-2-m { grid-template-columns: repeat( 2, 1fr ); }
- .cols-3-m { grid-template-columns: repeat( 3, 1fr ); }
- .cols-4-m { grid-template-columns: repeat( 4, 1fr ); }
- .cols-5-m { grid-template-columns: repeat( 5, 1fr ); }
- .cols-6-m { grid-template-columns: repeat( 6, 1fr ); }
- .cols-7-m { grid-template-columns: repeat( 7, 1fr ); }
- .cols-8-m { grid-template-columns: repeat( 8, 1fr ); }
- .cols-9-m { grid-template-columns: repeat( 9, 1fr ); }
- .cols-10-m { grid-template-columns: repeat( 10, 1fr ); }
- .cols-11-m { grid-template-columns: repeat( 11, 1fr ); }
- .cols-12-m { grid-template-columns: repeat( 12, 1fr ); }
- .cols-13-m { grid-template-columns: repeat( 13, 1fr ); }
- .cols-14-m { grid-template-columns: repeat( 14, 1fr ); }
- .cols-15-m { grid-template-columns: repeat( 15, 1fr ); }
- .cols-16-m { grid-template-columns: repeat( 16, 1fr ); }
- .cols-min-64-m { grid-template-columns: repeat( auto-fill, minmax( 64px, 1fr ) ); }
- .cols-min-128-m { grid-template-columns: repeat( auto-fill, minmax( 128px, 1fr ) ); }
- .cols-min-192-m { grid-template-columns: repeat( auto-fill, minmax( 192px, 1fr ) ); }
- .cols-min-240-m { grid-template-columns: repeat( auto-fill, minmax( 240px, 1fr ) ); }
- .cols-min-256-m { grid-template-columns: repeat( auto-fill, minmax( 256px, 1fr ) ); }
- .cols-min-320-m { grid-template-columns: repeat( auto-fill, minmax( 320px, 1fr ) ); }
- .cols-min-480-m { grid-template-columns: repeat( auto-fill, minmax( 480px, 1fr ) ); }
- .masonry-m { grid-template-columns: masonry; }
- .subgrid-m { grid-template-columns: subgrid; }
- .cols-none-m { grid-template-columns: none; }
-}
-@container (min-width:64em) {
- .cols-1-l { grid-template-columns: repeat( 1, 1fr ); }
- .cols-2-l { grid-template-columns: repeat( 2, 1fr ); }
- .cols-3-l { grid-template-columns: repeat( 3, 1fr ); }
- .cols-4-l { grid-template-columns: repeat( 4, 1fr ); }
- .cols-5-l { grid-template-columns: repeat( 5, 1fr ); }
- .cols-6-l { grid-template-columns: repeat( 6, 1fr ); }
- .cols-7-l { grid-template-columns: repeat( 7, 1fr ); }
- .cols-8-l { grid-template-columns: repeat( 8, 1fr ); }
- .cols-9-l { grid-template-columns: repeat( 9, 1fr ); }
- .cols-10-l { grid-template-columns: repeat( 10, 1fr ); }
- .cols-11-l { grid-template-columns: repeat( 11, 1fr ); }
- .cols-12-l { grid-template-columns: repeat( 12, 1fr ); }
- .cols-13-l { grid-template-columns: repeat( 13, 1fr ); }
- .cols-14-l { grid-template-columns: repeat( 14, 1fr ); }
- .cols-15-l { grid-template-columns: repeat( 15, 1fr ); }
- .cols-16-l { grid-template-columns: repeat( 16, 1fr ); }
- .cols-min-64-l { grid-template-columns: repeat( auto-fill, minmax( 64px, 1fr ) ); }
- .cols-min-128-l { grid-template-columns: repeat( auto-fill, minmax( 128px, 1fr ) ); }
- .cols-min-192-l { grid-template-columns: repeat( auto-fill, minmax( 192px, 1fr ) ); }
- .cols-min-240-l { grid-template-columns: repeat( auto-fill, minmax( 240px, 1fr ) ); }
- .cols-min-256-l { grid-template-columns: repeat( auto-fill, minmax( 256px, 1fr ) ); }
- .cols-min-320-l { grid-template-columns: repeat( auto-fill, minmax( 320px, 1fr ) ); }
- .cols-min-480-l { grid-template-columns: repeat( auto-fill, minmax( 480px, 1fr ) ); }
- .masonry-l { grid-template-columns: masonry; }
- .subgrid-l { grid-template-columns: subgrid; }
- .cols-none-l { grid-template-columns: none; }
-}
-/*
+ Base
+ fw = font-weight
- Grid Column
- Docs: http://tachyons.io/docs/grid-column
+ Modifiers:
+ 1 = literal value 100
+ 2 = literal value 200
+ 3 = literal value 300
+ 4 = literal value 400
+ 5 = literal value 500
+ 6 = literal value 600
+ 7 = literal value 700
+ 8 = literal value 800
+ 9 = literal value 900
- This sets the width of the element via declaring how many columns wide it should be
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
- Base:
- cols = columns
+*/
+.normal { font-weight: normal; }
+.b { font-weight: bold; }
+.fw1 { font-weight: 100; }
+.fw2 { font-weight: 200; }
+.fw3 { font-weight: 300; }
+.fw4 { font-weight: 400; }
+.fw5 { font-weight: 500; }
+.fw6 { font-weight: 600; }
+.fw7 { font-weight: 700; }
+.fw8 { font-weight: 800; }
+.fw9 { font-weight: 900; }
+/*
+ FORMS
+
*/
-.col-1 { grid-column: span 1 / span 1; }
-.col-2 { grid-column: span 2 / span 2; }
-.col-3 { grid-column: span 3 / span 3; }
-.col-4 { grid-column: span 4 / span 4; }
-.col-5 { grid-column: span 5 / span 5; }
-.col-6 { grid-column: span 6 / span 6; }
-.col-7 { grid-column: span 7 / span 7; }
-.col-8 { grid-column: span 8 / span 8; }
-.col-9 { grid-column: span 9 / span 9; }
-.col-10 { grid-column: span 10 / span 10; }
-.col-11 { grid-column: span 11 / span 11; }
-.col-12 { grid-column: span 12 / span 12; }
-.col-13 { grid-column: span 13 / span 13; }
-.col-14 { grid-column: span 14 / span 14; }
-.col-15 { grid-column: span 15 / span 15; }
-.col-16 { grid-column: span 16 / span 16; }
-.col-full { grid-column: 1 / -1; }
-.col-center1 { grid-column: 2 / -2; }
-.col-center2 { grid-column: 3 / -3; }
-.col-center3 { grid-column: 4 / -4; }
-.col-center4 { grid-column: 6 / -6; }
-.col-auto { grid-column: auto; }
-.start-1 { grid-column-start: 1; }
-.start-2 { grid-column-start: 2; }
-.start-3 { grid-column-start: 3; }
-.start-4 { grid-column-start: 4; }
-.start-5 { grid-column-start: 5; }
-.start-6 { grid-column-start: 6; }
-.start-7 { grid-column-start: 7; }
-.start-8 { grid-column-start: 8; }
-.start-9 { grid-column-start: 9; }
-.start-10 { grid-column-start: 10; }
-.start-11 { grid-column-start: 11; }
-.start-12 { grid-column-start: 12; }
-.start-13 { grid-column-start: 13; }
-.start-14 { grid-column-start: 14; }
-.start-15 { grid-column-start: 15; }
-.end-1 { grid-column-end: 1; }
-.end-2 { grid-column-end: 2; }
-.end-3 { grid-column-end: 3; }
-.end-4 { grid-column-end: 4; }
-.end-5 { grid-column-end: 5; }
-.end-6 { grid-column-end: 6; }
-.end-7 { grid-column-end: 7; }
-.end-8 { grid-column-end: 8; }
-.end-9 { grid-column-end: 9; }
-.end-10 { grid-column-end: 10; }
-.end-11 { grid-column-end: 11; }
-.end-12 { grid-column-end: 12; }
-.end-13 { grid-column-end: 13; }
-.end-14 { grid-column-end: 14; }
-.end-15 { grid-column-end: 15; }
-.end-16 { grid-column-end: 16; }
-@container (min-width:30em) {
- .col-1-s { grid-column: span 1 / span 1; }
- .col-2-s { grid-column: span 2 / span 2; }
- .col-3-s { grid-column: span 3 / span 3; }
- .col-4-s { grid-column: span 4 / span 4; }
- .col-5-s { grid-column: span 5 / span 5; }
- .col-6-s { grid-column: span 6 / span 6; }
- .col-7-s { grid-column: span 7 / span 7; }
- .col-8-s { grid-column: span 8 / span 8; }
- .col-9-s { grid-column: span 9 / span 9; }
- .col-10-s { grid-column: span 10 / span 10; }
- .col-11-s { grid-column: span 11 / span 11; }
- .col-12-s { grid-column: span 12 / span 12; }
- .col-13-s { grid-column: span 13 / span 13; }
- .col-14-s { grid-column: span 14 / span 14; }
- .col-15-s { grid-column: span 15 / span 15; }
- .col-16-s { grid-column: span 16 / span 16; }
- .col-full-s { grid-column: 1 / -1; }
- .col-center1-s { grid-column: 2 / -2; }
- .col-center2-s { grid-column: 3 / -3; }
- .col-center3-s { grid-column: 4 / -4; }
- .col-center4-s { grid-column: 6 / -6; }
- .col-auto-s { grid-column: auto; }
- .start-1-s { grid-column-start: 1; }
- .start-2-s { grid-column-start: 2; }
- .start-3-s { grid-column-start: 3; }
- .start-4-s { grid-column-start: 4; }
- .start-5-s { grid-column-start: 5; }
- .start-6-s { grid-column-start: 6; }
- .start-7-s { grid-column-start: 7; }
- .start-8-s { grid-column-start: 8; }
- .start-9-s { grid-column-start: 9; }
- .start-10-s { grid-column-start: 10; }
- .start-11-s { grid-column-start: 11; }
- .start-12-s { grid-column-start: 12; }
- .start-13-s { grid-column-start: 13; }
- .start-14-s { grid-column-start: 14; }
- .start-15-s { grid-column-start: 15; }
- .end-1-s { grid-column-end: 1; }
- .end-2-s { grid-column-end: 2; }
- .end-3-s { grid-column-end: 3; }
- .end-4-s { grid-column-end: 4; }
- .end-5-s { grid-column-end: 5; }
- .end-6-s { grid-column-end: 6; }
- .end-7-s { grid-column-end: 7; }
- .end-8-s { grid-column-end: 8; }
- .end-9-s { grid-column-end: 9; }
- .end-10-s { grid-column-end: 10; }
- .end-11-s { grid-column-end: 11; }
- .end-12-s { grid-column-end: 12; }
- .end-13-s { grid-column-end: 13; }
- .end-14-s { grid-column-end: 14; }
- .end-15-s { grid-column-end: 15; }
- .end-16-s { grid-column-end: 16; }
-}
-@container (min-width:48em) {
- .col-1-m { grid-column: span 1 / span 1; }
- .col-2-m { grid-column: span 2 / span 2; }
- .col-3-m { grid-column: span 3 / span 3; }
- .col-4-m { grid-column: span 4 / span 4; }
- .col-5-m { grid-column: span 5 / span 5; }
- .col-6-m { grid-column: span 6 / span 6; }
- .col-7-m { grid-column: span 7 / span 7; }
- .col-8-m { grid-column: span 8 / span 8; }
- .col-9-m { grid-column: span 9 / span 9; }
- .col-10-m { grid-column: span 10 / span 10; }
- .col-11-m { grid-column: span 11 / span 11; }
- .col-12-m { grid-column: span 12 / span 12; }
- .col-13-m { grid-column: span 13 / span 13; }
- .col-14-m { grid-column: span 14 / span 14; }
- .col-15-m { grid-column: span 15 / span 15; }
- .col-16-m { grid-column: span 16 / span 16; }
- .col-full-m { grid-column: 1 / -1; }
- .col-center1-m { grid-column: 2 / -2; }
- .col-center2-m { grid-column: 3 / -3; }
- .col-center3-m { grid-column: 4 / -4; }
- .col-center4-m { grid-column: 6 / -6; }
- .col-auto-m { grid-column: auto; }
- .start-1-m { grid-column-start: 1; }
- .start-2-m { grid-column-start: 2; }
- .start-3-m { grid-column-start: 3; }
- .start-4-m { grid-column-start: 4; }
- .start-5-m { grid-column-start: 5; }
- .start-6-m { grid-column-start: 6; }
- .start-7-m { grid-column-start: 7; }
- .start-8-m { grid-column-start: 8; }
- .start-9-m { grid-column-start: 9; }
- .start-10-m { grid-column-start: 10; }
- .start-11-m { grid-column-start: 11; }
- .start-12-m { grid-column-start: 12; }
- .start-13-m { grid-column-start: 13; }
- .start-14-m { grid-column-start: 14; }
- .start-15-m { grid-column-start: 15; }
- .end-1-m { grid-column-end: 1; }
- .end-2-m { grid-column-end: 2; }
- .end-3-m { grid-column-end: 3; }
- .end-4-m { grid-column-end: 4; }
- .end-5-m { grid-column-end: 5; }
- .end-6-m { grid-column-end: 6; }
- .end-7-m { grid-column-end: 7; }
- .end-8-m { grid-column-end: 8; }
- .end-9-m { grid-column-end: 9; }
- .end-10-m { grid-column-end: 10; }
- .end-11-m { grid-column-end: 11; }
- .end-12-m { grid-column-end: 12; }
- .end-13-m { grid-column-end: 13; }
- .end-14-m { grid-column-end: 14; }
- .end-15-m { grid-column-end: 15; }
- .end-16-m { grid-column-end: 16; }
-}
-@container (min-width:64em) {
- .col-1-l { grid-column: span 1 / span 1; }
- .col-2-l { grid-column: span 2 / span 2; }
- .col-3-l { grid-column: span 3 / span 3; }
- .col-4-l { grid-column: span 4 / span 4; }
- .col-5-l { grid-column: span 5 / span 5; }
- .col-6-l { grid-column: span 6 / span 6; }
- .col-7-l { grid-column: span 7 / span 7; }
- .col-8-l { grid-column: span 8 / span 8; }
- .col-9-l { grid-column: span 9 / span 9; }
- .col-10-l { grid-column: span 10 / span 10; }
- .col-11-l { grid-column: span 11 / span 11; }
- .col-12-l { grid-column: span 12 / span 12; }
- .col-13-l { grid-column: span 13 / span 13; }
- .col-14-l { grid-column: span 14 / span 14; }
- .col-15-l { grid-column: span 15 / span 15; }
- .col-16-l { grid-column: span 16 / span 16; }
- .col-full-l { grid-column: 1 / -1; }
- .col-center1-l { grid-column: 2 / -2; }
- .col-center2-l { grid-column: 3 / -3; }
- .col-center3-l { grid-column: 4 / -4; }
- .col-center4-l { grid-column: 6 / -6; }
- .col-auto-l { grid-column: auto; }
- .start-1-l { grid-column-start: 1; }
- .start-2-l { grid-column-start: 2; }
- .start-3-l { grid-column-start: 3; }
- .start-4-l { grid-column-start: 4; }
- .start-5-l { grid-column-start: 5; }
- .start-6-l { grid-column-start: 6; }
- .start-7-l { grid-column-start: 7; }
- .start-8-l { grid-column-start: 8; }
- .start-9-l { grid-column-start: 9; }
- .start-10-l { grid-column-start: 10; }
- .start-11-l { grid-column-start: 11; }
- .start-12-l { grid-column-start: 12; }
- .start-13-l { grid-column-start: 13; }
- .start-14-l { grid-column-start: 14; }
- .start-15-l { grid-column-start: 15; }
- .end-1-l { grid-column-end: 1; }
- .end-2-l { grid-column-end: 2; }
- .end-3-l { grid-column-end: 3; }
- .end-4-l { grid-column-end: 4; }
- .end-5-l { grid-column-end: 5; }
- .end-6-l { grid-column-end: 6; }
- .end-7-l { grid-column-end: 7; }
- .end-8-l { grid-column-end: 8; }
- .end-9-l { grid-column-end: 9; }
- .end-10-l { grid-column-end: 10; }
- .end-11-l { grid-column-end: 11; }
- .end-12-l { grid-column-end: 12; }
- .end-13-l { grid-column-end: 13; }
- .end-14-l { grid-column-end: 14; }
- .end-15-l { grid-column-end: 15; }
- .end-16-l { grid-column-end: 16; }
-}
+.input-reset { -webkit-appearance: none; -moz-appearance: none; }
+.button-reset::-moz-focus-inner, .input-reset::-moz-focus-inner { border: 0; padding: 0; }
/*
- Grid Row
- Docs: http://tachyons.io/docs/layout/grid-column-row
+ HEIGHTS
+ Docs: http://tachyons.io/docs/layout/heights/
- This sets the width of the element via declaring how many columns wide it should be
+ Base:
+ h = height
+ min-h = min-height
+ min-vh = min-height vertical screen height
+ vh = vertical screen height
- Base:
- cols = columns
+ Modifiers
+ 1 = 1st step in height scale
+ 2 = 2nd step in height scale
+ 3 = 3rd step in height scale
+ 4 = 4th step in height scale
+ 5 = 5th step in height scale
-*/
-.row-auto { grid-row: auto; }
-.row-start-1 { grid-row-start: 1; }
-.row-start-2 { grid-row-start: 2; }
-.row-start-3 { grid-row-start: 3; }
-.row-start-4 { grid-row-start: 4; }
-.row-start-5 { grid-row-start: 5; }
-.row-start-6 { grid-row-start: 6; }
-.row-start-7 { grid-row-start: 7; }
-.row-start-8 { grid-row-start: 8; }
-.row-start-9 { grid-row-start: 9; }
-.row-start-10 { grid-row-start: 10; }
-.row-start-11 { grid-row-start: 11; }
-.row-start-12 { grid-row-start: 12; }
-.row-start-13 { grid-row-start: 13; }
-.row-start-14 { grid-row-start: 14; }
-.row-start-15 { grid-row-start: 15; }
-.row-start-16 { grid-row-start: 16; }
-.row-end-1 { grid-row-end: 1; }
-.row-end-2 { grid-row-end: 2; }
-.row-end-3 { grid-row-end: 3; }
-.row-end-4 { grid-row-end: 4; }
-.row-end-5 { grid-row-end: 5; }
-.row-end-6 { grid-row-end: 6; }
-.row-end-7 { grid-row-end: 7; }
-.row-end-8 { grid-row-end: 8; }
-.row-end-9 { grid-row-end: 9; }
-.row-end-10 { grid-row-end: 10; }
-.row-end-11 { grid-row-end: 11; }
-.row-end-12 { grid-row-end: 12; }
-.row-end-13 { grid-row-end: 13; }
-.row-end-14 { grid-row-end: 14; }
-.row-end-15 { grid-row-end: 15; }
-.row-end-16 { grid-row-end: 16; }
-@container (min-width:30em) {
- .row-auto-s { grid-row: auto; }
- .row-start-1-s { grid-row-start: 1; }
- .row-start-2-s { grid-row-start: 2; }
- .row-start-3-s { grid-row-start: 3; }
- .row-start-4-s { grid-row-start: 4; }
- .row-start-5-s { grid-row-start: 5; }
- .row-start-6-s { grid-row-start: 6; }
- .row-start-7-s { grid-row-start: 7; }
- .row-start-8-s { grid-row-start: 8; }
- .row-start-9-s { grid-row-start: 9; }
- .row-start-10-s { grid-row-start: 10; }
- .row-start-11-s { grid-row-start: 11; }
- .row-start-12-s { grid-row-start: 12; }
- .row-start-13-s { grid-row-start: 13; }
- .row-start-14-s { grid-row-start: 14; }
- .row-start-15-s { grid-row-start: 15; }
- .row-start-16-s { grid-row-start: 16; }
- .row-end-1-s { grid-row-end: 1; }
- .row-end-2-s { grid-row-end: 2; }
- .row-end-3-s { grid-row-end: 3; }
- .row-end-4-s { grid-row-end: 4; }
- .row-end-5-s { grid-row-end: 5; }
- .row-end-6-s { grid-row-end: 6; }
- .row-end-7-s { grid-row-end: 7; }
- .row-end-8-s { grid-row-end: 8; }
- .row-end-9-s { grid-row-end: 9; }
- .row-end-10-s { grid-row-end: 10; }
- .row-end-11-s { grid-row-end: 11; }
- .row-end-12-s { grid-row-end: 12; }
- .row-end-13-s { grid-row-end: 13; }
- .row-end-14-s { grid-row-end: 14; }
- .row-end-15-s { grid-row-end: 15; }
- .row-end-16-s { grid-row-end: 16; }
-}
-@container (min-width:48em) {
- .row-auto-m { grid-row: auto; }
- .row-start-1-m { grid-row-start: 1; }
- .row-start-2-m { grid-row-start: 2; }
- .row-start-3-m { grid-row-start: 3; }
- .row-start-4-m { grid-row-start: 4; }
- .row-start-5-m { grid-row-start: 5; }
- .row-start-6-m { grid-row-start: 6; }
- .row-start-7-m { grid-row-start: 7; }
- .row-start-8-m { grid-row-start: 8; }
- .row-start-9-m { grid-row-start: 9; }
- .row-start-10-m { grid-row-start: 10; }
- .row-start-11-m { grid-row-start: 11; }
- .row-start-12-m { grid-row-start: 12; }
- .row-start-13-m { grid-row-start: 13; }
- .row-start-14-m { grid-row-start: 14; }
- .row-start-15-m { grid-row-start: 15; }
- .row-start-16-m { grid-row-start: 16; }
- .row-end-1-m { grid-row-end: 1; }
- .row-end-2-m { grid-row-end: 2; }
- .row-end-3-m { grid-row-end: 3; }
- .row-end-4-m { grid-row-end: 4; }
- .row-end-5-m { grid-row-end: 5; }
- .row-end-6-m { grid-row-end: 6; }
- .row-end-7-m { grid-row-end: 7; }
- .row-end-8-m { grid-row-end: 8; }
- .row-end-9-m { grid-row-end: 9; }
- .row-end-10-m { grid-row-end: 10; }
- .row-end-11-m { grid-row-end: 11; }
- .row-end-12-m { grid-row-end: 12; }
- .row-end-13-m { grid-row-end: 13; }
- .row-end-14-m { grid-row-end: 14; }
- .row-end-15-m { grid-row-end: 15; }
- .row-end-16-m { grid-row-end: 16; }
-}
-@container (min-width:64em) {
- .row-auto-l { grid-row: auto; }
- .row-start-1-l { grid-row-start: 1; }
- .row-start-2-l { grid-row-start: 2; }
- .row-start-3-l { grid-row-start: 3; }
- .row-start-4-l { grid-row-start: 4; }
- .row-start-5-l { grid-row-start: 5; }
- .row-start-6-l { grid-row-start: 6; }
- .row-start-7-l { grid-row-start: 7; }
- .row-start-8-l { grid-row-start: 8; }
- .row-start-9-l { grid-row-start: 9; }
- .row-start-10-l { grid-row-start: 10; }
- .row-start-11-l { grid-row-start: 11; }
- .row-start-12-l { grid-row-start: 12; }
- .row-start-13-l { grid-row-start: 13; }
- .row-start-14-l { grid-row-start: 14; }
- .row-start-15-l { grid-row-start: 15; }
- .row-start-16-l { grid-row-start: 16; }
- .row-end-1-l { grid-row-end: 1; }
- .row-end-2-l { grid-row-end: 2; }
- .row-end-3-l { grid-row-end: 3; }
- .row-end-4-l { grid-row-end: 4; }
- .row-end-5-l { grid-row-end: 5; }
- .row-end-6-l { grid-row-end: 6; }
- .row-end-7-l { grid-row-end: 7; }
- .row-end-8-l { grid-row-end: 8; }
- .row-end-9-l { grid-row-end: 9; }
- .row-end-10-l { grid-row-end: 10; }
- .row-end-11-l { grid-row-end: 11; }
- .row-end-12-l { grid-row-end: 12; }
- .row-end-13-l { grid-row-end: 13; }
- .row-end-14-l { grid-row-end: 14; }
- .row-end-15-l { grid-row-end: 15; }
- .row-end-16-l { grid-row-end: 16; }
-}
-/*
+ -25 = literal value 25%
+ -50 = literal value 50%
+ -75 = literal value 75%
+ -100 = literal value 100%
- BACKDROP-FILTER EFFECTS
+ -auto = string value of auto
+ -inherit = string value of inherit
- - Blur
- - Grayscale
- - Hue Rotate
- - Invert
- - INTERACTIONS
- - Hover
- - Focus
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
*/
-.filter-none { -webkit-filter: none; filter: none; }
-.blur1 { -webkit-filter: blur( 4px ); filter: blur( 4px ); }
-.blur2 { -webkit-filter: blur( 16px ); filter: blur( 16px ); }
-.blur3 { -webkit-filter: blur( 96px ); filter: blur( 96px ); }
-.grayscale1 { -webkit-filter: grayscale( 0 ); filter: grayscale( 0 ); }
-.grayscale2 { -webkit-filter: grayscale( 50% ); filter: grayscale( 50% ); }
-.grayscale3 { -webkit-filter: grayscale( 100% ); filter: grayscale( 100% ); }
-.hue-rotate0 { -webkit-filter: hue-rotate( 0deg ); filter: hue-rotate( 0deg ); }
-.hue-rotate1 { -webkit-filter: hue-rotate( 45deg ); filter: hue-rotate( 45deg ); }
-.hue-rotate2 { -webkit-filter: hue-rotate( 90deg ); filter: hue-rotate( 90deg ); }
-.hue-rotate3 { -webkit-filter: hue-rotate( 135deg ); filter: hue-rotate( 135deg ); }
-.hue-rotate4 { -webkit-filter: hue-rotate( 180deg ); filter: hue-rotate( 180deg ); }
-.hue-rotate5 { -webkit-filter: hue-rotate( 225deg ); filter: hue-rotate( 225deg ); }
-.hue-rotate6 { -webkit-filter: hue-rotate( 270deg ); filter: hue-rotate( 270deg ); }
-.hue-rotate7 { -webkit-filter: hue-rotate( 315deg ); filter: hue-rotate( 315deg ); }
-.invert { -webkit-filter: invert( 100% ); filter: invert( 100% ); }
-/* TODO: Add drop-shadow */
-.filter-none-hover:hover { -webkit-filter: none; filter: none; }
-.blur1-hover:hover { -webkit-filter: blur( 4px ); filter: blur( 4px ); }
-.blur2-hover:hover { -webkit-filter: blur( 16px ); filter: blur( 16px ); }
-.blur3-hover:hover { -webkit-filter: blur( 96px ); filter: blur( 96px ); }
-.grayscale1-hover:hover { -webkit-filter: grayscale( 0 ); filter: grayscale( 0 ); }
-.grayscale2-hover:hover { -webkit-filter: grayscale( 50% ); filter: grayscale( 50% ); }
-.grayscale3-hover:hover { -webkit-filter: grayscale( 100% ); filter: grayscale( 100% ); }
-.hue-rotate0-hover:hover { -webkit-filter: hue-rotate( 0deg ); filter: hue-rotate( 0deg ); }
-.hue-rotate1-hover:hover { -webkit-filter: hue-rotate( 45deg ); filter: hue-rotate( 45deg ); }
-.hue-rotate2-hover:hover { -webkit-filter: hue-rotate( 90deg ); filter: hue-rotate( 90deg ); }
-.hue-rotate3-hover:hover { -webkit-filter: hue-rotate( 135deg ); filter: hue-rotate( 135deg ); }
-.hue-rotate4-hover:hover { -webkit-filter: hue-rotate( 180deg ); filter: hue-rotate( 180deg ); }
-.hue-rotate5-hover:hover { -webkit-filter: hue-rotate( 225deg ); filter: hue-rotate( 225deg ); }
-.hue-rotate6-hover:hover { -webkit-filter: hue-rotate( 270deg ); filter: hue-rotate( 270deg ); }
-.hue-rotate7-hover:hover { -webkit-filter: hue-rotate( 315deg ); filter: hue-rotate( 315deg ); }
-.invert-hover:hover { -webkit-filter: invert( 100% ); filter: invert( 100% ); }
-.blur1-focus:focus { -webkit-filter: blur( 4px ); filter: blur( 4px ); }
-.blur2-focus:focus { -webkit-filter: blur( 16px ); filter: blur( 16px ); }
-.blur3-focus:focus { -webkit-filter: blur( 96px ); filter: blur( 96px ); }
-.grayscale1-focus:focus { -webkit-filter: grayscale( 0 ); filter: grayscale( 0 ); }
-.grayscale2-focus:focus { -webkit-filter: grayscale( 50% ); filter: grayscale( 50% ); }
-.grayscale3-focus:focus { -webkit-filter: grayscale( 100% ); filter: grayscale( 100% ); }
-.hue-rotate0-focus:focus { -webkit-filter: hue-rotate( 0deg ); filter: hue-rotate( 0deg ); }
-.hue-rotate1-focus:focus { -webkit-filter: hue-rotate( 45deg ); filter: hue-rotate( 45deg ); }
-.hue-rotate2-focus:focus { -webkit-filter: hue-rotate( 90deg ); filter: hue-rotate( 90deg ); }
-.hue-rotate3-focus:focus { -webkit-filter: hue-rotate( 135deg ); filter: hue-rotate( 135deg ); }
-.hue-rotate4-focus:focus { -webkit-filter: hue-rotate( 180deg ); filter: hue-rotate( 180deg ); }
-.hue-rotate5-focus:focus { -webkit-filter: hue-rotate( 225deg ); filter: hue-rotate( 225deg ); }
-.hue-rotate6-focus:focus { -webkit-filter: hue-rotate( 270deg ); filter: hue-rotate( 270deg ); }
-.hue-rotate7-focus:focus { -webkit-filter: hue-rotate( 315deg ); filter: hue-rotate( 315deg ); }
-.invert-focus:focus { -webkit-filter: invert( 100% ); filter: invert( 100% ); }
+/* Height Scale */
+.h1 { height: 1rem; }
+.h2 { height: 2rem; }
+.h3 { height: 4rem; }
+.h4 { height: 8rem; }
+.h5 { height: 16rem; }
+/* Height Percentages - Based off of height of parent */
+.h-25 { height: 25%; }
+.h-50 { height: 50%; }
+.h-75 { height: 75%; }
+.h-100 { height: 100%; }
+.min-h-100 { min-height: 100%; }
+/* Screen Height Percentage */
+.vh-25 { height: 25vh; }
+.vh-50 { height: 50vh; }
+.vh-75 { height: 75vh; }
+.vh-100 { height: 100vh; }
+.min-vh-100 { min-height: 100vh; }
+/* String Properties */
+.h-auto { height: auto; }
+.h-inherit { height: inherit; }
/*
- FILTER EFFECTS
+ LETTER SPACING
+ Docs: http://tachyons.io/docs/typography/tracking/
- - Blur
- - Grayscale
- - Hue Rotate
- - Invert
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
*/
-.filter-none { -webkit-filter: none; filter: none; }
-.blur1 { -webkit-filter: blur( 4px ); filter: blur( 4px ); }
-.blur2 { -webkit-filter: blur( 16px ); filter: blur( 16px ); }
-.blur3 { -webkit-filter: blur( 96px ); filter: blur( 96px ); }
-.grayscale1 { -webkit-filter: grayscale( 0 ); filter: grayscale( 0 ); }
-.grayscale2 { -webkit-filter: grayscale( 50% ); filter: grayscale( 50% ); }
-.grayscale3 { -webkit-filter: grayscale( 100% ); filter: grayscale( 100% ); }
-.hue-rotate0 { -webkit-filter: hue-rotate( 0deg ); filter: hue-rotate( 0deg ); }
-.hue-rotate1 { -webkit-filter: hue-rotate( 45deg ); filter: hue-rotate( 45deg ); }
-.hue-rotate2 { -webkit-filter: hue-rotate( 90deg ); filter: hue-rotate( 90deg ); }
-.hue-rotate3 { -webkit-filter: hue-rotate( 135deg ); filter: hue-rotate( 135deg ); }
-.hue-rotate4 { -webkit-filter: hue-rotate( 180deg ); filter: hue-rotate( 180deg ); }
-.hue-rotate5 { -webkit-filter: hue-rotate( 225deg ); filter: hue-rotate( 225deg ); }
-.hue-rotate6 { -webkit-filter: hue-rotate( 270deg ); filter: hue-rotate( 270deg ); }
-.hue-rotate7 { -webkit-filter: hue-rotate( 315deg ); filter: hue-rotate( 315deg ); }
-.invert { -webkit-filter: invert( 100% ); filter: invert( 100% ); }
-/* TODO: Add drop-shadow */
-.filter-none-hover:hover { -webkit-filter: none; filter: none; }
-.blur1-hover:hover { -webkit-filter: blur( 4px ); filter: blur( 4px ); }
-.blur2-hover:hover { -webkit-filter: blur( 16px ); filter: blur( 16px ); }
-.blur3-hover:hover { -webkit-filter: blur( 96px ); filter: blur( 96px ); }
-.grayscale1-hover:hover { -webkit-filter: grayscale( 0 ); filter: grayscale( 0 ); }
-.grayscale2-hover:hover { -webkit-filter: grayscale( 50% ); filter: grayscale( 50% ); }
-.grayscale3-hover:hover { -webkit-filter: grayscale( 100% ); filter: grayscale( 100% ); }
-.hue-rotate0-hover:hover { -webkit-filter: hue-rotate( 0deg ); filter: hue-rotate( 0deg ); }
-.hue-rotate1-hover:hover { -webkit-filter: hue-rotate( 45deg ); filter: hue-rotate( 45deg ); }
-.hue-rotate2-hover:hover { -webkit-filter: hue-rotate( 90deg ); filter: hue-rotate( 90deg ); }
-.hue-rotate3-hover:hover { -webkit-filter: hue-rotate( 135deg ); filter: hue-rotate( 135deg ); }
-.hue-rotate4-hover:hover { -webkit-filter: hue-rotate( 180deg ); filter: hue-rotate( 180deg ); }
-.hue-rotate5-hover:hover { -webkit-filter: hue-rotate( 225deg ); filter: hue-rotate( 225deg ); }
-.hue-rotate6-hover:hover { -webkit-filter: hue-rotate( 270deg ); filter: hue-rotate( 270deg ); }
-.hue-rotate7-hover:hover { -webkit-filter: hue-rotate( 315deg ); filter: hue-rotate( 315deg ); }
-.invert-hover:hover { -webkit-filter: invert( 100% ); filter: invert( 100% ); }
-.blur1-focus:focus { -webkit-filter: blur( 4px ); filter: blur( 4px ); }
-.blur2-focus:focus { -webkit-filter: blur( 16px ); filter: blur( 16px ); }
-.blur3-focus:focus { -webkit-filter: blur( 96px ); filter: blur( 96px ); }
-.grayscale1-focus:focus { -webkit-filter: grayscale( 0 ); filter: grayscale( 0 ); }
-.grayscale2-focus:focus { -webkit-filter: grayscale( 50% ); filter: grayscale( 50% ); }
-.grayscale3-focus:focus { -webkit-filter: grayscale( 100% ); filter: grayscale( 100% ); }
-.hue-rotate0-focus:focus { -webkit-filter: hue-rotate( 0deg ); filter: hue-rotate( 0deg ); }
-.hue-rotate1-focus:focus { -webkit-filter: hue-rotate( 45deg ); filter: hue-rotate( 45deg ); }
-.hue-rotate2-focus:focus { -webkit-filter: hue-rotate( 90deg ); filter: hue-rotate( 90deg ); }
-.hue-rotate3-focus:focus { -webkit-filter: hue-rotate( 135deg ); filter: hue-rotate( 135deg ); }
-.hue-rotate4-focus:focus { -webkit-filter: hue-rotate( 180deg ); filter: hue-rotate( 180deg ); }
-.hue-rotate5-focus:focus { -webkit-filter: hue-rotate( 225deg ); filter: hue-rotate( 225deg ); }
-.hue-rotate6-focus:focus { -webkit-filter: hue-rotate( 270deg ); filter: hue-rotate( 270deg ); }
-.hue-rotate7-focus:focus { -webkit-filter: hue-rotate( 315deg ); filter: hue-rotate( 315deg ); }
-.invert-focus:focus { -webkit-filter: invert( 100% ); filter: invert( 100% ); }
+.tracked { letter-spacing: .1em; }
+.tracked-tight { letter-spacing: -.05em; }
+.tracked-mega { letter-spacing: .25em; }
/*
- FLEXBOX
+ LINE HEIGHT / LEADING
+ Docs: http://tachyons.io/docs/typography/line-height
- Media Query Extensions:
- -s = small
- -m = medium
- -l = large
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
*/
-/* 1. Fix for Chrome 44 bug.
- * https://code.google.com/p/chromium/issues/detail?id=506893 */
-.flex-auto { flex: 1 1 auto; min-width: 0; /* 1 */ min-height: 0; /* 1 */ }
-.flex-none { flex: none; }
-.flex-grow-0 { flex-grow: 0; }
-.flex-grow-1 { flex-grow: 1; }
-.flex-shrink-0 { flex-shrink: 0; }
-.flex-shrink-1 { flex-shrink: 1; }
-@container (min-width:30em) {
- .flex-s { display: flex; }
- .inline-flex-s { display: inline-flex; }
- .flex-auto-s { flex: 1 1 auto; min-width: 0; /* 1 */ min-height: 0; /* 1 */ }
- .flex-none-s { flex: none; }
- .flex-grow-0-s { flex-grow: 0; }
- .flex-grow-1-s { flex-grow: 1; }
- .flex-shrink-0-s { flex-shrink: 0; }
- .flex-shrink-1-s { flex-shrink: 1; }
-}
-@container (min-width:48em) {
- .flex-m { display: flex; }
- .inline-flex-m { display: inline-flex; }
- .flex-auto-m { flex: 1 1 auto; min-width: 0; /* 1 */ min-height: 0; /* 1 */ }
- .flex-none-m { flex: none; }
- .flex-grow-0-m { flex-grow: 0; }
- .flex-grow-1-m { flex-grow: 1; }
- .flex-shrink-0-m { flex-shrink: 0; }
- .flex-shrink-1-m { flex-shrink: 1; }
-}
-@container (min-width:64em) {
- .flex-l { display: flex; }
- .inline-flex-l { display: inline-flex; }
- .flex-auto-l { flex: 1 1 auto; min-width: 0; /* 1 */ min-height: 0; /* 1 */ }
- .flex-none-l { flex: none; }
- .flex-grow-0-l { flex-grow: 0; }
- .flex-grow-1-l { flex-grow: 1; }
- .flex-shrink-0-l { flex-shrink: 0; }
- .flex-shrink-1-l { flex-shrink: 1; }
-}
+.lh-solid { line-height: 1; }
+.lh-title { line-height: 1.25; }
+.lh-copy { line-height: 1.5; }
/*
- FLEX-DIRECTION
-
- Media Query Extensions:
- -s = small
- -m = medium
- -l = large
+ LINKS
+ Docs: http://tachyons.io/docs/elements/links/
*/
-.flex-column { flex-direction: column; }
-.flex-row { flex-direction: row; }
-.flex-column-reverse { flex-direction: column-reverse; }
-.flex-row-reverse { flex-direction: row-reverse; }
-@container (min-width:30em) {
- .flex-column-s { flex-direction: column; }
- .flex-row-s { flex-direction: row; }
- .flex-column-reverse-s { flex-direction: column-reverse; }
- .flex-row-reverse-s { flex-direction: row-reverse; }
-}
-@container (min-width:48em) {
- .flex-column-m { flex-direction: column; }
- .flex-row-m { flex-direction: row; }
- .flex-column-reverse-m { flex-direction: column-reverse; }
- .flex-row-reverse-m { flex-direction: row-reverse; }
-}
-@container (min-width:64em) {
- .flex-column-l { flex-direction: column; }
- .flex-row-l { flex-direction: row; }
- .flex-column-reverse-l { flex-direction: column-reverse; }
- .flex-row-reverse-l { flex-direction: row-reverse; }
-}
+.link { text-decoration: none; transition: color .15s ease-in; }
+.link:link, .link:visited { transition: color .15s ease-in; }
+.link:hover { transition: color .15s ease-in; }
+.link:active { transition: color .15s ease-in; }
+.link:focus { transition: color .15s ease-in; outline: 1px dotted currentColor; }
/*
- FLEX-WRAP
-
- Media Query Extensions:
- -s = small
- -m = medium
- -l = large
+ LISTS
+ http://tachyons.io/docs/elements/lists/
*/
-.flex-wrap { flex-wrap: wrap; }
-.flex-nowrap { flex-wrap: nowrap; }
-.flex-wrap-reverse { flex-wrap: wrap-reverse; }
-@container (min-width:30em) {
- .flex-wrap-s { flex-wrap: wrap; }
- .flex-nowrap-s { flex-wrap: nowrap; }
- .flex-wrap-reverse-s { flex-wrap: wrap-reverse; }
-}
-@container (min-width:48em) {
- .flex-wrap-m { flex-wrap: wrap; }
- .flex-nowrap-m { flex-wrap: nowrap; }
- .flex-wrap-reverse-m { flex-wrap: wrap-reverse; }
-}
-@container (min-width:64em) {
- .flex-wrap-l { flex-wrap: wrap; }
- .flex-nowrap-l { flex-wrap: nowrap; }
- .flex-wrap-reverse-l { flex-wrap: wrap-reverse; }
-}
+.list { list-style-type: none; }
/*
- ALIGN-ITEMS
+ MAX WIDTHS
+ Docs: http://tachyons.io/docs/layout/max-widths/
- Media Query Extensions:
- -s = small
- -m = medium
- -l = large
+ Base:
+ mw = max-width
-*/
-.items-start { align-items: flex-start; }
-.items-end { align-items: flex-end; }
-.items-center { align-items: center; }
-.items-baseline { align-items: baseline; }
-.items-stretch { align-items: stretch; }
-@container (min-width:30em) {
- .items-start-s { align-items: flex-start; }
- .items-end-s { align-items: flex-end; }
- .items-center-s { align-items: center; }
- .items-baseline-s { align-items: baseline; }
- .items-stretch-s { align-items: stretch; }
-}
-@container (min-width:48em) {
- .items-start-m { align-items: flex-start; }
- .items-end-m { align-items: flex-end; }
- .items-center-m { align-items: center; }
- .items-baseline-m { align-items: baseline; }
- .items-stretch-m { align-items: stretch; }
-}
-@container (min-width:64em) {
- .items-start-l { align-items: flex-start; }
- .items-end-l { align-items: flex-end; }
- .items-center-l { align-items: center; }
- .items-baseline-l { align-items: baseline; }
- .items-stretch-l { align-items: stretch; }
-}
-/*
+ Modifiers
+ 1 = 1st step in width scale
+ 2 = 2nd step in width scale
+ 3 = 3rd step in width scale
+ 4 = 4th step in width scale
+ 5 = 5th step in width scale
+ 6 = 6st step in width scale
+ 7 = 7nd step in width scale
+ 8 = 8rd step in width scale
+ 9 = 9th step in width scale
- ALIGN-CONTENT
+ -100 = literal value 100%
- Media Query Extensions:
- -s = small
- -m = medium
- -l = large
+ -none = string value none
- MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/align-content
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
*/
-.content-start { align-content: flex-start; }
-.content-end { align-content: flex-end; }
-.content-center { align-content: center; }
-.content-between { align-content: space-between; }
-.content-around { align-content: space-around; }
-.content-stretch { align-content: stretch; }
-@container (min-width:30em) {
- .content-start-s { align-content: flex-start; }
- .content-end-s { align-content: flex-end; }
- .content-center-s { align-content: center; }
- .content-between-s { align-content: space-between; }
- .content-around-s { align-content: space-around; }
- .content-stretch-s { align-content: stretch; }
-}
-@container (min-width:48em) {
- .content-start-m { align-content: flex-start; }
- .content-end-m { align-content: flex-end; }
- .content-center-m { align-content: center; }
- .content-between-m { align-content: space-between; }
- .content-around-m { align-content: space-around; }
- .content-stretch-m { align-content: stretch; }
-}
-@container (min-width:64em) {
- .content-start-l { align-content: flex-start; }
- .content-end-l { align-content: flex-end; }
- .content-center-l { align-content: center; }
- .content-between-l { align-content: space-between; }
- .content-around-l { align-content: space-around; }
- .content-stretch-l { align-content: stretch; }
-}
+/* Max Width Percentages */
+.mw-100 { max-width: 100%; }
+/* Max Width Scale */
+.mw1 { max-width: 1rem; }
+.mw2 { max-width: 2rem; }
+.mw3 { max-width: 4rem; }
+.mw4 { max-width: 8rem; }
+.mw5 { max-width: 16rem; }
+.mw6 { max-width: 32rem; }
+.mw7 { max-width: 48rem; }
+.mw8 { max-width: 64rem; }
+.mw9 { max-width: 96rem; }
+/* Max Width String Properties */
+.mw-none { max-width: none; }
/*
- ALIGN-SELF
+ WIDTHS
+ Docs: http://tachyons.io/docs/layout/widths/
- Media Query Extensions:
- -s = small
- -m = medium
- -l = large
+ Base:
+ w = width
-*/
-.self-start { align-self: flex-start; }
-.self-end { align-self: flex-end; }
-.self-center { align-self: center; }
-.self-baseline { align-self: baseline; }
-.self-stretch { align-self: stretch; }
-@container (min-width:30em) {
- .self-start-s { align-self: flex-start; }
- .self-end-s { align-self: flex-end; }
- .self-center-s { align-self: center; }
- .self-baseline-s { align-self: baseline; }
- .self-stretch-s { align-self: stretch; }
-}
-@container (min-width:48em) {
- .self-start-m { align-self: flex-start; }
- .self-end-m { align-self: flex-end; }
- .self-center-m { align-self: center; }
- .self-baseline-m { align-self: baseline; }
- .self-stretch-m { align-self: stretch; }
-}
-@container (min-width:64em) {
- .self-start-l { align-self: flex-start; }
- .self-end-l { align-self: flex-end; }
- .self-center-l { align-self: center; }
- .self-baseline-l { align-self: baseline; }
- .self-stretch-l { align-self: stretch; }
-}
-/*
+ Modifiers
+ 1 = 1st step in width scale
+ 2 = 2nd step in width scale
+ 3 = 3rd step in width scale
+ 4 = 4th step in width scale
+ 5 = 5th step in width scale
+
+ -10 = literal value 10%
+ -20 = literal value 20%
+ -25 = literal value 25%
+ -30 = literal value 30%
+ -33 = literal value 33%
+ -34 = literal value 34%
+ -40 = literal value 40%
+ -50 = literal value 50%
+ -60 = literal value 60%
+ -70 = literal value 70%
+ -75 = literal value 75%
+ -80 = literal value 80%
+ -90 = literal value 90%
+ -100 = literal value 100%
- JUSTIFY-SELF
+ -third = 100% / 3 (Not supported in opera mini or IE8)
+ -two-thirds = 100% / 1.5 (Not supported in opera mini or IE8)
+ -auto = string value auto
- Media Query Extensions:
- -s = small
- -m = medium
- -l = large
- MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
*/
-.justify-self-start { justify-self: start; }
-.justify-self-end { justify-self: end; }
-.justify-self-center { justify-self: center; }
-.justify-self-stretch { justify-self: stretch; }
-@container (min-width:30em) {
- .justify-self-start-s { justify-self: start; }
- .justify-self-end-s { justify-self: end; }
- .justify-self-center-s { justify-self: center; }
- .justify-self-stretch-s { justify-self: stretch; }
-}
-@container (min-width:48em) {
- .justify-self-start-m { justify-self: start; }
- .justify-self-end-m { justify-self: end; }
- .justify-self-center-m { justify-self: center; }
- .justify-self-stretch-m { justify-self: stretch; }
-}
-@container (min-width:64em) {
- .justify-self-start-l { justify-self: start; }
- .justify-self-end-l { justify-self: end; }
- .justify-self-center-l { justify-self: center; }
- .justify-self-stretch-l { justify-self: stretch; }
-}
+/* Width Scale */
+.w1 { width: 1rem; }
+.w2 { width: 2rem; }
+.w3 { width: 4rem; }
+.w4 { width: 8rem; }
+.w5 { width: 16rem; }
+.w-10 { width: 10%; }
+.w-20 { width: 20%; }
+.w-25 { width: 25%; }
+.w-30 { width: 30%; }
+.w-33 { width: 33%; }
+.w-34 { width: 34%; }
+.w-40 { width: 40%; }
+.w-50 { width: 50%; }
+.w-60 { width: 60%; }
+.w-70 { width: 70%; }
+.w-75 { width: 75%; }
+.w-80 { width: 80%; }
+.w-90 { width: 90%; }
+.w-100 { width: 100%; }
+.w-third { width: 33.33333%; }
+.w-two-thirds { width: 66.66667%; }
+.w-auto { width: auto; }
/*
- JUSTIFY-CONTENT
+ OVERFLOW
- Media Query Extensions:
- -s = small
- -m = medium
- -l = large
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+
+ */
+.overflow-visible { overflow: visible; }
+.overflow-hidden { overflow: hidden; }
+.overflow-scroll { overflow: scroll; }
+.overflow-auto { overflow: auto; }
+.overflow-x-visible { overflow-x: visible; }
+.overflow-x-hidden { overflow-x: hidden; }
+.overflow-x-scroll { overflow-x: scroll; }
+.overflow-x-auto { overflow-x: auto; }
+.overflow-y-visible { overflow-y: visible; }
+.overflow-y-hidden { overflow-y: hidden; }
+.overflow-y-scroll { overflow-y: scroll; }
+.overflow-y-auto { overflow-y: auto; }
+/*
+
+ POSITIONING
+ Docs: http://tachyons.io/docs/layout/position/
- MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
*/
-.justify-start { justify-content: flex-start; }
-.justify-end { justify-content: flex-end; }
-.justify-center { justify-content: center; }
-.justify-between { justify-content: space-between; }
-.justify-around { justify-content: space-around; }
-@container (min-width:30em) {
- .justify-start-s { justify-content: flex-start; }
- .justify-end-s { justify-content: flex-end; }
- .justify-center-s { justify-content: center; }
- .justify-between-s { justify-content: space-between; }
- .justify-around-s { justify-content: space-around; }
-}
-@container (min-width:48em) {
- .justify-start-m { justify-content: flex-start; }
- .justify-end-m { justify-content: flex-end; }
- .justify-center-m { justify-content: center; }
- .justify-between-m { justify-content: space-between; }
- .justify-around-m { justify-content: space-around; }
-}
-@container (min-width:64em) {
- .justify-start-l { justify-content: flex-start; }
- .justify-end-l { justify-content: flex-end; }
- .justify-center-l { justify-content: center; }
- .justify-between-l { justify-content: space-between; }
- .justify-around-l { justify-content: space-around; }
-}
+.static { position: static; }
+.relative { position: relative; }
+.absolute { position: absolute; }
+.fixed { position: fixed; }
/*
- ORDER
+ OPACITY
+ Docs: http://tachyons.io/docs/themes/opacity/
- Media Query Extensions:
- -s = small
- -m = medium
- -l = large
+*/
+.o-100 { opacity: 1; }
+.o-90 { opacity: .9; }
+.o-80 { opacity: .8; }
+.o-70 { opacity: .7; }
+.o-60 { opacity: .6; }
+.o-50 { opacity: .5; }
+.o-40 { opacity: .4; }
+.o-30 { opacity: .3; }
+.o-20 { opacity: .2; }
+.o-10 { opacity: .1; }
+.o-05 { opacity: .05; }
+.o-025 { opacity: .025; }
+.o-0 { opacity: 0; }
+/*
+
+ ROTATIONS
*/
-.order-0 { order: 0; }
-.order-1 { order: 1; }
-.order-2 { order: 2; }
-.order-3 { order: 3; }
-.order-4 { order: 4; }
-.order-5 { order: 5; }
-.order-6 { order: 6; }
-.order-7 { order: 7; }
-.order-8 { order: 8; }
-.order-last { order: 99999; }
-@container (min-width:30em) {
- .order-0-s { order: 0; }
- .order-1-s { order: 1; }
- .order-2-s { order: 2; }
- .order-3-s { order: 3; }
- .order-4-s { order: 4; }
- .order-5-s { order: 5; }
- .order-6-s { order: 6; }
- .order-7-s { order: 7; }
- .order-8-s { order: 8; }
- .order-last-s { order: 99999; }
-}
-@container (min-width:48em) {
- .order-0-m { order: 0; }
- .order-1-m { order: 1; }
- .order-2-m { order: 2; }
- .order-3-m { order: 3; }
- .order-4-m { order: 4; }
- .order-5-m { order: 5; }
- .order-6-m { order: 6; }
- .order-7-m { order: 7; }
- .order-8-m { order: 8; }
- .order-last-m { order: 99999; }
-}
-@container (min-width:64em) {
- .order-0-l { order: 0; }
- .order-1-l { order: 1; }
- .order-2-l { order: 2; }
- .order-3-l { order: 3; }
- .order-4-l { order: 4; }
- .order-5-l { order: 5; }
- .order-6-l { order: 6; }
- .order-7-l { order: 7; }
- .order-8-l { order: 8; }
- .order-last-l { order: 99999; }
-}
+.rotate-45 { -webkit-transform: rotate( 45deg ); transform: rotate( 45deg ); }
+.rotate-90 { -webkit-transform: rotate( 90deg ); transform: rotate( 90deg ); }
+.rotate-135 { -webkit-transform: rotate( 135deg ); transform: rotate( 135deg ); }
+.rotate-180 { -webkit-transform: rotate( 180deg ); transform: rotate( 180deg ); }
+.rotate-225 { -webkit-transform: rotate( 225deg ); transform: rotate( 225deg ); }
+.rotate-270 { -webkit-transform: rotate( 270deg ); transform: rotate( 270deg ); }
+.rotate-315 { -webkit-transform: rotate( 315deg ); transform: rotate( 315deg ); }
/*
- FLOATS
- http://tachyons.io/docs/layout/floats/
+ SKINS
+ Docs: http://tachyons.io/docs/themes/skins/
- 1. Floated elements are automatically rendered as block level elements.
- Setting floats to display inline will fix the double margin bug in
- ie6. You know... just in case.
+ Classes for setting foreground and background colors on elements.
+ If you haven't declared a border color, but set border on an element, it will
+ be set to the current text color.
- 2. Don't forget to clearfix your floats with .cf
+*/
+/* Text colors */
+.black-90 { color: rgba( 0, 0, 0, .9 ); }
+.black-80 { color: rgba( 0, 0, 0, .8 ); }
+.black-70 { color: rgba( 0, 0, 0, .7 ); }
+.black-60 { color: rgba( 0, 0, 0, .6 ); }
+.black-50 { color: rgba( 0, 0, 0, .5 ); }
+.black-40 { color: rgba( 0, 0, 0, .4 ); }
+.black-30 { color: rgba( 0, 0, 0, .3 ); }
+.black-20 { color: rgba( 0, 0, 0, .2 ); }
+.black-10 { color: rgba( 0, 0, 0, .1 ); }
+.black-05 { color: rgba( 0, 0, 0, .05 ); }
+.white-90 { color: rgba( 255, 255, 255, .9 ); }
+.white-80 { color: rgba( 255, 255, 255, .8 ); }
+.white-70 { color: rgba( 255, 255, 255, .7 ); }
+.white-60 { color: rgba( 255, 255, 255, .6 ); }
+.white-50 { color: rgba( 255, 255, 255, .5 ); }
+.white-40 { color: rgba( 255, 255, 255, .4 ); }
+.white-30 { color: rgba( 255, 255, 255, .3 ); }
+.white-20 { color: rgba( 255, 255, 255, .2 ); }
+.white-10 { color: rgba( 255, 255, 255, .1 ); }
+.black { color: #000; }
+.near-black { color: #111; }
+.dark-gray { color: #333; }
+.mid-gray { color: #555; }
+.gray { color: #777; }
+.silver { color: #999; }
+.light-silver { color: #aaa; }
+.moon-gray { color: #ccc; }
+.light-gray { color: #eee; }
+.near-white { color: #f4f4f4; }
+.white { color: #fff; }
+.dark-red { color: #e7040f; }
+.red { color: #ff4136; }
+.light-red { color: #ff725c; }
+.orange { color: #ff6300; }
+.gold { color: #ffb700; }
+.yellow { color: #ffd700; }
+.light-yellow { color: #fbf1a9; }
+.purple { color: #5e2ca5; }
+.light-purple { color: #a463f2; }
+.dark-pink { color: #d5008f; }
+.hot-pink { color: #ff41b4; }
+.pink { color: #ff80cc; }
+.light-pink { color: #ffa3d7; }
+.dark-green { color: #137752; }
+.green { color: #19a974; }
+.light-green { color: #9eebcf; }
+.navy { color: #001b44; }
+.dark-blue { color: #00449e; }
+.blue { color: #357edd; }
+.light-blue { color: #96ccff; }
+.lightest-blue { color: #cdecff; }
+.washed-blue { color: #f6fffe; }
+.washed-green { color: #e8fdf5; }
+.washed-yellow { color: #fffceb; }
+.washed-red { color: #ffdfdf; }
+.color-inherit { color: inherit; }
+/* Background colors */
+.bg-black-90 { background-color: rgba( 0, 0, 0, .9 ); }
+.bg-black-80 { background-color: rgba( 0, 0, 0, .8 ); }
+.bg-black-70 { background-color: rgba( 0, 0, 0, .7 ); }
+.bg-black-60 { background-color: rgba( 0, 0, 0, .6 ); }
+.bg-black-50 { background-color: rgba( 0, 0, 0, .5 ); }
+.bg-black-40 { background-color: rgba( 0, 0, 0, .4 ); }
+.bg-black-30 { background-color: rgba( 0, 0, 0, .3 ); }
+.bg-black-20 { background-color: rgba( 0, 0, 0, .2 ); }
+.bg-black-10 { background-color: rgba( 0, 0, 0, .1 ); }
+.bg-black-05 { background-color: rgba( 0, 0, 0, .05 ); }
+.bg-white-90 { background-color: rgba( 255, 255, 255, .9 ); }
+.bg-white-80 { background-color: rgba( 255, 255, 255, .8 ); }
+.bg-white-70 { background-color: rgba( 255, 255, 255, .7 ); }
+.bg-white-60 { background-color: rgba( 255, 255, 255, .6 ); }
+.bg-white-50 { background-color: rgba( 255, 255, 255, .5 ); }
+.bg-white-40 { background-color: rgba( 255, 255, 255, .4 ); }
+.bg-white-30 { background-color: rgba( 255, 255, 255, .3 ); }
+.bg-white-20 { background-color: rgba( 255, 255, 255, .2 ); }
+.bg-white-10 { background-color: rgba( 255, 255, 255, .1 ); }
+.bg-black { background-color: #000; }
+.bg-near-black { background-color: #111; }
+.bg-dark-gray { background-color: #333; }
+.bg-mid-gray { background-color: #555; }
+.bg-gray { background-color: #777; }
+.bg-silver { background-color: #999; }
+.bg-light-silver { background-color: #aaa; }
+.bg-moon-gray { background-color: #ccc; }
+.bg-light-gray { background-color: #eee; }
+.bg-near-white { background-color: #f4f4f4; }
+.bg-white { background-color: #fff; }
+.bg-transparent { background-color: transparent; }
+.bg-dark-red { background-color: #e7040f; }
+.bg-red { background-color: #ff4136; }
+.bg-light-red { background-color: #ff725c; }
+.bg-orange { background-color: #ff6300; }
+.bg-gold { background-color: #ffb700; }
+.bg-yellow { background-color: #ffd700; }
+.bg-light-yellow { background-color: #fbf1a9; }
+.bg-purple { background-color: #5e2ca5; }
+.bg-light-purple { background-color: #a463f2; }
+.bg-dark-pink { background-color: #d5008f; }
+.bg-hot-pink { background-color: #ff41b4; }
+.bg-pink { background-color: #ff80cc; }
+.bg-light-pink { background-color: #ffa3d7; }
+.bg-dark-green { background-color: #137752; }
+.bg-green { background-color: #19a974; }
+.bg-light-green { background-color: #9eebcf; }
+.bg-navy { background-color: #001b44; }
+.bg-dark-blue { background-color: #00449e; }
+.bg-blue { background-color: #357edd; }
+.bg-light-blue { background-color: #96ccff; }
+.bg-lightest-blue { background-color: #cdecff; }
+.bg-washed-blue { background-color: #f6fffe; }
+.bg-washed-green { background-color: #e8fdf5; }
+.bg-washed-yellow { background-color: #fffceb; }
+.bg-washed-red { background-color: #ffdfdf; }
+.bg-inherit { background-color: inherit; }
+/*
+
+ SKINS:PSEUDO
+
+ Customize the color of an element when
+ it is focused or hovered over.
+
+ */
+.hover-black:hover { color: #000; }
+.hover-black:focus { color: #000; }
+.hover-near-black:hover { color: #111; }
+.hover-near-black:focus { color: #111; }
+.hover-dark-gray:hover { color: #333; }
+.hover-dark-gray:focus { color: #333; }
+.hover-mid-gray:hover { color: #555; }
+.hover-mid-gray:focus { color: #555; }
+.hover-gray:hover { color: #777; }
+.hover-gray:focus { color: #777; }
+.hover-silver:hover { color: #999; }
+.hover-silver:focus { color: #999; }
+.hover-light-silver:hover { color: #aaa; }
+.hover-light-silver:focus { color: #aaa; }
+.hover-moon-gray:hover { color: #ccc; }
+.hover-moon-gray:focus { color: #ccc; }
+.hover-light-gray:hover { color: #eee; }
+.hover-light-gray:focus { color: #eee; }
+.hover-near-white:hover { color: #f4f4f4; }
+.hover-near-white:focus { color: #f4f4f4; }
+.hover-white:hover { color: #fff; }
+.hover-white:focus { color: #fff; }
+.hover-black-90:hover { color: rgba( 0, 0, 0, .9 ); }
+.hover-black-90:focus { color: rgba( 0, 0, 0, .9 ); }
+.hover-black-80:hover { color: rgba( 0, 0, 0, .8 ); }
+.hover-black-80:focus { color: rgba( 0, 0, 0, .8 ); }
+.hover-black-70:hover { color: rgba( 0, 0, 0, .7 ); }
+.hover-black-70:focus { color: rgba( 0, 0, 0, .7 ); }
+.hover-black-60:hover { color: rgba( 0, 0, 0, .6 ); }
+.hover-black-60:focus { color: rgba( 0, 0, 0, .6 ); }
+.hover-black-50:hover { color: rgba( 0, 0, 0, .5 ); }
+.hover-black-50:focus { color: rgba( 0, 0, 0, .5 ); }
+.hover-black-40:hover { color: rgba( 0, 0, 0, .4 ); }
+.hover-black-40:focus { color: rgba( 0, 0, 0, .4 ); }
+.hover-black-30:hover { color: rgba( 0, 0, 0, .3 ); }
+.hover-black-30:focus { color: rgba( 0, 0, 0, .3 ); }
+.hover-black-20:hover { color: rgba( 0, 0, 0, .2 ); }
+.hover-black-20:focus { color: rgba( 0, 0, 0, .2 ); }
+.hover-black-10:hover { color: rgba( 0, 0, 0, .1 ); }
+.hover-black-10:focus { color: rgba( 0, 0, 0, .1 ); }
+.hover-white-90:hover { color: rgba( 255, 255, 255, .9 ); }
+.hover-white-90:focus { color: rgba( 255, 255, 255, .9 ); }
+.hover-white-80:hover { color: rgba( 255, 255, 255, .8 ); }
+.hover-white-80:focus { color: rgba( 255, 255, 255, .8 ); }
+.hover-white-70:hover { color: rgba( 255, 255, 255, .7 ); }
+.hover-white-70:focus { color: rgba( 255, 255, 255, .7 ); }
+.hover-white-60:hover { color: rgba( 255, 255, 255, .6 ); }
+.hover-white-60:focus { color: rgba( 255, 255, 255, .6 ); }
+.hover-white-50:hover { color: rgba( 255, 255, 255, .5 ); }
+.hover-white-50:focus { color: rgba( 255, 255, 255, .5 ); }
+.hover-white-40:hover { color: rgba( 255, 255, 255, .4 ); }
+.hover-white-40:focus { color: rgba( 255, 255, 255, .4 ); }
+.hover-white-30:hover { color: rgba( 255, 255, 255, .3 ); }
+.hover-white-30:focus { color: rgba( 255, 255, 255, .3 ); }
+.hover-white-20:hover { color: rgba( 255, 255, 255, .2 ); }
+.hover-white-20:focus { color: rgba( 255, 255, 255, .2 ); }
+.hover-white-10:hover { color: rgba( 255, 255, 255, .1 ); }
+.hover-white-10:focus { color: rgba( 255, 255, 255, .1 ); }
+.hover-inherit:hover, .hover-inherit:focus { color: inherit; }
+.hover-bg-black:hover { background-color: #000; }
+.hover-bg-black:focus { background-color: #000; }
+.hover-bg-near-black:hover { background-color: #111; }
+.hover-bg-near-black:focus { background-color: #111; }
+.hover-bg-dark-gray:hover { background-color: #333; }
+.hover-bg-dark-gray:focus { background-color: #333; }
+.hover-bg-mid-gray:hover { background-color: #555; }
+.hover-bg-mid-gray:focus { background-color: #555; }
+.hover-bg-gray:hover { background-color: #777; }
+.hover-bg-gray:focus { background-color: #777; }
+.hover-bg-silver:hover { background-color: #999; }
+.hover-bg-silver:focus { background-color: #999; }
+.hover-bg-light-silver:hover { background-color: #aaa; }
+.hover-bg-light-silver:focus { background-color: #aaa; }
+.hover-bg-moon-gray:hover { background-color: #ccc; }
+.hover-bg-moon-gray:focus { background-color: #ccc; }
+.hover-bg-light-gray:hover { background-color: #eee; }
+.hover-bg-light-gray:focus { background-color: #eee; }
+.hover-bg-near-white:hover { background-color: #f4f4f4; }
+.hover-bg-near-white:focus { background-color: #f4f4f4; }
+.hover-bg-white:hover { background-color: #fff; }
+.hover-bg-white:focus { background-color: #fff; }
+.hover-bg-transparent:hover { background-color: transparent; }
+.hover-bg-transparent:focus { background-color: transparent; }
+.hover-bg-black-90:hover { background-color: rgba( 0, 0, 0, .9 ); }
+.hover-bg-black-90:focus { background-color: rgba( 0, 0, 0, .9 ); }
+.hover-bg-black-80:hover { background-color: rgba( 0, 0, 0, .8 ); }
+.hover-bg-black-80:focus { background-color: rgba( 0, 0, 0, .8 ); }
+.hover-bg-black-70:hover { background-color: rgba( 0, 0, 0, .7 ); }
+.hover-bg-black-70:focus { background-color: rgba( 0, 0, 0, .7 ); }
+.hover-bg-black-60:hover { background-color: rgba( 0, 0, 0, .6 ); }
+.hover-bg-black-60:focus { background-color: rgba( 0, 0, 0, .6 ); }
+.hover-bg-black-50:hover { background-color: rgba( 0, 0, 0, .5 ); }
+.hover-bg-black-50:focus { background-color: rgba( 0, 0, 0, .5 ); }
+.hover-bg-black-40:hover { background-color: rgba( 0, 0, 0, .4 ); }
+.hover-bg-black-40:focus { background-color: rgba( 0, 0, 0, .4 ); }
+.hover-bg-black-30:hover { background-color: rgba( 0, 0, 0, .3 ); }
+.hover-bg-black-30:focus { background-color: rgba( 0, 0, 0, .3 ); }
+.hover-bg-black-20:hover { background-color: rgba( 0, 0, 0, .2 ); }
+.hover-bg-black-20:focus { background-color: rgba( 0, 0, 0, .2 ); }
+.hover-bg-black-10:hover { background-color: rgba( 0, 0, 0, .1 ); }
+.hover-bg-black-10:focus { background-color: rgba( 0, 0, 0, .1 ); }
+.hover-bg-white-90:hover { background-color: rgba( 255, 255, 255, .9 ); }
+.hover-bg-white-90:focus { background-color: rgba( 255, 255, 255, .9 ); }
+.hover-bg-white-80:hover { background-color: rgba( 255, 255, 255, .8 ); }
+.hover-bg-white-80:focus { background-color: rgba( 255, 255, 255, .8 ); }
+.hover-bg-white-70:hover { background-color: rgba( 255, 255, 255, .7 ); }
+.hover-bg-white-70:focus { background-color: rgba( 255, 255, 255, .7 ); }
+.hover-bg-white-60:hover { background-color: rgba( 255, 255, 255, .6 ); }
+.hover-bg-white-60:focus { background-color: rgba( 255, 255, 255, .6 ); }
+.hover-bg-white-50:hover { background-color: rgba( 255, 255, 255, .5 ); }
+.hover-bg-white-50:focus { background-color: rgba( 255, 255, 255, .5 ); }
+.hover-bg-white-40:hover { background-color: rgba( 255, 255, 255, .4 ); }
+.hover-bg-white-40:focus { background-color: rgba( 255, 255, 255, .4 ); }
+.hover-bg-white-30:hover { background-color: rgba( 255, 255, 255, .3 ); }
+.hover-bg-white-30:focus { background-color: rgba( 255, 255, 255, .3 ); }
+.hover-bg-white-20:hover { background-color: rgba( 255, 255, 255, .2 ); }
+.hover-bg-white-20:focus { background-color: rgba( 255, 255, 255, .2 ); }
+.hover-bg-white-10:hover { background-color: rgba( 255, 255, 255, .1 ); }
+.hover-bg-white-10:focus { background-color: rgba( 255, 255, 255, .1 ); }
+.hover-dark-red:hover { color: #e7040f; }
+.hover-dark-red:focus { color: #e7040f; }
+.hover-red:hover { color: #ff4136; }
+.hover-red:focus { color: #ff4136; }
+.hover-light-red:hover { color: #ff725c; }
+.hover-light-red:focus { color: #ff725c; }
+.hover-orange:hover { color: #ff6300; }
+.hover-orange:focus { color: #ff6300; }
+.hover-gold:hover { color: #ffb700; }
+.hover-gold:focus { color: #ffb700; }
+.hover-yellow:hover { color: #ffd700; }
+.hover-yellow:focus { color: #ffd700; }
+.hover-light-yellow:hover { color: #fbf1a9; }
+.hover-light-yellow:focus { color: #fbf1a9; }
+.hover-purple:hover { color: #5e2ca5; }
+.hover-purple:focus { color: #5e2ca5; }
+.hover-light-purple:hover { color: #a463f2; }
+.hover-light-purple:focus { color: #a463f2; }
+.hover-dark-pink:hover { color: #d5008f; }
+.hover-dark-pink:focus { color: #d5008f; }
+.hover-hot-pink:hover { color: #ff41b4; }
+.hover-hot-pink:focus { color: #ff41b4; }
+.hover-pink:hover { color: #ff80cc; }
+.hover-pink:focus { color: #ff80cc; }
+.hover-light-pink:hover { color: #ffa3d7; }
+.hover-light-pink:focus { color: #ffa3d7; }
+.hover-dark-green:hover { color: #137752; }
+.hover-dark-green:focus { color: #137752; }
+.hover-green:hover { color: #19a974; }
+.hover-green:focus { color: #19a974; }
+.hover-light-green:hover { color: #9eebcf; }
+.hover-light-green:focus { color: #9eebcf; }
+.hover-navy:hover { color: #001b44; }
+.hover-navy:focus { color: #001b44; }
+.hover-dark-blue:hover { color: #00449e; }
+.hover-dark-blue:focus { color: #00449e; }
+.hover-blue:hover { color: #357edd; }
+.hover-blue:focus { color: #357edd; }
+.hover-light-blue:hover { color: #96ccff; }
+.hover-light-blue:focus { color: #96ccff; }
+.hover-lightest-blue:hover { color: #cdecff; }
+.hover-lightest-blue:focus { color: #cdecff; }
+.hover-washed-blue:hover { color: #f6fffe; }
+.hover-washed-blue:focus { color: #f6fffe; }
+.hover-washed-green:hover { color: #e8fdf5; }
+.hover-washed-green:focus { color: #e8fdf5; }
+.hover-washed-yellow:hover { color: #fffceb; }
+.hover-washed-yellow:focus { color: #fffceb; }
+.hover-washed-red:hover { color: #ffdfdf; }
+.hover-washed-red:focus { color: #ffdfdf; }
+.hover-bg-dark-red:hover { background-color: #e7040f; }
+.hover-bg-dark-red:focus { background-color: #e7040f; }
+.hover-bg-red:hover { background-color: #ff4136; }
+.hover-bg-red:focus { background-color: #ff4136; }
+.hover-bg-light-red:hover { background-color: #ff725c; }
+.hover-bg-light-red:focus { background-color: #ff725c; }
+.hover-bg-orange:hover { background-color: #ff6300; }
+.hover-bg-orange:focus { background-color: #ff6300; }
+.hover-bg-gold:hover { background-color: #ffb700; }
+.hover-bg-gold:focus { background-color: #ffb700; }
+.hover-bg-yellow:hover { background-color: #ffd700; }
+.hover-bg-yellow:focus { background-color: #ffd700; }
+.hover-bg-light-yellow:hover { background-color: #fbf1a9; }
+.hover-bg-light-yellow:focus { background-color: #fbf1a9; }
+.hover-bg-purple:hover { background-color: #5e2ca5; }
+.hover-bg-purple:focus { background-color: #5e2ca5; }
+.hover-bg-light-purple:hover { background-color: #a463f2; }
+.hover-bg-light-purple:focus { background-color: #a463f2; }
+.hover-bg-dark-pink:hover { background-color: #d5008f; }
+.hover-bg-dark-pink:focus { background-color: #d5008f; }
+.hover-bg-hot-pink:hover { background-color: #ff41b4; }
+.hover-bg-hot-pink:focus { background-color: #ff41b4; }
+.hover-bg-pink:hover { background-color: #ff80cc; }
+.hover-bg-pink:focus { background-color: #ff80cc; }
+.hover-bg-light-pink:hover { background-color: #ffa3d7; }
+.hover-bg-light-pink:focus { background-color: #ffa3d7; }
+.hover-bg-dark-green:hover { background-color: #137752; }
+.hover-bg-dark-green:focus { background-color: #137752; }
+.hover-bg-green:hover { background-color: #19a974; }
+.hover-bg-green:focus { background-color: #19a974; }
+.hover-bg-light-green:hover { background-color: #9eebcf; }
+.hover-bg-light-green:focus { background-color: #9eebcf; }
+.hover-bg-navy:hover { background-color: #001b44; }
+.hover-bg-navy:focus { background-color: #001b44; }
+.hover-bg-dark-blue:hover { background-color: #00449e; }
+.hover-bg-dark-blue:focus { background-color: #00449e; }
+.hover-bg-blue:hover { background-color: #357edd; }
+.hover-bg-blue:focus { background-color: #357edd; }
+.hover-bg-light-blue:hover { background-color: #96ccff; }
+.hover-bg-light-blue:focus { background-color: #96ccff; }
+.hover-bg-lightest-blue:hover { background-color: #cdecff; }
+.hover-bg-lightest-blue:focus { background-color: #cdecff; }
+.hover-bg-washed-blue:hover { background-color: #f6fffe; }
+.hover-bg-washed-blue:focus { background-color: #f6fffe; }
+.hover-bg-washed-green:hover { background-color: #e8fdf5; }
+.hover-bg-washed-green:focus { background-color: #e8fdf5; }
+.hover-bg-washed-yellow:hover { background-color: #fffceb; }
+.hover-bg-washed-yellow:focus { background-color: #fffceb; }
+.hover-bg-washed-red:hover { background-color: #ffdfdf; }
+.hover-bg-washed-red:focus { background-color: #ffdfdf; }
+.hover-bg-inherit:hover, .hover-bg-inherit:focus { background-color: inherit; }
+/* Variables */
+/*
+ SPACING
+ Docs: http://tachyons.io/docs/layout/spacing/
+
+ An eight step powers of two scale ranging from 0 to 16rem.
Base:
- f = float
+ p = padding
+ m = margin
Modifiers:
+ a = all
+ h = horizontal
+ v = vertical
+ t = top
+ r = right
+ b = bottom
l = left
+
+ 0 = none
+ 1 = 1st step in spacing scale
+ 2 = 2nd step in spacing scale
+ 3 = 3rd step in spacing scale
+ 4 = 4th step in spacing scale
+ 5 = 5th step in spacing scale
+ 6 = 6th step in spacing scale
+ 7 = 7th step in spacing scale
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+
+*/
+.pa0 { padding: 0; }
+.pa1 { padding: .25rem; }
+.pa2 { padding: .5rem; }
+.pa3 { padding: 1rem; }
+.pa4 { padding: 2rem; }
+.pa5 { padding: 4rem; }
+.pa6 { padding: 8rem; }
+.pa7 { padding: 16rem; }
+.pl0 { padding-left: 0; }
+.pl1 { padding-left: .25rem; }
+.pl2 { padding-left: .5rem; }
+.pl3 { padding-left: 1rem; }
+.pl4 { padding-left: 2rem; }
+.pl5 { padding-left: 4rem; }
+.pl6 { padding-left: 8rem; }
+.pl7 { padding-left: 16rem; }
+.pr0 { padding-right: 0; }
+.pr1 { padding-right: .25rem; }
+.pr2 { padding-right: .5rem; }
+.pr3 { padding-right: 1rem; }
+.pr4 { padding-right: 2rem; }
+.pr5 { padding-right: 4rem; }
+.pr6 { padding-right: 8rem; }
+.pr7 { padding-right: 16rem; }
+.pb0 { padding-bottom: 0; }
+.pb1 { padding-bottom: .25rem; }
+.pb2 { padding-bottom: .5rem; }
+.pb3 { padding-bottom: 1rem; }
+.pb4 { padding-bottom: 2rem; }
+.pb5 { padding-bottom: 4rem; }
+.pb6 { padding-bottom: 8rem; }
+.pb7 { padding-bottom: 16rem; }
+.pt0 { padding-top: 0; }
+.pt1 { padding-top: .25rem; }
+.pt2 { padding-top: .5rem; }
+.pt3 { padding-top: 1rem; }
+.pt4 { padding-top: 2rem; }
+.pt5 { padding-top: 4rem; }
+.pt6 { padding-top: 8rem; }
+.pt7 { padding-top: 16rem; }
+.pv0 { padding-top: 0; padding-bottom: 0; }
+.pv1 { padding-top: .25rem; padding-bottom: .25rem; }
+.pv2 { padding-top: .5rem; padding-bottom: .5rem; }
+.pv3 { padding-top: 1rem; padding-bottom: 1rem; }
+.pv4 { padding-top: 2rem; padding-bottom: 2rem; }
+.pv5 { padding-top: 4rem; padding-bottom: 4rem; }
+.pv6 { padding-top: 8rem; padding-bottom: 8rem; }
+.pv7 { padding-top: 16rem; padding-bottom: 16rem; }
+.ph0 { padding-left: 0; padding-right: 0; }
+.ph1 { padding-left: .25rem; padding-right: .25rem; }
+.ph2 { padding-left: .5rem; padding-right: .5rem; }
+.ph3 { padding-left: 1rem; padding-right: 1rem; }
+.ph4 { padding-left: 2rem; padding-right: 2rem; }
+.ph5 { padding-left: 4rem; padding-right: 4rem; }
+.ph6 { padding-left: 8rem; padding-right: 8rem; }
+.ph7 { padding-left: 16rem; padding-right: 16rem; }
+.ma0 { margin: 0; }
+.ma1 { margin: .25rem; }
+.ma2 { margin: .5rem; }
+.ma3 { margin: 1rem; }
+.ma4 { margin: 2rem; }
+.ma5 { margin: 4rem; }
+.ma6 { margin: 8rem; }
+.ma7 { margin: 16rem; }
+.ml0 { margin-left: 0; }
+.ml1 { margin-left: .25rem; }
+.ml2 { margin-left: .5rem; }
+.ml3 { margin-left: 1rem; }
+.ml4 { margin-left: 2rem; }
+.ml5 { margin-left: 4rem; }
+.ml6 { margin-left: 8rem; }
+.ml7 { margin-left: 16rem; }
+.mr0 { margin-right: 0; }
+.mr1 { margin-right: .25rem; }
+.mr2 { margin-right: .5rem; }
+.mr3 { margin-right: 1rem; }
+.mr4 { margin-right: 2rem; }
+.mr5 { margin-right: 4rem; }
+.mr6 { margin-right: 8rem; }
+.mr7 { margin-right: 16rem; }
+.mb0 { margin-bottom: 0; }
+.mb1 { margin-bottom: .25rem; }
+.mb2 { margin-bottom: .5rem; }
+.mb3 { margin-bottom: 1rem; }
+.mb4 { margin-bottom: 2rem; }
+.mb5 { margin-bottom: 4rem; }
+.mb6 { margin-bottom: 8rem; }
+.mb7 { margin-bottom: 16rem; }
+.mt0 { margin-top: 0; }
+.mt1 { margin-top: .25rem; }
+.mt2 { margin-top: .5rem; }
+.mt3 { margin-top: 1rem; }
+.mt4 { margin-top: 2rem; }
+.mt5 { margin-top: 4rem; }
+.mt6 { margin-top: 8rem; }
+.mt7 { margin-top: 16rem; }
+.mv0 { margin-top: 0; margin-bottom: 0; }
+.mv1 { margin-top: .25rem; margin-bottom: .25rem; }
+.mv2 { margin-top: .5rem; margin-bottom: .5rem; }
+.mv3 { margin-top: 1rem; margin-bottom: 1rem; }
+.mv4 { margin-top: 2rem; margin-bottom: 2rem; }
+.mv5 { margin-top: 4rem; margin-bottom: 4rem; }
+.mv6 { margin-top: 8rem; margin-bottom: 8rem; }
+.mv7 { margin-top: 16rem; margin-bottom: 16rem; }
+.mh0 { margin-left: 0; margin-right: 0; }
+.mh1 { margin-left: .25rem; margin-right: .25rem; }
+.mh2 { margin-left: .5rem; margin-right: .5rem; }
+.mh3 { margin-left: 1rem; margin-right: 1rem; }
+.mh4 { margin-left: 2rem; margin-right: 2rem; }
+.mh5 { margin-left: 4rem; margin-right: 4rem; }
+.mh6 { margin-left: 8rem; margin-right: 8rem; }
+.mh7 { margin-left: 16rem; margin-right: 16rem; }
+/*
+ NEGATIVE MARGINS
+
+ Base:
+ n = negative
+
+ Modifiers:
+ a = all
+ t = top
r = right
- n = none
+ b = bottom
+ l = left
+
+ 1 = 1st step in spacing scale
+ 2 = 2nd step in spacing scale
+ 3 = 3rd step in spacing scale
+ 4 = 4th step in spacing scale
+ 5 = 5th step in spacing scale
+ 6 = 6th step in spacing scale
+ 7 = 7th step in spacing scale
Media Query Extensions:
- -s = small
+ -ns = not-small
-m = medium
-l = large
*/
-.fl { float: left; }
-.fr { float: right; }
-.fn { float: none; }
-@container (min-width:30em) {
- .fl-s { float: left; }
- .fr-s { float: right; }
- .fn-s { float: none; }
-}
-@container (min-width:48em) {
- .fl-m { float: left; }
- .fr-m { float: right; }
- .fn-m { float: none; }
-}
-@container (min-width:64em) {
- .fl-l { float: left; }
- .fr-l { float: right; }
- .fn-l { float: none; }
-}
-/*
+.na1 { margin: -0.25rem; }
+.na2 { margin: -0.5rem; }
+.na3 { margin: -1rem; }
+.na4 { margin: -2rem; }
+.na5 { margin: -4rem; }
+.na6 { margin: -8rem; }
+.na7 { margin: -16rem; }
+.nl1 { margin-left: -0.25rem; }
+.nl2 { margin-left: -0.5rem; }
+.nl3 { margin-left: -1rem; }
+.nl4 { margin-left: -2rem; }
+.nl5 { margin-left: -4rem; }
+.nl6 { margin-left: -8rem; }
+.nl7 { margin-left: -16rem; }
+.nr1 { margin-right: -0.25rem; }
+.nr2 { margin-right: -0.5rem; }
+.nr3 { margin-right: -1rem; }
+.nr4 { margin-right: -2rem; }
+.nr5 { margin-right: -4rem; }
+.nr6 { margin-right: -8rem; }
+.nr7 { margin-right: -16rem; }
+.nb1 { margin-bottom: -0.25rem; }
+.nb2 { margin-bottom: -0.5rem; }
+.nb3 { margin-bottom: -1rem; }
+.nb4 { margin-bottom: -2rem; }
+.nb5 { margin-bottom: -4rem; }
+.nb6 { margin-bottom: -8rem; }
+.nb7 { margin-bottom: -16rem; }
+.nt1 { margin-top: -0.25rem; }
+.nt2 { margin-top: -0.5rem; }
+.nt3 { margin-top: -1rem; }
+.nt4 { margin-top: -2rem; }
+.nt5 { margin-top: -4rem; }
+.nt6 { margin-top: -8rem; }
+.nt7 { margin-top: -16rem; }
+/*
- FONT FAMILY GROUPS
- Docs: http://tachyons.io/docs/typography/font-family/
+ TABLES
+ Docs: http://tachyons.io/docs/elements/tables/
*/
-.f-heading { font-family: var( --font-family-heading, sans-serif ); }
-.f-body { font-family: var( --font-family-body, sans-serif ); }
-.f-mono { font-family: var( --font-family-mono, monospace ); }
+.collapse { border-collapse: collapse; border-spacing: 0; }
+.striped--light-silver:nth-child(odd) { background-color: #aaa; }
+.striped--moon-gray:nth-child(odd) { background-color: #ccc; }
+.striped--light-gray:nth-child(odd) { background-color: #eee; }
+.striped--near-white:nth-child(odd) { background-color: #f4f4f4; }
+.stripe-light:nth-child(odd) { background-color: rgba( 255, 255, 255, .1 ); }
+.stripe-dark:nth-child(odd) { background-color: rgba( 0, 0, 0, .1 ); }
/*
- FONT STYLE
- Docs: http://tachyons.io/docs/typography/font-style/
+ TEXT DECORATION
+ Docs: http://tachyons.io/docs/typography/text-decoration/
+
Media Query Extensions:
- -s = small
+ -ns = not-small
-m = medium
-l = large
*/
-.i { font-style: italic; }
-.fs-normal { font-style: normal; }
+.strike { text-decoration: line-through; }
+.underline { text-decoration: underline; }
+.no-underline { text-decoration: none; }
/*
- FONT WEIGHT
- Docs: http://tachyons.io/docs/typography/font-weight/
+ TEXT ALIGN
+ Docs: http://tachyons.io/docs/typography/text-align/
- Base
- fw = font-weight
+ Base
+ t = text-align
- Modifiers:
- 1 = literal value 100
- 2 = literal value 200
- 3 = literal value 300
- 4 = literal value 400
- 5 = literal value 500
- 6 = literal value 600
- 7 = literal value 700
- 8 = literal value 800
- 9 = literal value 900
+ Modifiers
+ l = left
+ r = right
+ c = center
+ j = justify
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+
+*/
+.tl { text-align: left; }
+.tr { text-align: right; }
+.tc { text-align: center; }
+.tj { text-align: justify; }
+/*
+
+ TEXT TRANSFORM
+ Docs: http://tachyons.io/docs/typography/text-transform/
+
+ Base:
+ tt = text-transform
+
+ Modifiers
+ c = capitalize
+ l = lowercase
+ u = uppercase
+ n = none
Media Query Extensions:
- -s = small
+ -ns = not-small
-m = medium
-l = large
*/
-.normal { font-weight: normal; }
-.b { font-weight: bold; }
-.fw1 { font-weight: 100; }
-.fw2 { font-weight: 200; }
-.fw3 { font-weight: 300; }
-.fw4 { font-weight: 400; }
-.fw5 { font-weight: 500; }
-.fw6 { font-weight: 600; }
-.fw7 { font-weight: 700; }
-.fw8 { font-weight: 800; }
-.fw9 { font-weight: 900; }
-@container (min-width:30em) {
- .normal-s { font-weight: normal; }
- .b-s { font-weight: bold; }
- .fw1-s { font-weight: 100; }
- .fw2-s { font-weight: 200; }
- .fw3-s { font-weight: 300; }
- .fw4-s { font-weight: 400; }
- .fw5-s { font-weight: 500; }
- .fw6-s { font-weight: 600; }
- .fw7-s { font-weight: 700; }
- .fw8-s { font-weight: 800; }
- .fw9-s { font-weight: 900; }
-}
-@container (min-width:48em) {
- .normal-m { font-weight: normal; }
- .b-m { font-weight: bold; }
- .fw1-m { font-weight: 100; }
- .fw2-m { font-weight: 200; }
- .fw3-m { font-weight: 300; }
- .fw4-m { font-weight: 400; }
- .fw5-m { font-weight: 500; }
- .fw6-m { font-weight: 600; }
- .fw7-m { font-weight: 700; }
- .fw8-m { font-weight: 800; }
- .fw9-m { font-weight: 900; }
-}
-@container (min-width:64em) {
- .normal-l { font-weight: normal; }
- .b-l { font-weight: bold; }
- .fw1-l { font-weight: 100; }
- .fw2-l { font-weight: 200; }
- .fw3-l { font-weight: 300; }
- .fw4-l { font-weight: 400; }
- .fw5-l { font-weight: 500; }
- .fw6-l { font-weight: 600; }
- .fw7-l { font-weight: 700; }
- .fw8-l { font-weight: 800; }
- .fw9-l { font-weight: 900; }
-}
+.ttc { text-transform: capitalize; }
+.ttl { text-transform: lowercase; }
+.ttu { text-transform: uppercase; }
+.ttn { text-transform: none; }
/*
- FORMS
-
-*/
-.input-reset { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
-.button-reset::-moz-focus-inner, .input-reset::-moz-focus-inner { border: 0; padding: 0; }
-/* TODO: Variables review
-
- HEIGHTS
- Docs: http://tachyons.io/docs/layout/heights/
+ TYPE SCALE
+ Docs: http://tachyons.io/docs/typography/scale/
Base:
- h = height
- min-h = min-height
- min-vh = min-height vertical screen height
- vh = vertical screen height
+ f = font-size
Modifiers
- 1 = 1st step in height scale
- 2 = 2nd step in height scale
- 3 = 3rd step in height scale
- 4 = 4th step in height scale
- 5 = 5th step in height scale
+ 1 = 1st step in size scale
+ 2 = 2nd step in size scale
+ 3 = 3rd step in size scale
+ 4 = 4th step in size scale
+ 5 = 5th step in size scale
+ 6 = 6th step in size scale
+ 7 = 7th step in size scale
- -50 = literal value 50%
- -75 = literal value 75%
- -100 = literal value 100%
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+*/
+/*
+ * For Hero/Marketing Titles
+ *
+ * These generally are too large for mobile
+ * so be careful using them on smaller screens.
+ * */
+.f-6, .f-headline { font-size: 6rem; }
+.f-5, .f-subheadline { font-size: 5rem; }
+/* Type Scale */
+.f1 { font-size: 3rem; }
+.f2 { font-size: 2.25rem; }
+.f3 { font-size: 1.5rem; }
+.f4 { font-size: 1.25rem; }
+.f5 { font-size: 1rem; }
+.f6 { font-size: .875rem; }
+.f7 { font-size: .75rem; }
+/* Small and hard to read for many people so use with extreme caution */
+/*
- -auto = string value of auto
- -inherit = string value of inherit
+ TYPOGRAPHY
+ http://tachyons.io/docs/typography/measure/
Media Query Extensions:
- -s = small
+ -ns = not-small
-m = medium
-l = large
*/
-/* Height Scale */
-.h0 { height: var( --size-0, 0 ); }
-.h1 { height: var( --size-1, 1rem ); }
-.h2 { height: var( --size-2, 2rem ); }
-.h3 { height: var( --size-3, 3rem ); }
-.h4 { height: var( --size-4, 4rem ); }
-.h5 { height: var( --size-5, 8rem ); }
-.h6 { height: var( --size-6, 16rem ); }
-.h7 { height: var( --size-7, 32rem ); }
-.h8 { height: var( --size-8, 64rem ); }
-/* Height Percentages - Based off of height of parent */
-.h-50 { height: 50%; }
-.h-75 { height: 75%; }
-.h-100 { height: 100%; }
-.min-h-100 { min-height: 100%; }
-/* Screen Height Percentage */
-.vh-25 { height: 25vh; }
-.vh-50 { height: 50vh; }
-.vh-75 { height: 75vh; }
-.vh-100 { height: 100vh; }
-.min-vh-100 { min-height: 100vh; }
-/* String Properties */
-.h-auto { height: auto; }
-.h-inherit { height: inherit; }
-@container (min-width:30em) {
- .h0-s { height: var( --size-0, 0 ); }
- .h1-s { height: var( --size-1, 1rem ); }
- .h2-s { height: var( --size-2, 2rem ); }
- .h3-s { height: var( --size-3, 3rem ); }
- .h4-s { height: var( --size-4, 4rem ); }
- .h5-s { height: var( --size-5, 8rem ); }
- .h6-s { height: var( --size-6, 16rem ); }
- .h7-s { height: var( --size-7, 32rem ); }
- .h8-s { height: var( --size-8, 64rem ); }
- .h-50-s { height: 50%; }
- .h-75-s { height: 75%; }
- .h-100-s { height: 100%; }
- .min-h-100-s { min-height: 100%; }
- .vh-25-s { height: 25vh; }
- .vh-50-s { height: 50vh; }
- .vh-75-s { height: 75vh; }
- .vh-100-s { height: 100vh; }
- .min-vh-100-s { min-height: 100vh; }
- .h-auto-s { height: auto; }
- .h-inherit-s { height: inherit; }
-}
-@container (min-width:48em) {
- .h1-m { height: 1rem; }
- .h2-m { height: 2rem; }
- .h3-m { height: 4rem; }
- .h4-m { height: 8rem; }
- .h5-m { height: 16rem; }
- .h-50-m { height: 50%; }
- .h-75-m { height: 75%; }
- .h-100-m { height: 100%; }
- .min-h-100-m { min-height: 100%; }
- .vh-25-m { height: 25vh; }
- .vh-50-m { height: 50vh; }
- .vh-75-m { height: 75vh; }
- .vh-100-m { height: 100vh; }
- .min-vh-100-m { min-height: 100vh; }
- .h-auto-m { height: auto; }
- .h-inherit-m { height: inherit; }
-}
-@container (min-width:64em) {
- .h1-l { height: 1rem; }
- .h2-l { height: 2rem; }
- .h3-l { height: 4rem; }
- .h4-l { height: 8rem; }
- .h5-l { height: 16rem; }
- .h-50-l { height: 50%; }
- .h-75-l { height: 75%; }
- .h-100-l { height: 100%; }
- .min-h-100-l { min-height: 100%; }
- .vh-25-l { height: 25vh; }
- .vh-50-l { height: 50vh; }
- .vh-75-l { height: 75vh; }
- .vh-100-l { height: 100vh; }
- .min-vh-100-l { min-height: 100vh; }
- .h-auto-l { height: auto; }
- .h-inherit-l { height: inherit; }
-}
+/* Measure is limited to ~66 characters */
+.measure { max-width: 30em; }
+/* Measure is limited to ~80 characters */
+.measure-wide { max-width: 34em; }
+/* Measure is limited to ~45 characters */
+.measure-narrow { max-width: 20em; }
+/* Book paragraph style - paragraphs are indented with no vertical spacing. */
+.indent { text-indent: 1em; margin-top: 0; margin-bottom: 0; }
+.small-caps { font-variant: small-caps; }
+/* Combine this class with a width to truncate text (or just leave as is to truncate at width of containing element. */
+.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/*
- LETTER SPACING
- Docs: http://tachyons.io/docs/typography/tracking/
+ UTILITIES
Media Query Extensions:
- -s = small
+ -ns = not-small
-m = medium
-l = large
*/
-.tracked { letter-spacing: var( --letter-spacing-tracked, .1em ); }
-.tracked-tight { letter-spacing: var( --letter-spacing-tight, -0.05em ); }
-.tracked-mega { letter-spacing: var( --letter-spacing-large, .25em ); }
-@container (min-width:30em) {
- .tracked-s { letter-spacing: var( --letter-spacing-tracked, .1em ); }
- .tracked-tight-s { letter-spacing: var( --letter-spacing-tight, -0.05em ); }
- .tracked-mega-s { letter-spacing: var( --letter-spacing-large, .25em ); }
-}
-@container (min-width:48em) {
- .tracked-m { letter-spacing: var( --letter-spacing-tracked, .1em ); }
- .tracked-tight-m { letter-spacing: var( --letter-spacing-tight, -0.05em ); }
- .tracked-mega-m { letter-spacing: var( --letter-spacing-large, .25em ); }
-}
-@container (min-width:64em) {
- .tracked-l { letter-spacing: var( --letter-spacing-tracked, .1em ); }
- .tracked-tight-l { letter-spacing: var( --letter-spacing-tight, -0.05em ); }
- .tracked-mega-l { letter-spacing: var( --letter-spacing-large, .25em ); }
-}
+/* Equivalent to .overflow-y-scroll */
+.overflow-container { overflow-y: scroll; }
+.center { margin-right: auto; margin-left: auto; }
+.mr-auto { margin-right: auto; }
+.ml-auto { margin-left: auto; }
/*
- LINE HEIGHT / LEADING
- Docs: http://tachyons.io/docs/typography/line-height
+ VISIBILITY
Media Query Extensions:
- -s = small
+ -ns = not-small
-m = medium
-l = large
*/
-.lh-solid { line-height: var( --line-height-solid, 1 ); }
-.lh-title { line-height: var( --line-height-title, 1.25 ); }
-.lh-body { line-height: var( --line-height-body, 1.5 ); }
-@container (min-width:30em) {
- .lh-solid-s { line-height: var( --line-height-solid, 1 ); }
- .lh-title-s { line-height: var( --line-height-title, 1.25 ); }
- .lh-body-s { line-height: var( --line-height-body, 1.5 ); }
-}
-@container (min-width:48em) {
- .lh-solid-m { line-height: var( --line-height-solid, 1 ); }
- .lh-title-m { line-height: var( --line-height-title, 1.25 ); }
- .lh-body-m { line-height: var( --line-height-body, 1.5 ); }
-}
-@container (min-width:64em) {
- .lh-solid-l { line-height: var( --line-height-solid, 1 ); }
- .lh-title-l { line-height: var( --line-height-title, 1.25 ); }
- .lh-body-l { line-height: var( --line-height-body, 1.5 ); }
-}
+/*
+ Text that is hidden but accessible
+ Ref: http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
+*/
+.clip { position: fixed !important; _position: absolute !important; clip: rect( 1px 1px 1px 1px ); /* IE6, IE7 */ clip: rect( 1px, 1px, 1px, 1px ); }
/*
- LINKS
- Docs: http://tachyons.io/docs/elements/links/
+ WHITE SPACE
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
*/
-.link { text-decoration: none; transition: all .15s ease-in; }
-.link:link, .link:visited { transition: all .15s ease-in; }
-.link:hover { transition: all .15s ease-in; }
-.link:active { transition: all .15s ease-in; }
-.link:focus { transition: all .15s ease-in; outline: 1px dotted currentColor; }
+.ws-normal { white-space: normal; }
+.nowrap { white-space: nowrap; }
+.pre { white-space: pre; }
/*
- LISTS
- http://tachyons.io/docs/elements/lists/
+ VERTICAL ALIGN
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
*/
-.list { list-style-type: none; }
+.v-base { vertical-align: baseline; }
+.v-mid { vertical-align: middle; }
+.v-top { vertical-align: top; }
+.v-btm { vertical-align: bottom; }
/*
- MAX WIDTHS
- Docs: http://tachyons.io/docs/layout/max-widths/
-
- Base:
- mw = max-width
+ HOVER EFFECTS
+ Docs: http://tachyons.io/docs/themes/hovers/
- Modifiers
- 1 = 1st step in width scale
- 2 = 2nd step in width scale
- 3 = 3rd step in width scale
- 4 = 4th step in width scale
- 5 = 5th step in width scale
- 6 = 6st step in width scale
- 7 = 7nd step in width scale
- 8 = 8rd step in width scale
- 9 = 9th step in width scale
+ - Dim
+ - Glow
+ - Hide Child
+ - Underline text
+ - Grow
+ - Pointer
+ - Shadow
- -100 = literal value 100%
+*/
+/*
- -none = string value none
+ Dim element on hover by adding the dim class.
+*/
+.dim { opacity: 1; transition: opacity .15s ease-in; }
+.dim:hover, .dim:focus { opacity: .5; transition: opacity .15s ease-in; }
+.dim:active { opacity: .8; transition: opacity .15s ease-out; }
+/*
- Media Query Extensions:
- -s = small
- -m = medium
- -l = large
+ Animate opacity to 100% on hover by adding the glow class.
*/
-/* Max Width Percentages */
-.mw-100 { max-width: 100%; }
-/* Max Width Scale */
-.mw1 { max-width: 1rem; }
-.mw2 { max-width: 2rem; }
-.mw3 { max-width: 4rem; }
-.mw4 { max-width: 8rem; }
-.mw5 { max-width: 16rem; }
-.mw6 { max-width: 32rem; }
-.mw7 { max-width: 48rem; }
-.mw8 { max-width: 64rem; }
-.mw9 { max-width: 96rem; }
-/* Max Width String Properties */
-.mw-none { max-width: none; }
-@container (min-width:30em) {
- .mw-100-s { max-width: 100%; }
- .mw1-s { max-width: 1rem; }
- .mw2-s { max-width: 2rem; }
- .mw3-s { max-width: 4rem; }
- .mw4-s { max-width: 8rem; }
- .mw5-s { max-width: 16rem; }
- .mw6-s { max-width: 32rem; }
- .mw7-s { max-width: 48rem; }
- .mw8-s { max-width: 64rem; }
- .mw9-s { max-width: 96rem; }
- .mw-none-s { max-width: none; }
-}
-@container (min-width:48em) {
- .mw-100-m { max-width: 100%; }
- .mw1-m { max-width: 1rem; }
- .mw2-m { max-width: 2rem; }
- .mw3-m { max-width: 4rem; }
- .mw4-m { max-width: 8rem; }
- .mw5-m { max-width: 16rem; }
- .mw6-m { max-width: 32rem; }
- .mw7-m { max-width: 48rem; }
- .mw8-m { max-width: 64rem; }
- .mw9-m { max-width: 96rem; }
- .mw-none-m { max-width: none; }
-}
-@container (min-width:64em) {
- .mw-100-l { max-width: 100%; }
- .mw1-l { max-width: 1rem; }
- .mw2-l { max-width: 2rem; }
- .mw3-l { max-width: 4rem; }
- .mw4-l { max-width: 8rem; }
- .mw5-l { max-width: 16rem; }
- .mw6-l { max-width: 32rem; }
- .mw7-l { max-width: 48rem; }
- .mw8-l { max-width: 64rem; }
- .mw9-l { max-width: 96rem; }
- .mw-none-l { max-width: none; }
-}
+.glow { transition: opacity .15s ease-in; }
+.glow:hover, .glow:focus { opacity: 1; transition: opacity .15s ease-in; }
/*
- WIDTHS
- Docs: http://tachyons.io/docs/layout/widths/
+ Hide child & reveal on hover:
- Base:
- w = width
+ Put the hide-child class on a parent element and any nested element with the
+ child class will be hidden and displayed on hover or focus.
- Modifiers
- 1 = 1st step in width scale
- 2 = 2nd step in width scale
- 3 = 3rd step in width scale
- 4 = 4th step in width scale
- 5 = 5th step in width scale
- 6 = 6th step in width scale
- 7 = 7th step in width scale
- 8 = 8th step in width scale
+
+
Hidden until hover or focus
+
Hidden until hover or focus
+
Hidden until hover or focus
+
Hidden until hover or focus
+
+*/
+.hide-child .child { opacity: 0; transition: opacity .15s ease-in; }
+.hide-child:hover .child, .hide-child:focus .child, .hide-child:active .child { opacity: 1; transition: opacity .15s ease-in; }
+.underline-hover:hover, .underline-hover:focus { text-decoration: underline; }
+/* Can combine this with overflow-hidden to make background images grow on hover
+ * even if you are using background-size: cover */
+.grow { -moz-osx-font-smoothing: grayscale; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ( 0 ); transform: translateZ( 0 ); transition: -webkit-transform .25s ease-out; transition: transform .25s ease-out; transition: transform .25s ease-out, -webkit-transform .25s ease-out; }
+.grow:hover, .grow:focus { -webkit-transform: scale( 1.05 ); transform: scale( 1.05 ); }
+.grow:active { -webkit-transform: scale( .90 ); transform: scale( .90 ); }
+.grow-large { -moz-osx-font-smoothing: grayscale; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ( 0 ); transform: translateZ( 0 ); transition: -webkit-transform .25s ease-in-out; transition: transform .25s ease-in-out; transition: transform .25s ease-in-out, -webkit-transform .25s ease-in-out; }
+.grow-large:hover, .grow-large:focus { -webkit-transform: scale( 1.2 ); transform: scale( 1.2 ); }
+.grow-large:active { -webkit-transform: scale( .95 ); transform: scale( .95 ); }
+/* Add pointer on hover */
+.pointer:hover { cursor: pointer; }
+/*
+ Add shadow on hover.
- -10 = literal value 10%
- -20 = literal value 20%
- -25 = literal value 25%
- -30 = literal value 30%
- -33 = literal value 33%
- -34 = literal value 34%
- -40 = literal value 40%
- -50 = literal value 50%
- -60 = literal value 60%
- -70 = literal value 70%
- -75 = literal value 75%
- -80 = literal value 80%
- -90 = literal value 90%
- -100 = literal value 100%
+ Performant box-shadow animation pattern from
+ http://tobiasahlin.com/blog/how-to-animate-box-shadow/
+*/
+.shadow-hover { cursor: pointer; position: relative; transition: all .5s cubic-bezier( .165, .84, .44, 1 ); }
+.shadow-hover::after { content: ''; box-shadow: 0 0 16px 2px rgba( 0, 0, 0, .2 ); border-radius: inherit; opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; transition: opacity .5s cubic-bezier( .165, .84, .44, 1 ); }
+.shadow-hover:hover::after, .shadow-hover:focus::after { opacity: 1; }
+/* Combine with classes in skins and skins-pseudo for
+ * many different transition possibilities. */
+.bg-animate, .bg-animate:hover, .bg-animate:focus { transition: background-color .15s ease-in-out; }
+/*
- -third = 100% / 3 (Not supported in opera mini or IE8)
- -two-thirds = 100% / 1.5 (Not supported in opera mini or IE8)
- -auto = string value auto
+ Z-INDEX
+ Base
+ z = z-index
- Media Query Extensions:
- -s = small
- -m = medium
- -l = large
+ Modifiers
+ -0 = literal value 0
+ -1 = literal value 1
+ -2 = literal value 2
+ -3 = literal value 3
+ -4 = literal value 4
+ -5 = literal value 5
+ -999 = literal value 999
+ -9999 = literal value 9999
+
+ -max = largest accepted z-index value as integer
+
+ -inherit = string value inherit
+ -initial = string value initial
+ -unset = string value unset
+
+ MDN: https://developer.mozilla.org/en/docs/Web/CSS/z-index
+ Spec: http://www.w3.org/TR/CSS2/zindex.html
+ Articles:
+ https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
+
+ Tips on extending:
+ There might be a time worth using negative z-index values.
+ Or if you are using tachyons with another project, you might need to
+ adjust these values to suit your needs.
*/
-/* Width Scale */
-.w0 { width: var( --size-0, 0 ); }
-.w1 { width: var( --size-1, 1rem ); }
-.w2 { width: var( --size-2, 2rem ); }
-.w3 { width: var( --size-3, 3rem ); }
-.w4 { width: var( --size-4, 4rem ); }
-.w5 { width: var( --size-5, 8rem ); }
-.w6 { width: var( --size-6, 16rem ); }
-.w7 { width: var( --size-7, 32rem ); }
-.w8 { width: var( --size-8, 64rem ); }
-.w-10 { width: 10%; }
-.w-20 { width: 20%; }
-.w-25 { width: 25%; }
-.w-50 { width: 50%; }
-.w-75 { width: 75%; }
-.w-100 { width: 100%; }
-.w-third { width: calc( 100% / 3 ); }
-.w-two-thirds { width: calc( 100% / 1.5 ); }
-.w-auto { width: auto; }
-@container (min-width:30em) {
- .w0-s { width: var( --size-0, 0 ); }
- .w1-s { width: var( --size-1, 1rem ); }
- .w2-s { width: var( --size-2, 2rem ); }
- .w3-s { width: var( --size-3, 3rem ); }
- .w4-s { width: var( --size-4, 4rem ); }
- .w5-s { width: var( --size-5, 8rem ); }
- .w6-s { width: var( --size-6, 16rem ); }
- .w7-s { width: var( --size-7, 32rem ); }
- .w8-s { width: var( --size-8, 64rem ); }
- .w-10-s { width: 10%; }
- .w-20-s { width: 20%; }
- .w-25-s { width: 25%; }
- .w-50-s { width: 50%; }
- .w-75-s { width: 75%; }
- .w-100-s { width: 100%; }
- .w-third-s { width: calc( 100% / 3 ); }
- .w-two-thirds-s { width: calc( 100% / 1.5 ); }
- .w-auto-s { width: auto; }
-}
-@container (min-width:48em) {
- .w0-m { width: var( --size-0, 0 ); }
- .w1-m { width: var( --size-1, 1rem ); }
- .w2-m { width: var( --size-2, 2rem ); }
- .w3-m { width: var( --size-3, 3rem ); }
- .w4-m { width: var( --size-4, 4rem ); }
- .w5-m { width: var( --size-5, 8rem ); }
- .w6-m { width: var( --size-6, 16rem ); }
- .w7-m { width: var( --size-7, 32rem ); }
- .w8-m { width: var( --size-8, 64rem ); }
- .w-10-m { width: 10%; }
- .w-20-m { width: 20%; }
- .w-25-m { width: 25%; }
- .w-50-m { width: 50%; }
- .w-75-m { width: 75%; }
- .w-100-m { width: 100%; }
- .w-third-m { width: calc( 100% / 3 ); }
- .w-two-thirds-m { width: calc( 100% / 1.5 ); }
- .w-auto-m { width: auto; }
-}
-@container (min-width:64em) {
- .w0-l { width: var( --size-0, 0 ); }
- .w1-l { width: var( --size-1, 1rem ); }
- .w2-l { width: var( --size-2, 2rem ); }
- .w3-l { width: var( --size-3, 3rem ); }
- .w4-l { width: var( --size-4, 4rem ); }
- .w5-l { width: var( --size-5, 8rem ); }
- .w6-l { width: var( --size-6, 16rem ); }
- .w7-l { width: var( --size-7, 32rem ); }
- .w8-l { width: var( --size-8, 64rem ); }
- .w-10-l { width: 10%; }
- .w-20-l { width: 20%; }
- .w-25-l { width: 25%; }
- .w-50-l { width: 50%; }
- .w-75-l { width: 75%; }
- .w-100-l { width: 100%; }
- .w-third-l { width: calc( 100% / 3 ); }
- .w-two-thirds-l { width: calc( 100% / 1.5 ); }
- .w-auto-l { width: auto; }
-}
+.z-0 { z-index: 0; }
+.z-1 { z-index: 1; }
+.z-2 { z-index: 2; }
+.z-3 { z-index: 3; }
+.z-4 { z-index: 4; }
+.z-5 { z-index: 5; }
+.z-999 { z-index: 999; }
+.z-9999 { z-index: 9999; }
+.z-max { z-index: 2147483647; }
+.z-inherit { z-index: inherit; }
+.z-initial { z-index: initial; }
+.z-unset { z-index: unset; }
/*
- OVERFLOW
-
- Media Query Extensions:
- -s = small
- -m = medium
- -l = large
+ NESTED
+ Tachyons module for styling nested elements
+ that are generated by a cms.
- */
-.overflow-visible { overflow: visible; }
-.overflow-hidden { overflow: hidden; }
-.overflow-scroll { overflow: scroll; }
-.overflow-auto { overflow: auto; }
-.overflow-x-visible { overflow-x: visible; }
-.overflow-x-hidden { overflow-x: hidden; }
-.overflow-x-scroll { overflow-x: scroll; }
-.overflow-x-auto { overflow-x: auto; }
-.overflow-y-visible { overflow-y: visible; }
-.overflow-y-hidden { overflow-y: hidden; }
-.overflow-y-scroll { overflow-y: scroll; }
-.overflow-y-auto { overflow-y: auto; }
-@container (min-width:30em) {
- .overflow-visible-s { overflow: visible; }
- .overflow-hidden-s { overflow: hidden; }
- .overflow-scroll-s { overflow: scroll; }
- .overflow-auto-s { overflow: auto; }
- .overflow-x-visible-s { overflow-x: visible; }
- .overflow-x-hidden-s { overflow-x: hidden; }
- .overflow-x-scroll-s { overflow-x: scroll; }
- .overflow-x-auto-s { overflow-x: auto; }
- .overflow-y-visible-s { overflow-y: visible; }
- .overflow-y-hidden-s { overflow-y: hidden; }
- .overflow-y-scroll-s { overflow-y: scroll; }
- .overflow-y-auto-s { overflow-y: auto; }
-}
-@container (min-width:48em) {
- .overflow-visible-m { overflow: visible; }
- .overflow-hidden-m { overflow: hidden; }
- .overflow-scroll-m { overflow: scroll; }
- .overflow-auto-m { overflow: auto; }
- .overflow-x-visible-m { overflow-x: visible; }
- .overflow-x-hidden-m { overflow-x: hidden; }
- .overflow-x-scroll-m { overflow-x: scroll; }
- .overflow-x-auto-m { overflow-x: auto; }
- .overflow-y-visible-m { overflow-y: visible; }
- .overflow-y-hidden-m { overflow-y: hidden; }
- .overflow-y-scroll-m { overflow-y: scroll; }
- .overflow-y-auto-m { overflow-y: auto; }
-}
-@container (min-width:64em) {
- .overflow-visible-l { overflow: visible; }
- .overflow-hidden-l { overflow: hidden; }
- .overflow-scroll-l { overflow: scroll; }
- .overflow-auto-l { overflow: auto; }
- .overflow-x-visible-l { overflow-x: visible; }
- .overflow-x-hidden-l { overflow-x: hidden; }
- .overflow-x-scroll-l { overflow-x: scroll; }
- .overflow-x-auto-l { overflow-x: auto; }
- .overflow-y-visible-l { overflow-y: visible; }
- .overflow-y-hidden-l { overflow-y: hidden; }
- .overflow-y-scroll-l { overflow-y: scroll; }
- .overflow-y-auto-l { overflow-y: auto; }
-}
+*/
+.nested-copy-line-height p, .nested-copy-line-height ul,
+.nested-copy-line-height ol { line-height: 1.5; }
+.nested-headline-line-height h1, .nested-headline-line-height h2,
+.nested-headline-line-height h3, .nested-headline-line-height h4,
+.nested-headline-line-height h5, .nested-headline-line-height h6 { line-height: 1.25; }
+.nested-list-reset ul, .nested-list-reset ol { padding-left: 0; margin-left: 0; list-style-type: none; }
+.nested-copy-indent p+p { text-indent: 1em; margin-top: 0; margin-bottom: 0; }
+.nested-copy-separator p+p { margin-top: 1.5em; }
+.nested-img img { width: 100%; max-width: 100%; display: block; }
+.nested-links a { color: #357edd; transition: color .15s ease-in; }
+.nested-links a:hover { color: #96ccff; transition: color .15s ease-in; }
+.nested-links a:focus { color: #96ccff; transition: color .15s ease-in; }
/*
- POSITIONING
- Docs: http://tachyons.io/docs/layout/position/
+ STYLES
- Media Query Extensions:
- -s = small
- -m = medium
- -l = large
+ Add custom styles here.
*/
-.static { position: static; }
-.relative { position: relative; }
-.absolute { position: absolute; }
-.fixed { position: fixed; }
-.sticky { position: -webkit-sticky; position: sticky; }
-@container (min-width:30em) {
- .static-s { position: static; }
- .relative-s { position: relative; }
- .absolute-s { position: absolute; }
- .fixed-s { position: fixed; }
- .sticky-s { position: -webkit-sticky; position: sticky; }
-}
-@container (min-width:48em) {
- .static-m { position: static; }
- .relative-m { position: relative; }
- .absolute-m { position: absolute; }
- .fixed-m { position: fixed; }
- .sticky-m { position: -webkit-sticky; position: sticky; }
-}
-@container (min-width:64em) {
- .static-l { position: static; }
- .relative-l { position: relative; }
- .absolute-l { position: absolute; }
- .fixed-l { position: fixed; }
- .sticky-l { position: -webkit-sticky; position: sticky; }
-}
+/* Variables */
+/* Importing here will allow you to override any variables in the modules */
/*
- OPACITY
- Docs: http://tachyons.io/docs/themes/opacity/
+ Tachyons
+ COLOR VARIABLES
+
+ Grayscale
+ - Solids
+ - Transparencies
+ Colors
*/
-.o12 { opacity: var( --opacity-12, 1 ); }
-.o11 { opacity: var( --opacity-11, .9 ); }
-.o10 { opacity: var( --opacity-10, .8 ); }
-.o9 { opacity: var( --opacity-9, .7 ); }
-.o8 { opacity: var( --opacity-8, .6 ); }
-.o7 { opacity: var( --opacity-7, .5 ); }
-.o6 { opacity: var( --opacity-6, .4 ); }
-.o5 { opacity: var( --opacity-5, .3 ); }
-.o4 { opacity: var( --opacity-4, .2 ); }
-.o3 { opacity: var( --opacity-3, .1 ); }
-.o2 { opacity: var( --opacity-2, .05 ); }
-.o1 { opacity: var( --opacity-1, .025 ); }
-.o0 { opacity: var( --opacity-0, 0 ); }
-.h-o12:hover { opacity: var( --opacity-12, 1 ); }
-.h-o11:hover { opacity: var( --opacity-11, .9 ); }
-.h-o10:hover { opacity: var( --opacity-10, .8 ); }
-.h-o9:hover { opacity: var( --opacity-9, .7 ); }
-.h-o8:hover { opacity: var( --opacity-8, .6 ); }
-.h-o7:hover { opacity: var( --opacity-7, .5 ); }
-.h-o6:hover { opacity: var( --opacity-6, .4 ); }
-.h-o5:hover { opacity: var( --opacity-5, .3 ); }
-.h-o4:hover { opacity: var( --opacity-4, .2 ); }
-.h-o3:hover { opacity: var( --opacity-3, .1 ); }
-.h-o2:hover { opacity: var( --opacity-2, .05 ); }
-.h-o1:hover { opacity: var( --opacity-1, .025 ); }
-.h-o0:hover { opacity: var( --opacity-0, 0 ); }
-.f-o12:focus { opacity: var( --opacity-12, 1 ); }
-.f-o11:focus { opacity: var( --opacity-11, .9 ); }
-.f-o10:focus { opacity: var( --opacity-10, .8 ); }
-.f-o9:focus { opacity: var( --opacity-9, .7 ); }
-.f-o8:focus { opacity: var( --opacity-8, .6 ); }
-.f-o7:focus { opacity: var( --opacity-7, .5 ); }
-.f-o6:focus { opacity: var( --opacity-6, .4 ); }
-.f-o5:focus { opacity: var( --opacity-5, .3 ); }
-.f-o4:focus { opacity: var( --opacity-4, .2 ); }
-.f-o3:focus { opacity: var( --opacity-3, .1 ); }
-.f-o2:focus { opacity: var( --opacity-2, .05 ); }
-.f-o1:focus { opacity: var( --opacity-1, .025 ); }
-.f-o0:focus { opacity: var( --opacity-0, 0 ); }
/*
- ROTATIONS
+ CUSTOM MEDIA QUERIES
-*/
-.rotate-45 { -webkit-transform: rotate( 45deg ); transform: rotate( 45deg ); }
-.rotate-90 { -webkit-transform: rotate( 90deg ); transform: rotate( 90deg ); }
-.rotate-135 { -webkit-transform: rotate( 135deg ); transform: rotate( 135deg ); }
-.rotate-180 { -webkit-transform: rotate( 180deg ); transform: rotate( 180deg ); }
-.rotate-225 { -webkit-transform: rotate( 225deg ); transform: rotate( 225deg ); }
-.rotate-270 { -webkit-transform: rotate( 270deg ); transform: rotate( 270deg ); }
-.rotate-315 { -webkit-transform: rotate( 315deg ); transform: rotate( 315deg ); }
-@container (min-width:30em) {
- .rotate-45-s { -webkit-transform: rotate( 45deg ); transform: rotate( 45deg ); }
- .rotate-90-s { -webkit-transform: rotate( 90deg ); transform: rotate( 90deg ); }
- .rotate-135-s { -webkit-transform: rotate( 135deg ); transform: rotate( 135deg ); }
- .rotate-180-s { -webkit-transform: rotate( 180deg ); transform: rotate( 180deg ); }
- .rotate-225-s { -webkit-transform: rotate( 225deg ); transform: rotate( 225deg ); }
- .rotate-270-s { -webkit-transform: rotate( 270deg ); transform: rotate( 270deg ); }
- .rotate-315-s { -webkit-transform: rotate( 315deg ); transform: rotate( 315deg ); }
-}
-@container (min-width:48em) {
- .rotate-45-m { -webkit-transform: rotate( 45deg ); transform: rotate( 45deg ); }
- .rotate-90-m { -webkit-transform: rotate( 90deg ); transform: rotate( 90deg ); }
- .rotate-135-m { -webkit-transform: rotate( 135deg ); transform: rotate( 135deg ); }
- .rotate-180-m { -webkit-transform: rotate( 180deg ); transform: rotate( 180deg ); }
- .rotate-225-m { -webkit-transform: rotate( 225deg ); transform: rotate( 225deg ); }
- .rotate-270-m { -webkit-transform: rotate( 270deg ); transform: rotate( 270deg ); }
- .rotate-315-m { -webkit-transform: rotate( 315deg ); transform: rotate( 315deg ); }
-}
-@container (min-width:64em) {
- .rotate-45-l { -webkit-transform: rotate( 45deg ); transform: rotate( 45deg ); }
- .rotate-90-l { -webkit-transform: rotate( 90deg ); transform: rotate( 90deg ); }
- .rotate-135-l { -webkit-transform: rotate( 135deg ); transform: rotate( 135deg ); }
- .rotate-180-l { -webkit-transform: rotate( 180deg ); transform: rotate( 180deg ); }
- .rotate-225-l { -webkit-transform: rotate( 225deg ); transform: rotate( 225deg ); }
- .rotate-270-l { -webkit-transform: rotate( 270deg ); transform: rotate( 270deg ); }
- .rotate-315-l { -webkit-transform: rotate( 315deg ); transform: rotate( 315deg ); }
-}
-/*
- SKINS
- Docs: http://tachyons.io/docs/themes/skins/
-
- Classes for setting foreground and background colors on elements.
- If you haven't declared a border color, but set border on an element, it will
- be set to the current text color.
-
-*/
-/* Text colors */
-.tint-0 { color: var( --tint-0 ); }
-.tint-1 { color: var( --tint-1 ); }
-.tint-2 { color: var( --tint-2 ); }
-.tint-3 { color: var( --tint-3 ); }
-.tint-4 { color: var( --tint-4 ); }
-.tint-5 { color: var( --tint-5 ); }
-.tint-6 { color: var( --tint-6 ); }
-.tint-7 { color: var( --tint-7 ); }
-.tint-8 { color: var( --tint-8 ); }
-.tint-9 { color: var( --tint-9 ); }
-.tint-10 { color: var( --tint-10 ); }
-.tint-11 { color: var( --tint-11 ); }
-.shadow-0 { color: var( --shadow-0 ); }
-.shadow-1 { color: var( --shadow-1 ); }
-.shadow-2 { color: var( --shadow-2 ); }
-.shadow-3 { color: var( --shadow-3 ); }
-.shadow-4 { color: var( --shadow-4 ); }
-.shadow-5 { color: var( --shadow-5 ); }
-.shadow-6 { color: var( --shadow-6 ); }
-.shadow-7 { color: var( --shadow-7 ); }
-.shadow-8 { color: var( --shadow-8 ); }
-.shadow-9 { color: var( --shadow-9 ); }
-.shadow-10 { color: var( --shadow-10 ); }
-.shadow-11 { color: var( --shadow-11 ); }
-.black, .gray-0 { color: var( --gray-0 ); }
-.gray-1 { color: var( --gray-1 ); }
-.gray-2 { color: var( --gray-2 ); }
-.gray-3 { color: var( --gray-3 ); }
-.gray-4 { color: var( --gray-4 ); }
-.gray-5 { color: var( --gray-5 ); }
-.gray-6 { color: var( --gray-6 ); }
-.gray-7 { color: var( --gray-7 ); }
-.gray-8 { color: var( --gray-8 ); }
-.gray-9 { color: var( --gray-9 ); }
-.gray-10 { color: var( --gray-10 ); }
-.white, .gray-11 { color: var( --gray-11 ); }
-.slate-gray-0 { color: var( --slate-gray-0 ); }
-.slate-gray-1 { color: var( --slate-gray-1 ); }
-.slate-gray-2 { color: var( --slate-gray-2 ); }
-.slate-gray-3 { color: var( --slate-gray-3 ); }
-.slate-gray-4 { color: var( --slate-gray-4 ); }
-.slate-gray-5 { color: var( --slate-gray-5 ); }
-.slate-gray-6 { color: var( --slate-gray-6 ); }
-.slate-gray-7 { color: var( --slate-gray-7 ); }
-.slate-gray-8 { color: var( --slate-gray-8 ); }
-.slate-gray-9 { color: var( --slate-gray-9 ); }
-.slate-gray-10 { color: var( --slate-gray-10 ); }
-.slate-gray-11 { color: var( --slate-gray-11 ); }
-.blue-0 { color: var( --blue-0 ); }
-.blue-1 { color: var( --blue-1 ); }
-.blue-2 { color: var( --blue-2 ); }
-.blue-3 { color: var( --blue-3 ); }
-.blue-4 { color: var( --blue-4 ); }
-.blue-5 { color: var( --blue-5 ); }
-.blue-6 { color: var( --blue-6 ); }
-.blue-7 { color: var( --blue-7 ); }
-.blue-8 { color: var( --blue-8 ); }
-.blue-9 { color: var( --blue-9 ); }
-.blue-10 { color: var( --blue-10 ); }
-.blue-11 { color: var( --blue-11 ); }
-.indigo-0 { color: var( --indigo-0 ); }
-.indigo-1 { color: var( --indigo-1 ); }
-.indigo-2 { color: var( --indigo-2 ); }
-.indigo-3 { color: var( --indigo-3 ); }
-.indigo-4 { color: var( --indigo-4 ); }
-.indigo-5 { color: var( --indigo-5 ); }
-.indigo-6 { color: var( --indigo-6 ); }
-.indigo-7 { color: var( --indigo-7 ); }
-.indigo-8 { color: var( --indigo-8 ); }
-.indigo-9 { color: var( --indigo-9 ); }
-.indigo-10 { color: var( --indigo-10 ); }
-.indigo-11 { color: var( --indigo-11 ); }
-.violet-0 { color: var( --violet-0 ); }
-.violet-1 { color: var( --violet-1 ); }
-.violet-2 { color: var( --violet-2 ); }
-.violet-3 { color: var( --violet-3 ); }
-.violet-4 { color: var( --violet-4 ); }
-.violet-5 { color: var( --violet-5 ); }
-.violet-6 { color: var( --violet-6 ); }
-.violet-7 { color: var( --violet-7 ); }
-.violet-8 { color: var( --violet-8 ); }
-.violet-9 { color: var( --violet-9 ); }
-.violet-10 { color: var( --violet-10 ); }
-.violet-11 { color: var( --violet-11 ); }
-.magenta-0 { color: var( --magenta-0 ); }
-.magenta-1 { color: var( --magenta-1 ); }
-.magenta-2 { color: var( --magenta-2 ); }
-.magenta-3 { color: var( --magenta-3 ); }
-.magenta-4 { color: var( --magenta-4 ); }
-.magenta-5 { color: var( --magenta-5 ); }
-.magenta-6 { color: var( --magenta-6 ); }
-.magenta-7 { color: var( --magenta-7 ); }
-.magenta-8 { color: var( --magenta-8 ); }
-.magenta-9 { color: var( --magenta-9 ); }
-.magenta-10 { color: var( --magenta-10 ); }
-.magenta-11 { color: var( --magenta-11 ); }
-.red-0 { color: var( --red-0 ); }
-.red-1 { color: var( --red-1 ); }
-.red-2 { color: var( --red-2 ); }
-.red-3 { color: var( --red-3 ); }
-.red-4 { color: var( --red-4 ); }
-.red-5 { color: var( --red-5 ); }
-.red-6 { color: var( --red-6 ); }
-.red-7 { color: var( --red-7 ); }
-.red-8 { color: var( --red-8 ); }
-.red-9 { color: var( --red-9 ); }
-.red-10 { color: var( --red-10 ); }
-.red-11 { color: var( --red-11 ); }
-.red-orange-0 { color: var( --red-orange-0 ); }
-.red-orange-1 { color: var( --red-orange-1 ); }
-.red-orange-2 { color: var( --red-orange-2 ); }
-.red-orange-3 { color: var( --red-orange-3 ); }
-.red-orange-4 { color: var( --red-orange-4 ); }
-.red-orange-5 { color: var( --red-orange-5 ); }
-.red-orange-6 { color: var( --red-orange-6 ); }
-.red-orange-7 { color: var( --red-orange-7 ); }
-.red-orange-8 { color: var( --red-orange-8 ); }
-.red-orange-9 { color: var( --red-orange-9 ); }
-.red-orange-10 { color: var( --red-orange-10 ); }
-.red-orange-11 { color: var( --red-orange-11 ); }
-.orange-0 { color: var( --orange-0 ); }
-.orange-1 { color: var( --orange-1 ); }
-.orange-2 { color: var( --orange-2 ); }
-.orange-3 { color: var( --orange-3 ); }
-.orange-4 { color: var( --orange-4 ); }
-.orange-5 { color: var( --orange-5 ); }
-.orange-6 { color: var( --orange-6 ); }
-.orange-7 { color: var( --orange-7 ); }
-.orange-8 { color: var( --orange-8 ); }
-.orange-9 { color: var( --orange-9 ); }
-.orange-10 { color: var( --orange-10 ); }
-.orange-11 { color: var( --orange-11 ); }
-.gold-0 { color: var( --gold-0 ); }
-.gold-1 { color: var( --gold-1 ); }
-.gold-2 { color: var( --gold-2 ); }
-.gold-3 { color: var( --gold-3 ); }
-.gold-4 { color: var( --gold-4 ); }
-.gold-5 { color: var( --gold-5 ); }
-.gold-6 { color: var( --gold-6 ); }
-.gold-7 { color: var( --gold-7 ); }
-.gold-8 { color: var( --gold-8 ); }
-.gold-9 { color: var( --gold-9 ); }
-.gold-10 { color: var( --gold-10 ); }
-.gold-11 { color: var( --gold-11 ); }
-.yellow-0 { color: var( --yellow-0 ); }
-.yellow-1 { color: var( --yellow-1 ); }
-.yellow-2 { color: var( --yellow-2 ); }
-.yellow-3 { color: var( --yellow-3 ); }
-.yellow-4 { color: var( --yellow-4 ); }
-.yellow-5 { color: var( --yellow-5 ); }
-.yellow-6 { color: var( --yellow-6 ); }
-.yellow-7 { color: var( --yellow-7 ); }
-.yellow-8 { color: var( --yellow-8 ); }
-.yellow-9 { color: var( --yellow-9 ); }
-.yellow-10 { color: var( --yellow-10 ); }
-.yellow-11 { color: var( --yellow-11 ); }
-.green-0 { color: var( --green-0 ); }
-.green-1 { color: var( --green-1 ); }
-.green-2 { color: var( --green-2 ); }
-.green-3 { color: var( --green-3 ); }
-.green-4 { color: var( --green-4 ); }
-.green-5 { color: var( --green-5 ); }
-.green-6 { color: var( --green-6 ); }
-.green-7 { color: var( --green-7 ); }
-.green-8 { color: var( --green-8 ); }
-.green-9 { color: var( --green-9 ); }
-.green-10 { color: var( --green-10 ); }
-.green-11 { color: var( --green-11 ); }
-.teal-0 { color: var( --teal-0 ); }
-.teal-1 { color: var( --teal-1 ); }
-.teal-2 { color: var( --teal-2 ); }
-.teal-3 { color: var( --teal-3 ); }
-.teal-4 { color: var( --teal-4 ); }
-.teal-5 { color: var( --teal-5 ); }
-.teal-6 { color: var( --teal-6 ); }
-.teal-7 { color: var( --teal-7 ); }
-.teal-8 { color: var( --teal-8 ); }
-.teal-9 { color: var( --teal-9 ); }
-.teal-10 { color: var( --teal-10 ); }
-.teal-11 { color: var( --teal-11 ); }
-.cyan-0 { color: var( --cyan-0 ); }
-.cyan-1 { color: var( --cyan-1 ); }
-.cyan-2 { color: var( --cyan-2 ); }
-.cyan-3 { color: var( --cyan-3 ); }
-.cyan-4 { color: var( --cyan-4 ); }
-.cyan-5 { color: var( --cyan-5 ); }
-.cyan-6 { color: var( --cyan-6 ); }
-.cyan-7 { color: var( --cyan-7 ); }
-.cyan-8 { color: var( --cyan-8 ); }
-.cyan-9 { color: var( --cyan-9 ); }
-.cyan-10 { color: var( --cyan-10 ); }
-.cyan-11 { color: var( --cyan-11 ); }
-/* Background colors */
-.bg-tint-0 { background-color: var( --tint-0 ); }
-.bg-tint-1 { background-color: var( --tint-1 ); }
-.bg-tint-2 { background-color: var( --tint-2 ); }
-.bg-tint-3 { background-color: var( --tint-3 ); }
-.bg-tint-4 { background-color: var( --tint-4 ); }
-.bg-tint-5 { background-color: var( --tint-5 ); }
-.bg-tint-6 { background-color: var( --tint-6 ); }
-.bg-tint-7 { background-color: var( --tint-7 ); }
-.bg-tint-8 { background-color: var( --tint-8 ); }
-.bg-tint-9 { background-color: var( --tint-9 ); }
-.bg-tint-10 { background-color: var( --tint-10 ); }
-.bg-tint-11 { background-color: var( --tint-11 ); }
-.bg-shadow-0 { background-color: var( --shadow-0 ); }
-.bg-shadow-1 { background-color: var( --shadow-1 ); }
-.bg-shadow-2 { background-color: var( --shadow-2 ); }
-.bg-shadow-3 { background-color: var( --shadow-3 ); }
-.bg-shadow-4 { background-color: var( --shadow-4 ); }
-.bg-shadow-5 { background-color: var( --shadow-5 ); }
-.bg-shadow-6 { background-color: var( --shadow-6 ); }
-.bg-shadow-7 { background-color: var( --shadow-7 ); }
-.bg-shadow-8 { background-color: var( --shadow-8 ); }
-.bg-shadow-9 { background-color: var( --shadow-9 ); }
-.bg-shadow-10 { background-color: var( --shadow-10 ); }
-.bg-shadow-11 { background-color: var( --shadow-11 ); }
-.bg-black, .bg-gray-0 { background-color: var( --gray-0 ); }
-.bg-gray-1 { background-color: var( --gray-1 ); }
-.bg-gray-2 { background-color: var( --gray-2 ); }
-.bg-gray-3 { background-color: var( --gray-3 ); }
-.bg-gray-4 { background-color: var( --gray-4 ); }
-.bg-gray-5 { background-color: var( --gray-5 ); }
-.bg-gray-6 { background-color: var( --gray-6 ); }
-.bg-gray-7 { background-color: var( --gray-7 ); }
-.bg-gray-8 { background-color: var( --gray-8 ); }
-.bg-gray-9 { background-color: var( --gray-9 ); }
-.bg-gray-10 { background-color: var( --gray-10 ); }
-.bg-white, .bg-gray-11 { background-color: var( --gray-11 ); }
-.bg-slate-gray-0 { background-color: var( --slate-gray-0 ); }
-.bg-slate-gray-1 { background-color: var( --slate-gray-1 ); }
-.bg-slate-gray-2 { background-color: var( --slate-gray-2 ); }
-.bg-slate-gray-3 { background-color: var( --slate-gray-3 ); }
-.bg-slate-gray-4 { background-color: var( --slate-gray-4 ); }
-.bg-slate-gray-5 { background-color: var( --slate-gray-5 ); }
-.bg-slate-gray-6 { background-color: var( --slate-gray-6 ); }
-.bg-slate-gray-7 { background-color: var( --slate-gray-7 ); }
-.bg-slate-gray-8 { background-color: var( --slate-gray-8 ); }
-.bg-slate-gray-9 { background-color: var( --slate-gray-9 ); }
-.bg-slate-gray-10 { background-color: var( --slate-gray-10 ); }
-.bg-slate-gray-11 { background-color: var( --slate-gray-11 ); }
-.bg-blue-0 { background-color: var( --blue-0 ); }
-.bg-blue-1 { background-color: var( --blue-1 ); }
-.bg-blue-2 { background-color: var( --blue-2 ); }
-.bg-blue-3 { background-color: var( --blue-3 ); }
-.bg-blue-4 { background-color: var( --blue-4 ); }
-.bg-blue-5 { background-color: var( --blue-5 ); }
-.bg-blue-6 { background-color: var( --blue-6 ); }
-.bg-blue-7 { background-color: var( --blue-7 ); }
-.bg-blue-8 { background-color: var( --blue-8 ); }
-.bg-blue-9 { background-color: var( --blue-9 ); }
-.bg-blue-10 { background-color: var( --blue-10 ); }
-.bg-blue-11 { background-color: var( --blue-11 ); }
-.bg-indigo-0 { background-color: var( --indigo-0 ); }
-.bg-indigo-1 { background-color: var( --indigo-1 ); }
-.bg-indigo-2 { background-color: var( --indigo-2 ); }
-.bg-indigo-3 { background-color: var( --indigo-3 ); }
-.bg-indigo-4 { background-color: var( --indigo-4 ); }
-.bg-indigo-5 { background-color: var( --indigo-5 ); }
-.bg-indigo-6 { background-color: var( --indigo-6 ); }
-.bg-indigo-7 { background-color: var( --indigo-7 ); }
-.bg-indigo-8 { background-color: var( --indigo-8 ); }
-.bg-indigo-9 { background-color: var( --indigo-9 ); }
-.bg-indigo-10 { background-color: var( --indigo-10 ); }
-.bg-indigo-11 { background-color: var( --indigo-11 ); }
-.bg-violet-0 { background-color: var( --violet-0 ); }
-.bg-violet-1 { background-color: var( --violet-1 ); }
-.bg-violet-2 { background-color: var( --violet-2 ); }
-.bg-violet-3 { background-color: var( --violet-3 ); }
-.bg-violet-4 { background-color: var( --violet-4 ); }
-.bg-violet-5 { background-color: var( --violet-5 ); }
-.bg-violet-6 { background-color: var( --violet-6 ); }
-.bg-violet-7 { background-color: var( --violet-7 ); }
-.bg-violet-8 { background-color: var( --violet-8 ); }
-.bg-violet-9 { background-color: var( --violet-9 ); }
-.bg-violet-10 { background-color: var( --violet-10 ); }
-.bg-violet-11 { background-color: var( --violet-11 ); }
-.bg-magenta-0 { background-color: var( --magenta-0 ); }
-.bg-magenta-1 { background-color: var( --magenta-1 ); }
-.bg-magenta-2 { background-color: var( --magenta-2 ); }
-.bg-magenta-3 { background-color: var( --magenta-3 ); }
-.bg-magenta-4 { background-color: var( --magenta-4 ); }
-.bg-magenta-5 { background-color: var( --magenta-5 ); }
-.bg-magenta-6 { background-color: var( --magenta-6 ); }
-.bg-magenta-7 { background-color: var( --magenta-7 ); }
-.bg-magenta-8 { background-color: var( --magenta-8 ); }
-.bg-magenta-9 { background-color: var( --magenta-9 ); }
-.bg-magenta-10 { background-color: var( --magenta-10 ); }
-.bg-magenta-11 { background-color: var( --magenta-11 ); }
-.bg-red-0 { background-color: var( --red-0 ); }
-.bg-red-1 { background-color: var( --red-1 ); }
-.bg-red-2 { background-color: var( --red-2 ); }
-.bg-red-3 { background-color: var( --red-3 ); }
-.bg-red-4 { background-color: var( --red-4 ); }
-.bg-red-5 { background-color: var( --red-5 ); }
-.bg-red-6 { background-color: var( --red-6 ); }
-.bg-red-7 { background-color: var( --red-7 ); }
-.bg-red-8 { background-color: var( --red-8 ); }
-.bg-red-9 { background-color: var( --red-9 ); }
-.bg-red-10 { background-color: var( --red-10 ); }
-.bg-red-11 { background-color: var( --red-11 ); }
-.bg-red-orange-0 { background-color: var( --red-orange-0 ); }
-.bg-red-orange-1 { background-color: var( --red-orange-1 ); }
-.bg-red-orange-2 { background-color: var( --red-orange-2 ); }
-.bg-red-orange-3 { background-color: var( --red-orange-3 ); }
-.bg-red-orange-4 { background-color: var( --red-orange-4 ); }
-.bg-red-orange-5 { background-color: var( --red-orange-5 ); }
-.bg-red-orange-6 { background-color: var( --red-orange-6 ); }
-.bg-red-orange-7 { background-color: var( --red-orange-7 ); }
-.bg-red-orange-8 { background-color: var( --red-orange-8 ); }
-.bg-red-orange-9 { background-color: var( --red-orange-9 ); }
-.bg-red-orange-10 { background-color: var( --red-orange-10 ); }
-.bg-red-orange-11 { background-color: var( --red-orange-11 ); }
-.bg-orange-0 { background-color: var( --orange-0 ); }
-.bg-orange-1 { background-color: var( --orange-1 ); }
-.bg-orange-2 { background-color: var( --orange-2 ); }
-.bg-orange-3 { background-color: var( --orange-3 ); }
-.bg-orange-4 { background-color: var( --orange-4 ); }
-.bg-orange-5 { background-color: var( --orange-5 ); }
-.bg-orange-6 { background-color: var( --orange-6 ); }
-.bg-orange-7 { background-color: var( --orange-7 ); }
-.bg-orange-8 { background-color: var( --orange-8 ); }
-.bg-orange-9 { background-color: var( --orange-9 ); }
-.bg-orange-10 { background-color: var( --orange-10 ); }
-.bg-orange-11 { background-color: var( --orange-11 ); }
-.bg-gold-0 { background-color: var( --gold-0 ); }
-.bg-gold-1 { background-color: var( --gold-1 ); }
-.bg-gold-2 { background-color: var( --gold-2 ); }
-.bg-gold-3 { background-color: var( --gold-3 ); }
-.bg-gold-4 { background-color: var( --gold-4 ); }
-.bg-gold-5 { background-color: var( --gold-5 ); }
-.bg-gold-6 { background-color: var( --gold-6 ); }
-.bg-gold-7 { background-color: var( --gold-7 ); }
-.bg-gold-8 { background-color: var( --gold-8 ); }
-.bg-gold-9 { background-color: var( --gold-9 ); }
-.bg-gold-10 { background-color: var( --gold-10 ); }
-.bg-gold-11 { background-color: var( --gold-11 ); }
-.bg-yellow-0 { background-color: var( --yellow-0 ); }
-.bg-yellow-1 { background-color: var( --yellow-1 ); }
-.bg-yellow-2 { background-color: var( --yellow-2 ); }
-.bg-yellow-3 { background-color: var( --yellow-3 ); }
-.bg-yellow-4 { background-color: var( --yellow-4 ); }
-.bg-yellow-5 { background-color: var( --yellow-5 ); }
-.bg-yellow-6 { background-color: var( --yellow-6 ); }
-.bg-yellow-7 { background-color: var( --yellow-7 ); }
-.bg-yellow-8 { background-color: var( --yellow-8 ); }
-.bg-yellow-9 { background-color: var( --yellow-9 ); }
-.bg-yellow-10 { background-color: var( --yellow-10 ); }
-.bg-yellow-11 { background-color: var( --yellow-11 ); }
-.bg-green-0 { background-color: var( --green-0 ); }
-.bg-green-1 { background-color: var( --green-1 ); }
-.bg-green-2 { background-color: var( --green-2 ); }
-.bg-green-3 { background-color: var( --green-3 ); }
-.bg-green-4 { background-color: var( --green-4 ); }
-.bg-green-5 { background-color: var( --green-5 ); }
-.bg-green-6 { background-color: var( --green-6 ); }
-.bg-green-7 { background-color: var( --green-7 ); }
-.bg-green-8 { background-color: var( --green-8 ); }
-.bg-green-9 { background-color: var( --green-9 ); }
-.bg-green-10 { background-color: var( --green-10 ); }
-.bg-green-11 { background-color: var( --green-11 ); }
-.bg-teal-0 { background-color: var( --teal-0 ); }
-.bg-teal-1 { background-color: var( --teal-1 ); }
-.bg-teal-2 { background-color: var( --teal-2 ); }
-.bg-teal-3 { background-color: var( --teal-3 ); }
-.bg-teal-4 { background-color: var( --teal-4 ); }
-.bg-teal-5 { background-color: var( --teal-5 ); }
-.bg-teal-6 { background-color: var( --teal-6 ); }
-.bg-teal-7 { background-color: var( --teal-7 ); }
-.bg-teal-8 { background-color: var( --teal-8 ); }
-.bg-teal-9 { background-color: var( --teal-9 ); }
-.bg-teal-10 { background-color: var( --teal-10 ); }
-.bg-teal-11 { background-color: var( --teal-11 ); }
-.bg-cyan-0 { background-color: var( --cyan-0 ); }
-.bg-cyan-1 { background-color: var( --cyan-1 ); }
-.bg-cyan-2 { background-color: var( --cyan-2 ); }
-.bg-cyan-3 { background-color: var( --cyan-3 ); }
-.bg-cyan-4 { background-color: var( --cyan-4 ); }
-.bg-cyan-5 { background-color: var( --cyan-5 ); }
-.bg-cyan-6 { background-color: var( --cyan-6 ); }
-.bg-cyan-7 { background-color: var( --cyan-7 ); }
-.bg-cyan-8 { background-color: var( --cyan-8 ); }
-.bg-cyan-9 { background-color: var( --cyan-9 ); }
-.bg-cyan-10 { background-color: var( --cyan-10 ); }
-.bg-cyan-11 { background-color: var( --cyan-11 ); }
-.dark { background-color: black; color: white; }
-.light { background-color: white; color: black; }
-.blue { background-color: var( --blue-5 ); color: var( --gray-11 ); }
-.blue-dark { background-color: var( --blue-3 ); color: var( --blue-9 ); }
-.blue-light { color: var( --blue-3 ); background-color: var( --blue-10 ); }
-.indigo { background-color: var( --indigo-5 ); color: var( --gray-11 ); }
-.indigo-dark { background-color: var( --indigo-3 ); color: var( --indigo-9 ); }
-.indigo-light { color: var( --indigo-3 ); background-color: var( --indigo-10 ); }
-.violet { background-color: var( --violet-5 ); color: var( --gray-11 ); }
-.violet-dark { background-color: var( --violet-3 ); color: var( --violet-9 ); }
-.violet-light { color: var( --violet-3 ); background-color: var( --violet-10 ); }
-.magenta { background-color: var( --magenta-5 ); color: var( --gray-11 ); }
-.magenta-dark { background-color: var( --magenta-3 ); color: var( --magenta-9 ); }
-.magenta-light { color: var( --magenta-3 ); background-color: var( --magenta-10 ); }
-.red { background-color: var( --red-5 ); color: var( --gray-11 ); }
-.red-dark { background-color: var( --red-3 ); color: var( --red-9 ); }
-.red-light { color: var( --red-3 ); background-color: var( --red-10 ); }
-.red-orange { background-color: var( --red-orange-5 ); color: var( --gray-11 ); }
-.red-orange-dark { background-color: var( --red-orange-3 ); color: var( --red-orange-9 ); }
-.red-orange-light { color: var( --red-orange-3 ); background-color: var( --red-orange-10 ); }
-.orange { background-color: var( --orange-5 ); color: var( --gray-11 ); }
-.orange-dark { background-color: var( --orange-3 ); color: var( --orange-9 ); }
-.orange-light { color: var( --orange-3 ); background-color: var( --orange-10 ); }
-.gold { background-color: var( --gold-5 ); color: var( --gray-11 ); }
-.gold-dark { background-color: var( --gold-3 ); color: var( --gold-9 ); }
-.gold-light { color: var( --gold-3 ); background-color: var( --gold-10 ); }
-.yellow { background-color: var( --yellow-5 ); color: var( --gray-11 ); }
-.yellow-dark { background-color: var( --yellow-3 ); color: var( --yellow-9 ); }
-.yellow-light { color: var( --yellow-3 ); background-color: var( --yellow-10 ); }
-.green { background-color: var( --green-5 ); color: var( --gray-11 ); }
-.green-dark { background-color: var( --green-3 ); color: var( --green-9 ); }
-.green-light { color: var( --green-3 ); background-color: var( --green-10 ); }
-.teal { background-color: var( --teal-5 ); color: var( --gray-11 ); }
-.teal-dark { background-color: var( --teal-3 ); color: var( --teal-9 ); }
-.teal-light { color: var( --teal-3 ); background-color: var( --teal-10 ); }
-.cyan { background-color: var( --cyan-5 ); color: var( --gray-11 ); }
-.cyan-dark { background-color: var( --cyan-3 ); color: var( --cyan-9 ); }
-.cyan-light { color: var( --cyan-3 ); background-color: var( --cyan-10 ); }
-/*
-
- SKINS:PSEUDO
-
- Customize the color of an element when
- it is focused or hovered over. This is a larger file. Feel
- free to remove and edit colors that aren't needed.
-
- */
-.hover-overlay-tint-0:hover { color: var( --overlay-tint-0 ); }
-.hover-overlay-tint-1:hover { color: var( --overlay-tint-1 ); }
-.hover-overlay-tint-2:hover { color: var( --overlay-tint-2 ); }
-.hover-overlay-tint-3:hover { color: var( --overlay-tint-3 ); }
-.hover-overlay-tint-4:hover { color: var( --overlay-tint-4 ); }
-.hover-overlay-tint-5:hover { color: var( --overlay-tint-5 ); }
-.hover-overlay-tint-6:hover { color: var( --overlay-tint-6 ); }
-.hover-overlay-tint-7:hover { color: var( --overlay-tint-7 ); }
-.hover-overlay-tint-8:hover { color: var( --overlay-tint-8 ); }
-.hover-overlay-tint-9:hover { color: var( --overlay-tint-9 ); }
-.hover-overlay-tint-10:hover { color: var( --overlay-tint-10 ); }
-.hover-overlay-tint-11:hover { color: var( --overlay-tint-11 ); }
-.hover-overlay-shadow-0:hover { color: var( --overlay-shadow-0 ); }
-.hover-overlay-shadow-1:hover { color: var( --overlay-shadow-1 ); }
-.hover-overlay-shadow-2:hover { color: var( --overlay-shadow-2 ); }
-.hover-overlay-shadow-3:hover { color: var( --overlay-shadow-3 ); }
-.hover-overlay-shadow-4:hover { color: var( --overlay-shadow-4 ); }
-.hover-overlay-shadow-5:hover { color: var( --overlay-shadow-5 ); }
-.hover-overlay-shadow-6:hover { color: var( --overlay-shadow-6 ); }
-.hover-overlay-shadow-7:hover { color: var( --overlay-shadow-7 ); }
-.hover-overlay-shadow-8:hover { color: var( --overlay-shadow-8 ); }
-.hover-overlay-shadow-9:hover { color: var( --overlay-shadow-9 ); }
-.hover-overlay-shadow-10:hover { color: var( --overlay-shadow-10 ); }
-.hover-overlay-shadow-11:hover { color: var( --overlay-shadow-11 ); }
-.hover-gray-0:hover { color: var( --gray-0 ); }
-.hover-gray-1:hover { color: var( --gray-1 ); }
-.hover-gray-2:hover { color: var( --gray-2 ); }
-.hover-gray-3:hover { color: var( --gray-3 ); }
-.hover-gray-4:hover { color: var( --gray-4 ); }
-.hover-gray-5:hover { color: var( --gray-5 ); }
-.hover-gray-6:hover { color: var( --gray-6 ); }
-.hover-gray-7:hover { color: var( --gray-7 ); }
-.hover-gray-8:hover { color: var( --gray-8 ); }
-.hover-gray-9:hover { color: var( --gray-9 ); }
-.hover-gray-10:hover { color: var( --gray-10 ); }
-.hover-gray-11:hover { color: var( --gray-11 ); }
-.hover-slate-gray-0:hover { color: var( --slate-gray-0 ); }
-.hover-slate-gray-1:hover { color: var( --slate-gray-1 ); }
-.hover-slate-gray-2:hover { color: var( --slate-gray-2 ); }
-.hover-slate-gray-3:hover { color: var( --slate-gray-3 ); }
-.hover-slate-gray-4:hover { color: var( --slate-gray-4 ); }
-.hover-slate-gray-5:hover { color: var( --slate-gray-5 ); }
-.hover-slate-gray-6:hover { color: var( --slate-gray-6 ); }
-.hover-slate-gray-7:hover { color: var( --slate-gray-7 ); }
-.hover-slate-gray-8:hover { color: var( --slate-gray-8 ); }
-.hover-slate-gray-9:hover { color: var( --slate-gray-9 ); }
-.hover-slate-gray-10:hover { color: var( --slate-gray-10 ); }
-.hover-slate-gray-11:hover { color: var( --slate-gray-11 ); }
-.hover-blue-0:hover { color: var( --blue-0 ); }
-.hover-blue-1:hover { color: var( --blue-1 ); }
-.hover-blue-2:hover { color: var( --blue-2 ); }
-.hover-blue-3:hover { color: var( --blue-3 ); }
-.hover-blue-4:hover { color: var( --blue-4 ); }
-.hover-blue-5:hover { color: var( --blue-5 ); }
-.hover-blue-6:hover { color: var( --blue-6 ); }
-.hover-blue-7:hover { color: var( --blue-7 ); }
-.hover-blue-8:hover { color: var( --blue-8 ); }
-.hover-blue-9:hover { color: var( --blue-9 ); }
-.hover-blue-10:hover { color: var( --blue-10 ); }
-.hover-blue-11:hover { color: var( --blue-11 ); }
-.hover-indigo-0:hover { color: var( --indigo-0 ); }
-.hover-indigo-1:hover { color: var( --indigo-1 ); }
-.hover-indigo-2:hover { color: var( --indigo-2 ); }
-.hover-indigo-3:hover { color: var( --indigo-3 ); }
-.hover-indigo-4:hover { color: var( --indigo-4 ); }
-.hover-indigo-5:hover { color: var( --indigo-5 ); }
-.hover-indigo-6:hover { color: var( --indigo-6 ); }
-.hover-indigo-7:hover { color: var( --indigo-7 ); }
-.hover-indigo-8:hover { color: var( --indigo-8 ); }
-.hover-indigo-9:hover { color: var( --indigo-9 ); }
-.hover-indigo-10:hover { color: var( --indigo-10 ); }
-.hover-indigo-11:hover { color: var( --indigo-11 ); }
-.hover-violet-0:hover { color: var( --violet-0 ); }
-.hover-violet-1:hover { color: var( --violet-1 ); }
-.hover-violet-2:hover { color: var( --violet-2 ); }
-.hover-violet-3:hover { color: var( --violet-3 ); }
-.hover-violet-4:hover { color: var( --violet-4 ); }
-.hover-violet-5:hover { color: var( --violet-5 ); }
-.hover-violet-6:hover { color: var( --violet-6 ); }
-.hover-violet-7:hover { color: var( --violet-7 ); }
-.hover-violet-8:hover { color: var( --violet-8 ); }
-.hover-violet-9:hover { color: var( --violet-9 ); }
-.hover-violet-10:hover { color: var( --violet-10 ); }
-.hover-violet-11:hover { color: var( --violet-11 ); }
-.hover-magenta-0:hover { color: var( --magenta-0 ); }
-.hover-magenta-1:hover { color: var( --magenta-1 ); }
-.hover-magenta-2:hover { color: var( --magenta-2 ); }
-.hover-magenta-3:hover { color: var( --magenta-3 ); }
-.hover-magenta-4:hover { color: var( --magenta-4 ); }
-.hover-magenta-5:hover { color: var( --magenta-5 ); }
-.hover-magenta-6:hover { color: var( --magenta-6 ); }
-.hover-magenta-7:hover { color: var( --magenta-7 ); }
-.hover-magenta-8:hover { color: var( --magenta-8 ); }
-.hover-magenta-9:hover { color: var( --magenta-9 ); }
-.hover-magenta-10:hover { color: var( --magenta-10 ); }
-.hover-magenta-11:hover { color: var( --magenta-11 ); }
-.hover-red-0:hover { color: var( --red-0 ); }
-.hover-red-1:hover { color: var( --red-1 ); }
-.hover-red-2:hover { color: var( --red-2 ); }
-.hover-red-3:hover { color: var( --red-3 ); }
-.hover-red-4:hover { color: var( --red-4 ); }
-.hover-red-5:hover { color: var( --red-5 ); }
-.hover-red-6:hover { color: var( --red-6 ); }
-.hover-red-7:hover { color: var( --red-7 ); }
-.hover-red-8:hover { color: var( --red-8 ); }
-.hover-red-9:hover { color: var( --red-9 ); }
-.hover-red-10:hover { color: var( --red-10 ); }
-.hover-red-11:hover { color: var( --red-11 ); }
-.hover-red-orange-0:hover { color: var( --red-orange-0 ); }
-.hover-red-orange-1:hover { color: var( --red-orange-1 ); }
-.hover-red-orange-2:hover { color: var( --red-orange-2 ); }
-.hover-red-orange-3:hover { color: var( --red-orange-3 ); }
-.hover-red-orange-4:hover { color: var( --red-orange-4 ); }
-.hover-red-orange-5:hover { color: var( --red-orange-5 ); }
-.hover-red-orange-6:hover { color: var( --red-orange-6 ); }
-.hover-red-orange-7:hover { color: var( --red-orange-7 ); }
-.hover-red-orange-8:hover { color: var( --red-orange-8 ); }
-.hover-red-orange-9:hover { color: var( --red-orange-9 ); }
-.hover-red-orange-10:hover { color: var( --red-orange-10 ); }
-.hover-red-orange-11:hover { color: var( --red-orange-11 ); }
-.hover-orange-0:hover { color: var( --orange-0 ); }
-.hover-orange-1:hover { color: var( --orange-1 ); }
-.hover-orange-2:hover { color: var( --orange-2 ); }
-.hover-orange-3:hover { color: var( --orange-3 ); }
-.hover-orange-4:hover { color: var( --orange-4 ); }
-.hover-orange-5:hover { color: var( --orange-5 ); }
-.hover-orange-6:hover { color: var( --orange-6 ); }
-.hover-orange-7:hover { color: var( --orange-7 ); }
-.hover-orange-8:hover { color: var( --orange-8 ); }
-.hover-orange-9:hover { color: var( --orange-9 ); }
-.hover-orange-10:hover { color: var( --orange-10 ); }
-.hover-orange-11:hover { color: var( --orange-11 ); }
-.hover-gold-0:hover { color: var( --gold-0 ); }
-.hover-gold-1:hover { color: var( --gold-1 ); }
-.hover-gold-2:hover { color: var( --gold-2 ); }
-.hover-gold-3:hover { color: var( --gold-3 ); }
-.hover-gold-4:hover { color: var( --gold-4 ); }
-.hover-gold-5:hover { color: var( --gold-5 ); }
-.hover-gold-6:hover { color: var( --gold-6 ); }
-.hover-gold-7:hover { color: var( --gold-7 ); }
-.hover-gold-8:hover { color: var( --gold-8 ); }
-.hover-gold-9:hover { color: var( --gold-9 ); }
-.hover-gold-10:hover { color: var( --gold-10 ); }
-.hover-gold-11:hover { color: var( --gold-11 ); }
-.hover-yellow-0:hover { color: var( --yellow-0 ); }
-.hover-yellow-1:hover { color: var( --yellow-1 ); }
-.hover-yellow-2:hover { color: var( --yellow-2 ); }
-.hover-yellow-3:hover { color: var( --yellow-3 ); }
-.hover-yellow-4:hover { color: var( --yellow-4 ); }
-.hover-yellow-5:hover { color: var( --yellow-5 ); }
-.hover-yellow-6:hover { color: var( --yellow-6 ); }
-.hover-yellow-7:hover { color: var( --yellow-7 ); }
-.hover-yellow-8:hover { color: var( --yellow-8 ); }
-.hover-yellow-9:hover { color: var( --yellow-9 ); }
-.hover-yellow-10:hover { color: var( --yellow-10 ); }
-.hover-yellow-11:hover { color: var( --yellow-11 ); }
-.hover-green-0:hover { color: var( --green-0 ); }
-.hover-green-1:hover { color: var( --green-1 ); }
-.hover-green-2:hover { color: var( --green-2 ); }
-.hover-green-3:hover { color: var( --green-3 ); }
-.hover-green-4:hover { color: var( --green-4 ); }
-.hover-green-5:hover { color: var( --green-5 ); }
-.hover-green-6:hover { color: var( --green-6 ); }
-.hover-green-7:hover { color: var( --green-7 ); }
-.hover-green-8:hover { color: var( --green-8 ); }
-.hover-green-9:hover { color: var( --green-9 ); }
-.hover-green-10:hover { color: var( --green-10 ); }
-.hover-green-11:hover { color: var( --green-11 ); }
-.hover-teal-0:hover { color: var( --teal-0 ); }
-.hover-teal-1:hover { color: var( --teal-1 ); }
-.hover-teal-2:hover { color: var( --teal-2 ); }
-.hover-teal-3:hover { color: var( --teal-3 ); }
-.hover-teal-4:hover { color: var( --teal-4 ); }
-.hover-teal-5:hover { color: var( --teal-5 ); }
-.hover-teal-6:hover { color: var( --teal-6 ); }
-.hover-teal-7:hover { color: var( --teal-7 ); }
-.hover-teal-8:hover { color: var( --teal-8 ); }
-.hover-teal-9:hover { color: var( --teal-9 ); }
-.hover-teal-10:hover { color: var( --teal-10 ); }
-.hover-teal-11:hover { color: var( --teal-11 ); }
-.hover-cyan-0:hover { color: var( --cyan-0 ); }
-.hover-cyan-1:hover { color: var( --cyan-1 ); }
-.hover-cyan-2:hover { color: var( --cyan-2 ); }
-.hover-cyan-3:hover { color: var( --cyan-3 ); }
-.hover-cyan-4:hover { color: var( --cyan-4 ); }
-.hover-cyan-5:hover { color: var( --cyan-5 ); }
-.hover-cyan-6:hover { color: var( --cyan-6 ); }
-.hover-cyan-7:hover { color: var( --cyan-7 ); }
-.hover-cyan-8:hover { color: var( --cyan-8 ); }
-.hover-cyan-9:hover { color: var( --cyan-9 ); }
-.hover-cyan-10:hover { color: var( --cyan-10 ); }
-.hover-cyan-11:hover { color: var( --cyan-11 ); }
-/* Background colors */
-.hover-bg-overlay-tint-0:hover { background-color: var( --overlay-tint-0 ); }
-.hover-bg-overlay-tint-1:hover { background-color: var( --overlay-tint-1 ); }
-.hover-bg-overlay-tint-2:hover { background-color: var( --overlay-tint-2 ); }
-.hover-bg-overlay-tint-3:hover { background-color: var( --overlay-tint-3 ); }
-.hover-bg-overlay-tint-4:hover { background-color: var( --overlay-tint-4 ); }
-.hover-bg-overlay-tint-5:hover { background-color: var( --overlay-tint-5 ); }
-.hover-bg-overlay-tint-6:hover { background-color: var( --overlay-tint-6 ); }
-.hover-bg-overlay-tint-7:hover { background-color: var( --overlay-tint-7 ); }
-.hover-bg-overlay-tint-8:hover { background-color: var( --overlay-tint-8 ); }
-.hover-bg-overlay-tint-9:hover { background-color: var( --overlay-tint-9 ); }
-.hover-bg-overlay-tint-10:hover { background-color: var( --overlay-tint-10 ); }
-.hover-bg-overlay-tint-11:hover { background-color: var( --overlay-tint-11 ); }
-.hover-bg-overlay-shadow-0:hover { background-color: var( --overlay-shadow-0 ); }
-.hover-bg-overlay-shadow-1:hover { background-color: var( --overlay-shadow-1 ); }
-.hover-bg-overlay-shadow-2:hover { background-color: var( --overlay-shadow-2 ); }
-.hover-bg-overlay-shadow-3:hover { background-color: var( --overlay-shadow-3 ); }
-.hover-bg-overlay-shadow-4:hover { background-color: var( --overlay-shadow-4 ); }
-.hover-bg-overlay-shadow-5:hover { background-color: var( --overlay-shadow-5 ); }
-.hover-bg-overlay-shadow-6:hover { background-color: var( --overlay-shadow-6 ); }
-.hover-bg-overlay-shadow-7:hover { background-color: var( --overlay-shadow-7 ); }
-.hover-bg-overlay-shadow-8:hover { background-color: var( --overlay-shadow-8 ); }
-.hover-bg-overlay-shadow-9:hover { background-color: var( --overlay-shadow-9 ); }
-.hover-bg-overlay-shadow-10:hover { background-color: var( --overlay-shadow-10 ); }
-.hover-bg-overlay-shadow-11:hover { background-color: var( --overlay-shadow-11 ); }
-.hover-bg-gray-0:hover { background-color: var( --gray-0 ); }
-.hover-bg-gray-1:hover { background-color: var( --gray-1 ); }
-.hover-bg-gray-2:hover { background-color: var( --gray-2 ); }
-.hover-bg-gray-3:hover { background-color: var( --gray-3 ); }
-.hover-bg-gray-4:hover { background-color: var( --gray-4 ); }
-.hover-bg-gray-5:hover { background-color: var( --gray-5 ); }
-.hover-bg-gray-6:hover { background-color: var( --gray-6 ); }
-.hover-bg-gray-7:hover { background-color: var( --gray-7 ); }
-.hover-bg-gray-8:hover { background-color: var( --gray-8 ); }
-.hover-bg-gray-9:hover { background-color: var( --gray-9 ); }
-.hover-bg-gray-10:hover { background-color: var( --gray-10 ); }
-.hover-bg-gray-11:hover { background-color: var( --gray-11 ); }
-.hover-bg-slate-gray-0:hover { background-color: var( --slate-gray-0 ); }
-.hover-bg-slate-gray-1:hover { background-color: var( --slate-gray-1 ); }
-.hover-bg-slate-gray-2:hover { background-color: var( --slate-gray-2 ); }
-.hover-bg-slate-gray-3:hover { background-color: var( --slate-gray-3 ); }
-.hover-bg-slate-gray-4:hover { background-color: var( --slate-gray-4 ); }
-.hover-bg-slate-gray-5:hover { background-color: var( --slate-gray-5 ); }
-.hover-bg-slate-gray-6:hover { background-color: var( --slate-gray-6 ); }
-.hover-bg-slate-gray-7:hover { background-color: var( --slate-gray-7 ); }
-.hover-bg-slate-gray-8:hover { background-color: var( --slate-gray-8 ); }
-.hover-bg-slate-gray-9:hover { background-color: var( --slate-gray-9 ); }
-.hover-bg-slate-gray-10:hover { background-color: var( --slate-gray-10 ); }
-.hover-bg-slate-gray-11:hover { background-color: var( --slate-gray-11 ); }
-.hover-bg-blue-0:hover { background-color: var( --blue-0 ); }
-.hover-bg-blue-1:hover { background-color: var( --blue-1 ); }
-.hover-bg-blue-2:hover { background-color: var( --blue-2 ); }
-.hover-bg-blue-3:hover { background-color: var( --blue-3 ); }
-.hover-bg-blue-4:hover { background-color: var( --blue-4 ); }
-.hover-bg-blue-5:hover { background-color: var( --blue-5 ); }
-.hover-bg-blue-6:hover { background-color: var( --blue-6 ); }
-.hover-bg-blue-7:hover { background-color: var( --blue-7 ); }
-.hover-bg-blue-8:hover { background-color: var( --blue-8 ); }
-.hover-bg-blue-9:hover { background-color: var( --blue-9 ); }
-.hover-bg-blue-10:hover { background-color: var( --blue-10 ); }
-.hover-bg-blue-11:hover { background-color: var( --blue-11 ); }
-.hover-bg-indigo-0:hover { background-color: var( --indigo-0 ); }
-.hover-bg-indigo-1:hover { background-color: var( --indigo-1 ); }
-.hover-bg-indigo-2:hover { background-color: var( --indigo-2 ); }
-.hover-bg-indigo-3:hover { background-color: var( --indigo-3 ); }
-.hover-bg-indigo-4:hover { background-color: var( --indigo-4 ); }
-.hover-bg-indigo-5:hover { background-color: var( --indigo-5 ); }
-.hover-bg-indigo-6:hover { background-color: var( --indigo-6 ); }
-.hover-bg-indigo-7:hover { background-color: var( --indigo-7 ); }
-.hover-bg-indigo-8:hover { background-color: var( --indigo-8 ); }
-.hover-bg-indigo-9:hover { background-color: var( --indigo-9 ); }
-.hover-bg-indigo-10:hover { background-color: var( --indigo-10 ); }
-.hover-bg-indigo-11:hover { background-color: var( --indigo-11 ); }
-.hover-bg-violet-0:hover { background-color: var( --violet-0 ); }
-.hover-bg-violet-1:hover { background-color: var( --violet-1 ); }
-.hover-bg-violet-2:hover { background-color: var( --violet-2 ); }
-.hover-bg-violet-3:hover { background-color: var( --violet-3 ); }
-.hover-bg-violet-4:hover { background-color: var( --violet-4 ); }
-.hover-bg-violet-5:hover { background-color: var( --violet-5 ); }
-.hover-bg-violet-6:hover { background-color: var( --violet-6 ); }
-.hover-bg-violet-7:hover { background-color: var( --violet-7 ); }
-.hover-bg-violet-8:hover { background-color: var( --violet-8 ); }
-.hover-bg-violet-9:hover { background-color: var( --violet-9 ); }
-.hover-bg-violet-10:hover { background-color: var( --violet-10 ); }
-.hover-bg-violet-11:hover { background-color: var( --violet-11 ); }
-.hover-bg-magenta-0:hover { background-color: var( --magenta-0 ); }
-.hover-bg-magenta-1:hover { background-color: var( --magenta-1 ); }
-.hover-bg-magenta-2:hover { background-color: var( --magenta-2 ); }
-.hover-bg-magenta-3:hover { background-color: var( --magenta-3 ); }
-.hover-bg-magenta-4:hover { background-color: var( --magenta-4 ); }
-.hover-bg-magenta-5:hover { background-color: var( --magenta-5 ); }
-.hover-bg-magenta-6:hover { background-color: var( --magenta-6 ); }
-.hover-bg-magenta-7:hover { background-color: var( --magenta-7 ); }
-.hover-bg-magenta-8:hover { background-color: var( --magenta-8 ); }
-.hover-bg-magenta-9:hover { background-color: var( --magenta-9 ); }
-.hover-bg-magenta-10:hover { background-color: var( --magenta-10 ); }
-.hover-bg-magenta-11:hover { background-color: var( --magenta-11 ); }
-.hover-bg-red-0:hover { background-color: var( --red-0 ); }
-.hover-bg-red-1:hover { background-color: var( --red-1 ); }
-.hover-bg-red-2:hover { background-color: var( --red-2 ); }
-.hover-bg-red-3:hover { background-color: var( --red-3 ); }
-.hover-bg-red-4:hover { background-color: var( --red-4 ); }
-.hover-bg-red-5:hover { background-color: var( --red-5 ); }
-.hover-bg-red-6:hover { background-color: var( --red-6 ); }
-.hover-bg-red-7:hover { background-color: var( --red-7 ); }
-.hover-bg-red-8:hover { background-color: var( --red-8 ); }
-.hover-bg-red-9:hover { background-color: var( --red-9 ); }
-.hover-bg-red-10:hover { background-color: var( --red-10 ); }
-.hover-bg-red-11:hover { background-color: var( --red-11 ); }
-.hover-bg-red-orange-0:hover { background-color: var( --red-orange-0 ); }
-.hover-bg-red-orange-1:hover { background-color: var( --red-orange-1 ); }
-.hover-bg-red-orange-2:hover { background-color: var( --red-orange-2 ); }
-.hover-bg-red-orange-3:hover { background-color: var( --red-orange-3 ); }
-.hover-bg-red-orange-4:hover { background-color: var( --red-orange-4 ); }
-.hover-bg-red-orange-5:hover { background-color: var( --red-orange-5 ); }
-.hover-bg-red-orange-6:hover { background-color: var( --red-orange-6 ); }
-.hover-bg-red-orange-7:hover { background-color: var( --red-orange-7 ); }
-.hover-bg-red-orange-8:hover { background-color: var( --red-orange-8 ); }
-.hover-bg-red-orange-9:hover { background-color: var( --red-orange-9 ); }
-.hover-bg-red-orange-10:hover { background-color: var( --red-orange-10 ); }
-.hover-bg-red-orange-11:hover { background-color: var( --red-orange-11 ); }
-.hover-bg-orange-0:hover { background-color: var( --orange-0 ); }
-.hover-bg-orange-1:hover { background-color: var( --orange-1 ); }
-.hover-bg-orange-2:hover { background-color: var( --orange-2 ); }
-.hover-bg-orange-3:hover { background-color: var( --orange-3 ); }
-.hover-bg-orange-4:hover { background-color: var( --orange-4 ); }
-.hover-bg-orange-5:hover { background-color: var( --orange-5 ); }
-.hover-bg-orange-6:hover { background-color: var( --orange-6 ); }
-.hover-bg-orange-7:hover { background-color: var( --orange-7 ); }
-.hover-bg-orange-8:hover { background-color: var( --orange-8 ); }
-.hover-bg-orange-9:hover { background-color: var( --orange-9 ); }
-.hover-bg-orange-10:hover { background-color: var( --orange-10 ); }
-.hover-bg-orange-11:hover { background-color: var( --orange-11 ); }
-.hover-bg-gold-0:hover { background-color: var( --gold-0 ); }
-.hover-bg-gold-1:hover { background-color: var( --gold-1 ); }
-.hover-bg-gold-2:hover { background-color: var( --gold-2 ); }
-.hover-bg-gold-3:hover { background-color: var( --gold-3 ); }
-.hover-bg-gold-4:hover { background-color: var( --gold-4 ); }
-.hover-bg-gold-5:hover { background-color: var( --gold-5 ); }
-.hover-bg-gold-6:hover { background-color: var( --gold-6 ); }
-.hover-bg-gold-7:hover { background-color: var( --gold-7 ); }
-.hover-bg-gold-8:hover { background-color: var( --gold-8 ); }
-.hover-bg-gold-9:hover { background-color: var( --gold-9 ); }
-.hover-bg-gold-10:hover { background-color: var( --gold-10 ); }
-.hover-bg-gold-11:hover { background-color: var( --gold-11 ); }
-.hover-bg-yellow-0:hover { background-color: var( --yellow-0 ); }
-.hover-bg-yellow-1:hover { background-color: var( --yellow-1 ); }
-.hover-bg-yellow-2:hover { background-color: var( --yellow-2 ); }
-.hover-bg-yellow-3:hover { background-color: var( --yellow-3 ); }
-.hover-bg-yellow-4:hover { background-color: var( --yellow-4 ); }
-.hover-bg-yellow-5:hover { background-color: var( --yellow-5 ); }
-.hover-bg-yellow-6:hover { background-color: var( --yellow-6 ); }
-.hover-bg-yellow-7:hover { background-color: var( --yellow-7 ); }
-.hover-bg-yellow-8:hover { background-color: var( --yellow-8 ); }
-.hover-bg-yellow-9:hover { background-color: var( --yellow-9 ); }
-.hover-bg-yellow-10:hover { background-color: var( --yellow-10 ); }
-.hover-bg-yellow-11:hover { background-color: var( --yellow-11 ); }
-.hover-bg-green-0:hover { background-color: var( --green-0 ); }
-.hover-bg-green-1:hover { background-color: var( --green-1 ); }
-.hover-bg-green-2:hover { background-color: var( --green-2 ); }
-.hover-bg-green-3:hover { background-color: var( --green-3 ); }
-.hover-bg-green-4:hover { background-color: var( --green-4 ); }
-.hover-bg-green-5:hover { background-color: var( --green-5 ); }
-.hover-bg-green-6:hover { background-color: var( --green-6 ); }
-.hover-bg-green-7:hover { background-color: var( --green-7 ); }
-.hover-bg-green-8:hover { background-color: var( --green-8 ); }
-.hover-bg-green-9:hover { background-color: var( --green-9 ); }
-.hover-bg-green-10:hover { background-color: var( --green-10 ); }
-.hover-bg-green-11:hover { background-color: var( --green-11 ); }
-.hover-bg-teal-0:hover { background-color: var( --teal-0 ); }
-.hover-bg-teal-1:hover { background-color: var( --teal-1 ); }
-.hover-bg-teal-2:hover { background-color: var( --teal-2 ); }
-.hover-bg-teal-3:hover { background-color: var( --teal-3 ); }
-.hover-bg-teal-4:hover { background-color: var( --teal-4 ); }
-.hover-bg-teal-5:hover { background-color: var( --teal-5 ); }
-.hover-bg-teal-6:hover { background-color: var( --teal-6 ); }
-.hover-bg-teal-7:hover { background-color: var( --teal-7 ); }
-.hover-bg-teal-8:hover { background-color: var( --teal-8 ); }
-.hover-bg-teal-9:hover { background-color: var( --teal-9 ); }
-.hover-bg-teal-10:hover { background-color: var( --teal-10 ); }
-.hover-bg-teal-11:hover { background-color: var( --teal-11 ); }
-.hover-bg-cyan-0:hover { background-color: var( --cyan-0 ); }
-.hover-bg-cyan-1:hover { background-color: var( --cyan-1 ); }
-.hover-bg-cyan-2:hover { background-color: var( --cyan-2 ); }
-.hover-bg-cyan-3:hover { background-color: var( --cyan-3 ); }
-.hover-bg-cyan-4:hover { background-color: var( --cyan-4 ); }
-.hover-bg-cyan-5:hover { background-color: var( --cyan-5 ); }
-.hover-bg-cyan-6:hover { background-color: var( --cyan-6 ); }
-.hover-bg-cyan-7:hover { background-color: var( --cyan-7 ); }
-.hover-bg-cyan-8:hover { background-color: var( --cyan-8 ); }
-.hover-bg-cyan-9:hover { background-color: var( --cyan-9 ); }
-.hover-bg-cyan-10:hover { background-color: var( --cyan-10 ); }
-.hover-bg-cyan-11:hover { background-color: var( --cyan-11 ); }
-.focus-overlay-tint-0:focus { color: var( --overlay-tint-0 ); }
-.focus-overlay-tint-1:focus { color: var( --overlay-tint-1 ); }
-.focus-overlay-tint-2:focus { color: var( --overlay-tint-2 ); }
-.focus-overlay-tint-3:focus { color: var( --overlay-tint-3 ); }
-.focus-overlay-tint-4:focus { color: var( --overlay-tint-4 ); }
-.focus-overlay-tint-5:focus { color: var( --overlay-tint-5 ); }
-.focus-overlay-tint-6:focus { color: var( --overlay-tint-6 ); }
-.focus-overlay-tint-7:focus { color: var( --overlay-tint-7 ); }
-.focus-overlay-tint-8:focus { color: var( --overlay-tint-8 ); }
-.focus-overlay-tint-9:focus { color: var( --overlay-tint-9 ); }
-.focus-overlay-tint-10:focus { color: var( --overlay-tint-10 ); }
-.focus-overlay-tint-11:focus { color: var( --overlay-tint-11 ); }
-.focus-overlay-shadow-0:focus { color: var( --overlay-shadow-0 ); }
-.focus-overlay-shadow-1:focus { color: var( --overlay-shadow-1 ); }
-.focus-overlay-shadow-2:focus { color: var( --overlay-shadow-2 ); }
-.focus-overlay-shadow-3:focus { color: var( --overlay-shadow-3 ); }
-.focus-overlay-shadow-4:focus { color: var( --overlay-shadow-4 ); }
-.focus-overlay-shadow-5:focus { color: var( --overlay-shadow-5 ); }
-.focus-overlay-shadow-6:focus { color: var( --overlay-shadow-6 ); }
-.focus-overlay-shadow-7:focus { color: var( --overlay-shadow-7 ); }
-.focus-overlay-shadow-8:focus { color: var( --overlay-shadow-8 ); }
-.focus-overlay-shadow-9:focus { color: var( --overlay-shadow-9 ); }
-.focus-overlay-shadow-10:focus { color: var( --overlay-shadow-10 ); }
-.focus-overlay-shadow-11:focus { color: var( --overlay-shadow-11 ); }
-.focus-gray-0:focus { color: var( --gray-0 ); }
-.focus-gray-1:focus { color: var( --gray-1 ); }
-.focus-gray-2:focus { color: var( --gray-2 ); }
-.focus-gray-3:focus { color: var( --gray-3 ); }
-.focus-gray-4:focus { color: var( --gray-4 ); }
-.focus-gray-5:focus { color: var( --gray-5 ); }
-.focus-gray-6:focus { color: var( --gray-6 ); }
-.focus-gray-7:focus { color: var( --gray-7 ); }
-.focus-gray-8:focus { color: var( --gray-8 ); }
-.focus-gray-9:focus { color: var( --gray-9 ); }
-.focus-gray-10:focus { color: var( --gray-10 ); }
-.focus-gray-11:focus { color: var( --gray-11 ); }
-.focus-slate-gray-0:focus { color: var( --slate-gray-0 ); }
-.focus-slate-gray-1:focus { color: var( --slate-gray-1 ); }
-.focus-slate-gray-2:focus { color: var( --slate-gray-2 ); }
-.focus-slate-gray-3:focus { color: var( --slate-gray-3 ); }
-.focus-slate-gray-4:focus { color: var( --slate-gray-4 ); }
-.focus-slate-gray-5:focus { color: var( --slate-gray-5 ); }
-.focus-slate-gray-6:focus { color: var( --slate-gray-6 ); }
-.focus-slate-gray-7:focus { color: var( --slate-gray-7 ); }
-.focus-slate-gray-8:focus { color: var( --slate-gray-8 ); }
-.focus-slate-gray-9:focus { color: var( --slate-gray-9 ); }
-.focus-slate-gray-10:focus { color: var( --slate-gray-10 ); }
-.focus-slate-gray-11:focus { color: var( --slate-gray-11 ); }
-.focus-blue-0:focus { color: var( --blue-0 ); }
-.focus-blue-1:focus { color: var( --blue-1 ); }
-.focus-blue-2:focus { color: var( --blue-2 ); }
-.focus-blue-3:focus { color: var( --blue-3 ); }
-.focus-blue-4:focus { color: var( --blue-4 ); }
-.focus-blue-5:focus { color: var( --blue-5 ); }
-.focus-blue-6:focus { color: var( --blue-6 ); }
-.focus-blue-7:focus { color: var( --blue-7 ); }
-.focus-blue-8:focus { color: var( --blue-8 ); }
-.focus-blue-9:focus { color: var( --blue-9 ); }
-.focus-blue-10:focus { color: var( --blue-10 ); }
-.focus-blue-11:focus { color: var( --blue-11 ); }
-.focus-indigo-0:focus { color: var( --indigo-0 ); }
-.focus-indigo-1:focus { color: var( --indigo-1 ); }
-.focus-indigo-2:focus { color: var( --indigo-2 ); }
-.focus-indigo-3:focus { color: var( --indigo-3 ); }
-.focus-indigo-4:focus { color: var( --indigo-4 ); }
-.focus-indigo-5:focus { color: var( --indigo-5 ); }
-.focus-indigo-6:focus { color: var( --indigo-6 ); }
-.focus-indigo-7:focus { color: var( --indigo-7 ); }
-.focus-indigo-8:focus { color: var( --indigo-8 ); }
-.focus-indigo-9:focus { color: var( --indigo-9 ); }
-.focus-indigo-10:focus { color: var( --indigo-10 ); }
-.focus-indigo-11:focus { color: var( --indigo-11 ); }
-.focus-violet-0:focus { color: var( --violet-0 ); }
-.focus-violet-1:focus { color: var( --violet-1 ); }
-.focus-violet-2:focus { color: var( --violet-2 ); }
-.focus-violet-3:focus { color: var( --violet-3 ); }
-.focus-violet-4:focus { color: var( --violet-4 ); }
-.focus-violet-5:focus { color: var( --violet-5 ); }
-.focus-violet-6:focus { color: var( --violet-6 ); }
-.focus-violet-7:focus { color: var( --violet-7 ); }
-.focus-violet-8:focus { color: var( --violet-8 ); }
-.focus-violet-9:focus { color: var( --violet-9 ); }
-.focus-violet-10:focus { color: var( --violet-10 ); }
-.focus-violet-11:focus { color: var( --violet-11 ); }
-.focus-magenta-0:focus { color: var( --magenta-0 ); }
-.focus-magenta-1:focus { color: var( --magenta-1 ); }
-.focus-magenta-2:focus { color: var( --magenta-2 ); }
-.focus-magenta-3:focus { color: var( --magenta-3 ); }
-.focus-magenta-4:focus { color: var( --magenta-4 ); }
-.focus-magenta-5:focus { color: var( --magenta-5 ); }
-.focus-magenta-6:focus { color: var( --magenta-6 ); }
-.focus-magenta-7:focus { color: var( --magenta-7 ); }
-.focus-magenta-8:focus { color: var( --magenta-8 ); }
-.focus-magenta-9:focus { color: var( --magenta-9 ); }
-.focus-magenta-10:focus { color: var( --magenta-10 ); }
-.focus-magenta-11:focus { color: var( --magenta-11 ); }
-.focus-red-0:focus { color: var( --red-0 ); }
-.focus-red-1:focus { color: var( --red-1 ); }
-.focus-red-2:focus { color: var( --red-2 ); }
-.focus-red-3:focus { color: var( --red-3 ); }
-.focus-red-4:focus { color: var( --red-4 ); }
-.focus-red-5:focus { color: var( --red-5 ); }
-.focus-red-6:focus { color: var( --red-6 ); }
-.focus-red-7:focus { color: var( --red-7 ); }
-.focus-red-8:focus { color: var( --red-8 ); }
-.focus-red-9:focus { color: var( --red-9 ); }
-.focus-red-10:focus { color: var( --red-10 ); }
-.focus-red-11:focus { color: var( --red-11 ); }
-.focus-red-orange-0:focus { color: var( --red-orange-0 ); }
-.focus-red-orange-1:focus { color: var( --red-orange-1 ); }
-.focus-red-orange-2:focus { color: var( --red-orange-2 ); }
-.focus-red-orange-3:focus { color: var( --red-orange-3 ); }
-.focus-red-orange-4:focus { color: var( --red-orange-4 ); }
-.focus-red-orange-5:focus { color: var( --red-orange-5 ); }
-.focus-red-orange-6:focus { color: var( --red-orange-6 ); }
-.focus-red-orange-7:focus { color: var( --red-orange-7 ); }
-.focus-red-orange-8:focus { color: var( --red-orange-8 ); }
-.focus-red-orange-9:focus { color: var( --red-orange-9 ); }
-.focus-red-orange-10:focus { color: var( --red-orange-10 ); }
-.focus-red-orange-11:focus { color: var( --red-orange-11 ); }
-.focus-orange-0:focus { color: var( --orange-0 ); }
-.focus-orange-1:focus { color: var( --orange-1 ); }
-.focus-orange-2:focus { color: var( --orange-2 ); }
-.focus-orange-3:focus { color: var( --orange-3 ); }
-.focus-orange-4:focus { color: var( --orange-4 ); }
-.focus-orange-5:focus { color: var( --orange-5 ); }
-.focus-orange-6:focus { color: var( --orange-6 ); }
-.focus-orange-7:focus { color: var( --orange-7 ); }
-.focus-orange-8:focus { color: var( --orange-8 ); }
-.focus-orange-9:focus { color: var( --orange-9 ); }
-.focus-orange-10:focus { color: var( --orange-10 ); }
-.focus-orange-11:focus { color: var( --orange-11 ); }
-.focus-gold-0:focus { color: var( --gold-0 ); }
-.focus-gold-1:focus { color: var( --gold-1 ); }
-.focus-gold-2:focus { color: var( --gold-2 ); }
-.focus-gold-3:focus { color: var( --gold-3 ); }
-.focus-gold-4:focus { color: var( --gold-4 ); }
-.focus-gold-5:focus { color: var( --gold-5 ); }
-.focus-gold-6:focus { color: var( --gold-6 ); }
-.focus-gold-7:focus { color: var( --gold-7 ); }
-.focus-gold-8:focus { color: var( --gold-8 ); }
-.focus-gold-9:focus { color: var( --gold-9 ); }
-.focus-gold-10:focus { color: var( --gold-10 ); }
-.focus-gold-11:focus { color: var( --gold-11 ); }
-.focus-yellow-0:focus { color: var( --yellow-0 ); }
-.focus-yellow-1:focus { color: var( --yellow-1 ); }
-.focus-yellow-2:focus { color: var( --yellow-2 ); }
-.focus-yellow-3:focus { color: var( --yellow-3 ); }
-.focus-yellow-4:focus { color: var( --yellow-4 ); }
-.focus-yellow-5:focus { color: var( --yellow-5 ); }
-.focus-yellow-6:focus { color: var( --yellow-6 ); }
-.focus-yellow-7:focus { color: var( --yellow-7 ); }
-.focus-yellow-8:focus { color: var( --yellow-8 ); }
-.focus-yellow-9:focus { color: var( --yellow-9 ); }
-.focus-yellow-10:focus { color: var( --yellow-10 ); }
-.focus-yellow-11:focus { color: var( --yellow-11 ); }
-.focus-green-0:focus { color: var( --green-0 ); }
-.focus-green-1:focus { color: var( --green-1 ); }
-.focus-green-2:focus { color: var( --green-2 ); }
-.focus-green-3:focus { color: var( --green-3 ); }
-.focus-green-4:focus { color: var( --green-4 ); }
-.focus-green-5:focus { color: var( --green-5 ); }
-.focus-green-6:focus { color: var( --green-6 ); }
-.focus-green-7:focus { color: var( --green-7 ); }
-.focus-green-8:focus { color: var( --green-8 ); }
-.focus-green-9:focus { color: var( --green-9 ); }
-.focus-green-10:focus { color: var( --green-10 ); }
-.focus-green-11:focus { color: var( --green-11 ); }
-.focus-teal-0:focus { color: var( --teal-0 ); }
-.focus-teal-1:focus { color: var( --teal-1 ); }
-.focus-teal-2:focus { color: var( --teal-2 ); }
-.focus-teal-3:focus { color: var( --teal-3 ); }
-.focus-teal-4:focus { color: var( --teal-4 ); }
-.focus-teal-5:focus { color: var( --teal-5 ); }
-.focus-teal-6:focus { color: var( --teal-6 ); }
-.focus-teal-7:focus { color: var( --teal-7 ); }
-.focus-teal-8:focus { color: var( --teal-8 ); }
-.focus-teal-9:focus { color: var( --teal-9 ); }
-.focus-teal-10:focus { color: var( --teal-10 ); }
-.focus-teal-11:focus { color: var( --teal-11 ); }
-.focus-cyan-0:focus { color: var( --cyan-0 ); }
-.focus-cyan-1:focus { color: var( --cyan-1 ); }
-.focus-cyan-2:focus { color: var( --cyan-2 ); }
-.focus-cyan-3:focus { color: var( --cyan-3 ); }
-.focus-cyan-4:focus { color: var( --cyan-4 ); }
-.focus-cyan-5:focus { color: var( --cyan-5 ); }
-.focus-cyan-6:focus { color: var( --cyan-6 ); }
-.focus-cyan-7:focus { color: var( --cyan-7 ); }
-.focus-cyan-8:focus { color: var( --cyan-8 ); }
-.focus-cyan-9:focus { color: var( --cyan-9 ); }
-.focus-cyan-10:focus { color: var( --cyan-10 ); }
-.focus-cyan-11:focus { color: var( --cyan-11 ); }
-/* Background colors */
-.focus-bg-overlay-tint-0:focus { background-color: var( --overlay-tint-0 ); }
-.focus-bg-overlay-tint-1:focus { background-color: var( --overlay-tint-1 ); }
-.focus-bg-overlay-tint-2:focus { background-color: var( --overlay-tint-2 ); }
-.focus-bg-overlay-tint-3:focus { background-color: var( --overlay-tint-3 ); }
-.focus-bg-overlay-tint-4:focus { background-color: var( --overlay-tint-4 ); }
-.focus-bg-overlay-tint-5:focus { background-color: var( --overlay-tint-5 ); }
-.focus-bg-overlay-tint-6:focus { background-color: var( --overlay-tint-6 ); }
-.focus-bg-overlay-tint-7:focus { background-color: var( --overlay-tint-7 ); }
-.focus-bg-overlay-tint-8:focus { background-color: var( --overlay-tint-8 ); }
-.focus-bg-overlay-tint-9:focus { background-color: var( --overlay-tint-9 ); }
-.focus-bg-overlay-tint-10:focus { background-color: var( --overlay-tint-10 ); }
-.focus-bg-overlay-tint-11:focus { background-color: var( --overlay-tint-11 ); }
-.focus-bg-overlay-shadow-0:focus { background-color: var( --overlay-shadow-0 ); }
-.focus-bg-overlay-shadow-1:focus { background-color: var( --overlay-shadow-1 ); }
-.focus-bg-overlay-shadow-2:focus { background-color: var( --overlay-shadow-2 ); }
-.focus-bg-overlay-shadow-3:focus { background-color: var( --overlay-shadow-3 ); }
-.focus-bg-overlay-shadow-4:focus { background-color: var( --overlay-shadow-4 ); }
-.focus-bg-overlay-shadow-5:focus { background-color: var( --overlay-shadow-5 ); }
-.focus-bg-overlay-shadow-6:focus { background-color: var( --overlay-shadow-6 ); }
-.focus-bg-overlay-shadow-7:focus { background-color: var( --overlay-shadow-7 ); }
-.focus-bg-overlay-shadow-8:focus { background-color: var( --overlay-shadow-8 ); }
-.focus-bg-overlay-shadow-9:focus { background-color: var( --overlay-shadow-9 ); }
-.focus-bg-overlay-shadow-10:focus { background-color: var( --overlay-shadow-10 ); }
-.focus-bg-overlay-shadow-11:focus { background-color: var( --overlay-shadow-11 ); }
-.focus-bg-gray-0:focus { background-color: var( --gray-0 ); }
-.focus-bg-gray-1:focus { background-color: var( --gray-1 ); }
-.focus-bg-gray-2:focus { background-color: var( --gray-2 ); }
-.focus-bg-gray-3:focus { background-color: var( --gray-3 ); }
-.focus-bg-gray-4:focus { background-color: var( --gray-4 ); }
-.focus-bg-gray-5:focus { background-color: var( --gray-5 ); }
-.focus-bg-gray-6:focus { background-color: var( --gray-6 ); }
-.focus-bg-gray-7:focus { background-color: var( --gray-7 ); }
-.focus-bg-gray-8:focus { background-color: var( --gray-8 ); }
-.focus-bg-gray-9:focus { background-color: var( --gray-9 ); }
-.focus-bg-gray-10:focus { background-color: var( --gray-10 ); }
-.focus-bg-gray-11:focus { background-color: var( --gray-11 ); }
-.focus-bg-slate-gray-0:focus { background-color: var( --slate-gray-0 ); }
-.focus-bg-slate-gray-1:focus { background-color: var( --slate-gray-1 ); }
-.focus-bg-slate-gray-2:focus { background-color: var( --slate-gray-2 ); }
-.focus-bg-slate-gray-3:focus { background-color: var( --slate-gray-3 ); }
-.focus-bg-slate-gray-4:focus { background-color: var( --slate-gray-4 ); }
-.focus-bg-slate-gray-5:focus { background-color: var( --slate-gray-5 ); }
-.focus-bg-slate-gray-6:focus { background-color: var( --slate-gray-6 ); }
-.focus-bg-slate-gray-7:focus { background-color: var( --slate-gray-7 ); }
-.focus-bg-slate-gray-8:focus { background-color: var( --slate-gray-8 ); }
-.focus-bg-slate-gray-9:focus { background-color: var( --slate-gray-9 ); }
-.focus-bg-slate-gray-10:focus { background-color: var( --slate-gray-10 ); }
-.focus-bg-slate-gray-11:focus { background-color: var( --slate-gray-11 ); }
-.focus-bg-blue-0:focus { background-color: var( --blue-0 ); }
-.focus-bg-blue-1:focus { background-color: var( --blue-1 ); }
-.focus-bg-blue-2:focus { background-color: var( --blue-2 ); }
-.focus-bg-blue-3:focus { background-color: var( --blue-3 ); }
-.focus-bg-blue-4:focus { background-color: var( --blue-4 ); }
-.focus-bg-blue-5:focus { background-color: var( --blue-5 ); }
-.focus-bg-blue-6:focus { background-color: var( --blue-6 ); }
-.focus-bg-blue-7:focus { background-color: var( --blue-7 ); }
-.focus-bg-blue-8:focus { background-color: var( --blue-8 ); }
-.focus-bg-blue-9:focus { background-color: var( --blue-9 ); }
-.focus-bg-blue-10:focus { background-color: var( --blue-10 ); }
-.focus-bg-blue-11:focus { background-color: var( --blue-11 ); }
-.focus-bg-indigo-0:focus { background-color: var( --indigo-0 ); }
-.focus-bg-indigo-1:focus { background-color: var( --indigo-1 ); }
-.focus-bg-indigo-2:focus { background-color: var( --indigo-2 ); }
-.focus-bg-indigo-3:focus { background-color: var( --indigo-3 ); }
-.focus-bg-indigo-4:focus { background-color: var( --indigo-4 ); }
-.focus-bg-indigo-5:focus { background-color: var( --indigo-5 ); }
-.focus-bg-indigo-6:focus { background-color: var( --indigo-6 ); }
-.focus-bg-indigo-7:focus { background-color: var( --indigo-7 ); }
-.focus-bg-indigo-8:focus { background-color: var( --indigo-8 ); }
-.focus-bg-indigo-9:focus { background-color: var( --indigo-9 ); }
-.focus-bg-indigo-10:focus { background-color: var( --indigo-10 ); }
-.focus-bg-indigo-11:focus { background-color: var( --indigo-11 ); }
-.focus-bg-violet-0:focus { background-color: var( --violet-0 ); }
-.focus-bg-violet-1:focus { background-color: var( --violet-1 ); }
-.focus-bg-violet-2:focus { background-color: var( --violet-2 ); }
-.focus-bg-violet-3:focus { background-color: var( --violet-3 ); }
-.focus-bg-violet-4:focus { background-color: var( --violet-4 ); }
-.focus-bg-violet-5:focus { background-color: var( --violet-5 ); }
-.focus-bg-violet-6:focus { background-color: var( --violet-6 ); }
-.focus-bg-violet-7:focus { background-color: var( --violet-7 ); }
-.focus-bg-violet-8:focus { background-color: var( --violet-8 ); }
-.focus-bg-violet-9:focus { background-color: var( --violet-9 ); }
-.focus-bg-violet-10:focus { background-color: var( --violet-10 ); }
-.focus-bg-violet-11:focus { background-color: var( --violet-11 ); }
-.focus-bg-magenta-0:focus { background-color: var( --magenta-0 ); }
-.focus-bg-magenta-1:focus { background-color: var( --magenta-1 ); }
-.focus-bg-magenta-2:focus { background-color: var( --magenta-2 ); }
-.focus-bg-magenta-3:focus { background-color: var( --magenta-3 ); }
-.focus-bg-magenta-4:focus { background-color: var( --magenta-4 ); }
-.focus-bg-magenta-5:focus { background-color: var( --magenta-5 ); }
-.focus-bg-magenta-6:focus { background-color: var( --magenta-6 ); }
-.focus-bg-magenta-7:focus { background-color: var( --magenta-7 ); }
-.focus-bg-magenta-8:focus { background-color: var( --magenta-8 ); }
-.focus-bg-magenta-9:focus { background-color: var( --magenta-9 ); }
-.focus-bg-magenta-10:focus { background-color: var( --magenta-10 ); }
-.focus-bg-magenta-11:focus { background-color: var( --magenta-11 ); }
-.focus-bg-red-0:focus { background-color: var( --red-0 ); }
-.focus-bg-red-1:focus { background-color: var( --red-1 ); }
-.focus-bg-red-2:focus { background-color: var( --red-2 ); }
-.focus-bg-red-3:focus { background-color: var( --red-3 ); }
-.focus-bg-red-4:focus { background-color: var( --red-4 ); }
-.focus-bg-red-5:focus { background-color: var( --red-5 ); }
-.focus-bg-red-6:focus { background-color: var( --red-6 ); }
-.focus-bg-red-7:focus { background-color: var( --red-7 ); }
-.focus-bg-red-8:focus { background-color: var( --red-8 ); }
-.focus-bg-red-9:focus { background-color: var( --red-9 ); }
-.focus-bg-red-10:focus { background-color: var( --red-10 ); }
-.focus-bg-red-11:focus { background-color: var( --red-11 ); }
-.focus-bg-red-orange-0:focus { background-color: var( --red-orange-0 ); }
-.focus-bg-red-orange-1:focus { background-color: var( --red-orange-1 ); }
-.focus-bg-red-orange-2:focus { background-color: var( --red-orange-2 ); }
-.focus-bg-red-orange-3:focus { background-color: var( --red-orange-3 ); }
-.focus-bg-red-orange-4:focus { background-color: var( --red-orange-4 ); }
-.focus-bg-red-orange-5:focus { background-color: var( --red-orange-5 ); }
-.focus-bg-red-orange-6:focus { background-color: var( --red-orange-6 ); }
-.focus-bg-red-orange-7:focus { background-color: var( --red-orange-7 ); }
-.focus-bg-red-orange-8:focus { background-color: var( --red-orange-8 ); }
-.focus-bg-red-orange-9:focus { background-color: var( --red-orange-9 ); }
-.focus-bg-red-orange-10:focus { background-color: var( --red-orange-10 ); }
-.focus-bg-red-orange-11:focus { background-color: var( --red-orange-11 ); }
-.focus-bg-orange-0:focus { background-color: var( --orange-0 ); }
-.focus-bg-orange-1:focus { background-color: var( --orange-1 ); }
-.focus-bg-orange-2:focus { background-color: var( --orange-2 ); }
-.focus-bg-orange-3:focus { background-color: var( --orange-3 ); }
-.focus-bg-orange-4:focus { background-color: var( --orange-4 ); }
-.focus-bg-orange-5:focus { background-color: var( --orange-5 ); }
-.focus-bg-orange-6:focus { background-color: var( --orange-6 ); }
-.focus-bg-orange-7:focus { background-color: var( --orange-7 ); }
-.focus-bg-orange-8:focus { background-color: var( --orange-8 ); }
-.focus-bg-orange-9:focus { background-color: var( --orange-9 ); }
-.focus-bg-orange-10:focus { background-color: var( --orange-10 ); }
-.focus-bg-orange-11:focus { background-color: var( --orange-11 ); }
-.focus-bg-gold-0:focus { background-color: var( --gold-0 ); }
-.focus-bg-gold-1:focus { background-color: var( --gold-1 ); }
-.focus-bg-gold-2:focus { background-color: var( --gold-2 ); }
-.focus-bg-gold-3:focus { background-color: var( --gold-3 ); }
-.focus-bg-gold-4:focus { background-color: var( --gold-4 ); }
-.focus-bg-gold-5:focus { background-color: var( --gold-5 ); }
-.focus-bg-gold-6:focus { background-color: var( --gold-6 ); }
-.focus-bg-gold-7:focus { background-color: var( --gold-7 ); }
-.focus-bg-gold-8:focus { background-color: var( --gold-8 ); }
-.focus-bg-gold-9:focus { background-color: var( --gold-9 ); }
-.focus-bg-gold-10:focus { background-color: var( --gold-10 ); }
-.focus-bg-gold-11:focus { background-color: var( --gold-11 ); }
-.focus-bg-yellow-0:focus { background-color: var( --yellow-0 ); }
-.focus-bg-yellow-1:focus { background-color: var( --yellow-1 ); }
-.focus-bg-yellow-2:focus { background-color: var( --yellow-2 ); }
-.focus-bg-yellow-3:focus { background-color: var( --yellow-3 ); }
-.focus-bg-yellow-4:focus { background-color: var( --yellow-4 ); }
-.focus-bg-yellow-5:focus { background-color: var( --yellow-5 ); }
-.focus-bg-yellow-6:focus { background-color: var( --yellow-6 ); }
-.focus-bg-yellow-7:focus { background-color: var( --yellow-7 ); }
-.focus-bg-yellow-8:focus { background-color: var( --yellow-8 ); }
-.focus-bg-yellow-9:focus { background-color: var( --yellow-9 ); }
-.focus-bg-yellow-10:focus { background-color: var( --yellow-10 ); }
-.focus-bg-yellow-11:focus { background-color: var( --yellow-11 ); }
-.focus-bg-green-0:focus { background-color: var( --green-0 ); }
-.focus-bg-green-1:focus { background-color: var( --green-1 ); }
-.focus-bg-green-2:focus { background-color: var( --green-2 ); }
-.focus-bg-green-3:focus { background-color: var( --green-3 ); }
-.focus-bg-green-4:focus { background-color: var( --green-4 ); }
-.focus-bg-green-5:focus { background-color: var( --green-5 ); }
-.focus-bg-green-6:focus { background-color: var( --green-6 ); }
-.focus-bg-green-7:focus { background-color: var( --green-7 ); }
-.focus-bg-green-8:focus { background-color: var( --green-8 ); }
-.focus-bg-green-9:focus { background-color: var( --green-9 ); }
-.focus-bg-green-10:focus { background-color: var( --green-10 ); }
-.focus-bg-green-11:focus { background-color: var( --green-11 ); }
-.focus-bg-teal-0:focus { background-color: var( --teal-0 ); }
-.focus-bg-teal-1:focus { background-color: var( --teal-1 ); }
-.focus-bg-teal-2:focus { background-color: var( --teal-2 ); }
-.focus-bg-teal-3:focus { background-color: var( --teal-3 ); }
-.focus-bg-teal-4:focus { background-color: var( --teal-4 ); }
-.focus-bg-teal-5:focus { background-color: var( --teal-5 ); }
-.focus-bg-teal-6:focus { background-color: var( --teal-6 ); }
-.focus-bg-teal-7:focus { background-color: var( --teal-7 ); }
-.focus-bg-teal-8:focus { background-color: var( --teal-8 ); }
-.focus-bg-teal-9:focus { background-color: var( --teal-9 ); }
-.focus-bg-teal-10:focus { background-color: var( --teal-10 ); }
-.focus-bg-teal-11:focus { background-color: var( --teal-11 ); }
-.focus-bg-cyan-0:focus { background-color: var( --cyan-0 ); }
-.focus-bg-cyan-1:focus { background-color: var( --cyan-1 ); }
-.focus-bg-cyan-2:focus { background-color: var( --cyan-2 ); }
-.focus-bg-cyan-3:focus { background-color: var( --cyan-3 ); }
-.focus-bg-cyan-4:focus { background-color: var( --cyan-4 ); }
-.focus-bg-cyan-5:focus { background-color: var( --cyan-5 ); }
-.focus-bg-cyan-6:focus { background-color: var( --cyan-6 ); }
-.focus-bg-cyan-7:focus { background-color: var( --cyan-7 ); }
-.focus-bg-cyan-8:focus { background-color: var( --cyan-8 ); }
-.focus-bg-cyan-9:focus { background-color: var( --cyan-9 ); }
-.focus-bg-cyan-10:focus { background-color: var( --cyan-10 ); }
-.focus-bg-cyan-11:focus { background-color: var( --cyan-11 ); }
-/*
- SPACING
- Docs: http://tachyons.io/docs/layout/spacing/
-
- An eight step powers of two scale ranging from 0 to 16rem.
-
- Base:
- p = padding
- m = margin
-
- Modifiers:
- a = all
- y = vertical
- x = horizontal
- t = top
- r = right
- b = bottom
- l = left
-
- 0 = none
- 1 = 1st step in spacing scale
- 2 = 2nd step in spacing scale
- 3 = 3rd step in spacing scale
- 4 = 4th step in spacing scale
- 5 = 5th step in spacing scale
- 6 = 6th step in spacing scale
- 7 = 7th step in spacing scale
- 8 = 8th step in spacing scale
- 9 = 9th step in spacing scale
-
- Media Query Extensions:
- -s = small
- -m = medium
- -l = large
-
-*/
-.p0 { padding: var( --spacing-0, 0 ); }
-.p1 { padding: var( --spacing-1, 2px ); }
-.p2 { padding: var( --spacing-2, 4px ); }
-.p3 { padding: var( --spacing-3, 8px ); }
-.p4 { padding: var( --spacing-4, 16px ); }
-.p5 { padding: var( --spacing-5, 32px ); }
-.p6 { padding: var( --spacing-6, 64px ); }
-.p7 { padding: var( --spacing-7, 128px ); }
-.p8 { padding: var( --spacing-8, 256px ); }
-.p9 { padding: var( --spacing-9, 512px ); }
-.pl0 { padding-left: var( --spacing-0, 0 ); }
-.pl1 { padding-left: var( --spacing-1, 2px ); }
-.pl2 { padding-left: var( --spacing-2, 4px ); }
-.pl3 { padding-left: var( --spacing-3, 8px ); }
-.pl4 { padding-left: var( --spacing-4, 16px ); }
-.pl5 { padding-left: var( --spacing-5, 32px ); }
-.pl6 { padding-left: var( --spacing-6, 64px ); }
-.pl7 { padding-left: var( --spacing-7, 128px ); }
-.pl8 { padding-left: var( --spacing-8, 256px ); }
-.pl9 { padding-left: var( --spacing-9, 512px ); }
-.pr0 { padding-right: var( --spacing-0, 0 ); }
-.pr1 { padding-right: var( --spacing-1, 2px ); }
-.pr2 { padding-right: var( --spacing-2, 4px ); }
-.pr3 { padding-right: var( --spacing-3, 8px ); }
-.pr4 { padding-right: var( --spacing-4, 16px ); }
-.pr5 { padding-right: var( --spacing-5, 32px ); }
-.pr6 { padding-right: var( --spacing-6, 64px ); }
-.pr7 { padding-right: var( --spacing-7, 128px ); }
-.pr8 { padding-right: var( --spacing-8, 256px ); }
-.pr9 { padding-right: var( --spacing-9, 512px ); }
-.pb0 { padding-bottom: var( --spacing-0, 0 ); }
-.pb1 { padding-bottom: var( --spacing-1, 2px ); }
-.pb2 { padding-bottom: var( --spacing-2, 4px ); }
-.pb3 { padding-bottom: var( --spacing-3, 8px ); }
-.pb4 { padding-bottom: var( --spacing-4, 16px ); }
-.pb5 { padding-bottom: var( --spacing-5, 32px ); }
-.pb6 { padding-bottom: var( --spacing-6, 64px ); }
-.pb7 { padding-bottom: var( --spacing-7, 128px ); }
-.pb8 { padding-bottom: var( --spacing-8, 256px ); }
-.pb9 { padding-bottom: var( --spacing-9, 512px ); }
-.pt0 { padding-top: var( --spacing-0, 0 ); }
-.pt1 { padding-top: var( --spacing-1, 2px ); }
-.pt2 { padding-top: var( --spacing-2, 4px ); }
-.pt3 { padding-top: var( --spacing-3, 8px ); }
-.pt4 { padding-top: var( --spacing-4, 16px ); }
-.pt5 { padding-top: var( --spacing-5, 32px ); }
-.pt6 { padding-top: var( --spacing-6, 64px ); }
-.pt7 { padding-top: var( --spacing-7, 128px ); }
-.pt8 { padding-top: var( --spacing-8, 256px ); }
-.pt9 { padding-top: var( --spacing-9, 512px ); }
-.py0 { padding-top: var( --spacing-0, 0 ); padding-bottom: var( --spacing-0, 0 ); }
-.py1 { padding-top: var( --spacing-1, 2px ); padding-bottom: var( --spacing-1, 2px ); }
-.py2 { padding-top: var( --spacing-2, 4px ); padding-bottom: var( --spacing-2, 4px ); }
-.py3 { padding-top: var( --spacing-3, 8px ); padding-bottom: var( --spacing-3, 8px ); }
-.py4 { padding-top: var( --spacing-4, 16px ); padding-bottom: var( --spacing-4, 16px ); }
-.py5 { padding-top: var( --spacing-5, 32px ); padding-bottom: var( --spacing-5, 32px ); }
-.py6 { padding-top: var( --spacing-6, 64px ); padding-bottom: var( --spacing-6, 64px ); }
-.py7 { padding-top: var( --spacing-7, 128px ); padding-bottom: var( --spacing-7, 128px ); }
-.py8 { padding-top: var( --spacing-8, 256px ); padding-bottom: var( --spacing-8, 256px ); }
-.py9 { padding-top: var( --spacing-9, 512px ); padding-bottom: var( --spacing-9, 512px ); }
-.px0 { padding-left: var( --spacing-0, 0 ); padding-right: var( --spacing-0, 0 ); }
-.px1 { padding-left: var( --spacing-1, 4px ); padding-right: var( --spacing-1, 4px ); }
-.px2 { padding-left: var( --spacing-2, 4px ); padding-right: var( --spacing-2, 4px ); }
-.px3 { padding-left: var( --spacing-3, 8px ); padding-right: var( --spacing-3, 8px ); }
-.px4 { padding-left: var( --spacing-4, 16px ); padding-right: var( --spacing-4, 16px ); }
-.px5 { padding-left: var( --spacing-5, 32px ); padding-right: var( --spacing-5, 32px ); }
-.px6 { padding-left: var( --spacing-6, 64px ); padding-right: var( --spacing-6, 64px ); }
-.px7 { padding-left: var( --spacing-7, 128px ); padding-right: var( --spacing-7, 128px ); }
-.px8 { padding-left: var( --spacing-8, 256px ); padding-right: var( --spacing-8, 256px ); }
-.px9 { padding-left: var( --spacing-9, 512px ); padding-right: var( --spacing-9, 512px ); }
-.m0 { margin: var( --spacing-0, 0 ); }
-.m1 { margin: var( --spacing-1, 2px ); }
-.m2 { margin: var( --spacing-2, 4px ); }
-.m3 { margin: var( --spacing-3, 8px ); }
-.m4 { margin: var( --spacing-4, 16px ); }
-.m5 { margin: var( --spacing-5, 32px ); }
-.m6 { margin: var( --spacing-6, 64px ); }
-.m7 { margin: var( --spacing-7, 128px ); }
-.m8 { margin: var( --spacing-8, 256px ); }
-.m9 { margin: var( --spacing-9, 512px ); }
-.ml0 { margin-left: var( --spacing-0, 0 ); }
-.ml1 { margin-left: var( --spacing-1, 2px ); }
-.ml2 { margin-left: var( --spacing-2, 4px ); }
-.ml3 { margin-left: var( --spacing-3, 8px ); }
-.ml4 { margin-left: var( --spacing-4, 16px ); }
-.ml5 { margin-left: var( --spacing-5, 32px ); }
-.ml6 { margin-left: var( --spacing-6, 64px ); }
-.ml7 { margin-left: var( --spacing-7, 128px ); }
-.ml8 { margin-left: var( --spacing-8, 256px ); }
-.ml9 { margin-left: var( --spacing-9, 512px ); }
-.mr0 { margin-right: var( --spacing-0, 0 ); }
-.mr1 { margin-right: var( --spacing-1, 2px ); }
-.mr2 { margin-right: var( --spacing-2, 4px ); }
-.mr3 { margin-right: var( --spacing-3, 8px ); }
-.mr4 { margin-right: var( --spacing-4, 16px ); }
-.mr5 { margin-right: var( --spacing-5, 32px ); }
-.mr6 { margin-right: var( --spacing-6, 64px ); }
-.mr7 { margin-right: var( --spacing-7, 128px ); }
-.mr8 { margin-right: var( --spacing-8, 256px ); }
-.mr9 { margin-right: var( --spacing-9, 512px ); }
-.mb0 { margin-bottom: var( --spacing-0, 0 ); }
-.mb1 { margin-bottom: var( --spacing-1, 4px ); }
-.mb2 { margin-bottom: var( --spacing-2, 4px ); }
-.mb3 { margin-bottom: var( --spacing-3, 8px ); }
-.mb4 { margin-bottom: var( --spacing-4, 16px ); }
-.mb5 { margin-bottom: var( --spacing-5, 32px ); }
-.mb6 { margin-bottom: var( --spacing-6, 64px ); }
-.mb7 { margin-bottom: var( --spacing-7, 128px ); }
-.mb8 { margin-bottom: var( --spacing-8, 256px ); }
-.mb9 { margin-bottom: var( --spacing-9, 512px ); }
-.mt0 { margin-top: var( --spacing-0, 0 ); }
-.mt1 { margin-top: var( --spacing-1, 2px ); }
-.mt2 { margin-top: var( --spacing-2, 4px ); }
-.mt3 { margin-top: var( --spacing-3, 8px ); }
-.mt4 { margin-top: var( --spacing-4, 16px ); }
-.mt5 { margin-top: var( --spacing-5, 32px ); }
-.mt6 { margin-top: var( --spacing-6, 64px ); }
-.mt7 { margin-top: var( --spacing-7, 128px ); }
-.mt8 { margin-top: var( --spacing-8, 256px ); }
-.mt9 { margin-top: var( --spacing-9, 512px ); }
-.my0 { margin-top: var( --spacing-0, 0 ); margin-bottom: var( --spacing-0, 0 ); }
-.my1 { margin-top: var( --spacing-1, 4px ); margin-bottom: var( --spacing-1, 4px ); }
-.my2 { margin-top: var( --spacing-2, 4px ); margin-bottom: var( --spacing-2, 4px ); }
-.my3 { margin-top: var( --spacing-3, 8px ); margin-bottom: var( --spacing-3, 8px ); }
-.my4 { margin-top: var( --spacing-4, 16px ); margin-bottom: var( --spacing-4, 16px ); }
-.my5 { margin-top: var( --spacing-5, 32px ); margin-bottom: var( --spacing-5, 32px ); }
-.my6 { margin-top: var( --spacing-6, 64px ); margin-bottom: var( --spacing-6, 64px ); }
-.my7 { margin-top: var( --spacing-7, 128px ); margin-bottom: var( --spacing-7, 128px ); }
-.my8 { margin-top: var( --spacing-8, 256px ); margin-bottom: var( --spacing-8, 256px ); }
-.my9 { margin-top: var( --spacing-9, 512px ); margin-bottom: var( --spacing-9, 512px ); }
-.mx0 { margin-left: var( --spacing-0, 0 ); margin-right: var( --spacing-0, 0 ); }
-.mx1 { margin-left: var( --spacing-1, 2px ); margin-right: var( --spacing-1, 2px ); }
-.mx2 { margin-left: var( --spacing-2, 4px ); margin-right: var( --spacing-2, 4px ); }
-.mx3 { margin-left: var( --spacing-3, 8px ); margin-right: var( --spacing-3, 8px ); }
-.mx4 { margin-left: var( --spacing-4, 16px ); margin-right: var( --spacing-4, 16px ); }
-.mx5 { margin-left: var( --spacing-5, 32px ); margin-right: var( --spacing-5, 32px ); }
-.mx6 { margin-left: var( --spacing-6, 64px ); margin-right: var( --spacing-6, 64px ); }
-.mx7 { margin-left: var( --spacing-7, 128px ); margin-right: var( --spacing-7, 128px ); }
-.mx8 { margin-left: var( --spacing-8, 256px ); margin-right: var( --spacing-8, 256px ); }
-.mx9 { margin-left: var( --spacing-9, 512px ); margin-right: var( --spacing-9, 512px ); }
-@container (min-width:30em) {
- .p0-s { padding: var( --spacing-0, 0 ); }
- .p1-s { padding: var( --spacing-1, 2px ); }
- .p2-s { padding: var( --spacing-2, 4px ); }
- .p3-s { padding: var( --spacing-3, 8px ); }
- .p4-s { padding: var( --spacing-4, 16px ); }
- .p5-s { padding: var( --spacing-5, 32px ); }
- .p6-s { padding: var( --spacing-6, 64px ); }
- .p7-s { padding: var( --spacing-7, 128px ); }
- .p8-s { padding: var( --spacing-8, 256px ); }
- .p9-s { padding: var( --spacing-9, 512px ); }
- .pl0-s { padding-left: var( --spacing-0, 0 ); }
- .pl1-s { padding-left: var( --spacing-1, 2px ); }
- .pl2-s { padding-left: var( --spacing-2, 4px ); }
- .pl3-s { padding-left: var( --spacing-3, 8px ); }
- .pl4-s { padding-left: var( --spacing-4, 16px ); }
- .pl5-s { padding-left: var( --spacing-5, 32px ); }
- .pl6-s { padding-left: var( --spacing-6, 64px ); }
- .pl7-s { padding-left: var( --spacing-7, 128px ); }
- .pl8-s { padding-left: var( --spacing-8, 256px ); }
- .pl9-s { padding-left: var( --spacing-9, 512px ); }
- .pr0-s { padding-right: var( --spacing-0, 0 ); }
- .pr1-s { padding-right: var( --spacing-1, 2px ); }
- .pr2-s { padding-right: var( --spacing-2, 4px ); }
- .pr3-s { padding-right: var( --spacing-3, 8px ); }
- .pr4-s { padding-right: var( --spacing-4, 16px ); }
- .pr5-s { padding-right: var( --spacing-5, 32px ); }
- .pr6-s { padding-right: var( --spacing-6, 64px ); }
- .pr7-s { padding-right: var( --spacing-7, 128px ); }
- .pr8-s { padding-right: var( --spacing-8, 256px ); }
- .pr9-s { padding-right: var( --spacing-9, 512px ); }
- .pb0-s { padding-bottom: var( --spacing-0, 0 ); }
- .pb1-s { padding-bottom: var( --spacing-1, 2px ); }
- .pb2-s { padding-bottom: var( --spacing-2, 4px ); }
- .pb3-s { padding-bottom: var( --spacing-3, 8px ); }
- .pb4-s { padding-bottom: var( --spacing-4, 16px ); }
- .pb5-s { padding-bottom: var( --spacing-5, 32px ); }
- .pb6-s { padding-bottom: var( --spacing-6, 64px ); }
- .pb7-s { padding-bottom: var( --spacing-7, 128px ); }
- .pb8-s { padding-bottom: var( --spacing-8, 256px ); }
- .pb9-s { padding-bottom: var( --spacing-9, 512px ); }
- .pt0-s { padding-top: var( --spacing-0, 0 ); }
- .pt1-s { padding-top: var( --spacing-1, 2px ); }
- .pt2-s { padding-top: var( --spacing-2, 4px ); }
- .pt3-s { padding-top: var( --spacing-3, 8px ); }
- .pt4-s { padding-top: var( --spacing-4, 16px ); }
- .pt5-s { padding-top: var( --spacing-5, 32px ); }
- .pt6-s { padding-top: var( --spacing-6, 64px ); }
- .pt7-s { padding-top: var( --spacing-7, 128px ); }
- .pt8-s { padding-top: var( --spacing-8, 256px ); }
- .pt9-s { padding-top: var( --spacing-9, 512px ); }
- .py0-s { padding-top: var( --spacing-0, 0 ); padding-bottom: var( --spacing-0, 0 ); }
- .py1-s { padding-top: var( --spacing-1, 2px ); padding-bottom: var( --spacing-1, 2px ); }
- .py2-s { padding-top: var( --spacing-2, 4px ); padding-bottom: var( --spacing-2, 4px ); }
- .py3-s { padding-top: var( --spacing-3, 8px ); padding-bottom: var( --spacing-3, 8px ); }
- .py4-s { padding-top: var( --spacing-4, 16px ); padding-bottom: var( --spacing-4, 16px ); }
- .py5-s { padding-top: var( --spacing-5, 32px ); padding-bottom: var( --spacing-5, 32px ); }
- .py6-s { padding-top: var( --spacing-6, 64px ); padding-bottom: var( --spacing-6, 64px ); }
- .py7-s { padding-top: var( --spacing-7, 128px ); padding-bottom: var( --spacing-7, 128px ); }
- .py8-s { padding-top: var( --spacing-8, 256px ); padding-bottom: var( --spacing-8, 256px ); }
- .py9-s { padding-top: var( --spacing-9, 512px ); padding-bottom: var( --spacing-9, 512px ); }
- .px0-s { padding-left: var( --spacing-0, 0 ); padding-right: var( --spacing-0, 0 ); }
- .px1-s { padding-left: var( --spacing-1, 2px ); padding-right: var( --spacing-1, 2px ); }
- .px2-s { padding-left: var( --spacing-2, 4px ); padding-right: var( --spacing-2, 4px ); }
- .px3-s { padding-left: var( --spacing-3, 8px ); padding-right: var( --spacing-3, 8px ); }
- .px4-s { padding-left: var( --spacing-4, 16px ); padding-right: var( --spacing-4, 16px ); }
- .px5-s { padding-left: var( --spacing-5, 32px ); padding-right: var( --spacing-5, 32px ); }
- .px6-s { padding-left: var( --spacing-6, 64px ); padding-right: var( --spacing-6, 64px ); }
- .px7-s { padding-left: var( --spacing-7, 128px ); padding-right: var( --spacing-7, 128px ); }
- .px8-s { padding-left: var( --spacing-8, 256px ); padding-right: var( --spacing-8, 256px ); }
- .px9-s { padding-left: var( --spacing-9, 512px ); padding-right: var( --spacing-9, 512px ); }
- .m0-s { margin: var( --spacing-0, 0 ); }
- .m1-s { margin: var( --spacing-1, 2px ); }
- .m2-s { margin: var( --spacing-2, 4px ); }
- .m3-s { margin: var( --spacing-3, 8px ); }
- .m4-s { margin: var( --spacing-4, 16px ); }
- .m5-s { margin: var( --spacing-5, 32px ); }
- .m6-s { margin: var( --spacing-6, 64px ); }
- .m7-s { margin: var( --spacing-7, 128px ); }
- .m8-s { margin: var( --spacing-8, 256px ); }
- .m9-s { margin: var( --spacing-9, 512px ); }
- .ml0-s { margin-left: var( --spacing-0, 0 ); }
- .ml1-s { margin-left: var( --spacing-1, 2px ); }
- .ml2-s { margin-left: var( --spacing-2, 4px ); }
- .ml3-s { margin-left: var( --spacing-3, 8px ); }
- .ml4-s { margin-left: var( --spacing-4, 16px ); }
- .ml5-s { margin-left: var( --spacing-5, 32px ); }
- .ml6-s { margin-left: var( --spacing-6, 64px ); }
- .ml7-s { margin-left: var( --spacing-7, 128px ); }
- .ml8-s { margin-left: var( --spacing-8, 256px ); }
- .ml9-s { margin-left: var( --spacing-9, 512px ); }
- .mr0-s { margin-right: var( --spacing-0, 0 ); }
- .mr1-s { margin-right: var( --spacing-1, 2px ); }
- .mr2-s { margin-right: var( --spacing-2, 4px ); }
- .mr3-s { margin-right: var( --spacing-3, 8px ); }
- .mr4-s { margin-right: var( --spacing-4, 16px ); }
- .mr5-s { margin-right: var( --spacing-5, 32px ); }
- .mr6-s { margin-right: var( --spacing-6, 64px ); }
- .mr7-s { margin-right: var( --spacing-7, 128px ); }
- .mr8-s { margin-right: var( --spacing-8, 256px ); }
- .mr9-s { margin-right: var( --spacing-9, 512px ); }
- .mb0-s { margin-bottom: var( --spacing-0, 0 ); }
- .mb1-s { margin-bottom: var( --spacing-1, 2px ); }
- .mb2-s { margin-bottom: var( --spacing-2, 4px ); }
- .mb3-s { margin-bottom: var( --spacing-3, 8px ); }
- .mb4-s { margin-bottom: var( --spacing-4, 16px ); }
- .mb5-s { margin-bottom: var( --spacing-5, 32px ); }
- .mb6-s { margin-bottom: var( --spacing-6, 64px ); }
- .mb7-s { margin-bottom: var( --spacing-7, 128px ); }
- .mb8-s { margin-bottom: var( --spacing-8, 256px ); }
- .mb9-s { margin-bottom: var( --spacing-9, 512px ); }
- .mt0-s { margin-top: var( --spacing-0, 0 ); }
- .mt1-s { margin-top: var( --spacing-1, 2px ); }
- .mt2-s { margin-top: var( --spacing-2, 4px ); }
- .mt3-s { margin-top: var( --spacing-3, 8px ); }
- .mt4-s { margin-top: var( --spacing-4, 16px ); }
- .mt5-s { margin-top: var( --spacing-5, 32px ); }
- .mt6-s { margin-top: var( --spacing-6, 64px ); }
- .mt7-s { margin-top: var( --spacing-7, 128px ); }
- .mt8-s { margin-top: var( --spacing-8, 256px ); }
- .mt9-s { margin-top: var( --spacing-9, 512px ); }
- .my0-s { margin-top: var( --spacing-0, 0 ); margin-bottom: var( --spacing-0, 0 ); }
- .my1-s { margin-top: var( --spacing-1, 2px ); margin-bottom: var( --spacing-1, 2px ); }
- .my2-s { margin-top: var( --spacing-2, 4px ); margin-bottom: var( --spacing-2, 4px ); }
- .my3-s { margin-top: var( --spacing-3, 8px ); margin-bottom: var( --spacing-3, 8px ); }
- .my4-s { margin-top: var( --spacing-4, 16px ); margin-bottom: var( --spacing-4, 16px ); }
- .my5-s { margin-top: var( --spacing-5, 32px ); margin-bottom: var( --spacing-5, 32px ); }
- .my6-s { margin-top: var( --spacing-6, 64px ); margin-bottom: var( --spacing-6, 64px ); }
- .my7-s { margin-top: var( --spacing-7, 128px ); margin-bottom: var( --spacing-7, 128px ); }
- .my8-s { margin-top: var( --spacing-8, 256px ); margin-bottom: var( --spacing-8, 256px ); }
- .my9-s { margin-top: var( --spacing-9, 512px ); margin-bottom: var( --spacing-9, 512px ); }
- .mx0-s { margin-left: var( --spacing-0, 0 ); margin-right: var( --spacing-0, 0 ); }
- .mx1-s { margin-left: var( --spacing-1, 4px ); margin-right: var( --spacing-1, 4px ); }
- .mx2-s { margin-left: var( --spacing-2, 4px ); margin-right: var( --spacing-2, 4px ); }
- .mx3-s { margin-left: var( --spacing-3, 8px ); margin-right: var( --spacing-3, 8px ); }
- .mx4-s { margin-left: var( --spacing-4, 16px ); margin-right: var( --spacing-4, 16px ); }
- .mx5-s { margin-left: var( --spacing-5, 32px ); margin-right: var( --spacing-5, 32px ); }
- .mx6-s { margin-left: var( --spacing-6, 64px ); margin-right: var( --spacing-6, 64px ); }
- .mx7-s { margin-left: var( --spacing-7, 128px ); margin-right: var( --spacing-7, 128px ); }
- .mx8-s { margin-left: var( --spacing-8, 256px ); margin-right: var( --spacing-8, 256px ); }
- .mx9-s { margin-left: var( --spacing-9, 512px ); margin-right: var( --spacing-9, 512px ); }
-}
-@container (min-width:48em) {
- .p0-m { padding: var( --spacing-0, 0 ); }
- .p1-m { padding: var( --spacing-1, 2px ); }
- .p2-m { padding: var( --spacing-2, 4px ); }
- .p3-m { padding: var( --spacing-3, 8px ); }
- .p4-m { padding: var( --spacing-4, 16px ); }
- .p5-m { padding: var( --spacing-5, 32px ); }
- .p6-m { padding: var( --spacing-6, 64px ); }
- .p7-m { padding: var( --spacing-7, 128px ); }
- .p8-m { padding: var( --spacing-8, 256px ); }
- .p9-m { padding: var( --spacing-9, 512px ); }
- .pl0-m { padding-left: var( --spacing-0, 0 ); }
- .pl1-m { padding-left: var( --spacing-1, 2px ); }
- .pl2-m { padding-left: var( --spacing-2, 4px ); }
- .pl3-m { padding-left: var( --spacing-3, 8px ); }
- .pl4-m { padding-left: var( --spacing-4, 16px ); }
- .pl5-m { padding-left: var( --spacing-5, 32px ); }
- .pl6-m { padding-left: var( --spacing-6, 64px ); }
- .pl7-m { padding-left: var( --spacing-7, 128px ); }
- .pl8-m { padding-left: var( --spacing-8, 256px ); }
- .pl9-m { padding-left: var( --spacing-9, 512px ); }
- .pr0-m { padding-right: var( --spacing-0, 0 ); }
- .pr1-m { padding-right: var( --spacing-1, 2px ); }
- .pr2-m { padding-right: var( --spacing-2, 4px ); }
- .pr3-m { padding-right: var( --spacing-3, 8px ); }
- .pr4-m { padding-right: var( --spacing-4, 16px ); }
- .pr5-m { padding-right: var( --spacing-5, 32px ); }
- .pr6-m { padding-right: var( --spacing-6, 64px ); }
- .pr7-m { padding-right: var( --spacing-7, 128px ); }
- .pr8-m { padding-right: var( --spacing-8, 256px ); }
- .pr9-m { padding-right: var( --spacing-9, 512px ); }
- .pb0-m { padding-bottom: var( --spacing-0, 0 ); }
- .pb1-m { padding-bottom: var( --spacing-1, 2px ); }
- .pb2-m { padding-bottom: var( --spacing-2, 4px ); }
- .pb3-m { padding-bottom: var( --spacing-3, 8px ); }
- .pb4-m { padding-bottom: var( --spacing-4, 16px ); }
- .pb5-m { padding-bottom: var( --spacing-5, 32px ); }
- .pb6-m { padding-bottom: var( --spacing-6, 64px ); }
- .pb7-m { padding-bottom: var( --spacing-7, 128px ); }
- .pb8-m { padding-bottom: var( --spacing-8, 256px ); }
- .pb9-m { padding-bottom: var( --spacing-9, 512px ); }
- .pt0-m { padding-top: var( --spacing-0, 0 ); }
- .pt1-m { padding-top: var( --spacing-1, 2px ); }
- .pt2-m { padding-top: var( --spacing-2, 4px ); }
- .pt3-m { padding-top: var( --spacing-3, 8px ); }
- .pt4-m { padding-top: var( --spacing-4, 16px ); }
- .pt5-m { padding-top: var( --spacing-5, 32px ); }
- .pt6-m { padding-top: var( --spacing-6, 64px ); }
- .pt7-m { padding-top: var( --spacing-7, 128px ); }
- .pt8-m { padding-top: var( --spacing-8, 256px ); }
- .pt9-m { padding-top: var( --spacing-9, 512px ); }
- .py0-m { padding-top: var( --spacing-0, 0 ); padding-bottom: var( --spacing-0, 0 ); }
- .py1-m { padding-top: var( --spacing-1, 2px ); padding-bottom: var( --spacing-1, 2px ); }
- .py2-m { padding-top: var( --spacing-2, 4px ); padding-bottom: var( --spacing-2, 4px ); }
- .py3-m { padding-top: var( --spacing-3, 8px ); padding-bottom: var( --spacing-3, 8px ); }
- .py4-m { padding-top: var( --spacing-4, 16px ); padding-bottom: var( --spacing-4, 16px ); }
- .py5-m { padding-top: var( --spacing-5, 32px ); padding-bottom: var( --spacing-5, 32px ); }
- .py6-m { padding-top: var( --spacing-6, 64px ); padding-bottom: var( --spacing-6, 64px ); }
- .py7-m { padding-top: var( --spacing-7, 128px ); padding-bottom: var( --spacing-7, 128px ); }
- .py8-m { padding-top: var( --spacing-8, 256px ); padding-bottom: var( --spacing-8, 256px ); }
- .py9-m { padding-top: var( --spacing-9, 512px ); padding-bottom: var( --spacing-9, 512px ); }
- .px0-m { padding-left: var( --spacing-0, 0 ); padding-right: var( --spacing-0, 0 ); }
- .px1-m { padding-left: var( --spacing-1, 2px ); padding-right: var( --spacing-1, 2px ); }
- .px2-m { padding-left: var( --spacing-2, 4px ); padding-right: var( --spacing-2, 4px ); }
- .px3-m { padding-left: var( --spacing-3, 8px ); padding-right: var( --spacing-3, 8px ); }
- .px4-m { padding-left: var( --spacing-4, 16px ); padding-right: var( --spacing-4, 16px ); }
- .px5-m { padding-left: var( --spacing-5, 32px ); padding-right: var( --spacing-5, 32px ); }
- .px6-m { padding-left: var( --spacing-6, 64px ); padding-right: var( --spacing-6, 64px ); }
- .px7-m { padding-left: var( --spacing-7, 128px ); padding-right: var( --spacing-7, 128px ); }
- .px8-m { padding-left: var( --spacing-8, 256px ); padding-right: var( --spacing-8, 256px ); }
- .px9-m { padding-left: var( --spacing-9, 512px ); padding-right: var( --spacing-9, 512px ); }
- .m0-m { margin: var( --spacing-0, 0 ); }
- .m1-m { margin: var( --spacing-1, 2px ); }
- .m2-m { margin: var( --spacing-2, 4px ); }
- .m3-m { margin: var( --spacing-3, 8px ); }
- .m4-m { margin: var( --spacing-4, 16px ); }
- .m5-m { margin: var( --spacing-5, 32px ); }
- .m6-m { margin: var( --spacing-6, 64px ); }
- .m7-m { margin: var( --spacing-7, 128px ); }
- .m8-m { margin: var( --spacing-8, 256px ); }
- .m9-m { margin: var( --spacing-9, 512px ); }
- .ml0-m { margin-left: var( --spacing-0, 0 ); }
- .ml1-m { margin-left: var( --spacing-1, 2px ); }
- .ml2-m { margin-left: var( --spacing-2, 4px ); }
- .ml3-m { margin-left: var( --spacing-3, 8px ); }
- .ml4-m { margin-left: var( --spacing-4, 16px ); }
- .ml5-m { margin-left: var( --spacing-5, 32px ); }
- .ml6-m { margin-left: var( --spacing-6, 64px ); }
- .ml7-m { margin-left: var( --spacing-7, 128px ); }
- .ml8-m { margin-left: var( --spacing-8, 256px ); }
- .ml9-m { margin-left: var( --spacing-9, 512px ); }
- .mr0-m { margin-right: var( --spacing-0, 0 ); }
- .mr1-m { margin-right: var( --spacing-1, 4px ); }
- .mr2-m { margin-right: var( --spacing-2, 4px ); }
- .mr3-m { margin-right: var( --spacing-3, 8px ); }
- .mr4-m { margin-right: var( --spacing-4, 16px ); }
- .mr5-m { margin-right: var( --spacing-5, 32px ); }
- .mr6-m { margin-right: var( --spacing-6, 64px ); }
- .mr7-m { margin-right: var( --spacing-7, 128px ); }
- .mr8-m { margin-right: var( --spacing-8, 256px ); }
- .mr9-m { margin-right: var( --spacing-9, 512px ); }
- .mb0-m { margin-bottom: var( --spacing-0, 0 ); }
- .mb1-m { margin-bottom: var( --spacing-1, 2px ); }
- .mb2-m { margin-bottom: var( --spacing-2, 4px ); }
- .mb3-m { margin-bottom: var( --spacing-3, 8px ); }
- .mb4-m { margin-bottom: var( --spacing-4, 16px ); }
- .mb5-m { margin-bottom: var( --spacing-5, 32px ); }
- .mb6-m { margin-bottom: var( --spacing-6, 64px ); }
- .mb7-m { margin-bottom: var( --spacing-7, 128px ); }
- .mb8-m { margin-bottom: var( --spacing-8, 256px ); }
- .mb9-m { margin-bottom: var( --spacing-9, 512px ); }
- .mt0-m { margin-top: var( --spacing-0, 0 ); }
- .mt1-m { margin-top: var( --spacing-1, 2px ); }
- .mt2-m { margin-top: var( --spacing-2, 4px ); }
- .mt3-m { margin-top: var( --spacing-3, 8px ); }
- .mt4-m { margin-top: var( --spacing-4, 16px ); }
- .mt5-m { margin-top: var( --spacing-5, 32px ); }
- .mt6-m { margin-top: var( --spacing-6, 64px ); }
- .mt7-m { margin-top: var( --spacing-7, 128px ); }
- .mt8-m { margin-top: var( --spacing-8, 256px ); }
- .mt9-m { margin-top: var( --spacing-9, 512px ); }
- .my0-m { margin-top: var( --spacing-0, 0 ); margin-bottom: var( --spacing-0, 0 ); }
- .my1-m { margin-top: var( --spacing-1, 2px ); margin-bottom: var( --spacing-1, 2px ); }
- .my2-m { margin-top: var( --spacing-2, 4px ); margin-bottom: var( --spacing-2, 4px ); }
- .my3-m { margin-top: var( --spacing-3, 8px ); margin-bottom: var( --spacing-3, 8px ); }
- .my4-m { margin-top: var( --spacing-4, 16px ); margin-bottom: var( --spacing-4, 16px ); }
- .my5-m { margin-top: var( --spacing-5, 32px ); margin-bottom: var( --spacing-5, 32px ); }
- .my6-m { margin-top: var( --spacing-6, 64px ); margin-bottom: var( --spacing-6, 64px ); }
- .my7-m { margin-top: var( --spacing-7, 128px ); margin-bottom: var( --spacing-7, 128px ); }
- .my8-m { margin-top: var( --spacing-8, 256px ); margin-bottom: var( --spacing-8, 256px ); }
- .my9-m { margin-top: var( --spacing-9, 512px ); margin-bottom: var( --spacing-9, 512px ); }
- .mx0-m { margin-left: var( --spacing-0, 0 ); margin-right: var( --spacing-0, 0 ); }
- .mx1-m { margin-left: var( --spacing-1, 2px ); margin-right: var( --spacing-1, 2px ); }
- .mx2-m { margin-left: var( --spacing-2, 4px ); margin-right: var( --spacing-2, 4px ); }
- .mx3-m { margin-left: var( --spacing-3, 8px ); margin-right: var( --spacing-3, 8px ); }
- .mx4-m { margin-left: var( --spacing-4, 16px ); margin-right: var( --spacing-4, 16px ); }
- .mx5-m { margin-left: var( --spacing-5, 32px ); margin-right: var( --spacing-5, 32px ); }
- .mx6-m { margin-left: var( --spacing-6, 64px ); margin-right: var( --spacing-6, 64px ); }
- .mx7-m { margin-left: var( --spacing-7, 128px ); margin-right: var( --spacing-7, 128px ); }
- .mx8-m { margin-left: var( --spacing-8, 256px ); margin-right: var( --spacing-8, 256px ); }
- .mx9-m { margin-left: var( --spacing-9, 512px ); margin-right: var( --spacing-9, 512px ); }
-}
-@container (min-width:64em) {
- .p0-l { padding: var( --spacing-0, 0 ); }
- .p1-l { padding: var( --spacing-1, 2px ); }
- .p2-l { padding: var( --spacing-2, 4px ); }
- .p3-l { padding: var( --spacing-3, 8px ); }
- .p4-l { padding: var( --spacing-4, 16px ); }
- .p5-l { padding: var( --spacing-5, 32px ); }
- .p6-l { padding: var( --spacing-6, 64px ); }
- .p7-l { padding: var( --spacing-7, 128px ); }
- .p8-l { padding: var( --spacing-8, 256px ); }
- .p9-l { padding: var( --spacing-9, 512px ); }
- .pl0-l { padding-left: var( --spacing-0, 0 ); }
- .pl1-l { padding-left: var( --spacing-1, 2px ); }
- .pl2-l { padding-left: var( --spacing-2, 4px ); }
- .pl3-l { padding-left: var( --spacing-3, 8px ); }
- .pl4-l { padding-left: var( --spacing-4, 16px ); }
- .pl5-l { padding-left: var( --spacing-5, 32px ); }
- .pl6-l { padding-left: var( --spacing-6, 64px ); }
- .pl7-l { padding-left: var( --spacing-7, 128px ); }
- .pl8-l { padding-left: var( --spacing-8, 256px ); }
- .pl9-l { padding-left: var( --spacing-9, 512px ); }
- .pr0-l { padding-right: var( --spacing-0, 0 ); }
- .pr1-l { padding-right: var( --spacing-1, 2px ); }
- .pr2-l { padding-right: var( --spacing-2, 4px ); }
- .pr3-l { padding-right: var( --spacing-3, 8px ); }
- .pr4-l { padding-right: var( --spacing-4, 16px ); }
- .pr5-l { padding-right: var( --spacing-5, 32px ); }
- .pr6-l { padding-right: var( --spacing-6, 64px ); }
- .pr7-l { padding-right: var( --spacing-7, 128px ); }
- .pr8-l { padding-right: var( --spacing-8, 256px ); }
- .pr9-l { padding-right: var( --spacing-9, 512px ); }
- .pb0-l { padding-bottom: var( --spacing-0, 0 ); }
- .pb1-l { padding-bottom: var( --spacing-1, 2px ); }
- .pb2-l { padding-bottom: var( --spacing-2, 4px ); }
- .pb3-l { padding-bottom: var( --spacing-3, 8px ); }
- .pb4-l { padding-bottom: var( --spacing-4, 16px ); }
- .pb5-l { padding-bottom: var( --spacing-5, 32px ); }
- .pb6-l { padding-bottom: var( --spacing-6, 64px ); }
- .pb7-l { padding-bottom: var( --spacing-7, 128px ); }
- .pb8-l { padding-bottom: var( --spacing-8, 256px ); }
- .pb9-l { padding-bottom: var( --spacing-9, 512px ); }
- .pt0-l { padding-top: var( --spacing-0, 0 ); }
- .pt1-l { padding-top: var( --spacing-1, 2px ); }
- .pt2-l { padding-top: var( --spacing-2, 4px ); }
- .pt3-l { padding-top: var( --spacing-3, 8px ); }
- .pt4-l { padding-top: var( --spacing-4, 16px ); }
- .pt5-l { padding-top: var( --spacing-5, 32px ); }
- .pt6-l { padding-top: var( --spacing-6, 64px ); }
- .pt7-l { padding-top: var( --spacing-7, 128px ); }
- .pt8-l { padding-top: var( --spacing-8, 256px ); }
- .pt9-l { padding-top: var( --spacing-9, 512px ); }
- .py0-l { padding-top: var( --spacing-0, 0 ); padding-bottom: var( --spacing-0, 0 ); }
- .py1-l { padding-top: var( --spacing-1, 2px ); padding-bottom: var( --spacing-1, 2px ); }
- .py2-l { padding-top: var( --spacing-2, 4px ); padding-bottom: var( --spacing-2, 4px ); }
- .py3-l { padding-top: var( --spacing-3, 8px ); padding-bottom: var( --spacing-3, 8px ); }
- .py4-l { padding-top: var( --spacing-4, 16px ); padding-bottom: var( --spacing-4, 16px ); }
- .py5-l { padding-top: var( --spacing-5, 32px ); padding-bottom: var( --spacing-5, 32px ); }
- .py6-l { padding-top: var( --spacing-6, 64px ); padding-bottom: var( --spacing-6, 64px ); }
- .py7-l { padding-top: var( --spacing-7, 128px ); padding-bottom: var( --spacing-7, 128px ); }
- .py8-l { padding-top: var( --spacing-8, 256px ); padding-bottom: var( --spacing-8, 256px ); }
- .py9-l { padding-top: var( --spacing-9, 512px ); padding-bottom: var( --spacing-9, 512px ); }
- .px0-l { padding-left: var( --spacing-0, 0 ); padding-right: var( --spacing-0, 0 ); }
- .px1-l { padding-left: var( --spacing-1, 2px ); padding-right: var( --spacing-1, 2px ); }
- .px2-l { padding-left: var( --spacing-2, 4px ); padding-right: var( --spacing-2, 4px ); }
- .px3-l { padding-left: var( --spacing-3, 8px ); padding-right: var( --spacing-3, 8px ); }
- .px4-l { padding-left: var( --spacing-4, 16px ); padding-right: var( --spacing-4, 16px ); }
- .px5-l { padding-left: var( --spacing-5, 32px ); padding-right: var( --spacing-5, 32px ); }
- .px6-l { padding-left: var( --spacing-6, 64px ); padding-right: var( --spacing-6, 64px ); }
- .px7-l { padding-left: var( --spacing-7, 128px ); padding-right: var( --spacing-7, 128px ); }
- .px8-l { padding-left: var( --spacing-8, 256px ); padding-right: var( --spacing-8, 256px ); }
- .px9-l { padding-left: var( --spacing-9, 512px ); padding-right: var( --spacing-9, 512px ); }
- .m0-l { margin: var( --spacing-0, 0 ); }
- .m1-l { margin: var( --spacing-1, 2px ); }
- .m2-l { margin: var( --spacing-2, 4px ); }
- .m3-l { margin: var( --spacing-3, 8px ); }
- .m4-l { margin: var( --spacing-4, 16px ); }
- .m5-l { margin: var( --spacing-5, 32px ); }
- .m6-l { margin: var( --spacing-6, 64px ); }
- .m7-l { margin: var( --spacing-7, 128px ); }
- .m8-l { margin: var( --spacing-8, 256px ); }
- .m9-l { margin: var( --spacing-9, 512px ); }
- .ml0-l { margin-left: var( --spacing-0, 0 ); }
- .ml1-l { margin-left: var( --spacing-3, 2px ); }
- .ml2-l { margin-left: var( --spacing-2, 4px ); }
- .ml3-l { margin-left: var( --spacing-3, 8px ); }
- .ml4-l { margin-left: var( --spacing-4, 16px ); }
- .ml5-l { margin-left: var( --spacing-5, 32px ); }
- .ml6-l { margin-left: var( --spacing-6, 64px ); }
- .ml7-l { margin-left: var( --spacing-7, 128px ); }
- .ml8-l { margin-left: var( --spacing-8, 256px ); }
- .ml9-l { margin-left: var( --spacing-9, 512px ); }
- .mr0-l { margin-right: var( --spacing-0, 0 ); }
- .mr1-l { margin-right: var( --spacing-1, 2px ); }
- .mr2-l { margin-right: var( --spacing-2, 4px ); }
- .mr3-l { margin-right: var( --spacing-3, 8px ); }
- .mr4-l { margin-right: var( --spacing-4, 16px ); }
- .mr5-l { margin-right: var( --spacing-5, 32px ); }
- .mr6-l { margin-right: var( --spacing-6, 64px ); }
- .mr7-l { margin-right: var( --spacing-7, 128px ); }
- .mr8-l { margin-right: var( --spacing-8, 256px ); }
- .mr9-l { margin-right: var( --spacing-9, 512px ); }
- .mb0-l { margin-bottom: var( --spacing-0, 0 ); }
- .mb1-l { margin-bottom: var( --spacing-1, 2px ); }
- .mb2-l { margin-bottom: var( --spacing-2, 4px ); }
- .mb3-l { margin-bottom: var( --spacing-3, 8px ); }
- .mb4-l { margin-bottom: var( --spacing-4, 16px ); }
- .mb5-l { margin-bottom: var( --spacing-5, 32px ); }
- .mb6-l { margin-bottom: var( --spacing-6, 64px ); }
- .mb7-l { margin-bottom: var( --spacing-7, 128px ); }
- .mb8-l { margin-bottom: var( --spacing-8, 256px ); }
- .mb9-l { margin-bottom: var( --spacing-9, 512px ); }
- .mt0-l { margin-top: var( --spacing-0, 0 ); }
- .mt1-l { margin-top: var( --spacing-1, 2px ); }
- .mt2-l { margin-top: var( --spacing-2, 4px ); }
- .mt3-l { margin-top: var( --spacing-3, 8px ); }
- .mt4-l { margin-top: var( --spacing-4, 16px ); }
- .mt5-l { margin-top: var( --spacing-5, 32px ); }
- .mt6-l { margin-top: var( --spacing-6, 64px ); }
- .mt7-l { margin-top: var( --spacing-7, 128px ); }
- .mt8-l { margin-top: var( --spacing-8, 256px ); }
- .mt9-l { margin-top: var( --spacing-9, 512px ); }
- .my0-l { margin-top: var( --spacing-0, 0 ); margin-bottom: var( --spacing-0, 0 ); }
- .my1-l { margin-top: var( --spacing-1, 2px ); margin-bottom: var( --spacing-1, 2px ); }
- .my2-l { margin-top: var( --spacing-2, 4px ); margin-bottom: var( --spacing-2, 4px ); }
- .my3-l { margin-top: var( --spacing-3, 8px ); margin-bottom: var( --spacing-3, 8px ); }
- .my4-l { margin-top: var( --spacing-4, 16px ); margin-bottom: var( --spacing-4, 16px ); }
- .my5-l { margin-top: var( --spacing-5, 32px ); margin-bottom: var( --spacing-5, 32px ); }
- .my6-l { margin-top: var( --spacing-6, 64px ); margin-bottom: var( --spacing-6, 64px ); }
- .my7-l { margin-top: var( --spacing-7, 128px ); margin-bottom: var( --spacing-7, 128px ); }
- .my8-l { margin-top: var( --spacing-8, 256px ); margin-bottom: var( --spacing-8, 256px ); }
- .my9-l { margin-top: var( --spacing-9, 512px ); margin-bottom: var( --spacing-9, 512px ); }
- .mx0-l { margin-left: var( --spacing-0, 0 ); margin-right: var( --spacing-0, 0 ); }
- .mx1-l { margin-left: var( --spacing-1, 2px ); margin-right: var( --spacing-1, 2px ); }
- .mx2-l { margin-left: var( --spacing-2, 4px ); margin-right: var( --spacing-2, 4px ); }
- .mx3-l { margin-left: var( --spacing-3, 8px ); margin-right: var( --spacing-3, 8px ); }
- .mx4-l { margin-left: var( --spacing-4, 16px ); margin-right: var( --spacing-4, 16px ); }
- .mx5-l { margin-left: var( --spacing-5, 32px ); margin-right: var( --spacing-5, 32px ); }
- .mx6-l { margin-left: var( --spacing-6, 64px ); margin-right: var( --spacing-6, 64px ); }
- .mx7-l { margin-left: var( --spacing-7, 128px ); margin-right: var( --spacing-7, 128px ); }
- .mx8-l { margin-left: var( --spacing-8, 256px ); margin-right: var( --spacing-8, 256px ); }
- .mx9-l { margin-left: var( --spacing-9, 512px ); margin-right: var( --spacing-9, 512px ); }
-}
-/*
- NEGATIVE MARGINS
-
- Base:
- n = negative
-
- Modifiers:
- a = all
- t = top
- r = right
- b = bottom
- l = left
-
- 1 = 1st step in spacing scale
- 2 = 2nd step in spacing scale
- 3 = 3rd step in spacing scale
- 4 = 4th step in spacing scale
- 5 = 5th step in spacing scale
- 6 = 6th step in spacing scale
- 7 = 7th step in spacing scale
-
- Media Query Extensions:
- -s = small
- -m = medium
- -l = large
-
-*/
-.na1 { margin: calc( -1 * var( --spacing-1 ) ); }
-.na2 { margin: calc( -1 * var( --spacing-2 ) ); }
-.na3 { margin: calc( -1 * var( --spacing-3 ) ); }
-.na4 { margin: calc( -1 * var( --spacing-4 ) ); }
-.na5 { margin: calc( -1 * var( --spacing-5 ) ); }
-.na6 { margin: calc( -1 * var( --spacing-6 ) ); }
-.na7 { margin: calc( -1 * var( --spacing-7 ) ); }
-.nl1 { margin-left: calc( -1 * var( --spacing-1 ) ); }
-.nl2 { margin-left: calc( -1 * var( --spacing-2 ) ); }
-.nl3 { margin-left: calc( -1 * var( --spacing-3 ) ); }
-.nl4 { margin-left: calc( -1 * var( --spacing-4 ) ); }
-.nl5 { margin-left: calc( -1 * var( --spacing-5 ) ); }
-.nl6 { margin-left: calc( -1 * var( --spacing-6 ) ); }
-.nl7 { margin-left: calc( -1 * var( --spacing-7 ) ); }
-.nr1 { margin-right: calc( -1 * var( --spacing-1 ) ); }
-.nr2 { margin-right: calc( -1 * var( --spacing-2 ) ); }
-.nr3 { margin-right: calc( -1 * var( --spacing-3 ) ); }
-.nr4 { margin-right: calc( -1 * var( --spacing-4 ) ); }
-.nr5 { margin-right: calc( -1 * var( --spacing-5 ) ); }
-.nr6 { margin-right: calc( -1 * var( --spacing-6 ) ); }
-.nr7 { margin-right: calc( -1 * var( --spacing-7 ) ); }
-.nb1 { margin-bottom: calc( -1 * var( --spacing-1 ) ); }
-.nb2 { margin-bottom: calc( -1 * var( --spacing-2 ) ); }
-.nb3 { margin-bottom: calc( -1 * var( --spacing-3 ) ); }
-.nb4 { margin-bottom: calc( -1 * var( --spacing-4 ) ); }
-.nb5 { margin-bottom: calc( -1 * var( --spacing-5 ) ); }
-.nb6 { margin-bottom: calc( -1 * var( --spacing-6 ) ); }
-.nb7 { margin-bottom: calc( -1 * var( --spacing-7 ) ); }
-.nt1 { margin-top: calc( -1 * var( --spacing-1 ) ); }
-.nt2 { margin-top: calc( -1 * var( --spacing-2 ) ); }
-.nt3 { margin-top: calc( -1 * var( --spacing-3 ) ); }
-.nt4 { margin-top: calc( -1 * var( --spacing-4 ) ); }
-.nt5 { margin-top: calc( -1 * var( --spacing-5 ) ); }
-.nt6 { margin-top: calc( -1 * var( --spacing-6 ) ); }
-.nt7 { margin-top: calc( -1 * var( --spacing-7 ) ); }
-@container (--breakpoint-2) {
- .na1-s { margin: calc( -1 * var( --spacing-1 ) ); }
- .na2-s { margin: calc( -1 * var( --spacing-2 ) ); }
- .na3-s { margin: calc( -1 * var( --spacing-3 ) ); }
- .na4-s { margin: calc( -1 * var( --spacing-4 ) ); }
- .na5-s { margin: calc( -1 * var( --spacing-5 ) ); }
- .na6-s { margin: calc( -1 * var( --spacing-6 ) ); }
- .na7-s { margin: calc( -1 * var( --spacing-7 ) ); }
- .nl1-s { margin-left: calc( -1 * var( --spacing-1 ) ); }
- .nl2-s { margin-left: calc( -1 * var( --spacing-2 ) ); }
- .nl3-s { margin-left: calc( -1 * var( --spacing-3 ) ); }
- .nl4-s { margin-left: calc( -1 * var( --spacing-4 ) ); }
- .nl5-s { margin-left: calc( -1 * var( --spacing-5 ) ); }
- .nl6-s { margin-left: calc( -1 * var( --spacing-6 ) ); }
- .nl7-s { margin-left: calc( -1 * var( --spacing-7 ) ); }
- .nr1-s { margin-right: calc( -1 * var( --spacing-1 ) ); }
- .nr2-s { margin-right: calc( -1 * var( --spacing-2 ) ); }
- .nr3-s { margin-right: calc( -1 * var( --spacing-3 ) ); }
- .nr4-s { margin-right: calc( -1 * var( --spacing-4 ) ); }
- .nr5-s { margin-right: calc( -1 * var( --spacing-5 ) ); }
- .nr6-s { margin-right: calc( -1 * var( --spacing-6 ) ); }
- .nr7-s { margin-right: calc( -1 * var( --spacing-7 ) ); }
- .nb1-s { margin-bottom: calc( -1 * var( --spacing-1 ) ); }
- .nb2-s { margin-bottom: calc( -1 * var( --spacing-2 ) ); }
- .nb3-s { margin-bottom: calc( -1 * var( --spacing-3 ) ); }
- .nb4-s { margin-bottom: calc( -1 * var( --spacing-4 ) ); }
- .nb5-s { margin-bottom: calc( -1 * var( --spacing-5 ) ); }
- .nb6-s { margin-bottom: calc( -1 * var( --spacing-6 ) ); }
- .nb7-s { margin-bottom: calc( -1 * var( --spacing-7 ) ); }
- .nt1-s { margin-top: calc( -1 * var( --spacing-1 ) ); }
- .nt2-s { margin-top: calc( -1 * var( --spacing-2 ) ); }
- .nt3-s { margin-top: calc( -1 * var( --spacing-3 ) ); }
- .nt4-s { margin-top: calc( -1 * var( --spacing-4 ) ); }
- .nt5-s { margin-top: calc( -1 * var( --spacing-5 ) ); }
- .nt6-s { margin-top: calc( -1 * var( --spacing-6 ) ); }
- .nt7-s { margin-top: calc( -1 * var( --spacing-7 ) ); }
-}
-@container (--breakpoint-3) {
- .na1-m { margin: calc( -1 * var( --spacing-1 ) ); }
- .na2-m { margin: calc( -1 * var( --spacing-2 ) ); }
- .na3-m { margin: calc( -1 * var( --spacing-3 ) ); }
- .na4-m { margin: calc( -1 * var( --spacing-4 ) ); }
- .na5-m { margin: calc( -1 * var( --spacing-5 ) ); }
- .na6-m { margin: calc( -1 * var( --spacing-6 ) ); }
- .na7-m { margin: calc( -1 * var( --spacing-7 ) ); }
- .nl1-m { margin-left: calc( -1 * var( --spacing-1 ) ); }
- .nl2-m { margin-left: calc( -1 * var( --spacing-2 ) ); }
- .nl3-m { margin-left: calc( -1 * var( --spacing-3 ) ); }
- .nl4-m { margin-left: calc( -1 * var( --spacing-4 ) ); }
- .nl5-m { margin-left: calc( -1 * var( --spacing-5 ) ); }
- .nl6-m { margin-left: calc( -1 * var( --spacing-6 ) ); }
- .nl7-m { margin-left: calc( -1 * var( --spacing-7 ) ); }
- .nr1-m { margin-right: calc( -1 * var( --spacing-1 ) ); }
- .nr2-m { margin-right: calc( -1 * var( --spacing-2 ) ); }
- .nr3-m { margin-right: calc( -1 * var( --spacing-3 ) ); }
- .nr4-m { margin-right: calc( -1 * var( --spacing-4 ) ); }
- .nr5-m { margin-right: calc( -1 * var( --spacing-5 ) ); }
- .nr6-m { margin-right: calc( -1 * var( --spacing-6 ) ); }
- .nr7-m { margin-right: calc( -1 * var( --spacing-7 ) ); }
- .nb1-m { margin-bottom: calc( -1 * var( --spacing-1 ) ); }
- .nb2-m { margin-bottom: calc( -1 * var( --spacing-2 ) ); }
- .nb3-m { margin-bottom: calc( -1 * var( --spacing-3 ) ); }
- .nb4-m { margin-bottom: calc( -1 * var( --spacing-4 ) ); }
- .nb5-m { margin-bottom: calc( -1 * var( --spacing-5 ) ); }
- .nb6-m { margin-bottom: calc( -1 * var( --spacing-6 ) ); }
- .nb7-m { margin-bottom: calc( -1 * var( --spacing-7 ) ); }
- .nt1-m { margin-top: calc( -1 * var( --spacing-1 ) ); }
- .nt2-m { margin-top: calc( -1 * var( --spacing-2 ) ); }
- .nt3-m { margin-top: calc( -1 * var( --spacing-3 ) ); }
- .nt4-m { margin-top: calc( -1 * var( --spacing-4 ) ); }
- .nt5-m { margin-top: calc( -1 * var( --spacing-5 ) ); }
- .nt6-m { margin-top: calc( -1 * var( --spacing-6 ) ); }
- .nt7-m { margin-top: calc( -1 * var( --spacing-7 ) ); }
-}
-@container (min-width:64em) {
- .na1-l { margin: calc( -1 * var( --spacing-1 ) ); }
- .na2-l { margin: calc( -1 * var( --spacing-2 ) ); }
- .na3-l { margin: calc( -1 * var( --spacing-3 ) ); }
- .na4-l { margin: calc( -1 * var( --spacing-4 ) ); }
- .na5-l { margin: calc( -1 * var( --spacing-5 ) ); }
- .na6-l { margin: calc( -1 * var( --spacing-6 ) ); }
- .na7-l { margin: calc( -1 * var( --spacing-7 ) ); }
- .nl1-l { margin-left: calc( -1 * var( --spacing-1 ) ); }
- .nl2-l { margin-left: calc( -1 * var( --spacing-2 ) ); }
- .nl3-l { margin-left: calc( -1 * var( --spacing-3 ) ); }
- .nl4-l { margin-left: calc( -1 * var( --spacing-4 ) ); }
- .nl5-l { margin-left: calc( -1 * var( --spacing-5 ) ); }
- .nl6-l { margin-left: calc( -1 * var( --spacing-6 ) ); }
- .nl7-l { margin-left: calc( -1 * var( --spacing-7 ) ); }
- .nr1-l { margin-right: calc( -1 * var( --spacing-1 ) ); }
- .nr2-l { margin-right: calc( -1 * var( --spacing-2 ) ); }
- .nr3-l { margin-right: calc( -1 * var( --spacing-3 ) ); }
- .nr4-l { margin-right: calc( -1 * var( --spacing-4 ) ); }
- .nr5-l { margin-right: calc( -1 * var( --spacing-5 ) ); }
- .nr6-l { margin-right: calc( -1 * var( --spacing-6 ) ); }
- .nr7-l { margin-right: calc( -1 * var( --spacing-7 ) ); }
- .nb1-l { margin-bottom: calc( -1 * var( --spacing-1 ) ); }
- .nb2-l { margin-bottom: calc( -1 * var( --spacing-2 ) ); }
- .nb3-l { margin-bottom: calc( -1 * var( --spacing-3 ) ); }
- .nb4-l { margin-bottom: calc( -1 * var( --spacing-4 ) ); }
- .nb5-l { margin-bottom: calc( -1 * var( --spacing-5 ) ); }
- .nb6-l { margin-bottom: calc( -1 * var( --spacing-6 ) ); }
- .nb7-l { margin-bottom: calc( -1 * var( --spacing-7 ) ); }
- .nt1-l { margin-top: calc( -1 * var( --spacing-1 ) ); }
- .nt2-l { margin-top: calc( -1 * var( --spacing-2 ) ); }
- .nt3-l { margin-top: calc( -1 * var( --spacing-3 ) ); }
- .nt4-l { margin-top: calc( -1 * var( --spacing-4 ) ); }
- .nt5-l { margin-top: calc( -1 * var( --spacing-5 ) ); }
- .nt6-l { margin-top: calc( -1 * var( --spacing-6 ) ); }
- .nt7-l { margin-top: calc( -1 * var( --spacing-7 ) ); }
-}
-/*
-
- TABLES
- Docs: http://tachyons.io/docs/elements/tables/
-
-*/
-.collapse { border-collapse: collapse; border-spacing: 0; }
-.striped--light:nth-child(odd) { background-color: var( --gray-10 ); }
-.striped--dark:nth-child(odd) { background-color: var( --gray-0 ); }
-/*
-
- TEXT DECORATION
- Docs: http://tachyons.io/docs/typography/text-decoration/
-
-
- Media Query Extensions:
- -s = small
- -m = medium
- -l = large
-
-*/
-.strike { text-decoration: line-through; }
-.underline { text-decoration: underline; }
-.no-underline { text-decoration: none; }
-/*
+ Media query values can be changed to fit your own content.
+ There are no magic bullets when it comes to media query width values.
+ They should be declared in em units - and they should be set to meet
+ the needs of your content. You can also add additional media queries,
+ or remove some of the existing ones.
- TEXT ALIGN
- Docs: http://tachyons.io/docs/typography/text-align/
+ These media queries can be referenced like so:
- Base
- t = text-align
+ @media (--breakpoint-not-small) {
+ .medium-and-larger-specific-style {
+ background-color: red;
+ }
+ }
- Modifiers
- l = left
- r = right
- c = center
- j = justify
+ @media (--breakpoint-medium) {
+ .medium-screen-specific-style {
+ background-color: red;
+ }
+ }
- Media Query Extensions:
- -s = small
- -m = medium
- -l = large
+ @media (--breakpoint-large) {
+ .large-and-larger-screen-specific-style {
+ background-color: red;
+ }
+ }
*/
-.tl { text-align: left; }
-.tr { text-align: right; }
-.tc { text-align: center; }
-.tj { text-align: justify; }
-@container (min-width:30em) {
- .tl-s { text-align: left; }
- .tr-s { text-align: right; }
- .tc-s { text-align: center; }
- .tj-s { text-align: justify; }
-}
-@container (min-width:48em) {
- .tl-m { text-align: left; }
- .tr-m { text-align: right; }
- .tc-m { text-align: center; }
- .tj-m { text-align: justify; }
-}
-@container (min-width:64em) {
- .tl-l { text-align: left; }
- .tr-l { text-align: right; }
- .tc-l { text-align: center; }
- .tj-l { text-align: justify; }
-}
+/* Media Queries */
+/* Debugging */
/*
- TEXT TRANSFORM
- Docs: http://tachyons.io/docs/typography/text-transform/
-
- Base:
- tt = text-transform
-
- Modifiers
- c = capitalize
- l = lowercase
- u = uppercase
- n = none
-
- Media Query Extensions:
- -s = small
- -m = medium
- -l = large
-
-*/
-.ttc { text-transform: capitalize; }
-.ttl { text-transform: lowercase; }
-.ttu { text-transform: uppercase; }
-.ttn { text-transform: none; }
-@container (min-width:30em) {
- .ttc-s { text-transform: capitalize; }
- .ttl-s { text-transform: lowercase; }
- .ttu-s { text-transform: uppercase; }
- .ttn-s { text-transform: none; }
-}
-@container (min-width:48em) {
- .ttc-m { text-transform: capitalize; }
- .ttl-m { text-transform: lowercase; }
- .ttu-m { text-transform: uppercase; }
- .ttn-m { text-transform: none; }
-}
-@container (min-width:64em) {
- .ttc-l { text-transform: capitalize; }
- .ttl-l { text-transform: lowercase; }
- .ttu-l { text-transform: uppercase; }
- .ttn-l { text-transform: none; }
-}
-/*
-
- TYPE SCALE
- Docs: http://tachyons.io/docs/type-scale
-
- Base:
- f = font-size
+ DEBUG CHILDREN
+ Docs: http://tachyons.io/docs/debug/
- Modifiers
- 1 = 1st step in size scale
- 2 = 2nd step in size scale
- 3 = 3rd step in size scale
- 4 = 4th step in size scale
- 5 = 5th step in size scale
- 6 = 6th step in size scale
- 7 = 7th step in size scale
- 8 = 8th step in size scale
- 9 = 9th step in size scale
- 10 = 10th step in size scale
- 11 = 11th step in size scale
- 12 = 12th step in size scale
+ Just add the debug class to any element to see outlines on its
+ children.
- Media Query Extensions:
- -s = small
- -m = medium
- -l = large
*/
-/* Type Scale */
-.f1 { font-size: var( --font-size-1, .75rem ); }
-.f2 { font-size: var( --font-size-2, .875rem ); }
-.f3 { font-size: var( --font-size-3, 1rem ); }
-.f4 { font-size: var( --font-size-4, 1.125rem ); }
-.f5 { font-size: var( --font-size-5, 1.25rem ); }
-.f6 { font-size: var( --font-size-6, 1.5rem ); }
-.f7 { font-size: var( --font-size-7, 2rem ); }
-.f8 { font-size: var( --font-size-8, 3rem ); }
-.f9 { font-size: var( --font-size-9, 4rem ); }
-.f10 { font-size: var( --font-size-10, 6rem ); }
-.f11 { font-size: var( --font-size-11, 8rem ); }
-.f12 { font-size: var( --font-size-12, 12rem ); }
-@container (min-width:30em) {
- .f1-s { font-size: var( --font-size-1, .75rem ); }
- .f2-s { font-size: var( --font-size-2, .875rem ); }
- .f3-s { font-size: var( --font-size-3, 1rem ); }
- .f4-s { font-size: var( --font-size-4, 1.125rem ); }
- .f5-s { font-size: var( --font-size-5, 1.25rem ); }
- .f6-s { font-size: var( --font-size-6, 1.5rem ); }
- .f7-s { font-size: var( --font-size-7, 2rem ); }
- .f8-s { font-size: var( --font-size-8, 3rem ); }
- .f9-s { font-size: var( --font-size-9, 4rem ); }
- .f10-s { font-size: var( --font-size-10, 6rem ); }
- .f11-s { font-size: var( --font-size-11, 8rem ); }
- .f12-s { font-size: var( --font-size-12, 12rem ); }
-}
-@container (min-width:48em) {
- .f1-m { font-size: var( --font-size-1, .75rem ); }
- .f2-m { font-size: var( --font-size-2, .875rem ); }
- .f3-m { font-size: var( --font-size-3, 1rem ); }
- .f4-m { font-size: var( --font-size-4, 1.125rem ); }
- .f5-m { font-size: var( --font-size-5, 1.25rem ); }
- .f6-m { font-size: var( --font-size-6, 1.5rem ); }
- .f7-m { font-size: var( --font-size-7, 2rem ); }
- .f8-m { font-size: var( --font-size-8, 3rem ); }
- .f9-m { font-size: var( --font-size-9, 4rem ); }
- .f10-m { font-size: var( --font-size-10, 6rem ); }
- .f11-m { font-size: var( --font-size-11, 8rem ); }
- .f12-m { font-size: var( --font-size-12, 12rem ); }
-}
-@container (min-width:64em) {
- .f1-l { font-size: var( --font-size-1, .75rem ); }
- .f2-l { font-size: var( --font-size-2, .875rem ); }
- .f3-l { font-size: var( --font-size-3, 1rem ); }
- .f4-l { font-size: var( --font-size-4, 1.125rem ); }
- .f5-l { font-size: var( --font-size-5, 1.25rem ); }
- .f6-l { font-size: var( --font-size-6, 1.5rem ); }
- .f7-l { font-size: var( --font-size-7, 2rem ); }
- .f8-l { font-size: var( --font-size-8, 3rem ); }
- .f9-l { font-size: var( --font-size-9, 4rem ); }
- .f10-l { font-size: var( --font-size-10, 6rem ); }
- .f11-l { font-size: var( --font-size-11, 8rem ); }
- .f12-l { font-size: var( --font-size-12, 12rem ); }
-}
+.debug * { outline: 1px solid gold; }
+.debug-white * { outline: 1px solid white; }
+.debug-black * { outline: 1px solid black; }
/*
- TYPOGRAPHY
- http://tachyons.io/docs/typography/measure/
+ DEBUG GRID
+ http://tachyons.io/docs/debug-grid/
- Media Query Extensions:
- -s = small
- -m = medium
- -l = large
+ Can be useful for debugging layout issues
+ or helping to make sure things line up perfectly.
+ Just tack one of these classes onto a parent element.
*/
-/* Measure is limited to 66 characters */
-.measure { max-width: var( --measure, 66ch ); }
-/* Measure is limited to ~80 characters */
-.measure-wide { max-width: var( --measure-wide, 80ch ); }
-/* Measure is limited to 45 characters */
-.measure-narrow { max-width: var( --measure-narrow, 45ch ); }
-/* Book paragraph style - paragraphs are indented with no vertical spacing. */
-.indent { text-indent: 1em; margin-top: 0; margin-bottom: 0; }
-.small-caps { font-variant: small-caps; }
-/* Combine this class with a width to truncate text (or just leave as is to truncate at width of containing element. */
-.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-@container (min-width:30em) {
- .measure-s { max-width: var( --measure, 66ch ); }
- .measure-wide-s { max-width: var( --measure-wide, 80ch ); }
- .measure-narrow-s { max-width: var( --measure-narrow, 45ch ); }
- .small-caps-s { font-variant: small-caps; }
- .indent-s { text-indent: 1em; margin-top: 0; margin-bottom: 0; }
- .truncate-s { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-}
-@container (min-width:48em) {
- .measure-m { max-width: var( --measure, 66ch ); }
- .measure-wide-m { max-width: var( --measure-wide, 80ch ); }
- .measure-narrow-m { max-width: var( --measure-narrow, 45ch ); }
- .small-caps-m { font-variant: small-caps; }
- .indent-m { text-indent: 1em; margin-top: 0; margin-bottom: 0; }
- .truncate-m { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-}
-@container (min-width:64em) {
- .measure-l { max-width: var( --measure, 66ch ); }
- .measure-wide-l { max-width: var( --measure-wide, 80ch ); }
- .measure-narrow-l { max-width: var( --measure-narrow, 45ch ); }
- .small-caps-l { font-variant: small-caps; }
- .indent-l { text-indent: 1em; margin-top: 0; margin-bottom: 0; }
- .truncate-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-}
-/*
-
- UTILITIES
-
- Media Query Extensions:
- -s = small
- -m = medium
- -l = large
-
-*/
-.center { margin-right: auto; margin-left: auto; }
-.mr-auto { margin-right: auto; }
-.ml-auto { margin-left: auto; }
-@container (min-width:30em) {
- .center-s { margin-right: auto; margin-left: auto; }
- .mr-auto-s { margin-right: auto; }
- .ml-auto-s { margin-left: auto; }
-}
-@container (min-width:48em) {
+.debug-grid { background: transparent url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAFElEQVR4AWPAC97/9x0eCsAEPgwAVLshdpENIxcAAAAASUVORK5CYII= ) repeat top left; }
+.debug-grid-16 { background: transparent url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMklEQVR4AWOgCLz/b0epAa6UGuBOqQHOQHLUgFEDnAbcBZ4UGwDOkiCnkIhdgNgNxAYAiYlD+8sEuo8AAAAASUVORK5CYII= ) repeat top left; }
+.debug-grid-8-solid { background: white url( data:image/gif;base64,R0lGODdhCAAIAPEAAADw/wDx/////wAAACwAAAAACAAIAAACDZQvgaeb/lxbAIKA8y0AOw== ) repeat top left; }
+.debug-grid-16-solid { background: white url( data:image/gif;base64,R0lGODdhEAAQAPEAAADw/wDx/xXy/////ywAAAAAEAAQAAACIZyPKckYDQFsb6ZqD85jZ2+BkwiRFKehhqQCQgDHcgwEBQA7 ) repeat top left; }
+/* Uncomment out the line below to help debug layout issues */
+/* @import './_debug'; */
+@media screen and (min-width: 30em) {
+ .aspect-ratio-ns { height: 0; position: relative; }
+ .aspect-ratio--16x9-ns { padding-bottom: 56.25%; }
+ .aspect-ratio--9x16-ns { padding-bottom: 177.77%; }
+ .aspect-ratio--4x3-ns { padding-bottom: 75%; }
+ .aspect-ratio--3x4-ns { padding-bottom: 133.33%; }
+ .aspect-ratio--6x4-ns { padding-bottom: 66.6%; }
+ .aspect-ratio--4x6-ns { padding-bottom: 150%; }
+ .aspect-ratio--8x5-ns { padding-bottom: 62.5%; }
+ .aspect-ratio--5x8-ns { padding-bottom: 160%; }
+ .aspect-ratio--7x5-ns { padding-bottom: 71.42%; }
+ .aspect-ratio--5x7-ns { padding-bottom: 140%; }
+ .aspect-ratio--1x1-ns { padding-bottom: 100%; }
+ .aspect-ratio--object-ns { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 100; }
+ .cover-ns { background-size: cover !important; }
+ .contain-ns { background-size: contain !important; }
+ .bg-center-ns { background-repeat: no-repeat; background-position: center center; }
+ .bg-top-ns { background-repeat: no-repeat; background-position: top center; }
+ .bg-right-ns { background-repeat: no-repeat; background-position: center right; }
+ .bg-bottom-ns { background-repeat: no-repeat; background-position: bottom center; }
+ .bg-left-ns { background-repeat: no-repeat; background-position: center left; }
+ .outline-ns { outline: 1px solid; }
+ .outline-transparent-ns { outline: 1px solid transparent; }
+ .outline-0-ns { outline: 0; }
+ .ba-ns { border-style: solid; border-width: 1px; }
+ .bt-ns { border-top-style: solid; border-top-width: 1px; }
+ .br-ns { border-right-style: solid; border-right-width: 1px; }
+ .bb-ns { border-bottom-style: solid; border-bottom-width: 1px; }
+ .bl-ns { border-left-style: solid; border-left-width: 1px; }
+ .bn-ns { border-style: none; border-width: 0; }
+ .br0-ns { border-radius: 0; }
+ .br1-ns { border-radius: .125rem; }
+ .br2-ns { border-radius: .25rem; }
+ .br3-ns { border-radius: .5rem; }
+ .br4-ns { border-radius: 1rem; }
+ .br-100-ns { border-radius: 100%; }
+ .br-pill-ns { border-radius: 9999px; }
+ .br--bottom-ns { border-top-left-radius: 0; border-top-right-radius: 0; }
+ .br--top-ns { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
+ .br--right-ns { border-top-left-radius: 0; border-bottom-left-radius: 0; }
+ .br--left-ns { border-top-right-radius: 0; border-bottom-right-radius: 0; }
+ .br-inherit-ns { border-radius: inherit; }
+ .br-initial-ns { border-radius: initial; }
+ .br-unset-ns { border-radius: unset; }
+ .b--dotted-ns { border-style: dotted; }
+ .b--dashed-ns { border-style: dashed; }
+ .b--solid-ns { border-style: solid; }
+ .b--none-ns { border-style: none; }
+ .bw0-ns { border-width: 0; }
+ .bw1-ns { border-width: .125rem; }
+ .bw2-ns { border-width: .25rem; }
+ .bw3-ns { border-width: .5rem; }
+ .bw4-ns { border-width: 1rem; }
+ .bw5-ns { border-width: 2rem; }
+ .bt-0-ns { border-top-width: 0; }
+ .br-0-ns { border-right-width: 0; }
+ .bb-0-ns { border-bottom-width: 0; }
+ .bl-0-ns { border-left-width: 0; }
+ .shadow-1-ns { box-shadow: 0 0 4px 2px rgba( 0, 0, 0, .2 ); }
+ .shadow-2-ns { box-shadow: 0 0 8px 2px rgba( 0, 0, 0, .2 ); }
+ .shadow-3-ns { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, .2 ); }
+ .shadow-4-ns { box-shadow: 2px 2px 8px 0 rgba( 0, 0, 0, .2 ); }
+ .shadow-5-ns { box-shadow: 4px 4px 8px 0 rgba( 0, 0, 0, .2 ); }
+ .top-0-ns { top: 0; }
+ .left-0-ns { left: 0; }
+ .right-0-ns { right: 0; }
+ .bottom-0-ns { bottom: 0; }
+ .top-1-ns { top: 1rem; }
+ .left-1-ns { left: 1rem; }
+ .right-1-ns { right: 1rem; }
+ .bottom-1-ns { bottom: 1rem; }
+ .top-2-ns { top: 2rem; }
+ .left-2-ns { left: 2rem; }
+ .right-2-ns { right: 2rem; }
+ .bottom-2-ns { bottom: 2rem; }
+ .top--1-ns { top: -1rem; }
+ .right--1-ns { right: -1rem; }
+ .bottom--1-ns { bottom: -1rem; }
+ .left--1-ns { left: -1rem; }
+ .top--2-ns { top: -2rem; }
+ .right--2-ns { right: -2rem; }
+ .bottom--2-ns { bottom: -2rem; }
+ .left--2-ns { left: -2rem; }
+ .absolute--fill-ns { top: 0; right: 0; bottom: 0; left: 0; }
+ .cl-ns { clear: left; }
+ .cr-ns { clear: right; }
+ .cb-ns { clear: both; }
+ .cn-ns { clear: none; }
+ .dn-ns { display: none; }
+ .di-ns { display: inline; }
+ .db-ns { display: block; }
+ .dib-ns { display: inline-block; }
+ .dit-ns { display: inline-table; }
+ .dt-ns { display: table; }
+ .dtc-ns { display: table-cell; }
+ .dt-row-ns { display: table-row; }
+ .dt-row-group-ns { display: table-row-group; }
+ .dt-column-ns { display: table-column; }
+ .dt-column-group-ns { display: table-column-group; }
+ .dt--fixed-ns { table-layout: fixed; width: 100%; }
+ .flex-ns { display: flex; }
+ .inline-flex-ns { display: inline-flex; }
+ .flex-auto-ns { flex: 1 1 auto; min-width: 0; /* 1 */ min-height: 0; /* 1 */ }
+ .flex-none-ns { flex: none; }
+ .flex-column-ns { flex-direction: column; }
+ .flex-row-ns { flex-direction: row; }
+ .flex-wrap-ns { flex-wrap: wrap; }
+ .flex-nowrap-ns { flex-wrap: nowrap; }
+ .flex-wrap-reverse-ns { flex-wrap: wrap-reverse; }
+ .flex-column-reverse-ns { flex-direction: column-reverse; }
+ .flex-row-reverse-ns { flex-direction: row-reverse; }
+ .items-start-ns { align-items: flex-start; }
+ .items-end-ns { align-items: flex-end; }
+ .items-center-ns { align-items: center; }
+ .items-baseline-ns { align-items: baseline; }
+ .items-stretch-ns { align-items: stretch; }
+ .self-start-ns { align-self: flex-start; }
+ .self-end-ns { align-self: flex-end; }
+ .self-center-ns { align-self: center; }
+ .self-baseline-ns { align-self: baseline; }
+ .self-stretch-ns { align-self: stretch; }
+ .justify-start-ns { justify-content: flex-start; }
+ .justify-end-ns { justify-content: flex-end; }
+ .justify-center-ns { justify-content: center; }
+ .justify-between-ns { justify-content: space-between; }
+ .justify-around-ns { justify-content: space-around; }
+ .content-start-ns { align-content: flex-start; }
+ .content-end-ns { align-content: flex-end; }
+ .content-center-ns { align-content: center; }
+ .content-between-ns { align-content: space-between; }
+ .content-around-ns { align-content: space-around; }
+ .content-stretch-ns { align-content: stretch; }
+ .order-0-ns { order: 0; }
+ .order-1-ns { order: 1; }
+ .order-2-ns { order: 2; }
+ .order-3-ns { order: 3; }
+ .order-4-ns { order: 4; }
+ .order-5-ns { order: 5; }
+ .order-6-ns { order: 6; }
+ .order-7-ns { order: 7; }
+ .order-8-ns { order: 8; }
+ .order-last-ns { order: 99999; }
+ .flex-grow-0-ns { flex-grow: 0; }
+ .flex-grow-1-ns { flex-grow: 1; }
+ .flex-shrink-0-ns { flex-shrink: 0; }
+ .flex-shrink-1-ns { flex-shrink: 1; }
+ .fl-ns { float: left; _display: inline; }
+ .fr-ns { float: right; _display: inline; }
+ .fn-ns { float: none; }
+ .i-ns { font-style: italic; }
+ .fs-normal-ns { font-style: normal; }
+ .normal-ns { font-weight: normal; }
+ .b-ns { font-weight: bold; }
+ .fw1-ns { font-weight: 100; }
+ .fw2-ns { font-weight: 200; }
+ .fw3-ns { font-weight: 300; }
+ .fw4-ns { font-weight: 400; }
+ .fw5-ns { font-weight: 500; }
+ .fw6-ns { font-weight: 600; }
+ .fw7-ns { font-weight: 700; }
+ .fw8-ns { font-weight: 800; }
+ .fw9-ns { font-weight: 900; }
+ .h1-ns { height: 1rem; }
+ .h2-ns { height: 2rem; }
+ .h3-ns { height: 4rem; }
+ .h4-ns { height: 8rem; }
+ .h5-ns { height: 16rem; }
+ .h-25-ns { height: 25%; }
+ .h-50-ns { height: 50%; }
+ .h-75-ns { height: 75%; }
+ .h-100-ns { height: 100%; }
+ .min-h-100-ns { min-height: 100%; }
+ .vh-25-ns { height: 25vh; }
+ .vh-50-ns { height: 50vh; }
+ .vh-75-ns { height: 75vh; }
+ .vh-100-ns { height: 100vh; }
+ .min-vh-100-ns { min-height: 100vh; }
+ .h-auto-ns { height: auto; }
+ .h-inherit-ns { height: inherit; }
+ .tracked-ns { letter-spacing: .1em; }
+ .tracked-tight-ns { letter-spacing: -.05em; }
+ .tracked-mega-ns { letter-spacing: .25em; }
+ .lh-solid-ns { line-height: 1; }
+ .lh-title-ns { line-height: 1.25; }
+ .lh-copy-ns { line-height: 1.5; }
+ .mw-100-ns { max-width: 100%; }
+ .mw1-ns { max-width: 1rem; }
+ .mw2-ns { max-width: 2rem; }
+ .mw3-ns { max-width: 4rem; }
+ .mw4-ns { max-width: 8rem; }
+ .mw5-ns { max-width: 16rem; }
+ .mw6-ns { max-width: 32rem; }
+ .mw7-ns { max-width: 48rem; }
+ .mw8-ns { max-width: 64rem; }
+ .mw9-ns { max-width: 96rem; }
+ .mw-none-ns { max-width: none; }
+ .w1-ns { width: 1rem; }
+ .w2-ns { width: 2rem; }
+ .w3-ns { width: 4rem; }
+ .w4-ns { width: 8rem; }
+ .w5-ns { width: 16rem; }
+ .w-10-ns { width: 10%; }
+ .w-20-ns { width: 20%; }
+ .w-25-ns { width: 25%; }
+ .w-30-ns { width: 30%; }
+ .w-33-ns { width: 33%; }
+ .w-34-ns { width: 34%; }
+ .w-40-ns { width: 40%; }
+ .w-50-ns { width: 50%; }
+ .w-60-ns { width: 60%; }
+ .w-70-ns { width: 70%; }
+ .w-75-ns { width: 75%; }
+ .w-80-ns { width: 80%; }
+ .w-90-ns { width: 90%; }
+ .w-100-ns { width: 100%; }
+ .w-third-ns { width: 33.33333%; }
+ .w-two-thirds-ns { width: 66.66667%; }
+ .w-auto-ns { width: auto; }
+ .overflow-visible-ns { overflow: visible; }
+ .overflow-hidden-ns { overflow: hidden; }
+ .overflow-scroll-ns { overflow: scroll; }
+ .overflow-auto-ns { overflow: auto; }
+ .overflow-x-visible-ns { overflow-x: visible; }
+ .overflow-x-hidden-ns { overflow-x: hidden; }
+ .overflow-x-scroll-ns { overflow-x: scroll; }
+ .overflow-x-auto-ns { overflow-x: auto; }
+ .overflow-y-visible-ns { overflow-y: visible; }
+ .overflow-y-hidden-ns { overflow-y: hidden; }
+ .overflow-y-scroll-ns { overflow-y: scroll; }
+ .overflow-y-auto-ns { overflow-y: auto; }
+ .static-ns { position: static; }
+ .relative-ns { position: relative; }
+ .absolute-ns { position: absolute; }
+ .fixed-ns { position: fixed; }
+ .rotate-45-ns { -webkit-transform: rotate( 45deg ); transform: rotate( 45deg ); }
+ .rotate-90-ns { -webkit-transform: rotate( 90deg ); transform: rotate( 90deg ); }
+ .rotate-135-ns { -webkit-transform: rotate( 135deg ); transform: rotate( 135deg ); }
+ .rotate-180-ns { -webkit-transform: rotate( 180deg ); transform: rotate( 180deg ); }
+ .rotate-225-ns { -webkit-transform: rotate( 225deg ); transform: rotate( 225deg ); }
+ .rotate-270-ns { -webkit-transform: rotate( 270deg ); transform: rotate( 270deg ); }
+ .rotate-315-ns { -webkit-transform: rotate( 315deg ); transform: rotate( 315deg ); }
+ .pa0-ns { padding: 0; }
+ .pa1-ns { padding: .25rem; }
+ .pa2-ns { padding: .5rem; }
+ .pa3-ns { padding: 1rem; }
+ .pa4-ns { padding: 2rem; }
+ .pa5-ns { padding: 4rem; }
+ .pa6-ns { padding: 8rem; }
+ .pa7-ns { padding: 16rem; }
+ .pl0-ns { padding-left: 0; }
+ .pl1-ns { padding-left: .25rem; }
+ .pl2-ns { padding-left: .5rem; }
+ .pl3-ns { padding-left: 1rem; }
+ .pl4-ns { padding-left: 2rem; }
+ .pl5-ns { padding-left: 4rem; }
+ .pl6-ns { padding-left: 8rem; }
+ .pl7-ns { padding-left: 16rem; }
+ .pr0-ns { padding-right: 0; }
+ .pr1-ns { padding-right: .25rem; }
+ .pr2-ns { padding-right: .5rem; }
+ .pr3-ns { padding-right: 1rem; }
+ .pr4-ns { padding-right: 2rem; }
+ .pr5-ns { padding-right: 4rem; }
+ .pr6-ns { padding-right: 8rem; }
+ .pr7-ns { padding-right: 16rem; }
+ .pb0-ns { padding-bottom: 0; }
+ .pb1-ns { padding-bottom: .25rem; }
+ .pb2-ns { padding-bottom: .5rem; }
+ .pb3-ns { padding-bottom: 1rem; }
+ .pb4-ns { padding-bottom: 2rem; }
+ .pb5-ns { padding-bottom: 4rem; }
+ .pb6-ns { padding-bottom: 8rem; }
+ .pb7-ns { padding-bottom: 16rem; }
+ .pt0-ns { padding-top: 0; }
+ .pt1-ns { padding-top: .25rem; }
+ .pt2-ns { padding-top: .5rem; }
+ .pt3-ns { padding-top: 1rem; }
+ .pt4-ns { padding-top: 2rem; }
+ .pt5-ns { padding-top: 4rem; }
+ .pt6-ns { padding-top: 8rem; }
+ .pt7-ns { padding-top: 16rem; }
+ .pv0-ns { padding-top: 0; padding-bottom: 0; }
+ .pv1-ns { padding-top: .25rem; padding-bottom: .25rem; }
+ .pv2-ns { padding-top: .5rem; padding-bottom: .5rem; }
+ .pv3-ns { padding-top: 1rem; padding-bottom: 1rem; }
+ .pv4-ns { padding-top: 2rem; padding-bottom: 2rem; }
+ .pv5-ns { padding-top: 4rem; padding-bottom: 4rem; }
+ .pv6-ns { padding-top: 8rem; padding-bottom: 8rem; }
+ .pv7-ns { padding-top: 16rem; padding-bottom: 16rem; }
+ .ph0-ns { padding-left: 0; padding-right: 0; }
+ .ph1-ns { padding-left: .25rem; padding-right: .25rem; }
+ .ph2-ns { padding-left: .5rem; padding-right: .5rem; }
+ .ph3-ns { padding-left: 1rem; padding-right: 1rem; }
+ .ph4-ns { padding-left: 2rem; padding-right: 2rem; }
+ .ph5-ns { padding-left: 4rem; padding-right: 4rem; }
+ .ph6-ns { padding-left: 8rem; padding-right: 8rem; }
+ .ph7-ns { padding-left: 16rem; padding-right: 16rem; }
+ .ma0-ns { margin: 0; }
+ .ma1-ns { margin: .25rem; }
+ .ma2-ns { margin: .5rem; }
+ .ma3-ns { margin: 1rem; }
+ .ma4-ns { margin: 2rem; }
+ .ma5-ns { margin: 4rem; }
+ .ma6-ns { margin: 8rem; }
+ .ma7-ns { margin: 16rem; }
+ .ml0-ns { margin-left: 0; }
+ .ml1-ns { margin-left: .25rem; }
+ .ml2-ns { margin-left: .5rem; }
+ .ml3-ns { margin-left: 1rem; }
+ .ml4-ns { margin-left: 2rem; }
+ .ml5-ns { margin-left: 4rem; }
+ .ml6-ns { margin-left: 8rem; }
+ .ml7-ns { margin-left: 16rem; }
+ .mr0-ns { margin-right: 0; }
+ .mr1-ns { margin-right: .25rem; }
+ .mr2-ns { margin-right: .5rem; }
+ .mr3-ns { margin-right: 1rem; }
+ .mr4-ns { margin-right: 2rem; }
+ .mr5-ns { margin-right: 4rem; }
+ .mr6-ns { margin-right: 8rem; }
+ .mr7-ns { margin-right: 16rem; }
+ .mb0-ns { margin-bottom: 0; }
+ .mb1-ns { margin-bottom: .25rem; }
+ .mb2-ns { margin-bottom: .5rem; }
+ .mb3-ns { margin-bottom: 1rem; }
+ .mb4-ns { margin-bottom: 2rem; }
+ .mb5-ns { margin-bottom: 4rem; }
+ .mb6-ns { margin-bottom: 8rem; }
+ .mb7-ns { margin-bottom: 16rem; }
+ .mt0-ns { margin-top: 0; }
+ .mt1-ns { margin-top: .25rem; }
+ .mt2-ns { margin-top: .5rem; }
+ .mt3-ns { margin-top: 1rem; }
+ .mt4-ns { margin-top: 2rem; }
+ .mt5-ns { margin-top: 4rem; }
+ .mt6-ns { margin-top: 8rem; }
+ .mt7-ns { margin-top: 16rem; }
+ .mv0-ns { margin-top: 0; margin-bottom: 0; }
+ .mv1-ns { margin-top: .25rem; margin-bottom: .25rem; }
+ .mv2-ns { margin-top: .5rem; margin-bottom: .5rem; }
+ .mv3-ns { margin-top: 1rem; margin-bottom: 1rem; }
+ .mv4-ns { margin-top: 2rem; margin-bottom: 2rem; }
+ .mv5-ns { margin-top: 4rem; margin-bottom: 4rem; }
+ .mv6-ns { margin-top: 8rem; margin-bottom: 8rem; }
+ .mv7-ns { margin-top: 16rem; margin-bottom: 16rem; }
+ .mh0-ns { margin-left: 0; margin-right: 0; }
+ .mh1-ns { margin-left: .25rem; margin-right: .25rem; }
+ .mh2-ns { margin-left: .5rem; margin-right: .5rem; }
+ .mh3-ns { margin-left: 1rem; margin-right: 1rem; }
+ .mh4-ns { margin-left: 2rem; margin-right: 2rem; }
+ .mh5-ns { margin-left: 4rem; margin-right: 4rem; }
+ .mh6-ns { margin-left: 8rem; margin-right: 8rem; }
+ .mh7-ns { margin-left: 16rem; margin-right: 16rem; }
+ .na1-ns { margin: -0.25rem; }
+ .na2-ns { margin: -0.5rem; }
+ .na3-ns { margin: -1rem; }
+ .na4-ns { margin: -2rem; }
+ .na5-ns { margin: -4rem; }
+ .na6-ns { margin: -8rem; }
+ .na7-ns { margin: -16rem; }
+ .nl1-ns { margin-left: -0.25rem; }
+ .nl2-ns { margin-left: -0.5rem; }
+ .nl3-ns { margin-left: -1rem; }
+ .nl4-ns { margin-left: -2rem; }
+ .nl5-ns { margin-left: -4rem; }
+ .nl6-ns { margin-left: -8rem; }
+ .nl7-ns { margin-left: -16rem; }
+ .nr1-ns { margin-right: -0.25rem; }
+ .nr2-ns { margin-right: -0.5rem; }
+ .nr3-ns { margin-right: -1rem; }
+ .nr4-ns { margin-right: -2rem; }
+ .nr5-ns { margin-right: -4rem; }
+ .nr6-ns { margin-right: -8rem; }
+ .nr7-ns { margin-right: -16rem; }
+ .nb1-ns { margin-bottom: -0.25rem; }
+ .nb2-ns { margin-bottom: -0.5rem; }
+ .nb3-ns { margin-bottom: -1rem; }
+ .nb4-ns { margin-bottom: -2rem; }
+ .nb5-ns { margin-bottom: -4rem; }
+ .nb6-ns { margin-bottom: -8rem; }
+ .nb7-ns { margin-bottom: -16rem; }
+ .nt1-ns { margin-top: -0.25rem; }
+ .nt2-ns { margin-top: -0.5rem; }
+ .nt3-ns { margin-top: -1rem; }
+ .nt4-ns { margin-top: -2rem; }
+ .nt5-ns { margin-top: -4rem; }
+ .nt6-ns { margin-top: -8rem; }
+ .nt7-ns { margin-top: -16rem; }
+ .strike-ns { text-decoration: line-through; }
+ .underline-ns { text-decoration: underline; }
+ .no-underline-ns { text-decoration: none; }
+ .tl-ns { text-align: left; }
+ .tr-ns { text-align: right; }
+ .tc-ns { text-align: center; }
+ .tj-ns { text-align: justify; }
+ .ttc-ns { text-transform: capitalize; }
+ .ttl-ns { text-transform: lowercase; }
+ .ttu-ns { text-transform: uppercase; }
+ .ttn-ns { text-transform: none; }
+ .f-6-ns, .f-headline-ns { font-size: 6rem; }
+ .f-5-ns, .f-subheadline-ns { font-size: 5rem; }
+ .f1-ns { font-size: 3rem; }
+ .f2-ns { font-size: 2.25rem; }
+ .f3-ns { font-size: 1.5rem; }
+ .f4-ns { font-size: 1.25rem; }
+ .f5-ns { font-size: 1rem; }
+ .f6-ns { font-size: .875rem; }
+ .f7-ns { font-size: .75rem; }
+ .measure-ns { max-width: 30em; }
+ .measure-wide-ns { max-width: 34em; }
+ .measure-narrow-ns { max-width: 20em; }
+ .indent-ns { text-indent: 1em; margin-top: 0; margin-bottom: 0; }
+ .small-caps-ns { font-variant: small-caps; }
+ .truncate-ns { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+ .center-ns { margin-right: auto; margin-left: auto; }
+ .mr-auto-ns { margin-right: auto; }
+ .ml-auto-ns { margin-left: auto; }
+ .clip-ns { position: fixed !important; _position: absolute !important; clip: rect( 1px 1px 1px 1px ); /* IE6, IE7 */ clip: rect( 1px, 1px, 1px, 1px ); }
+ .ws-normal-ns { white-space: normal; }
+ .nowrap-ns { white-space: nowrap; }
+ .pre-ns { white-space: pre; }
+ .v-base-ns { vertical-align: baseline; }
+ .v-mid-ns { vertical-align: middle; }
+ .v-top-ns { vertical-align: top; }
+ .v-btm-ns { vertical-align: bottom; }
+}
+@media screen and (min-width: 30em) and (max-width: 60em) {
+ .aspect-ratio-m { height: 0; position: relative; }
+ .aspect-ratio--16x9-m { padding-bottom: 56.25%; }
+ .aspect-ratio--9x16-m { padding-bottom: 177.77%; }
+ .aspect-ratio--4x3-m { padding-bottom: 75%; }
+ .aspect-ratio--3x4-m { padding-bottom: 133.33%; }
+ .aspect-ratio--6x4-m { padding-bottom: 66.6%; }
+ .aspect-ratio--4x6-m { padding-bottom: 150%; }
+ .aspect-ratio--8x5-m { padding-bottom: 62.5%; }
+ .aspect-ratio--5x8-m { padding-bottom: 160%; }
+ .aspect-ratio--7x5-m { padding-bottom: 71.42%; }
+ .aspect-ratio--5x7-m { padding-bottom: 140%; }
+ .aspect-ratio--1x1-m { padding-bottom: 100%; }
+ .aspect-ratio--object-m { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 100; }
+ .cover-m { background-size: cover !important; }
+ .contain-m { background-size: contain !important; }
+ .bg-center-m { background-repeat: no-repeat; background-position: center center; }
+ .bg-top-m { background-repeat: no-repeat; background-position: top center; }
+ .bg-right-m { background-repeat: no-repeat; background-position: center right; }
+ .bg-bottom-m { background-repeat: no-repeat; background-position: bottom center; }
+ .bg-left-m { background-repeat: no-repeat; background-position: center left; }
+ .outline-m { outline: 1px solid; }
+ .outline-transparent-m { outline: 1px solid transparent; }
+ .outline-0-m { outline: 0; }
+ .ba-m { border-style: solid; border-width: 1px; }
+ .bt-m { border-top-style: solid; border-top-width: 1px; }
+ .br-m { border-right-style: solid; border-right-width: 1px; }
+ .bb-m { border-bottom-style: solid; border-bottom-width: 1px; }
+ .bl-m { border-left-style: solid; border-left-width: 1px; }
+ .bn-m { border-style: none; border-width: 0; }
+ .br0-m { border-radius: 0; }
+ .br1-m { border-radius: .125rem; }
+ .br2-m { border-radius: .25rem; }
+ .br3-m { border-radius: .5rem; }
+ .br4-m { border-radius: 1rem; }
+ .br-100-m { border-radius: 100%; }
+ .br-pill-m { border-radius: 9999px; }
+ .br--bottom-m { border-top-left-radius: 0; border-top-right-radius: 0; }
+ .br--top-m { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
+ .br--right-m { border-top-left-radius: 0; border-bottom-left-radius: 0; }
+ .br--left-m { border-top-right-radius: 0; border-bottom-right-radius: 0; }
+ .br-inherit-m { border-radius: inherit; }
+ .br-initial-m { border-radius: initial; }
+ .br-unset-m { border-radius: unset; }
+ .b--dotted-m { border-style: dotted; }
+ .b--dashed-m { border-style: dashed; }
+ .b--solid-m { border-style: solid; }
+ .b--none-m { border-style: none; }
+ .bw0-m { border-width: 0; }
+ .bw1-m { border-width: .125rem; }
+ .bw2-m { border-width: .25rem; }
+ .bw3-m { border-width: .5rem; }
+ .bw4-m { border-width: 1rem; }
+ .bw5-m { border-width: 2rem; }
+ .bt-0-m { border-top-width: 0; }
+ .br-0-m { border-right-width: 0; }
+ .bb-0-m { border-bottom-width: 0; }
+ .bl-0-m { border-left-width: 0; }
+ .shadow-1-m { box-shadow: 0 0 4px 2px rgba( 0, 0, 0, .2 ); }
+ .shadow-2-m { box-shadow: 0 0 8px 2px rgba( 0, 0, 0, .2 ); }
+ .shadow-3-m { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, .2 ); }
+ .shadow-4-m { box-shadow: 2px 2px 8px 0 rgba( 0, 0, 0, .2 ); }
+ .shadow-5-m { box-shadow: 4px 4px 8px 0 rgba( 0, 0, 0, .2 ); }
+ .top-0-m { top: 0; }
+ .left-0-m { left: 0; }
+ .right-0-m { right: 0; }
+ .bottom-0-m { bottom: 0; }
+ .top-1-m { top: 1rem; }
+ .left-1-m { left: 1rem; }
+ .right-1-m { right: 1rem; }
+ .bottom-1-m { bottom: 1rem; }
+ .top-2-m { top: 2rem; }
+ .left-2-m { left: 2rem; }
+ .right-2-m { right: 2rem; }
+ .bottom-2-m { bottom: 2rem; }
+ .top--1-m { top: -1rem; }
+ .right--1-m { right: -1rem; }
+ .bottom--1-m { bottom: -1rem; }
+ .left--1-m { left: -1rem; }
+ .top--2-m { top: -2rem; }
+ .right--2-m { right: -2rem; }
+ .bottom--2-m { bottom: -2rem; }
+ .left--2-m { left: -2rem; }
+ .absolute--fill-m { top: 0; right: 0; bottom: 0; left: 0; }
+ .cl-m { clear: left; }
+ .cr-m { clear: right; }
+ .cb-m { clear: both; }
+ .cn-m { clear: none; }
+ .dn-m { display: none; }
+ .di-m { display: inline; }
+ .db-m { display: block; }
+ .dib-m { display: inline-block; }
+ .dit-m { display: inline-table; }
+ .dt-m { display: table; }
+ .dtc-m { display: table-cell; }
+ .dt-row-m { display: table-row; }
+ .dt-row-group-m { display: table-row-group; }
+ .dt-column-m { display: table-column; }
+ .dt-column-group-m { display: table-column-group; }
+ .dt--fixed-m { table-layout: fixed; width: 100%; }
+ .flex-m { display: flex; }
+ .inline-flex-m { display: inline-flex; }
+ .flex-auto-m { flex: 1 1 auto; min-width: 0; /* 1 */ min-height: 0; /* 1 */ }
+ .flex-none-m { flex: none; }
+ .flex-column-m { flex-direction: column; }
+ .flex-row-m { flex-direction: row; }
+ .flex-wrap-m { flex-wrap: wrap; }
+ .flex-nowrap-m { flex-wrap: nowrap; }
+ .flex-wrap-reverse-m { flex-wrap: wrap-reverse; }
+ .flex-column-reverse-m { flex-direction: column-reverse; }
+ .flex-row-reverse-m { flex-direction: row-reverse; }
+ .items-start-m { align-items: flex-start; }
+ .items-end-m { align-items: flex-end; }
+ .items-center-m { align-items: center; }
+ .items-baseline-m { align-items: baseline; }
+ .items-stretch-m { align-items: stretch; }
+ .self-start-m { align-self: flex-start; }
+ .self-end-m { align-self: flex-end; }
+ .self-center-m { align-self: center; }
+ .self-baseline-m { align-self: baseline; }
+ .self-stretch-m { align-self: stretch; }
+ .justify-start-m { justify-content: flex-start; }
+ .justify-end-m { justify-content: flex-end; }
+ .justify-center-m { justify-content: center; }
+ .justify-between-m { justify-content: space-between; }
+ .justify-around-m { justify-content: space-around; }
+ .content-start-m { align-content: flex-start; }
+ .content-end-m { align-content: flex-end; }
+ .content-center-m { align-content: center; }
+ .content-between-m { align-content: space-between; }
+ .content-around-m { align-content: space-around; }
+ .content-stretch-m { align-content: stretch; }
+ .order-0-m { order: 0; }
+ .order-1-m { order: 1; }
+ .order-2-m { order: 2; }
+ .order-3-m { order: 3; }
+ .order-4-m { order: 4; }
+ .order-5-m { order: 5; }
+ .order-6-m { order: 6; }
+ .order-7-m { order: 7; }
+ .order-8-m { order: 8; }
+ .order-last-m { order: 99999; }
+ .flex-grow-0-m { flex-grow: 0; }
+ .flex-grow-1-m { flex-grow: 1; }
+ .flex-shrink-0-m { flex-shrink: 0; }
+ .flex-shrink-1-m { flex-shrink: 1; }
+ .fl-m { float: left; _display: inline; }
+ .fr-m { float: right; _display: inline; }
+ .fn-m { float: none; }
+ .i-m { font-style: italic; }
+ .fs-normal-m { font-style: normal; }
+ .normal-m { font-weight: normal; }
+ .b-m { font-weight: bold; }
+ .fw1-m { font-weight: 100; }
+ .fw2-m { font-weight: 200; }
+ .fw3-m { font-weight: 300; }
+ .fw4-m { font-weight: 400; }
+ .fw5-m { font-weight: 500; }
+ .fw6-m { font-weight: 600; }
+ .fw7-m { font-weight: 700; }
+ .fw8-m { font-weight: 800; }
+ .fw9-m { font-weight: 900; }
+ .h1-m { height: 1rem; }
+ .h2-m { height: 2rem; }
+ .h3-m { height: 4rem; }
+ .h4-m { height: 8rem; }
+ .h5-m { height: 16rem; }
+ .h-25-m { height: 25%; }
+ .h-50-m { height: 50%; }
+ .h-75-m { height: 75%; }
+ .h-100-m { height: 100%; }
+ .min-h-100-m { min-height: 100%; }
+ .vh-25-m { height: 25vh; }
+ .vh-50-m { height: 50vh; }
+ .vh-75-m { height: 75vh; }
+ .vh-100-m { height: 100vh; }
+ .min-vh-100-m { min-height: 100vh; }
+ .h-auto-m { height: auto; }
+ .h-inherit-m { height: inherit; }
+ .tracked-m { letter-spacing: .1em; }
+ .tracked-tight-m { letter-spacing: -.05em; }
+ .tracked-mega-m { letter-spacing: .25em; }
+ .lh-solid-m { line-height: 1; }
+ .lh-title-m { line-height: 1.25; }
+ .lh-copy-m { line-height: 1.5; }
+ .mw-100-m { max-width: 100%; }
+ .mw1-m { max-width: 1rem; }
+ .mw2-m { max-width: 2rem; }
+ .mw3-m { max-width: 4rem; }
+ .mw4-m { max-width: 8rem; }
+ .mw5-m { max-width: 16rem; }
+ .mw6-m { max-width: 32rem; }
+ .mw7-m { max-width: 48rem; }
+ .mw8-m { max-width: 64rem; }
+ .mw9-m { max-width: 96rem; }
+ .mw-none-m { max-width: none; }
+ .w1-m { width: 1rem; }
+ .w2-m { width: 2rem; }
+ .w3-m { width: 4rem; }
+ .w4-m { width: 8rem; }
+ .w5-m { width: 16rem; }
+ .w-10-m { width: 10%; }
+ .w-20-m { width: 20%; }
+ .w-25-m { width: 25%; }
+ .w-30-m { width: 30%; }
+ .w-33-m { width: 33%; }
+ .w-34-m { width: 34%; }
+ .w-40-m { width: 40%; }
+ .w-50-m { width: 50%; }
+ .w-60-m { width: 60%; }
+ .w-70-m { width: 70%; }
+ .w-75-m { width: 75%; }
+ .w-80-m { width: 80%; }
+ .w-90-m { width: 90%; }
+ .w-100-m { width: 100%; }
+ .w-third-m { width: 33.33333%; }
+ .w-two-thirds-m { width: 66.66667%; }
+ .w-auto-m { width: auto; }
+ .overflow-visible-m { overflow: visible; }
+ .overflow-hidden-m { overflow: hidden; }
+ .overflow-scroll-m { overflow: scroll; }
+ .overflow-auto-m { overflow: auto; }
+ .overflow-x-visible-m { overflow-x: visible; }
+ .overflow-x-hidden-m { overflow-x: hidden; }
+ .overflow-x-scroll-m { overflow-x: scroll; }
+ .overflow-x-auto-m { overflow-x: auto; }
+ .overflow-y-visible-m { overflow-y: visible; }
+ .overflow-y-hidden-m { overflow-y: hidden; }
+ .overflow-y-scroll-m { overflow-y: scroll; }
+ .overflow-y-auto-m { overflow-y: auto; }
+ .static-m { position: static; }
+ .relative-m { position: relative; }
+ .absolute-m { position: absolute; }
+ .fixed-m { position: fixed; }
+ .rotate-45-m { -webkit-transform: rotate( 45deg ); transform: rotate( 45deg ); }
+ .rotate-90-m { -webkit-transform: rotate( 90deg ); transform: rotate( 90deg ); }
+ .rotate-135-m { -webkit-transform: rotate( 135deg ); transform: rotate( 135deg ); }
+ .rotate-180-m { -webkit-transform: rotate( 180deg ); transform: rotate( 180deg ); }
+ .rotate-225-m { -webkit-transform: rotate( 225deg ); transform: rotate( 225deg ); }
+ .rotate-270-m { -webkit-transform: rotate( 270deg ); transform: rotate( 270deg ); }
+ .rotate-315-m { -webkit-transform: rotate( 315deg ); transform: rotate( 315deg ); }
+ .pa0-m { padding: 0; }
+ .pa1-m { padding: .25rem; }
+ .pa2-m { padding: .5rem; }
+ .pa3-m { padding: 1rem; }
+ .pa4-m { padding: 2rem; }
+ .pa5-m { padding: 4rem; }
+ .pa6-m { padding: 8rem; }
+ .pa7-m { padding: 16rem; }
+ .pl0-m { padding-left: 0; }
+ .pl1-m { padding-left: .25rem; }
+ .pl2-m { padding-left: .5rem; }
+ .pl3-m { padding-left: 1rem; }
+ .pl4-m { padding-left: 2rem; }
+ .pl5-m { padding-left: 4rem; }
+ .pl6-m { padding-left: 8rem; }
+ .pl7-m { padding-left: 16rem; }
+ .pr0-m { padding-right: 0; }
+ .pr1-m { padding-right: .25rem; }
+ .pr2-m { padding-right: .5rem; }
+ .pr3-m { padding-right: 1rem; }
+ .pr4-m { padding-right: 2rem; }
+ .pr5-m { padding-right: 4rem; }
+ .pr6-m { padding-right: 8rem; }
+ .pr7-m { padding-right: 16rem; }
+ .pb0-m { padding-bottom: 0; }
+ .pb1-m { padding-bottom: .25rem; }
+ .pb2-m { padding-bottom: .5rem; }
+ .pb3-m { padding-bottom: 1rem; }
+ .pb4-m { padding-bottom: 2rem; }
+ .pb5-m { padding-bottom: 4rem; }
+ .pb6-m { padding-bottom: 8rem; }
+ .pb7-m { padding-bottom: 16rem; }
+ .pt0-m { padding-top: 0; }
+ .pt1-m { padding-top: .25rem; }
+ .pt2-m { padding-top: .5rem; }
+ .pt3-m { padding-top: 1rem; }
+ .pt4-m { padding-top: 2rem; }
+ .pt5-m { padding-top: 4rem; }
+ .pt6-m { padding-top: 8rem; }
+ .pt7-m { padding-top: 16rem; }
+ .pv0-m { padding-top: 0; padding-bottom: 0; }
+ .pv1-m { padding-top: .25rem; padding-bottom: .25rem; }
+ .pv2-m { padding-top: .5rem; padding-bottom: .5rem; }
+ .pv3-m { padding-top: 1rem; padding-bottom: 1rem; }
+ .pv4-m { padding-top: 2rem; padding-bottom: 2rem; }
+ .pv5-m { padding-top: 4rem; padding-bottom: 4rem; }
+ .pv6-m { padding-top: 8rem; padding-bottom: 8rem; }
+ .pv7-m { padding-top: 16rem; padding-bottom: 16rem; }
+ .ph0-m { padding-left: 0; padding-right: 0; }
+ .ph1-m { padding-left: .25rem; padding-right: .25rem; }
+ .ph2-m { padding-left: .5rem; padding-right: .5rem; }
+ .ph3-m { padding-left: 1rem; padding-right: 1rem; }
+ .ph4-m { padding-left: 2rem; padding-right: 2rem; }
+ .ph5-m { padding-left: 4rem; padding-right: 4rem; }
+ .ph6-m { padding-left: 8rem; padding-right: 8rem; }
+ .ph7-m { padding-left: 16rem; padding-right: 16rem; }
+ .ma0-m { margin: 0; }
+ .ma1-m { margin: .25rem; }
+ .ma2-m { margin: .5rem; }
+ .ma3-m { margin: 1rem; }
+ .ma4-m { margin: 2rem; }
+ .ma5-m { margin: 4rem; }
+ .ma6-m { margin: 8rem; }
+ .ma7-m { margin: 16rem; }
+ .ml0-m { margin-left: 0; }
+ .ml1-m { margin-left: .25rem; }
+ .ml2-m { margin-left: .5rem; }
+ .ml3-m { margin-left: 1rem; }
+ .ml4-m { margin-left: 2rem; }
+ .ml5-m { margin-left: 4rem; }
+ .ml6-m { margin-left: 8rem; }
+ .ml7-m { margin-left: 16rem; }
+ .mr0-m { margin-right: 0; }
+ .mr1-m { margin-right: .25rem; }
+ .mr2-m { margin-right: .5rem; }
+ .mr3-m { margin-right: 1rem; }
+ .mr4-m { margin-right: 2rem; }
+ .mr5-m { margin-right: 4rem; }
+ .mr6-m { margin-right: 8rem; }
+ .mr7-m { margin-right: 16rem; }
+ .mb0-m { margin-bottom: 0; }
+ .mb1-m { margin-bottom: .25rem; }
+ .mb2-m { margin-bottom: .5rem; }
+ .mb3-m { margin-bottom: 1rem; }
+ .mb4-m { margin-bottom: 2rem; }
+ .mb5-m { margin-bottom: 4rem; }
+ .mb6-m { margin-bottom: 8rem; }
+ .mb7-m { margin-bottom: 16rem; }
+ .mt0-m { margin-top: 0; }
+ .mt1-m { margin-top: .25rem; }
+ .mt2-m { margin-top: .5rem; }
+ .mt3-m { margin-top: 1rem; }
+ .mt4-m { margin-top: 2rem; }
+ .mt5-m { margin-top: 4rem; }
+ .mt6-m { margin-top: 8rem; }
+ .mt7-m { margin-top: 16rem; }
+ .mv0-m { margin-top: 0; margin-bottom: 0; }
+ .mv1-m { margin-top: .25rem; margin-bottom: .25rem; }
+ .mv2-m { margin-top: .5rem; margin-bottom: .5rem; }
+ .mv3-m { margin-top: 1rem; margin-bottom: 1rem; }
+ .mv4-m { margin-top: 2rem; margin-bottom: 2rem; }
+ .mv5-m { margin-top: 4rem; margin-bottom: 4rem; }
+ .mv6-m { margin-top: 8rem; margin-bottom: 8rem; }
+ .mv7-m { margin-top: 16rem; margin-bottom: 16rem; }
+ .mh0-m { margin-left: 0; margin-right: 0; }
+ .mh1-m { margin-left: .25rem; margin-right: .25rem; }
+ .mh2-m { margin-left: .5rem; margin-right: .5rem; }
+ .mh3-m { margin-left: 1rem; margin-right: 1rem; }
+ .mh4-m { margin-left: 2rem; margin-right: 2rem; }
+ .mh5-m { margin-left: 4rem; margin-right: 4rem; }
+ .mh6-m { margin-left: 8rem; margin-right: 8rem; }
+ .mh7-m { margin-left: 16rem; margin-right: 16rem; }
+ .na1-m { margin: -0.25rem; }
+ .na2-m { margin: -0.5rem; }
+ .na3-m { margin: -1rem; }
+ .na4-m { margin: -2rem; }
+ .na5-m { margin: -4rem; }
+ .na6-m { margin: -8rem; }
+ .na7-m { margin: -16rem; }
+ .nl1-m { margin-left: -0.25rem; }
+ .nl2-m { margin-left: -0.5rem; }
+ .nl3-m { margin-left: -1rem; }
+ .nl4-m { margin-left: -2rem; }
+ .nl5-m { margin-left: -4rem; }
+ .nl6-m { margin-left: -8rem; }
+ .nl7-m { margin-left: -16rem; }
+ .nr1-m { margin-right: -0.25rem; }
+ .nr2-m { margin-right: -0.5rem; }
+ .nr3-m { margin-right: -1rem; }
+ .nr4-m { margin-right: -2rem; }
+ .nr5-m { margin-right: -4rem; }
+ .nr6-m { margin-right: -8rem; }
+ .nr7-m { margin-right: -16rem; }
+ .nb1-m { margin-bottom: -0.25rem; }
+ .nb2-m { margin-bottom: -0.5rem; }
+ .nb3-m { margin-bottom: -1rem; }
+ .nb4-m { margin-bottom: -2rem; }
+ .nb5-m { margin-bottom: -4rem; }
+ .nb6-m { margin-bottom: -8rem; }
+ .nb7-m { margin-bottom: -16rem; }
+ .nt1-m { margin-top: -0.25rem; }
+ .nt2-m { margin-top: -0.5rem; }
+ .nt3-m { margin-top: -1rem; }
+ .nt4-m { margin-top: -2rem; }
+ .nt5-m { margin-top: -4rem; }
+ .nt6-m { margin-top: -8rem; }
+ .nt7-m { margin-top: -16rem; }
+ .strike-m { text-decoration: line-through; }
+ .underline-m { text-decoration: underline; }
+ .no-underline-m { text-decoration: none; }
+ .tl-m { text-align: left; }
+ .tr-m { text-align: right; }
+ .tc-m { text-align: center; }
+ .tj-m { text-align: justify; }
+ .ttc-m { text-transform: capitalize; }
+ .ttl-m { text-transform: lowercase; }
+ .ttu-m { text-transform: uppercase; }
+ .ttn-m { text-transform: none; }
+ .f-6-m, .f-headline-m { font-size: 6rem; }
+ .f-5-m, .f-subheadline-m { font-size: 5rem; }
+ .f1-m { font-size: 3rem; }
+ .f2-m { font-size: 2.25rem; }
+ .f3-m { font-size: 1.5rem; }
+ .f4-m { font-size: 1.25rem; }
+ .f5-m { font-size: 1rem; }
+ .f6-m { font-size: .875rem; }
+ .f7-m { font-size: .75rem; }
+ .measure-m { max-width: 30em; }
+ .measure-wide-m { max-width: 34em; }
+ .measure-narrow-m { max-width: 20em; }
+ .indent-m { text-indent: 1em; margin-top: 0; margin-bottom: 0; }
+ .small-caps-m { font-variant: small-caps; }
+ .truncate-m { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.center-m { margin-right: auto; margin-left: auto; }
.mr-auto-m { margin-right: auto; }
.ml-auto-m { margin-left: auto; }
+ .clip-m { position: fixed !important; _position: absolute !important; clip: rect( 1px 1px 1px 1px ); /* IE6, IE7 */ clip: rect( 1px, 1px, 1px, 1px ); }
+ .ws-normal-m { white-space: normal; }
+ .nowrap-m { white-space: nowrap; }
+ .pre-m { white-space: pre; }
+ .v-base-m { vertical-align: baseline; }
+ .v-mid-m { vertical-align: middle; }
+ .v-top-m { vertical-align: top; }
+ .v-btm-m { vertical-align: bottom; }
}
-@container (min-width:64em) {
+@media screen and (min-width: 60em) {
+ .aspect-ratio-l { height: 0; position: relative; }
+ .aspect-ratio--16x9-l { padding-bottom: 56.25%; }
+ .aspect-ratio--9x16-l { padding-bottom: 177.77%; }
+ .aspect-ratio--4x3-l { padding-bottom: 75%; }
+ .aspect-ratio--3x4-l { padding-bottom: 133.33%; }
+ .aspect-ratio--6x4-l { padding-bottom: 66.6%; }
+ .aspect-ratio--4x6-l { padding-bottom: 150%; }
+ .aspect-ratio--8x5-l { padding-bottom: 62.5%; }
+ .aspect-ratio--5x8-l { padding-bottom: 160%; }
+ .aspect-ratio--7x5-l { padding-bottom: 71.42%; }
+ .aspect-ratio--5x7-l { padding-bottom: 140%; }
+ .aspect-ratio--1x1-l { padding-bottom: 100%; }
+ .aspect-ratio--object-l { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 100; }
+ .cover-l { background-size: cover !important; }
+ .contain-l { background-size: contain !important; }
+ .bg-center-l { background-repeat: no-repeat; background-position: center center; }
+ .bg-top-l { background-repeat: no-repeat; background-position: top center; }
+ .bg-right-l { background-repeat: no-repeat; background-position: center right; }
+ .bg-bottom-l { background-repeat: no-repeat; background-position: bottom center; }
+ .bg-left-l { background-repeat: no-repeat; background-position: center left; }
+ .outline-l { outline: 1px solid; }
+ .outline-transparent-l { outline: 1px solid transparent; }
+ .outline-0-l { outline: 0; }
+ .ba-l { border-style: solid; border-width: 1px; }
+ .bt-l { border-top-style: solid; border-top-width: 1px; }
+ .br-l { border-right-style: solid; border-right-width: 1px; }
+ .bb-l { border-bottom-style: solid; border-bottom-width: 1px; }
+ .bl-l { border-left-style: solid; border-left-width: 1px; }
+ .bn-l { border-style: none; border-width: 0; }
+ .br0-l { border-radius: 0; }
+ .br1-l { border-radius: .125rem; }
+ .br2-l { border-radius: .25rem; }
+ .br3-l { border-radius: .5rem; }
+ .br4-l { border-radius: 1rem; }
+ .br-100-l { border-radius: 100%; }
+ .br-pill-l { border-radius: 9999px; }
+ .br--bottom-l { border-top-left-radius: 0; border-top-right-radius: 0; }
+ .br--top-l { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
+ .br--right-l { border-top-left-radius: 0; border-bottom-left-radius: 0; }
+ .br--left-l { border-top-right-radius: 0; border-bottom-right-radius: 0; }
+ .br-inherit-l { border-radius: inherit; }
+ .br-initial-l { border-radius: initial; }
+ .br-unset-l { border-radius: unset; }
+ .b--dotted-l { border-style: dotted; }
+ .b--dashed-l { border-style: dashed; }
+ .b--solid-l { border-style: solid; }
+ .b--none-l { border-style: none; }
+ .bw0-l { border-width: 0; }
+ .bw1-l { border-width: .125rem; }
+ .bw2-l { border-width: .25rem; }
+ .bw3-l { border-width: .5rem; }
+ .bw4-l { border-width: 1rem; }
+ .bw5-l { border-width: 2rem; }
+ .bt-0-l { border-top-width: 0; }
+ .br-0-l { border-right-width: 0; }
+ .bb-0-l { border-bottom-width: 0; }
+ .bl-0-l { border-left-width: 0; }
+ .shadow-1-l { box-shadow: 0 0 4px 2px rgba( 0, 0, 0, .2 ); }
+ .shadow-2-l { box-shadow: 0 0 8px 2px rgba( 0, 0, 0, .2 ); }
+ .shadow-3-l { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, .2 ); }
+ .shadow-4-l { box-shadow: 2px 2px 8px 0 rgba( 0, 0, 0, .2 ); }
+ .shadow-5-l { box-shadow: 4px 4px 8px 0 rgba( 0, 0, 0, .2 ); }
+ .top-0-l { top: 0; }
+ .left-0-l { left: 0; }
+ .right-0-l { right: 0; }
+ .bottom-0-l { bottom: 0; }
+ .top-1-l { top: 1rem; }
+ .left-1-l { left: 1rem; }
+ .right-1-l { right: 1rem; }
+ .bottom-1-l { bottom: 1rem; }
+ .top-2-l { top: 2rem; }
+ .left-2-l { left: 2rem; }
+ .right-2-l { right: 2rem; }
+ .bottom-2-l { bottom: 2rem; }
+ .top--1-l { top: -1rem; }
+ .right--1-l { right: -1rem; }
+ .bottom--1-l { bottom: -1rem; }
+ .left--1-l { left: -1rem; }
+ .top--2-l { top: -2rem; }
+ .right--2-l { right: -2rem; }
+ .bottom--2-l { bottom: -2rem; }
+ .left--2-l { left: -2rem; }
+ .absolute--fill-l { top: 0; right: 0; bottom: 0; left: 0; }
+ .cl-l { clear: left; }
+ .cr-l { clear: right; }
+ .cb-l { clear: both; }
+ .cn-l { clear: none; }
+ .dn-l { display: none; }
+ .di-l { display: inline; }
+ .db-l { display: block; }
+ .dib-l { display: inline-block; }
+ .dit-l { display: inline-table; }
+ .dt-l { display: table; }
+ .dtc-l { display: table-cell; }
+ .dt-row-l { display: table-row; }
+ .dt-row-group-l { display: table-row-group; }
+ .dt-column-l { display: table-column; }
+ .dt-column-group-l { display: table-column-group; }
+ .dt--fixed-l { table-layout: fixed; width: 100%; }
+ .flex-l { display: flex; }
+ .inline-flex-l { display: inline-flex; }
+ .flex-auto-l { flex: 1 1 auto; min-width: 0; /* 1 */ min-height: 0; /* 1 */ }
+ .flex-none-l { flex: none; }
+ .flex-column-l { flex-direction: column; }
+ .flex-row-l { flex-direction: row; }
+ .flex-wrap-l { flex-wrap: wrap; }
+ .flex-nowrap-l { flex-wrap: nowrap; }
+ .flex-wrap-reverse-l { flex-wrap: wrap-reverse; }
+ .flex-column-reverse-l { flex-direction: column-reverse; }
+ .flex-row-reverse-l { flex-direction: row-reverse; }
+ .items-start-l { align-items: flex-start; }
+ .items-end-l { align-items: flex-end; }
+ .items-center-l { align-items: center; }
+ .items-baseline-l { align-items: baseline; }
+ .items-stretch-l { align-items: stretch; }
+ .self-start-l { align-self: flex-start; }
+ .self-end-l { align-self: flex-end; }
+ .self-center-l { align-self: center; }
+ .self-baseline-l { align-self: baseline; }
+ .self-stretch-l { align-self: stretch; }
+ .justify-start-l { justify-content: flex-start; }
+ .justify-end-l { justify-content: flex-end; }
+ .justify-center-l { justify-content: center; }
+ .justify-between-l { justify-content: space-between; }
+ .justify-around-l { justify-content: space-around; }
+ .content-start-l { align-content: flex-start; }
+ .content-end-l { align-content: flex-end; }
+ .content-center-l { align-content: center; }
+ .content-between-l { align-content: space-between; }
+ .content-around-l { align-content: space-around; }
+ .content-stretch-l { align-content: stretch; }
+ .order-0-l { order: 0; }
+ .order-1-l { order: 1; }
+ .order-2-l { order: 2; }
+ .order-3-l { order: 3; }
+ .order-4-l { order: 4; }
+ .order-5-l { order: 5; }
+ .order-6-l { order: 6; }
+ .order-7-l { order: 7; }
+ .order-8-l { order: 8; }
+ .order-last-l { order: 99999; }
+ .flex-grow-0-l { flex-grow: 0; }
+ .flex-grow-1-l { flex-grow: 1; }
+ .flex-shrink-0-l { flex-shrink: 0; }
+ .flex-shrink-1-l { flex-shrink: 1; }
+ .fl-l { float: left; _display: inline; }
+ .fr-l { float: right; _display: inline; }
+ .fn-l { float: none; }
+ .i-l { font-style: italic; }
+ .fs-normal-l { font-style: normal; }
+ .normal-l { font-weight: normal; }
+ .b-l { font-weight: bold; }
+ .fw1-l { font-weight: 100; }
+ .fw2-l { font-weight: 200; }
+ .fw3-l { font-weight: 300; }
+ .fw4-l { font-weight: 400; }
+ .fw5-l { font-weight: 500; }
+ .fw6-l { font-weight: 600; }
+ .fw7-l { font-weight: 700; }
+ .fw8-l { font-weight: 800; }
+ .fw9-l { font-weight: 900; }
+ .h1-l { height: 1rem; }
+ .h2-l { height: 2rem; }
+ .h3-l { height: 4rem; }
+ .h4-l { height: 8rem; }
+ .h5-l { height: 16rem; }
+ .h-25-l { height: 25%; }
+ .h-50-l { height: 50%; }
+ .h-75-l { height: 75%; }
+ .h-100-l { height: 100%; }
+ .min-h-100-l { min-height: 100%; }
+ .vh-25-l { height: 25vh; }
+ .vh-50-l { height: 50vh; }
+ .vh-75-l { height: 75vh; }
+ .vh-100-l { height: 100vh; }
+ .min-vh-100-l { min-height: 100vh; }
+ .h-auto-l { height: auto; }
+ .h-inherit-l { height: inherit; }
+ .tracked-l { letter-spacing: .1em; }
+ .tracked-tight-l { letter-spacing: -.05em; }
+ .tracked-mega-l { letter-spacing: .25em; }
+ .lh-solid-l { line-height: 1; }
+ .lh-title-l { line-height: 1.25; }
+ .lh-copy-l { line-height: 1.5; }
+ .mw-100-l { max-width: 100%; }
+ .mw1-l { max-width: 1rem; }
+ .mw2-l { max-width: 2rem; }
+ .mw3-l { max-width: 4rem; }
+ .mw4-l { max-width: 8rem; }
+ .mw5-l { max-width: 16rem; }
+ .mw6-l { max-width: 32rem; }
+ .mw7-l { max-width: 48rem; }
+ .mw8-l { max-width: 64rem; }
+ .mw9-l { max-width: 96rem; }
+ .mw-none-l { max-width: none; }
+ .w1-l { width: 1rem; }
+ .w2-l { width: 2rem; }
+ .w3-l { width: 4rem; }
+ .w4-l { width: 8rem; }
+ .w5-l { width: 16rem; }
+ .w-10-l { width: 10%; }
+ .w-20-l { width: 20%; }
+ .w-25-l { width: 25%; }
+ .w-30-l { width: 30%; }
+ .w-33-l { width: 33%; }
+ .w-34-l { width: 34%; }
+ .w-40-l { width: 40%; }
+ .w-50-l { width: 50%; }
+ .w-60-l { width: 60%; }
+ .w-70-l { width: 70%; }
+ .w-75-l { width: 75%; }
+ .w-80-l { width: 80%; }
+ .w-90-l { width: 90%; }
+ .w-100-l { width: 100%; }
+ .w-third-l { width: 33.33333%; }
+ .w-two-thirds-l { width: 66.66667%; }
+ .w-auto-l { width: auto; }
+ .overflow-visible-l { overflow: visible; }
+ .overflow-hidden-l { overflow: hidden; }
+ .overflow-scroll-l { overflow: scroll; }
+ .overflow-auto-l { overflow: auto; }
+ .overflow-x-visible-l { overflow-x: visible; }
+ .overflow-x-hidden-l { overflow-x: hidden; }
+ .overflow-x-scroll-l { overflow-x: scroll; }
+ .overflow-x-auto-l { overflow-x: auto; }
+ .overflow-y-visible-l { overflow-y: visible; }
+ .overflow-y-hidden-l { overflow-y: hidden; }
+ .overflow-y-scroll-l { overflow-y: scroll; }
+ .overflow-y-auto-l { overflow-y: auto; }
+ .static-l { position: static; }
+ .relative-l { position: relative; }
+ .absolute-l { position: absolute; }
+ .fixed-l { position: fixed; }
+ .rotate-45-l { -webkit-transform: rotate( 45deg ); transform: rotate( 45deg ); }
+ .rotate-90-l { -webkit-transform: rotate( 90deg ); transform: rotate( 90deg ); }
+ .rotate-135-l { -webkit-transform: rotate( 135deg ); transform: rotate( 135deg ); }
+ .rotate-180-l { -webkit-transform: rotate( 180deg ); transform: rotate( 180deg ); }
+ .rotate-225-l { -webkit-transform: rotate( 225deg ); transform: rotate( 225deg ); }
+ .rotate-270-l { -webkit-transform: rotate( 270deg ); transform: rotate( 270deg ); }
+ .rotate-315-l { -webkit-transform: rotate( 315deg ); transform: rotate( 315deg ); }
+ .pa0-l { padding: 0; }
+ .pa1-l { padding: .25rem; }
+ .pa2-l { padding: .5rem; }
+ .pa3-l { padding: 1rem; }
+ .pa4-l { padding: 2rem; }
+ .pa5-l { padding: 4rem; }
+ .pa6-l { padding: 8rem; }
+ .pa7-l { padding: 16rem; }
+ .pl0-l { padding-left: 0; }
+ .pl1-l { padding-left: .25rem; }
+ .pl2-l { padding-left: .5rem; }
+ .pl3-l { padding-left: 1rem; }
+ .pl4-l { padding-left: 2rem; }
+ .pl5-l { padding-left: 4rem; }
+ .pl6-l { padding-left: 8rem; }
+ .pl7-l { padding-left: 16rem; }
+ .pr0-l { padding-right: 0; }
+ .pr1-l { padding-right: .25rem; }
+ .pr2-l { padding-right: .5rem; }
+ .pr3-l { padding-right: 1rem; }
+ .pr4-l { padding-right: 2rem; }
+ .pr5-l { padding-right: 4rem; }
+ .pr6-l { padding-right: 8rem; }
+ .pr7-l { padding-right: 16rem; }
+ .pb0-l { padding-bottom: 0; }
+ .pb1-l { padding-bottom: .25rem; }
+ .pb2-l { padding-bottom: .5rem; }
+ .pb3-l { padding-bottom: 1rem; }
+ .pb4-l { padding-bottom: 2rem; }
+ .pb5-l { padding-bottom: 4rem; }
+ .pb6-l { padding-bottom: 8rem; }
+ .pb7-l { padding-bottom: 16rem; }
+ .pt0-l { padding-top: 0; }
+ .pt1-l { padding-top: .25rem; }
+ .pt2-l { padding-top: .5rem; }
+ .pt3-l { padding-top: 1rem; }
+ .pt4-l { padding-top: 2rem; }
+ .pt5-l { padding-top: 4rem; }
+ .pt6-l { padding-top: 8rem; }
+ .pt7-l { padding-top: 16rem; }
+ .pv0-l { padding-top: 0; padding-bottom: 0; }
+ .pv1-l { padding-top: .25rem; padding-bottom: .25rem; }
+ .pv2-l { padding-top: .5rem; padding-bottom: .5rem; }
+ .pv3-l { padding-top: 1rem; padding-bottom: 1rem; }
+ .pv4-l { padding-top: 2rem; padding-bottom: 2rem; }
+ .pv5-l { padding-top: 4rem; padding-bottom: 4rem; }
+ .pv6-l { padding-top: 8rem; padding-bottom: 8rem; }
+ .pv7-l { padding-top: 16rem; padding-bottom: 16rem; }
+ .ph0-l { padding-left: 0; padding-right: 0; }
+ .ph1-l { padding-left: .25rem; padding-right: .25rem; }
+ .ph2-l { padding-left: .5rem; padding-right: .5rem; }
+ .ph3-l { padding-left: 1rem; padding-right: 1rem; }
+ .ph4-l { padding-left: 2rem; padding-right: 2rem; }
+ .ph5-l { padding-left: 4rem; padding-right: 4rem; }
+ .ph6-l { padding-left: 8rem; padding-right: 8rem; }
+ .ph7-l { padding-left: 16rem; padding-right: 16rem; }
+ .ma0-l { margin: 0; }
+ .ma1-l { margin: .25rem; }
+ .ma2-l { margin: .5rem; }
+ .ma3-l { margin: 1rem; }
+ .ma4-l { margin: 2rem; }
+ .ma5-l { margin: 4rem; }
+ .ma6-l { margin: 8rem; }
+ .ma7-l { margin: 16rem; }
+ .ml0-l { margin-left: 0; }
+ .ml1-l { margin-left: .25rem; }
+ .ml2-l { margin-left: .5rem; }
+ .ml3-l { margin-left: 1rem; }
+ .ml4-l { margin-left: 2rem; }
+ .ml5-l { margin-left: 4rem; }
+ .ml6-l { margin-left: 8rem; }
+ .ml7-l { margin-left: 16rem; }
+ .mr0-l { margin-right: 0; }
+ .mr1-l { margin-right: .25rem; }
+ .mr2-l { margin-right: .5rem; }
+ .mr3-l { margin-right: 1rem; }
+ .mr4-l { margin-right: 2rem; }
+ .mr5-l { margin-right: 4rem; }
+ .mr6-l { margin-right: 8rem; }
+ .mr7-l { margin-right: 16rem; }
+ .mb0-l { margin-bottom: 0; }
+ .mb1-l { margin-bottom: .25rem; }
+ .mb2-l { margin-bottom: .5rem; }
+ .mb3-l { margin-bottom: 1rem; }
+ .mb4-l { margin-bottom: 2rem; }
+ .mb5-l { margin-bottom: 4rem; }
+ .mb6-l { margin-bottom: 8rem; }
+ .mb7-l { margin-bottom: 16rem; }
+ .mt0-l { margin-top: 0; }
+ .mt1-l { margin-top: .25rem; }
+ .mt2-l { margin-top: .5rem; }
+ .mt3-l { margin-top: 1rem; }
+ .mt4-l { margin-top: 2rem; }
+ .mt5-l { margin-top: 4rem; }
+ .mt6-l { margin-top: 8rem; }
+ .mt7-l { margin-top: 16rem; }
+ .mv0-l { margin-top: 0; margin-bottom: 0; }
+ .mv1-l { margin-top: .25rem; margin-bottom: .25rem; }
+ .mv2-l { margin-top: .5rem; margin-bottom: .5rem; }
+ .mv3-l { margin-top: 1rem; margin-bottom: 1rem; }
+ .mv4-l { margin-top: 2rem; margin-bottom: 2rem; }
+ .mv5-l { margin-top: 4rem; margin-bottom: 4rem; }
+ .mv6-l { margin-top: 8rem; margin-bottom: 8rem; }
+ .mv7-l { margin-top: 16rem; margin-bottom: 16rem; }
+ .mh0-l { margin-left: 0; margin-right: 0; }
+ .mh1-l { margin-left: .25rem; margin-right: .25rem; }
+ .mh2-l { margin-left: .5rem; margin-right: .5rem; }
+ .mh3-l { margin-left: 1rem; margin-right: 1rem; }
+ .mh4-l { margin-left: 2rem; margin-right: 2rem; }
+ .mh5-l { margin-left: 4rem; margin-right: 4rem; }
+ .mh6-l { margin-left: 8rem; margin-right: 8rem; }
+ .mh7-l { margin-left: 16rem; margin-right: 16rem; }
+ .na1-l { margin: -0.25rem; }
+ .na2-l { margin: -0.5rem; }
+ .na3-l { margin: -1rem; }
+ .na4-l { margin: -2rem; }
+ .na5-l { margin: -4rem; }
+ .na6-l { margin: -8rem; }
+ .na7-l { margin: -16rem; }
+ .nl1-l { margin-left: -0.25rem; }
+ .nl2-l { margin-left: -0.5rem; }
+ .nl3-l { margin-left: -1rem; }
+ .nl4-l { margin-left: -2rem; }
+ .nl5-l { margin-left: -4rem; }
+ .nl6-l { margin-left: -8rem; }
+ .nl7-l { margin-left: -16rem; }
+ .nr1-l { margin-right: -0.25rem; }
+ .nr2-l { margin-right: -0.5rem; }
+ .nr3-l { margin-right: -1rem; }
+ .nr4-l { margin-right: -2rem; }
+ .nr5-l { margin-right: -4rem; }
+ .nr6-l { margin-right: -8rem; }
+ .nr7-l { margin-right: -16rem; }
+ .nb1-l { margin-bottom: -0.25rem; }
+ .nb2-l { margin-bottom: -0.5rem; }
+ .nb3-l { margin-bottom: -1rem; }
+ .nb4-l { margin-bottom: -2rem; }
+ .nb5-l { margin-bottom: -4rem; }
+ .nb6-l { margin-bottom: -8rem; }
+ .nb7-l { margin-bottom: -16rem; }
+ .nt1-l { margin-top: -0.25rem; }
+ .nt2-l { margin-top: -0.5rem; }
+ .nt3-l { margin-top: -1rem; }
+ .nt4-l { margin-top: -2rem; }
+ .nt5-l { margin-top: -4rem; }
+ .nt6-l { margin-top: -8rem; }
+ .nt7-l { margin-top: -16rem; }
+ .strike-l { text-decoration: line-through; }
+ .underline-l { text-decoration: underline; }
+ .no-underline-l { text-decoration: none; }
+ .tl-l { text-align: left; }
+ .tr-l { text-align: right; }
+ .tc-l { text-align: center; }
+ .tj-l { text-align: justify; }
+ .ttc-l { text-transform: capitalize; }
+ .ttl-l { text-transform: lowercase; }
+ .ttu-l { text-transform: uppercase; }
+ .ttn-l { text-transform: none; }
+ .f-6-l, .f-headline-l { font-size: 6rem; }
+ .f-5-l, .f-subheadline-l { font-size: 5rem; }
+ .f1-l { font-size: 3rem; }
+ .f2-l { font-size: 2.25rem; }
+ .f3-l { font-size: 1.5rem; }
+ .f4-l { font-size: 1.25rem; }
+ .f5-l { font-size: 1rem; }
+ .f6-l { font-size: .875rem; }
+ .f7-l { font-size: .75rem; }
+ .measure-l { max-width: 30em; }
+ .measure-wide-l { max-width: 34em; }
+ .measure-narrow-l { max-width: 20em; }
+ .indent-l { text-indent: 1em; margin-top: 0; margin-bottom: 0; }
+ .small-caps-l { font-variant: small-caps; }
+ .truncate-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.center-l { margin-right: auto; margin-left: auto; }
.mr-auto-l { margin-right: auto; }
.ml-auto-l { margin-left: auto; }
-}
-/*
-
- VISIBILITY
-
- Media Query Extensions:
- -s = small
- -m = medium
- -l = large
-
-*/
-/*
- Text that is hidden but accessible
- Ref: https://accessibility.18f.gov/hidden-content/
-*/
-.clip { border: 0; clip: rect( 0 0 0 0 ); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
-@container (min-width:30em) {
- .clip-s { border: 0; clip: rect( 0 0 0 0 ); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
-}
-@container (min-width:48em) {
- .clip-m { border: 0; clip: rect( 0 0 0 0 ); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
-}
-@container (min-width:64em) {
- .clip-l { border: 0; clip: rect( 0 0 0 0 ); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
-}
-/*
-
- WHITE SPACE
-
- Media Query Extensions:
- -s = small
- -m = medium
- -l = large
-
-*/
-.ws-normal { white-space: normal; }
-.nowrap { white-space: nowrap; }
-.pre { white-space: pre; }
-@container (min-width:30em) {
- .ws-normal-s { white-space: normal; }
- .nowrap-s { white-space: nowrap; }
- .pre-s { white-space: pre; }
-}
-@container (min-width:48em) {
- .ws-normal-m { white-space: normal; }
- .nowrap-m { white-space: nowrap; }
- .pre-m { white-space: pre; }
-}
-@container (min-width:64em) {
+ .clip-l { position: fixed !important; _position: absolute !important; clip: rect( 1px 1px 1px 1px ); /* IE6, IE7 */ clip: rect( 1px, 1px, 1px, 1px ); }
.ws-normal-l { white-space: normal; }
.nowrap-l { white-space: nowrap; }
.pre-l { white-space: pre; }
-}
-/*
-
- VERTICAL ALIGN
-
- Media Query Extensions:
- -s = small
- -m = medium
- -l = large
-
-*/
-.v-base { vertical-align: baseline; }
-.v-mid { vertical-align: middle; }
-.v-top { vertical-align: top; }
-.v-btm { vertical-align: bottom; }
-@container (min-width:30em) {
- .v-base-s { vertical-align: baseline; }
- .v-mid-s { vertical-align: middle; }
- .v-top-s { vertical-align: top; }
- .v-btm-s { vertical-align: bottom; }
-}
-@container (min-width:48em) {
- .v-base-m { vertical-align: baseline; }
- .v-mid-m { vertical-align: middle; }
- .v-top-m { vertical-align: top; }
- .v-btm-m { vertical-align: bottom; }
-}
-@container (min-width:64em) {
.v-base-l { vertical-align: baseline; }
.v-mid-l { vertical-align: middle; }
.v-top-l { vertical-align: top; }
.v-btm-l { vertical-align: bottom; }
}
-/*
-
- HOVER EFFECTS
- Docs: http://tachyons.io/docs/themes/hovers/
-
- - Dim
- - Glow
- - Hide Child
- - Underline text
- - Grow
- - Pointer
- - Shadow
- - Colors
-
-*/
-/*
-
- Dim element on hover by adding the dim class.
-
-*/
-.dim { opacity: 1; transition: opacity .15s ease-in; }
-.dim:hover, .dim:focus { opacity: .5; transition: opacity .15s ease-in; }
-.dim:active { opacity: .8; transition: opacity .15s ease-out; }
-/*
-
- Animate opacity to 100% on hover by adding the glow class.
-
-*/
-.glow { transition: opacity .15s ease-in; }
-.glow:hover, .glow:focus { opacity: 1; transition: opacity .15s ease-in; }
-/*
-
- Hide child & reveal on hover:
-
- Put the hide-child class on a parent element and any nested element with the
- child class will be hidden and displayed on hover or focus.
-
-
-
Hidden until hover or focus
-
Hidden until hover or focus
-
Hidden until hover or focus
-
Hidden until hover or focus
-
-*/
-.hide-child .child { opacity: 0; transition: opacity .15s ease-in; }
-.hide-child:hover .child, .hide-child:focus .child, .hide-child:active .child { opacity: 1; transition: opacity .15s ease-in; }
-.underline-hover:hover, .underline-hover:focus { text-decoration: underline; }
-/* Can combine this with overflow-hidden to make background images grow on hover
- * even if you are using background-size: cover */
-.grow { -moz-osx-font-smoothing: grayscale; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ( 0 ); transform: translateZ( 0 ); transition: -webkit-transform .25s ease-out; transition: transform .25s ease-out; transition: transform .25s ease-out, -webkit-transform .25s ease-out; }
-.grow:hover, .grow:focus { -webkit-transform: scale( 1.05 ); transform: scale( 1.05 ); }
-.grow:active { -webkit-transform: scale( .90 ); transform: scale( .90 ); }
-.grow-large { -moz-osx-font-smoothing: grayscale; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ( 0 ); transform: translateZ( 0 ); transition: -webkit-transform .25s ease-in-out; transition: transform .25s ease-in-out; transition: transform .25s ease-in-out, -webkit-transform .25s ease-in-out; }
-.grow-large:hover, .grow-large:focus { -webkit-transform: scale( 1.2 ); transform: scale( 1.2 ); }
-.grow-large:active { -webkit-transform: scale( .95 ); transform: scale( .95 ); }
-/* Add pointer on hover */
-.pointer { cursor: pointer; }
-.trans-all { transition: all .25s cubic-bezier( .165, .84, .44, 1 ); }
-/*
- * TODO: Test and rename
- Add shadow on hover.
-
- Performant box-shadow animation pattern from
- http://tobiasahlin.com/blog/how-to-animate-box-shadow/
-
-.shadow-hover {
- cursor: pointer;
- position: relative;
- transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
-}
-
-.shadow-hover::after {
- content: '';
- box-shadow: 0px 0px 16px 2px rgba( 0, 0, 0, .2 );
- border-radius: inherit;
- opacity: 0;
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- z-index: -1;
- transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
-}
-
-.shadow-hover:hover::after,
-.shadow-hover:focus::after {
- opacity: 1;
-}
-*/
-/* Combine with classes in skins and skins-pseudo for
- * many different transition possibilities. */
-.trans-bg { transition: background-color .25s ease-in-out; }
-.trans-color { transition: color .25s ease-in-out; }
-.hover-filter-none:hover { -webkit-filter: none; filter: none; }
-.hover-filter-blur-none:hover { -webkit-filter: blur( 0 ); filter: blur( 0 ); }
-.hover-filter-blur:hover { -webkit-filter: blur( 96px ); filter: blur( 96px ); }
-.hover-grayscale-0:hover { -webkit-filter: grayscale( 0 ); filter: grayscale( 0 ); }
-.hover-grayscale-50:hover { -webkit-filter: grayscale( 50% ); filter: grayscale( 50% ); }
-.hover-grayscale-100:hover { -webkit-filter: grayscale( 100% ); filter: grayscale( 100% ); }
-/*
-
- Z-INDEX
-
- Base
- z = z-index
-
- Modifiers
- -0 = literal value 0
- -1 = literal value 1
- -2 = literal value 2
- -3 = literal value 3
- -4 = literal value 4
- -5 = literal value 5
- -999 = literal value 999
- -9999 = literal value 9999
-
- -max = largest accepted z-index value as integer
-
- -inherit = string value inherit
- -initial = string value initial
- -unset = string value unset
-
- MDN: https://developer.mozilla.org/en/docs/Web/CSS/z-index
- Spec: http://www.w3.org/TR/CSS2/zindex.html
- Articles:
- https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
-
- Tips on extending:
- There might be a time worth using negative z-index values.
- Or if you are using tachyons with another project, you might need to
- adjust these values to suit your needs.
-
-*/
-.z-0 { z-index: 0; }
-.z-1 { z-index: 1; }
-.z-2 { z-index: 2; }
-.z-3 { z-index: 3; }
-.z-4 { z-index: 4; }
-.z-5 { z-index: 5; }
-.z-999 { z-index: 999; }
-.z-9999 { z-index: 9999; }
-.z-max { z-index: 2147483647; }
-.z-inherit { z-index: inherit; }
-.z-initial { z-index: initial; }
-.z-unset { z-index: unset; }
-/*
-
- NESTED
- Tachyons module for styling nested elements
- that are generated by a cms.
-
-*/
-.nested-copy-line-height p, .nested-copy-line-height ul,
-.nested-copy-line-height ol { line-height: var( --line-height-body, 1.5 ); }
-.nested-headline-line-height h1, .nested-headline-line-height h2,
-.nested-headline-line-height h3, .nested-headline-line-height h4,
-.nested-headline-line-height h5, .nested-headline-line-height h6 { line-height: var( --line-height-title, 1.25 ); }
-.nested-list-reset ul, .nested-list-reset ol { padding-left: 0; margin-left: 0; list-style-type: none; }
-.nested-copy-indent p+p { text-indent: 1em; margin-top: 0; margin-bottom: 0; }
-.nested-copy-separator p+p { margin-top: 1.5em; }
-.nested-img img { width: 100%; max-width: 100%; display: block; }
-.nested-links a { color: var( --blue-5 ); transition: color .15s ease-in; }
-.nested-links a:hover, .nested-links a:focus { color: var( --blue-3 ); transition: color .15s ease-in; }
-/*
-
- STYLES
-
- Add custom styles here.
-
-*/
-/* Debugging */
-/*
-
- DEBUG CHILDREN
- Docs: http://tachyons.io/docs/debug/
-
- Just add the debug class to any element to see outlines on its
- children.
-
-*/
-.debug * { --debug-color: 128 0 90; --debug-opacity: .8; outline: 1px solid rbg( var( --debug-color, 128 0 90 ) / ( --debug-opacity, .8 ) ); }
-/*
-
- DEBUG GRID
- http://tachyons.io/docs/debug-grid/
-
- Can be useful for debugging layout issues
- or helping to make sure things line up perfectly.
- Just tack this class onto a parent element
-
-*/
-.debug-grid { --grid-size: 16px; --grid-color: var( --magenta-9 ); background-image: repeating-linear-gradient( 0deg, var( --grid-color ), var( --grid-color ) 1px, transparent 1px, transparent var( --grid-size ) ), repeating-linear-gradient( 90deg, var( --grid-color ), var( --grid-color ) 1px, transparent 1px, transparent var( --grid-size ) ); background-size: 100% var( --grid-size ); }
-/* Uncomment out the line below to help debug layout issues */
-/* @import './_debug'; */
-@media (prefers-color-scheme: dark) { --shadow-color: 255 255 255; }
diff --git a/css/tachyons.min.css b/css/tachyons.min.css
index bdfbd7904..4555f3db3 100644
--- a/css/tachyons.min.css
+++ b/css/tachyons.min.css
@@ -1,3 +1,3 @@
-/*! TACHYONS v5.0.0.beta | http://tachyons.io */
-/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}:root{--tint-0:hsla(0,0%,100%,.035);--tint-1:hsla(0,0%,100%,.1);--tint-2:hsla(0,0%,100%,.19);--tint-3:hsla(0,0%,100%,.28);--tint-4:hsla(0,0%,100%,.36);--tint-5:hsla(0,0%,100%,.45);--tint-6:hsla(0,0%,100%,.55);--tint-7:hsla(0,0%,100%,.64);--tint-8:hsla(0,0%,100%,.73);--tint-9:hsla(0,0%,100%,.815);--tint-10:hsla(0,0%,100%,.895);--tint-11:hsla(0,0%,100%,.94);--shadow-11:rgba(0,0,0,.94);--shadow-10:rgba(0,0,0,.895);--shadow-9:rgba(0,0,0,.815);--shadow-8:rgba(0,0,0,.73);--shadow-7:rgba(0,0,0,.64);--shadow-6:rgba(0,0,0,.55);--shadow-5:rgba(0,0,0,.45);--shadow-4:rgba(0,0,0,.36);--shadow-3:rgba(0,0,0,.28);--shadow-2:rgba(0,0,0,.19);--shadow-1:rgba(0,0,0,.1);--shadow-0:rgba(0,0,0,.035);--gray-0:#000;--gray-1:#171717;--gray-2:#2f2f2f;--gray-3:#464646;--gray-4:#5e5e5e;--gray-5:#757575;--gray-6:#8c8c8c;--gray-7:#a3a3a3;--gray-8:#bababa;--gray-9:#d1d1d1;--gray-10:#e8e8e8;--gray-11:#fff;--slate-gray-0:#09090b;--slate-gray-1:#1d1d22;--slate-gray-2:#313138;--slate-gray-3:#45444f;--slate-gray-4:#595866;--slate-gray-5:#6d6c7d;--slate-gray-6:#838292;--slate-gray-7:#9a9aa7;--slate-gray-8:#b2b1bb;--slate-gray-9:#c9c9d0;--slate-gray-10:#e1e0e4;--slate-gray-11:#f8f8f9;--blue-1:#071e3f;--blue-2:#0c3166;--blue-3:#10448d;--blue-4:#1556b4;--blue-5:#1969db;--blue-6:#317fed;--blue-7:#5797f0;--blue-8:#7daef4;--blue-9:#a3c6f7;--blue-10:#c9ddfa;--blue-11:#eff5fe;--indigo-0:#080614;--indigo-1:#19143f;--indigo-2:#2a216a;--indigo-3:#3a2e95;--indigo-4:#4b3bc0;--indigo-5:#5c49eb;--indigo-6:#725fff;--indigo-7:#8c7cff;--indigo-8:#a69aff;--indigo-9:#c0b7ff;--indigo-10:#dad5ff;--indigo-11:#f4f3ff;--violet-0:#110517;--violet-1:#2e0d3e;--violet-2:#4b1465;--violet-3:#681c8c;--violet-4:#8424b3;--violet-5:#a12cda;--violet-6:#b543ec;--violet-7:#c366f0;--violet-8:#d089f3;--violet-9:#deabf7;--violet-10:#eccefa;--violet-11:#f9f0fe;--magenta-0:#13040f;--magenta-1:#350a2c;--magenta-2:#581148;--magenta-3:#7b1765;--magenta-4:#9e1e82;--magenta-5:#c1249e;--magenta-6:#d43cb2;--magenta-7:#dc61c1;--magenta-8:#e485cf;--magenta-9:#eca9dd;--magenta-10:#f4ceec;--magenta-11:#fcf2fa;--red-0:#120205;--red-1:#39050f;--red-2:#5f0819;--red-3:#860b24;--red-4:#ac0e2e;--red-5:#d31138;--red-6:#e7284e;--red-7:#ec506f;--red-8:#f07790;--red-9:#f49fb0;--red-10:#f9c7d1;--red-11:#fdeef1;--red-orange-0:#190b05;--red-orange-1:#3d1307;--red-orange-2:#601b0a;--red-orange-3:#84240c;--red-orange-4:#a72c0e;--red-orange-5:#cb3411;--red-orange-6:#ee3c13;--red-orange-7:#fe562f;--red-orange-8:#fe7d5e;--red-orange-9:#ffa48e;--red-orange-10:#ffccbe;--red-orange-11:#fff3ee;--orange-0:#150d04;--orange-1:#2e1c08;--orange-2:#472a0c;--orange-3:#603910;--orange-4:#794714;--orange-5:#a65d13;--orange-6:#d37413;--orange-7:#ff8a14;--orange-8:#ffa54a;--orange-9:#ffc081;--orange-10:#ffdab7;--orange-11:#fff5ed;--gold-0:#140e05;--gold-1:#2c1f0a;--gold-2:#432f0e;--gold-3:#5b4013;--gold-4:#725118;--gold-5:#946818;--gold-6:#d4950d;--gold-7:#eeb028;--gold-8:#f2c259;--gold-9:#f7d38a;--gold-10:#fbe5bc;--gold-11:#fff5e9;--yellow-0:#111006;--yellow-1:#252405;--yellow-2:#3a3804;--yellow-3:#4e4d03;--yellow-4:#636101;--yellow-5:#777500;--yellow-6:#ccc500;--yellow-7:#fcf433;--yellow-8:#fdf67a;--yellow-9:#fdf89b;--yellow-10:#fef9bb;--yellow-11:#fefadb;--green-0:#091108;--green-1:#0f2611;--green-2:#153c1a;--green-3:#1b5122;--green-4:#21662b;--green-5:#25833a;--green-6:#26b056;--green-7:#35d272;--green-8:#63dd90;--green-9:#90e8ae;--green-10:#bdf3cc;--green-11:#eafeea;--teal-0:#07100c;--teal-1:#0c231a;--teal-2:#113628;--teal-3:#164936;--teal-4:#1b5b45;--teal-5:#177f63;--teal-6:#12a282;--teal-7:#2abb9b;--teal-8:#5acab1;--teal-9:#8bdac7;--teal-10:#bbe9dc;--teal-11:#ecf8f2;--cyan-0:#0a1211;--cyan-1:#102425;--cyan-2:#153639;--cyan-3:#1b484c;--cyan-4:#215a60;--cyan-5:#247981;--cyan-6:#24a9b6;--cyan-7:#28d6e6;--cyan-8:#57e0ec;--cyan-9:#85eaf2;--cyan-10:#b4f5f9;--cyan-11:#e2ffff;--transparent:hsla(0,0,0,0);@supports (color:color(display-p3 1 1 1)){:root{--blue-0:color(display-p3 0 .07 .25);--blue-1:color(display-p3 0 .09 .32);--blue-2:color(display-p3 0 .11 .42);--blue-3:color(display-p3 0 .15 .53);--blue-4:color(display-p3 0 .16 .7);--blue-5:color(display-p3 0 .22 .88);--blue-6:color(display-p3 .06 .37 1);--blue-7:color(display-p3 .38 .59 1);--blue-8:color(display-p3 .66 .79 1);--blue-9:color(display-p3 .79 .86 .99);--blue-10:color(display-p3 .87 .92 .99);--blue-11:color(display-p3 .92 .95 1);--indigo-0:color(display-p3 .06 .03 .21);--indigo-1:color(display-p3 .09 .07 .26);--indigo-2:color(display-p3 .15 .11 .42);--indigo-3:color(display-p3 .18 .14 .57);--indigo-4:color(display-p3 .2 .18 .75);--indigo-5:color(display-p3 .26 .22 1);--indigo-6:color(display-p3 .28 .28 1);--indigo-7:color(display-p3 .47 .49 1);--indigo-8:color(display-p3 .67 .68 1);--indigo-9:color(display-p3 .81 .81 .98);--indigo-10:color(display-p3 .87 .92 .99);--indigo-11:color(display-p3 .92 .95 1)}}--degrees-1:0;--degrees-2:45deg;--degrees-3:90deg;--degrees-4:135deg;--degrees-5:180deg;--degrees-6:225deg;--degrees-7:270deg;--degrees-8:315deg;--gradient-degree-0:var(--degrees-1,0);--gradient-degree:var(--degrees-2,45deg);--gradient-degree-2:var(--degrees-4,135deg);--gradient-stripe-width:12px;--gradient-stripe-width-2:var(--border-width-1);--gradient-color-1:var(--blue-2);--gradient-color-2:var(--magenta-6);--gradient-color-3:var(--red-5);--gradient-color-4:var(--indigo-5);--gradient-color-5:var(--violet-0);--gradient-color-6:var(--violet-5);--gradient-color-7:var(--magenta-0);--gradient-color-8:var(--magenta-5);--gradient-color-9:var(--red-0);--gradient-color-10:var(--red-5);--gradient-color-11:var(--red-orange-0);--gradient-color-12:var(--red-orange-5);--gradient-color-13:var(--orange-0);--gradient-color-14:var(--orange-5);--gradient-color-15:var(--gold-0);--gradient-color-16:var(--gold-5);--gradient-color-17:var(--yellow-0);--gradient-color-18:var(--yellow-5);--gradient-color-19:var(--green-0);--gradient-color-20:var(--green-5);--gradient-color-21:var(--teal-0);--gradient-color-22:var(--teal-5);--gradient-color-23:var(--cyan-0);--gradient-color-24:var(--cyan-5);--gradient-stop:50%;--font-size-1:12px;--font-size-2:14px;--font-size-3:16px;--font-size-4:20px;--font-size-5:24px;--font-size-6:32px;--font-size-7:48px;--font-size-8:64px;--font-size-9:96px;--font-size-10:128px;--font-size-11:192px;--font-size-12:256px;--measure-narrow:45ch;--measure:66ch;--measure-wide:80ch;--border-radius-0:0;--border-radius-1:4px;--border-radius-2:6px;--border-radius-3:8px;--border-radius-4:12px;--border-radius-5:16px;--border-radius-6:20px;--border-radius-7:24px;--border-radius-8:32px;--border-radius-9:48px;--border-radius-10:64px;--border-radius-11:9999px;--border-radius:var(--border-radius-2);--border-width-0:0;--border-width-1:1px;--border-width-2:2px;--border-width-3:4px;--border-width-4:8px;--border-width-5:16px;--border-width:var(--border-width-1,1px);--border-color:var(--gray-5,gray);--line-height-solid:1;--line-height-heading:1.25;--line-height-body:1.5;--letter-spacing-tracked:.1em;--letter-spacing-tight:-0.05em;--letter-spacing-large:.25em;--font-family-heading:Inter,-apple-system,BlinkMacSystemFont,avenir next,avenir,segoe ui,helvetica neue,helvetica,Cantarell,Ubuntu,roboto,noto,arial,sans-serif;--font-family-body:Inter,-apple-system,BlinkMacSystemFont,avenir next,avenir,segoe ui,helvetica neue,helvetica,Cantarell,Ubuntu,roboto,noto,arial,sans-serif;--font-family-mono:Inconsolata,Menlo,Consolas,Monaco,Liberation Mono,Lucida Console,monospace;--spacing-0:0;--spacing-1:2px;--spacing-2:4px;--spacing-3:8px;--spacing-4:16px;--spacing-5:32px;--spacing-6:64px;--spacing-7:128px;--spacing-8:256px;--spacing-9:512px;--size-0:0;--size-1:1rem;--size-2:2rem;--size-3:3rem;--size-4:4rem;--size-5:8rem;--size-6:16rem;--size-7:32rem;--size-8:64rem;--shadow-color:0 0 0;--shadow-color-invert:255 255 255;--shadow-border-width:1px;--shadow-opacity:.25;--opacity-0:0;--opacity-1:.025;--opacity-2:.05;--opacity-3:.1;--opacity-4:.2;--opacity-5:.3;--opacity-6:.4;--opacity-7:.5;--opacity-8:.6;--opacity-9:.7;--opacity-10:.8;--opacity-11:.9;--opacity-12:1;--duration-0:125ms;--duration-1:250ms;--duration-2:500ms;--easing-function-0:cubic-bezier(.543,1.086,.5,-0.383);--easing-function-1:ease;--easing-function-2:ease-out;--easing-function-3:ease-in-out;--easing-function-4:linear}.gradient-1{background:linear-gradient(var(--gradient-degree),var(--gradient-color-1),var(--gradient-color-2))}.gradient-2{background:linear-gradient(var(--gradient-degree),var(--gradient-color-1) var(--gradient-stop),var(--gradient-color-2) var(--gradient-stop))}.gradient-3{background:repeating-linear-gradient(var(--gradient-degree),transparent,transparent var(--gradient-stripe-width),var(--gradient-color-1) var(--gradient-stripe-width),var(--gradient-color-1) calc(var(--gradient-stripe-width) + var(--gradient-stripe-width-2)))}.gradient-4{background:repeating-radial-gradient(circle,transparent 0,transparent var(--gradient-stripe-width),var(--gradient-color-1) var(--gradient-stripe-width),var(--gradient-color-1) calc(var(--gradient-stripe-width) + var(--gradient-stripe-width-2)))}*,.border-box,.border-box:after,.border-box:before,:after,:before{box-sizing:border-box}.content-box{box-sizing:content-box}.container-size{container-type:size}.container-inline,.root{container-type:inline-size}.container-normal{container-type:normal}@container (min-width:30em){.container-size-s{container-type:size}.container-inline-s{container-type:inline-size}.container-normal-s{container-type:normal}}@container (min-width:48em){.container-size-m{container-type:size}.container-inline-m{container-type:inline-size}.container-normal-m{container-type:normal}}@container (min-width:64em){.container-size-l{container-type:size}.container-inline-l{container-type:inline-size}.container-normal-l{container-type:normal}}.unset{all:unset}.initial{all:initial}.inherit{all:inherit}.revert{all:revert}.aspect-ratio-16x9{aspect-ratio:16/9}.aspect-ratio-9x16{aspect-ratio:9/16}.aspect-ratio-4x3{aspect-ratio:4/3}.aspect-ratio-3x4{aspect-ratio:3/4}.aspect-ratio-6x4{aspect-ratio:6/4}.aspect-ratio-4x6{aspect-ratio:4/6}.aspect-ratio-8x5{aspect-ratio:8/5}.aspect-ratio-5x8{aspect-ratio:5/8}.aspect-ratio-7x5{aspect-ratio:7/5}.aspect-ratio-5x7{aspect-ratio:5/7}.aspect-ratio-1x1,.aspect-ratio-square{aspect-ratio:1/1}@container (min-width:30em){.aspect-ratio-16x9-s{aspect-ratio:16/9}.aspect-ratio-9x16-s{aspect-ratio:9/16}.aspect-ratio-4x3-s{aspect-ratio:4/3}.aspect-ratio-3x4-s{aspect-ratio:3/4}.aspect-ratio-6x4-s{aspect-ratio:6/4}.aspect-ratio-4x6-s{aspect-ratio:4/6}.aspect-ratio-8x5-s{aspect-ratio:8/5}.aspect-ratio-5x8-s{aspect-ratio:5/8}.aspect-ratio-7x5-s{aspect-ratio:7/5}.aspect-ratio-5x7-s{aspect-ratio:5/7}.aspect-ratio-1x1-s,.aspect-ratio-square-s{aspect-ratio:1/1}}@container (min-width:48em){.aspect-ratio-16x9-m{aspect-ratio:16/9}.aspect-ratio-9x16-m{aspect-ratio:9/16}.aspect-ratio-4x3-m{aspect-ratio:4/3}.aspect-ratio-3x4-m{aspect-ratio:3/4}.aspect-ratio-6x4-m{aspect-ratio:6/4}.aspect-ratio-4x6-m{aspect-ratio:4/6}.aspect-ratio-8x5-m{aspect-ratio:8/5}.aspect-ratio-5x8-m{aspect-ratio:5/8}.aspect-ratio-7x5-m{aspect-ratio:7/5}.aspect-ratio-5x7-m{aspect-ratio:5/7}.aspect-ratio-1x1-m,.aspect-ratio-square-m{aspect-ratio:1/1}}@container (min-width:64em){.aspect-ratio-16x9-l{aspect-ratio:16/9}.aspect-ratio-9x16-l{aspect-ratio:9/16}.aspect-ratio-4x3-l{aspect-ratio:4/3}.aspect-ratio-3x4-l{aspect-ratio:3/4}.aspect-ratio-6x4-l{aspect-ratio:6/4}.aspect-ratio-4x6-l{aspect-ratio:4/6}.aspect-ratio-8x5-l{aspect-ratio:8/5}.aspect-ratio-5x8-l{aspect-ratio:5/8}.aspect-ratio-7x5-l{aspect-ratio:7/5}.aspect-ratio-5x7-l{aspect-ratio:5/7}.aspect-ratio-1x1-l,.aspect-ratio-square-l{aspect-ratio:1/1}}img{display:block;max-width:100%}.random-image{background-image:url(https://source.unsplash.com/random);background-size:cover}.random-image-landscape{background-image:url(https://source.unsplash.com/random/1920x1080);background-size:cover}.random-image-portrait{background-image:url(https://source.unsplash.com/random/1080x1920);background-size:cover}.cover{background-size:cover!important}.contain{background-size:contain!important}.bg1{background-size:4px}.bg2{background-size:8px}.bg3{background-size:16px}.bg4{background-size:32px}.bg5{background-size:64px}.bg6{background-size:100%}.bg7{background-size:150%}.bg8{background-size:200%}@container (min-width:30em){.cover-s{background-size:cover!important}.contain-s{background-size:contain!important}.bg1-s{background-size:4px}.bg2-s{background-size:8px}.bg3-s{background-size:16px}.bg4-s{background-size:32px}.bg5-s{background-size:64px}.bg6-s{background-size:100%}.bg7-s{background-size:150%}.bg8-s{background-size:200%}}@container (min-width:48em){.cover-m{background-size:cover!important}.contain-m{background-size:contain!important}.bg1-m{background-size:4px}.bg2-m{background-size:8px}.bg3-m{background-size:16px}.bg4-m{background-size:32px}.bg5-m{background-size:64px}.bg6-m{background-size:100%}.bg7-m{background-size:150%}.bg8-m{background-size:200%}}@container (min-width:64em){.cover-l{background-size:cover!important}.contain-l{background-size:contain!important}.bg1-l{background-size:4px}.bg2-l{background-size:8px}.bg3-l{background-size:16px}.bg4-l{background-size:32px}.bg5-l{background-size:64px}.bg6-l{background-size:100%}.bg7-l{background-size:150%}.bg8-l{background-size:200%}}.bg-center{background-position:50%}.bg-center,.bg-top{background-repeat:no-repeat}.bg-top{background-position:top}.bg-right{background-position:100%}.bg-bottom,.bg-right{background-repeat:no-repeat}.bg-bottom{background-position:bottom}.bg-left{background-repeat:no-repeat;background-position:0}@container (min-width:30em){.bg-center-s{background-position:50%}.bg-center-s,.bg-top-s{background-repeat:no-repeat}.bg-top-s{background-position:top}.bg-right-s{background-position:100%}.bg-bottom-s,.bg-right-s{background-repeat:no-repeat}.bg-bottom-s{background-position:bottom}.bg-left-s{background-repeat:no-repeat;background-position:0}}@container (min-width:48em){.bg-center-m{background-position:50%}.bg-center-m,.bg-top-m{background-repeat:no-repeat}.bg-top-m{background-position:top}.bg-right-m{background-position:100%}.bg-bottom-m,.bg-right-m{background-repeat:no-repeat}.bg-bottom-m{background-position:bottom}.bg-left-m{background-repeat:no-repeat;background-position:0}}@container (min-width:64em){.bg-center-l{background-position:50%}.bg-center-l,.bg-top-l{background-repeat:no-repeat}.bg-top-l{background-position:top}.bg-right-l{background-position:100%}.bg-bottom-l,.bg-right-l{background-repeat:no-repeat}.bg-bottom-l{background-position:bottom}.bg-left-l{background-repeat:no-repeat;background-position:0}}.outline{outline:var(--border-width,1px) solid currentColor}.outline-color{outline:var(--border-width,1px) solid var(--border-color,gray)}.outline-transparent{outline:var(--border-width,1px) solid transparent}.outline-0{outline:0}@container (min-width:30em){.outline-s{outline:var(--border-width,1px) solid currentColor}.outline-color-s{outline:var(--border-width,1px) solid var(--border-color,gray)}.outline-transparent-s{outline:var(--border-width,1px) solid transparent}.outline-0-s{outline:0}}@container (min-width:48em){.outline-m{outline:var(--border-width,1px) solid currentColor}.outline-color-m{outline:var(--border-width,1px) solid var(--border-color,gray)}.outline-transparent-m{outline:var(--border-width,1px) solid transparent}.outline-0-m{outline:0}}@container (min-width:64em){.outline-l{outline:var(--border-width,1px) solid currentColor}.outline-color-l{outline:var(--border-width,1px) solid var(--border-color,gray)}.outline-transparent-l{outline:var(--border-width,1px) solid transparent}.outline-0-l{outline:0}}.ba{border-style:solid;border-width:var(--border-width,1px)}.bt{border-top-style:solid;border-top-width:var(--border-width,1px)}.br{border-right-style:solid;border-right-width:var(--border-width,1px)}.bb{border-bottom-style:solid;border-bottom-width:var(--border-width,1px)}.bl{border-left-style:solid;border-left-width:var(--border-width,1px)}.bn{border-style:none;border-width:0}@container (min-width:30em){.ba-s{border-style:solid;border-width:var(--border-width,1px)}.bt-s{border-top-style:solid;border-top-width:var(--border-width,1px)}.br-s{border-right-style:solid;border-right-width:var(--border-width,1px)}.bb-s{border-bottom-style:solid;border-bottom-width:var(--border-width,1px)}.bl-s{border-left-style:solid;border-left-width:var(--border-width,1px)}.bn-s{border-style:none;border-width:0}}@container (min-width:48em){.ba-m{border-style:solid;border-width:var(--border-width,1px)}.bt-m{border-top-style:solid;border-top-width:var(--border-width,1px)}.br-m{border-right-style:solid;border-right-width:var(--border-width,1px)}.bb-m{border-bottom-style:solid;border-bottom-width:var(--border-width,1px)}.bl-m{border-left-style:solid;border-left-width:var(--border-width,1px)}.bn-m{border-style:none;border-width:0}}@container (min-width:64em){.ba-l{border-style:solid;border-width:var(--border-width,1px)}.bt-l{border-top-style:solid;border-top-width:var(--border-width,1px)}.br-l{border-right-style:solid;border-right-width:var(--border-width,1px)}.bb-l{border-bottom-style:solid;border-bottom-width:var(--border-width,1px)}.bl-l{border-left-style:solid;border-left-width:var(--border-width,1px)}.bn-l{border-style:none;border-width:0}}.b--color{border-color:var(--border-color,gray)}.b--light{border-color:var(--overlay-tint-2,gray)}.b--dark{border-color:var(--overlay-shadow-9,gray)}.b--transparent{border-color:transparent}.b--current{border-color:currentColor}.b--inherit{border-color:inherit}.b--initial{border-color:initial}.b--unset{border-color:unset}.br-primary{border-radius:var(--border-radius,6px)}.br0{border-radius:var(--border-radius-0,0)}.br1{border-radius:var(--border-radius-1,4px)}.br2{border-radius:var(--border-radius-2,6px)}.br3{border-radius:var(--border-radius-3,8px)}.br4{border-radius:var(--border-radius-4,12px)}.br5{border-radius:var(--border-radius-5,16px)}.br6{border-radius:var(--border-radius-6,20px)}.br7{border-radius:var(--border-radius-7,24px)}.br8{border-radius:var(--border-radius-8,32px)}.br9{border-radius:var(--border-radius-9,48px)}.br10{border-radius:var(--border-radius-10,64px)}.br11{border-radius:var(--border-radius-11,9999px)}.br--bottom{border-top-left-radius:0;border-top-right-radius:0}.br--top{border-bottom-right-radius:0}.br--right,.br--top{border-bottom-left-radius:0}.br--right{border-top-left-radius:0}.br--left{border-top-right-radius:0;border-bottom-right-radius:0}.br-inherit{border-radius:inherit}.br-initial{border-radius:initial}.br-unset{border-radius:unset}@container (min-width:30em){.br-primary-s{border-radius:var(--border-radius,6px)}.br0-s{border-radius:var(--border-radius-0,0)}.br1-s{border-radius:var(--border-radius-1,4px)}.br2-s{border-radius:var(--border-radius-2,6px)}.br3-s{border-radius:var(--border-radius-3,8px)}.br4-s{border-radius:var(--border-radius-4,12px)}.br5-s{border-radius:var(--border-radius-5,16px)}.br6-s{border-radius:var(--border-radius-6,20px)}.br7-s{border-radius:var(--border-radius-7,24px)}.br8-s{border-radius:var(--border-radius-8,32px)}.br9-s{border-radius:var(--border-radius-9,48px)}.br10-s{border-radius:var(--border-radius-10,64px)}.br11-s{border-radius:var(--border-radius-11,9999px)}.br--bottom-s{border-top-left-radius:0;border-top-right-radius:0}.br--top-s{border-bottom-right-radius:0}.br--right-s,.br--top-s{border-bottom-left-radius:0}.br--right-s{border-top-left-radius:0}.br--left-s{border-top-right-radius:0;border-bottom-right-radius:0}.br-inherit-s{border-radius:inherit}.br-initial-s{border-radius:initial}.br-unset-s{border-radius:unset}}@container (min-width:48em){.br-primary-m{border-radius:var(--border-radius,6px)}.br0-m{border-radius:var(--border-radius-0,0)}.br1-m{border-radius:var(--border-radius-1,4px)}.br2-m{border-radius:var(--border-radius-2,6px)}.br3-m{border-radius:var(--border-radius-3,8px)}.br4-m{border-radius:var(--border-radius-4,12px)}.br5-m{border-radius:var(--border-radius-5,16px)}.br6-m{border-radius:var(--border-radius-6,20px)}.br7-m{border-radius:var(--border-radius-7,24px)}.br8-m{border-radius:var(--border-radius-8,32px)}.br9-m{border-radius:var(--border-radius-9,48px)}.br10-m{border-radius:var(--border-radius-10,64px)}.br11-m{border-radius:var(--border-radius-11,9999px)}.br--bottom-m{border-top-left-radius:0;border-top-right-radius:0}.br--top-m{border-bottom-right-radius:0}.br--right-m,.br--top-m{border-bottom-left-radius:0}.br--right-m{border-top-left-radius:0}.br--left-m{border-top-right-radius:0;border-bottom-right-radius:0}.br-inherit-m{border-radius:inherit}.br-initial-m{border-radius:initial}.br-unset-m{border-radius:unset}}@container (min-width:64em){.br-primary-l{border-radius:var(--border-radius,6px)}.br0-l{border-radius:var(--border-radius-0,0)}.br1-l{border-radius:var(--border-radius-1,4px)}.br2-l{border-radius:var(--border-radius-2,6px)}.br3-l{border-radius:var(--border-radius-3,8px)}.br4-l{border-radius:var(--border-radius-4,12px)}.br5-l{border-radius:var(--border-radius-5,16px)}.br6-l{border-radius:var(--border-radius-6,20px)}.br7-l{border-radius:var(--border-radius-7,24px)}.br8-l{border-radius:var(--border-radius-8,32px)}.br9-l{border-radius:var(--border-radius-9,48px)}.br10-l{border-radius:var(--border-radius-10,64px)}.br11-l{border-radius:var(--border-radius-11,9999px)}.br--bottom-l{border-top-left-radius:0;border-top-right-radius:0}.br--top-l{border-bottom-right-radius:0}.br--right-l,.br--top-l{border-bottom-left-radius:0}.br--right-l{border-top-left-radius:0}.br--left-l{border-top-right-radius:0;border-bottom-right-radius:0}.br-inherit-l{border-radius:inherit}.br-initial-l{border-radius:initial}.br-unset-l{border-radius:unset}}.b--dotted{border-style:dotted}.b--dashed{border-style:dashed}.b--solid{border-style:solid}.b--none{border-style:none}@container (min-width:30em){.b--dotted-s{border-style:dotted}.b--dashed-s{border-style:dashed}.b--solid-s{border-style:solid}.b--none-s{border-style:none}}@container (min-width:48em){.b--dotted-m{border-style:dotted}.b--dashed-m{border-style:dashed}.b--solid-m{border-style:solid}.b--none-m{border-style:none}}@container (min-width:64em){.b--dotted-l{border-style:dotted}.b--dashed-l{border-style:dashed}.b--solid-l{border-style:solid}.b--none-l{border-style:none}}.bw{border-width:var(--border-width,1px)}.bw0{border-width:var(--border-width-0,0)}.bw1{border-width:var(--border-width-1,1px)}.bw2{border-width:var(--border-width-2,2px)}.bw3{border-width:var(--border-width-3,4px)}.bw4{border-width:var(--border-width-4,8px)}.bw5{border-width:var(--border-width-5,16px)}.bt-0{border-top-width:0}.br-0{border-right-width:0}.bb-0{border-bottom-width:0}.bl-0{border-left-width:0}@container (min-width:30em){.bw-s{border-width:var(--border-width,1px)}.bw0-s{border-width:var(--border-width-0,0)}.bw1-s{border-width:var(--border-width-1,1px)}.bw2-s{border-width:var(--border-width-2,2px)}.bw3-s{border-width:var(--border-width-3,4px)}.bw4-s{border-width:var(--border-width-4,8px)}.bw5-s{border-width:var(--border-width-5,16px)}.bt-0-s{border-top-width:0}.br-0-s{border-right-width:0}.bb-0-s{border-bottom-width:0}.bl-0-s{border-left-width:0}}@container (min-width:48em){.bw-m{border-width:var(--border-width,1px)}.bw0-m{border-width:var(--border-width-0,0)}.bw1-m{border-width:var(--border-width-1,1px)}.bw2-m{border-width:var(--border-width-2,2px)}.bw3-m{border-width:var(--border-width-3,4px)}.bw4-m{border-width:var(--border-width-4,8px)}.bw5-m{border-width:var(--border-width-5,16px)}.bt-0-m{border-top-width:0}.br-0-m{border-right-width:0}.bb-0-m{border-bottom-width:0}.bl-0-m{border-left-width:0}}@container (min-width:64em){.bw-l{border-width:var(--border-width,1px)}.bw0-l{border-width:var(--border-width-0,0)}.bw1-l{border-width:var(--border-width-1,1px)}.bw2-l{border-width:var(--border-width-2,2px)}.bw3-l{border-width:var(--border-width-3,4px)}.bw4-l{border-width:var(--border-width-4,8px)}.bw5-l{border-width:var(--border-width-5,16px)}.bt-0-l{border-top-width:0}.br-0-l{border-right-width:0}.bb-0-l{border-bottom-width:0}.bl-0-l{border-left-width:0}}.shadow{box-shadow:var(--shadow,inset 0 0 1px 0 rgb(var(--shadow-color,0 0 0)/var(--shadow-opacity,.5)))}.shadow-hover:focus,.shadow-hover:hover{--shadow-opacity:.6}.shadow-border-1{box-shadow:inset 0 0 var(--shadow-border-width,1px) 0 rgb(var(--shadow-color,0 0 0)/var(--shadow-opacity,.125))}.shadow-border-2{box-shadow:inset 0 0 var(--shadow-border-width,1px) 0 rgb(var(--shadow-color,0 0 0)/var(--shadow-opacity,.25))}.shadow-border-3{box-shadow:inset 0 0 var(--shadow-border-width) 0 currentColor}.shadow-border-4{box-shadow:inset 0 0 2px 0 rgb(var(--shadow-color-light,255 255 255)/var(--shadow-opacity,.125))}.shadow-border-5{box-shadow:inset 0 0 2px 0 rgb(var(--shadow-color,0 0 0)/var(--shadow-opacity,.125))}.shadow-border-6{box-shadow:inset 0 0 2px 0 currentColor}.shadow-1{box-shadow:0 1px 1px rgb(var(--shadow-color,0 0 0)/var(--shadow-opacity,.125)),0 2px 2px rgb(var(--shadow-color,0 0 0)/var(--shadow-opacity,.125)),0 4px 4px rgb(var(--shadow-color,0 0 0)/var(--shadow-opacity,.125)),0 8px 8px rgb(var(--shadow-color,0 0 0)/var(--shadow-opacity,.125)),0 16px 16px rgb(var(--shadow-color,0 0 0)/var(--shadow-opacity,.125))}.shadow-2{box-shadow:0 1px 1px rgb(var(--shadow-color,0 0 0)/var(--shadow-opacity,.125)),0 2px 2px rgb(var(--shadow-color,0 0 0)/var(--shadow-opacity,.125)),0 4px 4px rgb(var(--shadow-color,0 0 0)/var(--shadow-opacity,.125)),0 8px 8px rgb(var(--shadow-color,0 0 0)/var(--shadow-opacity,.125))}.shadow-3{--shadow-opacity:.11;box-shadow:0 1px 1px rgb(var(--shadow-color,0 0 0)/var(--shadow-opacity,.11)),0 2px 2px rgb(var(--shadow-color,0 0 0)/var(--shadow-opacity,.11)),0 4px 4px rgb(var(--shadow-color,0 0 0)/var(--shadow-opacity,.11)),0 8px 8px rgb(var(--shadow-color,0 0 0)/var(--shadow-opacity,.11)),0 16px 16px rgb(var(--shadow-color,0 0 0)/var(--shadow-opacity,.11)),0 32px 32px rgb(var(--shadow-color,0 0 0)/var(--shadow-opacity,.11))}.shadow-4{--shadow-opacity:.05;box-shadow:0 1px 1px rgb(var(--shadow-color,0 0 0)/calc(var(--shadow-opacity, .25) * 5)),0 2px 2px rgb(var(--shadow-color,0 0 0)/calc(var(--shadow-opacity, .2) * 4)),0 4px 4px rgb(var(--shadow-color,0 0 0)/calc(var(--shadow-opacity, .15) * 3)),0 8px 8px rgb(var(--shadow-color,0 0 0)/calc(var(--shadow-opacity, .1) * 2)),0 16px 16px rgb(var(--shadow-color,0 0 0)/var(--shadow-opacity,.05))}.shadow-5{--shadow-opacity:.08;box-shadow:0 var(--shadow-y) 1px rgb(var(--shadow-color,0 0 0)/calc(var(--shadow-opacity, .08) * 1)),0 calc(var(--shadow-y) * 2) 2px rgb(var(--shadow-color,0 0 0)/calc(var(--shadow-opacity, .12) * 1.5)),0 calc(var(--shadow-y) * 4) 4px rgb(var(--shadow-color,0 0 0)/calc(var(--shadow-opacity, .16) * 2)),0 calc(var(--shadow-y) * 8) 8px rgb(var(--shadow-color,0 0 0)/calc(var(--shadow-opacity, .2) * 2.5))}.shadow-6{--shadow-opacity:.07;box-shadow:0 1px 2px rgb(var(--shadow-color,0 0 0)/var(--shadow-opacity,.7)),0 2px 4px rgb(var(--shadow-color,0 0 0)/var(--shadow-opacity,.7)),0 4px 8px rgb(var(--shadow-color,0 0 0)/var(--shadow-opacity,.7)),0 8px 16px rgb(var(--shadow-color,0 0 0)/var(--shadow-opacity,.7)),0 16px 32px rgb(var(--shadow-color,0 0 0)/var(--shadow-opacity,.7)),0 32px 64px rgb(var(--shadow-color,0 0 0)/var(--shadow-opacity,.7))}.shadow-7{--shadow-opacity:.11;box-shadow:0 1px 1px rgb(var(--shadow-color,0 0 0)/var(--shadow-opacity,.11)),0 2px 2px rgb(var(--shadow-color,0 0 0)/var(--shadow-opacity,.11)),0 4px 4px rgb(var(--shadow-color,0 0 0)/var(--shadow-opacity,.11)),0 6px 8px rgb(var(--shadow-color,0 0 0)/var(--shadow-opacity,.11)),0 8px 16px rgb(var(--shadow-color,0 0 0)/var(--shadow-opacity,.11))}.shadow-8{--shadow-opacity:.09;box-shadow:0 2px 1px rgb(var(--shadow-color,0 0 0)/.09),0 4px 2px rgb(var(--shadow-color,0 0 0)/.09),0 8px 4px rgb(var(--shadow-color,0 0 0)/.09),0 16px 8px rgb(var(--shadow-color,0 0 0)/.09),0 32px 16px rgb(var(--shadow-color,0 0 0)/.09)}.text-shadow-1{text-shadow:rgb(var(--shadow-color)) -4px 4px 0}.text-shadow-2{text-shadow:rgb(var(--shadow-color)) -8px 8px 0}.text-shadow-3{text-shadow:rgb(var(--shadow-color)/var(--shadow-opacity,.5)) -8px 8px 0}.text-shadow-4{text-shadow:rgba(var(--shadow-color)/var(--shadow-opacity,.5)) -4px 4px 8px}.text-shadow-5{text-shadow:rgb(var(--shadow-color)) 2px 0 0,rgb(var(--shadow-color)) 0 2px 0,rgb(var(--shadow-color)) -2px 0 0,rgb(var(--shadow-color)) 0 -2px 0,rgb(var(--shadow-color)) -2px -2px 0,rgb(var(--shadow-color)) 2px -2px 0,rgb(var(--shadow-color)) 2px 2px 0,rgb(var(--shadow-color)) -2px 2px 0}.text-shadow-6{text-shadow:rgb(var(--shadow-color-invert)) 2px 0 0,rgb(var(--shadow-color-invert)) 0 2px 0,rgb(var(--shadow-color-invert)) -2px 0 0,rgb(var(--shadow-color-invert)) 0 -2px 0,rgb(var(--shadow-color-invert)) -2px -2px 0,rgb(var(--shadow-color-invert)) 2px -2px 0,rgb(var(--shadow-color-invert)) 2px 2px 0,rgb(var(--shadow-color-invert)) -2px 2px 0}.pre{max-width:100%;overflow:auto}.top-0{top:0}.right-0{right:0}.bottom-0{bottom:0}.left-0{left:0}.top-1{top:var(--size,1rem)}.right-1{right:var(--size,1rem)}.bottom-1{bottom:var(--size,1rem)}.left-1{left:var(--size,1rem)}.top-2{top:calc(var(--size, 1rem) * 2)}.right-2{right:calc(var(--size, 1rem) * 2)}.bottom-2{bottom:calc(var(--size, 1rem) * 2)}.left-2{left:calc(var(--size, 1rem) * 2)}.top--1{top:calc(var(--size, 1rem) * -1)}.right--1{right:calc(var(--size, 1rem) * -1)}.bottom--1{bottom:calc(var(--size, 1rem) * -1)}.left--1{left:calc(var(--size, 1rem) * -1)}.top--2{top:calc(var(--size, 1rem) * -2)}.right--2{right:calc(var(--size, 1rem) * -2)}.bottom--2{bottom:calc(var(--size, 1rem) * -2)}.left--2{left:calc(var(--size, 1rem) * -2)}.inset-0{inset:0}@container (min-width:30em){.top-0-s{top:0}.left-0-s{left:0}.right-0-s{right:0}.bottom-0-s{bottom:0}.top-1-s{top:var(--size,1rem)}.left-1-s{left:var(--size,1rem)}.right-1-s{right:var(--size,1rem)}.bottom-1-s{bottom:var(--size,1rem)}.top-2-s{top:calc(var(--size, 1rem) * 2)}.left-2-s{left:calc(var(--size, 1rem) * 2)}.right-2-s{right:calc(var(--size, 1rem) * 2)}.bottom-2-s{bottom:calc(var(--size, 1rem) * 2)}.top--1-s{top:calc(var(--size, 1rem) * -1)}.right--1-s{right:calc(var(--size, 1rem) * -1)}.bottom--1-s{bottom:calc(var(--size, 1rem) * -1)}.left--1-s{left:calc(var(--size, 1rem) * -1)}.top--2-s{top:calc(var(--size, 1rem) * -2)}.right--2-s{right:calc(var(--size, 1rem) * -2)}.bottom--2-s{bottom:calc(var(--size, 1rem) * -2)}.left--2-s{left:calc(var(--size, 1rem) * -2)}.inset-0-s{inset:0}}@container (min-width:48em){.top-0-m{top:0}.left-0-m{left:0}.right-0-m{right:0}.bottom-0-m{bottom:0}.top-1-m{top:var(--size,1rem)}.left-1-m{left:var(--size,1rem)}.right-1-m{right:var(--size,1rem)}.bottom-1-m{bottom:var(--size,1rem)}.top-2-m{top:calc(var(--size, 1rem) * 2)}.left-2-m{left:calc(var(--size, 1rem) * 2)}.right-2-m{right:calc(var(--size, 1rem) * 2)}.bottom-2-m{bottom:calc(var(--size, 1rem) * 2)}.top--1-m{top:calc(var(--size, 1rem) * -1)}.right--1-m{right:calc(var(--size, 1rem) * -1)}.bottom--1-m{bottom:calc(var(--size, 1rem) * -1)}.left--1-m{left:calc(var(--size, 1rem) * -1)}.top--2-m{top:calc(var(--size, 1rem) * -2)}.right--2-m{right:calc(var(--size, 1rem) * -2)}.bottom--2-m{bottom:calc(var(--size, 1rem) * -2)}.left--2-m{left:calc(var(--size, 1rem) * -2)}.inset-0-m{inset:0}}@container (min-width:64em){.top-0-l{top:0}.left-0-l{left:0}.right-0-l{right:0}.bottom-0-l{bottom:0}.top-1-l{top:var(--size,1rem)}.left-1-l{left:var(--size,1rem)}.right-1-l{right:var(--size,1rem)}.bottom-1-l{bottom:var(--size,1rem)}.top-2-l{top:calc(var(--size, 1rem) * 2)}.left-2-l{left:calc(var(--size, 1rem) * 2)}.right-2-l{right:calc(var(--size, 1rem) * 2)}.bottom-2-l{bottom:calc(var(--size, 1rem) * 2)}.top--1-l{top:calc(var(--size, 1rem) * -1)}.right--1-l{right:calc(var(--size, 1rem) * -1)}.bottom--1-l{bottom:calc(var(--size, 1rem) * -1)}.left--1-l{left:calc(var(--size, 1rem) * -1)}.top--2-l{top:calc(var(--size, 1rem) * -2)}.right--2-l{right:calc(var(--size, 1rem) * -2)}.bottom--2-l{bottom:calc(var(--size, 1rem) * -2)}.left--2-l{left:calc(var(--size, 1rem) * -2)}.inset-0-l{inset:0}}.cf:after,.cf:before{content:" ";display:table}.cf:after{clear:both}.cl{clear:left}.cr{clear:right}.cb{clear:both}.cn{clear:none}.dn{display:none}.di{display:inline}.db{display:block}.dib{display:inline-block}.df,.flex{display:flex}.dif,.inline-flex{display:inline-flex}.dg,.grid{display:grid}.dig,.inline-grid{display:inline-grid}@container (min-width:30em){.dn-s{display:none}.di-s{display:inline}.db-s{display:block}.dib-s{display:inline-block}.df-s,.flex-s{display:flex}.dif-s,.inline-flex-s{display:inline-flex}.dg-s,.grid-s{display:grid}.dig-s,.inline-grid-s{display:inline-grid}}@container (min-width:48em){.dn-m{display:none}.di-m{display:inline}.db-m{display:block}.dib-m{display:inline-block}.df-m,.flex-m{display:flex}.dif-m,.inline-flex-m{display:inline-flex}.dg-m,.grid-m{display:grid}.dig-m,.inline-grid-m{display:inline-grid}}@container (min-width:64em){.dn-l{display:none}.di-l{display:inline}.db-l{display:block}.dib-l{display:inline-block}.df-l,.flex-l{display:flex}.dif-l,.inline-flex-l{display:inline-flex}.dg-l,.grid-l{display:grid}.dig-l,.inline-grid-l{display:inline-grid}}.glass1{background:hsla(0,0%,100%,0)}.glass1,.glass2{box-shadow:0 4px 30px rgba(0,0,0,.1);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid hsla(0,0%,100%,.15)}.glass2{background:hsla(0,0%,100%,.05)}.glass3{background:hsla(0,0%,100%,.15)}.glass3,.glass4{box-shadow:0 4px 30px rgba(0,0,0,.1);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid hsla(0,0%,100%,.15)}.glass4{background:hsla(0,0%,100%,.25)}.glass5{background:hsla(0,0%,100%,0)}.glass5,.glass6{box-shadow:0 4px 30px rgba(0,0,0,.1);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid hsla(0,0%,100%,.15)}.glass6{background:hsla(0,0%,100%,.05)}.glass7{background:hsla(0,0%,100%,.15)}.glass7,.glass8{box-shadow:0 4px 30px rgba(0,0,0,.1);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid hsla(0,0%,100%,.15)}.glass8{background:hsla(0,0%,100%,.25)}.glass9{background:hsla(0,0%,100%,.25)}.glass9,.glass10{box-shadow:0 4px 30px rgba(0,0,0,.1);border:1px solid hsla(0,0%,100%,.15)}.glass10{background:hsla(0,0%,100%,0)}.glass1-hover:hover{background:hsla(0,0%,100%,0)}.glass1-hover:hover,.glass2-hover:hover{box-shadow:0 4px 30px rgba(0,0,0,.1);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid hsla(0,0%,100%,.15)}.glass2-hover:hover{background:hsla(0,0%,100%,.05)}.glass3-hover:hover{background:hsla(0,0%,100%,.15)}.glass3-hover:hover,.glass4-hover:hover{box-shadow:0 4px 30px rgba(0,0,0,.1);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid hsla(0,0%,100%,.15)}.glass4-hover:hover{background:hsla(0,0%,100%,.25)}.glass5-hover:hover{background:hsla(0,0%,100%,0)}.glass5-hover:hover,.glass6-hover:hover{box-shadow:0 4px 30px rgba(0,0,0,.1);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid hsla(0,0%,100%,.15)}.glass6-hover:hover{background:hsla(0,0%,100%,.05)}.glass7-hover:hover{background:hsla(0,0%,100%,.15)}.glass7-hover:hover,.glass8-hover:hover{box-shadow:0 4px 30px rgba(0,0,0,.1);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid hsla(0,0%,100%,.15)}.glass8-hover:hover{background:hsla(0,0%,100%,.25)}.glass9-hover:hover{background:hsla(0,0%,100%,.25)}.glass9-hover:hover,.glass10-hover:hover{box-shadow:0 4px 30px rgba(0,0,0,.1);border:1px solid hsla(0,0%,100%,.15)}.glass10-hover:hover{background:hsla(0,0%,100%,0)}.glass1-focus:focus{background:hsla(0,0%,100%,0)}.glass1-focus:focus,.glass2-focus:focus{box-shadow:0 4px 30px rgba(0,0,0,.1);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid hsla(0,0%,100%,.15)}.glass2-focus:focus{background:hsla(0,0%,100%,.05)}.glass3-focus:focus{background:hsla(0,0%,100%,.15)}.glass3-focus:focus,.glass4-focus:focus{box-shadow:0 4px 30px rgba(0,0,0,.1);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid hsla(0,0%,100%,.15)}.glass4-focus:focus{background:hsla(0,0%,100%,.25)}.glass5-focus:focus{background:hsla(0,0%,100%,0)}.glass5-focus:focus,.glass6-focus:focus{box-shadow:0 4px 30px rgba(0,0,0,.1);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid hsla(0,0%,100%,.15)}.glass6-focus:focus{background:hsla(0,0%,100%,.05)}.glass7-focus:focus{background:hsla(0,0%,100%,.15)}.glass7-focus:focus,.glass8-focus:focus{box-shadow:0 4px 30px rgba(0,0,0,.1);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid hsla(0,0%,100%,.15)}.glass8-focus:focus{background:hsla(0,0%,100%,.25)}.glass9-focus:focus{background:hsla(0,0%,100%,.25)}.glass9-focus:focus,.glass10-focus:focus{box-shadow:0 4px 30px rgba(0,0,0,.1);border:1px solid hsla(0,0%,100%,.15)}.glass10-focus:focus{background:hsla(0,0%,100%,0)}.g0{gap:var(--spacing-0,0)}.g1{gap:var(--spacing-1,4px)}.g2{gap:var(--spacing-2,8px)}.g3{gap:var(--spacing-3,16px)}.g4{gap:var(--spacing-4,32px)}.g5{gap:var(--spacing-5,64px)}.g6{gap:var(--spacing-6,128px)}.g7{gap:var(--spacing-7,256px)}@container (min-width:30em){.g0-s{gap:var(--spacing-0,0)}.g1-s{gap:var(--spacing-1,4px)}.g2-s{gap:var(--spacing-2,8px)}.g3-s{gap:var(--spacing-3,16px)}.g4-s{gap:var(--spacing-4,32px)}.g5-s{gap:var(--spacing-5,64px)}.g6-s{gap:var(--spacing-6,128px)}.g7-s{gap:var(--spacing-7,256px)}}@container (min-width:48em){.g0-m{gap:var(--spacing-0,0)}.g1-m{gap:var(--spacing-1,4px)}.g2-m{gap:var(--spacing-2,8px)}.g3-m{gap:var(--spacing-3,16px)}.g4-m{gap:var(--spacing-4,32px)}.g5-m{gap:var(--spacing-5,64px)}.g6-m{gap:var(--spacing-6,128px)}.g7-m{gap:var(--spacing-7,256px)}}@container (min-width:64em){.g0-l{gap:var(--spacing-0)}.g1-l{gap:var(--spacing-1)}.g2-l{gap:var(--spacing-2)}.g3-l{gap:var(--spacing-3)}.g4-l{gap:var(--spacing-4)}.g5-l{gap:var(--spacing-5)}.g6-l{gap:var(--spacing-6)}.g7-l{gap:var(--spacing-7)}}.gc0{gap-column:var(--spacing-0,0)}.gc1{gap-column:var(--spacing-1,4px)}.gc2{gap-column:var(--spacing-2,8px)}.gc3{gap-column:var(--spacing-3,16px)}.gc4{gap-column:var(--spacing-4,32px)}.gc5{gap-column:var(--spacing-5,64px)}.gc6{gap-column:var(--spacing-6,128px)}.gc7{gap-column:var(--spacing-7,256px)}@container (min-width:30em){.gc0-s{gap-column:var(--spacing-0,0)}.gc1-s{gap-column:var(--spacing-1,4px)}.gc2-s{gap-column:var(--spacing-2,8px)}.gc3-s{gap-column:var(--spacing-3,16px)}.gc4-s{gap-column:var(--spacing-4,32px)}.gc5-s{gap-column:var(--spacing-5,64px)}.gc6-s{gap-column:var(--spacing-6,128px)}.gc7-s{gap-column:var(--spacing-7,256px)}}@container (min-width:48em){.gc0-m{gap-column:var(--spacing-0,0)}.gc1-m{gap-column:var(--spacing-1,4px)}.gc2-m{gap-column:var(--spacing-2,8px)}.gc3-m{gap-column:var(--spacing-3,16px)}.gc4-m{gap-column:var(--spacing-4,32px)}.gc5-m{gap-column:var(--spacing-5,64px)}.gc6-m{gap-column:var(--spacing-6,128px)}.gc7-m{gap-column:var(--spacing-7,256px)}}@container (min-width:64em){.gc0-l{gap-column:var(--spacing-0)}.gc1-l{gap-column:var(--spacing-1)}.gc2-l{gap-column:var(--spacing-2)}.gc3-l{gap-column:var(--spacing-3)}.gc4-l{gap-column:var(--spacing-4)}.gc5-l{gap-column:var(--spacing-5)}.gc6-l{gap-column:var(--spacing-6)}.gc7-l{gap-column:var(--spacing-7)}}.gr0{gap-row:var(--spacing-0,0)}.gr1{gap-row:var(--spacing-1,4px)}.gr2{gap-row:var(--spacing-2,8px)}.gr3{gap-row:var(--spacing-3,16px)}.gr4{gap-row:var(--spacing-4,32px)}.gr5{gap-row:var(--spacing-5,64px)}.gr6{gap-row:var(--spacing-6,128px)}.gr7{gap-row:var(--spacing-7,256px)}@container (min-width:30em){.gr0-s{gap-row:var(--spacing-0,0)}.gr1-s{gap-row:var(--spacing-1,4px)}.gr2-s{gap-row:var(--spacing-2,8px)}.gr3-s{gap-row:var(--spacing-3,16px)}.gr4-s{gap-row:var(--spacing-4,32px)}.gr5-s{gap-row:var(--spacing-5,64px)}.gr6-s{gap-row:var(--spacing-6,128px)}.gr7-s{gap-row:var(--spacing-7,256px)}}@container (min-width:48em){.gr0-m{gap-row:var(--spacing-0,0)}.gr1-m{gap-row:var(--spacing-1,4px)}.gr2-m{gap-row:var(--spacing-2,8px)}.gr3-m{gap-row:var(--spacing-3,16px)}.gr4-m{gap-row:var(--spacing-4,32px)}.gr5-m{gap-row:var(--spacing-5,64px)}.gr6-m{gap-row:var(--spacing-6,128px)}.gr7-m{gap-row:var(--spacing-7,256px)}}@container (min-width:64em){.gr0-l{gap-row:var(--spacing-0)}.gr1-l{gap-row:var(--spacing-1)}.gr2-l{gap-row:var(--spacing-2)}.gr3-l{gap-row:var(--spacing-3)}.gr4-l{gap-row:var(--spacing-4)}.gr5-l{gap-row:var(--spacing-5)}.gr6-l{gap-row:var(--spacing-6)}.gr7-l{gap-row:var(--spacing-7)}}.cols-1{grid-template-columns:repeat(1,1fr)}.cols-2{grid-template-columns:repeat(2,1fr)}.cols-3{grid-template-columns:repeat(3,1fr)}.cols-4{grid-template-columns:repeat(4,1fr)}.cols-5{grid-template-columns:repeat(5,1fr)}.cols-6{grid-template-columns:repeat(6,1fr)}.cols-7{grid-template-columns:repeat(7,1fr)}.cols-8{grid-template-columns:repeat(8,1fr)}.cols-9{grid-template-columns:repeat(9,1fr)}.cols-10{grid-template-columns:repeat(10,1fr)}.cols-11{grid-template-columns:repeat(11,1fr)}.cols-12{grid-template-columns:repeat(12,1fr)}.cols-13{grid-template-columns:repeat(13,1fr)}.cols-14{grid-template-columns:repeat(14,1fr)}.cols-15{grid-template-columns:repeat(15,1fr)}.cols-16{grid-template-columns:repeat(16,1fr)}.cols-min-32{grid-template-columns:repeat(auto-fill,minmax(32px,1fr))}.cols-min-64{grid-template-columns:repeat(auto-fill,minmax(64px,1fr))}.cols-min-128{grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}.cols-min-192{grid-template-columns:repeat(auto-fill,minmax(192px,1fr))}.cols-min-240{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}.cols-min-256{grid-template-columns:repeat(auto-fill,minmax(256px,1fr))}.cols-min-320{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}.cols-min-480{grid-template-columns:repeat(auto-fill,minmax(480px,1fr))}.masonry{grid-template-columns:masonry}.subgrid{grid-template-columns:subgrid}.cols-none{grid-template-columns:none}@container (min-width:30em){.cols-1-s{grid-template-columns:repeat(1,1fr)}.cols-2-s{grid-template-columns:repeat(2,1fr)}.cols-3-s{grid-template-columns:repeat(3,1fr)}.cols-4-s{grid-template-columns:repeat(4,1fr)}.cols-5-s{grid-template-columns:repeat(5,1fr)}.cols-6-s{grid-template-columns:repeat(6,1fr)}.cols-7-s{grid-template-columns:repeat(7,1fr)}.cols-8-s{grid-template-columns:repeat(8,1fr)}.cols-9-s{grid-template-columns:repeat(9,1fr)}.cols-10-s{grid-template-columns:repeat(10,1fr)}.cols-11-s{grid-template-columns:repeat(11,1fr)}.cols-12-s{grid-template-columns:repeat(12,1fr)}.cols-13-s{grid-template-columns:repeat(13,1fr)}.cols-14-s{grid-template-columns:repeat(14,1fr)}.cols-15-s{grid-template-columns:repeat(15,1fr)}.cols-16-s{grid-template-columns:repeat(16,1fr)}.cols-min-32-s,.cols-min-64-s{grid-template-columns:repeat(auto-fill,minmax(64px,1fr))}.cols-min-128-s{grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}.cols-min-192-s{grid-template-columns:repeat(auto-fill,minmax(192px,1fr))}.cols-min-240-s{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}.cols-min-256-s{grid-template-columns:repeat(auto-fill,minmax(256px,1fr))}.cols-min-320-s{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}.cols-min-480-s{grid-template-columns:repeat(auto-fill,minmax(480px,1fr))}.masonry-s{grid-template-columns:masonry}.subgrid-s{grid-template-columns:subgrid}.cols-none-s{grid-template-columns:none}}@container (min-width:48em){.cols-1-m{grid-template-columns:repeat(1,1fr)}.cols-2-m{grid-template-columns:repeat(2,1fr)}.cols-3-m{grid-template-columns:repeat(3,1fr)}.cols-4-m{grid-template-columns:repeat(4,1fr)}.cols-5-m{grid-template-columns:repeat(5,1fr)}.cols-6-m{grid-template-columns:repeat(6,1fr)}.cols-7-m{grid-template-columns:repeat(7,1fr)}.cols-8-m{grid-template-columns:repeat(8,1fr)}.cols-9-m{grid-template-columns:repeat(9,1fr)}.cols-10-m{grid-template-columns:repeat(10,1fr)}.cols-11-m{grid-template-columns:repeat(11,1fr)}.cols-12-m{grid-template-columns:repeat(12,1fr)}.cols-13-m{grid-template-columns:repeat(13,1fr)}.cols-14-m{grid-template-columns:repeat(14,1fr)}.cols-15-m{grid-template-columns:repeat(15,1fr)}.cols-16-m{grid-template-columns:repeat(16,1fr)}.cols-min-64-m{grid-template-columns:repeat(auto-fill,minmax(64px,1fr))}.cols-min-128-m{grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}.cols-min-192-m{grid-template-columns:repeat(auto-fill,minmax(192px,1fr))}.cols-min-240-m{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}.cols-min-256-m{grid-template-columns:repeat(auto-fill,minmax(256px,1fr))}.cols-min-320-m{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}.cols-min-480-m{grid-template-columns:repeat(auto-fill,minmax(480px,1fr))}.masonry-m{grid-template-columns:masonry}.subgrid-m{grid-template-columns:subgrid}.cols-none-m{grid-template-columns:none}}@container (min-width:64em){.cols-1-l{grid-template-columns:repeat(1,1fr)}.cols-2-l{grid-template-columns:repeat(2,1fr)}.cols-3-l{grid-template-columns:repeat(3,1fr)}.cols-4-l{grid-template-columns:repeat(4,1fr)}.cols-5-l{grid-template-columns:repeat(5,1fr)}.cols-6-l{grid-template-columns:repeat(6,1fr)}.cols-7-l{grid-template-columns:repeat(7,1fr)}.cols-8-l{grid-template-columns:repeat(8,1fr)}.cols-9-l{grid-template-columns:repeat(9,1fr)}.cols-10-l{grid-template-columns:repeat(10,1fr)}.cols-11-l{grid-template-columns:repeat(11,1fr)}.cols-12-l{grid-template-columns:repeat(12,1fr)}.cols-13-l{grid-template-columns:repeat(13,1fr)}.cols-14-l{grid-template-columns:repeat(14,1fr)}.cols-15-l{grid-template-columns:repeat(15,1fr)}.cols-16-l{grid-template-columns:repeat(16,1fr)}.cols-min-64-l{grid-template-columns:repeat(auto-fill,minmax(64px,1fr))}.cols-min-128-l{grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}.cols-min-192-l{grid-template-columns:repeat(auto-fill,minmax(192px,1fr))}.cols-min-240-l{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}.cols-min-256-l{grid-template-columns:repeat(auto-fill,minmax(256px,1fr))}.cols-min-320-l{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}.cols-min-480-l{grid-template-columns:repeat(auto-fill,minmax(480px,1fr))}.masonry-l{grid-template-columns:masonry}.subgrid-l{grid-template-columns:subgrid}.cols-none-l{grid-template-columns:none}}.col-1{grid-column:span 1/span 1}.col-2{grid-column:span 2/span 2}.col-3{grid-column:span 3/span 3}.col-4{grid-column:span 4/span 4}.col-5{grid-column:span 5/span 5}.col-6{grid-column:span 6/span 6}.col-7{grid-column:span 7/span 7}.col-8{grid-column:span 8/span 8}.col-9{grid-column:span 9/span 9}.col-10{grid-column:span 10/span 10}.col-11{grid-column:span 11/span 11}.col-12{grid-column:span 12/span 12}.col-13{grid-column:span 13/span 13}.col-14{grid-column:span 14/span 14}.col-15{grid-column:span 15/span 15}.col-16{grid-column:span 16/span 16}.col-full{grid-column:1/-1}.col-center1{grid-column:2/-2}.col-center2{grid-column:3/-3}.col-center3{grid-column:4/-4}.col-center4{grid-column:6/-6}.col-auto{grid-column:auto}.start-1{grid-column-start:1}.start-2{grid-column-start:2}.start-3{grid-column-start:3}.start-4{grid-column-start:4}.start-5{grid-column-start:5}.start-6{grid-column-start:6}.start-7{grid-column-start:7}.start-8{grid-column-start:8}.start-9{grid-column-start:9}.start-10{grid-column-start:10}.start-11{grid-column-start:11}.start-12{grid-column-start:12}.start-13{grid-column-start:13}.start-14{grid-column-start:14}.start-15{grid-column-start:15}.end-1{grid-column-end:1}.end-2{grid-column-end:2}.end-3{grid-column-end:3}.end-4{grid-column-end:4}.end-5{grid-column-end:5}.end-6{grid-column-end:6}.end-7{grid-column-end:7}.end-8{grid-column-end:8}.end-9{grid-column-end:9}.end-10{grid-column-end:10}.end-11{grid-column-end:11}.end-12{grid-column-end:12}.end-13{grid-column-end:13}.end-14{grid-column-end:14}.end-15{grid-column-end:15}.end-16{grid-column-end:16}@container (min-width:30em){.col-1-s{grid-column:span 1/span 1}.col-2-s{grid-column:span 2/span 2}.col-3-s{grid-column:span 3/span 3}.col-4-s{grid-column:span 4/span 4}.col-5-s{grid-column:span 5/span 5}.col-6-s{grid-column:span 6/span 6}.col-7-s{grid-column:span 7/span 7}.col-8-s{grid-column:span 8/span 8}.col-9-s{grid-column:span 9/span 9}.col-10-s{grid-column:span 10/span 10}.col-11-s{grid-column:span 11/span 11}.col-12-s{grid-column:span 12/span 12}.col-13-s{grid-column:span 13/span 13}.col-14-s{grid-column:span 14/span 14}.col-15-s{grid-column:span 15/span 15}.col-16-s{grid-column:span 16/span 16}.col-full-s{grid-column:1/-1}.col-center1-s{grid-column:2/-2}.col-center2-s{grid-column:3/-3}.col-center3-s{grid-column:4/-4}.col-center4-s{grid-column:6/-6}.col-auto-s{grid-column:auto}.start-1-s{grid-column-start:1}.start-2-s{grid-column-start:2}.start-3-s{grid-column-start:3}.start-4-s{grid-column-start:4}.start-5-s{grid-column-start:5}.start-6-s{grid-column-start:6}.start-7-s{grid-column-start:7}.start-8-s{grid-column-start:8}.start-9-s{grid-column-start:9}.start-10-s{grid-column-start:10}.start-11-s{grid-column-start:11}.start-12-s{grid-column-start:12}.start-13-s{grid-column-start:13}.start-14-s{grid-column-start:14}.start-15-s{grid-column-start:15}.end-1-s{grid-column-end:1}.end-2-s{grid-column-end:2}.end-3-s{grid-column-end:3}.end-4-s{grid-column-end:4}.end-5-s{grid-column-end:5}.end-6-s{grid-column-end:6}.end-7-s{grid-column-end:7}.end-8-s{grid-column-end:8}.end-9-s{grid-column-end:9}.end-10-s{grid-column-end:10}.end-11-s{grid-column-end:11}.end-12-s{grid-column-end:12}.end-13-s{grid-column-end:13}.end-14-s{grid-column-end:14}.end-15-s{grid-column-end:15}.end-16-s{grid-column-end:16}}@container (min-width:48em){.col-1-m{grid-column:span 1/span 1}.col-2-m{grid-column:span 2/span 2}.col-3-m{grid-column:span 3/span 3}.col-4-m{grid-column:span 4/span 4}.col-5-m{grid-column:span 5/span 5}.col-6-m{grid-column:span 6/span 6}.col-7-m{grid-column:span 7/span 7}.col-8-m{grid-column:span 8/span 8}.col-9-m{grid-column:span 9/span 9}.col-10-m{grid-column:span 10/span 10}.col-11-m{grid-column:span 11/span 11}.col-12-m{grid-column:span 12/span 12}.col-13-m{grid-column:span 13/span 13}.col-14-m{grid-column:span 14/span 14}.col-15-m{grid-column:span 15/span 15}.col-16-m{grid-column:span 16/span 16}.col-full-m{grid-column:1/-1}.col-center1-m{grid-column:2/-2}.col-center2-m{grid-column:3/-3}.col-center3-m{grid-column:4/-4}.col-center4-m{grid-column:6/-6}.col-auto-m{grid-column:auto}.start-1-m{grid-column-start:1}.start-2-m{grid-column-start:2}.start-3-m{grid-column-start:3}.start-4-m{grid-column-start:4}.start-5-m{grid-column-start:5}.start-6-m{grid-column-start:6}.start-7-m{grid-column-start:7}.start-8-m{grid-column-start:8}.start-9-m{grid-column-start:9}.start-10-m{grid-column-start:10}.start-11-m{grid-column-start:11}.start-12-m{grid-column-start:12}.start-13-m{grid-column-start:13}.start-14-m{grid-column-start:14}.start-15-m{grid-column-start:15}.end-1-m{grid-column-end:1}.end-2-m{grid-column-end:2}.end-3-m{grid-column-end:3}.end-4-m{grid-column-end:4}.end-5-m{grid-column-end:5}.end-6-m{grid-column-end:6}.end-7-m{grid-column-end:7}.end-8-m{grid-column-end:8}.end-9-m{grid-column-end:9}.end-10-m{grid-column-end:10}.end-11-m{grid-column-end:11}.end-12-m{grid-column-end:12}.end-13-m{grid-column-end:13}.end-14-m{grid-column-end:14}.end-15-m{grid-column-end:15}.end-16-m{grid-column-end:16}}@container (min-width:64em){.col-1-l{grid-column:span 1/span 1}.col-2-l{grid-column:span 2/span 2}.col-3-l{grid-column:span 3/span 3}.col-4-l{grid-column:span 4/span 4}.col-5-l{grid-column:span 5/span 5}.col-6-l{grid-column:span 6/span 6}.col-7-l{grid-column:span 7/span 7}.col-8-l{grid-column:span 8/span 8}.col-9-l{grid-column:span 9/span 9}.col-10-l{grid-column:span 10/span 10}.col-11-l{grid-column:span 11/span 11}.col-12-l{grid-column:span 12/span 12}.col-13-l{grid-column:span 13/span 13}.col-14-l{grid-column:span 14/span 14}.col-15-l{grid-column:span 15/span 15}.col-16-l{grid-column:span 16/span 16}.col-full-l{grid-column:1/-1}.col-center1-l{grid-column:2/-2}.col-center2-l{grid-column:3/-3}.col-center3-l{grid-column:4/-4}.col-center4-l{grid-column:6/-6}.col-auto-l{grid-column:auto}.start-1-l{grid-column-start:1}.start-2-l{grid-column-start:2}.start-3-l{grid-column-start:3}.start-4-l{grid-column-start:4}.start-5-l{grid-column-start:5}.start-6-l{grid-column-start:6}.start-7-l{grid-column-start:7}.start-8-l{grid-column-start:8}.start-9-l{grid-column-start:9}.start-10-l{grid-column-start:10}.start-11-l{grid-column-start:11}.start-12-l{grid-column-start:12}.start-13-l{grid-column-start:13}.start-14-l{grid-column-start:14}.start-15-l{grid-column-start:15}.end-1-l{grid-column-end:1}.end-2-l{grid-column-end:2}.end-3-l{grid-column-end:3}.end-4-l{grid-column-end:4}.end-5-l{grid-column-end:5}.end-6-l{grid-column-end:6}.end-7-l{grid-column-end:7}.end-8-l{grid-column-end:8}.end-9-l{grid-column-end:9}.end-10-l{grid-column-end:10}.end-11-l{grid-column-end:11}.end-12-l{grid-column-end:12}.end-13-l{grid-column-end:13}.end-14-l{grid-column-end:14}.end-15-l{grid-column-end:15}.end-16-l{grid-column-end:16}}.row-auto{grid-row:auto}.row-start-1{grid-row-start:1}.row-start-2{grid-row-start:2}.row-start-3{grid-row-start:3}.row-start-4{grid-row-start:4}.row-start-5{grid-row-start:5}.row-start-6{grid-row-start:6}.row-start-7{grid-row-start:7}.row-start-8{grid-row-start:8}.row-start-9{grid-row-start:9}.row-start-10{grid-row-start:10}.row-start-11{grid-row-start:11}.row-start-12{grid-row-start:12}.row-start-13{grid-row-start:13}.row-start-14{grid-row-start:14}.row-start-15{grid-row-start:15}.row-start-16{grid-row-start:16}.row-end-1{grid-row-end:1}.row-end-2{grid-row-end:2}.row-end-3{grid-row-end:3}.row-end-4{grid-row-end:4}.row-end-5{grid-row-end:5}.row-end-6{grid-row-end:6}.row-end-7{grid-row-end:7}.row-end-8{grid-row-end:8}.row-end-9{grid-row-end:9}.row-end-10{grid-row-end:10}.row-end-11{grid-row-end:11}.row-end-12{grid-row-end:12}.row-end-13{grid-row-end:13}.row-end-14{grid-row-end:14}.row-end-15{grid-row-end:15}.row-end-16{grid-row-end:16}@container (min-width:30em){.row-auto-s{grid-row:auto}.row-start-1-s{grid-row-start:1}.row-start-2-s{grid-row-start:2}.row-start-3-s{grid-row-start:3}.row-start-4-s{grid-row-start:4}.row-start-5-s{grid-row-start:5}.row-start-6-s{grid-row-start:6}.row-start-7-s{grid-row-start:7}.row-start-8-s{grid-row-start:8}.row-start-9-s{grid-row-start:9}.row-start-10-s{grid-row-start:10}.row-start-11-s{grid-row-start:11}.row-start-12-s{grid-row-start:12}.row-start-13-s{grid-row-start:13}.row-start-14-s{grid-row-start:14}.row-start-15-s{grid-row-start:15}.row-start-16-s{grid-row-start:16}.row-end-1-s{grid-row-end:1}.row-end-2-s{grid-row-end:2}.row-end-3-s{grid-row-end:3}.row-end-4-s{grid-row-end:4}.row-end-5-s{grid-row-end:5}.row-end-6-s{grid-row-end:6}.row-end-7-s{grid-row-end:7}.row-end-8-s{grid-row-end:8}.row-end-9-s{grid-row-end:9}.row-end-10-s{grid-row-end:10}.row-end-11-s{grid-row-end:11}.row-end-12-s{grid-row-end:12}.row-end-13-s{grid-row-end:13}.row-end-14-s{grid-row-end:14}.row-end-15-s{grid-row-end:15}.row-end-16-s{grid-row-end:16}}@container (min-width:48em){.row-auto-m{grid-row:auto}.row-start-1-m{grid-row-start:1}.row-start-2-m{grid-row-start:2}.row-start-3-m{grid-row-start:3}.row-start-4-m{grid-row-start:4}.row-start-5-m{grid-row-start:5}.row-start-6-m{grid-row-start:6}.row-start-7-m{grid-row-start:7}.row-start-8-m{grid-row-start:8}.row-start-9-m{grid-row-start:9}.row-start-10-m{grid-row-start:10}.row-start-11-m{grid-row-start:11}.row-start-12-m{grid-row-start:12}.row-start-13-m{grid-row-start:13}.row-start-14-m{grid-row-start:14}.row-start-15-m{grid-row-start:15}.row-start-16-m{grid-row-start:16}.row-end-1-m{grid-row-end:1}.row-end-2-m{grid-row-end:2}.row-end-3-m{grid-row-end:3}.row-end-4-m{grid-row-end:4}.row-end-5-m{grid-row-end:5}.row-end-6-m{grid-row-end:6}.row-end-7-m{grid-row-end:7}.row-end-8-m{grid-row-end:8}.row-end-9-m{grid-row-end:9}.row-end-10-m{grid-row-end:10}.row-end-11-m{grid-row-end:11}.row-end-12-m{grid-row-end:12}.row-end-13-m{grid-row-end:13}.row-end-14-m{grid-row-end:14}.row-end-15-m{grid-row-end:15}.row-end-16-m{grid-row-end:16}}@container (min-width:64em){.row-auto-l{grid-row:auto}.row-start-1-l{grid-row-start:1}.row-start-2-l{grid-row-start:2}.row-start-3-l{grid-row-start:3}.row-start-4-l{grid-row-start:4}.row-start-5-l{grid-row-start:5}.row-start-6-l{grid-row-start:6}.row-start-7-l{grid-row-start:7}.row-start-8-l{grid-row-start:8}.row-start-9-l{grid-row-start:9}.row-start-10-l{grid-row-start:10}.row-start-11-l{grid-row-start:11}.row-start-12-l{grid-row-start:12}.row-start-13-l{grid-row-start:13}.row-start-14-l{grid-row-start:14}.row-start-15-l{grid-row-start:15}.row-start-16-l{grid-row-start:16}.row-end-1-l{grid-row-end:1}.row-end-2-l{grid-row-end:2}.row-end-3-l{grid-row-end:3}.row-end-4-l{grid-row-end:4}.row-end-5-l{grid-row-end:5}.row-end-6-l{grid-row-end:6}.row-end-7-l{grid-row-end:7}.row-end-8-l{grid-row-end:8}.row-end-9-l{grid-row-end:9}.row-end-10-l{grid-row-end:10}.row-end-11-l{grid-row-end:11}.row-end-12-l{grid-row-end:12}.row-end-13-l{grid-row-end:13}.row-end-14-l{grid-row-end:14}.row-end-15-l{grid-row-end:15}.row-end-16-l{grid-row-end:16}}.filter-none{-webkit-filter:none;filter:none}.blur1{-webkit-filter:blur(4px);filter:blur(4px)}.blur2{-webkit-filter:blur(16px);filter:blur(16px)}.blur3{-webkit-filter:blur(96px);filter:blur(96px)}.grayscale1{-webkit-filter:grayscale(0);filter:grayscale(0)}.grayscale2{-webkit-filter:grayscale(50%);filter:grayscale(50%)}.grayscale3{-webkit-filter:grayscale(100%);filter:grayscale(100%)}.hue-rotate0{-webkit-filter:hue-rotate(0deg);filter:hue-rotate(0deg)}.hue-rotate1{-webkit-filter:hue-rotate(45deg);filter:hue-rotate(45deg)}.hue-rotate2{-webkit-filter:hue-rotate(90deg);filter:hue-rotate(90deg)}.hue-rotate3{-webkit-filter:hue-rotate(135deg);filter:hue-rotate(135deg)}.hue-rotate4{-webkit-filter:hue-rotate(180deg);filter:hue-rotate(180deg)}.hue-rotate5{-webkit-filter:hue-rotate(225deg);filter:hue-rotate(225deg)}.hue-rotate6{-webkit-filter:hue-rotate(270deg);filter:hue-rotate(270deg)}.hue-rotate7{-webkit-filter:hue-rotate(315deg);filter:hue-rotate(315deg)}.invert{-webkit-filter:invert(100%);filter:invert(100%)}.filter-none-hover:hover{-webkit-filter:none;filter:none}.blur1-hover:hover{-webkit-filter:blur(4px);filter:blur(4px)}.blur2-hover:hover{-webkit-filter:blur(16px);filter:blur(16px)}.blur3-hover:hover{-webkit-filter:blur(96px);filter:blur(96px)}.grayscale1-hover:hover{-webkit-filter:grayscale(0);filter:grayscale(0)}.grayscale2-hover:hover{-webkit-filter:grayscale(50%);filter:grayscale(50%)}.grayscale3-hover:hover{-webkit-filter:grayscale(100%);filter:grayscale(100%)}.hue-rotate0-hover:hover{-webkit-filter:hue-rotate(0deg);filter:hue-rotate(0deg)}.hue-rotate1-hover:hover{-webkit-filter:hue-rotate(45deg);filter:hue-rotate(45deg)}.hue-rotate2-hover:hover{-webkit-filter:hue-rotate(90deg);filter:hue-rotate(90deg)}.hue-rotate3-hover:hover{-webkit-filter:hue-rotate(135deg);filter:hue-rotate(135deg)}.hue-rotate4-hover:hover{-webkit-filter:hue-rotate(180deg);filter:hue-rotate(180deg)}.hue-rotate5-hover:hover{-webkit-filter:hue-rotate(225deg);filter:hue-rotate(225deg)}.hue-rotate6-hover:hover{-webkit-filter:hue-rotate(270deg);filter:hue-rotate(270deg)}.hue-rotate7-hover:hover{-webkit-filter:hue-rotate(315deg);filter:hue-rotate(315deg)}.invert-hover:hover{-webkit-filter:invert(100%);filter:invert(100%)}.blur1-focus:focus{-webkit-filter:blur(4px);filter:blur(4px)}.blur2-focus:focus{-webkit-filter:blur(16px);filter:blur(16px)}.blur3-focus:focus{-webkit-filter:blur(96px);filter:blur(96px)}.grayscale1-focus:focus{-webkit-filter:grayscale(0);filter:grayscale(0)}.grayscale2-focus:focus{-webkit-filter:grayscale(50%);filter:grayscale(50%)}.grayscale3-focus:focus{-webkit-filter:grayscale(100%);filter:grayscale(100%)}.hue-rotate0-focus:focus{-webkit-filter:hue-rotate(0deg);filter:hue-rotate(0deg)}.hue-rotate1-focus:focus{-webkit-filter:hue-rotate(45deg);filter:hue-rotate(45deg)}.hue-rotate2-focus:focus{-webkit-filter:hue-rotate(90deg);filter:hue-rotate(90deg)}.hue-rotate3-focus:focus{-webkit-filter:hue-rotate(135deg);filter:hue-rotate(135deg)}.hue-rotate4-focus:focus{-webkit-filter:hue-rotate(180deg);filter:hue-rotate(180deg)}.hue-rotate5-focus:focus{-webkit-filter:hue-rotate(225deg);filter:hue-rotate(225deg)}.hue-rotate6-focus:focus{-webkit-filter:hue-rotate(270deg);filter:hue-rotate(270deg)}.hue-rotate7-focus:focus{-webkit-filter:hue-rotate(315deg);filter:hue-rotate(315deg)}.invert-focus:focus{-webkit-filter:invert(100%);filter:invert(100%)}.flex-auto{flex:1 1 auto;min-width:0;min-height:0}.flex-none{flex:none}.flex-grow-0{flex-grow:0}.flex-grow-1{flex-grow:1}.flex-shrink-0{flex-shrink:0}.flex-shrink-1{flex-shrink:1}@container (min-width:30em){.flex-s{display:flex}.inline-flex-s{display:inline-flex}.flex-auto-s{flex:1 1 auto;min-width:0;min-height:0}.flex-none-s{flex:none}.flex-grow-0-s{flex-grow:0}.flex-grow-1-s{flex-grow:1}.flex-shrink-0-s{flex-shrink:0}.flex-shrink-1-s{flex-shrink:1}}@container (min-width:48em){.flex-m{display:flex}.inline-flex-m{display:inline-flex}.flex-auto-m{flex:1 1 auto;min-width:0;min-height:0}.flex-none-m{flex:none}.flex-grow-0-m{flex-grow:0}.flex-grow-1-m{flex-grow:1}.flex-shrink-0-m{flex-shrink:0}.flex-shrink-1-m{flex-shrink:1}}@container (min-width:64em){.flex-l{display:flex}.inline-flex-l{display:inline-flex}.flex-auto-l{flex:1 1 auto;min-width:0;min-height:0}.flex-none-l{flex:none}.flex-grow-0-l{flex-grow:0}.flex-grow-1-l{flex-grow:1}.flex-shrink-0-l{flex-shrink:0}.flex-shrink-1-l{flex-shrink:1}}.flex-column{flex-direction:column}.flex-row{flex-direction:row}.flex-column-reverse{flex-direction:column-reverse}.flex-row-reverse{flex-direction:row-reverse}@container (min-width:30em){.flex-column-s{flex-direction:column}.flex-row-s{flex-direction:row}.flex-column-reverse-s{flex-direction:column-reverse}.flex-row-reverse-s{flex-direction:row-reverse}}@container (min-width:48em){.flex-column-m{flex-direction:column}.flex-row-m{flex-direction:row}.flex-column-reverse-m{flex-direction:column-reverse}.flex-row-reverse-m{flex-direction:row-reverse}}@container (min-width:64em){.flex-column-l{flex-direction:column}.flex-row-l{flex-direction:row}.flex-column-reverse-l{flex-direction:column-reverse}.flex-row-reverse-l{flex-direction:row-reverse}}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.flex-wrap-reverse{flex-wrap:wrap-reverse}@container (min-width:30em){.flex-wrap-s{flex-wrap:wrap}.flex-nowrap-s{flex-wrap:nowrap}.flex-wrap-reverse-s{flex-wrap:wrap-reverse}}@container (min-width:48em){.flex-wrap-m{flex-wrap:wrap}.flex-nowrap-m{flex-wrap:nowrap}.flex-wrap-reverse-m{flex-wrap:wrap-reverse}}@container (min-width:64em){.flex-wrap-l{flex-wrap:wrap}.flex-nowrap-l{flex-wrap:nowrap}.flex-wrap-reverse-l{flex-wrap:wrap-reverse}}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-baseline{align-items:baseline}.items-stretch{align-items:stretch}@container (min-width:30em){.items-start-s{align-items:flex-start}.items-end-s{align-items:flex-end}.items-center-s{align-items:center}.items-baseline-s{align-items:baseline}.items-stretch-s{align-items:stretch}}@container (min-width:48em){.items-start-m{align-items:flex-start}.items-end-m{align-items:flex-end}.items-center-m{align-items:center}.items-baseline-m{align-items:baseline}.items-stretch-m{align-items:stretch}}@container (min-width:64em){.items-start-l{align-items:flex-start}.items-end-l{align-items:flex-end}.items-center-l{align-items:center}.items-baseline-l{align-items:baseline}.items-stretch-l{align-items:stretch}}.content-start{align-content:flex-start}.content-end{align-content:flex-end}.content-center{align-content:center}.content-between{align-content:space-between}.content-around{align-content:space-around}.content-stretch{align-content:stretch}@container (min-width:30em){.content-start-s{align-content:flex-start}.content-end-s{align-content:flex-end}.content-center-s{align-content:center}.content-between-s{align-content:space-between}.content-around-s{align-content:space-around}.content-stretch-s{align-content:stretch}}@container (min-width:48em){.content-start-m{align-content:flex-start}.content-end-m{align-content:flex-end}.content-center-m{align-content:center}.content-between-m{align-content:space-between}.content-around-m{align-content:space-around}.content-stretch-m{align-content:stretch}}@container (min-width:64em){.content-start-l{align-content:flex-start}.content-end-l{align-content:flex-end}.content-center-l{align-content:center}.content-between-l{align-content:space-between}.content-around-l{align-content:space-around}.content-stretch-l{align-content:stretch}}.self-start{align-self:flex-start}.self-end{align-self:flex-end}.self-center{align-self:center}.self-baseline{align-self:baseline}.self-stretch{align-self:stretch}@container (min-width:30em){.self-start-s{align-self:flex-start}.self-end-s{align-self:flex-end}.self-center-s{align-self:center}.self-baseline-s{align-self:baseline}.self-stretch-s{align-self:stretch}}@container (min-width:48em){.self-start-m{align-self:flex-start}.self-end-m{align-self:flex-end}.self-center-m{align-self:center}.self-baseline-m{align-self:baseline}.self-stretch-m{align-self:stretch}}@container (min-width:64em){.self-start-l{align-self:flex-start}.self-end-l{align-self:flex-end}.self-center-l{align-self:center}.self-baseline-l{align-self:baseline}.self-stretch-l{align-self:stretch}}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.justify-self-center{justify-self:center}.justify-self-stretch{justify-self:stretch}@container (min-width:30em){.justify-self-start-s{justify-self:start}.justify-self-end-s{justify-self:end}.justify-self-center-s{justify-self:center}.justify-self-stretch-s{justify-self:stretch}}@container (min-width:48em){.justify-self-start-m{justify-self:start}.justify-self-end-m{justify-self:end}.justify-self-center-m{justify-self:center}.justify-self-stretch-m{justify-self:stretch}}@container (min-width:64em){.justify-self-start-l{justify-self:start}.justify-self-end-l{justify-self:end}.justify-self-center-l{justify-self:center}.justify-self-stretch-l{justify-self:stretch}}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}@container (min-width:30em){.justify-start-s{justify-content:flex-start}.justify-end-s{justify-content:flex-end}.justify-center-s{justify-content:center}.justify-between-s{justify-content:space-between}.justify-around-s{justify-content:space-around}}@container (min-width:48em){.justify-start-m{justify-content:flex-start}.justify-end-m{justify-content:flex-end}.justify-center-m{justify-content:center}.justify-between-m{justify-content:space-between}.justify-around-m{justify-content:space-around}}@container (min-width:64em){.justify-start-l{justify-content:flex-start}.justify-end-l{justify-content:flex-end}.justify-center-l{justify-content:center}.justify-between-l{justify-content:space-between}.justify-around-l{justify-content:space-around}}.order-0{order:0}.order-1{order:1}.order-2{order:2}.order-3{order:3}.order-4{order:4}.order-5{order:5}.order-6{order:6}.order-7{order:7}.order-8{order:8}.order-last{order:99999}@container (min-width:30em){.order-0-s{order:0}.order-1-s{order:1}.order-2-s{order:2}.order-3-s{order:3}.order-4-s{order:4}.order-5-s{order:5}.order-6-s{order:6}.order-7-s{order:7}.order-8-s{order:8}.order-last-s{order:99999}}@container (min-width:48em){.order-0-m{order:0}.order-1-m{order:1}.order-2-m{order:2}.order-3-m{order:3}.order-4-m{order:4}.order-5-m{order:5}.order-6-m{order:6}.order-7-m{order:7}.order-8-m{order:8}.order-last-m{order:99999}}@container (min-width:64em){.order-0-l{order:0}.order-1-l{order:1}.order-2-l{order:2}.order-3-l{order:3}.order-4-l{order:4}.order-5-l{order:5}.order-6-l{order:6}.order-7-l{order:7}.order-8-l{order:8}.order-last-l{order:99999}}.fl{float:left}.fr{float:right}.fn{float:none}@container (min-width:30em){.fl-s{float:left}.fr-s{float:right}.fn-s{float:none}}@container (min-width:48em){.fl-m{float:left}.fr-m{float:right}.fn-m{float:none}}@container (min-width:64em){.fl-l{float:left}.fr-l{float:right}.fn-l{float:none}}.f-heading{font-family:var(--font-family-heading,sans-serif)}.f-body{font-family:var(--font-family-body,sans-serif)}.f-mono{font-family:var(--font-family-mono,monospace)}.i{font-style:italic}.fs-normal{font-style:normal}.normal{font-weight:400}.b{font-weight:700}.fw1{font-weight:100}.fw2{font-weight:200}.fw3{font-weight:300}.fw4{font-weight:400}.fw5{font-weight:500}.fw6{font-weight:600}.fw7{font-weight:700}.fw8{font-weight:800}.fw9{font-weight:900}@container (min-width:30em){.normal-s{font-weight:400}.b-s{font-weight:700}.fw1-s{font-weight:100}.fw2-s{font-weight:200}.fw3-s{font-weight:300}.fw4-s{font-weight:400}.fw5-s{font-weight:500}.fw6-s{font-weight:600}.fw7-s{font-weight:700}.fw8-s{font-weight:800}.fw9-s{font-weight:900}}@container (min-width:48em){.normal-m{font-weight:400}.b-m{font-weight:700}.fw1-m{font-weight:100}.fw2-m{font-weight:200}.fw3-m{font-weight:300}.fw4-m{font-weight:400}.fw5-m{font-weight:500}.fw6-m{font-weight:600}.fw7-m{font-weight:700}.fw8-m{font-weight:800}.fw9-m{font-weight:900}}@container (min-width:64em){.normal-l{font-weight:400}.b-l{font-weight:700}.fw1-l{font-weight:100}.fw2-l{font-weight:200}.fw3-l{font-weight:300}.fw4-l{font-weight:400}.fw5-l{font-weight:500}.fw6-l{font-weight:600}.fw7-l{font-weight:700}.fw8-l{font-weight:800}.fw9-l{font-weight:900}}.input-reset{-webkit-appearance:none;-moz-appearance:none;appearance:none}.button-reset::-moz-focus-inner,.input-reset::-moz-focus-inner{border:0;padding:0}.h0{height:var(--size-0,0)}.h1{height:var(--size-1,1rem)}.h2{height:var(--size-2,2rem)}.h3{height:var(--size-3,3rem)}.h4{height:var(--size-4,4rem)}.h5{height:var(--size-5,8rem)}.h6{height:var(--size-6,16rem)}.h7{height:var(--size-7,32rem)}.h8{height:var(--size-8,64rem)}.h-50{height:50%}.h-75{height:75%}.h-100{height:100%}.min-h-100{min-height:100%}.vh-25{height:25vh}.vh-50{height:50vh}.vh-75{height:75vh}.vh-100{height:100vh}.min-vh-100{min-height:100vh}.h-auto{height:auto}.h-inherit{height:inherit}@container (min-width:30em){.h0-s{height:var(--size-0,0)}.h1-s{height:var(--size-1,1rem)}.h2-s{height:var(--size-2,2rem)}.h3-s{height:var(--size-3,3rem)}.h4-s{height:var(--size-4,4rem)}.h5-s{height:var(--size-5,8rem)}.h6-s{height:var(--size-6,16rem)}.h7-s{height:var(--size-7,32rem)}.h8-s{height:var(--size-8,64rem)}.h-50-s{height:50%}.h-75-s{height:75%}.h-100-s{height:100%}.min-h-100-s{min-height:100%}.vh-25-s{height:25vh}.vh-50-s{height:50vh}.vh-75-s{height:75vh}.vh-100-s{height:100vh}.min-vh-100-s{min-height:100vh}.h-auto-s{height:auto}.h-inherit-s{height:inherit}}@container (min-width:48em){.h1-m{height:1rem}.h2-m{height:2rem}.h3-m{height:4rem}.h4-m{height:8rem}.h5-m{height:16rem}.h-50-m{height:50%}.h-75-m{height:75%}.h-100-m{height:100%}.min-h-100-m{min-height:100%}.vh-25-m{height:25vh}.vh-50-m{height:50vh}.vh-75-m{height:75vh}.vh-100-m{height:100vh}.min-vh-100-m{min-height:100vh}.h-auto-m{height:auto}.h-inherit-m{height:inherit}}@container (min-width:64em){.h1-l{height:1rem}.h2-l{height:2rem}.h3-l{height:4rem}.h4-l{height:8rem}.h5-l{height:16rem}.h-50-l{height:50%}.h-75-l{height:75%}.h-100-l{height:100%}.min-h-100-l{min-height:100%}.vh-25-l{height:25vh}.vh-50-l{height:50vh}.vh-75-l{height:75vh}.vh-100-l{height:100vh}.min-vh-100-l{min-height:100vh}.h-auto-l{height:auto}.h-inherit-l{height:inherit}}.tracked{letter-spacing:var(--letter-spacing-tracked,.1em)}.tracked-tight{letter-spacing:var(--letter-spacing-tight,-.05em)}.tracked-mega{letter-spacing:var(--letter-spacing-large,.25em)}@container (min-width:30em){.tracked-s{letter-spacing:var(--letter-spacing-tracked,.1em)}.tracked-tight-s{letter-spacing:var(--letter-spacing-tight,-.05em)}.tracked-mega-s{letter-spacing:var(--letter-spacing-large,.25em)}}@container (min-width:48em){.tracked-m{letter-spacing:var(--letter-spacing-tracked,.1em)}.tracked-tight-m{letter-spacing:var(--letter-spacing-tight,-.05em)}.tracked-mega-m{letter-spacing:var(--letter-spacing-large,.25em)}}@container (min-width:64em){.tracked-l{letter-spacing:var(--letter-spacing-tracked,.1em)}.tracked-tight-l{letter-spacing:var(--letter-spacing-tight,-.05em)}.tracked-mega-l{letter-spacing:var(--letter-spacing-large,.25em)}}.lh-solid{line-height:var(--line-height-solid,1)}.lh-title{line-height:var(--line-height-title,1.25)}.lh-body{line-height:var(--line-height-body,1.5)}@container (min-width:30em){.lh-solid-s{line-height:var(--line-height-solid,1)}.lh-title-s{line-height:var(--line-height-title,1.25)}.lh-body-s{line-height:var(--line-height-body,1.5)}}@container (min-width:48em){.lh-solid-m{line-height:var(--line-height-solid,1)}.lh-title-m{line-height:var(--line-height-title,1.25)}.lh-body-m{line-height:var(--line-height-body,1.5)}}@container (min-width:64em){.lh-solid-l{line-height:var(--line-height-solid,1)}.lh-title-l{line-height:var(--line-height-title,1.25)}.lh-body-l{line-height:var(--line-height-body,1.5)}}.link{text-decoration:none}.link,.link:active,.link:focus,.link:hover,.link:link,.link:visited{transition:all .15s ease-in}.link:focus{outline:1px dotted currentColor}.list{list-style-type:none}.mw-100{max-width:100%}.mw1{max-width:1rem}.mw2{max-width:2rem}.mw3{max-width:4rem}.mw4{max-width:8rem}.mw5{max-width:16rem}.mw6{max-width:32rem}.mw7{max-width:48rem}.mw8{max-width:64rem}.mw9{max-width:96rem}.mw-none{max-width:none}@container (min-width:30em){.mw-100-s{max-width:100%}.mw1-s{max-width:1rem}.mw2-s{max-width:2rem}.mw3-s{max-width:4rem}.mw4-s{max-width:8rem}.mw5-s{max-width:16rem}.mw6-s{max-width:32rem}.mw7-s{max-width:48rem}.mw8-s{max-width:64rem}.mw9-s{max-width:96rem}.mw-none-s{max-width:none}}@container (min-width:48em){.mw-100-m{max-width:100%}.mw1-m{max-width:1rem}.mw2-m{max-width:2rem}.mw3-m{max-width:4rem}.mw4-m{max-width:8rem}.mw5-m{max-width:16rem}.mw6-m{max-width:32rem}.mw7-m{max-width:48rem}.mw8-m{max-width:64rem}.mw9-m{max-width:96rem}.mw-none-m{max-width:none}}@container (min-width:64em){.mw-100-l{max-width:100%}.mw1-l{max-width:1rem}.mw2-l{max-width:2rem}.mw3-l{max-width:4rem}.mw4-l{max-width:8rem}.mw5-l{max-width:16rem}.mw6-l{max-width:32rem}.mw7-l{max-width:48rem}.mw8-l{max-width:64rem}.mw9-l{max-width:96rem}.mw-none-l{max-width:none}}.w0{width:var(--size-0,0)}.w1{width:var(--size-1,1rem)}.w2{width:var(--size-2,2rem)}.w3{width:var(--size-3,3rem)}.w4{width:var(--size-4,4rem)}.w5{width:var(--size-5,8rem)}.w6{width:var(--size-6,16rem)}.w7{width:var(--size-7,32rem)}.w8{width:var(--size-8,64rem)}.w-10{width:10%}.w-20{width:20%}.w-25{width:25%}.w-50{width:50%}.w-75{width:75%}.w-100{width:100%}.w-third{width:33.33333%}.w-two-thirds{width:66.66667%}.w-auto{width:auto}@container (min-width:30em){.w0-s{width:var(--size-0,0)}.w1-s{width:var(--size-1,1rem)}.w2-s{width:var(--size-2,2rem)}.w3-s{width:var(--size-3,3rem)}.w4-s{width:var(--size-4,4rem)}.w5-s{width:var(--size-5,8rem)}.w6-s{width:var(--size-6,16rem)}.w7-s{width:var(--size-7,32rem)}.w8-s{width:var(--size-8,64rem)}.w-10-s{width:10%}.w-20-s{width:20%}.w-25-s{width:25%}.w-50-s{width:50%}.w-75-s{width:75%}.w-100-s{width:100%}.w-third-s{width:33.33333%}.w-two-thirds-s{width:66.66667%}.w-auto-s{width:auto}}@container (min-width:48em){.w0-m{width:var(--size-0,0)}.w1-m{width:var(--size-1,1rem)}.w2-m{width:var(--size-2,2rem)}.w3-m{width:var(--size-3,3rem)}.w4-m{width:var(--size-4,4rem)}.w5-m{width:var(--size-5,8rem)}.w6-m{width:var(--size-6,16rem)}.w7-m{width:var(--size-7,32rem)}.w8-m{width:var(--size-8,64rem)}.w-10-m{width:10%}.w-20-m{width:20%}.w-25-m{width:25%}.w-50-m{width:50%}.w-75-m{width:75%}.w-100-m{width:100%}.w-third-m{width:33.33333%}.w-two-thirds-m{width:66.66667%}.w-auto-m{width:auto}}@container (min-width:64em){.w0-l{width:var(--size-0,0)}.w1-l{width:var(--size-1,1rem)}.w2-l{width:var(--size-2,2rem)}.w3-l{width:var(--size-3,3rem)}.w4-l{width:var(--size-4,4rem)}.w5-l{width:var(--size-5,8rem)}.w6-l{width:var(--size-6,16rem)}.w7-l{width:var(--size-7,32rem)}.w8-l{width:var(--size-8,64rem)}.w-10-l{width:10%}.w-20-l{width:20%}.w-25-l{width:25%}.w-50-l{width:50%}.w-75-l{width:75%}.w-100-l{width:100%}.w-third-l{width:33.33333%}.w-two-thirds-l{width:66.66667%}.w-auto-l{width:auto}}.overflow-visible{overflow:visible}.overflow-hidden{overflow:hidden}.overflow-scroll{overflow:scroll}.overflow-auto{overflow:auto}.overflow-x-visible{overflow-x:visible}.overflow-x-hidden{overflow-x:hidden}.overflow-x-scroll{overflow-x:scroll}.overflow-x-auto{overflow-x:auto}.overflow-y-visible{overflow-y:visible}.overflow-y-hidden{overflow-y:hidden}.overflow-y-scroll{overflow-y:scroll}.overflow-y-auto{overflow-y:auto}@container (min-width:30em){.overflow-visible-s{overflow:visible}.overflow-hidden-s{overflow:hidden}.overflow-scroll-s{overflow:scroll}.overflow-auto-s{overflow:auto}.overflow-x-visible-s{overflow-x:visible}.overflow-x-hidden-s{overflow-x:hidden}.overflow-x-scroll-s{overflow-x:scroll}.overflow-x-auto-s{overflow-x:auto}.overflow-y-visible-s{overflow-y:visible}.overflow-y-hidden-s{overflow-y:hidden}.overflow-y-scroll-s{overflow-y:scroll}.overflow-y-auto-s{overflow-y:auto}}@container (min-width:48em){.overflow-visible-m{overflow:visible}.overflow-hidden-m{overflow:hidden}.overflow-scroll-m{overflow:scroll}.overflow-auto-m{overflow:auto}.overflow-x-visible-m{overflow-x:visible}.overflow-x-hidden-m{overflow-x:hidden}.overflow-x-scroll-m{overflow-x:scroll}.overflow-x-auto-m{overflow-x:auto}.overflow-y-visible-m{overflow-y:visible}.overflow-y-hidden-m{overflow-y:hidden}.overflow-y-scroll-m{overflow-y:scroll}.overflow-y-auto-m{overflow-y:auto}}@container (min-width:64em){.overflow-visible-l{overflow:visible}.overflow-hidden-l{overflow:hidden}.overflow-scroll-l{overflow:scroll}.overflow-auto-l{overflow:auto}.overflow-x-visible-l{overflow-x:visible}.overflow-x-hidden-l{overflow-x:hidden}.overflow-x-scroll-l{overflow-x:scroll}.overflow-x-auto-l{overflow-x:auto}.overflow-y-visible-l{overflow-y:visible}.overflow-y-hidden-l{overflow-y:hidden}.overflow-y-scroll-l{overflow-y:scroll}.overflow-y-auto-l{overflow-y:auto}}.static{position:static}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.sticky{position:-webkit-sticky;position:sticky}@container (min-width:30em){.static-s{position:static}.relative-s{position:relative}.absolute-s{position:absolute}.fixed-s{position:fixed}.sticky-s{position:-webkit-sticky;position:sticky}}@container (min-width:48em){.static-m{position:static}.relative-m{position:relative}.absolute-m{position:absolute}.fixed-m{position:fixed}.sticky-m{position:-webkit-sticky;position:sticky}}@container (min-width:64em){.static-l{position:static}.relative-l{position:relative}.absolute-l{position:absolute}.fixed-l{position:fixed}.sticky-l{position:-webkit-sticky;position:sticky}}.o12{opacity:var(--opacity-12,1)}.o11{opacity:var(--opacity-11,.9)}.o10{opacity:var(--opacity-10,.8)}.o9{opacity:var(--opacity-9,.7)}.o8{opacity:var(--opacity-8,.6)}.o7{opacity:var(--opacity-7,.5)}.o6{opacity:var(--opacity-6,.4)}.o5{opacity:var(--opacity-5,.3)}.o4{opacity:var(--opacity-4,.2)}.o3{opacity:var(--opacity-3,.1)}.o2{opacity:var(--opacity-2,.05)}.o1{opacity:var(--opacity-1,.025)}.o0{opacity:var(--opacity-0,0)}.h-o12:hover{opacity:var(--opacity-12,1)}.h-o11:hover{opacity:var(--opacity-11,.9)}.h-o10:hover{opacity:var(--opacity-10,.8)}.h-o9:hover{opacity:var(--opacity-9,.7)}.h-o8:hover{opacity:var(--opacity-8,.6)}.h-o7:hover{opacity:var(--opacity-7,.5)}.h-o6:hover{opacity:var(--opacity-6,.4)}.h-o5:hover{opacity:var(--opacity-5,.3)}.h-o4:hover{opacity:var(--opacity-4,.2)}.h-o3:hover{opacity:var(--opacity-3,.1)}.h-o2:hover{opacity:var(--opacity-2,.05)}.h-o1:hover{opacity:var(--opacity-1,.025)}.h-o0:hover{opacity:var(--opacity-0,0)}.f-o12:focus{opacity:var(--opacity-12,1)}.f-o11:focus{opacity:var(--opacity-11,.9)}.f-o10:focus{opacity:var(--opacity-10,.8)}.f-o9:focus{opacity:var(--opacity-9,.7)}.f-o8:focus{opacity:var(--opacity-8,.6)}.f-o7:focus{opacity:var(--opacity-7,.5)}.f-o6:focus{opacity:var(--opacity-6,.4)}.f-o5:focus{opacity:var(--opacity-5,.3)}.f-o4:focus{opacity:var(--opacity-4,.2)}.f-o3:focus{opacity:var(--opacity-3,.1)}.f-o2:focus{opacity:var(--opacity-2,.05)}.f-o1:focus{opacity:var(--opacity-1,.025)}.f-o0:focus{opacity:var(--opacity-0,0)}.rotate-45{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.rotate-90{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.rotate-135{-webkit-transform:rotate(135deg);transform:rotate(135deg)}.rotate-180{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.rotate-225{-webkit-transform:rotate(225deg);transform:rotate(225deg)}.rotate-270{-webkit-transform:rotate(270deg);transform:rotate(270deg)}.rotate-315{-webkit-transform:rotate(315deg);transform:rotate(315deg)}@container (min-width:30em){.rotate-45-s{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.rotate-90-s{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.rotate-135-s{-webkit-transform:rotate(135deg);transform:rotate(135deg)}.rotate-180-s{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.rotate-225-s{-webkit-transform:rotate(225deg);transform:rotate(225deg)}.rotate-270-s{-webkit-transform:rotate(270deg);transform:rotate(270deg)}.rotate-315-s{-webkit-transform:rotate(315deg);transform:rotate(315deg)}}@container (min-width:48em){.rotate-45-m{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.rotate-90-m{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.rotate-135-m{-webkit-transform:rotate(135deg);transform:rotate(135deg)}.rotate-180-m{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.rotate-225-m{-webkit-transform:rotate(225deg);transform:rotate(225deg)}.rotate-270-m{-webkit-transform:rotate(270deg);transform:rotate(270deg)}.rotate-315-m{-webkit-transform:rotate(315deg);transform:rotate(315deg)}}@container (min-width:64em){.rotate-45-l{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.rotate-90-l{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.rotate-135-l{-webkit-transform:rotate(135deg);transform:rotate(135deg)}.rotate-180-l{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.rotate-225-l{-webkit-transform:rotate(225deg);transform:rotate(225deg)}.rotate-270-l{-webkit-transform:rotate(270deg);transform:rotate(270deg)}.rotate-315-l{-webkit-transform:rotate(315deg);transform:rotate(315deg)}}.tint-0{color:var(--tint-0)}.tint-1{color:var(--tint-1)}.tint-2{color:var(--tint-2)}.tint-3{color:var(--tint-3)}.tint-4{color:var(--tint-4)}.tint-5{color:var(--tint-5)}.tint-6{color:var(--tint-6)}.tint-7{color:var(--tint-7)}.tint-8{color:var(--tint-8)}.tint-9{color:var(--tint-9)}.tint-10{color:var(--tint-10)}.tint-11{color:var(--tint-11)}.shadow-0{color:var(--shadow-0)}.shadow-1{color:var(--shadow-1)}.shadow-2{color:var(--shadow-2)}.shadow-3{color:var(--shadow-3)}.shadow-4{color:var(--shadow-4)}.shadow-5{color:var(--shadow-5)}.shadow-6{color:var(--shadow-6)}.shadow-7{color:var(--shadow-7)}.shadow-8{color:var(--shadow-8)}.shadow-9{color:var(--shadow-9)}.shadow-10{color:var(--shadow-10)}.shadow-11{color:var(--shadow-11)}.black,.gray-0{color:var(--gray-0)}.gray-1{color:var(--gray-1)}.gray-2{color:var(--gray-2)}.gray-3{color:var(--gray-3)}.gray-4{color:var(--gray-4)}.gray-5{color:var(--gray-5)}.gray-6{color:var(--gray-6)}.gray-7{color:var(--gray-7)}.gray-8{color:var(--gray-8)}.gray-9{color:var(--gray-9)}.gray-10{color:var(--gray-10)}.gray-11,.white{color:var(--gray-11)}.slate-gray-0{color:var(--slate-gray-0)}.slate-gray-1{color:var(--slate-gray-1)}.slate-gray-2{color:var(--slate-gray-2)}.slate-gray-3{color:var(--slate-gray-3)}.slate-gray-4{color:var(--slate-gray-4)}.slate-gray-5{color:var(--slate-gray-5)}.slate-gray-6{color:var(--slate-gray-6)}.slate-gray-7{color:var(--slate-gray-7)}.slate-gray-8{color:var(--slate-gray-8)}.slate-gray-9{color:var(--slate-gray-9)}.slate-gray-10{color:var(--slate-gray-10)}.slate-gray-11{color:var(--slate-gray-11)}.blue-0{color:var(--blue-0)}.blue-1{color:var(--blue-1)}.blue-2{color:var(--blue-2)}.blue-3{color:var(--blue-3)}.blue-4{color:var(--blue-4)}.blue-5{color:var(--blue-5)}.blue-6{color:var(--blue-6)}.blue-7{color:var(--blue-7)}.blue-8{color:var(--blue-8)}.blue-9{color:var(--blue-9)}.blue-10{color:var(--blue-10)}.blue-11{color:var(--blue-11)}.indigo-0{color:var(--indigo-0)}.indigo-1{color:var(--indigo-1)}.indigo-2{color:var(--indigo-2)}.indigo-3{color:var(--indigo-3)}.indigo-4{color:var(--indigo-4)}.indigo-5{color:var(--indigo-5)}.indigo-6{color:var(--indigo-6)}.indigo-7{color:var(--indigo-7)}.indigo-8{color:var(--indigo-8)}.indigo-9{color:var(--indigo-9)}.indigo-10{color:var(--indigo-10)}.indigo-11{color:var(--indigo-11)}.violet-0{color:var(--violet-0)}.violet-1{color:var(--violet-1)}.violet-2{color:var(--violet-2)}.violet-3{color:var(--violet-3)}.violet-4{color:var(--violet-4)}.violet-5{color:var(--violet-5)}.violet-6{color:var(--violet-6)}.violet-7{color:var(--violet-7)}.violet-8{color:var(--violet-8)}.violet-9{color:var(--violet-9)}.violet-10{color:var(--violet-10)}.violet-11{color:var(--violet-11)}.magenta-0{color:var(--magenta-0)}.magenta-1{color:var(--magenta-1)}.magenta-2{color:var(--magenta-2)}.magenta-3{color:var(--magenta-3)}.magenta-4{color:var(--magenta-4)}.magenta-5{color:var(--magenta-5)}.magenta-6{color:var(--magenta-6)}.magenta-7{color:var(--magenta-7)}.magenta-8{color:var(--magenta-8)}.magenta-9{color:var(--magenta-9)}.magenta-10{color:var(--magenta-10)}.magenta-11{color:var(--magenta-11)}.red-0{color:var(--red-0)}.red-1{color:var(--red-1)}.red-2{color:var(--red-2)}.red-3{color:var(--red-3)}.red-4{color:var(--red-4)}.red-5{color:var(--red-5)}.red-6{color:var(--red-6)}.red-7{color:var(--red-7)}.red-8{color:var(--red-8)}.red-9{color:var(--red-9)}.red-10{color:var(--red-10)}.red-11{color:var(--red-11)}.red-orange-0{color:var(--red-orange-0)}.red-orange-1{color:var(--red-orange-1)}.red-orange-2{color:var(--red-orange-2)}.red-orange-3{color:var(--red-orange-3)}.red-orange-4{color:var(--red-orange-4)}.red-orange-5{color:var(--red-orange-5)}.red-orange-6{color:var(--red-orange-6)}.red-orange-7{color:var(--red-orange-7)}.red-orange-8{color:var(--red-orange-8)}.red-orange-9{color:var(--red-orange-9)}.red-orange-10{color:var(--red-orange-10)}.red-orange-11{color:var(--red-orange-11)}.orange-0{color:var(--orange-0)}.orange-1{color:var(--orange-1)}.orange-2{color:var(--orange-2)}.orange-3{color:var(--orange-3)}.orange-4{color:var(--orange-4)}.orange-5{color:var(--orange-5)}.orange-6{color:var(--orange-6)}.orange-7{color:var(--orange-7)}.orange-8{color:var(--orange-8)}.orange-9{color:var(--orange-9)}.orange-10{color:var(--orange-10)}.orange-11{color:var(--orange-11)}.gold-0{color:var(--gold-0)}.gold-1{color:var(--gold-1)}.gold-2{color:var(--gold-2)}.gold-3{color:var(--gold-3)}.gold-4{color:var(--gold-4)}.gold-5{color:var(--gold-5)}.gold-6{color:var(--gold-6)}.gold-7{color:var(--gold-7)}.gold-8{color:var(--gold-8)}.gold-9{color:var(--gold-9)}.gold-10{color:var(--gold-10)}.gold-11{color:var(--gold-11)}.yellow-0{color:var(--yellow-0)}.yellow-1{color:var(--yellow-1)}.yellow-2{color:var(--yellow-2)}.yellow-3{color:var(--yellow-3)}.yellow-4{color:var(--yellow-4)}.yellow-5{color:var(--yellow-5)}.yellow-6{color:var(--yellow-6)}.yellow-7{color:var(--yellow-7)}.yellow-8{color:var(--yellow-8)}.yellow-9{color:var(--yellow-9)}.yellow-10{color:var(--yellow-10)}.yellow-11{color:var(--yellow-11)}.green-0{color:var(--green-0)}.green-1{color:var(--green-1)}.green-2{color:var(--green-2)}.green-3{color:var(--green-3)}.green-4{color:var(--green-4)}.green-5{color:var(--green-5)}.green-6{color:var(--green-6)}.green-7{color:var(--green-7)}.green-8{color:var(--green-8)}.green-9{color:var(--green-9)}.green-10{color:var(--green-10)}.green-11{color:var(--green-11)}.teal-0{color:var(--teal-0)}.teal-1{color:var(--teal-1)}.teal-2{color:var(--teal-2)}.teal-3{color:var(--teal-3)}.teal-4{color:var(--teal-4)}.teal-5{color:var(--teal-5)}.teal-6{color:var(--teal-6)}.teal-7{color:var(--teal-7)}.teal-8{color:var(--teal-8)}.teal-9{color:var(--teal-9)}.teal-10{color:var(--teal-10)}.teal-11{color:var(--teal-11)}.cyan-0{color:var(--cyan-0)}.cyan-1{color:var(--cyan-1)}.cyan-2{color:var(--cyan-2)}.cyan-3{color:var(--cyan-3)}.cyan-4{color:var(--cyan-4)}.cyan-5{color:var(--cyan-5)}.cyan-6{color:var(--cyan-6)}.cyan-7{color:var(--cyan-7)}.cyan-8{color:var(--cyan-8)}.cyan-9{color:var(--cyan-9)}.cyan-10{color:var(--cyan-10)}.cyan-11{color:var(--cyan-11)}.bg-tint-0{background-color:var(--tint-0)}.bg-tint-1{background-color:var(--tint-1)}.bg-tint-2{background-color:var(--tint-2)}.bg-tint-3{background-color:var(--tint-3)}.bg-tint-4{background-color:var(--tint-4)}.bg-tint-5{background-color:var(--tint-5)}.bg-tint-6{background-color:var(--tint-6)}.bg-tint-7{background-color:var(--tint-7)}.bg-tint-8{background-color:var(--tint-8)}.bg-tint-9{background-color:var(--tint-9)}.bg-tint-10{background-color:var(--tint-10)}.bg-tint-11{background-color:var(--tint-11)}.bg-shadow-0{background-color:var(--shadow-0)}.bg-shadow-1{background-color:var(--shadow-1)}.bg-shadow-2{background-color:var(--shadow-2)}.bg-shadow-3{background-color:var(--shadow-3)}.bg-shadow-4{background-color:var(--shadow-4)}.bg-shadow-5{background-color:var(--shadow-5)}.bg-shadow-6{background-color:var(--shadow-6)}.bg-shadow-7{background-color:var(--shadow-7)}.bg-shadow-8{background-color:var(--shadow-8)}.bg-shadow-9{background-color:var(--shadow-9)}.bg-shadow-10{background-color:var(--shadow-10)}.bg-shadow-11{background-color:var(--shadow-11)}.bg-black,.bg-gray-0{background-color:var(--gray-0)}.bg-gray-1{background-color:var(--gray-1)}.bg-gray-2{background-color:var(--gray-2)}.bg-gray-3{background-color:var(--gray-3)}.bg-gray-4{background-color:var(--gray-4)}.bg-gray-5{background-color:var(--gray-5)}.bg-gray-6{background-color:var(--gray-6)}.bg-gray-7{background-color:var(--gray-7)}.bg-gray-8{background-color:var(--gray-8)}.bg-gray-9{background-color:var(--gray-9)}.bg-gray-10{background-color:var(--gray-10)}.bg-gray-11,.bg-white{background-color:var(--gray-11)}.bg-slate-gray-0{background-color:var(--slate-gray-0)}.bg-slate-gray-1{background-color:var(--slate-gray-1)}.bg-slate-gray-2{background-color:var(--slate-gray-2)}.bg-slate-gray-3{background-color:var(--slate-gray-3)}.bg-slate-gray-4{background-color:var(--slate-gray-4)}.bg-slate-gray-5{background-color:var(--slate-gray-5)}.bg-slate-gray-6{background-color:var(--slate-gray-6)}.bg-slate-gray-7{background-color:var(--slate-gray-7)}.bg-slate-gray-8{background-color:var(--slate-gray-8)}.bg-slate-gray-9{background-color:var(--slate-gray-9)}.bg-slate-gray-10{background-color:var(--slate-gray-10)}.bg-slate-gray-11{background-color:var(--slate-gray-11)}.bg-blue-0{background-color:var(--blue-0)}.bg-blue-1{background-color:var(--blue-1)}.bg-blue-2{background-color:var(--blue-2)}.bg-blue-3{background-color:var(--blue-3)}.bg-blue-4{background-color:var(--blue-4)}.bg-blue-5{background-color:var(--blue-5)}.bg-blue-6{background-color:var(--blue-6)}.bg-blue-7{background-color:var(--blue-7)}.bg-blue-8{background-color:var(--blue-8)}.bg-blue-9{background-color:var(--blue-9)}.bg-blue-10{background-color:var(--blue-10)}.bg-blue-11{background-color:var(--blue-11)}.bg-indigo-0{background-color:var(--indigo-0)}.bg-indigo-1{background-color:var(--indigo-1)}.bg-indigo-2{background-color:var(--indigo-2)}.bg-indigo-3{background-color:var(--indigo-3)}.bg-indigo-4{background-color:var(--indigo-4)}.bg-indigo-5{background-color:var(--indigo-5)}.bg-indigo-6{background-color:var(--indigo-6)}.bg-indigo-7{background-color:var(--indigo-7)}.bg-indigo-8{background-color:var(--indigo-8)}.bg-indigo-9{background-color:var(--indigo-9)}.bg-indigo-10{background-color:var(--indigo-10)}.bg-indigo-11{background-color:var(--indigo-11)}.bg-violet-0{background-color:var(--violet-0)}.bg-violet-1{background-color:var(--violet-1)}.bg-violet-2{background-color:var(--violet-2)}.bg-violet-3{background-color:var(--violet-3)}.bg-violet-4{background-color:var(--violet-4)}.bg-violet-5{background-color:var(--violet-5)}.bg-violet-6{background-color:var(--violet-6)}.bg-violet-7{background-color:var(--violet-7)}.bg-violet-8{background-color:var(--violet-8)}.bg-violet-9{background-color:var(--violet-9)}.bg-violet-10{background-color:var(--violet-10)}.bg-violet-11{background-color:var(--violet-11)}.bg-magenta-0{background-color:var(--magenta-0)}.bg-magenta-1{background-color:var(--magenta-1)}.bg-magenta-2{background-color:var(--magenta-2)}.bg-magenta-3{background-color:var(--magenta-3)}.bg-magenta-4{background-color:var(--magenta-4)}.bg-magenta-5{background-color:var(--magenta-5)}.bg-magenta-6{background-color:var(--magenta-6)}.bg-magenta-7{background-color:var(--magenta-7)}.bg-magenta-8{background-color:var(--magenta-8)}.bg-magenta-9{background-color:var(--magenta-9)}.bg-magenta-10{background-color:var(--magenta-10)}.bg-magenta-11{background-color:var(--magenta-11)}.bg-red-0{background-color:var(--red-0)}.bg-red-1{background-color:var(--red-1)}.bg-red-2{background-color:var(--red-2)}.bg-red-3{background-color:var(--red-3)}.bg-red-4{background-color:var(--red-4)}.bg-red-5{background-color:var(--red-5)}.bg-red-6{background-color:var(--red-6)}.bg-red-7{background-color:var(--red-7)}.bg-red-8{background-color:var(--red-8)}.bg-red-9{background-color:var(--red-9)}.bg-red-10{background-color:var(--red-10)}.bg-red-11{background-color:var(--red-11)}.bg-red-orange-0{background-color:var(--red-orange-0)}.bg-red-orange-1{background-color:var(--red-orange-1)}.bg-red-orange-2{background-color:var(--red-orange-2)}.bg-red-orange-3{background-color:var(--red-orange-3)}.bg-red-orange-4{background-color:var(--red-orange-4)}.bg-red-orange-5{background-color:var(--red-orange-5)}.bg-red-orange-6{background-color:var(--red-orange-6)}.bg-red-orange-7{background-color:var(--red-orange-7)}.bg-red-orange-8{background-color:var(--red-orange-8)}.bg-red-orange-9{background-color:var(--red-orange-9)}.bg-red-orange-10{background-color:var(--red-orange-10)}.bg-red-orange-11{background-color:var(--red-orange-11)}.bg-orange-0{background-color:var(--orange-0)}.bg-orange-1{background-color:var(--orange-1)}.bg-orange-2{background-color:var(--orange-2)}.bg-orange-3{background-color:var(--orange-3)}.bg-orange-4{background-color:var(--orange-4)}.bg-orange-5{background-color:var(--orange-5)}.bg-orange-6{background-color:var(--orange-6)}.bg-orange-7{background-color:var(--orange-7)}.bg-orange-8{background-color:var(--orange-8)}.bg-orange-9{background-color:var(--orange-9)}.bg-orange-10{background-color:var(--orange-10)}.bg-orange-11{background-color:var(--orange-11)}.bg-gold-0{background-color:var(--gold-0)}.bg-gold-1{background-color:var(--gold-1)}.bg-gold-2{background-color:var(--gold-2)}.bg-gold-3{background-color:var(--gold-3)}.bg-gold-4{background-color:var(--gold-4)}.bg-gold-5{background-color:var(--gold-5)}.bg-gold-6{background-color:var(--gold-6)}.bg-gold-7{background-color:var(--gold-7)}.bg-gold-8{background-color:var(--gold-8)}.bg-gold-9{background-color:var(--gold-9)}.bg-gold-10{background-color:var(--gold-10)}.bg-gold-11{background-color:var(--gold-11)}.bg-yellow-0{background-color:var(--yellow-0)}.bg-yellow-1{background-color:var(--yellow-1)}.bg-yellow-2{background-color:var(--yellow-2)}.bg-yellow-3{background-color:var(--yellow-3)}.bg-yellow-4{background-color:var(--yellow-4)}.bg-yellow-5{background-color:var(--yellow-5)}.bg-yellow-6{background-color:var(--yellow-6)}.bg-yellow-7{background-color:var(--yellow-7)}.bg-yellow-8{background-color:var(--yellow-8)}.bg-yellow-9{background-color:var(--yellow-9)}.bg-yellow-10{background-color:var(--yellow-10)}.bg-yellow-11{background-color:var(--yellow-11)}.bg-green-0{background-color:var(--green-0)}.bg-green-1{background-color:var(--green-1)}.bg-green-2{background-color:var(--green-2)}.bg-green-3{background-color:var(--green-3)}.bg-green-4{background-color:var(--green-4)}.bg-green-5{background-color:var(--green-5)}.bg-green-6{background-color:var(--green-6)}.bg-green-7{background-color:var(--green-7)}.bg-green-8{background-color:var(--green-8)}.bg-green-9{background-color:var(--green-9)}.bg-green-10{background-color:var(--green-10)}.bg-green-11{background-color:var(--green-11)}.bg-teal-0{background-color:var(--teal-0)}.bg-teal-1{background-color:var(--teal-1)}.bg-teal-2{background-color:var(--teal-2)}.bg-teal-3{background-color:var(--teal-3)}.bg-teal-4{background-color:var(--teal-4)}.bg-teal-5{background-color:var(--teal-5)}.bg-teal-6{background-color:var(--teal-6)}.bg-teal-7{background-color:var(--teal-7)}.bg-teal-8{background-color:var(--teal-8)}.bg-teal-9{background-color:var(--teal-9)}.bg-teal-10{background-color:var(--teal-10)}.bg-teal-11{background-color:var(--teal-11)}.bg-cyan-0{background-color:var(--cyan-0)}.bg-cyan-1{background-color:var(--cyan-1)}.bg-cyan-2{background-color:var(--cyan-2)}.bg-cyan-3{background-color:var(--cyan-3)}.bg-cyan-4{background-color:var(--cyan-4)}.bg-cyan-5{background-color:var(--cyan-5)}.bg-cyan-6{background-color:var(--cyan-6)}.bg-cyan-7{background-color:var(--cyan-7)}.bg-cyan-8{background-color:var(--cyan-8)}.bg-cyan-9{background-color:var(--cyan-9)}.bg-cyan-10{background-color:var(--cyan-10)}.bg-cyan-11{background-color:var(--cyan-11)}.dark{background-color:#000;color:#fff}.light{background-color:#fff;color:#000}.blue{background-color:var(--blue-5);color:var(--gray-11)}.blue-dark{background-color:var(--blue-3);color:var(--blue-9)}.blue-light{color:var(--blue-3);background-color:var(--blue-10)}.indigo{background-color:var(--indigo-5);color:var(--gray-11)}.indigo-dark{background-color:var(--indigo-3);color:var(--indigo-9)}.indigo-light{color:var(--indigo-3);background-color:var(--indigo-10)}.violet{background-color:var(--violet-5);color:var(--gray-11)}.violet-dark{background-color:var(--violet-3);color:var(--violet-9)}.violet-light{color:var(--violet-3);background-color:var(--violet-10)}.magenta{background-color:var(--magenta-5);color:var(--gray-11)}.magenta-dark{background-color:var(--magenta-3);color:var(--magenta-9)}.magenta-light{color:var(--magenta-3);background-color:var(--magenta-10)}.red{background-color:var(--red-5);color:var(--gray-11)}.red-dark{background-color:var(--red-3);color:var(--red-9)}.red-light{color:var(--red-3);background-color:var(--red-10)}.red-orange{background-color:var(--red-orange-5);color:var(--gray-11)}.red-orange-dark{background-color:var(--red-orange-3);color:var(--red-orange-9)}.red-orange-light{color:var(--red-orange-3);background-color:var(--red-orange-10)}.orange{background-color:var(--orange-5);color:var(--gray-11)}.orange-dark{background-color:var(--orange-3);color:var(--orange-9)}.orange-light{color:var(--orange-3);background-color:var(--orange-10)}.gold{background-color:var(--gold-5);color:var(--gray-11)}.gold-dark{background-color:var(--gold-3);color:var(--gold-9)}.gold-light{color:var(--gold-3);background-color:var(--gold-10)}.yellow{background-color:var(--yellow-5);color:var(--gray-11)}.yellow-dark{background-color:var(--yellow-3);color:var(--yellow-9)}.yellow-light{color:var(--yellow-3);background-color:var(--yellow-10)}.green{background-color:var(--green-5);color:var(--gray-11)}.green-dark{background-color:var(--green-3);color:var(--green-9)}.green-light{color:var(--green-3);background-color:var(--green-10)}.teal{background-color:var(--teal-5);color:var(--gray-11)}.teal-dark{background-color:var(--teal-3);color:var(--teal-9)}.teal-light{color:var(--teal-3);background-color:var(--teal-10)}.cyan{background-color:var(--cyan-5);color:var(--gray-11)}.cyan-dark{background-color:var(--cyan-3);color:var(--cyan-9)}.cyan-light{color:var(--cyan-3);background-color:var(--cyan-10)}.hover-overlay-tint-0:hover{color:var(--overlay-tint-0)}.hover-overlay-tint-1:hover{color:var(--overlay-tint-1)}.hover-overlay-tint-2:hover{color:var(--overlay-tint-2)}.hover-overlay-tint-3:hover{color:var(--overlay-tint-3)}.hover-overlay-tint-4:hover{color:var(--overlay-tint-4)}.hover-overlay-tint-5:hover{color:var(--overlay-tint-5)}.hover-overlay-tint-6:hover{color:var(--overlay-tint-6)}.hover-overlay-tint-7:hover{color:var(--overlay-tint-7)}.hover-overlay-tint-8:hover{color:var(--overlay-tint-8)}.hover-overlay-tint-9:hover{color:var(--overlay-tint-9)}.hover-overlay-tint-10:hover{color:var(--overlay-tint-10)}.hover-overlay-tint-11:hover{color:var(--overlay-tint-11)}.hover-overlay-shadow-0:hover{color:var(--overlay-shadow-0)}.hover-overlay-shadow-1:hover{color:var(--overlay-shadow-1)}.hover-overlay-shadow-2:hover{color:var(--overlay-shadow-2)}.hover-overlay-shadow-3:hover{color:var(--overlay-shadow-3)}.hover-overlay-shadow-4:hover{color:var(--overlay-shadow-4)}.hover-overlay-shadow-5:hover{color:var(--overlay-shadow-5)}.hover-overlay-shadow-6:hover{color:var(--overlay-shadow-6)}.hover-overlay-shadow-7:hover{color:var(--overlay-shadow-7)}.hover-overlay-shadow-8:hover{color:var(--overlay-shadow-8)}.hover-overlay-shadow-9:hover{color:var(--overlay-shadow-9)}.hover-overlay-shadow-10:hover{color:var(--overlay-shadow-10)}.hover-overlay-shadow-11:hover{color:var(--overlay-shadow-11)}.hover-gray-0:hover{color:var(--gray-0)}.hover-gray-1:hover{color:var(--gray-1)}.hover-gray-2:hover{color:var(--gray-2)}.hover-gray-3:hover{color:var(--gray-3)}.hover-gray-4:hover{color:var(--gray-4)}.hover-gray-5:hover{color:var(--gray-5)}.hover-gray-6:hover{color:var(--gray-6)}.hover-gray-7:hover{color:var(--gray-7)}.hover-gray-8:hover{color:var(--gray-8)}.hover-gray-9:hover{color:var(--gray-9)}.hover-gray-10:hover{color:var(--gray-10)}.hover-gray-11:hover{color:var(--gray-11)}.hover-slate-gray-0:hover{color:var(--slate-gray-0)}.hover-slate-gray-1:hover{color:var(--slate-gray-1)}.hover-slate-gray-2:hover{color:var(--slate-gray-2)}.hover-slate-gray-3:hover{color:var(--slate-gray-3)}.hover-slate-gray-4:hover{color:var(--slate-gray-4)}.hover-slate-gray-5:hover{color:var(--slate-gray-5)}.hover-slate-gray-6:hover{color:var(--slate-gray-6)}.hover-slate-gray-7:hover{color:var(--slate-gray-7)}.hover-slate-gray-8:hover{color:var(--slate-gray-8)}.hover-slate-gray-9:hover{color:var(--slate-gray-9)}.hover-slate-gray-10:hover{color:var(--slate-gray-10)}.hover-slate-gray-11:hover{color:var(--slate-gray-11)}.hover-blue-0:hover{color:var(--blue-0)}.hover-blue-1:hover{color:var(--blue-1)}.hover-blue-2:hover{color:var(--blue-2)}.hover-blue-3:hover{color:var(--blue-3)}.hover-blue-4:hover{color:var(--blue-4)}.hover-blue-5:hover{color:var(--blue-5)}.hover-blue-6:hover{color:var(--blue-6)}.hover-blue-7:hover{color:var(--blue-7)}.hover-blue-8:hover{color:var(--blue-8)}.hover-blue-9:hover{color:var(--blue-9)}.hover-blue-10:hover{color:var(--blue-10)}.hover-blue-11:hover{color:var(--blue-11)}.hover-indigo-0:hover{color:var(--indigo-0)}.hover-indigo-1:hover{color:var(--indigo-1)}.hover-indigo-2:hover{color:var(--indigo-2)}.hover-indigo-3:hover{color:var(--indigo-3)}.hover-indigo-4:hover{color:var(--indigo-4)}.hover-indigo-5:hover{color:var(--indigo-5)}.hover-indigo-6:hover{color:var(--indigo-6)}.hover-indigo-7:hover{color:var(--indigo-7)}.hover-indigo-8:hover{color:var(--indigo-8)}.hover-indigo-9:hover{color:var(--indigo-9)}.hover-indigo-10:hover{color:var(--indigo-10)}.hover-indigo-11:hover{color:var(--indigo-11)}.hover-violet-0:hover{color:var(--violet-0)}.hover-violet-1:hover{color:var(--violet-1)}.hover-violet-2:hover{color:var(--violet-2)}.hover-violet-3:hover{color:var(--violet-3)}.hover-violet-4:hover{color:var(--violet-4)}.hover-violet-5:hover{color:var(--violet-5)}.hover-violet-6:hover{color:var(--violet-6)}.hover-violet-7:hover{color:var(--violet-7)}.hover-violet-8:hover{color:var(--violet-8)}.hover-violet-9:hover{color:var(--violet-9)}.hover-violet-10:hover{color:var(--violet-10)}.hover-violet-11:hover{color:var(--violet-11)}.hover-magenta-0:hover{color:var(--magenta-0)}.hover-magenta-1:hover{color:var(--magenta-1)}.hover-magenta-2:hover{color:var(--magenta-2)}.hover-magenta-3:hover{color:var(--magenta-3)}.hover-magenta-4:hover{color:var(--magenta-4)}.hover-magenta-5:hover{color:var(--magenta-5)}.hover-magenta-6:hover{color:var(--magenta-6)}.hover-magenta-7:hover{color:var(--magenta-7)}.hover-magenta-8:hover{color:var(--magenta-8)}.hover-magenta-9:hover{color:var(--magenta-9)}.hover-magenta-10:hover{color:var(--magenta-10)}.hover-magenta-11:hover{color:var(--magenta-11)}.hover-red-0:hover{color:var(--red-0)}.hover-red-1:hover{color:var(--red-1)}.hover-red-2:hover{color:var(--red-2)}.hover-red-3:hover{color:var(--red-3)}.hover-red-4:hover{color:var(--red-4)}.hover-red-5:hover{color:var(--red-5)}.hover-red-6:hover{color:var(--red-6)}.hover-red-7:hover{color:var(--red-7)}.hover-red-8:hover{color:var(--red-8)}.hover-red-9:hover{color:var(--red-9)}.hover-red-10:hover{color:var(--red-10)}.hover-red-11:hover{color:var(--red-11)}.hover-red-orange-0:hover{color:var(--red-orange-0)}.hover-red-orange-1:hover{color:var(--red-orange-1)}.hover-red-orange-2:hover{color:var(--red-orange-2)}.hover-red-orange-3:hover{color:var(--red-orange-3)}.hover-red-orange-4:hover{color:var(--red-orange-4)}.hover-red-orange-5:hover{color:var(--red-orange-5)}.hover-red-orange-6:hover{color:var(--red-orange-6)}.hover-red-orange-7:hover{color:var(--red-orange-7)}.hover-red-orange-8:hover{color:var(--red-orange-8)}.hover-red-orange-9:hover{color:var(--red-orange-9)}.hover-red-orange-10:hover{color:var(--red-orange-10)}.hover-red-orange-11:hover{color:var(--red-orange-11)}.hover-orange-0:hover{color:var(--orange-0)}.hover-orange-1:hover{color:var(--orange-1)}.hover-orange-2:hover{color:var(--orange-2)}.hover-orange-3:hover{color:var(--orange-3)}.hover-orange-4:hover{color:var(--orange-4)}.hover-orange-5:hover{color:var(--orange-5)}.hover-orange-6:hover{color:var(--orange-6)}.hover-orange-7:hover{color:var(--orange-7)}.hover-orange-8:hover{color:var(--orange-8)}.hover-orange-9:hover{color:var(--orange-9)}.hover-orange-10:hover{color:var(--orange-10)}.hover-orange-11:hover{color:var(--orange-11)}.hover-gold-0:hover{color:var(--gold-0)}.hover-gold-1:hover{color:var(--gold-1)}.hover-gold-2:hover{color:var(--gold-2)}.hover-gold-3:hover{color:var(--gold-3)}.hover-gold-4:hover{color:var(--gold-4)}.hover-gold-5:hover{color:var(--gold-5)}.hover-gold-6:hover{color:var(--gold-6)}.hover-gold-7:hover{color:var(--gold-7)}.hover-gold-8:hover{color:var(--gold-8)}.hover-gold-9:hover{color:var(--gold-9)}.hover-gold-10:hover{color:var(--gold-10)}.hover-gold-11:hover{color:var(--gold-11)}.hover-yellow-0:hover{color:var(--yellow-0)}.hover-yellow-1:hover{color:var(--yellow-1)}.hover-yellow-2:hover{color:var(--yellow-2)}.hover-yellow-3:hover{color:var(--yellow-3)}.hover-yellow-4:hover{color:var(--yellow-4)}.hover-yellow-5:hover{color:var(--yellow-5)}.hover-yellow-6:hover{color:var(--yellow-6)}.hover-yellow-7:hover{color:var(--yellow-7)}.hover-yellow-8:hover{color:var(--yellow-8)}.hover-yellow-9:hover{color:var(--yellow-9)}.hover-yellow-10:hover{color:var(--yellow-10)}.hover-yellow-11:hover{color:var(--yellow-11)}.hover-green-0:hover{color:var(--green-0)}.hover-green-1:hover{color:var(--green-1)}.hover-green-2:hover{color:var(--green-2)}.hover-green-3:hover{color:var(--green-3)}.hover-green-4:hover{color:var(--green-4)}.hover-green-5:hover{color:var(--green-5)}.hover-green-6:hover{color:var(--green-6)}.hover-green-7:hover{color:var(--green-7)}.hover-green-8:hover{color:var(--green-8)}.hover-green-9:hover{color:var(--green-9)}.hover-green-10:hover{color:var(--green-10)}.hover-green-11:hover{color:var(--green-11)}.hover-teal-0:hover{color:var(--teal-0)}.hover-teal-1:hover{color:var(--teal-1)}.hover-teal-2:hover{color:var(--teal-2)}.hover-teal-3:hover{color:var(--teal-3)}.hover-teal-4:hover{color:var(--teal-4)}.hover-teal-5:hover{color:var(--teal-5)}.hover-teal-6:hover{color:var(--teal-6)}.hover-teal-7:hover{color:var(--teal-7)}.hover-teal-8:hover{color:var(--teal-8)}.hover-teal-9:hover{color:var(--teal-9)}.hover-teal-10:hover{color:var(--teal-10)}.hover-teal-11:hover{color:var(--teal-11)}.hover-cyan-0:hover{color:var(--cyan-0)}.hover-cyan-1:hover{color:var(--cyan-1)}.hover-cyan-2:hover{color:var(--cyan-2)}.hover-cyan-3:hover{color:var(--cyan-3)}.hover-cyan-4:hover{color:var(--cyan-4)}.hover-cyan-5:hover{color:var(--cyan-5)}.hover-cyan-6:hover{color:var(--cyan-6)}.hover-cyan-7:hover{color:var(--cyan-7)}.hover-cyan-8:hover{color:var(--cyan-8)}.hover-cyan-9:hover{color:var(--cyan-9)}.hover-cyan-10:hover{color:var(--cyan-10)}.hover-cyan-11:hover{color:var(--cyan-11)}.hover-bg-overlay-tint-0:hover{background-color:var(--overlay-tint-0)}.hover-bg-overlay-tint-1:hover{background-color:var(--overlay-tint-1)}.hover-bg-overlay-tint-2:hover{background-color:var(--overlay-tint-2)}.hover-bg-overlay-tint-3:hover{background-color:var(--overlay-tint-3)}.hover-bg-overlay-tint-4:hover{background-color:var(--overlay-tint-4)}.hover-bg-overlay-tint-5:hover{background-color:var(--overlay-tint-5)}.hover-bg-overlay-tint-6:hover{background-color:var(--overlay-tint-6)}.hover-bg-overlay-tint-7:hover{background-color:var(--overlay-tint-7)}.hover-bg-overlay-tint-8:hover{background-color:var(--overlay-tint-8)}.hover-bg-overlay-tint-9:hover{background-color:var(--overlay-tint-9)}.hover-bg-overlay-tint-10:hover{background-color:var(--overlay-tint-10)}.hover-bg-overlay-tint-11:hover{background-color:var(--overlay-tint-11)}.hover-bg-overlay-shadow-0:hover{background-color:var(--overlay-shadow-0)}.hover-bg-overlay-shadow-1:hover{background-color:var(--overlay-shadow-1)}.hover-bg-overlay-shadow-2:hover{background-color:var(--overlay-shadow-2)}.hover-bg-overlay-shadow-3:hover{background-color:var(--overlay-shadow-3)}.hover-bg-overlay-shadow-4:hover{background-color:var(--overlay-shadow-4)}.hover-bg-overlay-shadow-5:hover{background-color:var(--overlay-shadow-5)}.hover-bg-overlay-shadow-6:hover{background-color:var(--overlay-shadow-6)}.hover-bg-overlay-shadow-7:hover{background-color:var(--overlay-shadow-7)}.hover-bg-overlay-shadow-8:hover{background-color:var(--overlay-shadow-8)}.hover-bg-overlay-shadow-9:hover{background-color:var(--overlay-shadow-9)}.hover-bg-overlay-shadow-10:hover{background-color:var(--overlay-shadow-10)}.hover-bg-overlay-shadow-11:hover{background-color:var(--overlay-shadow-11)}.hover-bg-gray-0:hover{background-color:var(--gray-0)}.hover-bg-gray-1:hover{background-color:var(--gray-1)}.hover-bg-gray-2:hover{background-color:var(--gray-2)}.hover-bg-gray-3:hover{background-color:var(--gray-3)}.hover-bg-gray-4:hover{background-color:var(--gray-4)}.hover-bg-gray-5:hover{background-color:var(--gray-5)}.hover-bg-gray-6:hover{background-color:var(--gray-6)}.hover-bg-gray-7:hover{background-color:var(--gray-7)}.hover-bg-gray-8:hover{background-color:var(--gray-8)}.hover-bg-gray-9:hover{background-color:var(--gray-9)}.hover-bg-gray-10:hover{background-color:var(--gray-10)}.hover-bg-gray-11:hover{background-color:var(--gray-11)}.hover-bg-slate-gray-0:hover{background-color:var(--slate-gray-0)}.hover-bg-slate-gray-1:hover{background-color:var(--slate-gray-1)}.hover-bg-slate-gray-2:hover{background-color:var(--slate-gray-2)}.hover-bg-slate-gray-3:hover{background-color:var(--slate-gray-3)}.hover-bg-slate-gray-4:hover{background-color:var(--slate-gray-4)}.hover-bg-slate-gray-5:hover{background-color:var(--slate-gray-5)}.hover-bg-slate-gray-6:hover{background-color:var(--slate-gray-6)}.hover-bg-slate-gray-7:hover{background-color:var(--slate-gray-7)}.hover-bg-slate-gray-8:hover{background-color:var(--slate-gray-8)}.hover-bg-slate-gray-9:hover{background-color:var(--slate-gray-9)}.hover-bg-slate-gray-10:hover{background-color:var(--slate-gray-10)}.hover-bg-slate-gray-11:hover{background-color:var(--slate-gray-11)}.hover-bg-blue-0:hover{background-color:var(--blue-0)}.hover-bg-blue-1:hover{background-color:var(--blue-1)}.hover-bg-blue-2:hover{background-color:var(--blue-2)}.hover-bg-blue-3:hover{background-color:var(--blue-3)}.hover-bg-blue-4:hover{background-color:var(--blue-4)}.hover-bg-blue-5:hover{background-color:var(--blue-5)}.hover-bg-blue-6:hover{background-color:var(--blue-6)}.hover-bg-blue-7:hover{background-color:var(--blue-7)}.hover-bg-blue-8:hover{background-color:var(--blue-8)}.hover-bg-blue-9:hover{background-color:var(--blue-9)}.hover-bg-blue-10:hover{background-color:var(--blue-10)}.hover-bg-blue-11:hover{background-color:var(--blue-11)}.hover-bg-indigo-0:hover{background-color:var(--indigo-0)}.hover-bg-indigo-1:hover{background-color:var(--indigo-1)}.hover-bg-indigo-2:hover{background-color:var(--indigo-2)}.hover-bg-indigo-3:hover{background-color:var(--indigo-3)}.hover-bg-indigo-4:hover{background-color:var(--indigo-4)}.hover-bg-indigo-5:hover{background-color:var(--indigo-5)}.hover-bg-indigo-6:hover{background-color:var(--indigo-6)}.hover-bg-indigo-7:hover{background-color:var(--indigo-7)}.hover-bg-indigo-8:hover{background-color:var(--indigo-8)}.hover-bg-indigo-9:hover{background-color:var(--indigo-9)}.hover-bg-indigo-10:hover{background-color:var(--indigo-10)}.hover-bg-indigo-11:hover{background-color:var(--indigo-11)}.hover-bg-violet-0:hover{background-color:var(--violet-0)}.hover-bg-violet-1:hover{background-color:var(--violet-1)}.hover-bg-violet-2:hover{background-color:var(--violet-2)}.hover-bg-violet-3:hover{background-color:var(--violet-3)}.hover-bg-violet-4:hover{background-color:var(--violet-4)}.hover-bg-violet-5:hover{background-color:var(--violet-5)}.hover-bg-violet-6:hover{background-color:var(--violet-6)}.hover-bg-violet-7:hover{background-color:var(--violet-7)}.hover-bg-violet-8:hover{background-color:var(--violet-8)}.hover-bg-violet-9:hover{background-color:var(--violet-9)}.hover-bg-violet-10:hover{background-color:var(--violet-10)}.hover-bg-violet-11:hover{background-color:var(--violet-11)}.hover-bg-magenta-0:hover{background-color:var(--magenta-0)}.hover-bg-magenta-1:hover{background-color:var(--magenta-1)}.hover-bg-magenta-2:hover{background-color:var(--magenta-2)}.hover-bg-magenta-3:hover{background-color:var(--magenta-3)}.hover-bg-magenta-4:hover{background-color:var(--magenta-4)}.hover-bg-magenta-5:hover{background-color:var(--magenta-5)}.hover-bg-magenta-6:hover{background-color:var(--magenta-6)}.hover-bg-magenta-7:hover{background-color:var(--magenta-7)}.hover-bg-magenta-8:hover{background-color:var(--magenta-8)}.hover-bg-magenta-9:hover{background-color:var(--magenta-9)}.hover-bg-magenta-10:hover{background-color:var(--magenta-10)}.hover-bg-magenta-11:hover{background-color:var(--magenta-11)}.hover-bg-red-0:hover{background-color:var(--red-0)}.hover-bg-red-1:hover{background-color:var(--red-1)}.hover-bg-red-2:hover{background-color:var(--red-2)}.hover-bg-red-3:hover{background-color:var(--red-3)}.hover-bg-red-4:hover{background-color:var(--red-4)}.hover-bg-red-5:hover{background-color:var(--red-5)}.hover-bg-red-6:hover{background-color:var(--red-6)}.hover-bg-red-7:hover{background-color:var(--red-7)}.hover-bg-red-8:hover{background-color:var(--red-8)}.hover-bg-red-9:hover{background-color:var(--red-9)}.hover-bg-red-10:hover{background-color:var(--red-10)}.hover-bg-red-11:hover{background-color:var(--red-11)}.hover-bg-red-orange-0:hover{background-color:var(--red-orange-0)}.hover-bg-red-orange-1:hover{background-color:var(--red-orange-1)}.hover-bg-red-orange-2:hover{background-color:var(--red-orange-2)}.hover-bg-red-orange-3:hover{background-color:var(--red-orange-3)}.hover-bg-red-orange-4:hover{background-color:var(--red-orange-4)}.hover-bg-red-orange-5:hover{background-color:var(--red-orange-5)}.hover-bg-red-orange-6:hover{background-color:var(--red-orange-6)}.hover-bg-red-orange-7:hover{background-color:var(--red-orange-7)}.hover-bg-red-orange-8:hover{background-color:var(--red-orange-8)}.hover-bg-red-orange-9:hover{background-color:var(--red-orange-9)}.hover-bg-red-orange-10:hover{background-color:var(--red-orange-10)}.hover-bg-red-orange-11:hover{background-color:var(--red-orange-11)}.hover-bg-orange-0:hover{background-color:var(--orange-0)}.hover-bg-orange-1:hover{background-color:var(--orange-1)}.hover-bg-orange-2:hover{background-color:var(--orange-2)}.hover-bg-orange-3:hover{background-color:var(--orange-3)}.hover-bg-orange-4:hover{background-color:var(--orange-4)}.hover-bg-orange-5:hover{background-color:var(--orange-5)}.hover-bg-orange-6:hover{background-color:var(--orange-6)}.hover-bg-orange-7:hover{background-color:var(--orange-7)}.hover-bg-orange-8:hover{background-color:var(--orange-8)}.hover-bg-orange-9:hover{background-color:var(--orange-9)}.hover-bg-orange-10:hover{background-color:var(--orange-10)}.hover-bg-orange-11:hover{background-color:var(--orange-11)}.hover-bg-gold-0:hover{background-color:var(--gold-0)}.hover-bg-gold-1:hover{background-color:var(--gold-1)}.hover-bg-gold-2:hover{background-color:var(--gold-2)}.hover-bg-gold-3:hover{background-color:var(--gold-3)}.hover-bg-gold-4:hover{background-color:var(--gold-4)}.hover-bg-gold-5:hover{background-color:var(--gold-5)}.hover-bg-gold-6:hover{background-color:var(--gold-6)}.hover-bg-gold-7:hover{background-color:var(--gold-7)}.hover-bg-gold-8:hover{background-color:var(--gold-8)}.hover-bg-gold-9:hover{background-color:var(--gold-9)}.hover-bg-gold-10:hover{background-color:var(--gold-10)}.hover-bg-gold-11:hover{background-color:var(--gold-11)}.hover-bg-yellow-0:hover{background-color:var(--yellow-0)}.hover-bg-yellow-1:hover{background-color:var(--yellow-1)}.hover-bg-yellow-2:hover{background-color:var(--yellow-2)}.hover-bg-yellow-3:hover{background-color:var(--yellow-3)}.hover-bg-yellow-4:hover{background-color:var(--yellow-4)}.hover-bg-yellow-5:hover{background-color:var(--yellow-5)}.hover-bg-yellow-6:hover{background-color:var(--yellow-6)}.hover-bg-yellow-7:hover{background-color:var(--yellow-7)}.hover-bg-yellow-8:hover{background-color:var(--yellow-8)}.hover-bg-yellow-9:hover{background-color:var(--yellow-9)}.hover-bg-yellow-10:hover{background-color:var(--yellow-10)}.hover-bg-yellow-11:hover{background-color:var(--yellow-11)}.hover-bg-green-0:hover{background-color:var(--green-0)}.hover-bg-green-1:hover{background-color:var(--green-1)}.hover-bg-green-2:hover{background-color:var(--green-2)}.hover-bg-green-3:hover{background-color:var(--green-3)}.hover-bg-green-4:hover{background-color:var(--green-4)}.hover-bg-green-5:hover{background-color:var(--green-5)}.hover-bg-green-6:hover{background-color:var(--green-6)}.hover-bg-green-7:hover{background-color:var(--green-7)}.hover-bg-green-8:hover{background-color:var(--green-8)}.hover-bg-green-9:hover{background-color:var(--green-9)}.hover-bg-green-10:hover{background-color:var(--green-10)}.hover-bg-green-11:hover{background-color:var(--green-11)}.hover-bg-teal-0:hover{background-color:var(--teal-0)}.hover-bg-teal-1:hover{background-color:var(--teal-1)}.hover-bg-teal-2:hover{background-color:var(--teal-2)}.hover-bg-teal-3:hover{background-color:var(--teal-3)}.hover-bg-teal-4:hover{background-color:var(--teal-4)}.hover-bg-teal-5:hover{background-color:var(--teal-5)}.hover-bg-teal-6:hover{background-color:var(--teal-6)}.hover-bg-teal-7:hover{background-color:var(--teal-7)}.hover-bg-teal-8:hover{background-color:var(--teal-8)}.hover-bg-teal-9:hover{background-color:var(--teal-9)}.hover-bg-teal-10:hover{background-color:var(--teal-10)}.hover-bg-teal-11:hover{background-color:var(--teal-11)}.hover-bg-cyan-0:hover{background-color:var(--cyan-0)}.hover-bg-cyan-1:hover{background-color:var(--cyan-1)}.hover-bg-cyan-2:hover{background-color:var(--cyan-2)}.hover-bg-cyan-3:hover{background-color:var(--cyan-3)}.hover-bg-cyan-4:hover{background-color:var(--cyan-4)}.hover-bg-cyan-5:hover{background-color:var(--cyan-5)}.hover-bg-cyan-6:hover{background-color:var(--cyan-6)}.hover-bg-cyan-7:hover{background-color:var(--cyan-7)}.hover-bg-cyan-8:hover{background-color:var(--cyan-8)}.hover-bg-cyan-9:hover{background-color:var(--cyan-9)}.hover-bg-cyan-10:hover{background-color:var(--cyan-10)}.hover-bg-cyan-11:hover{background-color:var(--cyan-11)}.focus-overlay-tint-0:focus{color:var(--overlay-tint-0)}.focus-overlay-tint-1:focus{color:var(--overlay-tint-1)}.focus-overlay-tint-2:focus{color:var(--overlay-tint-2)}.focus-overlay-tint-3:focus{color:var(--overlay-tint-3)}.focus-overlay-tint-4:focus{color:var(--overlay-tint-4)}.focus-overlay-tint-5:focus{color:var(--overlay-tint-5)}.focus-overlay-tint-6:focus{color:var(--overlay-tint-6)}.focus-overlay-tint-7:focus{color:var(--overlay-tint-7)}.focus-overlay-tint-8:focus{color:var(--overlay-tint-8)}.focus-overlay-tint-9:focus{color:var(--overlay-tint-9)}.focus-overlay-tint-10:focus{color:var(--overlay-tint-10)}.focus-overlay-tint-11:focus{color:var(--overlay-tint-11)}.focus-overlay-shadow-0:focus{color:var(--overlay-shadow-0)}.focus-overlay-shadow-1:focus{color:var(--overlay-shadow-1)}.focus-overlay-shadow-2:focus{color:var(--overlay-shadow-2)}.focus-overlay-shadow-3:focus{color:var(--overlay-shadow-3)}.focus-overlay-shadow-4:focus{color:var(--overlay-shadow-4)}.focus-overlay-shadow-5:focus{color:var(--overlay-shadow-5)}.focus-overlay-shadow-6:focus{color:var(--overlay-shadow-6)}.focus-overlay-shadow-7:focus{color:var(--overlay-shadow-7)}.focus-overlay-shadow-8:focus{color:var(--overlay-shadow-8)}.focus-overlay-shadow-9:focus{color:var(--overlay-shadow-9)}.focus-overlay-shadow-10:focus{color:var(--overlay-shadow-10)}.focus-overlay-shadow-11:focus{color:var(--overlay-shadow-11)}.focus-gray-0:focus{color:var(--gray-0)}.focus-gray-1:focus{color:var(--gray-1)}.focus-gray-2:focus{color:var(--gray-2)}.focus-gray-3:focus{color:var(--gray-3)}.focus-gray-4:focus{color:var(--gray-4)}.focus-gray-5:focus{color:var(--gray-5)}.focus-gray-6:focus{color:var(--gray-6)}.focus-gray-7:focus{color:var(--gray-7)}.focus-gray-8:focus{color:var(--gray-8)}.focus-gray-9:focus{color:var(--gray-9)}.focus-gray-10:focus{color:var(--gray-10)}.focus-gray-11:focus{color:var(--gray-11)}.focus-slate-gray-0:focus{color:var(--slate-gray-0)}.focus-slate-gray-1:focus{color:var(--slate-gray-1)}.focus-slate-gray-2:focus{color:var(--slate-gray-2)}.focus-slate-gray-3:focus{color:var(--slate-gray-3)}.focus-slate-gray-4:focus{color:var(--slate-gray-4)}.focus-slate-gray-5:focus{color:var(--slate-gray-5)}.focus-slate-gray-6:focus{color:var(--slate-gray-6)}.focus-slate-gray-7:focus{color:var(--slate-gray-7)}.focus-slate-gray-8:focus{color:var(--slate-gray-8)}.focus-slate-gray-9:focus{color:var(--slate-gray-9)}.focus-slate-gray-10:focus{color:var(--slate-gray-10)}.focus-slate-gray-11:focus{color:var(--slate-gray-11)}.focus-blue-0:focus{color:var(--blue-0)}.focus-blue-1:focus{color:var(--blue-1)}.focus-blue-2:focus{color:var(--blue-2)}.focus-blue-3:focus{color:var(--blue-3)}.focus-blue-4:focus{color:var(--blue-4)}.focus-blue-5:focus{color:var(--blue-5)}.focus-blue-6:focus{color:var(--blue-6)}.focus-blue-7:focus{color:var(--blue-7)}.focus-blue-8:focus{color:var(--blue-8)}.focus-blue-9:focus{color:var(--blue-9)}.focus-blue-10:focus{color:var(--blue-10)}.focus-blue-11:focus{color:var(--blue-11)}.focus-indigo-0:focus{color:var(--indigo-0)}.focus-indigo-1:focus{color:var(--indigo-1)}.focus-indigo-2:focus{color:var(--indigo-2)}.focus-indigo-3:focus{color:var(--indigo-3)}.focus-indigo-4:focus{color:var(--indigo-4)}.focus-indigo-5:focus{color:var(--indigo-5)}.focus-indigo-6:focus{color:var(--indigo-6)}.focus-indigo-7:focus{color:var(--indigo-7)}.focus-indigo-8:focus{color:var(--indigo-8)}.focus-indigo-9:focus{color:var(--indigo-9)}.focus-indigo-10:focus{color:var(--indigo-10)}.focus-indigo-11:focus{color:var(--indigo-11)}.focus-violet-0:focus{color:var(--violet-0)}.focus-violet-1:focus{color:var(--violet-1)}.focus-violet-2:focus{color:var(--violet-2)}.focus-violet-3:focus{color:var(--violet-3)}.focus-violet-4:focus{color:var(--violet-4)}.focus-violet-5:focus{color:var(--violet-5)}.focus-violet-6:focus{color:var(--violet-6)}.focus-violet-7:focus{color:var(--violet-7)}.focus-violet-8:focus{color:var(--violet-8)}.focus-violet-9:focus{color:var(--violet-9)}.focus-violet-10:focus{color:var(--violet-10)}.focus-violet-11:focus{color:var(--violet-11)}.focus-magenta-0:focus{color:var(--magenta-0)}.focus-magenta-1:focus{color:var(--magenta-1)}.focus-magenta-2:focus{color:var(--magenta-2)}.focus-magenta-3:focus{color:var(--magenta-3)}.focus-magenta-4:focus{color:var(--magenta-4)}.focus-magenta-5:focus{color:var(--magenta-5)}.focus-magenta-6:focus{color:var(--magenta-6)}.focus-magenta-7:focus{color:var(--magenta-7)}.focus-magenta-8:focus{color:var(--magenta-8)}.focus-magenta-9:focus{color:var(--magenta-9)}.focus-magenta-10:focus{color:var(--magenta-10)}.focus-magenta-11:focus{color:var(--magenta-11)}.focus-red-0:focus{color:var(--red-0)}.focus-red-1:focus{color:var(--red-1)}.focus-red-2:focus{color:var(--red-2)}.focus-red-3:focus{color:var(--red-3)}.focus-red-4:focus{color:var(--red-4)}.focus-red-5:focus{color:var(--red-5)}.focus-red-6:focus{color:var(--red-6)}.focus-red-7:focus{color:var(--red-7)}.focus-red-8:focus{color:var(--red-8)}.focus-red-9:focus{color:var(--red-9)}.focus-red-10:focus{color:var(--red-10)}.focus-red-11:focus{color:var(--red-11)}.focus-red-orange-0:focus{color:var(--red-orange-0)}.focus-red-orange-1:focus{color:var(--red-orange-1)}.focus-red-orange-2:focus{color:var(--red-orange-2)}.focus-red-orange-3:focus{color:var(--red-orange-3)}.focus-red-orange-4:focus{color:var(--red-orange-4)}.focus-red-orange-5:focus{color:var(--red-orange-5)}.focus-red-orange-6:focus{color:var(--red-orange-6)}.focus-red-orange-7:focus{color:var(--red-orange-7)}.focus-red-orange-8:focus{color:var(--red-orange-8)}.focus-red-orange-9:focus{color:var(--red-orange-9)}.focus-red-orange-10:focus{color:var(--red-orange-10)}.focus-red-orange-11:focus{color:var(--red-orange-11)}.focus-orange-0:focus{color:var(--orange-0)}.focus-orange-1:focus{color:var(--orange-1)}.focus-orange-2:focus{color:var(--orange-2)}.focus-orange-3:focus{color:var(--orange-3)}.focus-orange-4:focus{color:var(--orange-4)}.focus-orange-5:focus{color:var(--orange-5)}.focus-orange-6:focus{color:var(--orange-6)}.focus-orange-7:focus{color:var(--orange-7)}.focus-orange-8:focus{color:var(--orange-8)}.focus-orange-9:focus{color:var(--orange-9)}.focus-orange-10:focus{color:var(--orange-10)}.focus-orange-11:focus{color:var(--orange-11)}.focus-gold-0:focus{color:var(--gold-0)}.focus-gold-1:focus{color:var(--gold-1)}.focus-gold-2:focus{color:var(--gold-2)}.focus-gold-3:focus{color:var(--gold-3)}.focus-gold-4:focus{color:var(--gold-4)}.focus-gold-5:focus{color:var(--gold-5)}.focus-gold-6:focus{color:var(--gold-6)}.focus-gold-7:focus{color:var(--gold-7)}.focus-gold-8:focus{color:var(--gold-8)}.focus-gold-9:focus{color:var(--gold-9)}.focus-gold-10:focus{color:var(--gold-10)}.focus-gold-11:focus{color:var(--gold-11)}.focus-yellow-0:focus{color:var(--yellow-0)}.focus-yellow-1:focus{color:var(--yellow-1)}.focus-yellow-2:focus{color:var(--yellow-2)}.focus-yellow-3:focus{color:var(--yellow-3)}.focus-yellow-4:focus{color:var(--yellow-4)}.focus-yellow-5:focus{color:var(--yellow-5)}.focus-yellow-6:focus{color:var(--yellow-6)}.focus-yellow-7:focus{color:var(--yellow-7)}.focus-yellow-8:focus{color:var(--yellow-8)}.focus-yellow-9:focus{color:var(--yellow-9)}.focus-yellow-10:focus{color:var(--yellow-10)}.focus-yellow-11:focus{color:var(--yellow-11)}.focus-green-0:focus{color:var(--green-0)}.focus-green-1:focus{color:var(--green-1)}.focus-green-2:focus{color:var(--green-2)}.focus-green-3:focus{color:var(--green-3)}.focus-green-4:focus{color:var(--green-4)}.focus-green-5:focus{color:var(--green-5)}.focus-green-6:focus{color:var(--green-6)}.focus-green-7:focus{color:var(--green-7)}.focus-green-8:focus{color:var(--green-8)}.focus-green-9:focus{color:var(--green-9)}.focus-green-10:focus{color:var(--green-10)}.focus-green-11:focus{color:var(--green-11)}.focus-teal-0:focus{color:var(--teal-0)}.focus-teal-1:focus{color:var(--teal-1)}.focus-teal-2:focus{color:var(--teal-2)}.focus-teal-3:focus{color:var(--teal-3)}.focus-teal-4:focus{color:var(--teal-4)}.focus-teal-5:focus{color:var(--teal-5)}.focus-teal-6:focus{color:var(--teal-6)}.focus-teal-7:focus{color:var(--teal-7)}.focus-teal-8:focus{color:var(--teal-8)}.focus-teal-9:focus{color:var(--teal-9)}.focus-teal-10:focus{color:var(--teal-10)}.focus-teal-11:focus{color:var(--teal-11)}.focus-cyan-0:focus{color:var(--cyan-0)}.focus-cyan-1:focus{color:var(--cyan-1)}.focus-cyan-2:focus{color:var(--cyan-2)}.focus-cyan-3:focus{color:var(--cyan-3)}.focus-cyan-4:focus{color:var(--cyan-4)}.focus-cyan-5:focus{color:var(--cyan-5)}.focus-cyan-6:focus{color:var(--cyan-6)}.focus-cyan-7:focus{color:var(--cyan-7)}.focus-cyan-8:focus{color:var(--cyan-8)}.focus-cyan-9:focus{color:var(--cyan-9)}.focus-cyan-10:focus{color:var(--cyan-10)}.focus-cyan-11:focus{color:var(--cyan-11)}.focus-bg-overlay-tint-0:focus{background-color:var(--overlay-tint-0)}.focus-bg-overlay-tint-1:focus{background-color:var(--overlay-tint-1)}.focus-bg-overlay-tint-2:focus{background-color:var(--overlay-tint-2)}.focus-bg-overlay-tint-3:focus{background-color:var(--overlay-tint-3)}.focus-bg-overlay-tint-4:focus{background-color:var(--overlay-tint-4)}.focus-bg-overlay-tint-5:focus{background-color:var(--overlay-tint-5)}.focus-bg-overlay-tint-6:focus{background-color:var(--overlay-tint-6)}.focus-bg-overlay-tint-7:focus{background-color:var(--overlay-tint-7)}.focus-bg-overlay-tint-8:focus{background-color:var(--overlay-tint-8)}.focus-bg-overlay-tint-9:focus{background-color:var(--overlay-tint-9)}.focus-bg-overlay-tint-10:focus{background-color:var(--overlay-tint-10)}.focus-bg-overlay-tint-11:focus{background-color:var(--overlay-tint-11)}.focus-bg-overlay-shadow-0:focus{background-color:var(--overlay-shadow-0)}.focus-bg-overlay-shadow-1:focus{background-color:var(--overlay-shadow-1)}.focus-bg-overlay-shadow-2:focus{background-color:var(--overlay-shadow-2)}.focus-bg-overlay-shadow-3:focus{background-color:var(--overlay-shadow-3)}.focus-bg-overlay-shadow-4:focus{background-color:var(--overlay-shadow-4)}.focus-bg-overlay-shadow-5:focus{background-color:var(--overlay-shadow-5)}.focus-bg-overlay-shadow-6:focus{background-color:var(--overlay-shadow-6)}.focus-bg-overlay-shadow-7:focus{background-color:var(--overlay-shadow-7)}.focus-bg-overlay-shadow-8:focus{background-color:var(--overlay-shadow-8)}.focus-bg-overlay-shadow-9:focus{background-color:var(--overlay-shadow-9)}.focus-bg-overlay-shadow-10:focus{background-color:var(--overlay-shadow-10)}.focus-bg-overlay-shadow-11:focus{background-color:var(--overlay-shadow-11)}.focus-bg-gray-0:focus{background-color:var(--gray-0)}.focus-bg-gray-1:focus{background-color:var(--gray-1)}.focus-bg-gray-2:focus{background-color:var(--gray-2)}.focus-bg-gray-3:focus{background-color:var(--gray-3)}.focus-bg-gray-4:focus{background-color:var(--gray-4)}.focus-bg-gray-5:focus{background-color:var(--gray-5)}.focus-bg-gray-6:focus{background-color:var(--gray-6)}.focus-bg-gray-7:focus{background-color:var(--gray-7)}.focus-bg-gray-8:focus{background-color:var(--gray-8)}.focus-bg-gray-9:focus{background-color:var(--gray-9)}.focus-bg-gray-10:focus{background-color:var(--gray-10)}.focus-bg-gray-11:focus{background-color:var(--gray-11)}.focus-bg-slate-gray-0:focus{background-color:var(--slate-gray-0)}.focus-bg-slate-gray-1:focus{background-color:var(--slate-gray-1)}.focus-bg-slate-gray-2:focus{background-color:var(--slate-gray-2)}.focus-bg-slate-gray-3:focus{background-color:var(--slate-gray-3)}.focus-bg-slate-gray-4:focus{background-color:var(--slate-gray-4)}.focus-bg-slate-gray-5:focus{background-color:var(--slate-gray-5)}.focus-bg-slate-gray-6:focus{background-color:var(--slate-gray-6)}.focus-bg-slate-gray-7:focus{background-color:var(--slate-gray-7)}.focus-bg-slate-gray-8:focus{background-color:var(--slate-gray-8)}.focus-bg-slate-gray-9:focus{background-color:var(--slate-gray-9)}.focus-bg-slate-gray-10:focus{background-color:var(--slate-gray-10)}.focus-bg-slate-gray-11:focus{background-color:var(--slate-gray-11)}.focus-bg-blue-0:focus{background-color:var(--blue-0)}.focus-bg-blue-1:focus{background-color:var(--blue-1)}.focus-bg-blue-2:focus{background-color:var(--blue-2)}.focus-bg-blue-3:focus{background-color:var(--blue-3)}.focus-bg-blue-4:focus{background-color:var(--blue-4)}.focus-bg-blue-5:focus{background-color:var(--blue-5)}.focus-bg-blue-6:focus{background-color:var(--blue-6)}.focus-bg-blue-7:focus{background-color:var(--blue-7)}.focus-bg-blue-8:focus{background-color:var(--blue-8)}.focus-bg-blue-9:focus{background-color:var(--blue-9)}.focus-bg-blue-10:focus{background-color:var(--blue-10)}.focus-bg-blue-11:focus{background-color:var(--blue-11)}.focus-bg-indigo-0:focus{background-color:var(--indigo-0)}.focus-bg-indigo-1:focus{background-color:var(--indigo-1)}.focus-bg-indigo-2:focus{background-color:var(--indigo-2)}.focus-bg-indigo-3:focus{background-color:var(--indigo-3)}.focus-bg-indigo-4:focus{background-color:var(--indigo-4)}.focus-bg-indigo-5:focus{background-color:var(--indigo-5)}.focus-bg-indigo-6:focus{background-color:var(--indigo-6)}.focus-bg-indigo-7:focus{background-color:var(--indigo-7)}.focus-bg-indigo-8:focus{background-color:var(--indigo-8)}.focus-bg-indigo-9:focus{background-color:var(--indigo-9)}.focus-bg-indigo-10:focus{background-color:var(--indigo-10)}.focus-bg-indigo-11:focus{background-color:var(--indigo-11)}.focus-bg-violet-0:focus{background-color:var(--violet-0)}.focus-bg-violet-1:focus{background-color:var(--violet-1)}.focus-bg-violet-2:focus{background-color:var(--violet-2)}.focus-bg-violet-3:focus{background-color:var(--violet-3)}.focus-bg-violet-4:focus{background-color:var(--violet-4)}.focus-bg-violet-5:focus{background-color:var(--violet-5)}.focus-bg-violet-6:focus{background-color:var(--violet-6)}.focus-bg-violet-7:focus{background-color:var(--violet-7)}.focus-bg-violet-8:focus{background-color:var(--violet-8)}.focus-bg-violet-9:focus{background-color:var(--violet-9)}.focus-bg-violet-10:focus{background-color:var(--violet-10)}.focus-bg-violet-11:focus{background-color:var(--violet-11)}.focus-bg-magenta-0:focus{background-color:var(--magenta-0)}.focus-bg-magenta-1:focus{background-color:var(--magenta-1)}.focus-bg-magenta-2:focus{background-color:var(--magenta-2)}.focus-bg-magenta-3:focus{background-color:var(--magenta-3)}.focus-bg-magenta-4:focus{background-color:var(--magenta-4)}.focus-bg-magenta-5:focus{background-color:var(--magenta-5)}.focus-bg-magenta-6:focus{background-color:var(--magenta-6)}.focus-bg-magenta-7:focus{background-color:var(--magenta-7)}.focus-bg-magenta-8:focus{background-color:var(--magenta-8)}.focus-bg-magenta-9:focus{background-color:var(--magenta-9)}.focus-bg-magenta-10:focus{background-color:var(--magenta-10)}.focus-bg-magenta-11:focus{background-color:var(--magenta-11)}.focus-bg-red-0:focus{background-color:var(--red-0)}.focus-bg-red-1:focus{background-color:var(--red-1)}.focus-bg-red-2:focus{background-color:var(--red-2)}.focus-bg-red-3:focus{background-color:var(--red-3)}.focus-bg-red-4:focus{background-color:var(--red-4)}.focus-bg-red-5:focus{background-color:var(--red-5)}.focus-bg-red-6:focus{background-color:var(--red-6)}.focus-bg-red-7:focus{background-color:var(--red-7)}.focus-bg-red-8:focus{background-color:var(--red-8)}.focus-bg-red-9:focus{background-color:var(--red-9)}.focus-bg-red-10:focus{background-color:var(--red-10)}.focus-bg-red-11:focus{background-color:var(--red-11)}.focus-bg-red-orange-0:focus{background-color:var(--red-orange-0)}.focus-bg-red-orange-1:focus{background-color:var(--red-orange-1)}.focus-bg-red-orange-2:focus{background-color:var(--red-orange-2)}.focus-bg-red-orange-3:focus{background-color:var(--red-orange-3)}.focus-bg-red-orange-4:focus{background-color:var(--red-orange-4)}.focus-bg-red-orange-5:focus{background-color:var(--red-orange-5)}.focus-bg-red-orange-6:focus{background-color:var(--red-orange-6)}.focus-bg-red-orange-7:focus{background-color:var(--red-orange-7)}.focus-bg-red-orange-8:focus{background-color:var(--red-orange-8)}.focus-bg-red-orange-9:focus{background-color:var(--red-orange-9)}.focus-bg-red-orange-10:focus{background-color:var(--red-orange-10)}.focus-bg-red-orange-11:focus{background-color:var(--red-orange-11)}.focus-bg-orange-0:focus{background-color:var(--orange-0)}.focus-bg-orange-1:focus{background-color:var(--orange-1)}.focus-bg-orange-2:focus{background-color:var(--orange-2)}.focus-bg-orange-3:focus{background-color:var(--orange-3)}.focus-bg-orange-4:focus{background-color:var(--orange-4)}.focus-bg-orange-5:focus{background-color:var(--orange-5)}.focus-bg-orange-6:focus{background-color:var(--orange-6)}.focus-bg-orange-7:focus{background-color:var(--orange-7)}.focus-bg-orange-8:focus{background-color:var(--orange-8)}.focus-bg-orange-9:focus{background-color:var(--orange-9)}.focus-bg-orange-10:focus{background-color:var(--orange-10)}.focus-bg-orange-11:focus{background-color:var(--orange-11)}.focus-bg-gold-0:focus{background-color:var(--gold-0)}.focus-bg-gold-1:focus{background-color:var(--gold-1)}.focus-bg-gold-2:focus{background-color:var(--gold-2)}.focus-bg-gold-3:focus{background-color:var(--gold-3)}.focus-bg-gold-4:focus{background-color:var(--gold-4)}.focus-bg-gold-5:focus{background-color:var(--gold-5)}.focus-bg-gold-6:focus{background-color:var(--gold-6)}.focus-bg-gold-7:focus{background-color:var(--gold-7)}.focus-bg-gold-8:focus{background-color:var(--gold-8)}.focus-bg-gold-9:focus{background-color:var(--gold-9)}.focus-bg-gold-10:focus{background-color:var(--gold-10)}.focus-bg-gold-11:focus{background-color:var(--gold-11)}.focus-bg-yellow-0:focus{background-color:var(--yellow-0)}.focus-bg-yellow-1:focus{background-color:var(--yellow-1)}.focus-bg-yellow-2:focus{background-color:var(--yellow-2)}.focus-bg-yellow-3:focus{background-color:var(--yellow-3)}.focus-bg-yellow-4:focus{background-color:var(--yellow-4)}.focus-bg-yellow-5:focus{background-color:var(--yellow-5)}.focus-bg-yellow-6:focus{background-color:var(--yellow-6)}.focus-bg-yellow-7:focus{background-color:var(--yellow-7)}.focus-bg-yellow-8:focus{background-color:var(--yellow-8)}.focus-bg-yellow-9:focus{background-color:var(--yellow-9)}.focus-bg-yellow-10:focus{background-color:var(--yellow-10)}.focus-bg-yellow-11:focus{background-color:var(--yellow-11)}.focus-bg-green-0:focus{background-color:var(--green-0)}.focus-bg-green-1:focus{background-color:var(--green-1)}.focus-bg-green-2:focus{background-color:var(--green-2)}.focus-bg-green-3:focus{background-color:var(--green-3)}.focus-bg-green-4:focus{background-color:var(--green-4)}.focus-bg-green-5:focus{background-color:var(--green-5)}.focus-bg-green-6:focus{background-color:var(--green-6)}.focus-bg-green-7:focus{background-color:var(--green-7)}.focus-bg-green-8:focus{background-color:var(--green-8)}.focus-bg-green-9:focus{background-color:var(--green-9)}.focus-bg-green-10:focus{background-color:var(--green-10)}.focus-bg-green-11:focus{background-color:var(--green-11)}.focus-bg-teal-0:focus{background-color:var(--teal-0)}.focus-bg-teal-1:focus{background-color:var(--teal-1)}.focus-bg-teal-2:focus{background-color:var(--teal-2)}.focus-bg-teal-3:focus{background-color:var(--teal-3)}.focus-bg-teal-4:focus{background-color:var(--teal-4)}.focus-bg-teal-5:focus{background-color:var(--teal-5)}.focus-bg-teal-6:focus{background-color:var(--teal-6)}.focus-bg-teal-7:focus{background-color:var(--teal-7)}.focus-bg-teal-8:focus{background-color:var(--teal-8)}.focus-bg-teal-9:focus{background-color:var(--teal-9)}.focus-bg-teal-10:focus{background-color:var(--teal-10)}.focus-bg-teal-11:focus{background-color:var(--teal-11)}.focus-bg-cyan-0:focus{background-color:var(--cyan-0)}.focus-bg-cyan-1:focus{background-color:var(--cyan-1)}.focus-bg-cyan-2:focus{background-color:var(--cyan-2)}.focus-bg-cyan-3:focus{background-color:var(--cyan-3)}.focus-bg-cyan-4:focus{background-color:var(--cyan-4)}.focus-bg-cyan-5:focus{background-color:var(--cyan-5)}.focus-bg-cyan-6:focus{background-color:var(--cyan-6)}.focus-bg-cyan-7:focus{background-color:var(--cyan-7)}.focus-bg-cyan-8:focus{background-color:var(--cyan-8)}.focus-bg-cyan-9:focus{background-color:var(--cyan-9)}.focus-bg-cyan-10:focus{background-color:var(--cyan-10)}.focus-bg-cyan-11:focus{background-color:var(--cyan-11)}.p0{padding:var(--spacing-0,0)}.p1{padding:var(--spacing-1,2px)}.p2{padding:var(--spacing-2,4px)}.p3{padding:var(--spacing-3,8px)}.p4{padding:var(--spacing-4,16px)}.p5{padding:var(--spacing-5,32px)}.p6{padding:var(--spacing-6,64px)}.p7{padding:var(--spacing-7,128px)}.p8{padding:var(--spacing-8,256px)}.p9{padding:var(--spacing-9,512px)}.pl0{padding-left:var(--spacing-0,0)}.pl1{padding-left:var(--spacing-1,2px)}.pl2{padding-left:var(--spacing-2,4px)}.pl3{padding-left:var(--spacing-3,8px)}.pl4{padding-left:var(--spacing-4,16px)}.pl5{padding-left:var(--spacing-5,32px)}.pl6{padding-left:var(--spacing-6,64px)}.pl7{padding-left:var(--spacing-7,128px)}.pl8{padding-left:var(--spacing-8,256px)}.pl9{padding-left:var(--spacing-9,512px)}.pr0{padding-right:var(--spacing-0,0)}.pr1{padding-right:var(--spacing-1,2px)}.pr2{padding-right:var(--spacing-2,4px)}.pr3{padding-right:var(--spacing-3,8px)}.pr4{padding-right:var(--spacing-4,16px)}.pr5{padding-right:var(--spacing-5,32px)}.pr6{padding-right:var(--spacing-6,64px)}.pr7{padding-right:var(--spacing-7,128px)}.pr8{padding-right:var(--spacing-8,256px)}.pr9{padding-right:var(--spacing-9,512px)}.pb0{padding-bottom:var(--spacing-0,0)}.pb1{padding-bottom:var(--spacing-1,2px)}.pb2{padding-bottom:var(--spacing-2,4px)}.pb3{padding-bottom:var(--spacing-3,8px)}.pb4{padding-bottom:var(--spacing-4,16px)}.pb5{padding-bottom:var(--spacing-5,32px)}.pb6{padding-bottom:var(--spacing-6,64px)}.pb7{padding-bottom:var(--spacing-7,128px)}.pb8{padding-bottom:var(--spacing-8,256px)}.pb9{padding-bottom:var(--spacing-9,512px)}.pt0{padding-top:var(--spacing-0,0)}.pt1{padding-top:var(--spacing-1,2px)}.pt2{padding-top:var(--spacing-2,4px)}.pt3{padding-top:var(--spacing-3,8px)}.pt4{padding-top:var(--spacing-4,16px)}.pt5{padding-top:var(--spacing-5,32px)}.pt6{padding-top:var(--spacing-6,64px)}.pt7{padding-top:var(--spacing-7,128px)}.pt8{padding-top:var(--spacing-8,256px)}.pt9{padding-top:var(--spacing-9,512px)}.py0{padding-top:var(--spacing-0,0);padding-bottom:var(--spacing-0,0)}.py1{padding-top:var(--spacing-1,2px);padding-bottom:var(--spacing-1,2px)}.py2{padding-top:var(--spacing-2,4px);padding-bottom:var(--spacing-2,4px)}.py3{padding-top:var(--spacing-3,8px);padding-bottom:var(--spacing-3,8px)}.py4{padding-top:var(--spacing-4,16px);padding-bottom:var(--spacing-4,16px)}.py5{padding-top:var(--spacing-5,32px);padding-bottom:var(--spacing-5,32px)}.py6{padding-top:var(--spacing-6,64px);padding-bottom:var(--spacing-6,64px)}.py7{padding-top:var(--spacing-7,128px);padding-bottom:var(--spacing-7,128px)}.py8{padding-top:var(--spacing-8,256px);padding-bottom:var(--spacing-8,256px)}.py9{padding-top:var(--spacing-9,512px);padding-bottom:var(--spacing-9,512px)}.px0{padding-left:var(--spacing-0,0);padding-right:var(--spacing-0,0)}.px1{padding-left:var(--spacing-1,4px);padding-right:var(--spacing-1,4px)}.px2{padding-left:var(--spacing-2,4px);padding-right:var(--spacing-2,4px)}.px3{padding-left:var(--spacing-3,8px);padding-right:var(--spacing-3,8px)}.px4{padding-left:var(--spacing-4,16px);padding-right:var(--spacing-4,16px)}.px5{padding-left:var(--spacing-5,32px);padding-right:var(--spacing-5,32px)}.px6{padding-left:var(--spacing-6,64px);padding-right:var(--spacing-6,64px)}.px7{padding-left:var(--spacing-7,128px);padding-right:var(--spacing-7,128px)}.px8{padding-left:var(--spacing-8,256px);padding-right:var(--spacing-8,256px)}.px9{padding-left:var(--spacing-9,512px);padding-right:var(--spacing-9,512px)}.m0{margin:var(--spacing-0,0)}.m1{margin:var(--spacing-1,2px)}.m2{margin:var(--spacing-2,4px)}.m3{margin:var(--spacing-3,8px)}.m4{margin:var(--spacing-4,16px)}.m5{margin:var(--spacing-5,32px)}.m6{margin:var(--spacing-6,64px)}.m7{margin:var(--spacing-7,128px)}.m8{margin:var(--spacing-8,256px)}.m9{margin:var(--spacing-9,512px)}.ml0{margin-left:var(--spacing-0,0)}.ml1{margin-left:var(--spacing-1,2px)}.ml2{margin-left:var(--spacing-2,4px)}.ml3{margin-left:var(--spacing-3,8px)}.ml4{margin-left:var(--spacing-4,16px)}.ml5{margin-left:var(--spacing-5,32px)}.ml6{margin-left:var(--spacing-6,64px)}.ml7{margin-left:var(--spacing-7,128px)}.ml8{margin-left:var(--spacing-8,256px)}.ml9{margin-left:var(--spacing-9,512px)}.mr0{margin-right:var(--spacing-0,0)}.mr1{margin-right:var(--spacing-1,2px)}.mr2{margin-right:var(--spacing-2,4px)}.mr3{margin-right:var(--spacing-3,8px)}.mr4{margin-right:var(--spacing-4,16px)}.mr5{margin-right:var(--spacing-5,32px)}.mr6{margin-right:var(--spacing-6,64px)}.mr7{margin-right:var(--spacing-7,128px)}.mr8{margin-right:var(--spacing-8,256px)}.mr9{margin-right:var(--spacing-9,512px)}.mb0{margin-bottom:var(--spacing-0,0)}.mb1{margin-bottom:var(--spacing-1,4px)}.mb2{margin-bottom:var(--spacing-2,4px)}.mb3{margin-bottom:var(--spacing-3,8px)}.mb4{margin-bottom:var(--spacing-4,16px)}.mb5{margin-bottom:var(--spacing-5,32px)}.mb6{margin-bottom:var(--spacing-6,64px)}.mb7{margin-bottom:var(--spacing-7,128px)}.mb8{margin-bottom:var(--spacing-8,256px)}.mb9{margin-bottom:var(--spacing-9,512px)}.mt0{margin-top:var(--spacing-0,0)}.mt1{margin-top:var(--spacing-1,2px)}.mt2{margin-top:var(--spacing-2,4px)}.mt3{margin-top:var(--spacing-3,8px)}.mt4{margin-top:var(--spacing-4,16px)}.mt5{margin-top:var(--spacing-5,32px)}.mt6{margin-top:var(--spacing-6,64px)}.mt7{margin-top:var(--spacing-7,128px)}.mt8{margin-top:var(--spacing-8,256px)}.mt9{margin-top:var(--spacing-9,512px)}.my0{margin-top:var(--spacing-0,0);margin-bottom:var(--spacing-0,0)}.my1{margin-top:var(--spacing-1,4px);margin-bottom:var(--spacing-1,4px)}.my2{margin-top:var(--spacing-2,4px);margin-bottom:var(--spacing-2,4px)}.my3{margin-top:var(--spacing-3,8px);margin-bottom:var(--spacing-3,8px)}.my4{margin-top:var(--spacing-4,16px);margin-bottom:var(--spacing-4,16px)}.my5{margin-top:var(--spacing-5,32px);margin-bottom:var(--spacing-5,32px)}.my6{margin-top:var(--spacing-6,64px);margin-bottom:var(--spacing-6,64px)}.my7{margin-top:var(--spacing-7,128px);margin-bottom:var(--spacing-7,128px)}.my8{margin-top:var(--spacing-8,256px);margin-bottom:var(--spacing-8,256px)}.my9{margin-top:var(--spacing-9,512px);margin-bottom:var(--spacing-9,512px)}.mx0{margin-left:var(--spacing-0,0);margin-right:var(--spacing-0,0)}.mx1{margin-left:var(--spacing-1,2px);margin-right:var(--spacing-1,2px)}.mx2{margin-left:var(--spacing-2,4px);margin-right:var(--spacing-2,4px)}.mx3{margin-left:var(--spacing-3,8px);margin-right:var(--spacing-3,8px)}.mx4{margin-left:var(--spacing-4,16px);margin-right:var(--spacing-4,16px)}.mx5{margin-left:var(--spacing-5,32px);margin-right:var(--spacing-5,32px)}.mx6{margin-left:var(--spacing-6,64px);margin-right:var(--spacing-6,64px)}.mx7{margin-left:var(--spacing-7,128px);margin-right:var(--spacing-7,128px)}.mx8{margin-left:var(--spacing-8,256px);margin-right:var(--spacing-8,256px)}.mx9{margin-left:var(--spacing-9,512px);margin-right:var(--spacing-9,512px)}@container (min-width:30em){.p0-s{padding:var(--spacing-0,0)}.p1-s{padding:var(--spacing-1,2px)}.p2-s{padding:var(--spacing-2,4px)}.p3-s{padding:var(--spacing-3,8px)}.p4-s{padding:var(--spacing-4,16px)}.p5-s{padding:var(--spacing-5,32px)}.p6-s{padding:var(--spacing-6,64px)}.p7-s{padding:var(--spacing-7,128px)}.p8-s{padding:var(--spacing-8,256px)}.p9-s{padding:var(--spacing-9,512px)}.pl0-s{padding-left:var(--spacing-0,0)}.pl1-s{padding-left:var(--spacing-1,2px)}.pl2-s{padding-left:var(--spacing-2,4px)}.pl3-s{padding-left:var(--spacing-3,8px)}.pl4-s{padding-left:var(--spacing-4,16px)}.pl5-s{padding-left:var(--spacing-5,32px)}.pl6-s{padding-left:var(--spacing-6,64px)}.pl7-s{padding-left:var(--spacing-7,128px)}.pl8-s{padding-left:var(--spacing-8,256px)}.pl9-s{padding-left:var(--spacing-9,512px)}.pr0-s{padding-right:var(--spacing-0,0)}.pr1-s{padding-right:var(--spacing-1,2px)}.pr2-s{padding-right:var(--spacing-2,4px)}.pr3-s{padding-right:var(--spacing-3,8px)}.pr4-s{padding-right:var(--spacing-4,16px)}.pr5-s{padding-right:var(--spacing-5,32px)}.pr6-s{padding-right:var(--spacing-6,64px)}.pr7-s{padding-right:var(--spacing-7,128px)}.pr8-s{padding-right:var(--spacing-8,256px)}.pr9-s{padding-right:var(--spacing-9,512px)}.pb0-s{padding-bottom:var(--spacing-0,0)}.pb1-s{padding-bottom:var(--spacing-1,2px)}.pb2-s{padding-bottom:var(--spacing-2,4px)}.pb3-s{padding-bottom:var(--spacing-3,8px)}.pb4-s{padding-bottom:var(--spacing-4,16px)}.pb5-s{padding-bottom:var(--spacing-5,32px)}.pb6-s{padding-bottom:var(--spacing-6,64px)}.pb7-s{padding-bottom:var(--spacing-7,128px)}.pb8-s{padding-bottom:var(--spacing-8,256px)}.pb9-s{padding-bottom:var(--spacing-9,512px)}.pt0-s{padding-top:var(--spacing-0,0)}.pt1-s{padding-top:var(--spacing-1,2px)}.pt2-s{padding-top:var(--spacing-2,4px)}.pt3-s{padding-top:var(--spacing-3,8px)}.pt4-s{padding-top:var(--spacing-4,16px)}.pt5-s{padding-top:var(--spacing-5,32px)}.pt6-s{padding-top:var(--spacing-6,64px)}.pt7-s{padding-top:var(--spacing-7,128px)}.pt8-s{padding-top:var(--spacing-8,256px)}.pt9-s{padding-top:var(--spacing-9,512px)}.py0-s{padding-top:var(--spacing-0,0);padding-bottom:var(--spacing-0,0)}.py1-s{padding-top:var(--spacing-1,2px);padding-bottom:var(--spacing-1,2px)}.py2-s{padding-top:var(--spacing-2,4px);padding-bottom:var(--spacing-2,4px)}.py3-s{padding-top:var(--spacing-3,8px);padding-bottom:var(--spacing-3,8px)}.py4-s{padding-top:var(--spacing-4,16px);padding-bottom:var(--spacing-4,16px)}.py5-s{padding-top:var(--spacing-5,32px);padding-bottom:var(--spacing-5,32px)}.py6-s{padding-top:var(--spacing-6,64px);padding-bottom:var(--spacing-6,64px)}.py7-s{padding-top:var(--spacing-7,128px);padding-bottom:var(--spacing-7,128px)}.py8-s{padding-top:var(--spacing-8,256px);padding-bottom:var(--spacing-8,256px)}.py9-s{padding-top:var(--spacing-9,512px);padding-bottom:var(--spacing-9,512px)}.px0-s{padding-left:var(--spacing-0,0);padding-right:var(--spacing-0,0)}.px1-s{padding-left:var(--spacing-1,2px);padding-right:var(--spacing-1,2px)}.px2-s{padding-left:var(--spacing-2,4px);padding-right:var(--spacing-2,4px)}.px3-s{padding-left:var(--spacing-3,8px);padding-right:var(--spacing-3,8px)}.px4-s{padding-left:var(--spacing-4,16px);padding-right:var(--spacing-4,16px)}.px5-s{padding-left:var(--spacing-5,32px);padding-right:var(--spacing-5,32px)}.px6-s{padding-left:var(--spacing-6,64px);padding-right:var(--spacing-6,64px)}.px7-s{padding-left:var(--spacing-7,128px);padding-right:var(--spacing-7,128px)}.px8-s{padding-left:var(--spacing-8,256px);padding-right:var(--spacing-8,256px)}.px9-s{padding-left:var(--spacing-9,512px);padding-right:var(--spacing-9,512px)}.m0-s{margin:var(--spacing-0,0)}.m1-s{margin:var(--spacing-1,2px)}.m2-s{margin:var(--spacing-2,4px)}.m3-s{margin:var(--spacing-3,8px)}.m4-s{margin:var(--spacing-4,16px)}.m5-s{margin:var(--spacing-5,32px)}.m6-s{margin:var(--spacing-6,64px)}.m7-s{margin:var(--spacing-7,128px)}.m8-s{margin:var(--spacing-8,256px)}.m9-s{margin:var(--spacing-9,512px)}.ml0-s{margin-left:var(--spacing-0,0)}.ml1-s{margin-left:var(--spacing-1,2px)}.ml2-s{margin-left:var(--spacing-2,4px)}.ml3-s{margin-left:var(--spacing-3,8px)}.ml4-s{margin-left:var(--spacing-4,16px)}.ml5-s{margin-left:var(--spacing-5,32px)}.ml6-s{margin-left:var(--spacing-6,64px)}.ml7-s{margin-left:var(--spacing-7,128px)}.ml8-s{margin-left:var(--spacing-8,256px)}.ml9-s{margin-left:var(--spacing-9,512px)}.mr0-s{margin-right:var(--spacing-0,0)}.mr1-s{margin-right:var(--spacing-1,2px)}.mr2-s{margin-right:var(--spacing-2,4px)}.mr3-s{margin-right:var(--spacing-3,8px)}.mr4-s{margin-right:var(--spacing-4,16px)}.mr5-s{margin-right:var(--spacing-5,32px)}.mr6-s{margin-right:var(--spacing-6,64px)}.mr7-s{margin-right:var(--spacing-7,128px)}.mr8-s{margin-right:var(--spacing-8,256px)}.mr9-s{margin-right:var(--spacing-9,512px)}.mb0-s{margin-bottom:var(--spacing-0,0)}.mb1-s{margin-bottom:var(--spacing-1,2px)}.mb2-s{margin-bottom:var(--spacing-2,4px)}.mb3-s{margin-bottom:var(--spacing-3,8px)}.mb4-s{margin-bottom:var(--spacing-4,16px)}.mb5-s{margin-bottom:var(--spacing-5,32px)}.mb6-s{margin-bottom:var(--spacing-6,64px)}.mb7-s{margin-bottom:var(--spacing-7,128px)}.mb8-s{margin-bottom:var(--spacing-8,256px)}.mb9-s{margin-bottom:var(--spacing-9,512px)}.mt0-s{margin-top:var(--spacing-0,0)}.mt1-s{margin-top:var(--spacing-1,2px)}.mt2-s{margin-top:var(--spacing-2,4px)}.mt3-s{margin-top:var(--spacing-3,8px)}.mt4-s{margin-top:var(--spacing-4,16px)}.mt5-s{margin-top:var(--spacing-5,32px)}.mt6-s{margin-top:var(--spacing-6,64px)}.mt7-s{margin-top:var(--spacing-7,128px)}.mt8-s{margin-top:var(--spacing-8,256px)}.mt9-s{margin-top:var(--spacing-9,512px)}.my0-s{margin-top:var(--spacing-0,0);margin-bottom:var(--spacing-0,0)}.my1-s{margin-top:var(--spacing-1,2px);margin-bottom:var(--spacing-1,2px)}.my2-s{margin-top:var(--spacing-2,4px);margin-bottom:var(--spacing-2,4px)}.my3-s{margin-top:var(--spacing-3,8px);margin-bottom:var(--spacing-3,8px)}.my4-s{margin-top:var(--spacing-4,16px);margin-bottom:var(--spacing-4,16px)}.my5-s{margin-top:var(--spacing-5,32px);margin-bottom:var(--spacing-5,32px)}.my6-s{margin-top:var(--spacing-6,64px);margin-bottom:var(--spacing-6,64px)}.my7-s{margin-top:var(--spacing-7,128px);margin-bottom:var(--spacing-7,128px)}.my8-s{margin-top:var(--spacing-8,256px);margin-bottom:var(--spacing-8,256px)}.my9-s{margin-top:var(--spacing-9,512px);margin-bottom:var(--spacing-9,512px)}.mx0-s{margin-left:var(--spacing-0,0);margin-right:var(--spacing-0,0)}.mx1-s{margin-left:var(--spacing-1,4px);margin-right:var(--spacing-1,4px)}.mx2-s{margin-left:var(--spacing-2,4px);margin-right:var(--spacing-2,4px)}.mx3-s{margin-left:var(--spacing-3,8px);margin-right:var(--spacing-3,8px)}.mx4-s{margin-left:var(--spacing-4,16px);margin-right:var(--spacing-4,16px)}.mx5-s{margin-left:var(--spacing-5,32px);margin-right:var(--spacing-5,32px)}.mx6-s{margin-left:var(--spacing-6,64px);margin-right:var(--spacing-6,64px)}.mx7-s{margin-left:var(--spacing-7,128px);margin-right:var(--spacing-7,128px)}.mx8-s{margin-left:var(--spacing-8,256px);margin-right:var(--spacing-8,256px)}.mx9-s{margin-left:var(--spacing-9,512px);margin-right:var(--spacing-9,512px)}}@container (min-width:48em){.p0-m{padding:var(--spacing-0,0)}.p1-m{padding:var(--spacing-1,2px)}.p2-m{padding:var(--spacing-2,4px)}.p3-m{padding:var(--spacing-3,8px)}.p4-m{padding:var(--spacing-4,16px)}.p5-m{padding:var(--spacing-5,32px)}.p6-m{padding:var(--spacing-6,64px)}.p7-m{padding:var(--spacing-7,128px)}.p8-m{padding:var(--spacing-8,256px)}.p9-m{padding:var(--spacing-9,512px)}.pl0-m{padding-left:var(--spacing-0,0)}.pl1-m{padding-left:var(--spacing-1,2px)}.pl2-m{padding-left:var(--spacing-2,4px)}.pl3-m{padding-left:var(--spacing-3,8px)}.pl4-m{padding-left:var(--spacing-4,16px)}.pl5-m{padding-left:var(--spacing-5,32px)}.pl6-m{padding-left:var(--spacing-6,64px)}.pl7-m{padding-left:var(--spacing-7,128px)}.pl8-m{padding-left:var(--spacing-8,256px)}.pl9-m{padding-left:var(--spacing-9,512px)}.pr0-m{padding-right:var(--spacing-0,0)}.pr1-m{padding-right:var(--spacing-1,2px)}.pr2-m{padding-right:var(--spacing-2,4px)}.pr3-m{padding-right:var(--spacing-3,8px)}.pr4-m{padding-right:var(--spacing-4,16px)}.pr5-m{padding-right:var(--spacing-5,32px)}.pr6-m{padding-right:var(--spacing-6,64px)}.pr7-m{padding-right:var(--spacing-7,128px)}.pr8-m{padding-right:var(--spacing-8,256px)}.pr9-m{padding-right:var(--spacing-9,512px)}.pb0-m{padding-bottom:var(--spacing-0,0)}.pb1-m{padding-bottom:var(--spacing-1,2px)}.pb2-m{padding-bottom:var(--spacing-2,4px)}.pb3-m{padding-bottom:var(--spacing-3,8px)}.pb4-m{padding-bottom:var(--spacing-4,16px)}.pb5-m{padding-bottom:var(--spacing-5,32px)}.pb6-m{padding-bottom:var(--spacing-6,64px)}.pb7-m{padding-bottom:var(--spacing-7,128px)}.pb8-m{padding-bottom:var(--spacing-8,256px)}.pb9-m{padding-bottom:var(--spacing-9,512px)}.pt0-m{padding-top:var(--spacing-0,0)}.pt1-m{padding-top:var(--spacing-1,2px)}.pt2-m{padding-top:var(--spacing-2,4px)}.pt3-m{padding-top:var(--spacing-3,8px)}.pt4-m{padding-top:var(--spacing-4,16px)}.pt5-m{padding-top:var(--spacing-5,32px)}.pt6-m{padding-top:var(--spacing-6,64px)}.pt7-m{padding-top:var(--spacing-7,128px)}.pt8-m{padding-top:var(--spacing-8,256px)}.pt9-m{padding-top:var(--spacing-9,512px)}.py0-m{padding-top:var(--spacing-0,0);padding-bottom:var(--spacing-0,0)}.py1-m{padding-top:var(--spacing-1,2px);padding-bottom:var(--spacing-1,2px)}.py2-m{padding-top:var(--spacing-2,4px);padding-bottom:var(--spacing-2,4px)}.py3-m{padding-top:var(--spacing-3,8px);padding-bottom:var(--spacing-3,8px)}.py4-m{padding-top:var(--spacing-4,16px);padding-bottom:var(--spacing-4,16px)}.py5-m{padding-top:var(--spacing-5,32px);padding-bottom:var(--spacing-5,32px)}.py6-m{padding-top:var(--spacing-6,64px);padding-bottom:var(--spacing-6,64px)}.py7-m{padding-top:var(--spacing-7,128px);padding-bottom:var(--spacing-7,128px)}.py8-m{padding-top:var(--spacing-8,256px);padding-bottom:var(--spacing-8,256px)}.py9-m{padding-top:var(--spacing-9,512px);padding-bottom:var(--spacing-9,512px)}.px0-m{padding-left:var(--spacing-0,0);padding-right:var(--spacing-0,0)}.px1-m{padding-left:var(--spacing-1,2px);padding-right:var(--spacing-1,2px)}.px2-m{padding-left:var(--spacing-2,4px);padding-right:var(--spacing-2,4px)}.px3-m{padding-left:var(--spacing-3,8px);padding-right:var(--spacing-3,8px)}.px4-m{padding-left:var(--spacing-4,16px);padding-right:var(--spacing-4,16px)}.px5-m{padding-left:var(--spacing-5,32px);padding-right:var(--spacing-5,32px)}.px6-m{padding-left:var(--spacing-6,64px);padding-right:var(--spacing-6,64px)}.px7-m{padding-left:var(--spacing-7,128px);padding-right:var(--spacing-7,128px)}.px8-m{padding-left:var(--spacing-8,256px);padding-right:var(--spacing-8,256px)}.px9-m{padding-left:var(--spacing-9,512px);padding-right:var(--spacing-9,512px)}.m0-m{margin:var(--spacing-0,0)}.m1-m{margin:var(--spacing-1,2px)}.m2-m{margin:var(--spacing-2,4px)}.m3-m{margin:var(--spacing-3,8px)}.m4-m{margin:var(--spacing-4,16px)}.m5-m{margin:var(--spacing-5,32px)}.m6-m{margin:var(--spacing-6,64px)}.m7-m{margin:var(--spacing-7,128px)}.m8-m{margin:var(--spacing-8,256px)}.m9-m{margin:var(--spacing-9,512px)}.ml0-m{margin-left:var(--spacing-0,0)}.ml1-m{margin-left:var(--spacing-1,2px)}.ml2-m{margin-left:var(--spacing-2,4px)}.ml3-m{margin-left:var(--spacing-3,8px)}.ml4-m{margin-left:var(--spacing-4,16px)}.ml5-m{margin-left:var(--spacing-5,32px)}.ml6-m{margin-left:var(--spacing-6,64px)}.ml7-m{margin-left:var(--spacing-7,128px)}.ml8-m{margin-left:var(--spacing-8,256px)}.ml9-m{margin-left:var(--spacing-9,512px)}.mr0-m{margin-right:var(--spacing-0,0)}.mr1-m{margin-right:var(--spacing-1,4px)}.mr2-m{margin-right:var(--spacing-2,4px)}.mr3-m{margin-right:var(--spacing-3,8px)}.mr4-m{margin-right:var(--spacing-4,16px)}.mr5-m{margin-right:var(--spacing-5,32px)}.mr6-m{margin-right:var(--spacing-6,64px)}.mr7-m{margin-right:var(--spacing-7,128px)}.mr8-m{margin-right:var(--spacing-8,256px)}.mr9-m{margin-right:var(--spacing-9,512px)}.mb0-m{margin-bottom:var(--spacing-0,0)}.mb1-m{margin-bottom:var(--spacing-1,2px)}.mb2-m{margin-bottom:var(--spacing-2,4px)}.mb3-m{margin-bottom:var(--spacing-3,8px)}.mb4-m{margin-bottom:var(--spacing-4,16px)}.mb5-m{margin-bottom:var(--spacing-5,32px)}.mb6-m{margin-bottom:var(--spacing-6,64px)}.mb7-m{margin-bottom:var(--spacing-7,128px)}.mb8-m{margin-bottom:var(--spacing-8,256px)}.mb9-m{margin-bottom:var(--spacing-9,512px)}.mt0-m{margin-top:var(--spacing-0,0)}.mt1-m{margin-top:var(--spacing-1,2px)}.mt2-m{margin-top:var(--spacing-2,4px)}.mt3-m{margin-top:var(--spacing-3,8px)}.mt4-m{margin-top:var(--spacing-4,16px)}.mt5-m{margin-top:var(--spacing-5,32px)}.mt6-m{margin-top:var(--spacing-6,64px)}.mt7-m{margin-top:var(--spacing-7,128px)}.mt8-m{margin-top:var(--spacing-8,256px)}.mt9-m{margin-top:var(--spacing-9,512px)}.my0-m{margin-top:var(--spacing-0,0);margin-bottom:var(--spacing-0,0)}.my1-m{margin-top:var(--spacing-1,2px);margin-bottom:var(--spacing-1,2px)}.my2-m{margin-top:var(--spacing-2,4px);margin-bottom:var(--spacing-2,4px)}.my3-m{margin-top:var(--spacing-3,8px);margin-bottom:var(--spacing-3,8px)}.my4-m{margin-top:var(--spacing-4,16px);margin-bottom:var(--spacing-4,16px)}.my5-m{margin-top:var(--spacing-5,32px);margin-bottom:var(--spacing-5,32px)}.my6-m{margin-top:var(--spacing-6,64px);margin-bottom:var(--spacing-6,64px)}.my7-m{margin-top:var(--spacing-7,128px);margin-bottom:var(--spacing-7,128px)}.my8-m{margin-top:var(--spacing-8,256px);margin-bottom:var(--spacing-8,256px)}.my9-m{margin-top:var(--spacing-9,512px);margin-bottom:var(--spacing-9,512px)}.mx0-m{margin-left:var(--spacing-0,0);margin-right:var(--spacing-0,0)}.mx1-m{margin-left:var(--spacing-1,2px);margin-right:var(--spacing-1,2px)}.mx2-m{margin-left:var(--spacing-2,4px);margin-right:var(--spacing-2,4px)}.mx3-m{margin-left:var(--spacing-3,8px);margin-right:var(--spacing-3,8px)}.mx4-m{margin-left:var(--spacing-4,16px);margin-right:var(--spacing-4,16px)}.mx5-m{margin-left:var(--spacing-5,32px);margin-right:var(--spacing-5,32px)}.mx6-m{margin-left:var(--spacing-6,64px);margin-right:var(--spacing-6,64px)}.mx7-m{margin-left:var(--spacing-7,128px);margin-right:var(--spacing-7,128px)}.mx8-m{margin-left:var(--spacing-8,256px);margin-right:var(--spacing-8,256px)}.mx9-m{margin-left:var(--spacing-9,512px);margin-right:var(--spacing-9,512px)}}@container (min-width:64em){.p0-l{padding:var(--spacing-0,0)}.p1-l{padding:var(--spacing-1,2px)}.p2-l{padding:var(--spacing-2,4px)}.p3-l{padding:var(--spacing-3,8px)}.p4-l{padding:var(--spacing-4,16px)}.p5-l{padding:var(--spacing-5,32px)}.p6-l{padding:var(--spacing-6,64px)}.p7-l{padding:var(--spacing-7,128px)}.p8-l{padding:var(--spacing-8,256px)}.p9-l{padding:var(--spacing-9,512px)}.pl0-l{padding-left:var(--spacing-0,0)}.pl1-l{padding-left:var(--spacing-1,2px)}.pl2-l{padding-left:var(--spacing-2,4px)}.pl3-l{padding-left:var(--spacing-3,8px)}.pl4-l{padding-left:var(--spacing-4,16px)}.pl5-l{padding-left:var(--spacing-5,32px)}.pl6-l{padding-left:var(--spacing-6,64px)}.pl7-l{padding-left:var(--spacing-7,128px)}.pl8-l{padding-left:var(--spacing-8,256px)}.pl9-l{padding-left:var(--spacing-9,512px)}.pr0-l{padding-right:var(--spacing-0,0)}.pr1-l{padding-right:var(--spacing-1,2px)}.pr2-l{padding-right:var(--spacing-2,4px)}.pr3-l{padding-right:var(--spacing-3,8px)}.pr4-l{padding-right:var(--spacing-4,16px)}.pr5-l{padding-right:var(--spacing-5,32px)}.pr6-l{padding-right:var(--spacing-6,64px)}.pr7-l{padding-right:var(--spacing-7,128px)}.pr8-l{padding-right:var(--spacing-8,256px)}.pr9-l{padding-right:var(--spacing-9,512px)}.pb0-l{padding-bottom:var(--spacing-0,0)}.pb1-l{padding-bottom:var(--spacing-1,2px)}.pb2-l{padding-bottom:var(--spacing-2,4px)}.pb3-l{padding-bottom:var(--spacing-3,8px)}.pb4-l{padding-bottom:var(--spacing-4,16px)}.pb5-l{padding-bottom:var(--spacing-5,32px)}.pb6-l{padding-bottom:var(--spacing-6,64px)}.pb7-l{padding-bottom:var(--spacing-7,128px)}.pb8-l{padding-bottom:var(--spacing-8,256px)}.pb9-l{padding-bottom:var(--spacing-9,512px)}.pt0-l{padding-top:var(--spacing-0,0)}.pt1-l{padding-top:var(--spacing-1,2px)}.pt2-l{padding-top:var(--spacing-2,4px)}.pt3-l{padding-top:var(--spacing-3,8px)}.pt4-l{padding-top:var(--spacing-4,16px)}.pt5-l{padding-top:var(--spacing-5,32px)}.pt6-l{padding-top:var(--spacing-6,64px)}.pt7-l{padding-top:var(--spacing-7,128px)}.pt8-l{padding-top:var(--spacing-8,256px)}.pt9-l{padding-top:var(--spacing-9,512px)}.py0-l{padding-top:var(--spacing-0,0);padding-bottom:var(--spacing-0,0)}.py1-l{padding-top:var(--spacing-1,2px);padding-bottom:var(--spacing-1,2px)}.py2-l{padding-top:var(--spacing-2,4px);padding-bottom:var(--spacing-2,4px)}.py3-l{padding-top:var(--spacing-3,8px);padding-bottom:var(--spacing-3,8px)}.py4-l{padding-top:var(--spacing-4,16px);padding-bottom:var(--spacing-4,16px)}.py5-l{padding-top:var(--spacing-5,32px);padding-bottom:var(--spacing-5,32px)}.py6-l{padding-top:var(--spacing-6,64px);padding-bottom:var(--spacing-6,64px)}.py7-l{padding-top:var(--spacing-7,128px);padding-bottom:var(--spacing-7,128px)}.py8-l{padding-top:var(--spacing-8,256px);padding-bottom:var(--spacing-8,256px)}.py9-l{padding-top:var(--spacing-9,512px);padding-bottom:var(--spacing-9,512px)}.px0-l{padding-left:var(--spacing-0,0);padding-right:var(--spacing-0,0)}.px1-l{padding-left:var(--spacing-1,2px);padding-right:var(--spacing-1,2px)}.px2-l{padding-left:var(--spacing-2,4px);padding-right:var(--spacing-2,4px)}.px3-l{padding-left:var(--spacing-3,8px);padding-right:var(--spacing-3,8px)}.px4-l{padding-left:var(--spacing-4,16px);padding-right:var(--spacing-4,16px)}.px5-l{padding-left:var(--spacing-5,32px);padding-right:var(--spacing-5,32px)}.px6-l{padding-left:var(--spacing-6,64px);padding-right:var(--spacing-6,64px)}.px7-l{padding-left:var(--spacing-7,128px);padding-right:var(--spacing-7,128px)}.px8-l{padding-left:var(--spacing-8,256px);padding-right:var(--spacing-8,256px)}.px9-l{padding-left:var(--spacing-9,512px);padding-right:var(--spacing-9,512px)}.m0-l{margin:var(--spacing-0,0)}.m1-l{margin:var(--spacing-1,2px)}.m2-l{margin:var(--spacing-2,4px)}.m3-l{margin:var(--spacing-3,8px)}.m4-l{margin:var(--spacing-4,16px)}.m5-l{margin:var(--spacing-5,32px)}.m6-l{margin:var(--spacing-6,64px)}.m7-l{margin:var(--spacing-7,128px)}.m8-l{margin:var(--spacing-8,256px)}.m9-l{margin:var(--spacing-9,512px)}.ml0-l{margin-left:var(--spacing-0,0)}.ml1-l{margin-left:var(--spacing-3,2px)}.ml2-l{margin-left:var(--spacing-2,4px)}.ml3-l{margin-left:var(--spacing-3,8px)}.ml4-l{margin-left:var(--spacing-4,16px)}.ml5-l{margin-left:var(--spacing-5,32px)}.ml6-l{margin-left:var(--spacing-6,64px)}.ml7-l{margin-left:var(--spacing-7,128px)}.ml8-l{margin-left:var(--spacing-8,256px)}.ml9-l{margin-left:var(--spacing-9,512px)}.mr0-l{margin-right:var(--spacing-0,0)}.mr1-l{margin-right:var(--spacing-1,2px)}.mr2-l{margin-right:var(--spacing-2,4px)}.mr3-l{margin-right:var(--spacing-3,8px)}.mr4-l{margin-right:var(--spacing-4,16px)}.mr5-l{margin-right:var(--spacing-5,32px)}.mr6-l{margin-right:var(--spacing-6,64px)}.mr7-l{margin-right:var(--spacing-7,128px)}.mr8-l{margin-right:var(--spacing-8,256px)}.mr9-l{margin-right:var(--spacing-9,512px)}.mb0-l{margin-bottom:var(--spacing-0,0)}.mb1-l{margin-bottom:var(--spacing-1,2px)}.mb2-l{margin-bottom:var(--spacing-2,4px)}.mb3-l{margin-bottom:var(--spacing-3,8px)}.mb4-l{margin-bottom:var(--spacing-4,16px)}.mb5-l{margin-bottom:var(--spacing-5,32px)}.mb6-l{margin-bottom:var(--spacing-6,64px)}.mb7-l{margin-bottom:var(--spacing-7,128px)}.mb8-l{margin-bottom:var(--spacing-8,256px)}.mb9-l{margin-bottom:var(--spacing-9,512px)}.mt0-l{margin-top:var(--spacing-0,0)}.mt1-l{margin-top:var(--spacing-1,2px)}.mt2-l{margin-top:var(--spacing-2,4px)}.mt3-l{margin-top:var(--spacing-3,8px)}.mt4-l{margin-top:var(--spacing-4,16px)}.mt5-l{margin-top:var(--spacing-5,32px)}.mt6-l{margin-top:var(--spacing-6,64px)}.mt7-l{margin-top:var(--spacing-7,128px)}.mt8-l{margin-top:var(--spacing-8,256px)}.mt9-l{margin-top:var(--spacing-9,512px)}.my0-l{margin-top:var(--spacing-0,0);margin-bottom:var(--spacing-0,0)}.my1-l{margin-top:var(--spacing-1,2px);margin-bottom:var(--spacing-1,2px)}.my2-l{margin-top:var(--spacing-2,4px);margin-bottom:var(--spacing-2,4px)}.my3-l{margin-top:var(--spacing-3,8px);margin-bottom:var(--spacing-3,8px)}.my4-l{margin-top:var(--spacing-4,16px);margin-bottom:var(--spacing-4,16px)}.my5-l{margin-top:var(--spacing-5,32px);margin-bottom:var(--spacing-5,32px)}.my6-l{margin-top:var(--spacing-6,64px);margin-bottom:var(--spacing-6,64px)}.my7-l{margin-top:var(--spacing-7,128px);margin-bottom:var(--spacing-7,128px)}.my8-l{margin-top:var(--spacing-8,256px);margin-bottom:var(--spacing-8,256px)}.my9-l{margin-top:var(--spacing-9,512px);margin-bottom:var(--spacing-9,512px)}.mx0-l{margin-left:var(--spacing-0,0);margin-right:var(--spacing-0,0)}.mx1-l{margin-left:var(--spacing-1,2px);margin-right:var(--spacing-1,2px)}.mx2-l{margin-left:var(--spacing-2,4px);margin-right:var(--spacing-2,4px)}.mx3-l{margin-left:var(--spacing-3,8px);margin-right:var(--spacing-3,8px)}.mx4-l{margin-left:var(--spacing-4,16px);margin-right:var(--spacing-4,16px)}.mx5-l{margin-left:var(--spacing-5,32px);margin-right:var(--spacing-5,32px)}.mx6-l{margin-left:var(--spacing-6,64px);margin-right:var(--spacing-6,64px)}.mx7-l{margin-left:var(--spacing-7,128px);margin-right:var(--spacing-7,128px)}.mx8-l{margin-left:var(--spacing-8,256px);margin-right:var(--spacing-8,256px)}.mx9-l{margin-left:var(--spacing-9,512px);margin-right:var(--spacing-9,512px)}}.na1{margin:calc(-1 * var(--spacing-1))}.na2{margin:calc(-1 * var(--spacing-2))}.na3{margin:calc(-1 * var(--spacing-3))}.na4{margin:calc(-1 * var(--spacing-4))}.na5{margin:calc(-1 * var(--spacing-5))}.na6{margin:calc(-1 * var(--spacing-6))}.na7{margin:calc(-1 * var(--spacing-7))}.nl1{margin-left:calc(-1 * var(--spacing-1))}.nl2{margin-left:calc(-1 * var(--spacing-2))}.nl3{margin-left:calc(-1 * var(--spacing-3))}.nl4{margin-left:calc(-1 * var(--spacing-4))}.nl5{margin-left:calc(-1 * var(--spacing-5))}.nl6{margin-left:calc(-1 * var(--spacing-6))}.nl7{margin-left:calc(-1 * var(--spacing-7))}.nr1{margin-right:calc(-1 * var(--spacing-1))}.nr2{margin-right:calc(-1 * var(--spacing-2))}.nr3{margin-right:calc(-1 * var(--spacing-3))}.nr4{margin-right:calc(-1 * var(--spacing-4))}.nr5{margin-right:calc(-1 * var(--spacing-5))}.nr6{margin-right:calc(-1 * var(--spacing-6))}.nr7{margin-right:calc(-1 * var(--spacing-7))}.nb1{margin-bottom:calc(-1 * var(--spacing-1))}.nb2{margin-bottom:calc(-1 * var(--spacing-2))}.nb3{margin-bottom:calc(-1 * var(--spacing-3))}.nb4{margin-bottom:calc(-1 * var(--spacing-4))}.nb5{margin-bottom:calc(-1 * var(--spacing-5))}.nb6{margin-bottom:calc(-1 * var(--spacing-6))}.nb7{margin-bottom:calc(-1 * var(--spacing-7))}.nt1{margin-top:calc(-1 * var(--spacing-1))}.nt2{margin-top:calc(-1 * var(--spacing-2))}.nt3{margin-top:calc(-1 * var(--spacing-3))}.nt4{margin-top:calc(-1 * var(--spacing-4))}.nt5{margin-top:calc(-1 * var(--spacing-5))}.nt6{margin-top:calc(-1 * var(--spacing-6))}.nt7{margin-top:calc(-1 * var(--spacing-7))}@container (--breakpoint-2){.na1-s{margin:calc(-1 * var(--spacing-1))}.na2-s{margin:calc(-1 * var(--spacing-2))}.na3-s{margin:calc(-1 * var(--spacing-3))}.na4-s{margin:calc(-1 * var(--spacing-4))}.na5-s{margin:calc(-1 * var(--spacing-5))}.na6-s{margin:calc(-1 * var(--spacing-6))}.na7-s{margin:calc(-1 * var(--spacing-7))}.nl1-s{margin-left:calc(-1 * var(--spacing-1))}.nl2-s{margin-left:calc(-1 * var(--spacing-2))}.nl3-s{margin-left:calc(-1 * var(--spacing-3))}.nl4-s{margin-left:calc(-1 * var(--spacing-4))}.nl5-s{margin-left:calc(-1 * var(--spacing-5))}.nl6-s{margin-left:calc(-1 * var(--spacing-6))}.nl7-s{margin-left:calc(-1 * var(--spacing-7))}.nr1-s{margin-right:calc(-1 * var(--spacing-1))}.nr2-s{margin-right:calc(-1 * var(--spacing-2))}.nr3-s{margin-right:calc(-1 * var(--spacing-3))}.nr4-s{margin-right:calc(-1 * var(--spacing-4))}.nr5-s{margin-right:calc(-1 * var(--spacing-5))}.nr6-s{margin-right:calc(-1 * var(--spacing-6))}.nr7-s{margin-right:calc(-1 * var(--spacing-7))}.nb1-s{margin-bottom:calc(-1 * var(--spacing-1))}.nb2-s{margin-bottom:calc(-1 * var(--spacing-2))}.nb3-s{margin-bottom:calc(-1 * var(--spacing-3))}.nb4-s{margin-bottom:calc(-1 * var(--spacing-4))}.nb5-s{margin-bottom:calc(-1 * var(--spacing-5))}.nb6-s{margin-bottom:calc(-1 * var(--spacing-6))}.nb7-s{margin-bottom:calc(-1 * var(--spacing-7))}.nt1-s{margin-top:calc(-1 * var(--spacing-1))}.nt2-s{margin-top:calc(-1 * var(--spacing-2))}.nt3-s{margin-top:calc(-1 * var(--spacing-3))}.nt4-s{margin-top:calc(-1 * var(--spacing-4))}.nt5-s{margin-top:calc(-1 * var(--spacing-5))}.nt6-s{margin-top:calc(-1 * var(--spacing-6))}.nt7-s{margin-top:calc(-1 * var(--spacing-7))}}@container (--breakpoint-3){.na1-m{margin:calc(-1 * var(--spacing-1))}.na2-m{margin:calc(-1 * var(--spacing-2))}.na3-m{margin:calc(-1 * var(--spacing-3))}.na4-m{margin:calc(-1 * var(--spacing-4))}.na5-m{margin:calc(-1 * var(--spacing-5))}.na6-m{margin:calc(-1 * var(--spacing-6))}.na7-m{margin:calc(-1 * var(--spacing-7))}.nl1-m{margin-left:calc(-1 * var(--spacing-1))}.nl2-m{margin-left:calc(-1 * var(--spacing-2))}.nl3-m{margin-left:calc(-1 * var(--spacing-3))}.nl4-m{margin-left:calc(-1 * var(--spacing-4))}.nl5-m{margin-left:calc(-1 * var(--spacing-5))}.nl6-m{margin-left:calc(-1 * var(--spacing-6))}.nl7-m{margin-left:calc(-1 * var(--spacing-7))}.nr1-m{margin-right:calc(-1 * var(--spacing-1))}.nr2-m{margin-right:calc(-1 * var(--spacing-2))}.nr3-m{margin-right:calc(-1 * var(--spacing-3))}.nr4-m{margin-right:calc(-1 * var(--spacing-4))}.nr5-m{margin-right:calc(-1 * var(--spacing-5))}.nr6-m{margin-right:calc(-1 * var(--spacing-6))}.nr7-m{margin-right:calc(-1 * var(--spacing-7))}.nb1-m{margin-bottom:calc(-1 * var(--spacing-1))}.nb2-m{margin-bottom:calc(-1 * var(--spacing-2))}.nb3-m{margin-bottom:calc(-1 * var(--spacing-3))}.nb4-m{margin-bottom:calc(-1 * var(--spacing-4))}.nb5-m{margin-bottom:calc(-1 * var(--spacing-5))}.nb6-m{margin-bottom:calc(-1 * var(--spacing-6))}.nb7-m{margin-bottom:calc(-1 * var(--spacing-7))}.nt1-m{margin-top:calc(-1 * var(--spacing-1))}.nt2-m{margin-top:calc(-1 * var(--spacing-2))}.nt3-m{margin-top:calc(-1 * var(--spacing-3))}.nt4-m{margin-top:calc(-1 * var(--spacing-4))}.nt5-m{margin-top:calc(-1 * var(--spacing-5))}.nt6-m{margin-top:calc(-1 * var(--spacing-6))}.nt7-m{margin-top:calc(-1 * var(--spacing-7))}}@container (min-width:64em){.na1-l{margin:calc(-1 * var(--spacing-1))}.na2-l{margin:calc(-1 * var(--spacing-2))}.na3-l{margin:calc(-1 * var(--spacing-3))}.na4-l{margin:calc(-1 * var(--spacing-4))}.na5-l{margin:calc(-1 * var(--spacing-5))}.na6-l{margin:calc(-1 * var(--spacing-6))}.na7-l{margin:calc(-1 * var(--spacing-7))}.nl1-l{margin-left:calc(-1 * var(--spacing-1))}.nl2-l{margin-left:calc(-1 * var(--spacing-2))}.nl3-l{margin-left:calc(-1 * var(--spacing-3))}.nl4-l{margin-left:calc(-1 * var(--spacing-4))}.nl5-l{margin-left:calc(-1 * var(--spacing-5))}.nl6-l{margin-left:calc(-1 * var(--spacing-6))}.nl7-l{margin-left:calc(-1 * var(--spacing-7))}.nr1-l{margin-right:calc(-1 * var(--spacing-1))}.nr2-l{margin-right:calc(-1 * var(--spacing-2))}.nr3-l{margin-right:calc(-1 * var(--spacing-3))}.nr4-l{margin-right:calc(-1 * var(--spacing-4))}.nr5-l{margin-right:calc(-1 * var(--spacing-5))}.nr6-l{margin-right:calc(-1 * var(--spacing-6))}.nr7-l{margin-right:calc(-1 * var(--spacing-7))}.nb1-l{margin-bottom:calc(-1 * var(--spacing-1))}.nb2-l{margin-bottom:calc(-1 * var(--spacing-2))}.nb3-l{margin-bottom:calc(-1 * var(--spacing-3))}.nb4-l{margin-bottom:calc(-1 * var(--spacing-4))}.nb5-l{margin-bottom:calc(-1 * var(--spacing-5))}.nb6-l{margin-bottom:calc(-1 * var(--spacing-6))}.nb7-l{margin-bottom:calc(-1 * var(--spacing-7))}.nt1-l{margin-top:calc(-1 * var(--spacing-1))}.nt2-l{margin-top:calc(-1 * var(--spacing-2))}.nt3-l{margin-top:calc(-1 * var(--spacing-3))}.nt4-l{margin-top:calc(-1 * var(--spacing-4))}.nt5-l{margin-top:calc(-1 * var(--spacing-5))}.nt6-l{margin-top:calc(-1 * var(--spacing-6))}.nt7-l{margin-top:calc(-1 * var(--spacing-7))}}.collapse{border-collapse:collapse;border-spacing:0}.striped--light:nth-child(odd){background-color:var(--gray-10)}.striped--dark:nth-child(odd){background-color:var(--gray-0)}.strike{text-decoration:line-through}.underline{text-decoration:underline}.no-underline{text-decoration:none}.tl{text-align:left}.tr{text-align:right}.tc{text-align:center}.tj{text-align:justify}@container (min-width:30em){.tl-s{text-align:left}.tr-s{text-align:right}.tc-s{text-align:center}.tj-s{text-align:justify}}@container (min-width:48em){.tl-m{text-align:left}.tr-m{text-align:right}.tc-m{text-align:center}.tj-m{text-align:justify}}@container (min-width:64em){.tl-l{text-align:left}.tr-l{text-align:right}.tc-l{text-align:center}.tj-l{text-align:justify}}.ttc{text-transform:capitalize}.ttl{text-transform:lowercase}.ttu{text-transform:uppercase}.ttn{text-transform:none}@container (min-width:30em){.ttc-s{text-transform:capitalize}.ttl-s{text-transform:lowercase}.ttu-s{text-transform:uppercase}.ttn-s{text-transform:none}}@container (min-width:48em){.ttc-m{text-transform:capitalize}.ttl-m{text-transform:lowercase}.ttu-m{text-transform:uppercase}.ttn-m{text-transform:none}}@container (min-width:64em){.ttc-l{text-transform:capitalize}.ttl-l{text-transform:lowercase}.ttu-l{text-transform:uppercase}.ttn-l{text-transform:none}}.f1{font-size:var(--font-size-1,.75rem)}.f2{font-size:var(--font-size-2,.875rem)}.f3{font-size:var(--font-size-3,1rem)}.f4{font-size:var(--font-size-4,1.125rem)}.f5{font-size:var(--font-size-5,1.25rem)}.f6{font-size:var(--font-size-6,1.5rem)}.f7{font-size:var(--font-size-7,2rem)}.f8{font-size:var(--font-size-8,3rem)}.f9{font-size:var(--font-size-9,4rem)}.f10{font-size:var(--font-size-10,6rem)}.f11{font-size:var(--font-size-11,8rem)}.f12{font-size:var(--font-size-12,12rem)}@container (min-width:30em){.f1-s{font-size:var(--font-size-1,.75rem)}.f2-s{font-size:var(--font-size-2,.875rem)}.f3-s{font-size:var(--font-size-3,1rem)}.f4-s{font-size:var(--font-size-4,1.125rem)}.f5-s{font-size:var(--font-size-5,1.25rem)}.f6-s{font-size:var(--font-size-6,1.5rem)}.f7-s{font-size:var(--font-size-7,2rem)}.f8-s{font-size:var(--font-size-8,3rem)}.f9-s{font-size:var(--font-size-9,4rem)}.f10-s{font-size:var(--font-size-10,6rem)}.f11-s{font-size:var(--font-size-11,8rem)}.f12-s{font-size:var(--font-size-12,12rem)}}@container (min-width:48em){.f1-m{font-size:var(--font-size-1,.75rem)}.f2-m{font-size:var(--font-size-2,.875rem)}.f3-m{font-size:var(--font-size-3,1rem)}.f4-m{font-size:var(--font-size-4,1.125rem)}.f5-m{font-size:var(--font-size-5,1.25rem)}.f6-m{font-size:var(--font-size-6,1.5rem)}.f7-m{font-size:var(--font-size-7,2rem)}.f8-m{font-size:var(--font-size-8,3rem)}.f9-m{font-size:var(--font-size-9,4rem)}.f10-m{font-size:var(--font-size-10,6rem)}.f11-m{font-size:var(--font-size-11,8rem)}.f12-m{font-size:var(--font-size-12,12rem)}}@container (min-width:64em){.f1-l{font-size:var(--font-size-1,.75rem)}.f2-l{font-size:var(--font-size-2,.875rem)}.f3-l{font-size:var(--font-size-3,1rem)}.f4-l{font-size:var(--font-size-4,1.125rem)}.f5-l{font-size:var(--font-size-5,1.25rem)}.f6-l{font-size:var(--font-size-6,1.5rem)}.f7-l{font-size:var(--font-size-7,2rem)}.f8-l{font-size:var(--font-size-8,3rem)}.f9-l{font-size:var(--font-size-9,4rem)}.f10-l{font-size:var(--font-size-10,6rem)}.f11-l{font-size:var(--font-size-11,8rem)}.f12-l{font-size:var(--font-size-12,12rem)}}.measure{max-width:var(--measure,66ch)}.measure-wide{max-width:var(--measure-wide,80ch)}.measure-narrow{max-width:var(--measure-narrow,45ch)}.indent{text-indent:1em;margin-top:0;margin-bottom:0}.small-caps{font-variant:small-caps}.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@container (min-width:30em){.measure-s{max-width:var(--measure,66ch)}.measure-wide-s{max-width:var(--measure-wide,80ch)}.measure-narrow-s{max-width:var(--measure-narrow,45ch)}.small-caps-s{font-variant:small-caps}.indent-s{text-indent:1em;margin-top:0;margin-bottom:0}.truncate-s{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}@container (min-width:48em){.measure-m{max-width:var(--measure,66ch)}.measure-wide-m{max-width:var(--measure-wide,80ch)}.measure-narrow-m{max-width:var(--measure-narrow,45ch)}.small-caps-m{font-variant:small-caps}.indent-m{text-indent:1em;margin-top:0;margin-bottom:0}.truncate-m{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}@container (min-width:64em){.measure-l{max-width:var(--measure,66ch)}.measure-wide-l{max-width:var(--measure-wide,80ch)}.measure-narrow-l{max-width:var(--measure-narrow,45ch)}.small-caps-l{font-variant:small-caps}.indent-l{text-indent:1em;margin-top:0;margin-bottom:0}.truncate-l{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}.center{margin-left:auto}.center,.mr-auto{margin-right:auto}.ml-auto{margin-left:auto}@container (min-width:30em){.center-s{margin-left:auto}.center-s,.mr-auto-s{margin-right:auto}.ml-auto-s{margin-left:auto}}@container (min-width:48em){.center-m{margin-left:auto}.center-m,.mr-auto-m{margin-right:auto}.ml-auto-m{margin-left:auto}}@container (min-width:64em){.center-l{margin-left:auto}.center-l,.mr-auto-l{margin-right:auto}.ml-auto-l{margin-left:auto}}.clip{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}@container (min-width:30em){.clip-s{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}}@container (min-width:48em){.clip-m{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}}@container (min-width:64em){.clip-l{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}}.ws-normal{white-space:normal}.nowrap{white-space:nowrap}.pre{white-space:pre}@container (min-width:30em){.ws-normal-s{white-space:normal}.nowrap-s{white-space:nowrap}.pre-s{white-space:pre}}@container (min-width:48em){.ws-normal-m{white-space:normal}.nowrap-m{white-space:nowrap}.pre-m{white-space:pre}}@container (min-width:64em){.ws-normal-l{white-space:normal}.nowrap-l{white-space:nowrap}.pre-l{white-space:pre}}.v-base{vertical-align:baseline}.v-mid{vertical-align:middle}.v-top{vertical-align:top}.v-btm{vertical-align:bottom}@container (min-width:30em){.v-base-s{vertical-align:baseline}.v-mid-s{vertical-align:middle}.v-top-s{vertical-align:top}.v-btm-s{vertical-align:bottom}}@container (min-width:48em){.v-base-m{vertical-align:baseline}.v-mid-m{vertical-align:middle}.v-top-m{vertical-align:top}.v-btm-m{vertical-align:bottom}}@container (min-width:64em){.v-base-l{vertical-align:baseline}.v-mid-l{vertical-align:middle}.v-top-l{vertical-align:top}.v-btm-l{vertical-align:bottom}}.dim{opacity:1}.dim,.dim:focus,.dim:hover{transition:opacity .15s ease-in}.dim:focus,.dim:hover{opacity:.5}.dim:active{opacity:.8;transition:opacity .15s ease-out}.glow,.glow:focus,.glow:hover{transition:opacity .15s ease-in}.glow:focus,.glow:hover{opacity:1}.hide-child .child{opacity:0;transition:opacity .15s ease-in}.hide-child:active .child,.hide-child:focus .child,.hide-child:hover .child{opacity:1;transition:opacity .15s ease-in}.underline-hover:focus,.underline-hover:hover{text-decoration:underline}.grow{-moz-osx-font-smoothing:grayscale;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform:translateZ(0);transform:translateZ(0);transition:-webkit-transform .25s ease-out;transition:transform .25s ease-out;transition:transform .25s ease-out,-webkit-transform .25s ease-out}.grow:focus,.grow:hover{-webkit-transform:scale(1.05);transform:scale(1.05)}.grow:active{-webkit-transform:scale(.9);transform:scale(.9)}.grow-large{-moz-osx-font-smoothing:grayscale;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform:translateZ(0);transform:translateZ(0);transition:-webkit-transform .25s ease-in-out;transition:transform .25s ease-in-out;transition:transform .25s ease-in-out,-webkit-transform .25s ease-in-out}.grow-large:focus,.grow-large:hover{-webkit-transform:scale(1.2);transform:scale(1.2)}.grow-large:active{-webkit-transform:scale(.95);transform:scale(.95)}.pointer{cursor:pointer}.trans-all{transition:all .25s cubic-bezier(.165,.84,.44,1)}.trans-bg{transition:background-color .25s ease-in-out}.trans-color{transition:color .25s ease-in-out}.hover-filter-none:hover{-webkit-filter:none;filter:none}.hover-filter-blur-none:hover{-webkit-filter:blur(0);filter:blur(0)}.hover-filter-blur:hover{-webkit-filter:blur(96px);filter:blur(96px)}.hover-grayscale-0:hover{-webkit-filter:grayscale(0);filter:grayscale(0)}.hover-grayscale-50:hover{-webkit-filter:grayscale(50%);filter:grayscale(50%)}.hover-grayscale-100:hover{-webkit-filter:grayscale(100%);filter:grayscale(100%)}.z-0{z-index:0}.z-1{z-index:1}.z-2{z-index:2}.z-3{z-index:3}.z-4{z-index:4}.z-5{z-index:5}.z-999{z-index:6}.z-9999{z-index:7}.z-max{z-index:8}.z-inherit{z-index:inherit}.z-initial{z-index:auto}.z-unset{z-index:unset}.nested-copy-line-height ol,.nested-copy-line-height p,.nested-copy-line-height ul{line-height:var(--line-height-body,1.5)}.nested-headline-line-height h1,.nested-headline-line-height h2,.nested-headline-line-height h3,.nested-headline-line-height h4,.nested-headline-line-height h5,.nested-headline-line-height h6{line-height:var(--line-height-title,1.25)}.nested-list-reset ol,.nested-list-reset ul{padding-left:0;margin-left:0;list-style-type:none}.nested-copy-indent p+p{text-indent:1em;margin-top:0;margin-bottom:0}.nested-copy-separator p+p{margin-top:1.5em}.nested-img img{width:100%;max-width:100%;display:block}.nested-links a{color:var(--blue-5);transition:color .15s ease-in}.nested-links a:focus,.nested-links a:hover{color:var(--blue-3);transition:color .15s ease-in}.debug *{--debug-color:128 0 90;--debug-opacity:.8;outline:1px solid rbg(var(--debug-color,128 0 90)/(--debug-opacity,.8))}.debug-grid{--grid-size:16px;--grid-color:var(--magenta-9);background-image:repeating-linear-gradient(0deg,var(--grid-color),var(--grid-color) 1px,transparent 0,transparent var(--grid-size)),repeating-linear-gradient(90deg,var(--grid-color),var(--grid-color) 1px,transparent 0,transparent var(--grid-size));background-size:100% var(--grid-size)}@media (prefers-color-scheme:dark){--shadow-color:255 255 255}
+/*! TACHYONS v4.12.0 | http://tachyons.io */
+/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}.border-box,a,article,aside,blockquote,body,code,dd,div,dl,dt,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,html,input[type=email],input[type=number],input[type=password],input[type=tel],input[type=text],input[type=url],legend,li,main,nav,ol,p,pre,section,table,td,textarea,th,tr,ul{box-sizing:border-box}.aspect-ratio{height:0;position:relative}.aspect-ratio--16x9{padding-bottom:56.25%}.aspect-ratio--9x16{padding-bottom:177.77%}.aspect-ratio--4x3{padding-bottom:75%}.aspect-ratio--3x4{padding-bottom:133.33%}.aspect-ratio--6x4{padding-bottom:66.6%}.aspect-ratio--4x6{padding-bottom:150%}.aspect-ratio--8x5{padding-bottom:62.5%}.aspect-ratio--5x8{padding-bottom:160%}.aspect-ratio--7x5{padding-bottom:71.42%}.aspect-ratio--5x7{padding-bottom:140%}.aspect-ratio--1x1{padding-bottom:100%}.aspect-ratio--object{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:100}img{max-width:100%}.cover{background-size:cover!important}.contain{background-size:contain!important}.bg-center{background-position:50%}.bg-center,.bg-top{background-repeat:no-repeat}.bg-top{background-position:top}.bg-right{background-position:100%}.bg-bottom,.bg-right{background-repeat:no-repeat}.bg-bottom{background-position:bottom}.bg-left{background-repeat:no-repeat;background-position:0}.outline{outline:1px solid}.outline-transparent{outline:1px solid transparent}.outline-0{outline:0}.ba{border-style:solid;border-width:1px}.bt{border-top-style:solid;border-top-width:1px}.br{border-right-style:solid;border-right-width:1px}.bb{border-bottom-style:solid;border-bottom-width:1px}.bl{border-left-style:solid;border-left-width:1px}.bn{border-style:none;border-width:0}.b--black{border-color:#000}.b--near-black{border-color:#111}.b--dark-gray{border-color:#333}.b--mid-gray{border-color:#555}.b--gray{border-color:#777}.b--silver{border-color:#999}.b--light-silver{border-color:#aaa}.b--moon-gray{border-color:#ccc}.b--light-gray{border-color:#eee}.b--near-white{border-color:#f4f4f4}.b--white{border-color:#fff}.b--white-90{border-color:hsla(0,0%,100%,.9)}.b--white-80{border-color:hsla(0,0%,100%,.8)}.b--white-70{border-color:hsla(0,0%,100%,.7)}.b--white-60{border-color:hsla(0,0%,100%,.6)}.b--white-50{border-color:hsla(0,0%,100%,.5)}.b--white-40{border-color:hsla(0,0%,100%,.4)}.b--white-30{border-color:hsla(0,0%,100%,.3)}.b--white-20{border-color:hsla(0,0%,100%,.2)}.b--white-10{border-color:hsla(0,0%,100%,.1)}.b--white-05{border-color:hsla(0,0%,100%,.05)}.b--white-025{border-color:hsla(0,0%,100%,.025)}.b--white-0125{border-color:hsla(0,0%,100%,.0125)}.b--black-90{border-color:rgba(0,0,0,.9)}.b--black-80{border-color:rgba(0,0,0,.8)}.b--black-70{border-color:rgba(0,0,0,.7)}.b--black-60{border-color:rgba(0,0,0,.6)}.b--black-50{border-color:rgba(0,0,0,.5)}.b--black-40{border-color:rgba(0,0,0,.4)}.b--black-30{border-color:rgba(0,0,0,.3)}.b--black-20{border-color:rgba(0,0,0,.2)}.b--black-10{border-color:rgba(0,0,0,.1)}.b--black-05{border-color:rgba(0,0,0,.05)}.b--black-025{border-color:rgba(0,0,0,.025)}.b--black-0125{border-color:rgba(0,0,0,.0125)}.b--dark-red{border-color:#e7040f}.b--red{border-color:#ff4136}.b--light-red{border-color:#ff725c}.b--orange{border-color:#ff6300}.b--gold{border-color:#ffb700}.b--yellow{border-color:gold}.b--light-yellow{border-color:#fbf1a9}.b--purple{border-color:#5e2ca5}.b--light-purple{border-color:#a463f2}.b--dark-pink{border-color:#d5008f}.b--hot-pink{border-color:#ff41b4}.b--pink{border-color:#ff80cc}.b--light-pink{border-color:#ffa3d7}.b--dark-green{border-color:#137752}.b--green{border-color:#19a974}.b--light-green{border-color:#9eebcf}.b--navy{border-color:#001b44}.b--dark-blue{border-color:#00449e}.b--blue{border-color:#357edd}.b--light-blue{border-color:#96ccff}.b--lightest-blue{border-color:#cdecff}.b--washed-blue{border-color:#f6fffe}.b--washed-green{border-color:#e8fdf5}.b--washed-yellow{border-color:#fffceb}.b--washed-red{border-color:#ffdfdf}.b--transparent{border-color:transparent}.b--inherit{border-color:inherit}.b--initial{border-color:initial}.b--unset{border-color:unset}.br0{border-radius:0}.br1{border-radius:.125rem}.br2{border-radius:.25rem}.br3{border-radius:.5rem}.br4{border-radius:1rem}.br-100{border-radius:100%}.br-pill{border-radius:9999px}.br--bottom{border-top-left-radius:0;border-top-right-radius:0}.br--top{border-bottom-right-radius:0}.br--right,.br--top{border-bottom-left-radius:0}.br--right{border-top-left-radius:0}.br--left{border-top-right-radius:0;border-bottom-right-radius:0}.br-inherit{border-radius:inherit}.br-initial{border-radius:initial}.br-unset{border-radius:unset}.b--dotted{border-style:dotted}.b--dashed{border-style:dashed}.b--solid{border-style:solid}.b--none{border-style:none}.bw0{border-width:0}.bw1{border-width:.125rem}.bw2{border-width:.25rem}.bw3{border-width:.5rem}.bw4{border-width:1rem}.bw5{border-width:2rem}.bt-0{border-top-width:0}.br-0{border-right-width:0}.bb-0{border-bottom-width:0}.bl-0{border-left-width:0}.shadow-1{box-shadow:0 0 4px 2px rgba(0,0,0,.2)}.shadow-2{box-shadow:0 0 8px 2px rgba(0,0,0,.2)}.shadow-3{box-shadow:2px 2px 4px 2px rgba(0,0,0,.2)}.shadow-4{box-shadow:2px 2px 8px 0 rgba(0,0,0,.2)}.shadow-5{box-shadow:4px 4px 8px 0 rgba(0,0,0,.2)}.pre{overflow-x:auto;overflow-y:hidden;overflow:scroll}.top-0{top:0}.right-0{right:0}.bottom-0{bottom:0}.left-0{left:0}.top-1{top:1rem}.right-1{right:1rem}.bottom-1{bottom:1rem}.left-1{left:1rem}.top-2{top:2rem}.right-2{right:2rem}.bottom-2{bottom:2rem}.left-2{left:2rem}.top--1{top:-1rem}.right--1{right:-1rem}.bottom--1{bottom:-1rem}.left--1{left:-1rem}.top--2{top:-2rem}.right--2{right:-2rem}.bottom--2{bottom:-2rem}.left--2{left:-2rem}.absolute--fill{top:0;right:0;bottom:0;left:0}.cf:after,.cf:before{content:" ";display:table}.cf:after{clear:both}.cf{*zoom:1}.cl{clear:left}.cr{clear:right}.cb{clear:both}.cn{clear:none}.dn{display:none}.di{display:inline}.db{display:block}.dib{display:inline-block}.dit{display:inline-table}.dt{display:table}.dtc{display:table-cell}.dt-row{display:table-row}.dt-row-group{display:table-row-group}.dt-column{display:table-column}.dt-column-group{display:table-column-group}.dt--fixed{table-layout:fixed;width:100%}.flex{display:flex}.inline-flex{display:inline-flex}.flex-auto{flex:1 1 auto;min-width:0;min-height:0}.flex-none{flex:none}.flex-column{flex-direction:column}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.flex-wrap-reverse{flex-wrap:wrap-reverse}.flex-column-reverse{flex-direction:column-reverse}.flex-row-reverse{flex-direction:row-reverse}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-baseline{align-items:baseline}.items-stretch{align-items:stretch}.self-start{align-self:flex-start}.self-end{align-self:flex-end}.self-center{align-self:center}.self-baseline{align-self:baseline}.self-stretch{align-self:stretch}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.content-start{align-content:flex-start}.content-end{align-content:flex-end}.content-center{align-content:center}.content-between{align-content:space-between}.content-around{align-content:space-around}.content-stretch{align-content:stretch}.order-0{order:0}.order-1{order:1}.order-2{order:2}.order-3{order:3}.order-4{order:4}.order-5{order:5}.order-6{order:6}.order-7{order:7}.order-8{order:8}.order-last{order:99999}.flex-grow-0{flex-grow:0}.flex-grow-1{flex-grow:1}.flex-shrink-0{flex-shrink:0}.flex-shrink-1{flex-shrink:1}.fl{float:left}.fl,.fr{_display:inline}.fr{float:right}.fn{float:none}.sans-serif{font-family:-apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif}.serif{font-family:georgia,times,serif}.system-sans-serif{font-family:sans-serif}.system-serif{font-family:serif}.code,code{font-family:Consolas,monaco,monospace}.courier{font-family:Courier Next,courier,monospace}.helvetica{font-family:helvetica neue,helvetica,sans-serif}.avenir{font-family:avenir next,avenir,sans-serif}.athelas{font-family:athelas,georgia,serif}.georgia{font-family:georgia,serif}.times{font-family:times,serif}.bodoni{font-family:Bodoni MT,serif}.calisto{font-family:Calisto MT,serif}.garamond{font-family:garamond,serif}.baskerville{font-family:baskerville,serif}.i{font-style:italic}.fs-normal{font-style:normal}.normal{font-weight:400}.b{font-weight:700}.fw1{font-weight:100}.fw2{font-weight:200}.fw3{font-weight:300}.fw4{font-weight:400}.fw5{font-weight:500}.fw6{font-weight:600}.fw7{font-weight:700}.fw8{font-weight:800}.fw9{font-weight:900}.input-reset{-webkit-appearance:none;-moz-appearance:none}.button-reset::-moz-focus-inner,.input-reset::-moz-focus-inner{border:0;padding:0}.h1{height:1rem}.h2{height:2rem}.h3{height:4rem}.h4{height:8rem}.h5{height:16rem}.h-25{height:25%}.h-50{height:50%}.h-75{height:75%}.h-100{height:100%}.min-h-100{min-height:100%}.vh-25{height:25vh}.vh-50{height:50vh}.vh-75{height:75vh}.vh-100{height:100vh}.min-vh-100{min-height:100vh}.h-auto{height:auto}.h-inherit{height:inherit}.tracked{letter-spacing:.1em}.tracked-tight{letter-spacing:-.05em}.tracked-mega{letter-spacing:.25em}.lh-solid{line-height:1}.lh-title{line-height:1.25}.lh-copy{line-height:1.5}.link{text-decoration:none}.link,.link:active,.link:focus,.link:hover,.link:link,.link:visited{transition:color .15s ease-in}.link:focus{outline:1px dotted currentColor}.list{list-style-type:none}.mw-100{max-width:100%}.mw1{max-width:1rem}.mw2{max-width:2rem}.mw3{max-width:4rem}.mw4{max-width:8rem}.mw5{max-width:16rem}.mw6{max-width:32rem}.mw7{max-width:48rem}.mw8{max-width:64rem}.mw9{max-width:96rem}.mw-none{max-width:none}.w1{width:1rem}.w2{width:2rem}.w3{width:4rem}.w4{width:8rem}.w5{width:16rem}.w-10{width:10%}.w-20{width:20%}.w-25{width:25%}.w-30{width:30%}.w-33{width:33%}.w-34{width:34%}.w-40{width:40%}.w-50{width:50%}.w-60{width:60%}.w-70{width:70%}.w-75{width:75%}.w-80{width:80%}.w-90{width:90%}.w-100{width:100%}.w-third{width:33.33333%}.w-two-thirds{width:66.66667%}.w-auto{width:auto}.overflow-visible{overflow:visible}.overflow-hidden{overflow:hidden}.overflow-scroll{overflow:scroll}.overflow-auto{overflow:auto}.overflow-x-visible{overflow-x:visible}.overflow-x-hidden{overflow-x:hidden}.overflow-x-scroll{overflow-x:scroll}.overflow-x-auto{overflow-x:auto}.overflow-y-visible{overflow-y:visible}.overflow-y-hidden{overflow-y:hidden}.overflow-y-scroll{overflow-y:scroll}.overflow-y-auto{overflow-y:auto}.static{position:static}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.o-100{opacity:1}.o-90{opacity:.9}.o-80{opacity:.8}.o-70{opacity:.7}.o-60{opacity:.6}.o-50{opacity:.5}.o-40{opacity:.4}.o-30{opacity:.3}.o-20{opacity:.2}.o-10{opacity:.1}.o-05{opacity:.05}.o-025{opacity:.025}.o-0{opacity:0}.rotate-45{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.rotate-90{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.rotate-135{-webkit-transform:rotate(135deg);transform:rotate(135deg)}.rotate-180{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.rotate-225{-webkit-transform:rotate(225deg);transform:rotate(225deg)}.rotate-270{-webkit-transform:rotate(270deg);transform:rotate(270deg)}.rotate-315{-webkit-transform:rotate(315deg);transform:rotate(315deg)}.black-90{color:rgba(0,0,0,.9)}.black-80{color:rgba(0,0,0,.8)}.black-70{color:rgba(0,0,0,.7)}.black-60{color:rgba(0,0,0,.6)}.black-50{color:rgba(0,0,0,.5)}.black-40{color:rgba(0,0,0,.4)}.black-30{color:rgba(0,0,0,.3)}.black-20{color:rgba(0,0,0,.2)}.black-10{color:rgba(0,0,0,.1)}.black-05{color:rgba(0,0,0,.05)}.white-90{color:hsla(0,0%,100%,.9)}.white-80{color:hsla(0,0%,100%,.8)}.white-70{color:hsla(0,0%,100%,.7)}.white-60{color:hsla(0,0%,100%,.6)}.white-50{color:hsla(0,0%,100%,.5)}.white-40{color:hsla(0,0%,100%,.4)}.white-30{color:hsla(0,0%,100%,.3)}.white-20{color:hsla(0,0%,100%,.2)}.white-10{color:hsla(0,0%,100%,.1)}.black{color:#000}.near-black{color:#111}.dark-gray{color:#333}.mid-gray{color:#555}.gray{color:#777}.silver{color:#999}.light-silver{color:#aaa}.moon-gray{color:#ccc}.light-gray{color:#eee}.near-white{color:#f4f4f4}.white{color:#fff}.dark-red{color:#e7040f}.red{color:#ff4136}.light-red{color:#ff725c}.orange{color:#ff6300}.gold{color:#ffb700}.yellow{color:gold}.light-yellow{color:#fbf1a9}.purple{color:#5e2ca5}.light-purple{color:#a463f2}.dark-pink{color:#d5008f}.hot-pink{color:#ff41b4}.pink{color:#ff80cc}.light-pink{color:#ffa3d7}.dark-green{color:#137752}.green{color:#19a974}.light-green{color:#9eebcf}.navy{color:#001b44}.dark-blue{color:#00449e}.blue{color:#357edd}.light-blue{color:#96ccff}.lightest-blue{color:#cdecff}.washed-blue{color:#f6fffe}.washed-green{color:#e8fdf5}.washed-yellow{color:#fffceb}.washed-red{color:#ffdfdf}.color-inherit{color:inherit}.bg-black-90{background-color:rgba(0,0,0,.9)}.bg-black-80{background-color:rgba(0,0,0,.8)}.bg-black-70{background-color:rgba(0,0,0,.7)}.bg-black-60{background-color:rgba(0,0,0,.6)}.bg-black-50{background-color:rgba(0,0,0,.5)}.bg-black-40{background-color:rgba(0,0,0,.4)}.bg-black-30{background-color:rgba(0,0,0,.3)}.bg-black-20{background-color:rgba(0,0,0,.2)}.bg-black-10{background-color:rgba(0,0,0,.1)}.bg-black-05{background-color:rgba(0,0,0,.05)}.bg-white-90{background-color:hsla(0,0%,100%,.9)}.bg-white-80{background-color:hsla(0,0%,100%,.8)}.bg-white-70{background-color:hsla(0,0%,100%,.7)}.bg-white-60{background-color:hsla(0,0%,100%,.6)}.bg-white-50{background-color:hsla(0,0%,100%,.5)}.bg-white-40{background-color:hsla(0,0%,100%,.4)}.bg-white-30{background-color:hsla(0,0%,100%,.3)}.bg-white-20{background-color:hsla(0,0%,100%,.2)}.bg-white-10{background-color:hsla(0,0%,100%,.1)}.bg-black{background-color:#000}.bg-near-black{background-color:#111}.bg-dark-gray{background-color:#333}.bg-mid-gray{background-color:#555}.bg-gray{background-color:#777}.bg-silver{background-color:#999}.bg-light-silver{background-color:#aaa}.bg-moon-gray{background-color:#ccc}.bg-light-gray{background-color:#eee}.bg-near-white{background-color:#f4f4f4}.bg-white{background-color:#fff}.bg-transparent{background-color:transparent}.bg-dark-red{background-color:#e7040f}.bg-red{background-color:#ff4136}.bg-light-red{background-color:#ff725c}.bg-orange{background-color:#ff6300}.bg-gold{background-color:#ffb700}.bg-yellow{background-color:gold}.bg-light-yellow{background-color:#fbf1a9}.bg-purple{background-color:#5e2ca5}.bg-light-purple{background-color:#a463f2}.bg-dark-pink{background-color:#d5008f}.bg-hot-pink{background-color:#ff41b4}.bg-pink{background-color:#ff80cc}.bg-light-pink{background-color:#ffa3d7}.bg-dark-green{background-color:#137752}.bg-green{background-color:#19a974}.bg-light-green{background-color:#9eebcf}.bg-navy{background-color:#001b44}.bg-dark-blue{background-color:#00449e}.bg-blue{background-color:#357edd}.bg-light-blue{background-color:#96ccff}.bg-lightest-blue{background-color:#cdecff}.bg-washed-blue{background-color:#f6fffe}.bg-washed-green{background-color:#e8fdf5}.bg-washed-yellow{background-color:#fffceb}.bg-washed-red{background-color:#ffdfdf}.bg-inherit{background-color:inherit}.hover-black:focus,.hover-black:hover{color:#000}.hover-near-black:focus,.hover-near-black:hover{color:#111}.hover-dark-gray:focus,.hover-dark-gray:hover{color:#333}.hover-mid-gray:focus,.hover-mid-gray:hover{color:#555}.hover-gray:focus,.hover-gray:hover{color:#777}.hover-silver:focus,.hover-silver:hover{color:#999}.hover-light-silver:focus,.hover-light-silver:hover{color:#aaa}.hover-moon-gray:focus,.hover-moon-gray:hover{color:#ccc}.hover-light-gray:focus,.hover-light-gray:hover{color:#eee}.hover-near-white:focus,.hover-near-white:hover{color:#f4f4f4}.hover-white:focus,.hover-white:hover{color:#fff}.hover-black-90:focus,.hover-black-90:hover{color:rgba(0,0,0,.9)}.hover-black-80:focus,.hover-black-80:hover{color:rgba(0,0,0,.8)}.hover-black-70:focus,.hover-black-70:hover{color:rgba(0,0,0,.7)}.hover-black-60:focus,.hover-black-60:hover{color:rgba(0,0,0,.6)}.hover-black-50:focus,.hover-black-50:hover{color:rgba(0,0,0,.5)}.hover-black-40:focus,.hover-black-40:hover{color:rgba(0,0,0,.4)}.hover-black-30:focus,.hover-black-30:hover{color:rgba(0,0,0,.3)}.hover-black-20:focus,.hover-black-20:hover{color:rgba(0,0,0,.2)}.hover-black-10:focus,.hover-black-10:hover{color:rgba(0,0,0,.1)}.hover-white-90:focus,.hover-white-90:hover{color:hsla(0,0%,100%,.9)}.hover-white-80:focus,.hover-white-80:hover{color:hsla(0,0%,100%,.8)}.hover-white-70:focus,.hover-white-70:hover{color:hsla(0,0%,100%,.7)}.hover-white-60:focus,.hover-white-60:hover{color:hsla(0,0%,100%,.6)}.hover-white-50:focus,.hover-white-50:hover{color:hsla(0,0%,100%,.5)}.hover-white-40:focus,.hover-white-40:hover{color:hsla(0,0%,100%,.4)}.hover-white-30:focus,.hover-white-30:hover{color:hsla(0,0%,100%,.3)}.hover-white-20:focus,.hover-white-20:hover{color:hsla(0,0%,100%,.2)}.hover-white-10:focus,.hover-white-10:hover{color:hsla(0,0%,100%,.1)}.hover-inherit:focus,.hover-inherit:hover{color:inherit}.hover-bg-black:focus,.hover-bg-black:hover{background-color:#000}.hover-bg-near-black:focus,.hover-bg-near-black:hover{background-color:#111}.hover-bg-dark-gray:focus,.hover-bg-dark-gray:hover{background-color:#333}.hover-bg-mid-gray:focus,.hover-bg-mid-gray:hover{background-color:#555}.hover-bg-gray:focus,.hover-bg-gray:hover{background-color:#777}.hover-bg-silver:focus,.hover-bg-silver:hover{background-color:#999}.hover-bg-light-silver:focus,.hover-bg-light-silver:hover{background-color:#aaa}.hover-bg-moon-gray:focus,.hover-bg-moon-gray:hover{background-color:#ccc}.hover-bg-light-gray:focus,.hover-bg-light-gray:hover{background-color:#eee}.hover-bg-near-white:focus,.hover-bg-near-white:hover{background-color:#f4f4f4}.hover-bg-white:focus,.hover-bg-white:hover{background-color:#fff}.hover-bg-transparent:focus,.hover-bg-transparent:hover{background-color:transparent}.hover-bg-black-90:focus,.hover-bg-black-90:hover{background-color:rgba(0,0,0,.9)}.hover-bg-black-80:focus,.hover-bg-black-80:hover{background-color:rgba(0,0,0,.8)}.hover-bg-black-70:focus,.hover-bg-black-70:hover{background-color:rgba(0,0,0,.7)}.hover-bg-black-60:focus,.hover-bg-black-60:hover{background-color:rgba(0,0,0,.6)}.hover-bg-black-50:focus,.hover-bg-black-50:hover{background-color:rgba(0,0,0,.5)}.hover-bg-black-40:focus,.hover-bg-black-40:hover{background-color:rgba(0,0,0,.4)}.hover-bg-black-30:focus,.hover-bg-black-30:hover{background-color:rgba(0,0,0,.3)}.hover-bg-black-20:focus,.hover-bg-black-20:hover{background-color:rgba(0,0,0,.2)}.hover-bg-black-10:focus,.hover-bg-black-10:hover{background-color:rgba(0,0,0,.1)}.hover-bg-white-90:focus,.hover-bg-white-90:hover{background-color:hsla(0,0%,100%,.9)}.hover-bg-white-80:focus,.hover-bg-white-80:hover{background-color:hsla(0,0%,100%,.8)}.hover-bg-white-70:focus,.hover-bg-white-70:hover{background-color:hsla(0,0%,100%,.7)}.hover-bg-white-60:focus,.hover-bg-white-60:hover{background-color:hsla(0,0%,100%,.6)}.hover-bg-white-50:focus,.hover-bg-white-50:hover{background-color:hsla(0,0%,100%,.5)}.hover-bg-white-40:focus,.hover-bg-white-40:hover{background-color:hsla(0,0%,100%,.4)}.hover-bg-white-30:focus,.hover-bg-white-30:hover{background-color:hsla(0,0%,100%,.3)}.hover-bg-white-20:focus,.hover-bg-white-20:hover{background-color:hsla(0,0%,100%,.2)}.hover-bg-white-10:focus,.hover-bg-white-10:hover{background-color:hsla(0,0%,100%,.1)}.hover-dark-red:focus,.hover-dark-red:hover{color:#e7040f}.hover-red:focus,.hover-red:hover{color:#ff4136}.hover-light-red:focus,.hover-light-red:hover{color:#ff725c}.hover-orange:focus,.hover-orange:hover{color:#ff6300}.hover-gold:focus,.hover-gold:hover{color:#ffb700}.hover-yellow:focus,.hover-yellow:hover{color:gold}.hover-light-yellow:focus,.hover-light-yellow:hover{color:#fbf1a9}.hover-purple:focus,.hover-purple:hover{color:#5e2ca5}.hover-light-purple:focus,.hover-light-purple:hover{color:#a463f2}.hover-dark-pink:focus,.hover-dark-pink:hover{color:#d5008f}.hover-hot-pink:focus,.hover-hot-pink:hover{color:#ff41b4}.hover-pink:focus,.hover-pink:hover{color:#ff80cc}.hover-light-pink:focus,.hover-light-pink:hover{color:#ffa3d7}.hover-dark-green:focus,.hover-dark-green:hover{color:#137752}.hover-green:focus,.hover-green:hover{color:#19a974}.hover-light-green:focus,.hover-light-green:hover{color:#9eebcf}.hover-navy:focus,.hover-navy:hover{color:#001b44}.hover-dark-blue:focus,.hover-dark-blue:hover{color:#00449e}.hover-blue:focus,.hover-blue:hover{color:#357edd}.hover-light-blue:focus,.hover-light-blue:hover{color:#96ccff}.hover-lightest-blue:focus,.hover-lightest-blue:hover{color:#cdecff}.hover-washed-blue:focus,.hover-washed-blue:hover{color:#f6fffe}.hover-washed-green:focus,.hover-washed-green:hover{color:#e8fdf5}.hover-washed-yellow:focus,.hover-washed-yellow:hover{color:#fffceb}.hover-washed-red:focus,.hover-washed-red:hover{color:#ffdfdf}.hover-bg-dark-red:focus,.hover-bg-dark-red:hover{background-color:#e7040f}.hover-bg-red:focus,.hover-bg-red:hover{background-color:#ff4136}.hover-bg-light-red:focus,.hover-bg-light-red:hover{background-color:#ff725c}.hover-bg-orange:focus,.hover-bg-orange:hover{background-color:#ff6300}.hover-bg-gold:focus,.hover-bg-gold:hover{background-color:#ffb700}.hover-bg-yellow:focus,.hover-bg-yellow:hover{background-color:gold}.hover-bg-light-yellow:focus,.hover-bg-light-yellow:hover{background-color:#fbf1a9}.hover-bg-purple:focus,.hover-bg-purple:hover{background-color:#5e2ca5}.hover-bg-light-purple:focus,.hover-bg-light-purple:hover{background-color:#a463f2}.hover-bg-dark-pink:focus,.hover-bg-dark-pink:hover{background-color:#d5008f}.hover-bg-hot-pink:focus,.hover-bg-hot-pink:hover{background-color:#ff41b4}.hover-bg-pink:focus,.hover-bg-pink:hover{background-color:#ff80cc}.hover-bg-light-pink:focus,.hover-bg-light-pink:hover{background-color:#ffa3d7}.hover-bg-dark-green:focus,.hover-bg-dark-green:hover{background-color:#137752}.hover-bg-green:focus,.hover-bg-green:hover{background-color:#19a974}.hover-bg-light-green:focus,.hover-bg-light-green:hover{background-color:#9eebcf}.hover-bg-navy:focus,.hover-bg-navy:hover{background-color:#001b44}.hover-bg-dark-blue:focus,.hover-bg-dark-blue:hover{background-color:#00449e}.hover-bg-blue:focus,.hover-bg-blue:hover{background-color:#357edd}.hover-bg-light-blue:focus,.hover-bg-light-blue:hover{background-color:#96ccff}.hover-bg-lightest-blue:focus,.hover-bg-lightest-blue:hover{background-color:#cdecff}.hover-bg-washed-blue:focus,.hover-bg-washed-blue:hover{background-color:#f6fffe}.hover-bg-washed-green:focus,.hover-bg-washed-green:hover{background-color:#e8fdf5}.hover-bg-washed-yellow:focus,.hover-bg-washed-yellow:hover{background-color:#fffceb}.hover-bg-washed-red:focus,.hover-bg-washed-red:hover{background-color:#ffdfdf}.hover-bg-inherit:focus,.hover-bg-inherit:hover{background-color:inherit}.pa0{padding:0}.pa1{padding:.25rem}.pa2{padding:.5rem}.pa3{padding:1rem}.pa4{padding:2rem}.pa5{padding:4rem}.pa6{padding:8rem}.pa7{padding:16rem}.pl0{padding-left:0}.pl1{padding-left:.25rem}.pl2{padding-left:.5rem}.pl3{padding-left:1rem}.pl4{padding-left:2rem}.pl5{padding-left:4rem}.pl6{padding-left:8rem}.pl7{padding-left:16rem}.pr0{padding-right:0}.pr1{padding-right:.25rem}.pr2{padding-right:.5rem}.pr3{padding-right:1rem}.pr4{padding-right:2rem}.pr5{padding-right:4rem}.pr6{padding-right:8rem}.pr7{padding-right:16rem}.pb0{padding-bottom:0}.pb1{padding-bottom:.25rem}.pb2{padding-bottom:.5rem}.pb3{padding-bottom:1rem}.pb4{padding-bottom:2rem}.pb5{padding-bottom:4rem}.pb6{padding-bottom:8rem}.pb7{padding-bottom:16rem}.pt0{padding-top:0}.pt1{padding-top:.25rem}.pt2{padding-top:.5rem}.pt3{padding-top:1rem}.pt4{padding-top:2rem}.pt5{padding-top:4rem}.pt6{padding-top:8rem}.pt7{padding-top:16rem}.pv0{padding-top:0;padding-bottom:0}.pv1{padding-top:.25rem;padding-bottom:.25rem}.pv2{padding-top:.5rem;padding-bottom:.5rem}.pv3{padding-top:1rem;padding-bottom:1rem}.pv4{padding-top:2rem;padding-bottom:2rem}.pv5{padding-top:4rem;padding-bottom:4rem}.pv6{padding-top:8rem;padding-bottom:8rem}.pv7{padding-top:16rem;padding-bottom:16rem}.ph0{padding-left:0;padding-right:0}.ph1{padding-left:.25rem;padding-right:.25rem}.ph2{padding-left:.5rem;padding-right:.5rem}.ph3{padding-left:1rem;padding-right:1rem}.ph4{padding-left:2rem;padding-right:2rem}.ph5{padding-left:4rem;padding-right:4rem}.ph6{padding-left:8rem;padding-right:8rem}.ph7{padding-left:16rem;padding-right:16rem}.ma0{margin:0}.ma1{margin:.25rem}.ma2{margin:.5rem}.ma3{margin:1rem}.ma4{margin:2rem}.ma5{margin:4rem}.ma6{margin:8rem}.ma7{margin:16rem}.ml0{margin-left:0}.ml1{margin-left:.25rem}.ml2{margin-left:.5rem}.ml3{margin-left:1rem}.ml4{margin-left:2rem}.ml5{margin-left:4rem}.ml6{margin-left:8rem}.ml7{margin-left:16rem}.mr0{margin-right:0}.mr1{margin-right:.25rem}.mr2{margin-right:.5rem}.mr3{margin-right:1rem}.mr4{margin-right:2rem}.mr5{margin-right:4rem}.mr6{margin-right:8rem}.mr7{margin-right:16rem}.mb0{margin-bottom:0}.mb1{margin-bottom:.25rem}.mb2{margin-bottom:.5rem}.mb3{margin-bottom:1rem}.mb4{margin-bottom:2rem}.mb5{margin-bottom:4rem}.mb6{margin-bottom:8rem}.mb7{margin-bottom:16rem}.mt0{margin-top:0}.mt1{margin-top:.25rem}.mt2{margin-top:.5rem}.mt3{margin-top:1rem}.mt4{margin-top:2rem}.mt5{margin-top:4rem}.mt6{margin-top:8rem}.mt7{margin-top:16rem}.mv0{margin-top:0;margin-bottom:0}.mv1{margin-top:.25rem;margin-bottom:.25rem}.mv2{margin-top:.5rem;margin-bottom:.5rem}.mv3{margin-top:1rem;margin-bottom:1rem}.mv4{margin-top:2rem;margin-bottom:2rem}.mv5{margin-top:4rem;margin-bottom:4rem}.mv6{margin-top:8rem;margin-bottom:8rem}.mv7{margin-top:16rem;margin-bottom:16rem}.mh0{margin-left:0;margin-right:0}.mh1{margin-left:.25rem;margin-right:.25rem}.mh2{margin-left:.5rem;margin-right:.5rem}.mh3{margin-left:1rem;margin-right:1rem}.mh4{margin-left:2rem;margin-right:2rem}.mh5{margin-left:4rem;margin-right:4rem}.mh6{margin-left:8rem;margin-right:8rem}.mh7{margin-left:16rem;margin-right:16rem}.na1{margin:-.25rem}.na2{margin:-.5rem}.na3{margin:-1rem}.na4{margin:-2rem}.na5{margin:-4rem}.na6{margin:-8rem}.na7{margin:-16rem}.nl1{margin-left:-.25rem}.nl2{margin-left:-.5rem}.nl3{margin-left:-1rem}.nl4{margin-left:-2rem}.nl5{margin-left:-4rem}.nl6{margin-left:-8rem}.nl7{margin-left:-16rem}.nr1{margin-right:-.25rem}.nr2{margin-right:-.5rem}.nr3{margin-right:-1rem}.nr4{margin-right:-2rem}.nr5{margin-right:-4rem}.nr6{margin-right:-8rem}.nr7{margin-right:-16rem}.nb1{margin-bottom:-.25rem}.nb2{margin-bottom:-.5rem}.nb3{margin-bottom:-1rem}.nb4{margin-bottom:-2rem}.nb5{margin-bottom:-4rem}.nb6{margin-bottom:-8rem}.nb7{margin-bottom:-16rem}.nt1{margin-top:-.25rem}.nt2{margin-top:-.5rem}.nt3{margin-top:-1rem}.nt4{margin-top:-2rem}.nt5{margin-top:-4rem}.nt6{margin-top:-8rem}.nt7{margin-top:-16rem}.collapse{border-collapse:collapse;border-spacing:0}.striped--light-silver:nth-child(odd){background-color:#aaa}.striped--moon-gray:nth-child(odd){background-color:#ccc}.striped--light-gray:nth-child(odd){background-color:#eee}.striped--near-white:nth-child(odd){background-color:#f4f4f4}.stripe-light:nth-child(odd){background-color:hsla(0,0%,100%,.1)}.stripe-dark:nth-child(odd){background-color:rgba(0,0,0,.1)}.strike{text-decoration:line-through}.underline{text-decoration:underline}.no-underline{text-decoration:none}.tl{text-align:left}.tr{text-align:right}.tc{text-align:center}.tj{text-align:justify}.ttc{text-transform:capitalize}.ttl{text-transform:lowercase}.ttu{text-transform:uppercase}.ttn{text-transform:none}.f-6,.f-headline{font-size:6rem}.f-5,.f-subheadline{font-size:5rem}.f1{font-size:3rem}.f2{font-size:2.25rem}.f3{font-size:1.5rem}.f4{font-size:1.25rem}.f5{font-size:1rem}.f6{font-size:.875rem}.f7{font-size:.75rem}.measure{max-width:30em}.measure-wide{max-width:34em}.measure-narrow{max-width:20em}.indent{text-indent:1em;margin-top:0;margin-bottom:0}.small-caps{font-variant:small-caps}.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.overflow-container{overflow-y:scroll}.center{margin-left:auto}.center,.mr-auto{margin-right:auto}.ml-auto{margin-left:auto}.clip{position:fixed!important;_position:absolute!important;clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px)}.ws-normal{white-space:normal}.nowrap{white-space:nowrap}.pre{white-space:pre}.v-base{vertical-align:baseline}.v-mid{vertical-align:middle}.v-top{vertical-align:top}.v-btm{vertical-align:bottom}.dim{opacity:1}.dim,.dim:focus,.dim:hover{transition:opacity .15s ease-in}.dim:focus,.dim:hover{opacity:.5}.dim:active{opacity:.8;transition:opacity .15s ease-out}.glow,.glow:focus,.glow:hover{transition:opacity .15s ease-in}.glow:focus,.glow:hover{opacity:1}.hide-child .child{opacity:0;transition:opacity .15s ease-in}.hide-child:active .child,.hide-child:focus .child,.hide-child:hover .child{opacity:1;transition:opacity .15s ease-in}.underline-hover:focus,.underline-hover:hover{text-decoration:underline}.grow{-moz-osx-font-smoothing:grayscale;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform:translateZ(0);transform:translateZ(0);transition:-webkit-transform .25s ease-out;transition:transform .25s ease-out;transition:transform .25s ease-out,-webkit-transform .25s ease-out}.grow:focus,.grow:hover{-webkit-transform:scale(1.05);transform:scale(1.05)}.grow:active{-webkit-transform:scale(.9);transform:scale(.9)}.grow-large{-moz-osx-font-smoothing:grayscale;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform:translateZ(0);transform:translateZ(0);transition:-webkit-transform .25s ease-in-out;transition:transform .25s ease-in-out;transition:transform .25s ease-in-out,-webkit-transform .25s ease-in-out}.grow-large:focus,.grow-large:hover{-webkit-transform:scale(1.2);transform:scale(1.2)}.grow-large:active{-webkit-transform:scale(.95);transform:scale(.95)}.pointer:hover,.shadow-hover{cursor:pointer}.shadow-hover{position:relative;transition:all .5s cubic-bezier(.165,.84,.44,1)}.shadow-hover:after{content:"";box-shadow:0 0 16px 2px rgba(0,0,0,.2);border-radius:inherit;opacity:0;position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;transition:opacity .5s cubic-bezier(.165,.84,.44,1)}.shadow-hover:focus:after,.shadow-hover:hover:after{opacity:1}.bg-animate,.bg-animate:focus,.bg-animate:hover{transition:background-color .15s ease-in-out}.z-0{z-index:0}.z-1{z-index:1}.z-2{z-index:2}.z-3{z-index:3}.z-4{z-index:4}.z-5{z-index:5}.z-999{z-index:999}.z-9999{z-index:9999}.z-max{z-index:2147483647}.z-inherit{z-index:inherit}.z-initial{z-index:auto}.z-unset{z-index:unset}.nested-copy-line-height ol,.nested-copy-line-height p,.nested-copy-line-height ul{line-height:1.5}.nested-headline-line-height h1,.nested-headline-line-height h2,.nested-headline-line-height h3,.nested-headline-line-height h4,.nested-headline-line-height h5,.nested-headline-line-height h6{line-height:1.25}.nested-list-reset ol,.nested-list-reset ul{padding-left:0;margin-left:0;list-style-type:none}.nested-copy-indent p+p{text-indent:1em;margin-top:0;margin-bottom:0}.nested-copy-separator p+p{margin-top:1.5em}.nested-img img{width:100%;max-width:100%;display:block}.nested-links a{color:#357edd;transition:color .15s ease-in}.nested-links a:focus,.nested-links a:hover{color:#96ccff;transition:color .15s ease-in}.debug *{outline:1px solid gold}.debug-white *{outline:1px solid #fff}.debug-black *{outline:1px solid #000}.debug-grid{background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAFElEQVR4AWPAC97/9x0eCsAEPgwAVLshdpENIxcAAAAASUVORK5CYII=) repeat 0 0}.debug-grid-16{background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMklEQVR4AWOgCLz/b0epAa6UGuBOqQHOQHLUgFEDnAbcBZ4UGwDOkiCnkIhdgNgNxAYAiYlD+8sEuo8AAAAASUVORK5CYII=) repeat 0 0}.debug-grid-8-solid{background:#fff url(data:image/gif;base64,R0lGODdhCAAIAPEAAADw/wDx/////wAAACwAAAAACAAIAAACDZQvgaeb/lxbAIKA8y0AOw==) repeat 0 0}.debug-grid-16-solid{background:#fff url(data:image/gif;base64,R0lGODdhEAAQAPEAAADw/wDx/xXy/////ywAAAAAEAAQAAACIZyPKckYDQFsb6ZqD85jZ2+BkwiRFKehhqQCQgDHcgwEBQA7) repeat 0 0}@media screen and (min-width:30em){.aspect-ratio-ns{height:0;position:relative}.aspect-ratio--16x9-ns{padding-bottom:56.25%}.aspect-ratio--9x16-ns{padding-bottom:177.77%}.aspect-ratio--4x3-ns{padding-bottom:75%}.aspect-ratio--3x4-ns{padding-bottom:133.33%}.aspect-ratio--6x4-ns{padding-bottom:66.6%}.aspect-ratio--4x6-ns{padding-bottom:150%}.aspect-ratio--8x5-ns{padding-bottom:62.5%}.aspect-ratio--5x8-ns{padding-bottom:160%}.aspect-ratio--7x5-ns{padding-bottom:71.42%}.aspect-ratio--5x7-ns{padding-bottom:140%}.aspect-ratio--1x1-ns{padding-bottom:100%}.aspect-ratio--object-ns{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:100}.cover-ns{background-size:cover!important}.contain-ns{background-size:contain!important}.bg-center-ns{background-position:50%}.bg-center-ns,.bg-top-ns{background-repeat:no-repeat}.bg-top-ns{background-position:top}.bg-right-ns{background-position:100%}.bg-bottom-ns,.bg-right-ns{background-repeat:no-repeat}.bg-bottom-ns{background-position:bottom}.bg-left-ns{background-repeat:no-repeat;background-position:0}.outline-ns{outline:1px solid}.outline-transparent-ns{outline:1px solid transparent}.outline-0-ns{outline:0}.ba-ns{border-style:solid;border-width:1px}.bt-ns{border-top-style:solid;border-top-width:1px}.br-ns{border-right-style:solid;border-right-width:1px}.bb-ns{border-bottom-style:solid;border-bottom-width:1px}.bl-ns{border-left-style:solid;border-left-width:1px}.bn-ns{border-style:none;border-width:0}.br0-ns{border-radius:0}.br1-ns{border-radius:.125rem}.br2-ns{border-radius:.25rem}.br3-ns{border-radius:.5rem}.br4-ns{border-radius:1rem}.br-100-ns{border-radius:100%}.br-pill-ns{border-radius:9999px}.br--bottom-ns{border-top-left-radius:0;border-top-right-radius:0}.br--top-ns{border-bottom-right-radius:0}.br--right-ns,.br--top-ns{border-bottom-left-radius:0}.br--right-ns{border-top-left-radius:0}.br--left-ns{border-top-right-radius:0;border-bottom-right-radius:0}.br-inherit-ns{border-radius:inherit}.br-initial-ns{border-radius:initial}.br-unset-ns{border-radius:unset}.b--dotted-ns{border-style:dotted}.b--dashed-ns{border-style:dashed}.b--solid-ns{border-style:solid}.b--none-ns{border-style:none}.bw0-ns{border-width:0}.bw1-ns{border-width:.125rem}.bw2-ns{border-width:.25rem}.bw3-ns{border-width:.5rem}.bw4-ns{border-width:1rem}.bw5-ns{border-width:2rem}.bt-0-ns{border-top-width:0}.br-0-ns{border-right-width:0}.bb-0-ns{border-bottom-width:0}.bl-0-ns{border-left-width:0}.shadow-1-ns{box-shadow:0 0 4px 2px rgba(0,0,0,.2)}.shadow-2-ns{box-shadow:0 0 8px 2px rgba(0,0,0,.2)}.shadow-3-ns{box-shadow:2px 2px 4px 2px rgba(0,0,0,.2)}.shadow-4-ns{box-shadow:2px 2px 8px 0 rgba(0,0,0,.2)}.shadow-5-ns{box-shadow:4px 4px 8px 0 rgba(0,0,0,.2)}.top-0-ns{top:0}.left-0-ns{left:0}.right-0-ns{right:0}.bottom-0-ns{bottom:0}.top-1-ns{top:1rem}.left-1-ns{left:1rem}.right-1-ns{right:1rem}.bottom-1-ns{bottom:1rem}.top-2-ns{top:2rem}.left-2-ns{left:2rem}.right-2-ns{right:2rem}.bottom-2-ns{bottom:2rem}.top--1-ns{top:-1rem}.right--1-ns{right:-1rem}.bottom--1-ns{bottom:-1rem}.left--1-ns{left:-1rem}.top--2-ns{top:-2rem}.right--2-ns{right:-2rem}.bottom--2-ns{bottom:-2rem}.left--2-ns{left:-2rem}.absolute--fill-ns{top:0;right:0;bottom:0;left:0}.cl-ns{clear:left}.cr-ns{clear:right}.cb-ns{clear:both}.cn-ns{clear:none}.dn-ns{display:none}.di-ns{display:inline}.db-ns{display:block}.dib-ns{display:inline-block}.dit-ns{display:inline-table}.dt-ns{display:table}.dtc-ns{display:table-cell}.dt-row-ns{display:table-row}.dt-row-group-ns{display:table-row-group}.dt-column-ns{display:table-column}.dt-column-group-ns{display:table-column-group}.dt--fixed-ns{table-layout:fixed;width:100%}.flex-ns{display:flex}.inline-flex-ns{display:inline-flex}.flex-auto-ns{flex:1 1 auto;min-width:0;min-height:0}.flex-none-ns{flex:none}.flex-column-ns{flex-direction:column}.flex-row-ns{flex-direction:row}.flex-wrap-ns{flex-wrap:wrap}.flex-nowrap-ns{flex-wrap:nowrap}.flex-wrap-reverse-ns{flex-wrap:wrap-reverse}.flex-column-reverse-ns{flex-direction:column-reverse}.flex-row-reverse-ns{flex-direction:row-reverse}.items-start-ns{align-items:flex-start}.items-end-ns{align-items:flex-end}.items-center-ns{align-items:center}.items-baseline-ns{align-items:baseline}.items-stretch-ns{align-items:stretch}.self-start-ns{align-self:flex-start}.self-end-ns{align-self:flex-end}.self-center-ns{align-self:center}.self-baseline-ns{align-self:baseline}.self-stretch-ns{align-self:stretch}.justify-start-ns{justify-content:flex-start}.justify-end-ns{justify-content:flex-end}.justify-center-ns{justify-content:center}.justify-between-ns{justify-content:space-between}.justify-around-ns{justify-content:space-around}.content-start-ns{align-content:flex-start}.content-end-ns{align-content:flex-end}.content-center-ns{align-content:center}.content-between-ns{align-content:space-between}.content-around-ns{align-content:space-around}.content-stretch-ns{align-content:stretch}.order-0-ns{order:0}.order-1-ns{order:1}.order-2-ns{order:2}.order-3-ns{order:3}.order-4-ns{order:4}.order-5-ns{order:5}.order-6-ns{order:6}.order-7-ns{order:7}.order-8-ns{order:8}.order-last-ns{order:99999}.flex-grow-0-ns{flex-grow:0}.flex-grow-1-ns{flex-grow:1}.flex-shrink-0-ns{flex-shrink:0}.flex-shrink-1-ns{flex-shrink:1}.fl-ns{float:left}.fl-ns,.fr-ns{_display:inline}.fr-ns{float:right}.fn-ns{float:none}.i-ns{font-style:italic}.fs-normal-ns{font-style:normal}.normal-ns{font-weight:400}.b-ns{font-weight:700}.fw1-ns{font-weight:100}.fw2-ns{font-weight:200}.fw3-ns{font-weight:300}.fw4-ns{font-weight:400}.fw5-ns{font-weight:500}.fw6-ns{font-weight:600}.fw7-ns{font-weight:700}.fw8-ns{font-weight:800}.fw9-ns{font-weight:900}.h1-ns{height:1rem}.h2-ns{height:2rem}.h3-ns{height:4rem}.h4-ns{height:8rem}.h5-ns{height:16rem}.h-25-ns{height:25%}.h-50-ns{height:50%}.h-75-ns{height:75%}.h-100-ns{height:100%}.min-h-100-ns{min-height:100%}.vh-25-ns{height:25vh}.vh-50-ns{height:50vh}.vh-75-ns{height:75vh}.vh-100-ns{height:100vh}.min-vh-100-ns{min-height:100vh}.h-auto-ns{height:auto}.h-inherit-ns{height:inherit}.tracked-ns{letter-spacing:.1em}.tracked-tight-ns{letter-spacing:-.05em}.tracked-mega-ns{letter-spacing:.25em}.lh-solid-ns{line-height:1}.lh-title-ns{line-height:1.25}.lh-copy-ns{line-height:1.5}.mw-100-ns{max-width:100%}.mw1-ns{max-width:1rem}.mw2-ns{max-width:2rem}.mw3-ns{max-width:4rem}.mw4-ns{max-width:8rem}.mw5-ns{max-width:16rem}.mw6-ns{max-width:32rem}.mw7-ns{max-width:48rem}.mw8-ns{max-width:64rem}.mw9-ns{max-width:96rem}.mw-none-ns{max-width:none}.w1-ns{width:1rem}.w2-ns{width:2rem}.w3-ns{width:4rem}.w4-ns{width:8rem}.w5-ns{width:16rem}.w-10-ns{width:10%}.w-20-ns{width:20%}.w-25-ns{width:25%}.w-30-ns{width:30%}.w-33-ns{width:33%}.w-34-ns{width:34%}.w-40-ns{width:40%}.w-50-ns{width:50%}.w-60-ns{width:60%}.w-70-ns{width:70%}.w-75-ns{width:75%}.w-80-ns{width:80%}.w-90-ns{width:90%}.w-100-ns{width:100%}.w-third-ns{width:33.33333%}.w-two-thirds-ns{width:66.66667%}.w-auto-ns{width:auto}.overflow-visible-ns{overflow:visible}.overflow-hidden-ns{overflow:hidden}.overflow-scroll-ns{overflow:scroll}.overflow-auto-ns{overflow:auto}.overflow-x-visible-ns{overflow-x:visible}.overflow-x-hidden-ns{overflow-x:hidden}.overflow-x-scroll-ns{overflow-x:scroll}.overflow-x-auto-ns{overflow-x:auto}.overflow-y-visible-ns{overflow-y:visible}.overflow-y-hidden-ns{overflow-y:hidden}.overflow-y-scroll-ns{overflow-y:scroll}.overflow-y-auto-ns{overflow-y:auto}.static-ns{position:static}.relative-ns{position:relative}.absolute-ns{position:absolute}.fixed-ns{position:fixed}.rotate-45-ns{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.rotate-90-ns{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.rotate-135-ns{-webkit-transform:rotate(135deg);transform:rotate(135deg)}.rotate-180-ns{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.rotate-225-ns{-webkit-transform:rotate(225deg);transform:rotate(225deg)}.rotate-270-ns{-webkit-transform:rotate(270deg);transform:rotate(270deg)}.rotate-315-ns{-webkit-transform:rotate(315deg);transform:rotate(315deg)}.pa0-ns{padding:0}.pa1-ns{padding:.25rem}.pa2-ns{padding:.5rem}.pa3-ns{padding:1rem}.pa4-ns{padding:2rem}.pa5-ns{padding:4rem}.pa6-ns{padding:8rem}.pa7-ns{padding:16rem}.pl0-ns{padding-left:0}.pl1-ns{padding-left:.25rem}.pl2-ns{padding-left:.5rem}.pl3-ns{padding-left:1rem}.pl4-ns{padding-left:2rem}.pl5-ns{padding-left:4rem}.pl6-ns{padding-left:8rem}.pl7-ns{padding-left:16rem}.pr0-ns{padding-right:0}.pr1-ns{padding-right:.25rem}.pr2-ns{padding-right:.5rem}.pr3-ns{padding-right:1rem}.pr4-ns{padding-right:2rem}.pr5-ns{padding-right:4rem}.pr6-ns{padding-right:8rem}.pr7-ns{padding-right:16rem}.pb0-ns{padding-bottom:0}.pb1-ns{padding-bottom:.25rem}.pb2-ns{padding-bottom:.5rem}.pb3-ns{padding-bottom:1rem}.pb4-ns{padding-bottom:2rem}.pb5-ns{padding-bottom:4rem}.pb6-ns{padding-bottom:8rem}.pb7-ns{padding-bottom:16rem}.pt0-ns{padding-top:0}.pt1-ns{padding-top:.25rem}.pt2-ns{padding-top:.5rem}.pt3-ns{padding-top:1rem}.pt4-ns{padding-top:2rem}.pt5-ns{padding-top:4rem}.pt6-ns{padding-top:8rem}.pt7-ns{padding-top:16rem}.pv0-ns{padding-top:0;padding-bottom:0}.pv1-ns{padding-top:.25rem;padding-bottom:.25rem}.pv2-ns{padding-top:.5rem;padding-bottom:.5rem}.pv3-ns{padding-top:1rem;padding-bottom:1rem}.pv4-ns{padding-top:2rem;padding-bottom:2rem}.pv5-ns{padding-top:4rem;padding-bottom:4rem}.pv6-ns{padding-top:8rem;padding-bottom:8rem}.pv7-ns{padding-top:16rem;padding-bottom:16rem}.ph0-ns{padding-left:0;padding-right:0}.ph1-ns{padding-left:.25rem;padding-right:.25rem}.ph2-ns{padding-left:.5rem;padding-right:.5rem}.ph3-ns{padding-left:1rem;padding-right:1rem}.ph4-ns{padding-left:2rem;padding-right:2rem}.ph5-ns{padding-left:4rem;padding-right:4rem}.ph6-ns{padding-left:8rem;padding-right:8rem}.ph7-ns{padding-left:16rem;padding-right:16rem}.ma0-ns{margin:0}.ma1-ns{margin:.25rem}.ma2-ns{margin:.5rem}.ma3-ns{margin:1rem}.ma4-ns{margin:2rem}.ma5-ns{margin:4rem}.ma6-ns{margin:8rem}.ma7-ns{margin:16rem}.ml0-ns{margin-left:0}.ml1-ns{margin-left:.25rem}.ml2-ns{margin-left:.5rem}.ml3-ns{margin-left:1rem}.ml4-ns{margin-left:2rem}.ml5-ns{margin-left:4rem}.ml6-ns{margin-left:8rem}.ml7-ns{margin-left:16rem}.mr0-ns{margin-right:0}.mr1-ns{margin-right:.25rem}.mr2-ns{margin-right:.5rem}.mr3-ns{margin-right:1rem}.mr4-ns{margin-right:2rem}.mr5-ns{margin-right:4rem}.mr6-ns{margin-right:8rem}.mr7-ns{margin-right:16rem}.mb0-ns{margin-bottom:0}.mb1-ns{margin-bottom:.25rem}.mb2-ns{margin-bottom:.5rem}.mb3-ns{margin-bottom:1rem}.mb4-ns{margin-bottom:2rem}.mb5-ns{margin-bottom:4rem}.mb6-ns{margin-bottom:8rem}.mb7-ns{margin-bottom:16rem}.mt0-ns{margin-top:0}.mt1-ns{margin-top:.25rem}.mt2-ns{margin-top:.5rem}.mt3-ns{margin-top:1rem}.mt4-ns{margin-top:2rem}.mt5-ns{margin-top:4rem}.mt6-ns{margin-top:8rem}.mt7-ns{margin-top:16rem}.mv0-ns{margin-top:0;margin-bottom:0}.mv1-ns{margin-top:.25rem;margin-bottom:.25rem}.mv2-ns{margin-top:.5rem;margin-bottom:.5rem}.mv3-ns{margin-top:1rem;margin-bottom:1rem}.mv4-ns{margin-top:2rem;margin-bottom:2rem}.mv5-ns{margin-top:4rem;margin-bottom:4rem}.mv6-ns{margin-top:8rem;margin-bottom:8rem}.mv7-ns{margin-top:16rem;margin-bottom:16rem}.mh0-ns{margin-left:0;margin-right:0}.mh1-ns{margin-left:.25rem;margin-right:.25rem}.mh2-ns{margin-left:.5rem;margin-right:.5rem}.mh3-ns{margin-left:1rem;margin-right:1rem}.mh4-ns{margin-left:2rem;margin-right:2rem}.mh5-ns{margin-left:4rem;margin-right:4rem}.mh6-ns{margin-left:8rem;margin-right:8rem}.mh7-ns{margin-left:16rem;margin-right:16rem}.na1-ns{margin:-.25rem}.na2-ns{margin:-.5rem}.na3-ns{margin:-1rem}.na4-ns{margin:-2rem}.na5-ns{margin:-4rem}.na6-ns{margin:-8rem}.na7-ns{margin:-16rem}.nl1-ns{margin-left:-.25rem}.nl2-ns{margin-left:-.5rem}.nl3-ns{margin-left:-1rem}.nl4-ns{margin-left:-2rem}.nl5-ns{margin-left:-4rem}.nl6-ns{margin-left:-8rem}.nl7-ns{margin-left:-16rem}.nr1-ns{margin-right:-.25rem}.nr2-ns{margin-right:-.5rem}.nr3-ns{margin-right:-1rem}.nr4-ns{margin-right:-2rem}.nr5-ns{margin-right:-4rem}.nr6-ns{margin-right:-8rem}.nr7-ns{margin-right:-16rem}.nb1-ns{margin-bottom:-.25rem}.nb2-ns{margin-bottom:-.5rem}.nb3-ns{margin-bottom:-1rem}.nb4-ns{margin-bottom:-2rem}.nb5-ns{margin-bottom:-4rem}.nb6-ns{margin-bottom:-8rem}.nb7-ns{margin-bottom:-16rem}.nt1-ns{margin-top:-.25rem}.nt2-ns{margin-top:-.5rem}.nt3-ns{margin-top:-1rem}.nt4-ns{margin-top:-2rem}.nt5-ns{margin-top:-4rem}.nt6-ns{margin-top:-8rem}.nt7-ns{margin-top:-16rem}.strike-ns{text-decoration:line-through}.underline-ns{text-decoration:underline}.no-underline-ns{text-decoration:none}.tl-ns{text-align:left}.tr-ns{text-align:right}.tc-ns{text-align:center}.tj-ns{text-align:justify}.ttc-ns{text-transform:capitalize}.ttl-ns{text-transform:lowercase}.ttu-ns{text-transform:uppercase}.ttn-ns{text-transform:none}.f-6-ns,.f-headline-ns{font-size:6rem}.f-5-ns,.f-subheadline-ns{font-size:5rem}.f1-ns{font-size:3rem}.f2-ns{font-size:2.25rem}.f3-ns{font-size:1.5rem}.f4-ns{font-size:1.25rem}.f5-ns{font-size:1rem}.f6-ns{font-size:.875rem}.f7-ns{font-size:.75rem}.measure-ns{max-width:30em}.measure-wide-ns{max-width:34em}.measure-narrow-ns{max-width:20em}.indent-ns{text-indent:1em;margin-top:0;margin-bottom:0}.small-caps-ns{font-variant:small-caps}.truncate-ns{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.center-ns{margin-left:auto}.center-ns,.mr-auto-ns{margin-right:auto}.ml-auto-ns{margin-left:auto}.clip-ns{position:fixed!important;_position:absolute!important;clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px)}.ws-normal-ns{white-space:normal}.nowrap-ns{white-space:nowrap}.pre-ns{white-space:pre}.v-base-ns{vertical-align:baseline}.v-mid-ns{vertical-align:middle}.v-top-ns{vertical-align:top}.v-btm-ns{vertical-align:bottom}}@media screen and (min-width:30em) and (max-width:60em){.aspect-ratio-m{height:0;position:relative}.aspect-ratio--16x9-m{padding-bottom:56.25%}.aspect-ratio--9x16-m{padding-bottom:177.77%}.aspect-ratio--4x3-m{padding-bottom:75%}.aspect-ratio--3x4-m{padding-bottom:133.33%}.aspect-ratio--6x4-m{padding-bottom:66.6%}.aspect-ratio--4x6-m{padding-bottom:150%}.aspect-ratio--8x5-m{padding-bottom:62.5%}.aspect-ratio--5x8-m{padding-bottom:160%}.aspect-ratio--7x5-m{padding-bottom:71.42%}.aspect-ratio--5x7-m{padding-bottom:140%}.aspect-ratio--1x1-m{padding-bottom:100%}.aspect-ratio--object-m{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:100}.cover-m{background-size:cover!important}.contain-m{background-size:contain!important}.bg-center-m{background-position:50%}.bg-center-m,.bg-top-m{background-repeat:no-repeat}.bg-top-m{background-position:top}.bg-right-m{background-position:100%}.bg-bottom-m,.bg-right-m{background-repeat:no-repeat}.bg-bottom-m{background-position:bottom}.bg-left-m{background-repeat:no-repeat;background-position:0}.outline-m{outline:1px solid}.outline-transparent-m{outline:1px solid transparent}.outline-0-m{outline:0}.ba-m{border-style:solid;border-width:1px}.bt-m{border-top-style:solid;border-top-width:1px}.br-m{border-right-style:solid;border-right-width:1px}.bb-m{border-bottom-style:solid;border-bottom-width:1px}.bl-m{border-left-style:solid;border-left-width:1px}.bn-m{border-style:none;border-width:0}.br0-m{border-radius:0}.br1-m{border-radius:.125rem}.br2-m{border-radius:.25rem}.br3-m{border-radius:.5rem}.br4-m{border-radius:1rem}.br-100-m{border-radius:100%}.br-pill-m{border-radius:9999px}.br--bottom-m{border-top-left-radius:0;border-top-right-radius:0}.br--top-m{border-bottom-right-radius:0}.br--right-m,.br--top-m{border-bottom-left-radius:0}.br--right-m{border-top-left-radius:0}.br--left-m{border-top-right-radius:0;border-bottom-right-radius:0}.br-inherit-m{border-radius:inherit}.br-initial-m{border-radius:initial}.br-unset-m{border-radius:unset}.b--dotted-m{border-style:dotted}.b--dashed-m{border-style:dashed}.b--solid-m{border-style:solid}.b--none-m{border-style:none}.bw0-m{border-width:0}.bw1-m{border-width:.125rem}.bw2-m{border-width:.25rem}.bw3-m{border-width:.5rem}.bw4-m{border-width:1rem}.bw5-m{border-width:2rem}.bt-0-m{border-top-width:0}.br-0-m{border-right-width:0}.bb-0-m{border-bottom-width:0}.bl-0-m{border-left-width:0}.shadow-1-m{box-shadow:0 0 4px 2px rgba(0,0,0,.2)}.shadow-2-m{box-shadow:0 0 8px 2px rgba(0,0,0,.2)}.shadow-3-m{box-shadow:2px 2px 4px 2px rgba(0,0,0,.2)}.shadow-4-m{box-shadow:2px 2px 8px 0 rgba(0,0,0,.2)}.shadow-5-m{box-shadow:4px 4px 8px 0 rgba(0,0,0,.2)}.top-0-m{top:0}.left-0-m{left:0}.right-0-m{right:0}.bottom-0-m{bottom:0}.top-1-m{top:1rem}.left-1-m{left:1rem}.right-1-m{right:1rem}.bottom-1-m{bottom:1rem}.top-2-m{top:2rem}.left-2-m{left:2rem}.right-2-m{right:2rem}.bottom-2-m{bottom:2rem}.top--1-m{top:-1rem}.right--1-m{right:-1rem}.bottom--1-m{bottom:-1rem}.left--1-m{left:-1rem}.top--2-m{top:-2rem}.right--2-m{right:-2rem}.bottom--2-m{bottom:-2rem}.left--2-m{left:-2rem}.absolute--fill-m{top:0;right:0;bottom:0;left:0}.cl-m{clear:left}.cr-m{clear:right}.cb-m{clear:both}.cn-m{clear:none}.dn-m{display:none}.di-m{display:inline}.db-m{display:block}.dib-m{display:inline-block}.dit-m{display:inline-table}.dt-m{display:table}.dtc-m{display:table-cell}.dt-row-m{display:table-row}.dt-row-group-m{display:table-row-group}.dt-column-m{display:table-column}.dt-column-group-m{display:table-column-group}.dt--fixed-m{table-layout:fixed;width:100%}.flex-m{display:flex}.inline-flex-m{display:inline-flex}.flex-auto-m{flex:1 1 auto;min-width:0;min-height:0}.flex-none-m{flex:none}.flex-column-m{flex-direction:column}.flex-row-m{flex-direction:row}.flex-wrap-m{flex-wrap:wrap}.flex-nowrap-m{flex-wrap:nowrap}.flex-wrap-reverse-m{flex-wrap:wrap-reverse}.flex-column-reverse-m{flex-direction:column-reverse}.flex-row-reverse-m{flex-direction:row-reverse}.items-start-m{align-items:flex-start}.items-end-m{align-items:flex-end}.items-center-m{align-items:center}.items-baseline-m{align-items:baseline}.items-stretch-m{align-items:stretch}.self-start-m{align-self:flex-start}.self-end-m{align-self:flex-end}.self-center-m{align-self:center}.self-baseline-m{align-self:baseline}.self-stretch-m{align-self:stretch}.justify-start-m{justify-content:flex-start}.justify-end-m{justify-content:flex-end}.justify-center-m{justify-content:center}.justify-between-m{justify-content:space-between}.justify-around-m{justify-content:space-around}.content-start-m{align-content:flex-start}.content-end-m{align-content:flex-end}.content-center-m{align-content:center}.content-between-m{align-content:space-between}.content-around-m{align-content:space-around}.content-stretch-m{align-content:stretch}.order-0-m{order:0}.order-1-m{order:1}.order-2-m{order:2}.order-3-m{order:3}.order-4-m{order:4}.order-5-m{order:5}.order-6-m{order:6}.order-7-m{order:7}.order-8-m{order:8}.order-last-m{order:99999}.flex-grow-0-m{flex-grow:0}.flex-grow-1-m{flex-grow:1}.flex-shrink-0-m{flex-shrink:0}.flex-shrink-1-m{flex-shrink:1}.fl-m{float:left}.fl-m,.fr-m{_display:inline}.fr-m{float:right}.fn-m{float:none}.i-m{font-style:italic}.fs-normal-m{font-style:normal}.normal-m{font-weight:400}.b-m{font-weight:700}.fw1-m{font-weight:100}.fw2-m{font-weight:200}.fw3-m{font-weight:300}.fw4-m{font-weight:400}.fw5-m{font-weight:500}.fw6-m{font-weight:600}.fw7-m{font-weight:700}.fw8-m{font-weight:800}.fw9-m{font-weight:900}.h1-m{height:1rem}.h2-m{height:2rem}.h3-m{height:4rem}.h4-m{height:8rem}.h5-m{height:16rem}.h-25-m{height:25%}.h-50-m{height:50%}.h-75-m{height:75%}.h-100-m{height:100%}.min-h-100-m{min-height:100%}.vh-25-m{height:25vh}.vh-50-m{height:50vh}.vh-75-m{height:75vh}.vh-100-m{height:100vh}.min-vh-100-m{min-height:100vh}.h-auto-m{height:auto}.h-inherit-m{height:inherit}.tracked-m{letter-spacing:.1em}.tracked-tight-m{letter-spacing:-.05em}.tracked-mega-m{letter-spacing:.25em}.lh-solid-m{line-height:1}.lh-title-m{line-height:1.25}.lh-copy-m{line-height:1.5}.mw-100-m{max-width:100%}.mw1-m{max-width:1rem}.mw2-m{max-width:2rem}.mw3-m{max-width:4rem}.mw4-m{max-width:8rem}.mw5-m{max-width:16rem}.mw6-m{max-width:32rem}.mw7-m{max-width:48rem}.mw8-m{max-width:64rem}.mw9-m{max-width:96rem}.mw-none-m{max-width:none}.w1-m{width:1rem}.w2-m{width:2rem}.w3-m{width:4rem}.w4-m{width:8rem}.w5-m{width:16rem}.w-10-m{width:10%}.w-20-m{width:20%}.w-25-m{width:25%}.w-30-m{width:30%}.w-33-m{width:33%}.w-34-m{width:34%}.w-40-m{width:40%}.w-50-m{width:50%}.w-60-m{width:60%}.w-70-m{width:70%}.w-75-m{width:75%}.w-80-m{width:80%}.w-90-m{width:90%}.w-100-m{width:100%}.w-third-m{width:33.33333%}.w-two-thirds-m{width:66.66667%}.w-auto-m{width:auto}.overflow-visible-m{overflow:visible}.overflow-hidden-m{overflow:hidden}.overflow-scroll-m{overflow:scroll}.overflow-auto-m{overflow:auto}.overflow-x-visible-m{overflow-x:visible}.overflow-x-hidden-m{overflow-x:hidden}.overflow-x-scroll-m{overflow-x:scroll}.overflow-x-auto-m{overflow-x:auto}.overflow-y-visible-m{overflow-y:visible}.overflow-y-hidden-m{overflow-y:hidden}.overflow-y-scroll-m{overflow-y:scroll}.overflow-y-auto-m{overflow-y:auto}.static-m{position:static}.relative-m{position:relative}.absolute-m{position:absolute}.fixed-m{position:fixed}.rotate-45-m{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.rotate-90-m{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.rotate-135-m{-webkit-transform:rotate(135deg);transform:rotate(135deg)}.rotate-180-m{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.rotate-225-m{-webkit-transform:rotate(225deg);transform:rotate(225deg)}.rotate-270-m{-webkit-transform:rotate(270deg);transform:rotate(270deg)}.rotate-315-m{-webkit-transform:rotate(315deg);transform:rotate(315deg)}.pa0-m{padding:0}.pa1-m{padding:.25rem}.pa2-m{padding:.5rem}.pa3-m{padding:1rem}.pa4-m{padding:2rem}.pa5-m{padding:4rem}.pa6-m{padding:8rem}.pa7-m{padding:16rem}.pl0-m{padding-left:0}.pl1-m{padding-left:.25rem}.pl2-m{padding-left:.5rem}.pl3-m{padding-left:1rem}.pl4-m{padding-left:2rem}.pl5-m{padding-left:4rem}.pl6-m{padding-left:8rem}.pl7-m{padding-left:16rem}.pr0-m{padding-right:0}.pr1-m{padding-right:.25rem}.pr2-m{padding-right:.5rem}.pr3-m{padding-right:1rem}.pr4-m{padding-right:2rem}.pr5-m{padding-right:4rem}.pr6-m{padding-right:8rem}.pr7-m{padding-right:16rem}.pb0-m{padding-bottom:0}.pb1-m{padding-bottom:.25rem}.pb2-m{padding-bottom:.5rem}.pb3-m{padding-bottom:1rem}.pb4-m{padding-bottom:2rem}.pb5-m{padding-bottom:4rem}.pb6-m{padding-bottom:8rem}.pb7-m{padding-bottom:16rem}.pt0-m{padding-top:0}.pt1-m{padding-top:.25rem}.pt2-m{padding-top:.5rem}.pt3-m{padding-top:1rem}.pt4-m{padding-top:2rem}.pt5-m{padding-top:4rem}.pt6-m{padding-top:8rem}.pt7-m{padding-top:16rem}.pv0-m{padding-top:0;padding-bottom:0}.pv1-m{padding-top:.25rem;padding-bottom:.25rem}.pv2-m{padding-top:.5rem;padding-bottom:.5rem}.pv3-m{padding-top:1rem;padding-bottom:1rem}.pv4-m{padding-top:2rem;padding-bottom:2rem}.pv5-m{padding-top:4rem;padding-bottom:4rem}.pv6-m{padding-top:8rem;padding-bottom:8rem}.pv7-m{padding-top:16rem;padding-bottom:16rem}.ph0-m{padding-left:0;padding-right:0}.ph1-m{padding-left:.25rem;padding-right:.25rem}.ph2-m{padding-left:.5rem;padding-right:.5rem}.ph3-m{padding-left:1rem;padding-right:1rem}.ph4-m{padding-left:2rem;padding-right:2rem}.ph5-m{padding-left:4rem;padding-right:4rem}.ph6-m{padding-left:8rem;padding-right:8rem}.ph7-m{padding-left:16rem;padding-right:16rem}.ma0-m{margin:0}.ma1-m{margin:.25rem}.ma2-m{margin:.5rem}.ma3-m{margin:1rem}.ma4-m{margin:2rem}.ma5-m{margin:4rem}.ma6-m{margin:8rem}.ma7-m{margin:16rem}.ml0-m{margin-left:0}.ml1-m{margin-left:.25rem}.ml2-m{margin-left:.5rem}.ml3-m{margin-left:1rem}.ml4-m{margin-left:2rem}.ml5-m{margin-left:4rem}.ml6-m{margin-left:8rem}.ml7-m{margin-left:16rem}.mr0-m{margin-right:0}.mr1-m{margin-right:.25rem}.mr2-m{margin-right:.5rem}.mr3-m{margin-right:1rem}.mr4-m{margin-right:2rem}.mr5-m{margin-right:4rem}.mr6-m{margin-right:8rem}.mr7-m{margin-right:16rem}.mb0-m{margin-bottom:0}.mb1-m{margin-bottom:.25rem}.mb2-m{margin-bottom:.5rem}.mb3-m{margin-bottom:1rem}.mb4-m{margin-bottom:2rem}.mb5-m{margin-bottom:4rem}.mb6-m{margin-bottom:8rem}.mb7-m{margin-bottom:16rem}.mt0-m{margin-top:0}.mt1-m{margin-top:.25rem}.mt2-m{margin-top:.5rem}.mt3-m{margin-top:1rem}.mt4-m{margin-top:2rem}.mt5-m{margin-top:4rem}.mt6-m{margin-top:8rem}.mt7-m{margin-top:16rem}.mv0-m{margin-top:0;margin-bottom:0}.mv1-m{margin-top:.25rem;margin-bottom:.25rem}.mv2-m{margin-top:.5rem;margin-bottom:.5rem}.mv3-m{margin-top:1rem;margin-bottom:1rem}.mv4-m{margin-top:2rem;margin-bottom:2rem}.mv5-m{margin-top:4rem;margin-bottom:4rem}.mv6-m{margin-top:8rem;margin-bottom:8rem}.mv7-m{margin-top:16rem;margin-bottom:16rem}.mh0-m{margin-left:0;margin-right:0}.mh1-m{margin-left:.25rem;margin-right:.25rem}.mh2-m{margin-left:.5rem;margin-right:.5rem}.mh3-m{margin-left:1rem;margin-right:1rem}.mh4-m{margin-left:2rem;margin-right:2rem}.mh5-m{margin-left:4rem;margin-right:4rem}.mh6-m{margin-left:8rem;margin-right:8rem}.mh7-m{margin-left:16rem;margin-right:16rem}.na1-m{margin:-.25rem}.na2-m{margin:-.5rem}.na3-m{margin:-1rem}.na4-m{margin:-2rem}.na5-m{margin:-4rem}.na6-m{margin:-8rem}.na7-m{margin:-16rem}.nl1-m{margin-left:-.25rem}.nl2-m{margin-left:-.5rem}.nl3-m{margin-left:-1rem}.nl4-m{margin-left:-2rem}.nl5-m{margin-left:-4rem}.nl6-m{margin-left:-8rem}.nl7-m{margin-left:-16rem}.nr1-m{margin-right:-.25rem}.nr2-m{margin-right:-.5rem}.nr3-m{margin-right:-1rem}.nr4-m{margin-right:-2rem}.nr5-m{margin-right:-4rem}.nr6-m{margin-right:-8rem}.nr7-m{margin-right:-16rem}.nb1-m{margin-bottom:-.25rem}.nb2-m{margin-bottom:-.5rem}.nb3-m{margin-bottom:-1rem}.nb4-m{margin-bottom:-2rem}.nb5-m{margin-bottom:-4rem}.nb6-m{margin-bottom:-8rem}.nb7-m{margin-bottom:-16rem}.nt1-m{margin-top:-.25rem}.nt2-m{margin-top:-.5rem}.nt3-m{margin-top:-1rem}.nt4-m{margin-top:-2rem}.nt5-m{margin-top:-4rem}.nt6-m{margin-top:-8rem}.nt7-m{margin-top:-16rem}.strike-m{text-decoration:line-through}.underline-m{text-decoration:underline}.no-underline-m{text-decoration:none}.tl-m{text-align:left}.tr-m{text-align:right}.tc-m{text-align:center}.tj-m{text-align:justify}.ttc-m{text-transform:capitalize}.ttl-m{text-transform:lowercase}.ttu-m{text-transform:uppercase}.ttn-m{text-transform:none}.f-6-m,.f-headline-m{font-size:6rem}.f-5-m,.f-subheadline-m{font-size:5rem}.f1-m{font-size:3rem}.f2-m{font-size:2.25rem}.f3-m{font-size:1.5rem}.f4-m{font-size:1.25rem}.f5-m{font-size:1rem}.f6-m{font-size:.875rem}.f7-m{font-size:.75rem}.measure-m{max-width:30em}.measure-wide-m{max-width:34em}.measure-narrow-m{max-width:20em}.indent-m{text-indent:1em;margin-top:0;margin-bottom:0}.small-caps-m{font-variant:small-caps}.truncate-m{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.center-m{margin-left:auto}.center-m,.mr-auto-m{margin-right:auto}.ml-auto-m{margin-left:auto}.clip-m{position:fixed!important;_position:absolute!important;clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px)}.ws-normal-m{white-space:normal}.nowrap-m{white-space:nowrap}.pre-m{white-space:pre}.v-base-m{vertical-align:baseline}.v-mid-m{vertical-align:middle}.v-top-m{vertical-align:top}.v-btm-m{vertical-align:bottom}}@media screen and (min-width:60em){.aspect-ratio-l{height:0;position:relative}.aspect-ratio--16x9-l{padding-bottom:56.25%}.aspect-ratio--9x16-l{padding-bottom:177.77%}.aspect-ratio--4x3-l{padding-bottom:75%}.aspect-ratio--3x4-l{padding-bottom:133.33%}.aspect-ratio--6x4-l{padding-bottom:66.6%}.aspect-ratio--4x6-l{padding-bottom:150%}.aspect-ratio--8x5-l{padding-bottom:62.5%}.aspect-ratio--5x8-l{padding-bottom:160%}.aspect-ratio--7x5-l{padding-bottom:71.42%}.aspect-ratio--5x7-l{padding-bottom:140%}.aspect-ratio--1x1-l{padding-bottom:100%}.aspect-ratio--object-l{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:100}.cover-l{background-size:cover!important}.contain-l{background-size:contain!important}.bg-center-l{background-position:50%}.bg-center-l,.bg-top-l{background-repeat:no-repeat}.bg-top-l{background-position:top}.bg-right-l{background-position:100%}.bg-bottom-l,.bg-right-l{background-repeat:no-repeat}.bg-bottom-l{background-position:bottom}.bg-left-l{background-repeat:no-repeat;background-position:0}.outline-l{outline:1px solid}.outline-transparent-l{outline:1px solid transparent}.outline-0-l{outline:0}.ba-l{border-style:solid;border-width:1px}.bt-l{border-top-style:solid;border-top-width:1px}.br-l{border-right-style:solid;border-right-width:1px}.bb-l{border-bottom-style:solid;border-bottom-width:1px}.bl-l{border-left-style:solid;border-left-width:1px}.bn-l{border-style:none;border-width:0}.br0-l{border-radius:0}.br1-l{border-radius:.125rem}.br2-l{border-radius:.25rem}.br3-l{border-radius:.5rem}.br4-l{border-radius:1rem}.br-100-l{border-radius:100%}.br-pill-l{border-radius:9999px}.br--bottom-l{border-top-left-radius:0;border-top-right-radius:0}.br--top-l{border-bottom-right-radius:0}.br--right-l,.br--top-l{border-bottom-left-radius:0}.br--right-l{border-top-left-radius:0}.br--left-l{border-top-right-radius:0;border-bottom-right-radius:0}.br-inherit-l{border-radius:inherit}.br-initial-l{border-radius:initial}.br-unset-l{border-radius:unset}.b--dotted-l{border-style:dotted}.b--dashed-l{border-style:dashed}.b--solid-l{border-style:solid}.b--none-l{border-style:none}.bw0-l{border-width:0}.bw1-l{border-width:.125rem}.bw2-l{border-width:.25rem}.bw3-l{border-width:.5rem}.bw4-l{border-width:1rem}.bw5-l{border-width:2rem}.bt-0-l{border-top-width:0}.br-0-l{border-right-width:0}.bb-0-l{border-bottom-width:0}.bl-0-l{border-left-width:0}.shadow-1-l{box-shadow:0 0 4px 2px rgba(0,0,0,.2)}.shadow-2-l{box-shadow:0 0 8px 2px rgba(0,0,0,.2)}.shadow-3-l{box-shadow:2px 2px 4px 2px rgba(0,0,0,.2)}.shadow-4-l{box-shadow:2px 2px 8px 0 rgba(0,0,0,.2)}.shadow-5-l{box-shadow:4px 4px 8px 0 rgba(0,0,0,.2)}.top-0-l{top:0}.left-0-l{left:0}.right-0-l{right:0}.bottom-0-l{bottom:0}.top-1-l{top:1rem}.left-1-l{left:1rem}.right-1-l{right:1rem}.bottom-1-l{bottom:1rem}.top-2-l{top:2rem}.left-2-l{left:2rem}.right-2-l{right:2rem}.bottom-2-l{bottom:2rem}.top--1-l{top:-1rem}.right--1-l{right:-1rem}.bottom--1-l{bottom:-1rem}.left--1-l{left:-1rem}.top--2-l{top:-2rem}.right--2-l{right:-2rem}.bottom--2-l{bottom:-2rem}.left--2-l{left:-2rem}.absolute--fill-l{top:0;right:0;bottom:0;left:0}.cl-l{clear:left}.cr-l{clear:right}.cb-l{clear:both}.cn-l{clear:none}.dn-l{display:none}.di-l{display:inline}.db-l{display:block}.dib-l{display:inline-block}.dit-l{display:inline-table}.dt-l{display:table}.dtc-l{display:table-cell}.dt-row-l{display:table-row}.dt-row-group-l{display:table-row-group}.dt-column-l{display:table-column}.dt-column-group-l{display:table-column-group}.dt--fixed-l{table-layout:fixed;width:100%}.flex-l{display:flex}.inline-flex-l{display:inline-flex}.flex-auto-l{flex:1 1 auto;min-width:0;min-height:0}.flex-none-l{flex:none}.flex-column-l{flex-direction:column}.flex-row-l{flex-direction:row}.flex-wrap-l{flex-wrap:wrap}.flex-nowrap-l{flex-wrap:nowrap}.flex-wrap-reverse-l{flex-wrap:wrap-reverse}.flex-column-reverse-l{flex-direction:column-reverse}.flex-row-reverse-l{flex-direction:row-reverse}.items-start-l{align-items:flex-start}.items-end-l{align-items:flex-end}.items-center-l{align-items:center}.items-baseline-l{align-items:baseline}.items-stretch-l{align-items:stretch}.self-start-l{align-self:flex-start}.self-end-l{align-self:flex-end}.self-center-l{align-self:center}.self-baseline-l{align-self:baseline}.self-stretch-l{align-self:stretch}.justify-start-l{justify-content:flex-start}.justify-end-l{justify-content:flex-end}.justify-center-l{justify-content:center}.justify-between-l{justify-content:space-between}.justify-around-l{justify-content:space-around}.content-start-l{align-content:flex-start}.content-end-l{align-content:flex-end}.content-center-l{align-content:center}.content-between-l{align-content:space-between}.content-around-l{align-content:space-around}.content-stretch-l{align-content:stretch}.order-0-l{order:0}.order-1-l{order:1}.order-2-l{order:2}.order-3-l{order:3}.order-4-l{order:4}.order-5-l{order:5}.order-6-l{order:6}.order-7-l{order:7}.order-8-l{order:8}.order-last-l{order:99999}.flex-grow-0-l{flex-grow:0}.flex-grow-1-l{flex-grow:1}.flex-shrink-0-l{flex-shrink:0}.flex-shrink-1-l{flex-shrink:1}.fl-l{float:left}.fl-l,.fr-l{_display:inline}.fr-l{float:right}.fn-l{float:none}.i-l{font-style:italic}.fs-normal-l{font-style:normal}.normal-l{font-weight:400}.b-l{font-weight:700}.fw1-l{font-weight:100}.fw2-l{font-weight:200}.fw3-l{font-weight:300}.fw4-l{font-weight:400}.fw5-l{font-weight:500}.fw6-l{font-weight:600}.fw7-l{font-weight:700}.fw8-l{font-weight:800}.fw9-l{font-weight:900}.h1-l{height:1rem}.h2-l{height:2rem}.h3-l{height:4rem}.h4-l{height:8rem}.h5-l{height:16rem}.h-25-l{height:25%}.h-50-l{height:50%}.h-75-l{height:75%}.h-100-l{height:100%}.min-h-100-l{min-height:100%}.vh-25-l{height:25vh}.vh-50-l{height:50vh}.vh-75-l{height:75vh}.vh-100-l{height:100vh}.min-vh-100-l{min-height:100vh}.h-auto-l{height:auto}.h-inherit-l{height:inherit}.tracked-l{letter-spacing:.1em}.tracked-tight-l{letter-spacing:-.05em}.tracked-mega-l{letter-spacing:.25em}.lh-solid-l{line-height:1}.lh-title-l{line-height:1.25}.lh-copy-l{line-height:1.5}.mw-100-l{max-width:100%}.mw1-l{max-width:1rem}.mw2-l{max-width:2rem}.mw3-l{max-width:4rem}.mw4-l{max-width:8rem}.mw5-l{max-width:16rem}.mw6-l{max-width:32rem}.mw7-l{max-width:48rem}.mw8-l{max-width:64rem}.mw9-l{max-width:96rem}.mw-none-l{max-width:none}.w1-l{width:1rem}.w2-l{width:2rem}.w3-l{width:4rem}.w4-l{width:8rem}.w5-l{width:16rem}.w-10-l{width:10%}.w-20-l{width:20%}.w-25-l{width:25%}.w-30-l{width:30%}.w-33-l{width:33%}.w-34-l{width:34%}.w-40-l{width:40%}.w-50-l{width:50%}.w-60-l{width:60%}.w-70-l{width:70%}.w-75-l{width:75%}.w-80-l{width:80%}.w-90-l{width:90%}.w-100-l{width:100%}.w-third-l{width:33.33333%}.w-two-thirds-l{width:66.66667%}.w-auto-l{width:auto}.overflow-visible-l{overflow:visible}.overflow-hidden-l{overflow:hidden}.overflow-scroll-l{overflow:scroll}.overflow-auto-l{overflow:auto}.overflow-x-visible-l{overflow-x:visible}.overflow-x-hidden-l{overflow-x:hidden}.overflow-x-scroll-l{overflow-x:scroll}.overflow-x-auto-l{overflow-x:auto}.overflow-y-visible-l{overflow-y:visible}.overflow-y-hidden-l{overflow-y:hidden}.overflow-y-scroll-l{overflow-y:scroll}.overflow-y-auto-l{overflow-y:auto}.static-l{position:static}.relative-l{position:relative}.absolute-l{position:absolute}.fixed-l{position:fixed}.rotate-45-l{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.rotate-90-l{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.rotate-135-l{-webkit-transform:rotate(135deg);transform:rotate(135deg)}.rotate-180-l{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.rotate-225-l{-webkit-transform:rotate(225deg);transform:rotate(225deg)}.rotate-270-l{-webkit-transform:rotate(270deg);transform:rotate(270deg)}.rotate-315-l{-webkit-transform:rotate(315deg);transform:rotate(315deg)}.pa0-l{padding:0}.pa1-l{padding:.25rem}.pa2-l{padding:.5rem}.pa3-l{padding:1rem}.pa4-l{padding:2rem}.pa5-l{padding:4rem}.pa6-l{padding:8rem}.pa7-l{padding:16rem}.pl0-l{padding-left:0}.pl1-l{padding-left:.25rem}.pl2-l{padding-left:.5rem}.pl3-l{padding-left:1rem}.pl4-l{padding-left:2rem}.pl5-l{padding-left:4rem}.pl6-l{padding-left:8rem}.pl7-l{padding-left:16rem}.pr0-l{padding-right:0}.pr1-l{padding-right:.25rem}.pr2-l{padding-right:.5rem}.pr3-l{padding-right:1rem}.pr4-l{padding-right:2rem}.pr5-l{padding-right:4rem}.pr6-l{padding-right:8rem}.pr7-l{padding-right:16rem}.pb0-l{padding-bottom:0}.pb1-l{padding-bottom:.25rem}.pb2-l{padding-bottom:.5rem}.pb3-l{padding-bottom:1rem}.pb4-l{padding-bottom:2rem}.pb5-l{padding-bottom:4rem}.pb6-l{padding-bottom:8rem}.pb7-l{padding-bottom:16rem}.pt0-l{padding-top:0}.pt1-l{padding-top:.25rem}.pt2-l{padding-top:.5rem}.pt3-l{padding-top:1rem}.pt4-l{padding-top:2rem}.pt5-l{padding-top:4rem}.pt6-l{padding-top:8rem}.pt7-l{padding-top:16rem}.pv0-l{padding-top:0;padding-bottom:0}.pv1-l{padding-top:.25rem;padding-bottom:.25rem}.pv2-l{padding-top:.5rem;padding-bottom:.5rem}.pv3-l{padding-top:1rem;padding-bottom:1rem}.pv4-l{padding-top:2rem;padding-bottom:2rem}.pv5-l{padding-top:4rem;padding-bottom:4rem}.pv6-l{padding-top:8rem;padding-bottom:8rem}.pv7-l{padding-top:16rem;padding-bottom:16rem}.ph0-l{padding-left:0;padding-right:0}.ph1-l{padding-left:.25rem;padding-right:.25rem}.ph2-l{padding-left:.5rem;padding-right:.5rem}.ph3-l{padding-left:1rem;padding-right:1rem}.ph4-l{padding-left:2rem;padding-right:2rem}.ph5-l{padding-left:4rem;padding-right:4rem}.ph6-l{padding-left:8rem;padding-right:8rem}.ph7-l{padding-left:16rem;padding-right:16rem}.ma0-l{margin:0}.ma1-l{margin:.25rem}.ma2-l{margin:.5rem}.ma3-l{margin:1rem}.ma4-l{margin:2rem}.ma5-l{margin:4rem}.ma6-l{margin:8rem}.ma7-l{margin:16rem}.ml0-l{margin-left:0}.ml1-l{margin-left:.25rem}.ml2-l{margin-left:.5rem}.ml3-l{margin-left:1rem}.ml4-l{margin-left:2rem}.ml5-l{margin-left:4rem}.ml6-l{margin-left:8rem}.ml7-l{margin-left:16rem}.mr0-l{margin-right:0}.mr1-l{margin-right:.25rem}.mr2-l{margin-right:.5rem}.mr3-l{margin-right:1rem}.mr4-l{margin-right:2rem}.mr5-l{margin-right:4rem}.mr6-l{margin-right:8rem}.mr7-l{margin-right:16rem}.mb0-l{margin-bottom:0}.mb1-l{margin-bottom:.25rem}.mb2-l{margin-bottom:.5rem}.mb3-l{margin-bottom:1rem}.mb4-l{margin-bottom:2rem}.mb5-l{margin-bottom:4rem}.mb6-l{margin-bottom:8rem}.mb7-l{margin-bottom:16rem}.mt0-l{margin-top:0}.mt1-l{margin-top:.25rem}.mt2-l{margin-top:.5rem}.mt3-l{margin-top:1rem}.mt4-l{margin-top:2rem}.mt5-l{margin-top:4rem}.mt6-l{margin-top:8rem}.mt7-l{margin-top:16rem}.mv0-l{margin-top:0;margin-bottom:0}.mv1-l{margin-top:.25rem;margin-bottom:.25rem}.mv2-l{margin-top:.5rem;margin-bottom:.5rem}.mv3-l{margin-top:1rem;margin-bottom:1rem}.mv4-l{margin-top:2rem;margin-bottom:2rem}.mv5-l{margin-top:4rem;margin-bottom:4rem}.mv6-l{margin-top:8rem;margin-bottom:8rem}.mv7-l{margin-top:16rem;margin-bottom:16rem}.mh0-l{margin-left:0;margin-right:0}.mh1-l{margin-left:.25rem;margin-right:.25rem}.mh2-l{margin-left:.5rem;margin-right:.5rem}.mh3-l{margin-left:1rem;margin-right:1rem}.mh4-l{margin-left:2rem;margin-right:2rem}.mh5-l{margin-left:4rem;margin-right:4rem}.mh6-l{margin-left:8rem;margin-right:8rem}.mh7-l{margin-left:16rem;margin-right:16rem}.na1-l{margin:-.25rem}.na2-l{margin:-.5rem}.na3-l{margin:-1rem}.na4-l{margin:-2rem}.na5-l{margin:-4rem}.na6-l{margin:-8rem}.na7-l{margin:-16rem}.nl1-l{margin-left:-.25rem}.nl2-l{margin-left:-.5rem}.nl3-l{margin-left:-1rem}.nl4-l{margin-left:-2rem}.nl5-l{margin-left:-4rem}.nl6-l{margin-left:-8rem}.nl7-l{margin-left:-16rem}.nr1-l{margin-right:-.25rem}.nr2-l{margin-right:-.5rem}.nr3-l{margin-right:-1rem}.nr4-l{margin-right:-2rem}.nr5-l{margin-right:-4rem}.nr6-l{margin-right:-8rem}.nr7-l{margin-right:-16rem}.nb1-l{margin-bottom:-.25rem}.nb2-l{margin-bottom:-.5rem}.nb3-l{margin-bottom:-1rem}.nb4-l{margin-bottom:-2rem}.nb5-l{margin-bottom:-4rem}.nb6-l{margin-bottom:-8rem}.nb7-l{margin-bottom:-16rem}.nt1-l{margin-top:-.25rem}.nt2-l{margin-top:-.5rem}.nt3-l{margin-top:-1rem}.nt4-l{margin-top:-2rem}.nt5-l{margin-top:-4rem}.nt6-l{margin-top:-8rem}.nt7-l{margin-top:-16rem}.strike-l{text-decoration:line-through}.underline-l{text-decoration:underline}.no-underline-l{text-decoration:none}.tl-l{text-align:left}.tr-l{text-align:right}.tc-l{text-align:center}.tj-l{text-align:justify}.ttc-l{text-transform:capitalize}.ttl-l{text-transform:lowercase}.ttu-l{text-transform:uppercase}.ttn-l{text-transform:none}.f-6-l,.f-headline-l{font-size:6rem}.f-5-l,.f-subheadline-l{font-size:5rem}.f1-l{font-size:3rem}.f2-l{font-size:2.25rem}.f3-l{font-size:1.5rem}.f4-l{font-size:1.25rem}.f5-l{font-size:1rem}.f6-l{font-size:.875rem}.f7-l{font-size:.75rem}.measure-l{max-width:30em}.measure-wide-l{max-width:34em}.measure-narrow-l{max-width:20em}.indent-l{text-indent:1em;margin-top:0;margin-bottom:0}.small-caps-l{font-variant:small-caps}.truncate-l{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.center-l{margin-left:auto}.center-l,.mr-auto-l{margin-right:auto}.ml-auto-l{margin-left:auto}.clip-l{position:fixed!important;_position:absolute!important;clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px)}.ws-normal-l{white-space:normal}.nowrap-l{white-space:nowrap}.pre-l{white-space:pre}.v-base-l{vertical-align:baseline}.v-mid-l{vertical-align:middle}.v-top-l{vertical-align:top}.v-btm-l{vertical-align:bottom}}
diff --git a/index.html b/index.html
index 21b3a87f1..f9914d633 100644
--- a/index.html
+++ b/index.html
@@ -6,433 +6,12 @@
-
-
+
+
-
-
+
-
-
-
-
-
-
-
-
-
-
- Card title example
-
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
-
-
-
-
-
-
- Card title example
-
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
-
-
-
-
-
-
-
- Card title example
-
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
-
-
-
-
-
-
- A definition term
- Description
-
-
- GitHub Stars
- 11.4k+
-
-
- File Size
- 24kb
-
-
- Amazing Colors
- 144
-
-
- Configurability
- 100%
-
-
- Possible designs
- Inifinite
-
-
-
- An alert banner for a new feature or notification
Learn more
-
-
-
-
-
This is a banner title
-
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
-
-
- Click here
-
-
-
-
This is a banner title
-
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
-
-
- Click here
-
-
-
-
This is a banner title
-
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
-
-
- Click here
-
-
-
-
- CSS Variables are the future
-
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore.
-
-
-
-
-
-
-
-
-
-
-
A large section panel title
-
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
-
-
-
-
-
-
-
-
- Box Shadows
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Gradients
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Aa
- Aa
- Aa
- Aa
- Aa
- Aa
- Aa
- Aa
- Aa
- Aa
- Aa
-
diff --git a/package.json b/package.json
index 152995255..ac025637c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "tachyons",
- "version": "5.0.0-beta.0",
+ "version": "4.12.0",
"description": "Functional CSS for humans",
"author": "mrmrs",
"style": "css/tachyons.min.css",
@@ -11,46 +11,39 @@
],
"repository": "tachyons-css/tachyons",
"keywords": [
- "UI",
- "UI design",
"css",
"oocss",
"postcss",
"functional css",
- "utility css",
"design",
"responsive",
"performance"
],
"license": "MIT",
"devDependencies": {
- "brotli-size": "^4.0.0",
"copy-files": "^0.1.0",
"immutable-css-cli": "^1.1.1",
- "normalize.css": "^8.0.1",
- "tachyons-cli": "^1.3.3",
+ "normalize.css": "^8.0.0",
"tachyons-modules": "^1.1.10",
+ "tachyons-cli": "^1.3.2",
"watch": "^1.0.2"
},
"contributors": [
{
- "name": "Adam Morse",
- "url": "https://mrmrs.cc"
+ "name": "adam morse",
+ "email": "hi@mrmrs.cc"
},
{
- "name": "John Otander",
- "url": "https://johnotander.com"
+ "name": "john otander",
+ "url": "http://johnotander.com"
}
],
"scripts": {
"start": "npm run build:watch",
"mutations": "immutable-css src/tachyons.css --strict",
- "build": "npm run build:css && npm run build:minify && brotli-size css/tachyons.min.css",
- "build:css": "tachyons src/tachyons.css --preserveVariables > css/tachyons.css",
- "build:minify": "tachyons src/tachyons.css --minify --preserveVariables > css/tachyons.min.css",
+ "build": "npm run build:css && npm run build:minify",
+ "build:css": "tachyons src/tachyons.css > css/tachyons.css",
+ "build:minify": "tachyons src/tachyons.css --minify > css/tachyons.min.css",
"build:watch": "watch \"npm run build\" ./src/"
- },
- "dependencies": {
- "gzip-size": "^7.0.0"
}
}
diff --git a/src/_align-content.css b/src/_align-content.css
deleted file mode 100644
index f92bf03dc..000000000
--- a/src/_align-content.css
+++ /dev/null
@@ -1,44 +0,0 @@
-/*
-
- ALIGN-CONTENT
-
- Media Query Extensions:
- -s = small
- -m = medium
- -l = large
-
- MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/align-content
-
-*/
-
-.content-start { align-content: flex-start; }
-.content-end { align-content: flex-end; }
-.content-center { align-content: center; }
-.content-between { align-content: space-between; }
-.content-around { align-content: space-around; }
-.content-stretch { align-content: stretch; }
-
-@container (min-width:30em) {
- .content-start-s { align-content: flex-start; }
- .content-end-s { align-content: flex-end; }
- .content-center-s { align-content: center; }
- .content-between-s { align-content: space-between; }
- .content-around-s { align-content: space-around; }
- .content-stretch-s { align-content: stretch; }
-}
-@container (min-width:48em) {
- .content-start-m { align-content: flex-start; }
- .content-end-m { align-content: flex-end; }
- .content-center-m { align-content: center; }
- .content-between-m { align-content: space-between; }
- .content-around-m { align-content: space-around; }
- .content-stretch-m { align-content: stretch; }
-}
-@container (min-width:64em) {
- .content-start-l { align-content: flex-start; }
- .content-end-l { align-content: flex-end; }
- .content-center-l { align-content: center; }
- .content-between-l { align-content: space-between; }
- .content-around-l { align-content: space-around; }
- .content-stretch-l { align-content: stretch; }
-}
diff --git a/src/_align-items.css b/src/_align-items.css
deleted file mode 100644
index 6f3f6e838..000000000
--- a/src/_align-items.css
+++ /dev/null
@@ -1,40 +0,0 @@
-/*
-
- ALIGN-ITEMS
-
- Media Query Extensions:
- -s = small
- -m = medium
- -l = large
-
-*/
-
-.items-start { align-items: flex-start; }
-.items-end { align-items: flex-end; }
-.items-center { align-items: center; }
-.items-baseline { align-items: baseline; }
-.items-stretch { align-items: stretch; }
-
-@container (min-width:30em) {
- .items-start-s { align-items: flex-start; }
- .items-end-s { align-items: flex-end; }
- .items-center-s { align-items: center; }
- .items-baseline-s { align-items: baseline; }
- .items-stretch-s { align-items: stretch; }
-}
-
-@container (min-width:48em) {
- .items-start-m { align-items: flex-start; }
- .items-end-m { align-items: flex-end; }
- .items-center-m { align-items: center; }
- .items-baseline-m { align-items: baseline; }
- .items-stretch-m { align-items: stretch; }
-}
-
-@container (min-width:64em) {
- .items-start-l { align-items: flex-start; }
- .items-end-l { align-items: flex-end; }
- .items-center-l { align-items: center; }
- .items-baseline-l { align-items: baseline; }
- .items-stretch-l { align-items: stretch; }
-}
diff --git a/src/_align-self.css b/src/_align-self.css
deleted file mode 100644
index 4c01d3744..000000000
--- a/src/_align-self.css
+++ /dev/null
@@ -1,41 +0,0 @@
-/*
-
- ALIGN-SELF
-
- Media Query Extensions:
- -s = small
- -m = medium
- -l = large
-
-*/
-
-.self-start { align-self: flex-start; }
-.self-end { align-self: flex-end; }
-.self-center { align-self: center; }
-.self-baseline { align-self: baseline; }
-.self-stretch { align-self: stretch; }
-
-@container (min-width:30em) {
- .self-start-s { align-self: flex-start; }
- .self-end-s { align-self: flex-end; }
- .self-center-s { align-self: center; }
- .self-baseline-s { align-self: baseline; }
- .self-stretch-s { align-self: stretch; }
-}
-
-@container (min-width:48em) {
- .self-start-m { align-self: flex-start; }
- .self-end-m { align-self: flex-end; }
- .self-center-m { align-self: center; }
- .self-baseline-m { align-self: baseline; }
- .self-stretch-m { align-self: stretch; }
-
-}
-
-@container (min-width:64em) {
- .self-start-l { align-self: flex-start; }
- .self-end-l { align-self: flex-end; }
- .self-center-l { align-self: center; }
- .self-baseline-l { align-self: baseline; }
- .self-stretch-l { align-self: stretch; }
-}
diff --git a/src/_all.css b/src/_all.css
deleted file mode 100644
index 7756409e1..000000000
--- a/src/_all.css
+++ /dev/null
@@ -1,12 +0,0 @@
-/*
-
- ALL
-
- MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/all
-
-*/
-
-.unset { all: unset; }
-.initial { all: initial; }
-.inherit { all: inherit; }
-.revert { all: revert; }
diff --git a/src/_aspect-ratios.css b/src/_aspect-ratios.css
index 0273fe5c2..1ee67e1d9 100644
--- a/src/_aspect-ratios.css
+++ b/src/_aspect-ratios.css
@@ -1,86 +1,135 @@
/*
ASPECT RATIOS
- MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
*/
+/* This is for fluid media that is embedded from third party sites like youtube, vimeo etc.
+ * Wrap the outer element in aspect-ratio and then extend it with the desired ratio i.e
+ * Make sure there are no height and width attributes on the embedded media.
+ * Adapted from: https://github.com/suitcss/components-flex-embed
+ *
+ * Example:
+ *
+ *
+ *
+ *
+ *
+ * */
+
+.aspect-ratio {
+ height: 0;
+ position: relative;
+}
-.aspect-ratio-16x9 { aspect-ratio: 16 / 9; }
-.aspect-ratio-9x16 { aspect-ratio: 9 / 16; }
-
-.aspect-ratio-4x3 { aspect-ratio: 4 / 3; }
-.aspect-ratio-3x4 { aspect-ratio: 3 / 4; }
-
-.aspect-ratio-6x4 { aspect-ratio: 6 / 4; }
-.aspect-ratio-4x6 { aspect-ratio: 4 / 6; }
-
-.aspect-ratio-8x5 { aspect-ratio: 8 / 5; }
-.aspect-ratio-5x8 { aspect-ratio: 5 / 8; }
-
-.aspect-ratio-7x5 { aspect-ratio: 7 / 5; }
-.aspect-ratio-5x7 { aspect-ratio: 5 / 7; }
-
-.aspect-ratio-square,
-.aspect-ratio-1x1 { aspect-ratio: 1 / 1; }
-
+.aspect-ratio--16x9 { padding-bottom: 56.25%; }
+.aspect-ratio--9x16 { padding-bottom: 177.77%; }
-@container (min-width:30em){
- .aspect-ratio-16x9-s { aspect-ratio: 16 / 9; }
- .aspect-ratio-9x16-s { aspect-ratio: 9 / 16; }
+.aspect-ratio--4x3 { padding-bottom: 75%; }
+.aspect-ratio--3x4 { padding-bottom: 133.33%; }
- .aspect-ratio-4x3-s { aspect-ratio: 4 / 3; }
- .aspect-ratio-3x4-s { aspect-ratio: 3 / 4; }
+.aspect-ratio--6x4 { padding-bottom: 66.6%; }
+.aspect-ratio--4x6 { padding-bottom: 150%; }
- .aspect-ratio-6x4-s { aspect-ratio: 6 / 4; }
- .aspect-ratio-4x6-s { aspect-ratio: 4 / 6; }
+.aspect-ratio--8x5 { padding-bottom: 62.5%; }
+.aspect-ratio--5x8 { padding-bottom: 160%; }
- .aspect-ratio-8x5-s { aspect-ratio: 8 / 5; }
- .aspect-ratio-5x8-s { aspect-ratio: 5 / 8; }
+.aspect-ratio--7x5 { padding-bottom: 71.42%; }
+.aspect-ratio--5x7 { padding-bottom: 140%; }
- .aspect-ratio-7x5-s { aspect-ratio: 7 / 5; }
- .aspect-ratio-5x7-s { aspect-ratio: 5 / 7; }
+.aspect-ratio--1x1 { padding-bottom: 100%; }
- .aspect-ratio-square-s,
- .aspect-ratio-1x1-s { aspect-ratio: 1 / 1; }
+.aspect-ratio--object {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 100;
}
-@container (min-width:48em){
- .aspect-ratio-16x9-m { aspect-ratio: 16 / 9; }
- .aspect-ratio-9x16-m { aspect-ratio: 9 / 16; }
-
- .aspect-ratio-4x3-m { aspect-ratio: 4 / 3; }
- .aspect-ratio-3x4-m { aspect-ratio: 3 / 4; }
-
- .aspect-ratio-6x4-m { aspect-ratio: 6 / 4; }
- .aspect-ratio-4x6-m { aspect-ratio: 4 / 6; }
-
- .aspect-ratio-8x5-m { aspect-ratio: 8 / 5; }
- .aspect-ratio-5x8-m { aspect-ratio: 5 / 8; }
-
- .aspect-ratio-7x5-m { aspect-ratio: 7 / 5; }
- .aspect-ratio-5x7-m { aspect-ratio: 5 / 7; }
-
- .aspect-ratio-square-m,
- .aspect-ratio-1x1-m { aspect-ratio: 1 / 1; }
+@media (--breakpoint-not-small){
+ .aspect-ratio-ns {
+ height: 0;
+ position: relative;
+ }
+ .aspect-ratio--16x9-ns { padding-bottom: 56.25%; }
+ .aspect-ratio--9x16-ns { padding-bottom: 177.77%; }
+ .aspect-ratio--4x3-ns { padding-bottom: 75%; }
+ .aspect-ratio--3x4-ns { padding-bottom: 133.33%; }
+ .aspect-ratio--6x4-ns { padding-bottom: 66.6%; }
+ .aspect-ratio--4x6-ns { padding-bottom: 150%; }
+ .aspect-ratio--8x5-ns { padding-bottom: 62.5%; }
+ .aspect-ratio--5x8-ns { padding-bottom: 160%; }
+ .aspect-ratio--7x5-ns { padding-bottom: 71.42%; }
+ .aspect-ratio--5x7-ns { padding-bottom: 140%; }
+ .aspect-ratio--1x1-ns { padding-bottom: 100%; }
+ .aspect-ratio--object-ns {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 100;
+ }
}
-@container (min-width:64em){
- .aspect-ratio-16x9-l { aspect-ratio: 16 / 9; }
- .aspect-ratio-9x16-l { aspect-ratio: 9 / 16; }
-
- .aspect-ratio-4x3-l { aspect-ratio: 4 / 3; }
- .aspect-ratio-3x4-l { aspect-ratio: 3 / 4; }
-
- .aspect-ratio-6x4-l { aspect-ratio: 6 / 4; }
- .aspect-ratio-4x6-l { aspect-ratio: 4 / 6; }
-
- .aspect-ratio-8x5-l { aspect-ratio: 8 / 5; }
- .aspect-ratio-5x8-l { aspect-ratio: 5 / 8; }
-
- .aspect-ratio-7x5-l { aspect-ratio: 7 / 5; }
- .aspect-ratio-5x7-l { aspect-ratio: 5 / 7; }
+@media (--breakpoint-medium){
+ .aspect-ratio-m {
+ height: 0;
+ position: relative;
+ }
+ .aspect-ratio--16x9-m { padding-bottom: 56.25%; }
+ .aspect-ratio--9x16-m { padding-bottom: 177.77%; }
+ .aspect-ratio--4x3-m { padding-bottom: 75%; }
+ .aspect-ratio--3x4-m { padding-bottom: 133.33%; }
+ .aspect-ratio--6x4-m { padding-bottom: 66.6%; }
+ .aspect-ratio--4x6-m { padding-bottom: 150%; }
+ .aspect-ratio--8x5-m { padding-bottom: 62.5%; }
+ .aspect-ratio--5x8-m { padding-bottom: 160%; }
+ .aspect-ratio--7x5-m { padding-bottom: 71.42%; }
+ .aspect-ratio--5x7-m { padding-bottom: 140%; }
+ .aspect-ratio--1x1-m { padding-bottom: 100%; }
+ .aspect-ratio--object-m {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 100;
+ }
+}
- .aspect-ratio-square-l,
- .aspect-ratio-1x1-l { aspect-ratio: 1 / 1; }
+@media (--breakpoint-large){
+ .aspect-ratio-l {
+ height: 0;
+ position: relative;
+ }
+ .aspect-ratio--16x9-l { padding-bottom: 56.25%; }
+ .aspect-ratio--9x16-l { padding-bottom: 177.77%; }
+ .aspect-ratio--4x3-l { padding-bottom: 75%; }
+ .aspect-ratio--3x4-l { padding-bottom: 133.33%; }
+ .aspect-ratio--6x4-l { padding-bottom: 66.6%; }
+ .aspect-ratio--4x6-l { padding-bottom: 150%; }
+ .aspect-ratio--8x5-l { padding-bottom: 62.5%; }
+ .aspect-ratio--5x8-l { padding-bottom: 160%; }
+ .aspect-ratio--7x5-l { padding-bottom: 71.42%; }
+ .aspect-ratio--5x7-l { padding-bottom: 140%; }
+ .aspect-ratio--1x1-l { padding-bottom: 100%; }
+ .aspect-ratio--object-l {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 100;
+ }
}
diff --git a/src/_backdrop-filters.css b/src/_backdrop-filters.css
deleted file mode 100644
index 3ee2fb733..000000000
--- a/src/_backdrop-filters.css
+++ /dev/null
@@ -1,76 +0,0 @@
-/*
-
- BACKDROP-FILTER EFFECTS
-
- - Blur
- - Grayscale
- - Hue Rotate
- - Invert
- - INTERACTIONS
- - Hover
- - Focus
-
-*/
-
-.filter-none { filter: none; }
-
-.blur1 { filter: blur(4px); }
-.blur2 { filter: blur(16px); }
-.blur3 { filter: blur(96px); }
-
-.grayscale1 { filter: grayscale(0); }
-.grayscale2 { filter: grayscale(50%); }
-.grayscale3 { filter: grayscale(100%); }
-
-.hue-rotate0 { filter: hue-rotate(0deg);}
-.hue-rotate1 { filter: hue-rotate(45deg);}
-.hue-rotate2 { filter: hue-rotate(90deg);}
-.hue-rotate3 { filter: hue-rotate(135deg);}
-.hue-rotate4 { filter: hue-rotate(180deg);}
-.hue-rotate5 { filter: hue-rotate(225deg);}
-.hue-rotate6 { filter: hue-rotate(270deg);}
-.hue-rotate7 { filter: hue-rotate(315deg);}
-
-.invert { filter: invert(100%); }
-
-/* TODO: Add drop-shadow */
-
-.filter-none-hover:hover { filter: none; }
-
-.blur1-hover:hover { filter: blur(4px); }
-.blur2-hover:hover { filter: blur(16px); }
-.blur3-hover:hover { filter: blur(96px); }
-
-.grayscale1-hover:hover { filter: grayscale(0); }
-.grayscale2-hover:hover { filter: grayscale(50%); }
-.grayscale3-hover:hover { filter: grayscale(100%); }
-
-.hue-rotate0-hover:hover { filter: hue-rotate(0deg);}
-.hue-rotate1-hover:hover { filter: hue-rotate(45deg);}
-.hue-rotate2-hover:hover { filter: hue-rotate(90deg);}
-.hue-rotate3-hover:hover { filter: hue-rotate(135deg);}
-.hue-rotate4-hover:hover { filter: hue-rotate(180deg);}
-.hue-rotate5-hover:hover { filter: hue-rotate(225deg);}
-.hue-rotate6-hover:hover { filter: hue-rotate(270deg);}
-.hue-rotate7-hover:hover { filter: hue-rotate(315deg);}
-
-.invert-hover:hover { filter: invert(100%); }
-
-.blur1-focus:focus { filter: blur(4px); }
-.blur2-focus:focus { filter: blur(16px); }
-.blur3-focus:focus { filter: blur(96px); }
-
-.grayscale1-focus:focus { filter: grayscale(0); }
-.grayscale2-focus:focus { filter: grayscale(50%); }
-.grayscale3-focus:focus { filter: grayscale(100%); }
-
-.hue-rotate0-focus:focus { filter: hue-rotate(0deg);}
-.hue-rotate1-focus:focus { filter: hue-rotate(45deg);}
-.hue-rotate2-focus:focus { filter: hue-rotate(90deg);}
-.hue-rotate3-focus:focus { filter: hue-rotate(135deg);}
-.hue-rotate4-focus:focus { filter: hue-rotate(180deg);}
-.hue-rotate5-focus:focus { filter: hue-rotate(225deg);}
-.hue-rotate6-focus:focus { filter: hue-rotate(270deg);}
-.hue-rotate7-focus:focus { filter: hue-rotate(315deg);}
-
-.invert-focus:focus { filter: invert(100%); }
diff --git a/src/_background-position.css b/src/_background-position.css
index a656019c3..4d850b6a5 100644
--- a/src/_background-position.css
+++ b/src/_background-position.css
@@ -13,7 +13,7 @@
-left = center left
Media Query Extensions:
- -s = small
+ -ns = not-small
-m = medium
-l = large
@@ -44,34 +44,34 @@
background-position: center left;
}
-@container (min-width:30em) {
- .bg-center-s {
+@media (--breakpoint-not-small) {
+ .bg-center-ns {
background-repeat: no-repeat;
background-position: center center;
}
- .bg-top-s {
+ .bg-top-ns {
background-repeat: no-repeat;
background-position: top center;
}
- .bg-right-s {
+ .bg-right-ns {
background-repeat: no-repeat;
background-position: center right;
}
- .bg-bottom-s {
+ .bg-bottom-ns {
background-repeat: no-repeat;
background-position: bottom center;
}
- .bg-left-s {
+ .bg-left-ns {
background-repeat: no-repeat;
background-position: center left;
}
}
-@container (min-width:48em) {
+@media (--breakpoint-medium) {
.bg-center-m {
background-repeat: no-repeat;
background-position: center center;
@@ -98,7 +98,7 @@
}
}
-@container (min-width:64em) {
+@media (--breakpoint-large) {
.bg-center-l {
background-repeat: no-repeat;
background-position: center center;
diff --git a/src/_background-size.css b/src/_background-size.css
index e2492cbe0..18afe5c7c 100644
--- a/src/_background-size.css
+++ b/src/_background-size.css
@@ -4,7 +4,7 @@
Docs: http://tachyons.io/docs/themes/background-size/
Media Query Extensions:
- -s = small
+ -ns = not-small
-m = medium
-l = large
@@ -15,52 +15,20 @@
on an html element.
*/
- .cover { background-size: cover!important; }
+ .cover { background-size: cover!important; }
.contain { background-size: contain!important; }
- .bg1 { background-size: 4px; }
- .bg2 { background-size: 8px; }
- .bg3 { background-size: 16px; }
- .bg4 { background-size: 32px; }
- .bg5 { background-size: 64px; }
- .bg6 { background-size: 100%; }
- .bg7 { background-size: 150%; }
- .bg8 { background-size: 200%; }
-@container (min-width:30em) {
- .cover-s { background-size: cover!important; }
- .contain-s { background-size: contain!important; }
- .bg1-s { background-size: 4px; }
- .bg2-s { background-size: 8px; }
- .bg3-s { background-size: 16px; }
- .bg4-s { background-size: 32px; }
- .bg5-s { background-size: 64px; }
- .bg6-s { background-size: 100%; }
- .bg7-s { background-size: 150%; }
- .bg8-s { background-size: 200%; }
+@media (--breakpoint-not-small) {
+ .cover-ns { background-size: cover!important; }
+ .contain-ns { background-size: contain!important; }
}
-@container (min-width:48em) {
+@media (--breakpoint-medium) {
.cover-m { background-size: cover!important; }
.contain-m { background-size: contain!important; }
- .bg1-m { background-size: 4px; }
- .bg2-m { background-size: 8px; }
- .bg3-m { background-size: 16px; }
- .bg4-m { background-size: 32px; }
- .bg5-m { background-size: 64px; }
- .bg6-m { background-size: 100%; }
- .bg7-m { background-size: 150%; }
- .bg8-m { background-size: 200%; }
}
-@container (min-width:64em) {
+@media (--breakpoint-large) {
.cover-l { background-size: cover!important; }
.contain-l { background-size: contain!important; }
- .bg1-l { background-size: 4px; }
- .bg2-l { background-size: 8px; }
- .bg3-l { background-size: 16px; }
- .bg4-l { background-size: 32px; }
- .bg5-l { background-size: 64px; }
- .bg6-l { background-size: 100%; }
- .bg7-l { background-size: 150%; }
- .bg8-l { background-size: 200%; }
}
diff --git a/src/_border-colors.css b/src/_border-colors.css
index 307c72ea2..dc1577d22 100644
--- a/src/_border-colors.css
+++ b/src/_border-colors.css
@@ -18,11 +18,71 @@
*/
-.b--color { border-color: var(--border-color, gray); }
-.b--light { border-color: var(--overlay-tint-2, gray); }
-.b--dark { border-color: var(--overlay-shadow-9, gray); }
-.b--transparent { border-color: transparent; }
-.b--current { border-color: currentColor; }
+.b--black { border-color: var(--black); }
+.b--near-black { border-color: var(--near-black); }
+.b--dark-gray { border-color: var(--dark-gray); }
+.b--mid-gray { border-color: var(--mid-gray); }
+.b--gray { border-color: var(--gray); }
+.b--silver { border-color: var(--silver); }
+.b--light-silver { border-color: var(--light-silver); }
+.b--moon-gray { border-color: var(--moon-gray); }
+.b--light-gray { border-color: var(--light-gray); }
+.b--near-white { border-color: var(--near-white); }
+.b--white { border-color: var(--white); }
+
+.b--white-90 { border-color: var(--white-90); }
+.b--white-80 { border-color: var(--white-80); }
+.b--white-70 { border-color: var(--white-70); }
+.b--white-60 { border-color: var(--white-60); }
+.b--white-50 { border-color: var(--white-50); }
+.b--white-40 { border-color: var(--white-40); }
+.b--white-30 { border-color: var(--white-30); }
+.b--white-20 { border-color: var(--white-20); }
+.b--white-10 { border-color: var(--white-10); }
+.b--white-05 { border-color: var(--white-05); }
+.b--white-025 { border-color: var(--white-025); }
+.b--white-0125 { border-color: var(--white-0125); }
+
+.b--black-90 { border-color: var(--black-90); }
+.b--black-80 { border-color: var(--black-80); }
+.b--black-70 { border-color: var(--black-70); }
+.b--black-60 { border-color: var(--black-60); }
+.b--black-50 { border-color: var(--black-50); }
+.b--black-40 { border-color: var(--black-40); }
+.b--black-30 { border-color: var(--black-30); }
+.b--black-20 { border-color: var(--black-20); }
+.b--black-10 { border-color: var(--black-10); }
+.b--black-05 { border-color: var(--black-05); }
+.b--black-025 { border-color: var(--black-025); }
+.b--black-0125 { border-color: var(--black-0125); }
+
+.b--dark-red { border-color: var(--dark-red); }
+.b--red { border-color: var(--red); }
+.b--light-red { border-color: var(--light-red); }
+.b--orange { border-color: var(--orange); }
+.b--gold { border-color: var(--gold); }
+.b--yellow { border-color: var(--yellow); }
+.b--light-yellow { border-color: var(--light-yellow); }
+.b--purple { border-color: var(--purple); }
+.b--light-purple { border-color: var(--light-purple); }
+.b--dark-pink { border-color: var(--dark-pink); }
+.b--hot-pink { border-color: var(--hot-pink); }
+.b--pink { border-color: var(--pink); }
+.b--light-pink { border-color: var(--light-pink); }
+.b--dark-green { border-color: var(--dark-green); }
+.b--green { border-color: var(--green); }
+.b--light-green { border-color: var(--light-green); }
+.b--navy { border-color: var(--navy); }
+.b--dark-blue { border-color: var(--dark-blue); }
+.b--blue { border-color: var(--blue); }
+.b--light-blue { border-color: var(--light-blue); }
+.b--lightest-blue { border-color: var(--lightest-blue); }
+.b--washed-blue { border-color: var(--washed-blue); }
+.b--washed-green { border-color: var(--washed-green); }
+.b--washed-yellow { border-color: var(--washed-yellow); }
+.b--washed-red { border-color: var(--washed-red); }
+
+.b--transparent { border-color: var(--transparent); }
.b--inherit { border-color: inherit; }
.b--initial { border-color: initial; }
.b--unset { border-color: unset; }
diff --git a/src/_border-radius.css b/src/_border-radius.css
index 7df6fc070..da39b9919 100644
--- a/src/_border-radius.css
+++ b/src/_border-radius.css
@@ -2,7 +2,6 @@
BORDER RADIUS
Docs: http://tachyons.io/docs/themes/border-radius/
- Interactive examples: https://components.ai/u/system/cl7crcjia022509masfvq73ny/cl7ztbozs1650909l6rllmvpko
Base:
br = border-radius
@@ -13,34 +12,25 @@
2 = 2nd step in scale
3 = 3rd step in scale
4 = 4th step in scale
- 5 = 5th step in scale
- 6 = 6th step in scale
Literal values:
-100 = 100%
-pill = 9999px
Media Query Extensions:
- -n = small
+ -ns = not-small
-m = medium
-l = large
*/
- .br-primary { border-radius: var(--border-radius, 6px); }
- .br0 { border-radius: var(--border-radius-0, 0); }
- .br1 { border-radius: var(--border-radius-1, 4px); }
- .br2 { border-radius: var(--border-radius-2, 6px); }
- .br3 { border-radius: var(--border-radius-3, 8px); }
- .br4 { border-radius: var(--border-radius-4, 12px); }
- .br5 { border-radius: var(--border-radius-5, 16px); }
- .br6 { border-radius: var(--border-radius-6, 20px); }
- .br7 { border-radius: var(--border-radius-7, 24px); }
- .br8 { border-radius: var(--border-radius-8, 32px); }
- .br9 { border-radius: var(--border-radius-9, 48px); }
- .br10 { border-radius: var(--border-radius-10, 64px); }
- .br11 { border-radius: var(--border-radius-11, 9999px); }
-
+ .br0 { border-radius: 0; }
+ .br1 { border-radius: .125rem; }
+ .br2 { border-radius: .25rem; }
+ .br3 { border-radius: .5rem; }
+ .br4 { border-radius: 1rem; }
+ .br-100 { border-radius: 100%; }
+ .br-pill { border-radius: 9999px; }
.br--bottom {
border-top-left-radius: 0;
border-top-right-radius: 0;
@@ -61,55 +51,43 @@
.br-initial { border-radius: initial; }
.br-unset { border-radius: unset; }
-@container (min-width:30em) {
- .br-primary-s { border-radius: var(--border-radius, 6px); }
- .br0-s { border-radius: var(--border-radius-0, 0); }
- .br1-s { border-radius: var(--border-radius-1, 4px); }
- .br2-s { border-radius: var(--border-radius-2, 6px); }
- .br3-s { border-radius: var(--border-radius-3, 8px); }
- .br4-s { border-radius: var(--border-radius-4, 12px); }
- .br5-s { border-radius: var(--border-radius-5, 16px); }
- .br6-s { border-radius: var(--border-radius-6, 20px); }
- .br7-s { border-radius: var(--border-radius-7, 24px); }
- .br8-s { border-radius: var(--border-radius-8, 32px); }
- .br9-s { border-radius: var(--border-radius-9, 48px); }
- .br10-s { border-radius: var(--border-radius-10, 64px); }
- .br11-s { border-radius: var(--border-radius-11, 9999px); }
- .br--bottom-s {
+@media (--breakpoint-not-small) {
+ .br0-ns { border-radius: 0; }
+ .br1-ns { border-radius: .125rem; }
+ .br2-ns { border-radius: .25rem; }
+ .br3-ns { border-radius: .5rem; }
+ .br4-ns { border-radius: 1rem; }
+ .br-100-ns { border-radius: 100%; }
+ .br-pill-ns { border-radius: 9999px; }
+ .br--bottom-ns {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
- .br--top-s {
+ .br--top-ns {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
- .br--right-s {
+ .br--right-ns {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
- .br--left-s {
+ .br--left-ns {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
- .br-inherit-s { border-radius: inherit; }
- .br-initial-s { border-radius: initial; }
- .br-unset-s { border-radius: unset; }
+ .br-inherit-ns { border-radius: inherit; }
+ .br-initial-ns { border-radius: initial; }
+ .br-unset-ns { border-radius: unset; }
}
-@container (min-width:48em) {
- .br-primary-m { border-radius: var(--border-radius, 6px); }
- .br0-m { border-radius: var(--border-radius-0, 0); }
- .br1-m { border-radius: var(--border-radius-1, 4px); }
- .br2-m { border-radius: var(--border-radius-2, 6px); }
- .br3-m { border-radius: var(--border-radius-3, 8px); }
- .br4-m { border-radius: var(--border-radius-4, 12px); }
- .br5-m { border-radius: var(--border-radius-5, 16px); }
- .br6-m { border-radius: var(--border-radius-6, 20px); }
- .br7-m { border-radius: var(--border-radius-7, 24px); }
- .br8-m { border-radius: var(--border-radius-8, 32px); }
- .br9-m { border-radius: var(--border-radius-9, 48px); }
- .br10-m { border-radius: var(--border-radius-10, 64px); }
- .br11-m { border-radius: var(--border-radius-11, 9999px); }
+@media (--breakpoint-medium) {
+ .br0-m { border-radius: 0; }
+ .br1-m { border-radius: .125rem; }
+ .br2-m { border-radius: .25rem; }
+ .br3-m { border-radius: .5rem; }
+ .br4-m { border-radius: 1rem; }
+ .br-100-m { border-radius: 100%; }
+ .br-pill-m { border-radius: 9999px; }
.br--bottom-m {
border-top-left-radius: 0;
border-top-right-radius: 0;
@@ -131,20 +109,14 @@
.br-unset-m { border-radius: unset; }
}
-@container (min-width:64em) {
- .br-primary-l { border-radius: var(--border-radius, 6px); }
- .br0-l { border-radius: var(--border-radius-0, 0); }
- .br1-l { border-radius: var(--border-radius-1, 4px); }
- .br2-l { border-radius: var(--border-radius-2, 6px); }
- .br3-l { border-radius: var(--border-radius-3, 8px); }
- .br4-l { border-radius: var(--border-radius-4, 12px); }
- .br5-l { border-radius: var(--border-radius-5, 16px); }
- .br6-l { border-radius: var(--border-radius-6, 20px); }
- .br7-l { border-radius: var(--border-radius-7, 24px); }
- .br8-l { border-radius: var(--border-radius-8, 32px); }
- .br9-l { border-radius: var(--border-radius-9, 48px); }
- .br10-l { border-radius: var(--border-radius-10, 64px); }
- .br11-l { border-radius: var(--border-radius-11, 9999px); }
+@media (--breakpoint-large) {
+ .br0-l { border-radius: 0; }
+ .br1-l { border-radius: .125rem; }
+ .br2-l { border-radius: .25rem; }
+ .br3-l { border-radius: .5rem; }
+ .br4-l { border-radius: 1rem; }
+ .br-100-l { border-radius: 100%; }
+ .br-pill-l { border-radius: 9999px; }
.br--bottom-l {
border-top-left-radius: 0;
border-top-right-radius: 0;
diff --git a/src/_border-style.css b/src/_border-style.css
index 0802860d1..b9eb61b3d 100644
--- a/src/_border-style.css
+++ b/src/_border-style.css
@@ -15,7 +15,7 @@
--solid = solid
Media Query Extensions:
- -s = small
+ -ns = not-small
-m = medium
-l = large
@@ -26,21 +26,21 @@
.b--solid { border-style: solid; }
.b--none { border-style: none; }
-@container (min-width:30em) {
- .b--dotted-s { border-style: dotted; }
- .b--dashed-s { border-style: dashed; }
- .b--solid-s { border-style: solid; }
- .b--none-s { border-style: none; }
+@media (--breakpoint-not-small) {
+ .b--dotted-ns { border-style: dotted; }
+ .b--dashed-ns { border-style: dashed; }
+ .b--solid-ns { border-style: solid; }
+ .b--none-ns { border-style: none; }
}
-@container (min-width:48em) {
+@media (--breakpoint-medium) {
.b--dotted-m { border-style: dotted; }
.b--dashed-m { border-style: dashed; }
.b--solid-m { border-style: solid; }
.b--none-m { border-style: none; }
}
-@container (min-width:64em) {
+@media (--breakpoint-large) {
.b--dotted-l { border-style: dotted; }
.b--dashed-l { border-style: dashed; }
.b--solid-l { border-style: solid; }
diff --git a/src/_border-widths.css b/src/_border-widths.css
index 394e0d0d4..e3b6885d0 100644
--- a/src/_border-widths.css
+++ b/src/_border-widths.css
@@ -15,19 +15,18 @@
5 = 5th step in border-width scale
Media Query Extensions:
- -s = small
+ -ns = not-small
-m = medium
-l = large
*/
-.bw { border-width: var(--border-width,1px); }
-.bw0 { border-width: var(--border-width-0,0); }
-.bw1 { border-width: var(--border-width-1,1px); }
-.bw2 { border-width: var(--border-width-2,2px); }
-.bw3 { border-width: var(--border-width-3,4px); }
-.bw4 { border-width: var(--border-width-4,8px); }
-.bw5 { border-width: var(--border-width-5,16px); }
+.bw0 { border-width: 0; }
+.bw1 { border-width: .125rem; }
+.bw2 { border-width: .25rem; }
+.bw3 { border-width: .5rem; }
+.bw4 { border-width: 1rem; }
+.bw5 { border-width: 2rem; }
/* Resets */
.bt-0 { border-top-width: 0; }
@@ -35,42 +34,39 @@
.bb-0 { border-bottom-width: 0; }
.bl-0 { border-left-width: 0; }
-@container (min-width:30em) {
- .bw-s { border-width: var(--border-width,1px); }
- .bw0-s { border-width: var(--border-width-0,0); }
- .bw1-s { border-width: var(--border-width-1,1px); }
- .bw2-s { border-width: var(--border-width-2,2px); }
- .bw3-s { border-width: var(--border-width-3,4px); }
- .bw4-s { border-width: var(--border-width-4,8px); }
- .bw5-s { border-width: var(--border-width-5,16px); }
- .bt-0-s { border-top-width: 0; }
- .br-0-s { border-right-width: 0; }
- .bb-0-s { border-bottom-width: 0; }
- .bl-0-s { border-left-width: 0; }
+@media (--breakpoint-not-small) {
+ .bw0-ns { border-width: 0; }
+ .bw1-ns { border-width: .125rem; }
+ .bw2-ns { border-width: .25rem; }
+ .bw3-ns { border-width: .5rem; }
+ .bw4-ns { border-width: 1rem; }
+ .bw5-ns { border-width: 2rem; }
+ .bt-0-ns { border-top-width: 0; }
+ .br-0-ns { border-right-width: 0; }
+ .bb-0-ns { border-bottom-width: 0; }
+ .bl-0-ns { border-left-width: 0; }
}
-@container (min-width:48em) {
- .bw-m { border-width: var(--border-width,1px); }
- .bw0-m { border-width: var(--border-width-0,0); }
- .bw1-m { border-width: var(--border-width-1,1px); }
- .bw2-m { border-width: var(--border-width-2,2px); }
- .bw3-m { border-width: var(--border-width-3,4px); }
- .bw4-m { border-width: var(--border-width-4,8px); }
- .bw5-m { border-width: var(--border-width-5,16px); }
+@media (--breakpoint-medium) {
+ .bw0-m { border-width: 0; }
+ .bw1-m { border-width: .125rem; }
+ .bw2-m { border-width: .25rem; }
+ .bw3-m { border-width: .5rem; }
+ .bw4-m { border-width: 1rem; }
+ .bw5-m { border-width: 2rem; }
.bt-0-m { border-top-width: 0; }
.br-0-m { border-right-width: 0; }
.bb-0-m { border-bottom-width: 0; }
.bl-0-m { border-left-width: 0; }
}
-@container (min-width:64em) {
- .bw-l { border-width: var(--border-width,1px); }
- .bw0-l { border-width: var(--border-width-0,0); }
- .bw1-l { border-width: var(--border-width-1,1px); }
- .bw2-l { border-width: var(--border-width-2,2px); }
- .bw3-l { border-width: var(--border-width-3,4px); }
- .bw4-l { border-width: var(--border-width-4,8px); }
- .bw5-l { border-width: var(--border-width-5,16px); }
+@media (--breakpoint-large) {
+ .bw0-l { border-width: 0; }
+ .bw1-l { border-width: .125rem; }
+ .bw2-l { border-width: .25rem; }
+ .bw3-l { border-width: .5rem; }
+ .bw4-l { border-width: 1rem; }
+ .bw5-l { border-width: 2rem; }
.bt-0-l { border-top-width: 0; }
.br-0-l { border-right-width: 0; }
.bb-0-l { border-bottom-width: 0; }
diff --git a/src/_borders.css b/src/_borders.css
index 6e5f442e9..ce49e4292 100644
--- a/src/_borders.css
+++ b/src/_borders.css
@@ -15,44 +15,44 @@
n = none
Media Query Extensions:
- -s = small
+ -ns = not-small
-m = medium
-l = large
*/
- .ba { border-style: solid; border-width: var(--border-width, 1px); }
- .bt { border-top-style: solid; border-top-width: var(--border-width, 1px); }
- .br { border-right-style: solid; border-right-width: var(--border-width, 1px); }
- .bb { border-bottom-style: solid; border-bottom-width: var(--border-width, 1px); }
- .bl { border-left-style: solid; border-left-width: var(--border-width, 1px); }
+ .ba { border-style: solid; border-width: 1px; }
+ .bt { border-top-style: solid; border-top-width: 1px; }
+ .br { border-right-style: solid; border-right-width: 1px; }
+ .bb { border-bottom-style: solid; border-bottom-width: 1px; }
+ .bl { border-left-style: solid; border-left-width: 1px; }
.bn { border-style: none; border-width: 0; }
-@container (min-width:30em) {
- .ba-s { border-style: solid; border-width: var(--border-width, 1px); }
- .bt-s { border-top-style: solid; border-top-width: var(--border-width, 1px); }
- .br-s { border-right-style: solid; border-right-width: var(--border-width, 1px); }
- .bb-s { border-bottom-style: solid; border-bottom-width: var(--border-width, 1px); }
- .bl-s { border-left-style: solid; border-left-width: var(--border-width, 1px); }
- .bn-s { border-style: none; border-width: 0; }
+@media (--breakpoint-not-small) {
+ .ba-ns { border-style: solid; border-width: 1px; }
+ .bt-ns { border-top-style: solid; border-top-width: 1px; }
+ .br-ns { border-right-style: solid; border-right-width: 1px; }
+ .bb-ns { border-bottom-style: solid; border-bottom-width: 1px; }
+ .bl-ns { border-left-style: solid; border-left-width: 1px; }
+ .bn-ns { border-style: none; border-width: 0; }
}
-@container (min-width:48em) {
- .ba-m { border-style: solid; border-width: var(--border-width, 1px); }
- .bt-m { border-top-style: solid; border-top-width: var(--border-width, 1px); }
- .br-m { border-right-style: solid; border-right-width: var(--border-width, 1px); }
- .bb-m { border-bottom-style: solid; border-bottom-width: var(--border-width, 1px); }
- .bl-m { border-left-style: solid; border-left-width: var(--border-width, 1px); }
+@media (--breakpoint-medium) {
+ .ba-m { border-style: solid; border-width: 1px; }
+ .bt-m { border-top-style: solid; border-top-width: 1px; }
+ .br-m { border-right-style: solid; border-right-width: 1px; }
+ .bb-m { border-bottom-style: solid; border-bottom-width: 1px; }
+ .bl-m { border-left-style: solid; border-left-width: 1px; }
.bn-m { border-style: none; border-width: 0; }
}
-@container (min-width:64em) {
- .ba-l { border-style: solid; border-width: var(--border-width, 1px); }
- .bt-l { border-top-style: solid; border-top-width: var(--border-width, 1px); }
- .br-l { border-right-style: solid; border-right-width: var(--border-width, 1px); }
- .bb-l { border-bottom-style: solid; border-bottom-width: var(--border-width, 1px); }
- .bl-l { border-left-style: solid; border-left-width: var(--border-width, 1px); }
+@media (--breakpoint-large) {
+ .ba-l { border-style: solid; border-width: 1px; }
+ .bt-l { border-top-style: solid; border-top-width: 1px; }
+ .br-l { border-right-style: solid; border-right-width: 1px; }
+ .bb-l { border-bottom-style: solid; border-bottom-width: 1px; }
+ .bl-l { border-left-style: solid; border-left-width: 1px; }
.bn-l { border-style: none; border-width: 0; }
}
diff --git a/src/_box-shadow.css b/src/_box-shadow.css
index 419ee9952..e744bc745 100644
--- a/src/_box-shadow.css
+++ b/src/_box-shadow.css
@@ -3,120 +3,39 @@
BOX-SHADOW
Docs: http://tachyons.io/docs/themes/box-shadow/
- REF
- Layered shadows: https://tobiasahlin.com/blog/layered-smooth-box-shadows/
-
Media Query Extensions:
- -s = small
+ -ns = not-small
-m = medium
-l = large
*/
-.shadow {
- box-shadow: var(--shadow, inset 0 0 1px 0 rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .5)));
-}
-
-.shadow-hover:hover,
-.shadow-hover:focus {
- --shadow-opacity: .6;
-}
-
-/*
- * TODO: potential pattern
- .shadow-hover:hover {
- --shadow-opacity: .09;
- --shadow-x: 1px;
- --shadow-y: 1px;
- --shadow-blur: 1px;
- --shadow-spread: 1px;
- --shadow-multiplier: 2;
- }
-*/
-
-/* Box shadow based borders */
-
-.shadow-border-1 { box-shadow: inset 0 0 var(--shadow-border-width, 1px) 0 rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125)); }
-.shadow-border-2 { box-shadow: inset 0 0 var(--shadow-border-width, 1px) 0 rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .25)); }
-.shadow-border-3 { box-shadow: inset 0 0 var(--shadow-border-width) 0 currentColor; }
-.shadow-border-4 { box-shadow: inset 0 0 2px 0 rgb(var(--shadow-color-light, 255 255 255) / var(--shadow-opacity, .125)); }
-.shadow-border-5 { box-shadow: inset 0 0 2px 0 rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125))}
-.shadow-border-6 { box-shadow: inset 0 0 2px 0 currentColor; }
-
-.shadow-1 {
- box-shadow:
- 0 1px 1px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125)),
- 0 2px 2px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125)),
- 0 4px 4px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125)),
- 0 8px 8px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125)),
- 0 16px 16px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125));
-}
-
-.shadow-2 {
- box-shadow:
- 0 1px 1px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125)),
- 0 2px 2px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125)),
- 0 4px 4px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125)),
- 0 8px 8px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .125));
-}
-
-.shadow-3 {
- --shadow-opacity: .11;
- box-shadow:
- 0 1px 1px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .11)),
- 0 2px 2px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .11)),
- 0 4px 4px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .11)),
- 0 8px 8px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .11)),
- 0 16px 16px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .11)),
- 0 32px 32px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, .11));
-}
-
-.shadow-4 {
- --shadow-opacity: .05;
- box-shadow:
- 0 1px 1px rgb(var(--shadow-color, 0 0 0) / calc(var(--shadow-opacity, 0.25) * 5)),
- 0 2px 2px rgb(var(--shadow-color, 0 0 0) / calc(var(--shadow-opacity, 0.20) * 4)),
- 0 4px 4px rgb(var(--shadow-color, 0 0 0) / calc(var(--shadow-opacity, 0.15) * 3)),
- 0 8px 8px rgb(var(--shadow-color, 0 0 0) / calc(var(--shadow-opacity, 0.10) * 2)),
- 0 16px 16px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.05));
-}
-
-.shadow-5 {
- --shadow-opacity: .08;
- box-shadow:
- 0 var(--shadow-y) 1px rgb(var(--shadow-color, 0 0 0) / calc(var(--shadow-opacity, 0.08) * 1)),
- 0 calc(var(--shadow-y) * 2) 2px rgb(var(--shadow-color, 0 0 0) / calc(var(--shadow-opacity, 0.12) * 1.5)),
- 0 calc(var(--shadow-y) * 4) 4px rgb(var(--shadow-color, 0 0 0) / calc(var(--shadow-opacity, 0.16) * 2)),
- 0 calc(var(--shadow-y) * 8) 8px rgb(var(--shadow-color, 0 0 0) / calc(var(--shadow-opacity, 0.20) * 2.5));
-}
-
-.shadow-6 {
- --shadow-opacity: .07;
- box-shadow:
- 0 1px 2px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.7)),
- 0 2px 4px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.7)),
- 0 4px 8px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.7)),
- 0 8px 16px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.7)),
- 0 16px 32px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.7)),
- 0 32px 64px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.7));
-}
-
-.shadow-7 {
- --shadow-opacity: .11;
- box-shadow:
- 0 1px 1px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.11)),
- 0 2px 2px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.11)),
- 0 4px 4px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.11)),
- 0 6px 8px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.11)),
- 0 8px 16px rgb(var(--shadow-color, 0 0 0) / var(--shadow-opacity, 0.11));
-}
-
-.shadow-8 {
- --shadow-opacity: .09;
- box-shadow:
- 0 2px 1px rgb(var(--shadow-color, 0 0 0) / 0.09),
- 0 4px 2px rgb(var(--shadow-color, 0 0 0) / 0.09),
- 0 8px 4px rgb(var(--shadow-color, 0 0 0) / 0.09),
- 0 16px 8px rgb(var(--shadow-color, 0 0 0) / 0.09),
- 0 32px 16px rgb(var(--shadow-color, 0 0 0) / 0.09);
+.shadow-1 { box-shadow: 0px 0px 4px 2px rgba( 0, 0, 0, 0.2 ); }
+.shadow-2 { box-shadow: 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 ); }
+.shadow-3 { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 ); }
+.shadow-4 { box-shadow: 2px 2px 8px 0px rgba( 0, 0, 0, 0.2 ); }
+.shadow-5 { box-shadow: 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 ); }
+
+@media (--breakpoint-not-small) {
+ .shadow-1-ns { box-shadow: 0px 0px 4px 2px rgba( 0, 0, 0, 0.2 ); }
+ .shadow-2-ns { box-shadow: 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 ); }
+ .shadow-3-ns { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 ); }
+ .shadow-4-ns { box-shadow: 2px 2px 8px 0px rgba( 0, 0, 0, 0.2 ); }
+ .shadow-5-ns { box-shadow: 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 ); }
+}
+
+@media (--breakpoint-medium) {
+ .shadow-1-m { box-shadow: 0px 0px 4px 2px rgba( 0, 0, 0, 0.2 ); }
+ .shadow-2-m { box-shadow: 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 ); }
+ .shadow-3-m { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 ); }
+ .shadow-4-m { box-shadow: 2px 2px 8px 0px rgba( 0, 0, 0, 0.2 ); }
+ .shadow-5-m { box-shadow: 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 ); }
+}
+
+@media (--breakpoint-large) {
+ .shadow-1-l { box-shadow: 0px 0px 4px 2px rgba( 0, 0, 0, 0.2 ); }
+ .shadow-2-l { box-shadow: 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 ); }
+ .shadow-3-l { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 ); }
+ .shadow-4-l { box-shadow: 2px 2px 8px 0px rgba( 0, 0, 0, 0.2 ); }
+ .shadow-5-l { box-shadow: 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 ); }
}
diff --git a/src/_box-sizing.css b/src/_box-sizing.css
index 787750660..8a965e090 100644
--- a/src/_box-sizing.css
+++ b/src/_box-sizing.css
@@ -4,10 +4,45 @@
*/
-*,
-*::before,
-*::after,
-.border-box,
-.border-box::before,
-.border-box::after { box-sizing: border-box; }
-.content-box { box-sizing: content-box; }
+html,
+body,
+div,
+article,
+aside,
+section,
+main,
+nav,
+footer,
+header,
+form,
+fieldset,
+legend,
+pre,
+code,
+a,
+h1,h2,h3,h4,h5,h6,
+p,
+ul,
+ol,
+li,
+dl,
+dt,
+dd,
+blockquote,
+figcaption,
+figure,
+textarea,
+table,
+td,
+th,
+tr,
+input[type="email"],
+input[type="number"],
+input[type="password"],
+input[type="tel"],
+input[type="text"],
+input[type="url"],
+.border-box {
+ box-sizing: border-box;
+}
+
diff --git a/src/_clears.css b/src/_clears.css
index ed0f984d8..14d8e1d40 100644
--- a/src/_clears.css
+++ b/src/_clears.css
@@ -11,8 +11,30 @@
.cf:before,
.cf:after { content: " "; display: table; }
.cf:after { clear: both; }
+.cf { *zoom: 1; }
.cl { clear: left; }
.cr { clear: right; }
.cb { clear: both; }
.cn { clear: none; }
+
+@media (--breakpoint-not-small) {
+ .cl-ns { clear: left; }
+ .cr-ns { clear: right; }
+ .cb-ns { clear: both; }
+ .cn-ns { clear: none; }
+}
+
+@media (--breakpoint-medium) {
+ .cl-m { clear: left; }
+ .cr-m { clear: right; }
+ .cb-m { clear: both; }
+ .cn-m { clear: none; }
+}
+
+@media (--breakpoint-large) {
+ .cl-l { clear: left; }
+ .cr-l { clear: right; }
+ .cb-l { clear: both; }
+ .cn-l { clear: none; }
+}
diff --git a/src/_code.css b/src/_code.css
index 765d75e10..ac691f30d 100644
--- a/src/_code.css
+++ b/src/_code.css
@@ -5,6 +5,7 @@
*/
.pre {
- max-width: 100%;
- overflow: auto;
+ overflow-x: auto;
+ overflow-y: hidden;
+ overflow: scroll;
}
diff --git a/src/_colors.css b/src/_colors.css
new file mode 100644
index 000000000..7280aeca3
--- /dev/null
+++ b/src/_colors.css
@@ -0,0 +1,80 @@
+/*
+
+ Tachyons
+ COLOR VARIABLES
+
+ Grayscale
+ - Solids
+ - Transparencies
+ Colors
+
+*/
+
+:root {
+ --black: #000;
+ --near-black: #111;
+ --dark-gray:#333;
+ --mid-gray:#555;
+ --gray: #777;
+ --silver: #999;
+ --light-silver: #aaa;
+ --moon-gray: #ccc;
+ --light-gray: #eee;
+ --near-white: #f4f4f4;
+ --white: #fff;
+
+ --transparent:transparent;
+
+ --black-90: rgba(0,0,0,.9);
+ --black-80: rgba(0,0,0,.8);
+ --black-70: rgba(0,0,0,.7);
+ --black-60: rgba(0,0,0,.6);
+ --black-50: rgba(0,0,0,.5);
+ --black-40: rgba(0,0,0,.4);
+ --black-30: rgba(0,0,0,.3);
+ --black-20: rgba(0,0,0,.2);
+ --black-10: rgba(0,0,0,.1);
+ --black-05: rgba(0,0,0,.05);
+ --black-025: rgba(0,0,0,.025);
+ --black-0125: rgba(0,0,0,.0125);
+
+ --white-90: rgba(255,255,255,.9);
+ --white-80: rgba(255,255,255,.8);
+ --white-70: rgba(255,255,255,.7);
+ --white-60: rgba(255,255,255,.6);
+ --white-50: rgba(255,255,255,.5);
+ --white-40: rgba(255,255,255,.4);
+ --white-30: rgba(255,255,255,.3);
+ --white-20: rgba(255,255,255,.2);
+ --white-10: rgba(255,255,255,.1);
+ --white-05: rgba(255,255,255,.05);
+ --white-025: rgba(255,255,255,.025);
+ --white-0125: rgba(255,255,255,.0125);
+
+ --dark-red: #e7040f;
+ --red: #ff4136;
+ --light-red: #ff725c;
+ --orange: #ff6300;
+ --gold: #ffb700;
+ --yellow: #ffd700;
+ --light-yellow: #fbf1a9;
+ --purple: #5e2ca5;
+ --light-purple: #a463f2;
+ --dark-pink: #d5008f;
+ --hot-pink: #ff41b4;
+ --pink: #ff80cc;
+ --light-pink: #ffa3d7;
+ --dark-green: #137752;
+ --green: #19a974;
+ --light-green: #9eebcf;
+ --navy: #001b44;
+ --dark-blue: #00449e;
+ --blue: #357edd;
+ --light-blue: #96ccff;
+ --lightest-blue: #cdecff;
+ --washed-blue: #f6fffe;
+ --washed-green: #e8fdf5;
+ --washed-yellow: #fffceb;
+ --washed-red: #ffdfdf;
+
+}
diff --git a/src/_container-type.css b/src/_container-type.css
deleted file mode 100644
index 8749a4434..000000000
--- a/src/_container-type.css
+++ /dev/null
@@ -1,35 +0,0 @@
-/*
-
- CONTAINER-TYPE
-
- Media Query Extensions:
- -s = small
- -m = medium
- -l = large
-
- MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/container-type
-
-*/
-
-.container-size { container-type: size; }
-.root,
-.container-inline { container-type: inline-size; }
-.container-normal { container-type: normal; }
-
-@container (min-width:30em) {
- .container-size-s { container-type: size; }
- .container-inline-s { container-type: inline-size; }
- .container-normal-s { container-type: normal; }
-}
-
-@container (min-width:48em) {
- .container-size-m { container-type: size; }
- .container-inline-m { container-type: inline-size; }
- .container-normal-m { container-type: normal; }
-}
-
-@container (min-width:64em) {
- .container-size-l { container-type: size; }
- .container-inline-l { container-type: inline-size; }
- .container-normal-l { container-type: normal; }
-}
diff --git a/src/_coordinates.css b/src/_coordinates.css
index 2bc08162f..bf8e6d787 100644
--- a/src/_coordinates.css
+++ b/src/_coordinates.css
@@ -19,7 +19,7 @@
--2 = literal value -2
Media Query Extensions:
- -s = small
+ -ns = not-small
-m = medium
-l = large
@@ -30,96 +30,117 @@
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }
-.top-1 { top: var(--size, 1rem); }
-.right-1 { right: var(--size, 1rem); }
-.bottom-1 { bottom: var(--size, 1rem); }
-.left-1 { left: var(--size, 1rem); }
-
-.top-2 { top: calc(var(--size, 1rem) * 2); }
-.right-2 { right: calc(var(--size, 1rem) * 2); }
-.bottom-2 { bottom: calc(var(--size, 1rem) * 2); }
-.left-2 { left: calc(var(--size, 1rem) * 2); }
-
-.top--1 { top: calc(var(--size, 1rem) * -1); }
-.right--1 { right: calc(var(--size, 1rem) * -1); }
-.bottom--1 { bottom: calc(var(--size, 1rem) * -1); }
-.left--1 { left: calc(var(--size, 1rem) * -1); }
-
-.top--2 { top: calc(var(--size, 1rem) * -2); }
-.right--2 { right: calc(var(--size, 1rem) * -2); }
-.bottom--2 { bottom: calc(var(--size, 1rem) * -2); }
-.left--2 { left: calc(var(--size, 1rem) * -2); }
-
-.inset-0 { inset: 0; }
-
-@container (min-width:30em) {
- .top-0-s { top: 0; }
- .left-0-s { left: 0; }
- .right-0-s { right: 0; }
- .bottom-0-s { bottom: 0; }
- .top-1-s { top: var(--size, 1rem); }
- .left-1-s { left: var(--size, 1rem); }
- .right-1-s { right: var(--size, 1rem); }
- .bottom-1-s { bottom: var(--size, 1rem); }
- .top-2-s { top: calc(var(--size, 1rem) * 2); }
- .left-2-s { left: calc(var(--size, 1rem) * 2); }
- .right-2-s { right: calc(var(--size, 1rem) * 2); }
- .bottom-2-s { bottom: calc(var(--size, 1rem) * 2); }
- .top--1-s { top: calc(var(--size, 1rem) * -1); }
- .right--1-s { right: calc(var(--size, 1rem) * -1); }
- .bottom--1-s { bottom: calc(var(--size, 1rem) * -1); }
- .left--1-s { left: calc(var(--size, 1rem) * -1); }
- .top--2-s { top: calc(var(--size, 1rem) * -2); }
- .right--2-s { right: calc(var(--size, 1rem) * -2); }
- .bottom--2-s { bottom: calc(var(--size, 1rem) * -2); }
- .left--2-s { left: calc(var(--size, 1rem) * -2); }
- .inset-0-s { inset: 0; }
+.top-1 { top: 1rem; }
+.right-1 { right: 1rem; }
+.bottom-1 { bottom: 1rem; }
+.left-1 { left: 1rem; }
+
+.top-2 { top: 2rem; }
+.right-2 { right: 2rem; }
+.bottom-2 { bottom: 2rem; }
+.left-2 { left: 2rem; }
+
+.top--1 { top: -1rem; }
+.right--1 { right: -1rem; }
+.bottom--1 { bottom: -1rem; }
+.left--1 { left: -1rem; }
+
+.top--2 { top: -2rem; }
+.right--2 { right: -2rem; }
+.bottom--2 { bottom: -2rem; }
+.left--2 { left: -2rem; }
+
+
+.absolute--fill {
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+}
+
+@media (--breakpoint-not-small) {
+ .top-0-ns { top: 0; }
+ .left-0-ns { left: 0; }
+ .right-0-ns { right: 0; }
+ .bottom-0-ns { bottom: 0; }
+ .top-1-ns { top: 1rem; }
+ .left-1-ns { left: 1rem; }
+ .right-1-ns { right: 1rem; }
+ .bottom-1-ns { bottom: 1rem; }
+ .top-2-ns { top: 2rem; }
+ .left-2-ns { left: 2rem; }
+ .right-2-ns { right: 2rem; }
+ .bottom-2-ns { bottom: 2rem; }
+ .top--1-ns { top: -1rem; }
+ .right--1-ns { right: -1rem; }
+ .bottom--1-ns { bottom: -1rem; }
+ .left--1-ns { left: -1rem; }
+ .top--2-ns { top: -2rem; }
+ .right--2-ns { right: -2rem; }
+ .bottom--2-ns { bottom: -2rem; }
+ .left--2-ns { left: -2rem; }
+ .absolute--fill-ns {
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ }
}
-@container (min-width:48em) {
+@media (--breakpoint-medium) {
.top-0-m { top: 0; }
.left-0-m { left: 0; }
.right-0-m { right: 0; }
.bottom-0-m { bottom: 0; }
- .top-1-m { top: var(--size, 1rem); }
- .left-1-m { left: var(--size, 1rem); }
- .right-1-m { right: var(--size, 1rem); }
- .bottom-1-m { bottom: var(--size, 1rem); }
- .top-2-m { top: calc(var(--size, 1rem) * 2); }
- .left-2-m { left: calc(var(--size, 1rem) * 2); }
- .right-2-m { right: calc(var(--size, 1rem) * 2); }
- .bottom-2-m { bottom: calc(var(--size, 1rem) * 2); }
- .top--1-m { top: calc(var(--size, 1rem) * -1); }
- .right--1-m { right: calc(var(--size, 1rem) * -1); }
- .bottom--1-m { bottom: calc(var(--size, 1rem) * -1); }
- .left--1-m { left: calc(var(--size, 1rem) * -1); }
- .top--2-m { top: calc(var(--size, 1rem) * -2); }
- .right--2-m { right: calc(var(--size, 1rem) * -2); }
- .bottom--2-m { bottom: calc(var(--size, 1rem) * -2); }
- .left--2-m { left: calc(var(--size, 1rem) * -2); }
- .inset-0-m { inset: 0; }
+ .top-1-m { top: 1rem; }
+ .left-1-m { left: 1rem; }
+ .right-1-m { right: 1rem; }
+ .bottom-1-m { bottom: 1rem; }
+ .top-2-m { top: 2rem; }
+ .left-2-m { left: 2rem; }
+ .right-2-m { right: 2rem; }
+ .bottom-2-m { bottom: 2rem; }
+ .top--1-m { top: -1rem; }
+ .right--1-m { right: -1rem; }
+ .bottom--1-m { bottom: -1rem; }
+ .left--1-m { left: -1rem; }
+ .top--2-m { top: -2rem; }
+ .right--2-m { right: -2rem; }
+ .bottom--2-m { bottom: -2rem; }
+ .left--2-m { left: -2rem; }
+ .absolute--fill-m {
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ }
}
-@container (min-width:64em) {
+@media (--breakpoint-large) {
.top-0-l { top: 0; }
.left-0-l { left: 0; }
.right-0-l { right: 0; }
.bottom-0-l { bottom: 0; }
- .top-1-l { top: var(--size, 1rem); }
- .left-1-l { left: var(--size, 1rem); }
- .right-1-l { right: var(--size, 1rem); }
- .bottom-1-l { bottom: var(--size, 1rem); }
- .top-2-l { top: calc(var(--size, 1rem) * 2); }
- .left-2-l { left: calc(var(--size, 1rem) * 2); }
- .right-2-l { right: calc(var(--size, 1rem) * 2); }
- .bottom-2-l { bottom: calc(var(--size, 1rem) * 2); }
- .top--1-l { top: calc(var(--size, 1rem) * -1); }
- .right--1-l { right: calc(var(--size, 1rem) * -1); }
- .bottom--1-l { bottom: calc(var(--size, 1rem) * -1); }
- .left--1-l { left: calc(var(--size, 1rem) * -1); }
- .top--2-l { top: calc(var(--size, 1rem) * -2); }
- .right--2-l { right: calc(var(--size, 1rem) * -2); }
- .bottom--2-l { bottom: calc(var(--size, 1rem) * -2); }
- .left--2-l { left: calc(var(--size, 1rem) * -2); }
- .inset-0-l { inset: 0; }
+ .top-1-l { top: 1rem; }
+ .left-1-l { left: 1rem; }
+ .right-1-l { right: 1rem; }
+ .bottom-1-l { bottom: 1rem; }
+ .top-2-l { top: 2rem; }
+ .left-2-l { left: 2rem; }
+ .right-2-l { right: 2rem; }
+ .bottom-2-l { bottom: 2rem; }
+ .top--1-l { top: -1rem; }
+ .right--1-l { right: -1rem; }
+ .bottom--1-l { bottom: -1rem; }
+ .left--1-l { left: -1rem; }
+ .top--2-l { top: -2rem; }
+ .right--2-l { right: -2rem; }
+ .bottom--2-l { bottom: -2rem; }
+ .left--2-l { left: -2rem; }
+ .absolute--fill-l {
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ }
}
diff --git a/src/_debug-children.css b/src/_debug-children.css
index 2bbab02a1..10204dacc 100644
--- a/src/_debug-children.css
+++ b/src/_debug-children.css
@@ -8,10 +8,7 @@
*/
-.debug * {
- --debug-color: 128 0 90;
- --debug-opacity: .8;
- outline: 1px solid rbg(var(--debug-color, 128 0 90) / (--debug-opacity, .8));
-}
-
+.debug * { outline: 1px solid gold; }
+.debug-white * { outline: 1px solid white; }
+.debug-black * { outline: 1px solid black; }
diff --git a/src/_debug-grid.css b/src/_debug-grid.css
index 612b82d2e..8bb85bc56 100644
--- a/src/_debug-grid.css
+++ b/src/_debug-grid.css
@@ -1,21 +1,26 @@
-/*
+/*
DEBUG GRID
http://tachyons.io/docs/debug-grid/
Can be useful for debugging layout issues
or helping to make sure things line up perfectly.
- Just tack this class onto a parent element
+ Just tack one of these classes onto a parent element.
*/
.debug-grid {
- --grid-size: 16px;
- --grid-color: var(--magenta-9);
+ background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAFElEQVR4AWPAC97/9x0eCsAEPgwAVLshdpENIxcAAAAASUVORK5CYII=) repeat top left;
+}
+
+.debug-grid-16 {
+ background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMklEQVR4AWOgCLz/b0epAa6UGuBOqQHOQHLUgFEDnAbcBZ4UGwDOkiCnkIhdgNgNxAYAiYlD+8sEuo8AAAAASUVORK5CYII=) repeat top left;
+}
- background-image:
- repeating-linear-gradient(0deg, var(--grid-color), var(--grid-color) 1px, transparent 1px, transparent var(--grid-size)),
- repeating-linear-gradient(90deg, var(--grid-color), var(--grid-color) 1px, transparent 1px, transparent var(--grid-size));
- background-size: 100% var(--grid-size);
+.debug-grid-8-solid {
+ background:white url(data:image/gif;base64,R0lGODdhCAAIAPEAAADw/wDx/////wAAACwAAAAACAAIAAACDZQvgaeb/lxbAIKA8y0AOw==) repeat top left;
}
+.debug-grid-16-solid {
+ background:white url(data:image/gif;base64,R0lGODdhEAAQAPEAAADw/wDx/xXy/////ywAAAAAEAAQAAACIZyPKckYDQFsb6ZqD85jZ2+BkwiRFKehhqQCQgDHcgwEBQA7) repeat top left;
+}
diff --git a/src/_debug.css b/src/_debug.css
index bbd7ff5fc..f09f2b519 100644
--- a/src/_debug.css
+++ b/src/_debug.css
@@ -11,123 +11,122 @@
*/
-body { outline: 1px solid var(--blue-0)!important; }
-article { outline: 1px solid var(--blue-1)!important; }
-nav { outline: 1px solid var(--blue-2)!important; }
-aside { outline: 1px solid var(--blue-3)!important; }
-section { outline: 1px solid var(--blue-4)!important; }
-header { outline: 1px solid var(--blue-5)!important; }
-footer { outline: 1px solid var(--blue-6)!important; }
-h1 { outline: 1px solid var(--blue-7)!important; }
-h2 { outline: 1px solid var(--blue-8)!important; }
-h3 { outline: 1px solid var(--blue-9)!important; }
-h4 { outline: 1px solid var(--blue-10)!important; }
-h5 { outline: 1px solid var(--blue-11)!important; }
-h6 { outline: 1px solid var(--indigo-0)!important; }
-main { outline: 1px solid var(--indigo-1)!important; }
-address { outline: 1px solid var(--indigo-2)!important; }
-div { outline: 1px solid var(--indigo-3)!important; }
-
-
-p { outline: 1px solid var(--red-0)!important; }
-hr { outline: 1px solid var(--red-1)!important; }
-pre { outline: 1px solid var(--red-2)!important; }
-blockquote { outline: 1px solid var(--red-3)!important; }
-ol { outline: 1px solid var(--red-4)!important; }
-ul { outline: 1px solid var(--red-5)!important; }
-li { outline: 1px solid var(--red-6)!important; }
-dl { outline: 1px solid var(--red-7)!important; }
-dt { outline: 1px solid var(--red-8)!important; }
-dd { outline: 1px solid var(--red-9)!important; }
-figure { outline: 1px solid var(--red-10)!important; }
-figcaption { outline: 1px solid var(--red-11)!important; }
-
-
-
-table { outline: 1px solid var(--teal-2)!important; }
-caption { outline: 1px solid var(--teal-3)!important; }
-thead { outline: 1px solid var(--teal-4)!important; }
-tbody { outline: 1px solid var(--teal-5)!important; }
-tfoot { outline: 1px solid var(--teal-6)!important; }
-tr { outline: 1px solid var(--teal-7)!important; }
-th { outline: 1px solid var(--teal-8)!important; }
-td { outline: 1px solid var(--teal-9)!important; }
-col { outline: 1px solid var(--teal-10)!important; }
-colgroup { outline: 1px solid var(--teal-11)!important; }
-
-
-button { outline: 1px solid var(--magenta-0)!important; }
-datalist { outline: 1px solid var(--magenta-1)!important; }
-fieldset { outline: 1px solid var(--magenta-2)!important; }
-form { outline: 1px solid var(--magenta-3)!important; }
-input { outline: 1px solid var(--magenta-4)!important; }
-keygen { outline: 1px solid var(--magenta-5)!important; }
-label { outline: 1px solid var(--magenta-6)!important; }
-legend { outline: 1px solid var(--magenta-7)!important; }
-meter { outline: 1px solid var(--magenta-8)!important; }
-optgroup { outline: 1px solid var(--magenta-9)!important; }
-option { outline: 1px solid var(--magenta-10)!important; }
-output { outline: 1px solid var(--magenta-11)!important; }
-progress { outline: 1px solid var(--violet-0)!important; }
-select { outline: 1px solid var(--violet-1)!important; }
-textarea { outline: 1px solid var(--violet-2)!important; }
-
-
-
-details { outline: 1px solid var(--cyan-0)!important; }
-summary { outline: 1px solid var(--cyan-1)!important; }
-command { outline: 1px solid var(--cyan-2)!important; }
-menu { outline: 1px solid var(--cyan-3)!important; }
-
-
-
-del { outline: 1px solid var(--red-5)!important; }
-ins { outline: 1px solid var(--green-5)!important; }
-
-
-
-img { outline: 1px solid var(--green-0)!important; }
-iframe { outline: 1px solid var(--green-1)!important; }
-embed { outline: 1px solid var(--green-2)!important; }
-object { outline: 1px solid var(--green-3)!important; }
-param { outline: 1px solid var(--green-4)!important; }
-video { outline: 1px solid var(--green-6)!important; }
-audio { outline: 1px solid var(--green-7)!important; }
-source { outline: 1px solid var(--green-8)!important; }
-canvas { outline: 1px solid var(--green-9)!important; }
-track { outline: 1px solid var(--green-10)!important; }
-map { outline: 1px solid var(--green-11)!important; }
-area { outline: 1px solid var(--cyan-5)!important; }
-
-
-
-a { outline: 1px solid var(--violet-0)!important; }
-em { outline: 1px solid var(--violet-1)!important; }
-strong { outline: 1px solid var(--violet-2)!important; }
-i { outline: 1px solid var(--violet-3)!important; }
-b { outline: 1px solid var(--violet-4)!important; }
-u { outline: 1px solid var(--violet-5)!important; }
-s { outline: 1px solid var(--violet-6)!important; }
-small { outline: 1px solid var(--violet-7)!important; }
-abbr { outline: 1px solid var(--violet-8)!important; }
-q { outline: 1px solid var(--violet-9)!important; }
-cite { outline: 1px solid var(--violet-10)!important; }
-dfn { outline: 1px solid var(--violet-11)!important; }
-sub { outline: 1px solid var(--red-orange-0)!important; }
-sup { outline: 1px solid var(--red-orange-1)!important; }
-time { outline: 1px solid var(--red-orange-2)!important; }
-code { outline: 1px solid var(--red-orange-3)!important; }
-kbd { outline: 1px solid var(--red-orange-4)!important; }
-samp { outline: 1px solid var(--red-orange-5)!important; }
-var { outline: 1px solid var(--red-orange-6)!important; }
-mark { outline: 1px solid var(--red-orange-7)!important; }
-bdi { outline: 1px solid var(--red-orange-8)!important; }
-bdo { outline: 1px solid var(--red-orange-9)!important; }
-ruby { outline: 1px solid var(--red-orange-10)!important; }
-ruby { outline: 1px solid var(--red-orange-11)!important; }
-rt { outline: 1px solid var(--yellow-6)!important; }
-rp { outline: 1px solid var(--yellow-7)!important; }
-span { outline: 1px solid var(--yellow-8)!important; }
-br { outline: 1px solid var(--yellow-9)!important; }
-wbr { outline: 1px solid var(--yellow-10)!important; }
+body { outline: 1px solid #2980B9!important; }
+article { outline: 1px solid #3498DB!important; }
+nav { outline: 1px solid #0088C3!important; }
+aside { outline: 1px solid #33A0CE!important; }
+section { outline: 1px solid #66B8DA!important; }
+header { outline: 1px solid #99CFE7!important; }
+footer { outline: 1px solid #CCE7F3!important; }
+h1 { outline: 1px solid #162544!important; }
+h2 { outline: 1px solid #314E6E!important; }
+h3 { outline: 1px solid #3E5E85!important; }
+h4 { outline: 1px solid #449BAF!important; }
+h5 { outline: 1px solid #C7D1CB!important; }
+h6 { outline: 1px solid #4371D0!important; }
+main { outline: 1px solid #2F4F90!important; }
+address { outline: 1px solid #1A2C51!important; }
+div { outline: 1px solid #036CDB!important; }
+
+
+p { outline: 1px solid #AC050B!important; }
+hr { outline: 1px solid #FF063F!important; }
+pre { outline: 1px solid #850440!important; }
+blockquote { outline: 1px solid #F1B8E7!important; }
+ol { outline: 1px solid #FF050C!important; }
+ul { outline: 1px solid #D90416!important; }
+li { outline: 1px solid #D90416!important; }
+dl { outline: 1px solid #FD3427!important; }
+dt { outline: 1px solid #FF0043!important; }
+dd { outline: 1px solid #E80174!important; }
+figure { outline: 1px solid #FF00BB!important; }
+figcaption { outline: 1px solid #BF0032!important; }
+
+
+
+table { outline: 1px solid #00CC99!important; }
+caption { outline: 1px solid #37FFC4!important; }
+thead { outline: 1px solid #98DACA!important; }
+tbody { outline: 1px solid #64A7A0!important; }
+tfoot { outline: 1px solid #22746B!important; }
+tr { outline: 1px solid #86C0B2!important; }
+th { outline: 1px solid #A1E7D6!important; }
+td { outline: 1px solid #3F5A54!important; }
+col { outline: 1px solid #6C9A8F!important; }
+colgroup { outline: 1px solid #6C9A9D!important; }
+
+
+button { outline: 1px solid #DA8301!important; }
+datalist { outline: 1px solid #C06000!important; }
+fieldset { outline: 1px solid #D95100!important; }
+form { outline: 1px solid #D23600!important; }
+input { outline: 1px solid #FCA600!important; }
+keygen { outline: 1px solid #B31E00!important; }
+label { outline: 1px solid #EE8900!important; }
+legend { outline: 1px solid #DE6D00!important; }
+meter { outline: 1px solid #E8630C!important; }
+optgroup { outline: 1px solid #B33600!important; }
+option { outline: 1px solid #FF8A00!important; }
+output { outline: 1px solid #FF9619!important; }
+progress { outline: 1px solid #E57C00!important; }
+select { outline: 1px solid #E26E0F!important; }
+textarea { outline: 1px solid #CC5400!important; }
+
+
+
+details { outline: 1px solid #33848F!important; }
+summary { outline: 1px solid #60A1A6!important; }
+command { outline: 1px solid #438DA1!important; }
+menu { outline: 1px solid #449DA6!important; }
+
+
+
+del { outline: 1px solid #BF0000!important; }
+ins { outline: 1px solid #400000!important; }
+
+
+
+img { outline: 1px solid #22746B!important; }
+iframe { outline: 1px solid #64A7A0!important; }
+embed { outline: 1px solid #98DACA!important; }
+object { outline: 1px solid #00CC99!important; }
+param { outline: 1px solid #37FFC4!important; }
+video { outline: 1px solid #6EE866!important; }
+audio { outline: 1px solid #027353!important; }
+source { outline: 1px solid #012426!important; }
+canvas { outline: 1px solid #A2F570!important; }
+track { outline: 1px solid #59A600!important; }
+map { outline: 1px solid #7BE500!important; }
+area { outline: 1px solid #305900!important; }
+
+
+
+a { outline: 1px solid #FF62AB!important; }
+em { outline: 1px solid #800B41!important; }
+strong { outline: 1px solid #FF1583!important; }
+i { outline: 1px solid #803156!important; }
+b { outline: 1px solid #CC1169!important; }
+u { outline: 1px solid #FF0430!important; }
+s { outline: 1px solid #F805E3!important; }
+small { outline: 1px solid #D107B2!important; }
+abbr { outline: 1px solid #4A0263!important; }
+q { outline: 1px solid #240018!important; }
+cite { outline: 1px solid #64003C!important; }
+dfn { outline: 1px solid #B4005A!important; }
+sub { outline: 1px solid #DBA0C8!important; }
+sup { outline: 1px solid #CC0256!important; }
+time { outline: 1px solid #D6606D!important; }
+code { outline: 1px solid #E04251!important; }
+kbd { outline: 1px solid #5E001F!important; }
+samp { outline: 1px solid #9C0033!important; }
+var { outline: 1px solid #D90047!important; }
+mark { outline: 1px solid #FF0053!important; }
+bdi { outline: 1px solid #BF3668!important; }
+bdo { outline: 1px solid #6F1400!important; }
+ruby { outline: 1px solid #FF7B93!important; }
+rt { outline: 1px solid #FF2F54!important; }
+rp { outline: 1px solid #803E49!important; }
+span { outline: 1px solid #CC2643!important; }
+br { outline: 1px solid #DB687D!important; }
+wbr { outline: 1px solid #DB175B!important; }
diff --git a/src/_display.css b/src/_display.css
index 3ecfd30ef..5eb68b307 100644
--- a/src/_display.css
+++ b/src/_display.css
@@ -10,86 +10,95 @@
n = none
b = block
ib = inline-block
- if = inline-flex
- ig = inline-grid
- f = flex
- g = grid
+ it = inline-table
+ t = table
+ tc = table-cell
+ t-row = table-row
+ t-columm = table-column
+ t-column-group = table-column-group
Media Query Extensions:
- -s = small
+ -ns = not-small
-m = medium
-l = large
*/
-.dn { display: none; }
-.di { display: inline; }
-.db { display: block; }
-.dib { display: inline-block; }
-.df, .flex { display: flex; }
-.dif, .inline-flex { display: inline-flex; }
-.dg,
-.grid {
- display: grid;
-}
+.dn { display: none; }
+.di { display: inline; }
+.db { display: block; }
+.dib { display: inline-block; }
+.dit { display: inline-table; }
+.dt { display: table; }
+.dtc { display: table-cell; }
+.dt-row { display: table-row; }
+.dt-row-group { display: table-row-group; }
+.dt-column { display: table-column; }
+.dt-column-group { display: table-column-group; }
-.dig,
-.inline-grid {
- display: inline-grid;
+/*
+ This will set table to full width and then
+ all cells will be equal width
+*/
+.dt--fixed {
+ table-layout: fixed;
+ width: 100%;
}
-@container (min-width:30em) {
- .dn-s { display: none; }
- .di-s { display: inline; }
- .db-s { display: block; }
- .dib-s { display: inline-block; }
- .df-s, .flex-s { display: flex; }
- .dif-s, .inline-flex-s { display: inline-flex; }
- .dg-s,
- .grid-s {
- display: grid;
- }
+@media (--breakpoint-not-small) {
+ .dn-ns { display: none; }
+ .di-ns { display: inline; }
+ .db-ns { display: block; }
+ .dib-ns { display: inline-block; }
+ .dit-ns { display: inline-table; }
+ .dt-ns { display: table; }
+ .dtc-ns { display: table-cell; }
+ .dt-row-ns { display: table-row; }
+ .dt-row-group-ns { display: table-row-group; }
+ .dt-column-ns { display: table-column; }
+ .dt-column-group-ns { display: table-column-group; }
- .dig-s,
- .inline-grid-s {
- display: inline-grid;
+ .dt--fixed-ns {
+ table-layout: fixed;
+ width: 100%;
}
}
-@container (min-width:48em) {
+@media (--breakpoint-medium) {
+ .dn-m { display: none; }
+ .di-m { display: inline; }
+ .db-m { display: block; }
+ .dib-m { display: inline-block; }
+ .dit-m { display: inline-table; }
+ .dt-m { display: table; }
+ .dtc-m { display: table-cell; }
+ .dt-row-m { display: table-row; }
+ .dt-row-group-m { display: table-row-group; }
+ .dt-column-m { display: table-column; }
+ .dt-column-group-m { display: table-column-group; }
- .dn-m { display: none; }
- .di-m { display: inline; }
- .db-m { display: block; }
- .dib-m { display: inline-block; }
- .df-m, .flex-m { display: flex; }
- .dif-m, .inline-flex-m { display: inline-flex; }
- .dg-m,
- .grid-m {
- display: grid;
- }
-
- .dig-m,
- .inline-grid-m {
- display: inline-grid;
+ .dt--fixed-m {
+ table-layout: fixed;
+ width: 100%;
}
}
-@container (min-width:64em) {
- .dn-l { display: none; }
- .di-l { display: inline; }
- .db-l { display: block; }
- .dib-l { display: inline-block; }
- .df-l, .flex-l { display: flex; }
- .dif-l, .inline-flex-l { display: inline-flex; }
- .dg-l,
- .grid-l {
- display: grid;
- }
+@media (--breakpoint-large) {
+ .dn-l { display: none; }
+ .di-l { display: inline; }
+ .db-l { display: block; }
+ .dib-l { display: inline-block; }
+ .dit-l { display: inline-table; }
+ .dt-l { display: table; }
+ .dtc-l { display: table-cell; }
+ .dt-row-l { display: table-row; }
+ .dt-row-group-l { display: table-row-group; }
+ .dt-column-l { display: table-column; }
+ .dt-column-group-l { display: table-column-group; }
- .dig-l,
- .inline-grid-l {
- display: inline-grid;
+ .dt--fixed-l {
+ table-layout: fixed;
+ width: 100%;
}
}
diff --git a/src/_element-defaults.css b/src/_element-defaults.css
deleted file mode 100644
index 5a8026261..000000000
--- a/src/_element-defaults.css
+++ /dev/null
@@ -1,113 +0,0 @@
-html {}
-
-body {}
-article {}
-section {}
-nav {}
-aside {}
-h1 {}
-h2 {}
-h3 {}
-h4 {}
-h5 {}
-h6 {}
-header {}
-footer {}
-address {}
-
-p {}
-hr {}
-pre {}
-blockquote {}
-ol {}
-ul {}
-li {}
-dl {}
-dt {}
-dd {}
-figure {}
-figcaption {}
-main {}
-div {}
-
-a {}
-em {}
-strong {}
-small {}
-s {}
-cite {}
-q {}
-dfn {}
-abbr {}
-ruby {}
-rt {}
-rp {}
-data {}
-time {}
-code {}
-var {}
-samp {}
-kbd {}
-sub {}
-sup {}
-i {}
-b {}
-u {}
-mark {}
-bdi {}
-bdo {}
-span {}
-br {}
-wbr {}
-
-area {}
-map {}
-
-ins {}
-del {}
-
-picture {}
-source {}
-img {}
-iframe {}
-embed {}
-object {}
-param {}
-video {}
-audio {}
-track {}
-
-table {}
-caption {}
-colgroup {}
-col {}
-tbody {}
-thead {}
-tfoot {}
-tr {}
-td {}
-th {}
-
-form {}
-fieldset {}
-legend {}
-label {}
-input {}
-button {}
-select {}
-datalist {}
-optgroup {}
-option {}
-textarea {}
-output {}
-progress {}
-meter {}
-
-details {}
-summary {}
-dialog {}
-menu {}
-menuitem {}
-slot {}
-template {}
-
diff --git a/src/_filters.css b/src/_filters.css
deleted file mode 100644
index 0d805eda4..000000000
--- a/src/_filters.css
+++ /dev/null
@@ -1,73 +0,0 @@
-/*
-
- FILTER EFFECTS
-
- - Blur
- - Grayscale
- - Hue Rotate
- - Invert
-
-*/
-
-.filter-none { filter: none; }
-
-.blur1 { filter: blur(4px); }
-.blur2 { filter: blur(16px); }
-.blur3 { filter: blur(96px); }
-
-.grayscale1 { filter: grayscale(0); }
-.grayscale2 { filter: grayscale(50%); }
-.grayscale3 { filter: grayscale(100%); }
-
-.hue-rotate0 { filter: hue-rotate(0deg);}
-.hue-rotate1 { filter: hue-rotate(45deg);}
-.hue-rotate2 { filter: hue-rotate(90deg);}
-.hue-rotate3 { filter: hue-rotate(135deg);}
-.hue-rotate4 { filter: hue-rotate(180deg);}
-.hue-rotate5 { filter: hue-rotate(225deg);}
-.hue-rotate6 { filter: hue-rotate(270deg);}
-.hue-rotate7 { filter: hue-rotate(315deg);}
-
-.invert { filter: invert(100%); }
-
-/* TODO: Add drop-shadow */
-
-.filter-none-hover:hover { filter: none; }
-
-.blur1-hover:hover { filter: blur(4px); }
-.blur2-hover:hover { filter: blur(16px); }
-.blur3-hover:hover { filter: blur(96px); }
-
-.grayscale1-hover:hover { filter: grayscale(0); }
-.grayscale2-hover:hover { filter: grayscale(50%); }
-.grayscale3-hover:hover { filter: grayscale(100%); }
-
-.hue-rotate0-hover:hover { filter: hue-rotate(0deg);}
-.hue-rotate1-hover:hover { filter: hue-rotate(45deg);}
-.hue-rotate2-hover:hover { filter: hue-rotate(90deg);}
-.hue-rotate3-hover:hover { filter: hue-rotate(135deg);}
-.hue-rotate4-hover:hover { filter: hue-rotate(180deg);}
-.hue-rotate5-hover:hover { filter: hue-rotate(225deg);}
-.hue-rotate6-hover:hover { filter: hue-rotate(270deg);}
-.hue-rotate7-hover:hover { filter: hue-rotate(315deg);}
-
-.invert-hover:hover { filter: invert(100%); }
-
-.blur1-focus:focus { filter: blur(4px); }
-.blur2-focus:focus { filter: blur(16px); }
-.blur3-focus:focus { filter: blur(96px); }
-
-.grayscale1-focus:focus { filter: grayscale(0); }
-.grayscale2-focus:focus { filter: grayscale(50%); }
-.grayscale3-focus:focus { filter: grayscale(100%); }
-
-.hue-rotate0-focus:focus { filter: hue-rotate(0deg);}
-.hue-rotate1-focus:focus { filter: hue-rotate(45deg);}
-.hue-rotate2-focus:focus { filter: hue-rotate(90deg);}
-.hue-rotate3-focus:focus { filter: hue-rotate(135deg);}
-.hue-rotate4-focus:focus { filter: hue-rotate(180deg);}
-.hue-rotate5-focus:focus { filter: hue-rotate(225deg);}
-.hue-rotate6-focus:focus { filter: hue-rotate(270deg);}
-.hue-rotate7-focus:focus { filter: hue-rotate(315deg);}
-
-.invert-focus:focus { filter: invert(100%); }
diff --git a/src/_flex-direction.css b/src/_flex-direction.css
deleted file mode 100644
index 738c25096..000000000
--- a/src/_flex-direction.css
+++ /dev/null
@@ -1,37 +0,0 @@
-/*
-
- FLEX-DIRECTION
-
- Media Query Extensions:
- -s = small
- -m = medium
- -l = large
-
-*/
-
-
-.flex-column { flex-direction: column; }
-.flex-row { flex-direction: row; }
-.flex-column-reverse { flex-direction: column-reverse; }
-.flex-row-reverse { flex-direction: row-reverse; }
-
-@container (min-width:30em) {
- .flex-column-s { flex-direction: column; }
- .flex-row-s { flex-direction: row; }
- .flex-column-reverse-s { flex-direction: column-reverse; }
- .flex-row-reverse-s { flex-direction: row-reverse; }
-}
-
-@container (min-width:48em) {
- .flex-column-m { flex-direction: column; }
- .flex-row-m { flex-direction: row; }
- .flex-column-reverse-m { flex-direction: column-reverse; }
- .flex-row-reverse-m { flex-direction: row-reverse; }
-}
-
-@container (min-width:64em) {
- .flex-column-l { flex-direction: column; }
- .flex-row-l { flex-direction: row; }
- .flex-column-reverse-l { flex-direction: column-reverse; }
- .flex-row-reverse-l { flex-direction: row-reverse; }
-}
diff --git a/src/_flex-wrap.css b/src/_flex-wrap.css
deleted file mode 100644
index ff32bb829..000000000
--- a/src/_flex-wrap.css
+++ /dev/null
@@ -1,32 +0,0 @@
-/*
-
- FLEX-WRAP
-
- Media Query Extensions:
- -s = small
- -m = medium
- -l = large
-
-*/
-
-.flex-wrap { flex-wrap: wrap; }
-.flex-nowrap { flex-wrap: nowrap; }
-.flex-wrap-reverse { flex-wrap: wrap-reverse; }
-
-@container (min-width:30em) {
- .flex-wrap-s { flex-wrap: wrap; }
- .flex-nowrap-s { flex-wrap: nowrap; }
- .flex-wrap-reverse-s { flex-wrap: wrap-reverse; }
-}
-
-@container (min-width:48em) {
- .flex-wrap-m { flex-wrap: wrap; }
- .flex-nowrap-m { flex-wrap: nowrap; }
- .flex-wrap-reverse-m { flex-wrap: wrap-reverse; }
-}
-
-@container (min-width:64em) {
- .flex-wrap-l { flex-wrap: wrap; }
- .flex-nowrap-l { flex-wrap: nowrap; }
- .flex-wrap-reverse-l { flex-wrap: wrap-reverse; }
-}
diff --git a/src/_flexbox.css b/src/_flexbox.css
index 292b8fa97..5002be7cd 100644
--- a/src/_flexbox.css
+++ b/src/_flexbox.css
@@ -3,12 +3,15 @@
FLEXBOX
Media Query Extensions:
- -s = small
+ -ns = not-small
-m = medium
-l = large
*/
+.flex { display: flex; }
+.inline-flex { display: inline-flex; }
+
/* 1. Fix for Chrome 44 bug.
* https://code.google.com/p/chromium/issues/detail?id=506893 */
.flex-auto {
@@ -19,29 +22,115 @@
.flex-none { flex: none; }
+.flex-column { flex-direction: column; }
+.flex-row { flex-direction: row; }
+.flex-wrap { flex-wrap: wrap; }
+.flex-nowrap { flex-wrap: nowrap; }
+.flex-wrap-reverse { flex-wrap: wrap-reverse; }
+.flex-column-reverse { flex-direction: column-reverse; }
+.flex-row-reverse { flex-direction: row-reverse; }
+
+.items-start { align-items: flex-start; }
+.items-end { align-items: flex-end; }
+.items-center { align-items: center; }
+.items-baseline { align-items: baseline; }
+.items-stretch { align-items: stretch; }
+
+.self-start { align-self: flex-start; }
+.self-end { align-self: flex-end; }
+.self-center { align-self: center; }
+.self-baseline { align-self: baseline; }
+.self-stretch { align-self: stretch; }
+
+.justify-start { justify-content: flex-start; }
+.justify-end { justify-content: flex-end; }
+.justify-center { justify-content: center; }
+.justify-between { justify-content: space-between; }
+.justify-around { justify-content: space-around; }
+
+.content-start { align-content: flex-start; }
+.content-end { align-content: flex-end; }
+.content-center { align-content: center; }
+.content-between { align-content: space-between; }
+.content-around { align-content: space-around; }
+.content-stretch { align-content: stretch; }
+
+.order-0 { order: 0; }
+.order-1 { order: 1; }
+.order-2 { order: 2; }
+.order-3 { order: 3; }
+.order-4 { order: 4; }
+.order-5 { order: 5; }
+.order-6 { order: 6; }
+.order-7 { order: 7; }
+.order-8 { order: 8; }
+.order-last { order: 99999; }
+
.flex-grow-0 { flex-grow: 0; }
.flex-grow-1 { flex-grow: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-shrink-1 { flex-shrink: 1; }
-@container (min-width:30em) {
- .flex-s { display: flex; }
- .inline-flex-s { display: inline-flex; }
- .flex-auto-s {
+@media (--breakpoint-not-small) {
+ .flex-ns { display: flex; }
+ .inline-flex-ns { display: inline-flex; }
+ .flex-auto-ns {
flex: 1 1 auto;
min-width: 0; /* 1 */
min-height: 0; /* 1 */
}
- .flex-none-s { flex: none; }
+ .flex-none-ns { flex: none; }
+ .flex-column-ns { flex-direction: column; }
+ .flex-row-ns { flex-direction: row; }
+ .flex-wrap-ns { flex-wrap: wrap; }
+ .flex-nowrap-ns { flex-wrap: nowrap; }
+ .flex-wrap-reverse-ns { flex-wrap: wrap-reverse; }
+ .flex-column-reverse-ns { flex-direction: column-reverse; }
+ .flex-row-reverse-ns { flex-direction: row-reverse; }
+ .items-start-ns { align-items: flex-start; }
+ .items-end-ns { align-items: flex-end; }
+ .items-center-ns { align-items: center; }
+ .items-baseline-ns { align-items: baseline; }
+ .items-stretch-ns { align-items: stretch; }
+
+ .self-start-ns { align-self: flex-start; }
+ .self-end-ns { align-self: flex-end; }
+ .self-center-ns { align-self: center; }
+ .self-baseline-ns { align-self: baseline; }
+ .self-stretch-ns { align-self: stretch; }
+
+ .justify-start-ns { justify-content: flex-start; }
+ .justify-end-ns { justify-content: flex-end; }
+ .justify-center-ns { justify-content: center; }
+ .justify-between-ns { justify-content: space-between; }
+ .justify-around-ns { justify-content: space-around; }
+
+ .content-start-ns { align-content: flex-start; }
+ .content-end-ns { align-content: flex-end; }
+ .content-center-ns { align-content: center; }
+ .content-between-ns { align-content: space-between; }
+ .content-around-ns { align-content: space-around; }
+ .content-stretch-ns { align-content: stretch; }
- .flex-grow-0-s { flex-grow: 0; }
- .flex-grow-1-s { flex-grow: 1; }
+ .order-0-ns { order: 0; }
+ .order-1-ns { order: 1; }
+ .order-2-ns { order: 2; }
+ .order-3-ns { order: 3; }
+ .order-4-ns { order: 4; }
+ .order-5-ns { order: 5; }
+ .order-6-ns { order: 6; }
+ .order-7-ns { order: 7; }
+ .order-8-ns { order: 8; }
+ .order-last-ns { order: 99999; }
- .flex-shrink-0-s { flex-shrink: 0; }
- .flex-shrink-1-s { flex-shrink: 1; }
+ .flex-grow-0-ns { flex-grow: 0; }
+ .flex-grow-1-ns { flex-grow: 1; }
+
+ .flex-shrink-0-ns { flex-shrink: 0; }
+ .flex-shrink-1-ns { flex-shrink: 1; }
}
-@container (min-width:48em) {
+@media (--breakpoint-medium) {
.flex-m { display: flex; }
.inline-flex-m { display: inline-flex; }
.flex-auto-m {
@@ -50,6 +139,48 @@
min-height: 0; /* 1 */
}
.flex-none-m { flex: none; }
+ .flex-column-m { flex-direction: column; }
+ .flex-row-m { flex-direction: row; }
+ .flex-wrap-m { flex-wrap: wrap; }
+ .flex-nowrap-m { flex-wrap: nowrap; }
+ .flex-wrap-reverse-m { flex-wrap: wrap-reverse; }
+ .flex-column-reverse-m { flex-direction: column-reverse; }
+ .flex-row-reverse-m { flex-direction: row-reverse; }
+ .items-start-m { align-items: flex-start; }
+ .items-end-m { align-items: flex-end; }
+ .items-center-m { align-items: center; }
+ .items-baseline-m { align-items: baseline; }
+ .items-stretch-m { align-items: stretch; }
+
+ .self-start-m { align-self: flex-start; }
+ .self-end-m { align-self: flex-end; }
+ .self-center-m { align-self: center; }
+ .self-baseline-m { align-self: baseline; }
+ .self-stretch-m { align-self: stretch; }
+
+ .justify-start-m { justify-content: flex-start; }
+ .justify-end-m { justify-content: flex-end; }
+ .justify-center-m { justify-content: center; }
+ .justify-between-m { justify-content: space-between; }
+ .justify-around-m { justify-content: space-around; }
+
+ .content-start-m { align-content: flex-start; }
+ .content-end-m { align-content: flex-end; }
+ .content-center-m { align-content: center; }
+ .content-between-m { align-content: space-between; }
+ .content-around-m { align-content: space-around; }
+ .content-stretch-m { align-content: stretch; }
+
+ .order-0-m { order: 0; }
+ .order-1-m { order: 1; }
+ .order-2-m { order: 2; }
+ .order-3-m { order: 3; }
+ .order-4-m { order: 4; }
+ .order-5-m { order: 5; }
+ .order-6-m { order: 6; }
+ .order-7-m { order: 7; }
+ .order-8-m { order: 8; }
+ .order-last-m { order: 99999; }
.flex-grow-0-m { flex-grow: 0; }
.flex-grow-1-m { flex-grow: 1; }
@@ -58,7 +189,7 @@
.flex-shrink-1-m { flex-shrink: 1; }
}
-@container (min-width:64em) {
+@media (--breakpoint-large) {
.flex-l { display: flex; }
.inline-flex-l { display: inline-flex; }
.flex-auto-l {
@@ -67,6 +198,49 @@
min-height: 0; /* 1 */
}
.flex-none-l { flex: none; }
+ .flex-column-l { flex-direction: column; }
+ .flex-row-l { flex-direction: row; }
+ .flex-wrap-l { flex-wrap: wrap; }
+ .flex-nowrap-l { flex-wrap: nowrap; }
+ .flex-wrap-reverse-l { flex-wrap: wrap-reverse; }
+ .flex-column-reverse-l { flex-direction: column-reverse; }
+ .flex-row-reverse-l { flex-direction: row-reverse; }
+
+ .items-start-l { align-items: flex-start; }
+ .items-end-l { align-items: flex-end; }
+ .items-center-l { align-items: center; }
+ .items-baseline-l { align-items: baseline; }
+ .items-stretch-l { align-items: stretch; }
+
+ .self-start-l { align-self: flex-start; }
+ .self-end-l { align-self: flex-end; }
+ .self-center-l { align-self: center; }
+ .self-baseline-l { align-self: baseline; }
+ .self-stretch-l { align-self: stretch; }
+
+ .justify-start-l { justify-content: flex-start; }
+ .justify-end-l { justify-content: flex-end; }
+ .justify-center-l { justify-content: center; }
+ .justify-between-l { justify-content: space-between; }
+ .justify-around-l { justify-content: space-around; }
+
+ .content-start-l { align-content: flex-start; }
+ .content-end-l { align-content: flex-end; }
+ .content-center-l { align-content: center; }
+ .content-between-l { align-content: space-between; }
+ .content-around-l { align-content: space-around; }
+ .content-stretch-l { align-content: stretch; }
+
+ .order-0-l { order: 0; }
+ .order-1-l { order: 1; }
+ .order-2-l { order: 2; }
+ .order-3-l { order: 3; }
+ .order-4-l { order: 4; }
+ .order-5-l { order: 5; }
+ .order-6-l { order: 6; }
+ .order-7-l { order: 7; }
+ .order-8-l { order: 8; }
+ .order-last-l { order: 99999; }
.flex-grow-0-l { flex-grow: 0; }
.flex-grow-1-l { flex-grow: 1; }
diff --git a/src/_floats.css b/src/_floats.css
index 46684347d..d5b391201 100644
--- a/src/_floats.css
+++ b/src/_floats.css
@@ -18,7 +18,7 @@
n = none
Media Query Extensions:
- -s = small
+ -ns = not-small
-m = medium
-l = large
@@ -26,24 +26,24 @@
-.fl { float: left; }
-.fr { float: right; }
+.fl { float: left; _display: inline; }
+.fr { float: right; _display: inline; }
.fn { float: none; }
-@container (min-width:30em) {
- .fl-s { float: left; }
- .fr-s { float: right; }
- .fn-s { float: none; }
+@media (--breakpoint-not-small) {
+ .fl-ns { float: left; _display: inline; }
+ .fr-ns { float: right; _display: inline; }
+ .fn-ns { float: none; }
}
-@container (min-width:48em) {
- .fl-m { float: left; }
- .fr-m { float: right; }
+@media (--breakpoint-medium) {
+ .fl-m { float: left; _display: inline; }
+ .fr-m { float: right; _display: inline; }
.fn-m { float: none; }
}
-@container (min-width:64em) {
- .fl-l { float: left; }
- .fr-l { float: right; }
+@media (--breakpoint-large) {
+ .fl-l { float: left; _display: inline; }
+ .fr-l { float: right; _display: inline; }
.fn-l { float: none; }
}
diff --git a/src/_font-family.css b/src/_font-family.css
index 15ad41e25..f719fa334 100644
--- a/src/_font-family.css
+++ b/src/_font-family.css
@@ -1,10 +1,100 @@
-/*
+/*
FONT FAMILY GROUPS
Docs: http://tachyons.io/docs/typography/font-family/
*/
-.f-heading { font-family: var(--font-family-heading, sans-serif); }
-.f-body { font-family: var(--font-family-body, sans-serif); }
-.f-mono { font-family: var(--font-family-mono, monospace); }
+
+.sans-serif {
+ font-family: -apple-system, BlinkMacSystemFont,
+ 'avenir next', avenir,
+ 'helvetica neue', helvetica,
+ ubuntu,
+ roboto, noto,
+ 'segoe ui', arial,
+ sans-serif;
+}
+
+.serif {
+ font-family: georgia,
+ times,
+ serif;
+}
+
+.system-sans-serif {
+ font-family: sans-serif;
+}
+
+.system-serif {
+ font-family: serif;
+}
+
+
+/* Monospaced Typefaces (for code) */
+
+/* From http://cssfontstack.com */
+code, .code {
+ font-family: Consolas,
+ monaco,
+ monospace;
+}
+
+.courier {
+ font-family: 'Courier Next',
+ courier,
+ monospace;
+}
+
+
+/* Sans-Serif Typefaces */
+
+.helvetica {
+ font-family: 'helvetica neue', helvetica,
+ sans-serif;
+}
+
+.avenir {
+ font-family: 'avenir next', avenir,
+ sans-serif;
+}
+
+
+/* Serif Typefaces */
+
+.athelas {
+ font-family: athelas,
+ georgia,
+ serif;
+}
+
+.georgia {
+ font-family: georgia,
+ serif;
+}
+
+.times {
+ font-family: times,
+ serif;
+}
+
+.bodoni {
+ font-family: "Bodoni MT",
+ serif;
+}
+
+.calisto {
+ font-family: "Calisto MT",
+ serif;
+}
+
+.garamond {
+ font-family: garamond,
+ serif;
+}
+
+.baskerville {
+ font-family: baskerville,
+ serif;
+}
+
diff --git a/src/_font-style.css b/src/_font-style.css
index 8e3c3629d..d095dfea5 100644
--- a/src/_font-style.css
+++ b/src/_font-style.css
@@ -4,7 +4,7 @@
Docs: http://tachyons.io/docs/typography/font-style/
Media Query Extensions:
- -s = small
+ -ns = not-small
-m = medium
-l = large
@@ -13,3 +13,17 @@
.i { font-style: italic; }
.fs-normal { font-style: normal; }
+@media (--breakpoint-not-small) {
+ .i-ns { font-style: italic; }
+ .fs-normal-ns { font-style: normal; }
+}
+
+@media (--breakpoint-medium) {
+ .i-m { font-style: italic; }
+ .fs-normal-m { font-style: normal; }
+}
+
+@media (--breakpoint-large) {
+ .i-l { font-style: italic; }
+ .fs-normal-l { font-style: normal; }
+}
diff --git a/src/_font-weight.css b/src/_font-weight.css
index 54b88cb86..990a05a7f 100644
--- a/src/_font-weight.css
+++ b/src/_font-weight.css
@@ -18,7 +18,7 @@
9 = literal value 900
Media Query Extensions:
- -s = small
+ -ns = not-small
-m = medium
-l = large
@@ -37,21 +37,21 @@
.fw9 { font-weight: 900; }
-@container (min-width:30em) {
- .normal-s { font-weight: normal; }
- .b-s { font-weight: bold; }
- .fw1-s { font-weight: 100; }
- .fw2-s { font-weight: 200; }
- .fw3-s { font-weight: 300; }
- .fw4-s { font-weight: 400; }
- .fw5-s { font-weight: 500; }
- .fw6-s { font-weight: 600; }
- .fw7-s { font-weight: 700; }
- .fw8-s { font-weight: 800; }
- .fw9-s { font-weight: 900; }
+@media (--breakpoint-not-small) {
+ .normal-ns { font-weight: normal; }
+ .b-ns { font-weight: bold; }
+ .fw1-ns { font-weight: 100; }
+ .fw2-ns { font-weight: 200; }
+ .fw3-ns { font-weight: 300; }
+ .fw4-ns { font-weight: 400; }
+ .fw5-ns { font-weight: 500; }
+ .fw6-ns { font-weight: 600; }
+ .fw7-ns { font-weight: 700; }
+ .fw8-ns { font-weight: 800; }
+ .fw9-ns { font-weight: 900; }
}
-@container (min-width:48em) {
+@media (--breakpoint-medium) {
.normal-m { font-weight: normal; }
.b-m { font-weight: bold; }
.fw1-m { font-weight: 100; }
@@ -65,7 +65,7 @@
.fw9-m { font-weight: 900; }
}
-@container (min-width:64em) {
+@media (--breakpoint-large) {
.normal-l { font-weight: normal; }
.b-l { font-weight: bold; }
.fw1-l { font-weight: 100; }
diff --git a/src/_forms.css b/src/_forms.css
index 3f27a94a4..fe0b8ab6c 100644
--- a/src/_forms.css
+++ b/src/_forms.css
@@ -7,7 +7,6 @@
.input-reset {
-webkit-appearance: none;
-moz-appearance: none;
- appearance: none;
}
.button-reset::-moz-focus-inner,
diff --git a/src/_gap-column.css b/src/_gap-column.css
deleted file mode 100644
index 7367316b9..000000000
--- a/src/_gap-column.css
+++ /dev/null
@@ -1,59 +0,0 @@
-/*
- GAP: GRID AND FLEX SPACING
- Docs: http://tachyons.io/docs/layout/gap/
-
- Base:
- g = gap
-
-
- Media Query Extensions:
- -s = small
- -m = medium
- -l = large
-
-*/
-
-
-.gc0 { gap-column: var(--spacing-0, 0); }
-.gc1 { gap-column: var(--spacing-1, 4px); }
-.gc2 { gap-column: var(--spacing-2, 8px); }
-.gc3 { gap-column: var(--spacing-3, 16px); }
-.gc4 { gap-column: var(--spacing-4, 32px); }
-.gc5 { gap-column: var(--spacing-5, 64px); }
-.gc6 { gap-column: var(--spacing-6, 128px); }
-.gc7 { gap-column: var(--spacing-7, 256px); }
-
-@container (min-width:30em) {
- .gc0-s { gap-column: var(--spacing-0, 0); }
- .gc1-s { gap-column: var(--spacing-1, 4px); }
- .gc2-s { gap-column: var(--spacing-2, 8px); }
- .gc3-s { gap-column: var(--spacing-3, 16px); }
- .gc4-s { gap-column: var(--spacing-4, 32px); }
- .gc5-s { gap-column: var(--spacing-5, 64px); }
- .gc6-s { gap-column: var(--spacing-6, 128px); }
- .gc7-s { gap-column: var(--spacing-7, 256px); }
-}
-
-@container (min-width:48em) {
- .gc0-m { gap-column: var(--spacing-0, 0); }
- .gc1-m { gap-column: var(--spacing-1, 4px); }
- .gc2-m { gap-column: var(--spacing-2, 8px); }
- .gc3-m { gap-column: var(--spacing-3, 16px); }
- .gc4-m { gap-column: var(--spacing-4, 32px); }
- .gc5-m { gap-column: var(--spacing-5, 64px); }
- .gc6-m { gap-column: var(--spacing-6, 128px); }
- .gc7-m { gap-column: var(--spacing-7, 256px); }
-}
-
-
-@container (min-width:64em) {
- .gc0-l { gap-column: var(--spacing-0); }
- .gc1-l { gap-column: var(--spacing-1); }
- .gc2-l { gap-column: var(--spacing-2); }
- .gc3-l { gap-column: var(--spacing-3); }
- .gc4-l { gap-column: var(--spacing-4); }
- .gc5-l { gap-column: var(--spacing-5); }
- .gc6-l { gap-column: var(--spacing-6); }
- .gc7-l { gap-column: var(--spacing-7); }
-}
-
diff --git a/src/_gap-row.css b/src/_gap-row.css
deleted file mode 100644
index a32a39f20..000000000
--- a/src/_gap-row.css
+++ /dev/null
@@ -1,59 +0,0 @@
-/*
- GAP: GRID AND FLEX SPACING
- Docs: http://tachyons.io/docs/layout/gap/
-
- Base:
- g = gap
-
-
- Media Query Extensions:
- -s = small
- -m = medium
- -l = large
-
-*/
-
-
-.gr0 { gap-row: var(--spacing-0, 0); }
-.gr1 { gap-row: var(--spacing-1, 4px); }
-.gr2 { gap-row: var(--spacing-2, 8px); }
-.gr3 { gap-row: var(--spacing-3, 16px); }
-.gr4 { gap-row: var(--spacing-4, 32px); }
-.gr5 { gap-row: var(--spacing-5, 64px); }
-.gr6 { gap-row: var(--spacing-6, 128px); }
-.gr7 { gap-row: var(--spacing-7, 256px); }
-
-@container (min-width:30em) {
- .gr0-s { gap-row: var(--spacing-0, 0); }
- .gr1-s { gap-row: var(--spacing-1, 4px); }
- .gr2-s { gap-row: var(--spacing-2, 8px); }
- .gr3-s { gap-row: var(--spacing-3, 16px); }
- .gr4-s { gap-row: var(--spacing-4, 32px); }
- .gr5-s { gap-row: var(--spacing-5, 64px); }
- .gr6-s { gap-row: var(--spacing-6, 128px); }
- .gr7-s { gap-row: var(--spacing-7, 256px); }
-}
-
-@container (min-width:48em) {
- .gr0-m { gap-row: var(--spacing-0, 0); }
- .gr1-m { gap-row: var(--spacing-1, 4px); }
- .gr2-m { gap-row: var(--spacing-2, 8px); }
- .gr3-m { gap-row: var(--spacing-3, 16px); }
- .gr4-m { gap-row: var(--spacing-4, 32px); }
- .gr5-m { gap-row: var(--spacing-5, 64px); }
- .gr6-m { gap-row: var(--spacing-6, 128px); }
- .gr7-m { gap-row: var(--spacing-7, 256px); }
-}
-
-
-@container (min-width:64em) {
- .gr0-l { gap-row: var(--spacing-0); }
- .gr1-l { gap-row: var(--spacing-1); }
- .gr2-l { gap-row: var(--spacing-2); }
- .gr3-l { gap-row: var(--spacing-3); }
- .gr4-l { gap-row: var(--spacing-4); }
- .gr5-l { gap-row: var(--spacing-5); }
- .gr6-l { gap-row: var(--spacing-6); }
- .gr7-l { gap-row: var(--spacing-7); }
-}
-
diff --git a/src/_gap.css b/src/_gap.css
deleted file mode 100644
index 26cce6752..000000000
--- a/src/_gap.css
+++ /dev/null
@@ -1,59 +0,0 @@
-/*
- GAP: GRID AND FLEX SPACING
- Docs: http://tachyons.io/docs/layout/gap/
-
- Base:
- g = gap
-
-
- Media Query Extensions:
- -s = small
- -m = medium
- -l = large
-
-*/
-
-
-.g0 { gap: var(--spacing-0, 0); }
-.g1 { gap: var(--spacing-1, 4px); }
-.g2 { gap: var(--spacing-2, 8px); }
-.g3 { gap: var(--spacing-3, 16px); }
-.g4 { gap: var(--spacing-4, 32px); }
-.g5 { gap: var(--spacing-5, 64px); }
-.g6 { gap: var(--spacing-6, 128px); }
-.g7 { gap: var(--spacing-7, 256px); }
-
-@container (min-width:30em) {
- .g0-s { gap: var(--spacing-0, 0); }
- .g1-s { gap: var(--spacing-1, 4px); }
- .g2-s { gap: var(--spacing-2, 8px); }
- .g3-s { gap: var(--spacing-3, 16px); }
- .g4-s { gap: var(--spacing-4, 32px); }
- .g5-s { gap: var(--spacing-5, 64px); }
- .g6-s { gap: var(--spacing-6, 128px); }
- .g7-s { gap: var(--spacing-7, 256px); }
-}
-
-@container (min-width:48em) {
- .g0-m { gap: var(--spacing-0, 0); }
- .g1-m { gap: var(--spacing-1, 4px); }
- .g2-m { gap: var(--spacing-2, 8px); }
- .g3-m { gap: var(--spacing-3, 16px); }
- .g4-m { gap: var(--spacing-4, 32px); }
- .g5-m { gap: var(--spacing-5, 64px); }
- .g6-m { gap: var(--spacing-6, 128px); }
- .g7-m { gap: var(--spacing-7, 256px); }
-}
-
-
-@container (min-width:64em) {
- .g0-l { gap: var(--spacing-0); }
- .g1-l { gap: var(--spacing-1); }
- .g2-l { gap: var(--spacing-2); }
- .g3-l { gap: var(--spacing-3); }
- .g4-l { gap: var(--spacing-4); }
- .g5-l { gap: var(--spacing-5); }
- .g6-l { gap: var(--spacing-6); }
- .g7-l { gap: var(--spacing-7); }
-}
-
diff --git a/src/_glass.css b/src/_glass.css
deleted file mode 100644
index 0fb72838f..000000000
--- a/src/_glass.css
+++ /dev/null
@@ -1,202 +0,0 @@
-.glass1 {
- background: rgba(255, 255, 255, 0);
- box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(20px);
- border: 1px solid rgba(255, 255, 255, 0.15);
-}
-
-.glass2 {
- background: rgba(255, 255, 255, 0.05);
- box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
- backdrop-filter: blur(20px);
- border: 1px solid rgba(255, 255, 255, 0.15);
-}
-
-.glass3 {
- background: rgba(255, 255, 255, 0.15);
- box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
- backdrop-filter: blur(20px);
- border: 1px solid rgba(255, 255, 255, 0.15);
-}
-
-.glass4 {
- background: rgba(255, 255, 255, 0.25);
- box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
- backdrop-filter: blur(20px);
- border: 1px solid rgba(255, 255, 255, 0.15);
-}
-
-.glass5 {
- background: rgba(255, 255, 255, 0);
- box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
- backdrop-filter: blur(16px);
- border: 1px solid rgba(255, 255, 255, 0.15);
-}
-
-.glass6 {
- background: rgba(255, 255, 255, 0.05);
- box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
- backdrop-filter: blur(16px);
- border: 1px solid rgba(255, 255, 255, 0.15);
-}
-
-.glass7 {
- background: rgba(255, 255, 255, 0.15);
- box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
- backdrop-filter: blur(16px);
- border: 1px solid rgba(255, 255, 255, 0.15);
-}
-
-.glass8 {
- background: rgba(255, 255, 255, 0.25);
- box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
- backdrop-filter: blur(16px);
- border: 1px solid rgba(255, 255, 255, 0.15);
-}
-
-.glass9 {
- background: rgba(255, 255, 255, 0.25);
- box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
- border: 1px solid rgba(255, 255, 255, 0.15);
-}
-
-.glass10 {
- background: rgba(255, 255, 255, 0);
- box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
- border: 1px solid rgba(255, 255, 255, 0.15);
-}
-
-.glass1-hover:hover {
- background: rgba(255, 255, 255, 0);
- box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
- backdrop-filter: blur(20px);
- border: 1px solid rgba(255, 255, 255, 0.15);
-}
-
-.glass2-hover:hover {
- background: rgba(255, 255, 255, 0.05);
- box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
- backdrop-filter: blur(20px);
- border: 1px solid rgba(255, 255, 255, 0.15);
-}
-
-.glass3-hover:hover {
- background: rgba(255, 255, 255, 0.15);
- box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
- backdrop-filter: blur(20px);
- border: 1px solid rgba(255, 255, 255, 0.15);
-}
-
-.glass4-hover:hover {
- background: rgba(255, 255, 255, 0.25);
- box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
- backdrop-filter: blur(20px);
- border: 1px solid rgba(255, 255, 255, 0.15);
-}
-
-.glass5-hover:hover {
- background: rgba(255, 255, 255, 0);
- box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
- backdrop-filter: blur(16px);
- border: 1px solid rgba(255, 255, 255, 0.15);
-}
-
-.glass6-hover:hover {
- background: rgba(255, 255, 255, 0.05);
- box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
- backdrop-filter: blur(16px);
- border: 1px solid rgba(255, 255, 255, 0.15);
-}
-
-.glass7-hover:hover {
- background: rgba(255, 255, 255, 0.15);
- box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
- backdrop-filter: blur(16px);
- border: 1px solid rgba(255, 255, 255, 0.15);
-}
-
-.glass8-hover:hover {
- background: rgba(255, 255, 255, 0.25);
- box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
- backdrop-filter: blur(16px);
- border: 1px solid rgba(255, 255, 255, 0.15);
-}
-
-.glass9-hover:hover {
- background: rgba(255, 255, 255, 0.25);
- box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
- border: 1px solid rgba(255, 255, 255, 0.15);
-}
-
-.glass10-hover:hover {
- background: rgba(255, 255, 255, 0);
- box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
- border: 1px solid rgba(255, 255, 255, 0.15);
-}
-
-.glass1-focus:focus {
- background: rgba(255, 255, 255, 0);
- box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
- backdrop-filter: blur(20px);
- border: 1px solid rgba(255, 255, 255, 0.15);
-}
-
-.glass2-focus:focus {
- background: rgba(255, 255, 255, 0.05);
- box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
- backdrop-filter: blur(20px);
- border: 1px solid rgba(255, 255, 255, 0.15);
-}
-
-.glass3-focus:focus {
- background: rgba(255, 255, 255, 0.15);
- box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
- backdrop-filter: blur(20px);
- border: 1px solid rgba(255, 255, 255, 0.15);
-}
-
-.glass4-focus:focus {
- background: rgba(255, 255, 255, 0.25);
- box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
- backdrop-filter: blur(20px);
- border: 1px solid rgba(255, 255, 255, 0.15);
-}
-
-.glass5-focus:focus {
- background: rgba(255, 255, 255, 0);
- box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
- backdrop-filter: blur(16px);
- border: 1px solid rgba(255, 255, 255, 0.15);
-}
-
-.glass6-focus:focus {
- background: rgba(255, 255, 255, 0.05);
- box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
- backdrop-filter: blur(16px);
- border: 1px solid rgba(255, 255, 255, 0.15);
-}
-
-.glass7-focus:focus {
- background: rgba(255, 255, 255, 0.15);
- box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
- backdrop-filter: blur(16px);
- border: 1px solid rgba(255, 255, 255, 0.15);
-}
-
-.glass8-focus:focus {
- background: rgba(255, 255, 255, 0.25);
- box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
- backdrop-filter: blur(16px);
- border: 1px solid rgba(255, 255, 255, 0.15);
-}
-
-.glass9-focus:focus {
- background: rgba(255, 255, 255, 0.25);
- box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
- border: 1px solid rgba(255, 255, 255, 0.15);
-}
-
-.glass10-focus:focus {
- background: rgba(255, 255, 255, 0);
- box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
- border: 1px solid rgba(255, 255, 255, 0.15);
-}
diff --git a/src/_gradients.css b/src/_gradients.css
deleted file mode 100644
index f6113a612..000000000
--- a/src/_gradients.css
+++ /dev/null
@@ -1,57 +0,0 @@
-/*
-
- GRADIENTS
-
-
-*/
-
-.gradient-1 {
- background: linear-gradient(
- var(--gradient-degree),
- var(--gradient-color-1),
- var(--gradient-color-2)
- );
-}
-
-.gradient-2 {
- background: linear-gradient(
- var(--gradient-degree),
- var(--gradient-color-1) var(--gradient-stop),
- var(--gradient-color-2) var(--gradient-stop)
- );
-}
-
-.gradient-3 {
- background: repeating-linear-gradient(
- var(--gradient-degree),
- transparent 0px,
- transparent var(--gradient-stripe-width),
- var(--gradient-color-1) var(--gradient-stripe-width),
- var(--gradient-color-1) calc(var(--gradient-stripe-width) + var(--gradient-stripe-width-2))
- );
-}
-
-.gradient-4 {
- background: repeating-radial-gradient(
- circle,
- transparent 0px,
- transparent var(--gradient-stripe-width),
- var(--gradient-color-1) var(--gradient-stripe-width),
- var(--gradient-color-1) calc(var(--gradient-stripe-width) + var(--gradient-stripe-width-2))
- );
-}
-
-
-
-@container (min-width:30em) {
-
-}
-
-@container (min-width:48em) {
-
-}
-
-@container (min-width:64em) {
-
-}
-
diff --git a/src/_grid-column.css b/src/_grid-column.css
deleted file mode 100644
index 436ee79bd..000000000
--- a/src/_grid-column.css
+++ /dev/null
@@ -1,242 +0,0 @@
-/*
-
- Grid Column
- Docs: http://tachyons.io/docs/grid-column
-
- This sets the width of the element via declaring how many columns wide it should be
-
- Base:
- cols = columns
-
-*/
-
-.col-1 { grid-column: span 1 / span 1; }
-.col-2 { grid-column: span 2 / span 2; }
-.col-3 { grid-column: span 3 / span 3; }
-.col-4 { grid-column: span 4 / span 4; }
-.col-5 { grid-column: span 5 / span 5; }
-.col-6 { grid-column: span 6 / span 6; }
-.col-7 { grid-column: span 7 / span 7; }
-.col-8 { grid-column: span 8 / span 8; }
-.col-9 { grid-column: span 9 / span 9; }
-.col-10 { grid-column: span 10 / span 10; }
-.col-11 { grid-column: span 11 / span 11; }
-.col-12 { grid-column: span 12 / span 12; }
-.col-13 { grid-column: span 13 / span 13; }
-.col-14 { grid-column: span 14 / span 14; }
-.col-15 { grid-column: span 15 / span 15; }
-.col-16 { grid-column: span 16 / span 16; }
-.col-full { grid-column: 1 / -1; }
-.col-center1 { grid-column: 2 / -2; }
-.col-center2 { grid-column: 3 / -3; }
-.col-center3 { grid-column: 4 / -4; }
-.col-center4 { grid-column: 6 / -6; }
-.col-auto { grid-column: auto; }
-
-.start-1 { grid-column-start: 1; }
-.start-2 { grid-column-start: 2; }
-.start-3 { grid-column-start: 3; }
-.start-4 { grid-column-start: 4; }
-.start-5 { grid-column-start: 5; }
-.start-6 { grid-column-start: 6; }
-.start-7 { grid-column-start: 7; }
-.start-8 { grid-column-start: 8; }
-.start-9 { grid-column-start: 9; }
-.start-10 { grid-column-start: 10; }
-.start-11 { grid-column-start: 11; }
-.start-12 { grid-column-start: 12; }
-.start-13 { grid-column-start: 13; }
-.start-14 { grid-column-start: 14; }
-.start-15 { grid-column-start: 15; }
-
-.end-1 { grid-column-end: 1; }
-.end-2 { grid-column-end: 2; }
-.end-3 { grid-column-end: 3; }
-.end-4 { grid-column-end: 4; }
-.end-5 { grid-column-end: 5; }
-.end-6 { grid-column-end: 6; }
-.end-7 { grid-column-end: 7; }
-.end-8 { grid-column-end: 8; }
-.end-9 { grid-column-end: 9; }
-.end-10 { grid-column-end: 10; }
-.end-11 { grid-column-end: 11; }
-.end-12 { grid-column-end: 12; }
-.end-13 { grid-column-end: 13; }
-.end-14 { grid-column-end: 14; }
-.end-15 { grid-column-end: 15; }
-.end-16 { grid-column-end: 16; }
-
-@container (min-width:30em) {
- .col-1-s { grid-column: span 1 / span 1; }
- .col-2-s { grid-column: span 2 / span 2; }
- .col-3-s { grid-column: span 3 / span 3; }
- .col-4-s { grid-column: span 4 / span 4; }
- .col-5-s { grid-column: span 5 / span 5; }
- .col-6-s { grid-column: span 6 / span 6; }
- .col-7-s { grid-column: span 7 / span 7; }
- .col-8-s { grid-column: span 8 / span 8; }
- .col-9-s { grid-column: span 9 / span 9; }
- .col-10-s { grid-column: span 10 / span 10; }
- .col-11-s { grid-column: span 11 / span 11; }
- .col-12-s { grid-column: span 12 / span 12; }
- .col-13-s { grid-column: span 13 / span 13; }
- .col-14-s { grid-column: span 14 / span 14; }
- .col-15-s { grid-column: span 15 / span 15; }
- .col-16-s { grid-column: span 16 / span 16; }
- .col-full-s { grid-column: 1 / -1; }
- .col-center1-s { grid-column: 2 / -2; }
- .col-center2-s { grid-column: 3 / -3; }
- .col-center3-s { grid-column: 4 / -4; }
- .col-center4-s { grid-column: 6 / -6; }
- .col-auto-s { grid-column: auto; }
-
- .start-1-s { grid-column-start: 1; }
- .start-2-s { grid-column-start: 2; }
- .start-3-s { grid-column-start: 3; }
- .start-4-s { grid-column-start: 4; }
- .start-5-s { grid-column-start: 5; }
- .start-6-s { grid-column-start: 6; }
- .start-7-s { grid-column-start: 7; }
- .start-8-s { grid-column-start: 8; }
- .start-9-s { grid-column-start: 9; }
- .start-10-s { grid-column-start: 10; }
- .start-11-s { grid-column-start: 11; }
- .start-12-s { grid-column-start: 12; }
- .start-13-s { grid-column-start: 13; }
- .start-14-s { grid-column-start: 14; }
- .start-15-s { grid-column-start: 15; }
-
- .end-1-s { grid-column-end: 1; }
- .end-2-s { grid-column-end: 2; }
- .end-3-s { grid-column-end: 3; }
- .end-4-s { grid-column-end: 4; }
- .end-5-s { grid-column-end: 5; }
- .end-6-s { grid-column-end: 6; }
- .end-7-s { grid-column-end: 7; }
- .end-8-s { grid-column-end: 8; }
- .end-9-s { grid-column-end: 9; }
- .end-10-s { grid-column-end: 10; }
- .end-11-s { grid-column-end: 11; }
- .end-12-s { grid-column-end: 12; }
- .end-13-s { grid-column-end: 13; }
- .end-14-s { grid-column-end: 14; }
- .end-15-s { grid-column-end: 15; }
- .end-16-s { grid-column-end: 16; }
-
-}
-
-@container (min-width:48em) {
- .col-1-m { grid-column: span 1 / span 1; }
- .col-2-m { grid-column: span 2 / span 2; }
- .col-3-m { grid-column: span 3 / span 3; }
- .col-4-m { grid-column: span 4 / span 4; }
- .col-5-m { grid-column: span 5 / span 5; }
- .col-6-m { grid-column: span 6 / span 6; }
- .col-7-m { grid-column: span 7 / span 7; }
- .col-8-m { grid-column: span 8 / span 8; }
- .col-9-m { grid-column: span 9 / span 9; }
- .col-10-m { grid-column: span 10 / span 10; }
- .col-11-m { grid-column: span 11 / span 11; }
- .col-12-m { grid-column: span 12 / span 12; }
- .col-13-m { grid-column: span 13 / span 13; }
- .col-14-m { grid-column: span 14 / span 14; }
- .col-15-m { grid-column: span 15 / span 15; }
- .col-16-m { grid-column: span 16 / span 16; }
- .col-full-m { grid-column: 1 / -1; }
- .col-center1-m { grid-column: 2 / -2; }
- .col-center2-m { grid-column: 3 / -3; }
- .col-center3-m { grid-column: 4 / -4; }
- .col-center4-m { grid-column: 6 / -6; }
- .col-auto-m { grid-column: auto; }
-
- .start-1-m { grid-column-start: 1; }
- .start-2-m { grid-column-start: 2; }
- .start-3-m { grid-column-start: 3; }
- .start-4-m { grid-column-start: 4; }
- .start-5-m { grid-column-start: 5; }
- .start-6-m { grid-column-start: 6; }
- .start-7-m { grid-column-start: 7; }
- .start-8-m { grid-column-start: 8; }
- .start-9-m { grid-column-start: 9; }
- .start-10-m { grid-column-start: 10; }
- .start-11-m { grid-column-start: 11; }
- .start-12-m { grid-column-start: 12; }
- .start-13-m { grid-column-start: 13; }
- .start-14-m { grid-column-start: 14; }
- .start-15-m { grid-column-start: 15; }
-
- .end-1-m { grid-column-end: 1; }
- .end-2-m { grid-column-end: 2; }
- .end-3-m { grid-column-end: 3; }
- .end-4-m { grid-column-end: 4; }
- .end-5-m { grid-column-end: 5; }
- .end-6-m { grid-column-end: 6; }
- .end-7-m { grid-column-end: 7; }
- .end-8-m { grid-column-end: 8; }
- .end-9-m { grid-column-end: 9; }
- .end-10-m { grid-column-end: 10; }
- .end-11-m { grid-column-end: 11; }
- .end-12-m { grid-column-end: 12; }
- .end-13-m { grid-column-end: 13; }
- .end-14-m { grid-column-end: 14; }
- .end-15-m { grid-column-end: 15; }
- .end-16-m { grid-column-end: 16; }
-}
-
-@container (min-width:64em) {
- .col-1-l { grid-column: span 1 / span 1; }
- .col-2-l { grid-column: span 2 / span 2; }
- .col-3-l { grid-column: span 3 / span 3; }
- .col-4-l { grid-column: span 4 / span 4; }
- .col-5-l { grid-column: span 5 / span 5; }
- .col-6-l { grid-column: span 6 / span 6; }
- .col-7-l { grid-column: span 7 / span 7; }
- .col-8-l { grid-column: span 8 / span 8; }
- .col-9-l { grid-column: span 9 / span 9; }
- .col-10-l { grid-column: span 10 / span 10; }
- .col-11-l { grid-column: span 11 / span 11; }
- .col-12-l { grid-column: span 12 / span 12; }
- .col-13-l { grid-column: span 13 / span 13; }
- .col-14-l { grid-column: span 14 / span 14; }
- .col-15-l { grid-column: span 15 / span 15; }
- .col-16-l { grid-column: span 16 / span 16; }
- .col-full-l { grid-column: 1 / -1; }
- .col-center1-l { grid-column: 2 / -2; }
- .col-center2-l { grid-column: 3 / -3; }
- .col-center3-l { grid-column: 4 / -4; }
- .col-center4-l { grid-column: 6 / -6; }
- .col-auto-l { grid-column: auto; }
-
- .start-1-l { grid-column-start: 1; }
- .start-2-l { grid-column-start: 2; }
- .start-3-l { grid-column-start: 3; }
- .start-4-l { grid-column-start: 4; }
- .start-5-l { grid-column-start: 5; }
- .start-6-l { grid-column-start: 6; }
- .start-7-l { grid-column-start: 7; }
- .start-8-l { grid-column-start: 8; }
- .start-9-l { grid-column-start: 9; }
- .start-10-l { grid-column-start: 10; }
- .start-11-l { grid-column-start: 11; }
- .start-12-l { grid-column-start: 12; }
- .start-13-l { grid-column-start: 13; }
- .start-14-l { grid-column-start: 14; }
- .start-15-l { grid-column-start: 15; }
-
- .end-1-l { grid-column-end: 1; }
- .end-2-l { grid-column-end: 2; }
- .end-3-l { grid-column-end: 3; }
- .end-4-l { grid-column-end: 4; }
- .end-5-l { grid-column-end: 5; }
- .end-6-l { grid-column-end: 6; }
- .end-7-l { grid-column-end: 7; }
- .end-8-l { grid-column-end: 8; }
- .end-9-l { grid-column-end: 9; }
- .end-10-l { grid-column-end: 10; }
- .end-11-l { grid-column-end: 11; }
- .end-12-l { grid-column-end: 12; }
- .end-13-l { grid-column-end: 13; }
- .end-14-l { grid-column-end: 14; }
- .end-15-l { grid-column-end: 15; }
- .end-16-l { grid-column-end: 16; }
-}
diff --git a/src/_grid-row.css b/src/_grid-row.css
deleted file mode 100644
index d69f1ceba..000000000
--- a/src/_grid-row.css
+++ /dev/null
@@ -1,161 +0,0 @@
-/*
-
- Grid Row
- Docs: http://tachyons.io/docs/layout/grid-column-row
-
- This sets the width of the element via declaring how many columns wide it should be
-
- Base:
- cols = columns
-
-*/
-
-.row-auto { grid-row: auto; }
-
-.row-start-1 { grid-row-start: 1; }
-.row-start-2 { grid-row-start: 2; }
-.row-start-3 { grid-row-start: 3; }
-.row-start-4 { grid-row-start: 4; }
-.row-start-5 { grid-row-start: 5; }
-.row-start-6 { grid-row-start: 6; }
-.row-start-7 { grid-row-start: 7; }
-.row-start-8 { grid-row-start: 8; }
-.row-start-9 { grid-row-start: 9; }
-.row-start-10 { grid-row-start: 10; }
-.row-start-11 { grid-row-start: 11; }
-.row-start-12 { grid-row-start: 12; }
-.row-start-13 { grid-row-start: 13; }
-.row-start-14 { grid-row-start: 14; }
-.row-start-15 { grid-row-start: 15; }
-.row-start-16 { grid-row-start: 16; }
-
-.row-end-1 { grid-row-end: 1; }
-.row-end-2 { grid-row-end: 2; }
-.row-end-3 { grid-row-end: 3; }
-.row-end-4 { grid-row-end: 4; }
-.row-end-5 { grid-row-end: 5; }
-.row-end-6 { grid-row-end: 6; }
-.row-end-7 { grid-row-end: 7; }
-.row-end-8 { grid-row-end: 8; }
-.row-end-9 { grid-row-end: 9; }
-.row-end-10 { grid-row-end: 10; }
-.row-end-11 { grid-row-end: 11; }
-.row-end-12 { grid-row-end: 12; }
-.row-end-13 { grid-row-end: 13; }
-.row-end-14 { grid-row-end: 14; }
-.row-end-15 { grid-row-end: 15; }
-.row-end-16 { grid-row-end: 16; }
-
-@container (min-width:30em) {
- .row-auto-s { grid-row: auto; }
-
- .row-start-1-s { grid-row-start: 1; }
- .row-start-2-s { grid-row-start: 2; }
- .row-start-3-s { grid-row-start: 3; }
- .row-start-4-s { grid-row-start: 4; }
- .row-start-5-s { grid-row-start: 5; }
- .row-start-6-s { grid-row-start: 6; }
- .row-start-7-s { grid-row-start: 7; }
- .row-start-8-s { grid-row-start: 8; }
- .row-start-9-s { grid-row-start: 9; }
- .row-start-10-s { grid-row-start: 10; }
- .row-start-11-s { grid-row-start: 11; }
- .row-start-12-s { grid-row-start: 12; }
- .row-start-13-s { grid-row-start: 13; }
- .row-start-14-s { grid-row-start: 14; }
- .row-start-15-s { grid-row-start: 15; }
- .row-start-16-s { grid-row-start: 16; }
-
- .row-end-1-s { grid-row-end: 1; }
- .row-end-2-s { grid-row-end: 2; }
- .row-end-3-s { grid-row-end: 3; }
- .row-end-4-s { grid-row-end: 4; }
- .row-end-5-s { grid-row-end: 5; }
- .row-end-6-s { grid-row-end: 6; }
- .row-end-7-s { grid-row-end: 7; }
- .row-end-8-s { grid-row-end: 8; }
- .row-end-9-s { grid-row-end: 9; }
- .row-end-10-s { grid-row-end: 10; }
- .row-end-11-s { grid-row-end: 11; }
- .row-end-12-s { grid-row-end: 12; }
- .row-end-13-s { grid-row-end: 13; }
- .row-end-14-s { grid-row-end: 14; }
- .row-end-15-s { grid-row-end: 15; }
- .row-end-16-s { grid-row-end: 16; }
-}
-
-@container (min-width:48em) {
- .row-auto-m { grid-row: auto; }
-
- .row-start-1-m { grid-row-start: 1; }
- .row-start-2-m { grid-row-start: 2; }
- .row-start-3-m { grid-row-start: 3; }
- .row-start-4-m { grid-row-start: 4; }
- .row-start-5-m { grid-row-start: 5; }
- .row-start-6-m { grid-row-start: 6; }
- .row-start-7-m { grid-row-start: 7; }
- .row-start-8-m { grid-row-start: 8; }
- .row-start-9-m { grid-row-start: 9; }
- .row-start-10-m { grid-row-start: 10; }
- .row-start-11-m { grid-row-start: 11; }
- .row-start-12-m { grid-row-start: 12; }
- .row-start-13-m { grid-row-start: 13; }
- .row-start-14-m { grid-row-start: 14; }
- .row-start-15-m { grid-row-start: 15; }
- .row-start-16-m { grid-row-start: 16; }
-
- .row-end-1-m { grid-row-end: 1; }
- .row-end-2-m { grid-row-end: 2; }
- .row-end-3-m { grid-row-end: 3; }
- .row-end-4-m { grid-row-end: 4; }
- .row-end-5-m { grid-row-end: 5; }
- .row-end-6-m { grid-row-end: 6; }
- .row-end-7-m { grid-row-end: 7; }
- .row-end-8-m { grid-row-end: 8; }
- .row-end-9-m { grid-row-end: 9; }
- .row-end-10-m { grid-row-end: 10; }
- .row-end-11-m { grid-row-end: 11; }
- .row-end-12-m { grid-row-end: 12; }
- .row-end-13-m { grid-row-end: 13; }
- .row-end-14-m { grid-row-end: 14; }
- .row-end-15-m { grid-row-end: 15; }
- .row-end-16-m { grid-row-end: 16; }
-}
-
-@container (min-width:64em) {
- .row-auto-l { grid-row: auto; }
-
- .row-start-1-l { grid-row-start: 1; }
- .row-start-2-l { grid-row-start: 2; }
- .row-start-3-l { grid-row-start: 3; }
- .row-start-4-l { grid-row-start: 4; }
- .row-start-5-l { grid-row-start: 5; }
- .row-start-6-l { grid-row-start: 6; }
- .row-start-7-l { grid-row-start: 7; }
- .row-start-8-l { grid-row-start: 8; }
- .row-start-9-l { grid-row-start: 9; }
- .row-start-10-l { grid-row-start: 10; }
- .row-start-11-l { grid-row-start: 11; }
- .row-start-12-l { grid-row-start: 12; }
- .row-start-13-l { grid-row-start: 13; }
- .row-start-14-l { grid-row-start: 14; }
- .row-start-15-l { grid-row-start: 15; }
- .row-start-16-l { grid-row-start: 16; }
-
- .row-end-1-l { grid-row-end: 1; }
- .row-end-2-l { grid-row-end: 2; }
- .row-end-3-l { grid-row-end: 3; }
- .row-end-4-l { grid-row-end: 4; }
- .row-end-5-l { grid-row-end: 5; }
- .row-end-6-l { grid-row-end: 6; }
- .row-end-7-l { grid-row-end: 7; }
- .row-end-8-l { grid-row-end: 8; }
- .row-end-9-l { grid-row-end: 9; }
- .row-end-10-l { grid-row-end: 10; }
- .row-end-11-l { grid-row-end: 11; }
- .row-end-12-l { grid-row-end: 12; }
- .row-end-13-l { grid-row-end: 13; }
- .row-end-14-l { grid-row-end: 14; }
- .row-end-15-l { grid-row-end: 15; }
- .row-end-16-l { grid-row-end: 16; }
-}
diff --git a/src/_grid-template-columns.css b/src/_grid-template-columns.css
deleted file mode 100644
index c7590c705..000000000
--- a/src/_grid-template-columns.css
+++ /dev/null
@@ -1,135 +0,0 @@
-/*
-
- Grid Template Columns
- Docs: http://tachyons.io/docs/layout/grid-template-columns/
-
- Base:
- cols = columns
-
-*/
-
-.cols-1 { grid-template-columns: repeat(1, 1fr) }
-.cols-2 { grid-template-columns: repeat(2, 1fr) }
-.cols-3 { grid-template-columns: repeat(3, 1fr) }
-.cols-4 { grid-template-columns: repeat(4, 1fr) }
-.cols-5 { grid-template-columns: repeat(5, 1fr) }
-.cols-6 { grid-template-columns: repeat(6, 1fr) }
-.cols-7 { grid-template-columns: repeat(7, 1fr) }
-.cols-8 { grid-template-columns: repeat(8, 1fr) }
-.cols-9 { grid-template-columns: repeat(9, 1fr) }
-.cols-10 { grid-template-columns: repeat(10, 1fr) }
-.cols-11 { grid-template-columns: repeat(11, 1fr) }
-.cols-12 { grid-template-columns: repeat(12, 1fr) }
-.cols-13 { grid-template-columns: repeat(13, 1fr) }
-.cols-14 { grid-template-columns: repeat(14, 1fr) }
-.cols-15 { grid-template-columns: repeat(15, 1fr) }
-.cols-16 { grid-template-columns: repeat(16, 1fr) }
-
-.cols-min-32 { grid-template-columns: repeat(auto-fill, minmax( 32px, 1fr )); }
-.cols-min-64 { grid-template-columns: repeat(auto-fill, minmax( 64px, 1fr )); }
-.cols-min-128 { grid-template-columns: repeat(auto-fill, minmax( 128px, 1fr )); }
-.cols-min-192 { grid-template-columns: repeat(auto-fill, minmax( 192px, 1fr )); }
-.cols-min-240 { grid-template-columns: repeat(auto-fill, minmax( 240px, 1fr )); }
-.cols-min-256 { grid-template-columns: repeat(auto-fill, minmax( 256px, 1fr )); }
-.cols-min-320 { grid-template-columns: repeat(auto-fill, minmax( 320px, 1fr )); }
-.cols-min-480 { grid-template-columns: repeat(auto-fill, minmax( 480px, 1fr )); }
-
-.masonry { grid-template-columns: masonry }
-.subgrid { grid-template-columns: subgrid }
-.cols-none { grid-template-columns: none }
-
-
-@container (min-width:30em) {
- .cols-1-s { grid-template-columns: repeat(1, 1fr) }
- .cols-2-s { grid-template-columns: repeat(2, 1fr) }
- .cols-3-s { grid-template-columns: repeat(3, 1fr) }
- .cols-4-s { grid-template-columns: repeat(4, 1fr) }
- .cols-5-s { grid-template-columns: repeat(5, 1fr) }
- .cols-6-s { grid-template-columns: repeat(6, 1fr) }
- .cols-7-s { grid-template-columns: repeat(7, 1fr) }
- .cols-8-s { grid-template-columns: repeat(8, 1fr) }
- .cols-9-s { grid-template-columns: repeat(9, 1fr) }
- .cols-10-s { grid-template-columns: repeat(10, 1fr) }
- .cols-11-s { grid-template-columns: repeat(11, 1fr) }
- .cols-12-s { grid-template-columns: repeat(12, 1fr) }
- .cols-13-s { grid-template-columns: repeat(13, 1fr) }
- .cols-14-s { grid-template-columns: repeat(14, 1fr) }
- .cols-15-s { grid-template-columns: repeat(15, 1fr) }
- .cols-16-s { grid-template-columns: repeat(16, 1fr) }
-
- .cols-min-32-s { grid-template-columns: repeat(auto-fill, minmax( 64px, 1fr )); }
- .cols-min-64-s { grid-template-columns: repeat(auto-fill, minmax( 64px, 1fr )); }
- .cols-min-128-s { grid-template-columns: repeat(auto-fill, minmax( 128px, 1fr )); }
- .cols-min-192-s { grid-template-columns: repeat(auto-fill, minmax( 192px, 1fr )); }
- .cols-min-240-s { grid-template-columns: repeat(auto-fill, minmax( 240px, 1fr )); }
- .cols-min-256-s { grid-template-columns: repeat(auto-fill, minmax( 256px, 1fr )); }
- .cols-min-320-s { grid-template-columns: repeat(auto-fill, minmax( 320px, 1fr )); }
- .cols-min-480-s { grid-template-columns: repeat(auto-fill, minmax( 480px, 1fr )); }
-
- .masonry-s { grid-template-columns: masonry }
- .subgrid-s { grid-template-columns: subgrid }
- .cols-none-s { grid-template-columns: none }
-}
-
-@container (min-width:48em) {
- .cols-1-m { grid-template-columns: repeat(1, 1fr) }
- .cols-2-m { grid-template-columns: repeat(2, 1fr) }
- .cols-3-m { grid-template-columns: repeat(3, 1fr) }
- .cols-4-m { grid-template-columns: repeat(4, 1fr) }
- .cols-5-m { grid-template-columns: repeat(5, 1fr) }
- .cols-6-m { grid-template-columns: repeat(6, 1fr) }
- .cols-7-m { grid-template-columns: repeat(7, 1fr) }
- .cols-8-m { grid-template-columns: repeat(8, 1fr) }
- .cols-9-m { grid-template-columns: repeat(9, 1fr) }
- .cols-10-m { grid-template-columns: repeat(10, 1fr) }
- .cols-11-m { grid-template-columns: repeat(11, 1fr) }
- .cols-12-m { grid-template-columns: repeat(12, 1fr) }
- .cols-13-m { grid-template-columns: repeat(13, 1fr) }
- .cols-14-m { grid-template-columns: repeat(14, 1fr) }
- .cols-15-m { grid-template-columns: repeat(15, 1fr) }
- .cols-16-m { grid-template-columns: repeat(16, 1fr) }
-
- .cols-min-64-m { grid-template-columns: repeat(auto-fill, minmax( 64px, 1fr )); }
- .cols-min-128-m { grid-template-columns: repeat(auto-fill, minmax( 128px, 1fr )); }
- .cols-min-192-m { grid-template-columns: repeat(auto-fill, minmax( 192px, 1fr )); }
- .cols-min-240-m { grid-template-columns: repeat(auto-fill, minmax( 240px, 1fr )); }
- .cols-min-256-m { grid-template-columns: repeat(auto-fill, minmax( 256px, 1fr )); }
- .cols-min-320-m { grid-template-columns: repeat(auto-fill, minmax( 320px, 1fr )); }
- .cols-min-480-m { grid-template-columns: repeat(auto-fill, minmax( 480px, 1fr )); }
-
- .masonry-m { grid-template-columns: masonry }
- .subgrid-m { grid-template-columns: subgrid }
- .cols-none-m { grid-template-columns: none }
-}
-
-@container (min-width:64em) {
- .cols-1-l { grid-template-columns: repeat(1, 1fr) }
- .cols-2-l { grid-template-columns: repeat(2, 1fr) }
- .cols-3-l { grid-template-columns: repeat(3, 1fr) }
- .cols-4-l { grid-template-columns: repeat(4, 1fr) }
- .cols-5-l { grid-template-columns: repeat(5, 1fr) }
- .cols-6-l { grid-template-columns: repeat(6, 1fr) }
- .cols-7-l { grid-template-columns: repeat(7, 1fr) }
- .cols-8-l { grid-template-columns: repeat(8, 1fr) }
- .cols-9-l { grid-template-columns: repeat(9, 1fr) }
- .cols-10-l { grid-template-columns: repeat(10, 1fr) }
- .cols-11-l { grid-template-columns: repeat(11, 1fr) }
- .cols-12-l { grid-template-columns: repeat(12, 1fr) }
- .cols-13-l { grid-template-columns: repeat(13, 1fr) }
- .cols-14-l { grid-template-columns: repeat(14, 1fr) }
- .cols-15-l { grid-template-columns: repeat(15, 1fr) }
- .cols-16-l { grid-template-columns: repeat(16, 1fr) }
-
- .cols-min-64-l { grid-template-columns: repeat(auto-fill, minmax( 64px, 1fr )); }
- .cols-min-128-l { grid-template-columns: repeat(auto-fill, minmax( 128px, 1fr )); }
- .cols-min-192-l { grid-template-columns: repeat(auto-fill, minmax( 192px, 1fr )); }
- .cols-min-240-l { grid-template-columns: repeat(auto-fill, minmax( 240px, 1fr )); }
- .cols-min-256-l { grid-template-columns: repeat(auto-fill, minmax( 256px, 1fr )); }
- .cols-min-320-l { grid-template-columns: repeat(auto-fill, minmax( 320px, 1fr )); }
- .cols-min-480-l { grid-template-columns: repeat(auto-fill, minmax( 480px, 1fr )); }
-
- .masonry-l { grid-template-columns: masonry }
- .subgrid-l { grid-template-columns: subgrid }
- .cols-none-l { grid-template-columns: none }
-}
-
diff --git a/src/_grid.css b/src/_grid.css
deleted file mode 100644
index 47aae0b4f..000000000
--- a/src/_grid.css
+++ /dev/null
@@ -1,23 +0,0 @@
-/*
-
- Grid
-
- Media Query Extensions:
- -s = small
- -m = medium
- -l = large
-
-*/
-
-.flow-row { grid-auto-flow: row; }
-.flow-column { grid-auto-flow: column; }
-.flow-dense { grid-auto-flow: dense; }
-
-
-@container (min-width:30em) {
-}
-@container (min-width:48em) {
-}
-
-@container (min-width:64em) {
-}
diff --git a/src/_heights.css b/src/_heights.css
index 61ea8b6e1..99a93b678 100644
--- a/src/_heights.css
+++ b/src/_heights.css
@@ -1,4 +1,4 @@
-/* TODO: Variables review
+/*
HEIGHTS
Docs: http://tachyons.io/docs/layout/heights/
@@ -16,6 +16,7 @@
4 = 4th step in height scale
5 = 5th step in height scale
+ -25 = literal value 25%
-50 = literal value 50%
-75 = literal value 75%
-100 = literal value 100%
@@ -24,7 +25,7 @@
-inherit = string value of inherit
Media Query Extensions:
- -s = small
+ -ns = not-small
-m = medium
-l = large
@@ -32,18 +33,15 @@
/* Height Scale */
-.h0 { height: var(--size-0, 0); }
-.h1 { height: var(--size-1, 1rem); }
-.h2 { height: var(--size-2, 2rem); }
-.h3 { height: var(--size-3, 3rem); }
-.h4 { height: var(--size-4, 4rem); }
-.h5 { height: var(--size-5, 8rem); }
-.h6 { height: var(--size-6, 16rem); }
-.h7 { height: var(--size-7, 32rem); }
-.h8 { height: var(--size-8, 64rem); }
+.h1 { height: 1rem; }
+.h2 { height: 2rem; }
+.h3 { height: 4rem; }
+.h4 { height: 8rem; }
+.h5 { height: 16rem; }
/* Height Percentages - Based off of height of parent */
+.h-25 { height: 25%; }
.h-50 { height: 50%; }
.h-75 { height: 75%; }
.h-100 { height: 100%; }
@@ -65,35 +63,33 @@
.h-auto { height: auto; }
.h-inherit { height: inherit; }
-@container (min-width:30em) {
- .h0-s { height: var(--size-0, 0); }
- .h1-s { height: var(--size-1, 1rem); }
- .h2-s { height: var(--size-2, 2rem); }
- .h3-s { height: var(--size-3, 3rem); }
- .h4-s { height: var(--size-4, 4rem); }
- .h5-s { height: var(--size-5, 8rem); }
- .h6-s { height: var(--size-6, 16rem); }
- .h7-s { height: var(--size-7, 32rem); }
- .h8-s { height: var(--size-8, 64rem); }
- .h-50-s { height: 50%; }
- .h-75-s { height: 75%; }
- .h-100-s { height: 100%; }
- .min-h-100-s { min-height: 100%; }
- .vh-25-s { height: 25vh; }
- .vh-50-s { height: 50vh; }
- .vh-75-s { height: 75vh; }
- .vh-100-s { height: 100vh; }
- .min-vh-100-s { min-height: 100vh; }
- .h-auto-s { height: auto; }
- .h-inherit-s { height: inherit; }
+@media (--breakpoint-not-small) {
+ .h1-ns { height: 1rem; }
+ .h2-ns { height: 2rem; }
+ .h3-ns { height: 4rem; }
+ .h4-ns { height: 8rem; }
+ .h5-ns { height: 16rem; }
+ .h-25-ns { height: 25%; }
+ .h-50-ns { height: 50%; }
+ .h-75-ns { height: 75%; }
+ .h-100-ns { height: 100%; }
+ .min-h-100-ns { min-height: 100%; }
+ .vh-25-ns { height: 25vh; }
+ .vh-50-ns { height: 50vh; }
+ .vh-75-ns { height: 75vh; }
+ .vh-100-ns { height: 100vh; }
+ .min-vh-100-ns { min-height: 100vh; }
+ .h-auto-ns { height: auto; }
+ .h-inherit-ns { height: inherit; }
}
-@container (min-width:48em) {
+@media (--breakpoint-medium) {
.h1-m { height: 1rem; }
.h2-m { height: 2rem; }
.h3-m { height: 4rem; }
.h4-m { height: 8rem; }
.h5-m { height: 16rem; }
+ .h-25-m { height: 25%; }
.h-50-m { height: 50%; }
.h-75-m { height: 75%; }
.h-100-m { height: 100%; }
@@ -107,12 +103,13 @@
.h-inherit-m { height: inherit; }
}
-@container (min-width:64em) {
+@media (--breakpoint-large) {
.h1-l { height: 1rem; }
.h2-l { height: 2rem; }
.h3-l { height: 4rem; }
.h4-l { height: 8rem; }
.h5-l { height: 16rem; }
+ .h-25-l { height: 25%; }
.h-50-l { height: 50%; }
.h-75-l { height: 75%; }
.h-100-l { height: 100%; }
diff --git a/src/_hovers.css b/src/_hovers.css
index 2fb32c604..d92e9c4d4 100644
--- a/src/_hovers.css
+++ b/src/_hovers.css
@@ -10,7 +10,6 @@
- Grow
- Pointer
- Shadow
- - Colors
*/
@@ -29,8 +28,7 @@
transition: opacity .15s ease-in;
}
.dim:active {
- opacity: .8;
- transition: opacity .15s ease-out;
+ opacity: .8; transition: opacity .15s ease-out;
}
/*
@@ -115,20 +113,16 @@
/* Add pointer on hover */
-.pointer {
+.pointer:hover {
cursor: pointer;
}
-.trans-all {
- transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
-}
-
/*
- * TODO: Test and rename
Add shadow on hover.
Performant box-shadow animation pattern from
http://tobiasahlin.com/blog/how-to-animate-box-shadow/
+*/
.shadow-hover {
cursor: pointer;
@@ -154,24 +148,13 @@
.shadow-hover:focus::after {
opacity: 1;
}
-*/
/* Combine with classes in skins and skins-pseudo for
* many different transition possibilities. */
-.trans-bg {
- transition: background-color .25s ease-in-out;
+.bg-animate,
+.bg-animate:hover,
+.bg-animate:focus {
+ transition: background-color .15s ease-in-out;
}
-.trans-color {
- transition: color .25s ease-in-out;
-}
-
-.hover-filter-none:hover { filter: none; }
-
-.hover-filter-blur-none:hover { filter: blur(0); }
-.hover-filter-blur:hover { filter: blur(96px); }
-
-.hover-grayscale-0:hover { filter: grayscale(0); }
-.hover-grayscale-50:hover { filter: grayscale(50%); }
-.hover-grayscale-100:hover { filter: grayscale(100%); }
diff --git a/src/_images.css b/src/_images.css
index 406c0bfc5..0298ceae7 100644
--- a/src/_images.css
+++ b/src/_images.css
@@ -5,19 +5,7 @@
*/
-img { display: block; max-width: 100%; }
+/* Responsive images! */
-.random-image {
- background-image: url(https://source.unsplash.com/random/);
- background-size: cover;
-}
+img { max-width: 100%; }
-.random-image-landscape {
- background-image: url(https://source.unsplash.com/random/1920x1080);
- background-size: cover;
-}
-
-.random-image-portrait {
- background-image: url(https://source.unsplash.com/random/1080x1920);
- background-size: cover;
-}
diff --git a/src/_justify-content.css b/src/_justify-content.css
deleted file mode 100644
index 6bd329a35..000000000
--- a/src/_justify-content.css
+++ /dev/null
@@ -1,41 +0,0 @@
-/*
-
- JUSTIFY-CONTENT
-
- Media Query Extensions:
- -s = small
- -m = medium
- -l = large
-
- MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
-
-*/
-
-.justify-start { justify-content: flex-start; }
-.justify-end { justify-content: flex-end; }
-.justify-center { justify-content: center; }
-.justify-between { justify-content: space-between; }
-.justify-around { justify-content: space-around; }
-
-@container (min-width:30em) {
- .justify-start-s { justify-content: flex-start; }
- .justify-end-s { justify-content: flex-end; }
- .justify-center-s { justify-content: center; }
- .justify-between-s { justify-content: space-between; }
- .justify-around-s { justify-content: space-around; }
-}
-@container (min-width:48em) {
- .justify-start-m { justify-content: flex-start; }
- .justify-end-m { justify-content: flex-end; }
- .justify-center-m { justify-content: center; }
- .justify-between-m { justify-content: space-between; }
- .justify-around-m { justify-content: space-around; }
-
-}
-@container (min-width:64em) {
- .justify-start-l { justify-content: flex-start; }
- .justify-end-l { justify-content: flex-end; }
- .justify-center-l { justify-content: center; }
- .justify-between-l { justify-content: space-between; }
- .justify-around-l { justify-content: space-around; }
-}
diff --git a/src/_justify-self.css b/src/_justify-self.css
deleted file mode 100644
index 1b1cad7f3..000000000
--- a/src/_justify-self.css
+++ /dev/null
@@ -1,36 +0,0 @@
-/*
-
- JUSTIFY-SELF
-
- Media Query Extensions:
- -s = small
- -m = medium
- -l = large
-
- MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self
-
-*/
-
-.justify-self-start { justify-self: start; }
-.justify-self-end { justify-self: end; }
-.justify-self-center { justify-self: center; }
-.justify-self-stretch{ justify-self: stretch; }
-
-@container (min-width:30em) {
- .justify-self-start-s { justify-self: start; }
- .justify-self-end-s { justify-self: end; }
- .justify-self-center-s { justify-self: center; }
- .justify-self-stretch-s { justify-self: stretch; }
-}
-@container (min-width:48em) {
- .justify-self-start-m { justify-self: start; }
- .justify-self-end-m { justify-self: end; }
- .justify-self-center-m { justify-self: center; }
- .justify-self-stretch-m { justify-self: stretch; }
-}
-@container (min-width:64em) {
- .justify-self-start-l { justify-self: start; }
- .justify-self-end-l { justify-self: end; }
- .justify-self-center-l { justify-self: center; }
- .justify-self-stretch-l { justify-self: stretch; }
-}
diff --git a/src/_letter-spacing.css b/src/_letter-spacing.css
index 46e61a7dc..d22651306 100644
--- a/src/_letter-spacing.css
+++ b/src/_letter-spacing.css
@@ -4,30 +4,30 @@
Docs: http://tachyons.io/docs/typography/tracking/
Media Query Extensions:
- -s = small
+ -ns = not-small
-m = medium
-l = large
*/
-.tracked { letter-spacing: var(--letter-spacing-tracked, .1em); }
-.tracked-tight { letter-spacing: var(--letter-spacing-tight, -0.05em); }
-.tracked-mega { letter-spacing: var(--letter-spacing-large, .25em); }
+.tracked { letter-spacing: .1em; }
+.tracked-tight { letter-spacing: -.05em; }
+.tracked-mega { letter-spacing: .25em; }
-@container (min-width:30em) {
- .tracked-s { letter-spacing: var(--letter-spacing-tracked, .1em); }
- .tracked-tight-s { letter-spacing: var(--letter-spacing-tight, -0.05em); }
- .tracked-mega-s { letter-spacing: var(--letter-spacing-large, .25em); }
+@media (--breakpoint-not-small) {
+ .tracked-ns { letter-spacing: .1em; }
+ .tracked-tight-ns { letter-spacing: -.05em; }
+ .tracked-mega-ns { letter-spacing: .25em; }
}
-@container (min-width:48em) {
- .tracked-m { letter-spacing: var(--letter-spacing-tracked, .1em); }
- .tracked-tight-m { letter-spacing: var(--letter-spacing-tight, -0.05em); }
- .tracked-mega-m { letter-spacing: var(--letter-spacing-large, .25em); }
+@media (--breakpoint-medium) {
+ .tracked-m { letter-spacing: .1em; }
+ .tracked-tight-m { letter-spacing: -.05em; }
+ .tracked-mega-m { letter-spacing: .25em; }
}
-@container (min-width:64em) {
- .tracked-l { letter-spacing: var(--letter-spacing-tracked, .1em); }
- .tracked-tight-l { letter-spacing: var(--letter-spacing-tight, -0.05em); }
- .tracked-mega-l { letter-spacing: var(--letter-spacing-large, .25em); }
+@media (--breakpoint-large) {
+ .tracked-l { letter-spacing: .1em; }
+ .tracked-tight-l { letter-spacing: -.05em; }
+ .tracked-mega-l { letter-spacing: .25em; }
}
diff --git a/src/_line-height.css b/src/_line-height.css
index 97b2b2a98..afbef0db4 100644
--- a/src/_line-height.css
+++ b/src/_line-height.css
@@ -4,31 +4,31 @@
Docs: http://tachyons.io/docs/typography/line-height
Media Query Extensions:
- -s = small
+ -ns = not-small
-m = medium
-l = large
*/
- .lh-solid { line-height: var(--line-height-solid, 1); }
- .lh-title { line-height: var(--line-height-title, 1.25); }
- .lh-body { line-height: var(--line-height-body, 1.5); }
+ .lh-solid { line-height: 1; }
+ .lh-title { line-height: 1.25; }
+ .lh-copy { line-height: 1.5; }
-@container (min-width:30em) {
- .lh-solid-s { line-height: var(--line-height-solid, 1); }
- .lh-title-s { line-height: var(--line-height-title, 1.25); }
- .lh-body-s { line-height: var(--line-height-body, 1.5); }
+@media (--breakpoint-not-small) {
+ .lh-solid-ns { line-height: 1; }
+ .lh-title-ns { line-height: 1.25; }
+ .lh-copy-ns { line-height: 1.5; }
}
-@container (min-width:48em) {
- .lh-solid-m { line-height: var(--line-height-solid, 1); }
- .lh-title-m { line-height: var(--line-height-title, 1.25); }
- .lh-body-m { line-height: var(--line-height-body, 1.5); }
+@media (--breakpoint-medium) {
+ .lh-solid-m { line-height: 1; }
+ .lh-title-m { line-height: 1.25; }
+ .lh-copy-m { line-height: 1.5; }
}
-@container (min-width:64em) {
- .lh-solid-l { line-height: var(--line-height-solid, 1); }
- .lh-title-l { line-height: var(--line-height-title, 1.25); }
- .lh-body-l { line-height: var(--line-height-body, 1.5); }
+@media (--breakpoint-large) {
+ .lh-solid-l { line-height: 1; }
+ .lh-title-l { line-height: 1.25; }
+ .lh-copy-l { line-height: 1.5; }
}
diff --git a/src/_links.css b/src/_links.css
index 882fcb4b2..6c9a2c876 100644
--- a/src/_links.css
+++ b/src/_links.css
@@ -7,21 +7,21 @@
.link {
text-decoration: none;
- transition: all .15s ease-in;
+ transition: color .15s ease-in;
}
.link:link,
.link:visited {
- transition: all .15s ease-in;
+ transition: color .15s ease-in;
}
.link:hover {
- transition: all .15s ease-in;
+ transition: color .15s ease-in;
}
.link:active {
- transition: all .15s ease-in;
+ transition: color .15s ease-in;
}
.link:focus {
- transition: all .15s ease-in;
+ transition: color .15s ease-in;
outline: 1px dotted currentColor;
}
diff --git a/src/_max-widths.css b/src/_max-widths.css
index e601333af..e4175fae8 100644
--- a/src/_max-widths.css
+++ b/src/_max-widths.css
@@ -23,7 +23,7 @@
Media Query Extensions:
- -s = small
+ -ns = not-small
-m = medium
-l = large
@@ -49,23 +49,23 @@
.mw-none { max-width: none; }
-@container (min-width:30em) {
- .mw-100-s { max-width: 100%; }
+@media (--breakpoint-not-small) {
+ .mw-100-ns { max-width: 100%; }
- .mw1-s { max-width: 1rem; }
- .mw2-s { max-width: 2rem; }
- .mw3-s { max-width: 4rem; }
- .mw4-s { max-width: 8rem; }
- .mw5-s { max-width: 16rem; }
- .mw6-s { max-width: 32rem; }
- .mw7-s { max-width: 48rem; }
- .mw8-s { max-width: 64rem; }
- .mw9-s { max-width: 96rem; }
+ .mw1-ns { max-width: 1rem; }
+ .mw2-ns { max-width: 2rem; }
+ .mw3-ns { max-width: 4rem; }
+ .mw4-ns { max-width: 8rem; }
+ .mw5-ns { max-width: 16rem; }
+ .mw6-ns { max-width: 32rem; }
+ .mw7-ns { max-width: 48rem; }
+ .mw8-ns { max-width: 64rem; }
+ .mw9-ns { max-width: 96rem; }
- .mw-none-s { max-width: none; }
+ .mw-none-ns { max-width: none; }
}
-@container (min-width:48em) {
+@media (--breakpoint-medium) {
.mw-100-m { max-width: 100%; }
.mw1-m { max-width: 1rem; }
@@ -81,7 +81,7 @@
.mw-none-m { max-width: none; }
}
-@container (min-width:64em) {
+@media (--breakpoint-large) {
.mw-100-l { max-width: 100%; }
.mw1-l { max-width: 1rem; }
diff --git a/src/_media-queries.css b/src/_media-queries.css
index f71695222..d8a4c938a 100644
--- a/src/_media-queries.css
+++ b/src/_media-queries.css
@@ -10,20 +10,20 @@
These media queries can be referenced like so:
- @container (min-width:30em) {
- .example-s {
+ @media (--breakpoint-not-small) {
+ .medium-and-larger-specific-style {
background-color: red;
}
}
- @container (min-width:48em) {
- .example-m {
+ @media (--breakpoint-medium) {
+ .medium-screen-specific-style {
background-color: red;
}
}
- @container (min-width:64em) {
- .example-l {
+ @media (--breakpoint-large) {
+ .large-and-larger-screen-specific-style {
background-color: red;
}
}
@@ -31,6 +31,6 @@
*/
/* Media Queries */
-@custom-media min-width:30em screen and (min-width: 30em);
-@custom-media min-width:48em screen and (min-width: 48em);
-@custom-media min-width:64em screen and (min-width: 60em);
+@custom-media --breakpoint-not-small screen and (min-width: 30em);
+@custom-media --breakpoint-medium screen and (min-width: 30em) and (max-width: 60em);
+@custom-media --breakpoint-large screen and (min-width: 60em);
diff --git a/src/_module-template.css b/src/_module-template.css
index 0e4376555..0447e0c1e 100644
--- a/src/_module-template.css
+++ b/src/_module-template.css
@@ -8,15 +8,15 @@
*/
-@container (min-width:30em) {
+@media (--breakpoint-not-small) {
}
-@container (min-width:48em) {
+@media (--breakpoint-medium) {
}
-@container (min-width:64em) {
+@media (--breakpoint-large) {
}
diff --git a/src/_negative-margins.css b/src/_negative-margins.css
index 2a77dbfea..c31912ac8 100644
--- a/src/_negative-margins.css
+++ b/src/_negative-margins.css
@@ -20,7 +20,7 @@
7 = 7th step in spacing scale
Media Query Extensions:
- -s = small
+ -ns = not-small
-m = medium
-l = large
@@ -28,172 +28,172 @@
-.na1 { margin: calc(-1 * var(--spacing-1)); }
-.na2 { margin: calc(-1 * var(--spacing-2)); }
-.na3 { margin: calc(-1 * var(--spacing-3)); }
-.na4 { margin: calc(-1 * var(--spacing-4)); }
-.na5 { margin: calc(-1 * var(--spacing-5)); }
-.na6 { margin: calc(-1 * var(--spacing-6)); }
-.na7 { margin: calc(-1 * var(--spacing-7)); }
-
-.nl1 { margin-left: calc(-1 * var(--spacing-1)); }
-.nl2 { margin-left: calc(-1 * var(--spacing-2)); }
-.nl3 { margin-left: calc(-1 * var(--spacing-3)); }
-.nl4 { margin-left: calc(-1 * var(--spacing-4)); }
-.nl5 { margin-left: calc(-1 * var(--spacing-5)); }
-.nl6 { margin-left: calc(-1 * var(--spacing-6)); }
-.nl7 { margin-left: calc(-1 * var(--spacing-7)); }
-
-.nr1 { margin-right: calc(-1 * var(--spacing-1)); }
-.nr2 { margin-right: calc(-1 * var(--spacing-2)); }
-.nr3 { margin-right: calc(-1 * var(--spacing-3)); }
-.nr4 { margin-right: calc(-1 * var(--spacing-4)); }
-.nr5 { margin-right: calc(-1 * var(--spacing-5)); }
-.nr6 { margin-right: calc(-1 * var(--spacing-6)); }
-.nr7 { margin-right: calc(-1 * var(--spacing-7)); }
-
-.nb1 { margin-bottom: calc(-1 * var(--spacing-1)); }
-.nb2 { margin-bottom: calc(-1 * var(--spacing-2)); }
-.nb3 { margin-bottom: calc(-1 * var(--spacing-3)); }
-.nb4 { margin-bottom: calc(-1 * var(--spacing-4)); }
-.nb5 { margin-bottom: calc(-1 * var(--spacing-5)); }
-.nb6 { margin-bottom: calc(-1 * var(--spacing-6)); }
-.nb7 { margin-bottom: calc(-1 * var(--spacing-7)); }
-
-.nt1 { margin-top: calc(-1 * var(--spacing-1)); }
-.nt2 { margin-top: calc(-1 * var(--spacing-2)); }
-.nt3 { margin-top: calc(-1 * var(--spacing-3)); }
-.nt4 { margin-top: calc(-1 * var(--spacing-4)); }
-.nt5 { margin-top: calc(-1 * var(--spacing-5)); }
-.nt6 { margin-top: calc(-1 * var(--spacing-6)); }
-.nt7 { margin-top: calc(-1 * var(--spacing-7)); }
-
-@container (--breakpoint-2) {
-
- .na1-s { margin: calc(-1 * var(--spacing-1)); }
- .na2-s { margin: calc(-1 * var(--spacing-2)); }
- .na3-s { margin: calc(-1 * var(--spacing-3)); }
- .na4-s { margin: calc(-1 * var(--spacing-4)); }
- .na5-s { margin: calc(-1 * var(--spacing-5)); }
- .na6-s { margin: calc(-1 * var(--spacing-6)); }
- .na7-s { margin: calc(-1 * var(--spacing-7)); }
-
- .nl1-s { margin-left: calc(-1 * var(--spacing-1)); }
- .nl2-s { margin-left: calc(-1 * var(--spacing-2)); }
- .nl3-s { margin-left: calc(-1 * var(--spacing-3)); }
- .nl4-s { margin-left: calc(-1 * var(--spacing-4)); }
- .nl5-s { margin-left: calc(-1 * var(--spacing-5)); }
- .nl6-s { margin-left: calc(-1 * var(--spacing-6)); }
- .nl7-s { margin-left: calc(-1 * var(--spacing-7)); }
-
- .nr1-s { margin-right: calc(-1 * var(--spacing-1)); }
- .nr2-s { margin-right: calc(-1 * var(--spacing-2)); }
- .nr3-s { margin-right: calc(-1 * var(--spacing-3)); }
- .nr4-s { margin-right: calc(-1 * var(--spacing-4)); }
- .nr5-s { margin-right: calc(-1 * var(--spacing-5)); }
- .nr6-s { margin-right: calc(-1 * var(--spacing-6)); }
- .nr7-s { margin-right: calc(-1 * var(--spacing-7)); }
-
- .nb1-s { margin-bottom: calc(-1 * var(--spacing-1)); }
- .nb2-s { margin-bottom: calc(-1 * var(--spacing-2)); }
- .nb3-s { margin-bottom: calc(-1 * var(--spacing-3)); }
- .nb4-s { margin-bottom: calc(-1 * var(--spacing-4)); }
- .nb5-s { margin-bottom: calc(-1 * var(--spacing-5)); }
- .nb6-s { margin-bottom: calc(-1 * var(--spacing-6)); }
- .nb7-s { margin-bottom: calc(-1 * var(--spacing-7)); }
-
- .nt1-s { margin-top: calc(-1 * var(--spacing-1)); }
- .nt2-s { margin-top: calc(-1 * var(--spacing-2)); }
- .nt3-s { margin-top: calc(-1 * var(--spacing-3)); }
- .nt4-s { margin-top: calc(-1 * var(--spacing-4)); }
- .nt5-s { margin-top: calc(-1 * var(--spacing-5)); }
- .nt6-s { margin-top: calc(-1 * var(--spacing-6)); }
- .nt7-s { margin-top: calc(-1 * var(--spacing-7)); }
+.na1 { margin: calc(-1 * var(--spacing-extra-small)); }
+.na2 { margin: calc(-1 * var(--spacing-small)); }
+.na3 { margin: calc(-1 * var(--spacing-medium)); }
+.na4 { margin: calc(-1 * var(--spacing-large)); }
+.na5 { margin: calc(-1 * var(--spacing-extra-large)); }
+.na6 { margin: calc(-1 * var(--spacing-extra-extra-large)); }
+.na7 { margin: calc(-1 * var(--spacing-extra-extra-extra-large)); }
+
+.nl1 { margin-left: calc(-1 * var(--spacing-extra-small)); }
+.nl2 { margin-left: calc(-1 * var(--spacing-small)); }
+.nl3 { margin-left: calc(-1 * var(--spacing-medium)); }
+.nl4 { margin-left: calc(-1 * var(--spacing-large)); }
+.nl5 { margin-left: calc(-1 * var(--spacing-extra-large)); }
+.nl6 { margin-left: calc(-1 * var(--spacing-extra-extra-large)); }
+.nl7 { margin-left: calc(-1 * var(--spacing-extra-extra-extra-large)); }
+
+.nr1 { margin-right: calc(-1 * var(--spacing-extra-small)); }
+.nr2 { margin-right: calc(-1 * var(--spacing-small)); }
+.nr3 { margin-right: calc(-1 * var(--spacing-medium)); }
+.nr4 { margin-right: calc(-1 * var(--spacing-large)); }
+.nr5 { margin-right: calc(-1 * var(--spacing-extra-large)); }
+.nr6 { margin-right: calc(-1 * var(--spacing-extra-extra-large)); }
+.nr7 { margin-right: calc(-1 * var(--spacing-extra-extra-extra-large)); }
+
+.nb1 { margin-bottom: calc(-1 * var(--spacing-extra-small)); }
+.nb2 { margin-bottom: calc(-1 * var(--spacing-small)); }
+.nb3 { margin-bottom: calc(-1 * var(--spacing-medium)); }
+.nb4 { margin-bottom: calc(-1 * var(--spacing-large)); }
+.nb5 { margin-bottom: calc(-1 * var(--spacing-extra-large)); }
+.nb6 { margin-bottom: calc(-1 * var(--spacing-extra-extra-large)); }
+.nb7 { margin-bottom: calc(-1 * var(--spacing-extra-extra-extra-large)); }
+
+.nt1 { margin-top: calc(-1 * var(--spacing-extra-small)); }
+.nt2 { margin-top: calc(-1 * var(--spacing-small)); }
+.nt3 { margin-top: calc(-1 * var(--spacing-medium)); }
+.nt4 { margin-top: calc(-1 * var(--spacing-large)); }
+.nt5 { margin-top: calc(-1 * var(--spacing-extra-large)); }
+.nt6 { margin-top: calc(-1 * var(--spacing-extra-extra-large)); }
+.nt7 { margin-top: calc(-1 * var(--spacing-extra-extra-extra-large)); }
+
+@media (--breakpoint-not-small) {
+
+ .na1-ns { margin: calc(-1 * var(--spacing-extra-small)); }
+ .na2-ns { margin: calc(-1 * var(--spacing-small)); }
+ .na3-ns { margin: calc(-1 * var(--spacing-medium)); }
+ .na4-ns { margin: calc(-1 * var(--spacing-large)); }
+ .na5-ns { margin: calc(-1 * var(--spacing-extra-large)); }
+ .na6-ns { margin: calc(-1 * var(--spacing-extra-extra-large)); }
+ .na7-ns { margin: calc(-1 * var(--spacing-extra-extra-extra-large)); }
+
+ .nl1-ns { margin-left: calc(-1 * var(--spacing-extra-small)); }
+ .nl2-ns { margin-left: calc(-1 * var(--spacing-small)); }
+ .nl3-ns { margin-left: calc(-1 * var(--spacing-medium)); }
+ .nl4-ns { margin-left: calc(-1 * var(--spacing-large)); }
+ .nl5-ns { margin-left: calc(-1 * var(--spacing-extra-large)); }
+ .nl6-ns { margin-left: calc(-1 * var(--spacing-extra-extra-large)); }
+ .nl7-ns { margin-left: calc(-1 * var(--spacing-extra-extra-extra-large)); }
+
+ .nr1-ns { margin-right: calc(-1 * var(--spacing-extra-small)); }
+ .nr2-ns { margin-right: calc(-1 * var(--spacing-small)); }
+ .nr3-ns { margin-right: calc(-1 * var(--spacing-medium)); }
+ .nr4-ns { margin-right: calc(-1 * var(--spacing-large)); }
+ .nr5-ns { margin-right: calc(-1 * var(--spacing-extra-large)); }
+ .nr6-ns { margin-right: calc(-1 * var(--spacing-extra-extra-large)); }
+ .nr7-ns { margin-right: calc(-1 * var(--spacing-extra-extra-extra-large)); }
+
+ .nb1-ns { margin-bottom: calc(-1 * var(--spacing-extra-small)); }
+ .nb2-ns { margin-bottom: calc(-1 * var(--spacing-small)); }
+ .nb3-ns { margin-bottom: calc(-1 * var(--spacing-medium)); }
+ .nb4-ns { margin-bottom: calc(-1 * var(--spacing-large)); }
+ .nb5-ns { margin-bottom: calc(-1 * var(--spacing-extra-large)); }
+ .nb6-ns { margin-bottom: calc(-1 * var(--spacing-extra-extra-large)); }
+ .nb7-ns { margin-bottom: calc(-1 * var(--spacing-extra-extra-extra-large)); }
+
+ .nt1-ns { margin-top: calc(-1 * var(--spacing-extra-small)); }
+ .nt2-ns { margin-top: calc(-1 * var(--spacing-small)); }
+ .nt3-ns { margin-top: calc(-1 * var(--spacing-medium)); }
+ .nt4-ns { margin-top: calc(-1 * var(--spacing-large)); }
+ .nt5-ns { margin-top: calc(-1 * var(--spacing-extra-large)); }
+ .nt6-ns { margin-top: calc(-1 * var(--spacing-extra-extra-large)); }
+ .nt7-ns { margin-top: calc(-1 * var(--spacing-extra-extra-extra-large)); }
}
-@container (--breakpoint-3) {
- .na1-m { margin: calc(-1 * var(--spacing-1)); }
- .na2-m { margin: calc(-1 * var(--spacing-2)); }
- .na3-m { margin: calc(-1 * var(--spacing-3)); }
- .na4-m { margin: calc(-1 * var(--spacing-4)); }
- .na5-m { margin: calc(-1 * var(--spacing-5)); }
- .na6-m { margin: calc(-1 * var(--spacing-6)); }
- .na7-m { margin: calc(-1 * var(--spacing-7)); }
-
- .nl1-m { margin-left: calc(-1 * var(--spacing-1)); }
- .nl2-m { margin-left: calc(-1 * var(--spacing-2)); }
- .nl3-m { margin-left: calc(-1 * var(--spacing-3)); }
- .nl4-m { margin-left: calc(-1 * var(--spacing-4)); }
- .nl5-m { margin-left: calc(-1 * var(--spacing-5)); }
- .nl6-m { margin-left: calc(-1 * var(--spacing-6)); }
- .nl7-m { margin-left: calc(-1 * var(--spacing-7)); }
-
- .nr1-m { margin-right: calc(-1 * var(--spacing-1)); }
- .nr2-m { margin-right: calc(-1 * var(--spacing-2)); }
- .nr3-m { margin-right: calc(-1 * var(--spacing-3)); }
- .nr4-m { margin-right: calc(-1 * var(--spacing-4)); }
- .nr5-m { margin-right: calc(-1 * var(--spacing-5)); }
- .nr6-m { margin-right: calc(-1 * var(--spacing-6)); }
- .nr7-m { margin-right: calc(-1 * var(--spacing-7)); }
-
- .nb1-m { margin-bottom: calc(-1 * var(--spacing-1)); }
- .nb2-m { margin-bottom: calc(-1 * var(--spacing-2)); }
- .nb3-m { margin-bottom: calc(-1 * var(--spacing-3)); }
- .nb4-m { margin-bottom: calc(-1 * var(--spacing-4)); }
- .nb5-m { margin-bottom: calc(-1 * var(--spacing-5)); }
- .nb6-m { margin-bottom: calc(-1 * var(--spacing-6)); }
- .nb7-m { margin-bottom: calc(-1 * var(--spacing-7)); }
-
- .nt1-m { margin-top: calc(-1 * var(--spacing-1)); }
- .nt2-m { margin-top: calc(-1 * var(--spacing-2)); }
- .nt3-m { margin-top: calc(-1 * var(--spacing-3)); }
- .nt4-m { margin-top: calc(-1 * var(--spacing-4)); }
- .nt5-m { margin-top: calc(-1 * var(--spacing-5)); }
- .nt6-m { margin-top: calc(-1 * var(--spacing-6)); }
- .nt7-m { margin-top: calc(-1 * var(--spacing-7)); }
+@media (--breakpoint-medium) {
+ .na1-m { margin: calc(-1 * var(--spacing-extra-small)); }
+ .na2-m { margin: calc(-1 * var(--spacing-small)); }
+ .na3-m { margin: calc(-1 * var(--spacing-medium)); }
+ .na4-m { margin: calc(-1 * var(--spacing-large)); }
+ .na5-m { margin: calc(-1 * var(--spacing-extra-large)); }
+ .na6-m { margin: calc(-1 * var(--spacing-extra-extra-large)); }
+ .na7-m { margin: calc(-1 * var(--spacing-extra-extra-extra-large)); }
+
+ .nl1-m { margin-left: calc(-1 * var(--spacing-extra-small)); }
+ .nl2-m { margin-left: calc(-1 * var(--spacing-small)); }
+ .nl3-m { margin-left: calc(-1 * var(--spacing-medium)); }
+ .nl4-m { margin-left: calc(-1 * var(--spacing-large)); }
+ .nl5-m { margin-left: calc(-1 * var(--spacing-extra-large)); }
+ .nl6-m { margin-left: calc(-1 * var(--spacing-extra-extra-large)); }
+ .nl7-m { margin-left: calc(-1 * var(--spacing-extra-extra-extra-large)); }
+
+ .nr1-m { margin-right: calc(-1 * var(--spacing-extra-small)); }
+ .nr2-m { margin-right: calc(-1 * var(--spacing-small)); }
+ .nr3-m { margin-right: calc(-1 * var(--spacing-medium)); }
+ .nr4-m { margin-right: calc(-1 * var(--spacing-large)); }
+ .nr5-m { margin-right: calc(-1 * var(--spacing-extra-large)); }
+ .nr6-m { margin-right: calc(-1 * var(--spacing-extra-extra-large)); }
+ .nr7-m { margin-right: calc(-1 * var(--spacing-extra-extra-extra-large)); }
+
+ .nb1-m { margin-bottom: calc(-1 * var(--spacing-extra-small)); }
+ .nb2-m { margin-bottom: calc(-1 * var(--spacing-small)); }
+ .nb3-m { margin-bottom: calc(-1 * var(--spacing-medium)); }
+ .nb4-m { margin-bottom: calc(-1 * var(--spacing-large)); }
+ .nb5-m { margin-bottom: calc(-1 * var(--spacing-extra-large)); }
+ .nb6-m { margin-bottom: calc(-1 * var(--spacing-extra-extra-large)); }
+ .nb7-m { margin-bottom: calc(-1 * var(--spacing-extra-extra-extra-large)); }
+
+ .nt1-m { margin-top: calc(-1 * var(--spacing-extra-small)); }
+ .nt2-m { margin-top: calc(-1 * var(--spacing-small)); }
+ .nt3-m { margin-top: calc(-1 * var(--spacing-medium)); }
+ .nt4-m { margin-top: calc(-1 * var(--spacing-large)); }
+ .nt5-m { margin-top: calc(-1 * var(--spacing-extra-large)); }
+ .nt6-m { margin-top: calc(-1 * var(--spacing-extra-extra-large)); }
+ .nt7-m { margin-top: calc(-1 * var(--spacing-extra-extra-extra-large)); }
}
-@container (min-width:64em) {
- .na1-l { margin: calc(-1 * var(--spacing-1)); }
- .na2-l { margin: calc(-1 * var(--spacing-2)); }
- .na3-l { margin: calc(-1 * var(--spacing-3)); }
- .na4-l { margin: calc(-1 * var(--spacing-4)); }
- .na5-l { margin: calc(-1 * var(--spacing-5)); }
- .na6-l { margin: calc(-1 * var(--spacing-6)); }
- .na7-l { margin: calc(-1 * var(--spacing-7)); }
-
- .nl1-l { margin-left: calc(-1 * var(--spacing-1)); }
- .nl2-l { margin-left: calc(-1 * var(--spacing-2)); }
- .nl3-l { margin-left: calc(-1 * var(--spacing-3)); }
- .nl4-l { margin-left: calc(-1 * var(--spacing-4)); }
- .nl5-l { margin-left: calc(-1 * var(--spacing-5)); }
- .nl6-l { margin-left: calc(-1 * var(--spacing-6)); }
- .nl7-l { margin-left: calc(-1 * var(--spacing-7)); }
-
- .nr1-l { margin-right: calc(-1 * var(--spacing-1)); }
- .nr2-l { margin-right: calc(-1 * var(--spacing-2)); }
- .nr3-l { margin-right: calc(-1 * var(--spacing-3)); }
- .nr4-l { margin-right: calc(-1 * var(--spacing-4)); }
- .nr5-l { margin-right: calc(-1 * var(--spacing-5)); }
- .nr6-l { margin-right: calc(-1 * var(--spacing-6)); }
- .nr7-l { margin-right: calc(-1 * var(--spacing-7)); }
-
- .nb1-l { margin-bottom: calc(-1 * var(--spacing-1)); }
- .nb2-l { margin-bottom: calc(-1 * var(--spacing-2)); }
- .nb3-l { margin-bottom: calc(-1 * var(--spacing-3)); }
- .nb4-l { margin-bottom: calc(-1 * var(--spacing-4)); }
- .nb5-l { margin-bottom: calc(-1 * var(--spacing-5)); }
- .nb6-l { margin-bottom: calc(-1 * var(--spacing-6)); }
- .nb7-l { margin-bottom: calc(-1 * var(--spacing-7)); }
-
- .nt1-l { margin-top: calc(-1 * var(--spacing-1)); }
- .nt2-l { margin-top: calc(-1 * var(--spacing-2)); }
- .nt3-l { margin-top: calc(-1 * var(--spacing-3)); }
- .nt4-l { margin-top: calc(-1 * var(--spacing-4)); }
- .nt5-l { margin-top: calc(-1 * var(--spacing-5)); }
- .nt6-l { margin-top: calc(-1 * var(--spacing-6)); }
- .nt7-l { margin-top: calc(-1 * var(--spacing-7)); }
+@media (--breakpoint-large) {
+ .na1-l { margin: calc(-1 * var(--spacing-extra-small)); }
+ .na2-l { margin: calc(-1 * var(--spacing-small)); }
+ .na3-l { margin: calc(-1 * var(--spacing-medium)); }
+ .na4-l { margin: calc(-1 * var(--spacing-large)); }
+ .na5-l { margin: calc(-1 * var(--spacing-extra-large)); }
+ .na6-l { margin: calc(-1 * var(--spacing-extra-extra-large)); }
+ .na7-l { margin: calc(-1 * var(--spacing-extra-extra-extra-large)); }
+
+ .nl1-l { margin-left: calc(-1 * var(--spacing-extra-small)); }
+ .nl2-l { margin-left: calc(-1 * var(--spacing-small)); }
+ .nl3-l { margin-left: calc(-1 * var(--spacing-medium)); }
+ .nl4-l { margin-left: calc(-1 * var(--spacing-large)); }
+ .nl5-l { margin-left: calc(-1 * var(--spacing-extra-large)); }
+ .nl6-l { margin-left: calc(-1 * var(--spacing-extra-extra-large)); }
+ .nl7-l { margin-left: calc(-1 * var(--spacing-extra-extra-extra-large)); }
+
+ .nr1-l { margin-right: calc(-1 * var(--spacing-extra-small)); }
+ .nr2-l { margin-right: calc(-1 * var(--spacing-small)); }
+ .nr3-l { margin-right: calc(-1 * var(--spacing-medium)); }
+ .nr4-l { margin-right: calc(-1 * var(--spacing-large)); }
+ .nr5-l { margin-right: calc(-1 * var(--spacing-extra-large)); }
+ .nr6-l { margin-right: calc(-1 * var(--spacing-extra-extra-large)); }
+ .nr7-l { margin-right: calc(-1 * var(--spacing-extra-extra-extra-large)); }
+
+ .nb1-l { margin-bottom: calc(-1 * var(--spacing-extra-small)); }
+ .nb2-l { margin-bottom: calc(-1 * var(--spacing-small)); }
+ .nb3-l { margin-bottom: calc(-1 * var(--spacing-medium)); }
+ .nb4-l { margin-bottom: calc(-1 * var(--spacing-large)); }
+ .nb5-l { margin-bottom: calc(-1 * var(--spacing-extra-large)); }
+ .nb6-l { margin-bottom: calc(-1 * var(--spacing-extra-extra-large)); }
+ .nb7-l { margin-bottom: calc(-1 * var(--spacing-extra-extra-extra-large)); }
+
+ .nt1-l { margin-top: calc(-1 * var(--spacing-extra-small)); }
+ .nt2-l { margin-top: calc(-1 * var(--spacing-small)); }
+ .nt3-l { margin-top: calc(-1 * var(--spacing-medium)); }
+ .nt4-l { margin-top: calc(-1 * var(--spacing-large)); }
+ .nt5-l { margin-top: calc(-1 * var(--spacing-extra-large)); }
+ .nt6-l { margin-top: calc(-1 * var(--spacing-extra-extra-large)); }
+ .nt7-l { margin-top: calc(-1 * var(--spacing-extra-extra-extra-large)); }
}
diff --git a/src/_nested.css b/src/_nested.css
index e9eef457c..ddefc4231 100644
--- a/src/_nested.css
+++ b/src/_nested.css
@@ -9,7 +9,7 @@
.nested-copy-line-height p,
.nested-copy-line-height ul,
.nested-copy-line-height ol {
- line-height: var(--line-height-body, 1.5);
+ line-height: 1.5;
}
.nested-headline-line-height h1,
@@ -18,7 +18,7 @@
.nested-headline-line-height h4,
.nested-headline-line-height h5,
.nested-headline-line-height h6 {
- line-height: var(--line-height-title, 1.25);
+ line-height: 1.25;
}
.nested-list-reset ul,
@@ -45,13 +45,13 @@
}
.nested-links a {
- color: var(--blue-5);
+ color: var(--blue);
transition: color .15s ease-in;
}
.nested-links a:hover,
.nested-links a:focus {
- color: var(--blue-3);
+ color: var(--light-blue);
transition: color .15s ease-in;
}
diff --git a/src/_normalize.css b/src/_normalize.css
index 192eb9ce4..47b010e47 100644
--- a/src/_normalize.css
+++ b/src/_normalize.css
@@ -1,4 +1,4 @@
-/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
@@ -24,14 +24,6 @@ body {
margin: 0;
}
-/**
- * Render the `main` element consistently in IE.
- */
-
-main {
- display: block;
-}
-
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
diff --git a/src/_opacity.css b/src/_opacity.css
index f16a22649..3f2a39bbc 100644
--- a/src/_opacity.css
+++ b/src/_opacity.css
@@ -5,44 +5,16 @@
*/
-.o12 { opacity: var(--opacity-12, 1); }
-.o11 { opacity: var(--opacity-11,.9); }
-.o10 { opacity: var(--opacity-10,.8); }
-.o9 { opacity: var(--opacity-9,.7); }
-.o8 { opacity: var(--opacity-8,.6); }
-.o7 { opacity: var(--opacity-7,.5); }
-.o6 { opacity: var(--opacity-6,.4); }
-.o5 { opacity: var(--opacity-5,.3); }
-.o4 { opacity: var(--opacity-4,.2); }
-.o3 { opacity: var(--opacity-3,.1); }
-.o2 { opacity: var(--opacity-2,.05); }
-.o1 { opacity: var(--opacity-1,.025);}
-.o0 { opacity: var(--opacity-0,0); }
-
-.h-o12:hover { opacity: var(--opacity-12, 1); }
-.h-o11:hover { opacity: var(--opacity-11,.9); }
-.h-o10:hover { opacity: var(--opacity-10,.8); }
-.h-o9:hover { opacity: var(--opacity-9,.7); }
-.h-o8:hover { opacity: var(--opacity-8,.6); }
-.h-o7:hover { opacity: var(--opacity-7,.5); }
-.h-o6:hover { opacity: var(--opacity-6,.4); }
-.h-o5:hover { opacity: var(--opacity-5,.3); }
-.h-o4:hover { opacity: var(--opacity-4,.2); }
-.h-o3:hover { opacity: var(--opacity-3,.1); }
-.h-o2:hover { opacity: var(--opacity-2,.05); }
-.h-o1:hover { opacity: var(--opacity-1,.025);}
-.h-o0:hover { opacity: var(--opacity-0,0); }
-
-.f-o12:focus { opacity: var(--opacity-12, 1); }
-.f-o11:focus { opacity: var(--opacity-11,.9); }
-.f-o10:focus { opacity: var(--opacity-10,.8); }
-.f-o9:focus { opacity: var(--opacity-9,.7); }
-.f-o8:focus { opacity: var(--opacity-8,.6); }
-.f-o7:focus { opacity: var(--opacity-7,.5); }
-.f-o6:focus { opacity: var(--opacity-6,.4); }
-.f-o5:focus { opacity: var(--opacity-5,.3); }
-.f-o4:focus { opacity: var(--opacity-4,.2); }
-.f-o3:focus { opacity: var(--opacity-3,.1); }
-.f-o2:focus { opacity: var(--opacity-2,.05); }
-.f-o1:focus { opacity: var(--opacity-1,.025);}
-.f-o0:focus { opacity: var(--opacity-0,0); }
+.o-100 { opacity: 1; }
+.o-90 { opacity: .9; }
+.o-80 { opacity: .8; }
+.o-70 { opacity: .7; }
+.o-60 { opacity: .6; }
+.o-50 { opacity: .5; }
+.o-40 { opacity: .4; }
+.o-30 { opacity: .3; }
+.o-20 { opacity: .2; }
+.o-10 { opacity: .1; }
+.o-05 { opacity: .05; }
+.o-025 { opacity: .025; }
+.o-0 { opacity: 0; }
diff --git a/src/_order.css b/src/_order.css
deleted file mode 100644
index df0c82921..000000000
--- a/src/_order.css
+++ /dev/null
@@ -1,60 +0,0 @@
-/*
-
- ORDER
-
- Media Query Extensions:
- -s = small
- -m = medium
- -l = large
-
-*/
-
-.order-0 { order: 0; }
-.order-1 { order: 1; }
-.order-2 { order: 2; }
-.order-3 { order: 3; }
-.order-4 { order: 4; }
-.order-5 { order: 5; }
-.order-6 { order: 6; }
-.order-7 { order: 7; }
-.order-8 { order: 8; }
-.order-last { order: 99999; }
-
-@container (min-width:30em) {
- .order-0-s { order: 0; }
- .order-1-s { order: 1; }
- .order-2-s { order: 2; }
- .order-3-s { order: 3; }
- .order-4-s { order: 4; }
- .order-5-s { order: 5; }
- .order-6-s { order: 6; }
- .order-7-s { order: 7; }
- .order-8-s { order: 8; }
- .order-last-s { order: 99999; }
-}
-@container (min-width:48em) {
- .order-0-m { order: 0; }
- .order-1-m { order: 1; }
- .order-2-m { order: 2; }
- .order-3-m { order: 3; }
- .order-4-m { order: 4; }
- .order-5-m { order: 5; }
- .order-6-m { order: 6; }
- .order-7-m { order: 7; }
- .order-8-m { order: 8; }
- .order-last-m { order: 99999; }
-
-}
-
-@container (min-width:64em) {
- .order-0-l { order: 0; }
- .order-1-l { order: 1; }
- .order-2-l { order: 2; }
- .order-3-l { order: 3; }
- .order-4-l { order: 4; }
- .order-5-l { order: 5; }
- .order-6-l { order: 6; }
- .order-7-l { order: 7; }
- .order-8-l { order: 8; }
- .order-last-l { order: 99999; }
-}
diff --git a/src/_outlines.css b/src/_outlines.css
index d80fce175..e9b0ed996 100644
--- a/src/_outlines.css
+++ b/src/_outlines.css
@@ -3,34 +3,30 @@
OUTLINES
Media Query Extensions:
- -s = small
+ -ns = not-small
-m = medium
-l = large
*/
-.outline { outline: var(--border-width, 1px) solid currentColor; }
-.outline-color { outline: var(--border-width, 1px) solid var(--border-color, gray); }
-.outline-transparent { outline: var(--border-width, 1px) solid transparent; }
+.outline { outline: 1px solid; }
+.outline-transparent { outline: 1px solid transparent; }
.outline-0 { outline: 0; }
-@container (min-width:30em) {
- .outline-s { outline: var(--border-width, 1px) solid currentColor; }
- .outline-color-s { outline: var(--border-width, 1px) solid var(--border-color, gray); }
- .outline-transparent-s { outline: var(--border-width, 1px) solid transparent; }
- .outline-0-s { outline: 0; }
+@media (--breakpoint-not-small) {
+ .outline-ns { outline: 1px solid; }
+ .outline-transparent-ns { outline: 1px solid transparent; }
+ .outline-0-ns { outline: 0; }
}
-@container (min-width:48em) {
- .outline-m { outline: var(--border-width, 1px) solid currentColor; }
- .outline-color-m { outline: var(--border-width, 1px) solid var(--border-color, gray); }
- .outline-transparent-m { outline: var(--border-width, 1px) solid transparent; }
+@media (--breakpoint-medium) {
+ .outline-m { outline: 1px solid; }
+ .outline-transparent-m { outline: 1px solid transparent; }
.outline-0-m { outline: 0; }
}
-@container (min-width:64em) {
- .outline-l { outline: var(--border-width, 1px) solid currentColor; }
- .outline-color-l { outline: var(--border-width, 1px) solid var(--border-color, gray); }
- .outline-transparent-l { outline: var(--border-width, 1px) solid transparent; }
+@media (--breakpoint-large) {
+ .outline-l { outline: 1px solid; }
+ .outline-transparent-l { outline: 1px solid transparent; }
.outline-0-l { outline: 0; }
}
diff --git a/src/_overflow.css b/src/_overflow.css
index 92182d07c..82ca8ebbc 100644
--- a/src/_overflow.css
+++ b/src/_overflow.css
@@ -3,7 +3,7 @@
OVERFLOW
Media Query Extensions:
- -s = small
+ -ns = not-small
-m = medium
-l = large
@@ -24,23 +24,23 @@
.overflow-y-scroll { overflow-y: scroll; }
.overflow-y-auto { overflow-y: auto; }
-@container (min-width:30em) {
- .overflow-visible-s { overflow: visible; }
- .overflow-hidden-s { overflow: hidden; }
- .overflow-scroll-s { overflow: scroll; }
- .overflow-auto-s { overflow: auto; }
- .overflow-x-visible-s { overflow-x: visible; }
- .overflow-x-hidden-s { overflow-x: hidden; }
- .overflow-x-scroll-s { overflow-x: scroll; }
- .overflow-x-auto-s { overflow-x: auto; }
+@media (--breakpoint-not-small) {
+ .overflow-visible-ns { overflow: visible; }
+ .overflow-hidden-ns { overflow: hidden; }
+ .overflow-scroll-ns { overflow: scroll; }
+ .overflow-auto-ns { overflow: auto; }
+ .overflow-x-visible-ns { overflow-x: visible; }
+ .overflow-x-hidden-ns { overflow-x: hidden; }
+ .overflow-x-scroll-ns { overflow-x: scroll; }
+ .overflow-x-auto-ns { overflow-x: auto; }
- .overflow-y-visible-s { overflow-y: visible; }
- .overflow-y-hidden-s { overflow-y: hidden; }
- .overflow-y-scroll-s { overflow-y: scroll; }
- .overflow-y-auto-s { overflow-y: auto; }
+ .overflow-y-visible-ns { overflow-y: visible; }
+ .overflow-y-hidden-ns { overflow-y: hidden; }
+ .overflow-y-scroll-ns { overflow-y: scroll; }
+ .overflow-y-auto-ns { overflow-y: auto; }
}
-@container (min-width:48em) {
+@media (--breakpoint-medium) {
.overflow-visible-m { overflow: visible; }
.overflow-hidden-m { overflow: hidden; }
.overflow-scroll-m { overflow: scroll; }
@@ -57,7 +57,7 @@
.overflow-y-auto-m { overflow-y: auto; }
}
-@container (min-width:64em) {
+@media (--breakpoint-large) {
.overflow-visible-l { overflow: visible; }
.overflow-hidden-l { overflow: hidden; }
.overflow-scroll-l { overflow: scroll; }
diff --git a/src/_position.css b/src/_position.css
index 7f715381c..eaccbdf24 100644
--- a/src/_position.css
+++ b/src/_position.css
@@ -4,7 +4,7 @@
Docs: http://tachyons.io/docs/layout/position/
Media Query Extensions:
- -s = small
+ -ns = not-small
-m = medium
-l = large
@@ -14,28 +14,24 @@
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
-.sticky { position: sticky; }
-@container (min-width:30em) {
- .static-s { position: static; }
- .relative-s { position: relative; }
- .absolute-s { position: absolute; }
- .fixed-s { position: fixed; }
- .sticky-s { position: sticky; }
+@media (--breakpoint-not-small) {
+ .static-ns { position: static; }
+ .relative-ns { position: relative; }
+ .absolute-ns { position: absolute; }
+ .fixed-ns { position: fixed; }
}
-@container (min-width:48em) {
+@media (--breakpoint-medium) {
.static-m { position: static; }
.relative-m { position: relative; }
.absolute-m { position: absolute; }
.fixed-m { position: fixed; }
- .sticky-m { position: sticky; }
}
-@container (min-width:64em) {
+@media (--breakpoint-large) {
.static-l { position: static; }
.relative-l { position: relative; }
.absolute-l { position: absolute; }
.fixed-l { position: fixed; }
- .sticky-l { position: sticky; }
}
diff --git a/src/_rotations.css b/src/_rotations.css
index 4611b7e11..5adf7aad2 100644
--- a/src/_rotations.css
+++ b/src/_rotations.css
@@ -12,17 +12,17 @@
.rotate-270 { transform: rotate(270deg); }
.rotate-315 { transform: rotate(315deg); }
-@container (min-width:30em){
- .rotate-45-s { transform: rotate(45deg); }
- .rotate-90-s { transform: rotate(90deg); }
- .rotate-135-s { transform: rotate(135deg); }
- .rotate-180-s { transform: rotate(180deg); }
- .rotate-225-s { transform: rotate(225deg); }
- .rotate-270-s { transform: rotate(270deg); }
- .rotate-315-s { transform: rotate(315deg); }
+@media (--breakpoint-not-small){
+ .rotate-45-ns { transform: rotate(45deg); }
+ .rotate-90-ns { transform: rotate(90deg); }
+ .rotate-135-ns { transform: rotate(135deg); }
+ .rotate-180-ns { transform: rotate(180deg); }
+ .rotate-225-ns { transform: rotate(225deg); }
+ .rotate-270-ns { transform: rotate(270deg); }
+ .rotate-315-ns { transform: rotate(315deg); }
}
-@container (min-width:48em){
+@media (--breakpoint-medium){
.rotate-45-m { transform: rotate(45deg); }
.rotate-90-m { transform: rotate(90deg); }
.rotate-135-m { transform: rotate(135deg); }
@@ -32,7 +32,7 @@
.rotate-315-m { transform: rotate(315deg); }
}
-@container (min-width:64em){
+@media (--breakpoint-large){
.rotate-45-l { transform: rotate(45deg); }
.rotate-90-l { transform: rotate(90deg); }
.rotate-135-l { transform: rotate(135deg); }
diff --git a/src/_skins-pseudo.css b/src/_skins-pseudo.css
index 4e4bc8933..593abf862 100644
--- a/src/_skins-pseudo.css
+++ b/src/_skins-pseudo.css
@@ -3,784 +3,234 @@
SKINS:PSEUDO
Customize the color of an element when
- it is focused or hovered over. This is a larger file. Feel
- free to remove and edit colors that aren't needed.
+ it is focused or hovered over.
*/
-.hover-overlay-tint-0:hover { color: var( --overlay-tint-0); }
-.hover-overlay-tint-1:hover { color: var( --overlay-tint-1); }
-.hover-overlay-tint-2:hover { color: var( --overlay-tint-2); }
-.hover-overlay-tint-3:hover { color: var( --overlay-tint-3); }
-.hover-overlay-tint-4:hover { color: var( --overlay-tint-4); }
-.hover-overlay-tint-5:hover { color: var( --overlay-tint-5); }
-.hover-overlay-tint-6:hover { color: var( --overlay-tint-6); }
-.hover-overlay-tint-7:hover { color: var( --overlay-tint-7); }
-.hover-overlay-tint-8:hover { color: var( --overlay-tint-8); }
-.hover-overlay-tint-9:hover { color: var( --overlay-tint-9); }
-.hover-overlay-tint-10:hover { color: var( --overlay-tint-10); }
-.hover-overlay-tint-11:hover { color: var( --overlay-tint-11); }
-.hover-overlay-shadow-0:hover { color: var( --overlay-shadow-0); }
-.hover-overlay-shadow-1:hover { color: var( --overlay-shadow-1); }
-.hover-overlay-shadow-2:hover { color: var( --overlay-shadow-2); }
-.hover-overlay-shadow-3:hover { color: var( --overlay-shadow-3); }
-.hover-overlay-shadow-4:hover { color: var( --overlay-shadow-4); }
-.hover-overlay-shadow-5:hover { color: var( --overlay-shadow-5); }
-.hover-overlay-shadow-6:hover { color: var( --overlay-shadow-6); }
-.hover-overlay-shadow-7:hover { color: var( --overlay-shadow-7); }
-.hover-overlay-shadow-8:hover { color: var( --overlay-shadow-8); }
-.hover-overlay-shadow-9:hover { color: var( --overlay-shadow-9); }
-.hover-overlay-shadow-10:hover { color: var( --overlay-shadow-10); }
-.hover-overlay-shadow-11:hover { color: var( --overlay-shadow-11); }
-.hover-gray-0:hover { color: var( --gray-0); }
-.hover-gray-1:hover { color: var( --gray-1); }
-.hover-gray-2:hover { color: var( --gray-2); }
-.hover-gray-3:hover { color: var( --gray-3); }
-.hover-gray-4:hover { color: var( --gray-4); }
-.hover-gray-5:hover { color: var( --gray-5); }
-.hover-gray-6:hover { color: var( --gray-6); }
-.hover-gray-7:hover { color: var( --gray-7); }
-.hover-gray-8:hover { color: var( --gray-8); }
-.hover-gray-9:hover { color: var( --gray-9); }
-.hover-gray-10:hover { color: var( --gray-10); }
-.hover-gray-11:hover { color: var( --gray-11); }
-.hover-slate-gray-0:hover { color: var( --slate-gray-0); }
-.hover-slate-gray-1:hover { color: var( --slate-gray-1); }
-.hover-slate-gray-2:hover { color: var( --slate-gray-2); }
-.hover-slate-gray-3:hover { color: var( --slate-gray-3); }
-.hover-slate-gray-4:hover { color: var( --slate-gray-4); }
-.hover-slate-gray-5:hover { color: var( --slate-gray-5); }
-.hover-slate-gray-6:hover { color: var( --slate-gray-6); }
-.hover-slate-gray-7:hover { color: var( --slate-gray-7); }
-.hover-slate-gray-8:hover { color: var( --slate-gray-8); }
-.hover-slate-gray-9:hover { color: var( --slate-gray-9); }
-.hover-slate-gray-10:hover { color: var( --slate-gray-10); }
-.hover-slate-gray-11:hover { color: var( --slate-gray-11); }
-.hover-blue-0:hover { color: var( --blue-0); }
-.hover-blue-1:hover { color: var( --blue-1); }
-.hover-blue-2:hover { color: var( --blue-2); }
-.hover-blue-3:hover { color: var( --blue-3); }
-.hover-blue-4:hover { color: var( --blue-4); }
-.hover-blue-5:hover { color: var( --blue-5); }
-.hover-blue-6:hover { color: var( --blue-6); }
-.hover-blue-7:hover { color: var( --blue-7); }
-.hover-blue-8:hover { color: var( --blue-8); }
-.hover-blue-9:hover { color: var( --blue-9); }
-.hover-blue-10:hover { color: var( --blue-10); }
-.hover-blue-11:hover { color: var( --blue-11); }
-.hover-indigo-0:hover { color: var( --indigo-0); }
-.hover-indigo-1:hover { color: var( --indigo-1); }
-.hover-indigo-2:hover { color: var( --indigo-2); }
-.hover-indigo-3:hover { color: var( --indigo-3); }
-.hover-indigo-4:hover { color: var( --indigo-4); }
-.hover-indigo-5:hover { color: var( --indigo-5); }
-.hover-indigo-6:hover { color: var( --indigo-6); }
-.hover-indigo-7:hover { color: var( --indigo-7); }
-.hover-indigo-8:hover { color: var( --indigo-8); }
-.hover-indigo-9:hover { color: var( --indigo-9); }
-.hover-indigo-10:hover { color: var( --indigo-10); }
-.hover-indigo-11:hover { color: var( --indigo-11); }
-.hover-violet-0:hover { color: var( --violet-0); }
-.hover-violet-1:hover { color: var( --violet-1); }
-.hover-violet-2:hover { color: var( --violet-2); }
-.hover-violet-3:hover { color: var( --violet-3); }
-.hover-violet-4:hover { color: var( --violet-4); }
-.hover-violet-5:hover { color: var( --violet-5); }
-.hover-violet-6:hover { color: var( --violet-6); }
-.hover-violet-7:hover { color: var( --violet-7); }
-.hover-violet-8:hover { color: var( --violet-8); }
-.hover-violet-9:hover { color: var( --violet-9); }
-.hover-violet-10:hover { color: var( --violet-10); }
-.hover-violet-11:hover { color: var( --violet-11); }
-.hover-magenta-0:hover { color: var( --magenta-0); }
-.hover-magenta-1:hover { color: var( --magenta-1); }
-.hover-magenta-2:hover { color: var( --magenta-2); }
-.hover-magenta-3:hover { color: var( --magenta-3); }
-.hover-magenta-4:hover { color: var( --magenta-4); }
-.hover-magenta-5:hover { color: var( --magenta-5); }
-.hover-magenta-6:hover { color: var( --magenta-6); }
-.hover-magenta-7:hover { color: var( --magenta-7); }
-.hover-magenta-8:hover { color: var( --magenta-8); }
-.hover-magenta-9:hover { color: var( --magenta-9); }
-.hover-magenta-10:hover { color: var( --magenta-10); }
-.hover-magenta-11:hover { color: var( --magenta-11); }
-.hover-red-0:hover { color: var( --red-0); }
-.hover-red-1:hover { color: var( --red-1); }
-.hover-red-2:hover { color: var( --red-2); }
-.hover-red-3:hover { color: var( --red-3); }
-.hover-red-4:hover { color: var( --red-4); }
-.hover-red-5:hover { color: var( --red-5); }
-.hover-red-6:hover { color: var( --red-6); }
-.hover-red-7:hover { color: var( --red-7); }
-.hover-red-8:hover { color: var( --red-8); }
-.hover-red-9:hover { color: var( --red-9); }
-.hover-red-10:hover { color: var( --red-10); }
-.hover-red-11:hover { color: var( --red-11); }
-.hover-red-orange-0:hover { color: var( --red-orange-0); }
-.hover-red-orange-1:hover { color: var( --red-orange-1); }
-.hover-red-orange-2:hover { color: var( --red-orange-2); }
-.hover-red-orange-3:hover { color: var( --red-orange-3); }
-.hover-red-orange-4:hover { color: var( --red-orange-4); }
-.hover-red-orange-5:hover { color: var( --red-orange-5); }
-.hover-red-orange-6:hover { color: var( --red-orange-6); }
-.hover-red-orange-7:hover { color: var( --red-orange-7); }
-.hover-red-orange-8:hover { color: var( --red-orange-8); }
-.hover-red-orange-9:hover { color: var( --red-orange-9); }
-.hover-red-orange-10:hover { color: var( --red-orange-10); }
-.hover-red-orange-11:hover { color: var( --red-orange-11); }
-.hover-orange-0:hover { color: var( --orange-0); }
-.hover-orange-1:hover { color: var( --orange-1); }
-.hover-orange-2:hover { color: var( --orange-2); }
-.hover-orange-3:hover { color: var( --orange-3); }
-.hover-orange-4:hover { color: var( --orange-4); }
-.hover-orange-5:hover { color: var( --orange-5); }
-.hover-orange-6:hover { color: var( --orange-6); }
-.hover-orange-7:hover { color: var( --orange-7); }
-.hover-orange-8:hover { color: var( --orange-8); }
-.hover-orange-9:hover { color: var( --orange-9); }
-.hover-orange-10:hover { color: var( --orange-10); }
-.hover-orange-11:hover { color: var( --orange-11); }
-.hover-gold-0:hover { color: var( --gold-0); }
-.hover-gold-1:hover { color: var( --gold-1); }
-.hover-gold-2:hover { color: var( --gold-2); }
-.hover-gold-3:hover { color: var( --gold-3); }
-.hover-gold-4:hover { color: var( --gold-4); }
-.hover-gold-5:hover { color: var( --gold-5); }
-.hover-gold-6:hover { color: var( --gold-6); }
-.hover-gold-7:hover { color: var( --gold-7); }
-.hover-gold-8:hover { color: var( --gold-8); }
-.hover-gold-9:hover { color: var( --gold-9); }
-.hover-gold-10:hover { color: var( --gold-10); }
-.hover-gold-11:hover { color: var( --gold-11); }
-.hover-yellow-0:hover { color: var( --yellow-0); }
-.hover-yellow-1:hover { color: var( --yellow-1); }
-.hover-yellow-2:hover { color: var( --yellow-2); }
-.hover-yellow-3:hover { color: var( --yellow-3); }
-.hover-yellow-4:hover { color: var( --yellow-4); }
-.hover-yellow-5:hover { color: var( --yellow-5); }
-.hover-yellow-6:hover { color: var( --yellow-6); }
-.hover-yellow-7:hover { color: var( --yellow-7); }
-.hover-yellow-8:hover { color: var( --yellow-8); }
-.hover-yellow-9:hover { color: var( --yellow-9); }
-.hover-yellow-10:hover { color: var( --yellow-10); }
-.hover-yellow-11:hover { color: var( --yellow-11); }
-.hover-green-0:hover { color: var( --green-0); }
-.hover-green-1:hover { color: var( --green-1); }
-.hover-green-2:hover { color: var( --green-2); }
-.hover-green-3:hover { color: var( --green-3); }
-.hover-green-4:hover { color: var( --green-4); }
-.hover-green-5:hover { color: var( --green-5); }
-.hover-green-6:hover { color: var( --green-6); }
-.hover-green-7:hover { color: var( --green-7); }
-.hover-green-8:hover { color: var( --green-8); }
-.hover-green-9:hover { color: var( --green-9); }
-.hover-green-10:hover { color: var( --green-10); }
-.hover-green-11:hover { color: var( --green-11); }
-.hover-teal-0:hover { color: var( --teal-0); }
-.hover-teal-1:hover { color: var( --teal-1); }
-.hover-teal-2:hover { color: var( --teal-2); }
-.hover-teal-3:hover { color: var( --teal-3); }
-.hover-teal-4:hover { color: var( --teal-4); }
-.hover-teal-5:hover { color: var( --teal-5); }
-.hover-teal-6:hover { color: var( --teal-6); }
-.hover-teal-7:hover { color: var( --teal-7); }
-.hover-teal-8:hover { color: var( --teal-8); }
-.hover-teal-9:hover { color: var( --teal-9); }
-.hover-teal-10:hover { color: var( --teal-10); }
-.hover-teal-11:hover { color: var( --teal-11); }
-.hover-cyan-0:hover { color: var( --cyan-0); }
-.hover-cyan-1:hover { color: var( --cyan-1); }
-.hover-cyan-2:hover { color: var( --cyan-2); }
-.hover-cyan-3:hover { color: var( --cyan-3); }
-.hover-cyan-4:hover { color: var( --cyan-4); }
-.hover-cyan-5:hover { color: var( --cyan-5); }
-.hover-cyan-6:hover { color: var( --cyan-6); }
-.hover-cyan-7:hover { color: var( --cyan-7); }
-.hover-cyan-8:hover { color: var( --cyan-8); }
-.hover-cyan-9:hover { color: var( --cyan-9); }
-.hover-cyan-10:hover { color: var( --cyan-10); }
-.hover-cyan-11:hover { color: var( --cyan-11); }
+.hover-black:hover,
+.hover-black:focus { color: var(--black); }
+.hover-near-black:hover,
+.hover-near-black:focus { color: var(--near-black); }
+.hover-dark-gray:hover,
+.hover-dark-gray:focus { color: var(--dark-gray); }
+.hover-mid-gray:hover,
+.hover-mid-gray:focus { color: var(--mid-gray); }
+.hover-gray:hover,
+.hover-gray:focus { color: var(--gray); }
+.hover-silver:hover,
+.hover-silver:focus { color: var(--silver); }
+.hover-light-silver:hover,
+.hover-light-silver:focus { color: var(--light-silver); }
+.hover-moon-gray:hover,
+.hover-moon-gray:focus { color: var(--moon-gray); }
+.hover-light-gray:hover,
+.hover-light-gray:focus { color: var(--light-gray); }
+.hover-near-white:hover,
+.hover-near-white:focus { color: var(--near-white); }
+.hover-white:hover,
+.hover-white:focus { color: var(--white); }
-/* Background colors */
+.hover-black-90:hover,
+.hover-black-90:focus { color: var(--black-90); }
+.hover-black-80:hover,
+.hover-black-80:focus { color: var(--black-80); }
+.hover-black-70:hover,
+.hover-black-70:focus { color: var(--black-70); }
+.hover-black-60:hover,
+.hover-black-60:focus { color: var(--black-60); }
+.hover-black-50:hover,
+.hover-black-50:focus { color: var(--black-50); }
+.hover-black-40:hover,
+.hover-black-40:focus { color: var(--black-40); }
+.hover-black-30:hover,
+.hover-black-30:focus { color: var(--black-30); }
+.hover-black-20:hover,
+.hover-black-20:focus { color: var(--black-20); }
+.hover-black-10:hover,
+.hover-black-10:focus { color: var(--black-10); }
+.hover-white-90:hover,
+.hover-white-90:focus { color: var(--white-90); }
+.hover-white-80:hover,
+.hover-white-80:focus { color: var(--white-80); }
+.hover-white-70:hover,
+.hover-white-70:focus { color: var(--white-70); }
+.hover-white-60:hover,
+.hover-white-60:focus { color: var(--white-60); }
+.hover-white-50:hover,
+.hover-white-50:focus { color: var(--white-50); }
+.hover-white-40:hover,
+.hover-white-40:focus { color: var(--white-40); }
+.hover-white-30:hover,
+.hover-white-30:focus { color: var(--white-30); }
+.hover-white-20:hover,
+.hover-white-20:focus { color: var(--white-20); }
+.hover-white-10:hover,
+.hover-white-10:focus { color: var(--white-10); }
+.hover-inherit:hover,
+.hover-inherit:focus { color: inherit; }
-.hover-bg-overlay-tint-0:hover { background-color: var( --overlay-tint-0); }
-.hover-bg-overlay-tint-1:hover { background-color: var( --overlay-tint-1); }
-.hover-bg-overlay-tint-2:hover { background-color: var( --overlay-tint-2); }
-.hover-bg-overlay-tint-3:hover { background-color: var( --overlay-tint-3); }
-.hover-bg-overlay-tint-4:hover { background-color: var( --overlay-tint-4); }
-.hover-bg-overlay-tint-5:hover { background-color: var( --overlay-tint-5); }
-.hover-bg-overlay-tint-6:hover { background-color: var( --overlay-tint-6); }
-.hover-bg-overlay-tint-7:hover { background-color: var( --overlay-tint-7); }
-.hover-bg-overlay-tint-8:hover { background-color: var( --overlay-tint-8); }
-.hover-bg-overlay-tint-9:hover { background-color: var( --overlay-tint-9); }
-.hover-bg-overlay-tint-10:hover { background-color: var( --overlay-tint-10); }
-.hover-bg-overlay-tint-11:hover { background-color: var( --overlay-tint-11); }
-.hover-bg-overlay-shadow-0:hover { background-color: var( --overlay-shadow-0); }
-.hover-bg-overlay-shadow-1:hover { background-color: var( --overlay-shadow-1); }
-.hover-bg-overlay-shadow-2:hover { background-color: var( --overlay-shadow-2); }
-.hover-bg-overlay-shadow-3:hover { background-color: var( --overlay-shadow-3); }
-.hover-bg-overlay-shadow-4:hover { background-color: var( --overlay-shadow-4); }
-.hover-bg-overlay-shadow-5:hover { background-color: var( --overlay-shadow-5); }
-.hover-bg-overlay-shadow-6:hover { background-color: var( --overlay-shadow-6); }
-.hover-bg-overlay-shadow-7:hover { background-color: var( --overlay-shadow-7); }
-.hover-bg-overlay-shadow-8:hover { background-color: var( --overlay-shadow-8); }
-.hover-bg-overlay-shadow-9:hover { background-color: var( --overlay-shadow-9); }
-.hover-bg-overlay-shadow-10:hover { background-color: var( --overlay-shadow-10); }
-.hover-bg-overlay-shadow-11:hover { background-color: var( --overlay-shadow-11); }
-.hover-bg-gray-0:hover { background-color: var( --gray-0); }
-.hover-bg-gray-1:hover { background-color: var( --gray-1); }
-.hover-bg-gray-2:hover { background-color: var( --gray-2); }
-.hover-bg-gray-3:hover { background-color: var( --gray-3); }
-.hover-bg-gray-4:hover { background-color: var( --gray-4); }
-.hover-bg-gray-5:hover { background-color: var( --gray-5); }
-.hover-bg-gray-6:hover { background-color: var( --gray-6); }
-.hover-bg-gray-7:hover { background-color: var( --gray-7); }
-.hover-bg-gray-8:hover { background-color: var( --gray-8); }
-.hover-bg-gray-9:hover { background-color: var( --gray-9); }
-.hover-bg-gray-10:hover { background-color: var( --gray-10); }
-.hover-bg-gray-11:hover { background-color: var( --gray-11); }
-.hover-bg-slate-gray-0:hover { background-color: var( --slate-gray-0); }
-.hover-bg-slate-gray-1:hover { background-color: var( --slate-gray-1); }
-.hover-bg-slate-gray-2:hover { background-color: var( --slate-gray-2); }
-.hover-bg-slate-gray-3:hover { background-color: var( --slate-gray-3); }
-.hover-bg-slate-gray-4:hover { background-color: var( --slate-gray-4); }
-.hover-bg-slate-gray-5:hover { background-color: var( --slate-gray-5); }
-.hover-bg-slate-gray-6:hover { background-color: var( --slate-gray-6); }
-.hover-bg-slate-gray-7:hover { background-color: var( --slate-gray-7); }
-.hover-bg-slate-gray-8:hover { background-color: var( --slate-gray-8); }
-.hover-bg-slate-gray-9:hover { background-color: var( --slate-gray-9); }
-.hover-bg-slate-gray-10:hover { background-color: var( --slate-gray-10); }
-.hover-bg-slate-gray-11:hover { background-color: var( --slate-gray-11); }
-.hover-bg-blue-0:hover { background-color: var( --blue-0); }
-.hover-bg-blue-1:hover { background-color: var( --blue-1); }
-.hover-bg-blue-2:hover { background-color: var( --blue-2); }
-.hover-bg-blue-3:hover { background-color: var( --blue-3); }
-.hover-bg-blue-4:hover { background-color: var( --blue-4); }
-.hover-bg-blue-5:hover { background-color: var( --blue-5); }
-.hover-bg-blue-6:hover { background-color: var( --blue-6); }
-.hover-bg-blue-7:hover { background-color: var( --blue-7); }
-.hover-bg-blue-8:hover { background-color: var( --blue-8); }
-.hover-bg-blue-9:hover { background-color: var( --blue-9); }
-.hover-bg-blue-10:hover { background-color: var( --blue-10); }
-.hover-bg-blue-11:hover { background-color: var( --blue-11); }
-.hover-bg-indigo-0:hover { background-color: var( --indigo-0); }
-.hover-bg-indigo-1:hover { background-color: var( --indigo-1); }
-.hover-bg-indigo-2:hover { background-color: var( --indigo-2); }
-.hover-bg-indigo-3:hover { background-color: var( --indigo-3); }
-.hover-bg-indigo-4:hover { background-color: var( --indigo-4); }
-.hover-bg-indigo-5:hover { background-color: var( --indigo-5); }
-.hover-bg-indigo-6:hover { background-color: var( --indigo-6); }
-.hover-bg-indigo-7:hover { background-color: var( --indigo-7); }
-.hover-bg-indigo-8:hover { background-color: var( --indigo-8); }
-.hover-bg-indigo-9:hover { background-color: var( --indigo-9); }
-.hover-bg-indigo-10:hover { background-color: var( --indigo-10); }
-.hover-bg-indigo-11:hover { background-color: var( --indigo-11); }
-.hover-bg-violet-0:hover { background-color: var( --violet-0); }
-.hover-bg-violet-1:hover { background-color: var( --violet-1); }
-.hover-bg-violet-2:hover { background-color: var( --violet-2); }
-.hover-bg-violet-3:hover { background-color: var( --violet-3); }
-.hover-bg-violet-4:hover { background-color: var( --violet-4); }
-.hover-bg-violet-5:hover { background-color: var( --violet-5); }
-.hover-bg-violet-6:hover { background-color: var( --violet-6); }
-.hover-bg-violet-7:hover { background-color: var( --violet-7); }
-.hover-bg-violet-8:hover { background-color: var( --violet-8); }
-.hover-bg-violet-9:hover { background-color: var( --violet-9); }
-.hover-bg-violet-10:hover { background-color: var( --violet-10); }
-.hover-bg-violet-11:hover { background-color: var( --violet-11); }
-.hover-bg-magenta-0:hover { background-color: var( --magenta-0); }
-.hover-bg-magenta-1:hover { background-color: var( --magenta-1); }
-.hover-bg-magenta-2:hover { background-color: var( --magenta-2); }
-.hover-bg-magenta-3:hover { background-color: var( --magenta-3); }
-.hover-bg-magenta-4:hover { background-color: var( --magenta-4); }
-.hover-bg-magenta-5:hover { background-color: var( --magenta-5); }
-.hover-bg-magenta-6:hover { background-color: var( --magenta-6); }
-.hover-bg-magenta-7:hover { background-color: var( --magenta-7); }
-.hover-bg-magenta-8:hover { background-color: var( --magenta-8); }
-.hover-bg-magenta-9:hover { background-color: var( --magenta-9); }
-.hover-bg-magenta-10:hover { background-color: var( --magenta-10); }
-.hover-bg-magenta-11:hover { background-color: var( --magenta-11); }
-.hover-bg-red-0:hover { background-color: var( --red-0); }
-.hover-bg-red-1:hover { background-color: var( --red-1); }
-.hover-bg-red-2:hover { background-color: var( --red-2); }
-.hover-bg-red-3:hover { background-color: var( --red-3); }
-.hover-bg-red-4:hover { background-color: var( --red-4); }
-.hover-bg-red-5:hover { background-color: var( --red-5); }
-.hover-bg-red-6:hover { background-color: var( --red-6); }
-.hover-bg-red-7:hover { background-color: var( --red-7); }
-.hover-bg-red-8:hover { background-color: var( --red-8); }
-.hover-bg-red-9:hover { background-color: var( --red-9); }
-.hover-bg-red-10:hover { background-color: var( --red-10); }
-.hover-bg-red-11:hover { background-color: var( --red-11); }
-.hover-bg-red-orange-0:hover { background-color: var( --red-orange-0); }
-.hover-bg-red-orange-1:hover { background-color: var( --red-orange-1); }
-.hover-bg-red-orange-2:hover { background-color: var( --red-orange-2); }
-.hover-bg-red-orange-3:hover { background-color: var( --red-orange-3); }
-.hover-bg-red-orange-4:hover { background-color: var( --red-orange-4); }
-.hover-bg-red-orange-5:hover { background-color: var( --red-orange-5); }
-.hover-bg-red-orange-6:hover { background-color: var( --red-orange-6); }
-.hover-bg-red-orange-7:hover { background-color: var( --red-orange-7); }
-.hover-bg-red-orange-8:hover { background-color: var( --red-orange-8); }
-.hover-bg-red-orange-9:hover { background-color: var( --red-orange-9); }
-.hover-bg-red-orange-10:hover { background-color: var( --red-orange-10); }
-.hover-bg-red-orange-11:hover { background-color: var( --red-orange-11); }
-.hover-bg-orange-0:hover { background-color: var( --orange-0); }
-.hover-bg-orange-1:hover { background-color: var( --orange-1); }
-.hover-bg-orange-2:hover { background-color: var( --orange-2); }
-.hover-bg-orange-3:hover { background-color: var( --orange-3); }
-.hover-bg-orange-4:hover { background-color: var( --orange-4); }
-.hover-bg-orange-5:hover { background-color: var( --orange-5); }
-.hover-bg-orange-6:hover { background-color: var( --orange-6); }
-.hover-bg-orange-7:hover { background-color: var( --orange-7); }
-.hover-bg-orange-8:hover { background-color: var( --orange-8); }
-.hover-bg-orange-9:hover { background-color: var( --orange-9); }
-.hover-bg-orange-10:hover { background-color: var( --orange-10); }
-.hover-bg-orange-11:hover { background-color: var( --orange-11); }
-.hover-bg-gold-0:hover { background-color: var( --gold-0); }
-.hover-bg-gold-1:hover { background-color: var( --gold-1); }
-.hover-bg-gold-2:hover { background-color: var( --gold-2); }
-.hover-bg-gold-3:hover { background-color: var( --gold-3); }
-.hover-bg-gold-4:hover { background-color: var( --gold-4); }
-.hover-bg-gold-5:hover { background-color: var( --gold-5); }
-.hover-bg-gold-6:hover { background-color: var( --gold-6); }
-.hover-bg-gold-7:hover { background-color: var( --gold-7); }
-.hover-bg-gold-8:hover { background-color: var( --gold-8); }
-.hover-bg-gold-9:hover { background-color: var( --gold-9); }
-.hover-bg-gold-10:hover { background-color: var( --gold-10); }
-.hover-bg-gold-11:hover { background-color: var( --gold-11); }
-.hover-bg-yellow-0:hover { background-color: var( --yellow-0); }
-.hover-bg-yellow-1:hover { background-color: var( --yellow-1); }
-.hover-bg-yellow-2:hover { background-color: var( --yellow-2); }
-.hover-bg-yellow-3:hover { background-color: var( --yellow-3); }
-.hover-bg-yellow-4:hover { background-color: var( --yellow-4); }
-.hover-bg-yellow-5:hover { background-color: var( --yellow-5); }
-.hover-bg-yellow-6:hover { background-color: var( --yellow-6); }
-.hover-bg-yellow-7:hover { background-color: var( --yellow-7); }
-.hover-bg-yellow-8:hover { background-color: var( --yellow-8); }
-.hover-bg-yellow-9:hover { background-color: var( --yellow-9); }
-.hover-bg-yellow-10:hover { background-color: var( --yellow-10); }
-.hover-bg-yellow-11:hover { background-color: var( --yellow-11); }
-.hover-bg-green-0:hover { background-color: var( --green-0); }
-.hover-bg-green-1:hover { background-color: var( --green-1); }
-.hover-bg-green-2:hover { background-color: var( --green-2); }
-.hover-bg-green-3:hover { background-color: var( --green-3); }
-.hover-bg-green-4:hover { background-color: var( --green-4); }
-.hover-bg-green-5:hover { background-color: var( --green-5); }
-.hover-bg-green-6:hover { background-color: var( --green-6); }
-.hover-bg-green-7:hover { background-color: var( --green-7); }
-.hover-bg-green-8:hover { background-color: var( --green-8); }
-.hover-bg-green-9:hover { background-color: var( --green-9); }
-.hover-bg-green-10:hover { background-color: var( --green-10); }
-.hover-bg-green-11:hover { background-color: var( --green-11); }
-.hover-bg-teal-0:hover { background-color: var( --teal-0); }
-.hover-bg-teal-1:hover { background-color: var( --teal-1); }
-.hover-bg-teal-2:hover { background-color: var( --teal-2); }
-.hover-bg-teal-3:hover { background-color: var( --teal-3); }
-.hover-bg-teal-4:hover { background-color: var( --teal-4); }
-.hover-bg-teal-5:hover { background-color: var( --teal-5); }
-.hover-bg-teal-6:hover { background-color: var( --teal-6); }
-.hover-bg-teal-7:hover { background-color: var( --teal-7); }
-.hover-bg-teal-8:hover { background-color: var( --teal-8); }
-.hover-bg-teal-9:hover { background-color: var( --teal-9); }
-.hover-bg-teal-10:hover { background-color: var( --teal-10); }
-.hover-bg-teal-11:hover { background-color: var( --teal-11); }
-.hover-bg-cyan-0:hover { background-color: var( --cyan-0); }
-.hover-bg-cyan-1:hover { background-color: var( --cyan-1); }
-.hover-bg-cyan-2:hover { background-color: var( --cyan-2); }
-.hover-bg-cyan-3:hover { background-color: var( --cyan-3); }
-.hover-bg-cyan-4:hover { background-color: var( --cyan-4); }
-.hover-bg-cyan-5:hover { background-color: var( --cyan-5); }
-.hover-bg-cyan-6:hover { background-color: var( --cyan-6); }
-.hover-bg-cyan-7:hover { background-color: var( --cyan-7); }
-.hover-bg-cyan-8:hover { background-color: var( --cyan-8); }
-.hover-bg-cyan-9:hover { background-color: var( --cyan-9); }
-.hover-bg-cyan-10:hover { background-color: var( --cyan-10); }
-.hover-bg-cyan-11:hover { background-color: var( --cyan-11); }
+.hover-bg-black:hover,
+.hover-bg-black:focus { background-color: var(--black); }
+.hover-bg-near-black:hover,
+.hover-bg-near-black:focus { background-color: var(--near-black); }
+.hover-bg-dark-gray:hover,
+.hover-bg-dark-gray:focus { background-color: var(--dark-gray); }
+.hover-bg-mid-gray:hover,
+.hover-bg-mid-gray:focus { background-color: var(--mid-gray); }
+.hover-bg-gray:hover,
+.hover-bg-gray:focus { background-color: var(--gray); }
+.hover-bg-silver:hover,
+.hover-bg-silver:focus { background-color: var(--silver); }
+.hover-bg-light-silver:hover,
+.hover-bg-light-silver:focus { background-color: var(--light-silver); }
+.hover-bg-moon-gray:hover,
+.hover-bg-moon-gray:focus { background-color: var(--moon-gray); }
+.hover-bg-light-gray:hover,
+.hover-bg-light-gray:focus { background-color: var(--light-gray); }
+.hover-bg-near-white:hover,
+.hover-bg-near-white:focus { background-color: var(--near-white); }
+.hover-bg-white:hover,
+.hover-bg-white:focus { background-color: var(--white); }
+.hover-bg-transparent:hover,
+.hover-bg-transparent:focus { background-color: var(--transparent); }
-.focus-overlay-tint-0:focus { color: var( --overlay-tint-0); }
-.focus-overlay-tint-1:focus { color: var( --overlay-tint-1); }
-.focus-overlay-tint-2:focus { color: var( --overlay-tint-2); }
-.focus-overlay-tint-3:focus { color: var( --overlay-tint-3); }
-.focus-overlay-tint-4:focus { color: var( --overlay-tint-4); }
-.focus-overlay-tint-5:focus { color: var( --overlay-tint-5); }
-.focus-overlay-tint-6:focus { color: var( --overlay-tint-6); }
-.focus-overlay-tint-7:focus { color: var( --overlay-tint-7); }
-.focus-overlay-tint-8:focus { color: var( --overlay-tint-8); }
-.focus-overlay-tint-9:focus { color: var( --overlay-tint-9); }
-.focus-overlay-tint-10:focus { color: var( --overlay-tint-10); }
-.focus-overlay-tint-11:focus { color: var( --overlay-tint-11); }
-.focus-overlay-shadow-0:focus { color: var( --overlay-shadow-0); }
-.focus-overlay-shadow-1:focus { color: var( --overlay-shadow-1); }
-.focus-overlay-shadow-2:focus { color: var( --overlay-shadow-2); }
-.focus-overlay-shadow-3:focus { color: var( --overlay-shadow-3); }
-.focus-overlay-shadow-4:focus { color: var( --overlay-shadow-4); }
-.focus-overlay-shadow-5:focus { color: var( --overlay-shadow-5); }
-.focus-overlay-shadow-6:focus { color: var( --overlay-shadow-6); }
-.focus-overlay-shadow-7:focus { color: var( --overlay-shadow-7); }
-.focus-overlay-shadow-8:focus { color: var( --overlay-shadow-8); }
-.focus-overlay-shadow-9:focus { color: var( --overlay-shadow-9); }
-.focus-overlay-shadow-10:focus { color: var( --overlay-shadow-10); }
-.focus-overlay-shadow-11:focus { color: var( --overlay-shadow-11); }
-.focus-gray-0:focus { color: var( --gray-0); }
-.focus-gray-1:focus { color: var( --gray-1); }
-.focus-gray-2:focus { color: var( --gray-2); }
-.focus-gray-3:focus { color: var( --gray-3); }
-.focus-gray-4:focus { color: var( --gray-4); }
-.focus-gray-5:focus { color: var( --gray-5); }
-.focus-gray-6:focus { color: var( --gray-6); }
-.focus-gray-7:focus { color: var( --gray-7); }
-.focus-gray-8:focus { color: var( --gray-8); }
-.focus-gray-9:focus { color: var( --gray-9); }
-.focus-gray-10:focus { color: var( --gray-10); }
-.focus-gray-11:focus { color: var( --gray-11); }
-.focus-slate-gray-0:focus { color: var( --slate-gray-0); }
-.focus-slate-gray-1:focus { color: var( --slate-gray-1); }
-.focus-slate-gray-2:focus { color: var( --slate-gray-2); }
-.focus-slate-gray-3:focus { color: var( --slate-gray-3); }
-.focus-slate-gray-4:focus { color: var( --slate-gray-4); }
-.focus-slate-gray-5:focus { color: var( --slate-gray-5); }
-.focus-slate-gray-6:focus { color: var( --slate-gray-6); }
-.focus-slate-gray-7:focus { color: var( --slate-gray-7); }
-.focus-slate-gray-8:focus { color: var( --slate-gray-8); }
-.focus-slate-gray-9:focus { color: var( --slate-gray-9); }
-.focus-slate-gray-10:focus { color: var( --slate-gray-10); }
-.focus-slate-gray-11:focus { color: var( --slate-gray-11); }
-.focus-blue-0:focus { color: var( --blue-0); }
-.focus-blue-1:focus { color: var( --blue-1); }
-.focus-blue-2:focus { color: var( --blue-2); }
-.focus-blue-3:focus { color: var( --blue-3); }
-.focus-blue-4:focus { color: var( --blue-4); }
-.focus-blue-5:focus { color: var( --blue-5); }
-.focus-blue-6:focus { color: var( --blue-6); }
-.focus-blue-7:focus { color: var( --blue-7); }
-.focus-blue-8:focus { color: var( --blue-8); }
-.focus-blue-9:focus { color: var( --blue-9); }
-.focus-blue-10:focus { color: var( --blue-10); }
-.focus-blue-11:focus { color: var( --blue-11); }
-.focus-indigo-0:focus { color: var( --indigo-0); }
-.focus-indigo-1:focus { color: var( --indigo-1); }
-.focus-indigo-2:focus { color: var( --indigo-2); }
-.focus-indigo-3:focus { color: var( --indigo-3); }
-.focus-indigo-4:focus { color: var( --indigo-4); }
-.focus-indigo-5:focus { color: var( --indigo-5); }
-.focus-indigo-6:focus { color: var( --indigo-6); }
-.focus-indigo-7:focus { color: var( --indigo-7); }
-.focus-indigo-8:focus { color: var( --indigo-8); }
-.focus-indigo-9:focus { color: var( --indigo-9); }
-.focus-indigo-10:focus { color: var( --indigo-10); }
-.focus-indigo-11:focus { color: var( --indigo-11); }
-.focus-violet-0:focus { color: var( --violet-0); }
-.focus-violet-1:focus { color: var( --violet-1); }
-.focus-violet-2:focus { color: var( --violet-2); }
-.focus-violet-3:focus { color: var( --violet-3); }
-.focus-violet-4:focus { color: var( --violet-4); }
-.focus-violet-5:focus { color: var( --violet-5); }
-.focus-violet-6:focus { color: var( --violet-6); }
-.focus-violet-7:focus { color: var( --violet-7); }
-.focus-violet-8:focus { color: var( --violet-8); }
-.focus-violet-9:focus { color: var( --violet-9); }
-.focus-violet-10:focus { color: var( --violet-10); }
-.focus-violet-11:focus { color: var( --violet-11); }
-.focus-magenta-0:focus { color: var( --magenta-0); }
-.focus-magenta-1:focus { color: var( --magenta-1); }
-.focus-magenta-2:focus { color: var( --magenta-2); }
-.focus-magenta-3:focus { color: var( --magenta-3); }
-.focus-magenta-4:focus { color: var( --magenta-4); }
-.focus-magenta-5:focus { color: var( --magenta-5); }
-.focus-magenta-6:focus { color: var( --magenta-6); }
-.focus-magenta-7:focus { color: var( --magenta-7); }
-.focus-magenta-8:focus { color: var( --magenta-8); }
-.focus-magenta-9:focus { color: var( --magenta-9); }
-.focus-magenta-10:focus { color: var( --magenta-10); }
-.focus-magenta-11:focus { color: var( --magenta-11); }
-.focus-red-0:focus { color: var( --red-0); }
-.focus-red-1:focus { color: var( --red-1); }
-.focus-red-2:focus { color: var( --red-2); }
-.focus-red-3:focus { color: var( --red-3); }
-.focus-red-4:focus { color: var( --red-4); }
-.focus-red-5:focus { color: var( --red-5); }
-.focus-red-6:focus { color: var( --red-6); }
-.focus-red-7:focus { color: var( --red-7); }
-.focus-red-8:focus { color: var( --red-8); }
-.focus-red-9:focus { color: var( --red-9); }
-.focus-red-10:focus { color: var( --red-10); }
-.focus-red-11:focus { color: var( --red-11); }
-.focus-red-orange-0:focus { color: var( --red-orange-0); }
-.focus-red-orange-1:focus { color: var( --red-orange-1); }
-.focus-red-orange-2:focus { color: var( --red-orange-2); }
-.focus-red-orange-3:focus { color: var( --red-orange-3); }
-.focus-red-orange-4:focus { color: var( --red-orange-4); }
-.focus-red-orange-5:focus { color: var( --red-orange-5); }
-.focus-red-orange-6:focus { color: var( --red-orange-6); }
-.focus-red-orange-7:focus { color: var( --red-orange-7); }
-.focus-red-orange-8:focus { color: var( --red-orange-8); }
-.focus-red-orange-9:focus { color: var( --red-orange-9); }
-.focus-red-orange-10:focus { color: var( --red-orange-10); }
-.focus-red-orange-11:focus { color: var( --red-orange-11); }
-.focus-orange-0:focus { color: var( --orange-0); }
-.focus-orange-1:focus { color: var( --orange-1); }
-.focus-orange-2:focus { color: var( --orange-2); }
-.focus-orange-3:focus { color: var( --orange-3); }
-.focus-orange-4:focus { color: var( --orange-4); }
-.focus-orange-5:focus { color: var( --orange-5); }
-.focus-orange-6:focus { color: var( --orange-6); }
-.focus-orange-7:focus { color: var( --orange-7); }
-.focus-orange-8:focus { color: var( --orange-8); }
-.focus-orange-9:focus { color: var( --orange-9); }
-.focus-orange-10:focus { color: var( --orange-10); }
-.focus-orange-11:focus { color: var( --orange-11); }
-.focus-gold-0:focus { color: var( --gold-0); }
-.focus-gold-1:focus { color: var( --gold-1); }
-.focus-gold-2:focus { color: var( --gold-2); }
-.focus-gold-3:focus { color: var( --gold-3); }
-.focus-gold-4:focus { color: var( --gold-4); }
-.focus-gold-5:focus { color: var( --gold-5); }
-.focus-gold-6:focus { color: var( --gold-6); }
-.focus-gold-7:focus { color: var( --gold-7); }
-.focus-gold-8:focus { color: var( --gold-8); }
-.focus-gold-9:focus { color: var( --gold-9); }
-.focus-gold-10:focus { color: var( --gold-10); }
-.focus-gold-11:focus { color: var( --gold-11); }
-.focus-yellow-0:focus { color: var( --yellow-0); }
-.focus-yellow-1:focus { color: var( --yellow-1); }
-.focus-yellow-2:focus { color: var( --yellow-2); }
-.focus-yellow-3:focus { color: var( --yellow-3); }
-.focus-yellow-4:focus { color: var( --yellow-4); }
-.focus-yellow-5:focus { color: var( --yellow-5); }
-.focus-yellow-6:focus { color: var( --yellow-6); }
-.focus-yellow-7:focus { color: var( --yellow-7); }
-.focus-yellow-8:focus { color: var( --yellow-8); }
-.focus-yellow-9:focus { color: var( --yellow-9); }
-.focus-yellow-10:focus { color: var( --yellow-10); }
-.focus-yellow-11:focus { color: var( --yellow-11); }
-.focus-green-0:focus { color: var( --green-0); }
-.focus-green-1:focus { color: var( --green-1); }
-.focus-green-2:focus { color: var( --green-2); }
-.focus-green-3:focus { color: var( --green-3); }
-.focus-green-4:focus { color: var( --green-4); }
-.focus-green-5:focus { color: var( --green-5); }
-.focus-green-6:focus { color: var( --green-6); }
-.focus-green-7:focus { color: var( --green-7); }
-.focus-green-8:focus { color: var( --green-8); }
-.focus-green-9:focus { color: var( --green-9); }
-.focus-green-10:focus { color: var( --green-10); }
-.focus-green-11:focus { color: var( --green-11); }
-.focus-teal-0:focus { color: var( --teal-0); }
-.focus-teal-1:focus { color: var( --teal-1); }
-.focus-teal-2:focus { color: var( --teal-2); }
-.focus-teal-3:focus { color: var( --teal-3); }
-.focus-teal-4:focus { color: var( --teal-4); }
-.focus-teal-5:focus { color: var( --teal-5); }
-.focus-teal-6:focus { color: var( --teal-6); }
-.focus-teal-7:focus { color: var( --teal-7); }
-.focus-teal-8:focus { color: var( --teal-8); }
-.focus-teal-9:focus { color: var( --teal-9); }
-.focus-teal-10:focus { color: var( --teal-10); }
-.focus-teal-11:focus { color: var( --teal-11); }
-.focus-cyan-0:focus { color: var( --cyan-0); }
-.focus-cyan-1:focus { color: var( --cyan-1); }
-.focus-cyan-2:focus { color: var( --cyan-2); }
-.focus-cyan-3:focus { color: var( --cyan-3); }
-.focus-cyan-4:focus { color: var( --cyan-4); }
-.focus-cyan-5:focus { color: var( --cyan-5); }
-.focus-cyan-6:focus { color: var( --cyan-6); }
-.focus-cyan-7:focus { color: var( --cyan-7); }
-.focus-cyan-8:focus { color: var( --cyan-8); }
-.focus-cyan-9:focus { color: var( --cyan-9); }
-.focus-cyan-10:focus { color: var( --cyan-10); }
-.focus-cyan-11:focus { color: var( --cyan-11); }
+.hover-bg-black-90:hover,
+.hover-bg-black-90:focus { background-color: var(--black-90); }
+.hover-bg-black-80:hover,
+.hover-bg-black-80:focus { background-color: var(--black-80); }
+.hover-bg-black-70:hover,
+.hover-bg-black-70:focus { background-color: var(--black-70); }
+.hover-bg-black-60:hover,
+.hover-bg-black-60:focus { background-color: var(--black-60); }
+.hover-bg-black-50:hover,
+.hover-bg-black-50:focus { background-color: var(--black-50); }
+.hover-bg-black-40:hover,
+.hover-bg-black-40:focus { background-color: var(--black-40); }
+.hover-bg-black-30:hover,
+.hover-bg-black-30:focus { background-color: var(--black-30); }
+.hover-bg-black-20:hover,
+.hover-bg-black-20:focus { background-color: var(--black-20); }
+.hover-bg-black-10:hover,
+.hover-bg-black-10:focus { background-color: var(--black-10); }
+.hover-bg-white-90:hover,
+.hover-bg-white-90:focus { background-color: var(--white-90); }
+.hover-bg-white-80:hover,
+.hover-bg-white-80:focus { background-color: var(--white-80); }
+.hover-bg-white-70:hover,
+.hover-bg-white-70:focus { background-color: var(--white-70); }
+.hover-bg-white-60:hover,
+.hover-bg-white-60:focus { background-color: var(--white-60); }
+.hover-bg-white-50:hover,
+.hover-bg-white-50:focus { background-color: var(--white-50); }
+.hover-bg-white-40:hover,
+.hover-bg-white-40:focus { background-color: var(--white-40); }
+.hover-bg-white-30:hover,
+.hover-bg-white-30:focus { background-color: var(--white-30); }
+.hover-bg-white-20:hover,
+.hover-bg-white-20:focus { background-color: var(--white-20); }
+.hover-bg-white-10:hover,
+.hover-bg-white-10:focus { background-color: var(--white-10); }
-/* Background colors */
-
-.focus-bg-overlay-tint-0:focus { background-color: var( --overlay-tint-0); }
-.focus-bg-overlay-tint-1:focus { background-color: var( --overlay-tint-1); }
-.focus-bg-overlay-tint-2:focus { background-color: var( --overlay-tint-2); }
-.focus-bg-overlay-tint-3:focus { background-color: var( --overlay-tint-3); }
-.focus-bg-overlay-tint-4:focus { background-color: var( --overlay-tint-4); }
-.focus-bg-overlay-tint-5:focus { background-color: var( --overlay-tint-5); }
-.focus-bg-overlay-tint-6:focus { background-color: var( --overlay-tint-6); }
-.focus-bg-overlay-tint-7:focus { background-color: var( --overlay-tint-7); }
-.focus-bg-overlay-tint-8:focus { background-color: var( --overlay-tint-8); }
-.focus-bg-overlay-tint-9:focus { background-color: var( --overlay-tint-9); }
-.focus-bg-overlay-tint-10:focus { background-color: var( --overlay-tint-10); }
-.focus-bg-overlay-tint-11:focus { background-color: var( --overlay-tint-11); }
-.focus-bg-overlay-shadow-0:focus { background-color: var( --overlay-shadow-0); }
-.focus-bg-overlay-shadow-1:focus { background-color: var( --overlay-shadow-1); }
-.focus-bg-overlay-shadow-2:focus { background-color: var( --overlay-shadow-2); }
-.focus-bg-overlay-shadow-3:focus { background-color: var( --overlay-shadow-3); }
-.focus-bg-overlay-shadow-4:focus { background-color: var( --overlay-shadow-4); }
-.focus-bg-overlay-shadow-5:focus { background-color: var( --overlay-shadow-5); }
-.focus-bg-overlay-shadow-6:focus { background-color: var( --overlay-shadow-6); }
-.focus-bg-overlay-shadow-7:focus { background-color: var( --overlay-shadow-7); }
-.focus-bg-overlay-shadow-8:focus { background-color: var( --overlay-shadow-8); }
-.focus-bg-overlay-shadow-9:focus { background-color: var( --overlay-shadow-9); }
-.focus-bg-overlay-shadow-10:focus { background-color: var( --overlay-shadow-10); }
-.focus-bg-overlay-shadow-11:focus { background-color: var( --overlay-shadow-11); }
-.focus-bg-gray-0:focus { background-color: var( --gray-0); }
-.focus-bg-gray-1:focus { background-color: var( --gray-1); }
-.focus-bg-gray-2:focus { background-color: var( --gray-2); }
-.focus-bg-gray-3:focus { background-color: var( --gray-3); }
-.focus-bg-gray-4:focus { background-color: var( --gray-4); }
-.focus-bg-gray-5:focus { background-color: var( --gray-5); }
-.focus-bg-gray-6:focus { background-color: var( --gray-6); }
-.focus-bg-gray-7:focus { background-color: var( --gray-7); }
-.focus-bg-gray-8:focus { background-color: var( --gray-8); }
-.focus-bg-gray-9:focus { background-color: var( --gray-9); }
-.focus-bg-gray-10:focus { background-color: var( --gray-10); }
-.focus-bg-gray-11:focus { background-color: var( --gray-11); }
-.focus-bg-slate-gray-0:focus { background-color: var( --slate-gray-0); }
-.focus-bg-slate-gray-1:focus { background-color: var( --slate-gray-1); }
-.focus-bg-slate-gray-2:focus { background-color: var( --slate-gray-2); }
-.focus-bg-slate-gray-3:focus { background-color: var( --slate-gray-3); }
-.focus-bg-slate-gray-4:focus { background-color: var( --slate-gray-4); }
-.focus-bg-slate-gray-5:focus { background-color: var( --slate-gray-5); }
-.focus-bg-slate-gray-6:focus { background-color: var( --slate-gray-6); }
-.focus-bg-slate-gray-7:focus { background-color: var( --slate-gray-7); }
-.focus-bg-slate-gray-8:focus { background-color: var( --slate-gray-8); }
-.focus-bg-slate-gray-9:focus { background-color: var( --slate-gray-9); }
-.focus-bg-slate-gray-10:focus { background-color: var( --slate-gray-10); }
-.focus-bg-slate-gray-11:focus { background-color: var( --slate-gray-11); }
-.focus-bg-blue-0:focus { background-color: var( --blue-0); }
-.focus-bg-blue-1:focus { background-color: var( --blue-1); }
-.focus-bg-blue-2:focus { background-color: var( --blue-2); }
-.focus-bg-blue-3:focus { background-color: var( --blue-3); }
-.focus-bg-blue-4:focus { background-color: var( --blue-4); }
-.focus-bg-blue-5:focus { background-color: var( --blue-5); }
-.focus-bg-blue-6:focus { background-color: var( --blue-6); }
-.focus-bg-blue-7:focus { background-color: var( --blue-7); }
-.focus-bg-blue-8:focus { background-color: var( --blue-8); }
-.focus-bg-blue-9:focus { background-color: var( --blue-9); }
-.focus-bg-blue-10:focus { background-color: var( --blue-10); }
-.focus-bg-blue-11:focus { background-color: var( --blue-11); }
-.focus-bg-indigo-0:focus { background-color: var( --indigo-0); }
-.focus-bg-indigo-1:focus { background-color: var( --indigo-1); }
-.focus-bg-indigo-2:focus { background-color: var( --indigo-2); }
-.focus-bg-indigo-3:focus { background-color: var( --indigo-3); }
-.focus-bg-indigo-4:focus { background-color: var( --indigo-4); }
-.focus-bg-indigo-5:focus { background-color: var( --indigo-5); }
-.focus-bg-indigo-6:focus { background-color: var( --indigo-6); }
-.focus-bg-indigo-7:focus { background-color: var( --indigo-7); }
-.focus-bg-indigo-8:focus { background-color: var( --indigo-8); }
-.focus-bg-indigo-9:focus { background-color: var( --indigo-9); }
-.focus-bg-indigo-10:focus { background-color: var( --indigo-10); }
-.focus-bg-indigo-11:focus { background-color: var( --indigo-11); }
-.focus-bg-violet-0:focus { background-color: var( --violet-0); }
-.focus-bg-violet-1:focus { background-color: var( --violet-1); }
-.focus-bg-violet-2:focus { background-color: var( --violet-2); }
-.focus-bg-violet-3:focus { background-color: var( --violet-3); }
-.focus-bg-violet-4:focus { background-color: var( --violet-4); }
-.focus-bg-violet-5:focus { background-color: var( --violet-5); }
-.focus-bg-violet-6:focus { background-color: var( --violet-6); }
-.focus-bg-violet-7:focus { background-color: var( --violet-7); }
-.focus-bg-violet-8:focus { background-color: var( --violet-8); }
-.focus-bg-violet-9:focus { background-color: var( --violet-9); }
-.focus-bg-violet-10:focus { background-color: var( --violet-10); }
-.focus-bg-violet-11:focus { background-color: var( --violet-11); }
-.focus-bg-magenta-0:focus { background-color: var( --magenta-0); }
-.focus-bg-magenta-1:focus { background-color: var( --magenta-1); }
-.focus-bg-magenta-2:focus { background-color: var( --magenta-2); }
-.focus-bg-magenta-3:focus { background-color: var( --magenta-3); }
-.focus-bg-magenta-4:focus { background-color: var( --magenta-4); }
-.focus-bg-magenta-5:focus { background-color: var( --magenta-5); }
-.focus-bg-magenta-6:focus { background-color: var( --magenta-6); }
-.focus-bg-magenta-7:focus { background-color: var( --magenta-7); }
-.focus-bg-magenta-8:focus { background-color: var( --magenta-8); }
-.focus-bg-magenta-9:focus { background-color: var( --magenta-9); }
-.focus-bg-magenta-10:focus { background-color: var( --magenta-10); }
-.focus-bg-magenta-11:focus { background-color: var( --magenta-11); }
-.focus-bg-red-0:focus { background-color: var( --red-0); }
-.focus-bg-red-1:focus { background-color: var( --red-1); }
-.focus-bg-red-2:focus { background-color: var( --red-2); }
-.focus-bg-red-3:focus { background-color: var( --red-3); }
-.focus-bg-red-4:focus { background-color: var( --red-4); }
-.focus-bg-red-5:focus { background-color: var( --red-5); }
-.focus-bg-red-6:focus { background-color: var( --red-6); }
-.focus-bg-red-7:focus { background-color: var( --red-7); }
-.focus-bg-red-8:focus { background-color: var( --red-8); }
-.focus-bg-red-9:focus { background-color: var( --red-9); }
-.focus-bg-red-10:focus { background-color: var( --red-10); }
-.focus-bg-red-11:focus { background-color: var( --red-11); }
-.focus-bg-red-orange-0:focus { background-color: var( --red-orange-0); }
-.focus-bg-red-orange-1:focus { background-color: var( --red-orange-1); }
-.focus-bg-red-orange-2:focus { background-color: var( --red-orange-2); }
-.focus-bg-red-orange-3:focus { background-color: var( --red-orange-3); }
-.focus-bg-red-orange-4:focus { background-color: var( --red-orange-4); }
-.focus-bg-red-orange-5:focus { background-color: var( --red-orange-5); }
-.focus-bg-red-orange-6:focus { background-color: var( --red-orange-6); }
-.focus-bg-red-orange-7:focus { background-color: var( --red-orange-7); }
-.focus-bg-red-orange-8:focus { background-color: var( --red-orange-8); }
-.focus-bg-red-orange-9:focus { background-color: var( --red-orange-9); }
-.focus-bg-red-orange-10:focus { background-color: var( --red-orange-10); }
-.focus-bg-red-orange-11:focus { background-color: var( --red-orange-11); }
-.focus-bg-orange-0:focus { background-color: var( --orange-0); }
-.focus-bg-orange-1:focus { background-color: var( --orange-1); }
-.focus-bg-orange-2:focus { background-color: var( --orange-2); }
-.focus-bg-orange-3:focus { background-color: var( --orange-3); }
-.focus-bg-orange-4:focus { background-color: var( --orange-4); }
-.focus-bg-orange-5:focus { background-color: var( --orange-5); }
-.focus-bg-orange-6:focus { background-color: var( --orange-6); }
-.focus-bg-orange-7:focus { background-color: var( --orange-7); }
-.focus-bg-orange-8:focus { background-color: var( --orange-8); }
-.focus-bg-orange-9:focus { background-color: var( --orange-9); }
-.focus-bg-orange-10:focus { background-color: var( --orange-10); }
-.focus-bg-orange-11:focus { background-color: var( --orange-11); }
-.focus-bg-gold-0:focus { background-color: var( --gold-0); }
-.focus-bg-gold-1:focus { background-color: var( --gold-1); }
-.focus-bg-gold-2:focus { background-color: var( --gold-2); }
-.focus-bg-gold-3:focus { background-color: var( --gold-3); }
-.focus-bg-gold-4:focus { background-color: var( --gold-4); }
-.focus-bg-gold-5:focus { background-color: var( --gold-5); }
-.focus-bg-gold-6:focus { background-color: var( --gold-6); }
-.focus-bg-gold-7:focus { background-color: var( --gold-7); }
-.focus-bg-gold-8:focus { background-color: var( --gold-8); }
-.focus-bg-gold-9:focus { background-color: var( --gold-9); }
-.focus-bg-gold-10:focus { background-color: var( --gold-10); }
-.focus-bg-gold-11:focus { background-color: var( --gold-11); }
-.focus-bg-yellow-0:focus { background-color: var( --yellow-0); }
-.focus-bg-yellow-1:focus { background-color: var( --yellow-1); }
-.focus-bg-yellow-2:focus { background-color: var( --yellow-2); }
-.focus-bg-yellow-3:focus { background-color: var( --yellow-3); }
-.focus-bg-yellow-4:focus { background-color: var( --yellow-4); }
-.focus-bg-yellow-5:focus { background-color: var( --yellow-5); }
-.focus-bg-yellow-6:focus { background-color: var( --yellow-6); }
-.focus-bg-yellow-7:focus { background-color: var( --yellow-7); }
-.focus-bg-yellow-8:focus { background-color: var( --yellow-8); }
-.focus-bg-yellow-9:focus { background-color: var( --yellow-9); }
-.focus-bg-yellow-10:focus { background-color: var( --yellow-10); }
-.focus-bg-yellow-11:focus { background-color: var( --yellow-11); }
-.focus-bg-green-0:focus { background-color: var( --green-0); }
-.focus-bg-green-1:focus { background-color: var( --green-1); }
-.focus-bg-green-2:focus { background-color: var( --green-2); }
-.focus-bg-green-3:focus { background-color: var( --green-3); }
-.focus-bg-green-4:focus { background-color: var( --green-4); }
-.focus-bg-green-5:focus { background-color: var( --green-5); }
-.focus-bg-green-6:focus { background-color: var( --green-6); }
-.focus-bg-green-7:focus { background-color: var( --green-7); }
-.focus-bg-green-8:focus { background-color: var( --green-8); }
-.focus-bg-green-9:focus { background-color: var( --green-9); }
-.focus-bg-green-10:focus { background-color: var( --green-10); }
-.focus-bg-green-11:focus { background-color: var( --green-11); }
-.focus-bg-teal-0:focus { background-color: var( --teal-0); }
-.focus-bg-teal-1:focus { background-color: var( --teal-1); }
-.focus-bg-teal-2:focus { background-color: var( --teal-2); }
-.focus-bg-teal-3:focus { background-color: var( --teal-3); }
-.focus-bg-teal-4:focus { background-color: var( --teal-4); }
-.focus-bg-teal-5:focus { background-color: var( --teal-5); }
-.focus-bg-teal-6:focus { background-color: var( --teal-6); }
-.focus-bg-teal-7:focus { background-color: var( --teal-7); }
-.focus-bg-teal-8:focus { background-color: var( --teal-8); }
-.focus-bg-teal-9:focus { background-color: var( --teal-9); }
-.focus-bg-teal-10:focus { background-color: var( --teal-10); }
-.focus-bg-teal-11:focus { background-color: var( --teal-11); }
-.focus-bg-cyan-0:focus { background-color: var( --cyan-0); }
-.focus-bg-cyan-1:focus { background-color: var( --cyan-1); }
-.focus-bg-cyan-2:focus { background-color: var( --cyan-2); }
-.focus-bg-cyan-3:focus { background-color: var( --cyan-3); }
-.focus-bg-cyan-4:focus { background-color: var( --cyan-4); }
-.focus-bg-cyan-5:focus { background-color: var( --cyan-5); }
-.focus-bg-cyan-6:focus { background-color: var( --cyan-6); }
-.focus-bg-cyan-7:focus { background-color: var( --cyan-7); }
-.focus-bg-cyan-8:focus { background-color: var( --cyan-8); }
-.focus-bg-cyan-9:focus { background-color: var( --cyan-9); }
-.focus-bg-cyan-10:focus { background-color: var( --cyan-10); }
-.focus-bg-cyan-11:focus { background-color: var( --cyan-11); }
+.hover-dark-red:hover,
+.hover-dark-red:focus { color: var(--dark-red); }
+.hover-red:hover,
+.hover-red:focus { color: var(--red); }
+.hover-light-red:hover,
+.hover-light-red:focus { color: var(--light-red); }
+.hover-orange:hover,
+.hover-orange:focus { color: var(--orange); }
+.hover-gold:hover,
+.hover-gold:focus { color: var(--gold); }
+.hover-yellow:hover,
+.hover-yellow:focus { color: var(--yellow); }
+.hover-light-yellow:hover,
+.hover-light-yellow:focus { color: var(--light-yellow); }
+.hover-purple:hover,
+.hover-purple:focus { color: var(--purple); }
+.hover-light-purple:hover,
+.hover-light-purple:focus { color: var(--light-purple); }
+.hover-dark-pink:hover,
+.hover-dark-pink:focus { color: var(--dark-pink); }
+.hover-hot-pink:hover,
+.hover-hot-pink:focus { color: var(--hot-pink); }
+.hover-pink:hover,
+.hover-pink:focus { color: var(--pink); }
+.hover-light-pink:hover,
+.hover-light-pink:focus { color: var(--light-pink); }
+.hover-dark-green:hover,
+.hover-dark-green:focus { color: var(--dark-green); }
+.hover-green:hover,
+.hover-green:focus { color: var(--green); }
+.hover-light-green:hover,
+.hover-light-green:focus { color: var(--light-green); }
+.hover-navy:hover,
+.hover-navy:focus { color: var(--navy); }
+.hover-dark-blue:hover,
+.hover-dark-blue:focus { color: var(--dark-blue); }
+.hover-blue:hover,
+.hover-blue:focus { color: var(--blue); }
+.hover-light-blue:hover,
+.hover-light-blue:focus { color: var(--light-blue); }
+.hover-lightest-blue:hover,
+.hover-lightest-blue:focus { color: var(--lightest-blue); }
+.hover-washed-blue:hover,
+.hover-washed-blue:focus { color: var(--washed-blue); }
+.hover-washed-green:hover,
+.hover-washed-green:focus { color: var(--washed-green); }
+.hover-washed-yellow:hover,
+.hover-washed-yellow:focus { color: var(--washed-yellow); }
+.hover-washed-red:hover,
+.hover-washed-red:focus { color: var(--washed-red); }
+.hover-bg-dark-red:hover,
+.hover-bg-dark-red:focus { background-color: var(--dark-red); }
+.hover-bg-red:hover,
+.hover-bg-red:focus { background-color: var(--red); }
+.hover-bg-light-red:hover,
+.hover-bg-light-red:focus { background-color: var(--light-red); }
+.hover-bg-orange:hover,
+.hover-bg-orange:focus { background-color: var(--orange); }
+.hover-bg-gold:hover,
+.hover-bg-gold:focus { background-color: var(--gold); }
+.hover-bg-yellow:hover,
+.hover-bg-yellow:focus { background-color: var(--yellow); }
+.hover-bg-light-yellow:hover,
+.hover-bg-light-yellow:focus { background-color: var(--light-yellow); }
+.hover-bg-purple:hover,
+.hover-bg-purple:focus { background-color: var(--purple); }
+.hover-bg-light-purple:hover,
+.hover-bg-light-purple:focus { background-color: var(--light-purple); }
+.hover-bg-dark-pink:hover,
+.hover-bg-dark-pink:focus { background-color: var(--dark-pink); }
+.hover-bg-hot-pink:hover,
+.hover-bg-hot-pink:focus { background-color: var(--hot-pink); }
+.hover-bg-pink:hover,
+.hover-bg-pink:focus { background-color: var(--pink); }
+.hover-bg-light-pink:hover,
+.hover-bg-light-pink:focus { background-color: var(--light-pink); }
+.hover-bg-dark-green:hover,
+.hover-bg-dark-green:focus { background-color: var(--dark-green); }
+.hover-bg-green:hover,
+.hover-bg-green:focus { background-color: var(--green); }
+.hover-bg-light-green:hover,
+.hover-bg-light-green:focus { background-color: var(--light-green); }
+.hover-bg-navy:hover,
+.hover-bg-navy:focus { background-color: var(--navy); }
+.hover-bg-dark-blue:hover,
+.hover-bg-dark-blue:focus { background-color: var(--dark-blue); }
+.hover-bg-blue:hover,
+.hover-bg-blue:focus { background-color: var(--blue); }
+.hover-bg-light-blue:hover,
+.hover-bg-light-blue:focus { background-color: var(--light-blue); }
+.hover-bg-lightest-blue:hover,
+.hover-bg-lightest-blue:focus { background-color: var(--lightest-blue); }
+.hover-bg-washed-blue:hover,
+.hover-bg-washed-blue:focus { background-color: var(--washed-blue); }
+.hover-bg-washed-green:hover,
+.hover-bg-washed-green:focus { background-color: var(--washed-green); }
+.hover-bg-washed-yellow:hover,
+.hover-bg-washed-yellow:focus { background-color: var(--washed-yellow); }
+.hover-bg-washed-red:hover,
+.hover-bg-washed-red:focus { background-color: var(--washed-red); }
+.hover-bg-inherit:hover,
+.hover-bg-inherit:focus { background-color: inherit; }
diff --git a/src/_skins.css b/src/_skins.css
index 25eca4346..d445e71a9 100644
--- a/src/_skins.css
+++ b/src/_skins.css
@@ -1,4 +1,5 @@
/*
+
SKINS
Docs: http://tachyons.io/docs/themes/skins/
@@ -10,583 +11,126 @@
/* Text colors */
-.tint-0 { color: var(--tint-0); }
-.tint-1 { color: var(--tint-1); }
-.tint-2 { color: var(--tint-2); }
-.tint-3 { color: var(--tint-3); }
-.tint-4 { color: var(--tint-4); }
-.tint-5 { color: var(--tint-5); }
-.tint-6 { color: var(--tint-6); }
-.tint-7 { color: var(--tint-7); }
-.tint-8 { color: var(--tint-8); }
-.tint-9 { color: var(--tint-9); }
-.tint-10 { color: var(--tint-10); }
-.tint-11 { color: var(--tint-11); }
-.shadow-0 { color: var(--shadow-0); }
-.shadow-1 { color: var(--shadow-1); }
-.shadow-2 { color: var(--shadow-2); }
-.shadow-3 { color: var(--shadow-3); }
-.shadow-4 { color: var(--shadow-4); }
-.shadow-5 { color: var(--shadow-5); }
-.shadow-6 { color: var(--shadow-6); }
-.shadow-7 { color: var(--shadow-7); }
-.shadow-8 { color: var(--shadow-8); }
-.shadow-9 { color: var(--shadow-9); }
-.shadow-10 { color: var(--shadow-10); }
-.shadow-11 { color: var(--shadow-11); }
-.black,
-.gray-0 { color: var(--gray-0); }
-.gray-1 { color: var(--gray-1); }
-.gray-2 { color: var(--gray-2); }
-.gray-3 { color: var(--gray-3); }
-.gray-4 { color: var(--gray-4); }
-.gray-5 { color: var(--gray-5); }
-.gray-6 { color: var(--gray-6); }
-.gray-7 { color: var(--gray-7); }
-.gray-8 { color: var(--gray-8); }
-.gray-9 { color: var(--gray-9); }
-.gray-10 { color: var(--gray-10); }
-.white, .gray-11 { color: var(--gray-11); }
-.slate-gray-0 { color: var(--slate-gray-0); }
-.slate-gray-1 { color: var(--slate-gray-1); }
-.slate-gray-2 { color: var(--slate-gray-2); }
-.slate-gray-3 { color: var(--slate-gray-3); }
-.slate-gray-4 { color: var(--slate-gray-4); }
-.slate-gray-5 { color: var(--slate-gray-5); }
-.slate-gray-6 { color: var(--slate-gray-6); }
-.slate-gray-7 { color: var(--slate-gray-7); }
-.slate-gray-8 { color: var(--slate-gray-8); }
-.slate-gray-9 { color: var(--slate-gray-9); }
-.slate-gray-10 { color: var(--slate-gray-10); }
-.slate-gray-11 { color: var(--slate-gray-11); }
-.blue-0 { color: var(--blue-0); }
-.blue-1 { color: var(--blue-1); }
-.blue-2 { color: var(--blue-2); }
-.blue-3 { color: var(--blue-3); }
-.blue-4 { color: var(--blue-4); }
-.blue-5 { color: var(--blue-5); }
-.blue-6 { color: var(--blue-6); }
-.blue-7 { color: var(--blue-7); }
-.blue-8 { color: var(--blue-8); }
-.blue-9 { color: var(--blue-9); }
-.blue-10 { color: var(--blue-10); }
-.blue-11 { color: var(--blue-11); }
-.indigo-0 { color: var(--indigo-0); }
-.indigo-1 { color: var(--indigo-1); }
-.indigo-2 { color: var(--indigo-2); }
-.indigo-3 { color: var(--indigo-3); }
-.indigo-4 { color: var(--indigo-4); }
-.indigo-5 { color: var(--indigo-5); }
-.indigo-6 { color: var(--indigo-6); }
-.indigo-7 { color: var(--indigo-7); }
-.indigo-8 { color: var(--indigo-8); }
-.indigo-9 { color: var(--indigo-9); }
-.indigo-10 { color: var(--indigo-10); }
-.indigo-11 { color: var(--indigo-11); }
-.violet-0 { color: var(--violet-0); }
-.violet-1 { color: var(--violet-1); }
-.violet-2 { color: var(--violet-2); }
-.violet-3 { color: var(--violet-3); }
-.violet-4 { color: var(--violet-4); }
-.violet-5 { color: var(--violet-5); }
-.violet-6 { color: var(--violet-6); }
-.violet-7 { color: var(--violet-7); }
-.violet-8 { color: var(--violet-8); }
-.violet-9 { color: var(--violet-9); }
-.violet-10 { color: var(--violet-10); }
-.violet-11 { color: var(--violet-11); }
-.magenta-0 { color: var(--magenta-0); }
-.magenta-1 { color: var(--magenta-1); }
-.magenta-2 { color: var(--magenta-2); }
-.magenta-3 { color: var(--magenta-3); }
-.magenta-4 { color: var(--magenta-4); }
-.magenta-5 { color: var(--magenta-5); }
-.magenta-6 { color: var(--magenta-6); }
-.magenta-7 { color: var(--magenta-7); }
-.magenta-8 { color: var(--magenta-8); }
-.magenta-9 { color: var(--magenta-9); }
-.magenta-10 { color: var(--magenta-10); }
-.magenta-11 { color: var(--magenta-11); }
-.red-0 { color: var(--red-0); }
-.red-1 { color: var(--red-1); }
-.red-2 { color: var(--red-2); }
-.red-3 { color: var(--red-3); }
-.red-4 { color: var(--red-4); }
-.red-5 { color: var(--red-5); }
-.red-6 { color: var(--red-6); }
-.red-7 { color: var(--red-7); }
-.red-8 { color: var(--red-8); }
-.red-9 { color: var(--red-9); }
-.red-10 { color: var(--red-10); }
-.red-11 { color: var(--red-11); }
-.red-orange-0 { color: var(--red-orange-0); }
-.red-orange-1 { color: var(--red-orange-1); }
-.red-orange-2 { color: var(--red-orange-2); }
-.red-orange-3 { color: var(--red-orange-3); }
-.red-orange-4 { color: var(--red-orange-4); }
-.red-orange-5 { color: var(--red-orange-5); }
-.red-orange-6 { color: var(--red-orange-6); }
-.red-orange-7 { color: var(--red-orange-7); }
-.red-orange-8 { color: var(--red-orange-8); }
-.red-orange-9 { color: var(--red-orange-9); }
-.red-orange-10 { color: var(--red-orange-10); }
-.red-orange-11 { color: var(--red-orange-11); }
-.orange-0 { color: var(--orange-0); }
-.orange-1 { color: var(--orange-1); }
-.orange-2 { color: var(--orange-2); }
-.orange-3 { color: var(--orange-3); }
-.orange-4 { color: var(--orange-4); }
-.orange-5 { color: var(--orange-5); }
-.orange-6 { color: var(--orange-6); }
-.orange-7 { color: var(--orange-7); }
-.orange-8 { color: var(--orange-8); }
-.orange-9 { color: var(--orange-9); }
-.orange-10 { color: var(--orange-10); }
-.orange-11 { color: var(--orange-11); }
-.gold-0 { color: var(--gold-0); }
-.gold-1 { color: var(--gold-1); }
-.gold-2 { color: var(--gold-2); }
-.gold-3 { color: var(--gold-3); }
-.gold-4 { color: var(--gold-4); }
-.gold-5 { color: var(--gold-5); }
-.gold-6 { color: var(--gold-6); }
-.gold-7 { color: var(--gold-7); }
-.gold-8 { color: var(--gold-8); }
-.gold-9 { color: var(--gold-9); }
-.gold-10 { color: var(--gold-10); }
-.gold-11 { color: var(--gold-11); }
-.yellow-0 { color: var(--yellow-0); }
-.yellow-1 { color: var(--yellow-1); }
-.yellow-2 { color: var(--yellow-2); }
-.yellow-3 { color: var(--yellow-3); }
-.yellow-4 { color: var(--yellow-4); }
-.yellow-5 { color: var(--yellow-5); }
-.yellow-6 { color: var(--yellow-6); }
-.yellow-7 { color: var(--yellow-7); }
-.yellow-8 { color: var(--yellow-8); }
-.yellow-9 { color: var(--yellow-9); }
-.yellow-10 { color: var(--yellow-10); }
-.yellow-11 { color: var(--yellow-11); }
-.green-0 { color: var(--green-0); }
-.green-1 { color: var(--green-1); }
-.green-2 { color: var(--green-2); }
-.green-3 { color: var(--green-3); }
-.green-4 { color: var(--green-4); }
-.green-5 { color: var(--green-5); }
-.green-6 { color: var(--green-6); }
-.green-7 { color: var(--green-7); }
-.green-8 { color: var(--green-8); }
-.green-9 { color: var(--green-9); }
-.green-10 { color: var(--green-10); }
-.green-11 { color: var(--green-11); }
-.teal-0 { color: var(--teal-0); }
-.teal-1 { color: var(--teal-1); }
-.teal-2 { color: var(--teal-2); }
-.teal-3 { color: var(--teal-3); }
-.teal-4 { color: var(--teal-4); }
-.teal-5 { color: var(--teal-5); }
-.teal-6 { color: var(--teal-6); }
-.teal-7 { color: var(--teal-7); }
-.teal-8 { color: var(--teal-8); }
-.teal-9 { color: var(--teal-9); }
-.teal-10 { color: var(--teal-10); }
-.teal-11 { color: var(--teal-11); }
-.cyan-0 { color: var(--cyan-0); }
-.cyan-1 { color: var(--cyan-1); }
-.cyan-2 { color: var(--cyan-2); }
-.cyan-3 { color: var(--cyan-3); }
-.cyan-4 { color: var(--cyan-4); }
-.cyan-5 { color: var(--cyan-5); }
-.cyan-6 { color: var(--cyan-6); }
-.cyan-7 { color: var(--cyan-7); }
-.cyan-8 { color: var(--cyan-8); }
-.cyan-9 { color: var(--cyan-9); }
-.cyan-10 { color: var(--cyan-10); }
-.cyan-11 { color: var(--cyan-11); }
-
-/* Background colors */
-
-.bg-tint-0 { background-color: var(--tint-0); }
-.bg-tint-1 { background-color: var(--tint-1); }
-.bg-tint-2 { background-color: var(--tint-2); }
-.bg-tint-3 { background-color: var(--tint-3); }
-.bg-tint-4 { background-color: var(--tint-4); }
-.bg-tint-5 { background-color: var(--tint-5); }
-.bg-tint-6 { background-color: var(--tint-6); }
-.bg-tint-7 { background-color: var(--tint-7); }
-.bg-tint-8 { background-color: var(--tint-8); }
-.bg-tint-9 { background-color: var(--tint-9); }
-.bg-tint-10 { background-color: var(--tint-10); }
-.bg-tint-11 { background-color: var(--tint-11); }
-.bg-shadow-0 { background-color: var(--shadow-0); }
-.bg-shadow-1 { background-color: var(--shadow-1); }
-.bg-shadow-2 { background-color: var(--shadow-2); }
-.bg-shadow-3 { background-color: var(--shadow-3); }
-.bg-shadow-4 { background-color: var(--shadow-4); }
-.bg-shadow-5 { background-color: var(--shadow-5); }
-.bg-shadow-6 { background-color: var(--shadow-6); }
-.bg-shadow-7 { background-color: var(--shadow-7); }
-.bg-shadow-8 { background-color: var(--shadow-8); }
-.bg-shadow-9 { background-color: var(--shadow-9); }
-.bg-shadow-10 { background-color: var(--shadow-10); }
-.bg-shadow-11 { background-color: var(--shadow-11); }
-.bg-black,
-.bg-gray-0 { background-color: var(--gray-0); }
-.bg-gray-1 { background-color: var(--gray-1); }
-.bg-gray-2 { background-color: var(--gray-2); }
-.bg-gray-3 { background-color: var(--gray-3); }
-.bg-gray-4 { background-color: var(--gray-4); }
-.bg-gray-5 { background-color: var(--gray-5); }
-.bg-gray-6 { background-color: var(--gray-6); }
-.bg-gray-7 { background-color: var(--gray-7); }
-.bg-gray-8 { background-color: var(--gray-8); }
-.bg-gray-9 { background-color: var(--gray-9); }
-.bg-gray-10 { background-color: var(--gray-10); }
-.bg-white,
-.bg-gray-11 { background-color: var(--gray-11); }
-.bg-slate-gray-0 { background-color: var(--slate-gray-0); }
-.bg-slate-gray-1 { background-color: var(--slate-gray-1); }
-.bg-slate-gray-2 { background-color: var(--slate-gray-2); }
-.bg-slate-gray-3 { background-color: var(--slate-gray-3); }
-.bg-slate-gray-4 { background-color: var(--slate-gray-4); }
-.bg-slate-gray-5 { background-color: var(--slate-gray-5); }
-.bg-slate-gray-6 { background-color: var(--slate-gray-6); }
-.bg-slate-gray-7 { background-color: var(--slate-gray-7); }
-.bg-slate-gray-8 { background-color: var(--slate-gray-8); }
-.bg-slate-gray-9 { background-color: var(--slate-gray-9); }
-.bg-slate-gray-10 { background-color: var(--slate-gray-10); }
-.bg-slate-gray-11 { background-color: var(--slate-gray-11); }
-.bg-blue-0 { background-color: var(--blue-0); }
-.bg-blue-1 { background-color: var(--blue-1); }
-.bg-blue-2 { background-color: var(--blue-2); }
-.bg-blue-3 { background-color: var(--blue-3); }
-.bg-blue-4 { background-color: var(--blue-4); }
-.bg-blue-5 { background-color: var(--blue-5); }
-.bg-blue-6 { background-color: var(--blue-6); }
-.bg-blue-7 { background-color: var(--blue-7); }
-.bg-blue-8 { background-color: var(--blue-8); }
-.bg-blue-9 { background-color: var(--blue-9); }
-.bg-blue-10 { background-color: var(--blue-10); }
-.bg-blue-11 { background-color: var(--blue-11); }
-.bg-indigo-0 { background-color: var(--indigo-0); }
-.bg-indigo-1 { background-color: var(--indigo-1); }
-.bg-indigo-2 { background-color: var(--indigo-2); }
-.bg-indigo-3 { background-color: var(--indigo-3); }
-.bg-indigo-4 { background-color: var(--indigo-4); }
-.bg-indigo-5 { background-color: var(--indigo-5); }
-.bg-indigo-6 { background-color: var(--indigo-6); }
-.bg-indigo-7 { background-color: var(--indigo-7); }
-.bg-indigo-8 { background-color: var(--indigo-8); }
-.bg-indigo-9 { background-color: var(--indigo-9); }
-.bg-indigo-10 { background-color: var(--indigo-10); }
-.bg-indigo-11 { background-color: var(--indigo-11); }
-.bg-violet-0 { background-color: var(--violet-0); }
-.bg-violet-1 { background-color: var(--violet-1); }
-.bg-violet-2 { background-color: var(--violet-2); }
-.bg-violet-3 { background-color: var(--violet-3); }
-.bg-violet-4 { background-color: var(--violet-4); }
-.bg-violet-5 { background-color: var(--violet-5); }
-.bg-violet-6 { background-color: var(--violet-6); }
-.bg-violet-7 { background-color: var(--violet-7); }
-.bg-violet-8 { background-color: var(--violet-8); }
-.bg-violet-9 { background-color: var(--violet-9); }
-.bg-violet-10 { background-color: var(--violet-10); }
-.bg-violet-11 { background-color: var(--violet-11); }
-.bg-magenta-0 { background-color: var(--magenta-0); }
-.bg-magenta-1 { background-color: var(--magenta-1); }
-.bg-magenta-2 { background-color: var(--magenta-2); }
-.bg-magenta-3 { background-color: var(--magenta-3); }
-.bg-magenta-4 { background-color: var(--magenta-4); }
-.bg-magenta-5 { background-color: var(--magenta-5); }
-.bg-magenta-6 { background-color: var(--magenta-6); }
-.bg-magenta-7 { background-color: var(--magenta-7); }
-.bg-magenta-8 { background-color: var(--magenta-8); }
-.bg-magenta-9 { background-color: var(--magenta-9); }
-.bg-magenta-10 { background-color: var(--magenta-10); }
-.bg-magenta-11 { background-color: var(--magenta-11); }
-.bg-red-0 { background-color: var(--red-0); }
-.bg-red-1 { background-color: var(--red-1); }
-.bg-red-2 { background-color: var(--red-2); }
-.bg-red-3 { background-color: var(--red-3); }
-.bg-red-4 { background-color: var(--red-4); }
-.bg-red-5 { background-color: var(--red-5); }
-.bg-red-6 { background-color: var(--red-6); }
-.bg-red-7 { background-color: var(--red-7); }
-.bg-red-8 { background-color: var(--red-8); }
-.bg-red-9 { background-color: var(--red-9); }
-.bg-red-10 { background-color: var(--red-10); }
-.bg-red-11 { background-color: var(--red-11); }
-.bg-red-orange-0 { background-color: var(--red-orange-0); }
-.bg-red-orange-1 { background-color: var(--red-orange-1); }
-.bg-red-orange-2 { background-color: var(--red-orange-2); }
-.bg-red-orange-3 { background-color: var(--red-orange-3); }
-.bg-red-orange-4 { background-color: var(--red-orange-4); }
-.bg-red-orange-5 { background-color: var(--red-orange-5); }
-.bg-red-orange-6 { background-color: var(--red-orange-6); }
-.bg-red-orange-7 { background-color: var(--red-orange-7); }
-.bg-red-orange-8 { background-color: var(--red-orange-8); }
-.bg-red-orange-9 { background-color: var(--red-orange-9); }
-.bg-red-orange-10 { background-color: var(--red-orange-10); }
-.bg-red-orange-11 { background-color: var(--red-orange-11); }
-.bg-orange-0 { background-color: var(--orange-0); }
-.bg-orange-1 { background-color: var(--orange-1); }
-.bg-orange-2 { background-color: var(--orange-2); }
-.bg-orange-3 { background-color: var(--orange-3); }
-.bg-orange-4 { background-color: var(--orange-4); }
-.bg-orange-5 { background-color: var(--orange-5); }
-.bg-orange-6 { background-color: var(--orange-6); }
-.bg-orange-7 { background-color: var(--orange-7); }
-.bg-orange-8 { background-color: var(--orange-8); }
-.bg-orange-9 { background-color: var(--orange-9); }
-.bg-orange-10 { background-color: var(--orange-10); }
-.bg-orange-11 { background-color: var(--orange-11); }
-.bg-gold-0 { background-color: var(--gold-0); }
-.bg-gold-1 { background-color: var(--gold-1); }
-.bg-gold-2 { background-color: var(--gold-2); }
-.bg-gold-3 { background-color: var(--gold-3); }
-.bg-gold-4 { background-color: var(--gold-4); }
-.bg-gold-5 { background-color: var(--gold-5); }
-.bg-gold-6 { background-color: var(--gold-6); }
-.bg-gold-7 { background-color: var(--gold-7); }
-.bg-gold-8 { background-color: var(--gold-8); }
-.bg-gold-9 { background-color: var(--gold-9); }
-.bg-gold-10 { background-color: var(--gold-10); }
-.bg-gold-11 { background-color: var(--gold-11); }
-.bg-yellow-0 { background-color: var(--yellow-0); }
-.bg-yellow-1 { background-color: var(--yellow-1); }
-.bg-yellow-2 { background-color: var(--yellow-2); }
-.bg-yellow-3 { background-color: var(--yellow-3); }
-.bg-yellow-4 { background-color: var(--yellow-4); }
-.bg-yellow-5 { background-color: var(--yellow-5); }
-.bg-yellow-6 { background-color: var(--yellow-6); }
-.bg-yellow-7 { background-color: var(--yellow-7); }
-.bg-yellow-8 { background-color: var(--yellow-8); }
-.bg-yellow-9 { background-color: var(--yellow-9); }
-.bg-yellow-10 { background-color: var(--yellow-10); }
-.bg-yellow-11 { background-color: var(--yellow-11); }
-.bg-green-0 { background-color: var(--green-0); }
-.bg-green-1 { background-color: var(--green-1); }
-.bg-green-2 { background-color: var(--green-2); }
-.bg-green-3 { background-color: var(--green-3); }
-.bg-green-4 { background-color: var(--green-4); }
-.bg-green-5 { background-color: var(--green-5); }
-.bg-green-6 { background-color: var(--green-6); }
-.bg-green-7 { background-color: var(--green-7); }
-.bg-green-8 { background-color: var(--green-8); }
-.bg-green-9 { background-color: var(--green-9); }
-.bg-green-10 { background-color: var(--green-10); }
-.bg-green-11 { background-color: var(--green-11); }
-.bg-teal-0 { background-color: var(--teal-0); }
-.bg-teal-1 { background-color: var(--teal-1); }
-.bg-teal-2 { background-color: var(--teal-2); }
-.bg-teal-3 { background-color: var(--teal-3); }
-.bg-teal-4 { background-color: var(--teal-4); }
-.bg-teal-5 { background-color: var(--teal-5); }
-.bg-teal-6 { background-color: var(--teal-6); }
-.bg-teal-7 { background-color: var(--teal-7); }
-.bg-teal-8 { background-color: var(--teal-8); }
-.bg-teal-9 { background-color: var(--teal-9); }
-.bg-teal-10 { background-color: var(--teal-10); }
-.bg-teal-11 { background-color: var(--teal-11); }
-.bg-cyan-0 { background-color: var(--cyan-0); }
-.bg-cyan-1 { background-color: var(--cyan-1); }
-.bg-cyan-2 { background-color: var(--cyan-2); }
-.bg-cyan-3 { background-color: var(--cyan-3); }
-.bg-cyan-4 { background-color: var(--cyan-4); }
-.bg-cyan-5 { background-color: var(--cyan-5); }
-.bg-cyan-6 { background-color: var(--cyan-6); }
-.bg-cyan-7 { background-color: var(--cyan-7); }
-.bg-cyan-8 { background-color: var(--cyan-8); }
-.bg-cyan-9 { background-color: var(--cyan-9); }
-.bg-cyan-10 { background-color: var(--cyan-10); }
-.bg-cyan-11 { background-color: var(--cyan-11); }
-
-.dark {
- background-color: black;
- color: white;
-}
-
-.light {
- background-color: white;
- color: black;
-}
-
-.blue {
- background-color: var(--blue-5);
- color: var(--gray-11);
-}
-
-.blue-dark {
- background-color: var(--blue-3);
- color: var(--blue-9);
-}
-
-.blue-light {
- color: var(--blue-3);
- background-color: var(--blue-10);
-}
-
-.indigo {
- background-color: var(--indigo-5);
- color: var(--gray-11);
-}
-
-.indigo-dark {
- background-color: var(--indigo-3);
- color: var(--indigo-9);
-}
-
-.indigo-light {
- color: var(--indigo-3);
- background-color: var(--indigo-10);
-}
-
-.violet {
- background-color: var(--violet-5);
- color: var(--gray-11);
-}
-
-.violet-dark {
- background-color: var(--violet-3);
- color: var(--violet-9);
-}
-
-.violet-light {
- color: var(--violet-3);
- background-color: var(--violet-10);
-}
-
-.magenta {
- background-color: var(--magenta-5);
- color: var(--gray-11);
-}
-
-.magenta-dark {
- background-color: var(--magenta-3);
- color: var(--magenta-9);
-}
-
-.magenta-light {
- color: var(--magenta-3);
- background-color: var(--magenta-10);
-}
-
-.red {
- background-color: var(--red-5);
- color: var(--gray-11);
-}
-
-.red-dark {
- background-color: var(--red-3);
- color: var(--red-9);
-}
+.black-90 { color: var(--black-90); }
+.black-80 { color: var(--black-80); }
+.black-70 { color: var(--black-70); }
+.black-60 { color: var(--black-60); }
+.black-50 { color: var(--black-50); }
+.black-40 { color: var(--black-40); }
+.black-30 { color: var(--black-30); }
+.black-20 { color: var(--black-20); }
+.black-10 { color: var(--black-10); }
+.black-05 { color: var(--black-05); }
+
+.white-90 { color: var(--white-90); }
+.white-80 { color: var(--white-80); }
+.white-70 { color: var(--white-70); }
+.white-60 { color: var(--white-60); }
+.white-50 { color: var(--white-50); }
+.white-40 { color: var(--white-40); }
+.white-30 { color: var(--white-30); }
+.white-20 { color: var(--white-20); }
+.white-10 { color: var(--white-10); }
+
+.black { color: var(--black); }
+.near-black { color: var(--near-black); }
+.dark-gray { color: var(--dark-gray); }
+.mid-gray { color: var(--mid-gray); }
+.gray { color: var(--gray); }
+.silver { color: var(--silver); }
+.light-silver { color: var(--light-silver); }
+.moon-gray { color: var(--moon-gray); }
+.light-gray { color: var(--light-gray); }
+.near-white { color: var(--near-white); }
+.white { color: var(--white); }
+
+.dark-red { color: var(--dark-red); }
+.red { color: var(--red); }
+.light-red { color: var(--light-red); }
+.orange { color: var(--orange); }
+.gold { color: var(--gold); }
+.yellow { color: var(--yellow); }
+.light-yellow { color: var(--light-yellow); }
+.purple { color: var(--purple); }
+.light-purple { color: var(--light-purple); }
+.dark-pink { color: var(--dark-pink); }
+.hot-pink { color: var(--hot-pink); }
+.pink { color: var(--pink); }
+.light-pink { color: var(--light-pink); }
+.dark-green { color: var(--dark-green); }
+.green { color: var(--green); }
+.light-green { color: var(--light-green); }
+.navy { color: var(--navy); }
+.dark-blue { color: var(--dark-blue); }
+.blue { color: var(--blue); }
+.light-blue { color: var(--light-blue); }
+.lightest-blue { color: var(--lightest-blue); }
+.washed-blue { color: var(--washed-blue); }
+.washed-green { color: var(--washed-green); }
+.washed-yellow { color: var(--washed-yellow); }
+.washed-red { color: var(--washed-red); }
+.color-inherit { color: inherit; }
-.red-light {
- color: var(--red-3);
- background-color: var(--red-10);
-}
-.red-orange {
- background-color: var(--red-orange-5);
- color: var(--gray-11);
-}
-.red-orange-dark {
- background-color: var(--red-orange-3);
- color: var(--red-orange-9);
-}
-
-.red-orange-light {
- color: var(--red-orange-3);
- background-color: var(--red-orange-10);
-}
-
-.orange {
- background-color: var(--orange-5);
- color: var(--gray-11);
-}
-
-.orange-dark {
- background-color: var(--orange-3);
- color: var(--orange-9);
-}
-
-.orange-light {
- color: var(--orange-3);
- background-color: var(--orange-10);
-}
-
-.gold {
- background-color: var(--gold-5);
- color: var(--gray-11);
-}
-
-.gold-dark {
- background-color: var(--gold-3);
- color: var(--gold-9);
-}
-
-.gold-light {
- color: var(--gold-3);
- background-color: var(--gold-10);
-}
-
-.yellow {
- background-color: var(--yellow-5);
- color: var(--gray-11);
-}
-
-.yellow-dark {
- background-color: var(--yellow-3);
- color: var(--yellow-9);
-}
-
-.yellow-light {
- color: var(--yellow-3);
- background-color: var(--yellow-10);
-}
-
-.green {
- background-color: var(--green-5);
- color: var(--gray-11);
-}
-
-.green-dark {
- background-color: var(--green-3);
- color: var(--green-9);
-}
-
-.green-light {
- color: var(--green-3);
- background-color: var(--green-10);
-}
-
-.teal {
- background-color: var(--teal-5);
- color: var(--gray-11);
-}
-
-.teal-dark {
- background-color: var(--teal-3);
- color: var(--teal-9);
-}
-
-.teal-light {
- color: var(--teal-3);
- background-color: var(--teal-10);
-}
-
-.cyan {
- background-color: var(--cyan-5);
- color: var(--gray-11);
-}
-
-.cyan-dark {
- background-color: var(--cyan-3);
- color: var(--cyan-9);
-}
+/* Background colors */
-.cyan-light {
- color: var(--cyan-3);
- background-color: var(--cyan-10);
-}
+.bg-black-90 { background-color: var(--black-90); }
+.bg-black-80 { background-color: var(--black-80); }
+.bg-black-70 { background-color: var(--black-70); }
+.bg-black-60 { background-color: var(--black-60); }
+.bg-black-50 { background-color: var(--black-50); }
+.bg-black-40 { background-color: var(--black-40); }
+.bg-black-30 { background-color: var(--black-30); }
+.bg-black-20 { background-color: var(--black-20); }
+.bg-black-10 { background-color: var(--black-10); }
+.bg-black-05 { background-color: var(--black-05); }
+.bg-white-90 { background-color: var(--white-90); }
+.bg-white-80 { background-color: var(--white-80); }
+.bg-white-70 { background-color: var(--white-70); }
+.bg-white-60 { background-color: var(--white-60); }
+.bg-white-50 { background-color: var(--white-50); }
+.bg-white-40 { background-color: var(--white-40); }
+.bg-white-30 { background-color: var(--white-30); }
+.bg-white-20 { background-color: var(--white-20); }
+.bg-white-10 { background-color: var(--white-10); }
+
+.bg-black { background-color: var(--black); }
+.bg-near-black { background-color: var(--near-black); }
+.bg-dark-gray { background-color: var(--dark-gray); }
+.bg-mid-gray { background-color: var(--mid-gray); }
+.bg-gray { background-color: var(--gray); }
+.bg-silver { background-color: var(--silver); }
+.bg-light-silver { background-color: var(--light-silver); }
+.bg-moon-gray { background-color: var(--moon-gray); }
+.bg-light-gray { background-color: var(--light-gray); }
+.bg-near-white { background-color: var(--near-white); }
+.bg-white { background-color: var(--white); }
+.bg-transparent { background-color: var(--transparent); }
+
+.bg-dark-red { background-color: var(--dark-red); }
+.bg-red { background-color: var(--red); }
+.bg-light-red { background-color: var(--light-red); }
+.bg-orange { background-color: var(--orange); }
+.bg-gold { background-color: var(--gold); }
+.bg-yellow { background-color: var(--yellow); }
+.bg-light-yellow { background-color: var(--light-yellow); }
+.bg-purple { background-color: var(--purple); }
+.bg-light-purple { background-color: var(--light-purple); }
+.bg-dark-pink { background-color: var(--dark-pink); }
+.bg-hot-pink { background-color: var(--hot-pink); }
+.bg-pink { background-color: var(--pink); }
+.bg-light-pink { background-color: var(--light-pink); }
+.bg-dark-green { background-color: var(--dark-green); }
+.bg-green { background-color: var(--green); }
+.bg-light-green { background-color: var(--light-green); }
+.bg-navy { background-color: var(--navy); }
+.bg-dark-blue { background-color: var(--dark-blue); }
+.bg-blue { background-color: var(--blue); }
+.bg-light-blue { background-color: var(--light-blue); }
+.bg-lightest-blue { background-color: var(--lightest-blue); }
+.bg-washed-blue { background-color: var(--washed-blue); }
+.bg-washed-green { background-color: var(--washed-green); }
+.bg-washed-yellow { background-color: var(--washed-yellow); }
+.bg-washed-red { background-color: var(--washed-red); }
+.bg-inherit { background-color: inherit; }
diff --git a/src/_spacing.css b/src/_spacing.css
index 6991ea4e9..805712620 100644
--- a/src/_spacing.css
+++ b/src/_spacing.css
@@ -1,3 +1,16 @@
+/* Variables */
+
+:root {
+ --spacing-none: 0;
+ --spacing-extra-small: .25rem;
+ --spacing-small: .5rem;
+ --spacing-medium: 1rem;
+ --spacing-large: 2rem;
+ --spacing-extra-large: 4rem;
+ --spacing-extra-extra-large: 8rem;
+ --spacing-extra-extra-extra-large: 16rem;
+}
+
/*
SPACING
Docs: http://tachyons.io/docs/layout/spacing/
@@ -10,8 +23,8 @@
Modifiers:
a = all
- y = vertical
- x = horizontal
+ h = horizontal
+ v = vertical
t = top
r = right
b = bottom
@@ -25,1118 +38,915 @@
5 = 5th step in spacing scale
6 = 6th step in spacing scale
7 = 7th step in spacing scale
- 8 = 8th step in spacing scale
- 9 = 9th step in spacing scale
Media Query Extensions:
- -s = small
+ -ns = not-small
-m = medium
-l = large
*/
-.p0 { padding: var(--spacing-0, 0); }
-.p1 { padding: var(--spacing-1, 2px); }
-.p2 { padding: var(--spacing-2, 4px); }
-.p3 { padding: var(--spacing-3, 8px); }
-.p4 { padding: var(--spacing-4, 16px); }
-.p5 { padding: var(--spacing-5, 32px); }
-.p6 { padding: var(--spacing-6, 64px); }
-.p7 { padding: var(--spacing-7, 128px); }
-.p8 { padding: var(--spacing-8, 256px); }
-.p9 { padding: var(--spacing-9, 512px); }
-
-.pl0 { padding-left: var(--spacing-0, 0); }
-.pl1 { padding-left: var(--spacing-1, 2px); }
-.pl2 { padding-left: var(--spacing-2, 4px); }
-.pl3 { padding-left: var(--spacing-3, 8px); }
-.pl4 { padding-left: var(--spacing-4, 16px); }
-.pl5 { padding-left: var(--spacing-5, 32px); }
-.pl6 { padding-left: var(--spacing-6, 64px); }
-.pl7 { padding-left: var(--spacing-7, 128px); }
-.pl8 { padding-left: var(--spacing-8, 256px); }
-.pl9 { padding-left: var(--spacing-9, 512px); }
-
-.pr0 { padding-right: var(--spacing-0, 0); }
-.pr1 { padding-right: var(--spacing-1, 2px); }
-.pr2 { padding-right: var(--spacing-2, 4px); }
-.pr3 { padding-right: var(--spacing-3, 8px); }
-.pr4 { padding-right: var(--spacing-4, 16px); }
-.pr5 { padding-right: var(--spacing-5, 32px); }
-.pr6 { padding-right: var(--spacing-6, 64px); }
-.pr7 { padding-right: var(--spacing-7, 128px); }
-.pr8 { padding-right: var(--spacing-8, 256px); }
-.pr9 { padding-right: var(--spacing-9, 512px); }
-
-.pb0 { padding-bottom: var(--spacing-0, 0); }
-.pb1 { padding-bottom: var(--spacing-1, 2px); }
-.pb2 { padding-bottom: var(--spacing-2, 4px); }
-.pb3 { padding-bottom: var(--spacing-3, 8px); }
-.pb4 { padding-bottom: var(--spacing-4, 16px); }
-.pb5 { padding-bottom: var(--spacing-5, 32px); }
-.pb6 { padding-bottom: var(--spacing-6, 64px); }
-.pb7 { padding-bottom: var(--spacing-7, 128px); }
-.pb8 { padding-bottom: var(--spacing-8, 256px); }
-.pb9 { padding-bottom: var(--spacing-9, 512px); }
-
-.pt0 { padding-top: var(--spacing-0, 0); }
-.pt1 { padding-top: var(--spacing-1, 2px); }
-.pt2 { padding-top: var(--spacing-2, 4px); }
-.pt3 { padding-top: var(--spacing-3, 8px); }
-.pt4 { padding-top: var(--spacing-4, 16px); }
-.pt5 { padding-top: var(--spacing-5, 32px); }
-.pt6 { padding-top: var(--spacing-6, 64px); }
-.pt7 { padding-top: var(--spacing-7, 128px); }
-.pt8 { padding-top: var(--spacing-8, 256px); }
-.pt9 { padding-top: var(--spacing-9, 512px); }
-
-.py0 {
- padding-top: var(--spacing-0, 0);
- padding-bottom: var(--spacing-0, 0);
-}
-.py1 {
- padding-top: var(--spacing-1, 2px);
- padding-bottom: var(--spacing-1, 2px);
-}
-.py2 {
- padding-top: var(--spacing-2, 4px);
- padding-bottom: var(--spacing-2, 4px);
-}
-.py3 {
- padding-top: var(--spacing-3, 8px);
- padding-bottom: var(--spacing-3, 8px);
-}
-.py4 {
- padding-top: var(--spacing-4, 16px);
- padding-bottom: var(--spacing-4, 16px);
-}
-.py5 {
- padding-top: var(--spacing-5, 32px);
- padding-bottom: var(--spacing-5, 32px);
-}
-.py6 {
- padding-top: var(--spacing-6, 64px);
- padding-bottom: var(--spacing-6, 64px);
-}
-.py7 {
- padding-top: var(--spacing-7, 128px);
- padding-bottom: var(--spacing-7, 128px);
-}
-.py8 {
- padding-top: var(--spacing-8, 256px);
- padding-bottom: var(--spacing-8, 256px);
-}
-.py9 {
- padding-top: var(--spacing-9, 512px);
- padding-bottom: var(--spacing-9, 512px);
-}
+.pa0 { padding: var(--spacing-none); }
+.pa1 { padding: var(--spacing-extra-small); }
+.pa2 { padding: var(--spacing-small); }
+.pa3 { padding: var(--spacing-medium); }
+.pa4 { padding: var(--spacing-large); }
+.pa5 { padding: var(--spacing-extra-large); }
+.pa6 { padding: var(--spacing-extra-extra-large); }
+.pa7 { padding: var(--spacing-extra-extra-extra-large); }
-.px0 {
- padding-left: var(--spacing-0, 0);
- padding-right: var(--spacing-0, 0);
-}
-.px1 {
- padding-left: var(--spacing-1, 4px);
- padding-right: var(--spacing-1, 4px);
-}
-.px2 {
- padding-left: var(--spacing-2, 4px);
- padding-right: var(--spacing-2, 4px);
-}
-.px3 {
- padding-left: var(--spacing-3, 8px);
- padding-right: var(--spacing-3, 8px);
-}
-.px4 {
- padding-left: var(--spacing-4, 16px);
- padding-right: var(--spacing-4, 16px);
-}
-.px5 {
- padding-left: var(--spacing-5, 32px);
- padding-right: var(--spacing-5, 32px);
-}
-.px6 {
- padding-left: var(--spacing-6, 64px);
- padding-right: var(--spacing-6, 64px);
-}
-.px7 {
- padding-left: var(--spacing-7, 128px);
- padding-right: var(--spacing-7, 128px);
-}
-.px8 {
- padding-left: var(--spacing-8, 256px);
- padding-right: var(--spacing-8, 256px);
-}
-.px9 {
- padding-left: var(--spacing-9, 512px);
- padding-right: var(--spacing-9, 512px);
-}
+.pl0 { padding-left: var(--spacing-none); }
+.pl1 { padding-left: var(--spacing-extra-small); }
+.pl2 { padding-left: var(--spacing-small); }
+.pl3 { padding-left: var(--spacing-medium); }
+.pl4 { padding-left: var(--spacing-large); }
+.pl5 { padding-left: var(--spacing-extra-large); }
+.pl6 { padding-left: var(--spacing-extra-extra-large); }
+.pl7 { padding-left: var(--spacing-extra-extra-extra-large); }
-.m0 { margin: var(--spacing-0, 0); }
-.m1 { margin: var(--spacing-1, 2px); }
-.m2 { margin: var(--spacing-2, 4px); }
-.m3 { margin: var(--spacing-3, 8px); }
-.m4 { margin: var(--spacing-4, 16px); }
-.m5 { margin: var(--spacing-5, 32px); }
-.m6 { margin: var(--spacing-6, 64px); }
-.m7 { margin: var(--spacing-7, 128px); }
-.m8 { margin: var(--spacing-8, 256px); }
-.m9 { margin: var(--spacing-9, 512px); }
-
-.ml0 { margin-left: var(--spacing-0, 0); }
-.ml1 { margin-left: var(--spacing-1, 2px); }
-.ml2 { margin-left: var(--spacing-2, 4px); }
-.ml3 { margin-left: var(--spacing-3, 8px); }
-.ml4 { margin-left: var(--spacing-4, 16px); }
-.ml5 { margin-left: var(--spacing-5, 32px); }
-.ml6 { margin-left: var(--spacing-6, 64px); }
-.ml7 { margin-left: var(--spacing-7, 128px); }
-.ml8 { margin-left: var(--spacing-8, 256px); }
-.ml9 { margin-left: var(--spacing-9, 512px); }
-
-.mr0 { margin-right: var(--spacing-0, 0); }
-.mr1 { margin-right: var(--spacing-1, 2px); }
-.mr2 { margin-right: var(--spacing-2, 4px); }
-.mr3 { margin-right: var(--spacing-3, 8px); }
-.mr4 { margin-right: var(--spacing-4, 16px); }
-.mr5 { margin-right: var(--spacing-5, 32px); }
-.mr6 { margin-right: var(--spacing-6, 64px); }
-.mr7 { margin-right: var(--spacing-7, 128px); }
-.mr8 { margin-right: var(--spacing-8, 256px); }
-.mr9 { margin-right: var(--spacing-9, 512px); }
-
-.mb0 { margin-bottom: var(--spacing-0, 0); }
-.mb1 { margin-bottom: var(--spacing-1, 4px); }
-.mb2 { margin-bottom: var(--spacing-2, 4px); }
-.mb3 { margin-bottom: var(--spacing-3, 8px); }
-.mb4 { margin-bottom: var(--spacing-4, 16px); }
-.mb5 { margin-bottom: var(--spacing-5, 32px); }
-.mb6 { margin-bottom: var(--spacing-6, 64px); }
-.mb7 { margin-bottom: var(--spacing-7, 128px); }
-.mb8 { margin-bottom: var(--spacing-8, 256px); }
-.mb9 { margin-bottom: var(--spacing-9, 512px); }
-
-.mt0 { margin-top: var(--spacing-0, 0); }
-.mt1 { margin-top: var(--spacing-1, 2px); }
-.mt2 { margin-top: var(--spacing-2, 4px); }
-.mt3 { margin-top: var(--spacing-3, 8px); }
-.mt4 { margin-top: var(--spacing-4, 16px); }
-.mt5 { margin-top: var(--spacing-5, 32px); }
-.mt6 { margin-top: var(--spacing-6, 64px); }
-.mt7 { margin-top: var(--spacing-7, 128px); }
-.mt8 { margin-top: var(--spacing-8, 256px); }
-.mt9 { margin-top: var(--spacing-9, 512px); }
-
-.my0 {
- margin-top: var(--spacing-0, 0);
- margin-bottom: var(--spacing-0, 0);
-}
-.my1 {
- margin-top: var(--spacing-1, 4px);
- margin-bottom: var(--spacing-1, 4px);
-}
-.my2 {
- margin-top: var(--spacing-2, 4px);
- margin-bottom: var(--spacing-2, 4px);
-}
-.my3 {
- margin-top: var(--spacing-3, 8px);
- margin-bottom: var(--spacing-3, 8px);
-}
-.my4 {
- margin-top: var(--spacing-4, 16px);
- margin-bottom: var(--spacing-4, 16px);
-}
-.my5 {
- margin-top: var(--spacing-5, 32px);
- margin-bottom: var(--spacing-5, 32px);
-}
-.my6 {
- margin-top: var(--spacing-6, 64px);
- margin-bottom: var(--spacing-6, 64px);
-}
-.my7 {
- margin-top: var(--spacing-7, 128px);
- margin-bottom: var(--spacing-7, 128px);
-}
-.my8 {
- margin-top: var(--spacing-8, 256px);
- margin-bottom: var(--spacing-8, 256px);
-}
-.my9 {
- margin-top: var(--spacing-9, 512px);
- margin-bottom: var(--spacing-9, 512px);
-}
-
-.mx0 {
- margin-left: var(--spacing-0, 0);
- margin-right: var(--spacing-0, 0);
-}
-.mx1 {
- margin-left: var(--spacing-1, 2px);
- margin-right: var(--spacing-1, 2px);
-}
-.mx2 {
- margin-left: var(--spacing-2, 4px);
- margin-right: var(--spacing-2, 4px);
-}
-.mx3 {
- margin-left: var(--spacing-3, 8px);
- margin-right: var(--spacing-3, 8px);
-}
-.mx4 {
- margin-left: var(--spacing-4, 16px);
- margin-right: var(--spacing-4, 16px);
-}
-.mx5 {
- margin-left: var(--spacing-5, 32px);
- margin-right: var(--spacing-5, 32px);
-}
-.mx6 {
- margin-left: var(--spacing-6, 64px);
- margin-right: var(--spacing-6, 64px);
-}
-.mx7 {
- margin-left: var(--spacing-7, 128px);
- margin-right: var(--spacing-7, 128px);
-}
-.mx8 {
- margin-left: var(--spacing-8, 256px);
- margin-right: var(--spacing-8, 256px);
-}
-.mx9 {
- margin-left: var(--spacing-9, 512px);
- margin-right: var(--spacing-9, 512px);
-}
-
-@container (min-width:30em) {
- .p0-s { padding: var(--spacing-0, 0); }
- .p1-s { padding: var(--spacing-1, 2px); }
- .p2-s { padding: var(--spacing-2, 4px); }
- .p3-s { padding: var(--spacing-3, 8px); }
- .p4-s { padding: var(--spacing-4, 16px); }
- .p5-s { padding: var(--spacing-5, 32px); }
- .p6-s { padding: var(--spacing-6, 64px); }
- .p7-s { padding: var(--spacing-7, 128px); }
- .p8-s { padding: var(--spacing-8, 256px); }
- .p9-s { padding: var(--spacing-9, 512px); }
-
- .pl0-s { padding-left: var(--spacing-0, 0); }
- .pl1-s { padding-left: var(--spacing-1, 2px); }
- .pl2-s { padding-left: var(--spacing-2, 4px); }
- .pl3-s { padding-left: var(--spacing-3, 8px); }
- .pl4-s { padding-left: var(--spacing-4, 16px); }
- .pl5-s { padding-left: var(--spacing-5, 32px); }
- .pl6-s { padding-left: var(--spacing-6, 64px); }
- .pl7-s { padding-left: var(--spacing-7, 128px); }
- .pl8-s { padding-left: var(--spacing-8, 256px); }
- .pl9-s { padding-left: var(--spacing-9, 512px); }
-
- .pr0-s { padding-right: var(--spacing-0, 0); }
- .pr1-s { padding-right: var(--spacing-1, 2px); }
- .pr2-s { padding-right: var(--spacing-2, 4px); }
- .pr3-s { padding-right: var(--spacing-3, 8px); }
- .pr4-s { padding-right: var(--spacing-4, 16px); }
- .pr5-s { padding-right: var(--spacing-5, 32px); }
- .pr6-s { padding-right: var(--spacing-6, 64px); }
- .pr7-s { padding-right: var(--spacing-7, 128px); }
- .pr8-s { padding-right: var(--spacing-8, 256px); }
- .pr9-s { padding-right: var(--spacing-9, 512px); }
-
- .pb0-s { padding-bottom: var(--spacing-0, 0); }
- .pb1-s { padding-bottom: var(--spacing-1, 2px); }
- .pb2-s { padding-bottom: var(--spacing-2, 4px); }
- .pb3-s { padding-bottom: var(--spacing-3, 8px); }
- .pb4-s { padding-bottom: var(--spacing-4, 16px); }
- .pb5-s { padding-bottom: var(--spacing-5, 32px); }
- .pb6-s { padding-bottom: var(--spacing-6, 64px); }
- .pb7-s { padding-bottom: var(--spacing-7, 128px); }
- .pb8-s { padding-bottom: var(--spacing-8, 256px); }
- .pb9-s { padding-bottom: var(--spacing-9, 512px); }
-
- .pt0-s { padding-top: var(--spacing-0, 0); }
- .pt1-s { padding-top: var(--spacing-1, 2px); }
- .pt2-s { padding-top: var(--spacing-2, 4px); }
- .pt3-s { padding-top: var(--spacing-3, 8px); }
- .pt4-s { padding-top: var(--spacing-4, 16px); }
- .pt5-s { padding-top: var(--spacing-5, 32px); }
- .pt6-s { padding-top: var(--spacing-6, 64px); }
- .pt7-s { padding-top: var(--spacing-7, 128px); }
- .pt8-s { padding-top: var(--spacing-8, 256px); }
- .pt9-s { padding-top: var(--spacing-9, 512px); }
-
- .py0-s {
- padding-top: var(--spacing-0, 0);
- padding-bottom: var(--spacing-0, 0);
- }
- .py1-s {
- padding-top: var(--spacing-1, 2px);
- padding-bottom: var(--spacing-1, 2px);
- }
- .py2-s {
- padding-top: var(--spacing-2, 4px);
- padding-bottom: var(--spacing-2, 4px);
- }
- .py3-s {
- padding-top: var(--spacing-3, 8px);
- padding-bottom: var(--spacing-3, 8px);
- }
- .py4-s {
- padding-top: var(--spacing-4, 16px);
- padding-bottom: var(--spacing-4, 16px);
- }
- .py5-s {
- padding-top: var(--spacing-5, 32px);
- padding-bottom: var(--spacing-5, 32px);
- }
- .py6-s {
- padding-top: var(--spacing-6, 64px);
- padding-bottom: var(--spacing-6, 64px);
- }
- .py7-s {
- padding-top: var(--spacing-7, 128px);
- padding-bottom: var(--spacing-7, 128px);
- }
- .py8-s {
- padding-top: var(--spacing-8, 256px);
- padding-bottom: var(--spacing-8, 256px);
- }
- .py9-s {
- padding-top: var(--spacing-9, 512px);
- padding-bottom: var(--spacing-9, 512px);
- }
-
- .px0-s {
- padding-left: var(--spacing-0, 0);
- padding-right: var(--spacing-0, 0);
- }
- .px1-s {
- padding-left: var(--spacing-1, 2px);
- padding-right: var(--spacing-1, 2px);
- }
- .px2-s {
- padding-left: var(--spacing-2, 4px);
- padding-right: var(--spacing-2, 4px);
- }
- .px3-s {
- padding-left: var(--spacing-3, 8px);
- padding-right: var(--spacing-3, 8px);
- }
- .px4-s {
- padding-left: var(--spacing-4, 16px);
- padding-right: var(--spacing-4, 16px);
- }
- .px5-s {
- padding-left: var(--spacing-5, 32px);
- padding-right: var(--spacing-5, 32px);
- }
- .px6-s {
- padding-left: var(--spacing-6, 64px);
- padding-right: var(--spacing-6, 64px);
- }
- .px7-s {
- padding-left: var(--spacing-7, 128px);
- padding-right: var(--spacing-7, 128px);
- }
- .px8-s {
- padding-left: var(--spacing-8, 256px);
- padding-right: var(--spacing-8, 256px);
- }
- .px9-s {
- padding-left: var(--spacing-9, 512px);
- padding-right: var(--spacing-9, 512px);
- }
-
- .m0-s { margin: var(--spacing-0, 0); }
- .m1-s { margin: var(--spacing-1, 2px); }
- .m2-s { margin: var(--spacing-2, 4px); }
- .m3-s { margin: var(--spacing-3, 8px); }
- .m4-s { margin: var(--spacing-4, 16px); }
- .m5-s { margin: var(--spacing-5, 32px); }
- .m6-s { margin: var(--spacing-6, 64px); }
- .m7-s { margin: var(--spacing-7, 128px); }
- .m8-s { margin: var(--spacing-8, 256px); }
- .m9-s { margin: var(--spacing-9, 512px); }
-
- .ml0-s { margin-left: var(--spacing-0, 0); }
- .ml1-s { margin-left: var(--spacing-1, 2px); }
- .ml2-s { margin-left: var(--spacing-2, 4px); }
- .ml3-s { margin-left: var(--spacing-3, 8px); }
- .ml4-s { margin-left: var(--spacing-4, 16px); }
- .ml5-s { margin-left: var(--spacing-5, 32px); }
- .ml6-s { margin-left: var(--spacing-6, 64px); }
- .ml7-s { margin-left: var(--spacing-7, 128px); }
- .ml8-s { margin-left: var(--spacing-8, 256px); }
- .ml9-s { margin-left: var(--spacing-9, 512px); }
-
- .mr0-s { margin-right: var(--spacing-0, 0); }
- .mr1-s { margin-right: var(--spacing-1, 2px); }
- .mr2-s { margin-right: var(--spacing-2, 4px); }
- .mr3-s { margin-right: var(--spacing-3, 8px); }
- .mr4-s { margin-right: var(--spacing-4, 16px); }
- .mr5-s { margin-right: var(--spacing-5, 32px); }
- .mr6-s { margin-right: var(--spacing-6, 64px); }
- .mr7-s { margin-right: var(--spacing-7, 128px); }
- .mr8-s { margin-right: var(--spacing-8, 256px); }
- .mr9-s { margin-right: var(--spacing-9, 512px); }
-
- .mb0-s { margin-bottom: var(--spacing-0, 0); }
- .mb1-s { margin-bottom: var(--spacing-1, 2px); }
- .mb2-s { margin-bottom: var(--spacing-2, 4px); }
- .mb3-s { margin-bottom: var(--spacing-3, 8px); }
- .mb4-s { margin-bottom: var(--spacing-4, 16px); }
- .mb5-s { margin-bottom: var(--spacing-5, 32px); }
- .mb6-s { margin-bottom: var(--spacing-6, 64px); }
- .mb7-s { margin-bottom: var(--spacing-7, 128px); }
- .mb8-s { margin-bottom: var(--spacing-8, 256px); }
- .mb9-s { margin-bottom: var(--spacing-9, 512px); }
-
- .mt0-s { margin-top: var(--spacing-0, 0); }
- .mt1-s { margin-top: var(--spacing-1, 2px); }
- .mt2-s { margin-top: var(--spacing-2, 4px); }
- .mt3-s { margin-top: var(--spacing-3, 8px); }
- .mt4-s { margin-top: var(--spacing-4, 16px); }
- .mt5-s { margin-top: var(--spacing-5, 32px); }
- .mt6-s { margin-top: var(--spacing-6, 64px); }
- .mt7-s { margin-top: var(--spacing-7, 128px); }
- .mt8-s { margin-top: var(--spacing-8, 256px); }
- .mt9-s { margin-top: var(--spacing-9, 512px); }
-
- .my0-s {
- margin-top: var(--spacing-0, 0);
- margin-bottom: var(--spacing-0, 0);
- }
- .my1-s {
- margin-top: var(--spacing-1, 2px);
- margin-bottom: var(--spacing-1, 2px);
- }
- .my2-s {
- margin-top: var(--spacing-2, 4px);
- margin-bottom: var(--spacing-2, 4px);
- }
- .my3-s {
- margin-top: var(--spacing-3, 8px);
- margin-bottom: var(--spacing-3, 8px);
- }
- .my4-s {
- margin-top: var(--spacing-4, 16px);
- margin-bottom: var(--spacing-4, 16px);
- }
- .my5-s {
- margin-top: var(--spacing-5, 32px);
- margin-bottom: var(--spacing-5, 32px);
- }
- .my6-s {
- margin-top: var(--spacing-6, 64px);
- margin-bottom: var(--spacing-6, 64px);
- }
- .my7-s {
- margin-top: var(--spacing-7, 128px);
- margin-bottom: var(--spacing-7, 128px);
- }
- .my8-s {
- margin-top: var(--spacing-8, 256px);
- margin-bottom: var(--spacing-8, 256px);
- }
- .my9-s {
- margin-top: var(--spacing-9, 512px);
- margin-bottom: var(--spacing-9, 512px);
- }
-
- .mx0-s {
- margin-left: var(--spacing-0, 0);
- margin-right: var(--spacing-0, 0);
- }
- .mx1-s {
- margin-left: var(--spacing-1, 4px);
- margin-right: var(--spacing-1, 4px);
- }
- .mx2-s {
- margin-left: var(--spacing-2, 4px);
- margin-right: var(--spacing-2, 4px);
- }
- .mx3-s {
- margin-left: var(--spacing-3, 8px);
- margin-right: var(--spacing-3, 8px);
- }
- .mx4-s {
- margin-left: var(--spacing-4, 16px);
- margin-right: var(--spacing-4, 16px);
- }
- .mx5-s {
- margin-left: var(--spacing-5, 32px);
- margin-right: var(--spacing-5, 32px);
- }
- .mx6-s {
- margin-left: var(--spacing-6, 64px);
- margin-right: var(--spacing-6, 64px);
- }
- .mx7-s {
- margin-left: var(--spacing-7, 128px);
- margin-right: var(--spacing-7, 128px);
- }
- .mx8-s {
- margin-left: var(--spacing-8, 256px);
- margin-right: var(--spacing-8, 256px);
- }
- .mx9-s {
- margin-left: var(--spacing-9, 512px);
- margin-right: var(--spacing-9, 512px);
- }
+.pr0 { padding-right: var(--spacing-none); }
+.pr1 { padding-right: var(--spacing-extra-small); }
+.pr2 { padding-right: var(--spacing-small); }
+.pr3 { padding-right: var(--spacing-medium); }
+.pr4 { padding-right: var(--spacing-large); }
+.pr5 { padding-right: var(--spacing-extra-large); }
+.pr6 { padding-right: var(--spacing-extra-extra-large); }
+.pr7 { padding-right: var(--spacing-extra-extra-extra-large); }
-}
+.pb0 { padding-bottom: var(--spacing-none); }
+.pb1 { padding-bottom: var(--spacing-extra-small); }
+.pb2 { padding-bottom: var(--spacing-small); }
+.pb3 { padding-bottom: var(--spacing-medium); }
+.pb4 { padding-bottom: var(--spacing-large); }
+.pb5 { padding-bottom: var(--spacing-extra-large); }
+.pb6 { padding-bottom: var(--spacing-extra-extra-large); }
+.pb7 { padding-bottom: var(--spacing-extra-extra-extra-large); }
-@container (min-width:48em) {
- .p0-m { padding: var(--spacing-0, 0); }
- .p1-m { padding: var(--spacing-1, 2px); }
- .p2-m { padding: var(--spacing-2, 4px); }
- .p3-m { padding: var(--spacing-3, 8px); }
- .p4-m { padding: var(--spacing-4, 16px); }
- .p5-m { padding: var(--spacing-5, 32px); }
- .p6-m { padding: var(--spacing-6, 64px); }
- .p7-m { padding: var(--spacing-7, 128px); }
- .p8-m { padding: var(--spacing-8, 256px); }
- .p9-m { padding: var(--spacing-9, 512px); }
-
- .pl0-m { padding-left: var(--spacing-0, 0); }
- .pl1-m { padding-left: var(--spacing-1, 2px); }
- .pl2-m { padding-left: var(--spacing-2, 4px); }
- .pl3-m { padding-left: var(--spacing-3, 8px); }
- .pl4-m { padding-left: var(--spacing-4, 16px); }
- .pl5-m { padding-left: var(--spacing-5, 32px); }
- .pl6-m { padding-left: var(--spacing-6, 64px); }
- .pl7-m { padding-left: var(--spacing-7, 128px); }
- .pl8-m { padding-left: var(--spacing-8, 256px); }
- .pl9-m { padding-left: var(--spacing-9, 512px); }
-
- .pr0-m { padding-right: var(--spacing-0, 0); }
- .pr1-m { padding-right: var(--spacing-1, 2px); }
- .pr2-m { padding-right: var(--spacing-2, 4px); }
- .pr3-m { padding-right: var(--spacing-3, 8px); }
- .pr4-m { padding-right: var(--spacing-4, 16px); }
- .pr5-m { padding-right: var(--spacing-5, 32px); }
- .pr6-m { padding-right: var(--spacing-6, 64px); }
- .pr7-m { padding-right: var(--spacing-7, 128px); }
- .pr8-m { padding-right: var(--spacing-8, 256px); }
- .pr9-m { padding-right: var(--spacing-9, 512px); }
-
- .pb0-m { padding-bottom: var(--spacing-0, 0); }
- .pb1-m { padding-bottom: var(--spacing-1, 2px); }
- .pb2-m { padding-bottom: var(--spacing-2, 4px); }
- .pb3-m { padding-bottom: var(--spacing-3, 8px); }
- .pb4-m { padding-bottom: var(--spacing-4, 16px); }
- .pb5-m { padding-bottom: var(--spacing-5, 32px); }
- .pb6-m { padding-bottom: var(--spacing-6, 64px); }
- .pb7-m { padding-bottom: var(--spacing-7, 128px); }
- .pb8-m { padding-bottom: var(--spacing-8, 256px); }
- .pb9-m { padding-bottom: var(--spacing-9, 512px); }
-
- .pt0-m { padding-top: var(--spacing-0, 0); }
- .pt1-m { padding-top: var(--spacing-1, 2px); }
- .pt2-m { padding-top: var(--spacing-2, 4px); }
- .pt3-m { padding-top: var(--spacing-3, 8px); }
- .pt4-m { padding-top: var(--spacing-4, 16px); }
- .pt5-m { padding-top: var(--spacing-5, 32px); }
- .pt6-m { padding-top: var(--spacing-6, 64px); }
- .pt7-m { padding-top: var(--spacing-7, 128px); }
- .pt8-m { padding-top: var(--spacing-8, 256px); }
- .pt9-m { padding-top: var(--spacing-9, 512px); }
-
- .py0-m {
- padding-top: var(--spacing-0, 0);
- padding-bottom: var(--spacing-0, 0);
- }
- .py1-m {
- padding-top: var(--spacing-1, 2px);
- padding-bottom: var(--spacing-1, 2px);
- }
- .py2-m {
- padding-top: var(--spacing-2, 4px);
- padding-bottom: var(--spacing-2, 4px);
- }
- .py3-m {
- padding-top: var(--spacing-3, 8px);
- padding-bottom: var(--spacing-3, 8px);
- }
- .py4-m {
- padding-top: var(--spacing-4, 16px);
- padding-bottom: var(--spacing-4, 16px);
- }
- .py5-m {
- padding-top: var(--spacing-5, 32px);
- padding-bottom: var(--spacing-5, 32px);
- }
- .py6-m {
- padding-top: var(--spacing-6, 64px);
- padding-bottom: var(--spacing-6, 64px);
- }
- .py7-m {
- padding-top: var(--spacing-7, 128px);
- padding-bottom: var(--spacing-7, 128px);
- }
- .py8-m {
- padding-top: var(--spacing-8, 256px);
- padding-bottom: var(--spacing-8, 256px);
- }
- .py9-m {
- padding-top: var(--spacing-9, 512px);
- padding-bottom: var(--spacing-9, 512px);
- }
-
- .px0-m {
- padding-left: var(--spacing-0, 0);
- padding-right: var(--spacing-0, 0);
- }
- .px1-m {
- padding-left: var(--spacing-1, 2px);
- padding-right: var(--spacing-1, 2px);
- }
- .px2-m {
- padding-left: var(--spacing-2, 4px);
- padding-right: var(--spacing-2, 4px);
- }
- .px3-m {
- padding-left: var(--spacing-3, 8px);
- padding-right: var(--spacing-3, 8px);
- }
- .px4-m {
- padding-left: var(--spacing-4, 16px);
- padding-right: var(--spacing-4, 16px);
- }
- .px5-m {
- padding-left: var(--spacing-5, 32px);
- padding-right: var(--spacing-5, 32px);
- }
- .px6-m {
- padding-left: var(--spacing-6, 64px);
- padding-right: var(--spacing-6, 64px);
- }
- .px7-m {
- padding-left: var(--spacing-7, 128px);
- padding-right: var(--spacing-7, 128px);
- }
- .px8-m {
- padding-left: var(--spacing-8, 256px);
- padding-right: var(--spacing-8, 256px);
- }
- .px9-m {
- padding-left: var(--spacing-9, 512px);
- padding-right: var(--spacing-9, 512px);
- }
-
- .m0-m { margin: var(--spacing-0, 0); }
- .m1-m { margin: var(--spacing-1, 2px); }
- .m2-m { margin: var(--spacing-2, 4px); }
- .m3-m { margin: var(--spacing-3, 8px); }
- .m4-m { margin: var(--spacing-4, 16px); }
- .m5-m { margin: var(--spacing-5, 32px); }
- .m6-m { margin: var(--spacing-6, 64px); }
- .m7-m { margin: var(--spacing-7, 128px); }
- .m8-m { margin: var(--spacing-8, 256px); }
- .m9-m { margin: var(--spacing-9, 512px); }
-
- .ml0-m { margin-left: var(--spacing-0, 0); }
- .ml1-m { margin-left: var(--spacing-1, 2px); }
- .ml2-m { margin-left: var(--spacing-2, 4px); }
- .ml3-m { margin-left: var(--spacing-3, 8px); }
- .ml4-m { margin-left: var(--spacing-4, 16px); }
- .ml5-m { margin-left: var(--spacing-5, 32px); }
- .ml6-m { margin-left: var(--spacing-6, 64px); }
- .ml7-m { margin-left: var(--spacing-7, 128px); }
- .ml8-m { margin-left: var(--spacing-8, 256px); }
- .ml9-m { margin-left: var(--spacing-9, 512px); }
-
- .mr0-m { margin-right: var(--spacing-0, 0); }
- .mr1-m { margin-right: var(--spacing-1, 4px); }
- .mr2-m { margin-right: var(--spacing-2, 4px); }
- .mr3-m { margin-right: var(--spacing-3, 8px); }
- .mr4-m { margin-right: var(--spacing-4, 16px); }
- .mr5-m { margin-right: var(--spacing-5, 32px); }
- .mr6-m { margin-right: var(--spacing-6, 64px); }
- .mr7-m { margin-right: var(--spacing-7, 128px); }
- .mr8-m { margin-right: var(--spacing-8, 256px); }
- .mr9-m { margin-right: var(--spacing-9, 512px); }
-
- .mb0-m { margin-bottom: var(--spacing-0, 0); }
- .mb1-m { margin-bottom: var(--spacing-1, 2px); }
- .mb2-m { margin-bottom: var(--spacing-2, 4px); }
- .mb3-m { margin-bottom: var(--spacing-3, 8px); }
- .mb4-m { margin-bottom: var(--spacing-4, 16px); }
- .mb5-m { margin-bottom: var(--spacing-5, 32px); }
- .mb6-m { margin-bottom: var(--spacing-6, 64px); }
- .mb7-m { margin-bottom: var(--spacing-7, 128px); }
- .mb8-m { margin-bottom: var(--spacing-8, 256px); }
- .mb9-m { margin-bottom: var(--spacing-9, 512px); }
-
- .mt0-m { margin-top: var(--spacing-0, 0); }
- .mt1-m { margin-top: var(--spacing-1, 2px); }
- .mt2-m { margin-top: var(--spacing-2, 4px); }
- .mt3-m { margin-top: var(--spacing-3, 8px); }
- .mt4-m { margin-top: var(--spacing-4, 16px); }
- .mt5-m { margin-top: var(--spacing-5, 32px); }
- .mt6-m { margin-top: var(--spacing-6, 64px); }
- .mt7-m { margin-top: var(--spacing-7, 128px); }
- .mt8-m { margin-top: var(--spacing-8, 256px); }
- .mt9-m { margin-top: var(--spacing-9, 512px); }
-
- .my0-m {
- margin-top: var(--spacing-0, 0);
- margin-bottom: var(--spacing-0, 0);
- }
- .my1-m {
- margin-top: var(--spacing-1, 2px);
- margin-bottom: var(--spacing-1, 2px);
- }
- .my2-m {
- margin-top: var(--spacing-2, 4px);
- margin-bottom: var(--spacing-2, 4px);
- }
- .my3-m {
- margin-top: var(--spacing-3, 8px);
- margin-bottom: var(--spacing-3, 8px);
- }
- .my4-m {
- margin-top: var(--spacing-4, 16px);
- margin-bottom: var(--spacing-4, 16px);
- }
- .my5-m {
- margin-top: var(--spacing-5, 32px);
- margin-bottom: var(--spacing-5, 32px);
- }
- .my6-m {
- margin-top: var(--spacing-6, 64px);
- margin-bottom: var(--spacing-6, 64px);
- }
- .my7-m {
- margin-top: var(--spacing-7, 128px);
- margin-bottom: var(--spacing-7, 128px);
- }
- .my8-m {
- margin-top: var(--spacing-8, 256px);
- margin-bottom: var(--spacing-8, 256px);
- }
- .my9-m {
- margin-top: var(--spacing-9, 512px);
- margin-bottom: var(--spacing-9, 512px);
- }
-
- .mx0-m {
- margin-left: var(--spacing-0, 0);
- margin-right: var(--spacing-0, 0);
- }
- .mx1-m {
- margin-left: var(--spacing-1, 2px);
- margin-right: var(--spacing-1, 2px);
- }
- .mx2-m {
- margin-left: var(--spacing-2, 4px);
- margin-right: var(--spacing-2, 4px);
- }
- .mx3-m {
- margin-left: var(--spacing-3, 8px);
- margin-right: var(--spacing-3, 8px);
- }
- .mx4-m {
- margin-left: var(--spacing-4, 16px);
- margin-right: var(--spacing-4, 16px);
- }
- .mx5-m {
- margin-left: var(--spacing-5, 32px);
- margin-right: var(--spacing-5, 32px);
- }
- .mx6-m {
- margin-left: var(--spacing-6, 64px);
- margin-right: var(--spacing-6, 64px);
- }
- .mx7-m {
- margin-left: var(--spacing-7, 128px);
- margin-right: var(--spacing-7, 128px);
- }
- .mx8-m {
- margin-left: var(--spacing-8, 256px);
- margin-right: var(--spacing-8, 256px);
- }
- .mx9-m {
- margin-left: var(--spacing-9, 512px);
- margin-right: var(--spacing-9, 512px);
- }
+.pt0 { padding-top: var(--spacing-none); }
+.pt1 { padding-top: var(--spacing-extra-small); }
+.pt2 { padding-top: var(--spacing-small); }
+.pt3 { padding-top: var(--spacing-medium); }
+.pt4 { padding-top: var(--spacing-large); }
+.pt5 { padding-top: var(--spacing-extra-large); }
+.pt6 { padding-top: var(--spacing-extra-extra-large); }
+.pt7 { padding-top: var(--spacing-extra-extra-extra-large); }
+
+.pv0 {
+ padding-top: var(--spacing-none);
+ padding-bottom: var(--spacing-none);
+}
+.pv1 {
+ padding-top: var(--spacing-extra-small);
+ padding-bottom: var(--spacing-extra-small);
+}
+.pv2 {
+ padding-top: var(--spacing-small);
+ padding-bottom: var(--spacing-small);
+}
+.pv3 {
+ padding-top: var(--spacing-medium);
+ padding-bottom: var(--spacing-medium);
+}
+.pv4 {
+ padding-top: var(--spacing-large);
+ padding-bottom: var(--spacing-large);
+}
+.pv5 {
+ padding-top: var(--spacing-extra-large);
+ padding-bottom: var(--spacing-extra-large);
+}
+.pv6 {
+ padding-top: var(--spacing-extra-extra-large);
+ padding-bottom: var(--spacing-extra-extra-large);
+}
+
+.pv7 {
+ padding-top: var(--spacing-extra-extra-extra-large);
+ padding-bottom: var(--spacing-extra-extra-extra-large);
+}
+
+.ph0 {
+ padding-left: var(--spacing-none);
+ padding-right: var(--spacing-none);
+}
+
+.ph1 {
+ padding-left: var(--spacing-extra-small);
+ padding-right: var(--spacing-extra-small);
+}
+
+.ph2 {
+ padding-left: var(--spacing-small);
+ padding-right: var(--spacing-small);
+}
+
+.ph3 {
+ padding-left: var(--spacing-medium);
+ padding-right: var(--spacing-medium);
+}
+
+.ph4 {
+ padding-left: var(--spacing-large);
+ padding-right: var(--spacing-large);
+}
+
+.ph5 {
+ padding-left: var(--spacing-extra-large);
+ padding-right: var(--spacing-extra-large);
+}
+
+.ph6 {
+ padding-left: var(--spacing-extra-extra-large);
+ padding-right: var(--spacing-extra-extra-large);
+}
+
+.ph7 {
+ padding-left: var(--spacing-extra-extra-extra-large);
+ padding-right: var(--spacing-extra-extra-extra-large);
+}
+
+.ma0 { margin: var(--spacing-none); }
+.ma1 { margin: var(--spacing-extra-small); }
+.ma2 { margin: var(--spacing-small); }
+.ma3 { margin: var(--spacing-medium); }
+.ma4 { margin: var(--spacing-large); }
+.ma5 { margin: var(--spacing-extra-large); }
+.ma6 { margin: var(--spacing-extra-extra-large); }
+.ma7 { margin: var(--spacing-extra-extra-extra-large); }
+
+.ml0 { margin-left: var(--spacing-none); }
+.ml1 { margin-left: var(--spacing-extra-small); }
+.ml2 { margin-left: var(--spacing-small); }
+.ml3 { margin-left: var(--spacing-medium); }
+.ml4 { margin-left: var(--spacing-large); }
+.ml5 { margin-left: var(--spacing-extra-large); }
+.ml6 { margin-left: var(--spacing-extra-extra-large); }
+.ml7 { margin-left: var(--spacing-extra-extra-extra-large); }
-}
+.mr0 { margin-right: var(--spacing-none); }
+.mr1 { margin-right: var(--spacing-extra-small); }
+.mr2 { margin-right: var(--spacing-small); }
+.mr3 { margin-right: var(--spacing-medium); }
+.mr4 { margin-right: var(--spacing-large); }
+.mr5 { margin-right: var(--spacing-extra-large); }
+.mr6 { margin-right: var(--spacing-extra-extra-large); }
+.mr7 { margin-right: var(--spacing-extra-extra-extra-large); }
-@container (min-width:64em) {
- .p0-l { padding: var(--spacing-0, 0); }
- .p1-l { padding: var(--spacing-1, 2px); }
- .p2-l { padding: var(--spacing-2, 4px); }
- .p3-l { padding: var(--spacing-3, 8px); }
- .p4-l { padding: var(--spacing-4, 16px); }
- .p5-l { padding: var(--spacing-5, 32px); }
- .p6-l { padding: var(--spacing-6, 64px); }
- .p7-l { padding: var(--spacing-7, 128px); }
- .p8-l { padding: var(--spacing-8, 256px); }
- .p9-l { padding: var(--spacing-9, 512px); }
-
- .pl0-l { padding-left: var(--spacing-0, 0); }
- .pl1-l { padding-left: var(--spacing-1, 2px); }
- .pl2-l { padding-left: var(--spacing-2, 4px); }
- .pl3-l { padding-left: var(--spacing-3, 8px); }
- .pl4-l { padding-left: var(--spacing-4, 16px); }
- .pl5-l { padding-left: var(--spacing-5, 32px); }
- .pl6-l { padding-left: var(--spacing-6, 64px); }
- .pl7-l { padding-left: var(--spacing-7, 128px); }
- .pl8-l { padding-left: var(--spacing-8, 256px); }
- .pl9-l { padding-left: var(--spacing-9, 512px); }
-
- .pr0-l { padding-right: var(--spacing-0, 0); }
- .pr1-l { padding-right: var(--spacing-1, 2px); }
- .pr2-l { padding-right: var(--spacing-2, 4px); }
- .pr3-l { padding-right: var(--spacing-3, 8px); }
- .pr4-l { padding-right: var(--spacing-4, 16px); }
- .pr5-l { padding-right: var(--spacing-5, 32px); }
- .pr6-l { padding-right: var(--spacing-6, 64px); }
- .pr7-l { padding-right: var(--spacing-7, 128px); }
- .pr8-l { padding-right: var(--spacing-8, 256px); }
- .pr9-l { padding-right: var(--spacing-9, 512px); }
-
- .pb0-l { padding-bottom: var(--spacing-0, 0); }
- .pb1-l { padding-bottom: var(--spacing-1, 2px); }
- .pb2-l { padding-bottom: var(--spacing-2, 4px); }
- .pb3-l { padding-bottom: var(--spacing-3, 8px); }
- .pb4-l { padding-bottom: var(--spacing-4, 16px); }
- .pb5-l { padding-bottom: var(--spacing-5, 32px); }
- .pb6-l { padding-bottom: var(--spacing-6, 64px); }
- .pb7-l { padding-bottom: var(--spacing-7, 128px); }
- .pb8-l { padding-bottom: var(--spacing-8, 256px); }
- .pb9-l { padding-bottom: var(--spacing-9, 512px); }
-
- .pt0-l { padding-top: var(--spacing-0, 0); }
- .pt1-l { padding-top: var(--spacing-1, 2px); }
- .pt2-l { padding-top: var(--spacing-2, 4px); }
- .pt3-l { padding-top: var(--spacing-3, 8px); }
- .pt4-l { padding-top: var(--spacing-4, 16px); }
- .pt5-l { padding-top: var(--spacing-5, 32px); }
- .pt6-l { padding-top: var(--spacing-6, 64px); }
- .pt7-l { padding-top: var(--spacing-7, 128px); }
- .pt8-l { padding-top: var(--spacing-8, 256px); }
- .pt9-l { padding-top: var(--spacing-9, 512px); }
-
- .py0-l {
- padding-top: var(--spacing-0, 0);
- padding-bottom: var(--spacing-0, 0);
- }
- .py1-l {
- padding-top: var(--spacing-1, 2px);
- padding-bottom: var(--spacing-1, 2px);
- }
- .py2-l {
- padding-top: var(--spacing-2, 4px);
- padding-bottom: var(--spacing-2, 4px);
- }
- .py3-l {
- padding-top: var(--spacing-3, 8px);
- padding-bottom: var(--spacing-3, 8px);
- }
- .py4-l {
- padding-top: var(--spacing-4, 16px);
- padding-bottom: var(--spacing-4, 16px);
- }
- .py5-l {
- padding-top: var(--spacing-5, 32px);
- padding-bottom: var(--spacing-5, 32px);
- }
- .py6-l {
- padding-top: var(--spacing-6, 64px);
- padding-bottom: var(--spacing-6, 64px);
- }
- .py7-l {
- padding-top: var(--spacing-7, 128px);
- padding-bottom: var(--spacing-7, 128px);
- }
- .py8-l {
- padding-top: var(--spacing-8, 256px);
- padding-bottom: var(--spacing-8, 256px);
- }
- .py9-l {
- padding-top: var(--spacing-9, 512px);
- padding-bottom: var(--spacing-9, 512px);
- }
-
- .px0-l {
- padding-left: var(--spacing-0, 0);
- padding-right: var(--spacing-0, 0);
- }
- .px1-l {
- padding-left: var(--spacing-1, 2px);
- padding-right: var(--spacing-1, 2px);
- }
- .px2-l {
- padding-left: var(--spacing-2, 4px);
- padding-right: var(--spacing-2, 4px);
- }
- .px3-l {
- padding-left: var(--spacing-3, 8px);
- padding-right: var(--spacing-3, 8px);
- }
- .px4-l {
- padding-left: var(--spacing-4, 16px);
- padding-right: var(--spacing-4, 16px);
- }
- .px5-l {
- padding-left: var(--spacing-5, 32px);
- padding-right: var(--spacing-5, 32px);
- }
- .px6-l {
- padding-left: var(--spacing-6, 64px);
- padding-right: var(--spacing-6, 64px);
- }
- .px7-l {
- padding-left: var(--spacing-7, 128px);
- padding-right: var(--spacing-7, 128px);
- }
- .px8-l {
- padding-left: var(--spacing-8, 256px);
- padding-right: var(--spacing-8, 256px);
- }
- .px9-l {
- padding-left: var(--spacing-9, 512px);
- padding-right: var(--spacing-9, 512px);
- }
-
- .m0-l { margin: var(--spacing-0, 0); }
- .m1-l { margin: var(--spacing-1, 2px); }
- .m2-l { margin: var(--spacing-2, 4px); }
- .m3-l { margin: var(--spacing-3, 8px); }
- .m4-l { margin: var(--spacing-4, 16px); }
- .m5-l { margin: var(--spacing-5, 32px); }
- .m6-l { margin: var(--spacing-6, 64px); }
- .m7-l { margin: var(--spacing-7, 128px); }
- .m8-l { margin: var(--spacing-8, 256px); }
- .m9-l { margin: var(--spacing-9, 512px); }
-
- .ml0-l { margin-left: var(--spacing-0, 0); }
- .ml1-l { margin-left: var(--spacing-3, 2px); }
- .ml2-l { margin-left: var(--spacing-2, 4px); }
- .ml3-l { margin-left: var(--spacing-3, 8px); }
- .ml4-l { margin-left: var(--spacing-4, 16px); }
- .ml5-l { margin-left: var(--spacing-5, 32px); }
- .ml6-l { margin-left: var(--spacing-6, 64px); }
- .ml7-l { margin-left: var(--spacing-7, 128px); }
- .ml8-l { margin-left: var(--spacing-8, 256px); }
- .ml9-l { margin-left: var(--spacing-9, 512px); }
-
- .mr0-l { margin-right: var(--spacing-0, 0); }
- .mr1-l { margin-right: var(--spacing-1, 2px); }
- .mr2-l { margin-right: var(--spacing-2, 4px); }
- .mr3-l { margin-right: var(--spacing-3, 8px); }
- .mr4-l { margin-right: var(--spacing-4, 16px); }
- .mr5-l { margin-right: var(--spacing-5, 32px); }
- .mr6-l { margin-right: var(--spacing-6, 64px); }
- .mr7-l { margin-right: var(--spacing-7, 128px); }
- .mr8-l { margin-right: var(--spacing-8, 256px); }
- .mr9-l { margin-right: var(--spacing-9, 512px); }
-
- .mb0-l { margin-bottom: var(--spacing-0, 0); }
- .mb1-l { margin-bottom: var(--spacing-1, 2px); }
- .mb2-l { margin-bottom: var(--spacing-2, 4px); }
- .mb3-l { margin-bottom: var(--spacing-3, 8px); }
- .mb4-l { margin-bottom: var(--spacing-4, 16px); }
- .mb5-l { margin-bottom: var(--spacing-5, 32px); }
- .mb6-l { margin-bottom: var(--spacing-6, 64px); }
- .mb7-l { margin-bottom: var(--spacing-7, 128px); }
- .mb8-l { margin-bottom: var(--spacing-8, 256px); }
- .mb9-l { margin-bottom: var(--spacing-9, 512px); }
-
- .mt0-l { margin-top: var(--spacing-0, 0); }
- .mt1-l { margin-top: var(--spacing-1, 2px); }
- .mt2-l { margin-top: var(--spacing-2, 4px); }
- .mt3-l { margin-top: var(--spacing-3, 8px); }
- .mt4-l { margin-top: var(--spacing-4, 16px); }
- .mt5-l { margin-top: var(--spacing-5, 32px); }
- .mt6-l { margin-top: var(--spacing-6, 64px); }
- .mt7-l { margin-top: var(--spacing-7, 128px); }
- .mt8-l { margin-top: var(--spacing-8, 256px); }
- .mt9-l { margin-top: var(--spacing-9, 512px); }
-
- .my0-l {
- margin-top: var(--spacing-0, 0);
- margin-bottom: var(--spacing-0, 0);
- }
- .my1-l {
- margin-top: var(--spacing-1, 2px);
- margin-bottom: var(--spacing-1, 2px);
- }
- .my2-l {
- margin-top: var(--spacing-2, 4px);
- margin-bottom: var(--spacing-2, 4px);
- }
- .my3-l {
- margin-top: var(--spacing-3, 8px);
- margin-bottom: var(--spacing-3, 8px);
- }
- .my4-l {
- margin-top: var(--spacing-4, 16px);
- margin-bottom: var(--spacing-4, 16px);
- }
- .my5-l {
- margin-top: var(--spacing-5, 32px);
- margin-bottom: var(--spacing-5, 32px);
- }
- .my6-l {
- margin-top: var(--spacing-6, 64px);
- margin-bottom: var(--spacing-6, 64px);
- }
- .my7-l {
- margin-top: var(--spacing-7, 128px);
- margin-bottom: var(--spacing-7, 128px);
- }
- .my8-l {
- margin-top: var(--spacing-8, 256px);
- margin-bottom: var(--spacing-8, 256px);
- }
- .my9-l {
- margin-top: var(--spacing-9, 512px);
- margin-bottom: var(--spacing-9, 512px);
- }
-
- .mx0-l {
- margin-left: var(--spacing-0, 0);
- margin-right: var(--spacing-0, 0);
- }
- .mx1-l {
- margin-left: var(--spacing-1, 2px);
- margin-right: var(--spacing-1, 2px);
- }
- .mx2-l {
- margin-left: var(--spacing-2, 4px);
- margin-right: var(--spacing-2, 4px);
- }
- .mx3-l {
- margin-left: var(--spacing-3, 8px);
- margin-right: var(--spacing-3, 8px);
- }
- .mx4-l {
- margin-left: var(--spacing-4, 16px);
- margin-right: var(--spacing-4, 16px);
- }
- .mx5-l {
- margin-left: var(--spacing-5, 32px);
- margin-right: var(--spacing-5, 32px);
- }
- .mx6-l {
- margin-left: var(--spacing-6, 64px);
- margin-right: var(--spacing-6, 64px);
- }
- .mx7-l {
- margin-left: var(--spacing-7, 128px);
- margin-right: var(--spacing-7, 128px);
- }
- .mx8-l {
- margin-left: var(--spacing-8, 256px);
- margin-right: var(--spacing-8, 256px);
- }
- .mx9-l {
- margin-left: var(--spacing-9, 512px);
- margin-right: var(--spacing-9, 512px);
+.mb0 { margin-bottom: var(--spacing-none); }
+.mb1 { margin-bottom: var(--spacing-extra-small); }
+.mb2 { margin-bottom: var(--spacing-small); }
+.mb3 { margin-bottom: var(--spacing-medium); }
+.mb4 { margin-bottom: var(--spacing-large); }
+.mb5 { margin-bottom: var(--spacing-extra-large); }
+.mb6 { margin-bottom: var(--spacing-extra-extra-large); }
+.mb7 { margin-bottom: var(--spacing-extra-extra-extra-large); }
+
+.mt0 { margin-top: var(--spacing-none); }
+.mt1 { margin-top: var(--spacing-extra-small); }
+.mt2 { margin-top: var(--spacing-small); }
+.mt3 { margin-top: var(--spacing-medium); }
+.mt4 { margin-top: var(--spacing-large); }
+.mt5 { margin-top: var(--spacing-extra-large); }
+.mt6 { margin-top: var(--spacing-extra-extra-large); }
+.mt7 { margin-top: var(--spacing-extra-extra-extra-large); }
+
+.mv0 {
+ margin-top: var(--spacing-none);
+ margin-bottom: var(--spacing-none);
+}
+.mv1 {
+ margin-top: var(--spacing-extra-small);
+ margin-bottom: var(--spacing-extra-small);
+}
+.mv2 {
+ margin-top: var(--spacing-small);
+ margin-bottom: var(--spacing-small);
+}
+.mv3 {
+ margin-top: var(--spacing-medium);
+ margin-bottom: var(--spacing-medium);
+}
+.mv4 {
+ margin-top: var(--spacing-large);
+ margin-bottom: var(--spacing-large);
+}
+.mv5 {
+ margin-top: var(--spacing-extra-large);
+ margin-bottom: var(--spacing-extra-large);
+}
+.mv6 {
+ margin-top: var(--spacing-extra-extra-large);
+ margin-bottom: var(--spacing-extra-extra-large);
+}
+.mv7 {
+ margin-top: var(--spacing-extra-extra-extra-large);
+ margin-bottom: var(--spacing-extra-extra-extra-large);
+}
+
+.mh0 {
+ margin-left: var(--spacing-none);
+ margin-right: var(--spacing-none);
+}
+.mh1 {
+ margin-left: var(--spacing-extra-small);
+ margin-right: var(--spacing-extra-small);
+}
+.mh2 {
+ margin-left: var(--spacing-small);
+ margin-right: var(--spacing-small);
+}
+.mh3 {
+ margin-left: var(--spacing-medium);
+ margin-right: var(--spacing-medium);
+}
+.mh4 {
+ margin-left: var(--spacing-large);
+ margin-right: var(--spacing-large);
+}
+.mh5 {
+ margin-left: var(--spacing-extra-large);
+ margin-right: var(--spacing-extra-large);
+}
+.mh6 {
+ margin-left: var(--spacing-extra-extra-large);
+ margin-right: var(--spacing-extra-extra-large);
+}
+.mh7 {
+ margin-left: var(--spacing-extra-extra-extra-large);
+ margin-right: var(--spacing-extra-extra-extra-large);
+}
+
+@media (--breakpoint-not-small) {
+ .pa0-ns { padding: var(--spacing-none); }
+ .pa1-ns { padding: var(--spacing-extra-small); }
+ .pa2-ns { padding: var(--spacing-small); }
+ .pa3-ns { padding: var(--spacing-medium); }
+ .pa4-ns { padding: var(--spacing-large); }
+ .pa5-ns { padding: var(--spacing-extra-large); }
+ .pa6-ns { padding: var(--spacing-extra-extra-large); }
+ .pa7-ns { padding: var(--spacing-extra-extra-extra-large); }
+
+ .pl0-ns { padding-left: var(--spacing-none); }
+ .pl1-ns { padding-left: var(--spacing-extra-small); }
+ .pl2-ns { padding-left: var(--spacing-small); }
+ .pl3-ns { padding-left: var(--spacing-medium); }
+ .pl4-ns { padding-left: var(--spacing-large); }
+ .pl5-ns { padding-left: var(--spacing-extra-large); }
+ .pl6-ns { padding-left: var(--spacing-extra-extra-large); }
+ .pl7-ns { padding-left: var(--spacing-extra-extra-extra-large); }
+
+ .pr0-ns { padding-right: var(--spacing-none); }
+ .pr1-ns { padding-right: var(--spacing-extra-small); }
+ .pr2-ns { padding-right: var(--spacing-small); }
+ .pr3-ns { padding-right: var(--spacing-medium); }
+ .pr4-ns { padding-right: var(--spacing-large); }
+ .pr5-ns { padding-right: var(--spacing-extra-large); }
+ .pr6-ns { padding-right: var(--spacing-extra-extra-large); }
+ .pr7-ns { padding-right: var(--spacing-extra-extra-extra-large); }
+
+ .pb0-ns { padding-bottom: var(--spacing-none); }
+ .pb1-ns { padding-bottom: var(--spacing-extra-small); }
+ .pb2-ns { padding-bottom: var(--spacing-small); }
+ .pb3-ns { padding-bottom: var(--spacing-medium); }
+ .pb4-ns { padding-bottom: var(--spacing-large); }
+ .pb5-ns { padding-bottom: var(--spacing-extra-large); }
+ .pb6-ns { padding-bottom: var(--spacing-extra-extra-large); }
+ .pb7-ns { padding-bottom: var(--spacing-extra-extra-extra-large); }
+
+ .pt0-ns { padding-top: var(--spacing-none); }
+ .pt1-ns { padding-top: var(--spacing-extra-small); }
+ .pt2-ns { padding-top: var(--spacing-small); }
+ .pt3-ns { padding-top: var(--spacing-medium); }
+ .pt4-ns { padding-top: var(--spacing-large); }
+ .pt5-ns { padding-top: var(--spacing-extra-large); }
+ .pt6-ns { padding-top: var(--spacing-extra-extra-large); }
+ .pt7-ns { padding-top: var(--spacing-extra-extra-extra-large); }
+
+ .pv0-ns {
+ padding-top: var(--spacing-none);
+ padding-bottom: var(--spacing-none);
+ }
+ .pv1-ns {
+ padding-top: var(--spacing-extra-small);
+ padding-bottom: var(--spacing-extra-small);
+ }
+ .pv2-ns {
+ padding-top: var(--spacing-small);
+ padding-bottom: var(--spacing-small);
+ }
+ .pv3-ns {
+ padding-top: var(--spacing-medium);
+ padding-bottom: var(--spacing-medium);
+ }
+ .pv4-ns {
+ padding-top: var(--spacing-large);
+ padding-bottom: var(--spacing-large);
+ }
+ .pv5-ns {
+ padding-top: var(--spacing-extra-large);
+ padding-bottom: var(--spacing-extra-large);
+ }
+ .pv6-ns {
+ padding-top: var(--spacing-extra-extra-large);
+ padding-bottom: var(--spacing-extra-extra-large);
+ }
+ .pv7-ns {
+ padding-top: var(--spacing-extra-extra-extra-large);
+ padding-bottom: var(--spacing-extra-extra-extra-large);
+ }
+ .ph0-ns {
+ padding-left: var(--spacing-none);
+ padding-right: var(--spacing-none);
+ }
+ .ph1-ns {
+ padding-left: var(--spacing-extra-small);
+ padding-right: var(--spacing-extra-small);
+ }
+ .ph2-ns {
+ padding-left: var(--spacing-small);
+ padding-right: var(--spacing-small);
+ }
+ .ph3-ns {
+ padding-left: var(--spacing-medium);
+ padding-right: var(--spacing-medium);
+ }
+ .ph4-ns {
+ padding-left: var(--spacing-large);
+ padding-right: var(--spacing-large);
+ }
+ .ph5-ns {
+ padding-left: var(--spacing-extra-large);
+ padding-right: var(--spacing-extra-large);
+ }
+ .ph6-ns {
+ padding-left: var(--spacing-extra-extra-large);
+ padding-right: var(--spacing-extra-extra-large);
+ }
+ .ph7-ns {
+ padding-left: var(--spacing-extra-extra-extra-large);
+ padding-right: var(--spacing-extra-extra-extra-large);
+ }
+
+ .ma0-ns { margin: var(--spacing-none); }
+ .ma1-ns { margin: var(--spacing-extra-small); }
+ .ma2-ns { margin: var(--spacing-small); }
+ .ma3-ns { margin: var(--spacing-medium); }
+ .ma4-ns { margin: var(--spacing-large); }
+ .ma5-ns { margin: var(--spacing-extra-large); }
+ .ma6-ns { margin: var(--spacing-extra-extra-large); }
+ .ma7-ns { margin: var(--spacing-extra-extra-extra-large); }
+
+ .ml0-ns { margin-left: var(--spacing-none); }
+ .ml1-ns { margin-left: var(--spacing-extra-small); }
+ .ml2-ns { margin-left: var(--spacing-small); }
+ .ml3-ns { margin-left: var(--spacing-medium); }
+ .ml4-ns { margin-left: var(--spacing-large); }
+ .ml5-ns { margin-left: var(--spacing-extra-large); }
+ .ml6-ns { margin-left: var(--spacing-extra-extra-large); }
+ .ml7-ns { margin-left: var(--spacing-extra-extra-extra-large); }
+
+ .mr0-ns { margin-right: var(--spacing-none); }
+ .mr1-ns { margin-right: var(--spacing-extra-small); }
+ .mr2-ns { margin-right: var(--spacing-small); }
+ .mr3-ns { margin-right: var(--spacing-medium); }
+ .mr4-ns { margin-right: var(--spacing-large); }
+ .mr5-ns { margin-right: var(--spacing-extra-large); }
+ .mr6-ns { margin-right: var(--spacing-extra-extra-large); }
+ .mr7-ns { margin-right: var(--spacing-extra-extra-extra-large); }
+
+ .mb0-ns { margin-bottom: var(--spacing-none); }
+ .mb1-ns { margin-bottom: var(--spacing-extra-small); }
+ .mb2-ns { margin-bottom: var(--spacing-small); }
+ .mb3-ns { margin-bottom: var(--spacing-medium); }
+ .mb4-ns { margin-bottom: var(--spacing-large); }
+ .mb5-ns { margin-bottom: var(--spacing-extra-large); }
+ .mb6-ns { margin-bottom: var(--spacing-extra-extra-large); }
+ .mb7-ns { margin-bottom: var(--spacing-extra-extra-extra-large); }
+
+ .mt0-ns { margin-top: var(--spacing-none); }
+ .mt1-ns { margin-top: var(--spacing-extra-small); }
+ .mt2-ns { margin-top: var(--spacing-small); }
+ .mt3-ns { margin-top: var(--spacing-medium); }
+ .mt4-ns { margin-top: var(--spacing-large); }
+ .mt5-ns { margin-top: var(--spacing-extra-large); }
+ .mt6-ns { margin-top: var(--spacing-extra-extra-large); }
+ .mt7-ns { margin-top: var(--spacing-extra-extra-extra-large); }
+
+ .mv0-ns {
+ margin-top: var(--spacing-none);
+ margin-bottom: var(--spacing-none);
+ }
+ .mv1-ns {
+ margin-top: var(--spacing-extra-small);
+ margin-bottom: var(--spacing-extra-small);
+ }
+ .mv2-ns {
+ margin-top: var(--spacing-small);
+ margin-bottom: var(--spacing-small);
+ }
+ .mv3-ns {
+ margin-top: var(--spacing-medium);
+ margin-bottom: var(--spacing-medium);
+ }
+ .mv4-ns {
+ margin-top: var(--spacing-large);
+ margin-bottom: var(--spacing-large);
+ }
+ .mv5-ns {
+ margin-top: var(--spacing-extra-large);
+ margin-bottom: var(--spacing-extra-large);
+ }
+ .mv6-ns {
+ margin-top: var(--spacing-extra-extra-large);
+ margin-bottom: var(--spacing-extra-extra-large);
+ }
+ .mv7-ns {
+ margin-top: var(--spacing-extra-extra-extra-large);
+ margin-bottom: var(--spacing-extra-extra-extra-large);
+ }
+
+ .mh0-ns {
+ margin-left: var(--spacing-none);
+ margin-right: var(--spacing-none);
+ }
+ .mh1-ns {
+ margin-left: var(--spacing-extra-small);
+ margin-right: var(--spacing-extra-small);
+ }
+ .mh2-ns {
+ margin-left: var(--spacing-small);
+ margin-right: var(--spacing-small);
+ }
+ .mh3-ns {
+ margin-left: var(--spacing-medium);
+ margin-right: var(--spacing-medium);
+ }
+ .mh4-ns {
+ margin-left: var(--spacing-large);
+ margin-right: var(--spacing-large);
+ }
+ .mh5-ns {
+ margin-left: var(--spacing-extra-large);
+ margin-right: var(--spacing-extra-large);
+ }
+ .mh6-ns {
+ margin-left: var(--spacing-extra-extra-large);
+ margin-right: var(--spacing-extra-extra-large);
+ }
+ .mh7-ns {
+ margin-left: var(--spacing-extra-extra-extra-large);
+ margin-right: var(--spacing-extra-extra-extra-large);
+ }
+
+}
+
+@media (--breakpoint-medium) {
+ .pa0-m { padding: var(--spacing-none); }
+ .pa1-m { padding: var(--spacing-extra-small); }
+ .pa2-m { padding: var(--spacing-small); }
+ .pa3-m { padding: var(--spacing-medium); }
+ .pa4-m { padding: var(--spacing-large); }
+ .pa5-m { padding: var(--spacing-extra-large); }
+ .pa6-m { padding: var(--spacing-extra-extra-large); }
+ .pa7-m { padding: var(--spacing-extra-extra-extra-large); }
+
+ .pl0-m { padding-left: var(--spacing-none); }
+ .pl1-m { padding-left: var(--spacing-extra-small); }
+ .pl2-m { padding-left: var(--spacing-small); }
+ .pl3-m { padding-left: var(--spacing-medium); }
+ .pl4-m { padding-left: var(--spacing-large); }
+ .pl5-m { padding-left: var(--spacing-extra-large); }
+ .pl6-m { padding-left: var(--spacing-extra-extra-large); }
+ .pl7-m { padding-left: var(--spacing-extra-extra-extra-large); }
+
+ .pr0-m { padding-right: var(--spacing-none); }
+ .pr1-m { padding-right: var(--spacing-extra-small); }
+ .pr2-m { padding-right: var(--spacing-small); }
+ .pr3-m { padding-right: var(--spacing-medium); }
+ .pr4-m { padding-right: var(--spacing-large); }
+ .pr5-m { padding-right: var(--spacing-extra-large); }
+ .pr6-m { padding-right: var(--spacing-extra-extra-large); }
+ .pr7-m { padding-right: var(--spacing-extra-extra-extra-large); }
+
+ .pb0-m { padding-bottom: var(--spacing-none); }
+ .pb1-m { padding-bottom: var(--spacing-extra-small); }
+ .pb2-m { padding-bottom: var(--spacing-small); }
+ .pb3-m { padding-bottom: var(--spacing-medium); }
+ .pb4-m { padding-bottom: var(--spacing-large); }
+ .pb5-m { padding-bottom: var(--spacing-extra-large); }
+ .pb6-m { padding-bottom: var(--spacing-extra-extra-large); }
+ .pb7-m { padding-bottom: var(--spacing-extra-extra-extra-large); }
+
+ .pt0-m { padding-top: var(--spacing-none); }
+ .pt1-m { padding-top: var(--spacing-extra-small); }
+ .pt2-m { padding-top: var(--spacing-small); }
+ .pt3-m { padding-top: var(--spacing-medium); }
+ .pt4-m { padding-top: var(--spacing-large); }
+ .pt5-m { padding-top: var(--spacing-extra-large); }
+ .pt6-m { padding-top: var(--spacing-extra-extra-large); }
+ .pt7-m { padding-top: var(--spacing-extra-extra-extra-large); }
+
+ .pv0-m {
+ padding-top: var(--spacing-none);
+ padding-bottom: var(--spacing-none);
+ }
+ .pv1-m {
+ padding-top: var(--spacing-extra-small);
+ padding-bottom: var(--spacing-extra-small);
+ }
+ .pv2-m {
+ padding-top: var(--spacing-small);
+ padding-bottom: var(--spacing-small);
+ }
+ .pv3-m {
+ padding-top: var(--spacing-medium);
+ padding-bottom: var(--spacing-medium);
+ }
+ .pv4-m {
+ padding-top: var(--spacing-large);
+ padding-bottom: var(--spacing-large);
+ }
+ .pv5-m {
+ padding-top: var(--spacing-extra-large);
+ padding-bottom: var(--spacing-extra-large);
+ }
+ .pv6-m {
+ padding-top: var(--spacing-extra-extra-large);
+ padding-bottom: var(--spacing-extra-extra-large);
+ }
+ .pv7-m {
+ padding-top: var(--spacing-extra-extra-extra-large);
+ padding-bottom: var(--spacing-extra-extra-extra-large);
+ }
+
+ .ph0-m {
+ padding-left: var(--spacing-none);
+ padding-right: var(--spacing-none);
+ }
+ .ph1-m {
+ padding-left: var(--spacing-extra-small);
+ padding-right: var(--spacing-extra-small);
+ }
+ .ph2-m {
+ padding-left: var(--spacing-small);
+ padding-right: var(--spacing-small);
+ }
+ .ph3-m {
+ padding-left: var(--spacing-medium);
+ padding-right: var(--spacing-medium);
+ }
+ .ph4-m {
+ padding-left: var(--spacing-large);
+ padding-right: var(--spacing-large);
+ }
+ .ph5-m {
+ padding-left: var(--spacing-extra-large);
+ padding-right: var(--spacing-extra-large);
+ }
+ .ph6-m {
+ padding-left: var(--spacing-extra-extra-large);
+ padding-right: var(--spacing-extra-extra-large);
+ }
+ .ph7-m {
+ padding-left: var(--spacing-extra-extra-extra-large);
+ padding-right: var(--spacing-extra-extra-extra-large);
+ }
+
+ .ma0-m { margin: var(--spacing-none); }
+ .ma1-m { margin: var(--spacing-extra-small); }
+ .ma2-m { margin: var(--spacing-small); }
+ .ma3-m { margin: var(--spacing-medium); }
+ .ma4-m { margin: var(--spacing-large); }
+ .ma5-m { margin: var(--spacing-extra-large); }
+ .ma6-m { margin: var(--spacing-extra-extra-large); }
+ .ma7-m { margin: var(--spacing-extra-extra-extra-large); }
+
+ .ml0-m { margin-left: var(--spacing-none); }
+ .ml1-m { margin-left: var(--spacing-extra-small); }
+ .ml2-m { margin-left: var(--spacing-small); }
+ .ml3-m { margin-left: var(--spacing-medium); }
+ .ml4-m { margin-left: var(--spacing-large); }
+ .ml5-m { margin-left: var(--spacing-extra-large); }
+ .ml6-m { margin-left: var(--spacing-extra-extra-large); }
+ .ml7-m { margin-left: var(--spacing-extra-extra-extra-large); }
+
+ .mr0-m { margin-right: var(--spacing-none); }
+ .mr1-m { margin-right: var(--spacing-extra-small); }
+ .mr2-m { margin-right: var(--spacing-small); }
+ .mr3-m { margin-right: var(--spacing-medium); }
+ .mr4-m { margin-right: var(--spacing-large); }
+ .mr5-m { margin-right: var(--spacing-extra-large); }
+ .mr6-m { margin-right: var(--spacing-extra-extra-large); }
+ .mr7-m { margin-right: var(--spacing-extra-extra-extra-large); }
+
+ .mb0-m { margin-bottom: var(--spacing-none); }
+ .mb1-m { margin-bottom: var(--spacing-extra-small); }
+ .mb2-m { margin-bottom: var(--spacing-small); }
+ .mb3-m { margin-bottom: var(--spacing-medium); }
+ .mb4-m { margin-bottom: var(--spacing-large); }
+ .mb5-m { margin-bottom: var(--spacing-extra-large); }
+ .mb6-m { margin-bottom: var(--spacing-extra-extra-large); }
+ .mb7-m { margin-bottom: var(--spacing-extra-extra-extra-large); }
+
+ .mt0-m { margin-top: var(--spacing-none); }
+ .mt1-m { margin-top: var(--spacing-extra-small); }
+ .mt2-m { margin-top: var(--spacing-small); }
+ .mt3-m { margin-top: var(--spacing-medium); }
+ .mt4-m { margin-top: var(--spacing-large); }
+ .mt5-m { margin-top: var(--spacing-extra-large); }
+ .mt6-m { margin-top: var(--spacing-extra-extra-large); }
+ .mt7-m { margin-top: var(--spacing-extra-extra-extra-large); }
+
+ .mv0-m {
+ margin-top: var(--spacing-none);
+ margin-bottom: var(--spacing-none);
+ }
+ .mv1-m {
+ margin-top: var(--spacing-extra-small);
+ margin-bottom: var(--spacing-extra-small);
+ }
+ .mv2-m {
+ margin-top: var(--spacing-small);
+ margin-bottom: var(--spacing-small);
+ }
+ .mv3-m {
+ margin-top: var(--spacing-medium);
+ margin-bottom: var(--spacing-medium);
+ }
+ .mv4-m {
+ margin-top: var(--spacing-large);
+ margin-bottom: var(--spacing-large);
+ }
+ .mv5-m {
+ margin-top: var(--spacing-extra-large);
+ margin-bottom: var(--spacing-extra-large);
+ }
+ .mv6-m {
+ margin-top: var(--spacing-extra-extra-large);
+ margin-bottom: var(--spacing-extra-extra-large);
+ }
+ .mv7-m {
+ margin-top: var(--spacing-extra-extra-extra-large);
+ margin-bottom: var(--spacing-extra-extra-extra-large);
+ }
+
+ .mh0-m {
+ margin-left: var(--spacing-none);
+ margin-right: var(--spacing-none);
+ }
+ .mh1-m {
+ margin-left: var(--spacing-extra-small);
+ margin-right: var(--spacing-extra-small);
+ }
+ .mh2-m {
+ margin-left: var(--spacing-small);
+ margin-right: var(--spacing-small);
+ }
+ .mh3-m {
+ margin-left: var(--spacing-medium);
+ margin-right: var(--spacing-medium);
+ }
+ .mh4-m {
+ margin-left: var(--spacing-large);
+ margin-right: var(--spacing-large);
+ }
+ .mh5-m {
+ margin-left: var(--spacing-extra-large);
+ margin-right: var(--spacing-extra-large);
+ }
+ .mh6-m {
+ margin-left: var(--spacing-extra-extra-large);
+ margin-right: var(--spacing-extra-extra-large);
+ }
+ .mh7-m {
+ margin-left: var(--spacing-extra-extra-extra-large);
+ margin-right: var(--spacing-extra-extra-extra-large);
+ }
+
+}
+
+@media (--breakpoint-large) {
+ .pa0-l { padding: var(--spacing-none); }
+ .pa1-l { padding: var(--spacing-extra-small); }
+ .pa2-l { padding: var(--spacing-small); }
+ .pa3-l { padding: var(--spacing-medium); }
+ .pa4-l { padding: var(--spacing-large); }
+ .pa5-l { padding: var(--spacing-extra-large); }
+ .pa6-l { padding: var(--spacing-extra-extra-large); }
+ .pa7-l { padding: var(--spacing-extra-extra-extra-large); }
+
+ .pl0-l { padding-left: var(--spacing-none); }
+ .pl1-l { padding-left: var(--spacing-extra-small); }
+ .pl2-l { padding-left: var(--spacing-small); }
+ .pl3-l { padding-left: var(--spacing-medium); }
+ .pl4-l { padding-left: var(--spacing-large); }
+ .pl5-l { padding-left: var(--spacing-extra-large); }
+ .pl6-l { padding-left: var(--spacing-extra-extra-large); }
+ .pl7-l { padding-left: var(--spacing-extra-extra-extra-large); }
+
+ .pr0-l { padding-right: var(--spacing-none); }
+ .pr1-l { padding-right: var(--spacing-extra-small); }
+ .pr2-l { padding-right: var(--spacing-small); }
+ .pr3-l { padding-right: var(--spacing-medium); }
+ .pr4-l { padding-right: var(--spacing-large); }
+ .pr5-l { padding-right: var(--spacing-extra-large); }
+ .pr6-l { padding-right: var(--spacing-extra-extra-large); }
+ .pr7-l { padding-right: var(--spacing-extra-extra-extra-large); }
+
+ .pb0-l { padding-bottom: var(--spacing-none); }
+ .pb1-l { padding-bottom: var(--spacing-extra-small); }
+ .pb2-l { padding-bottom: var(--spacing-small); }
+ .pb3-l { padding-bottom: var(--spacing-medium); }
+ .pb4-l { padding-bottom: var(--spacing-large); }
+ .pb5-l { padding-bottom: var(--spacing-extra-large); }
+ .pb6-l { padding-bottom: var(--spacing-extra-extra-large); }
+ .pb7-l { padding-bottom: var(--spacing-extra-extra-extra-large); }
+
+ .pt0-l { padding-top: var(--spacing-none); }
+ .pt1-l { padding-top: var(--spacing-extra-small); }
+ .pt2-l { padding-top: var(--spacing-small); }
+ .pt3-l { padding-top: var(--spacing-medium); }
+ .pt4-l { padding-top: var(--spacing-large); }
+ .pt5-l { padding-top: var(--spacing-extra-large); }
+ .pt6-l { padding-top: var(--spacing-extra-extra-large); }
+ .pt7-l { padding-top: var(--spacing-extra-extra-extra-large); }
+
+ .pv0-l {
+ padding-top: var(--spacing-none);
+ padding-bottom: var(--spacing-none);
+ }
+ .pv1-l {
+ padding-top: var(--spacing-extra-small);
+ padding-bottom: var(--spacing-extra-small);
+ }
+ .pv2-l {
+ padding-top: var(--spacing-small);
+ padding-bottom: var(--spacing-small);
+ }
+ .pv3-l {
+ padding-top: var(--spacing-medium);
+ padding-bottom: var(--spacing-medium);
+ }
+ .pv4-l {
+ padding-top: var(--spacing-large);
+ padding-bottom: var(--spacing-large);
+ }
+ .pv5-l {
+ padding-top: var(--spacing-extra-large);
+ padding-bottom: var(--spacing-extra-large);
+ }
+ .pv6-l {
+ padding-top: var(--spacing-extra-extra-large);
+ padding-bottom: var(--spacing-extra-extra-large);
+ }
+ .pv7-l {
+ padding-top: var(--spacing-extra-extra-extra-large);
+ padding-bottom: var(--spacing-extra-extra-extra-large);
+ }
+
+ .ph0-l {
+ padding-left: var(--spacing-none);
+ padding-right: var(--spacing-none);
+ }
+ .ph1-l {
+ padding-left: var(--spacing-extra-small);
+ padding-right: var(--spacing-extra-small);
+ }
+ .ph2-l {
+ padding-left: var(--spacing-small);
+ padding-right: var(--spacing-small);
+ }
+ .ph3-l {
+ padding-left: var(--spacing-medium);
+ padding-right: var(--spacing-medium);
+ }
+ .ph4-l {
+ padding-left: var(--spacing-large);
+ padding-right: var(--spacing-large);
+ }
+ .ph5-l {
+ padding-left: var(--spacing-extra-large);
+ padding-right: var(--spacing-extra-large);
+ }
+ .ph6-l {
+ padding-left: var(--spacing-extra-extra-large);
+ padding-right: var(--spacing-extra-extra-large);
+ }
+ .ph7-l {
+ padding-left: var(--spacing-extra-extra-extra-large);
+ padding-right: var(--spacing-extra-extra-extra-large);
+ }
+
+ .ma0-l { margin: var(--spacing-none); }
+ .ma1-l { margin: var(--spacing-extra-small); }
+ .ma2-l { margin: var(--spacing-small); }
+ .ma3-l { margin: var(--spacing-medium); }
+ .ma4-l { margin: var(--spacing-large); }
+ .ma5-l { margin: var(--spacing-extra-large); }
+ .ma6-l { margin: var(--spacing-extra-extra-large); }
+ .ma7-l { margin: var(--spacing-extra-extra-extra-large); }
+
+ .ml0-l { margin-left: var(--spacing-none); }
+ .ml1-l { margin-left: var(--spacing-extra-small); }
+ .ml2-l { margin-left: var(--spacing-small); }
+ .ml3-l { margin-left: var(--spacing-medium); }
+ .ml4-l { margin-left: var(--spacing-large); }
+ .ml5-l { margin-left: var(--spacing-extra-large); }
+ .ml6-l { margin-left: var(--spacing-extra-extra-large); }
+ .ml7-l { margin-left: var(--spacing-extra-extra-extra-large); }
+
+ .mr0-l { margin-right: var(--spacing-none); }
+ .mr1-l { margin-right: var(--spacing-extra-small); }
+ .mr2-l { margin-right: var(--spacing-small); }
+ .mr3-l { margin-right: var(--spacing-medium); }
+ .mr4-l { margin-right: var(--spacing-large); }
+ .mr5-l { margin-right: var(--spacing-extra-large); }
+ .mr6-l { margin-right: var(--spacing-extra-extra-large); }
+ .mr7-l { margin-right: var(--spacing-extra-extra-extra-large); }
+
+ .mb0-l { margin-bottom: var(--spacing-none); }
+ .mb1-l { margin-bottom: var(--spacing-extra-small); }
+ .mb2-l { margin-bottom: var(--spacing-small); }
+ .mb3-l { margin-bottom: var(--spacing-medium); }
+ .mb4-l { margin-bottom: var(--spacing-large); }
+ .mb5-l { margin-bottom: var(--spacing-extra-large); }
+ .mb6-l { margin-bottom: var(--spacing-extra-extra-large); }
+ .mb7-l { margin-bottom: var(--spacing-extra-extra-extra-large); }
+
+ .mt0-l { margin-top: var(--spacing-none); }
+ .mt1-l { margin-top: var(--spacing-extra-small); }
+ .mt2-l { margin-top: var(--spacing-small); }
+ .mt3-l { margin-top: var(--spacing-medium); }
+ .mt4-l { margin-top: var(--spacing-large); }
+ .mt5-l { margin-top: var(--spacing-extra-large); }
+ .mt6-l { margin-top: var(--spacing-extra-extra-large); }
+ .mt7-l { margin-top: var(--spacing-extra-extra-extra-large); }
+
+ .mv0-l {
+ margin-top: var(--spacing-none);
+ margin-bottom: var(--spacing-none);
+ }
+ .mv1-l {
+ margin-top: var(--spacing-extra-small);
+ margin-bottom: var(--spacing-extra-small);
+ }
+ .mv2-l {
+ margin-top: var(--spacing-small);
+ margin-bottom: var(--spacing-small);
+ }
+ .mv3-l {
+ margin-top: var(--spacing-medium);
+ margin-bottom: var(--spacing-medium);
+ }
+ .mv4-l {
+ margin-top: var(--spacing-large);
+ margin-bottom: var(--spacing-large);
+ }
+ .mv5-l {
+ margin-top: var(--spacing-extra-large);
+ margin-bottom: var(--spacing-extra-large);
+ }
+ .mv6-l {
+ margin-top: var(--spacing-extra-extra-large);
+ margin-bottom: var(--spacing-extra-extra-large);
+ }
+ .mv7-l {
+ margin-top: var(--spacing-extra-extra-extra-large);
+ margin-bottom: var(--spacing-extra-extra-extra-large);
+ }
+
+ .mh0-l {
+ margin-left: var(--spacing-none);
+ margin-right: var(--spacing-none);
+ }
+ .mh1-l {
+ margin-left: var(--spacing-extra-small);
+ margin-right: var(--spacing-extra-small);
+ }
+ .mh2-l {
+ margin-left: var(--spacing-small);
+ margin-right: var(--spacing-small);
+ }
+ .mh3-l {
+ margin-left: var(--spacing-medium);
+ margin-right: var(--spacing-medium);
+ }
+ .mh4-l {
+ margin-left: var(--spacing-large);
+ margin-right: var(--spacing-large);
+ }
+ .mh5-l {
+ margin-left: var(--spacing-extra-large);
+ margin-right: var(--spacing-extra-large);
+ }
+ .mh6-l {
+ margin-left: var(--spacing-extra-extra-large);
+ margin-right: var(--spacing-extra-extra-large);
+ }
+ .mh7-l {
+ margin-left: var(--spacing-extra-extra-extra-large);
+ margin-right: var(--spacing-extra-extra-extra-large);
}
}
diff --git a/src/_tables.css b/src/_tables.css
index 8bcd27c41..d1f145a85 100644
--- a/src/_tables.css
+++ b/src/_tables.css
@@ -10,10 +10,26 @@
border-spacing: 0;
}
-.striped--light:nth-child(odd) {
- background-color: var(--gray-10);
+.striped--light-silver:nth-child(odd) {
+ background-color: var(--light-silver);
}
-.striped--dark:nth-child(odd) {
- background-color: var(--gray-0);
+.striped--moon-gray:nth-child(odd) {
+ background-color: var(--moon-gray);
+}
+
+.striped--light-gray:nth-child(odd) {
+ background-color: var(--light-gray);
+}
+
+.striped--near-white:nth-child(odd) {
+ background-color: var(--near-white);
+}
+
+.stripe-light:nth-child(odd) {
+ background-color: var(--white-10);
+}
+
+.stripe-dark:nth-child(odd) {
+ background-color: var(--black-10);
}
diff --git a/src/_text-align.css b/src/_text-align.css
index 530a80a50..48211fb87 100644
--- a/src/_text-align.css
+++ b/src/_text-align.css
@@ -13,7 +13,7 @@
j = justify
Media Query Extensions:
- -s = small
+ -ns = not-small
-m = medium
-l = large
@@ -24,21 +24,21 @@
.tc { text-align: center; }
.tj { text-align: justify; }
-@container (min-width:30em) {
- .tl-s { text-align: left; }
- .tr-s { text-align: right; }
- .tc-s { text-align: center; }
- .tj-s { text-align: justify; }
+@media (--breakpoint-not-small) {
+ .tl-ns { text-align: left; }
+ .tr-ns { text-align: right; }
+ .tc-ns { text-align: center; }
+ .tj-ns { text-align: justify; }
}
-@container (min-width:48em) {
+@media (--breakpoint-medium) {
.tl-m { text-align: left; }
.tr-m { text-align: right; }
.tc-m { text-align: center; }
.tj-m { text-align: justify; }
}
-@container (min-width:64em) {
+@media (--breakpoint-large) {
.tl-l { text-align: left; }
.tr-l { text-align: right; }
.tc-l { text-align: center; }
diff --git a/src/_text-decoration.css b/src/_text-decoration.css
index 16ddb0615..574de2764 100644
--- a/src/_text-decoration.css
+++ b/src/_text-decoration.css
@@ -5,7 +5,7 @@
Media Query Extensions:
- -s = small
+ -ns = not-small
-m = medium
-l = large
@@ -14,3 +14,22 @@
.strike { text-decoration: line-through; }
.underline { text-decoration: underline; }
.no-underline { text-decoration: none; }
+
+
+@media (--breakpoint-not-small) {
+ .strike-ns { text-decoration: line-through; }
+ .underline-ns { text-decoration: underline; }
+ .no-underline-ns { text-decoration: none; }
+}
+
+@media (--breakpoint-medium) {
+ .strike-m { text-decoration: line-through; }
+ .underline-m { text-decoration: underline; }
+ .no-underline-m { text-decoration: none; }
+}
+
+@media (--breakpoint-large) {
+ .strike-l { text-decoration: line-through; }
+ .underline-l { text-decoration: underline; }
+ .no-underline-l { text-decoration: none; }
+}
diff --git a/src/_text-shadow.css b/src/_text-shadow.css
deleted file mode 100644
index 5d9944c23..000000000
--- a/src/_text-shadow.css
+++ /dev/null
@@ -1,32 +0,0 @@
-/*
-
- TEXT-SHADOW
- Docs: http://tachyons.io/docs/themes/text-shadow/
-
- Media Query Extensions:
- -s = small
- -m = medium
- -l = large
-
- */
-
-.text-shadow-1 { text-shadow: rgb(var(--shadow-color)) -4px 4px 0px; }
-.text-shadow-2 { text-shadow: rgb(var(--shadow-color)) -8px 8px 0px; }
-.text-shadow-3 { text-shadow: rgb(var(--shadow-color) / var(--shadow-opacity ,.5)) -8px 8px 0px; }
-.text-shadow-4 { text-shadow: rgba(var(--shadow-color) / var(--shadow-opacity, .5)) -4px 4px 8px; }
-.text-shadow-5 { text-shadow: rgb(var(--shadow-color)) 2px 0px 0px, rgb(var(--shadow-color)) 0px 2px 0px, rgb(var(--shadow-color)) -2px 0px 0px, rgb(var(--shadow-color)) 0px -2px 0px, rgb(var(--shadow-color)) -2px -2px 0px, rgb(var(--shadow-color)) 2px -2px 0px, rgb(var(--shadow-color)) 2px 2px 0px, rgb(var(--shadow-color)) -2px 2px 0px; }
-.text-shadow-6 { text-shadow: rgb(var(--shadow-color-invert)) 2px 0px 0px, rgb(var(--shadow-color-invert)) 0px 2px 0px, rgb(var(--shadow-color-invert)) -2px 0px 0px, rgb(var(--shadow-color-invert)) 0px -2px 0px, rgb(var(--shadow-color-invert)) -2px -2px 0px, rgb(var(--shadow-color-invert)) 2px -2px 0px, rgb(var(--shadow-color-invert)) 2px 2px 0px, rgb(var(--shadow-color-invert)) -2px 2px 0px; }
-
-
-@container (min-width:30em) {
-
-}
-
-@container (min-width:48em) {
-
-}
-
-@container (min-width:64em) {
-
-}
-
diff --git a/src/_text-transform.css b/src/_text-transform.css
index 1fb639058..50ae73e79 100644
--- a/src/_text-transform.css
+++ b/src/_text-transform.css
@@ -13,7 +13,7 @@
n = none
Media Query Extensions:
- -s = small
+ -ns = not-small
-m = medium
-l = large
@@ -24,21 +24,21 @@
.ttu { text-transform: uppercase; }
.ttn { text-transform: none; }
-@container (min-width:30em) {
- .ttc-s { text-transform: capitalize; }
- .ttl-s { text-transform: lowercase; }
- .ttu-s { text-transform: uppercase; }
- .ttn-s { text-transform: none; }
+@media (--breakpoint-not-small) {
+ .ttc-ns { text-transform: capitalize; }
+ .ttl-ns { text-transform: lowercase; }
+ .ttu-ns { text-transform: uppercase; }
+ .ttn-ns { text-transform: none; }
}
-@container (min-width:48em) {
+@media (--breakpoint-medium) {
.ttc-m { text-transform: capitalize; }
.ttl-m { text-transform: lowercase; }
.ttu-m { text-transform: uppercase; }
.ttn-m { text-transform: none; }
}
-@container (min-width:64em) {
+@media (--breakpoint-large) {
.ttc-l { text-transform: capitalize; }
.ttl-l { text-transform: lowercase; }
.ttu-l { text-transform: uppercase; }
diff --git a/src/_type-scale.css b/src/_type-scale.css
index fdac5f17f..673b54caf 100644
--- a/src/_type-scale.css
+++ b/src/_type-scale.css
@@ -1,7 +1,7 @@
-/*
+/*
TYPE SCALE
- Docs: http://tachyons.io/docs/type-scale
+ Docs: http://tachyons.io/docs/typography/scale/
Base:
f = font-size
@@ -14,75 +14,82 @@
5 = 5th step in size scale
6 = 6th step in size scale
7 = 7th step in size scale
- 8 = 8th step in size scale
- 9 = 9th step in size scale
- 10 = 10th step in size scale
- 11 = 11th step in size scale
- 12 = 12th step in size scale
Media Query Extensions:
- -s = small
+ -ns = not-small
-m = medium
-l = large
*/
-/* Type Scale */
+/*
+ * For Hero/Marketing Titles
+ *
+ * These generally are too large for mobile
+ * so be careful using them on smaller screens.
+ * */
+
+.f-6,
+.f-headline {
+ font-size: 6rem;
+}
+.f-5,
+.f-subheadline {
+ font-size: 5rem;
+}
+
-.f1 { font-size: var(--font-size-1, .75rem); }
-.f2 { font-size: var(--font-size-2, .875rem); }
-.f3 { font-size: var(--font-size-3, 1rem); }
-.f4 { font-size: var(--font-size-4, 1.125rem); }
-.f5 { font-size: var(--font-size-5, 1.25rem); }
-.f6 { font-size: var(--font-size-6, 1.5rem); }
-.f7 { font-size: var(--font-size-7, 2rem); }
-.f8 { font-size: var(--font-size-8, 3rem); }
-.f9 { font-size: var(--font-size-9, 4rem); }
-.f10 { font-size: var(--font-size-10, 6rem); }
-.f11 { font-size: var(--font-size-11, 8rem); }
-.f12 { font-size: var(--font-size-12, 12rem); }
+/* Type Scale */
+.f1 { font-size: 3rem; }
+.f2 { font-size: 2.25rem; }
+.f3 { font-size: 1.5rem; }
+.f4 { font-size: 1.25rem; }
+.f5 { font-size: 1rem; }
+.f6 { font-size: .875rem; }
+.f7 { font-size: .75rem; } /* Small and hard to read for many people so use with extreme caution */
-@container (min-width:30em){
- .f1-s { font-size: var(--font-size-1, .75rem); }
- .f2-s { font-size: var(--font-size-2, .875rem); }
- .f3-s { font-size: var(--font-size-3, 1rem); }
- .f4-s { font-size: var(--font-size-4, 1.125rem); }
- .f5-s { font-size: var(--font-size-5, 1.25rem); }
- .f6-s { font-size: var(--font-size-6, 1.5rem); }
- .f7-s { font-size: var(--font-size-7, 2rem); }
- .f8-s { font-size: var(--font-size-8, 3rem); }
- .f9-s { font-size: var(--font-size-9, 4rem); }
- .f10-s { font-size: var(--font-size-10, 6rem); }
- .f11-s { font-size: var(--font-size-11, 8rem); }
- .f12-s { font-size: var(--font-size-12, 12rem); }
+@media (--breakpoint-not-small){
+ .f-6-ns,
+ .f-headline-ns { font-size: 6rem; }
+ .f-5-ns,
+ .f-subheadline-ns { font-size: 5rem; }
+ .f1-ns { font-size: 3rem; }
+ .f2-ns { font-size: 2.25rem; }
+ .f3-ns { font-size: 1.5rem; }
+ .f4-ns { font-size: 1.25rem; }
+ .f5-ns { font-size: 1rem; }
+ .f6-ns { font-size: .875rem; }
+ .f7-ns { font-size: .75rem; }
}
-@container (min-width:48em) {
- .f1-m { font-size: var(--font-size-1, .75rem); }
- .f2-m { font-size: var(--font-size-2, .875rem); }
- .f3-m { font-size: var(--font-size-3, 1rem); }
- .f4-m { font-size: var(--font-size-4, 1.125rem); }
- .f5-m { font-size: var(--font-size-5, 1.25rem); }
- .f6-m { font-size: var(--font-size-6, 1.5rem); }
- .f7-m { font-size: var(--font-size-7, 2rem); }
- .f8-m { font-size: var(--font-size-8, 3rem); }
- .f9-m { font-size: var(--font-size-9, 4rem); }
- .f10-m { font-size: var(--font-size-10, 6rem); }
- .f11-m { font-size: var(--font-size-11, 8rem); }
- .f12-m { font-size: var(--font-size-12, 12rem); }
+@media (--breakpoint-medium) {
+ .f-6-m,
+ .f-headline-m { font-size: 6rem; }
+ .f-5-m,
+ .f-subheadline-m { font-size: 5rem; }
+ .f1-m { font-size: 3rem; }
+ .f2-m { font-size: 2.25rem; }
+ .f3-m { font-size: 1.5rem; }
+ .f4-m { font-size: 1.25rem; }
+ .f5-m { font-size: 1rem; }
+ .f6-m { font-size: .875rem; }
+ .f7-m { font-size: .75rem; }
}
-@container (min-width:64em) {
- .f1-l { font-size: var(--font-size-1, .75rem); }
- .f2-l { font-size: var(--font-size-2, .875rem); }
- .f3-l { font-size: var(--font-size-3, 1rem); }
- .f4-l { font-size: var(--font-size-4, 1.125rem); }
- .f5-l { font-size: var(--font-size-5, 1.25rem); }
- .f6-l { font-size: var(--font-size-6, 1.5rem); }
- .f7-l { font-size: var(--font-size-7, 2rem); }
- .f8-l { font-size: var(--font-size-8, 3rem); }
- .f9-l { font-size: var(--font-size-9, 4rem); }
- .f10-l { font-size: var(--font-size-10, 6rem); }
- .f11-l { font-size: var(--font-size-11, 8rem); }
- .f12-l { font-size: var(--font-size-12, 12rem); }
+@media (--breakpoint-large) {
+ .f-6-l,
+ .f-headline-l {
+ font-size: 6rem;
+ }
+ .f-5-l,
+ .f-subheadline-l {
+ font-size: 5rem;
+ }
+ .f1-l { font-size: 3rem; }
+ .f2-l { font-size: 2.25rem; }
+ .f3-l { font-size: 1.5rem; }
+ .f4-l { font-size: 1.25rem; }
+ .f5-l { font-size: 1rem; }
+ .f6-l { font-size: .875rem; }
+ .f7-l { font-size: .75rem; }
}
diff --git a/src/_typography.css b/src/_typography.css
index e430892b0..4a4103840 100644
--- a/src/_typography.css
+++ b/src/_typography.css
@@ -4,26 +4,27 @@
http://tachyons.io/docs/typography/measure/
Media Query Extensions:
- -s = small
+ -ns = not-small
-m = medium
-l = large
*/
-/* Measure is limited to 66 characters */
+
+/* Measure is limited to ~66 characters */
.measure {
- max-width: var(--measure, 66ch);
+ max-width: 30em;
}
/* Measure is limited to ~80 characters */
.measure-wide {
- max-width: var(--measure-wide, 80ch);
+ max-width: 34em;
}
-/* Measure is limited to 45 characters */
+/* Measure is limited to ~45 characters */
.measure-narrow {
- max-width: var(--measure-narrow, 45ch);
+ max-width: 20em;
}
/* Book paragraph style - paragraphs are indented with no vertical spacing. */
@@ -45,33 +46,49 @@
text-overflow: ellipsis;
}
-@container (min-width:30em) {
- .measure-s { max-width: var(--measure, 66ch); }
- .measure-wide-s { max-width: var(--measure-wide, 80ch); }
- .measure-narrow-s { max-width: var(--measure-narrow, 45ch); }
- .small-caps-s { font-variant: small-caps; }
- .indent-s {
+@media (--breakpoint-not-small) {
+ .measure-ns {
+ max-width: 30em;
+ }
+ .measure-wide-ns {
+ max-width: 34em;
+ }
+ .measure-narrow-ns {
+ max-width: 20em;
+ }
+ .indent-ns {
text-indent: 1em;
margin-top: 0;
margin-bottom: 0;
}
- .truncate-s {
+ .small-caps-ns {
+ font-variant: small-caps;
+ }
+ .truncate-ns {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
-@container (min-width:48em) {
- .measure-m { max-width: var(--measure, 66ch); }
- .measure-wide-m { max-width: var(--measure-wide, 80ch); }
- .measure-narrow-m { max-width: var(--measure-narrow, 45ch); }
- .small-caps-m { font-variant: small-caps; }
+@media (--breakpoint-medium) {
+ .measure-m {
+ max-width: 30em;
+ }
+ .measure-wide-m {
+ max-width: 34em;
+ }
+ .measure-narrow-m {
+ max-width: 20em;
+ }
.indent-m {
text-indent: 1em;
margin-top: 0;
margin-bottom: 0;
}
+ .small-caps-m {
+ font-variant: small-caps;
+ }
.truncate-m {
white-space: nowrap;
overflow: hidden;
@@ -79,16 +96,24 @@
}
}
-@container (min-width:64em) {
- .measure-l { max-width: var(--measure, 66ch); }
- .measure-wide-l { max-width: var(--measure-wide, 80ch); }
- .measure-narrow-l { max-width: var(--measure-narrow, 45ch); }
- .small-caps-l { font-variant: small-caps; }
+@media (--breakpoint-large) {
+ .measure-l {
+ max-width: 30em;
+ }
+ .measure-wide-l {
+ max-width: 34em;
+ }
+ .measure-narrow-l {
+ max-width: 20em;
+ }
.indent-l {
text-indent: 1em;
margin-top: 0;
margin-bottom: 0;
}
+ .small-caps-l {
+ font-variant: small-caps;
+ }
.truncate-l {
white-space: nowrap;
overflow: hidden;
diff --git a/src/_utilities.css b/src/_utilities.css
index 6f5b92591..6dc7c55fe 100644
--- a/src/_utilities.css
+++ b/src/_utilities.css
@@ -3,12 +3,17 @@
UTILITIES
Media Query Extensions:
- -s = small
+ -ns = not-small
-m = medium
-l = large
*/
+/* Equivalent to .overflow-y-scroll */
+.overflow-container {
+ overflow-y: scroll;
+}
+
.center {
margin-right: auto;
margin-left: auto;
@@ -17,16 +22,16 @@
.mr-auto { margin-right: auto; }
.ml-auto { margin-left: auto; }
-@container (min-width:30em){
- .center-s {
+@media (--breakpoint-not-small){
+ .center-ns {
margin-right: auto;
margin-left: auto;
}
- .mr-auto-s { margin-right: auto; }
- .ml-auto-s { margin-left: auto; }
+ .mr-auto-ns { margin-right: auto; }
+ .ml-auto-ns { margin-left: auto; }
}
-@container (min-width:48em){
+@media (--breakpoint-medium){
.center-m {
margin-right: auto;
margin-left: auto;
@@ -35,7 +40,7 @@
.ml-auto-m { margin-left: auto; }
}
-@container (min-width:64em){
+@media (--breakpoint-large){
.center-l {
margin-right: auto;
margin-left: auto;
diff --git a/src/_variables.css b/src/_variables.css
deleted file mode 100644
index 9100a5abe..000000000
--- a/src/_variables.css
+++ /dev/null
@@ -1,392 +0,0 @@
-/*
-
- VARIABLES
-
-
-*/
-
-:root {
-
- /*
- * COLORS
- * A balanced color system optimized for accessibility
- * Theme generated with https://components.ai/theme
- * The first six steps in each scale are accessible with white
- *
- */
-
- --tint-0: hsla(0, 0%, 100%, 0.035);
- --tint-1: hsla(0, 0%, 100%, 0.1);
- --tint-2: hsla(0, 0%, 100%, 0.19);
- --tint-3: hsla(0, 0%, 100%, 0.28);
- --tint-4: hsla(0, 0%, 100%, 0.36);
- --tint-5: hsla(0, 0%, 100%, 0.45);
- --tint-6: hsla(0, 0%, 100%, 0.55);
- --tint-7: hsla(0, 0%, 100%, 0.64);
- --tint-8: hsla(0, 0%, 100%, 0.73);
- --tint-9: hsla(0, 0%, 100%, 0.815);
- --tint-10: hsla(0, 0%, 100%, 0.895);
- --tint-11: hsla(0, 0%, 100%, 0.94);
- --shadow-11: hsla(0, 0%, 0%, 0.94);
- --shadow-10: hsla(0, 0%, 0%, 0.895);
- --shadow-9: hsla(0, 0%, 0%, 0.815);
- --shadow-8: hsla(0, 0%, 0%, 0.73);
- --shadow-7: hsla(0, 0%, 0%, 0.64);
- --shadow-6: hsla(0, 0%, 0%, 0.55);
- --shadow-5: hsla(0, 0%, 0%, 0.45);
- --shadow-4: hsla(0, 0%, 0%, 0.36);
- --shadow-3: hsla(0, 0%, 0%, 0.28);
- --shadow-2: hsla(0, 0%, 0%, 0.19);
- --shadow-1: hsla(0, 0%, 0%, 0.1);
- --shadow-0: hsla(0, 0%, 0%, 0.035);
- --gray-0: #000000;
- --gray-1: #171717;
- --gray-2: #2f2f2f;
- --gray-3: #464646;
- --gray-4: #5e5e5e;
- --gray-5: #757575;
- --gray-6: #8c8c8c;
- --gray-7: #a3a3a3;
- --gray-8: #bababa;
- --gray-9: #d1d1d1;
- --gray-10: #e8e8e8;
- --gray-11: #ffffff;
- --slate-gray-0: #09090b;
- --slate-gray-1: #1d1d22;
- --slate-gray-2: #313138;
- --slate-gray-3: #45444f;
- --slate-gray-4: #595866;
- --slate-gray-5: #6d6c7d;
- --slate-gray-6: #838292;
- --slate-gray-7: #9a9aa7;
- --slate-gray-8: #b2b1bb;
- --slate-gray-9: #c9c9d0;
- --slate-gray-10: #e1e0e4;
- --slate-gray-11: #f8f8f9;
- --blue-1: #071e3f;
- --blue-2: #0c3166;
- --blue-3: #10448d;
- --blue-4: #1556b4;
- --blue-5: #1969db;
- --blue-6: #317fed;
- --blue-7: #5797f0;
- --blue-8: #7daef4;
- --blue-9: #a3c6f7;
- --blue-10: #c9ddfa;
- --blue-11: #eff5fe;
- --indigo-0: #080614;
- --indigo-1: #19143f;
- --indigo-2: #2a216a;
- --indigo-3: #3a2e95;
- --indigo-4: #4b3bc0;
- --indigo-5: #5c49eb;
- --indigo-6: #725fff;
- --indigo-7: #8c7cff;
- --indigo-8: #a69aff;
- --indigo-9: #c0b7ff;
- --indigo-10: #dad5ff;
- --indigo-11: #f4f3ff;
- --violet-0: #110517;
- --violet-1: #2e0d3e;
- --violet-2: #4b1465;
- --violet-3: #681c8c;
- --violet-4: #8424b3;
- --violet-5: #a12cda;
- --violet-6: #b543ec;
- --violet-7: #c366f0;
- --violet-8: #d089f3;
- --violet-9: #deabf7;
- --violet-10: #eccefa;
- --violet-11: #f9f0fe;
- --magenta-0: #13040f;
- --magenta-1: #350a2c;
- --magenta-2: #581148;
- --magenta-3: #7b1765;
- --magenta-4: #9e1e82;
- --magenta-5: #c1249e;
- --magenta-6: #d43cb2;
- --magenta-7: #dc61c1;
- --magenta-8: #e485cf;
- --magenta-9: #eca9dd;
- --magenta-10: #f4ceec;
- --magenta-11: #fcf2fa;
- --red-0: #120205;
- --red-1: #39050f;
- --red-2: #5f0819;
- --red-3: #860b24;
- --red-4: #ac0e2e;
- --red-5: #d31138;
- --red-6: #e7284e;
- --red-7: #ec506f;
- --red-8: #f07790;
- --red-9: #f49fb0;
- --red-10: #f9c7d1;
- --red-11: #fdeef1;
- --red-orange-0: #190b05;
- --red-orange-1: #3d1307;
- --red-orange-2: #601b0a;
- --red-orange-3: #84240c;
- --red-orange-4: #a72c0e;
- --red-orange-5: #cb3411;
- --red-orange-6: #ee3c13;
- --red-orange-7: #fe562f;
- --red-orange-8: #fe7d5e;
- --red-orange-9: #ffa48e;
- --red-orange-10: #ffccbe;
- --red-orange-11: #fff3ee;
- --orange-0: #150d04;
- --orange-1: #2e1c08;
- --orange-2: #472a0c;
- --orange-3: #603910;
- --orange-4: #794714;
- --orange-5: #a65d13;
- --orange-6: #d37413;
- --orange-7: #ff8a14;
- --orange-8: #ffa54a;
- --orange-9: #ffc081;
- --orange-10: #ffdab7;
- --orange-11: #fff5ed;
- --gold-0: #140e05;
- --gold-1: #2c1f0a;
- --gold-2: #432f0e;
- --gold-3: #5b4013;
- --gold-4: #725118;
- --gold-5: #946818;
- --gold-6: #d4950d;
- --gold-7: #eeb028;
- --gold-8: #f2c259;
- --gold-9: #f7d38a;
- --gold-10: #fbe5bc;
- --gold-11: #fff5e9;
- --yellow-0: #111006;
- --yellow-1: #252405;
- --yellow-2: #3a3804;
- --yellow-3: #4e4d03;
- --yellow-4: #636101;
- --yellow-5: #777500;
- --yellow-6: #ccc500;
- --yellow-7: #fcf433;
- --yellow-8: #fdf67a;
- --yellow-9: #fdf89b;
- --yellow-10: #fef9bb;
- --yellow-11: #fefadb;
- --green-0: #091108;
- --green-1: #0f2611;
- --green-2: #153c1a;
- --green-3: #1b5122;
- --green-4: #21662b;
- --green-5: #25833a;
- --green-6: #26b056;
- --green-7: #35d272;
- --green-8: #63dd90;
- --green-9: #90e8ae;
- --green-10: #bdf3cc;
- --green-11: #eafeea;
- --teal-0: #07100c;
- --teal-1: #0c231a;
- --teal-2: #113628;
- --teal-3: #164936;
- --teal-4: #1b5b45;
- --teal-5: #177f63;
- --teal-6: #12a282;
- --teal-7: #2abb9b;
- --teal-8: #5acab1;
- --teal-9: #8bdac7;
- --teal-10: #bbe9dc;
- --teal-11: #ecf8f2;
- --cyan-0: #0a1211;
- --cyan-1: #102425;
- --cyan-2: #153639;
- --cyan-3: #1b484c;
- --cyan-4: #215a60;
- --cyan-5: #247981;
- --cyan-6: #24a9b6;
- --cyan-7: #28d6e6;
- --cyan-8: #57e0ec;
- --cyan-9: #85eaf2;
- --cyan-10: #b4f5f9;
- --cyan-11: #e2ffff;
- --transparent: hsla(0,0,0,0);
-
- @supports (color: color(display-p3 1 1 1)) {
- :root {
- --blue-0: color(display-p3 0 0.07 0.25);
- --blue-1: color(display-p3 0 0.09 0.32);
- --blue-2: color(display-p3 0 0.11 0.42);
- --blue-3: color(display-p3 0 0.15 0.53);
- --blue-4: color(display-p3 0 0.16 0.7);
- --blue-5: color(display-p3 0 0.22 0.88);
- --blue-6: color(display-p3 0.06 0.37 1);
- --blue-7: color(display-p3 0.38 0.59 1 );
- --blue-8: color(display-p3 0.66 0.79 1);
- --blue-9: color(display-p3 0.79 0.86 0.99);
- --blue-10: color(display-p3 0.87 0.92 0.99);
- --blue-11: color(display-p3 0.92 0.95 1);
- --indigo-0: color(display-p3 0.06 0.03 0.21);
- --indigo-1: color(display-p3 0.09 0.07 0.26);
- --indigo-2: color(display-p3 0.15 0.11 0.42);
- --indigo-3: color(display-p3 0.18 0.14 0.57);
- --indigo-4: color(display-p3 0.2 0.18 0.75);
- --indigo-5: color(display-p3 0.26 0.22 1);
- --indigo-6: color(display-p3 0.28 0.28 1);
- --indigo-7: color(display-p3 0.47 0.49 1);
- --indigo-8: color(display-p3 0.67 0.68 1);
- --indigo-9: color(display-p3 0.81 0.81 0.98);
- --indigo-10: color(display-p3 0.87 0.92 0.99);
- --indigo-11: color(display-p3 0.92 0.95 1);
- }
- }
-
- --degrees-1: 0;
- --degrees-2: 45deg;
- --degrees-3: 90deg;
- --degrees-4: 135deg;
- --degrees-5: 180deg;
- --degrees-6: 225deg;
- --degrees-7: 270deg;
- --degrees-8: 315deg;
-
- --gradient-degree-0: var(--degrees-1, 0);
- --gradient-degree: var(--degrees-2, 45deg);
- --gradient-degree-2: var(--degrees-4, 135deg);
-
- --gradient-stripe-width: 12px;
- --gradient-stripe-width-2: var(--border-width-1);
-
- --gradient-color-1: var(--blue-2);
- --gradient-color-2: var(--magenta-6);
- --gradient-color-3: var(--red-5);
- --gradient-color-4: var(--indigo-5);
- --gradient-color-5: var(--violet-0);
- --gradient-color-6: var(--violet-5);
- --gradient-color-7: var(--magenta-0);
- --gradient-color-8: var(--magenta-5);
- --gradient-color-9: var(--red-0);
- --gradient-color-10: var(--red-5);
- --gradient-color-11: var(--red-orange-0);
- --gradient-color-12: var(--red-orange-5);
- --gradient-color-13: var(--orange-0);
- --gradient-color-14: var(--orange-5);
- --gradient-color-15: var(--gold-0);
- --gradient-color-16: var(--gold-5);
- --gradient-color-17: var(--yellow-0);
- --gradient-color-18: var(--yellow-5);
- --gradient-color-19: var(--green-0);
- --gradient-color-20: var(--green-5);
- --gradient-color-21: var(--teal-0);
- --gradient-color-22: var(--teal-5);
- --gradient-color-23: var(--cyan-0);
- --gradient-color-24: var(--cyan-5);
-
- --gradient-stop: 50%;
-
- --font-size-1: 12px;
- --font-size-2: 14px;
- --font-size-3: 16px;
- --font-size-4: 20px;
- --font-size-5: 24px;
- --font-size-6: 32px;
- --font-size-7: 48px;
- --font-size-8: 64px;
- --font-size-9: 96px;
- --font-size-10: 128px;
- --font-size-11: 192px;
- --font-size-12: 256px;
-
- --measure-narrow: 45ch;
- --measure: 66ch;
- --measure-wide: 80ch;
-
- --border-radius-0: 0;
- --border-radius-1: 4px;
- --border-radius-2: 6px;
- --border-radius-3: 8px;
- --border-radius-4: 12px;
- --border-radius-5: 16px;
- --border-radius-6: 20px;
- --border-radius-7: 24px;
- --border-radius-8: 32px;
- --border-radius-9: 48px;
- --border-radius-10: 64px;
- --border-radius-11: 9999px;
- --border-radius: var(--border-radius-2);
-
- --border-width-0: 0;
- --border-width-1: 1px;
- --border-width-2: 2px;
- --border-width-3: 4px;
- --border-width-4: 8px;
- --border-width-5: 16px;
-
- --border-width: var(--border-width-1,1px);
- --border-color: var(--gray-5, gray);
-
- --line-height-solid: 1;
- --line-height-heading: 1.25;
- --line-height-body: 1.5;
-
- --letter-spacing-tracked: 0.1em;
- --letter-spacing-tight: -0.05em;
- --letter-spacing-large: 0.25em;
-
- --font-family-heading: Inter, -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
- --font-family-body: Inter, -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
- --font-family-mono: Inconsolata, Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
-
- --spacing-0: 0;
- --spacing-1: 2px;
- --spacing-2: 4px;
- --spacing-3: 8px;
- --spacing-4: 16px;
- --spacing-5: 32px;
- --spacing-6: 64px;
- --spacing-7: 128px;
- --spacing-8: 256px;
- --spacing-9: 512px;
-
- --size-0: 0;
- --size-1: 1rem;
- --size-2: 2rem;
- --size-3: 3rem;
- --size-4: 4rem;
- --size-5: 8rem;
- --size-6: 16rem;
- --size-7: 32rem;
- --size-8: 64rem;
-
- --shadow-color: 0 0 0;
- --shadow-color-invert: 255 255 255;
- --shadow-border-width: 1px;
- --shadow-opacity: .25;
-
- /* Opacity scale */
-
- --opacity-0: 0;
- --opacity-1: .025;
- --opacity-2: .05;
- --opacity-3: .1;
- --opacity-4: .2;
- --opacity-5: .3;
- --opacity-6: .4;
- --opacity-7: .5;
- --opacity-8: .6;
- --opacity-9: .7;
- --opacity-10: .8;
- --opacity-11: .9;
- --opacity-12: 1;
-
- --duration-0: 125ms;
- --duration-1: 250ms;
- --duration-2: 500ms;
-
- --easing-function-0: cubic-bezier(0.543, 1.086, 0.5, -0.383);
- --easing-function-1: ease;
- --easing-function-2: ease-out;
- --easing-function-3: ease-in-out;
- --easing-function-4: linear;
-
-}
-
-@media (prefers-color-scheme: dark) {
- --shadow-color: 255 255 255;
-}
diff --git a/src/_vertical-align.css b/src/_vertical-align.css
index 650183fec..83f911484 100644
--- a/src/_vertical-align.css
+++ b/src/_vertical-align.css
@@ -3,7 +3,7 @@
VERTICAL ALIGN
Media Query Extensions:
- -s = small
+ -ns = not-small
-m = medium
-l = large
@@ -14,21 +14,21 @@
.v-top { vertical-align: top; }
.v-btm { vertical-align: bottom; }
-@container (min-width:30em) {
- .v-base-s { vertical-align: baseline; }
- .v-mid-s { vertical-align: middle; }
- .v-top-s { vertical-align: top; }
- .v-btm-s { vertical-align: bottom; }
+@media (--breakpoint-not-small) {
+ .v-base-ns { vertical-align: baseline; }
+ .v-mid-ns { vertical-align: middle; }
+ .v-top-ns { vertical-align: top; }
+ .v-btm-ns { vertical-align: bottom; }
}
-@container (min-width:48em) {
+@media (--breakpoint-medium) {
.v-base-m { vertical-align: baseline; }
.v-mid-m { vertical-align: middle; }
.v-top-m { vertical-align: top; }
.v-btm-m { vertical-align: bottom; }
}
-@container (min-width:64em) {
+@media (--breakpoint-large) {
.v-base-l { vertical-align: baseline; }
.v-mid-l { vertical-align: middle; }
.v-top-l { vertical-align: top; }
diff --git a/src/_visibility.css b/src/_visibility.css
index c1a393022..f5a8c44b6 100644
--- a/src/_visibility.css
+++ b/src/_visibility.css
@@ -3,7 +3,7 @@
VISIBILITY
Media Query Extensions:
- -s = small
+ -ns = not-small
-m = medium
-l = large
@@ -12,56 +12,40 @@
/*
Text that is hidden but accessible
- Ref: https://accessibility.18f.gov/hidden-content/
+ Ref: http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*/
.clip {
- border: 0;
- clip: rect(0 0 0 0);
- height: 1px;
- margin: -1px;
- overflow: hidden;
- padding: 0;
- position: absolute;
- width: 1px;
+ position: fixed !important;
+ _position: absolute !important;
+ clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+ clip: rect(1px, 1px, 1px, 1px);
}
-@container (min-width:30em) {
- .clip-s {
- border: 0;
- clip: rect(0 0 0 0);
- height: 1px;
- margin: -1px;
- overflow: hidden;
- padding: 0;
- position: absolute;
- width: 1px;
+@media (--breakpoint-not-small) {
+ .clip-ns {
+ position: fixed !important;
+ _position: absolute !important;
+ clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+ clip: rect(1px, 1px, 1px, 1px);
}
}
-@container (min-width:48em) {
+@media (--breakpoint-medium) {
.clip-m {
- border: 0;
- clip: rect(0 0 0 0);
- height: 1px;
- margin: -1px;
- overflow: hidden;
- padding: 0;
- position: absolute;
- width: 1px;
+ position: fixed !important;
+ _position: absolute !important;
+ clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+ clip: rect(1px, 1px, 1px, 1px);
}
}
-@container (min-width:64em) {
+@media (--breakpoint-large) {
.clip-l {
- border: 0;
- clip: rect(0 0 0 0);
- height: 1px;
- margin: -1px;
- overflow: hidden;
- padding: 0;
- position: absolute;
- width: 1px;
+ position: fixed !important;
+ _position: absolute !important;
+ clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+ clip: rect(1px, 1px, 1px, 1px);
}
}
diff --git a/src/_white-space.css b/src/_white-space.css
index bc22a2ab8..3902f1f7c 100644
--- a/src/_white-space.css
+++ b/src/_white-space.css
@@ -3,7 +3,7 @@
WHITE SPACE
Media Query Extensions:
- -s = small
+ -ns = not-small
-m = medium
-l = large
@@ -14,19 +14,19 @@
.nowrap { white-space: nowrap; }
.pre { white-space: pre; }
-@container (min-width:30em) {
- .ws-normal-s { white-space: normal; }
- .nowrap-s { white-space: nowrap; }
- .pre-s { white-space: pre; }
+@media (--breakpoint-not-small) {
+ .ws-normal-ns { white-space: normal; }
+ .nowrap-ns { white-space: nowrap; }
+ .pre-ns { white-space: pre; }
}
-@container (min-width:48em) {
+@media (--breakpoint-medium) {
.ws-normal-m { white-space: normal; }
.nowrap-m { white-space: nowrap; }
.pre-m { white-space: pre; }
}
-@container (min-width:64em) {
+@media (--breakpoint-large) {
.ws-normal-l { white-space: normal; }
.nowrap-l { white-space: nowrap; }
.pre-l { white-space: pre; }
diff --git a/src/_widths.css b/src/_widths.css
index 3814ebf99..bfbd5163a 100644
--- a/src/_widths.css
+++ b/src/_widths.css
@@ -12,9 +12,6 @@
3 = 3rd step in width scale
4 = 4th step in width scale
5 = 5th step in width scale
- 6 = 6th step in width scale
- 7 = 7th step in width scale
- 8 = 8th step in width scale
-10 = literal value 10%
-20 = literal value 20%
@@ -37,7 +34,7 @@
Media Query Extensions:
- -s = small
+ -ns = not-small
-m = medium
-l = large
@@ -45,84 +42,100 @@
/* Width Scale */
-.w0 { width: var(--size-0, 0); }
-.w1 { width: var(--size-1, 1rem); }
-.w2 { width: var(--size-2, 2rem); }
-.w3 { width: var(--size-3, 3rem); }
-.w4 { width: var(--size-4, 4rem); }
-.w5 { width: var(--size-5, 8rem); }
-.w6 { width: var(--size-6, 16rem); }
-.w7 { width: var(--size-7, 32rem); }
-.w8 { width: var(--size-8, 64rem); }
+.w1 { width: 1rem; }
+.w2 { width: 2rem; }
+.w3 { width: 4rem; }
+.w4 { width: 8rem; }
+.w5 { width: 16rem; }
.w-10 { width: 10%; }
.w-20 { width: 20%; }
.w-25 { width: 25%; }
+.w-30 { width: 30%; }
+.w-33 { width: 33%; }
+.w-34 { width: 34%; }
+.w-40 { width: 40%; }
.w-50 { width: 50%; }
+.w-60 { width: 60%; }
+.w-70 { width: 70%; }
.w-75 { width: 75%; }
+.w-80 { width: 80%; }
+.w-90 { width: 90%; }
.w-100 { width: 100%; }
.w-third { width: calc(100% / 3); }
.w-two-thirds { width: calc(100% / 1.5); }
.w-auto { width: auto; }
-@container (min-width:30em) {
- .w0-s { width: var(--size-0, 0); }
- .w1-s { width: var(--size-1, 1rem); }
- .w2-s { width: var(--size-2, 2rem); }
- .w3-s { width: var(--size-3, 3rem); }
- .w4-s { width: var(--size-4, 4rem); }
- .w5-s { width: var(--size-5, 8rem); }
- .w6-s { width: var(--size-6, 16rem); }
- .w7-s { width: var(--size-7, 32rem); }
- .w8-s { width: var(--size-8, 64rem); }
- .w-10-s { width: 10%; }
- .w-20-s { width: 20%; }
- .w-25-s { width: 25%; }
- .w-50-s { width: 50%; }
- .w-75-s { width: 75%; }
- .w-100-s { width: 100%; }
- .w-third-s { width: calc(100% / 3); }
- .w-two-thirds-s { width: calc(100% / 1.5); }
- .w-auto-s { width: auto; }
+@media (--breakpoint-not-small) {
+ .w1-ns { width: 1rem; }
+ .w2-ns { width: 2rem; }
+ .w3-ns { width: 4rem; }
+ .w4-ns { width: 8rem; }
+ .w5-ns { width: 16rem; }
+ .w-10-ns { width: 10%; }
+ .w-20-ns { width: 20%; }
+ .w-25-ns { width: 25%; }
+ .w-30-ns { width: 30%; }
+ .w-33-ns { width: 33%; }
+ .w-34-ns { width: 34%; }
+ .w-40-ns { width: 40%; }
+ .w-50-ns { width: 50%; }
+ .w-60-ns { width: 60%; }
+ .w-70-ns { width: 70%; }
+ .w-75-ns { width: 75%; }
+ .w-80-ns { width: 80%; }
+ .w-90-ns { width: 90%; }
+ .w-100-ns { width: 100%; }
+ .w-third-ns { width: calc(100% / 3); }
+ .w-two-thirds-ns { width: calc(100% / 1.5); }
+ .w-auto-ns { width: auto; }
}
-@container (min-width:48em) {
- .w0-m { width: var(--size-0, 0); }
- .w1-m { width: var(--size-1, 1rem); }
- .w2-m { width: var(--size-2, 2rem); }
- .w3-m { width: var(--size-3, 3rem); }
- .w4-m { width: var(--size-4, 4rem); }
- .w5-m { width: var(--size-5, 8rem); }
- .w6-m { width: var(--size-6, 16rem); }
- .w7-m { width: var(--size-7, 32rem); }
- .w8-m { width: var(--size-8, 64rem); }
+@media (--breakpoint-medium) {
+ .w1-m { width: 1rem; }
+ .w2-m { width: 2rem; }
+ .w3-m { width: 4rem; }
+ .w4-m { width: 8rem; }
+ .w5-m { width: 16rem; }
.w-10-m { width: 10%; }
.w-20-m { width: 20%; }
.w-25-m { width: 25%; }
+ .w-30-m { width: 30%; }
+ .w-33-m { width: 33%; }
+ .w-34-m { width: 34%; }
+ .w-40-m { width: 40%; }
.w-50-m { width: 50%; }
+ .w-60-m { width: 60%; }
+ .w-70-m { width: 70%; }
.w-75-m { width: 75%; }
+ .w-80-m { width: 80%; }
+ .w-90-m { width: 90%; }
.w-100-m { width: 100%; }
.w-third-m { width: calc(100% / 3); }
.w-two-thirds-m { width: calc(100% / 1.5); }
.w-auto-m { width: auto; }
}
-@container (min-width:64em) {
- .w0-l { width: var(--size-0, 0); }
- .w1-l { width: var(--size-1, 1rem); }
- .w2-l { width: var(--size-2, 2rem); }
- .w3-l { width: var(--size-3, 3rem); }
- .w4-l { width: var(--size-4, 4rem); }
- .w5-l { width: var(--size-5, 8rem); }
- .w6-l { width: var(--size-6, 16rem); }
- .w7-l { width: var(--size-7, 32rem); }
- .w8-l { width: var(--size-8, 64rem); }
+@media (--breakpoint-large) {
+ .w1-l { width: 1rem; }
+ .w2-l { width: 2rem; }
+ .w3-l { width: 4rem; }
+ .w4-l { width: 8rem; }
+ .w5-l { width: 16rem; }
.w-10-l { width: 10%; }
.w-20-l { width: 20%; }
.w-25-l { width: 25%; }
+ .w-30-l { width: 30%; }
+ .w-33-l { width: 33%; }
+ .w-34-l { width: 34%; }
+ .w-40-l { width: 40%; }
.w-50-l { width: 50%; }
+ .w-60-l { width: 60%; }
+ .w-70-l { width: 70%; }
.w-75-l { width: 75%; }
+ .w-80-l { width: 80%; }
+ .w-90-l { width: 90%; }
.w-100-l { width: 100%; }
.w-third-l { width: calc(100% / 3); }
.w-two-thirds-l { width: calc(100% / 1.5); }
diff --git a/src/_word-break.css b/src/_word-break.css
index ee764de43..bc88931a0 100644
--- a/src/_word-break.css
+++ b/src/_word-break.css
@@ -6,7 +6,7 @@
word = word-break
Media Query Extensions:
- -s = small
+ -ns = not-small
-m = medium
-l = large
@@ -16,19 +16,19 @@
.word-wrap { word-break: break-all; }
.word-nowrap { word-break: keep-all; }
-@container (min-width:30em) {
- .word-normal-s { word-break: normal; }
- .word-wrap-s { word-break: break-all; }
- .word-nowrap-s { word-break: keep-all; }
+@media (--breakpoint-not-small) {
+ .word-normal-ns { word-break: normal; }
+ .word-wrap-ns { word-break: break-all; }
+ .word-nowrap-ns { word-break: keep-all; }
}
-@container (min-width:48em) {
+@media (--breakpoint-medium) {
.word-normal-m { word-break: normal; }
.word-wrap-m { word-break: break-all; }
.word-nowrap-m { word-break: keep-all; }
}
-@container (min-width:64em) {
+@media (--breakpoint-large) {
.word-normal-l { word-break: normal; }
.word-wrap-l { word-break: break-all; }
.word-nowrap-l { word-break: keep-all; }
diff --git a/src/tachyons.css b/src/tachyons.css
index b7f8b6822..115e63d7e 100644
--- a/src/tachyons.css
+++ b/src/tachyons.css
@@ -1,4 +1,4 @@
-/*! TACHYONS v5.0.0.beta | http://tachyons.io */
+/*! TACHYONS v4.12.0 | http://tachyons.io */
/*
*
@@ -27,18 +27,9 @@
/* External Library Includes */
@import './_normalize';
-/* Variables */
-/* Importing here will allow you to override any variables in the modules */
-@import './_media-queries';
-@import './_variables';
-
-@import './_gradients';
-
/* Modules */
@import './_box-sizing';
-@import './_container-type';
-@import './_all';
@import './_aspect-ratios';
@import './_images';
@import './_background-size';
@@ -50,29 +41,11 @@
@import './_border-style';
@import './_border-widths';
@import './_box-shadow';
-@import './_text-shadow';
@import './_code';
@import './_coordinates';
@import './_clears';
@import './_display';
-@import './_glass';
-@import './_gap';
-@import './_gap-column';
-@import './_gap-row';
-@import './_grid-template-columns';
-@import './_grid-column';
-@import './_grid-row';
-@import './_backdrop-filters';
-@import './_filters';
@import './_flexbox';
-@import './_flex-direction';
-@import './_flex-wrap';
-@import './_align-items';
-@import './_align-content';
-@import './_align-self';
-@import './_justify-self';
-@import './_justify-content';
-@import './_order';
@import './_floats';
@import './_font-family';
@import './_font-style';
@@ -108,6 +81,10 @@
@import './_nested';
@import './_styles';
+/* Variables */
+/* Importing here will allow you to override any variables in the modules */
+@import './_colors';
+@import './_media-queries';
/* Debugging */
@import './_debug-children';
diff --git a/yarn.lock b/yarn.lock
deleted file mode 100644
index 27e6f02d4..000000000
--- a/yarn.lock
+++ /dev/null
@@ -1,2383 +0,0 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
-# yarn lockfile v1
-
-
-acorn@^6.0.4:
- version "6.4.2"
- resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.4.2.tgz#35866fd710528e92de10cf06016498e47e39e1e6"
- integrity sha512-XtGIhXwF8YM8bJhGxG5kXgjkEuNGLTkoYqVE+KMR+aspr4KGYmKYg7yUe3KghyQ9yheNwLnjmzh/7+gfDBmHCQ==
-
-alphanum-sort@^1.0.1, alphanum-sort@^1.0.2:
- version "1.0.2"
- resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3"
- integrity sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=
-
-ansi-regex@^2.0.0:
- version "2.1.1"
- resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
- integrity sha1-w7M6te42DYbg5ijwRorn7yfWVN8=
-
-ansi-styles@^2.2.1:
- version "2.2.1"
- resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
- integrity sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=
-
-ansi-styles@^3.2.1:
- version "3.2.1"
- resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d"
- integrity sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==
- dependencies:
- color-convert "^1.9.0"
-
-application-config-path@^0.1.0:
- version "0.1.0"
- resolved "https://registry.yarnpkg.com/application-config-path/-/application-config-path-0.1.0.tgz#193c5f0a86541a4c66fba1e2dc38583362ea5e8f"
- integrity sha1-GTxfCoZUGkxm+6Hi3DhYM2LqXo8=
-
-application-config@~1.0.0:
- version "1.0.1"
- resolved "https://registry.yarnpkg.com/application-config/-/application-config-1.0.1.tgz#5aa2e2a5ed6abd2e5d1d473d3596f574044fe9e7"
- integrity sha1-WqLipe1qvS5dHUc9NZb1dARP6ec=
- dependencies:
- application-config-path "^0.1.0"
- mkdirp "^0.5.1"
-
-argparse@^1.0.7:
- version "1.0.10"
- resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.10.tgz#bcd6791ea5ae09725e17e5ad988134cd40b3d911"
- integrity sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==
- dependencies:
- sprintf-js "~1.0.2"
-
-array-find-index@^1.0.1:
- version "1.0.2"
- resolved "https://registry.yarnpkg.com/array-find-index/-/array-find-index-1.0.2.tgz#df010aa1287e164bbda6f9723b0a96a1ec4187a1"
- integrity sha1-3wEKoSh+Fku9pvlyOwqWoexBh6E=
-
-arrify@^1.0.1:
- version "1.0.1"
- resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
- integrity sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=
-
-async@^0.9.0:
- version "0.9.2"
- resolved "https://registry.yarnpkg.com/async/-/async-0.9.2.tgz#aea74d5e61c1f899613bf64bda66d4c78f2fd17d"
- integrity sha1-rqdNXmHB+JlhO/ZL2mbUx48v0X0=
-
-author-regex@^0.2.1:
- version "0.2.1"
- resolved "https://registry.yarnpkg.com/author-regex/-/author-regex-0.2.1.tgz#8bdefaac6065a931799bec07eeef51b940e08f3c"
- integrity sha1-i976rGBlqTF5m+wH7u9RuUDgjzw=
-
-authors-to-markdown@^0.1.0:
- version "0.1.0"
- resolved "https://registry.yarnpkg.com/authors-to-markdown/-/authors-to-markdown-0.1.0.tgz#a3380064289a725f40cd152144c21faa37fd162b"
- integrity sha1-ozgAZCiacl9AzRUhRMIfqjf9Fis=
- dependencies:
- is-blank "^1.1.0"
- normalize-url "^1.4.1"
- parse-author "^0.2.1"
-
-autoprefixer@^6.3.1:
- version "6.7.7"
- resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.7.7.tgz#1dbd1c835658e35ce3f9984099db00585c782014"
- integrity sha1-Hb0cg1ZY41zj+ZhAmdsAWFx4IBQ=
- dependencies:
- browserslist "^1.7.6"
- caniuse-db "^1.0.30000634"
- normalize-range "^0.1.2"
- num2fraction "^1.2.2"
- postcss "^5.2.16"
- postcss-value-parser "^3.2.3"
-
-autoprefixer@^8.1.0:
- version "8.6.5"
- resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-8.6.5.tgz#343f3d193ed568b3208e00117a1b96eb691d4ee9"
- integrity sha512-PLWJN3Xo/rycNkx+mp8iBDMTm3FeWe4VmYaZDSqL5QQB9sLsQkG5k8n+LNDFnhh9kdq2K+egL/icpctOmDHwig==
- dependencies:
- browserslist "^3.2.8"
- caniuse-lite "^1.0.30000864"
- normalize-range "^0.1.2"
- num2fraction "^1.2.2"
- postcss "^6.0.23"
- postcss-value-parser "^3.2.3"
-
-balanced-match@^0.4.2:
- version "0.4.2"
- resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-0.4.2.tgz#cb3f3e3c732dc0f01ee70b403f302e61d7709838"
- integrity sha1-yz8+PHMtwPAe5wtAPzAuYddwmDg=
-
-balanced-match@^1.0.0:
- version "1.0.2"
- resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
- integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
-
-bl@~1.1.2:
- version "1.1.2"
- resolved "https://registry.yarnpkg.com/bl/-/bl-1.1.2.tgz#fdca871a99713aa00d19e3bbba41c44787a65398"
- integrity sha1-/cqHGplxOqANGeO7ukHER4emU5g=
- dependencies:
- readable-stream "~2.0.5"
-
-bluebird@^3.1.1:
- version "3.7.2"
- resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
- integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
-
-brace-expansion@^1.1.7:
- version "1.1.11"
- resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
- integrity sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==
- dependencies:
- balanced-match "^1.0.0"
- concat-map "0.0.1"
-
-browserslist@^1.3.6, browserslist@^1.5.2, browserslist@^1.7.6:
- version "1.7.7"
- resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-1.7.7.tgz#0bd76704258be829b2398bb50e4b62d1a166b0b9"
- integrity sha1-C9dnBCWL6CmyOYu1Dkti0aFmsLk=
- dependencies:
- caniuse-db "^1.0.30000639"
- electron-to-chromium "^1.2.7"
-
-browserslist@^3.2.8:
- version "3.2.8"
- resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-3.2.8.tgz#b0005361d6471f0f5952797a76fc985f1f978fc6"
- integrity sha512-WHVocJYavUwVgVViC0ORikPHQquXwVh939TaelZ4WDqpWgTX/FsGhl/+P4qBUAGcRvtOgDgC+xftNWWp2RUTAQ==
- dependencies:
- caniuse-lite "^1.0.30000844"
- electron-to-chromium "^1.3.47"
-
-bytes@^3.1.0:
- version "3.1.0"
- resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.0.tgz#f6cf7933a360e0588fa9fde85651cdc7f805d1f6"
- integrity sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==
-
-camelcase-keys@^2.0.0:
- version "2.1.0"
- resolved "https://registry.yarnpkg.com/camelcase-keys/-/camelcase-keys-2.1.0.tgz#308beeaffdf28119051efa1d932213c91b8f92e7"
- integrity sha1-MIvur/3ygRkFHvodkyITyRuPkuc=
- dependencies:
- camelcase "^2.0.0"
- map-obj "^1.0.0"
-
-camelcase-keys@^4.0.0:
- version "4.2.0"
- resolved "https://registry.yarnpkg.com/camelcase-keys/-/camelcase-keys-4.2.0.tgz#a2aa5fb1af688758259c32c141426d78923b9b77"
- integrity sha1-oqpfsa9oh1glnDLBQUJteJI7m3c=
- dependencies:
- camelcase "^4.1.0"
- map-obj "^2.0.0"
- quick-lru "^1.0.0"
-
-camelcase@^2.0.0:
- version "2.1.1"
- resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-2.1.1.tgz#7c1d16d679a1bbe59ca02cacecfb011e201f5a1f"
- integrity sha1-fB0W1nmhu+WcoCys7PsBHiAfWh8=
-
-camelcase@^4.1.0:
- version "4.1.0"
- resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-4.1.0.tgz#d545635be1e33c542649c69173e5de6acfae34dd"
- integrity sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0=
-
-caniuse-api@^1.5.2:
- version "1.6.1"
- resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-1.6.1.tgz#b534e7c734c4f81ec5fbe8aca2ad24354b962c6c"
- integrity sha1-tTTnxzTE+B7F++isoq0kNUuWLGw=
- dependencies:
- browserslist "^1.3.6"
- caniuse-db "^1.0.30000529"
- lodash.memoize "^4.1.2"
- lodash.uniq "^4.5.0"
-
-caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639:
- version "1.0.30001271"
- resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30001271.tgz#043576964c24f28d072ec8c935db153ed506620a"
- integrity sha512-V7/O06sNu6e54ArdzLA1xFuYJ+kK9XXsO4pYa53ixujAVX/OVCGvDfRICSgkxdk8pdMZ+tA1v5ylLKDHNwUqEg==
-
-caniuse-lite@^1.0.30000844, caniuse-lite@^1.0.30000864:
- version "1.0.30001271"
- resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001271.tgz#0dda0c9bcae2cf5407cd34cac304186616cc83e8"
- integrity sha512-BBruZFWmt3HFdVPS8kceTBIguKxu4f99n5JNp06OlPD/luoAMIaIK5ieV5YjnBLH3Nysai9sxj9rpJj4ZisXOA==
-
-capture-stack-trace@^1.0.0:
- version "1.0.1"
- resolved "https://registry.yarnpkg.com/capture-stack-trace/-/capture-stack-trace-1.0.1.tgz#a6c0bbe1f38f3aa0b92238ecb6ff42c344d4135d"
- integrity sha512-mYQLZnx5Qt1JgB1WEiMCf2647plpGeQ2NMR/5L0HNZzGQo4fuSPnK+wjfPnKZV0aiJDgzmWqqkV/g7JD+DW0qw==
-
-chalk@^1.0.0, chalk@^1.1.1, chalk@^1.1.3:
- version "1.1.3"
- resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
- integrity sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=
- dependencies:
- ansi-styles "^2.2.1"
- escape-string-regexp "^1.0.2"
- has-ansi "^2.0.0"
- strip-ansi "^3.0.0"
- supports-color "^2.0.0"
-
-chalk@^2.4.1, chalk@^2.4.2:
- version "2.4.2"
- resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
- integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
- dependencies:
- ansi-styles "^3.2.1"
- escape-string-regexp "^1.0.5"
- supports-color "^5.3.0"
-
-clap@^1.0.9:
- version "1.2.3"
- resolved "https://registry.yarnpkg.com/clap/-/clap-1.2.3.tgz#4f36745b32008492557f46412d66d50cb99bce51"
- integrity sha512-4CoL/A3hf90V3VIEjeuhSvlGFEHKzOz+Wfc2IVZc+FaUgU0ZQafJTP49fvnULipOPcAfqhyI2duwQyns6xqjYA==
- dependencies:
- chalk "^1.1.3"
-
-class-repeat@^1.0.2:
- version "1.0.2"
- resolved "https://registry.yarnpkg.com/class-repeat/-/class-repeat-1.0.2.tgz#3aa3e4b6ee044e10a03a6650b064d3a335d275e9"
- integrity sha512-Waqktb/IbBVtQCZI8Esj3zWEetYEJDRN3J0D4TkH/H+ybHLM3Ma6BGk8lrssAtvjBUS3hFnaqVXAyaGHtLefYw==
- dependencies:
- css-selector-tokenizer "^0.5.4"
- get-css-classes "^1.1.0"
- has-class-selector "^1.0.0"
- is-present "^1.0.0"
-
-clone@^1.0.2:
- version "1.0.4"
- resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
- integrity sha1-2jCcwmPfFZlMaIypAheco8fNfH4=
-
-coa@~1.0.1:
- version "1.0.4"
- resolved "https://registry.yarnpkg.com/coa/-/coa-1.0.4.tgz#a9ef153660d6a86a8bdec0289a5c684d217432fd"
- integrity sha1-qe8VNmDWqGqL3sAomlxoTSF0Mv0=
- dependencies:
- q "^1.1.2"
-
-color-convert@^0.5.2:
- version "0.5.3"
- resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-0.5.3.tgz#bdb6c69ce660fadffe0b0007cc447e1b9f7282bd"
- integrity sha1-vbbGnOZg+t/+CwAHzER+G59ygr0=
-
-color-convert@^1.3.0, color-convert@^1.9.0:
- version "1.9.3"
- resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
- integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
- dependencies:
- color-name "1.1.3"
-
-color-name@1.1.3:
- version "1.1.3"
- resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
- integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
-
-color-name@^1.0.0:
- version "1.1.4"
- resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
- integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
-
-color-string@^0.3.0:
- version "0.3.0"
- resolved "https://registry.yarnpkg.com/color-string/-/color-string-0.3.0.tgz#27d46fb67025c5c2fa25993bfbf579e47841b991"
- integrity sha1-J9RvtnAlxcL6JZk7+/V55HhBuZE=
- dependencies:
- color-name "^1.0.0"
-
-color@^0.11.0:
- version "0.11.4"
- resolved "https://registry.yarnpkg.com/color/-/color-0.11.4.tgz#6d7b5c74fb65e841cd48792ad1ed5e07b904d764"
- integrity sha1-bXtcdPtl6EHNSHkq0e1eB7kE12Q=
- dependencies:
- clone "^1.0.2"
- color-convert "^1.3.0"
- color-string "^0.3.0"
-
-colormin@^1.0.5:
- version "1.1.2"
- resolved "https://registry.yarnpkg.com/colormin/-/colormin-1.1.2.tgz#ea2f7420a72b96881a38aae59ec124a6f7298133"
- integrity sha1-6i90IKcrlogaOKrlnsEkpvcpgTM=
- dependencies:
- color "^0.11.0"
- css-color-names "0.0.4"
- has "^1.0.1"
-
-colors@~0.6.0-1:
- version "0.6.2"
- resolved "https://registry.yarnpkg.com/colors/-/colors-0.6.2.tgz#2423fe6678ac0c5dae8852e5d0e5be08c997abcc"
- integrity sha1-JCP+ZnisDF2uiFLl0OW+CMmXq8w=
-
-colors@~1.1.2:
- version "1.1.2"
- resolved "https://registry.yarnpkg.com/colors/-/colors-1.1.2.tgz#168a4701756b6a7f51a12ce0c97bfa28c084ed63"
- integrity sha1-FopHAXVran9RoSzgyXv6KMCE7WM=
-
-commander@~2.1.0:
- version "2.1.0"
- resolved "https://registry.yarnpkg.com/commander/-/commander-2.1.0.tgz#d121bbae860d9992a3d517ba96f56588e47c6781"
- integrity sha1-0SG7roYNmZKj1Re6lvVliOR8Z4E=
-
-comment-regex@^1.0.0:
- version "1.0.1"
- resolved "https://registry.yarnpkg.com/comment-regex/-/comment-regex-1.0.1.tgz#e070d2c4db33231955d0979d27c918fcb6f93565"
- integrity sha512-IWlN//Yfby92tOIje7J18HkNmWRR7JESA/BK8W7wqY/akITpU5B0JQWnbTjCfdChSrDNb0DrdA9jfAxiiBXyiQ==
-
-concat-map@0.0.1:
- version "0.0.1"
- resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
- integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=
-
-copy-files@^0.1.0:
- version "0.1.0"
- resolved "https://registry.yarnpkg.com/copy-files/-/copy-files-0.1.0.tgz#fa38385dc047ef88193c1c61b6a253a8a427f116"
- integrity sha1-+jg4XcBH74gZPBxhtqJTqKQn8RY=
- dependencies:
- async "^0.9.0"
- lodash "^2.4.1"
- mkdirp "^0.5.0"
-
-core-util-is@~1.0.0:
- version "1.0.3"
- resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85"
- integrity sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==
-
-create-error-class@^3.0.0:
- version "3.0.2"
- resolved "https://registry.yarnpkg.com/create-error-class/-/create-error-class-3.0.2.tgz#06be7abef947a3f14a30fd610671d401bca8b7b6"
- integrity sha1-Br56vvlHo/FKMP1hBnHUAbyot7Y=
- dependencies:
- capture-stack-trace "^1.0.0"
-
-css-color-converter@^1.0.2:
- version "1.1.1"
- resolved "https://registry.yarnpkg.com/css-color-converter/-/css-color-converter-1.1.1.tgz#a2d4dfd37615c1e365dc02f57ea82e43e473793c"
- integrity sha512-Fx7twabisBA+FQQ72VY/gzoSXL8RfzqKtldotbpeJjwFUYwUPBd5fm6ut/mK2T8JMPWph2CY1TpVIhy4I0ko+Q==
- dependencies:
- color-convert "^0.5.2"
- color-name "^1.0.0"
-
-css-color-names@0.0.1:
- version "0.0.1"
- resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.1.tgz#5d0548fa256456ede4a9a0c2ac7ab19d3eb1ad81"
- integrity sha1-XQVI+iVkVu3kqaDCrHqxnT6xrYE=
-
-css-color-names@0.0.4:
- version "0.0.4"
- resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
- integrity sha1-gIrcLnnPhHOAabZGyyDsJ762KeA=
-
-css-mqpacker@^6.0.2:
- version "6.0.2"
- resolved "https://registry.yarnpkg.com/css-mqpacker/-/css-mqpacker-6.0.2.tgz#ced48675c644e846b3c9459e0a473f2aead1ff31"
- integrity sha512-01xogFCcK6KQmUS+EwSS5R5Sq/mp9rjLBw/7ej+xPZHKE0gzjsWk8uJpFuKOllQrVEOJqt7Y8H6rCNG+sMIg+Q==
- dependencies:
- minimist "^1.2.0"
- postcss "^6.0.16"
-
-css-mqpacker@^7.0.0:
- version "7.0.0"
- resolved "https://registry.yarnpkg.com/css-mqpacker/-/css-mqpacker-7.0.0.tgz#48f4a0ff45b81ec661c4a33ed80b9db8a026333b"
- integrity sha512-temVrWS+sB4uocE2quhW8ru/KguDmGhCU7zN213KxtDvWOH3WS/ZUStfpF4fdCT7W8fPpFrQdWRFqtFtPPfBLA==
- dependencies:
- minimist "^1.2.0"
- postcss "^7.0.0"
-
-css-selector-tokenizer@^0.5.4:
- version "0.5.4"
- resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.5.4.tgz#139bafd34a35fd0c1428487049e0699e6f6a2c21"
- integrity sha1-E5uv00o1/QwUKEhwSeBpnm9qLCE=
- dependencies:
- cssesc "^0.1.0"
- fastparse "^1.1.1"
-
-css-selector-tokenizer@^0.7.3:
- version "0.7.3"
- resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.7.3.tgz#735f26186e67c749aaf275783405cf0661fae8f1"
- integrity sha512-jWQv3oCEL5kMErj4wRnK/OPoBi0D+P1FR2cDCKYPaMeD2eW3/mttav8HT4hT1CKopiJI/psEULjkClhvJo4Lvg==
- dependencies:
- cssesc "^3.0.0"
- fastparse "^1.1.2"
-
-css-shorthand-expand@^1.2.0:
- version "1.2.0"
- resolved "https://registry.yarnpkg.com/css-shorthand-expand/-/css-shorthand-expand-1.2.0.tgz#bd6ac8d79f99928581eaca9fe05a03d316d17fe5"
- integrity sha512-L3RS1VNYuXgMOfVGX4WzP9AFK6KL0JuioSoO8661egEac2eHX9/s4yFO8mgK6QEtm8UmU8IvuKzPgdQpU0DhpQ==
- dependencies:
- css-color-names "0.0.1"
- css-url-regex "0.0.1"
- hex-color-regex "^1.0.1"
- hsl-regex "^1.0.0"
- hsla-regex "^1.0.0"
- map-obj "^1.0.0"
- repeat-element "^1.1.0"
- rgb-regex "^1.0.1"
- rgba-regex "^1.0.0"
- xtend "^4.0.0"
-
-css-shorthand-properties@^1.0.0:
- version "1.1.1"
- resolved "https://registry.yarnpkg.com/css-shorthand-properties/-/css-shorthand-properties-1.1.1.tgz#1c808e63553c283f289f2dd56fcee8f3337bd935"
- integrity sha512-Md+Juc7M3uOdbAFwOYlTrccIZ7oCFuzrhKYQjdeUEW/sE1hv17Jp/Bws+ReOPpGVBTYCBoYo+G17V5Qo8QQ75A==
-
-css-unit-converter@^1.0.0, css-unit-converter@^1.1.1:
- version "1.1.2"
- resolved "https://registry.yarnpkg.com/css-unit-converter/-/css-unit-converter-1.1.2.tgz#4c77f5a1954e6dbff60695ecb214e3270436ab21"
- integrity sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA==
-
-css-url-regex@0.0.1:
- version "0.0.1"
- resolved "https://registry.yarnpkg.com/css-url-regex/-/css-url-regex-0.0.1.tgz#e05af8c6c290d451ef1632b455ea5c81b4b1395c"
- integrity sha1-4Fr4xsKQ1FHvFjK0VepcgbSxOVw=
-
-cssesc@^0.1.0:
- version "0.1.0"
- resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-0.1.0.tgz#c814903e45623371a0477b40109aaafbeeaddbb4"
- integrity sha1-yBSQPkViM3GgR3tAEJqq++6t27Q=
-
-cssesc@^3.0.0:
- version "3.0.0"
- resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
- integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
-
-cssnano@^3.10.0:
- version "3.10.0"
- resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-3.10.0.tgz#4f38f6cea2b9b17fa01490f23f1dc68ea65c1c38"
- integrity sha1-Tzj2zqK5sX+gFJDyPx3GjqZcHDg=
- dependencies:
- autoprefixer "^6.3.1"
- decamelize "^1.1.2"
- defined "^1.0.0"
- has "^1.0.1"
- object-assign "^4.0.1"
- postcss "^5.0.14"
- postcss-calc "^5.2.0"
- postcss-colormin "^2.1.8"
- postcss-convert-values "^2.3.4"
- postcss-discard-comments "^2.0.4"
- postcss-discard-duplicates "^2.0.1"
- postcss-discard-empty "^2.0.1"
- postcss-discard-overridden "^0.1.1"
- postcss-discard-unused "^2.2.1"
- postcss-filter-plugins "^2.0.0"
- postcss-merge-idents "^2.1.5"
- postcss-merge-longhand "^2.0.1"
- postcss-merge-rules "^2.0.3"
- postcss-minify-font-values "^1.0.2"
- postcss-minify-gradients "^1.0.1"
- postcss-minify-params "^1.0.4"
- postcss-minify-selectors "^2.0.4"
- postcss-normalize-charset "^1.1.0"
- postcss-normalize-url "^3.0.7"
- postcss-ordered-values "^2.1.0"
- postcss-reduce-idents "^2.2.2"
- postcss-reduce-initial "^1.0.0"
- postcss-reduce-transforms "^1.0.3"
- postcss-svgo "^2.1.1"
- postcss-unique-selectors "^2.0.2"
- postcss-value-parser "^3.2.3"
- postcss-zindex "^2.0.1"
-
-csso@~2.3.1:
- version "2.3.2"
- resolved "https://registry.yarnpkg.com/csso/-/csso-2.3.2.tgz#ddd52c587033f49e94b71fc55569f252e8ff5f85"
- integrity sha1-3dUsWHAz9J6Utx/FVWnyUuj/X4U=
- dependencies:
- clap "^1.0.9"
- source-map "^0.5.3"
-
-cssstats@^3.4.0:
- version "3.5.0"
- resolved "https://registry.yarnpkg.com/cssstats/-/cssstats-3.5.0.tgz#53c0ab66563b72f6c4fd2a31913fae69c72b6658"
- integrity sha512-qMCnl95QRKJsaFPIqV8LCUSHtkXqG/uOPdhTCTXZnyKDCMjtZrjqA2IjUIt7iukvvItDTrK5ObNN7fZLfpknxA==
- dependencies:
- bytes "^3.1.0"
- css-selector-tokenizer "^0.7.3"
- css-shorthand-expand "^1.2.0"
- gzip-size "^5.1.1"
- has-class-selector "^3.5.0"
- has-element-selector "^3.5.0"
- has-id-selector "^3.5.0"
- has-pseudo-class "^3.5.0"
- has-pseudo-element "^3.5.0"
- is-blank "^2.1.0"
- is-css-shorthand "^1.0.1"
- is-present "^1.0.0"
- is-vendor-prefixed "^3.5.0"
- lodash "^4.17.20"
- postcss "^8.1.4"
- postcss-safe-parser "^5.0.2"
- specificity "^0.4.1"
-
-currently-unhandled@^0.4.1:
- version "0.4.1"
- resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"
- integrity sha1-mI3zP+qxke95mmE2nddsF635V+o=
- dependencies:
- array-find-index "^1.0.1"
-
-decamelize-keys@^1.0.0:
- version "1.1.0"
- resolved "https://registry.yarnpkg.com/decamelize-keys/-/decamelize-keys-1.1.0.tgz#d171a87933252807eb3cb61dc1c1445d078df2d9"
- integrity sha1-0XGoeTMlKAfrPLYdwcFEXQeN8tk=
- dependencies:
- decamelize "^1.1.0"
- map-obj "^1.0.0"
-
-decamelize@^1.1.0, decamelize@^1.1.2:
- version "1.2.0"
- resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
- integrity sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=
-
-dedent@^0.7.0:
- version "0.7.0"
- resolved "https://registry.yarnpkg.com/dedent/-/dedent-0.7.0.tgz#2495ddbaf6eb874abb0e1be9df22d2e5a544326c"
- integrity sha1-JJXduvbrh0q7Dhvp3yLS5aVEMmw=
-
-defined@^1.0.0:
- version "1.0.0"
- resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693"
- integrity sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM=
-
-detect-newline@^1.0.3:
- version "1.0.3"
- resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-1.0.3.tgz#e97b1003877d70c09af1af35bfadff168de4920d"
- integrity sha1-6XsQA4d9cMCa8a81v63/Fo3kkg0=
- dependencies:
- get-stdin "^4.0.1"
- minimist "^1.1.0"
-
-duplexer2@~0.0.2:
- version "0.0.2"
- resolved "https://registry.yarnpkg.com/duplexer2/-/duplexer2-0.0.2.tgz#c614dcf67e2fb14995a91711e5a617e8a60a31db"
- integrity sha1-xhTc9n4vsUmVqRcR5aYX6KYKMds=
- dependencies:
- readable-stream "~1.1.9"
-
-duplexer3@^0.1.4:
- version "0.1.4"
- resolved "https://registry.yarnpkg.com/duplexer3/-/duplexer3-0.1.4.tgz#ee01dd1cac0ed3cbc7fdbea37dc0a8f1ce002ce2"
- integrity sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI=
-
-duplexer@^0.1.1, duplexer@^0.1.2:
- version "0.1.2"
- resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.2.tgz#3abe43aef3835f8ae077d136ddce0f276b0400e6"
- integrity sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==
-
-electron-to-chromium@^1.2.7, electron-to-chromium@^1.3.47:
- version "1.3.879"
- resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.879.tgz#4aba9700cfb241fb95c6ed69e31785e3d1605a43"
- integrity sha512-zJo+D9GwbJvM31IdFmwcGvychhk4KKbKYo2GWlsn+C/dxz2NwmbhGJjWwTfFSF2+eFH7VvfA8MCZ8SOqTrlnpw==
-
-encoding@^0.1.11:
- version "0.1.13"
- resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.13.tgz#56574afdd791f54a8e9b2785c0582a2d26210fa9"
- integrity sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==
- dependencies:
- iconv-lite "^0.6.2"
-
-error-ex@^1.2.0, error-ex@^1.3.1:
- version "1.3.2"
- resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
- integrity sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==
- dependencies:
- is-arrayish "^0.2.1"
-
-escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.3, escape-string-regexp@^1.0.5:
- version "1.0.5"
- resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
- integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
-
-esprima@^2.6.0:
- version "2.7.3"
- resolved "https://registry.yarnpkg.com/esprima/-/esprima-2.7.3.tgz#96e3b70d5779f6ad49cd032673d1c312767ba581"
- integrity sha1-luO3DVd59q1JzQMmc9HDEnZ7pYE=
-
-exec-sh@^0.2.0:
- version "0.2.2"
- resolved "https://registry.yarnpkg.com/exec-sh/-/exec-sh-0.2.2.tgz#2a5e7ffcbd7d0ba2755bdecb16e5a427dfbdec36"
- integrity sha512-FIUCJz1RbuS0FKTdaAafAByGS0CPvU3R0MeHxgtl+djzCc//F8HakL8GzmVNZanasTbTAY/3DRFA0KpVqj/eAw==
- dependencies:
- merge "^1.2.0"
-
-extend-options@0.0.1:
- version "0.0.1"
- resolved "https://registry.yarnpkg.com/extend-options/-/extend-options-0.0.1.tgz#e93c83312438c13565e64ec2b6ce86a9829dd17b"
- integrity sha1-6TyDMSQ4wTVl5k7Cts6GqYKd0Xs=
-
-extend@^3.0.1:
- version "3.0.2"
- resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
- integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
-
-fastparse@^1.1.1, fastparse@^1.1.2:
- version "1.1.2"
- resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.2.tgz#91728c5a5942eced8531283c79441ee4122c35a9"
- integrity sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==
-
-fetch-vcr@^1.1.0:
- version "1.1.2"
- resolved "https://registry.yarnpkg.com/fetch-vcr/-/fetch-vcr-1.1.2.tgz#8cfee49c45b464366b97fe550487dde15b948d21"
- integrity sha512-bFOx3+5YtViximcqhG05tqMlsyPRXNOmiToDCf6TyVUCKHYP/vGPmn0HUhGVNd1jI0KpElwz+RH3X/ZQo0Asfg==
- dependencies:
- node-fetch "^1.6.3"
- whatwg-fetch "^2.0.3"
-
-file-exists@^0.1.1:
- version "0.1.1"
- resolved "https://registry.yarnpkg.com/file-exists/-/file-exists-0.1.1.tgz#993d3fffb5b49d11fefcc8f45c2355027440803c"
- integrity sha1-mT0//7W0nRH+/Mj0XCNVAnRAgDw=
-
-file-exists@^1.0.0:
- version "1.0.0"
- resolved "https://registry.yarnpkg.com/file-exists/-/file-exists-1.0.0.tgz#e6d269b56567b8922581398e990dd7078f72d616"
- integrity sha1-5tJptWVnuJIlgTmOmQ3XB49y1hY=
-
-file-exists@^5.0.1:
- version "5.0.1"
- resolved "https://registry.yarnpkg.com/file-exists/-/file-exists-5.0.1.tgz#1dcd017f787fc7be7a09a6ef3e6a3550cea31198"
- integrity sha512-TeBMgeKbdSsQtcY2XqKY/yTa4BciMD/Gw8YcND0XMDZt4CDj87l1Wl4x7K0ravZ80tZcyIGMD0hj2VSRPR8M8Q==
-
-find-up@^1.0.0:
- version "1.1.2"
- resolved "https://registry.yarnpkg.com/find-up/-/find-up-1.1.2.tgz#6b2e9822b1a2ce0a60ab64d610eccad53cb24d0f"
- integrity sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=
- dependencies:
- path-exists "^2.0.0"
- pinkie-promise "^2.0.0"
-
-find-up@^2.0.0:
- version "2.1.0"
- resolved "https://registry.yarnpkg.com/find-up/-/find-up-2.1.0.tgz#45d1b7e506c717ddd482775a2b77920a3c0c57a7"
- integrity sha1-RdG35QbHF93UgndaK3eSCjwMV6c=
- dependencies:
- locate-path "^2.0.0"
-
-findup@^0.1.5:
- version "0.1.5"
- resolved "https://registry.yarnpkg.com/findup/-/findup-0.1.5.tgz#8ad929a3393bac627957a7e5de4623b06b0e2ceb"
- integrity sha1-itkpozk7rGJ5V6fl3kYjsGsOLOs=
- dependencies:
- colors "~0.6.0-1"
- commander "~2.1.0"
-
-flatten@^1.0.2:
- version "1.0.3"
- resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.3.tgz#c1283ac9f27b368abc1e36d1ff7b04501a30356b"
- integrity sha512-dVsPA/UwQ8+2uoFe5GHtiBMu48dWLTdsuEd7CKGlZlD78r1TTWBvDuFaFGKCo/ZfEr95Uk56vZoX86OsHkUeIg==
-
-function-bind@^1.1.1:
- version "1.1.1"
- resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
- integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
-
-gather-stream@^1.0.0:
- version "1.0.0"
- resolved "https://registry.yarnpkg.com/gather-stream/-/gather-stream-1.0.0.tgz#b33994af457a8115700d410f317733cbe7a0904b"
- integrity sha1-szmUr0V6gRVwDUEPMXczy+egkEs=
-
-get-css-classes@1.1.0, get-css-classes@^1.1.0:
- version "1.1.0"
- resolved "https://registry.yarnpkg.com/get-css-classes/-/get-css-classes-1.1.0.tgz#5b44ea8a192cece7567c04574633a92aa44917b3"
- integrity sha1-W0Tqihks7OdWfARXRjOpKqRJF7M=
- dependencies:
- css-selector-tokenizer "^0.5.4"
- lodash "^4.5.0"
-
-get-github-user@^1.1.0:
- version "1.1.0"
- resolved "https://registry.yarnpkg.com/get-github-user/-/get-github-user-1.1.0.tgz#0bd4d9552bd6ace51d3aa4495b5d0be313a0bceb"
- integrity sha512-vqpEnWS1bbCA0AiND1NfpS3SfzL9WRZr3NmtImUsSKAFDQaFaUnbiuwdi1WAgi5ZWcuEmjlzcIlVd0CSuiG/KQ==
- dependencies:
- acorn "^6.0.4"
- bluebird "^3.1.1"
- ghauth "^3.2.0"
- is-array "^1.0.1"
- meow "^3.6.0"
- octokat "^0.10.0"
-
-get-stdin@^4.0.1:
- version "4.0.1"
- resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-4.0.1.tgz#b968c6b0a04384324902e8bf1a5df32579a450fe"
- integrity sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4=
-
-get-stream@^3.0.0:
- version "3.0.0"
- resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-3.0.0.tgz#8e943d1358dc37555054ecbe2edb05aa174ede14"
- integrity sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=
-
-gh-got@^3.0.0:
- version "3.0.0"
- resolved "https://registry.yarnpkg.com/gh-got/-/gh-got-3.0.0.tgz#b0f9d1b1be08a1f862f299b03809b4848c19dfd5"
- integrity sha1-sPnRsb4Iofhi8pmwOAm0hIwZ39U=
- dependencies:
- got "^6.2.0"
-
-ghauth@^3.2.0:
- version "3.2.1"
- resolved "https://registry.yarnpkg.com/ghauth/-/ghauth-3.2.1.tgz#45d7556437164ad8b4b037c02c627fd55019e31a"
- integrity sha1-RddVZDcWSti0sDfALGJ/1VAZ4xo=
- dependencies:
- application-config "~1.0.0"
- bl "~1.1.2"
- hyperquest "~2.0.0"
- mkdirp "~0.5.1"
- read "~1.0.7"
- xtend "~4.0.1"
-
-github-repositories@^3.0.0:
- version "3.1.0"
- resolved "https://registry.yarnpkg.com/github-repositories/-/github-repositories-3.1.0.tgz#f6205b1b5d552aa7fabaab2826b98a2238ff0d7b"
- integrity sha512-KTyFo+Lyvkiogl8qO26rxA3tBWWjdzd9yTFkVADPbdWrDdyTStro5GfgZBjstkG2Tvp2P1b8Z85JNtZ8N9TL7g==
- dependencies:
- chalk "^1.0.0"
- gh-got "^3.0.0"
- is-github-user-or-org "^1.0.0"
- meow "^3.3.0"
-
-glob@^5.0.14:
- version "5.0.15"
- resolved "https://registry.yarnpkg.com/glob/-/glob-5.0.15.tgz#1bc936b9e02f4a603fcc222ecf7633d30b8b93b1"
- integrity sha1-G8k2ueAvSmA/zCIuz3Yz0wuLk7E=
- dependencies:
- inflight "^1.0.4"
- inherits "2"
- minimatch "2 || 3"
- once "^1.3.0"
- path-is-absolute "^1.0.0"
-
-got@^6.2.0:
- version "6.7.1"
- resolved "https://registry.yarnpkg.com/got/-/got-6.7.1.tgz#240cd05785a9a18e561dc1b44b41c763ef1e8db0"
- integrity sha1-JAzQV4WpoY5WHcG0S0HHY+8ejbA=
- dependencies:
- create-error-class "^3.0.0"
- duplexer3 "^0.1.4"
- get-stream "^3.0.0"
- is-redirect "^1.0.0"
- is-retry-allowed "^1.0.0"
- is-stream "^1.0.0"
- lowercase-keys "^1.0.0"
- safe-buffer "^5.0.1"
- timed-out "^4.0.0"
- unzip-response "^2.0.1"
- url-parse-lax "^1.0.0"
-
-graceful-fs@^4.1.2:
- version "4.2.8"
- resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.8.tgz#e412b8d33f5e006593cbd3cee6df9f2cebbe802a"
- integrity sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg==
-
-gzip-size@^5.1.1:
- version "5.1.1"
- resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-5.1.1.tgz#cb9bee692f87c0612b232840a873904e4c135274"
- integrity sha512-FNHi6mmoHvs1mxZAds4PpdCS6QG8B4C1krxJsMutgxl5t3+GlRTzzI3NEkifXx2pVsOvJdOGSmIgDhQ55FwdPA==
- dependencies:
- duplexer "^0.1.1"
- pify "^4.0.1"
-
-gzip-size@^7.0.0:
- version "7.0.0"
- resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-7.0.0.tgz#9f9644251f15bc78460fccef4055ae5a5562ac60"
- integrity sha512-O1Ld7Dr+nqPnmGpdhzLmMTQ4vAsD+rHwMm1NLUmoUFFymBOMKxCCrtDxqdBRYXdeEPEi3SyoR4TizJLQrnKBNA==
- dependencies:
- duplexer "^0.1.2"
-
-has-ansi@^2.0.0:
- version "2.0.0"
- resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
- integrity sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=
- dependencies:
- ansi-regex "^2.0.0"
-
-has-class-selector@1.0.0, has-class-selector@^1.0.0:
- version "1.0.0"
- resolved "https://registry.yarnpkg.com/has-class-selector/-/has-class-selector-1.0.0.tgz#a7bf51becdc2d77dff2509203ed69f34450e0c2d"
- integrity sha1-p79Rvs3C133/JQkgPtafNEUODC0=
-
-has-class-selector@^3.5.0:
- version "3.5.0"
- resolved "https://registry.yarnpkg.com/has-class-selector/-/has-class-selector-3.5.0.tgz#10a7c7fc064e3accca5258230ec518b7f885af0e"
- integrity sha512-LwqCUH7UOMvMSd59kJPi2mOkjy3G9tH7gGzvFWPSS8iWx/G1tB0cxaVE+60aIxS167U/AMJdLJoywVnSPYLVTQ==
-
-has-element-selector@^3.5.0:
- version "3.5.0"
- resolved "https://registry.yarnpkg.com/has-element-selector/-/has-element-selector-3.5.0.tgz#fb8b624c025baefbf44f3c9ead37be97b6d38eae"
- integrity sha512-9pQD/ierNOtMTYWS2BFUhE0t4jJvbOQj2fdgdIL7Onsl24H1lPb593KB/oQSdN5/IUUS8dK62QFdwkLQZJKVow==
- dependencies:
- css-selector-tokenizer "^0.7.3"
-
-has-flag@^1.0.0:
- version "1.0.0"
- resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-1.0.0.tgz#9d9e793165ce017a00f00418c43f942a7b1d11fa"
- integrity sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=
-
-has-flag@^3.0.0:
- version "3.0.0"
- resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
- integrity sha1-tdRU3CGZriJWmfNGfloH87lVuv0=
-
-has-id-selector@^3.5.0:
- version "3.5.0"
- resolved "https://registry.yarnpkg.com/has-id-selector/-/has-id-selector-3.5.0.tgz#308ae4e93eff0b94a5c3dd115d3a93df11719df5"
- integrity sha512-J7GcjNIB0k0Qt5OtB97ayopnbx5CNkCX+TdB6VjyFVrNO2/CVYbQtHKxH0fmNX1DZmF0pYD6t7NuTurd3eaUpw==
-
-has-pseudo-class@^3.5.0:
- version "3.5.0"
- resolved "https://registry.yarnpkg.com/has-pseudo-class/-/has-pseudo-class-3.5.0.tgz#21f0cd6f45a465461a45323c56363780c5316452"
- integrity sha512-QEXBW/4F/z6s7/UWA8d1s0bl8GvITIZZulzrvVKBQoJ88h3Wb3mhUL7hWGAMnWZaUPBVOUzmWofYyxTC5GhoDg==
- dependencies:
- pseudo-classes "1.0.0"
-
-has-pseudo-element@^3.5.0:
- version "3.5.0"
- resolved "https://registry.yarnpkg.com/has-pseudo-element/-/has-pseudo-element-3.5.0.tgz#9d493726e4ed8e38b32f64df82dfa60e8127490f"
- integrity sha512-dCdKsjtIIE+rn1H82fBCX7uJqFU0FTwB1LjSumhMLbVx1eeRjKHlXh4ddv0Ep3NQ0OoFX+kDJRKSDdQo9W4Mcw==
- dependencies:
- pseudo-elements "1.1.0"
-
-has@^1.0.1, has@^1.0.3:
- version "1.0.3"
- resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796"
- integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==
- dependencies:
- function-bind "^1.1.1"
-
-hex-color-regex@^1.0.1:
- version "1.1.0"
- resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
- integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
-
-hosted-git-info@^2.1.4:
- version "2.8.9"
- resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9"
- integrity sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==
-
-hsl-regex@^1.0.0:
- version "1.0.0"
- resolved "https://registry.yarnpkg.com/hsl-regex/-/hsl-regex-1.0.0.tgz#d49330c789ed819e276a4c0d272dffa30b18fe6e"
- integrity sha1-1JMwx4ntgZ4nakwNJy3/owsY/m4=
-
-hsla-regex@^1.0.0:
- version "1.0.0"
- resolved "https://registry.yarnpkg.com/hsla-regex/-/hsla-regex-1.0.0.tgz#c1ce7a3168c8c6614033a4b5f7877f3b225f9c38"
- integrity sha1-wc56MWjIxmFAM6S194d/OyJfnDg=
-
-html-comment-regex@^1.1.0:
- version "1.1.2"
- resolved "https://registry.yarnpkg.com/html-comment-regex/-/html-comment-regex-1.1.2.tgz#97d4688aeb5c81886a364faa0cad1dda14d433a7"
- integrity sha512-P+M65QY2JQ5Y0G9KKdlDpo0zK+/OHptU5AaBwUfAIDJZk1MYf32Frm84EcOytfJE0t5JvkAnKlmjsXDnWzCJmQ==
-
-hyperquest@~2.0.0:
- version "2.0.0"
- resolved "https://registry.yarnpkg.com/hyperquest/-/hyperquest-2.0.0.tgz#3d1a0c5d83295bcde5c75a978ddaae4096f83c02"
- integrity sha1-PRoMXYMpW83lx1qXjdquQJb4PAI=
- dependencies:
- duplexer2 "~0.0.2"
- through2 "~0.6.3"
-
-iconv-lite@^0.6.2:
- version "0.6.3"
- resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.6.3.tgz#a52f80bf38da1952eb5c681790719871a1a72501"
- integrity sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==
- dependencies:
- safer-buffer ">= 2.1.2 < 3.0.0"
-
-immutable-css-cli@^1.1.1:
- version "1.1.1"
- resolved "https://registry.yarnpkg.com/immutable-css-cli/-/immutable-css-cli-1.1.1.tgz#40d1c03cdf49b6b5aa767005e5251dc5bf782bdb"
- integrity sha1-QNHAPN9JtrWqdnAF5SUdxb94K9s=
- dependencies:
- chalk "^1.1.1"
- file-exists "^1.0.0"
- immutable-css "^1.1.1"
- is-blank "^1.1.0"
- is-css "^1.0.0"
- meow "^3.7.0"
- postcss "^5.0.14"
- postcss-import "^7.1.3"
-
-immutable-css@^1.1.1, immutable-css@^1.1.2:
- version "1.1.2"
- resolved "https://registry.yarnpkg.com/immutable-css/-/immutable-css-1.1.2.tgz#4415166322a93d500facf268a1c7f9070ff4618a"
- integrity sha1-RBUWYyKpPVAPrPJoocf5Bw/0YYo=
- dependencies:
- extend-options "0.0.1"
- file-exists "^0.1.1"
- get-css-classes "1.1.0"
- glob "^5.0.14"
- has-class-selector "1.0.0"
- is-css "^1.0.0"
- meow "^3.3.0"
- postcss "^5.0.10"
- specificity "^0.1.4"
-
-indent-string@^2.1.0:
- version "2.1.0"
- resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-2.1.0.tgz#8e2d48348742121b4a8218b7a137e9a52049dc80"
- integrity sha1-ji1INIdCEhtKghi3oTfppSBJ3IA=
- dependencies:
- repeating "^2.0.0"
-
-indent-string@^3.0.0:
- version "3.2.0"
- resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-3.2.0.tgz#4a5fd6d27cc332f37e5419a504dbb837105c9289"
- integrity sha1-Sl/W0nzDMvN+VBmlBNu4NxBckok=
-
-indexes-of@^1.0.1:
- version "1.0.1"
- resolved "https://registry.yarnpkg.com/indexes-of/-/indexes-of-1.0.1.tgz#f30f716c8e2bd346c7b67d3df3915566a7c05607"
- integrity sha1-8w9xbI4r00bHtn0985FVZqfAVgc=
-
-inflight@^1.0.4:
- version "1.0.6"
- resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
- integrity sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=
- dependencies:
- once "^1.3.0"
- wrappy "1"
-
-inherits@2, inherits@~2.0.1:
- version "2.0.4"
- resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
- integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
-
-is-absolute-url@^2.0.0:
- version "2.1.0"
- resolved "https://registry.yarnpkg.com/is-absolute-url/-/is-absolute-url-2.1.0.tgz#50530dfb84fcc9aa7dbe7852e83a37b93b9f2aa6"
- integrity sha1-UFMN+4T8yap9vnhS6Do3uTufKqY=
-
-is-array@^1.0.1:
- version "1.0.1"
- resolved "https://registry.yarnpkg.com/is-array/-/is-array-1.0.1.tgz#e9850cc2cc860c3bc0977e84ccf0dd464584279a"
- integrity sha1-6YUMwsyGDDvAl36EzPDdRkWEJ5o=
-
-is-arrayish@^0.2.1:
- version "0.2.1"
- resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
- integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=
-
-is-blank@1.0.0:
- version "1.0.0"
- resolved "https://registry.yarnpkg.com/is-blank/-/is-blank-1.0.0.tgz#60e39beb41f92c3b27acbb5029cb0f29f983ee67"
- integrity sha1-YOOb60H5LDsnrLtQKcsPKfmD7mc=
- dependencies:
- is-empty "0.0.1"
- is-whitespace "^0.3.0"
-
-is-blank@^1.1.0:
- version "1.1.0"
- resolved "https://registry.yarnpkg.com/is-blank/-/is-blank-1.1.0.tgz#9274ddbd46363cb767075c385d4ab88c6a64dc17"
- integrity sha1-knTdvUY2PLdnB1w4XUq4jGpk3Bc=
- dependencies:
- is-empty "0.0.1"
- is-whitespace "^0.3.0"
-
-is-blank@^2.1.0:
- version "2.1.0"
- resolved "https://registry.yarnpkg.com/is-blank/-/is-blank-2.1.0.tgz#69a73d3c0d4f417dfffb207a2795c0f0e576de04"
- integrity sha1-aac9PA1PQX3/+yB6J5XA8OV23gQ=
- dependencies:
- is-empty latest
- is-whitespace latest
-
-is-core-module@^2.2.0:
- version "2.8.0"
- resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.8.0.tgz#0321336c3d0925e497fd97f5d95cb114a5ccd548"
- integrity sha512-vd15qHsaqrRL7dtH6QNuy0ndJmRDrS9HAM1CAiSifNUFv4x1a0CCVsj18hJ1mShxIG6T2i1sO78MkP56r0nYRw==
- dependencies:
- has "^1.0.3"
-
-is-css-shorthand@^1.0.1:
- version "1.0.1"
- resolved "https://registry.yarnpkg.com/is-css-shorthand/-/is-css-shorthand-1.0.1.tgz#30f95d03210605fedfdd128e53dac4a4437a933c"
- integrity sha1-MPldAyEGBf7f3RKOU9rEpEN6kzw=
- dependencies:
- css-shorthand-properties "^1.0.0"
-
-is-css@^1.0.0:
- version "1.0.0"
- resolved "https://registry.yarnpkg.com/is-css/-/is-css-1.0.0.tgz#9c4ee1110691e0a7df9e5e6aa7816bae3d526d38"
- integrity sha1-nE7hEQaR4Kffnl5qp4Frrj1SbTg=
-
-is-empty@0.0.1:
- version "0.0.1"
- resolved "https://registry.yarnpkg.com/is-empty/-/is-empty-0.0.1.tgz#09fdc3d649dda5969156c0853a9b76bd781c5a33"
- integrity sha1-Cf3D1kndpZaRVsCFOpt2vXgcWjM=
-
-is-empty@latest:
- version "1.2.0"
- resolved "https://registry.yarnpkg.com/is-empty/-/is-empty-1.2.0.tgz#de9bb5b278738a05a0b09a57e1fb4d4a341a9f6b"
- integrity sha1-3pu1snhzigWgsJpX4ftNSjQan2s=
-
-is-finite@^1.0.0:
- version "1.1.0"
- resolved "https://registry.yarnpkg.com/is-finite/-/is-finite-1.1.0.tgz#904135c77fb42c0641d6aa1bcdbc4daa8da082f3"
- integrity sha512-cdyMtqX/BOqqNBBiKlIVkytNHm49MtMlYyn1zxzvJKWmFMlGzm+ry5BBfYyeY9YmNKbRSo/o7OX9w9ale0wg3w==
-
-is-github-user-or-org@^1.0.0:
- version "1.2.0"
- resolved "https://registry.yarnpkg.com/is-github-user-or-org/-/is-github-user-or-org-1.2.0.tgz#2d59c08159235f52b9844c09e92c69c72078e8c7"
- integrity sha512-NAVgQRRkNasb2MPDoiCKKRFZNS3s05GY2R+5mvwHwHjliyj18NQYKFXqc5BZlk1KnwReo0xTiH9WYkpvikA/Pw==
- dependencies:
- get-github-user "^1.1.0"
- ghauth "^3.2.0"
- meow "^3.6.0"
- pify "^2.3.0"
-
-is-plain-obj@^1.0.0, is-plain-obj@^1.1.0:
- version "1.1.0"
- resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz#71a50c8429dfca773c92a390a4a03b39fcd51d3e"
- integrity sha1-caUMhCnfync8kqOQpKA7OfzVHT4=
-
-is-present@^1.0.0:
- version "1.0.0"
- resolved "https://registry.yarnpkg.com/is-present/-/is-present-1.0.0.tgz#29c9b8e8e6e786a594c292fc7239aa24be70b80c"
- integrity sha1-Kcm46ObnhqWUwpL8cjmqJL5wuAw=
- dependencies:
- is-blank "1.0.0"
-
-is-redirect@^1.0.0:
- version "1.0.0"
- resolved "https://registry.yarnpkg.com/is-redirect/-/is-redirect-1.0.0.tgz#1d03dded53bd8db0f30c26e4f95d36fc7c87dc24"
- integrity sha1-HQPd7VO9jbDzDCbk+V02/HyH3CQ=
-
-is-retry-allowed@^1.0.0:
- version "1.2.0"
- resolved "https://registry.yarnpkg.com/is-retry-allowed/-/is-retry-allowed-1.2.0.tgz#d778488bd0a4666a3be8a1482b9f2baafedea8b4"
- integrity sha512-RUbUeKwvm3XG2VYamhJL1xFktgjvPzL0Hq8C+6yrWIswDy3BIXGqCxhxkc30N9jqK311gVU137K8Ei55/zVJRg==
-
-is-stream@^1.0.0, is-stream@^1.0.1:
- version "1.1.0"
- resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
- integrity sha1-EtSj3U5o4Lec6428hBc66A2RykQ=
-
-is-svg@^2.0.0:
- version "2.1.0"
- resolved "https://registry.yarnpkg.com/is-svg/-/is-svg-2.1.0.tgz#cf61090da0d9efbcab8722deba6f032208dbb0e9"
- integrity sha1-z2EJDaDZ77yrhyLeum8DIgjbsOk=
- dependencies:
- html-comment-regex "^1.1.0"
-
-is-utf8@^0.2.0:
- version "0.2.1"
- resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
- integrity sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=
-
-is-vendor-prefixed@^3.5.0:
- version "3.5.0"
- resolved "https://registry.yarnpkg.com/is-vendor-prefixed/-/is-vendor-prefixed-3.5.0.tgz#11c823e3abc9f3a7857bebbe8bb6e8fb26c0b35b"
- integrity sha512-GR7WA90X9bIOxv0NiYGQZXDubruQOcDjvRXyU76uHpjwUo6kJMmai0ivJrwg5Fxxbq78OpnuMbaMkIVbAc2NBA==
- dependencies:
- vendor-prefixes "1.0.0"
-
-is-whitespace@^0.3.0, is-whitespace@latest:
- version "0.3.0"
- resolved "https://registry.yarnpkg.com/is-whitespace/-/is-whitespace-0.3.0.tgz#1639ecb1be036aec69a54cbb401cfbed7114ab7f"
- integrity sha1-Fjnssb4DauxppUy7QBz77XEUq38=
-
-isarray@0.0.1:
- version "0.0.1"
- resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
- integrity sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=
-
-isarray@~1.0.0:
- version "1.0.0"
- resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
- integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
-
-js-base64@^2.1.9:
- version "2.6.4"
- resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.6.4.tgz#f4e686c5de1ea1f867dbcad3d46d969428df98c4"
- integrity sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==
-
-js-yaml@~3.7.0:
- version "3.7.0"
- resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.7.0.tgz#5c967ddd837a9bfdca5f2de84253abe8a1c03b80"
- integrity sha1-XJZ93YN6m/3KXy3oQlOr6KHAO4A=
- dependencies:
- argparse "^1.0.7"
- esprima "^2.6.0"
-
-json-parse-better-errors@^1.0.1:
- version "1.0.2"
- resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"
- integrity sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==
-
-load-json-file@^1.0.0:
- version "1.1.0"
- resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-1.1.0.tgz#956905708d58b4bab4c2261b04f59f31c99374c0"
- integrity sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=
- dependencies:
- graceful-fs "^4.1.2"
- parse-json "^2.2.0"
- pify "^2.0.0"
- pinkie-promise "^2.0.0"
- strip-bom "^2.0.0"
-
-load-json-file@^4.0.0:
- version "4.0.0"
- resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-4.0.0.tgz#2f5f45ab91e33216234fd53adab668eb4ec0993b"
- integrity sha1-L19Fq5HjMhYjT9U62rZo607AmTs=
- dependencies:
- graceful-fs "^4.1.2"
- parse-json "^4.0.0"
- pify "^3.0.0"
- strip-bom "^3.0.0"
-
-locate-path@^2.0.0:
- version "2.0.0"
- resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
- integrity sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=
- dependencies:
- p-locate "^2.0.0"
- path-exists "^3.0.0"
-
-lodash.memoize@^4.1.2:
- version "4.1.2"
- resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
- integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=
-
-lodash.uniq@^4.5.0:
- version "4.5.0"
- resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
- integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
-
-lodash@^2.4.1:
- version "2.4.2"
- resolved "https://registry.yarnpkg.com/lodash/-/lodash-2.4.2.tgz#fadd834b9683073da179b3eae6d9c0d15053f73e"
- integrity sha1-+t2DS5aDBz2hebPq5tnA0VBT9z4=
-
-lodash@^4.16.4, lodash@^4.17.15, lodash@^4.17.20, lodash@^4.5.0:
- version "4.17.21"
- resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
- integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
-
-loud-rejection@^1.0.0:
- version "1.6.0"
- resolved "https://registry.yarnpkg.com/loud-rejection/-/loud-rejection-1.6.0.tgz#5b46f80147edee578870f086d04821cf998e551f"
- integrity sha1-W0b4AUft7leIcPCG0Eghz5mOVR8=
- dependencies:
- currently-unhandled "^0.4.1"
- signal-exit "^3.0.0"
-
-lowercase-keys@^1.0.0:
- version "1.0.1"
- resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-1.0.1.tgz#6f9e30b47084d971a7c820ff15a6c5167b74c26f"
- integrity sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA==
-
-map-obj@^1.0.0, map-obj@^1.0.1:
- version "1.0.1"
- resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-1.0.1.tgz#d933ceb9205d82bdcf4886f6742bdc2b4dea146d"
- integrity sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=
-
-map-obj@^2.0.0:
- version "2.0.0"
- resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-2.0.0.tgz#a65cd29087a92598b8791257a523e021222ac1f9"
- integrity sha1-plzSkIepJZi4eRJXpSPgISIqwfk=
-
-math-expression-evaluator@^1.2.14:
- version "1.3.8"
- resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.3.8.tgz#320da3b2bc1512f4f50fc3020b2b1cd5c8e9d577"
- integrity sha512-9FbRY3i6U+CbHgrdNbAUaisjWTozkm1ZfupYQJiZ87NtYHk2Zh9DvxMgp/fifxVhqTLpd5fCCLossUbpZxGeKw==
-
-meow@^3.3.0, meow@^3.6.0, meow@^3.7.0:
- version "3.7.0"
- resolved "https://registry.yarnpkg.com/meow/-/meow-3.7.0.tgz#72cb668b425228290abbfa856892587308a801fb"
- integrity sha1-cstmi0JSKCkKu/qFaJJYcwioAfs=
- dependencies:
- camelcase-keys "^2.0.0"
- decamelize "^1.1.2"
- loud-rejection "^1.0.0"
- map-obj "^1.0.1"
- minimist "^1.1.3"
- normalize-package-data "^2.3.4"
- object-assign "^4.0.1"
- read-pkg-up "^1.0.1"
- redent "^1.0.0"
- trim-newlines "^1.0.0"
-
-meow@^5.0.0:
- version "5.0.0"
- resolved "https://registry.yarnpkg.com/meow/-/meow-5.0.0.tgz#dfc73d63a9afc714a5e371760eb5c88b91078aa4"
- integrity sha512-CbTqYU17ABaLefO8vCU153ZZlprKYWDljcndKKDCFcYQITzWCXZAVk4QMFZPgvzrnUQ3uItnIE/LoUOwrT15Ig==
- dependencies:
- camelcase-keys "^4.0.0"
- decamelize-keys "^1.0.0"
- loud-rejection "^1.0.0"
- minimist-options "^3.0.1"
- normalize-package-data "^2.3.4"
- read-pkg-up "^3.0.0"
- redent "^2.0.0"
- trim-newlines "^2.0.0"
- yargs-parser "^10.0.0"
-
-merge@^1.2.0:
- version "1.2.1"
- resolved "https://registry.yarnpkg.com/merge/-/merge-1.2.1.tgz#38bebf80c3220a8a487b6fcfb3941bb11720c145"
- integrity sha512-VjFo4P5Whtj4vsLzsYBu5ayHhoHJ0UqNm7ibvShmbmoz7tGi0vXaoJbGdB+GmDMLUdg8DpQXEIeVDAe8MaABvQ==
-
-"minimatch@2 || 3":
- version "3.0.4"
- resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
- integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==
- dependencies:
- brace-expansion "^1.1.7"
-
-minimist-options@^3.0.1:
- version "3.0.2"
- resolved "https://registry.yarnpkg.com/minimist-options/-/minimist-options-3.0.2.tgz#fba4c8191339e13ecf4d61beb03f070103f3d954"
- integrity sha512-FyBrT/d0d4+uiZRbqznPXqw3IpZZG3gl3wKWiX784FycUKVwBt0uLBFkQrtE4tZOrgo78nZp2jnKz3L65T5LdQ==
- dependencies:
- arrify "^1.0.1"
- is-plain-obj "^1.1.0"
-
-minimist@^1.1.0, minimist@^1.1.3, minimist@^1.2.0, minimist@^1.2.5:
- version "1.2.5"
- resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
- integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
-
-mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.1:
- version "0.5.5"
- resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.5.tgz#d91cefd62d1436ca0f41620e251288d420099def"
- integrity sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==
- dependencies:
- minimist "^1.2.5"
-
-mute-stream@~0.0.4:
- version "0.0.8"
- resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d"
- integrity sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==
-
-nanoid@^3.1.30:
- version "3.1.30"
- resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.30.tgz#63f93cc548d2a113dc5dfbc63bfa09e2b9b64362"
- integrity sha512-zJpuPDwOv8D2zq2WRoMe1HsfZthVewpel9CAvTfc/2mBD1uUT/agc5f7GHGWXlYkFvi1mVxe4IjvP2HNrop7nQ==
-
-node-fetch@^1.6.3:
- version "1.7.3"
- resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
- integrity sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==
- dependencies:
- encoding "^0.1.11"
- is-stream "^1.0.1"
-
-node-fetch@^2.0.0:
- version "2.6.5"
- resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.5.tgz#42735537d7f080a7e5f78b6c549b7146be1742fd"
- integrity sha512-mmlIVHJEu5rnIxgEgez6b9GgWXbkZj5YZ7fx+2r94a2E+Uirsp6HsPTPlomfdHtpt/B0cdKviwkoaM6pyvUOpQ==
- dependencies:
- whatwg-url "^5.0.0"
-
-normalize-package-data@^2.3.2, normalize-package-data@^2.3.4:
- version "2.5.0"
- resolved "https://registry.yarnpkg.com/normalize-package-data/-/normalize-package-data-2.5.0.tgz#e66db1838b200c1dfc233225d12cb36520e234a8"
- integrity sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==
- dependencies:
- hosted-git-info "^2.1.4"
- resolve "^1.10.0"
- semver "2 || 3 || 4 || 5"
- validate-npm-package-license "^3.0.1"
-
-normalize-range@^0.1.2:
- version "0.1.2"
- resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
- integrity sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=
-
-normalize-url@^1.4.0, normalize-url@^1.4.1:
- version "1.9.1"
- resolved "https://registry.yarnpkg.com/normalize-url/-/normalize-url-1.9.1.tgz#2cc0d66b31ea23036458436e3620d85954c66c3c"
- integrity sha1-LMDWazHqIwNkWENuNiDYWVTGbDw=
- dependencies:
- object-assign "^4.0.1"
- prepend-http "^1.0.0"
- query-string "^4.1.0"
- sort-keys "^1.0.0"
-
-normalize.css@^8.0.1:
- version "8.0.1"
- resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-8.0.1.tgz#9b98a208738b9cc2634caacbc42d131c97487bf3"
- integrity sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==
-
-num2fraction@^1.2.2:
- version "1.2.2"
- resolved "https://registry.yarnpkg.com/num2fraction/-/num2fraction-1.2.2.tgz#6f682b6a027a4e9ddfa4564cd2589d1d4e669ede"
- integrity sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=
-
-object-assign@^4.0.1, object-assign@^4.1.0:
- version "4.1.1"
- resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
- integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
-
-octokat@^0.10.0:
- version "0.10.0"
- resolved "https://registry.yarnpkg.com/octokat/-/octokat-0.10.0.tgz#a56846178199f36ddfc8979c9749ffea65736508"
- integrity sha512-VJ21L1gMlByYMurduLYiOcI8AwlZkUV8OXRN8pMXsbkIqIVqn0tgdTfxzWM9spX4VJTTG02OgqwDTqQsOmDing==
- dependencies:
- fetch-vcr "^1.1.0"
- lodash "^4.16.4"
- node-fetch "^2.0.0"
-
-once@^1.3.0:
- version "1.4.0"
- resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
- integrity sha1-WDsap3WWHUsROsF9nFC6753Xa9E=
- dependencies:
- wrappy "1"
-
-p-limit@^1.1.0:
- version "1.3.0"
- resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.3.0.tgz#b86bd5f0c25690911c7590fcbfc2010d54b3ccb8"
- integrity sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==
- dependencies:
- p-try "^1.0.0"
-
-p-locate@^2.0.0:
- version "2.0.0"
- resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-2.0.0.tgz#20a0103b222a70c8fd39cc2e580680f3dde5ec43"
- integrity sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=
- dependencies:
- p-limit "^1.1.0"
-
-p-try@^1.0.0:
- version "1.0.0"
- resolved "https://registry.yarnpkg.com/p-try/-/p-try-1.0.0.tgz#cbc79cdbaf8fd4228e13f621f2b1a237c1b207b3"
- integrity sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=
-
-parse-author@^0.2.1:
- version "0.2.2"
- resolved "https://registry.yarnpkg.com/parse-author/-/parse-author-0.2.2.tgz#302d1b8e4c66519d1c45dd95103d3328c4498efd"
- integrity sha1-MC0bjkxmUZ0cRd2VED0zKMRJjv0=
- dependencies:
- author-regex "^0.2.1"
-
-parse-json@^2.2.0:
- version "2.2.0"
- resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-2.2.0.tgz#f480f40434ef80741f8469099f8dea18f55a4dc9"
- integrity sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=
- dependencies:
- error-ex "^1.2.0"
-
-parse-json@^4.0.0:
- version "4.0.0"
- resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-4.0.0.tgz#be35f5425be1f7f6c747184f98a788cb99477ee0"
- integrity sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=
- dependencies:
- error-ex "^1.3.1"
- json-parse-better-errors "^1.0.1"
-
-path-exists@^2.0.0:
- version "2.1.0"
- resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-2.1.0.tgz#0feb6c64f0fc518d9a754dd5efb62c7022761f4b"
- integrity sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=
- dependencies:
- pinkie-promise "^2.0.0"
-
-path-exists@^3.0.0:
- version "3.0.0"
- resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515"
- integrity sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=
-
-path-is-absolute@^1.0.0:
- version "1.0.1"
- resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
- integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18=
-
-path-parse@^1.0.6:
- version "1.0.7"
- resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
- integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
-
-path-type@^1.0.0:
- version "1.1.0"
- resolved "https://registry.yarnpkg.com/path-type/-/path-type-1.1.0.tgz#59c44f7ee491da704da415da5a4070ba4f8fe441"
- integrity sha1-WcRPfuSR2nBNpBXaWkBwuk+P5EE=
- dependencies:
- graceful-fs "^4.1.2"
- pify "^2.0.0"
- pinkie-promise "^2.0.0"
-
-path-type@^3.0.0:
- version "3.0.0"
- resolved "https://registry.yarnpkg.com/path-type/-/path-type-3.0.0.tgz#cef31dc8e0a1a3bb0d105c0cd97cf3bf47f4e36f"
- integrity sha512-T2ZUsdZFHgA3u4e5PfPbjd7HDDpxPnQb5jN0SrDsjNSuVXHJqtwTnWqG0B1jZrgmJ/7lj1EmVIByWt1gxGkWvg==
- dependencies:
- pify "^3.0.0"
-
-perfectionist@^2.4.0:
- version "2.4.0"
- resolved "https://registry.yarnpkg.com/perfectionist/-/perfectionist-2.4.0.tgz#c147ad3714e126467f1764129ee72df861d47ea0"
- integrity sha1-wUetNxThJkZ/F2QSnuct+GHUfqA=
- dependencies:
- comment-regex "^1.0.0"
- defined "^1.0.0"
- minimist "^1.2.0"
- postcss "^5.0.8"
- postcss-scss "^0.3.0"
- postcss-value-parser "^3.3.0"
- read-file-stdin "^0.2.0"
- string.prototype.repeat "^0.2.0"
- vendors "^1.0.0"
- write-file-stdout "0.0.2"
-
-picocolors@^0.2.1:
- version "0.2.1"
- resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-0.2.1.tgz#570670f793646851d1ba135996962abad587859f"
- integrity sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==
-
-picocolors@^1.0.0:
- version "1.0.0"
- resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
- integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
-
-pify@^2.0.0, pify@^2.3.0:
- version "2.3.0"
- resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
- integrity sha1-7RQaasBDqEnqWISY59yosVMw6Qw=
-
-pify@^3.0.0:
- version "3.0.0"
- resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176"
- integrity sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=
-
-pify@^4.0.1:
- version "4.0.1"
- resolved "https://registry.yarnpkg.com/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
- integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==
-
-pinkie-promise@^2.0.0, pinkie-promise@^2.0.1:
- version "2.0.1"
- resolved "https://registry.yarnpkg.com/pinkie-promise/-/pinkie-promise-2.0.1.tgz#2135d6dfa7a358c069ac9b178776288228450ffa"
- integrity sha1-ITXW36ejWMBprJsXh3YogihFD/o=
- dependencies:
- pinkie "^2.0.0"
-
-pinkie@^2.0.0:
- version "2.0.4"
- resolved "https://registry.yarnpkg.com/pinkie/-/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870"
- integrity sha1-clVrgM+g1IqXToDnckjoDtT3+HA=
-
-postcss-calc@^5.2.0:
- version "5.3.1"
- resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-5.3.1.tgz#77bae7ca928ad85716e2fda42f261bf7c1d65b5e"
- integrity sha1-d7rnypKK2FcW4v2kLyYb98HWW14=
- dependencies:
- postcss "^5.0.2"
- postcss-message-helpers "^2.0.0"
- reduce-css-calc "^1.2.6"
-
-postcss-calc@^6.0.1:
- version "6.0.2"
- resolved "https://registry.yarnpkg.com/postcss-calc/-/postcss-calc-6.0.2.tgz#4d9a43e27dbbf27d095fecb021ac6896e2318337"
- integrity sha512-fiznXjEN5T42Qm7qqMCVJXS3roaj9r4xsSi+meaBVe7CJBl8t/QLOXu02Z2E6oWAMWIvCuF6JrvzFekmVEbOKA==
- dependencies:
- css-unit-converter "^1.1.1"
- postcss "^7.0.2"
- postcss-selector-parser "^2.2.2"
- reduce-css-calc "^2.0.0"
-
-postcss-class-repeat@^0.1.1:
- version "0.1.1"
- resolved "https://registry.yarnpkg.com/postcss-class-repeat/-/postcss-class-repeat-0.1.1.tgz#09fb9730399cc8612a38346cbb02b99b5b50b596"
- integrity sha512-0+G/JGaxsJP+a1+epFQ/XCCe9fnpr04Iq0LVp0/9DEZPcP66a/nIECgFDjwNLSOYiDnEv8p4SoWGiMqkzFd5uA==
- dependencies:
- class-repeat "^1.0.2"
- has-class-selector "^1.0.0"
- is-present "^1.0.0"
- postcss "^5.0.19"
-
-postcss-colormin@^2.1.8:
- version "2.2.2"
- resolved "https://registry.yarnpkg.com/postcss-colormin/-/postcss-colormin-2.2.2.tgz#6631417d5f0e909a3d7ec26b24c8a8d1e4f96e4b"
- integrity sha1-ZjFBfV8OkJo9fsJrJMio0eT5bks=
- dependencies:
- colormin "^1.0.5"
- postcss "^5.0.13"
- postcss-value-parser "^3.2.3"
-
-postcss-conditionals@^2.1.0:
- version "2.1.0"
- resolved "https://registry.yarnpkg.com/postcss-conditionals/-/postcss-conditionals-2.1.0.tgz#4d1f62aa540458ce7ab779f71656901c8f8e929a"
- integrity sha1-TR9iqlQEWM56t3n3FlaQHI+Okpo=
- dependencies:
- css-color-converter "^1.0.2"
- css-unit-converter "^1.0.0"
- postcss "^5.0.4"
-
-postcss-convert-values@^2.3.4:
- version "2.6.1"
- resolved "https://registry.yarnpkg.com/postcss-convert-values/-/postcss-convert-values-2.6.1.tgz#bbd8593c5c1fd2e3d1c322bb925dcae8dae4d62d"
- integrity sha1-u9hZPFwf0uPRwyK7kl3K6Nrk1i0=
- dependencies:
- postcss "^5.0.11"
- postcss-value-parser "^3.1.2"
-
-postcss-css-variables@^0.8.0:
- version "0.8.1"
- resolved "https://registry.yarnpkg.com/postcss-css-variables/-/postcss-css-variables-0.8.1.tgz#a52e5ef1a2eb633a8a4f5fc434d6d85d40fe7310"
- integrity sha1-pS5e8aLrYzqKT1/ENNbYXUD+cxA=
- dependencies:
- escape-string-regexp "^1.0.3"
- extend "^3.0.1"
- postcss "^6.0.8"
-
-postcss-custom-media@^6.0.0:
- version "6.0.0"
- resolved "https://registry.yarnpkg.com/postcss-custom-media/-/postcss-custom-media-6.0.0.tgz#be532784110ecb295044fb5395a18006eb21a737"
- integrity sha1-vlMnhBEOyylQRPtTlaGABushpzc=
- dependencies:
- postcss "^6.0.1"
-
-postcss-discard-comments@^2.0.4:
- version "2.0.4"
- resolved "https://registry.yarnpkg.com/postcss-discard-comments/-/postcss-discard-comments-2.0.4.tgz#befe89fafd5b3dace5ccce51b76b81514be00e3d"
- integrity sha1-vv6J+v1bPazlzM5Rt2uBUUvgDj0=
- dependencies:
- postcss "^5.0.14"
-
-postcss-discard-duplicates@^2.0.1:
- version "2.1.0"
- resolved "https://registry.yarnpkg.com/postcss-discard-duplicates/-/postcss-discard-duplicates-2.1.0.tgz#b9abf27b88ac188158a5eb12abcae20263b91932"
- integrity sha1-uavye4isGIFYpesSq8riAmO5GTI=
- dependencies:
- postcss "^5.0.4"
-
-postcss-discard-empty@^2.0.1:
- version "2.1.0"
- resolved "https://registry.yarnpkg.com/postcss-discard-empty/-/postcss-discard-empty-2.1.0.tgz#d2b4bd9d5ced5ebd8dcade7640c7d7cd7f4f92b5"
- integrity sha1-0rS9nVztXr2Nyt52QMfXzX9PkrU=
- dependencies:
- postcss "^5.0.14"
-
-postcss-discard-overridden@^0.1.1:
- version "0.1.1"
- resolved "https://registry.yarnpkg.com/postcss-discard-overridden/-/postcss-discard-overridden-0.1.1.tgz#8b1eaf554f686fb288cd874c55667b0aa3668d58"
- integrity sha1-ix6vVU9ob7KIzYdMVWZ7CqNmjVg=
- dependencies:
- postcss "^5.0.16"
-
-postcss-discard-unused@^2.2.1:
- version "2.2.3"
- resolved "https://registry.yarnpkg.com/postcss-discard-unused/-/postcss-discard-unused-2.2.3.tgz#bce30b2cc591ffc634322b5fb3464b6d934f4433"
- integrity sha1-vOMLLMWR/8Y0Mitfs0ZLbZNPRDM=
- dependencies:
- postcss "^5.0.14"
- uniqs "^2.0.0"
-
-postcss-extend-rule@^1.1.0:
- version "1.1.0"
- resolved "https://registry.yarnpkg.com/postcss-extend-rule/-/postcss-extend-rule-1.1.0.tgz#11e4d590ffe4253b853ef1fc03be7167da607d38"
- integrity sha512-+NXtLOY49Xcx9173SJAYj41esTRTpihSLoKpj5yzoBki9PZK4HF37AH9AVyCeLFJL9fzhh0YFuk/3eyeZ9d/jw==
- dependencies:
- postcss "^6.0.11"
- postcss-nesting "^4.2.1"
-
-postcss-filter-plugins@^2.0.0:
- version "2.0.3"
- resolved "https://registry.yarnpkg.com/postcss-filter-plugins/-/postcss-filter-plugins-2.0.3.tgz#82245fdf82337041645e477114d8e593aa18b8ec"
- integrity sha512-T53GVFsdinJhgwm7rg1BzbeBRomOg9y5MBVhGcsV0CxurUdVj1UlPdKtn7aqYA/c/QVkzKMjq2bSV5dKG5+AwQ==
- dependencies:
- postcss "^5.0.4"
-
-postcss-import@^11.1.0:
- version "11.1.0"
- resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-11.1.0.tgz#55c9362c9192994ec68865d224419df1db2981f0"
- integrity sha512-5l327iI75POonjxkXgdRCUS+AlzAdBx4pOvMEhTKTCjb1p8IEeVR9yx3cPbmN7LIWJLbfnIXxAhoB4jpD0c/Cw==
- dependencies:
- postcss "^6.0.1"
- postcss-value-parser "^3.2.3"
- read-cache "^1.0.0"
- resolve "^1.1.7"
-
-postcss-import@^7.1.3:
- version "7.1.3"
- resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-7.1.3.tgz#92d1021af2a60df4ddc0acf3aa7ff7726a4d6c90"
- integrity sha1-ktECGvKmDfTdwKzzqn/3cmpNbJA=
- dependencies:
- glob "^5.0.14"
- object-assign "^4.0.1"
- postcss "^5.0.2"
- postcss-message-helpers "^2.0.0"
- resolve "^1.1.6"
-
-postcss-merge-idents@^2.1.5:
- version "2.1.7"
- resolved "https://registry.yarnpkg.com/postcss-merge-idents/-/postcss-merge-idents-2.1.7.tgz#4c5530313c08e1d5b3bbf3d2bbc747e278eea270"
- integrity sha1-TFUwMTwI4dWzu/PSu8dH4njuonA=
- dependencies:
- has "^1.0.1"
- postcss "^5.0.10"
- postcss-value-parser "^3.1.1"
-
-postcss-merge-longhand@^2.0.1:
- version "2.0.2"
- resolved "https://registry.yarnpkg.com/postcss-merge-longhand/-/postcss-merge-longhand-2.0.2.tgz#23d90cd127b0a77994915332739034a1a4f3d658"
- integrity sha1-I9kM0Sewp3mUkVMyc5A0oaTz1lg=
- dependencies:
- postcss "^5.0.4"
-
-postcss-merge-rules@^2.0.3:
- version "2.1.2"
- resolved "https://registry.yarnpkg.com/postcss-merge-rules/-/postcss-merge-rules-2.1.2.tgz#d1df5dfaa7b1acc3be553f0e9e10e87c61b5f721"
- integrity sha1-0d9d+qexrMO+VT8OnhDofGG19yE=
- dependencies:
- browserslist "^1.5.2"
- caniuse-api "^1.5.2"
- postcss "^5.0.4"
- postcss-selector-parser "^2.2.2"
- vendors "^1.0.0"
-
-postcss-message-helpers@^2.0.0:
- version "2.0.0"
- resolved "https://registry.yarnpkg.com/postcss-message-helpers/-/postcss-message-helpers-2.0.0.tgz#a4f2f4fab6e4fe002f0aed000478cdf52f9ba60e"
- integrity sha1-pPL0+rbk/gAvCu0ABHjN9S+bpg4=
-
-postcss-minify-font-values@^1.0.2:
- version "1.0.5"
- resolved "https://registry.yarnpkg.com/postcss-minify-font-values/-/postcss-minify-font-values-1.0.5.tgz#4b58edb56641eba7c8474ab3526cafd7bbdecb69"
- integrity sha1-S1jttWZB66fIR0qzUmyv17vey2k=
- dependencies:
- object-assign "^4.0.1"
- postcss "^5.0.4"
- postcss-value-parser "^3.0.2"
-
-postcss-minify-gradients@^1.0.1:
- version "1.0.5"
- resolved "https://registry.yarnpkg.com/postcss-minify-gradients/-/postcss-minify-gradients-1.0.5.tgz#5dbda11373703f83cfb4a3ea3881d8d75ff5e6e1"
- integrity sha1-Xb2hE3NwP4PPtKPqOIHY11/15uE=
- dependencies:
- postcss "^5.0.12"
- postcss-value-parser "^3.3.0"
-
-postcss-minify-params@^1.0.4:
- version "1.2.2"
- resolved "https://registry.yarnpkg.com/postcss-minify-params/-/postcss-minify-params-1.2.2.tgz#ad2ce071373b943b3d930a3fa59a358c28d6f1f3"
- integrity sha1-rSzgcTc7lDs9kwo/pZo1jCjW8fM=
- dependencies:
- alphanum-sort "^1.0.1"
- postcss "^5.0.2"
- postcss-value-parser "^3.0.2"
- uniqs "^2.0.0"
-
-postcss-minify-selectors@^2.0.4:
- version "2.1.1"
- resolved "https://registry.yarnpkg.com/postcss-minify-selectors/-/postcss-minify-selectors-2.1.1.tgz#b2c6a98c0072cf91b932d1a496508114311735bf"
- integrity sha1-ssapjAByz5G5MtGkllCBFDEXNb8=
- dependencies:
- alphanum-sort "^1.0.2"
- has "^1.0.1"
- postcss "^5.0.14"
- postcss-selector-parser "^2.0.0"
-
-postcss-nesting@^4.2.1:
- version "4.2.1"
- resolved "https://registry.yarnpkg.com/postcss-nesting/-/postcss-nesting-4.2.1.tgz#0483bce338b3f0828ced90ff530b29b98b00300d"
- integrity sha512-IkyWXICwagCnlaviRexi7qOdwPw3+xVVjgFfGsxmztvRVaNxAlrypOIKqDE5mxY+BVxnId1rnUKBRQoNE2VDaA==
- dependencies:
- postcss "^6.0.11"
-
-postcss-normalize-charset@^1.1.0:
- version "1.1.1"
- resolved "https://registry.yarnpkg.com/postcss-normalize-charset/-/postcss-normalize-charset-1.1.1.tgz#ef9ee71212d7fe759c78ed162f61ed62b5cb93f1"
- integrity sha1-757nEhLX/nWceO0WL2HtYrXLk/E=
- dependencies:
- postcss "^5.0.5"
-
-postcss-normalize-url@^3.0.7:
- version "3.0.8"
- resolved "https://registry.yarnpkg.com/postcss-normalize-url/-/postcss-normalize-url-3.0.8.tgz#108f74b3f2fcdaf891a2ffa3ea4592279fc78222"
- integrity sha1-EI90s/L82viRov+j6kWSJ5/HgiI=
- dependencies:
- is-absolute-url "^2.0.0"
- normalize-url "^1.4.0"
- postcss "^5.0.14"
- postcss-value-parser "^3.2.3"
-
-postcss-ordered-values@^2.1.0:
- version "2.2.3"
- resolved "https://registry.yarnpkg.com/postcss-ordered-values/-/postcss-ordered-values-2.2.3.tgz#eec6c2a67b6c412a8db2042e77fe8da43f95c11d"
- integrity sha1-7sbCpntsQSqNsgQud/6NpD+VwR0=
- dependencies:
- postcss "^5.0.4"
- postcss-value-parser "^3.0.1"
-
-postcss-reduce-idents@^2.2.2:
- version "2.4.0"
- resolved "https://registry.yarnpkg.com/postcss-reduce-idents/-/postcss-reduce-idents-2.4.0.tgz#c2c6d20cc958284f6abfbe63f7609bf409059ad3"
- integrity sha1-wsbSDMlYKE9qv75j92Cb9AkFmtM=
- dependencies:
- postcss "^5.0.4"
- postcss-value-parser "^3.0.2"
-
-postcss-reduce-initial@^1.0.0:
- version "1.0.1"
- resolved "https://registry.yarnpkg.com/postcss-reduce-initial/-/postcss-reduce-initial-1.0.1.tgz#68f80695f045d08263a879ad240df8dd64f644ea"
- integrity sha1-aPgGlfBF0IJjqHmtJA343WT2ROo=
- dependencies:
- postcss "^5.0.4"
-
-postcss-reduce-transforms@^1.0.3:
- version "1.0.4"
- resolved "https://registry.yarnpkg.com/postcss-reduce-transforms/-/postcss-reduce-transforms-1.0.4.tgz#ff76f4d8212437b31c298a42d2e1444025771ae1"
- integrity sha1-/3b02CEkN7McKYpC0uFEQCV3GuE=
- dependencies:
- has "^1.0.1"
- postcss "^5.0.8"
- postcss-value-parser "^3.0.1"
-
-postcss-rtl@^1.2.3:
- version "1.7.3"
- resolved "https://registry.yarnpkg.com/postcss-rtl/-/postcss-rtl-1.7.3.tgz#5019bf2826e90972fba8ad061c7f80d43c817bfb"
- integrity sha512-PMwlrQSeZKChNJQGtWz9Xfk3rY1W7P5Jp4sFRXVufczQIH6vRhTNSc5gnEwKHaWrU8SMoZMi2VY7ihOmwVvW7g==
- dependencies:
- rtlcss "2.5.0"
-
-postcss-safe-parser@^5.0.2:
- version "5.0.2"
- resolved "https://registry.yarnpkg.com/postcss-safe-parser/-/postcss-safe-parser-5.0.2.tgz#459dd27df6bc2ba64608824ba39e45dacf5e852d"
- integrity sha512-jDUfCPJbKOABhwpUKcqCVbbXiloe/QXMcbJ6Iipf3sDIihEzTqRCeMBfRaOHxhBuTYqtASrI1KJWxzztZU4qUQ==
- dependencies:
- postcss "^8.1.0"
-
-postcss-scss@^0.3.0:
- version "0.3.1"
- resolved "https://registry.yarnpkg.com/postcss-scss/-/postcss-scss-0.3.1.tgz#65c610d8e2a7ee0e62b1835b71b8870734816e4b"
- integrity sha1-ZcYQ2OKn7g5isYNbcbiHBzSBbks=
- dependencies:
- postcss "^5.2.4"
-
-postcss-selector-parser@^2.0.0, postcss-selector-parser@^2.2.2:
- version "2.2.3"
- resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-2.2.3.tgz#f9437788606c3c9acee16ffe8d8b16297f27bb90"
- integrity sha1-+UN3iGBsPJrO4W/+jYsWKX8nu5A=
- dependencies:
- flatten "^1.0.2"
- indexes-of "^1.0.1"
- uniq "^1.0.1"
-
-postcss-svgo@^2.1.1:
- version "2.1.6"
- resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-2.1.6.tgz#b6df18aa613b666e133f08adb5219c2684ac108d"
- integrity sha1-tt8YqmE7Zm4TPwittSGcJoSsEI0=
- dependencies:
- is-svg "^2.0.0"
- postcss "^5.0.14"
- postcss-value-parser "^3.2.3"
- svgo "^0.7.0"
-
-postcss-unique-selectors@^2.0.2:
- version "2.0.2"
- resolved "https://registry.yarnpkg.com/postcss-unique-selectors/-/postcss-unique-selectors-2.0.2.tgz#981d57d29ddcb33e7b1dfe1fd43b8649f933ca1d"
- integrity sha1-mB1X0p3csz57Hf4f1DuGSfkzyh0=
- dependencies:
- alphanum-sort "^1.0.1"
- postcss "^5.0.4"
- uniqs "^2.0.0"
-
-postcss-value-parser@^3.0.1, postcss-value-parser@^3.0.2, postcss-value-parser@^3.1.1, postcss-value-parser@^3.1.2, postcss-value-parser@^3.2.3, postcss-value-parser@^3.3.0:
- version "3.3.1"
- resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
- integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
-
-postcss-zindex@^2.0.1:
- version "2.2.0"
- resolved "https://registry.yarnpkg.com/postcss-zindex/-/postcss-zindex-2.2.0.tgz#d2109ddc055b91af67fc4cb3b025946639d2af22"
- integrity sha1-0hCd3AVbka9n/EyzsCWUZjnSryI=
- dependencies:
- has "^1.0.1"
- postcss "^5.0.4"
- uniqs "^2.0.0"
-
-postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.16, postcss@^5.0.19, postcss@^5.0.2, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.8, postcss@^5.2.16, postcss@^5.2.4:
- version "5.2.18"
- resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.18.tgz#badfa1497d46244f6390f58b319830d9107853c5"
- integrity sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==
- dependencies:
- chalk "^1.1.3"
- js-base64 "^2.1.9"
- source-map "^0.5.6"
- supports-color "^3.2.3"
-
-postcss@^6.0.1, postcss@^6.0.11, postcss@^6.0.16, postcss@^6.0.19, postcss@^6.0.23, postcss@^6.0.8:
- version "6.0.23"
- resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.23.tgz#61c82cc328ac60e677645f979054eb98bc0e3324"
- integrity sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==
- dependencies:
- chalk "^2.4.1"
- source-map "^0.6.1"
- supports-color "^5.4.0"
-
-postcss@^7.0.0, postcss@^7.0.2:
- version "7.0.39"
- resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.39.tgz#9624375d965630e2e1f2c02a935c82a59cb48309"
- integrity sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==
- dependencies:
- picocolors "^0.2.1"
- source-map "^0.6.1"
-
-postcss@^8.1.0, postcss@^8.1.4:
- version "8.3.11"
- resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.3.11.tgz#c3beca7ea811cd5e1c4a3ec6d2e7599ef1f8f858"
- integrity sha512-hCmlUAIlUiav8Xdqw3Io4LcpA1DOt7h3LSTAC4G6JGHFFaWzI6qvFt9oilvl8BmkbBRX1IhM90ZAmpk68zccQA==
- dependencies:
- nanoid "^3.1.30"
- picocolors "^1.0.0"
- source-map-js "^0.6.2"
-
-prepend-http@^1.0.0, prepend-http@^1.0.1:
- version "1.0.4"
- resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
- integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=
-
-process-nextick-args@~1.0.6:
- version "1.0.7"
- resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-1.0.7.tgz#150e20b756590ad3f91093f25a4f2ad8bff30ba3"
- integrity sha1-FQ4gt1ZZCtP5EJPyWk8q2L/zC6M=
-
-pseudo-classes@1.0.0:
- version "1.0.0"
- resolved "https://registry.yarnpkg.com/pseudo-classes/-/pseudo-classes-1.0.0.tgz#60a69b67395c36ff119c4d1c86e1981785206b96"
- integrity sha1-YKabZzlcNv8RnE0chuGYF4Uga5Y=
-
-pseudo-elements@1.1.0:
- version "1.1.0"
- resolved "https://registry.yarnpkg.com/pseudo-elements/-/pseudo-elements-1.1.0.tgz#9ba6dd8ac3ce1f3d7d36d4355aa3e28d08391f28"
- integrity sha1-m6bdisPOHz19NtQ1WqPijQg5Hyg=
-
-q@^1.1.2:
- version "1.5.1"
- resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
- integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=
-
-query-string@^4.1.0:
- version "4.3.4"
- resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.3.4.tgz#bbb693b9ca915c232515b228b1a02b609043dbeb"
- integrity sha1-u7aTucqRXCMlFbIosaArYJBD2+s=
- dependencies:
- object-assign "^4.1.0"
- strict-uri-encode "^1.0.0"
-
-quick-lru@^1.0.0:
- version "1.1.0"
- resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-1.1.0.tgz#4360b17c61136ad38078397ff11416e186dcfbb8"
- integrity sha1-Q2CxfGETatOAeDl/8RQW4Ybc+7g=
-
-read-cache@^1.0.0:
- version "1.0.0"
- resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"
- integrity sha1-5mTvMRYRZsl1HNvo28+GtftY93Q=
- dependencies:
- pify "^2.3.0"
-
-read-file-stdin@^0.2.0:
- version "0.2.1"
- resolved "https://registry.yarnpkg.com/read-file-stdin/-/read-file-stdin-0.2.1.tgz#25eccff3a153b6809afacb23ee15387db9e0ee61"
- integrity sha1-JezP86FTtoCa+ssj7hU4fbng7mE=
- dependencies:
- gather-stream "^1.0.0"
-
-read-pkg-up@^1.0.1:
- version "1.0.1"
- resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-1.0.1.tgz#9d63c13276c065918d57f002a57f40a1b643fb02"
- integrity sha1-nWPBMnbAZZGNV/ACpX9AobZD+wI=
- dependencies:
- find-up "^1.0.0"
- read-pkg "^1.0.0"
-
-read-pkg-up@^3.0.0:
- version "3.0.0"
- resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-3.0.0.tgz#3ed496685dba0f8fe118d0691dc51f4a1ff96f07"
- integrity sha1-PtSWaF26D4/hGNBpHcUfSh/5bwc=
- dependencies:
- find-up "^2.0.0"
- read-pkg "^3.0.0"
-
-read-pkg@^1.0.0:
- version "1.1.0"
- resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-1.1.0.tgz#f5ffaa5ecd29cb31c0474bca7d756b6bb29e3f28"
- integrity sha1-9f+qXs0pyzHAR0vKfXVra7KePyg=
- dependencies:
- load-json-file "^1.0.0"
- normalize-package-data "^2.3.2"
- path-type "^1.0.0"
-
-read-pkg@^3.0.0:
- version "3.0.0"
- resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-3.0.0.tgz#9cbc686978fee65d16c00e2b19c237fcf6e38389"
- integrity sha1-nLxoaXj+5l0WwA4rGcI3/Pbjg4k=
- dependencies:
- load-json-file "^4.0.0"
- normalize-package-data "^2.3.2"
- path-type "^3.0.0"
-
-read@~1.0.7:
- version "1.0.7"
- resolved "https://registry.yarnpkg.com/read/-/read-1.0.7.tgz#b3da19bd052431a97671d44a42634adf710b40c4"
- integrity sha1-s9oZvQUkMal2cdRKQmNK33ELQMQ=
- dependencies:
- mute-stream "~0.0.4"
-
-"readable-stream@>=1.0.33-1 <1.1.0-0":
- version "1.0.34"
- resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.0.34.tgz#125820e34bc842d2f2aaafafe4c2916ee32c157c"
- integrity sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=
- dependencies:
- core-util-is "~1.0.0"
- inherits "~2.0.1"
- isarray "0.0.1"
- string_decoder "~0.10.x"
-
-readable-stream@~1.1.9:
- version "1.1.14"
- resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.1.14.tgz#7cf4c54ef648e3813084c636dd2079e166c081d9"
- integrity sha1-fPTFTvZI44EwhMY23SB54WbAgdk=
- dependencies:
- core-util-is "~1.0.0"
- inherits "~2.0.1"
- isarray "0.0.1"
- string_decoder "~0.10.x"
-
-readable-stream@~2.0.5:
- version "2.0.6"
- resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.0.6.tgz#8f90341e68a53ccc928788dacfcd11b36eb9b78e"
- integrity sha1-j5A0HmilPMySh4jaz80Rs265t44=
- dependencies:
- core-util-is "~1.0.0"
- inherits "~2.0.1"
- isarray "~1.0.0"
- process-nextick-args "~1.0.6"
- string_decoder "~0.10.x"
- util-deprecate "~1.0.1"
-
-redent@^1.0.0:
- version "1.0.0"
- resolved "https://registry.yarnpkg.com/redent/-/redent-1.0.0.tgz#cf916ab1fd5f1f16dfb20822dd6ec7f730c2afde"
- integrity sha1-z5Fqsf1fHxbfsggi3W7H9zDCr94=
- dependencies:
- indent-string "^2.1.0"
- strip-indent "^1.0.1"
-
-redent@^2.0.0:
- version "2.0.0"
- resolved "https://registry.yarnpkg.com/redent/-/redent-2.0.0.tgz#c1b2007b42d57eb1389079b3c8333639d5e1ccaa"
- integrity sha1-wbIAe0LVfrE4kHmzyDM2OdXhzKo=
- dependencies:
- indent-string "^3.0.0"
- strip-indent "^2.0.0"
-
-reduce-css-calc@^1.2.6:
- version "1.3.0"
- resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-1.3.0.tgz#747c914e049614a4c9cfbba629871ad1d2927716"
- integrity sha1-dHyRTgSWFKTJz7umKYca0dKSdxY=
- dependencies:
- balanced-match "^0.4.2"
- math-expression-evaluator "^1.2.14"
- reduce-function-call "^1.0.1"
-
-reduce-css-calc@^2.0.0:
- version "2.1.8"
- resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-2.1.8.tgz#7ef8761a28d614980dc0c982f772c93f7a99de03"
- integrity sha512-8liAVezDmUcH+tdzoEGrhfbGcP7nOV4NkGE3a74+qqvE7nt9i4sKLGBuZNOnpI4WiGksiNPklZxva80061QiPg==
- dependencies:
- css-unit-converter "^1.1.1"
- postcss-value-parser "^3.3.0"
-
-reduce-function-call@^1.0.1:
- version "1.0.3"
- resolved "https://registry.yarnpkg.com/reduce-function-call/-/reduce-function-call-1.0.3.tgz#60350f7fb252c0a67eb10fd4694d16909971300f"
- integrity sha512-Hl/tuV2VDgWgCSEeWMLwxLZqX7OK59eU1guxXsRKTAyeYimivsKdtcV4fu3r710tpG5GmDKDhQ0HSZLExnNmyQ==
- dependencies:
- balanced-match "^1.0.0"
-
-repeat-element@^1.1.0:
- version "1.1.4"
- resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.4.tgz#be681520847ab58c7568ac75fbfad28ed42d39e9"
- integrity sha512-LFiNfRcSu7KK3evMyYOuCzv3L10TW7yC1G2/+StMjK8Y6Vqd2MG7r/Qjw4ghtuCOjFvlnms/iMmLqpvW/ES/WQ==
-
-repeating@^2.0.0:
- version "2.0.1"
- resolved "https://registry.yarnpkg.com/repeating/-/repeating-2.0.1.tgz#5214c53a926d3552707527fbab415dbc08d06dda"
- integrity sha1-UhTFOpJtNVJwdSf7q0FdvAjQbdo=
- dependencies:
- is-finite "^1.0.0"
-
-resolve@^1.1.6, resolve@^1.1.7, resolve@^1.10.0:
- version "1.20.0"
- resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975"
- integrity sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==
- dependencies:
- is-core-module "^2.2.0"
- path-parse "^1.0.6"
-
-rgb-regex@^1.0.1:
- version "1.0.1"
- resolved "https://registry.yarnpkg.com/rgb-regex/-/rgb-regex-1.0.1.tgz#c0e0d6882df0e23be254a475e8edd41915feaeb1"
- integrity sha1-wODWiC3w4jviVKR16O3UGRX+rrE=
-
-rgba-regex@^1.0.0:
- version "1.0.0"
- resolved "https://registry.yarnpkg.com/rgba-regex/-/rgba-regex-1.0.0.tgz#43374e2e2ca0968b0ef1523460b7d730ff22eeb3"
- integrity sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=
-
-rtlcss@2.5.0:
- version "2.5.0"
- resolved "https://registry.yarnpkg.com/rtlcss/-/rtlcss-2.5.0.tgz#455549e49113f9e1cf83169a44de526c816de8a4"
- integrity sha512-NCVdF45w70/3CQeqVvQ84bu2HN8agNn+CDjw+RxXaiWb7mPOmEvltdd1z4qzm9kin4Jnu9ShFBIx28yvWerZ2g==
- dependencies:
- chalk "^2.4.2"
- findup "^0.1.5"
- mkdirp "^0.5.1"
- postcss "^6.0.23"
- strip-json-comments "^2.0.0"
-
-safe-buffer@^5.0.1:
- version "5.2.1"
- resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
- integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
-
-"safer-buffer@>= 2.1.2 < 3.0.0":
- version "2.1.2"
- resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
- integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
-
-sax@~1.2.1:
- version "1.2.4"
- resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
- integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
-
-"semver@2 || 3 || 4 || 5":
- version "5.7.1"
- resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
- integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
-
-signal-exit@^3.0.0:
- version "3.0.5"
- resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.5.tgz#9e3e8cc0c75a99472b44321033a7702e7738252f"
- integrity sha512-KWcOiKeQj6ZyXx7zq4YxSMgHRlod4czeBQZrPb8OKcohcqAXShm7E20kEMle9WBt26hFcAf0qLOcp5zmY7kOqQ==
-
-single-trailing-newline@^1.0.0:
- version "1.0.0"
- resolved "https://registry.yarnpkg.com/single-trailing-newline/-/single-trailing-newline-1.0.0.tgz#81f0ad2ad645181945c80952a5c1414992ee9664"
- integrity sha1-gfCtKtZFGBlFyAlSpcFBSZLulmQ=
- dependencies:
- detect-newline "^1.0.3"
-
-sort-keys@^1.0.0:
- version "1.1.2"
- resolved "https://registry.yarnpkg.com/sort-keys/-/sort-keys-1.1.2.tgz#441b6d4d346798f1b4e49e8920adfba0e543f9ad"
- integrity sha1-RBttTTRnmPG05J6JIK37oOVD+a0=
- dependencies:
- is-plain-obj "^1.0.0"
-
-source-map-js@^0.6.2:
- version "0.6.2"
- resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-0.6.2.tgz#0bb5de631b41cfbda6cfba8bd05a80efdfd2385e"
- integrity sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==
-
-source-map@^0.5.3, source-map@^0.5.6:
- version "0.5.7"
- resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
- integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
-
-source-map@^0.6.1:
- version "0.6.1"
- resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
- integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
-
-spdx-correct@^3.0.0:
- version "3.1.1"
- resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.1.1.tgz#dece81ac9c1e6713e5f7d1b6f17d468fa53d89a9"
- integrity sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w==
- dependencies:
- spdx-expression-parse "^3.0.0"
- spdx-license-ids "^3.0.0"
-
-spdx-exceptions@^2.1.0:
- version "2.3.0"
- resolved "https://registry.yarnpkg.com/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz#3f28ce1a77a00372683eade4a433183527a2163d"
- integrity sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==
-
-spdx-expression-parse@^3.0.0:
- version "3.0.1"
- resolved "https://registry.yarnpkg.com/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz#cf70f50482eefdc98e3ce0a6833e4a53ceeba679"
- integrity sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==
- dependencies:
- spdx-exceptions "^2.1.0"
- spdx-license-ids "^3.0.0"
-
-spdx-license-ids@^3.0.0:
- version "3.0.10"
- resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.10.tgz#0d9becccde7003d6c658d487dd48a32f0bf3014b"
- integrity sha512-oie3/+gKf7QtpitB0LYLETe+k8SifzsX4KixvpOsbI6S0kRiRQ5MKOio8eMSAKQ17N06+wdEOXRiId+zOxo0hA==
-
-specificity@^0.1.4:
- version "0.1.6"
- resolved "https://registry.yarnpkg.com/specificity/-/specificity-0.1.6.tgz#aa501048f96e69485ddc95ef9f7a5b77f01232aa"
- integrity sha1-qlAQSPluaUhd3JXvn3pbd/ASMqo=
-
-specificity@^0.4.1:
- version "0.4.1"
- resolved "https://registry.yarnpkg.com/specificity/-/specificity-0.4.1.tgz#aab5e645012db08ba182e151165738d00887b019"
- integrity sha512-1klA3Gi5PD1Wv9Q0wUoOQN1IWAuPu0D1U03ThXTr0cJ20+/iq2tHSDnK7Kk/0LXJ1ztUB2/1Os0wKmfyNgUQfg==
-
-sprintf-js@~1.0.2:
- version "1.0.3"
- resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
- integrity sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=
-
-strict-uri-encode@^1.0.0:
- version "1.1.0"
- resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713"
- integrity sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=
-
-string.prototype.repeat@^0.2.0:
- version "0.2.0"
- resolved "https://registry.yarnpkg.com/string.prototype.repeat/-/string.prototype.repeat-0.2.0.tgz#aba36de08dcee6a5a337d49b2ea1da1b28fc0ecf"
- integrity sha1-q6Nt4I3O5qWjN9SbLqHaGyj8Ds8=
-
-string_decoder@~0.10.x:
- version "0.10.31"
- resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
- integrity sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=
-
-strip-ansi@^3.0.0:
- version "3.0.1"
- resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-3.0.1.tgz#6a385fb8853d952d5ff05d0e8aaf94278dc63dcf"
- integrity sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=
- dependencies:
- ansi-regex "^2.0.0"
-
-strip-bom@^2.0.0:
- version "2.0.0"
- resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-2.0.0.tgz#6219a85616520491f35788bdbf1447a99c7e6b0e"
- integrity sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=
- dependencies:
- is-utf8 "^0.2.0"
-
-strip-bom@^3.0.0:
- version "3.0.0"
- resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"
- integrity sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=
-
-strip-indent@^1.0.1:
- version "1.0.1"
- resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-1.0.1.tgz#0c7962a6adefa7bbd4ac366460a638552ae1a0a2"
- integrity sha1-DHlipq3vp7vUrDZkYKY4VSrhoKI=
- dependencies:
- get-stdin "^4.0.1"
-
-strip-indent@^2.0.0:
- version "2.0.0"
- resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-2.0.0.tgz#5ef8db295d01e6ed6cbf7aab96998d7822527b68"
- integrity sha1-XvjbKV0B5u1sv3qrlpmNeCJSe2g=
-
-strip-json-comments@^2.0.0:
- version "2.0.1"
- resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
- integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo=
-
-supports-color@^2.0.0:
- version "2.0.0"
- resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
- integrity sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=
-
-supports-color@^3.2.3:
- version "3.2.3"
- resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.2.3.tgz#65ac0504b3954171d8a64946b2ae3cbb8a5f54f6"
- integrity sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=
- dependencies:
- has-flag "^1.0.0"
-
-supports-color@^5.3.0, supports-color@^5.4.0:
- version "5.5.0"
- resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
- integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
- dependencies:
- has-flag "^3.0.0"
-
-svgo@^0.7.0:
- version "0.7.2"
- resolved "https://registry.yarnpkg.com/svgo/-/svgo-0.7.2.tgz#9f5772413952135c6fefbf40afe6a4faa88b4bb5"
- integrity sha1-n1dyQTlSE1xv779Ar+ak+qiLS7U=
- dependencies:
- coa "~1.0.1"
- colors "~1.1.2"
- csso "~2.3.1"
- js-yaml "~3.7.0"
- mkdirp "~0.5.1"
- sax "~1.2.1"
- whet.extend "~0.9.9"
-
-tachyons-build-css@^1.8.1:
- version "1.8.1"
- resolved "https://registry.yarnpkg.com/tachyons-build-css/-/tachyons-build-css-1.8.1.tgz#2392ab48ddd0030f79b24a2834f04a65b713e762"
- integrity sha512-UwoA8X/tvv7UiI3F6I/1lMu1YBnh3F+8vbfnGxZHeMWwY6GlIpz8P4my1LCAfQDpamWO3Y6p9xufjhUOROFydA==
- dependencies:
- autoprefixer "^8.1.0"
- css-mqpacker "^6.0.2"
- cssnano "^3.10.0"
- perfectionist "^2.4.0"
- postcss "^6.0.19"
- postcss-calc "^6.0.1"
- postcss-class-repeat "^0.1.1"
- postcss-conditionals "^2.1.0"
- postcss-css-variables "^0.8.0"
- postcss-custom-media "^6.0.0"
- postcss-discard-comments "^2.0.4"
- postcss-extend-rule "^1.1.0"
- postcss-import "^11.1.0"
- postcss-rtl "^1.2.3"
-
-tachyons-cli@^1.3.3:
- version "1.3.3"
- resolved "https://registry.yarnpkg.com/tachyons-cli/-/tachyons-cli-1.3.3.tgz#616de915e6b3057e71e9891f9c8eb53efee661e4"
- integrity sha512-U3P0HoKY9CXNwJGR9H9xPbr9Mc1qjVgCIkVmSwCNp+TcI9TVQCB0HMnIA1H/TdFLg42PLyezPEwvyebR3FngBQ==
- dependencies:
- authors-to-markdown "^0.1.0"
- chalk "^2.4.2"
- copy-files "^0.1.0"
- css-mqpacker "^7.0.0"
- cssstats "^3.4.0"
- dedent "^0.7.0"
- file-exists "^5.0.1"
- immutable-css "^1.1.2"
- is-blank "^2.1.0"
- is-present "^1.0.0"
- lodash "^4.17.15"
- meow "^5.0.0"
- mkdirp "^0.5.1"
- single-trailing-newline "^1.0.0"
- tachyons-build-css "^1.8.1"
-
-tachyons-modules@^1.1.10:
- version "1.1.10"
- resolved "https://registry.yarnpkg.com/tachyons-modules/-/tachyons-modules-1.1.10.tgz#2475da90c62f86dafd47b7c95d52496f7623e165"
- integrity sha1-JHXakMYvhtr9R7fJXVJJb3Yj4WU=
- dependencies:
- github-repositories "^3.0.0"
- is-present "^1.0.0"
- pinkie-promise "^2.0.1"
-
-through2@~0.6.3:
- version "0.6.5"
- resolved "https://registry.yarnpkg.com/through2/-/through2-0.6.5.tgz#41ab9c67b29d57209071410e1d7a7a968cd3ad48"
- integrity sha1-QaucZ7KdVyCQcUEOHXp6lozTrUg=
- dependencies:
- readable-stream ">=1.0.33-1 <1.1.0-0"
- xtend ">=4.0.0 <4.1.0-0"
-
-timed-out@^4.0.0:
- version "4.0.1"
- resolved "https://registry.yarnpkg.com/timed-out/-/timed-out-4.0.1.tgz#f32eacac5a175bea25d7fab565ab3ed8741ef56f"
- integrity sha1-8y6srFoXW+ol1/q1Zas+2HQe9W8=
-
-tr46@~0.0.3:
- version "0.0.3"
- resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
- integrity sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o=
-
-trim-newlines@^1.0.0:
- version "1.0.0"
- resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-1.0.0.tgz#5887966bb582a4503a41eb524f7d35011815a613"
- integrity sha1-WIeWa7WCpFA6QetST301ARgVphM=
-
-trim-newlines@^2.0.0:
- version "2.0.0"
- resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-2.0.0.tgz#b403d0b91be50c331dfc4b82eeceb22c3de16d20"
- integrity sha1-tAPQuRvlDDMd/EuC7s6yLD3hbSA=
-
-uniq@^1.0.1:
- version "1.0.1"
- resolved "https://registry.yarnpkg.com/uniq/-/uniq-1.0.1.tgz#b31c5ae8254844a3a8281541ce2b04b865a734ff"
- integrity sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8=
-
-uniqs@^2.0.0:
- version "2.0.0"
- resolved "https://registry.yarnpkg.com/uniqs/-/uniqs-2.0.0.tgz#ffede4b36b25290696e6e165d4a59edb998e6b02"
- integrity sha1-/+3ks2slKQaW5uFl1KWe25mOawI=
-
-unzip-response@^2.0.1:
- version "2.0.1"
- resolved "https://registry.yarnpkg.com/unzip-response/-/unzip-response-2.0.1.tgz#d2f0f737d16b0615e72a6935ed04214572d56f97"
- integrity sha1-0vD3N9FrBhXnKmk17QQhRXLVb5c=
-
-url-parse-lax@^1.0.0:
- version "1.0.0"
- resolved "https://registry.yarnpkg.com/url-parse-lax/-/url-parse-lax-1.0.0.tgz#7af8f303645e9bd79a272e7a14ac68bc0609da73"
- integrity sha1-evjzA2Rem9eaJy56FKxovAYJ2nM=
- dependencies:
- prepend-http "^1.0.1"
-
-util-deprecate@~1.0.1:
- version "1.0.2"
- resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
- integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
-
-validate-npm-package-license@^3.0.1:
- version "3.0.4"
- resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz#fc91f6b9c7ba15c857f4cb2c5defeec39d4f410a"
- integrity sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==
- dependencies:
- spdx-correct "^3.0.0"
- spdx-expression-parse "^3.0.0"
-
-vendor-prefixes@1.0.0:
- version "1.0.0"
- resolved "https://registry.yarnpkg.com/vendor-prefixes/-/vendor-prefixes-1.0.0.tgz#1c7b92ece46e2f1a06c5a907613f5d50045df531"
- integrity sha1-HHuS7ORuLxoGxakHYT9dUARd9TE=
-
-vendors@^1.0.0:
- version "1.0.4"
- resolved "https://registry.yarnpkg.com/vendors/-/vendors-1.0.4.tgz#e2b800a53e7a29b93506c3cf41100d16c4c4ad8e"
- integrity sha512-/juG65kTL4Cy2su4P8HjtkTxk6VmJDiOPBufWniqQ6wknac6jNiXS9vU+hO3wgusiyqWlzTbVHi0dyJqRONg3w==
-
-watch@^1.0.2:
- version "1.0.2"
- resolved "https://registry.yarnpkg.com/watch/-/watch-1.0.2.tgz#340a717bde765726fa0aa07d721e0147a551df0c"
- integrity sha1-NApxe952Vyb6CqB9ch4BR6VR3ww=
- dependencies:
- exec-sh "^0.2.0"
- minimist "^1.2.0"
-
-webidl-conversions@^3.0.0:
- version "3.0.1"
- resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"
- integrity sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE=
-
-whatwg-fetch@^2.0.3:
- version "2.0.4"
- resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.4.tgz#dde6a5df315f9d39991aa17621853d720b85566f"
- integrity sha512-dcQ1GWpOD/eEQ97k66aiEVpNnapVj90/+R+SXTPYGHpYBBypfKJEQjLrvMZ7YXbKm21gXd4NcuxUTjiv1YtLng==
-
-whatwg-url@^5.0.0:
- version "5.0.0"
- resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-5.0.0.tgz#966454e8765462e37644d3626f6742ce8b70965d"
- integrity sha1-lmRU6HZUYuN2RNNib2dCzotwll0=
- dependencies:
- tr46 "~0.0.3"
- webidl-conversions "^3.0.0"
-
-whet.extend@~0.9.9:
- version "0.9.9"
- resolved "https://registry.yarnpkg.com/whet.extend/-/whet.extend-0.9.9.tgz#f877d5bf648c97e5aa542fadc16d6a259b9c11a1"
- integrity sha1-+HfVv2SMl+WqVC+twW1qJZucEaE=
-
-wrappy@1:
- version "1.0.2"
- resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
- integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
-
-write-file-stdout@0.0.2:
- version "0.0.2"
- resolved "https://registry.yarnpkg.com/write-file-stdout/-/write-file-stdout-0.0.2.tgz#c252d7c7c5b1b402897630e3453c7bfe690d9ca1"
- integrity sha1-wlLXx8WxtAKJdjDjRTx7/mkNnKE=
-
-"xtend@>=4.0.0 <4.1.0-0", xtend@^4.0.0, xtend@~4.0.1:
- version "4.0.2"
- resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
- integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
-
-yargs-parser@^10.0.0:
- version "10.1.0"
- resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-10.1.0.tgz#7202265b89f7e9e9f2e5765e0fe735a905edbaa8"
- integrity sha512-VCIyR1wJoEBZUqk5PA+oOBF6ypbwh5aNB3I50guxAL/quggdfs4TtNHQrSazFA3fYZ+tEqfs0zIGlv0c/rgjbQ==
- dependencies:
- camelcase "^4.1.0"