@julseb-lib/react 0.0.56 → 0.0.57

package/dist/lib/index.css

@@ -1,1422 +0,0 @@
-@charset "UTF-8";
-
-/*=============================================== TSX Lib base CSS ===============================================*/
-
-/*====================== Fonts ======================*/
-
-@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-regular", 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;
-}