html {
font-size: 16px !important;
}
.modal-is-opened {
overflow: hidden !important;
}
:root,
:host,
.code-block__preview {
/************************************************
================ color palette ==================
************************************************/
/*primary [fz-start colors>primary|--fz-color] */
--fz-color-primary-1: rgb(
238,
242,
255
); /*mandatory update - should be lightest*/
--fz-color-primary-2: rgb(165, 180, 252); /*mandatory update*/
--fz-color-primary-3: rgb(
79,
70,
229
); /*mandatory update - main brand color*/
--fz-color-primary-4: rgb(67, 56, 202); /*mandatory update*/
--fz-color-primary-5: rgb(
49,
46,
129
); /*mandatory update - should be darkest*/
--fz-color-primary-6: unset;
--fz-color-primary-7: unset;
--fz-color-primary-8: unset;
--fz-color-primary-9: unset;
--fz-color-primary-10: unset;
/*[fz-end]*/
/*secondary [fz-start colors>secondary|--fz-color-] */
--fz-color-secondary-1: rgb(
225,
252,
248
); /*mandatory update - can be unset*/
--fz-color-secondary-2: rgb(28, 212, 212); /*mandatory update - can be unset*/
--fz-color-secondary-3: rgb(9, 154, 164); /*mandatory update - can be unset*/
--fz-color-secondary-4: rgb(7, 129, 143); /*mandatory update - can be unset*/
--fz-color-secondary-5: rgb(5, 96, 110); /*mandatory update - can be unset*/
--fz-color-secondary-6: unset;
--fz-color-secondary-7: unset;
--fz-color-secondary-8: unset;
--fz-color-secondary-9: unset;
--fz-color-secondary-10: unset;
/*[fz-end]*/
/* tertiary [fz-start colors>tertiary|--fz-color-] */
--fz-color-tertiary-1: unset;
--fz-color-tertiary-2: unset;
--fz-color-tertiary-3: unset;
--fz-color-tertiary-4: unset;
--fz-color-tertiary-5: unset;
--fz-color-tertiary-6: unset;
--fz-color-tertiary-7: unset;
--fz-color-tertiary-8: unset;
--fz-color-tertiary-9: unset;
--fz-color-tertiary-10: unset;
/*[fz-end]*/
/*neutral - best if greyscale gradient*/
/* [fz-start colors>neutral|--fz-color-] */
--fz-color-neutral-1: rgb(
243,
244,
246
); /*mandatory best as lightest grey/white*/
--fz-color-neutral-2: rgb(209, 213, 219); /*mandatory*/
--fz-color-neutral-3: rgb(107, 114, 128); /*mandatory best as medium grey*/
--fz-color-neutral-4: rgb(55, 65, 81); /*mandatory*/
--fz-color-neutral-5: rgb(
12,
17,
29
); /* mandatory best as darkest grey/black*/
--fz-color-neutral-6: unset;
--fz-color-neutral-7: unset;
--fz-color-neutral-8: unset;
--fz-color-neutral-9: unset;
--fz-color-neutral-10: unset;
/*[fz-end]*/
/* Neutral one-offs */
/* [fz-start colors>neutral|--fz-color-neutral-] */
--fz-color-neutral-0: rgb(255, 255, 255); /*always white*/
--fz-color-neutral-1000: rgb(0, 0, 0); /*always black*/
--fz-color-neutral-text-0: var(--fz-color-neutral-0); /*always white*/
--fz-color-neutral-text-1000: var(--fz-color-neutral-text-0); /*always black*/
/*[fz-end]*/
/* Success [fz-start colors>success|--fz-color] */
--fz-color-success-1: rgb(240, 253, 244); /* not editable */
--fz-color-success-2: rgb(134, 239, 172); /* not editable */
--fz-color-success-3: rgb(34, 197, 94); /* not editable */
--fz-color-success-4: rgb(22, 163, 74); /* not editable */
--fz-color-success-5: rgb(20, 83, 45); /* not editable */
/*[fz-end]*/
/* Warning */
--fz-color-warning-1: rgb(255, 251, 235); /* not editable */
--fz-color-warning-2: rgb(252, 211, 77); /* not editable */
--fz-color-warning-3: rgb(245, 158, 11); /* not editable */
--fz-color-warning-4: rgb(217, 119, 6); /* not editable */
--fz-color-warning-5: rgb(120, 53, 15); /* not editable */
/* Danger */
--fz-color-danger-1: rgb(254, 242, 242); /* not editable */
--fz-color-danger-2: rgb(252, 165, 165); /* not editable */
--fz-color-danger-3: rgb(239, 68, 68); /* not editable */
--fz-color-danger-4: rgb(220, 38, 38); /* not editable */
--fz-color-danger-5: rgb(127, 29, 29); /* not editable */
/* Info */
--fz-color-info-1: rgb(239, 246, 255); /* not editable */
--fz-color-info-2: rgb(147, 197, 253); /* not editable */
--fz-color-info-3: rgb(59, 130, 246); /* not editable */
--fz-color-info-4: rgb(37, 99, 235); /* not editable */
--fz-color-info-5: rgb(30, 58, 138); /* not editable */
/* Spacings */
--fz-spacing-5x-small: 0.125rem; /* 2px */
--fz-spacing-4x-small: 0.25rem; /* 4px */
--fz-spacing-3x-small: 0.375rem; /* 6px */
--fz-spacing-2x-small: 0.5rem; /* 8px */
--fz-spacing-1x-small: 0.625rem; /* 10px */
--fz-spacing-x-small: 0.75rem; /* 12px */
--fz-spacing-small: 1rem; /* 16px */
--fz-spacing-medium: 1.25rem; /* 20px */
--fz-spacing-large: 1.5rem; /* 24px */
--fz-spacing-x-large: 2rem; /* 32px */
--fz-spacing-2x-large: 2.5rem; /* 40px */
--fz-spacing-3x-large: 3rem; /* 48px */
--fz-spacing-4x-large: 3.5rem; /* 56px */
--fz-spacing-5x-large: 4rem; /* 64px */
--fz-spacing-6x-large: 5rem; /* 80px */
--fz-spacing-7x-large: 6rem; /* 96px */
--fz-widget-header-margin-bottom: var(--fz-spacing-5x-large);
/* Weights */
--fz-weight-thin: 100; /* not editable */
--fz-weight-light: 300; /* not editable */
--fz-weight-regular: 400; /* not editable */
--fz-weight-medium: 500; /* not editable */
--fz-weight-semi-bold: 600; /* not editable */
--fz-weight-bold: 700; /* not editable */
--fz-weight-extra-bold: 800; /* not editable */
/************************************************
===================== Globals ===================
************************************************/
/* Global animations */
--fz-animation-1-play-state: paused;
--fz-animation-1-name: fadeInDown;
--fz-animation-1-duration: 710ms;
--fz-animation-1-delay: 200ms;
--fz-animation-1-fill-mode: both;
--fz-animation-2-duration: 300ms;
--fz-animation-2-name: zoomOut;
--fz-animation-2-name-hover: zoomIn;
--fz-animation-2-delay: 0s;
--fz-animation-2-fill-mode: both;
--fz-animation-2-play-state: running;
--fz-animation-3-duration: 300ms;
--fz-animation-3-name: miniZoomOut;
--fz-animation-3-name-hover: miniZoomIn;
--fz-animation-3-delay: 0s;
--fz-animation-3-fill-mode: both;
--fz-animation-3-play-state: running;
/* Global shadows */
--fz-shadow-none: none; /* only for drop down selection */
--fz-shadow-x-small: 0px 1px 2px rgba(17, 24, 39, 0.06),
0px 1px 3px rgba(17, 24, 39, 0.1);
--fz-shadow-small: 0px 2px 4px rgba(17, 24, 39, 0.06),
0px 4px 6px rgba(17, 24, 39, 0.1);
--fz-shadow-medium: 0px 10px 15px rgba(17, 24, 39, 0.1),
0px 4px 6px rgba(17, 24, 39, 0.05);
--fz-shadow-large: 0px 20px 25px rgba(17, 24, 39, 0.1),
0px 10px 10px rgba(17, 24, 39, 0.04);
--fz-shadow-x-large: 0px 25px 50px rgba(17, 24, 39, 0.25);
--fz-shadow-x-small-top: 0px -1px 2px rgba(17, 24, 39, 0.06),
0px -1px 3px rgba(17, 24, 39, 0.1);
--fz-shadow-medium-top: 0px -10px 15px rgba(17, 24, 39, 0.1),
0px -4px 6px rgba(17, 24, 39, 0.05);
/* Global link colors */
--fz-link-color: rgb(59, 130, 246);
--fz-link-color-hover: rgb(37, 99, 235);
--fz-link-color-visited: var(--fz-link-color);
--fz-link-color-actived: var(--fz-link-color);
--fz-link-decoration: none;
--fz-link-decoration-hover: underline;
/* Global Border radius sizes */
--fz-border-radius-none: 0;
--fz-border-radius-x-small: 2px;
--fz-border-radius-small: 4px;
--fz-border-radius-medium: 6px;
--fz-border-radius-large: 10px;
--fz-border-radius-x-large: 14px;
--fz-border-radius-circle: 50%;
--fz-border-radius-pill: 9999px;
/* Fonts */
/*font family*/
--fz-font-family-1: "Open Sans", sans-serif; /*mandatory update*/
--fz-font-family-2: "Roboto", sans-serif; /*mandatory update*/
--fz-font-family-3: "Poppins", sans-serif; /*mandatory update*/
/* this will change all spacing in the page (i.e) */
--fz-base-font-size: 16px; /* not editable */
/************************************************
===================== headings ==================
************************************************/
/* global headings */
--fz-heading-1-font-size-factor: 1;
--fz-heading-1-line-height-factor: 1;
--fz-heading-1-letter-spacing-factor: 1;
--fz-heading-2-font-size-factor: 1;
--fz-heading-2-line-height-factor: 1;
--fz-heading-2-letter-spacing-factor: 1;
--fz-heading-3-font-size-factor: 1;
--fz-heading-3-line-height-factor: 1;
--fz-heading-3-letter-spacing-factor: 1;
--fz-heading-4-font-size-factor: 1;
--fz-heading-4-line-height-factor: 1;
--fz-heading-4-letter-spacing-factor: 1;
--fz-heading-5-font-size-factor: 1;
--fz-heading-5-line-height-factor: 1;
--fz-heading-5-letter-spacing-factor: 1;
--fz-heading-6-font-size-factor: 1;
--fz-heading-6-line-height-factor: 1;
--fz-heading-6-letter-spacing-factor: 1;
--fz-paragraph-1-font-size-factor: 1;
--fz-paragraph-1-line-height-factor: 1;
--fz-paragraph-1-letter-spacing-factor: 1;
--fz-paragraph-2-font-size-factor: 1;
--fz-paragraph-2-line-height-factor: 1;
--fz-paragraph-2-letter-spacing-factor: 1;
--fz-paragraph-3-font-size-factor: 1;
--fz-paragraph-3-line-height-factor: 1;
--fz-paragraph-3-letter-spacing-factor: 1;
--fz-system-text-1-font-size-factor: 1;
--fz-system-text-1-line-height-factor: 1;
--fz-system-text-1-letter-spacing-factor: 1;
/*text styles*/
--fz-heading-1-color: var(--fz-color-neutral-5);
--fz-heading-1-weight: var(--fz-weight-bold);
--fz-heading-1-font-family: var(--fz-font-family-1);
--fz-heading-1-font-size: calc(
4rem * var(--fz-heading-1-font-size-factor)
); /* 64px */
--fz-heading-1-letter-spacing: calc(
-0.03em * var(--fz-heading-1-letter-spacing-factor)
);
--fz-heading-1-line-height: calc(
1.2 * var(--fz-heading-1-line-height-factor)
);
--fz-heading-2-color: var(--fz-color-neutral-5);
--fz-heading-2-weight: var(--fz-weight-bold);
--fz-heading-2-font-family: var(--fz-font-family-1);
--fz-heading-2-font-size: calc(
3rem * var(--fz-heading-2-font-size-factor)
); /* 48px */
--fz-heading-2-letter-spacing: calc(
-0.03em * var(--fz-heading-2-letter-spacing-factor)
);
--fz-heading-2-line-height: calc(
1.4 * var(--fz-heading-2-line-height-factor)
);
--fz-heading-3-color: var(--fz-color-neutral-5);
--fz-heading-3-weight: var(--fz-weight-medium);
--fz-heading-3-font-family: var(--fz-font-family-1);
--fz-heading-3-font-size: calc(
2.5rem * var(--fz-heading-3-font-size-factor)
); /* 40px */
--fz-heading-3-line-height: calc(
1.4 * var(--fz-heading-3-line-height-factor)
);
--fz-heading-3-letter-spacing: calc(
normal * var(--fz-heading-3-letter-spacing-factor)
);
--fz-heading-4-color: var(--fz-color-neutral-5);
--fz-heading-4-weight: var(--fz-weight-medium);
--fz-heading-4-font-family: var(--fz-font-family-1);
--fz-heading-4-font-size: calc(
2.25rem * var(--fz-heading-4-font-size-factor)
); /* 36px */
--fz-heading-4-line-height: calc(
1.4 * var(--fz-heading-4-line-height-factor)
);
--fz-heading-4-letter-spacing: calc(
normal * var(--fz-heading-4-letter-spacing-factor)
);
--fz-heading-5-color: var(--fz-color-neutral-5);
--fz-heading-5-weight: var(--fz-weight-regular);
--fz-heading-5-font-family: var(--fz-font-family-1);
--fz-heading-5-font-size: calc(
1.5rem * var(--fz-heading-5-font-size-factor)
); /* 24px */
--fz-heading-5-line-height: calc(
1.5 * var(--fz-heading-5-line-height-factor)
);
--fz-heading-5-letter-spacing: calc(
normal * var(--fz-heading-5-letter-spacing-factor)
);
--fz-heading-6-color: var(--fz-color-neutral-5);
--fz-heading-6-weight: var(--fz-weight-regular);
--fz-heading-6-font-family: var(--fz-font-family-1);
--fz-heading-6-font-size: calc(
1.25rem * var(--fz-heading-6-font-size-factor)
); /* 20px */
--fz-heading-6-line-height: calc(
1.5 * var(--fz-heading-6-line-height-factor)
);
--fz-heading-6-letter-spacing: calc(
normal * var(--fz-heading-6-letter-spacing-factor)
);
--fz-paragraph-1-color: var(--fz-color-neutral-5);
--fz-paragraph-1-weight: var(--fz-weight-regular);
--fz-paragraph-1-font-family: var(--fz-font-family-1);
--fz-paragraph-1-font-size: calc(
1.125rem * var(--fz-paragraph-1-font-size-factor)
); /* 18px */
--fz-paragraph-1-line-height: calc(
1.5 * var(--fz-paragraph-1-line-height-factor)
);
--fz-paragraph-1-letter-spacing: calc(
normal * var(--fz-paragraph-1-letter-spacing-factor)
);
--fz-paragraph-2-color: var(--fz-color-neutral-4);
--fz-paragraph-2-weight: var(--fz-weight-regular);
--fz-paragraph-2-font-family: var(--fz-font-family-1);
--fz-paragraph-2-font-size: calc(
1rem * var(--fz-paragraph-2-font-size-factor)
); /* 16px */
--fz-paragraph-2-line-height: calc(
1.5 * var(--fz-paragraph-2-line-height-factor)
);
--fz-paragraph-2-letter-spacing: calc(
normal * var(--fz-paragraph-2-letter-spacing-factor)
);
--fz-paragraph-3-color: var(--fz-color-neutral-4);
--fz-paragraph-3-weight: var(--fz-weight-regular);
--fz-paragraph-3-font-family: var(--fz-font-family-1);
--fz-paragraph-3-font-size: calc(
0.875rem * var(--fz-paragraph-3-font-size-factor)
); /* 14px */
--fz-paragraph-3-line-height: calc(
1.5 * var(--fz-paragraph-3-line-height-factor)
);
--fz-paragraph-3-letter-spacing: calc(
normal * var(--fz-paragraph-3-letter-spacing-factor)
);
--fz-system-text-1-color: var(--fz-color-neutral-4);
--fz-system-text-1-weight: var(--fz-weight-regular);
--fz-system-text-1-font-family: var(--fz-font-family-1);
--fz-system-text-1-font-size: calc(
0.75rem * var(--fz-system-text-1-font-size-factor)
); /* 12px */
--fz-system-text-1-line-height: calc(
1.5 * var(--fz-system-text-1-line-height-factor)
);
--fz-system-text-1-letter-spacing: calc(
0.04em * var(--fz-system-text-1-letter-spacing-factor)
);
/************************************************
===================== Buttons ===================
************************************************/
/* global for buttons [fz-start buttons>global|--fz-btn-global]*/
--fz-btn-global-font-family: var(--fz-font-family-1);
--fz-btn-global-font-size: var(
--fz-base-font-size
); /* not editable - changes per button size*/
--fz-btn-global-weight: 700; /* bold - not editable */
--fz-btn-global-line-height: 1em; /* not editable */
--fz-btn-global-letter-spacing: normal; /* not editable */
--fz-btn-global-padding: 0.75em 1em; /* not editable */
--fz-btn-global-text-color-0: var(
--fz-color-neutral-0
); /* default is white */
--fz-btn-global-disabled-bg: rgb(243, 244, 246); /* not editable */
--fz-btn-global-disabled-color: rgb(209, 213, 219); /* not editable */
--fz-btn-global-disabled-border-color: var(
--fz-btn-global-disabled-bg
); /* not editable */
--fz-btn-global-animation-transition: background 200ms ease-in-out; /* not editable */
--fz-btn-global-focus-bg: var(--fz-color-primary-3); /* not editable */
--fz-btn-global-focus-color: var(--fz-color-neutral-0); /* not editable */
--fz-btn-global-focus-border-color: var(
--fz-color-neutral-0
); /* not editable */
--fz-btn-global-shadow: var(--fz-shadow-x-small);
--fz-btn-global-border-radius: 4px; /*set default button corner type*/
--fz-btn-global-border-width: 1px; /*set default button outline width*/
--fz-btn-global-border: none;
/* [fz-end] */
/* Primary button - meant for use on light background */
/* [fz-start buttons>primary|--fz-btn-primary] */
--flz-primary: "on"; /* mandatory on */
--fz-btn-primary-bg: var(--fz-color-primary-3);
--fz-btn-primary-color: var(--fz-btn-global-text-color-0);
--fz-btn-primary-border: var(--fz-btn-global-border-width) solid
var(--fz-color-primary-3);
--fz-btn-primary-hover-bg: var(--fz-color-primary-4);
--fz-btn-primary-hover-color: var(--fz-btn-global-text-color-0);
--fz-btn-primary-hover-border: var(--fz-btn-global-border-width) solid
var(--fz-color-primary-4);
--fz-btn-primary-padding: var(--fz-btn-global-padding); /* not editable */
--fz-btn-primary-border-radius: var(
--fz-btn-global-border-radius
); /* not editable */
/* [fz-end] */
/* Secondary button - meant for use on dark background */
/* [fz-start buttons>secondary|--fz-btn-secondary] */
--flz-secondary: "on"; /* mandatory on */
--fz-btn-secondary-bg: var(--fz-btn-global-text-color-0);
--fz-btn-secondary-color: var(--fz-color-primary-5);
--fz-btn-secondary-border: var(--fz-btn-global-border-width) solid
var(--fz-btn-global-text-color-0);
--fz-btn-secondary-hover-bg: var(--fz-color-primary-1);
--fz-btn-secondary-hover-color: var(--fz-color-primary-4);
--fz-btn-secondary-hover-border: var(--fz-btn-global-border-width) solid
var(--fz-color-primary-1);
--fz-btn-secondary-padding: var(--fz-btn-global-padding); /* not editable */
--fz-btn-secondary-border-radius: var(
--fz-btn-global-border-radius
); /* not editable */
/* [fz-end] */
/* Tertiary button */
/* [fz-start buttons>tertiary|--fz-btn-custom-1] */
--flz-custom-1: "on";
--fz-btn-custom-1-bg: none;
--fz-btn-custom-1-color: var(--fz-color-primary-3);
--fz-btn-custom-1-border: var(--fz-btn-global-border-width) solid
var(--fz-color-primary-3);
--fz-btn-custom-1-hover-bg: var(--fz-color-primary-4);
--fz-btn-custom-1-hover-color: var(--fz-btn-global-text-color-0);
--fz-btn-custom-1-hover-border: var(--fz-btn-global-border-width) solid
var(--fz-color-primary-4);
--fz-btn-custom-1-padding: var(--fz-btn-global-padding); /* not editable */
--fz-btn-custom-1-border-radius: var(
--fz-btn-global-border-radius
); /* not editable */
/* [fz-end] */
/* forth button */
/* [fz-start buttons>forth|--fz-btn-custom-2] */
--flz-custom-2: "on";
--fz-btn-custom-2-bg: none;
--fz-btn-custom-2-color: var(--fz-color-primary-1);
--fz-btn-custom-2-border: var(--fz-btn-global-border-width) solid
var(--fz-color-primary-1);
--fz-btn-custom-2-hover-bg: var(--fz-color-primary-1);
--fz-btn-custom-2-hover-color: var(--fz-color-primary-3);
--fz-btn-custom-2-hover-border: var(--fz-btn-global-border-width) solid
var(--fz-color-primary-3);
--fz-btn-custom-2-padding: var(--fz-btn-global-padding); /* not editable */
--fz-btn-custom-2-border-radius: var(
--fz-btn-global-border-radius
); /* not editable */
/* [fz-end] */
/* Curved button */
/* [fz-start buttons>curved|--fz-btn-curved] */
--flz-curved: "on";
--fz-btn-curved-bg: var(--fz-color-primary-1);
--fz-btn-curved-color: var(--fz-color-primary-5);
--fz-btn-curved-border: var(--fz-btn-global-border-width) solid
var(--fz-color-primary-1);
--fz-btn-curved-hover-bg: var(--fz-color-primary-5);
--fz-btn-curved-hover-color: var(--fz-color-primary-1);
--fz-btn-curved-hover-border: var(--fz-btn-global-border-width) solid
var(--fz-color-primary-5);
--fz-btn-curved-padding: 0.5em 1em; /* not editable */
--fz-btn-curved-border-radius: var(
--fz-border-radius-pill
); /* not editable */
/* [fz-end] */
/* link button - meant for use on light background */
/* [fz-start buttons>link|--fz-btn-link] */
--flz-link: "on"; /* mandatory on */
--fz-btn-link-bg: none;
--fz-btn-link-color: var(--fz-color-primary-3);
--fz-btn-link-border: none;
--fz-btn-link-hover-bg: none;
--fz-btn-link-hover-color: var(--fz-color-primary-4);
--fz-btn-link-hover-border: none;
--fz-btn-link-padding: none; /* not editable */
--fz-btn-link-border-radius: var(
--fz-btn-global-border-radius
); /* not editable */
--fz-btn-link-decoration: none;
--fz-btn-link-decoration-hover: none;
/* [fz-end] */
/* link 2 button - meant for use on dark background */
/* [fz-start buttons>link2|--fz-btn-link-2] */
--flz-link-2: "on"; /* mandatory on */
--fz-btn-link-2-bg: none;
--fz-btn-link-2-color: var(--fz-btn-global-text-color-0);
--fz-btn-link-2-border: none;
--fz-btn-link-2-hover-bg: none;
--fz-btn-link-2-hover-color: var(--fz-color-primary-1);
--fz-btn-link-2-hover-border: none;
--fz-btn-link-2-padding: none; /* not editable */
--fz-btn-link-2-border-radius: var(
--fz-btn-global-border-radius
); /* not editable */
--fz-btn-link-2-decoration: none;
--fz-btn-link-2-decoration-hover: none;
/* [fz-end] */
/* circle button - share button */
/* [fz-start buttons>circle|--fz-btn-circle] */
--flz-circle: "on"; /* mandatory on */
--fz-btn-circle-bg: var(--fz-color-primary-3);
--fz-btn-circle-color: var(--fz-btn-global-text-color-0);
--fz-btn-circle-border: var(--fz-btn-global-border-width) solid
var(--fz-color-primary-3);
--fz-btn-circle-hover-bg: var(--fz-color-primary-4);
--fz-btn-circle-hover-color: var(--fz-btn-global-text-color-0);
--fz-btn-circle-hover-border: var(--fz-btn-global-border-width) solid
var(--fz-color-primary-4);
--fz-btn-circle-padding: var(--fz-btn-global-padding); /* not editable */
--fz-btn-circle-border-radius: 50%; /* not editable */
/* [fz-end] */
/************************************************
==================== Tabs ===================
************************************************/
/* global for all tabs [fz-start tabs>global|--fz-tabs-global-]*/
--fz-tabs-global-text-color-0: var(
--fz-color-neutral-0
); /* default is white */
--fz-tabs-global-text-color-10: var(
--fz-color-neutral-4
); /* default is white */
/* [fz-end] */
/* tab-1 - classic content section tab */
/* [fz-start tabs>style-1|--fz-tabs-1] */
--fz-tabs-1-shadow: var(--fz-shadow-none);
--fz-tabs-1-border-radius: var(--fz-border-radius-none)
var(--fz-border-radius-none) var(--fz-border-radius-none)
var(--fz-border-radius-none);
--fz-tabs-1-bg: none;
--fz-tabs-1-bg-hover: none;
--fz-tabs-1-bg-selected: none;
--fz-tabs-1-color: var(--fz-color-neutral-4);
--fz-tabs-1-color-hover: var(--fz-color-primary-3);
--fz-tabs-1-color-selected: var(--fz-color-primary-3);
--fz-tabs-1-border-color: none;
--fz-tabs-1-border-color-hover: none;
--fz-tabs-1-border-color-selected: var(--fz-color-primary-3);
--fz-tabs-1-border-width: 2px;
--fz-tabs-1-border-top: none;
--fz-tabs-1-border-right: none;
--fz-tabs-1-border-bottom: none;
--fz-tabs-1-border-left: none;
--fz-tabs-1-border-hover-top: none;
--fz-tabs-1-border-hover-right: none;
--fz-tabs-1-border-hover-bottom: none;
--fz-tabs-1-border-hover-left: none;
--fz-tabs-1-border-selected-top: none;
--fz-tabs-1-border-selected-right: none;
--fz-tabs-1-border-selected-bottom: var(--fz-tabs-1-border-width) solid
var(--fz-tabs-1-color-selected);
--fz-tabs-1-border-selected-left: none;
--fz-tabs-1-font-family: var(--fz-paragraph-2-font-family);
--fz-tabs-1-font-weight: var(--fz-weight-semi-bold);
--fz-tabs-1-font-size: var(--fz-paragraph-2-font-size);
/* [fz-end] */
/* tab-2 - accent content section tab */
/* [fz-start tabs>style-2|--fz-tabs-2] */
--fz-tabs-2-shadow: var(--fz-shadow-none);
--fz-tabs-2-border-radius: var(--fz-border-radius-pill);
--fz-tabs-2-bg: none;
--fz-tabs-2-bg-hover: var(--fz-color-primary-1);
--fz-tabs-2-bg-selected: var(--fz-color-primary-3);
--fz-tabs-2-color: var(--fz-color-neutral-4);
--fz-tabs-2-color-hover: var(--fz-tabs-global-text-color-10);
--fz-tabs-2-color-selected: var(--fz-tabs-global-text-color-0);
--fz-tabs-2-border-color: none;
--fz-tabs-2-border-color-hover: none;
--fz-tabs-2-border-color-selected: none;
--fz-tabs-2-border-width: 0;
--fz-tabs-2-border-top: none;
--fz-tabs-2-border-right: none;
--fz-tabs-2-border-bottom: none;
--fz-tabs-2-border-left: none;
--fz-tabs-2-border-hover-top: none;
--fz-tabs-2-border-hover-right: none;
--fz-tabs-2-border-hover-bottom: none;
--fz-tabs-2-border-hover-left: none;
--fz-tabs-2-border-selected-top: none;
--fz-tabs-2-border-selected-right: none;
--fz-tabs-2-border-selected-bottom: none;
--fz-tabs-2-border-selected-left: none;
--fz-tabs-2-font-family: var(--fz-paragraph-2-font-family);
--fz-tabs-2-font-weight: var(--fz-weight-semi-bold);
--fz-tabs-2-font-size: var(--fz-paragraph-2-font-size);
/* [fz-end] */
/************************************************
==================== Tiles ===================
************************************************/
/* global for all tiles [fz-start tiles>global|--fz-tiles-global-]*/
--fz-tiles-global-text-color-0: var(
--fz-color-neutral-0
); /* default is white */
--fz-tiles-global-bg-color: var(--fz-color-neutral-0); /* default is white */
--fz-tiles-read-more-button-color: var(--fz-color-primary-3);
/* [fz-end] */
/* [fz-start tiles>style-1|--fz-tile-1-] */
--fz-tile-1-shadow: var(--fz-shadow-small);
--fz-tile-1-border-radius: var(--fz-border-radius-medium);
--fz-tile-1-social-icons-color: var(--fz-color-neutral-2);
--fz-tile-1-icon-type-color: var(
--fz-color-neutral-2
); /* also the read more / less button on mobile */
--fz-tile-1-title-color: var(--fz-color-neutral-5);
--fz-tile-1-bg: var(--fz-tiles-global-bg-color);
--fz-tile-1-hover-color: var(
--fz-tiles-global-text-color-0
); /* on mobile the color should be like description color */
--fz-tile-1-hover-bg: var(--fz-color-primary-5);
--fz-tile-1-font-weight: var(--fz-weight-semi-bold);
--fz-tile-1-title-font-family: var(--fz-font-family-1);
--fz-tile-1-title-font-size: calc(
1rem * var(--fz-paragraph-2-font-size-factor)
);
--fz-tile-1-description-font-family: var(--fz-tile-1-title-font-family);
--fz-tile-1-description-font-size: var(
--fz-tile-1-title-font-size,
--fz-paragraph-2-font-size
);
--fz-tile-1-description-font-weight: var(--fz-paragraph-2-weight);
/* [fz-end] */
/************************************************
==================== images ===================
************************************************/
--fz-image-1-shadow: var(--fz-shadow-none);
--fz-image-1-boarder-radius: var(--fz-border-radius-medium);
--fz-image-1-border: none;
/************************************************
==================== sections ===================
************************************************/
--fz-section-height-short: 26.25rem; /* 420px not editable */
--fz-section-height-medium: 36.875rem; /* 590px not editable */
--fz-section-height-tall: 49.25rem; /* 788px not editable */
--fz-section-bg: transparent; /* not editable */
--fz-section-padding-step: 10px; /* not editable - padding will we in multiplies of this value */
/************************************************
========== checkboxes & radio btns =============
************************************************/
--fz-checkbox-radio-corner-radius: var(--fz-border-radius-x-small);
--fz-checkbox-radio-color-selected: var(--fz-color-info-3);
--fz-checkbox-radio-color-unselected: var(--fz-color-neutral-0);
--fz-checkbox-radio-color-selected-hover: var(--fz-color-info-4);
--fz-checkbox-radio-color-unselected-hover: var(--fz-color-neutral-1);
--fz-checkbox-radio-border-color: var(--fz-color-neutral-3);
/************************************************
================ item viewer ====================
************************************************/
--fz-item-viewer-width: calc(100vw * 0.6); /* not editable */
--fz-item-viewer-width-mobile: 100vw; /* not editable */
--fz-item-viewer-header-height: 50px; /* not editable */
/************************************************
================ outline ====================
************************************************/
--fz-outline-btn-focus: 2px solid var(--fz-color-info-3);
--fz-outline-btn-focus-offset: var(--fz-spacing-5x-small);
/************************************************
==================== Article ================
************************************************/
--fz-article-title-color: var(--fz-heading-2-color);
--fz-article-title-weight: var(--fz-heading-2-weight);
--fz-article-title-font-family: var(--fz-heading-2-font-family);
--fz-article-title-font-size: var(--fz-heading-2-font-size);
--fz-article-title-letter-spacing: var(--fz-heading-2-letter-spacing);
--fz-article-title-line-height: var(--fz-heading-2-line-height);
--fz-article-heading-color: var(--fz-heading-4-color);
--fz-article-heading-weight: var(--fz-heading-4-weight);
--fz-article-heading-font-family: var(--fz-heading-4-font-family);
--fz-article-heading-font-size: var(--fz-heading-4-font-size);
--fz-article-heading-line-height: var(--fz-heading-4-line-height);
--fz-article-heading-letter-spacing: var(--fz-heading-4-letter-spacing);
--fz-article-subheading-color: var(--fz-heading-5-color);
--fz-article-subheading-weight: var(--fz-heading-5-weight);
--fz-article-subheading-font-family: var(--fz-heading-5-font-family);
--fz-article-subheading-font-size: var(--fz-heading-5-font-size);
--fz-article-subheading-line-height: var(--fz-heading-5-line-height);
--fz-article-subheading-letter-spacing: var(--fz-heading-5-letter-spacing);
--fz-article-normal-color: var(--fz-paragraph-1-color);
--fz-article-normal-weight: var(--fz-paragraph-1-weight);
--fz-article-normal-font-family: var(--fz-paragraph-1-font-family);
--fz-article-normal-font-size: var(--fz-paragraph-1-font-size);
--fz-article-normal-line-height: var(--fz-paragraph-1-line-height);
--fz-article-normal-letter-spacing: var(--fz-paragraph-1-letter-spacing);
--fz-article-quote-color: var(--fz-heading-5-color);
--fz-article-quote-weight: var(--fz-heading-5-weight);
--fz-article-quote-font-family: var(--fz-heading-5-font-family);
--fz-article-quote-font-size: var(--fz-heading-5-font-size);
--fz-article-quote-line-height: var(--fz-heading-5-line-height);
--fz-article-quote-letter-spacing: var(--fz-heading-5-letter-spacing);
--fz-article-author-color: var(--fz-paragraph-2-color);
--fz-article-author-weight: var(--fz-paragraph-2-weight);
--fz-article-author-font-family: var(--fz-paragraph-2-font-family);
--fz-article-author-font-size: var(--fz-paragraph-2-font-size);
--fz-article-author-line-height: var(--fz-paragraph-2-line-height);
--fz-article-author-letter-spacing: var(--fz-paragraph-2-letter-spacing);
--fz-article-info-color: var(--fz-system-text-1-color);
--fz-article-info-weight: var(--fz-system-text-1-weight);
--fz-article-info-font-family: var(--fz-system-text-1-font-family);
--fz-article-info-font-size: var(--fz-system-text-1-font-size);
--fz-article-info-line-height: var(--fz-system-text-1-line-height);
--fz-article-info-letter-spacing: var(--fz-system-text-1-letter-spacing);
/************************************************
==================== Forms ==================
************************************************/
--fz-form-title-color: var(--fz-paragraph-1-color);
--fz-form-title-weight: var(--fz-paragraph-1-weight);
--fz-form-title-font-family: var(--fz-paragraph-1-font-family);
--fz-form-title-font-size: var(--fz-paragraph-1-font-size);
--fz-form-title-line-height: var(--fz-paragraph-1-line-height);
--fz-form-title-letter-spacing: var(--fz-paragraph-1-letter-spacing);
--fz-form-label-color: var(--fz-system-text-1-color);
--fz-form-label-weight: var(--fz-system-text-1-weight);
--fz-form-label-font-family: var(--fz-system-text-1-font-family);
--fz-form-label-font-size: var(--fz-system-text-1-font-size);
--fz-form-label-line-height: var(--fz-system-text-1-line-height);
--fz-form-label-letter-spacing: var(--fz-system-text-1-letter-spacing);
--fz-form-privacy-msg-color: var(--fz-system-text-1-color);
--fz-form-privacy-msg-weight: var(--fz-system-text-1-weight);
--fz-form-privacy-msg-font-family: var(--fz-system-text-1-font-family);
--fz-form-privacy-msg-font-size: var(--fz-system-text-1-font-size);
--fz-form-privacy-msg-line-height: var(--fz-system-text-1-line-height);
--fz-form-privacy-msg-letter-spacing: var(--fz-system-text-1-letter-spacing);
--fz-form-input-border: 1px solid var(--fz-system-text-1-color);
--fz-form-input-border-hover: 1px solid var(--fz-system-text-1-color);
--fz-form-input-border-focus: 1px solid var(--fz-color-info-3);
--fz-form-input-bg: var(--fz-color-neutral-0);
--fz-form-input-bg-hover: var(--fz-color-neutral-0);
--fz-form-input-bg-focus: var(--fz-color-neutral-0);
--fz-form-placeholder-color: rgba(0, 0, 0, 0.6);
--fz-form-input-color: var(--fz-color-neutral-1000);
--fz-form-bg: var(--fz-color-neutral-0);
--fz-form-accent-color: var(--fz-color-primary-3);
/************************************************
================== Contact Card ================
************************************************/
--fz-contact-card-color: var(--fz-color-neutral-4);
--fz-contact-card-font-family: var(--fz-paragraph-1-font-family);
--fz-contact-card-border-radius: var(--fz-btn-global-border-radius);
--fz-contact-card-icon-bg: var(--fz-color-neutral-0);
--fz-contact-card-icon-color: var(--fz-color-primary-3);
/************************************************
==================== navs ===================
************************************************/
/* global for all navs [fz-start navs>global|--fz-navs-global-]*/
--fz-navs-global-text-color-0: var(
--fz-color-neutral-0
); /* default is white */
--fz-navs-global-text-color-10: var(
--fz-color-neutral-4
); /* default is white */
--fz-navs-global-padding: 0 1em;
--fz-navs-global-margin: var(--fz-spacing-5x-small);
/* [fz-end] */
/* tab-1 - classic content section tab */
/* [fz-start navs>style-1|--fz-navs-1] */
--fz-navs-1-shadow: var(--fz-shadow-none);
--fz-navs-1-border-radius: var(--fz-border-radius-none)
var(--fz-border-radius-none) var(--fz-border-radius-none)
var(--fz-border-radius-none);
--fz-navs-1-bg: none;
--fz-navs-1-bg-hover: none;
--fz-navs-1-bg-selected: none;
--fz-navs-1-color: var(--fz-color-neutral-4);
--fz-navs-1-color-hover: var(--fz-color-primary-3);
--fz-navs-1-color-selected: var(--fz-color-primary-3);
--fz-navs-1-border-color: none;
--fz-navs-1-border-color-hover: none;
--fz-navs-1-border-color-selected: none;
--fz-navs-1-border-width: 3px;
--fz-navs-1-border-top: none;
--fz-navs-1-border-right: none;
--fz-navs-1-border-bottom: var(--fz-navs-1-border-width) solid
rgb(79, 70, 229, 0);
--fz-navs-1-border-left: none;
--fz-navs-1-border-hover-top: none;
--fz-navs-1-border-hover-right: none;
--fz-navs-1-border-hover-bottom: var(--fz-navs-1-border-width) solid
var(--fz-navs-1-color-hover);
--fz-navs-1-border-hover-left: none;
--fz-navs-1-border-selected-top: none;
--fz-navs-1-border-selected-right: none;
--fz-navs-1-border-selected-bottom: var(--fz-navs-1-border-width) solid
var(--fz-navs-1-color-selected);
--fz-navs-1-border-selected-left: none;
--fz-navs-1-font-family: var(--fz-paragraph-2-font-family);
--fz-navs-1-font-weight: var(--fz-weight-semi-bold);
--fz-navs-1-font-size: var(--fz-paragraph-2-font-size);
/* [fz-end] */
/* tab-2 - accent content section tab */
/* [fz-start navs>style-2|--fz-navs-2] */
--fz-navs-2-shadow: var(--fz-shadow-none);
--fz-navs-2-border-radius: var(--fz-border-radius-none)
var(--fz-border-radius-none) var(--fz-border-radius-none)
var(--fz-border-radius-none);
--fz-navs-2-bg: none;
--fz-navs-2-bg-hover: none;
--fz-navs-2-bg-selected: none;
--fz-navs-2-color: var(--fz-color-neutral-0);
--fz-navs-2-color-hover: var(--fz-color-neutral-0);
--fz-navs-2-color-selected: var(--fz-color-neutral-0);
--fz-navs-2-border-color: none;
--fz-navs-2-border-color-hover: none;
--fz-navs-2-border-color-selected: var(--fz-color-primary-1);
--fz-navs-2-border-width: 3px;
--fz-navs-2-border-top: none;
--fz-navs-2-border-right: none;
--fz-navs-2-border-bottom: var(--fz-navs-1-border-width) solid
rgb(79, 70, 229, 0);
--fz-navs-2-border-left: none;
--fz-navs-2-border-hover-top: none;
--fz-navs-2-border-hover-right: none;
--fz-navs-2-border-hover-bottom: var(--fz-navs-2-border-width) solid
var(--fz-navs-2-color-hover);
--fz-navs-2-border-hover-left: none;
--fz-navs-2-border-selected-top: none;
--fz-navs-2-border-selected-right: none;
--fz-navs-2-border-selected-bottom: var(--fz-navs-2-border-width) solid
var(--fz-navs-2-color-selected);
--fz-navs-2-border-selected-left: none;
--fz-navs-2-font-family: var(--fz-paragraph-2-font-family);
--fz-navs-2-font-weight: var(--fz-weight-semi-bold);
--fz-navs-2-font-size: var(--fz-paragraph-2-font-size);
/* [fz-end] */
/************************************************
todo: we need to remove every thing below this line
- we need to convert all --sys- vars to --edit-fz- inside all components
- its a left over from the old light theme - mainly not used but still exists in some components
* please note - this vars are not ment to be editable
************************************************/
/* Gray */
--sys-color-gray-50: rgb(250 250 250);
--sys-color-gray-100: rgb(244 244 245);
--sys-color-gray-200: rgb(228 228 231);
--sys-color-gray-300: rgb(212 212 216);
--sys-color-gray-400: rgb(161 161 170);
--sys-color-gray-500: rgb(113 113 122);
--sys-color-gray-600: rgb(82 82 91);
--sys-color-gray-700: rgb(63 63 70);
--sys-color-gray-800: rgb(39 39 42);
--sys-color-gray-900: rgb(24 24 27);
--sys-color-gray-950: rgb(19 19 22);
/* Neutral */
--sys-color-neutral-50: var(--sys-color-gray-50);
--sys-color-neutral-100: var(--sys-color-gray-100);
--sys-color-neutral-200: var(--sys-color-gray-200);
--sys-color-neutral-300: var(--sys-color-gray-300);
--sys-color-neutral-400: var(--sys-color-gray-400);
--sys-color-neutral-500: var(--sys-color-gray-500);
--sys-color-neutral-600: var(--sys-color-gray-600);
--sys-color-neutral-700: var(--sys-color-gray-700);
--sys-color-neutral-800: var(--sys-color-gray-800);
--sys-color-neutral-900: var(--sys-color-gray-900);
--sys-color-neutral-950: var(--sys-color-gray-950);
/* Neutral one-offs */
--sys-color-neutral-0: rgb(255 255 255);
--sys-color-neutral-1000: rgb(0 0 0);
/*
* Surfaces
*/
--sys-surface-base: var(--sys-color-neutral-0);
--sys-surface-base-alt: var(--sys-color-neutral-0);
/*
* Transitions
*/
--fz-transition-x-slow: 1000ms;
--fz-transition-slow: 500ms;
--fz-transition-medium: 250ms;
--fz-transition-fast: 150ms;
--fz-transition-x-fast: 50ms;
/*
* Typography
*/
/* Fonts */
--fz-font-mono: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
--fz-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol";
--fz-font-serif: Georgia, "Times New Roman", serif;
/* Font sizes */
--fz-font-size-2x-small: 0.625rem; /* 10px */
--fz-font-size-x-small: 0.75rem; /* 12px */
--fz-font-size-small: 0.875rem; /* 14px */
--fz-font-size-medium: 1rem; /* 16px */
--fz-font-size-large: 1.25rem; /* 20px */
--fz-font-size-x-large: 1.5rem; /* 24px */
--fz-font-size-2x-large: 2.25rem; /* 36px */
--fz-font-size-3x-large: 3rem; /* 48px */
--fz-font-size-4x-large: 4.5rem; /* 72px */
/* Font weights */
--fz-font-weight-light: 300;
--fz-font-weight-normal: 400;
--fz-font-weight-semibold: 500;
--fz-font-weight-bold: 700;
/* Letter spacings */
--fz-letter-spacing-denser: -0.03em;
--fz-letter-spacing-dense: -0.015em;
--fz-letter-spacing-normal: normal;
--fz-letter-spacing-loose: 0.075em;
--fz-letter-spacing-looser: 0.15em;
/* Line heights */
--fz-line-height-denser: 1;
--fz-line-height-dense: 1.4;
--fz-line-height-normal: 1.8;
--fz-line-height-loose: 2.2;
--fz-line-height-looser: 2.6;
/*
* Forms
*/
/* Focus rings */
--fz-focus-ring-color: var(--sys-color-primary-500);
--fz-focus-ring-width: 3px;
--fz-focus-ring-alpha: 40%;
--fz-focus-ring: 0 0 0 var(--fz-focus-ring-width)
rgb(var(--sys-focus-ring-color) / var(--fz-focus-ring-alpha));
/* Buttons */
--fz-button-font-size-small: var(--fz-font-size-x-small);
--fz-button-font-size-medium: var(--fz-font-size-small);
--fz-button-font-size-large: var(--fz-font-size-medium);
/* Inputs */
--fz-input-height-small: 1.875rem; /* 30px */
--fz-input-height-medium: 2.5rem; /* 40px */
--fz-input-height-large: 3.125rem; /* 50px */
--sys-input-background-color: var(--sys-color-neutral-0);
--sys-input-background-color-hover: var(--fz-input-background-color);
--sys-input-background-color-focus: var(--fz-input-background-color);
--sys-input-background-color-disabled: var(--sys-color-neutral-100);
--sys-input-border-color: var(--sys-color-neutral-300);
--sys-input-border-color-hover: var(--sys-color-neutral-400);
--sys-input-border-color-focus: var(--sys-color-primary-500);
--sys-input-border-color-disabled: var(--sys-color-neutral-300);
--fz-input-border-width: 1px;
--fz-input-border-radius-small: var(--fz-border-radius-medium);
--fz-input-border-radius-medium: var(--fz-border-radius-medium);
--fz-input-border-radius-large: var(--fz-border-radius-medium);
--fz-input-font-family: var(--fz-font-sans);
--fz-input-font-weight: var(--fz-font-weight-normal);
--fz-input-font-size-small: var(--fz-font-size-small);
--fz-input-font-size-medium: var(--fz-font-size-medium);
--fz-input-font-size-large: var(--fz-font-size-large);
--fz-input-letter-spacing: var(--fz-letter-spacing-normal);
--fz-input-color: var(--sys-color-neutral-700);
--fz-input-color-hover: var(--sys-color-neutral-700);
--fz-input-color-focus: var(--sys-color-neutral-700);
--fz-input-color-disabled: var(--sys-color-neutral-900);
--fz-input-icon-color: var(--sys-color-neutral-500);
--fz-input-icon-color-hover: var(--sys-color-neutral-600);
--fz-input-icon-color-focus: var(--sys-color-neutral-600);
--fz-input-placeholder-color: var(--sys-color-neutral-500);
--fz-input-placeholder-color-disabled: var(--sys-color-neutral-600);
--fz-input-spacing-small: var(--fz-spacing-small);
--fz-input-spacing-medium: var(--fz-spacing-medium);
--fz-input-spacing-large: var(--fz-spacing-large);
--fz-input-filled-background-color: var(--sys-color-neutral-100);
--fz-input-filled-background-color-hover: var(--sys-color-neutral-100);
--fz-input-filled-background-color-focus: var(--sys-color-neutral-0);
--fz-input-filled-background-color-disabled: var(--sys-color-neutral-100);
--fz-input-filled-color: var(--sys-color-neutral-800);
--fz-input-filled-color-hover: var(--sys-color-neutral-800);
--fz-input-filled-color-focus: var(--sys-color-neutral-700);
--fz-input-filled-color-disabled: var(--sys-color-neutral-800);
/* Labels */
--fz-input-label-font-size-small: var(--fz-font-size-small);
--fz-input-label-font-size-medium: var(--fz-font-size-medium);
--fz-input-label-font-size-large: var(--fz-font-size-large);
--fz-input-label-color: inherit;
/* Help text */
--fz-input-help-text-font-size-small: var(--fz-font-size-x-small);
--fz-input-help-text-font-size-medium: var(--fz-font-size-small);
--fz-input-help-text-font-size-large: var(--fz-font-size-medium);
--fz-input-help-text-color: var(--sys-color-neutral-500);
/* Toggles (checkboxes, radios, switches) */
--fz-toggle-size: 1rem;
/*
* Overlays
*/
--fz-overlay-background-color: var(--sys-color-blue-gray-500);
--fz-overlay-opacity: 33%;
/*
* Panels
*/
--sys-panel-background-color: var(--sys-surface-base-alt);
--sys-panel-border-color: var(--sys-color-neutral-200);
--sys-panel-border-width: 1px;
/*
* Tooltips
*/
--fz-tooltip-border-radius: var(--fz-border-radius-medium);
--fz-tooltip-background-color: var(--sys-color-neutral-800);
--fz-tooltip-color: var(--sys-color-neutral-0);
--fz-tooltip-font-family: var(--fz-font-sans);
--fz-tooltip-font-weight: var(--fz-font-weight-normal);
--fz-tooltip-font-size: var(--fz-font-size-small);
--fz-tooltip-line-height: var(--fz-line-height-dense);
--fz-tooltip-padding: var(--fz-spacing-2x-small) var(--fz-spacing-x-small);
--fz-tooltip-arrow-size: 5px;
--fz-tooltip-arrow-start-end-offset: 8px;
/*
* Z-indexes
*/
--fz-z-index-drawer: 700;
--fz-z-index-dialog: 800;
--fz-z-index-dropdown: 900;
--fz-z-index-toast: 950;
--fz-z-index-tooltip: 1000;
/************************************************
==================== column ================
************************************************/
--fz-column-title-color: var(--fz-color-neutral-5);
--fz-column-title-weight: var(--fz-font-weight-bold);
--fz-column-title-font-family: var(--fz-heading-6-font-family);
--fz-column-title-font-size: var(--fz-heading-6-font-size);
--fz-column-title-letter-spacing: var(--fz-heading-6-letter-spacing);
--fz-column-title-line-height: var(--fz-heading-6-line-height);
--fz-column-subtitle-color: var(--fz-color-neutral-4);
--fz-column-subtitle-weight: var(--fz-paragraph-2-weight);
--fz-column-subtitle-font-family: var(--fz-paragraph-2-font-family);
--fz-column-subtitle-font-size: var(--fz-paragraph-2-font-size);
--fz-column-subtitle-line-height: var(--fz-paragraph-2-line-height);
--fz-column-subtitle-letter-spacing: var(--fz-paragraph-2-letter-spacing);
--fz-column-paragraph-color: var(--fz-color-neutral-4);
--fz-column-paragraph-weight: var(--fz-paragraph-2-weight);
--fz-column-paragraph-font-family: var(--fz-paragraph-2-font-family);
--fz-column-paragraph-font-size: var(--fz-paragraph-2-font-size);
--fz-column-paragraph-line-height: var(--fz-paragraph-2-line-height);
--fz-column-paragraph-letter-spacing: var(--fz-paragraph-2-letter-spacing);
--fz-column-bg: var(--fz-color-neutral-0);
--fz-column-border: var(--fz-image-1-border);
--fz-column-shadow: var(--fz-image-1-shadow);
--fz-column-border-radius: var(--fz-image-1-boarder-radius);
/************************************************
==================== multi-tabs ===================
************************************************/
/* tab-1 - classic content section tab */
/* [fz-start multi-tabs>style-1|--fz-multi-tabs-1] */
--fz-multi-tabs-1-shadow: var(--fz-shadow-none);
--fz-multi-tabs-1-border-radius: var(--fz-border-radius-pill);
--fz-multi-tabs-1-padding: 0.7em 1.2em;
--fz-multi-tabs-1-margin: var(--fz-spacing-5x-small);
--fz-multi-tabs-1-bg: var(--fz-color-neutral-1);
--fz-multi-tabs-1-bg-hover: var(--fz-color-primary-3);
--fz-multi-tabs-1-bg-selected: var(--fz-color-primary-3);
--fz-multi-tabs-1-color: var(--fz-color-neutral-5);
--fz-multi-tabs-1-color-hover: var(--fz-color-neutral-0);
--fz-multi-tabs-1-color-selected: var(--fz-color-neutral-0);
--fz-multi-tabs-1-border-color: none;
--fz-multi-tabs-1-border-color-hover: none;
--fz-multi-tabs-1-border-color-selected: none;
--fz-multi-tabs-1-border-width: none;
--fz-multi-tabs-1-border-top: none;
--fz-multi-tabs-1-border-right: none;
--fz-multi-tabs-1-border-bottom: none;
--fz-multi-tabs-1-border-left: none;
--fz-multi-tabs-1-border-hover-top: none;
--fz-multi-tabs-1-border-hover-right: none;
--fz-multi-tabs-1-border-hover-bottom: none;
--fz-multi-tabs-1-border-hover-left: none;
--fz-multi-tabs-1-border-selected-top: none;
--fz-multi-tabs-1-border-selected-right: none;
--fz-multi-tabs-1-border-selected-bottom: none;
--fz-multi-tabs-1-border-selected-left: none;
--fz-multi-tabs-1-font-family: var(--fz-paragraph-2-font-family);
--fz-multi-tabs-1-font-weight: var(--fz-weight-semi-bold);
--fz-multi-tabs-1-font-size: var(--fz-paragraph-2-font-size);
/* [fz-end] */
/* tab-2 - accent content section tab */
/* [fz-start multi-tabs>style-2|--fz-multi-tabs-2] */
--fz-multi-tabs-2-shadow: var(--fz-shadow-none);
--fz-multi-tabs-2-border-radius: var(--fz-border-radius-pill);
--fz-multi-tabs-2-padding: 0.7em 1.2em;
--fz-multi-tabs-2-margin: var(--fz-spacing-5x-small);
--fz-multi-tabs-2-bg: var(--fz-color-neutral-0);
--fz-multi-tabs-2-bg-hover: var(--fz-color-primary-1);
--fz-multi-tabs-2-bg-selected: var(--fz-color-primary-1);
--fz-multi-tabs-2-color: var(--fz-color-neutral-5);
--fz-multi-tabs-2-color-hover: var(--fz-color-primary-3);
--fz-multi-tabs-2-color-selected: var(--fz-color-primary-3);
--fz-multi-tabs-2-border-color: none;
--fz-multi-tabs-2-border-color-hover: none;
--fz-multi-tabs-2-border-color-selected: none;
--fz-multi-tabs-2-border-width: none;
--fz-multi-tabs-2-border-top: none;
--fz-multi-tabs-2-border-right: none;
--fz-multi-tabs-2-border-bottom: none;
--fz-multi-tabs-2-border-left: none;
--fz-multi-tabs-2-border-hover-top: none;
--fz-multi-tabs-2-border-hover-right: none;
--fz-multi-tabs-2-border-hover-bottom: none;
--fz-multi-tabs-2-border-hover-left: none;
--fz-multi-tabs-2-border-selected-top: none;
--fz-multi-tabs-2-border-selected-right: none;
--fz-multi-tabs-2-border-selected-bottom: none;
--fz-multi-tabs-2-border-selected-left: none;
--fz-multi-tabs-2-font-family: var(--fz-paragraph-2-font-family);
--fz-multi-tabs-2-font-weight: var(--fz-weight-semi-bold);
--fz-multi-tabs-2-font-size: var(--fz-paragraph-2-font-size);
/* [fz-end] */
}
/* PLEASE NOTE - the order is important. do not change.
the factors are a little counter intuitive the start from big and go to small */
/* this is for above 1536px */
@media screen and (min-width: 1536px) {
:root,
:host {
--fz-heading-1-font-size-factor: 1;
--fz-heading-1-line-height-factor: 1;
--fz-heading-1-letter-spacing-factor: 1;
--fz-heading-2-font-size-factor: 1;
--fz-heading-2-line-height-factor: 1;
--fz-heading-2-letter-spacing-factor: 1;
--fz-heading-3-font-size-factor: 1;
--fz-heading-3-line-height-factor: 1;
--fz-heading-3-letter-spacing-factor: 1;
--fz-heading-4-font-size-factor: 1;
--fz-heading-4-line-height-factor: 1;
--fz-heading-4-letter-spacing-factor: 1;
--fz-heading-5-font-size-factor: 1;
--fz-heading-5-line-height-factor: 1;
--fz-heading-5-letter-spacing-factor: 1;
--fz-heading-6-font-size-factor: 1;
--fz-heading-6-line-height-factor: 1;
--fz-heading-6-letter-spacing-factor: 1;
--fz-paragraph-1-font-size-factor: 1;
--fz-paragraph-1-line-height-factor: 1;
--fz-paragraph-1-letter-spacing-factor: 1;
--fz-paragraph-2-font-size-factor: 1;
--fz-paragraph-2-line-height-factor: 1;
--fz-paragraph-2-letter-spacing-factor: 1;
--fz-paragraph-3-font-size-factor: 1;
--fz-paragraph-3-line-height-factor: 1;
--fz-paragraph-3-letter-spacing-factor: 1;
--fz-system-text-1-font-size-factor: 1;
--fz-system-text-1-line-height-factor: 1;
--fz-system-text-1-letter-spacing-factor: 1;
}
}
/* desktop sizes - in headings section */
/* for small screen (640px - 1024px) */
@media screen and (max-width: 1024px) {
:root,
:host {
--fz-heading-1-font-size-factor: 0.8;
--fz-heading-1-line-height-factor: 1;
--fz-heading-1-letter-spacing-factor: 1;
--fz-heading-2-font-size-factor: 0.9;
--fz-heading-2-line-height-factor: 1;
--fz-heading-2-letter-spacing-factor: 1;
--fz-heading-3-font-size-factor: 1;
--fz-heading-3-line-height-factor: 1;
--fz-heading-3-letter-spacing-factor: 1;
--fz-heading-4-font-size-factor: 1;
--fz-heading-4-line-height-factor: 1;
--fz-heading-4-letter-spacing-factor: 1;
--fz-heading-5-font-size-factor: 1;
--fz-heading-5-line-height-factor: 1;
--fz-heading-5-letter-spacing-factor: 1;
--fz-heading-6-font-size-factor: 1;
--fz-heading-6-line-height-factor: 1;
--fz-heading-6-letter-spacing-factor: 1;
--fz-paragraph-1-font-size-factor: 1;
--fz-paragraph-1-line-height-factor: 1;
--fz-paragraph-1-letter-spacing-factor: 1;
--fz-paragraph-2-font-size-factor: 1;
--fz-paragraph-2-line-height-factor: 1;
--fz-paragraph-2-letter-spacing-factor: 1;
--fz-paragraph-3-font-size-factor: 1;
--fz-paragraph-3-line-height-factor: 1;
--fz-paragraph-3-letter-spacing-factor: 1;
--fz-system-text-1-font-size-factor: 1;
--fz-system-text-1-line-height-factor: 1;
--fz-system-text-1-letter-spacing-factor: 1;
}
}
/* for mobile to 640px (0 - 640px) */
@media screen and (max-width: 640px) {
:root,
:host {
--fz-heading-1-font-size-factor: 0.65;
--fz-heading-1-line-height-factor: 1;
--fz-heading-1-letter-spacing-factor: 1;
--fz-heading-2-font-size-factor: 0.75;
--fz-heading-2-line-height-factor: 1;
--fz-heading-2-letter-spacing-factor: 1;
--fz-heading-3-font-size-factor: 1;
--fz-heading-3-line-height-factor: 1;
--fz-heading-3-letter-spacing-factor: 1;
--fz-heading-4-font-size-factor: 1;
--fz-heading-4-line-height-factor: 1;
--fz-heading-4-letter-spacing-factor: 1;
--fz-heading-5-font-size-factor: 1;
--fz-heading-5-line-height-factor: 1;
--fz-heading-5-letter-spacing-factor: 1;
--fz-heading-6-font-size-factor: 1;
--fz-heading-6-line-height-factor: 1;
--fz-heading-6-letter-spacing-factor: 1;
--fz-paragraph-1-font-size-factor: 1;
--fz-paragraph-1-line-height-factor: 1;
--fz-paragraph-1-letter-spacing-factor: 1;
--fz-paragraph-2-font-size-factor: 1;
--fz-paragraph-2-line-height-factor: 1;
--fz-paragraph-2-letter-spacing-factor: 1;
--fz-paragraph-3-font-size-factor: 1;
--fz-paragraph-3-line-height-factor: 1;
--fz-paragraph-3-letter-spacing-factor: 1;
--fz-system-text-1-font-size-factor: 1;
--fz-system-text-1-line-height-factor: 1;
--fz-system-text-1-letter-spacing-factor: 1;
}
}