@julseb-lib/react 0.0.51 → 0.0.53

package/dist/lib/index.css

@@ -0,0 +1,1422 @@
+@charset "UTF-8";
+
+/*=============================================== TSX Lib base CSS ===============================================*/
+
+/*==================== Imports ====================*/
+
+@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&display=swap");
+
+/*==================== Variables ====================*/
+
+:root {
+    /*===== Colors =====*/
+
+    --color-black: rgb(0, 0, 0);
+    --color-white: rgb(255, 255, 255);
+
+    --color-light-gray-50: rgb(248, 248, 248);
+    --color-light-gray-100: rgb(228, 228, 228);
+    --color-light-gray-200: rgb(200, 200, 200);
+    --color-light-gray-300: rgb(173, 173, 173);
+    --color-light-gray-400: rgb(145, 145, 145);
+    --color-light-gray-500: rgb(118, 118, 118);
+    --color-light-gray-600: rgb(94, 94, 94);
+    --color-light-gray-700: rgb(71, 71, 71);
+    --color-light-gray-800: rgb(47, 47, 47);
+    --color-light-gray-900: rgb(24, 24, 24);
+    --color-light-primary-50: rgb(244, 246, 247);
+    --color-light-primary-100: rgb(209, 218, 225);
+    --color-light-primary-200: rgb(164, 181, 195);
+    --color-light-primary-300: rgb(118, 143, 164);
+    --color-light-primary-400: rgb(73, 106, 134);
+    --color-light-primary-500: rgb(27, 69, 104);
+    --color-light-primary-600: rgb(22, 55, 83);
+    --color-light-primary-700: rgb(16, 41, 62);
+    --color-light-primary-800: rgb(11, 28, 42);
+    --color-light-primary-900: rgb(5, 14, 21);
+    --color-light-secondary-50: rgb(244, 248, 253);
+    --color-light-secondary-100: rgb(212, 226, 246);
+    --color-light-secondary-200: rgb(168, 197, 237);
+    --color-light-secondary-300: rgb(125, 167, 229);
+    --color-light-secondary-400: rgb(81, 138, 220);
+    --color-light-secondary-500: rgb(38, 109, 211);
+    --color-light-secondary-600: rgb(30, 87, 169);
+    --color-light-secondary-700: rgb(23, 65, 127);
+    --color-light-secondary-800: rgb(15, 44, 84);
+    --color-light-secondary-900: rgb(8, 22, 42);
+    --color-light-success-50: rgb(243, 249, 246);
+    --color-light-success-100: rgb(206, 230, 219);
+    --color-light-success-200: rgb(157, 205, 183);
+    --color-light-success-300: rgb(107, 179, 146);
+    --color-light-success-400: rgb(58, 154, 110);
+    --color-light-success-500: rgb(9, 129, 74);
+    --color-light-success-600: rgb(7, 103, 59);
+    --color-light-success-700: rgb(5, 77, 44);
+    --color-light-success-800: rgb(4, 52, 30);
+    --color-light-success-900: rgb(2, 26, 15);
+    --color-light-danger-50: rgb(251, 242, 244);
+    --color-light-danger-100: rgb(240, 204, 209);
+    --color-light-danger-200: rgb(225, 153, 164);
+    --color-light-danger-300: rgb(209, 102, 118);
+    --color-light-danger-400: rgb(194, 51, 73);
+    --color-light-danger-500: rgb(179, 0, 27);
+    --color-light-danger-600: rgb(143, 0, 22);
+    --color-light-danger-700: rgb(107, 0, 16);
+    --color-light-danger-800: rgb(72, 0, 11);
+    --color-light-danger-900: rgb(36, 0, 5);
+    --color-light-warning-50: rgb(252, 246, 242);
+    --color-light-warning-100: rgb(243, 219, 204);
+    --color-light-warning-200: rgb(231, 182, 153);
+    --color-light-warning-300: rgb(220, 146, 102);
+    --color-light-warning-400: rgb(208, 109, 51);
+    --color-light-warning-500: rgb(196, 73, 0);
+    --color-light-warning-600: rgb(157, 58, 0);
+    --color-light-warning-700: rgb(118, 44, 0);
+    --color-light-warning-800: rgb(78, 29, 0);
+    --color-light-warning-900: rgb(39, 15, 0);
+    --color-light-background: var(--color-white);
+    --color-light-font: var(--color-black);
+
+    --color-light-link-font-default: var(--color-light-font);
+    --color-light-link-font-hover: var(--color-light-gray-700);
+    --color-light-link-font-active: var(--color-light-gray-900);
+
+    --color-light-link-background-default: var(--color-light-background);
+    --color-light-link-background-hover: var(--color-light-gray-300);
+    --color-light-link-background-active: var(--color-light-gray-100);
+
+    --color-light-font-ghost-default: var(--color-light-gray-900);
+    --color-light-font-ghost-hover: var(--color-light-gray-700);
+    --color-light-font-ghost-active: var(--color-light-gray-800);
+
+    --color-light-background-ghost-default: var(--color-light-gray-50);
+    --color-light-background-ghost-hover: var(--color-light-gray-200);
+    --color-light-background-ghost-active: var(--color-light-gray-100);
+
+    --color-dark-gray-50: rgba(24, 24, 24, 1);
+    --color-dark-gray-100: rgba(47, 47, 47, 1);
+    --color-dark-gray-200: rgba(71, 71, 71, 1);
+    --color-dark-gray-300: rgba(94, 94, 94, 1);
+    --color-dark-gray-400: rgba(118, 118, 118, 1);
+    --color-dark-gray-500: rgba(145, 145, 145, 1);
+    --color-dark-gray-600: rgba(173, 173, 173, 1);
+    --color-dark-gray-700: rgba(200, 200, 200, 1);
+    --color-dark-gray-800: rgba(228, 228, 228, 1);
+    --color-dark-gray-900: rgba(248, 248, 248, 1);
+    --color-dark-primary-50: rgb(20, 30, 51);
+    --color-dark-primary-100: rgb(41, 61, 102);
+    --color-dark-primary-200: rgb(61, 91, 153);
+    --color-dark-primary-300: rgb(82, 122, 204);
+    --color-dark-primary-400: rgb(102, 152, 255);
+    --color-dark-primary-500: rgb(133, 173, 255);
+    --color-dark-primary-600: rgb(163, 193, 255);
+    --color-dark-primary-700: rgb(194, 214, 255);
+    --color-dark-primary-800: rgb(224, 234, 255);
+    --color-dark-primary-900: rgb(247, 250, 255);
+    --color-dark-secondary-50: rgb(23, 45, 46);
+    --color-dark-secondary-100: rgb(46, 89, 92);
+    --color-dark-secondary-200: rgb(68, 134, 139);
+    --color-dark-secondary-300: rgb(91, 178, 185);
+    --color-dark-secondary-400: rgb(114, 223, 231);
+    --color-dark-secondary-500: rgb(142, 229, 236);
+    --color-dark-secondary-600: rgb(170, 236, 241);
+    --color-dark-secondary-700: rgb(199, 242, 245);
+    --color-dark-secondary-800: rgb(227, 249, 250);
+    --color-dark-secondary-900: rgb(248, 254, 254);
+    --color-dark-success-50: rgb(17, 47, 32);
+    --color-dark-success-100: rgb(35, 94, 64);
+    --color-dark-success-200: rgb(52, 141, 97);
+    --color-dark-success-300: rgb(70, 188, 129);
+    --color-dark-success-400: rgb(87, 235, 161);
+    --color-dark-success-500: rgb(121, 239, 180);
+    --color-dark-success-600: rgb(154, 243, 199);
+    --color-dark-success-700: rgb(188, 247, 217);
+    --color-dark-success-800: rgb(221, 251, 236);
+    --color-dark-success-900: rgb(247, 254, 250);
+    --color-dark-danger-50: rgb(51, 26, 26);
+    --color-dark-danger-100: rgb(102, 51, 51);
+    --color-dark-danger-200: rgb(153, 77, 77);
+    --color-dark-danger-300: rgb(204, 102, 102);
+    --color-dark-danger-400: rgb(255, 128, 128);
+    --color-dark-danger-500: rgb(255, 153, 153);
+    --color-dark-danger-600: rgb(255, 179, 179);
+    --color-dark-danger-700: rgb(255, 204, 204);
+    --color-dark-danger-800: rgb(255, 230, 230);
+    --color-dark-danger-900: rgb(255, 249, 249);
+    --color-dark-warning-50: rgb(51, 41, 23);
+    --color-dark-warning-100: rgb(101, 82, 46);
+    --color-dark-warning-200: rgb(152, 122, 70);
+    --color-dark-warning-300: rgb(202, 163, 93);
+    --color-dark-warning-400: rgb(253, 204, 116);
+    --color-dark-warning-500: rgb(254, 214, 144);
+    --color-dark-warning-600: rgb(254, 224, 172);
+    --color-dark-warning-700: rgb(254, 235, 199);
+    --color-dark-warning-800: rgb(255, 245, 227);
+    --color-dark-warning-900: rgb(255, 253, 248);
+    --color-dark-background: rgb(18, 18, 18);
+    --color-dark-font: var(--color-white);
+
+    --color-dark-link-font-default: var(--color-dark-font);
+    --color-dark-link-font-hover: var(--color-dark-gray-300);
+    --color-dark-link-font-active: var(--color-dark-gray-100);
+
+    --color-dark-link-background-default: var(--color-dark-background);
+    --color-dark-link-background-hover: var(--color-dark-gray-700);
+    --color-dark-link-background-active: var(--color-dark-gray-900);
+
+    --color-dark-font-ghost-default: var(--color-dark-gray-900);
+    --color-dark-font-ghost-hover: var(--color-dark-gray-700);
+    --color-dark-font-ghost-active: var(--color-dark-gray-800);
+
+    --color-dark-background-ghost-default: var(--color-dark-gray-50);
+    --color-dark-background-ghost-hover: var(--color-dark-gray-200);
+    --color-dark-background-ghost-active: var(--color-dark-gray-100);
+
+    /*===== Overlays =====*/
+
+    --overlay-black-50: rgba(0, 0, 0, 0.5);
+    --overlay-black-80: rgba(0, 0, 0, 0.8);
+    --overlay-white-50: rgba(255, 255, 255, 0.5);
+    --overlay-white-80: rgba(255, 255, 255, 0.8);
+    --overlay-gradient-black: linear-gradient(
+        180deg,
+        rgba(255, 255, 255, 0) 0%,
+        rgba(0, 0, 0, 0.56) 100%
+    );
+    --overlay-gradient-white: linear-gradient(
+        180deg,
+        rgba(0, 0, 0, 0) 0%,
+        rgba(255, 255, 255, 0.35) 100%
+    );
+
+    /*===== Fonts =====*/
+
+    /* Font families */
+
+    --font-family-body: "Lato", sans-serif;
+    --font-family-code: monospace;
+
+    /* Font sizes */
+
+    --font-size-display-h1: 5rem;
+    --font-size-display-h2: 4rem;
+    --font-size-display-h3: 3.5rem;
+    --font-size-display-h4: 3rem;
+    --font-size-display-h5: 2.5rem;
+    --font-size-h1: 2.5rem;
+    --font-size-h2: 2rem;
+    --font-size-h3: 1.8rem;
+    --font-size-h4: 1.5rem;
+    --font-size-h5: 1.3rem;
+    --font-size-h6: 1.1rem;
+    --font-size-body: 1rem;
+    --font-size-small: 0.875rem;
+
+    /* Font weights */
+
+    --font-weight-regular: 400;
+    --font-weight-bold: 700;
+    --font-weight-black: 900;
+
+    /* Line height */
+
+    --line-height-body: 1.5;
+    --line-height-code: 1.8;
+
+    /*===== Shadows =====*/
+
+    --shadow-xxl: 0px 10px 14px 8px rgba(0, 0, 0, 0.2),
+        0px 4px 4px rgba(0, 0, 0, 0.3);
+    --shadow-xl: 0px 8px 12px 6px rgba(0, 0, 0, 0.15),
+        0px 4px 4px rgba(0, 0, 0, 0.3);
+    --shadow-l: 0px 6px 10px 4px rgba(0, 0, 0, 0.15),
+        0px 2px 3px rgba(0, 0, 0, 0.3);
+    --shadow-m: 0px 4px 8px 3px rgba(0, 0, 0, 0.15),
+        0px 1px 3px rgba(0, 0, 0, 0.3);
+    --shadow-s: 0px 1px 2px rgba(0, 0, 0, 0.3),
+        0px 2px 6px 2px rgba(0, 0, 0, 0.15);
+    --shadow-xs: 0px 1px 2px rgba(0, 0, 0, 0.3),
+        0px 1px 3px 1px rgba(0, 0, 0, 0.15);
+
+    /*===== Spacers =====*/
+
+    --spacer-xxl: 48px;
+    --spacer-xl: 32px;
+    --spacer-l: 24px;
+    --spacer-m: 16px;
+    --spacer-s: 12px;
+    --spacer-xs: 8px;
+    --spacer-xxs: 4px;
+
+    /*===== Radiuses =====*/
+
+    --radius-xxl: 24px;
+    --radius-xl: 16px;
+    --radius-l: 12px;
+    --radius-m: 8px;
+    --radius-s: 4px;
+    --radius-xs: 2px;
+    --radius-round: 99em;
+    --radius-circle: 50%;
+
+    /*===== Layouts =====*/
+
+    /* Main */
+
+    --main-default: 600px;
+    --main-large: 800px;
+    --main-form: 400px;
+    --main-full: 100%;
+
+    /* Aside */
+
+    --aside-default: 250px;
+    --aside-small: 200px;
+
+    /*===== Transitions =====*/
+
+    --transition-short: all 200ms ease;
+    --transition-long: all 500ms ease;
+    --transition-bezier: all 0.5s cubic-bezier(0.25, 0.75, 0, 0.66);
+    --transition-progress-circle: all 1000ms ease-in-out;
+}
+
+@media screen and (max-width: 1024px) {
+    :root {
+        --main-default: 90%;
+        --main-large: 90%;
+        --main-form: 90%;
+        --aside-default: 90%;
+        --aside-small: 90%;
+    }
+}
+
+/*==================== Reset ====================*/
+
+*,
+*:before,
+*:after {
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    max-width: 100%;
+}
+
+*[hidden] {
+    display: none !important;
+}
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video,
+hr,
+ul,
+ol,
+dl {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    vertical-align: baseline;
+}
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+    display: block;
+}
+
+body {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    background-color: var(--color-light-background);
+    color: var(--color-light-font);
+    font-family: var(--font-family-body);
+    font-weight: var(--font-weight-regular);
+    line-height: var(--line-height-body);
+    position: relative;
+    overflow-x: hidden;
+    tab-size: 4;
+}
+
+body.dark {
+    background-color: var(--color-dark-background);
+    color: var(--color-dark-font);
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+button,
+a {
+    cursor: pointer;
+    -webkit-transition: var(--transition-short);
+    -o-transition: var(--transition-short);
+    transition: var(--transition-short);
+    font-weight: var(--font-weight-black);
+    font-size: var(--font-size-body);
+    font-family: var(--font-family-body);
+    line-height: var(--line-height);
+}
+
+button:disabled,
+a:disabled {
+    cursor: not-allowed;
+}
+
+u {
+    text-decoration: underline;
+    color: currentColor;
+}
+
+/*==================== Base styles ====================*/
+
+.stop-scrolling {
+    height: 100vh;
+    overflow: hidden;
+}
+
+/*==================== Helpers ====================*/
+
+.text-left {
+    text-align: left !important;
+}
+
+.text-center {
+    text-align: center !important;
+}
+
+.text-right {
+    text-align: right !important;
+}
+
+.clear-float {
+    float: none !important;
+}
+
+.hidden {
+    position: fixed;
+    top: -999em;
+    left: -999em;
+}
+
+.no-marg {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+    margin-right: 0 !important;
+    margin-left: 0 !important;
+}
+
+.no-marg-top {
+    margin-top: 0 !important;
+}
+
+.no-marg-bottom {
+    margin-bottom: 0 !important;
+}
+
+.no-marg-left {
+    margin-left: 0 !important;
+}
+
+.no-marg-right {
+    margin-right: 0 !important;
+}
+
+.no-padd {
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+    padding-right: 0 !important;
+    padding-left: 0 !important;
+}
+
+.no-padd-top {
+    padding-top: 0 !important;
+}
+
+.no-padd-bottom {
+    padding-bottom: 0 !important;
+}
+
+.no-padd-left {
+    padding-left: 0 !important;
+}
+
+.no-padd-right {
+    padding-right: 0 !important;
+}
+
+.no-select {
+    -webkit-user-select: none !important;
+    -moz-user-select: none !important;
+    -ms-user-select: none !important;
+    user-select: none !important;
+}
+
+.center {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -webkit-box-pack: center;
+    -webkit-justify-content: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    gap: nowrap;
+}
+
+.sr-only {
+    border: 0 !important;
+    clip: rect(1px, 1px, 1px, 1px) !important;
+    -webkit-clip-path: inset(50%) !important;
+    clip-path: inset(50%) !important;
+    height: 1px !important;
+    margin: -1px !important;
+    overflow: hidden !important;
+    padding: 0 !important;
+    position: absolute !important;
+    width: 1px !important;
+    white-space: nowrap !important;
+}
+
+.smooth {
+    scroll-behavior: smooth;
+}
+
+/*==================== Background colors ====================*/
+
+.bg-black {
+    background-color: var(--color-black) !important;
+}
+
+.bg-white {
+    background-color: var(--color-white) !important;
+}
+
+.bg-gray-50 {
+    background-color: var(--color-gray-50) !important;
+}
+
+.bg-gray-100 {
+    background-color: var(--color-gray-100) !important;
+}
+
+.bg-gray-200 {
+    background-color: var(--color-gray-200) !important;
+}
+
+.bg-gray-300 {
+    background-color: var(--color-gray-300) !important;
+}
+
+.bg-gray-400 {
+    background-color: var(--color-gray-400) !important;
+}
+
+.bg-gray-500 {
+    background-color: var(--color-gray-500) !important;
+}
+
+.bg-gray-600 {
+    background-color: var(--color-gray-600) !important;
+}
+
+.bg-gray-700 {
+    background-color: var(--color-gray-700) !important;
+}
+
+.bg-gray-800 {
+    background-color: var(--color-gray-800) !important;
+}
+
+.bg-gray-900 {
+    background-color: var(--color-gray-900) !important;
+}
+
+.bg-primary-50 {
+    background-color: var(--color-primary-50) !important;
+}
+
+.bg-primary-100 {
+    background-color: var(--color-primary-100) !important;
+}
+
+.bg-primary-200 {
+    background-color: var(--color-primary-200) !important;
+}
+
+.bg-primary-300 {
+    background-color: var(--color-primary-300) !important;
+}
+
+.bg-primary-400 {
+    background-color: var(--color-primary-400) !important;
+}
+
+.bg-primary-500 {
+    background-color: var(--color-primary-500) !important;
+}
+
+.bg-primary-600 {
+    background-color: var(--color-primary-600) !important;
+}
+
+.bg-primary-700 {
+    background-color: var(--color-primary-700) !important;
+}
+
+.bg-primary-800 {
+    background-color: var(--color-primary-800) !important;
+}
+
+.bg-primary-900 {
+    background-color: var(--color-primary-900) !important;
+}
+
+.bg-secondary-50 {
+    background-color: var(--color-secondary-50) !important;
+}
+
+.bg-secondary-100 {
+    background-color: var(--color-secondary-100) !important;
+}
+
+.bg-secondary-200 {
+    background-color: var(--color-secondary-200) !important;
+}
+
+.bg-secondary-300 {
+    background-color: var(--color-secondary-300) !important;
+}
+
+.bg-secondary-400 {
+    background-color: var(--color-secondary-400) !important;
+}
+
+.bg-secondary-500 {
+    background-color: var(--color-secondary-500) !important;
+}
+
+.bg-secondary-600 {
+    background-color: var(--color-secondary-600) !important;
+}
+
+.bg-secondary-700 {
+    background-color: var(--color-secondary-700) !important;
+}
+
+.bg-secondary-800 {
+    background-color: var(--color-secondary-800) !important;
+}
+
+.bg-secondary-900 {
+    background-color: var(--color-secondary-900) !important;
+}
+
+.bg-success-50 {
+    background-color: var(--color-success-50) !important;
+}
+
+.bg-success-100 {
+    background-color: var(--color-success-100) !important;
+}
+
+.bg-success-200 {
+    background-color: var(--color-success-200) !important;
+}
+
+.bg-success-300 {
+    background-color: var(--color-success-300) !important;
+}
+
+.bg-success-400 {
+    background-color: var(--color-success-400) !important;
+}
+
+.bg-success-500 {
+    background-color: var(--color-success-500) !important;
+}
+
+.bg-success-600 {
+    background-color: var(--color-success-600) !important;
+}
+
+.bg-success-700 {
+    background-color: var(--color-success-700) !important;
+}
+
+.bg-success-800 {
+    background-color: var(--color-success-800) !important;
+}
+
+.bg-success-900 {
+    background-color: var(--color-success-900) !important;
+}
+
+.bg-danger-50 {
+    background-color: var(--color-danger-50) !important;
+}
+
+.bg-danger-100 {
+    background-color: var(--color-danger-100) !important;
+}
+
+.bg-danger-200 {
+    background-color: var(--color-danger-200) !important;
+}
+
+.bg-danger-300 {
+    background-color: var(--color-danger-300) !important;
+}
+
+.bg-danger-400 {
+    background-color: var(--color-danger-400) !important;
+}
+
+.bg-danger-500 {
+    background-color: var(--color-danger-500) !important;
+}
+
+.bg-danger-600 {
+    background-color: var(--color-danger-600) !important;
+}
+
+.bg-danger-700 {
+    background-color: var(--color-danger-700) !important;
+}
+
+.bg-danger-800 {
+    background-color: var(--color-danger-800) !important;
+}
+
+.bg-danger-900 {
+    background-color: var(--color-danger-900) !important;
+}
+
+.bg-warning-50 {
+    background-color: var(--color-warning-50) !important;
+}
+
+.bg-warning-100 {
+    background-color: var(--color-warning-100) !important;
+}
+
+.bg-warning-200 {
+    background-color: var(--color-warning-200) !important;
+}
+
+.bg-warning-300 {
+    background-color: var(--color-warning-300) !important;
+}
+
+.bg-warning-400 {
+    background-color: var(--color-warning-400) !important;
+}
+
+.bg-warning-500 {
+    background-color: var(--color-warning-500) !important;
+}
+
+.bg-warning-600 {
+    background-color: var(--color-warning-600) !important;
+}
+
+.bg-warning-700 {
+    background-color: var(--color-warning-700) !important;
+}
+
+.bg-warning-800 {
+    background-color: var(--color-warning-800) !important;
+}
+
+.bg-warning-900 {
+    background-color: var(--color-warning-900) !important;
+}
+
+/*==================== Overlays ====================*/
+
+.bg-overlay-black-50 {
+    background: var(--overlay-black-50) !important;
+}
+
+.bg-overlay-black-80 {
+    background: var(--overlay-black-80) !important;
+}
+
+.bg-overlay-white-50 {
+    background: var(--overlay-white-50) !important;
+}
+
+.bg-overlay-white-80 {
+    background: var(--overlay-white-80) !important;
+}
+
+.bg-overlay-gradient-black {
+    background: var(--overlay-gradient-black) !important;
+}
+
+.bg-overlay-gradient-white {
+    background: var(--overlay-gradient-white) !important;
+}
+
+/*==================== Font colors ====================*/
+
+.font-black {
+    color: var(--color-black) !important;
+}
+
+.font-white {
+    color: var(--color-white) !important;
+}
+
+.font-gray-50 {
+    color: var(--color-gray-50) !important;
+}
+
+.font-gray-100 {
+    color: var(--color-gray-100) !important;
+}
+
+.font-gray-200 {
+    color: var(--color-gray-200) !important;
+}
+
+.font-gray-300 {
+    color: var(--color-gray-300) !important;
+}
+
+.font-gray-400 {
+    color: var(--color-gray-400) !important;
+}
+
+.font-gray-500 {
+    color: var(--color-gray-500) !important;
+}
+
+.font-gray-600 {
+    color: var(--color-gray-600) !important;
+}
+
+.font-gray-700 {
+    color: var(--color-gray-700) !important;
+}
+
+.font-gray-800 {
+    color: var(--color-gray-800) !important;
+}
+
+.font-gray-900 {
+    color: var(--color-gray-900) !important;
+}
+
+.font-primary-50 {
+    color: var(--color-primary-50) !important;
+}
+
+.font-primary-100 {
+    color: var(--color-primary-100) !important;
+}
+
+.font-primary-200 {
+    color: var(--color-primary-200) !important;
+}
+
+.font-primary-300 {
+    color: var(--color-primary-300) !important;
+}
+
+.font-primary-400 {
+    color: var(--color-primary-400) !important;
+}
+
+.font-primary-500 {
+    color: var(--color-primary-500) !important;
+}
+
+.font-primary-600 {
+    color: var(--color-primary-600) !important;
+}
+
+.font-primary-700 {
+    color: var(--color-primary-700) !important;
+}
+
+.font-primary-800 {
+    color: var(--color-primary-800) !important;
+}
+
+.font-primary-900 {
+    color: var(--color-primary-900) !important;
+}
+
+.font-secondary-50 {
+    color: var(--color-secondary-50) !important;
+}
+
+.font-secondary-100 {
+    color: var(--color-secondary-100) !important;
+}
+
+.font-secondary-200 {
+    color: var(--color-secondary-200) !important;
+}
+
+.font-secondary-300 {
+    color: var(--color-secondary-300) !important;
+}
+
+.font-secondary-400 {
+    color: var(--color-secondary-400) !important;
+}
+
+.font-secondary-500 {
+    color: var(--color-secondary-500) !important;
+}
+
+.font-secondary-600 {
+    color: var(--color-secondary-600) !important;
+}
+
+.font-secondary-700 {
+    color: var(--color-secondary-700) !important;
+}
+
+.font-secondary-800 {
+    color: var(--color-secondary-800) !important;
+}
+
+.font-secondary-900 {
+    color: var(--color-secondary-900) !important;
+}
+
+.font-success-50 {
+    color: var(--color-success-50) !important;
+}
+
+.font-success-100 {
+    color: var(--color-success-100) !important;
+}
+
+.font-success-200 {
+    color: var(--color-success-200) !important;
+}
+
+.font-success-300 {
+    color: var(--color-success-300) !important;
+}
+
+.font-success-400 {
+    color: var(--color-success-400) !important;
+}
+
+.font-success-500 {
+    color: var(--color-success-500) !important;
+}
+
+.font-success-600 {
+    color: var(--color-success-600) !important;
+}
+
+.font-success-700 {
+    color: var(--color-success-700) !important;
+}
+
+.font-success-800 {
+    color: var(--color-success-800) !important;
+}
+
+.font-success-900 {
+    color: var(--color-success-900) !important;
+}
+
+.font-danger-50 {
+    color: var(--color-danger-50) !important;
+}
+
+.font-danger-100 {
+    color: var(--color-danger-100) !important;
+}
+
+.font-danger-200 {
+    color: var(--color-danger-200) !important;
+}
+
+.font-danger-300 {
+    color: var(--color-danger-300) !important;
+}
+
+.font-danger-400 {
+    color: var(--color-danger-400) !important;
+}
+
+.font-danger-500 {
+    color: var(--color-danger-500) !important;
+}
+
+.font-danger-600 {
+    color: var(--color-danger-600) !important;
+}
+
+.font-danger-700 {
+    color: var(--color-danger-700) !important;
+}
+
+.font-danger-800 {
+    color: var(--color-danger-800) !important;
+}
+
+.font-danger-900 {
+    color: var(--color-danger-900) !important;
+}
+
+.font-warning-50 {
+    color: var(--color-warning-50) !important;
+}
+
+.font-warning-100 {
+    color: var(--color-warning-100) !important;
+}
+
+.font-warning-200 {
+    color: var(--color-warning-200) !important;
+}
+
+.font-warning-300 {
+    color: var(--color-warning-300) !important;
+}
+
+.font-warning-400 {
+    color: var(--color-warning-400) !important;
+}
+
+.font-warning-500 {
+    color: var(--color-warning-500) !important;
+}
+
+.font-warning-600 {
+    color: var(--color-warning-600) !important;
+}
+
+.font-warning-700 {
+    color: var(--color-warning-700) !important;
+}
+
+.font-warning-800 {
+    color: var(--color-warning-800) !important;
+}
+
+.font-warning-900 {
+    color: var(--color-warning-900) !important;
+}
+
+/*==================== Border colors ====================*/
+
+.border-black {
+    border-color: var(--color-black) !important;
+}
+
+.border-white {
+    border-color: var(--color-white) !important;
+}
+
+.border-gray-50 {
+    border-color: var(--color-gray-50) !important;
+}
+
+.border-gray-100 {
+    border-color: var(--color-gray-100) !important;
+}
+
+.border-gray-200 {
+    border-color: var(--color-gray-200) !important;
+}
+
+.border-gray-300 {
+    border-color: var(--color-gray-300) !important;
+}
+
+.border-gray-400 {
+    border-color: var(--color-gray-400) !important;
+}
+
+.border-gray-500 {
+    border-color: var(--color-gray-500) !important;
+}
+
+.border-gray-600 {
+    border-color: var(--color-gray-600) !important;
+}
+
+.border-gray-700 {
+    border-color: var(--color-gray-700) !important;
+}
+
+.border-gray-800 {
+    border-color: var(--color-gray-800) !important;
+}
+
+.border-gray-900 {
+    border-color: var(--color-gray-900) !important;
+}
+
+.border-primary-50 {
+    border-color: var(--color-primary-50) !important;
+}
+
+.border-primary-100 {
+    border-color: var(--color-primary-100) !important;
+}
+
+.border-primary-200 {
+    border-color: var(--color-primary-200) !important;
+}
+
+.border-primary-300 {
+    border-color: var(--color-primary-300) !important;
+}
+
+.border-primary-400 {
+    border-color: var(--color-primary-400) !important;
+}
+
+.border-primary-500 {
+    border-color: var(--color-primary-500) !important;
+}
+
+.border-primary-600 {
+    border-color: var(--color-primary-600) !important;
+}
+
+.border-primary-700 {
+    border-color: var(--color-primary-700) !important;
+}
+
+.border-primary-800 {
+    border-color: var(--color-primary-800) !important;
+}
+
+.border-primary-900 {
+    border-color: var(--color-primary-900) !important;
+}
+
+.border-secondary-50 {
+    border-color: var(--color-secondary-50) !important;
+}
+
+.border-secondary-100 {
+    border-color: var(--color-secondary-100) !important;
+}
+
+.border-secondary-200 {
+    border-color: var(--color-secondary-200) !important;
+}
+
+.border-secondary-300 {
+    border-color: var(--color-secondary-300) !important;
+}
+
+.border-secondary-400 {
+    border-color: var(--color-secondary-400) !important;
+}
+
+.border-secondary-500 {
+    border-color: var(--color-secondary-500) !important;
+}
+
+.border-secondary-600 {
+    border-color: var(--color-secondary-600) !important;
+}
+
+.border-secondary-700 {
+    border-color: var(--color-secondary-700) !important;
+}
+
+.border-secondary-800 {
+    border-color: var(--color-secondary-800) !important;
+}
+
+.border-secondary-900 {
+    border-color: var(--color-secondary-900) !important;
+}
+
+.border-success-50 {
+    border-color: var(--color-success-50) !important;
+}
+
+.border-success-100 {
+    border-color: var(--color-success-100) !important;
+}
+
+.border-success-200 {
+    border-color: var(--color-success-200) !important;
+}
+
+.border-success-300 {
+    border-color: var(--color-success-300) !important;
+}
+
+.border-success-400 {
+    border-color: var(--color-success-400) !important;
+}
+
+.border-success-500 {
+    border-color: var(--color-success-500) !important;
+}
+
+.border-success-600 {
+    border-color: var(--color-success-600) !important;
+}
+
+.border-success-700 {
+    border-color: var(--color-success-700) !important;
+}
+
+.border-success-800 {
+    border-color: var(--color-success-800) !important;
+}
+
+.border-success-900 {
+    border-color: var(--color-success-900) !important;
+}
+
+.border-danger-50 {
+    border-color: var(--color-danger-50) !important;
+}
+
+.border-danger-100 {
+    border-color: var(--color-danger-100) !important;
+}
+
+.border-danger-200 {
+    border-color: var(--color-danger-200) !important;
+}
+
+.border-danger-300 {
+    border-color: var(--color-danger-300) !important;
+}
+
+.border-danger-400 {
+    border-color: var(--color-danger-400) !important;
+}
+
+.border-danger-500 {
+    border-color: var(--color-danger-500) !important;
+}
+
+.border-danger-600 {
+    border-color: var(--color-danger-600) !important;
+}
+
+.border-danger-700 {
+    border-color: var(--color-danger-700) !important;
+}
+
+.border-danger-800 {
+    border-color: var(--color-danger-800) !important;
+}
+
+.border-danger-900 {
+    border-color: var(--color-danger-900) !important;
+}
+
+.border-warning-50 {
+    border-color: var(--color-warning-50) !important;
+}
+
+.border-warning-100 {
+    border-color: var(--color-warning-100) !important;
+}
+
+.border-warning-200 {
+    border-color: var(--color-warning-200) !important;
+}
+
+.border-warning-300 {
+    border-color: var(--color-warning-300) !important;
+}
+
+.border-warning-400 {
+    border-color: var(--color-warning-400) !important;
+}
+
+.border-warning-500 {
+    border-color: var(--color-warning-500) !important;
+}
+
+.border-warning-600 {
+    border-color: var(--color-warning-600) !important;
+}
+
+.border-warning-700 {
+    border-color: var(--color-warning-700) !important;
+}
+
+.border-warning-800 {
+    border-color: var(--color-warning-800) !important;
+}
+
+.border-warning-900 {
+    border-color: var(--color-warning-900) !important;
+}
+
+/*==================== Radiuses ====================*/
+
+.radius-xxl {
+    -webkit-border-radius: var(--radius-xxl) !important;
+    border-radius: var(--radius-xxl) !important;
+}
+
+.radius-xl {
+    -webkit-border-radius: var(--radius-xl) !important;
+    border-radius: var(--radius-xl) !important;
+}
+
+.radius-l {
+    -webkit-border-radius: var(--radius-l) !important;
+    border-radius: var(--radius-l) !important;
+}
+
+.radius-m {
+    -webkit-border-radius: var(--radius-m) !important;
+    border-radius: var(--radius-m) !important;
+}
+
+.radius-s {
+    -webkit-border-radius: var(--radius-s) !important;
+    border-radius: var(--radius-s) !important;
+}
+
+.radius-xs {
+    -webkit-border-radius: var(--radius-xs) !important;
+    border-radius: var(--radius-xs) !important;
+}
+
+.radius-round {
+    -webkit-border-radius: var(--radius-round) !important;
+    border-radius: var(--radius-round) !important;
+}
+
+.radius-circle {
+    -webkit-border-radius: var(--radius-circle) !important;
+    border-radius: var(--radius-circle) !important;
+}
+
+/*==================== Shadows ====================*/
+
+.shadow-xxl {
+    -webkit-box-shadow: var(--shadow-xxl) !important;
+    box-shadow: var(--shadow-xxl) !important;
+}
+
+.shadow-xl {
+    -webkit-box-shadow: var(--shadow-xl) !important;
+    box-shadow: var(--shadow-xl) !important;
+}
+
+.shadow-l {
+    -webkit-box-shadow: var(--shadow-l) !important;
+    box-shadow: var(--shadow-l) !important;
+}
+
+.shadow-m {
+    -webkit-box-shadow: var(--shadow-m) !important;
+    box-shadow: var(--shadow-m) !important;
+}
+
+.shadow-s {
+    -webkit-box-shadow: var(--shadow-s) !important;
+    box-shadow: var(--shadow-s) !important;
+}
+
+.shadow-xs {
+    -webkit-box-shadow: var(--shadow-xs) !important;
+    box-shadow: var(--shadow-xs) !important;
+}