globuswebcomponents 2.6.6 → 2.6.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/{gb-action-panel_66.cjs.entry.js → gb-action-panel_70.cjs.entry.js} +223 -25
- package/dist/cjs/gb-action-panel_70.cjs.entry.js.map +1 -0
- package/dist/cjs/gb-step-base.gb-step-icon-base.entry.cjs.js.map +1 -0
- package/dist/cjs/{gb-featured-icon_3.cjs.entry.js → gb-step-base_2.cjs.entry.js} +2 -27
- package/dist/cjs/gb-step-base_2.cjs.entry.js.map +1 -0
- package/dist/cjs/globuscomponents.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/gb-nav-bar/gb-nav-bar.js +5 -6
- package/dist/collection/components/gb-nav-bar/gb-nav-bar.js.map +1 -1
- package/dist/collection/components/gb-nav-bar-sidemenu/gb-nav-bar-sidemenu.js +18 -18
- package/dist/collection/components/gb-nav-bar-sidemenu/gb-nav-bar-sidemenu.js.map +1 -1
- package/dist/collection/components/gb-pattern/gb-pattern.js +7 -1
- package/dist/collection/components/gb-pattern/gb-pattern.js.map +1 -1
- package/dist/components/gb-empty-state.js +1 -1
- package/dist/components/gb-nav-bar-sidemenu.js +17 -17
- package/dist/components/gb-nav-bar-sidemenu.js.map +1 -1
- package/dist/components/gb-nav-bar.js +5 -6
- package/dist/components/gb-nav-bar.js.map +1 -1
- package/dist/components/gb-pattern.js +1 -1
- package/dist/components/{p-COsrmQKW.js → p-BXkbbpUn.js} +8 -3
- package/dist/components/p-BXkbbpUn.js.map +1 -0
- package/dist/docs.json +2 -2
- package/dist/esm/{gb-action-panel_66.entry.js → gb-action-panel_70.entry.js} +220 -26
- package/dist/esm/gb-action-panel_70.entry.js.map +1 -0
- package/dist/esm/gb-step-base.gb-step-icon-base.entry.js.map +1 -0
- package/dist/esm/{gb-featured-icon_3.entry.js → gb-step-base_2.entry.js} +4 -28
- package/dist/esm/gb-step-base_2.entry.js.map +1 -0
- package/dist/esm/globuscomponents.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/globuscomponents/gb-step-base.gb-step-icon-base.entry.esm.js.map +1 -0
- package/dist/globuscomponents/globuscomponents.esm.js +1 -1
- package/dist/globuscomponents/p-544a9500.entry.js +2 -0
- package/dist/globuscomponents/{p-1b73d6ca.entry.js.map → p-544a9500.entry.js.map} +1 -1
- package/dist/globuscomponents/{p-b8c28f5b.entry.js → p-bc3fce6c.entry.js} +2 -2
- package/dist/globuscomponents/p-bc3fce6c.entry.js.map +1 -0
- package/dist/types/components/gb-nav-bar/gb-nav-bar.d.ts +2 -1
- package/package.json +1 -1
- package/dist/cjs/gb-action-panel_66.cjs.entry.js.map +0 -1
- package/dist/cjs/gb-empty-state.cjs.entry.js +0 -64
- package/dist/cjs/gb-empty-state.cjs.entry.js.map +0 -1
- package/dist/cjs/gb-empty-state.entry.cjs.js.map +0 -1
- package/dist/cjs/gb-featured-icon.gb-step-base.gb-step-icon-base.entry.cjs.js.map +0 -1
- package/dist/cjs/gb-featured-icon_3.cjs.entry.js.map +0 -1
- package/dist/cjs/gb-illustration.gb-pattern.entry.cjs.js.map +0 -1
- package/dist/cjs/gb-illustration_2.cjs.entry.js +0 -121
- package/dist/cjs/gb-illustration_2.cjs.entry.js.map +0 -1
- package/dist/components/p-COsrmQKW.js.map +0 -1
- package/dist/esm/gb-action-panel_66.entry.js.map +0 -1
- package/dist/esm/gb-empty-state.entry.js +0 -62
- package/dist/esm/gb-empty-state.entry.js.map +0 -1
- package/dist/esm/gb-featured-icon.gb-step-base.gb-step-icon-base.entry.js.map +0 -1
- package/dist/esm/gb-featured-icon_3.entry.js.map +0 -1
- package/dist/esm/gb-illustration.gb-pattern.entry.js.map +0 -1
- package/dist/esm/gb-illustration_2.entry.js +0 -118
- package/dist/esm/gb-illustration_2.entry.js.map +0 -1
- package/dist/globuscomponents/gb-empty-state.entry.esm.js.map +0 -1
- package/dist/globuscomponents/gb-featured-icon.gb-step-base.gb-step-icon-base.entry.esm.js.map +0 -1
- package/dist/globuscomponents/gb-illustration.gb-pattern.entry.esm.js.map +0 -1
- package/dist/globuscomponents/p-18ee1c25.entry.js +0 -2
- package/dist/globuscomponents/p-18ee1c25.entry.js.map +0 -1
- package/dist/globuscomponents/p-1b73d6ca.entry.js +0 -2
- package/dist/globuscomponents/p-987f9da7.entry.js +0 -2
- package/dist/globuscomponents/p-987f9da7.entry.js.map +0 -1
- package/dist/globuscomponents/p-b8c28f5b.entry.js.map +0 -1
|
@@ -3981,6 +3981,62 @@ const GbDropdownShortcut = class {
|
|
|
3981
3981
|
};
|
|
3982
3982
|
GbDropdownShortcut.style = gbDropdownItemsWithShortcutCss;
|
|
3983
3983
|
|
|
3984
|
+
const gbEmptyStateCss = "/* @import 'tailwind.css'; */\r\n\r\n:root {\r\n /* --------------------------------------Primary Colors--------------------------------------------- */\r\n /* base color palette */\r\n --base-white: #fff;\r\n --base-black: #000;\r\n\r\n /* gray color palette */\r\n --gray-25: #f9fafb;\r\n --gray-50: #f6f8fa;\r\n --gray-100: #eef2f6;\r\n --gray-200: #e3e8ef;\r\n --gray-300: #cdd5df;\r\n --gray-400: #808c9e;\r\n --gray-500: #697586;\r\n --gray-600: #4b5565;\r\n --gray-700: #364152;\r\n --gray-800: #202939;\r\n --gray-900: #121926;\r\n --gray-950: #0d121c;\r\n\r\n /* brand dark blue color palette */\r\n --brandDarkBlue-25: #f9f9fb;\r\n --brandDarkBlue-50: #edeef3;\r\n --brandDarkBlue-100: #d3d5e0;\r\n --brandDarkBlue-200: #b5b9cc;\r\n --brandDarkBlue-300: #9095b2;\r\n --brandDarkBlue-400: #464f7f;\r\n --brandDarkBlue-500: #212c65;\r\n --brandDarkBlue-600: #1e285c;\r\n --brandDarkBlue-700: #1c2554;\r\n --brandDarkBlue-800: #161d43;\r\n --brandDarkBlue-900: #0b0f22;\r\n --brandDarkBlue-950: #070914;\r\n\r\n /* brand red color palette */\r\n --brandRed-25: #fffbfa;\r\n --brandRed-50: #fef1f2;\r\n --brandRed-100: #fde3e5;\r\n --brandRed-200: #f9b4ba;\r\n --brandRed-300: #f68e98;\r\n --brandRed-400: #f36976;\r\n --brandRed-500: #e21b2e;\r\n --brandRed-600: #cc1a2a;\r\n --brandRed-700: #b51726;\r\n --brandRed-800: #8c121d;\r\n --brandRed-900: #680d16;\r\n --brandRed-950: #3f080d;\r\n\r\n /* warning color palette */\r\n --warning-25: #fffcf5;\r\n --warning-50: #fffaeb;\r\n --warning-100: #fef0c7;\r\n --warning-200: #fedf89;\r\n --warning-300: #fec84b;\r\n --warning-400: #fdb022;\r\n --warning-500: #f79009;\r\n --warning-600: #dc6803;\r\n --warning-700: #b54708;\r\n --warning-800: #93370d;\r\n --warning-900: #7a2e0e;\r\n --warning-950: #4e1d09;\r\n\r\n /* success color palette */\r\n --success-25: #f6fef9;\r\n --success-50: #ecfdf3;\r\n --success-100: #dcfaeb;\r\n --success-200: #a9efc5;\r\n --success-300: #75e0a7;\r\n --success-400: #47cd89;\r\n --success-500: #17b26a;\r\n --success-600: #079455;\r\n --success-700: #067647;\r\n --success-800: #085d3a;\r\n --success-900: #074d31;\r\n --success-950: #053321;\r\n\r\n /* ------------------------------------------opacity color palette-------------------------------------- */\r\n /* 0% opacity */\r\n /* White */\r\n --white-opacity0: rgba(255, 255, 255, 0);\r\n\r\n /* Gray */\r\n --gray25-opacity0: rgba(249, 250, 251, 0);\r\n --gray900-opacity0: rgba(18, 25, 38, 0);\r\n --gray950-opacity0: rgba(13, 18, 28, 0);\r\n\r\n /* 20% opacity */\r\n /* White */\r\n --white-opacity20: rgba(255, 255, 255, 0.2);\r\n\r\n /* Dark Blue */\r\n --darkBlue200-opacity20: rgba(181, 185, 204, 0.2);\r\n --darkBlue500-opacity20: rgba(33, 44, 101, 0.2);\r\n\r\n /* Gray */\r\n --gray25-opacity20: rgba(249, 250, 251, 0.2);\r\n --gray900-opacity20: rgba(18, 25, 38, 0.2);\r\n --gray950-opacity20: rgba(13, 18, 28, 0.2);\r\n\r\n /* 30% opacity */\r\n --darkBlue200-opacity30: rgba(181, 185, 204, 0.3);\r\n --darkBlue500-opacity30: rgba(33, 44, 101, 0.3);\r\n\r\n /* 40% opacity */\r\n --darkBlue200-opacity40: rgba(181, 185, 204, 0.4);\r\n --darkBlue500-opacity40: rgba(33, 44, 101, 0.4);\r\n\r\n /* 50% opacity */\r\n /* White */\r\n --white-opacity50: rgba(255, 255, 255, 0.5);\r\n\r\n /* Gray */\r\n --gray25-opacity50: rgba(249, 250, 251, 0.5);\r\n --gray900-opacity50: rgba(18, 25, 38, 0.5);\r\n --gray950-opacity50: rgba(13, 18, 28, 0.5);\r\n\r\n /* ------------------------------------------Secondary Color------------------------------------------- */\r\n /* blueLight color palete */\r\n --lightBlue-25: #f5fbff;\r\n --lightBlue-50: #f0f9ff;\r\n --lightBlue-100: #e0f2fe;\r\n --lightBlue-200: #b9e6fe;\r\n --lightBlue-300: #7cd4fd;\r\n --lightBlue-400: #7cd4fd;\r\n --lightBlue-500: #0ba5ec;\r\n --lightBlue-600: #0086c9;\r\n --lightBlue-700: #026aa2;\r\n --lightBlue-800: #065986;\r\n --lightBlue-900: #0b4a6f;\r\n --lightBlue-950: #062c41;\r\n\r\n /* blue color palette */\r\n --blue-25: #ecf5fe;\r\n --blue-50: #e4f0fc;\r\n --blue-100: #c8e0f9;\r\n --blue-200: #9ac7f4;\r\n --blue-300: #6aa9e7;\r\n --blue-400: #378fe6;\r\n --blue-500: #075db2;\r\n --blue-600: #064e94;\r\n --blue-700: #053e77;\r\n --blue-800: #042f59;\r\n --blue-900: #022445;\r\n --blue-950: #021d37;\r\n\r\n /* Purple color palete */\r\n --purple-25: #fafaff;\r\n --purple-50: #f4f3ff;\r\n --purple-100: #ebe9fe;\r\n --purple-200: #d9d6fe;\r\n --purple-300: #bdb4fe;\r\n --purple-400: #9b8afb;\r\n --purple-500: #7a5af8;\r\n --purple-600: #6938ef;\r\n --purple-700: #5925dc;\r\n --purple-800: #4a1fb8;\r\n --purple-900: #3e1c96;\r\n --purple-950: #27115f;\r\n\r\n /* pink color palette */\r\n --pink-25: #fef6fb;\r\n --pink-50: #fdf2fa;\r\n --pink-100: #fce7f6;\r\n --pink-200: #fcceee;\r\n --pink-300: #faa7e0;\r\n --pink-400: #f670c7;\r\n --pink-500: #ee46bc;\r\n --pink-600: #dd2590;\r\n --pink-700: #c11574;\r\n --pink-800: #9e165f;\r\n --pink-900: #851651;\r\n --pink-950: #4e0d30;\r\n\r\n /* -------------------------------------------------Token---------------------------------------------- */\r\n\r\n /* -----------Text Color----------- */\r\n\r\n [data-theme='light'] {\r\n --color-text-bold: var(--gray-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-bold: var(--gray-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text: var(--gray-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text: var(--gray-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-subtle: var(--gray-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-subtle: var(--gray-400);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-disabled: var(--gray-400);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-disabled: var(--gray-500);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-inverse: var(--base-white);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-inverse: var(--base-black);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-brandDarkBlue: var(--brandDarkBlue-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-brandDarkBlue: var(--brandDarkBlue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-brandRed: var(--brandRed-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-brandRed: var(--brandRed-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-selected: var(--blue-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-selected: var(--blue-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-danger-bold: var(--brandRed-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-danger-bold: var(--brandRed-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-danger: var(--brandRed-700);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-danger: var(--brandRed-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-danger-subtle: var(--brandRed-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-danger-subtle: var(--brandRed-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-danger-inverse: var(--base-white);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-danger-inverse: var(--brandRed-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-warning-bold: var(--warning-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-warning-bold: var(--warning-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-warning: var(--warning-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-warning: var(--warning-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-warning-subtle: var(--warning-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-warning-subtle: var(--warning-400);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-success-bold: var(--success-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-success-bold: var(--success-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-success: var(--success-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-success: var(--success-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-success-subtle: var(--success-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-success-subtle: var(--success-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-discovery-bold: var(--lightBlue-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-discovery-bold: var(--lightBlue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-discovery: var(--lightBlue-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-discovery: var(--lightBlue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-discovery-subtle: var(--lightBlue-400);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-discovery-subtle: var(--lightBlue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-information-bold: var(--blue-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-information-bold: var(--blue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-information: var(--blue-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-information: var(--blue-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-information-subtle: var(--blue-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-information-subtle: var(--blue-400);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-purple-bold: var(--purple-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-purple-bold: var(--purple-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-purple: var(--purple-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-purple: var(--purple-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-purple-subtle: var(--purple-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-purple-subtle: var(--purple-400);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-pink-bold: var(--pink-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-pink-bold: var(--pink-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-pink: var(--pink-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-pink: var(--pink-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-pink-subtle: var(--pink-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-pink-subtle: var(--pink-400);\r\n }\r\n\r\n /* --------------Link color--------------- */\r\n\r\n [data-theme='light'] {\r\n --color-link: var(--blue-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-link: var(--blue-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-link-pressed: var(--blue-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-link-pressed: var(--blue-600);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-link-visited: var(--lightBlue-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-link-visited: var(--lightBlue-300);\r\n }\r\n\r\n /* --------------Icon color--------------- */\r\n\r\n [data-theme='light'] {\r\n --color-icon-bold: var(--gray-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-bold: var(--gray-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon: var(--gray-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon: var(--gray-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-subtle: var(--gray-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-subtle: var(--gray-400);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-disabled: var(--gray-400);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-disabled: var(--gray-500);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-inverse: var(--base-white);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-inverse: var(--gray-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-brandDarkBlue: var(--brandDarkBlue-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-brandDarkBlue: var(--brandDarkBlue-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-brandRed: var(--brandRed-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-brandRed: var(--brandRed-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-selected: var(--blue-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-selected: var(--blue-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-danger-bold: var(--brandRed-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-danger-bold: var(--brandRed-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-danger: var(--brandRed-700);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-danger: var(--brandRed-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-danger-inverse: var(--base-white);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-danger-inverse: var(--brandRed-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-warning-bold: var(--warning-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-warning-bold: var(--warning-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-warning: var(--warning-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-warning: var(--warning-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-success-bold: var(--success-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-success-bold: var(--success-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-success: var(--success-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-success: var(--success-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-discovery-bold: var(--lightBlue-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-discovery-bold: var(--lightBlue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-discovery: var(--lightBlue-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-discovery: var(--lightBlue-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-information-bold: var(--blue-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-information-bold: var(--blue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-information: var(--blue-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-information: var(--blue-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-purple-bold: var(--purple-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-purple-bold: var(--purple-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-purple: var(--purple-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-purple: var(--purple-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-pink-bold: var(--pink-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-pink-bold: var(--pink-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-pink: var(--pink-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-pink: var(--pink-300);\r\n }\r\n\r\n /* ----------------Border Color --------------- */\r\n\r\n [data-theme='light'] {\r\n --color-border-bold: var(--gray-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-bold: var(--gray-400);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border: var(--gray-400);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border: var(--gray-500);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-subtle: var(--gray-300);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-subtle: var(--gray-700);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-subtler: var(--gray-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-subtler: var(--gray-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-disabled: var(--gray-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-disabled: var(--gray-700);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-inverse: var(--base-white);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-inverse: var(--gray-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-input: var(--gray-300);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-input: var(--gray-600);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-focus: var(--gray-400);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-focus: var(--blue-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-selected: var(--blue-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-selected: var(--blue-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-brandDarkBlue: var(--brandDarkBlue-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-brandDarkBlue: var(--brandDarkBlue-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-brandRed: var(--brandRed-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-brandRed: var(--brandRed-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-danger-bold: var(--brandRed-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-danger-bold: var(--brandRed-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-danger: var(--brandRed-700);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-danger: var(--brandRed-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-danger-subtle: var(--brandRed-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-danger-subtle: var(--brandRed-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-danger-subtler: var(--brandRed-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-danger-subtler: var(--brandRed-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-warning-bold: var(--warning-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-warning-bold: var(--warning-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-warning: var(--warning-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-warning: var(--warning-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-warning-subtle: var(--warning-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-warning-subtle: var(--warning-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-warning-subtler: var(--warning-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-warning-subtler: var(--warning-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-success-bold: var(--success-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-success-bold: var(--success-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-success: var(--success-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-success: var(--success-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-success-subtle: var(--success-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-success-subtle: var(--success-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-success-subtler: var(--success-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-success-subtler: var(--success-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-discovery-bold: var(--lightBlue-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-discovery-bold: var(--lightBlue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-discovery: var(--lightBlue-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-discovery: var(--lightBlue-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-discovery-subtle: var(--lightBlue-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-discovery-subtle: var(--lightBlue-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-discovery-subtler: var(--lightBlue-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-discovery-subtler: var(--lightBlue-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-information-bold: var(--blue-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-information-bold: var(--blue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-information: var(--blue-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-information: var(--blue-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-information-subtle: var(--blue-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-information-subtle: var(--blue-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-information-subtler: var(--blue-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-information-subtler: var(--blue-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-purple-bold: var(--purple-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-purple-bold: var(--purple-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-purple: var(--purple-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-purple: var(--purple-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-purple-subtle: var(--purple-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-purple-subtle: var(--purple-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-purple-subtler: var(--purple-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-purple-subtler: var(--purple-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-pink-bold: var(--pink-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-pink-bold: var(--pink-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-pink: var(--pink-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-pink: var(--pink-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-pink-subtle: var(--pink-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-pink-subtle: var(--pink-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-pink-subtler: var(--pink-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-pink-subtler: var(--pink-900);\r\n }\r\n\r\n /* Emmanuel Kadiri starts from background color */\r\n\r\n /* ----------------Background Color --------------- */\r\n\r\n [data-theme='light'] {\r\n --color-background-card-bold: var(--gray-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-card-bold: var(--gray-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-card: var(--base-white);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-card: var(--gray-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-input: var(--gray-400);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-input: var(--gray-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-disabled: var(--gray-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-disabled: var(--gray-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-btn-disabled: var(--gray-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-btn-disabled: var(--gray-700);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-selected: var(--blue-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-selected: var(--blue-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-brandDarkblue: var(--brandDarkBlue-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-brandDarkblue: var(--brandDarkBlue-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-brandRed: var(--brandRed-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-brandRed: var(--brandRed-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-brandRed-hover: var(--brandRed-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-brandRed-hover: var(--brandRed-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-brandRed-pressed: var(--brandRed-700);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-brandRed-pressed: var(--brandRed-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-gray-bold: var(--gray-400);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-gray-bold: var(--gray-500);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-gray: var(--gray-300);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-gray: var(--gray-600);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-gray-subtle: var(--gray-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-gray-subtle: var(--gray-700);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-gray-subtler: var(--gray-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-gray-subtler: var(--gray-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-gray-subtlest: var(--gray-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-gray-subtlest: var(--gray-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-danger-bold: var(--brandRed-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-danger-bold: var(--brandRed-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-danger: var(--brandRed-700);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-danger: var(--brandRed-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-danger-subtle: var(--brandRed-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-danger-subtle: var(--brandRed-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-danger-subtler: var(--brandRed-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-danger-subtler: var(--brandRed-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-danger-subtlest: var(--brandRed-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-danger-subtlest: var(--brandRed-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-warning-bold: var(--warning-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-warning-bold: var(--warning-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-warning: var(--warning-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-warning: var(--warning-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-warning-subtle: var(--warning-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-warning-subtle: var(--warning-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-warning-subtler: var(--warning-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-warning-subtler: var(--warning-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-warning-subtlest: var(--warning-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-warning-subtlest: var(--warning-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-success-bold: var(--success-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-success-bold: var(--success-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-success: var(--success-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-success: var(--success-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-success-subtle: var(--success-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-success-subtle: var(--success-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-success-subtler: var(--success-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-success-subtler: var(--success-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-success-subtlest: var(--success-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-success-subtlest: var(--success-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-discovery-bold: var(--lightBlue-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-discovery-bold: var(--lightBlue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-discovery: var(--lightBlue-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-discovery: var(--lightBlue-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-discovery-subtle: var(--lightBlue-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-discovery-subtle: var(--lightBlue-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-discovery-subtler: var(--lightBlue-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-discovery-subtler: var(--lightBlue-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-discovery-subtlest: var(--lightBlue-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-discovery-subtlest: var(--lightBlue-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-information-bold: var(--blue-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-information-bold: var(--blue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-information: var(--blue-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-information: var(--blue-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-information-subtle: var(--blue-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-information-subtle: var(--blue-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-information-subtler: var(--blue-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-information-subtler: var(--blue-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-information-subtlest: var(--blue-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-information-subtlest: var(--blue-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-purple-bold: var(--purple-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-purple-bold: var(--blue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-purple: var(--purple-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-purple: var(--blue-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-purple-subtle: var(--purple-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-purple-subtle: var(--purple-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-purple-subtler: var(--purple-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-purple-subtler: var(--purple-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-purple-subtlest: var(--purple-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-purple-subtlest: var(--purple-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-pink-bold: var(--pink-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-pink-bold: var(--pink-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-pink: var(--pink-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-pink: var(--pink-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-pink-subtle: var(--pink-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-pink-subtle: var(--pink-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-pink-subtler: var(--pink-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-pink-subtler: var(--pink-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-pink-subtlest: var(--purple-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-pink-subtlest: var(--pink-950);\r\n }\r\n\r\n /* ----------------Blanket Color --------------- */\r\n [data-theme='light'] {\r\n --color-blanket: var(--darkBlue500-opacity20);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-blanket: var(--darkBlue200-opacity20);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-blanket-subtle: var(--darkBlue500-opacity30);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-blanket-subtle: var(--darkBlue200-opacity30);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-blanket-subtler: var(--darkBlue500-opacity40);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-blanket-subtler: var(--darkBlue200-opacity40);\r\n }\r\n\r\n /* ----------------Skeleton Color --------------- */\r\n [data-theme='light'] {\r\n --color-skeleton: var(--gray-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-skeleton: var(--gray-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-skeleton-bold: var(--gray-300);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-skeleton-bold: var(--gray-700);\r\n }\r\n\r\n /* ----------------Surface Color --------------- */\r\n [data-theme='light'] {\r\n --color-surface-bold: var(--gray-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-surface-bold: var(--gray-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-surface: var(--base-white);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-surface: var(--gray-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-surface-hovered: var(--gray-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-surface-hovered: var(--gray-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-surface-pressed: var(--gray-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-surface-pressed: var(--gray-700);\r\n }\r\n\r\n /* ----------------Transparent Color --------------- */\r\n [data-theme='light'] {\r\n --color-surface-transparent50: var(--white-opacity50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-surface-transparent50: var(--gray900-opacity50);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-surface-transparent20: var(--white-opacity20);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-surface-transparent20: var(--gray900-opacity20);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-surface-transparent-full: var(--white-opacity0);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-surface-transparent-full: var(--gray900-opacity0);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-surface-bold-transparent50: var(--gray25-opacity50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-surface-bold-transparent50: var(--gray950-opacity50);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-surface-bold-transparent20: var(--gray25-opacity20);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-surface-bold-transparent20: var(--gray950-opacity20);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-surface-bold-transparent-full: var(--gray25-opacity0);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-surface-bold-transparent-full: var(--gray950-opacity0);\r\n }\r\n}\r\n\r\n/* -----------------Shadow and Blur----------------- */\r\n:root {\r\n --shadow-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\r\n --shadow-sm: 0px 1px 3px 0px rgba(16, 24, 40, 0.1), 0px 1px 2px 0px rgba(16, 24, 40, 0.06);\r\n --shadow-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);\r\n --shadow-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);\r\n --shadow-xl: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);\r\n --shadow-2xl: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);\r\n --shadow-3xl: 0px 32px 64px -12px rgba(16, 24, 40, 0.14);\r\n\r\n --blur-sm: blur(4px);\r\n --blur-md: blur(8px);\r\n --blur-lg: blur(12px);\r\n --blur-xl: blur(20px);\r\n}\r\n\r\n.shadow-xs {\r\n box-shadow: var(--shadow-xs);\r\n}\r\n\r\n.shadow-sm {\r\n box-shadow: var(--shadow-sm);\r\n}\r\n\r\n.shadow-md {\r\n box-shadow: var(--shadow-md);\r\n}\r\n\r\n.shadow-lg {\r\n box-shadow: var(--shadow-lg);\r\n}\r\n\r\n.shadow-xl {\r\n box-shadow: var(--shadow-xl);\r\n}\r\n\r\n.shadow-2xl {\r\n box-shadow: var(--shadow-2xl);\r\n}\r\n\r\n.shadow-3xl {\r\n box-shadow: var(--shadow-3xl);\r\n}\r\n\r\n.blur-sm {\r\n backdrop-filter: var(--blur-sm);\r\n}\r\n\r\n.blur-md {\r\n backdrop-filter: var(--blur-md);\r\n}\r\n\r\n.blur-lg {\r\n backdrop-filter: var(--blur-lg);\r\n}\r\n\r\n.blur-xl {\r\n backdrop-filter: var(--blur-xl);\r\n}\r\n\r\n/* -----------------Gradients----------------- */\r\n:root {\r\n /* Gray Gradients */\r\n /* --gray-gradient-600: linear-gradient(); */\r\n --gradient-gray-600-to-500-90d: linear-gradient(90deg, var(--gray-600), var(--gray-500));\r\n --gradient-gray-700-to-600-45d: linear-gradient(45deg, var(--gray-700), var(--gray-600));\r\n --gradient-gray-800-to-600-45d: linear-gradient(45deg, var(--gray-800), var(--gray-600));\r\n --gradient-gray-800-to-600-90d: linear-gradient(90deg, var(--gray-800), var(--gray-600));\r\n --gradient-gray-800-to-700265-d: linear-gradient(26.5deg, var(--gray-800), var(--gray-700));\r\n --gradient-gray-900-to-600-45d: linear-gradient(45deg, var(--gray-900), var(--gray-600));\r\n\r\n /* Brand Dark Blue Gradients */\r\n --gradient-darkBlue-500-to-400-90d: linear-gradient(90deg, var(--brandDarkBlue-500), var(--brandDarkBlue-400));\r\n --gradient-darkBlue-700-to-500-45d: linear-gradient(45deg, var(--brandDarkBlue-700), var(--brandDarkBlue-500));\r\n --gradient-darkBlue-700-to-400-45d: linear-gradient(45deg, var(--brandDarkBlue-700), var(--brandDarkBlue-400));\r\n --gradient-darkBlue-800-to-500-90d: linear-gradient(90deg, var(--brandDarkBlue-800), var(--brandDarkBlue-500));\r\n --gradient-darkBlue-800-to-600265-d: linear-gradient(26.5deg, var(--brandDarkBlue-800), var(--brandDarkBlue-600));\r\n --gradient-darkBlue-900-to-600-45d: linear-gradient(45deg, var(--brandDarkBlue-900), var(--brandDarkBlue-600));\r\n\r\n /* Brand Red Gradients */\r\n --gradient-red-500-to-400-90d: linear-gradient(90deg, var(--brandRed-600), var(--brandRed-400));\r\n --gradient-red-700-to-500-45d: linear-gradient(45deg, var(--brandRed-700), var(--brandRed-500));\r\n --gradient-red-700-to-400-45d: linear-gradient(45deg, var(--brandRed-700), var(--brandRed-400));\r\n --gradient-red-800-to-500-90d: linear-gradient(90deg, var(--brandRed-800), var(--brandRed-500));\r\n --gradient-red-800-to-600265-d: linear-gradient(26.5deg, var(--brandRed-800), var(--brandRed-600));\r\n --gradient-red-900-to-600-45d: linear-gradient(45deg, var(--brandRed-900), var(--brandRed-600));\r\n\r\n /* Blue Gradients */\r\n --gradient-blue-500-to-400-90d: linear-gradient(90deg, var(--blue-500), var(--blue-400));\r\n --gradient-blue-700-to-500-45d: linear-gradient(45deg, var(--blue-700), var(--blue-500));\r\n --gradient-blue-700-to-400-45d: linear-gradient(45deg, var(--blue-700), var(--blue-400));\r\n --gradient-blue-800-to-500-90d: linear-gradient(90deg, var(--blue-800), var(--blue-500));\r\n --gradient-blue-800-to-600265-d: linear-gradient(26.5deg, var(--blue-800), var(--blue-600));\r\n --gradient-blue-900-to-600-45d: linear-gradient(45deg, var(--blue-900), var(--blue-600));\r\n}\r\n\r\n.gradient-gray-600-to-500-90d {\r\n background: var(--gradient-gray-600-to-500-90d);\r\n}\r\n\r\n.gradient-gray-700-to-600-45d {\r\n background: var(--gradient-gray-700-to-600-45d);\r\n}\r\n\r\n.gradient-gray-800-to-600-45d {\r\n background: var(--gradient-gray-800-to-600-45d);\r\n}\r\n\r\n.gradient-gray-800-to-600-90d {\r\n background: var(--gradient-gray-800-to-600-90d);\r\n}\r\n\r\n.gradient-gray-800-to-700265-d {\r\n background: var(--gradient-gray-800-to-700265-d);\r\n}\r\n\r\n.gradient-gray-900-to-600-45d {\r\n background: var(--gradient-gray-900-to-600-45d);\r\n}\r\n\r\n.gradient-darkBlue-500-to-400-90d {\r\n background: var(--gradient-darkBlue-500-to-400-90d);\r\n}\r\n\r\n.gradient-darkBlue-700-to-500-45d {\r\n background: var(--gradient-darkBlue-700-to-500-45d);\r\n}\r\n\r\n.gradient-darkBlue-700-to-400-45d {\r\n background: var(--gradient-darkBlue-700-to-400-45d);\r\n}\r\n\r\n.gradient-darkBlue-800-to-500-90d {\r\n background: var(--gradient-darkBlue-800-to-500-90d);\r\n}\r\n\r\n.gradient-darkBlue-800-to-600265-d {\r\n background: var(--gradient-darkBlue-800-to-600265-d);\r\n}\r\n\r\n.gradient-darkBlue-900-to-600-45d {\r\n background: var(--gradient-darkBlue-900-to-600-45d);\r\n}\r\n\r\n.gradient-red-500-to-400-90d {\r\n background: var(--gradient-red-500-to-400-90d);\r\n}\r\n\r\n.gradient-red-700-to-500-45d {\r\n background: var(--gradient-red-700-to-500-45d);\r\n}\r\n\r\n.gradient-red-700-to-400-45d {\r\n background: var(--gradient-red-700-to-400-45d);\r\n}\r\n\r\n.gradient-red-800-to-500-90d {\r\n background: var(--gradient-red-800-to-500-90d);\r\n}\r\n\r\n.gradient-red-800-to-600265-d {\r\n background: var(--gradient-red-800-to-600265-d);\r\n}\r\n\r\n.gradient-red-900-to-600-45d {\r\n background: var(--gradient-red-900-to-600-45d);\r\n}\r\n\r\n.gradient-blue-500-to-400-90d {\r\n background: var(--gradient-blue-500-to-400-90d);\r\n}\r\n\r\n.gradient-blue-700-to-500-45d {\r\n background: var(--gradient-blue-700-to-500-45d);\r\n}\r\n\r\n.gradient-blue-700-to-400-45d {\r\n background: var(--gradient-blue-700-to-400-45d);\r\n}\r\n\r\n.gradient-blue-800-to-500-90d {\r\n background: var(--gradient-blue-800-to-500-90d);\r\n}\r\n\r\n.gradient-blue-800-to-600265-d {\r\n background: var(--gradient-blue-800-to-600265-d);\r\n}\r\n\r\n.gradient-blue-900-to-600-45d {\r\n background: var(--gradient-blue-900-to-600-45d);\r\n}\r\n\r\n/* Spacing Styles */\r\n:root {\r\n /* Positive spacing */\r\n --spacing-none: 0rem;\r\n --spacing-half: 0.125rem;\r\n --spacing-1: 0.25rem;\r\n --spacing-2: 0.5rem;\r\n --spacing-3: 0.75rem;\r\n --spacing-4: 1rem;\r\n --spacing-5: 1.25rem;\r\n --spacing-6: 1.5rem;\r\n --spacing-7: 2rem;\r\n --spacing-8: 2.5rem;\r\n --spacing-12: 3rem;\r\n --spacing-16: 4rem;\r\n --spacing-20: 5rem;\r\n --spacing-24: 6rem;\r\n --spacing-32: 8rem;\r\n --spacing-40: 10rem;\r\n --spacing-48: 12rem;\r\n --spacing-56: 14rem;\r\n --spacing-64: 16rem;\r\n\r\n /* Negative spacing */\r\n\r\n --spacing-negative-half: -0.125rem;\r\n --spacing-negative-1: -0.25rem;\r\n --spacing-negative-2: -0.5rem;\r\n --spacing-negative-3: -0.75rem;\r\n --spacing-negative-4: -1rem;\r\n --spacing-negative-5: -1.25rem;\r\n --spacing-negative-6: -1.5rem;\r\n --spacing-negative-7: -2rem;\r\n\r\n /* Radius */\r\n --rounded-none: 0rem;\r\n --rounded-xs: 0.25rem;\r\n --rounded-sm: 0.5rem;\r\n --rounded-md: 0.75rem;\r\n --rounded-lg: 1rem;\r\n --rounded-xl: 1.5rem;\r\n --rounded-2xl: 2rem;\r\n --rounded-full: 62.438rem;\r\n}\r\n\r\n/* Typography Styles */\r\n@import url('https://fonts.googleapis.com/css2?family=Sora&display=swap');\r\n\r\n:root {\r\n /* Font Sizes */\r\n --font-size-d-2xl: 4.5rem;\r\n --font-size-d-xl: 3.75rem;\r\n --font-size-d-lg: 3rem;\r\n --font-size-d-md: 2.25rem;\r\n --font-size-d-sm: 1.875rem;\r\n --font-size-d-xs: 1.5rem;\r\n --font-size-t-xl: 1.25rem;\r\n --font-size-t-lg: 1.125rem;\r\n --font-size-t-md: 1rem;\r\n --font-size-t-sm: 0.875rem;\r\n --font-size-t-xs: 0.75rem;\r\n --font-size-t-xxs: 0.625rem;\r\n\r\n /* Font Weights */\r\n --font-weight-bold: 700;\r\n --font-weight-semi-bold: 600;\r\n --font-weight-medium: 500;\r\n --font-weight-regular: 400;\r\n\r\n /* Line Heights */\r\n --font-line-height-d-2xl: 5rem;\r\n --font-line-height-d-xl: 4.25rem;\r\n --font-line-height-d-lg: 3.75rem;\r\n --font-line-height-d-md: 2.75rem;\r\n --font-line-height-d-sm: 2.375rem;\r\n --font-line-height-d-xs: 2rem;\r\n --font-line-height-t-xl: 2rem;\r\n --font-line-height-t-lg: 1.875rem;\r\n --font-line-height-t-md: 1.688rem;\r\n --font-line-height-t-sm: 1.5rem;\r\n --font-line-height-t-xs: 1.25rem;\r\n --font-line-height-t-xxs: 1.125rem;\r\n\r\n /* Letter Spacings */\r\n --font-letter-spacing-d-2xl: -0.09rem;\r\n --font-letter-spacing-d-xl: -0.075rem;\r\n --font-letter-spacing-d-lg: -0.075rem;\r\n --font-letter-spacing-d-md: -0.045rem;\r\n --font-letter-spacing-d-sm: 0;\r\n --font-letter-spacing-d-xs: 0;\r\n --font-letter-spacing-d-xxs: 0;\r\n\r\n /* Font Families */\r\n --font-family-title: 'Sora';\r\n --font-family-body: 'Sora';\r\n}\r\n\r\n/* Media queries for medium screens (tablet) */\r\n@media (max-width: 1199px) {\r\n :root {\r\n /* Font Sizes */\r\n --font-size-d-2xl: 3.75rem;\r\n --font-size-d-xl: 3.5rem;\r\n --font-size-d-lg: 2.75rem;\r\n --font-size-d-md: 2.25rem;\r\n --font-size-d-sm: 1.875rem;\r\n --font-size-d-xs: 1.5rem;\r\n\r\n /* Line Heights */\r\n --font-line-height-d-2xl: 4.25rem;\r\n --font-line-height-d-xl: 3.75rem;\r\n --font-line-height-d-lg: 2.4375rem;\r\n --font-line-height-d-md: 2.75rem;\r\n --font-line-height-d-sm: 2.375rem;\r\n --font-line-height-d-xs: 2rem;\r\n\r\n /* Letter Spacings */\r\n --font-letter-spacing-2xl: -0.075rem;\r\n --font-letter-spacing-xl: -0.065rem;\r\n --font-letter-spacing-lg: -0.045rem;\r\n --font-letter-spacing-md: -0.045rem;\r\n --font-letter-spacing-sm: 0rem;\r\n --font-letter-spacing-xs: 0rem;\r\n }\r\n}\r\n\r\n/* Media queries for smaller screens (mobile) */\r\n@media (max-width: 743px) {\r\n :root {\r\n /* Font Sizes */\r\n --font-size-d-2xl: 3rem;\r\n --font-size-d-xl: 2.5rem;\r\n --font-size-d-lg: 2rem;\r\n --font-size-d-md: 1.75rem;\r\n --font-size-d-sm: 1.5rem;\r\n --font-size-d-xs: 1.25rem;\r\n\r\n /* Line Heights */\r\n --font-line-height-d-2xl: 3.375rem;\r\n --font-line-height-d-xl: 2.875rem;\r\n --font-line-height-d-lg: 2.5rem;\r\n --font-line-height-d-md: 2.1375rem;\r\n --font-line-height-d-sm: 2rem;\r\n --font-line-height-d-xs: 1.75rem;\r\n\r\n /* Letter Spacings */\r\n --font-letter-spacing-2xl: -0.06rem;\r\n --font-letter-spacing-xl: -0.05rem;\r\n --font-letter-spacing-lg: -0.045rem;\r\n --font-letter-spacing-md: 0rem;\r\n --font-letter-spacing-sm: 0rem;\r\n --font-letter-spacing-xs: 0rem;\r\n }\r\n}\r\n\r\n.display-2xl-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-2xl);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-d-2xl);\r\n letter-spacing: var(--font-letter-spacing-d-2xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-2xl-bold::before,\r\n.display-2xl-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-2xl-bold::before {\r\n margin-bottom: -0.135em;\r\n}\r\n\r\n.display-2xl-bold::after {\r\n margin-top: -0.205em;\r\n}\r\n\r\n.display-2xl-semi-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-2xl);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-d-2xl);\r\n letter-spacing: var(--font-letter-spacing-d-2xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-2xl-semi-bold::before,\r\n.display-2xl-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-2xl-semi-bold::before {\r\n margin-bottom: -0.135em;\r\n}\r\n\r\n.display-2xl-semi-bold::after {\r\n margin-top: -0.205em;\r\n}\r\n\r\n.display-xl-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-xl);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-d-xl);\r\n letter-spacing: var(--font-letter-spacing-d-xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-xl-bold::before,\r\n.display-xl-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-xl-bold::before {\r\n margin-bottom: -0.145em;\r\n}\r\n\r\n.display-xl-bold::after {\r\n margin-top: -0.215em;\r\n}\r\n\r\n.display-xl-semi-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-xl);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-d-xl);\r\n letter-spacing: var(--font-letter-spacing-d-xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-xl-semi-bold::before,\r\n.display-xl-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-xl-semi-bold::before {\r\n margin-bottom: -0.145em;\r\n}\r\n\r\n.display-xl-semi-bold::after {\r\n margin-top: -0.215em;\r\n}\r\n\r\n.display-lg-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-lg);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-d-lg);\r\n letter-spacing: var(--font-letter-spacing-d-lg);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-lg-bold::before,\r\n.display-lg-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-lg-bold::before {\r\n margin-bottom: -0.015em;\r\n}\r\n\r\n.display-lg-bold::after {\r\n margin-top: -0.095em;\r\n}\r\n\r\n.display-lg-semi-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-lg);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-d-lg);\r\n letter-spacing: var(--font-letter-spacing-d-lg);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-lg-semi-bold::before,\r\n.display-lg-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-lg-semi-bold::before {\r\n margin-bottom: -0.015em;\r\n}\r\n\r\n.display-lg-semi-bold::after {\r\n margin-top: -0.095em;\r\n}\r\n\r\n.display-md-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-md);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-d-md);\r\n letter-spacing: var(--font-letter-spacing-d-md);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-md-bold::before,\r\n.display-md-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-md-bold::before {\r\n margin-bottom: -0.195em;\r\n}\r\n\r\n.display-md-bold::after {\r\n margin-top: -0.255em;\r\n}\r\n\r\n.display-md-semi-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-md);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-d-md);\r\n letter-spacing: var(--font-letter-spacing-d-md);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-md-semi-bold::before,\r\n.display-md-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-md-semi-bold::before {\r\n margin-bottom: -0.195em;\r\n}\r\n\r\n.display-md-semi-bold::after {\r\n margin-top: -0.255em;\r\n}\r\n\r\n.display-sm-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-sm);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-d-sm);\r\n letter-spacing: var(--font-letter-spacing-d-sm);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-sm-bold::before,\r\n.display-sm-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-sm-bold::before {\r\n margin-bottom: -0.195em;\r\n}\r\n\r\n.display-sm-bold::after {\r\n margin-top: -0.255em;\r\n}\r\n\r\n.display-sm-semi-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-sm);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-d-sm);\r\n letter-spacing: var(--font-letter-spacing-d-sm);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-sm-semi-bold::before,\r\n.display-sm-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-sm-semi-bold::before {\r\n margin-bottom: -0.195em;\r\n}\r\n\r\n.display-sm-semi-bold::after {\r\n margin-top: -0.255em;\r\n}\r\n\r\n.display-xs-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-xs);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-d-xs);\r\n letter-spacing: var(--font-letter-spacing-d-xs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-xs-bold::before,\r\n.display-xs-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-xs-bold::before {\r\n margin-bottom: -0.199em;\r\n}\r\n\r\n.display-xs-bold::after {\r\n margin-top: -0.195em; /* Continue from here */\r\n}\r\n\r\n.display-xs-semi-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-xs);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-d-xs);\r\n letter-spacing: var(--font-letter-spacing-d-xs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-xs-semi-bold::before,\r\n.display-xs-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-xs-semi-bold::before {\r\n margin-bottom: -0.259em;\r\n}\r\n\r\n.display-xs-semi-bold::after {\r\n margin-top: -0.295em;\r\n}\r\n\r\n.text-xl-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xl);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-t-xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xl-bold::before,\r\n.text-xl-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xl-bold::before {\r\n margin-bottom: -0.329em;\r\n}\r\n\r\n.text-xl-bold::after {\r\n margin-top: -0.359em;\r\n}\r\n\r\n.text-xl-semi-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xl);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-t-xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xl-semi-bold::before,\r\n.text-xl-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xl-semi-bold::before {\r\n margin-bottom: -0.329em;\r\n}\r\n\r\n.text-xl-semi-bold::after {\r\n margin-top: -0.359em;\r\n}\r\n\r\n.text-xl-medium {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xl);\r\n font-weight: var(--font-weight-medium);\r\n line-height: var(--font-line-height-t-xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xl-medium::before,\r\n.text-xl-medium::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xl-medium::before {\r\n margin-bottom: -0.339em;\r\n}\r\n\r\n.text-xl-medium::after {\r\n margin-top: -0.399em;\r\n}\r\n\r\n.text-xl-regular {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xl);\r\n font-weight: var(--font-weight-regular);\r\n line-height: var(--font-line-height-t-xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xl-regular::before,\r\n.text-xl-regular::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xl-regular::before {\r\n margin-bottom: -0.339em;\r\n}\r\n\r\n.text-xl-regular::after {\r\n margin-top: -0.399em;\r\n}\r\n\r\n.text-lg-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-lg);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-t-lg);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-lg-bold::before,\r\n.text-lg-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-lg-bold::before {\r\n margin-bottom: -0.339em;\r\n}\r\n\r\n.text-lg-bold::after {\r\n margin-top: -0.399em;\r\n}\r\n\r\n.text-lg-semi-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-lg);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-t-lg);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-lg-semi-bold::before,\r\n.text-lg-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-lg-semi-bold::before {\r\n margin-bottom: -0.339em;\r\n}\r\n\r\n.text-lg-semi-bold::after {\r\n margin-top: -0.399em;\r\n}\r\n\r\n.text-lg-medium {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-lg);\r\n font-weight: var(--font-weight-medium);\r\n line-height: var(--font-line-height-t-lg);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-lg-medium::before,\r\n.text-lg-medium::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-lg-medium::before {\r\n margin-bottom: -0.349em;\r\n}\r\n\r\n.text-lg-medium::after {\r\n margin-top: -0.389em;\r\n}\r\n\r\n.text-lg-regular {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-lg);\r\n font-weight: var(--font-weight-regular);\r\n line-height: var(--font-line-height-t-lg);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-lg-regular::before,\r\n.text-lg-regular::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-lg-regular::before {\r\n margin-bottom: -0.349em;\r\n}\r\n\r\n.text-lg-regular::after {\r\n margin-top: -0.389em;\r\n}\r\n\r\n.text-md-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-md);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-t-md);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-md-bold::before,\r\n.text-md-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-md-bold::before {\r\n margin-bottom: -0.349em;\r\n}\r\n\r\n.text-md-bold::after {\r\n margin-top: -0.389em;\r\n}\r\n\r\n.text-md-semi-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-md);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-t-md);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-md-semi-bold::before,\r\n.text-md-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-md-semi-bold::before {\r\n margin-bottom: -0.349em;\r\n}\r\n\r\n.text-md-semi-bold::after {\r\n margin-top: -0.389em;\r\n}\r\n\r\n.text-md-medium {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-md);\r\n font-weight: var(--font-weight-medium);\r\n line-height: var(--font-line-height-t-md);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-md-medium::before,\r\n.text-md-medium::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-md-medium::before {\r\n margin-bottom: -0.349em;\r\n}\r\n\r\n.text-md-medium::after {\r\n margin-top: -0.389em;\r\n}\r\n\r\n.text-md-regular {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-md);\r\n font-weight: var(--font-weight-regular);\r\n line-height: var(--font-line-height-t-md);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-md-regular::before,\r\n.text-md-regular::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-md-regular::before {\r\n margin-bottom: -0.349em;\r\n}\r\n\r\n.text-md-regular::after {\r\n margin-top: -0.389em;\r\n}\r\n\r\n.text-sm-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-sm);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-t-sm);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-sm-bold::before,\r\n.text-sm-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-sm-bold::before {\r\n margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-bold::after {\r\n margin-top: -0.349em;\r\n}\r\n\r\n.text-sm-semi-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-sm);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-t-sm);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-sm-semi-bold::before,\r\n.text-sm-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-sm-semi-bold::before {\r\n margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-semi-bold::after {\r\n margin-top: -0.349em;\r\n}\r\n\r\n.text-sm-medium {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-sm);\r\n font-weight: var(--font-weight-medium);\r\n line-height: var(--font-line-height-t-sm);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n position: relative;\r\n display: inline-block;\r\n}\r\n\r\n.text-sm-medium::before,\r\n.text-sm-medium::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-sm-medium::before {\r\n margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-medium::after {\r\n margin-top: -0.299em;\r\n}\r\n\r\n.text-sm-regular {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-sm);\r\n font-weight: var(--font-weight-regular);\r\n line-height: var(--font-line-height-t-sm);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n position: relative;\r\n display: inline-block;\r\n}\r\n\r\n.text-sm-regular::before,\r\n.text-sm-regular::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-sm-regular::before {\r\n margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-regular::after {\r\n margin-top: -0.299em;\r\n}\r\n\r\n.text-xs-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xs);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-t-xs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xs-bold::before,\r\n.text-xs-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xs-bold::before {\r\n margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xs-bold::after {\r\n margin-top: -0.416em;\r\n}\r\n\r\n.text-xs-semi-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xs);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-t-xs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xs-semi-bold::before,\r\n.text-xs-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xs-semi-bold::before {\r\n margin-bottom: -0.321em;\r\n}\r\n\r\n.text-xs-semi-bold::after {\r\n margin-top: -0.416em;\r\n}\r\n\r\n.text-xs-medium {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xs);\r\n font-weight: var(--font-weight-medium);\r\n line-height: var(--font-line-height-t-xs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xs-medium::before,\r\n.text-xs-medium::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xs-medium::before {\r\n margin-bottom: -0.285em;\r\n}\r\n\r\n.text-xs-medium::after {\r\n margin-top: -0.396em;\r\n}\r\n\r\n.text-xs-regular {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xs);\r\n font-weight: var(--font-weight-regular);\r\n line-height: var(--font-line-height-t-xs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xs-regular::before,\r\n.text-xs-regular::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xs-regular::before {\r\n margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xs-regular::after {\r\n margin-top: -0.396em;\r\n}\r\n\r\n.text-xxs-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xxs);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-t-xxs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xxs-bold::before,\r\n.text-xxs-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xxs-bold::before {\r\n margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-bold::after {\r\n margin-top: -0.416em;\r\n}\r\n\r\n.text-xxs-semi-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xxs);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-t-xxs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xxs-semi-bold::before,\r\n.text-xxs-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xxs-semi-bold::before {\r\n margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-semi-bold::after {\r\n margin-top: -0.416em;\r\n}\r\n\r\n.text-xxs-medium {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xxs);\r\n font-weight: var(--font-weight-medium);\r\n line-height: var(--font-line-height-t-xxs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xxs-medium::before,\r\n.text-xxs-medium::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xxs-medium::before {\r\n margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-medium::after {\r\n margin-top: -0.416em;\r\n}\r\n\r\n.text-xxs-regular {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xxs);\r\n font-weight: var(--font-weight-regular);\r\n line-height: var(--font-line-height-t-xxs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xxs-regular::before,\r\n.text-xxs-regular::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xxs-regular::before {\r\n margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-regular::after {\r\n margin-top: -0.416em;\r\n}\r\n\r\n/* Button slot styles */\r\n/* .slotted_button_text.primary {\r\n color: var(--color-text-inverse, #ffffff) !important;\r\n}\r\n\r\n.slotted_button_text.secondary_gray {\r\n color: var(--color-text, #4b5565) !important;\r\n}\r\n\r\n.slotted_button_text.secondary_color {\r\n color: var(--color-text-brandRed, #e21b2e) !important;\r\n}\r\n\r\n.slotted_button_text.tertiary_gray {\r\n color: var(--color-text, #4b5565) !important;\r\n}\r\n\r\n.slotted_button_text.tertiary_color {\r\n color: var(--color-text-brandRed, #e21b2e) !important;\r\n}\r\n\r\n.slotted_button_text.link_gray {\r\n color: var(--color-text, #4b5565) !important;\r\n}\r\n\r\n.slotted_button_text.link_color {\r\n color: var(--color-link, #075db2) !important;\r\n}\r\n\r\n.slotted_button_text.primary.destructive {\r\n color: var(--color-text-inverse, #ffffff) !important;\r\n}\r\n\r\n#slotted_button_text.primary.disabled,\r\n#slotted_button_text.secondary_gray.disabled,\r\n#slotted_button_text.secondary_color.disabled,\r\n#slotted_button_text.tertiary_gray.disabled,\r\n#slotted_button_text.tertiary_color.disabled,\r\n#slotted_button_text.link_gray.disabled,\r\n#slotted_button_text.link_color.disabled {\r\n color: var(--color-text-disabled, #9aa4b2) !important;\r\n}\r\n\r\n#slotted_button_text.secondary_gray.default.destructive,\r\n#slotted_button_text.secondary_color.default.destructive,\r\n#slotted_button_text.tertiary_gray.default.destructive,\r\n#slotted_button_text.tertiary_color.default.destructive,\r\n#slotted_button_text.link_gray.default.destructive,\r\n#slotted_button_text.link_color.default.destructive {\r\n color: var(--color-text-danger, #b51726) !important;\r\n} */\r\n\r\n.overall_container {\r\n width: 100%;\r\n display: flex;\r\n justify-content: center;\r\n}\r\n\r\n.empty_state_wrapper {\r\n position: relative;\r\n display: flex;\r\n width: 22rem;\r\n flex-direction: column;\r\n align-items: center;\r\n flex-shrink: 0;\r\n}\r\n\r\n.empty_state_wrapper.sm {\r\n gap: var(--spacing-6);\r\n}\r\n\r\n.empty_state_wrapper.md,\r\n.empty_state_wrapper.lg {\r\n gap: var(--spacing-7);\r\n}\r\n\r\n.pattern {\r\n position: absolute;\r\n top: -10rem;\r\n left: -4rem;\r\n z-index: -1;\r\n}\r\n\r\n.pattern.file_type_icon{\r\n top: -8rem;\r\n}\r\n\r\n.top {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n align-self: stretch;\r\n}\r\n\r\n.top.sm {\r\n gap: var(--spacing-4);\r\n}\r\n\r\n.top.md,\r\n.top.lg {\r\n gap: var(--spacing-5);\r\n}\r\n\r\n.file_type_icon_div {\r\n display: flex;\r\n padding: var(--spacing-7);\r\n align-items: flex-start;\r\n border-radius: 12.5rem;\r\n background: linear-gradient(180deg, var(--color-background-gray-subtler, #EEF2F6) 0%, var(--color-background-gray-subtlest, #F6F8FA) 100%);\r\n}\r\n\r\n.text_wrapper {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: var(--spacing-4);\r\n align-self: stretch;\r\n text-align: center;\r\n}\r\n\r\n.heading {\r\n color: var(--color-text-bold, #202939);\r\n}\r\n\r\n.supporting_text {\r\n color: var(--color-text, #4b5565);\r\n}\r\n\r\n.actions {\r\n display: flex;\r\n gap: var(--spacing-3);\r\n flex: 1 0 0;\r\n width: 100%;\r\n}\r\n\r\n.btn {\r\n width: 100%;\r\n}\r\n";
|
|
3985
|
+
|
|
3986
|
+
const GbEmptyState = class {
|
|
3987
|
+
constructor(hostRef) {
|
|
3988
|
+
registerInstance(this, hostRef);
|
|
3989
|
+
this.primaryButtonClicked = createEvent(this, "primaryButtonClicked");
|
|
3990
|
+
this.secondaryButtonClicked = createEvent(this, "secondaryButtonClicked");
|
|
3991
|
+
this.size = 'sm';
|
|
3992
|
+
this.icon = 'illustration';
|
|
3993
|
+
this.color = 'gray';
|
|
3994
|
+
this.theme = 'system';
|
|
3995
|
+
this.illustrationIcon = '';
|
|
3996
|
+
this.background = true;
|
|
3997
|
+
this.backgroundType = 'grid';
|
|
3998
|
+
this.primaryButtonText = '';
|
|
3999
|
+
this.secondaryButtonText = '';
|
|
4000
|
+
this.primaryButtonState = 'default';
|
|
4001
|
+
this.primaryButtonIconLeadingSwap = '';
|
|
4002
|
+
this.isDarkTheme = false;
|
|
4003
|
+
this.mainText = '';
|
|
4004
|
+
this.supportingText = '';
|
|
4005
|
+
this.fileStyle = 'solid';
|
|
4006
|
+
this.fileType = 'pdf';
|
|
4007
|
+
this.featuredIconSwap = '';
|
|
4008
|
+
}
|
|
4009
|
+
onPrimaryButtonClicked() {
|
|
4010
|
+
this.primaryButtonClicked.emit();
|
|
4011
|
+
}
|
|
4012
|
+
onSecondaryButtonClicked() {
|
|
4013
|
+
this.secondaryButtonClicked.emit();
|
|
4014
|
+
}
|
|
4015
|
+
changeTheme() {
|
|
4016
|
+
if (this.theme === 'system') {
|
|
4017
|
+
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
|
4018
|
+
this.isDarkTheme = true;
|
|
4019
|
+
}
|
|
4020
|
+
else {
|
|
4021
|
+
this.isDarkTheme = false;
|
|
4022
|
+
}
|
|
4023
|
+
}
|
|
4024
|
+
else if (this.theme === 'light') {
|
|
4025
|
+
this.isDarkTheme = false;
|
|
4026
|
+
}
|
|
4027
|
+
else if (this.theme === 'dark') {
|
|
4028
|
+
this.isDarkTheme = true;
|
|
4029
|
+
}
|
|
4030
|
+
}
|
|
4031
|
+
componentWillLoad() {
|
|
4032
|
+
this.changeTheme();
|
|
4033
|
+
}
|
|
4034
|
+
render() {
|
|
4035
|
+
return (h("div", { key: 'cf4b9c68ace7d00e081d47125fbbfcc51cfc5461', class: "overall_container" }, h("div", { key: '6e7d3a2fd93f75c988ebbe72013e95367b031b27', class: `empty_state_wrapper ${this.size}` }, h("div", { key: '6494bb1d5d68ec0a6027c75660a589a4cd986a86', class: "pattern" }), this.background && h("gb-pattern", { key: '08307a03941796a58de1d24132c43d3a646f5998', type: this.backgroundType, theme: this.theme, class: `pattern ${this.icon}` }), h("div", { key: '62a71e14e660bcfa9ab2e63fb4030930d4360926', class: `top ${this.size}` }, this.icon === 'featured_icon' && h("gb-featured-icon", { key: '7ffefd6c111520117f193b600278e490ab7feb11', size: "lg", icon: this.featuredIconSwap }), this.icon === 'illustration' && (h("gb-illustration", { key: 'a70d404987cf2bdad5e125eb7b908aa301945969', size: this.size, color: this.color, "illustration-style": this.illustrationStyle, "illustration-icon": this.illustrationIcon })), this.icon === 'file_type_icon' && (h("div", { key: 'c6fdeb8871c8f0f0d528d31ae996b5e58c727f7e', class: "file_type_icon_div" }, h("gb-file-type-icon", { key: 'd08c0b92e85f0af7751f5070e2e55b3da791b9a0', "file-style": this.fileStyle, "file-type": this.fileType }))), h("div", { key: '8cb614d424c13fe659f1ee2116936471bdf75400', class: "text_wrapper" }, h("p", { key: 'fef2955d8fb772f80c667ec81e1265256ce8feb4', class: "heading text-md-semi-bold" }, this.mainText), h("p", { key: '47889710d16e33ac73121620f61ed3e75f1c3536', class: "supporting_text text-sm-regular" }, this.supportingText))), h("div", { key: '323452ebd0998f707ad60cadb25cbd57fad2fcda', class: "actions" }, this.secondaryButtonText && (h("div", { key: 'fc2b0cc070b5623ab1750aec5f822d8806f5d5d9', class: "btn" }, h("gb-button", { key: 'bd180714eea6d0c69ea3e2ac9014a9c5dc16f683', size: "lg", hierarchy: "secondary_gray", icon: "default", onClick: () => this.onSecondaryButtonClicked() }, h("p", { key: 'cc1ca9201b36a5f504dd36e3295068ec9a06a8b2' }, this.secondaryButtonText)))), this.primaryButtonText && (h("div", { key: '5e177a1dc54ebaa11aa4d1c746b4cb0e7fb389b5', class: "btn" }, h("gb-button", { key: '30f075297b95e1624d93bb43b43b6950e177674c', size: "lg", state: this.primaryButtonState, hierarchy: "primary", icon: "default", "icon-leading": this.primaryButtonIconLeadingSwap ? true : false, "icon-leading-swap": this.primaryButtonIconLeadingSwap, onClick: () => this.onPrimaryButtonClicked() }, h("p", { key: 'ad9e26c4dc57b3abf99bccc0c280393b3ec36e63' }, this.primaryButtonText))))))));
|
|
4036
|
+
}
|
|
4037
|
+
};
|
|
4038
|
+
GbEmptyState.style = gbEmptyStateCss;
|
|
4039
|
+
|
|
3984
4040
|
const gbExportDropdownCss = "/* @import 'tailwind.css'; */\r\n\r\n:root {\r\n /* --------------------------------------Primary Colors--------------------------------------------- */\r\n /* base color palette */\r\n --base-white: #fff;\r\n --base-black: #000;\r\n\r\n /* gray color palette */\r\n --gray-25: #f9fafb;\r\n --gray-50: #f6f8fa;\r\n --gray-100: #eef2f6;\r\n --gray-200: #e3e8ef;\r\n --gray-300: #cdd5df;\r\n --gray-400: #808c9e;\r\n --gray-500: #697586;\r\n --gray-600: #4b5565;\r\n --gray-700: #364152;\r\n --gray-800: #202939;\r\n --gray-900: #121926;\r\n --gray-950: #0d121c;\r\n\r\n /* brand dark blue color palette */\r\n --brandDarkBlue-25: #f9f9fb;\r\n --brandDarkBlue-50: #edeef3;\r\n --brandDarkBlue-100: #d3d5e0;\r\n --brandDarkBlue-200: #b5b9cc;\r\n --brandDarkBlue-300: #9095b2;\r\n --brandDarkBlue-400: #464f7f;\r\n --brandDarkBlue-500: #212c65;\r\n --brandDarkBlue-600: #1e285c;\r\n --brandDarkBlue-700: #1c2554;\r\n --brandDarkBlue-800: #161d43;\r\n --brandDarkBlue-900: #0b0f22;\r\n --brandDarkBlue-950: #070914;\r\n\r\n /* brand red color palette */\r\n --brandRed-25: #fffbfa;\r\n --brandRed-50: #fef1f2;\r\n --brandRed-100: #fde3e5;\r\n --brandRed-200: #f9b4ba;\r\n --brandRed-300: #f68e98;\r\n --brandRed-400: #f36976;\r\n --brandRed-500: #e21b2e;\r\n --brandRed-600: #cc1a2a;\r\n --brandRed-700: #b51726;\r\n --brandRed-800: #8c121d;\r\n --brandRed-900: #680d16;\r\n --brandRed-950: #3f080d;\r\n\r\n /* warning color palette */\r\n --warning-25: #fffcf5;\r\n --warning-50: #fffaeb;\r\n --warning-100: #fef0c7;\r\n --warning-200: #fedf89;\r\n --warning-300: #fec84b;\r\n --warning-400: #fdb022;\r\n --warning-500: #f79009;\r\n --warning-600: #dc6803;\r\n --warning-700: #b54708;\r\n --warning-800: #93370d;\r\n --warning-900: #7a2e0e;\r\n --warning-950: #4e1d09;\r\n\r\n /* success color palette */\r\n --success-25: #f6fef9;\r\n --success-50: #ecfdf3;\r\n --success-100: #dcfaeb;\r\n --success-200: #a9efc5;\r\n --success-300: #75e0a7;\r\n --success-400: #47cd89;\r\n --success-500: #17b26a;\r\n --success-600: #079455;\r\n --success-700: #067647;\r\n --success-800: #085d3a;\r\n --success-900: #074d31;\r\n --success-950: #053321;\r\n\r\n /* ------------------------------------------opacity color palette-------------------------------------- */\r\n /* 0% opacity */\r\n /* White */\r\n --white-opacity0: rgba(255, 255, 255, 0);\r\n\r\n /* Gray */\r\n --gray25-opacity0: rgba(249, 250, 251, 0);\r\n --gray900-opacity0: rgba(18, 25, 38, 0);\r\n --gray950-opacity0: rgba(13, 18, 28, 0);\r\n\r\n /* 20% opacity */\r\n /* White */\r\n --white-opacity20: rgba(255, 255, 255, 0.2);\r\n\r\n /* Dark Blue */\r\n --darkBlue200-opacity20: rgba(181, 185, 204, 0.2);\r\n --darkBlue500-opacity20: rgba(33, 44, 101, 0.2);\r\n\r\n /* Gray */\r\n --gray25-opacity20: rgba(249, 250, 251, 0.2);\r\n --gray900-opacity20: rgba(18, 25, 38, 0.2);\r\n --gray950-opacity20: rgba(13, 18, 28, 0.2);\r\n\r\n /* 30% opacity */\r\n --darkBlue200-opacity30: rgba(181, 185, 204, 0.3);\r\n --darkBlue500-opacity30: rgba(33, 44, 101, 0.3);\r\n\r\n /* 40% opacity */\r\n --darkBlue200-opacity40: rgba(181, 185, 204, 0.4);\r\n --darkBlue500-opacity40: rgba(33, 44, 101, 0.4);\r\n\r\n /* 50% opacity */\r\n /* White */\r\n --white-opacity50: rgba(255, 255, 255, 0.5);\r\n\r\n /* Gray */\r\n --gray25-opacity50: rgba(249, 250, 251, 0.5);\r\n --gray900-opacity50: rgba(18, 25, 38, 0.5);\r\n --gray950-opacity50: rgba(13, 18, 28, 0.5);\r\n\r\n /* ------------------------------------------Secondary Color------------------------------------------- */\r\n /* blueLight color palete */\r\n --lightBlue-25: #f5fbff;\r\n --lightBlue-50: #f0f9ff;\r\n --lightBlue-100: #e0f2fe;\r\n --lightBlue-200: #b9e6fe;\r\n --lightBlue-300: #7cd4fd;\r\n --lightBlue-400: #7cd4fd;\r\n --lightBlue-500: #0ba5ec;\r\n --lightBlue-600: #0086c9;\r\n --lightBlue-700: #026aa2;\r\n --lightBlue-800: #065986;\r\n --lightBlue-900: #0b4a6f;\r\n --lightBlue-950: #062c41;\r\n\r\n /* blue color palette */\r\n --blue-25: #ecf5fe;\r\n --blue-50: #e4f0fc;\r\n --blue-100: #c8e0f9;\r\n --blue-200: #9ac7f4;\r\n --blue-300: #6aa9e7;\r\n --blue-400: #378fe6;\r\n --blue-500: #075db2;\r\n --blue-600: #064e94;\r\n --blue-700: #053e77;\r\n --blue-800: #042f59;\r\n --blue-900: #022445;\r\n --blue-950: #021d37;\r\n\r\n /* Purple color palete */\r\n --purple-25: #fafaff;\r\n --purple-50: #f4f3ff;\r\n --purple-100: #ebe9fe;\r\n --purple-200: #d9d6fe;\r\n --purple-300: #bdb4fe;\r\n --purple-400: #9b8afb;\r\n --purple-500: #7a5af8;\r\n --purple-600: #6938ef;\r\n --purple-700: #5925dc;\r\n --purple-800: #4a1fb8;\r\n --purple-900: #3e1c96;\r\n --purple-950: #27115f;\r\n\r\n /* pink color palette */\r\n --pink-25: #fef6fb;\r\n --pink-50: #fdf2fa;\r\n --pink-100: #fce7f6;\r\n --pink-200: #fcceee;\r\n --pink-300: #faa7e0;\r\n --pink-400: #f670c7;\r\n --pink-500: #ee46bc;\r\n --pink-600: #dd2590;\r\n --pink-700: #c11574;\r\n --pink-800: #9e165f;\r\n --pink-900: #851651;\r\n --pink-950: #4e0d30;\r\n\r\n /* -------------------------------------------------Token---------------------------------------------- */\r\n\r\n /* -----------Text Color----------- */\r\n\r\n [data-theme='light'] {\r\n --color-text-bold: var(--gray-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-bold: var(--gray-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text: var(--gray-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text: var(--gray-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-subtle: var(--gray-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-subtle: var(--gray-400);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-disabled: var(--gray-400);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-disabled: var(--gray-500);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-inverse: var(--base-white);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-inverse: var(--base-black);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-brandDarkBlue: var(--brandDarkBlue-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-brandDarkBlue: var(--brandDarkBlue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-brandRed: var(--brandRed-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-brandRed: var(--brandRed-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-selected: var(--blue-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-selected: var(--blue-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-danger-bold: var(--brandRed-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-danger-bold: var(--brandRed-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-danger: var(--brandRed-700);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-danger: var(--brandRed-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-danger-subtle: var(--brandRed-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-danger-subtle: var(--brandRed-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-danger-inverse: var(--base-white);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-danger-inverse: var(--brandRed-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-warning-bold: var(--warning-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-warning-bold: var(--warning-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-warning: var(--warning-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-warning: var(--warning-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-warning-subtle: var(--warning-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-warning-subtle: var(--warning-400);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-success-bold: var(--success-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-success-bold: var(--success-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-success: var(--success-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-success: var(--success-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-success-subtle: var(--success-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-success-subtle: var(--success-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-discovery-bold: var(--lightBlue-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-discovery-bold: var(--lightBlue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-discovery: var(--lightBlue-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-discovery: var(--lightBlue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-discovery-subtle: var(--lightBlue-400);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-discovery-subtle: var(--lightBlue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-information-bold: var(--blue-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-information-bold: var(--blue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-information: var(--blue-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-information: var(--blue-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-information-subtle: var(--blue-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-information-subtle: var(--blue-400);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-purple-bold: var(--purple-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-purple-bold: var(--purple-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-purple: var(--purple-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-purple: var(--purple-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-purple-subtle: var(--purple-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-purple-subtle: var(--purple-400);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-pink-bold: var(--pink-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-pink-bold: var(--pink-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-pink: var(--pink-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-pink: var(--pink-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-pink-subtle: var(--pink-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-pink-subtle: var(--pink-400);\r\n }\r\n\r\n /* --------------Link color--------------- */\r\n\r\n [data-theme='light'] {\r\n --color-link: var(--blue-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-link: var(--blue-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-link-pressed: var(--blue-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-link-pressed: var(--blue-600);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-link-visited: var(--lightBlue-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-link-visited: var(--lightBlue-300);\r\n }\r\n\r\n /* --------------Icon color--------------- */\r\n\r\n [data-theme='light'] {\r\n --color-icon-bold: var(--gray-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-bold: var(--gray-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon: var(--gray-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon: var(--gray-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-subtle: var(--gray-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-subtle: var(--gray-400);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-disabled: var(--gray-400);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-disabled: var(--gray-500);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-inverse: var(--base-white);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-inverse: var(--gray-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-brandDarkBlue: var(--brandDarkBlue-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-brandDarkBlue: var(--brandDarkBlue-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-brandRed: var(--brandRed-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-brandRed: var(--brandRed-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-selected: var(--blue-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-selected: var(--blue-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-danger-bold: var(--brandRed-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-danger-bold: var(--brandRed-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-danger: var(--brandRed-700);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-danger: var(--brandRed-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-danger-inverse: var(--base-white);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-danger-inverse: var(--brandRed-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-warning-bold: var(--warning-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-warning-bold: var(--warning-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-warning: var(--warning-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-warning: var(--warning-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-success-bold: var(--success-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-success-bold: var(--success-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-success: var(--success-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-success: var(--success-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-discovery-bold: var(--lightBlue-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-discovery-bold: var(--lightBlue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-discovery: var(--lightBlue-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-discovery: var(--lightBlue-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-information-bold: var(--blue-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-information-bold: var(--blue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-information: var(--blue-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-information: var(--blue-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-purple-bold: var(--purple-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-purple-bold: var(--purple-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-purple: var(--purple-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-purple: var(--purple-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-pink-bold: var(--pink-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-pink-bold: var(--pink-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-pink: var(--pink-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-pink: var(--pink-300);\r\n }\r\n\r\n /* ----------------Border Color --------------- */\r\n\r\n [data-theme='light'] {\r\n --color-border-bold: var(--gray-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-bold: var(--gray-400);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border: var(--gray-400);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border: var(--gray-500);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-subtle: var(--gray-300);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-subtle: var(--gray-700);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-subtler: var(--gray-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-subtler: var(--gray-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-disabled: var(--gray-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-disabled: var(--gray-700);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-inverse: var(--base-white);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-inverse: var(--gray-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-input: var(--gray-300);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-input: var(--gray-600);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-focus: var(--gray-400);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-focus: var(--blue-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-selected: var(--blue-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-selected: var(--blue-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-brandDarkBlue: var(--brandDarkBlue-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-brandDarkBlue: var(--brandDarkBlue-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-brandRed: var(--brandRed-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-brandRed: var(--brandRed-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-danger-bold: var(--brandRed-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-danger-bold: var(--brandRed-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-danger: var(--brandRed-700);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-danger: var(--brandRed-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-danger-subtle: var(--brandRed-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-danger-subtle: var(--brandRed-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-danger-subtler: var(--brandRed-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-danger-subtler: var(--brandRed-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-warning-bold: var(--warning-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-warning-bold: var(--warning-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-warning: var(--warning-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-warning: var(--warning-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-warning-subtle: var(--warning-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-warning-subtle: var(--warning-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-warning-subtler: var(--warning-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-warning-subtler: var(--warning-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-success-bold: var(--success-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-success-bold: var(--success-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-success: var(--success-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-success: var(--success-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-success-subtle: var(--success-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-success-subtle: var(--success-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-success-subtler: var(--success-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-success-subtler: var(--success-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-discovery-bold: var(--lightBlue-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-discovery-bold: var(--lightBlue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-discovery: var(--lightBlue-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-discovery: var(--lightBlue-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-discovery-subtle: var(--lightBlue-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-discovery-subtle: var(--lightBlue-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-discovery-subtler: var(--lightBlue-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-discovery-subtler: var(--lightBlue-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-information-bold: var(--blue-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-information-bold: var(--blue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-information: var(--blue-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-information: var(--blue-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-information-subtle: var(--blue-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-information-subtle: var(--blue-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-information-subtler: var(--blue-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-information-subtler: var(--blue-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-purple-bold: var(--purple-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-purple-bold: var(--purple-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-purple: var(--purple-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-purple: var(--purple-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-purple-subtle: var(--purple-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-purple-subtle: var(--purple-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-purple-subtler: var(--purple-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-purple-subtler: var(--purple-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-pink-bold: var(--pink-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-pink-bold: var(--pink-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-pink: var(--pink-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-pink: var(--pink-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-pink-subtle: var(--pink-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-pink-subtle: var(--pink-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-pink-subtler: var(--pink-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-pink-subtler: var(--pink-900);\r\n }\r\n\r\n /* Emmanuel Kadiri starts from background color */\r\n\r\n /* ----------------Background Color --------------- */\r\n\r\n [data-theme='light'] {\r\n --color-background-card-bold: var(--gray-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-card-bold: var(--gray-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-card: var(--base-white);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-card: var(--gray-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-input: var(--gray-400);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-input: var(--gray-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-disabled: var(--gray-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-disabled: var(--gray-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-btn-disabled: var(--gray-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-btn-disabled: var(--gray-700);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-selected: var(--blue-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-selected: var(--blue-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-brandDarkblue: var(--brandDarkBlue-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-brandDarkblue: var(--brandDarkBlue-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-brandRed: var(--brandRed-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-brandRed: var(--brandRed-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-brandRed-hover: var(--brandRed-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-brandRed-hover: var(--brandRed-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-brandRed-pressed: var(--brandRed-700);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-brandRed-pressed: var(--brandRed-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-gray-bold: var(--gray-400);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-gray-bold: var(--gray-500);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-gray: var(--gray-300);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-gray: var(--gray-600);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-gray-subtle: var(--gray-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-gray-subtle: var(--gray-700);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-gray-subtler: var(--gray-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-gray-subtler: var(--gray-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-gray-subtlest: var(--gray-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-gray-subtlest: var(--gray-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-danger-bold: var(--brandRed-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-danger-bold: var(--brandRed-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-danger: var(--brandRed-700);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-danger: var(--brandRed-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-danger-subtle: var(--brandRed-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-danger-subtle: var(--brandRed-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-danger-subtler: var(--brandRed-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-danger-subtler: var(--brandRed-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-danger-subtlest: var(--brandRed-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-danger-subtlest: var(--brandRed-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-warning-bold: var(--warning-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-warning-bold: var(--warning-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-warning: var(--warning-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-warning: var(--warning-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-warning-subtle: var(--warning-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-warning-subtle: var(--warning-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-warning-subtler: var(--warning-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-warning-subtler: var(--warning-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-warning-subtlest: var(--warning-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-warning-subtlest: var(--warning-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-success-bold: var(--success-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-success-bold: var(--success-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-success: var(--success-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-success: var(--success-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-success-subtle: var(--success-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-success-subtle: var(--success-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-success-subtler: var(--success-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-success-subtler: var(--success-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-success-subtlest: var(--success-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-success-subtlest: var(--success-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-discovery-bold: var(--lightBlue-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-discovery-bold: var(--lightBlue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-discovery: var(--lightBlue-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-discovery: var(--lightBlue-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-discovery-subtle: var(--lightBlue-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-discovery-subtle: var(--lightBlue-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-discovery-subtler: var(--lightBlue-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-discovery-subtler: var(--lightBlue-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-discovery-subtlest: var(--lightBlue-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-discovery-subtlest: var(--lightBlue-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-information-bold: var(--blue-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-information-bold: var(--blue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-information: var(--blue-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-information: var(--blue-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-information-subtle: var(--blue-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-information-subtle: var(--blue-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-information-subtler: var(--blue-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-information-subtler: var(--blue-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-information-subtlest: var(--blue-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-information-subtlest: var(--blue-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-purple-bold: var(--purple-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-purple-bold: var(--blue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-purple: var(--purple-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-purple: var(--blue-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-purple-subtle: var(--purple-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-purple-subtle: var(--purple-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-purple-subtler: var(--purple-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-purple-subtler: var(--purple-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-purple-subtlest: var(--purple-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-purple-subtlest: var(--purple-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-pink-bold: var(--pink-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-pink-bold: var(--pink-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-pink: var(--pink-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-pink: var(--pink-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-pink-subtle: var(--pink-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-pink-subtle: var(--pink-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-pink-subtler: var(--pink-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-pink-subtler: var(--pink-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-pink-subtlest: var(--purple-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-pink-subtlest: var(--pink-950);\r\n }\r\n\r\n /* ----------------Blanket Color --------------- */\r\n [data-theme='light'] {\r\n --color-blanket: var(--darkBlue500-opacity20);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-blanket: var(--darkBlue200-opacity20);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-blanket-subtle: var(--darkBlue500-opacity30);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-blanket-subtle: var(--darkBlue200-opacity30);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-blanket-subtler: var(--darkBlue500-opacity40);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-blanket-subtler: var(--darkBlue200-opacity40);\r\n }\r\n\r\n /* ----------------Skeleton Color --------------- */\r\n [data-theme='light'] {\r\n --color-skeleton: var(--gray-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-skeleton: var(--gray-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-skeleton-bold: var(--gray-300);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-skeleton-bold: var(--gray-700);\r\n }\r\n\r\n /* ----------------Surface Color --------------- */\r\n [data-theme='light'] {\r\n --color-surface-bold: var(--gray-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-surface-bold: var(--gray-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-surface: var(--base-white);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-surface: var(--gray-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-surface-hovered: var(--gray-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-surface-hovered: var(--gray-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-surface-pressed: var(--gray-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-surface-pressed: var(--gray-700);\r\n }\r\n\r\n /* ----------------Transparent Color --------------- */\r\n [data-theme='light'] {\r\n --color-surface-transparent50: var(--white-opacity50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-surface-transparent50: var(--gray900-opacity50);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-surface-transparent20: var(--white-opacity20);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-surface-transparent20: var(--gray900-opacity20);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-surface-transparent-full: var(--white-opacity0);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-surface-transparent-full: var(--gray900-opacity0);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-surface-bold-transparent50: var(--gray25-opacity50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-surface-bold-transparent50: var(--gray950-opacity50);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-surface-bold-transparent20: var(--gray25-opacity20);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-surface-bold-transparent20: var(--gray950-opacity20);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-surface-bold-transparent-full: var(--gray25-opacity0);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-surface-bold-transparent-full: var(--gray950-opacity0);\r\n }\r\n}\r\n\r\n/* -----------------Shadow and Blur----------------- */\r\n:root {\r\n --shadow-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\r\n --shadow-sm: 0px 1px 3px 0px rgba(16, 24, 40, 0.1), 0px 1px 2px 0px rgba(16, 24, 40, 0.06);\r\n --shadow-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);\r\n --shadow-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);\r\n --shadow-xl: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);\r\n --shadow-2xl: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);\r\n --shadow-3xl: 0px 32px 64px -12px rgba(16, 24, 40, 0.14);\r\n\r\n --blur-sm: blur(4px);\r\n --blur-md: blur(8px);\r\n --blur-lg: blur(12px);\r\n --blur-xl: blur(20px);\r\n}\r\n\r\n.shadow-xs {\r\n box-shadow: var(--shadow-xs);\r\n}\r\n\r\n.shadow-sm {\r\n box-shadow: var(--shadow-sm);\r\n}\r\n\r\n.shadow-md {\r\n box-shadow: var(--shadow-md);\r\n}\r\n\r\n.shadow-lg {\r\n box-shadow: var(--shadow-lg);\r\n}\r\n\r\n.shadow-xl {\r\n box-shadow: var(--shadow-xl);\r\n}\r\n\r\n.shadow-2xl {\r\n box-shadow: var(--shadow-2xl);\r\n}\r\n\r\n.shadow-3xl {\r\n box-shadow: var(--shadow-3xl);\r\n}\r\n\r\n.blur-sm {\r\n backdrop-filter: var(--blur-sm);\r\n}\r\n\r\n.blur-md {\r\n backdrop-filter: var(--blur-md);\r\n}\r\n\r\n.blur-lg {\r\n backdrop-filter: var(--blur-lg);\r\n}\r\n\r\n.blur-xl {\r\n backdrop-filter: var(--blur-xl);\r\n}\r\n\r\n/* -----------------Gradients----------------- */\r\n:root {\r\n /* Gray Gradients */\r\n /* --gray-gradient-600: linear-gradient(); */\r\n --gradient-gray-600-to-500-90d: linear-gradient(90deg, var(--gray-600), var(--gray-500));\r\n --gradient-gray-700-to-600-45d: linear-gradient(45deg, var(--gray-700), var(--gray-600));\r\n --gradient-gray-800-to-600-45d: linear-gradient(45deg, var(--gray-800), var(--gray-600));\r\n --gradient-gray-800-to-600-90d: linear-gradient(90deg, var(--gray-800), var(--gray-600));\r\n --gradient-gray-800-to-700265-d: linear-gradient(26.5deg, var(--gray-800), var(--gray-700));\r\n --gradient-gray-900-to-600-45d: linear-gradient(45deg, var(--gray-900), var(--gray-600));\r\n\r\n /* Brand Dark Blue Gradients */\r\n --gradient-darkBlue-500-to-400-90d: linear-gradient(90deg, var(--brandDarkBlue-500), var(--brandDarkBlue-400));\r\n --gradient-darkBlue-700-to-500-45d: linear-gradient(45deg, var(--brandDarkBlue-700), var(--brandDarkBlue-500));\r\n --gradient-darkBlue-700-to-400-45d: linear-gradient(45deg, var(--brandDarkBlue-700), var(--brandDarkBlue-400));\r\n --gradient-darkBlue-800-to-500-90d: linear-gradient(90deg, var(--brandDarkBlue-800), var(--brandDarkBlue-500));\r\n --gradient-darkBlue-800-to-600265-d: linear-gradient(26.5deg, var(--brandDarkBlue-800), var(--brandDarkBlue-600));\r\n --gradient-darkBlue-900-to-600-45d: linear-gradient(45deg, var(--brandDarkBlue-900), var(--brandDarkBlue-600));\r\n\r\n /* Brand Red Gradients */\r\n --gradient-red-500-to-400-90d: linear-gradient(90deg, var(--brandRed-600), var(--brandRed-400));\r\n --gradient-red-700-to-500-45d: linear-gradient(45deg, var(--brandRed-700), var(--brandRed-500));\r\n --gradient-red-700-to-400-45d: linear-gradient(45deg, var(--brandRed-700), var(--brandRed-400));\r\n --gradient-red-800-to-500-90d: linear-gradient(90deg, var(--brandRed-800), var(--brandRed-500));\r\n --gradient-red-800-to-600265-d: linear-gradient(26.5deg, var(--brandRed-800), var(--brandRed-600));\r\n --gradient-red-900-to-600-45d: linear-gradient(45deg, var(--brandRed-900), var(--brandRed-600));\r\n\r\n /* Blue Gradients */\r\n --gradient-blue-500-to-400-90d: linear-gradient(90deg, var(--blue-500), var(--blue-400));\r\n --gradient-blue-700-to-500-45d: linear-gradient(45deg, var(--blue-700), var(--blue-500));\r\n --gradient-blue-700-to-400-45d: linear-gradient(45deg, var(--blue-700), var(--blue-400));\r\n --gradient-blue-800-to-500-90d: linear-gradient(90deg, var(--blue-800), var(--blue-500));\r\n --gradient-blue-800-to-600265-d: linear-gradient(26.5deg, var(--blue-800), var(--blue-600));\r\n --gradient-blue-900-to-600-45d: linear-gradient(45deg, var(--blue-900), var(--blue-600));\r\n}\r\n\r\n.gradient-gray-600-to-500-90d {\r\n background: var(--gradient-gray-600-to-500-90d);\r\n}\r\n\r\n.gradient-gray-700-to-600-45d {\r\n background: var(--gradient-gray-700-to-600-45d);\r\n}\r\n\r\n.gradient-gray-800-to-600-45d {\r\n background: var(--gradient-gray-800-to-600-45d);\r\n}\r\n\r\n.gradient-gray-800-to-600-90d {\r\n background: var(--gradient-gray-800-to-600-90d);\r\n}\r\n\r\n.gradient-gray-800-to-700265-d {\r\n background: var(--gradient-gray-800-to-700265-d);\r\n}\r\n\r\n.gradient-gray-900-to-600-45d {\r\n background: var(--gradient-gray-900-to-600-45d);\r\n}\r\n\r\n.gradient-darkBlue-500-to-400-90d {\r\n background: var(--gradient-darkBlue-500-to-400-90d);\r\n}\r\n\r\n.gradient-darkBlue-700-to-500-45d {\r\n background: var(--gradient-darkBlue-700-to-500-45d);\r\n}\r\n\r\n.gradient-darkBlue-700-to-400-45d {\r\n background: var(--gradient-darkBlue-700-to-400-45d);\r\n}\r\n\r\n.gradient-darkBlue-800-to-500-90d {\r\n background: var(--gradient-darkBlue-800-to-500-90d);\r\n}\r\n\r\n.gradient-darkBlue-800-to-600265-d {\r\n background: var(--gradient-darkBlue-800-to-600265-d);\r\n}\r\n\r\n.gradient-darkBlue-900-to-600-45d {\r\n background: var(--gradient-darkBlue-900-to-600-45d);\r\n}\r\n\r\n.gradient-red-500-to-400-90d {\r\n background: var(--gradient-red-500-to-400-90d);\r\n}\r\n\r\n.gradient-red-700-to-500-45d {\r\n background: var(--gradient-red-700-to-500-45d);\r\n}\r\n\r\n.gradient-red-700-to-400-45d {\r\n background: var(--gradient-red-700-to-400-45d);\r\n}\r\n\r\n.gradient-red-800-to-500-90d {\r\n background: var(--gradient-red-800-to-500-90d);\r\n}\r\n\r\n.gradient-red-800-to-600265-d {\r\n background: var(--gradient-red-800-to-600265-d);\r\n}\r\n\r\n.gradient-red-900-to-600-45d {\r\n background: var(--gradient-red-900-to-600-45d);\r\n}\r\n\r\n.gradient-blue-500-to-400-90d {\r\n background: var(--gradient-blue-500-to-400-90d);\r\n}\r\n\r\n.gradient-blue-700-to-500-45d {\r\n background: var(--gradient-blue-700-to-500-45d);\r\n}\r\n\r\n.gradient-blue-700-to-400-45d {\r\n background: var(--gradient-blue-700-to-400-45d);\r\n}\r\n\r\n.gradient-blue-800-to-500-90d {\r\n background: var(--gradient-blue-800-to-500-90d);\r\n}\r\n\r\n.gradient-blue-800-to-600265-d {\r\n background: var(--gradient-blue-800-to-600265-d);\r\n}\r\n\r\n.gradient-blue-900-to-600-45d {\r\n background: var(--gradient-blue-900-to-600-45d);\r\n}\r\n\r\n/* Spacing Styles */\r\n:root {\r\n /* Positive spacing */\r\n --spacing-none: 0rem;\r\n --spacing-half: 0.125rem;\r\n --spacing-1: 0.25rem;\r\n --spacing-2: 0.5rem;\r\n --spacing-3: 0.75rem;\r\n --spacing-4: 1rem;\r\n --spacing-5: 1.25rem;\r\n --spacing-6: 1.5rem;\r\n --spacing-7: 2rem;\r\n --spacing-8: 2.5rem;\r\n --spacing-12: 3rem;\r\n --spacing-16: 4rem;\r\n --spacing-20: 5rem;\r\n --spacing-24: 6rem;\r\n --spacing-32: 8rem;\r\n --spacing-40: 10rem;\r\n --spacing-48: 12rem;\r\n --spacing-56: 14rem;\r\n --spacing-64: 16rem;\r\n\r\n /* Negative spacing */\r\n\r\n --spacing-negative-half: -0.125rem;\r\n --spacing-negative-1: -0.25rem;\r\n --spacing-negative-2: -0.5rem;\r\n --spacing-negative-3: -0.75rem;\r\n --spacing-negative-4: -1rem;\r\n --spacing-negative-5: -1.25rem;\r\n --spacing-negative-6: -1.5rem;\r\n --spacing-negative-7: -2rem;\r\n\r\n /* Radius */\r\n --rounded-none: 0rem;\r\n --rounded-xs: 0.25rem;\r\n --rounded-sm: 0.5rem;\r\n --rounded-md: 0.75rem;\r\n --rounded-lg: 1rem;\r\n --rounded-xl: 1.5rem;\r\n --rounded-2xl: 2rem;\r\n --rounded-full: 62.438rem;\r\n}\r\n\r\n/* Typography Styles */\r\n@import url('https://fonts.googleapis.com/css2?family=Sora&display=swap');\r\n\r\n:root {\r\n /* Font Sizes */\r\n --font-size-d-2xl: 4.5rem;\r\n --font-size-d-xl: 3.75rem;\r\n --font-size-d-lg: 3rem;\r\n --font-size-d-md: 2.25rem;\r\n --font-size-d-sm: 1.875rem;\r\n --font-size-d-xs: 1.5rem;\r\n --font-size-t-xl: 1.25rem;\r\n --font-size-t-lg: 1.125rem;\r\n --font-size-t-md: 1rem;\r\n --font-size-t-sm: 0.875rem;\r\n --font-size-t-xs: 0.75rem;\r\n --font-size-t-xxs: 0.625rem;\r\n\r\n /* Font Weights */\r\n --font-weight-bold: 700;\r\n --font-weight-semi-bold: 600;\r\n --font-weight-medium: 500;\r\n --font-weight-regular: 400;\r\n\r\n /* Line Heights */\r\n --font-line-height-d-2xl: 5rem;\r\n --font-line-height-d-xl: 4.25rem;\r\n --font-line-height-d-lg: 3.75rem;\r\n --font-line-height-d-md: 2.75rem;\r\n --font-line-height-d-sm: 2.375rem;\r\n --font-line-height-d-xs: 2rem;\r\n --font-line-height-t-xl: 2rem;\r\n --font-line-height-t-lg: 1.875rem;\r\n --font-line-height-t-md: 1.688rem;\r\n --font-line-height-t-sm: 1.5rem;\r\n --font-line-height-t-xs: 1.25rem;\r\n --font-line-height-t-xxs: 1.125rem;\r\n\r\n /* Letter Spacings */\r\n --font-letter-spacing-d-2xl: -0.09rem;\r\n --font-letter-spacing-d-xl: -0.075rem;\r\n --font-letter-spacing-d-lg: -0.075rem;\r\n --font-letter-spacing-d-md: -0.045rem;\r\n --font-letter-spacing-d-sm: 0;\r\n --font-letter-spacing-d-xs: 0;\r\n --font-letter-spacing-d-xxs: 0;\r\n\r\n /* Font Families */\r\n --font-family-title: 'Sora';\r\n --font-family-body: 'Sora';\r\n}\r\n\r\n/* Media queries for medium screens (tablet) */\r\n@media (max-width: 1199px) {\r\n :root {\r\n /* Font Sizes */\r\n --font-size-d-2xl: 3.75rem;\r\n --font-size-d-xl: 3.5rem;\r\n --font-size-d-lg: 2.75rem;\r\n --font-size-d-md: 2.25rem;\r\n --font-size-d-sm: 1.875rem;\r\n --font-size-d-xs: 1.5rem;\r\n\r\n /* Line Heights */\r\n --font-line-height-d-2xl: 4.25rem;\r\n --font-line-height-d-xl: 3.75rem;\r\n --font-line-height-d-lg: 2.4375rem;\r\n --font-line-height-d-md: 2.75rem;\r\n --font-line-height-d-sm: 2.375rem;\r\n --font-line-height-d-xs: 2rem;\r\n\r\n /* Letter Spacings */\r\n --font-letter-spacing-2xl: -0.075rem;\r\n --font-letter-spacing-xl: -0.065rem;\r\n --font-letter-spacing-lg: -0.045rem;\r\n --font-letter-spacing-md: -0.045rem;\r\n --font-letter-spacing-sm: 0rem;\r\n --font-letter-spacing-xs: 0rem;\r\n }\r\n}\r\n\r\n/* Media queries for smaller screens (mobile) */\r\n@media (max-width: 743px) {\r\n :root {\r\n /* Font Sizes */\r\n --font-size-d-2xl: 3rem;\r\n --font-size-d-xl: 2.5rem;\r\n --font-size-d-lg: 2rem;\r\n --font-size-d-md: 1.75rem;\r\n --font-size-d-sm: 1.5rem;\r\n --font-size-d-xs: 1.25rem;\r\n\r\n /* Line Heights */\r\n --font-line-height-d-2xl: 3.375rem;\r\n --font-line-height-d-xl: 2.875rem;\r\n --font-line-height-d-lg: 2.5rem;\r\n --font-line-height-d-md: 2.1375rem;\r\n --font-line-height-d-sm: 2rem;\r\n --font-line-height-d-xs: 1.75rem;\r\n\r\n /* Letter Spacings */\r\n --font-letter-spacing-2xl: -0.06rem;\r\n --font-letter-spacing-xl: -0.05rem;\r\n --font-letter-spacing-lg: -0.045rem;\r\n --font-letter-spacing-md: 0rem;\r\n --font-letter-spacing-sm: 0rem;\r\n --font-letter-spacing-xs: 0rem;\r\n }\r\n}\r\n\r\n.display-2xl-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-2xl);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-d-2xl);\r\n letter-spacing: var(--font-letter-spacing-d-2xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-2xl-bold::before,\r\n.display-2xl-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-2xl-bold::before {\r\n margin-bottom: -0.135em;\r\n}\r\n\r\n.display-2xl-bold::after {\r\n margin-top: -0.205em;\r\n}\r\n\r\n.display-2xl-semi-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-2xl);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-d-2xl);\r\n letter-spacing: var(--font-letter-spacing-d-2xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-2xl-semi-bold::before,\r\n.display-2xl-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-2xl-semi-bold::before {\r\n margin-bottom: -0.135em;\r\n}\r\n\r\n.display-2xl-semi-bold::after {\r\n margin-top: -0.205em;\r\n}\r\n\r\n.display-xl-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-xl);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-d-xl);\r\n letter-spacing: var(--font-letter-spacing-d-xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-xl-bold::before,\r\n.display-xl-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-xl-bold::before {\r\n margin-bottom: -0.145em;\r\n}\r\n\r\n.display-xl-bold::after {\r\n margin-top: -0.215em;\r\n}\r\n\r\n.display-xl-semi-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-xl);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-d-xl);\r\n letter-spacing: var(--font-letter-spacing-d-xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-xl-semi-bold::before,\r\n.display-xl-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-xl-semi-bold::before {\r\n margin-bottom: -0.145em;\r\n}\r\n\r\n.display-xl-semi-bold::after {\r\n margin-top: -0.215em;\r\n}\r\n\r\n.display-lg-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-lg);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-d-lg);\r\n letter-spacing: var(--font-letter-spacing-d-lg);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-lg-bold::before,\r\n.display-lg-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-lg-bold::before {\r\n margin-bottom: -0.015em;\r\n}\r\n\r\n.display-lg-bold::after {\r\n margin-top: -0.095em;\r\n}\r\n\r\n.display-lg-semi-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-lg);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-d-lg);\r\n letter-spacing: var(--font-letter-spacing-d-lg);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-lg-semi-bold::before,\r\n.display-lg-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-lg-semi-bold::before {\r\n margin-bottom: -0.015em;\r\n}\r\n\r\n.display-lg-semi-bold::after {\r\n margin-top: -0.095em;\r\n}\r\n\r\n.display-md-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-md);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-d-md);\r\n letter-spacing: var(--font-letter-spacing-d-md);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-md-bold::before,\r\n.display-md-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-md-bold::before {\r\n margin-bottom: -0.195em;\r\n}\r\n\r\n.display-md-bold::after {\r\n margin-top: -0.255em;\r\n}\r\n\r\n.display-md-semi-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-md);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-d-md);\r\n letter-spacing: var(--font-letter-spacing-d-md);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-md-semi-bold::before,\r\n.display-md-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-md-semi-bold::before {\r\n margin-bottom: -0.195em;\r\n}\r\n\r\n.display-md-semi-bold::after {\r\n margin-top: -0.255em;\r\n}\r\n\r\n.display-sm-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-sm);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-d-sm);\r\n letter-spacing: var(--font-letter-spacing-d-sm);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-sm-bold::before,\r\n.display-sm-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-sm-bold::before {\r\n margin-bottom: -0.195em;\r\n}\r\n\r\n.display-sm-bold::after {\r\n margin-top: -0.255em;\r\n}\r\n\r\n.display-sm-semi-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-sm);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-d-sm);\r\n letter-spacing: var(--font-letter-spacing-d-sm);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-sm-semi-bold::before,\r\n.display-sm-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-sm-semi-bold::before {\r\n margin-bottom: -0.195em;\r\n}\r\n\r\n.display-sm-semi-bold::after {\r\n margin-top: -0.255em;\r\n}\r\n\r\n.display-xs-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-xs);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-d-xs);\r\n letter-spacing: var(--font-letter-spacing-d-xs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-xs-bold::before,\r\n.display-xs-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-xs-bold::before {\r\n margin-bottom: -0.199em;\r\n}\r\n\r\n.display-xs-bold::after {\r\n margin-top: -0.195em; /* Continue from here */\r\n}\r\n\r\n.display-xs-semi-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-xs);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-d-xs);\r\n letter-spacing: var(--font-letter-spacing-d-xs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-xs-semi-bold::before,\r\n.display-xs-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-xs-semi-bold::before {\r\n margin-bottom: -0.259em;\r\n}\r\n\r\n.display-xs-semi-bold::after {\r\n margin-top: -0.295em;\r\n}\r\n\r\n.text-xl-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xl);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-t-xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xl-bold::before,\r\n.text-xl-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xl-bold::before {\r\n margin-bottom: -0.329em;\r\n}\r\n\r\n.text-xl-bold::after {\r\n margin-top: -0.359em;\r\n}\r\n\r\n.text-xl-semi-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xl);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-t-xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xl-semi-bold::before,\r\n.text-xl-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xl-semi-bold::before {\r\n margin-bottom: -0.329em;\r\n}\r\n\r\n.text-xl-semi-bold::after {\r\n margin-top: -0.359em;\r\n}\r\n\r\n.text-xl-medium {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xl);\r\n font-weight: var(--font-weight-medium);\r\n line-height: var(--font-line-height-t-xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xl-medium::before,\r\n.text-xl-medium::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xl-medium::before {\r\n margin-bottom: -0.339em;\r\n}\r\n\r\n.text-xl-medium::after {\r\n margin-top: -0.399em;\r\n}\r\n\r\n.text-xl-regular {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xl);\r\n font-weight: var(--font-weight-regular);\r\n line-height: var(--font-line-height-t-xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xl-regular::before,\r\n.text-xl-regular::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xl-regular::before {\r\n margin-bottom: -0.339em;\r\n}\r\n\r\n.text-xl-regular::after {\r\n margin-top: -0.399em;\r\n}\r\n\r\n.text-lg-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-lg);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-t-lg);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-lg-bold::before,\r\n.text-lg-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-lg-bold::before {\r\n margin-bottom: -0.339em;\r\n}\r\n\r\n.text-lg-bold::after {\r\n margin-top: -0.399em;\r\n}\r\n\r\n.text-lg-semi-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-lg);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-t-lg);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-lg-semi-bold::before,\r\n.text-lg-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-lg-semi-bold::before {\r\n margin-bottom: -0.339em;\r\n}\r\n\r\n.text-lg-semi-bold::after {\r\n margin-top: -0.399em;\r\n}\r\n\r\n.text-lg-medium {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-lg);\r\n font-weight: var(--font-weight-medium);\r\n line-height: var(--font-line-height-t-lg);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-lg-medium::before,\r\n.text-lg-medium::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-lg-medium::before {\r\n margin-bottom: -0.349em;\r\n}\r\n\r\n.text-lg-medium::after {\r\n margin-top: -0.389em;\r\n}\r\n\r\n.text-lg-regular {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-lg);\r\n font-weight: var(--font-weight-regular);\r\n line-height: var(--font-line-height-t-lg);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-lg-regular::before,\r\n.text-lg-regular::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-lg-regular::before {\r\n margin-bottom: -0.349em;\r\n}\r\n\r\n.text-lg-regular::after {\r\n margin-top: -0.389em;\r\n}\r\n\r\n.text-md-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-md);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-t-md);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-md-bold::before,\r\n.text-md-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-md-bold::before {\r\n margin-bottom: -0.349em;\r\n}\r\n\r\n.text-md-bold::after {\r\n margin-top: -0.389em;\r\n}\r\n\r\n.text-md-semi-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-md);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-t-md);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-md-semi-bold::before,\r\n.text-md-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-md-semi-bold::before {\r\n margin-bottom: -0.349em;\r\n}\r\n\r\n.text-md-semi-bold::after {\r\n margin-top: -0.389em;\r\n}\r\n\r\n.text-md-medium {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-md);\r\n font-weight: var(--font-weight-medium);\r\n line-height: var(--font-line-height-t-md);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-md-medium::before,\r\n.text-md-medium::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-md-medium::before {\r\n margin-bottom: -0.349em;\r\n}\r\n\r\n.text-md-medium::after {\r\n margin-top: -0.389em;\r\n}\r\n\r\n.text-md-regular {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-md);\r\n font-weight: var(--font-weight-regular);\r\n line-height: var(--font-line-height-t-md);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-md-regular::before,\r\n.text-md-regular::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-md-regular::before {\r\n margin-bottom: -0.349em;\r\n}\r\n\r\n.text-md-regular::after {\r\n margin-top: -0.389em;\r\n}\r\n\r\n.text-sm-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-sm);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-t-sm);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-sm-bold::before,\r\n.text-sm-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-sm-bold::before {\r\n margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-bold::after {\r\n margin-top: -0.349em;\r\n}\r\n\r\n.text-sm-semi-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-sm);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-t-sm);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-sm-semi-bold::before,\r\n.text-sm-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-sm-semi-bold::before {\r\n margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-semi-bold::after {\r\n margin-top: -0.349em;\r\n}\r\n\r\n.text-sm-medium {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-sm);\r\n font-weight: var(--font-weight-medium);\r\n line-height: var(--font-line-height-t-sm);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n position: relative;\r\n display: inline-block;\r\n}\r\n\r\n.text-sm-medium::before,\r\n.text-sm-medium::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-sm-medium::before {\r\n margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-medium::after {\r\n margin-top: -0.299em;\r\n}\r\n\r\n.text-sm-regular {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-sm);\r\n font-weight: var(--font-weight-regular);\r\n line-height: var(--font-line-height-t-sm);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n position: relative;\r\n display: inline-block;\r\n}\r\n\r\n.text-sm-regular::before,\r\n.text-sm-regular::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-sm-regular::before {\r\n margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-regular::after {\r\n margin-top: -0.299em;\r\n}\r\n\r\n.text-xs-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xs);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-t-xs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xs-bold::before,\r\n.text-xs-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xs-bold::before {\r\n margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xs-bold::after {\r\n margin-top: -0.416em;\r\n}\r\n\r\n.text-xs-semi-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xs);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-t-xs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xs-semi-bold::before,\r\n.text-xs-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xs-semi-bold::before {\r\n margin-bottom: -0.321em;\r\n}\r\n\r\n.text-xs-semi-bold::after {\r\n margin-top: -0.416em;\r\n}\r\n\r\n.text-xs-medium {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xs);\r\n font-weight: var(--font-weight-medium);\r\n line-height: var(--font-line-height-t-xs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xs-medium::before,\r\n.text-xs-medium::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xs-medium::before {\r\n margin-bottom: -0.285em;\r\n}\r\n\r\n.text-xs-medium::after {\r\n margin-top: -0.396em;\r\n}\r\n\r\n.text-xs-regular {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xs);\r\n font-weight: var(--font-weight-regular);\r\n line-height: var(--font-line-height-t-xs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xs-regular::before,\r\n.text-xs-regular::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xs-regular::before {\r\n margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xs-regular::after {\r\n margin-top: -0.396em;\r\n}\r\n\r\n.text-xxs-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xxs);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-t-xxs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xxs-bold::before,\r\n.text-xxs-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xxs-bold::before {\r\n margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-bold::after {\r\n margin-top: -0.416em;\r\n}\r\n\r\n.text-xxs-semi-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xxs);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-t-xxs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xxs-semi-bold::before,\r\n.text-xxs-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xxs-semi-bold::before {\r\n margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-semi-bold::after {\r\n margin-top: -0.416em;\r\n}\r\n\r\n.text-xxs-medium {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xxs);\r\n font-weight: var(--font-weight-medium);\r\n line-height: var(--font-line-height-t-xxs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xxs-medium::before,\r\n.text-xxs-medium::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xxs-medium::before {\r\n margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-medium::after {\r\n margin-top: -0.416em;\r\n}\r\n\r\n.text-xxs-regular {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xxs);\r\n font-weight: var(--font-weight-regular);\r\n line-height: var(--font-line-height-t-xxs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xxs-regular::before,\r\n.text-xxs-regular::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xxs-regular::before {\r\n margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-regular::after {\r\n margin-top: -0.416em;\r\n}\r\n\r\n/* Button slot styles */\r\n/* .slotted_button_text.primary {\r\n color: var(--color-text-inverse, #ffffff) !important;\r\n}\r\n\r\n.slotted_button_text.secondary_gray {\r\n color: var(--color-text, #4b5565) !important;\r\n}\r\n\r\n.slotted_button_text.secondary_color {\r\n color: var(--color-text-brandRed, #e21b2e) !important;\r\n}\r\n\r\n.slotted_button_text.tertiary_gray {\r\n color: var(--color-text, #4b5565) !important;\r\n}\r\n\r\n.slotted_button_text.tertiary_color {\r\n color: var(--color-text-brandRed, #e21b2e) !important;\r\n}\r\n\r\n.slotted_button_text.link_gray {\r\n color: var(--color-text, #4b5565) !important;\r\n}\r\n\r\n.slotted_button_text.link_color {\r\n color: var(--color-link, #075db2) !important;\r\n}\r\n\r\n.slotted_button_text.primary.destructive {\r\n color: var(--color-text-inverse, #ffffff) !important;\r\n}\r\n\r\n#slotted_button_text.primary.disabled,\r\n#slotted_button_text.secondary_gray.disabled,\r\n#slotted_button_text.secondary_color.disabled,\r\n#slotted_button_text.tertiary_gray.disabled,\r\n#slotted_button_text.tertiary_color.disabled,\r\n#slotted_button_text.link_gray.disabled,\r\n#slotted_button_text.link_color.disabled {\r\n color: var(--color-text-disabled, #9aa4b2) !important;\r\n}\r\n\r\n#slotted_button_text.secondary_gray.default.destructive,\r\n#slotted_button_text.secondary_color.default.destructive,\r\n#slotted_button_text.tertiary_gray.default.destructive,\r\n#slotted_button_text.tertiary_color.default.destructive,\r\n#slotted_button_text.link_gray.default.destructive,\r\n#slotted_button_text.link_color.default.destructive {\r\n color: var(--color-text-danger, #b51726) !important;\r\n} */\r\n\r\n.export_dropdown{\r\n display: inline-flex;\r\n width: fit-content;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n gap: var(--spacing-none);\r\n border-radius: var(--rounded-sm);\r\n border: 1px solid var(--color-border-subtler, #E3E8EF);\r\n background: var(--color-surface, #FFFFFF);\r\n box-shadow: var(--shadow-sm);\r\n position: relative;\r\n z-index: 999;\r\n}\r\n\r\n.first_dropdown{\r\n position: absolute;\r\n top: 2rem;\r\n left: -10rem;\r\n z-index: 9999999;\r\n}\r\n\r\n.second_dropdown{\r\n position: absolute;\r\n top: 4rem;\r\n left: -10rem;\r\n z-index: 9999999;\r\n}";
|
|
3985
4041
|
|
|
3986
4042
|
const GbExportDropdown = class {
|
|
@@ -4082,6 +4138,30 @@ const GbExportSubDropdownItem = class {
|
|
|
4082
4138
|
};
|
|
4083
4139
|
GbExportSubDropdownItem.style = gbExportSubDropdownItemCss;
|
|
4084
4140
|
|
|
4141
|
+
const gbFeaturedIconCss = "/* @import 'tailwind.css'; */\r\n\r\n:root {\r\n /* --------------------------------------Primary Colors--------------------------------------------- */\r\n /* base color palette */\r\n --base-white: #fff;\r\n --base-black: #000;\r\n\r\n /* gray color palette */\r\n --gray-25: #f9fafb;\r\n --gray-50: #f6f8fa;\r\n --gray-100: #eef2f6;\r\n --gray-200: #e3e8ef;\r\n --gray-300: #cdd5df;\r\n --gray-400: #808c9e;\r\n --gray-500: #697586;\r\n --gray-600: #4b5565;\r\n --gray-700: #364152;\r\n --gray-800: #202939;\r\n --gray-900: #121926;\r\n --gray-950: #0d121c;\r\n\r\n /* brand dark blue color palette */\r\n --brandDarkBlue-25: #f9f9fb;\r\n --brandDarkBlue-50: #edeef3;\r\n --brandDarkBlue-100: #d3d5e0;\r\n --brandDarkBlue-200: #b5b9cc;\r\n --brandDarkBlue-300: #9095b2;\r\n --brandDarkBlue-400: #464f7f;\r\n --brandDarkBlue-500: #212c65;\r\n --brandDarkBlue-600: #1e285c;\r\n --brandDarkBlue-700: #1c2554;\r\n --brandDarkBlue-800: #161d43;\r\n --brandDarkBlue-900: #0b0f22;\r\n --brandDarkBlue-950: #070914;\r\n\r\n /* brand red color palette */\r\n --brandRed-25: #fffbfa;\r\n --brandRed-50: #fef1f2;\r\n --brandRed-100: #fde3e5;\r\n --brandRed-200: #f9b4ba;\r\n --brandRed-300: #f68e98;\r\n --brandRed-400: #f36976;\r\n --brandRed-500: #e21b2e;\r\n --brandRed-600: #cc1a2a;\r\n --brandRed-700: #b51726;\r\n --brandRed-800: #8c121d;\r\n --brandRed-900: #680d16;\r\n --brandRed-950: #3f080d;\r\n\r\n /* warning color palette */\r\n --warning-25: #fffcf5;\r\n --warning-50: #fffaeb;\r\n --warning-100: #fef0c7;\r\n --warning-200: #fedf89;\r\n --warning-300: #fec84b;\r\n --warning-400: #fdb022;\r\n --warning-500: #f79009;\r\n --warning-600: #dc6803;\r\n --warning-700: #b54708;\r\n --warning-800: #93370d;\r\n --warning-900: #7a2e0e;\r\n --warning-950: #4e1d09;\r\n\r\n /* success color palette */\r\n --success-25: #f6fef9;\r\n --success-50: #ecfdf3;\r\n --success-100: #dcfaeb;\r\n --success-200: #a9efc5;\r\n --success-300: #75e0a7;\r\n --success-400: #47cd89;\r\n --success-500: #17b26a;\r\n --success-600: #079455;\r\n --success-700: #067647;\r\n --success-800: #085d3a;\r\n --success-900: #074d31;\r\n --success-950: #053321;\r\n\r\n /* ------------------------------------------opacity color palette-------------------------------------- */\r\n /* 0% opacity */\r\n /* White */\r\n --white-opacity0: rgba(255, 255, 255, 0);\r\n\r\n /* Gray */\r\n --gray25-opacity0: rgba(249, 250, 251, 0);\r\n --gray900-opacity0: rgba(18, 25, 38, 0);\r\n --gray950-opacity0: rgba(13, 18, 28, 0);\r\n\r\n /* 20% opacity */\r\n /* White */\r\n --white-opacity20: rgba(255, 255, 255, 0.2);\r\n\r\n /* Dark Blue */\r\n --darkBlue200-opacity20: rgba(181, 185, 204, 0.2);\r\n --darkBlue500-opacity20: rgba(33, 44, 101, 0.2);\r\n\r\n /* Gray */\r\n --gray25-opacity20: rgba(249, 250, 251, 0.2);\r\n --gray900-opacity20: rgba(18, 25, 38, 0.2);\r\n --gray950-opacity20: rgba(13, 18, 28, 0.2);\r\n\r\n /* 30% opacity */\r\n --darkBlue200-opacity30: rgba(181, 185, 204, 0.3);\r\n --darkBlue500-opacity30: rgba(33, 44, 101, 0.3);\r\n\r\n /* 40% opacity */\r\n --darkBlue200-opacity40: rgba(181, 185, 204, 0.4);\r\n --darkBlue500-opacity40: rgba(33, 44, 101, 0.4);\r\n\r\n /* 50% opacity */\r\n /* White */\r\n --white-opacity50: rgba(255, 255, 255, 0.5);\r\n\r\n /* Gray */\r\n --gray25-opacity50: rgba(249, 250, 251, 0.5);\r\n --gray900-opacity50: rgba(18, 25, 38, 0.5);\r\n --gray950-opacity50: rgba(13, 18, 28, 0.5);\r\n\r\n /* ------------------------------------------Secondary Color------------------------------------------- */\r\n /* blueLight color palete */\r\n --lightBlue-25: #f5fbff;\r\n --lightBlue-50: #f0f9ff;\r\n --lightBlue-100: #e0f2fe;\r\n --lightBlue-200: #b9e6fe;\r\n --lightBlue-300: #7cd4fd;\r\n --lightBlue-400: #7cd4fd;\r\n --lightBlue-500: #0ba5ec;\r\n --lightBlue-600: #0086c9;\r\n --lightBlue-700: #026aa2;\r\n --lightBlue-800: #065986;\r\n --lightBlue-900: #0b4a6f;\r\n --lightBlue-950: #062c41;\r\n\r\n /* blue color palette */\r\n --blue-25: #ecf5fe;\r\n --blue-50: #e4f0fc;\r\n --blue-100: #c8e0f9;\r\n --blue-200: #9ac7f4;\r\n --blue-300: #6aa9e7;\r\n --blue-400: #378fe6;\r\n --blue-500: #075db2;\r\n --blue-600: #064e94;\r\n --blue-700: #053e77;\r\n --blue-800: #042f59;\r\n --blue-900: #022445;\r\n --blue-950: #021d37;\r\n\r\n /* Purple color palete */\r\n --purple-25: #fafaff;\r\n --purple-50: #f4f3ff;\r\n --purple-100: #ebe9fe;\r\n --purple-200: #d9d6fe;\r\n --purple-300: #bdb4fe;\r\n --purple-400: #9b8afb;\r\n --purple-500: #7a5af8;\r\n --purple-600: #6938ef;\r\n --purple-700: #5925dc;\r\n --purple-800: #4a1fb8;\r\n --purple-900: #3e1c96;\r\n --purple-950: #27115f;\r\n\r\n /* pink color palette */\r\n --pink-25: #fef6fb;\r\n --pink-50: #fdf2fa;\r\n --pink-100: #fce7f6;\r\n --pink-200: #fcceee;\r\n --pink-300: #faa7e0;\r\n --pink-400: #f670c7;\r\n --pink-500: #ee46bc;\r\n --pink-600: #dd2590;\r\n --pink-700: #c11574;\r\n --pink-800: #9e165f;\r\n --pink-900: #851651;\r\n --pink-950: #4e0d30;\r\n\r\n /* -------------------------------------------------Token---------------------------------------------- */\r\n\r\n /* -----------Text Color----------- */\r\n\r\n [data-theme='light'] {\r\n --color-text-bold: var(--gray-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-bold: var(--gray-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text: var(--gray-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text: var(--gray-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-subtle: var(--gray-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-subtle: var(--gray-400);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-disabled: var(--gray-400);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-disabled: var(--gray-500);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-inverse: var(--base-white);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-inverse: var(--base-black);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-brandDarkBlue: var(--brandDarkBlue-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-brandDarkBlue: var(--brandDarkBlue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-brandRed: var(--brandRed-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-brandRed: var(--brandRed-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-selected: var(--blue-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-selected: var(--blue-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-danger-bold: var(--brandRed-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-danger-bold: var(--brandRed-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-danger: var(--brandRed-700);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-danger: var(--brandRed-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-danger-subtle: var(--brandRed-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-danger-subtle: var(--brandRed-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-danger-inverse: var(--base-white);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-danger-inverse: var(--brandRed-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-warning-bold: var(--warning-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-warning-bold: var(--warning-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-warning: var(--warning-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-warning: var(--warning-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-warning-subtle: var(--warning-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-warning-subtle: var(--warning-400);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-success-bold: var(--success-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-success-bold: var(--success-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-success: var(--success-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-success: var(--success-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-success-subtle: var(--success-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-success-subtle: var(--success-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-discovery-bold: var(--lightBlue-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-discovery-bold: var(--lightBlue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-discovery: var(--lightBlue-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-discovery: var(--lightBlue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-discovery-subtle: var(--lightBlue-400);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-discovery-subtle: var(--lightBlue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-information-bold: var(--blue-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-information-bold: var(--blue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-information: var(--blue-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-information: var(--blue-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-information-subtle: var(--blue-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-information-subtle: var(--blue-400);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-purple-bold: var(--purple-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-purple-bold: var(--purple-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-purple: var(--purple-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-purple: var(--purple-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-purple-subtle: var(--purple-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-purple-subtle: var(--purple-400);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-pink-bold: var(--pink-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-pink-bold: var(--pink-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-pink: var(--pink-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-pink: var(--pink-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-pink-subtle: var(--pink-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-pink-subtle: var(--pink-400);\r\n }\r\n\r\n /* --------------Link color--------------- */\r\n\r\n [data-theme='light'] {\r\n --color-link: var(--blue-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-link: var(--blue-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-link-pressed: var(--blue-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-link-pressed: var(--blue-600);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-link-visited: var(--lightBlue-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-link-visited: var(--lightBlue-300);\r\n }\r\n\r\n /* --------------Icon color--------------- */\r\n\r\n [data-theme='light'] {\r\n --color-icon-bold: var(--gray-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-bold: var(--gray-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon: var(--gray-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon: var(--gray-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-subtle: var(--gray-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-subtle: var(--gray-400);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-disabled: var(--gray-400);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-disabled: var(--gray-500);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-inverse: var(--base-white);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-inverse: var(--gray-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-brandDarkBlue: var(--brandDarkBlue-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-brandDarkBlue: var(--brandDarkBlue-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-brandRed: var(--brandRed-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-brandRed: var(--brandRed-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-selected: var(--blue-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-selected: var(--blue-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-danger-bold: var(--brandRed-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-danger-bold: var(--brandRed-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-danger: var(--brandRed-700);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-danger: var(--brandRed-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-danger-inverse: var(--base-white);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-danger-inverse: var(--brandRed-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-warning-bold: var(--warning-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-warning-bold: var(--warning-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-warning: var(--warning-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-warning: var(--warning-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-success-bold: var(--success-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-success-bold: var(--success-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-success: var(--success-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-success: var(--success-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-discovery-bold: var(--lightBlue-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-discovery-bold: var(--lightBlue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-discovery: var(--lightBlue-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-discovery: var(--lightBlue-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-information-bold: var(--blue-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-information-bold: var(--blue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-information: var(--blue-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-information: var(--blue-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-purple-bold: var(--purple-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-purple-bold: var(--purple-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-purple: var(--purple-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-purple: var(--purple-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-pink-bold: var(--pink-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-pink-bold: var(--pink-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-pink: var(--pink-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-pink: var(--pink-300);\r\n }\r\n\r\n /* ----------------Border Color --------------- */\r\n\r\n [data-theme='light'] {\r\n --color-border-bold: var(--gray-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-bold: var(--gray-400);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border: var(--gray-400);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border: var(--gray-500);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-subtle: var(--gray-300);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-subtle: var(--gray-700);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-subtler: var(--gray-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-subtler: var(--gray-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-disabled: var(--gray-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-disabled: var(--gray-700);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-inverse: var(--base-white);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-inverse: var(--gray-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-input: var(--gray-300);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-input: var(--gray-600);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-focus: var(--gray-400);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-focus: var(--blue-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-selected: var(--blue-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-selected: var(--blue-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-brandDarkBlue: var(--brandDarkBlue-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-brandDarkBlue: var(--brandDarkBlue-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-brandRed: var(--brandRed-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-brandRed: var(--brandRed-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-danger-bold: var(--brandRed-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-danger-bold: var(--brandRed-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-danger: var(--brandRed-700);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-danger: var(--brandRed-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-danger-subtle: var(--brandRed-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-danger-subtle: var(--brandRed-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-danger-subtler: var(--brandRed-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-danger-subtler: var(--brandRed-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-warning-bold: var(--warning-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-warning-bold: var(--warning-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-warning: var(--warning-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-warning: var(--warning-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-warning-subtle: var(--warning-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-warning-subtle: var(--warning-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-warning-subtler: var(--warning-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-warning-subtler: var(--warning-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-success-bold: var(--success-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-success-bold: var(--success-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-success: var(--success-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-success: var(--success-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-success-subtle: var(--success-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-success-subtle: var(--success-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-success-subtler: var(--success-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-success-subtler: var(--success-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-discovery-bold: var(--lightBlue-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-discovery-bold: var(--lightBlue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-discovery: var(--lightBlue-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-discovery: var(--lightBlue-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-discovery-subtle: var(--lightBlue-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-discovery-subtle: var(--lightBlue-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-discovery-subtler: var(--lightBlue-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-discovery-subtler: var(--lightBlue-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-information-bold: var(--blue-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-information-bold: var(--blue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-information: var(--blue-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-information: var(--blue-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-information-subtle: var(--blue-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-information-subtle: var(--blue-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-information-subtler: var(--blue-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-information-subtler: var(--blue-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-purple-bold: var(--purple-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-purple-bold: var(--purple-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-purple: var(--purple-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-purple: var(--purple-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-purple-subtle: var(--purple-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-purple-subtle: var(--purple-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-purple-subtler: var(--purple-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-purple-subtler: var(--purple-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-pink-bold: var(--pink-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-pink-bold: var(--pink-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-pink: var(--pink-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-pink: var(--pink-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-pink-subtle: var(--pink-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-pink-subtle: var(--pink-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-pink-subtler: var(--pink-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-pink-subtler: var(--pink-900);\r\n }\r\n\r\n /* Emmanuel Kadiri starts from background color */\r\n\r\n /* ----------------Background Color --------------- */\r\n\r\n [data-theme='light'] {\r\n --color-background-card-bold: var(--gray-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-card-bold: var(--gray-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-card: var(--base-white);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-card: var(--gray-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-input: var(--gray-400);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-input: var(--gray-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-disabled: var(--gray-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-disabled: var(--gray-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-btn-disabled: var(--gray-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-btn-disabled: var(--gray-700);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-selected: var(--blue-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-selected: var(--blue-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-brandDarkblue: var(--brandDarkBlue-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-brandDarkblue: var(--brandDarkBlue-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-brandRed: var(--brandRed-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-brandRed: var(--brandRed-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-brandRed-hover: var(--brandRed-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-brandRed-hover: var(--brandRed-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-brandRed-pressed: var(--brandRed-700);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-brandRed-pressed: var(--brandRed-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-gray-bold: var(--gray-400);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-gray-bold: var(--gray-500);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-gray: var(--gray-300);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-gray: var(--gray-600);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-gray-subtle: var(--gray-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-gray-subtle: var(--gray-700);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-gray-subtler: var(--gray-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-gray-subtler: var(--gray-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-gray-subtlest: var(--gray-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-gray-subtlest: var(--gray-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-danger-bold: var(--brandRed-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-danger-bold: var(--brandRed-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-danger: var(--brandRed-700);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-danger: var(--brandRed-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-danger-subtle: var(--brandRed-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-danger-subtle: var(--brandRed-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-danger-subtler: var(--brandRed-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-danger-subtler: var(--brandRed-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-danger-subtlest: var(--brandRed-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-danger-subtlest: var(--brandRed-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-warning-bold: var(--warning-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-warning-bold: var(--warning-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-warning: var(--warning-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-warning: var(--warning-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-warning-subtle: var(--warning-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-warning-subtle: var(--warning-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-warning-subtler: var(--warning-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-warning-subtler: var(--warning-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-warning-subtlest: var(--warning-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-warning-subtlest: var(--warning-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-success-bold: var(--success-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-success-bold: var(--success-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-success: var(--success-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-success: var(--success-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-success-subtle: var(--success-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-success-subtle: var(--success-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-success-subtler: var(--success-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-success-subtler: var(--success-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-success-subtlest: var(--success-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-success-subtlest: var(--success-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-discovery-bold: var(--lightBlue-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-discovery-bold: var(--lightBlue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-discovery: var(--lightBlue-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-discovery: var(--lightBlue-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-discovery-subtle: var(--lightBlue-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-discovery-subtle: var(--lightBlue-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-discovery-subtler: var(--lightBlue-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-discovery-subtler: var(--lightBlue-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-discovery-subtlest: var(--lightBlue-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-discovery-subtlest: var(--lightBlue-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-information-bold: var(--blue-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-information-bold: var(--blue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-information: var(--blue-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-information: var(--blue-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-information-subtle: var(--blue-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-information-subtle: var(--blue-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-information-subtler: var(--blue-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-information-subtler: var(--blue-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-information-subtlest: var(--blue-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-information-subtlest: var(--blue-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-purple-bold: var(--purple-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-purple-bold: var(--blue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-purple: var(--purple-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-purple: var(--blue-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-purple-subtle: var(--purple-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-purple-subtle: var(--purple-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-purple-subtler: var(--purple-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-purple-subtler: var(--purple-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-purple-subtlest: var(--purple-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-purple-subtlest: var(--purple-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-pink-bold: var(--pink-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-pink-bold: var(--pink-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-pink: var(--pink-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-pink: var(--pink-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-pink-subtle: var(--pink-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-pink-subtle: var(--pink-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-pink-subtler: var(--pink-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-pink-subtler: var(--pink-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-pink-subtlest: var(--purple-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-pink-subtlest: var(--pink-950);\r\n }\r\n\r\n /* ----------------Blanket Color --------------- */\r\n [data-theme='light'] {\r\n --color-blanket: var(--darkBlue500-opacity20);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-blanket: var(--darkBlue200-opacity20);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-blanket-subtle: var(--darkBlue500-opacity30);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-blanket-subtle: var(--darkBlue200-opacity30);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-blanket-subtler: var(--darkBlue500-opacity40);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-blanket-subtler: var(--darkBlue200-opacity40);\r\n }\r\n\r\n /* ----------------Skeleton Color --------------- */\r\n [data-theme='light'] {\r\n --color-skeleton: var(--gray-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-skeleton: var(--gray-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-skeleton-bold: var(--gray-300);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-skeleton-bold: var(--gray-700);\r\n }\r\n\r\n /* ----------------Surface Color --------------- */\r\n [data-theme='light'] {\r\n --color-surface-bold: var(--gray-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-surface-bold: var(--gray-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-surface: var(--base-white);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-surface: var(--gray-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-surface-hovered: var(--gray-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-surface-hovered: var(--gray-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-surface-pressed: var(--gray-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-surface-pressed: var(--gray-700);\r\n }\r\n\r\n /* ----------------Transparent Color --------------- */\r\n [data-theme='light'] {\r\n --color-surface-transparent50: var(--white-opacity50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-surface-transparent50: var(--gray900-opacity50);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-surface-transparent20: var(--white-opacity20);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-surface-transparent20: var(--gray900-opacity20);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-surface-transparent-full: var(--white-opacity0);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-surface-transparent-full: var(--gray900-opacity0);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-surface-bold-transparent50: var(--gray25-opacity50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-surface-bold-transparent50: var(--gray950-opacity50);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-surface-bold-transparent20: var(--gray25-opacity20);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-surface-bold-transparent20: var(--gray950-opacity20);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-surface-bold-transparent-full: var(--gray25-opacity0);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-surface-bold-transparent-full: var(--gray950-opacity0);\r\n }\r\n}\r\n\r\n/* -----------------Shadow and Blur----------------- */\r\n:root {\r\n --shadow-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\r\n --shadow-sm: 0px 1px 3px 0px rgba(16, 24, 40, 0.1), 0px 1px 2px 0px rgba(16, 24, 40, 0.06);\r\n --shadow-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);\r\n --shadow-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);\r\n --shadow-xl: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);\r\n --shadow-2xl: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);\r\n --shadow-3xl: 0px 32px 64px -12px rgba(16, 24, 40, 0.14);\r\n\r\n --blur-sm: blur(4px);\r\n --blur-md: blur(8px);\r\n --blur-lg: blur(12px);\r\n --blur-xl: blur(20px);\r\n}\r\n\r\n.shadow-xs {\r\n box-shadow: var(--shadow-xs);\r\n}\r\n\r\n.shadow-sm {\r\n box-shadow: var(--shadow-sm);\r\n}\r\n\r\n.shadow-md {\r\n box-shadow: var(--shadow-md);\r\n}\r\n\r\n.shadow-lg {\r\n box-shadow: var(--shadow-lg);\r\n}\r\n\r\n.shadow-xl {\r\n box-shadow: var(--shadow-xl);\r\n}\r\n\r\n.shadow-2xl {\r\n box-shadow: var(--shadow-2xl);\r\n}\r\n\r\n.shadow-3xl {\r\n box-shadow: var(--shadow-3xl);\r\n}\r\n\r\n.blur-sm {\r\n backdrop-filter: var(--blur-sm);\r\n}\r\n\r\n.blur-md {\r\n backdrop-filter: var(--blur-md);\r\n}\r\n\r\n.blur-lg {\r\n backdrop-filter: var(--blur-lg);\r\n}\r\n\r\n.blur-xl {\r\n backdrop-filter: var(--blur-xl);\r\n}\r\n\r\n/* -----------------Gradients----------------- */\r\n:root {\r\n /* Gray Gradients */\r\n /* --gray-gradient-600: linear-gradient(); */\r\n --gradient-gray-600-to-500-90d: linear-gradient(90deg, var(--gray-600), var(--gray-500));\r\n --gradient-gray-700-to-600-45d: linear-gradient(45deg, var(--gray-700), var(--gray-600));\r\n --gradient-gray-800-to-600-45d: linear-gradient(45deg, var(--gray-800), var(--gray-600));\r\n --gradient-gray-800-to-600-90d: linear-gradient(90deg, var(--gray-800), var(--gray-600));\r\n --gradient-gray-800-to-700265-d: linear-gradient(26.5deg, var(--gray-800), var(--gray-700));\r\n --gradient-gray-900-to-600-45d: linear-gradient(45deg, var(--gray-900), var(--gray-600));\r\n\r\n /* Brand Dark Blue Gradients */\r\n --gradient-darkBlue-500-to-400-90d: linear-gradient(90deg, var(--brandDarkBlue-500), var(--brandDarkBlue-400));\r\n --gradient-darkBlue-700-to-500-45d: linear-gradient(45deg, var(--brandDarkBlue-700), var(--brandDarkBlue-500));\r\n --gradient-darkBlue-700-to-400-45d: linear-gradient(45deg, var(--brandDarkBlue-700), var(--brandDarkBlue-400));\r\n --gradient-darkBlue-800-to-500-90d: linear-gradient(90deg, var(--brandDarkBlue-800), var(--brandDarkBlue-500));\r\n --gradient-darkBlue-800-to-600265-d: linear-gradient(26.5deg, var(--brandDarkBlue-800), var(--brandDarkBlue-600));\r\n --gradient-darkBlue-900-to-600-45d: linear-gradient(45deg, var(--brandDarkBlue-900), var(--brandDarkBlue-600));\r\n\r\n /* Brand Red Gradients */\r\n --gradient-red-500-to-400-90d: linear-gradient(90deg, var(--brandRed-600), var(--brandRed-400));\r\n --gradient-red-700-to-500-45d: linear-gradient(45deg, var(--brandRed-700), var(--brandRed-500));\r\n --gradient-red-700-to-400-45d: linear-gradient(45deg, var(--brandRed-700), var(--brandRed-400));\r\n --gradient-red-800-to-500-90d: linear-gradient(90deg, var(--brandRed-800), var(--brandRed-500));\r\n --gradient-red-800-to-600265-d: linear-gradient(26.5deg, var(--brandRed-800), var(--brandRed-600));\r\n --gradient-red-900-to-600-45d: linear-gradient(45deg, var(--brandRed-900), var(--brandRed-600));\r\n\r\n /* Blue Gradients */\r\n --gradient-blue-500-to-400-90d: linear-gradient(90deg, var(--blue-500), var(--blue-400));\r\n --gradient-blue-700-to-500-45d: linear-gradient(45deg, var(--blue-700), var(--blue-500));\r\n --gradient-blue-700-to-400-45d: linear-gradient(45deg, var(--blue-700), var(--blue-400));\r\n --gradient-blue-800-to-500-90d: linear-gradient(90deg, var(--blue-800), var(--blue-500));\r\n --gradient-blue-800-to-600265-d: linear-gradient(26.5deg, var(--blue-800), var(--blue-600));\r\n --gradient-blue-900-to-600-45d: linear-gradient(45deg, var(--blue-900), var(--blue-600));\r\n}\r\n\r\n.gradient-gray-600-to-500-90d {\r\n background: var(--gradient-gray-600-to-500-90d);\r\n}\r\n\r\n.gradient-gray-700-to-600-45d {\r\n background: var(--gradient-gray-700-to-600-45d);\r\n}\r\n\r\n.gradient-gray-800-to-600-45d {\r\n background: var(--gradient-gray-800-to-600-45d);\r\n}\r\n\r\n.gradient-gray-800-to-600-90d {\r\n background: var(--gradient-gray-800-to-600-90d);\r\n}\r\n\r\n.gradient-gray-800-to-700265-d {\r\n background: var(--gradient-gray-800-to-700265-d);\r\n}\r\n\r\n.gradient-gray-900-to-600-45d {\r\n background: var(--gradient-gray-900-to-600-45d);\r\n}\r\n\r\n.gradient-darkBlue-500-to-400-90d {\r\n background: var(--gradient-darkBlue-500-to-400-90d);\r\n}\r\n\r\n.gradient-darkBlue-700-to-500-45d {\r\n background: var(--gradient-darkBlue-700-to-500-45d);\r\n}\r\n\r\n.gradient-darkBlue-700-to-400-45d {\r\n background: var(--gradient-darkBlue-700-to-400-45d);\r\n}\r\n\r\n.gradient-darkBlue-800-to-500-90d {\r\n background: var(--gradient-darkBlue-800-to-500-90d);\r\n}\r\n\r\n.gradient-darkBlue-800-to-600265-d {\r\n background: var(--gradient-darkBlue-800-to-600265-d);\r\n}\r\n\r\n.gradient-darkBlue-900-to-600-45d {\r\n background: var(--gradient-darkBlue-900-to-600-45d);\r\n}\r\n\r\n.gradient-red-500-to-400-90d {\r\n background: var(--gradient-red-500-to-400-90d);\r\n}\r\n\r\n.gradient-red-700-to-500-45d {\r\n background: var(--gradient-red-700-to-500-45d);\r\n}\r\n\r\n.gradient-red-700-to-400-45d {\r\n background: var(--gradient-red-700-to-400-45d);\r\n}\r\n\r\n.gradient-red-800-to-500-90d {\r\n background: var(--gradient-red-800-to-500-90d);\r\n}\r\n\r\n.gradient-red-800-to-600265-d {\r\n background: var(--gradient-red-800-to-600265-d);\r\n}\r\n\r\n.gradient-red-900-to-600-45d {\r\n background: var(--gradient-red-900-to-600-45d);\r\n}\r\n\r\n.gradient-blue-500-to-400-90d {\r\n background: var(--gradient-blue-500-to-400-90d);\r\n}\r\n\r\n.gradient-blue-700-to-500-45d {\r\n background: var(--gradient-blue-700-to-500-45d);\r\n}\r\n\r\n.gradient-blue-700-to-400-45d {\r\n background: var(--gradient-blue-700-to-400-45d);\r\n}\r\n\r\n.gradient-blue-800-to-500-90d {\r\n background: var(--gradient-blue-800-to-500-90d);\r\n}\r\n\r\n.gradient-blue-800-to-600265-d {\r\n background: var(--gradient-blue-800-to-600265-d);\r\n}\r\n\r\n.gradient-blue-900-to-600-45d {\r\n background: var(--gradient-blue-900-to-600-45d);\r\n}\r\n\r\n/* Spacing Styles */\r\n:root {\r\n /* Positive spacing */\r\n --spacing-none: 0rem;\r\n --spacing-half: 0.125rem;\r\n --spacing-1: 0.25rem;\r\n --spacing-2: 0.5rem;\r\n --spacing-3: 0.75rem;\r\n --spacing-4: 1rem;\r\n --spacing-5: 1.25rem;\r\n --spacing-6: 1.5rem;\r\n --spacing-7: 2rem;\r\n --spacing-8: 2.5rem;\r\n --spacing-12: 3rem;\r\n --spacing-16: 4rem;\r\n --spacing-20: 5rem;\r\n --spacing-24: 6rem;\r\n --spacing-32: 8rem;\r\n --spacing-40: 10rem;\r\n --spacing-48: 12rem;\r\n --spacing-56: 14rem;\r\n --spacing-64: 16rem;\r\n\r\n /* Negative spacing */\r\n\r\n --spacing-negative-half: -0.125rem;\r\n --spacing-negative-1: -0.25rem;\r\n --spacing-negative-2: -0.5rem;\r\n --spacing-negative-3: -0.75rem;\r\n --spacing-negative-4: -1rem;\r\n --spacing-negative-5: -1.25rem;\r\n --spacing-negative-6: -1.5rem;\r\n --spacing-negative-7: -2rem;\r\n\r\n /* Radius */\r\n --rounded-none: 0rem;\r\n --rounded-xs: 0.25rem;\r\n --rounded-sm: 0.5rem;\r\n --rounded-md: 0.75rem;\r\n --rounded-lg: 1rem;\r\n --rounded-xl: 1.5rem;\r\n --rounded-2xl: 2rem;\r\n --rounded-full: 62.438rem;\r\n}\r\n\r\n/* Typography Styles */\r\n@import url('https://fonts.googleapis.com/css2?family=Sora&display=swap');\r\n\r\n:root {\r\n /* Font Sizes */\r\n --font-size-d-2xl: 4.5rem;\r\n --font-size-d-xl: 3.75rem;\r\n --font-size-d-lg: 3rem;\r\n --font-size-d-md: 2.25rem;\r\n --font-size-d-sm: 1.875rem;\r\n --font-size-d-xs: 1.5rem;\r\n --font-size-t-xl: 1.25rem;\r\n --font-size-t-lg: 1.125rem;\r\n --font-size-t-md: 1rem;\r\n --font-size-t-sm: 0.875rem;\r\n --font-size-t-xs: 0.75rem;\r\n --font-size-t-xxs: 0.625rem;\r\n\r\n /* Font Weights */\r\n --font-weight-bold: 700;\r\n --font-weight-semi-bold: 600;\r\n --font-weight-medium: 500;\r\n --font-weight-regular: 400;\r\n\r\n /* Line Heights */\r\n --font-line-height-d-2xl: 5rem;\r\n --font-line-height-d-xl: 4.25rem;\r\n --font-line-height-d-lg: 3.75rem;\r\n --font-line-height-d-md: 2.75rem;\r\n --font-line-height-d-sm: 2.375rem;\r\n --font-line-height-d-xs: 2rem;\r\n --font-line-height-t-xl: 2rem;\r\n --font-line-height-t-lg: 1.875rem;\r\n --font-line-height-t-md: 1.688rem;\r\n --font-line-height-t-sm: 1.5rem;\r\n --font-line-height-t-xs: 1.25rem;\r\n --font-line-height-t-xxs: 1.125rem;\r\n\r\n /* Letter Spacings */\r\n --font-letter-spacing-d-2xl: -0.09rem;\r\n --font-letter-spacing-d-xl: -0.075rem;\r\n --font-letter-spacing-d-lg: -0.075rem;\r\n --font-letter-spacing-d-md: -0.045rem;\r\n --font-letter-spacing-d-sm: 0;\r\n --font-letter-spacing-d-xs: 0;\r\n --font-letter-spacing-d-xxs: 0;\r\n\r\n /* Font Families */\r\n --font-family-title: 'Sora';\r\n --font-family-body: 'Sora';\r\n}\r\n\r\n/* Media queries for medium screens (tablet) */\r\n@media (max-width: 1199px) {\r\n :root {\r\n /* Font Sizes */\r\n --font-size-d-2xl: 3.75rem;\r\n --font-size-d-xl: 3.5rem;\r\n --font-size-d-lg: 2.75rem;\r\n --font-size-d-md: 2.25rem;\r\n --font-size-d-sm: 1.875rem;\r\n --font-size-d-xs: 1.5rem;\r\n\r\n /* Line Heights */\r\n --font-line-height-d-2xl: 4.25rem;\r\n --font-line-height-d-xl: 3.75rem;\r\n --font-line-height-d-lg: 2.4375rem;\r\n --font-line-height-d-md: 2.75rem;\r\n --font-line-height-d-sm: 2.375rem;\r\n --font-line-height-d-xs: 2rem;\r\n\r\n /* Letter Spacings */\r\n --font-letter-spacing-2xl: -0.075rem;\r\n --font-letter-spacing-xl: -0.065rem;\r\n --font-letter-spacing-lg: -0.045rem;\r\n --font-letter-spacing-md: -0.045rem;\r\n --font-letter-spacing-sm: 0rem;\r\n --font-letter-spacing-xs: 0rem;\r\n }\r\n}\r\n\r\n/* Media queries for smaller screens (mobile) */\r\n@media (max-width: 743px) {\r\n :root {\r\n /* Font Sizes */\r\n --font-size-d-2xl: 3rem;\r\n --font-size-d-xl: 2.5rem;\r\n --font-size-d-lg: 2rem;\r\n --font-size-d-md: 1.75rem;\r\n --font-size-d-sm: 1.5rem;\r\n --font-size-d-xs: 1.25rem;\r\n\r\n /* Line Heights */\r\n --font-line-height-d-2xl: 3.375rem;\r\n --font-line-height-d-xl: 2.875rem;\r\n --font-line-height-d-lg: 2.5rem;\r\n --font-line-height-d-md: 2.1375rem;\r\n --font-line-height-d-sm: 2rem;\r\n --font-line-height-d-xs: 1.75rem;\r\n\r\n /* Letter Spacings */\r\n --font-letter-spacing-2xl: -0.06rem;\r\n --font-letter-spacing-xl: -0.05rem;\r\n --font-letter-spacing-lg: -0.045rem;\r\n --font-letter-spacing-md: 0rem;\r\n --font-letter-spacing-sm: 0rem;\r\n --font-letter-spacing-xs: 0rem;\r\n }\r\n}\r\n\r\n.display-2xl-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-2xl);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-d-2xl);\r\n letter-spacing: var(--font-letter-spacing-d-2xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-2xl-bold::before,\r\n.display-2xl-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-2xl-bold::before {\r\n margin-bottom: -0.135em;\r\n}\r\n\r\n.display-2xl-bold::after {\r\n margin-top: -0.205em;\r\n}\r\n\r\n.display-2xl-semi-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-2xl);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-d-2xl);\r\n letter-spacing: var(--font-letter-spacing-d-2xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-2xl-semi-bold::before,\r\n.display-2xl-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-2xl-semi-bold::before {\r\n margin-bottom: -0.135em;\r\n}\r\n\r\n.display-2xl-semi-bold::after {\r\n margin-top: -0.205em;\r\n}\r\n\r\n.display-xl-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-xl);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-d-xl);\r\n letter-spacing: var(--font-letter-spacing-d-xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-xl-bold::before,\r\n.display-xl-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-xl-bold::before {\r\n margin-bottom: -0.145em;\r\n}\r\n\r\n.display-xl-bold::after {\r\n margin-top: -0.215em;\r\n}\r\n\r\n.display-xl-semi-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-xl);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-d-xl);\r\n letter-spacing: var(--font-letter-spacing-d-xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-xl-semi-bold::before,\r\n.display-xl-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-xl-semi-bold::before {\r\n margin-bottom: -0.145em;\r\n}\r\n\r\n.display-xl-semi-bold::after {\r\n margin-top: -0.215em;\r\n}\r\n\r\n.display-lg-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-lg);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-d-lg);\r\n letter-spacing: var(--font-letter-spacing-d-lg);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-lg-bold::before,\r\n.display-lg-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-lg-bold::before {\r\n margin-bottom: -0.015em;\r\n}\r\n\r\n.display-lg-bold::after {\r\n margin-top: -0.095em;\r\n}\r\n\r\n.display-lg-semi-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-lg);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-d-lg);\r\n letter-spacing: var(--font-letter-spacing-d-lg);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-lg-semi-bold::before,\r\n.display-lg-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-lg-semi-bold::before {\r\n margin-bottom: -0.015em;\r\n}\r\n\r\n.display-lg-semi-bold::after {\r\n margin-top: -0.095em;\r\n}\r\n\r\n.display-md-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-md);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-d-md);\r\n letter-spacing: var(--font-letter-spacing-d-md);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-md-bold::before,\r\n.display-md-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-md-bold::before {\r\n margin-bottom: -0.195em;\r\n}\r\n\r\n.display-md-bold::after {\r\n margin-top: -0.255em;\r\n}\r\n\r\n.display-md-semi-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-md);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-d-md);\r\n letter-spacing: var(--font-letter-spacing-d-md);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-md-semi-bold::before,\r\n.display-md-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-md-semi-bold::before {\r\n margin-bottom: -0.195em;\r\n}\r\n\r\n.display-md-semi-bold::after {\r\n margin-top: -0.255em;\r\n}\r\n\r\n.display-sm-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-sm);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-d-sm);\r\n letter-spacing: var(--font-letter-spacing-d-sm);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-sm-bold::before,\r\n.display-sm-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-sm-bold::before {\r\n margin-bottom: -0.195em;\r\n}\r\n\r\n.display-sm-bold::after {\r\n margin-top: -0.255em;\r\n}\r\n\r\n.display-sm-semi-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-sm);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-d-sm);\r\n letter-spacing: var(--font-letter-spacing-d-sm);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-sm-semi-bold::before,\r\n.display-sm-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-sm-semi-bold::before {\r\n margin-bottom: -0.195em;\r\n}\r\n\r\n.display-sm-semi-bold::after {\r\n margin-top: -0.255em;\r\n}\r\n\r\n.display-xs-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-xs);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-d-xs);\r\n letter-spacing: var(--font-letter-spacing-d-xs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-xs-bold::before,\r\n.display-xs-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-xs-bold::before {\r\n margin-bottom: -0.199em;\r\n}\r\n\r\n.display-xs-bold::after {\r\n margin-top: -0.195em; /* Continue from here */\r\n}\r\n\r\n.display-xs-semi-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-xs);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-d-xs);\r\n letter-spacing: var(--font-letter-spacing-d-xs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-xs-semi-bold::before,\r\n.display-xs-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-xs-semi-bold::before {\r\n margin-bottom: -0.259em;\r\n}\r\n\r\n.display-xs-semi-bold::after {\r\n margin-top: -0.295em;\r\n}\r\n\r\n.text-xl-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xl);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-t-xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xl-bold::before,\r\n.text-xl-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xl-bold::before {\r\n margin-bottom: -0.329em;\r\n}\r\n\r\n.text-xl-bold::after {\r\n margin-top: -0.359em;\r\n}\r\n\r\n.text-xl-semi-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xl);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-t-xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xl-semi-bold::before,\r\n.text-xl-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xl-semi-bold::before {\r\n margin-bottom: -0.329em;\r\n}\r\n\r\n.text-xl-semi-bold::after {\r\n margin-top: -0.359em;\r\n}\r\n\r\n.text-xl-medium {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xl);\r\n font-weight: var(--font-weight-medium);\r\n line-height: var(--font-line-height-t-xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xl-medium::before,\r\n.text-xl-medium::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xl-medium::before {\r\n margin-bottom: -0.339em;\r\n}\r\n\r\n.text-xl-medium::after {\r\n margin-top: -0.399em;\r\n}\r\n\r\n.text-xl-regular {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xl);\r\n font-weight: var(--font-weight-regular);\r\n line-height: var(--font-line-height-t-xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xl-regular::before,\r\n.text-xl-regular::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xl-regular::before {\r\n margin-bottom: -0.339em;\r\n}\r\n\r\n.text-xl-regular::after {\r\n margin-top: -0.399em;\r\n}\r\n\r\n.text-lg-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-lg);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-t-lg);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-lg-bold::before,\r\n.text-lg-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-lg-bold::before {\r\n margin-bottom: -0.339em;\r\n}\r\n\r\n.text-lg-bold::after {\r\n margin-top: -0.399em;\r\n}\r\n\r\n.text-lg-semi-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-lg);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-t-lg);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-lg-semi-bold::before,\r\n.text-lg-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-lg-semi-bold::before {\r\n margin-bottom: -0.339em;\r\n}\r\n\r\n.text-lg-semi-bold::after {\r\n margin-top: -0.399em;\r\n}\r\n\r\n.text-lg-medium {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-lg);\r\n font-weight: var(--font-weight-medium);\r\n line-height: var(--font-line-height-t-lg);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-lg-medium::before,\r\n.text-lg-medium::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-lg-medium::before {\r\n margin-bottom: -0.349em;\r\n}\r\n\r\n.text-lg-medium::after {\r\n margin-top: -0.389em;\r\n}\r\n\r\n.text-lg-regular {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-lg);\r\n font-weight: var(--font-weight-regular);\r\n line-height: var(--font-line-height-t-lg);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-lg-regular::before,\r\n.text-lg-regular::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-lg-regular::before {\r\n margin-bottom: -0.349em;\r\n}\r\n\r\n.text-lg-regular::after {\r\n margin-top: -0.389em;\r\n}\r\n\r\n.text-md-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-md);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-t-md);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-md-bold::before,\r\n.text-md-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-md-bold::before {\r\n margin-bottom: -0.349em;\r\n}\r\n\r\n.text-md-bold::after {\r\n margin-top: -0.389em;\r\n}\r\n\r\n.text-md-semi-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-md);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-t-md);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-md-semi-bold::before,\r\n.text-md-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-md-semi-bold::before {\r\n margin-bottom: -0.349em;\r\n}\r\n\r\n.text-md-semi-bold::after {\r\n margin-top: -0.389em;\r\n}\r\n\r\n.text-md-medium {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-md);\r\n font-weight: var(--font-weight-medium);\r\n line-height: var(--font-line-height-t-md);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-md-medium::before,\r\n.text-md-medium::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-md-medium::before {\r\n margin-bottom: -0.349em;\r\n}\r\n\r\n.text-md-medium::after {\r\n margin-top: -0.389em;\r\n}\r\n\r\n.text-md-regular {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-md);\r\n font-weight: var(--font-weight-regular);\r\n line-height: var(--font-line-height-t-md);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-md-regular::before,\r\n.text-md-regular::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-md-regular::before {\r\n margin-bottom: -0.349em;\r\n}\r\n\r\n.text-md-regular::after {\r\n margin-top: -0.389em;\r\n}\r\n\r\n.text-sm-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-sm);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-t-sm);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-sm-bold::before,\r\n.text-sm-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-sm-bold::before {\r\n margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-bold::after {\r\n margin-top: -0.349em;\r\n}\r\n\r\n.text-sm-semi-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-sm);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-t-sm);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-sm-semi-bold::before,\r\n.text-sm-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-sm-semi-bold::before {\r\n margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-semi-bold::after {\r\n margin-top: -0.349em;\r\n}\r\n\r\n.text-sm-medium {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-sm);\r\n font-weight: var(--font-weight-medium);\r\n line-height: var(--font-line-height-t-sm);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n position: relative;\r\n display: inline-block;\r\n}\r\n\r\n.text-sm-medium::before,\r\n.text-sm-medium::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-sm-medium::before {\r\n margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-medium::after {\r\n margin-top: -0.299em;\r\n}\r\n\r\n.text-sm-regular {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-sm);\r\n font-weight: var(--font-weight-regular);\r\n line-height: var(--font-line-height-t-sm);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n position: relative;\r\n display: inline-block;\r\n}\r\n\r\n.text-sm-regular::before,\r\n.text-sm-regular::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-sm-regular::before {\r\n margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-regular::after {\r\n margin-top: -0.299em;\r\n}\r\n\r\n.text-xs-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xs);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-t-xs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xs-bold::before,\r\n.text-xs-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xs-bold::before {\r\n margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xs-bold::after {\r\n margin-top: -0.416em;\r\n}\r\n\r\n.text-xs-semi-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xs);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-t-xs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xs-semi-bold::before,\r\n.text-xs-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xs-semi-bold::before {\r\n margin-bottom: -0.321em;\r\n}\r\n\r\n.text-xs-semi-bold::after {\r\n margin-top: -0.416em;\r\n}\r\n\r\n.text-xs-medium {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xs);\r\n font-weight: var(--font-weight-medium);\r\n line-height: var(--font-line-height-t-xs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xs-medium::before,\r\n.text-xs-medium::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xs-medium::before {\r\n margin-bottom: -0.285em;\r\n}\r\n\r\n.text-xs-medium::after {\r\n margin-top: -0.396em;\r\n}\r\n\r\n.text-xs-regular {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xs);\r\n font-weight: var(--font-weight-regular);\r\n line-height: var(--font-line-height-t-xs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xs-regular::before,\r\n.text-xs-regular::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xs-regular::before {\r\n margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xs-regular::after {\r\n margin-top: -0.396em;\r\n}\r\n\r\n.text-xxs-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xxs);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-t-xxs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xxs-bold::before,\r\n.text-xxs-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xxs-bold::before {\r\n margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-bold::after {\r\n margin-top: -0.416em;\r\n}\r\n\r\n.text-xxs-semi-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xxs);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-t-xxs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xxs-semi-bold::before,\r\n.text-xxs-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xxs-semi-bold::before {\r\n margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-semi-bold::after {\r\n margin-top: -0.416em;\r\n}\r\n\r\n.text-xxs-medium {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xxs);\r\n font-weight: var(--font-weight-medium);\r\n line-height: var(--font-line-height-t-xxs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xxs-medium::before,\r\n.text-xxs-medium::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xxs-medium::before {\r\n margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-medium::after {\r\n margin-top: -0.416em;\r\n}\r\n\r\n.text-xxs-regular {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xxs);\r\n font-weight: var(--font-weight-regular);\r\n line-height: var(--font-line-height-t-xxs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xxs-regular::before,\r\n.text-xxs-regular::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xxs-regular::before {\r\n margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-regular::after {\r\n margin-top: -0.416em;\r\n}\r\n\r\n/* Button slot styles */\r\n/* .slotted_button_text.primary {\r\n color: var(--color-text-inverse, #ffffff) !important;\r\n}\r\n\r\n.slotted_button_text.secondary_gray {\r\n color: var(--color-text, #4b5565) !important;\r\n}\r\n\r\n.slotted_button_text.secondary_color {\r\n color: var(--color-text-brandRed, #e21b2e) !important;\r\n}\r\n\r\n.slotted_button_text.tertiary_gray {\r\n color: var(--color-text, #4b5565) !important;\r\n}\r\n\r\n.slotted_button_text.tertiary_color {\r\n color: var(--color-text-brandRed, #e21b2e) !important;\r\n}\r\n\r\n.slotted_button_text.link_gray {\r\n color: var(--color-text, #4b5565) !important;\r\n}\r\n\r\n.slotted_button_text.link_color {\r\n color: var(--color-link, #075db2) !important;\r\n}\r\n\r\n.slotted_button_text.primary.destructive {\r\n color: var(--color-text-inverse, #ffffff) !important;\r\n}\r\n\r\n#slotted_button_text.primary.disabled,\r\n#slotted_button_text.secondary_gray.disabled,\r\n#slotted_button_text.secondary_color.disabled,\r\n#slotted_button_text.tertiary_gray.disabled,\r\n#slotted_button_text.tertiary_color.disabled,\r\n#slotted_button_text.link_gray.disabled,\r\n#slotted_button_text.link_color.disabled {\r\n color: var(--color-text-disabled, #9aa4b2) !important;\r\n}\r\n\r\n#slotted_button_text.secondary_gray.default.destructive,\r\n#slotted_button_text.secondary_color.default.destructive,\r\n#slotted_button_text.tertiary_gray.default.destructive,\r\n#slotted_button_text.tertiary_color.default.destructive,\r\n#slotted_button_text.link_gray.default.destructive,\r\n#slotted_button_text.link_color.default.destructive {\r\n color: var(--color-text-danger, #b51726) !important;\r\n} */\r\n\r\n:host{\r\n width: fit-content;\r\n}\r\n\r\n.featured_icon_div {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n flex-shrink: 0;\r\n border: 1px solid var(--color-border-subtler, #e3e8ef);\r\n background: var(--color-background-card, #ffffff);\r\n box-shadow: var(--shadow-xs);\r\n}\r\n\r\n.featured_icon_div.sm {\r\n padding: var(--spacing-2);\r\n border-radius: 0.375rem;\r\n}\r\n\r\n.featured_icon_div.md {\r\n padding: 0.625rem;\r\n border-radius: var(--rounded-sm);\r\n}\r\n\r\n.featured_icon_div.lg {\r\n padding: 0.75rem;\r\n border-radius: 0.625rem;\r\n}\r\n\r\n.featured_icon_div.xl {\r\n width: 3.5rem;\r\n height: 3.5rem;\r\n padding: 0.875rem;\r\n border-radius: var(--rounded-md);\r\n}\r\n\r\n.icon{\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\n.icon.sm svg {\r\n width: 1rem;\r\n height: 1rem;\r\n}\r\n\r\n.icon.md svg {\r\n width: 1.25rem;\r\n height: 1.25rem;\r\n}\r\n\r\n.icon.lg svg {\r\n width: 1.5rem;\r\n height: 1.5rem;\r\n}\r\n\r\n.icon.xl svg {\r\n width: 1.75rem;\r\n height: 1.75rem;\r\n}\r\n\r\n.icon path[stroke] {\r\n stroke: var(--color-icon-subtle, #697586);\r\n}\r\n\r\n.icon.destructive path[stroke] {\r\n stroke: var(--color-icon-danger, #B51726);\r\n}\r\n\r\n.icon path[fill] {\r\n fill: var(--color-icon-subtle, #697586);\r\n}\r\n\r\n.icon.destructive path[fill] {\r\n fill: var(--color-icon-danger, #B51726);\r\n}\r\n\r\n.featured_icon_div.destructive{\r\n border: 1px solid var(--color-border-danger, #B51726);\r\n background: var(--color-background-danger-subtlest, #FEF1F2);\r\n}";
|
|
4142
|
+
|
|
4143
|
+
const GbFeaturedIcon = class {
|
|
4144
|
+
constructor(hostRef) {
|
|
4145
|
+
registerInstance(this, hostRef);
|
|
4146
|
+
this.destructive = false;
|
|
4147
|
+
this.icon = '';
|
|
4148
|
+
this.leadingIconSvg = '';
|
|
4149
|
+
}
|
|
4150
|
+
async loadIcon(iconName) {
|
|
4151
|
+
const iconPath = getAssetPath(`${iconName}`);
|
|
4152
|
+
const response = await fetch(iconPath);
|
|
4153
|
+
const svg = await response.text();
|
|
4154
|
+
this.leadingIconSvg = svg;
|
|
4155
|
+
}
|
|
4156
|
+
componentWillLoad() {
|
|
4157
|
+
this.loadIcon(this.icon);
|
|
4158
|
+
}
|
|
4159
|
+
render() {
|
|
4160
|
+
return (h("div", { key: 'c5a993731a5530b8c1f5e5df7e7e6797b5d9c097', class: `featured_icon_div ${this.size} ${this.destructive ? 'destructive' : ''}` }, h("div", { key: '759b8e5711cc53ba14f277e2c222f0cf5348bc77', class: `icon ${this.size} ${this.destructive ? 'destructive' : ''}`, innerHTML: this.leadingIconSvg })));
|
|
4161
|
+
}
|
|
4162
|
+
};
|
|
4163
|
+
GbFeaturedIcon.style = gbFeaturedIconCss;
|
|
4164
|
+
|
|
4085
4165
|
const gbFileTypeIconCss = "";
|
|
4086
4166
|
|
|
4087
4167
|
const GbFileTypeIcon = class {
|
|
@@ -4465,6 +4545,77 @@ const GbIconButtonBase = class {
|
|
|
4465
4545
|
};
|
|
4466
4546
|
GbIconButtonBase.style = gbIconButtonBaseCss;
|
|
4467
4547
|
|
|
4548
|
+
const gbIllustrationCss = ".illustration_wrapper{position:relative;width:fit-content}.illustration_background{height:fit-content}.illustration_background.lg{width:13.75rem}.illustration_background.md{width:10.75rem}.illustration_background.sm{width:9.5rem}.illustration_div{padding-top:var(--spacing-4)}.cloud,.box,.documents,.credit_card{position:absolute}.cloud.lg{width:13rem;height:auto;left:0.35rem;top:1.7rem}.cloud.md{width:10.6rem;height:auto;left:0.1rem;top:1.4rem}.cloud.sm{width:9.5rem;height:7rem;left:0rem;top:0.8rem}.box.sm{width:7.25rem;height:auto;left:1.2rem;top:0rem}.box.md{width:8.25rem;height:auto;left:1.2rem;top:0rem}.box.lg{width:10.25rem;height:auto;left:1.8rem;top:-0.1rem}.documents.sm{width:9.75rem;height:auto;left:-0.2rem;top:1rem}.documents.md{width:10.25rem;height:auto;left:0.2rem;top:1rem}.documents.lg{width:13.25rem;height:auto;left:0.2rem;top:1.3rem}.credit_card.sm{width:8.55rem;height:auto;left:0.5rem;top:1.5rem}.credit_card.md{width:9.85rem;height:auto;left:0.4rem;top:1.5rem}.credit_card.lg{width:12.55rem;height:auto;left:0.7rem;top:2.1rem}.icon_div{display:flex;justify-content:center;align-items:center;backdrop-filter:blur(4px);border-radius:var(--rounded-full);position:absolute;bottom:2rem;translate:transform(-50%, -50%);height:fit-content}.icon_div.primary{background:var(--color-blanket, rgba(33, 44, 101, 0.4))}.icon_div.gray{background:var(--color-blanket-subtler, rgba(33, 44, 101, 0.2))}.icon_div.lg,.icon_div.md{padding:0.875rem}.icon_div.lg{top:55%;left:36%}.icon_div.md{padding:0.875rem;top:50%;left:35%}.icon_div.sm{padding:0.75rem;top:57%;left:35%}.icon{display:flex;justify-content:center;align-items:center}.icon.lg,.icon.md{width:1.75rem;height:1.75rem}.icon.sm{width:1.5rem;height:1.5rem}";
|
|
4549
|
+
|
|
4550
|
+
const GbIllustration = class {
|
|
4551
|
+
constructor(hostRef) {
|
|
4552
|
+
registerInstance(this, hostRef);
|
|
4553
|
+
this.size = 'sm';
|
|
4554
|
+
this.color = 'gray';
|
|
4555
|
+
this.illustrationIcon = '';
|
|
4556
|
+
this.theme = 'system';
|
|
4557
|
+
this.leadingIconSvg = '';
|
|
4558
|
+
}
|
|
4559
|
+
async loadIcon(iconName) {
|
|
4560
|
+
const iconPath = getAssetPath(`${iconName}`);
|
|
4561
|
+
const response = await fetch(iconPath);
|
|
4562
|
+
const svg = await response.text();
|
|
4563
|
+
// Parse SVG into DOM
|
|
4564
|
+
const parser = new DOMParser();
|
|
4565
|
+
const svgDoc = parser.parseFromString(svg, 'image/svg+xml');
|
|
4566
|
+
const svgElement = svgDoc.documentElement;
|
|
4567
|
+
// Select all path tags with an opacity attribute
|
|
4568
|
+
const pathsWithOpacity = svgElement.querySelectorAll('path[opacity]');
|
|
4569
|
+
const gWithOpacity = svgElement.querySelectorAll('g[opacity]');
|
|
4570
|
+
// Add a class to each
|
|
4571
|
+
pathsWithOpacity.forEach(path => {
|
|
4572
|
+
path.classList.add('has_opacity');
|
|
4573
|
+
});
|
|
4574
|
+
gWithOpacity.forEach(g => {
|
|
4575
|
+
g.classList.add('has_opacity');
|
|
4576
|
+
});
|
|
4577
|
+
// Convert the modified SVG back to a string
|
|
4578
|
+
const modifiedSvg = svgElement.outerHTML;
|
|
4579
|
+
// Save or inject it into your component
|
|
4580
|
+
this.leadingIconSvg = modifiedSvg;
|
|
4581
|
+
}
|
|
4582
|
+
componentWillLoad() {
|
|
4583
|
+
this.loadIcon(this.illustrationIcon);
|
|
4584
|
+
}
|
|
4585
|
+
render() {
|
|
4586
|
+
return (h("div", { key: '23694d51ec8198cf05bf75ffa8df54e8a63a7b1f', class: `illustration_wrapper` }, h("svg", { key: '3f1c4f06154127986e0421e4ca6749ba78b7170e', xmlns: "http://www.w3.org/2000/svg", width: "220", height: "168", viewBox: "0 0 220 168", fill: "none", class: `illustration_background ${this.size}` }, h("circle", { key: 'f45813d21caea35f1a68dac9d344ec827eb93cba', cx: "110", cy: "88", r: "80", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtlest, #E4F0FC)' : this.color === 'gray' ? 'var(--color-background-gray-subtlest, #F6F8FA)' : ''}` }), h("circle", { key: '2a65d1e16a0a53a8dcd8cdd549635b1afdbfc589', cx: "26", cy: "28", r: "8", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtler, #C8E0F9)' : this.color === 'gray' ? 'var(--color-background-gray-subtler, #EEF2F6)' : ''}` }), h("circle", { key: '8946d1b06ca05ae820a3b17f298c3814159ced4a', cx: "198", cy: "134", r: "6", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtler, #C8E0F9)' : this.color === 'gray' ? 'var(--color-background-gray-subtler, #EEF2F6)' : ''}` }), h("circle", { key: '9f786b5155544b048bff620e30cf417bc1f82ff1', cx: "25", cy: "146", r: "10", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtler, #C8E0F9)' : this.color === 'gray' ? 'var(--color-background-gray-subtler, #EEF2F6)' : ''}` }), h("circle", { key: 'f70a1845419c6eb1430ea5fac27f4ec14f679126', cx: "210", cy: "54", r: "10", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtler, #C8E0F9)' : this.color === 'gray' ? 'var(--color-background-gray-subtler, #EEF2F6)' : ''}` }), h("circle", { key: '4425c197fa3ac2efcdef81a014b4bcd5f7291622', cx: "191", cy: "19", r: "7", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtler, #C8E0F9)' : this.color === 'gray' ? 'var(--color-background-gray-subtler, #EEF2F6)' : ''}` })), h("div", { key: '526fce6f822e23384f4c7a447c24f3226a6f1701', class: "illustration_div" }, h("div", { key: 'bdab5ab61d709093c63546cd17adf68c52df671a', class: "illustration" }, this.illustrationStyle === 'cloud' && (h("svg", { key: '43ab0092b35564033c7944d37d35844b7140f507', xmlns: "http://www.w3.org/2000/svg", width: "214", height: "140", viewBox: "0 0 214 140", fill: "none", class: `cloud ${this.size}` }, h("g", { key: 'a9974145ab120dde69979c6f7b3a6124bff1394a', filter: "url(#filter0_dd_7590_639)" }, h("path", { key: '308ab8d203deb33d9ba9a64013d73b2ea17cb5ae', d: "M109.485 0C129.961 0 147.543 12.3802 155.161 30.0625C156.486 29.9093 157.834 29.8281 159.2 29.8281C178.42 29.8282 194 45.4095 194 64.6289C194 83.5478 178.903 98.9404 160.099 99.417L159.2 99.4287H59.7715L58.7451 99.416C37.2543 98.8717 20 81.2792 20 59.6572C20 37.6921 37.8063 19.8857 59.7715 19.8857C62.9248 19.8857 65.992 20.2546 68.9336 20.9482C77.9428 8.27072 92.7484 0.000119405 109.485 0Z", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtlest, #E4F0FC)' : 'var(--color-background-disabled, #F9FAFB)'}` }), h("circle", { key: '2cabf169ea8cc23aa533c297b40462ae613d14bc', cx: "59.7714", cy: "59.6572", r: "39.7714", fill: "url(#paint0_linear_7590_639)" }), h("circle", { key: '163313ce336eaac118d82fe766ffa768f213ac1f', cx: "109.486", cy: "49.7143", r: "49.7143", fill: "url(#paint1_linear_7590_639)" }), h("circle", { key: '8bc96c5a6eec8ad1bd138e07f213fd80efd51f84', cx: "159.2", cy: "64.6286", r: "34.8", fill: "url(#paint2_linear_7590_639)" })), h("defs", { key: 'f5dceaa0de98428c89cbe4f05d4f8349e988845e' }, h("filter", { key: '3e453d069d2cba8001b57283cf77aa47a5f256f1', id: "filter0_dd_7590_639", x: "0", y: "0", width: "214", height: "139.429", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" }, h("feFlood", { key: 'd65d6a63bd0e732858818b831dc4bd38474df053', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feColorMatrix", { key: '473df58925cc18f412b4efbd8b43cd03dccd9e7d', in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), h("feMorphology", { key: 'bfeb0181c638822eec351cb8ba1a405b95957a04', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect1_dropShadow_7590_639" }), h("feOffset", { key: 'c15a0bd9fd6599b9ec0b41991a0496bcc5f2b70d', dy: "8" }), h("feGaussianBlur", { key: '194300a9c1c5c78a8f250f0729749f65afd624f4', stdDeviation: "4" }), h("feColorMatrix", { key: 'f36d1fe8f0af74da9d064071c13f7bb67ff886c1', type: "matrix", values: "0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0" }), h("feBlend", { key: 'f5b19f63f231923781d80e1017f37f64149658d1', mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_7590_639" }), h("feColorMatrix", { key: '2efec2d3eb4583f4e6c5b4c7f0e232f7800a943b', in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), h("feMorphology", { key: 'e0d940af30c4186a7db69f1964e54d5f88e00184', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect2_dropShadow_7590_639" }), h("feOffset", { key: '9b8e32fe161acbce288336651081a194dd1b8a86', dy: "20" }), h("feGaussianBlur", { key: '813e381ae163be499b37d393d1a43b26f5fb3e67', stdDeviation: "12" }), h("feColorMatrix", { key: 'c0b3c678fbd2111421dd2fd11c4d196f1d936533', type: "matrix", values: "0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0" }), h("feBlend", { key: '3fded23352cd2a1d9f665510fe2688f49148d249', mode: "normal", in2: "effect1_dropShadow_7590_639", result: "effect2_dropShadow_7590_639" }), h("feBlend", { key: '52dc1246e3d1de3ac9ee9d3a346cbe72b52b7bde', mode: "normal", in: "SourceGraphic", in2: "effect2_dropShadow_7590_639", result: "shape" })), h("linearGradient", { key: 'ae5cde9827535f88a8ef965c1667433f4e10432b', id: "paint0_linear_7590_639", x1: "29.2326", y1: "33.3796", x2: "99.5429", y2: "99.4285", gradientUnits: "userSpaceOnUse" }, h("stop", { key: 'fc6bff5cbdd655b35fc75fbe171e45356e5637c8', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : this.color === 'gray' ? 'var(--color-background-gray, #CDD5DF)' : ''}` }), h("stop", { key: 'a09a4558dc3023536e0d473a7c8cff8c8ed85bc8', offset: "0.350715", "stop-color": "white", "stop-opacity": "0" })), h("linearGradient", { key: '56f0f601cffc90603c9b1d01481ebacf66a8b378', id: "paint1_linear_7590_639", x1: "71.3123", y1: "16.8673", x2: "159.2", y2: "99.4285", gradientUnits: "userSpaceOnUse" }, h("stop", { key: '3ee907a9f12d27b6c7dec346e06cc8cc70da399c', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : this.color === 'gray' ? 'var(--color-background-gray, #CDD5DF)' : ''}` }), h("stop", { key: '013c2e49d57a1618138c9fb4b7bb8015a2335bcd', offset: "0.350715", "stop-color": "white", "stop-opacity": "0" })), h("linearGradient", { key: '56fac35b73d44252dea721bdee3305161647af9a', id: "paint2_linear_7590_639", x1: "132.478", y1: "41.6358", x2: "194", y2: "99.4286", gradientUnits: "userSpaceOnUse" }, h("stop", { key: '4b7c836f976c3bee16517683d2a1aec7eb738ae9', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : this.color === 'gray' ? 'var(--color-background-gray, #CDD5DF)' : ''}` }), h("stop", { key: 'cd987d8bfe6b86e3c274b2c5cdb93aa3db40ca0a', offset: "0.350715", "stop-color": "white", "stop-opacity": "0" }))))), this.illustrationStyle === 'box' && (h("svg", { key: '9c57b6793c9f9ce0d8c5cda1dbc35ccd9acfb17a', xmlns: "http://www.w3.org/2000/svg", width: "168", height: "178", viewBox: "0 0 168 178", fill: "none", class: `box ${this.size}` }, h("g", { key: '45c3e10d34cc34d1cfb95ad59ee15ed1e017956e', filter: "url(#filter0_dd_7590_623)" }, h("path", { key: '64361db85e33114a460133228de8184299687fe3', d: "M84 54.9529L90.9121 52.0578L84.0009 55.002V137.432L147.69 110.743V28.2767L148 28.1466L147.69 28.009V27.8705L147.53 27.9384L84.5026 0L20 27.4765L20.3053 27.6076L20 109.74L84 137.383L84 54.9529Z", fill: "#F9FAFB" }), h("path", { key: 'f79bbcb21d8f125021714753e775557face5b035', d: "M84 54.953V137.383L20 109.739L20.3053 27.6075L84 54.953Z", fill: "url(#paint0_linear_7590_623)" }), h("path", { key: '8bf4b1b0264892eeefc7d570feec190d57d6ee61', d: "M84.0012 55.002V137.432L147.69 110.743V27.8705L84.0012 55.002Z", fill: "url(#paint1_linear_7590_623)" }), h("path", { key: '0a3ee5ad21f1a6b8d911f6aa2972d75ca6d29466', d: "M84 54.9529L148 28.1466L84.5026 0L20 27.4765L84 54.9529Z", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtler, #C8E0F9)' : 'var(--color-background-gray-subtler, #EEF2F6)'}` }), h("path", { key: 'f2a4ca30159bffb4fd98a91f4a6aa85d0d1aeaf3', d: "M44.1255 17.1998L107.881 44.9503L108.461 65.173L126.299 57.8126L125.759 37.4622L60.1172 10.3877L44.1255 17.1998Z", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtlest, #E4F0FC)' : 'var(--color-background-gray, #CDD5DF)'}` })), h("defs", { key: 'a889d39dd5445acec23bfe9e20ef8ae1b20ece37' }, h("filter", { key: '7a883df591bfb0892988f60de5e76cf662ac5a30', id: "filter0_dd_7590_623", x: "0", y: "0", width: "168", height: "177.432", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" }, h("feFlood", { key: 'd32df4bf6027cbbccb046fc50b5a70eae5d7ec39', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feColorMatrix", { key: '992b0d09321f95bf44597541572065151297109b', in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), h("feMorphology", { key: 'a3a03a2b9ab0e6e9b3106e36ed1191910d0a490b', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect1_dropShadow_7590_623" }), h("feOffset", { key: 'a11e9f89ee3a04e85f0f9e91fdd31bcafb0449a1', dy: "8" }), h("feGaussianBlur", { key: 'eef0b913f38aef7272a5377dfd23066a44e3be79', stdDeviation: "4" }), h("feColorMatrix", { key: '409b28a4ddc20b9fcb12fd459a5cbd8286821ecc', type: "matrix", values: "0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0" }), h("feBlend", { key: '3c06b91877e0a4e6a596f20ac71480f8f6c676f6', mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_7590_623" }), h("feColorMatrix", { key: 'f63119d97695cd981fa58be12e8be93e9ec3368d', in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), h("feMorphology", { key: '9fe8df5b5f8e5010080058a7407636fe8a40b3aa', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect2_dropShadow_7590_623" }), h("feOffset", { key: 'ab90af6f12edfbd05a1102ea9374de2516dae84d', dy: "20" }), h("feGaussianBlur", { key: 'db0fd97293d5b4816c49849db5fd3da2aa185743', stdDeviation: "12" }), h("feColorMatrix", { key: 'e136d3083052d599829545c7f78a7e82cb6064ea', type: "matrix", values: "0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0" }), h("feBlend", { key: '3af46a01c5edb895c7df055e0a501780c36460fd', mode: "normal", in2: "effect1_dropShadow_7590_623", result: "effect2_dropShadow_7590_623" }), h("feBlend", { key: 'c962b59223b3e944b225680dd3fcf482de983dc0', mode: "normal", in: "SourceGraphic", in2: "effect2_dropShadow_7590_623", result: "shape" })), h("linearGradient", { key: '1bf32bd09860cce843b545c0853feb231875faa7', id: "paint0_linear_7590_623", x1: "20", y1: "110.154", x2: "45.2754", y2: "41.7013", gradientUnits: "userSpaceOnUse" }, h("stop", { key: 'c778e9dc8d90b9915b676eb8db61f0e9791f166b', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : this.color === 'gray' ? 'var(--color-background-gray, #CDD5DF)' : ''}` }), h("stop", { key: '1ae20dee15eef56002f3a3d3eb9de1eb6d3eea2f', offset: "1", "stop-color": `${this.color === 'primary'
|
|
4587
|
+
? 'var(--color-background-information-subtler, #C8E0F9)'
|
|
4588
|
+
: this.color === 'gray'
|
|
4589
|
+
? 'var(--color-background-gray-subtler, #EEF2F6)'
|
|
4590
|
+
: ''}` })), h("linearGradient", { key: '7252f35d852126a749f81b96fcbefcb1581816f7', id: "paint1_linear_7590_623", x1: "84.0003", y1: "56.6154", x2: "156.166", y2: "70.983", gradientUnits: "userSpaceOnUse" }, h("stop", { key: '2ac67621e2fa39ec79ff2de98bcf4b9cbe506778', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : this.color === 'gray' ? 'var(--color-background-gray, #CDD5DF)' : ''}` }), h("stop", { key: 'e6f330ef95b7906bacf33d6cce3390febfa9e217', offset: "1", "stop-color": `${this.color === 'primary'
|
|
4591
|
+
? 'var(--color-background-information-subtler, #C8E0F9)'
|
|
4592
|
+
: this.color === 'gray'
|
|
4593
|
+
? 'var(--color-background-gray-subtler, #EEF2F6)'
|
|
4594
|
+
: ''}` }))))), this.illustrationStyle === 'documents' && (h("svg", { key: '7c36deb50b7eae912adf3781686deecf53051e49', xmlns: "http://www.w3.org/2000/svg", width: "229", height: "153", viewBox: "0 0 229 153", fill: "none", class: `documents ${this.size}` }, h("g", { key: '440f315e98fba09ab5799f44dee468281f2112dc', filter: "url(#filter0_dd_7590_657)" }, h("path", { key: '83783a72a6158d4634a6f969565a357abc9eeb00', d: "M63.6376 112.214L116.089 87.7552C118.722 86.5272 119.862 83.3969 118.634 80.7634L87.6581 14.3361L66.6827 6.7017L23.7681 26.7132C21.1346 27.9412 19.9952 31.0715 21.2233 33.7049L56.6458 109.669C57.8738 112.302 61.0041 113.442 63.6376 112.214Z", fill: "url(#paint0_linear_7590_657)" })), h("path", { key: 'a5ee01d828c2759190ea024b25cfeeb7698e9f91', d: "M66.6826 6.70166L87.658 14.3361L73.3531 21.0066L66.6826 6.70166Z", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : 'var(--color-background-gray, #CDD5DF)'}` }), h("g", { key: '638688a335648304cf8c253ae67c1b0061516100', filter: "url(#filter1_dd_7590_657)" }, h("path", { key: '1f38da87e80840f9843c612616aac76388c6018f', d: "M88.7112 94.3394H146.585C149.49 94.3394 151.846 91.9838 151.846 89.0781V15.7837L136.062 0H88.7112C85.8055 0 83.45 2.35554 83.45 5.26124V89.0782C83.45 91.9839 85.8055 94.3394 88.7112 94.3394Z", fill: "url(#paint1_linear_7590_657)" })), h("path", { key: '2be8b05091efecd8729c7802bcee6604195f6edc', d: "M136.062 -0.00012207L151.846 15.7836H136.062V-0.00012207Z", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : 'var(--color-background-gray, #CDD5DF)'}` }), h("g", { key: '80e9b501d3a1a27372f17005ecad04eb56aade29', filter: "url(#filter2_dd_7590_657)" }, h("path", { key: '9ee4abf761c2b9503667c49bcf6ca1e777acee00', d: "M118.471 87.724L170.922 112.182C173.555 113.41 176.686 112.271 177.914 109.638L208.889 43.2103L201.255 22.2349L158.34 2.22349C155.707 0.995492 152.576 2.13484 151.348 4.7683L115.926 80.7322C114.698 83.3657 115.837 86.496 118.471 87.724Z", fill: "url(#paint2_linear_7590_657)" })), h("path", { key: '4e206496a5a1aaf1a6576909f86767e7d722e34b', d: "M201.255 22.2349L208.889 43.2102L194.584 36.5398L201.255 22.2349Z", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : 'var(--color-background-gray, #CDD5DF)'}` }), h("defs", { key: '25e9fada529b11b8a9d8688c52e66a14dbc783ca' }, h("filter", { key: '3eab35669d1345e3e02a2b042d1f8192db08dae0', id: "filter0_dd_7590_657", x: "0.729004", y: "6.70166", width: "138.399", height: "146.006", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" }, h("feFlood", { key: '23690f01c762eb0be7bc6d075ced8964403a5732', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feColorMatrix", { key: '8c627283990d578a842fe2258d43acdf59d4f18a', in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), h("feMorphology", { key: 'f3cf8a8c93b0793a18191dedf602f889bb4bbf80', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect1_dropShadow_7590_657" }), h("feOffset", { key: 'c507300dc0f782cfda3cf2382314fe85be3cfe6a', dy: "8" }), h("feGaussianBlur", { key: '435d7596ad9be01348e67545d92691c07a1132cb', stdDeviation: "4" }), h("feColorMatrix", { key: '828da55b9913cad74b0198519f50a8f692383e3c', type: "matrix", values: "0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0" }), h("feBlend", { key: '261b2e37b85fec50a83a7c836a987eeed4d970ce', mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_7590_657" }), h("feColorMatrix", { key: '262d7143b5bcf10e51e6cd4ad09b29bc807b262f', in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), h("feMorphology", { key: '9c900a5799c34fbf1e549c773d864c814d9b985d', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect2_dropShadow_7590_657" }), h("feOffset", { key: '6f4da572ec339064f5a46212bc0d4877a1ff90c7', dy: "20" }), h("feGaussianBlur", { key: 'a9a3ae26f24a5ed40a458fceeeba1b02a79d6375', stdDeviation: "12" }), h("feColorMatrix", { key: 'a6c080e28dd7007e445780b17fac49d850165e20', type: "matrix", values: "0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0" }), h("feBlend", { key: 'a85d08cd483ad5e2dfb74ac6f7e543fb252ebd69', mode: "normal", in2: "effect1_dropShadow_7590_657", result: "effect2_dropShadow_7590_657" }), h("feBlend", { key: '9879fc6e91ac7c66920c012a9925994c0cdba7cc', mode: "normal", in: "SourceGraphic", in2: "effect2_dropShadow_7590_657", result: "shape" })), h("filter", { key: 'c4359e8ad60d2a55af9ecb06bf226cd71f78b035', id: "filter1_dd_7590_657", x: "63.45", y: "0", width: "108.396", height: "134.339", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" }, h("feFlood", { key: '5bac337a16957de30af6d3efeaa3091b00214fcf', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feColorMatrix", { key: 'db9e24563c6e7e86fb76005ab2c29eadf265d6d8', in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), h("feMorphology", { key: '311b7884644fede8528349acc93fae40ec3b9683', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect1_dropShadow_7590_657" }), h("feOffset", { key: '078306dcf253dffa0b6975f53870749e01a516dd', dy: "8" }), h("feGaussianBlur", { key: 'cd2146e0970a8adeaacd58a6df2bd9ba8f5bfda2', stdDeviation: "4" }), h("feColorMatrix", { key: 'a8ae0278c725d96b39f920d50a487bf2c84a0bcc', type: "matrix", values: "0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0" }), h("feBlend", { key: '9b19569eaddfe9dcbe7bfea5baf3e3f6ca34d46d', mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_7590_657" }), h("feColorMatrix", { key: 'ac55e86075f08c74edbfb2ad6414d1e8665cc134', in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), h("feMorphology", { key: 'fecfa1781e2dc38a35e75ebd467c94f069719f68', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect2_dropShadow_7590_657" }), h("feOffset", { key: '76f0027305e884cecf1dfaea364dcf6dd1afd56d', dy: "20" }), h("feGaussianBlur", { key: 'f84fac0358785b034eb05cccba3ce71198e525ee', stdDeviation: "12" }), h("feColorMatrix", { key: 'd543cd0783eac7cfee8da882e0a6f5a833966d23', type: "matrix", values: "0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0" }), h("feBlend", { key: '9e9d522e9c2652191507d887080f90fa9616e881', mode: "normal", in2: "effect1_dropShadow_7590_657", result: "effect2_dropShadow_7590_657" }), h("feBlend", { key: 'a51ccf1180e69d207d3cc60a385ddd0b8224282a', mode: "normal", in: "SourceGraphic", in2: "effect2_dropShadow_7590_657", result: "shape" })), h("filter", { key: '49a6e8225eb281d6925f5e80418227ba8a114a14', id: "filter2_dd_7590_657", x: "95.4316", y: "1.72925", width: "133.458", height: "150.947", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" }, h("feFlood", { key: 'b3084b40e5efa16cbf756bf02126da0e36692d08', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feColorMatrix", { key: '1d58005458d3d19d8685dca22849b5e79c59eae1', in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), h("feMorphology", { key: 'a134562a9fad3c40839121c0b44ad4f0ae7a0ab7', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect1_dropShadow_7590_657" }), h("feOffset", { key: '9cb294a588fadefb3e6d536fa3973e5188ae4ef8', dy: "8" }), h("feGaussianBlur", { key: '67d496d74a591bd1ff9f7f3e8f3404f22767abde', stdDeviation: "4" }), h("feColorMatrix", { key: '0ccf308d78440edae984347f36cb7ad4be6d9ad9', type: "matrix", values: "0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0" }), h("feBlend", { key: '9da8402e1415bdd28a9fe979bf33606560ee0443', mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_7590_657" }), h("feColorMatrix", { key: 'f0238180cb867bf463eea05fa6d1b880fa58cff8', in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), h("feMorphology", { key: '7b79ce9adc0225b78f22f11827c87ccbea059556', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect2_dropShadow_7590_657" }), h("feOffset", { key: '5a43d198b91e92590c7594f6b8d290b35837608e', dy: "20" }), h("feGaussianBlur", { key: '1aba1439f001ab7ef2592846abc996fbaea58202', stdDeviation: "12" }), h("feColorMatrix", { key: '777ad52174a66c3e59ea9787deda3bc28f3416f1', type: "matrix", values: "0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0" }), h("feBlend", { key: '337728d9feef9f381e2c36cf7fabfc333dd3a2b0', mode: "normal", in2: "effect1_dropShadow_7590_657", result: "effect2_dropShadow_7590_657" }), h("feBlend", { key: '71336a7d58f9d4ccdfce6cc3b377cea9c7845fd7', mode: "normal", in: "SourceGraphic", in2: "effect2_dropShadow_7590_657", result: "shape" })), h("linearGradient", { key: '9bb787ae44b28d76d00eb98a0f07bb83662b380a', id: "paint0_linear_7590_657", x1: "60.5561", y1: "112.418", x2: "18.7566", y2: "37.0089", gradientUnits: "userSpaceOnUse" }, h("stop", { key: 'b0467412b8faf9e3660fea92335016e735c6495b', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : 'var(--color-background-gray, #CDD5DF)'}` }), h("stop", { key: '4429798177c28c5fa28cceb4dcc74eef73cd3b9e', offset: "1", "stop-color": `${this.color === 'primary'
|
|
4595
|
+
? 'var(--color-background-information-subtlest, #E4F0FC)'
|
|
4596
|
+
: this.color === 'gray'
|
|
4597
|
+
? 'var(--color-background-gray-subtlest, #F6F8FA)'
|
|
4598
|
+
: ''}` })), h("linearGradient", { key: 'd05a0beb933ec4acd00052f1a555122a0cdfab73', id: "paint1_linear_7590_657", x1: "85.8318", y1: "93.2227", x2: "79.8181", y2: "7.21313", gradientUnits: "userSpaceOnUse" }, h("stop", { key: '742f92e384e61b8a22eb903cedb356405c51cedd', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : 'var(--color-background-gray, #CDD5DF)'}` }), h("stop", { key: '0fb3251f75ae27ba9d03eb6e3583fb9631b9b6b5', offset: "1", "stop-color": `${this.color === 'primary'
|
|
4599
|
+
? 'var(--color-background-information-subtlest, #E4F0FC)'
|
|
4600
|
+
: this.color === 'gray'
|
|
4601
|
+
? 'var(--color-background-gray-subtlest, #F6F8FA)'
|
|
4602
|
+
: ''}` })), h("linearGradient", { key: 'd7f70e506bb125c522d5b1c44783803bfda8e303', id: "paint2_linear_7590_657", x1: "116.333", y1: "85.4951", x2: "147.232", y2: "5.00242", gradientUnits: "userSpaceOnUse" }, h("stop", { key: 'a1377240c1d398711fe099a74d5264c1a33e2942', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : 'var(--color-background-gray, #CDD5DF)'}` }), h("stop", { key: '2d15cff8a7f19402535c352b09b5b56e74b4a67d', offset: "1", "stop-color": `${this.color === 'primary'
|
|
4603
|
+
? 'var(--color-background-information-subtlest, #E4F0FC)'
|
|
4604
|
+
: this.color === 'gray'
|
|
4605
|
+
? 'var(--color-background-gray-subtlest, #F6F8FA)'
|
|
4606
|
+
: ''}` }))))), this.illustrationStyle === 'credit_card' && (h("svg", { key: 'ca65f0ad08372f2a1783a448159496a849044ecb', xmlns: "http://www.w3.org/2000/svg", width: "206", height: "144", viewBox: "0 0 206 144", fill: "none", class: `credit_card ${this.size}` }, h("g", { key: '96374d12771b29c4a2d47e2b81a49811dcef8425', filter: "url(#filter0_dd_7590_677)" }, h("rect", { key: '4aa027bc0dacff836a104c4148860dafc4541204', x: "20", width: "166", height: "104", rx: "7.25581", fill: "url(#paint0_linear_7590_677)" }), h("rect", { key: '5b2339cf764457391c38e829af76f2543c7b9eaf', x: "34.0698", y: "24.186", width: "29.0233", height: "21.7674", rx: "2.4186", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : 'var(--color-background-gray, #CDD5DF)'}` }), h("circle", { key: 'fa9e4fb5adb6f16eff1f7007dab1b308b2219bdd', cx: "159.837", cy: "31.4419", r: "12.093", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : 'var(--color-background-gray, #CDD5DF)'}` }), h("circle", { key: 'b6fc70e7442323dbc8c7445debc9c846e021602e', cx: "145.325", cy: "31.4419", r: "12.093", fill: `${this.color === 'primary'
|
|
4607
|
+
? 'var(--color-background-information-subtler, #C8E0F9)'
|
|
4608
|
+
: this.color === 'gray'
|
|
4609
|
+
? 'var(--color-background-gray-subtle, #E3E8EF)'
|
|
4610
|
+
: ''}` }), h("path", { key: 'a1a4a1879051dd74de5a4d0fcdd34a53e8beaec1', d: "M34.0698 88.279C34.0698 86.9432 35.1527 85.8604 36.4884 85.8604H60.6745C62.0102 85.8604 63.0931 86.9432 63.0931 88.279C63.0931 89.6147 62.0102 90.6976 60.6745 90.6976H36.4884C35.1527 90.6976 34.0698 89.6147 34.0698 88.279Z", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtler, #C8E0F9)' : this.color === 'gray' ? 'var(--color-background-gray, #CDD5DF)' : ''}` }), h("path", { key: '09c9f65c136909eddacaffdb7970053c89780c55', d: "M70.3489 88.279C70.3489 86.9432 71.4317 85.8604 72.7675 85.8604H96.9535C98.2893 85.8604 99.3721 86.9432 99.3721 88.279C99.3721 89.6147 98.2893 90.6976 96.9535 90.6976H72.7675C71.4317 90.6976 70.3489 89.6147 70.3489 88.279Z", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtler, #C8E0F9)' : this.color === 'gray' ? 'var(--color-background-gray, #CDD5DF)' : ''}` }), h("path", { key: '5346c53dc5199cad866a7ff9ece65cf1efc76b40', d: "M106.628 88.279C106.628 86.9432 107.711 85.8604 109.047 85.8604H133.233C134.568 85.8604 135.651 86.9432 135.651 88.279C135.651 89.6147 134.568 90.6976 133.233 90.6976H109.047C107.711 90.6976 106.628 89.6147 106.628 88.279Z", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtler, #C8E0F9)' : this.color === 'gray' ? 'var(--color-background-gray, #CDD5DF)' : ''}` }), h("path", { key: '31ded2fb8f34adcfc73212b851128f6cf42b80b5', d: "M142.907 88.279C142.907 86.9432 143.99 85.8604 145.326 85.8604H169.512C170.847 85.8604 171.93 86.9432 171.93 88.279C171.93 89.6147 170.847 90.6976 169.512 90.6976H145.326C143.99 90.6976 142.907 89.6147 142.907 88.279Z", fill: `${this.color === 'primary' ? 'var(--color-background-information-subtler, #C8E0F9)' : this.color === 'gray' ? 'var(--color-background-gray, #CDD5DF)' : ''}` })), h("defs", { key: 'd644773cecd1b4afcedf003aed373d9aac84e6bf' }, h("filter", { key: '179accd98dcee3f10eebebaab61db1d1b6331817', id: "filter0_dd_7590_677", x: "0", y: "0", width: "206", height: "144", filterUnits: "userSpaceOnUse", "color-interpolation-filters": "sRGB" }, h("feFlood", { key: '58fef6b5e98ca82d2527deb2e4d024022701582e', "flood-opacity": "0", result: "BackgroundImageFix" }), h("feColorMatrix", { key: '63d932d8c1e6248734ad2a8a8cdf44aec17150ab', in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), h("feMorphology", { key: 'f088a08b8b9d8c562c91f00db7d726d30983e217', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect1_dropShadow_7590_677" }), h("feOffset", { key: 'c6c2f5e2f6dc755ff4b8b402aa6c01e795a5fe7c', dy: "8" }), h("feGaussianBlur", { key: 'd199721b7f84792ac3ce071dc3872600957c133c', stdDeviation: "4" }), h("feColorMatrix", { key: 'd320e6344bed6f5effbca52f43a0dc5e39619e10', type: "matrix", values: "0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.03 0" }), h("feBlend", { key: 'e3a55891c8f9b44d62ee2f77e4c931b482214356', mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_7590_677" }), h("feColorMatrix", { key: '5fe8ba4e134323d02c511e3aee1cf8d4b8b69840', in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), h("feMorphology", { key: '977d8629700907310e536d5a640a7236399af16c', radius: "4", operator: "erode", in: "SourceAlpha", result: "effect2_dropShadow_7590_677" }), h("feOffset", { key: 'fc5d422fabc335300125724a4701fac733c5679b', dy: "20" }), h("feGaussianBlur", { key: '77e773b089b107044b7da961acde405ca957fbb9', stdDeviation: "12" }), h("feColorMatrix", { key: 'f8ea44592abbeae9859ba4ea7ac1dcbda943f0bd', type: "matrix", values: "0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.08 0" }), h("feBlend", { key: 'b0ee0319dbe107d588ebcd0782a3f818a7cf1bf4', mode: "normal", in2: "effect1_dropShadow_7590_677", result: "effect2_dropShadow_7590_677" }), h("feBlend", { key: '27eed6cfaaa8103787f00d26ed26df8fc910a0e7', mode: "normal", in: "SourceGraphic", in2: "effect2_dropShadow_7590_677", result: "shape" })), h("linearGradient", { key: '7008a7488fce7ea7af8dfdb1ac65c82247d1fce6', id: "paint0_linear_7590_677", x1: "25.7809", y1: "102.769", x2: "22.758", y2: "7.58424", gradientUnits: "userSpaceOnUse" }, h("stop", { key: '324fdf6cdc5bd6757a539fccf62497a0c6e77908', "stop-color": `${this.color === 'primary' ? 'var(--color-background-information-subtle, #9AC7F4)' : 'var(--color-background-gray-subtle, #E3E8EF)'}` }), h("stop", { key: '846735ab52b3e8cbd04979f58024e174782b4e96', offset: "1", "stop-color": `${this.color === 'primary'
|
|
4611
|
+
? 'var(--color-background-information-subtler, #C8E0F9)'
|
|
4612
|
+
: this.color === 'gray'
|
|
4613
|
+
? 'var(--color-background-gray-subtlest, #F6F8FA)'
|
|
4614
|
+
: ''}` })))))), h("div", { key: 'f7fafada83a1052516d6269708ebe3aa9fd5e29c', class: `icon_div ${this.color} ${this.size}` }, h("div", { key: '4cc65589021b258104f3c0b0ce896c4bf77ac2ef', class: `icon ${this.size}`, innerHTML: this.leadingIconSvg })))));
|
|
4615
|
+
}
|
|
4616
|
+
};
|
|
4617
|
+
GbIllustration.style = gbIllustrationCss;
|
|
4618
|
+
|
|
4468
4619
|
const gbInputDropdownCss = "/* @import 'tailwind.css'; */\r\n\r\n:root {\r\n /* --------------------------------------Primary Colors--------------------------------------------- */\r\n /* base color palette */\r\n --base-white: #fff;\r\n --base-black: #000;\r\n\r\n /* gray color palette */\r\n --gray-25: #f9fafb;\r\n --gray-50: #f6f8fa;\r\n --gray-100: #eef2f6;\r\n --gray-200: #e3e8ef;\r\n --gray-300: #cdd5df;\r\n --gray-400: #808c9e;\r\n --gray-500: #697586;\r\n --gray-600: #4b5565;\r\n --gray-700: #364152;\r\n --gray-800: #202939;\r\n --gray-900: #121926;\r\n --gray-950: #0d121c;\r\n\r\n /* brand dark blue color palette */\r\n --brandDarkBlue-25: #f9f9fb;\r\n --brandDarkBlue-50: #edeef3;\r\n --brandDarkBlue-100: #d3d5e0;\r\n --brandDarkBlue-200: #b5b9cc;\r\n --brandDarkBlue-300: #9095b2;\r\n --brandDarkBlue-400: #464f7f;\r\n --brandDarkBlue-500: #212c65;\r\n --brandDarkBlue-600: #1e285c;\r\n --brandDarkBlue-700: #1c2554;\r\n --brandDarkBlue-800: #161d43;\r\n --brandDarkBlue-900: #0b0f22;\r\n --brandDarkBlue-950: #070914;\r\n\r\n /* brand red color palette */\r\n --brandRed-25: #fffbfa;\r\n --brandRed-50: #fef1f2;\r\n --brandRed-100: #fde3e5;\r\n --brandRed-200: #f9b4ba;\r\n --brandRed-300: #f68e98;\r\n --brandRed-400: #f36976;\r\n --brandRed-500: #e21b2e;\r\n --brandRed-600: #cc1a2a;\r\n --brandRed-700: #b51726;\r\n --brandRed-800: #8c121d;\r\n --brandRed-900: #680d16;\r\n --brandRed-950: #3f080d;\r\n\r\n /* warning color palette */\r\n --warning-25: #fffcf5;\r\n --warning-50: #fffaeb;\r\n --warning-100: #fef0c7;\r\n --warning-200: #fedf89;\r\n --warning-300: #fec84b;\r\n --warning-400: #fdb022;\r\n --warning-500: #f79009;\r\n --warning-600: #dc6803;\r\n --warning-700: #b54708;\r\n --warning-800: #93370d;\r\n --warning-900: #7a2e0e;\r\n --warning-950: #4e1d09;\r\n\r\n /* success color palette */\r\n --success-25: #f6fef9;\r\n --success-50: #ecfdf3;\r\n --success-100: #dcfaeb;\r\n --success-200: #a9efc5;\r\n --success-300: #75e0a7;\r\n --success-400: #47cd89;\r\n --success-500: #17b26a;\r\n --success-600: #079455;\r\n --success-700: #067647;\r\n --success-800: #085d3a;\r\n --success-900: #074d31;\r\n --success-950: #053321;\r\n\r\n /* ------------------------------------------opacity color palette-------------------------------------- */\r\n /* 0% opacity */\r\n /* White */\r\n --white-opacity0: rgba(255, 255, 255, 0);\r\n\r\n /* Gray */\r\n --gray25-opacity0: rgba(249, 250, 251, 0);\r\n --gray900-opacity0: rgba(18, 25, 38, 0);\r\n --gray950-opacity0: rgba(13, 18, 28, 0);\r\n\r\n /* 20% opacity */\r\n /* White */\r\n --white-opacity20: rgba(255, 255, 255, 0.2);\r\n\r\n /* Dark Blue */\r\n --darkBlue200-opacity20: rgba(181, 185, 204, 0.2);\r\n --darkBlue500-opacity20: rgba(33, 44, 101, 0.2);\r\n\r\n /* Gray */\r\n --gray25-opacity20: rgba(249, 250, 251, 0.2);\r\n --gray900-opacity20: rgba(18, 25, 38, 0.2);\r\n --gray950-opacity20: rgba(13, 18, 28, 0.2);\r\n\r\n /* 30% opacity */\r\n --darkBlue200-opacity30: rgba(181, 185, 204, 0.3);\r\n --darkBlue500-opacity30: rgba(33, 44, 101, 0.3);\r\n\r\n /* 40% opacity */\r\n --darkBlue200-opacity40: rgba(181, 185, 204, 0.4);\r\n --darkBlue500-opacity40: rgba(33, 44, 101, 0.4);\r\n\r\n /* 50% opacity */\r\n /* White */\r\n --white-opacity50: rgba(255, 255, 255, 0.5);\r\n\r\n /* Gray */\r\n --gray25-opacity50: rgba(249, 250, 251, 0.5);\r\n --gray900-opacity50: rgba(18, 25, 38, 0.5);\r\n --gray950-opacity50: rgba(13, 18, 28, 0.5);\r\n\r\n /* ------------------------------------------Secondary Color------------------------------------------- */\r\n /* blueLight color palete */\r\n --lightBlue-25: #f5fbff;\r\n --lightBlue-50: #f0f9ff;\r\n --lightBlue-100: #e0f2fe;\r\n --lightBlue-200: #b9e6fe;\r\n --lightBlue-300: #7cd4fd;\r\n --lightBlue-400: #7cd4fd;\r\n --lightBlue-500: #0ba5ec;\r\n --lightBlue-600: #0086c9;\r\n --lightBlue-700: #026aa2;\r\n --lightBlue-800: #065986;\r\n --lightBlue-900: #0b4a6f;\r\n --lightBlue-950: #062c41;\r\n\r\n /* blue color palette */\r\n --blue-25: #ecf5fe;\r\n --blue-50: #e4f0fc;\r\n --blue-100: #c8e0f9;\r\n --blue-200: #9ac7f4;\r\n --blue-300: #6aa9e7;\r\n --blue-400: #378fe6;\r\n --blue-500: #075db2;\r\n --blue-600: #064e94;\r\n --blue-700: #053e77;\r\n --blue-800: #042f59;\r\n --blue-900: #022445;\r\n --blue-950: #021d37;\r\n\r\n /* Purple color palete */\r\n --purple-25: #fafaff;\r\n --purple-50: #f4f3ff;\r\n --purple-100: #ebe9fe;\r\n --purple-200: #d9d6fe;\r\n --purple-300: #bdb4fe;\r\n --purple-400: #9b8afb;\r\n --purple-500: #7a5af8;\r\n --purple-600: #6938ef;\r\n --purple-700: #5925dc;\r\n --purple-800: #4a1fb8;\r\n --purple-900: #3e1c96;\r\n --purple-950: #27115f;\r\n\r\n /* pink color palette */\r\n --pink-25: #fef6fb;\r\n --pink-50: #fdf2fa;\r\n --pink-100: #fce7f6;\r\n --pink-200: #fcceee;\r\n --pink-300: #faa7e0;\r\n --pink-400: #f670c7;\r\n --pink-500: #ee46bc;\r\n --pink-600: #dd2590;\r\n --pink-700: #c11574;\r\n --pink-800: #9e165f;\r\n --pink-900: #851651;\r\n --pink-950: #4e0d30;\r\n\r\n /* -------------------------------------------------Token---------------------------------------------- */\r\n\r\n /* -----------Text Color----------- */\r\n\r\n [data-theme='light'] {\r\n --color-text-bold: var(--gray-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-bold: var(--gray-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text: var(--gray-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text: var(--gray-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-subtle: var(--gray-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-subtle: var(--gray-400);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-disabled: var(--gray-400);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-disabled: var(--gray-500);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-inverse: var(--base-white);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-inverse: var(--base-black);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-brandDarkBlue: var(--brandDarkBlue-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-brandDarkBlue: var(--brandDarkBlue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-brandRed: var(--brandRed-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-brandRed: var(--brandRed-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-selected: var(--blue-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-selected: var(--blue-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-danger-bold: var(--brandRed-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-danger-bold: var(--brandRed-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-danger: var(--brandRed-700);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-danger: var(--brandRed-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-danger-subtle: var(--brandRed-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-danger-subtle: var(--brandRed-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-danger-inverse: var(--base-white);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-danger-inverse: var(--brandRed-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-warning-bold: var(--warning-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-warning-bold: var(--warning-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-warning: var(--warning-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-warning: var(--warning-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-warning-subtle: var(--warning-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-warning-subtle: var(--warning-400);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-success-bold: var(--success-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-success-bold: var(--success-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-success: var(--success-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-success: var(--success-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-success-subtle: var(--success-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-success-subtle: var(--success-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-discovery-bold: var(--lightBlue-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-discovery-bold: var(--lightBlue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-discovery: var(--lightBlue-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-discovery: var(--lightBlue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-discovery-subtle: var(--lightBlue-400);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-discovery-subtle: var(--lightBlue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-information-bold: var(--blue-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-information-bold: var(--blue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-information: var(--blue-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-information: var(--blue-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-information-subtle: var(--blue-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-information-subtle: var(--blue-400);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-purple-bold: var(--purple-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-purple-bold: var(--purple-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-purple: var(--purple-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-purple: var(--purple-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-purple-subtle: var(--purple-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-purple-subtle: var(--purple-400);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-pink-bold: var(--pink-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-pink-bold: var(--pink-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-pink: var(--pink-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-pink: var(--pink-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-pink-subtle: var(--pink-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-pink-subtle: var(--pink-400);\r\n }\r\n\r\n /* --------------Link color--------------- */\r\n\r\n [data-theme='light'] {\r\n --color-link: var(--blue-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-link: var(--blue-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-link-pressed: var(--blue-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-link-pressed: var(--blue-600);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-link-visited: var(--lightBlue-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-link-visited: var(--lightBlue-300);\r\n }\r\n\r\n /* --------------Icon color--------------- */\r\n\r\n [data-theme='light'] {\r\n --color-icon-bold: var(--gray-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-bold: var(--gray-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon: var(--gray-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon: var(--gray-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-subtle: var(--gray-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-subtle: var(--gray-400);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-disabled: var(--gray-400);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-disabled: var(--gray-500);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-inverse: var(--base-white);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-inverse: var(--gray-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-brandDarkBlue: var(--brandDarkBlue-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-brandDarkBlue: var(--brandDarkBlue-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-brandRed: var(--brandRed-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-brandRed: var(--brandRed-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-selected: var(--blue-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-selected: var(--blue-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-danger-bold: var(--brandRed-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-danger-bold: var(--brandRed-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-danger: var(--brandRed-700);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-danger: var(--brandRed-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-danger-inverse: var(--base-white);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-danger-inverse: var(--brandRed-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-warning-bold: var(--warning-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-warning-bold: var(--warning-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-warning: var(--warning-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-warning: var(--warning-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-success-bold: var(--success-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-success-bold: var(--success-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-success: var(--success-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-success: var(--success-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-discovery-bold: var(--lightBlue-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-discovery-bold: var(--lightBlue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-discovery: var(--lightBlue-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-discovery: var(--lightBlue-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-information-bold: var(--blue-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-information-bold: var(--blue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-information: var(--blue-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-information: var(--blue-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-purple-bold: var(--purple-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-purple-bold: var(--purple-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-purple: var(--purple-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-purple: var(--purple-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-pink-bold: var(--pink-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-pink-bold: var(--pink-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-pink: var(--pink-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-pink: var(--pink-300);\r\n }\r\n\r\n /* ----------------Border Color --------------- */\r\n\r\n [data-theme='light'] {\r\n --color-border-bold: var(--gray-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-bold: var(--gray-400);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border: var(--gray-400);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border: var(--gray-500);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-subtle: var(--gray-300);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-subtle: var(--gray-700);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-subtler: var(--gray-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-subtler: var(--gray-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-disabled: var(--gray-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-disabled: var(--gray-700);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-inverse: var(--base-white);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-inverse: var(--gray-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-input: var(--gray-300);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-input: var(--gray-600);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-focus: var(--gray-400);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-focus: var(--blue-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-selected: var(--blue-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-selected: var(--blue-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-brandDarkBlue: var(--brandDarkBlue-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-brandDarkBlue: var(--brandDarkBlue-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-brandRed: var(--brandRed-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-brandRed: var(--brandRed-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-danger-bold: var(--brandRed-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-danger-bold: var(--brandRed-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-danger: var(--brandRed-700);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-danger: var(--brandRed-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-danger-subtle: var(--brandRed-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-danger-subtle: var(--brandRed-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-danger-subtler: var(--brandRed-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-danger-subtler: var(--brandRed-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-warning-bold: var(--warning-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-warning-bold: var(--warning-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-warning: var(--warning-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-warning: var(--warning-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-warning-subtle: var(--warning-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-warning-subtle: var(--warning-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-warning-subtler: var(--warning-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-warning-subtler: var(--warning-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-success-bold: var(--success-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-success-bold: var(--success-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-success: var(--success-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-success: var(--success-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-success-subtle: var(--success-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-success-subtle: var(--success-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-success-subtler: var(--success-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-success-subtler: var(--success-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-discovery-bold: var(--lightBlue-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-discovery-bold: var(--lightBlue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-discovery: var(--lightBlue-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-discovery: var(--lightBlue-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-discovery-subtle: var(--lightBlue-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-discovery-subtle: var(--lightBlue-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-discovery-subtler: var(--lightBlue-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-discovery-subtler: var(--lightBlue-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-information-bold: var(--blue-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-information-bold: var(--blue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-information: var(--blue-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-information: var(--blue-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-information-subtle: var(--blue-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-information-subtle: var(--blue-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-information-subtler: var(--blue-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-information-subtler: var(--blue-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-purple-bold: var(--purple-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-purple-bold: var(--purple-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-purple: var(--purple-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-purple: var(--purple-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-purple-subtle: var(--purple-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-purple-subtle: var(--purple-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-purple-subtler: var(--purple-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-purple-subtler: var(--purple-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-pink-bold: var(--pink-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-pink-bold: var(--pink-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-pink: var(--pink-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-pink: var(--pink-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-pink-subtle: var(--pink-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-pink-subtle: var(--pink-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-pink-subtler: var(--pink-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-pink-subtler: var(--pink-900);\r\n }\r\n\r\n /* Emmanuel Kadiri starts from background color */\r\n\r\n /* ----------------Background Color --------------- */\r\n\r\n [data-theme='light'] {\r\n --color-background-card-bold: var(--gray-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-card-bold: var(--gray-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-card: var(--base-white);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-card: var(--gray-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-input: var(--gray-400);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-input: var(--gray-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-disabled: var(--gray-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-disabled: var(--gray-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-btn-disabled: var(--gray-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-btn-disabled: var(--gray-700);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-selected: var(--blue-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-selected: var(--blue-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-brandDarkblue: var(--brandDarkBlue-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-brandDarkblue: var(--brandDarkBlue-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-brandRed: var(--brandRed-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-brandRed: var(--brandRed-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-brandRed-hover: var(--brandRed-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-brandRed-hover: var(--brandRed-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-brandRed-pressed: var(--brandRed-700);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-brandRed-pressed: var(--brandRed-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-gray-bold: var(--gray-400);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-gray-bold: var(--gray-500);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-gray: var(--gray-300);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-gray: var(--gray-600);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-gray-subtle: var(--gray-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-gray-subtle: var(--gray-700);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-gray-subtler: var(--gray-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-gray-subtler: var(--gray-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-gray-subtlest: var(--gray-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-gray-subtlest: var(--gray-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-danger-bold: var(--brandRed-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-danger-bold: var(--brandRed-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-danger: var(--brandRed-700);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-danger: var(--brandRed-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-danger-subtle: var(--brandRed-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-danger-subtle: var(--brandRed-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-danger-subtler: var(--brandRed-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-danger-subtler: var(--brandRed-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-danger-subtlest: var(--brandRed-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-danger-subtlest: var(--brandRed-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-warning-bold: var(--warning-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-warning-bold: var(--warning-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-warning: var(--warning-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-warning: var(--warning-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-warning-subtle: var(--warning-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-warning-subtle: var(--warning-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-warning-subtler: var(--warning-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-warning-subtler: var(--warning-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-warning-subtlest: var(--warning-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-warning-subtlest: var(--warning-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-success-bold: var(--success-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-success-bold: var(--success-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-success: var(--success-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-success: var(--success-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-success-subtle: var(--success-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-success-subtle: var(--success-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-success-subtler: var(--success-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-success-subtler: var(--success-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-success-subtlest: var(--success-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-success-subtlest: var(--success-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-discovery-bold: var(--lightBlue-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-discovery-bold: var(--lightBlue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-discovery: var(--lightBlue-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-discovery: var(--lightBlue-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-discovery-subtle: var(--lightBlue-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-discovery-subtle: var(--lightBlue-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-discovery-subtler: var(--lightBlue-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-discovery-subtler: var(--lightBlue-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-discovery-subtlest: var(--lightBlue-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-discovery-subtlest: var(--lightBlue-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-information-bold: var(--blue-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-information-bold: var(--blue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-information: var(--blue-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-information: var(--blue-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-information-subtle: var(--blue-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-information-subtle: var(--blue-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-information-subtler: var(--blue-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-information-subtler: var(--blue-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-information-subtlest: var(--blue-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-information-subtlest: var(--blue-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-purple-bold: var(--purple-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-purple-bold: var(--blue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-purple: var(--purple-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-purple: var(--blue-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-purple-subtle: var(--purple-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-purple-subtle: var(--purple-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-purple-subtler: var(--purple-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-purple-subtler: var(--purple-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-purple-subtlest: var(--purple-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-purple-subtlest: var(--purple-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-pink-bold: var(--pink-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-pink-bold: var(--pink-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-pink: var(--pink-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-pink: var(--pink-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-pink-subtle: var(--pink-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-pink-subtle: var(--pink-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-pink-subtler: var(--pink-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-pink-subtler: var(--pink-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-pink-subtlest: var(--purple-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-pink-subtlest: var(--pink-950);\r\n }\r\n\r\n /* ----------------Blanket Color --------------- */\r\n [data-theme='light'] {\r\n --color-blanket: var(--darkBlue500-opacity20);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-blanket: var(--darkBlue200-opacity20);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-blanket-subtle: var(--darkBlue500-opacity30);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-blanket-subtle: var(--darkBlue200-opacity30);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-blanket-subtler: var(--darkBlue500-opacity40);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-blanket-subtler: var(--darkBlue200-opacity40);\r\n }\r\n\r\n /* ----------------Skeleton Color --------------- */\r\n [data-theme='light'] {\r\n --color-skeleton: var(--gray-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-skeleton: var(--gray-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-skeleton-bold: var(--gray-300);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-skeleton-bold: var(--gray-700);\r\n }\r\n\r\n /* ----------------Surface Color --------------- */\r\n [data-theme='light'] {\r\n --color-surface-bold: var(--gray-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-surface-bold: var(--gray-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-surface: var(--base-white);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-surface: var(--gray-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-surface-hovered: var(--gray-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-surface-hovered: var(--gray-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-surface-pressed: var(--gray-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-surface-pressed: var(--gray-700);\r\n }\r\n\r\n /* ----------------Transparent Color --------------- */\r\n [data-theme='light'] {\r\n --color-surface-transparent50: var(--white-opacity50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-surface-transparent50: var(--gray900-opacity50);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-surface-transparent20: var(--white-opacity20);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-surface-transparent20: var(--gray900-opacity20);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-surface-transparent-full: var(--white-opacity0);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-surface-transparent-full: var(--gray900-opacity0);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-surface-bold-transparent50: var(--gray25-opacity50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-surface-bold-transparent50: var(--gray950-opacity50);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-surface-bold-transparent20: var(--gray25-opacity20);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-surface-bold-transparent20: var(--gray950-opacity20);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-surface-bold-transparent-full: var(--gray25-opacity0);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-surface-bold-transparent-full: var(--gray950-opacity0);\r\n }\r\n}\r\n\r\n/* -----------------Shadow and Blur----------------- */\r\n:root {\r\n --shadow-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\r\n --shadow-sm: 0px 1px 3px 0px rgba(16, 24, 40, 0.1), 0px 1px 2px 0px rgba(16, 24, 40, 0.06);\r\n --shadow-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);\r\n --shadow-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);\r\n --shadow-xl: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);\r\n --shadow-2xl: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);\r\n --shadow-3xl: 0px 32px 64px -12px rgba(16, 24, 40, 0.14);\r\n\r\n --blur-sm: blur(4px);\r\n --blur-md: blur(8px);\r\n --blur-lg: blur(12px);\r\n --blur-xl: blur(20px);\r\n}\r\n\r\n.shadow-xs {\r\n box-shadow: var(--shadow-xs);\r\n}\r\n\r\n.shadow-sm {\r\n box-shadow: var(--shadow-sm);\r\n}\r\n\r\n.shadow-md {\r\n box-shadow: var(--shadow-md);\r\n}\r\n\r\n.shadow-lg {\r\n box-shadow: var(--shadow-lg);\r\n}\r\n\r\n.shadow-xl {\r\n box-shadow: var(--shadow-xl);\r\n}\r\n\r\n.shadow-2xl {\r\n box-shadow: var(--shadow-2xl);\r\n}\r\n\r\n.shadow-3xl {\r\n box-shadow: var(--shadow-3xl);\r\n}\r\n\r\n.blur-sm {\r\n backdrop-filter: var(--blur-sm);\r\n}\r\n\r\n.blur-md {\r\n backdrop-filter: var(--blur-md);\r\n}\r\n\r\n.blur-lg {\r\n backdrop-filter: var(--blur-lg);\r\n}\r\n\r\n.blur-xl {\r\n backdrop-filter: var(--blur-xl);\r\n}\r\n\r\n/* -----------------Gradients----------------- */\r\n:root {\r\n /* Gray Gradients */\r\n /* --gray-gradient-600: linear-gradient(); */\r\n --gradient-gray-600-to-500-90d: linear-gradient(90deg, var(--gray-600), var(--gray-500));\r\n --gradient-gray-700-to-600-45d: linear-gradient(45deg, var(--gray-700), var(--gray-600));\r\n --gradient-gray-800-to-600-45d: linear-gradient(45deg, var(--gray-800), var(--gray-600));\r\n --gradient-gray-800-to-600-90d: linear-gradient(90deg, var(--gray-800), var(--gray-600));\r\n --gradient-gray-800-to-700265-d: linear-gradient(26.5deg, var(--gray-800), var(--gray-700));\r\n --gradient-gray-900-to-600-45d: linear-gradient(45deg, var(--gray-900), var(--gray-600));\r\n\r\n /* Brand Dark Blue Gradients */\r\n --gradient-darkBlue-500-to-400-90d: linear-gradient(90deg, var(--brandDarkBlue-500), var(--brandDarkBlue-400));\r\n --gradient-darkBlue-700-to-500-45d: linear-gradient(45deg, var(--brandDarkBlue-700), var(--brandDarkBlue-500));\r\n --gradient-darkBlue-700-to-400-45d: linear-gradient(45deg, var(--brandDarkBlue-700), var(--brandDarkBlue-400));\r\n --gradient-darkBlue-800-to-500-90d: linear-gradient(90deg, var(--brandDarkBlue-800), var(--brandDarkBlue-500));\r\n --gradient-darkBlue-800-to-600265-d: linear-gradient(26.5deg, var(--brandDarkBlue-800), var(--brandDarkBlue-600));\r\n --gradient-darkBlue-900-to-600-45d: linear-gradient(45deg, var(--brandDarkBlue-900), var(--brandDarkBlue-600));\r\n\r\n /* Brand Red Gradients */\r\n --gradient-red-500-to-400-90d: linear-gradient(90deg, var(--brandRed-600), var(--brandRed-400));\r\n --gradient-red-700-to-500-45d: linear-gradient(45deg, var(--brandRed-700), var(--brandRed-500));\r\n --gradient-red-700-to-400-45d: linear-gradient(45deg, var(--brandRed-700), var(--brandRed-400));\r\n --gradient-red-800-to-500-90d: linear-gradient(90deg, var(--brandRed-800), var(--brandRed-500));\r\n --gradient-red-800-to-600265-d: linear-gradient(26.5deg, var(--brandRed-800), var(--brandRed-600));\r\n --gradient-red-900-to-600-45d: linear-gradient(45deg, var(--brandRed-900), var(--brandRed-600));\r\n\r\n /* Blue Gradients */\r\n --gradient-blue-500-to-400-90d: linear-gradient(90deg, var(--blue-500), var(--blue-400));\r\n --gradient-blue-700-to-500-45d: linear-gradient(45deg, var(--blue-700), var(--blue-500));\r\n --gradient-blue-700-to-400-45d: linear-gradient(45deg, var(--blue-700), var(--blue-400));\r\n --gradient-blue-800-to-500-90d: linear-gradient(90deg, var(--blue-800), var(--blue-500));\r\n --gradient-blue-800-to-600265-d: linear-gradient(26.5deg, var(--blue-800), var(--blue-600));\r\n --gradient-blue-900-to-600-45d: linear-gradient(45deg, var(--blue-900), var(--blue-600));\r\n}\r\n\r\n.gradient-gray-600-to-500-90d {\r\n background: var(--gradient-gray-600-to-500-90d);\r\n}\r\n\r\n.gradient-gray-700-to-600-45d {\r\n background: var(--gradient-gray-700-to-600-45d);\r\n}\r\n\r\n.gradient-gray-800-to-600-45d {\r\n background: var(--gradient-gray-800-to-600-45d);\r\n}\r\n\r\n.gradient-gray-800-to-600-90d {\r\n background: var(--gradient-gray-800-to-600-90d);\r\n}\r\n\r\n.gradient-gray-800-to-700265-d {\r\n background: var(--gradient-gray-800-to-700265-d);\r\n}\r\n\r\n.gradient-gray-900-to-600-45d {\r\n background: var(--gradient-gray-900-to-600-45d);\r\n}\r\n\r\n.gradient-darkBlue-500-to-400-90d {\r\n background: var(--gradient-darkBlue-500-to-400-90d);\r\n}\r\n\r\n.gradient-darkBlue-700-to-500-45d {\r\n background: var(--gradient-darkBlue-700-to-500-45d);\r\n}\r\n\r\n.gradient-darkBlue-700-to-400-45d {\r\n background: var(--gradient-darkBlue-700-to-400-45d);\r\n}\r\n\r\n.gradient-darkBlue-800-to-500-90d {\r\n background: var(--gradient-darkBlue-800-to-500-90d);\r\n}\r\n\r\n.gradient-darkBlue-800-to-600265-d {\r\n background: var(--gradient-darkBlue-800-to-600265-d);\r\n}\r\n\r\n.gradient-darkBlue-900-to-600-45d {\r\n background: var(--gradient-darkBlue-900-to-600-45d);\r\n}\r\n\r\n.gradient-red-500-to-400-90d {\r\n background: var(--gradient-red-500-to-400-90d);\r\n}\r\n\r\n.gradient-red-700-to-500-45d {\r\n background: var(--gradient-red-700-to-500-45d);\r\n}\r\n\r\n.gradient-red-700-to-400-45d {\r\n background: var(--gradient-red-700-to-400-45d);\r\n}\r\n\r\n.gradient-red-800-to-500-90d {\r\n background: var(--gradient-red-800-to-500-90d);\r\n}\r\n\r\n.gradient-red-800-to-600265-d {\r\n background: var(--gradient-red-800-to-600265-d);\r\n}\r\n\r\n.gradient-red-900-to-600-45d {\r\n background: var(--gradient-red-900-to-600-45d);\r\n}\r\n\r\n.gradient-blue-500-to-400-90d {\r\n background: var(--gradient-blue-500-to-400-90d);\r\n}\r\n\r\n.gradient-blue-700-to-500-45d {\r\n background: var(--gradient-blue-700-to-500-45d);\r\n}\r\n\r\n.gradient-blue-700-to-400-45d {\r\n background: var(--gradient-blue-700-to-400-45d);\r\n}\r\n\r\n.gradient-blue-800-to-500-90d {\r\n background: var(--gradient-blue-800-to-500-90d);\r\n}\r\n\r\n.gradient-blue-800-to-600265-d {\r\n background: var(--gradient-blue-800-to-600265-d);\r\n}\r\n\r\n.gradient-blue-900-to-600-45d {\r\n background: var(--gradient-blue-900-to-600-45d);\r\n}\r\n\r\n/* Spacing Styles */\r\n:root {\r\n /* Positive spacing */\r\n --spacing-none: 0rem;\r\n --spacing-half: 0.125rem;\r\n --spacing-1: 0.25rem;\r\n --spacing-2: 0.5rem;\r\n --spacing-3: 0.75rem;\r\n --spacing-4: 1rem;\r\n --spacing-5: 1.25rem;\r\n --spacing-6: 1.5rem;\r\n --spacing-7: 2rem;\r\n --spacing-8: 2.5rem;\r\n --spacing-12: 3rem;\r\n --spacing-16: 4rem;\r\n --spacing-20: 5rem;\r\n --spacing-24: 6rem;\r\n --spacing-32: 8rem;\r\n --spacing-40: 10rem;\r\n --spacing-48: 12rem;\r\n --spacing-56: 14rem;\r\n --spacing-64: 16rem;\r\n\r\n /* Negative spacing */\r\n\r\n --spacing-negative-half: -0.125rem;\r\n --spacing-negative-1: -0.25rem;\r\n --spacing-negative-2: -0.5rem;\r\n --spacing-negative-3: -0.75rem;\r\n --spacing-negative-4: -1rem;\r\n --spacing-negative-5: -1.25rem;\r\n --spacing-negative-6: -1.5rem;\r\n --spacing-negative-7: -2rem;\r\n\r\n /* Radius */\r\n --rounded-none: 0rem;\r\n --rounded-xs: 0.25rem;\r\n --rounded-sm: 0.5rem;\r\n --rounded-md: 0.75rem;\r\n --rounded-lg: 1rem;\r\n --rounded-xl: 1.5rem;\r\n --rounded-2xl: 2rem;\r\n --rounded-full: 62.438rem;\r\n}\r\n\r\n/* Typography Styles */\r\n@import url('https://fonts.googleapis.com/css2?family=Sora&display=swap');\r\n\r\n:root {\r\n /* Font Sizes */\r\n --font-size-d-2xl: 4.5rem;\r\n --font-size-d-xl: 3.75rem;\r\n --font-size-d-lg: 3rem;\r\n --font-size-d-md: 2.25rem;\r\n --font-size-d-sm: 1.875rem;\r\n --font-size-d-xs: 1.5rem;\r\n --font-size-t-xl: 1.25rem;\r\n --font-size-t-lg: 1.125rem;\r\n --font-size-t-md: 1rem;\r\n --font-size-t-sm: 0.875rem;\r\n --font-size-t-xs: 0.75rem;\r\n --font-size-t-xxs: 0.625rem;\r\n\r\n /* Font Weights */\r\n --font-weight-bold: 700;\r\n --font-weight-semi-bold: 600;\r\n --font-weight-medium: 500;\r\n --font-weight-regular: 400;\r\n\r\n /* Line Heights */\r\n --font-line-height-d-2xl: 5rem;\r\n --font-line-height-d-xl: 4.25rem;\r\n --font-line-height-d-lg: 3.75rem;\r\n --font-line-height-d-md: 2.75rem;\r\n --font-line-height-d-sm: 2.375rem;\r\n --font-line-height-d-xs: 2rem;\r\n --font-line-height-t-xl: 2rem;\r\n --font-line-height-t-lg: 1.875rem;\r\n --font-line-height-t-md: 1.688rem;\r\n --font-line-height-t-sm: 1.5rem;\r\n --font-line-height-t-xs: 1.25rem;\r\n --font-line-height-t-xxs: 1.125rem;\r\n\r\n /* Letter Spacings */\r\n --font-letter-spacing-d-2xl: -0.09rem;\r\n --font-letter-spacing-d-xl: -0.075rem;\r\n --font-letter-spacing-d-lg: -0.075rem;\r\n --font-letter-spacing-d-md: -0.045rem;\r\n --font-letter-spacing-d-sm: 0;\r\n --font-letter-spacing-d-xs: 0;\r\n --font-letter-spacing-d-xxs: 0;\r\n\r\n /* Font Families */\r\n --font-family-title: 'Sora';\r\n --font-family-body: 'Sora';\r\n}\r\n\r\n/* Media queries for medium screens (tablet) */\r\n@media (max-width: 1199px) {\r\n :root {\r\n /* Font Sizes */\r\n --font-size-d-2xl: 3.75rem;\r\n --font-size-d-xl: 3.5rem;\r\n --font-size-d-lg: 2.75rem;\r\n --font-size-d-md: 2.25rem;\r\n --font-size-d-sm: 1.875rem;\r\n --font-size-d-xs: 1.5rem;\r\n\r\n /* Line Heights */\r\n --font-line-height-d-2xl: 4.25rem;\r\n --font-line-height-d-xl: 3.75rem;\r\n --font-line-height-d-lg: 2.4375rem;\r\n --font-line-height-d-md: 2.75rem;\r\n --font-line-height-d-sm: 2.375rem;\r\n --font-line-height-d-xs: 2rem;\r\n\r\n /* Letter Spacings */\r\n --font-letter-spacing-2xl: -0.075rem;\r\n --font-letter-spacing-xl: -0.065rem;\r\n --font-letter-spacing-lg: -0.045rem;\r\n --font-letter-spacing-md: -0.045rem;\r\n --font-letter-spacing-sm: 0rem;\r\n --font-letter-spacing-xs: 0rem;\r\n }\r\n}\r\n\r\n/* Media queries for smaller screens (mobile) */\r\n@media (max-width: 743px) {\r\n :root {\r\n /* Font Sizes */\r\n --font-size-d-2xl: 3rem;\r\n --font-size-d-xl: 2.5rem;\r\n --font-size-d-lg: 2rem;\r\n --font-size-d-md: 1.75rem;\r\n --font-size-d-sm: 1.5rem;\r\n --font-size-d-xs: 1.25rem;\r\n\r\n /* Line Heights */\r\n --font-line-height-d-2xl: 3.375rem;\r\n --font-line-height-d-xl: 2.875rem;\r\n --font-line-height-d-lg: 2.5rem;\r\n --font-line-height-d-md: 2.1375rem;\r\n --font-line-height-d-sm: 2rem;\r\n --font-line-height-d-xs: 1.75rem;\r\n\r\n /* Letter Spacings */\r\n --font-letter-spacing-2xl: -0.06rem;\r\n --font-letter-spacing-xl: -0.05rem;\r\n --font-letter-spacing-lg: -0.045rem;\r\n --font-letter-spacing-md: 0rem;\r\n --font-letter-spacing-sm: 0rem;\r\n --font-letter-spacing-xs: 0rem;\r\n }\r\n}\r\n\r\n.display-2xl-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-2xl);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-d-2xl);\r\n letter-spacing: var(--font-letter-spacing-d-2xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-2xl-bold::before,\r\n.display-2xl-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-2xl-bold::before {\r\n margin-bottom: -0.135em;\r\n}\r\n\r\n.display-2xl-bold::after {\r\n margin-top: -0.205em;\r\n}\r\n\r\n.display-2xl-semi-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-2xl);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-d-2xl);\r\n letter-spacing: var(--font-letter-spacing-d-2xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-2xl-semi-bold::before,\r\n.display-2xl-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-2xl-semi-bold::before {\r\n margin-bottom: -0.135em;\r\n}\r\n\r\n.display-2xl-semi-bold::after {\r\n margin-top: -0.205em;\r\n}\r\n\r\n.display-xl-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-xl);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-d-xl);\r\n letter-spacing: var(--font-letter-spacing-d-xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-xl-bold::before,\r\n.display-xl-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-xl-bold::before {\r\n margin-bottom: -0.145em;\r\n}\r\n\r\n.display-xl-bold::after {\r\n margin-top: -0.215em;\r\n}\r\n\r\n.display-xl-semi-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-xl);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-d-xl);\r\n letter-spacing: var(--font-letter-spacing-d-xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-xl-semi-bold::before,\r\n.display-xl-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-xl-semi-bold::before {\r\n margin-bottom: -0.145em;\r\n}\r\n\r\n.display-xl-semi-bold::after {\r\n margin-top: -0.215em;\r\n}\r\n\r\n.display-lg-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-lg);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-d-lg);\r\n letter-spacing: var(--font-letter-spacing-d-lg);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-lg-bold::before,\r\n.display-lg-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-lg-bold::before {\r\n margin-bottom: -0.015em;\r\n}\r\n\r\n.display-lg-bold::after {\r\n margin-top: -0.095em;\r\n}\r\n\r\n.display-lg-semi-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-lg);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-d-lg);\r\n letter-spacing: var(--font-letter-spacing-d-lg);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-lg-semi-bold::before,\r\n.display-lg-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-lg-semi-bold::before {\r\n margin-bottom: -0.015em;\r\n}\r\n\r\n.display-lg-semi-bold::after {\r\n margin-top: -0.095em;\r\n}\r\n\r\n.display-md-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-md);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-d-md);\r\n letter-spacing: var(--font-letter-spacing-d-md);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-md-bold::before,\r\n.display-md-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-md-bold::before {\r\n margin-bottom: -0.195em;\r\n}\r\n\r\n.display-md-bold::after {\r\n margin-top: -0.255em;\r\n}\r\n\r\n.display-md-semi-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-md);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-d-md);\r\n letter-spacing: var(--font-letter-spacing-d-md);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-md-semi-bold::before,\r\n.display-md-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-md-semi-bold::before {\r\n margin-bottom: -0.195em;\r\n}\r\n\r\n.display-md-semi-bold::after {\r\n margin-top: -0.255em;\r\n}\r\n\r\n.display-sm-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-sm);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-d-sm);\r\n letter-spacing: var(--font-letter-spacing-d-sm);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-sm-bold::before,\r\n.display-sm-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-sm-bold::before {\r\n margin-bottom: -0.195em;\r\n}\r\n\r\n.display-sm-bold::after {\r\n margin-top: -0.255em;\r\n}\r\n\r\n.display-sm-semi-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-sm);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-d-sm);\r\n letter-spacing: var(--font-letter-spacing-d-sm);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-sm-semi-bold::before,\r\n.display-sm-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-sm-semi-bold::before {\r\n margin-bottom: -0.195em;\r\n}\r\n\r\n.display-sm-semi-bold::after {\r\n margin-top: -0.255em;\r\n}\r\n\r\n.display-xs-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-xs);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-d-xs);\r\n letter-spacing: var(--font-letter-spacing-d-xs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-xs-bold::before,\r\n.display-xs-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-xs-bold::before {\r\n margin-bottom: -0.199em;\r\n}\r\n\r\n.display-xs-bold::after {\r\n margin-top: -0.195em; /* Continue from here */\r\n}\r\n\r\n.display-xs-semi-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-xs);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-d-xs);\r\n letter-spacing: var(--font-letter-spacing-d-xs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-xs-semi-bold::before,\r\n.display-xs-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-xs-semi-bold::before {\r\n margin-bottom: -0.259em;\r\n}\r\n\r\n.display-xs-semi-bold::after {\r\n margin-top: -0.295em;\r\n}\r\n\r\n.text-xl-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xl);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-t-xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xl-bold::before,\r\n.text-xl-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xl-bold::before {\r\n margin-bottom: -0.329em;\r\n}\r\n\r\n.text-xl-bold::after {\r\n margin-top: -0.359em;\r\n}\r\n\r\n.text-xl-semi-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xl);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-t-xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xl-semi-bold::before,\r\n.text-xl-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xl-semi-bold::before {\r\n margin-bottom: -0.329em;\r\n}\r\n\r\n.text-xl-semi-bold::after {\r\n margin-top: -0.359em;\r\n}\r\n\r\n.text-xl-medium {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xl);\r\n font-weight: var(--font-weight-medium);\r\n line-height: var(--font-line-height-t-xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xl-medium::before,\r\n.text-xl-medium::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xl-medium::before {\r\n margin-bottom: -0.339em;\r\n}\r\n\r\n.text-xl-medium::after {\r\n margin-top: -0.399em;\r\n}\r\n\r\n.text-xl-regular {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xl);\r\n font-weight: var(--font-weight-regular);\r\n line-height: var(--font-line-height-t-xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xl-regular::before,\r\n.text-xl-regular::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xl-regular::before {\r\n margin-bottom: -0.339em;\r\n}\r\n\r\n.text-xl-regular::after {\r\n margin-top: -0.399em;\r\n}\r\n\r\n.text-lg-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-lg);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-t-lg);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-lg-bold::before,\r\n.text-lg-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-lg-bold::before {\r\n margin-bottom: -0.339em;\r\n}\r\n\r\n.text-lg-bold::after {\r\n margin-top: -0.399em;\r\n}\r\n\r\n.text-lg-semi-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-lg);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-t-lg);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-lg-semi-bold::before,\r\n.text-lg-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-lg-semi-bold::before {\r\n margin-bottom: -0.339em;\r\n}\r\n\r\n.text-lg-semi-bold::after {\r\n margin-top: -0.399em;\r\n}\r\n\r\n.text-lg-medium {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-lg);\r\n font-weight: var(--font-weight-medium);\r\n line-height: var(--font-line-height-t-lg);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-lg-medium::before,\r\n.text-lg-medium::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-lg-medium::before {\r\n margin-bottom: -0.349em;\r\n}\r\n\r\n.text-lg-medium::after {\r\n margin-top: -0.389em;\r\n}\r\n\r\n.text-lg-regular {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-lg);\r\n font-weight: var(--font-weight-regular);\r\n line-height: var(--font-line-height-t-lg);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-lg-regular::before,\r\n.text-lg-regular::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-lg-regular::before {\r\n margin-bottom: -0.349em;\r\n}\r\n\r\n.text-lg-regular::after {\r\n margin-top: -0.389em;\r\n}\r\n\r\n.text-md-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-md);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-t-md);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-md-bold::before,\r\n.text-md-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-md-bold::before {\r\n margin-bottom: -0.349em;\r\n}\r\n\r\n.text-md-bold::after {\r\n margin-top: -0.389em;\r\n}\r\n\r\n.text-md-semi-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-md);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-t-md);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-md-semi-bold::before,\r\n.text-md-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-md-semi-bold::before {\r\n margin-bottom: -0.349em;\r\n}\r\n\r\n.text-md-semi-bold::after {\r\n margin-top: -0.389em;\r\n}\r\n\r\n.text-md-medium {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-md);\r\n font-weight: var(--font-weight-medium);\r\n line-height: var(--font-line-height-t-md);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-md-medium::before,\r\n.text-md-medium::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-md-medium::before {\r\n margin-bottom: -0.349em;\r\n}\r\n\r\n.text-md-medium::after {\r\n margin-top: -0.389em;\r\n}\r\n\r\n.text-md-regular {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-md);\r\n font-weight: var(--font-weight-regular);\r\n line-height: var(--font-line-height-t-md);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-md-regular::before,\r\n.text-md-regular::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-md-regular::before {\r\n margin-bottom: -0.349em;\r\n}\r\n\r\n.text-md-regular::after {\r\n margin-top: -0.389em;\r\n}\r\n\r\n.text-sm-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-sm);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-t-sm);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-sm-bold::before,\r\n.text-sm-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-sm-bold::before {\r\n margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-bold::after {\r\n margin-top: -0.349em;\r\n}\r\n\r\n.text-sm-semi-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-sm);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-t-sm);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-sm-semi-bold::before,\r\n.text-sm-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-sm-semi-bold::before {\r\n margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-semi-bold::after {\r\n margin-top: -0.349em;\r\n}\r\n\r\n.text-sm-medium {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-sm);\r\n font-weight: var(--font-weight-medium);\r\n line-height: var(--font-line-height-t-sm);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n position: relative;\r\n display: inline-block;\r\n}\r\n\r\n.text-sm-medium::before,\r\n.text-sm-medium::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-sm-medium::before {\r\n margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-medium::after {\r\n margin-top: -0.299em;\r\n}\r\n\r\n.text-sm-regular {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-sm);\r\n font-weight: var(--font-weight-regular);\r\n line-height: var(--font-line-height-t-sm);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n position: relative;\r\n display: inline-block;\r\n}\r\n\r\n.text-sm-regular::before,\r\n.text-sm-regular::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-sm-regular::before {\r\n margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-regular::after {\r\n margin-top: -0.299em;\r\n}\r\n\r\n.text-xs-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xs);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-t-xs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xs-bold::before,\r\n.text-xs-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xs-bold::before {\r\n margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xs-bold::after {\r\n margin-top: -0.416em;\r\n}\r\n\r\n.text-xs-semi-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xs);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-t-xs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xs-semi-bold::before,\r\n.text-xs-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xs-semi-bold::before {\r\n margin-bottom: -0.321em;\r\n}\r\n\r\n.text-xs-semi-bold::after {\r\n margin-top: -0.416em;\r\n}\r\n\r\n.text-xs-medium {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xs);\r\n font-weight: var(--font-weight-medium);\r\n line-height: var(--font-line-height-t-xs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xs-medium::before,\r\n.text-xs-medium::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xs-medium::before {\r\n margin-bottom: -0.285em;\r\n}\r\n\r\n.text-xs-medium::after {\r\n margin-top: -0.396em;\r\n}\r\n\r\n.text-xs-regular {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xs);\r\n font-weight: var(--font-weight-regular);\r\n line-height: var(--font-line-height-t-xs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xs-regular::before,\r\n.text-xs-regular::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xs-regular::before {\r\n margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xs-regular::after {\r\n margin-top: -0.396em;\r\n}\r\n\r\n.text-xxs-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xxs);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-t-xxs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xxs-bold::before,\r\n.text-xxs-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xxs-bold::before {\r\n margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-bold::after {\r\n margin-top: -0.416em;\r\n}\r\n\r\n.text-xxs-semi-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xxs);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-t-xxs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xxs-semi-bold::before,\r\n.text-xxs-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xxs-semi-bold::before {\r\n margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-semi-bold::after {\r\n margin-top: -0.416em;\r\n}\r\n\r\n.text-xxs-medium {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xxs);\r\n font-weight: var(--font-weight-medium);\r\n line-height: var(--font-line-height-t-xxs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xxs-medium::before,\r\n.text-xxs-medium::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xxs-medium::before {\r\n margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-medium::after {\r\n margin-top: -0.416em;\r\n}\r\n\r\n.text-xxs-regular {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xxs);\r\n font-weight: var(--font-weight-regular);\r\n line-height: var(--font-line-height-t-xxs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xxs-regular::before,\r\n.text-xxs-regular::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xxs-regular::before {\r\n margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-regular::after {\r\n margin-top: -0.416em;\r\n}\r\n\r\n/* Button slot styles */\r\n/* .slotted_button_text.primary {\r\n color: var(--color-text-inverse, #ffffff) !important;\r\n}\r\n\r\n.slotted_button_text.secondary_gray {\r\n color: var(--color-text, #4b5565) !important;\r\n}\r\n\r\n.slotted_button_text.secondary_color {\r\n color: var(--color-text-brandRed, #e21b2e) !important;\r\n}\r\n\r\n.slotted_button_text.tertiary_gray {\r\n color: var(--color-text, #4b5565) !important;\r\n}\r\n\r\n.slotted_button_text.tertiary_color {\r\n color: var(--color-text-brandRed, #e21b2e) !important;\r\n}\r\n\r\n.slotted_button_text.link_gray {\r\n color: var(--color-text, #4b5565) !important;\r\n}\r\n\r\n.slotted_button_text.link_color {\r\n color: var(--color-link, #075db2) !important;\r\n}\r\n\r\n.slotted_button_text.primary.destructive {\r\n color: var(--color-text-inverse, #ffffff) !important;\r\n}\r\n\r\n#slotted_button_text.primary.disabled,\r\n#slotted_button_text.secondary_gray.disabled,\r\n#slotted_button_text.secondary_color.disabled,\r\n#slotted_button_text.tertiary_gray.disabled,\r\n#slotted_button_text.tertiary_color.disabled,\r\n#slotted_button_text.link_gray.disabled,\r\n#slotted_button_text.link_color.disabled {\r\n color: var(--color-text-disabled, #9aa4b2) !important;\r\n}\r\n\r\n#slotted_button_text.secondary_gray.default.destructive,\r\n#slotted_button_text.secondary_color.default.destructive,\r\n#slotted_button_text.tertiary_gray.default.destructive,\r\n#slotted_button_text.tertiary_color.default.destructive,\r\n#slotted_button_text.link_gray.default.destructive,\r\n#slotted_button_text.link_color.default.destructive {\r\n color: var(--color-text-danger, #b51726) !important;\r\n} */\r\n\r\n.input_dropdown_div {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n border-radius: 0.5rem;\r\n gap: var(--spacing-3);\r\n border: 1px solid var(--color-border-input, #808c9e);\r\n background-color: var(--color-background-card, #ffffff);\r\n padding: var(--spacing-none) var(--spacing-3);\r\n cursor: pointer;\r\n position: relative;\r\n}\r\n\r\n.input_dropdown_container {\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--spacing-2);\r\n}\r\n\r\n.input_dropdown_container.tag {\r\n min-height: 3rem;\r\n}\r\n\r\n.icon {\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.input_with_label {\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--spacing-2);\r\n}\r\n\r\n.dropdown_label{\r\n color: var(--color-text, #4B5565);\r\n}\r\n\r\n.hint_text {\r\n color: var(--color-text-subtle, #697586);\r\n}\r\n\r\n.error_text {\r\n color: var(--color-text-danger, #b51726);\r\n}\r\n\r\n/* Size Styles */\r\n.input_dropdown_div.sm {\r\n height: 2.5rem;\r\n}\r\n\r\n.input_dropdown_div.md {\r\n height: 3rem;\r\n}\r\n\r\n.dot.sm {\r\n width: var(--spacing-2);\r\n height: var(--spacing-2);\r\n}\r\n\r\n.dot.md {\r\n width: 0.625rem;\r\n height: 0.625rem;\r\n}\r\n\r\n/* State Styles */\r\n.input_dropdown_div.focused {\r\n border-color: var(--color-border-selected, #075db2);\r\n}\r\n\r\n.input_dropdown_div.destructive {\r\n border-color: var(--color-border-danger, #b51726);\r\n}\r\n\r\n.input_dropdown_div.disabled {\r\n background-color: var(--color-background-disabled, #f6f8fa);\r\n pointer-events: none;\r\n cursor: not-allowed;\r\n}\r\n\r\n.placeholder {\r\n display: flex;\r\n justify-content: stretch;\r\n width: 100%;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n.placeholder p{\r\n width: 100%;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n color: var(--color-text-disabled, #808C9E);\r\n}\r\n\r\n.content {\r\n display: flex;\r\n gap: var(--spacing-2);\r\n overflow: hidden; /* Clip overflowing content */\r\n /* width: 50px; */\r\n flex: 1 0 0;\r\n}\r\n\r\n.text.tag {\r\n display: flex;\r\n /* justify-content: flex-start;\r\n align-items: stretch;\r\n flex-wrap: wrap; */\r\n gap: 0.38rem; \r\n border: 1px solid red;\r\n}\r\n\r\n.supporting_text {\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.added_tag {\r\n width: fit-content;\r\n}\r\n\r\n.help_icon {\r\n display: flex;\r\n align-items: center;\r\n height: fit-content;\r\n}\r\n\r\n.dropdown_icon {\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\nsvg.disabled path {\r\n stroke: var(--color-icon-disabled, #cdd5df);\r\n}\r\n\r\n.dropdown_menu {\r\n display: flex;\r\n width: 100%;\r\n max-height: 300px;\r\n padding: var(--spacing-none);\r\n flex-direction: column;\r\n align-items: flex-start;\r\n align-items: stretch;\r\n border-radius: var(--rounded-sm);\r\n border: 1px solid var(--color-border-subtler, #e3e8ef);\r\n background: var(--color-surface, #ffffff);\r\n box-shadow: var(--shadow-sm);\r\n position: absolute;\r\n gap: var(--spacing-none);\r\n transition: 1s ease-in-out;\r\n overflow-y: auto;\r\n}\r\n\r\n.dropdown_menu.top {\r\n bottom: 105%;\r\n left: 0;\r\n z-index: 999;\r\n}\r\n\r\n.dropdown_menu.bottom {\r\n top: 105%;\r\n left: 0;\r\n z-index: 999;\r\n}\r\n\r\n.dropdown_menu::-webkit-scrollbar{\r\n right: 0rem;\r\n bottom: -1.53125rem;\r\n width: 0.8rem;\r\n margin-top: 1rem;\r\n}\r\n\r\n.dropdown_menu::-webkit-scrollbar-track{\r\n width: 0.5rem;\r\n padding: var(--spacing-1);\r\n border: none;\r\n}\r\n\r\n.dropdown_menu::-webkit-scrollbar-thumb{\r\n width: 0.5rem;\r\n height: 11.75rem;\r\n border: 0.25rem solid var(--color-background-card, #FFFFFF);\r\n border-radius: var(--rounded-full);\r\n background: var(--color-border-subtle, #CDD5DF);\r\n}\r\n\r\n/* .input_dropdown_div.sm.tag{\r\n min-height: 2.5rem;\r\n} */\r\n\r\n.input_dropdown_div.tag {\r\n min-height: 3rem;\r\n height: fit-content;\r\n}\r\n\r\n.input_dropdown_div.md.tag {\r\n min-height: 2.5rem;\r\n}\r\n\r\n.input_dropdown_div.md.tag {\r\n min-height: 3rem;\r\n}\r\n\r\n.opened {\r\n transform: rotate(180deg);\r\n transition: 0.2s ease-in-out;\r\n}\r\n\r\n::slotted([slot='tooltip_label']) {\r\n white-space: nowrap;\r\n color: var(--color-text, #4b5565);\r\n}\r\n\r\n::slotted([slot='tooltip_supporting_text']) {\r\n min-width: fit-content;\r\n max-width: 18.5rem;\r\n color: var(--color-text-subtle, #697586);\r\n margin-top: 5rem;\r\n}\r\n\r\n::slotted([slot='initials'].gray) {\r\n color: #4b5565;\r\n}\r\n\r\n::slotted([slot='initials'].blue) {\r\n color: var(--color-text-information, #064e94);\r\n}\r\n\r\n::slotted([slot='initials'].cyan) {\r\n color: var(--color-text-discovery, #0086c9);\r\n}\r\n\r\n::slotted([slot='initials'].pink) {\r\n color: var(--color-text-pink, #dd2590);\r\n}\r\n\r\n::slotted([slot='initials'].purple) {\r\n color: var(--color-text-purple, #6938ef);\r\n}\r\n\r\n::slotted([slot='initials'].green) {\r\n color: var(--color-text-success, #079455);\r\n}\r\n\r\n::slotted([slot='initials'].yellow) {\r\n color: var(--color-text-warning, #dc6803);\r\n}\r\n\r\n.dropdown_search_field {\r\n background: var(--color-surface, #ffffff);\r\n padding: var(--spacing-2) var(--spacing-2) var(--spacing-none) var(--spacing-2);\r\n position: sticky;\r\n top: 0;\r\n z-index: 999;\r\n}\r\n\r\n.empty_state {\r\n margin: auto;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\n.background {\r\n position: relative;\r\n width: 80%;\r\n}\r\n\r\n.message_background {\r\n position: absolute;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: var(--spacing-1);\r\n}\r\n\r\n.illustration {\r\n width: 100px;\r\n height: 100px;\r\n}\r\n\r\n.message {\r\n color: var(--color-text-bold, #202939);\r\n}\r\n\r\n.text {\r\n display: flex;\r\n align-items: center;\r\n /* flex: 1 1 auto; */\r\n overflow: hidden; /* Prevent content from overflowing */\r\n}\r\n\r\n.selected_text {\r\n overflow: hidden; /* Hide overflowing text */\r\n text-overflow: ellipsis;\r\n white-space: nowrap; /* Prevent wrapping */\r\n flex: 1 1 auto; /* Take up available space and adjust dynamically */\r\n min-width: 0; /* Ensures it respects parent width in flexbox */\r\n color: var(--color-text, #4B5565);\r\n}\r\n\r\n.search_input {\r\n display: flex;\r\n flex: 1 0 0;\r\n width: 100%;\r\n}\r\n\r\ninput {\r\n border: none;\r\n color: var(--color-text, #4b5565);\r\n}\r\n\r\ninput:focus {\r\n outline: none;\r\n}\r\n\r\ninput::placeholder {\r\n color: var(--color-text-disabled, #cdd5df);\r\n}\r\n\r\n.close_button {\r\n position: absolute;\r\n}\r\n\r\n.close_button.sm {\r\n right: 0.2rem;\r\n top: 0.15rem;\r\n}\r\n\r\n.close_button.md {\r\n right: 0.3rem;\r\n top: 0.25rem;\r\n}\r\n\r\n.loader_div {\r\n width: 100%;\r\n height: 10rem;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\n.loader {\r\n border: 4px solid var(--color-background-gray, #cdd5df); /* Light grey */\r\n border-top: 4px solid var(--color-background-selected, #075db2); /* Blue */\r\n border-radius: 50%;\r\n width: 30px;\r\n height: 30px;\r\n animation: spin 2s linear infinite;\r\n}\r\n\r\n@keyframes spin {\r\n 0% {\r\n transform: rotate(0deg);\r\n }\r\n 100% {\r\n transform: rotate(360deg);\r\n }\r\n}\r\n";
|
|
4469
4620
|
|
|
4470
4621
|
const GbInputDropdown = class {
|
|
@@ -5591,9 +5742,7 @@ const GbNavBar = class {
|
|
|
5591
5742
|
}
|
|
5592
5743
|
}
|
|
5593
5744
|
onItemsChanged(newValue, _oldValue) {
|
|
5594
|
-
console.log(newValue);
|
|
5595
5745
|
this.internalItems = [...newValue];
|
|
5596
|
-
// console.log(this.internalItems);
|
|
5597
5746
|
setTimeout(() => {
|
|
5598
5747
|
this.calculateOverflow();
|
|
5599
5748
|
this.measured = true;
|
|
@@ -5613,12 +5762,14 @@ const GbNavBar = class {
|
|
|
5613
5762
|
// }, 3000);
|
|
5614
5763
|
this.internalItems = this.items; // copy initial prop value safely
|
|
5615
5764
|
}
|
|
5616
|
-
|
|
5765
|
+
connectedCallback() {
|
|
5766
|
+
window.addEventListener('resize', this.handleResize);
|
|
5767
|
+
}
|
|
5768
|
+
componentWillRender() {
|
|
5617
5769
|
setTimeout(() => {
|
|
5618
5770
|
this.calculateOverflow();
|
|
5619
5771
|
this.measured = true;
|
|
5620
5772
|
}, 0);
|
|
5621
|
-
window.addEventListener('resize', this.handleResize);
|
|
5622
5773
|
}
|
|
5623
5774
|
disconnectedCallback() {
|
|
5624
5775
|
window.removeEventListener('resize', this.handleResize);
|
|
@@ -5643,7 +5794,6 @@ const GbNavBar = class {
|
|
|
5643
5794
|
}
|
|
5644
5795
|
});
|
|
5645
5796
|
this.visibleItems = visible;
|
|
5646
|
-
console.log(this.visibleItems);
|
|
5647
5797
|
this.overflowItems = hidden;
|
|
5648
5798
|
}
|
|
5649
5799
|
toggleDropdown() {
|
|
@@ -5651,7 +5801,7 @@ const GbNavBar = class {
|
|
|
5651
5801
|
}
|
|
5652
5802
|
render() {
|
|
5653
5803
|
const patternSrc = getAssetPath(`assets/top_bar_pattern.svg`);
|
|
5654
|
-
return (h("div", { key: '
|
|
5804
|
+
return (h("div", { key: 'ba10c77cb587050355b7b22ce3b1d50e22ba9cb2', class: `top_bar_div ${this.category} ${this.showBorder ? 'border' : ''}` }, this.category === 'colored_background' && (h("div", { key: '0928ca228ec2f2a03f03765ab233a56b8bee0a31', class: "pattern" }, h("img", { key: 'f52d324aeefc108a2f73c924a928594f014945ab', src: patternSrc, alt: "" }))), h("div", { key: '5681c50983d18bc29d71f32e3ae7dda2201e5687', class: "top_bar_content" }, h("div", { key: '1389382ace2d35c673d4b6380afcf003c0f1d95a', style: { visibility: 'hidden', position: 'absolute', height: '0', overflow: 'hidden', pointerEvents: 'none' } }, this.internalItems.map(tab => (h("gb-nav-bar-item", { state: this.activeIndex === tab.index ? 'active' : 'default', "icon-only": tab.iconOnly, category: this.category, icon: tab.icon, label: tab.label })))), h("div", { key: 'fc496fc2437d48db253b82d14f9742b4d8d19bf4', class: `content ${this.dropdownOpen ? 'shown' : ''}`, ref: el => (this.containerEl = el) }, (this.measured ? this.visibleItems : this.internalItems).map(tab => (h("gb-nav-bar-item", { state: this.activeIndex === tab.index ? 'active' : 'default', "icon-only": tab.iconOnly, category: this.category, icon: tab.icon, label: tab.label, onClick: () => this.onTabItemClicked(tab.index) }))), this.measured && this.overflowItems.length > 0 && (h("div", { key: 'f2c1d101898c2b4ee85612508e41f8525c328e8b', class: "more" }, h("gb-nav-bar-item", { key: 'fa9c340a00920d89b86e366b0e53a02be3882ede', state: this.dropdownItemClicked ? 'active' : 'default', "icon-only": false, category: this.category, icon: "assets/more.svg", label: "More", class: "more_button", onClick: () => this.toggleDropdown() }), this.dropdownOpen && (h("div", { key: '3889dd035c0787020ce1ecacff6f7d60fd7cf672', class: "dropdown_menu" }, this.overflowItems.map(tab => (h("gb-dropdown-items-with-shortcut", { icon: true, state: "default", iconSrc: tab.icon, label: tab.label, onClick: () => this.onTabItemClicked(tab.index, true) })))))))))));
|
|
5655
5805
|
}
|
|
5656
5806
|
get el() { return getElement(this); }
|
|
5657
5807
|
static get watchers() { return {
|
|
@@ -5713,22 +5863,22 @@ const GbNavBarSidemenu = class {
|
|
|
5713
5863
|
this.applicationIcon = '';
|
|
5714
5864
|
this.activeIndex = 0;
|
|
5715
5865
|
this.tabs = [
|
|
5716
|
-
|
|
5717
|
-
|
|
5718
|
-
|
|
5719
|
-
|
|
5720
|
-
|
|
5721
|
-
|
|
5722
|
-
|
|
5723
|
-
|
|
5724
|
-
|
|
5725
|
-
|
|
5726
|
-
|
|
5727
|
-
|
|
5728
|
-
|
|
5729
|
-
|
|
5730
|
-
|
|
5731
|
-
|
|
5866
|
+
// {
|
|
5867
|
+
// name: 'Accounts',
|
|
5868
|
+
// index: 0,
|
|
5869
|
+
// },
|
|
5870
|
+
// {
|
|
5871
|
+
// name: 'Transaction history lite',
|
|
5872
|
+
// index: 1,
|
|
5873
|
+
// },
|
|
5874
|
+
// {
|
|
5875
|
+
// name: 'TPP report',
|
|
5876
|
+
// index: 1,
|
|
5877
|
+
// },
|
|
5878
|
+
// {
|
|
5879
|
+
// name: 'Check dump history',
|
|
5880
|
+
// index: 1,
|
|
5881
|
+
// },
|
|
5732
5882
|
];
|
|
5733
5883
|
this.leadingIconSvg = '';
|
|
5734
5884
|
}
|
|
@@ -5768,7 +5918,7 @@ const GbNavBarSidemenu = class {
|
|
|
5768
5918
|
// </div>
|
|
5769
5919
|
// </div>
|
|
5770
5920
|
// );
|
|
5771
|
-
return (h("div", { key: '
|
|
5921
|
+
return (h("div", { key: '577c99d8b34a180ff6354c933d166c4db1a65d36', class: "nav_bar_wrapper" }, h("gb-vertical-tabs", { key: '12b294bb9c74afa580fe48f3378401e87bef181e', class: "vertical_tabs", size: "sm", tabs: this.tabs, type: "button_primary", "active-index": this.activeIndex, onTabItemClicked: this.onTabItemClicked.bind(this) }), h("div", { key: 'dcc00b92c66fff3a353a4b071a581b5a8c50779a', class: "wrapper" }, h("div", { key: 'ab88b896fef66353f0bcd6e0ff02c814a293accb', class: "wrapper_pattern" }, h("img", { key: '804a22c65205d3505a475d32701f1a36de0d0fd8', src: patternSrc, alt: "" })), h("div", { key: '7e3d4a649a610d7d3dac3dd0ceea950fcd718e02', class: `application_icon`, innerHTML: this.leadingIconSvg }), h("slot", { key: '2fc26aedd208623c4993f2554bbd95e58c1a26ff', name: "application_name" }))));
|
|
5772
5922
|
}
|
|
5773
5923
|
get el() { return getElement(this); }
|
|
5774
5924
|
};
|
|
@@ -6017,6 +6167,50 @@ const GbPasswordButton = class {
|
|
|
6017
6167
|
};
|
|
6018
6168
|
GbPasswordButton.style = gbPasswordButtonCss;
|
|
6019
6169
|
|
|
6170
|
+
const gbPatternCss = "/* @import 'tailwind.css'; */\r\n\r\n:root {\r\n /* --------------------------------------Primary Colors--------------------------------------------- */\r\n /* base color palette */\r\n --base-white: #fff;\r\n --base-black: #000;\r\n\r\n /* gray color palette */\r\n --gray-25: #f9fafb;\r\n --gray-50: #f6f8fa;\r\n --gray-100: #eef2f6;\r\n --gray-200: #e3e8ef;\r\n --gray-300: #cdd5df;\r\n --gray-400: #808c9e;\r\n --gray-500: #697586;\r\n --gray-600: #4b5565;\r\n --gray-700: #364152;\r\n --gray-800: #202939;\r\n --gray-900: #121926;\r\n --gray-950: #0d121c;\r\n\r\n /* brand dark blue color palette */\r\n --brandDarkBlue-25: #f9f9fb;\r\n --brandDarkBlue-50: #edeef3;\r\n --brandDarkBlue-100: #d3d5e0;\r\n --brandDarkBlue-200: #b5b9cc;\r\n --brandDarkBlue-300: #9095b2;\r\n --brandDarkBlue-400: #464f7f;\r\n --brandDarkBlue-500: #212c65;\r\n --brandDarkBlue-600: #1e285c;\r\n --brandDarkBlue-700: #1c2554;\r\n --brandDarkBlue-800: #161d43;\r\n --brandDarkBlue-900: #0b0f22;\r\n --brandDarkBlue-950: #070914;\r\n\r\n /* brand red color palette */\r\n --brandRed-25: #fffbfa;\r\n --brandRed-50: #fef1f2;\r\n --brandRed-100: #fde3e5;\r\n --brandRed-200: #f9b4ba;\r\n --brandRed-300: #f68e98;\r\n --brandRed-400: #f36976;\r\n --brandRed-500: #e21b2e;\r\n --brandRed-600: #cc1a2a;\r\n --brandRed-700: #b51726;\r\n --brandRed-800: #8c121d;\r\n --brandRed-900: #680d16;\r\n --brandRed-950: #3f080d;\r\n\r\n /* warning color palette */\r\n --warning-25: #fffcf5;\r\n --warning-50: #fffaeb;\r\n --warning-100: #fef0c7;\r\n --warning-200: #fedf89;\r\n --warning-300: #fec84b;\r\n --warning-400: #fdb022;\r\n --warning-500: #f79009;\r\n --warning-600: #dc6803;\r\n --warning-700: #b54708;\r\n --warning-800: #93370d;\r\n --warning-900: #7a2e0e;\r\n --warning-950: #4e1d09;\r\n\r\n /* success color palette */\r\n --success-25: #f6fef9;\r\n --success-50: #ecfdf3;\r\n --success-100: #dcfaeb;\r\n --success-200: #a9efc5;\r\n --success-300: #75e0a7;\r\n --success-400: #47cd89;\r\n --success-500: #17b26a;\r\n --success-600: #079455;\r\n --success-700: #067647;\r\n --success-800: #085d3a;\r\n --success-900: #074d31;\r\n --success-950: #053321;\r\n\r\n /* ------------------------------------------opacity color palette-------------------------------------- */\r\n /* 0% opacity */\r\n /* White */\r\n --white-opacity0: rgba(255, 255, 255, 0);\r\n\r\n /* Gray */\r\n --gray25-opacity0: rgba(249, 250, 251, 0);\r\n --gray900-opacity0: rgba(18, 25, 38, 0);\r\n --gray950-opacity0: rgba(13, 18, 28, 0);\r\n\r\n /* 20% opacity */\r\n /* White */\r\n --white-opacity20: rgba(255, 255, 255, 0.2);\r\n\r\n /* Dark Blue */\r\n --darkBlue200-opacity20: rgba(181, 185, 204, 0.2);\r\n --darkBlue500-opacity20: rgba(33, 44, 101, 0.2);\r\n\r\n /* Gray */\r\n --gray25-opacity20: rgba(249, 250, 251, 0.2);\r\n --gray900-opacity20: rgba(18, 25, 38, 0.2);\r\n --gray950-opacity20: rgba(13, 18, 28, 0.2);\r\n\r\n /* 30% opacity */\r\n --darkBlue200-opacity30: rgba(181, 185, 204, 0.3);\r\n --darkBlue500-opacity30: rgba(33, 44, 101, 0.3);\r\n\r\n /* 40% opacity */\r\n --darkBlue200-opacity40: rgba(181, 185, 204, 0.4);\r\n --darkBlue500-opacity40: rgba(33, 44, 101, 0.4);\r\n\r\n /* 50% opacity */\r\n /* White */\r\n --white-opacity50: rgba(255, 255, 255, 0.5);\r\n\r\n /* Gray */\r\n --gray25-opacity50: rgba(249, 250, 251, 0.5);\r\n --gray900-opacity50: rgba(18, 25, 38, 0.5);\r\n --gray950-opacity50: rgba(13, 18, 28, 0.5);\r\n\r\n /* ------------------------------------------Secondary Color------------------------------------------- */\r\n /* blueLight color palete */\r\n --lightBlue-25: #f5fbff;\r\n --lightBlue-50: #f0f9ff;\r\n --lightBlue-100: #e0f2fe;\r\n --lightBlue-200: #b9e6fe;\r\n --lightBlue-300: #7cd4fd;\r\n --lightBlue-400: #7cd4fd;\r\n --lightBlue-500: #0ba5ec;\r\n --lightBlue-600: #0086c9;\r\n --lightBlue-700: #026aa2;\r\n --lightBlue-800: #065986;\r\n --lightBlue-900: #0b4a6f;\r\n --lightBlue-950: #062c41;\r\n\r\n /* blue color palette */\r\n --blue-25: #ecf5fe;\r\n --blue-50: #e4f0fc;\r\n --blue-100: #c8e0f9;\r\n --blue-200: #9ac7f4;\r\n --blue-300: #6aa9e7;\r\n --blue-400: #378fe6;\r\n --blue-500: #075db2;\r\n --blue-600: #064e94;\r\n --blue-700: #053e77;\r\n --blue-800: #042f59;\r\n --blue-900: #022445;\r\n --blue-950: #021d37;\r\n\r\n /* Purple color palete */\r\n --purple-25: #fafaff;\r\n --purple-50: #f4f3ff;\r\n --purple-100: #ebe9fe;\r\n --purple-200: #d9d6fe;\r\n --purple-300: #bdb4fe;\r\n --purple-400: #9b8afb;\r\n --purple-500: #7a5af8;\r\n --purple-600: #6938ef;\r\n --purple-700: #5925dc;\r\n --purple-800: #4a1fb8;\r\n --purple-900: #3e1c96;\r\n --purple-950: #27115f;\r\n\r\n /* pink color palette */\r\n --pink-25: #fef6fb;\r\n --pink-50: #fdf2fa;\r\n --pink-100: #fce7f6;\r\n --pink-200: #fcceee;\r\n --pink-300: #faa7e0;\r\n --pink-400: #f670c7;\r\n --pink-500: #ee46bc;\r\n --pink-600: #dd2590;\r\n --pink-700: #c11574;\r\n --pink-800: #9e165f;\r\n --pink-900: #851651;\r\n --pink-950: #4e0d30;\r\n\r\n /* -------------------------------------------------Token---------------------------------------------- */\r\n\r\n /* -----------Text Color----------- */\r\n\r\n [data-theme='light'] {\r\n --color-text-bold: var(--gray-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-bold: var(--gray-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text: var(--gray-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text: var(--gray-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-subtle: var(--gray-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-subtle: var(--gray-400);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-disabled: var(--gray-400);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-disabled: var(--gray-500);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-inverse: var(--base-white);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-inverse: var(--base-black);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-brandDarkBlue: var(--brandDarkBlue-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-brandDarkBlue: var(--brandDarkBlue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-brandRed: var(--brandRed-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-brandRed: var(--brandRed-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-selected: var(--blue-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-selected: var(--blue-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-danger-bold: var(--brandRed-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-danger-bold: var(--brandRed-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-danger: var(--brandRed-700);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-danger: var(--brandRed-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-danger-subtle: var(--brandRed-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-danger-subtle: var(--brandRed-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-danger-inverse: var(--base-white);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-danger-inverse: var(--brandRed-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-warning-bold: var(--warning-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-warning-bold: var(--warning-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-warning: var(--warning-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-warning: var(--warning-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-warning-subtle: var(--warning-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-warning-subtle: var(--warning-400);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-success-bold: var(--success-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-success-bold: var(--success-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-success: var(--success-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-success: var(--success-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-success-subtle: var(--success-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-success-subtle: var(--success-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-discovery-bold: var(--lightBlue-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-discovery-bold: var(--lightBlue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-discovery: var(--lightBlue-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-discovery: var(--lightBlue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-discovery-subtle: var(--lightBlue-400);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-discovery-subtle: var(--lightBlue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-information-bold: var(--blue-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-information-bold: var(--blue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-information: var(--blue-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-information: var(--blue-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-information-subtle: var(--blue-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-information-subtle: var(--blue-400);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-purple-bold: var(--purple-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-purple-bold: var(--purple-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-purple: var(--purple-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-purple: var(--purple-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-purple-subtle: var(--purple-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-purple-subtle: var(--purple-400);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-pink-bold: var(--pink-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-pink-bold: var(--pink-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-pink: var(--pink-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-pink: var(--pink-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-pink-subtle: var(--pink-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-pink-subtle: var(--pink-400);\r\n }\r\n\r\n /* --------------Link color--------------- */\r\n\r\n [data-theme='light'] {\r\n --color-link: var(--blue-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-link: var(--blue-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-link-pressed: var(--blue-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-link-pressed: var(--blue-600);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-link-visited: var(--lightBlue-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-link-visited: var(--lightBlue-300);\r\n }\r\n\r\n /* --------------Icon color--------------- */\r\n\r\n [data-theme='light'] {\r\n --color-icon-bold: var(--gray-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-bold: var(--gray-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon: var(--gray-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon: var(--gray-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-subtle: var(--gray-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-subtle: var(--gray-400);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-disabled: var(--gray-400);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-disabled: var(--gray-500);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-inverse: var(--base-white);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-inverse: var(--gray-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-brandDarkBlue: var(--brandDarkBlue-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-brandDarkBlue: var(--brandDarkBlue-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-brandRed: var(--brandRed-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-brandRed: var(--brandRed-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-selected: var(--blue-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-selected: var(--blue-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-danger-bold: var(--brandRed-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-danger-bold: var(--brandRed-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-danger: var(--brandRed-700);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-danger: var(--brandRed-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-danger-inverse: var(--base-white);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-danger-inverse: var(--brandRed-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-warning-bold: var(--warning-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-warning-bold: var(--warning-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-warning: var(--warning-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-warning: var(--warning-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-success-bold: var(--success-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-success-bold: var(--success-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-success: var(--success-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-success: var(--success-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-discovery-bold: var(--lightBlue-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-discovery-bold: var(--lightBlue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-discovery: var(--lightBlue-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-discovery: var(--lightBlue-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-information-bold: var(--blue-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-information-bold: var(--blue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-information: var(--blue-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-information: var(--blue-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-purple-bold: var(--purple-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-purple-bold: var(--purple-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-purple: var(--purple-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-purple: var(--purple-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-pink-bold: var(--pink-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-pink-bold: var(--pink-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-pink: var(--pink-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-pink: var(--pink-300);\r\n }\r\n\r\n /* ----------------Border Color --------------- */\r\n\r\n [data-theme='light'] {\r\n --color-border-bold: var(--gray-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-bold: var(--gray-400);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border: var(--gray-400);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border: var(--gray-500);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-subtle: var(--gray-300);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-subtle: var(--gray-700);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-subtler: var(--gray-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-subtler: var(--gray-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-disabled: var(--gray-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-disabled: var(--gray-700);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-inverse: var(--base-white);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-inverse: var(--gray-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-input: var(--gray-300);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-input: var(--gray-600);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-focus: var(--gray-400);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-focus: var(--blue-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-selected: var(--blue-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-selected: var(--blue-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-brandDarkBlue: var(--brandDarkBlue-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-brandDarkBlue: var(--brandDarkBlue-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-brandRed: var(--brandRed-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-brandRed: var(--brandRed-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-danger-bold: var(--brandRed-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-danger-bold: var(--brandRed-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-danger: var(--brandRed-700);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-danger: var(--brandRed-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-danger-subtle: var(--brandRed-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-danger-subtle: var(--brandRed-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-danger-subtler: var(--brandRed-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-danger-subtler: var(--brandRed-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-warning-bold: var(--warning-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-warning-bold: var(--warning-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-warning: var(--warning-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-warning: var(--warning-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-warning-subtle: var(--warning-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-warning-subtle: var(--warning-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-warning-subtler: var(--warning-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-warning-subtler: var(--warning-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-success-bold: var(--success-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-success-bold: var(--success-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-success: var(--success-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-success: var(--success-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-success-subtle: var(--success-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-success-subtle: var(--success-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-success-subtler: var(--success-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-success-subtler: var(--success-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-discovery-bold: var(--lightBlue-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-discovery-bold: var(--lightBlue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-discovery: var(--lightBlue-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-discovery: var(--lightBlue-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-discovery-subtle: var(--lightBlue-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-discovery-subtle: var(--lightBlue-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-discovery-subtler: var(--lightBlue-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-discovery-subtler: var(--lightBlue-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-information-bold: var(--blue-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-information-bold: var(--blue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-information: var(--blue-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-information: var(--blue-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-information-subtle: var(--blue-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-information-subtle: var(--blue-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-information-subtler: var(--blue-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-information-subtler: var(--blue-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-purple-bold: var(--purple-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-purple-bold: var(--purple-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-purple: var(--purple-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-purple: var(--purple-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-purple-subtle: var(--purple-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-purple-subtle: var(--purple-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-purple-subtler: var(--purple-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-purple-subtler: var(--purple-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-pink-bold: var(--pink-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-pink-bold: var(--pink-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-pink: var(--pink-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-pink: var(--pink-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-pink-subtle: var(--pink-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-pink-subtle: var(--pink-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-pink-subtler: var(--pink-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-pink-subtler: var(--pink-900);\r\n }\r\n\r\n /* Emmanuel Kadiri starts from background color */\r\n\r\n /* ----------------Background Color --------------- */\r\n\r\n [data-theme='light'] {\r\n --color-background-card-bold: var(--gray-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-card-bold: var(--gray-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-card: var(--base-white);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-card: var(--gray-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-input: var(--gray-400);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-input: var(--gray-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-disabled: var(--gray-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-disabled: var(--gray-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-btn-disabled: var(--gray-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-btn-disabled: var(--gray-700);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-selected: var(--blue-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-selected: var(--blue-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-brandDarkblue: var(--brandDarkBlue-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-brandDarkblue: var(--brandDarkBlue-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-brandRed: var(--brandRed-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-brandRed: var(--brandRed-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-brandRed-hover: var(--brandRed-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-brandRed-hover: var(--brandRed-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-brandRed-pressed: var(--brandRed-700);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-brandRed-pressed: var(--brandRed-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-gray-bold: var(--gray-400);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-gray-bold: var(--gray-500);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-gray: var(--gray-300);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-gray: var(--gray-600);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-gray-subtle: var(--gray-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-gray-subtle: var(--gray-700);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-gray-subtler: var(--gray-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-gray-subtler: var(--gray-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-gray-subtlest: var(--gray-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-gray-subtlest: var(--gray-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-danger-bold: var(--brandRed-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-danger-bold: var(--brandRed-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-danger: var(--brandRed-700);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-danger: var(--brandRed-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-danger-subtle: var(--brandRed-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-danger-subtle: var(--brandRed-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-danger-subtler: var(--brandRed-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-danger-subtler: var(--brandRed-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-danger-subtlest: var(--brandRed-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-danger-subtlest: var(--brandRed-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-warning-bold: var(--warning-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-warning-bold: var(--warning-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-warning: var(--warning-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-warning: var(--warning-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-warning-subtle: var(--warning-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-warning-subtle: var(--warning-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-warning-subtler: var(--warning-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-warning-subtler: var(--warning-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-warning-subtlest: var(--warning-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-warning-subtlest: var(--warning-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-success-bold: var(--success-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-success-bold: var(--success-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-success: var(--success-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-success: var(--success-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-success-subtle: var(--success-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-success-subtle: var(--success-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-success-subtler: var(--success-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-success-subtler: var(--success-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-success-subtlest: var(--success-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-success-subtlest: var(--success-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-discovery-bold: var(--lightBlue-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-discovery-bold: var(--lightBlue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-discovery: var(--lightBlue-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-discovery: var(--lightBlue-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-discovery-subtle: var(--lightBlue-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-discovery-subtle: var(--lightBlue-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-discovery-subtler: var(--lightBlue-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-discovery-subtler: var(--lightBlue-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-discovery-subtlest: var(--lightBlue-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-discovery-subtlest: var(--lightBlue-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-information-bold: var(--blue-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-information-bold: var(--blue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-information: var(--blue-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-information: var(--blue-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-information-subtle: var(--blue-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-information-subtle: var(--blue-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-information-subtler: var(--blue-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-information-subtler: var(--blue-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-information-subtlest: var(--blue-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-information-subtlest: var(--blue-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-purple-bold: var(--purple-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-purple-bold: var(--blue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-purple: var(--purple-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-purple: var(--blue-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-purple-subtle: var(--purple-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-purple-subtle: var(--purple-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-purple-subtler: var(--purple-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-purple-subtler: var(--purple-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-purple-subtlest: var(--purple-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-purple-subtlest: var(--purple-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-pink-bold: var(--pink-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-pink-bold: var(--pink-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-pink: var(--pink-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-pink: var(--pink-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-pink-subtle: var(--pink-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-pink-subtle: var(--pink-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-pink-subtler: var(--pink-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-pink-subtler: var(--pink-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-pink-subtlest: var(--purple-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-pink-subtlest: var(--pink-950);\r\n }\r\n\r\n /* ----------------Blanket Color --------------- */\r\n [data-theme='light'] {\r\n --color-blanket: var(--darkBlue500-opacity20);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-blanket: var(--darkBlue200-opacity20);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-blanket-subtle: var(--darkBlue500-opacity30);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-blanket-subtle: var(--darkBlue200-opacity30);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-blanket-subtler: var(--darkBlue500-opacity40);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-blanket-subtler: var(--darkBlue200-opacity40);\r\n }\r\n\r\n /* ----------------Skeleton Color --------------- */\r\n [data-theme='light'] {\r\n --color-skeleton: var(--gray-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-skeleton: var(--gray-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-skeleton-bold: var(--gray-300);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-skeleton-bold: var(--gray-700);\r\n }\r\n\r\n /* ----------------Surface Color --------------- */\r\n [data-theme='light'] {\r\n --color-surface-bold: var(--gray-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-surface-bold: var(--gray-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-surface: var(--base-white);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-surface: var(--gray-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-surface-hovered: var(--gray-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-surface-hovered: var(--gray-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-surface-pressed: var(--gray-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-surface-pressed: var(--gray-700);\r\n }\r\n\r\n /* ----------------Transparent Color --------------- */\r\n [data-theme='light'] {\r\n --color-surface-transparent50: var(--white-opacity50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-surface-transparent50: var(--gray900-opacity50);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-surface-transparent20: var(--white-opacity20);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-surface-transparent20: var(--gray900-opacity20);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-surface-transparent-full: var(--white-opacity0);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-surface-transparent-full: var(--gray900-opacity0);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-surface-bold-transparent50: var(--gray25-opacity50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-surface-bold-transparent50: var(--gray950-opacity50);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-surface-bold-transparent20: var(--gray25-opacity20);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-surface-bold-transparent20: var(--gray950-opacity20);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-surface-bold-transparent-full: var(--gray25-opacity0);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-surface-bold-transparent-full: var(--gray950-opacity0);\r\n }\r\n}\r\n\r\n/* -----------------Shadow and Blur----------------- */\r\n:root {\r\n --shadow-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\r\n --shadow-sm: 0px 1px 3px 0px rgba(16, 24, 40, 0.1), 0px 1px 2px 0px rgba(16, 24, 40, 0.06);\r\n --shadow-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);\r\n --shadow-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);\r\n --shadow-xl: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);\r\n --shadow-2xl: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);\r\n --shadow-3xl: 0px 32px 64px -12px rgba(16, 24, 40, 0.14);\r\n\r\n --blur-sm: blur(4px);\r\n --blur-md: blur(8px);\r\n --blur-lg: blur(12px);\r\n --blur-xl: blur(20px);\r\n}\r\n\r\n.shadow-xs {\r\n box-shadow: var(--shadow-xs);\r\n}\r\n\r\n.shadow-sm {\r\n box-shadow: var(--shadow-sm);\r\n}\r\n\r\n.shadow-md {\r\n box-shadow: var(--shadow-md);\r\n}\r\n\r\n.shadow-lg {\r\n box-shadow: var(--shadow-lg);\r\n}\r\n\r\n.shadow-xl {\r\n box-shadow: var(--shadow-xl);\r\n}\r\n\r\n.shadow-2xl {\r\n box-shadow: var(--shadow-2xl);\r\n}\r\n\r\n.shadow-3xl {\r\n box-shadow: var(--shadow-3xl);\r\n}\r\n\r\n.blur-sm {\r\n backdrop-filter: var(--blur-sm);\r\n}\r\n\r\n.blur-md {\r\n backdrop-filter: var(--blur-md);\r\n}\r\n\r\n.blur-lg {\r\n backdrop-filter: var(--blur-lg);\r\n}\r\n\r\n.blur-xl {\r\n backdrop-filter: var(--blur-xl);\r\n}\r\n\r\n/* -----------------Gradients----------------- */\r\n:root {\r\n /* Gray Gradients */\r\n /* --gray-gradient-600: linear-gradient(); */\r\n --gradient-gray-600-to-500-90d: linear-gradient(90deg, var(--gray-600), var(--gray-500));\r\n --gradient-gray-700-to-600-45d: linear-gradient(45deg, var(--gray-700), var(--gray-600));\r\n --gradient-gray-800-to-600-45d: linear-gradient(45deg, var(--gray-800), var(--gray-600));\r\n --gradient-gray-800-to-600-90d: linear-gradient(90deg, var(--gray-800), var(--gray-600));\r\n --gradient-gray-800-to-700265-d: linear-gradient(26.5deg, var(--gray-800), var(--gray-700));\r\n --gradient-gray-900-to-600-45d: linear-gradient(45deg, var(--gray-900), var(--gray-600));\r\n\r\n /* Brand Dark Blue Gradients */\r\n --gradient-darkBlue-500-to-400-90d: linear-gradient(90deg, var(--brandDarkBlue-500), var(--brandDarkBlue-400));\r\n --gradient-darkBlue-700-to-500-45d: linear-gradient(45deg, var(--brandDarkBlue-700), var(--brandDarkBlue-500));\r\n --gradient-darkBlue-700-to-400-45d: linear-gradient(45deg, var(--brandDarkBlue-700), var(--brandDarkBlue-400));\r\n --gradient-darkBlue-800-to-500-90d: linear-gradient(90deg, var(--brandDarkBlue-800), var(--brandDarkBlue-500));\r\n --gradient-darkBlue-800-to-600265-d: linear-gradient(26.5deg, var(--brandDarkBlue-800), var(--brandDarkBlue-600));\r\n --gradient-darkBlue-900-to-600-45d: linear-gradient(45deg, var(--brandDarkBlue-900), var(--brandDarkBlue-600));\r\n\r\n /* Brand Red Gradients */\r\n --gradient-red-500-to-400-90d: linear-gradient(90deg, var(--brandRed-600), var(--brandRed-400));\r\n --gradient-red-700-to-500-45d: linear-gradient(45deg, var(--brandRed-700), var(--brandRed-500));\r\n --gradient-red-700-to-400-45d: linear-gradient(45deg, var(--brandRed-700), var(--brandRed-400));\r\n --gradient-red-800-to-500-90d: linear-gradient(90deg, var(--brandRed-800), var(--brandRed-500));\r\n --gradient-red-800-to-600265-d: linear-gradient(26.5deg, var(--brandRed-800), var(--brandRed-600));\r\n --gradient-red-900-to-600-45d: linear-gradient(45deg, var(--brandRed-900), var(--brandRed-600));\r\n\r\n /* Blue Gradients */\r\n --gradient-blue-500-to-400-90d: linear-gradient(90deg, var(--blue-500), var(--blue-400));\r\n --gradient-blue-700-to-500-45d: linear-gradient(45deg, var(--blue-700), var(--blue-500));\r\n --gradient-blue-700-to-400-45d: linear-gradient(45deg, var(--blue-700), var(--blue-400));\r\n --gradient-blue-800-to-500-90d: linear-gradient(90deg, var(--blue-800), var(--blue-500));\r\n --gradient-blue-800-to-600265-d: linear-gradient(26.5deg, var(--blue-800), var(--blue-600));\r\n --gradient-blue-900-to-600-45d: linear-gradient(45deg, var(--blue-900), var(--blue-600));\r\n}\r\n\r\n.gradient-gray-600-to-500-90d {\r\n background: var(--gradient-gray-600-to-500-90d);\r\n}\r\n\r\n.gradient-gray-700-to-600-45d {\r\n background: var(--gradient-gray-700-to-600-45d);\r\n}\r\n\r\n.gradient-gray-800-to-600-45d {\r\n background: var(--gradient-gray-800-to-600-45d);\r\n}\r\n\r\n.gradient-gray-800-to-600-90d {\r\n background: var(--gradient-gray-800-to-600-90d);\r\n}\r\n\r\n.gradient-gray-800-to-700265-d {\r\n background: var(--gradient-gray-800-to-700265-d);\r\n}\r\n\r\n.gradient-gray-900-to-600-45d {\r\n background: var(--gradient-gray-900-to-600-45d);\r\n}\r\n\r\n.gradient-darkBlue-500-to-400-90d {\r\n background: var(--gradient-darkBlue-500-to-400-90d);\r\n}\r\n\r\n.gradient-darkBlue-700-to-500-45d {\r\n background: var(--gradient-darkBlue-700-to-500-45d);\r\n}\r\n\r\n.gradient-darkBlue-700-to-400-45d {\r\n background: var(--gradient-darkBlue-700-to-400-45d);\r\n}\r\n\r\n.gradient-darkBlue-800-to-500-90d {\r\n background: var(--gradient-darkBlue-800-to-500-90d);\r\n}\r\n\r\n.gradient-darkBlue-800-to-600265-d {\r\n background: var(--gradient-darkBlue-800-to-600265-d);\r\n}\r\n\r\n.gradient-darkBlue-900-to-600-45d {\r\n background: var(--gradient-darkBlue-900-to-600-45d);\r\n}\r\n\r\n.gradient-red-500-to-400-90d {\r\n background: var(--gradient-red-500-to-400-90d);\r\n}\r\n\r\n.gradient-red-700-to-500-45d {\r\n background: var(--gradient-red-700-to-500-45d);\r\n}\r\n\r\n.gradient-red-700-to-400-45d {\r\n background: var(--gradient-red-700-to-400-45d);\r\n}\r\n\r\n.gradient-red-800-to-500-90d {\r\n background: var(--gradient-red-800-to-500-90d);\r\n}\r\n\r\n.gradient-red-800-to-600265-d {\r\n background: var(--gradient-red-800-to-600265-d);\r\n}\r\n\r\n.gradient-red-900-to-600-45d {\r\n background: var(--gradient-red-900-to-600-45d);\r\n}\r\n\r\n.gradient-blue-500-to-400-90d {\r\n background: var(--gradient-blue-500-to-400-90d);\r\n}\r\n\r\n.gradient-blue-700-to-500-45d {\r\n background: var(--gradient-blue-700-to-500-45d);\r\n}\r\n\r\n.gradient-blue-700-to-400-45d {\r\n background: var(--gradient-blue-700-to-400-45d);\r\n}\r\n\r\n.gradient-blue-800-to-500-90d {\r\n background: var(--gradient-blue-800-to-500-90d);\r\n}\r\n\r\n.gradient-blue-800-to-600265-d {\r\n background: var(--gradient-blue-800-to-600265-d);\r\n}\r\n\r\n.gradient-blue-900-to-600-45d {\r\n background: var(--gradient-blue-900-to-600-45d);\r\n}\r\n\r\n/* Spacing Styles */\r\n:root {\r\n /* Positive spacing */\r\n --spacing-none: 0rem;\r\n --spacing-half: 0.125rem;\r\n --spacing-1: 0.25rem;\r\n --spacing-2: 0.5rem;\r\n --spacing-3: 0.75rem;\r\n --spacing-4: 1rem;\r\n --spacing-5: 1.25rem;\r\n --spacing-6: 1.5rem;\r\n --spacing-7: 2rem;\r\n --spacing-8: 2.5rem;\r\n --spacing-12: 3rem;\r\n --spacing-16: 4rem;\r\n --spacing-20: 5rem;\r\n --spacing-24: 6rem;\r\n --spacing-32: 8rem;\r\n --spacing-40: 10rem;\r\n --spacing-48: 12rem;\r\n --spacing-56: 14rem;\r\n --spacing-64: 16rem;\r\n\r\n /* Negative spacing */\r\n\r\n --spacing-negative-half: -0.125rem;\r\n --spacing-negative-1: -0.25rem;\r\n --spacing-negative-2: -0.5rem;\r\n --spacing-negative-3: -0.75rem;\r\n --spacing-negative-4: -1rem;\r\n --spacing-negative-5: -1.25rem;\r\n --spacing-negative-6: -1.5rem;\r\n --spacing-negative-7: -2rem;\r\n\r\n /* Radius */\r\n --rounded-none: 0rem;\r\n --rounded-xs: 0.25rem;\r\n --rounded-sm: 0.5rem;\r\n --rounded-md: 0.75rem;\r\n --rounded-lg: 1rem;\r\n --rounded-xl: 1.5rem;\r\n --rounded-2xl: 2rem;\r\n --rounded-full: 62.438rem;\r\n}\r\n\r\n/* Typography Styles */\r\n@import url('https://fonts.googleapis.com/css2?family=Sora&display=swap');\r\n\r\n:root {\r\n /* Font Sizes */\r\n --font-size-d-2xl: 4.5rem;\r\n --font-size-d-xl: 3.75rem;\r\n --font-size-d-lg: 3rem;\r\n --font-size-d-md: 2.25rem;\r\n --font-size-d-sm: 1.875rem;\r\n --font-size-d-xs: 1.5rem;\r\n --font-size-t-xl: 1.25rem;\r\n --font-size-t-lg: 1.125rem;\r\n --font-size-t-md: 1rem;\r\n --font-size-t-sm: 0.875rem;\r\n --font-size-t-xs: 0.75rem;\r\n --font-size-t-xxs: 0.625rem;\r\n\r\n /* Font Weights */\r\n --font-weight-bold: 700;\r\n --font-weight-semi-bold: 600;\r\n --font-weight-medium: 500;\r\n --font-weight-regular: 400;\r\n\r\n /* Line Heights */\r\n --font-line-height-d-2xl: 5rem;\r\n --font-line-height-d-xl: 4.25rem;\r\n --font-line-height-d-lg: 3.75rem;\r\n --font-line-height-d-md: 2.75rem;\r\n --font-line-height-d-sm: 2.375rem;\r\n --font-line-height-d-xs: 2rem;\r\n --font-line-height-t-xl: 2rem;\r\n --font-line-height-t-lg: 1.875rem;\r\n --font-line-height-t-md: 1.688rem;\r\n --font-line-height-t-sm: 1.5rem;\r\n --font-line-height-t-xs: 1.25rem;\r\n --font-line-height-t-xxs: 1.125rem;\r\n\r\n /* Letter Spacings */\r\n --font-letter-spacing-d-2xl: -0.09rem;\r\n --font-letter-spacing-d-xl: -0.075rem;\r\n --font-letter-spacing-d-lg: -0.075rem;\r\n --font-letter-spacing-d-md: -0.045rem;\r\n --font-letter-spacing-d-sm: 0;\r\n --font-letter-spacing-d-xs: 0;\r\n --font-letter-spacing-d-xxs: 0;\r\n\r\n /* Font Families */\r\n --font-family-title: 'Sora';\r\n --font-family-body: 'Sora';\r\n}\r\n\r\n/* Media queries for medium screens (tablet) */\r\n@media (max-width: 1199px) {\r\n :root {\r\n /* Font Sizes */\r\n --font-size-d-2xl: 3.75rem;\r\n --font-size-d-xl: 3.5rem;\r\n --font-size-d-lg: 2.75rem;\r\n --font-size-d-md: 2.25rem;\r\n --font-size-d-sm: 1.875rem;\r\n --font-size-d-xs: 1.5rem;\r\n\r\n /* Line Heights */\r\n --font-line-height-d-2xl: 4.25rem;\r\n --font-line-height-d-xl: 3.75rem;\r\n --font-line-height-d-lg: 2.4375rem;\r\n --font-line-height-d-md: 2.75rem;\r\n --font-line-height-d-sm: 2.375rem;\r\n --font-line-height-d-xs: 2rem;\r\n\r\n /* Letter Spacings */\r\n --font-letter-spacing-2xl: -0.075rem;\r\n --font-letter-spacing-xl: -0.065rem;\r\n --font-letter-spacing-lg: -0.045rem;\r\n --font-letter-spacing-md: -0.045rem;\r\n --font-letter-spacing-sm: 0rem;\r\n --font-letter-spacing-xs: 0rem;\r\n }\r\n}\r\n\r\n/* Media queries for smaller screens (mobile) */\r\n@media (max-width: 743px) {\r\n :root {\r\n /* Font Sizes */\r\n --font-size-d-2xl: 3rem;\r\n --font-size-d-xl: 2.5rem;\r\n --font-size-d-lg: 2rem;\r\n --font-size-d-md: 1.75rem;\r\n --font-size-d-sm: 1.5rem;\r\n --font-size-d-xs: 1.25rem;\r\n\r\n /* Line Heights */\r\n --font-line-height-d-2xl: 3.375rem;\r\n --font-line-height-d-xl: 2.875rem;\r\n --font-line-height-d-lg: 2.5rem;\r\n --font-line-height-d-md: 2.1375rem;\r\n --font-line-height-d-sm: 2rem;\r\n --font-line-height-d-xs: 1.75rem;\r\n\r\n /* Letter Spacings */\r\n --font-letter-spacing-2xl: -0.06rem;\r\n --font-letter-spacing-xl: -0.05rem;\r\n --font-letter-spacing-lg: -0.045rem;\r\n --font-letter-spacing-md: 0rem;\r\n --font-letter-spacing-sm: 0rem;\r\n --font-letter-spacing-xs: 0rem;\r\n }\r\n}\r\n\r\n.display-2xl-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-2xl);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-d-2xl);\r\n letter-spacing: var(--font-letter-spacing-d-2xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-2xl-bold::before,\r\n.display-2xl-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-2xl-bold::before {\r\n margin-bottom: -0.135em;\r\n}\r\n\r\n.display-2xl-bold::after {\r\n margin-top: -0.205em;\r\n}\r\n\r\n.display-2xl-semi-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-2xl);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-d-2xl);\r\n letter-spacing: var(--font-letter-spacing-d-2xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-2xl-semi-bold::before,\r\n.display-2xl-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-2xl-semi-bold::before {\r\n margin-bottom: -0.135em;\r\n}\r\n\r\n.display-2xl-semi-bold::after {\r\n margin-top: -0.205em;\r\n}\r\n\r\n.display-xl-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-xl);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-d-xl);\r\n letter-spacing: var(--font-letter-spacing-d-xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-xl-bold::before,\r\n.display-xl-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-xl-bold::before {\r\n margin-bottom: -0.145em;\r\n}\r\n\r\n.display-xl-bold::after {\r\n margin-top: -0.215em;\r\n}\r\n\r\n.display-xl-semi-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-xl);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-d-xl);\r\n letter-spacing: var(--font-letter-spacing-d-xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-xl-semi-bold::before,\r\n.display-xl-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-xl-semi-bold::before {\r\n margin-bottom: -0.145em;\r\n}\r\n\r\n.display-xl-semi-bold::after {\r\n margin-top: -0.215em;\r\n}\r\n\r\n.display-lg-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-lg);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-d-lg);\r\n letter-spacing: var(--font-letter-spacing-d-lg);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-lg-bold::before,\r\n.display-lg-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-lg-bold::before {\r\n margin-bottom: -0.015em;\r\n}\r\n\r\n.display-lg-bold::after {\r\n margin-top: -0.095em;\r\n}\r\n\r\n.display-lg-semi-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-lg);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-d-lg);\r\n letter-spacing: var(--font-letter-spacing-d-lg);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-lg-semi-bold::before,\r\n.display-lg-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-lg-semi-bold::before {\r\n margin-bottom: -0.015em;\r\n}\r\n\r\n.display-lg-semi-bold::after {\r\n margin-top: -0.095em;\r\n}\r\n\r\n.display-md-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-md);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-d-md);\r\n letter-spacing: var(--font-letter-spacing-d-md);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-md-bold::before,\r\n.display-md-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-md-bold::before {\r\n margin-bottom: -0.195em;\r\n}\r\n\r\n.display-md-bold::after {\r\n margin-top: -0.255em;\r\n}\r\n\r\n.display-md-semi-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-md);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-d-md);\r\n letter-spacing: var(--font-letter-spacing-d-md);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-md-semi-bold::before,\r\n.display-md-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-md-semi-bold::before {\r\n margin-bottom: -0.195em;\r\n}\r\n\r\n.display-md-semi-bold::after {\r\n margin-top: -0.255em;\r\n}\r\n\r\n.display-sm-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-sm);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-d-sm);\r\n letter-spacing: var(--font-letter-spacing-d-sm);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-sm-bold::before,\r\n.display-sm-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-sm-bold::before {\r\n margin-bottom: -0.195em;\r\n}\r\n\r\n.display-sm-bold::after {\r\n margin-top: -0.255em;\r\n}\r\n\r\n.display-sm-semi-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-sm);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-d-sm);\r\n letter-spacing: var(--font-letter-spacing-d-sm);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-sm-semi-bold::before,\r\n.display-sm-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-sm-semi-bold::before {\r\n margin-bottom: -0.195em;\r\n}\r\n\r\n.display-sm-semi-bold::after {\r\n margin-top: -0.255em;\r\n}\r\n\r\n.display-xs-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-xs);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-d-xs);\r\n letter-spacing: var(--font-letter-spacing-d-xs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-xs-bold::before,\r\n.display-xs-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-xs-bold::before {\r\n margin-bottom: -0.199em;\r\n}\r\n\r\n.display-xs-bold::after {\r\n margin-top: -0.195em; /* Continue from here */\r\n}\r\n\r\n.display-xs-semi-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-xs);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-d-xs);\r\n letter-spacing: var(--font-letter-spacing-d-xs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-xs-semi-bold::before,\r\n.display-xs-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-xs-semi-bold::before {\r\n margin-bottom: -0.259em;\r\n}\r\n\r\n.display-xs-semi-bold::after {\r\n margin-top: -0.295em;\r\n}\r\n\r\n.text-xl-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xl);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-t-xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xl-bold::before,\r\n.text-xl-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xl-bold::before {\r\n margin-bottom: -0.329em;\r\n}\r\n\r\n.text-xl-bold::after {\r\n margin-top: -0.359em;\r\n}\r\n\r\n.text-xl-semi-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xl);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-t-xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xl-semi-bold::before,\r\n.text-xl-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xl-semi-bold::before {\r\n margin-bottom: -0.329em;\r\n}\r\n\r\n.text-xl-semi-bold::after {\r\n margin-top: -0.359em;\r\n}\r\n\r\n.text-xl-medium {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xl);\r\n font-weight: var(--font-weight-medium);\r\n line-height: var(--font-line-height-t-xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xl-medium::before,\r\n.text-xl-medium::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xl-medium::before {\r\n margin-bottom: -0.339em;\r\n}\r\n\r\n.text-xl-medium::after {\r\n margin-top: -0.399em;\r\n}\r\n\r\n.text-xl-regular {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xl);\r\n font-weight: var(--font-weight-regular);\r\n line-height: var(--font-line-height-t-xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xl-regular::before,\r\n.text-xl-regular::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xl-regular::before {\r\n margin-bottom: -0.339em;\r\n}\r\n\r\n.text-xl-regular::after {\r\n margin-top: -0.399em;\r\n}\r\n\r\n.text-lg-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-lg);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-t-lg);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-lg-bold::before,\r\n.text-lg-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-lg-bold::before {\r\n margin-bottom: -0.339em;\r\n}\r\n\r\n.text-lg-bold::after {\r\n margin-top: -0.399em;\r\n}\r\n\r\n.text-lg-semi-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-lg);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-t-lg);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-lg-semi-bold::before,\r\n.text-lg-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-lg-semi-bold::before {\r\n margin-bottom: -0.339em;\r\n}\r\n\r\n.text-lg-semi-bold::after {\r\n margin-top: -0.399em;\r\n}\r\n\r\n.text-lg-medium {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-lg);\r\n font-weight: var(--font-weight-medium);\r\n line-height: var(--font-line-height-t-lg);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-lg-medium::before,\r\n.text-lg-medium::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-lg-medium::before {\r\n margin-bottom: -0.349em;\r\n}\r\n\r\n.text-lg-medium::after {\r\n margin-top: -0.389em;\r\n}\r\n\r\n.text-lg-regular {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-lg);\r\n font-weight: var(--font-weight-regular);\r\n line-height: var(--font-line-height-t-lg);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-lg-regular::before,\r\n.text-lg-regular::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-lg-regular::before {\r\n margin-bottom: -0.349em;\r\n}\r\n\r\n.text-lg-regular::after {\r\n margin-top: -0.389em;\r\n}\r\n\r\n.text-md-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-md);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-t-md);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-md-bold::before,\r\n.text-md-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-md-bold::before {\r\n margin-bottom: -0.349em;\r\n}\r\n\r\n.text-md-bold::after {\r\n margin-top: -0.389em;\r\n}\r\n\r\n.text-md-semi-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-md);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-t-md);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-md-semi-bold::before,\r\n.text-md-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-md-semi-bold::before {\r\n margin-bottom: -0.349em;\r\n}\r\n\r\n.text-md-semi-bold::after {\r\n margin-top: -0.389em;\r\n}\r\n\r\n.text-md-medium {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-md);\r\n font-weight: var(--font-weight-medium);\r\n line-height: var(--font-line-height-t-md);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-md-medium::before,\r\n.text-md-medium::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-md-medium::before {\r\n margin-bottom: -0.349em;\r\n}\r\n\r\n.text-md-medium::after {\r\n margin-top: -0.389em;\r\n}\r\n\r\n.text-md-regular {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-md);\r\n font-weight: var(--font-weight-regular);\r\n line-height: var(--font-line-height-t-md);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-md-regular::before,\r\n.text-md-regular::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-md-regular::before {\r\n margin-bottom: -0.349em;\r\n}\r\n\r\n.text-md-regular::after {\r\n margin-top: -0.389em;\r\n}\r\n\r\n.text-sm-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-sm);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-t-sm);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-sm-bold::before,\r\n.text-sm-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-sm-bold::before {\r\n margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-bold::after {\r\n margin-top: -0.349em;\r\n}\r\n\r\n.text-sm-semi-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-sm);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-t-sm);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-sm-semi-bold::before,\r\n.text-sm-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-sm-semi-bold::before {\r\n margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-semi-bold::after {\r\n margin-top: -0.349em;\r\n}\r\n\r\n.text-sm-medium {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-sm);\r\n font-weight: var(--font-weight-medium);\r\n line-height: var(--font-line-height-t-sm);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n position: relative;\r\n display: inline-block;\r\n}\r\n\r\n.text-sm-medium::before,\r\n.text-sm-medium::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-sm-medium::before {\r\n margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-medium::after {\r\n margin-top: -0.299em;\r\n}\r\n\r\n.text-sm-regular {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-sm);\r\n font-weight: var(--font-weight-regular);\r\n line-height: var(--font-line-height-t-sm);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n position: relative;\r\n display: inline-block;\r\n}\r\n\r\n.text-sm-regular::before,\r\n.text-sm-regular::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-sm-regular::before {\r\n margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-regular::after {\r\n margin-top: -0.299em;\r\n}\r\n\r\n.text-xs-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xs);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-t-xs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xs-bold::before,\r\n.text-xs-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xs-bold::before {\r\n margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xs-bold::after {\r\n margin-top: -0.416em;\r\n}\r\n\r\n.text-xs-semi-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xs);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-t-xs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xs-semi-bold::before,\r\n.text-xs-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xs-semi-bold::before {\r\n margin-bottom: -0.321em;\r\n}\r\n\r\n.text-xs-semi-bold::after {\r\n margin-top: -0.416em;\r\n}\r\n\r\n.text-xs-medium {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xs);\r\n font-weight: var(--font-weight-medium);\r\n line-height: var(--font-line-height-t-xs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xs-medium::before,\r\n.text-xs-medium::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xs-medium::before {\r\n margin-bottom: -0.285em;\r\n}\r\n\r\n.text-xs-medium::after {\r\n margin-top: -0.396em;\r\n}\r\n\r\n.text-xs-regular {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xs);\r\n font-weight: var(--font-weight-regular);\r\n line-height: var(--font-line-height-t-xs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xs-regular::before,\r\n.text-xs-regular::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xs-regular::before {\r\n margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xs-regular::after {\r\n margin-top: -0.396em;\r\n}\r\n\r\n.text-xxs-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xxs);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-t-xxs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xxs-bold::before,\r\n.text-xxs-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xxs-bold::before {\r\n margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-bold::after {\r\n margin-top: -0.416em;\r\n}\r\n\r\n.text-xxs-semi-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xxs);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-t-xxs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xxs-semi-bold::before,\r\n.text-xxs-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xxs-semi-bold::before {\r\n margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-semi-bold::after {\r\n margin-top: -0.416em;\r\n}\r\n\r\n.text-xxs-medium {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xxs);\r\n font-weight: var(--font-weight-medium);\r\n line-height: var(--font-line-height-t-xxs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xxs-medium::before,\r\n.text-xxs-medium::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xxs-medium::before {\r\n margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-medium::after {\r\n margin-top: -0.416em;\r\n}\r\n\r\n.text-xxs-regular {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xxs);\r\n font-weight: var(--font-weight-regular);\r\n line-height: var(--font-line-height-t-xxs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xxs-regular::before,\r\n.text-xxs-regular::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xxs-regular::before {\r\n margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-regular::after {\r\n margin-top: -0.416em;\r\n}\r\n\r\n/* Button slot styles */\r\n/* .slotted_button_text.primary {\r\n color: var(--color-text-inverse, #ffffff) !important;\r\n}\r\n\r\n.slotted_button_text.secondary_gray {\r\n color: var(--color-text, #4b5565) !important;\r\n}\r\n\r\n.slotted_button_text.secondary_color {\r\n color: var(--color-text-brandRed, #e21b2e) !important;\r\n}\r\n\r\n.slotted_button_text.tertiary_gray {\r\n color: var(--color-text, #4b5565) !important;\r\n}\r\n\r\n.slotted_button_text.tertiary_color {\r\n color: var(--color-text-brandRed, #e21b2e) !important;\r\n}\r\n\r\n.slotted_button_text.link_gray {\r\n color: var(--color-text, #4b5565) !important;\r\n}\r\n\r\n.slotted_button_text.link_color {\r\n color: var(--color-link, #075db2) !important;\r\n}\r\n\r\n.slotted_button_text.primary.destructive {\r\n color: var(--color-text-inverse, #ffffff) !important;\r\n}\r\n\r\n#slotted_button_text.primary.disabled,\r\n#slotted_button_text.secondary_gray.disabled,\r\n#slotted_button_text.secondary_color.disabled,\r\n#slotted_button_text.tertiary_gray.disabled,\r\n#slotted_button_text.tertiary_color.disabled,\r\n#slotted_button_text.link_gray.disabled,\r\n#slotted_button_text.link_color.disabled {\r\n color: var(--color-text-disabled, #9aa4b2) !important;\r\n}\r\n\r\n#slotted_button_text.secondary_gray.default.destructive,\r\n#slotted_button_text.secondary_color.default.destructive,\r\n#slotted_button_text.tertiary_gray.default.destructive,\r\n#slotted_button_text.tertiary_color.default.destructive,\r\n#slotted_button_text.link_gray.default.destructive,\r\n#slotted_button_text.link_color.default.destructive {\r\n color: var(--color-text-danger, #b51726) !important;\r\n} */";
|
|
6171
|
+
|
|
6172
|
+
const GbPattern = class {
|
|
6173
|
+
constructor(hostRef) {
|
|
6174
|
+
registerInstance(this, hostRef);
|
|
6175
|
+
this.type = 'circles';
|
|
6176
|
+
this.isDarkTheme = false;
|
|
6177
|
+
}
|
|
6178
|
+
changeTheme() {
|
|
6179
|
+
if (this.theme === 'system') {
|
|
6180
|
+
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
|
6181
|
+
this.isDarkTheme = true;
|
|
6182
|
+
}
|
|
6183
|
+
else {
|
|
6184
|
+
this.isDarkTheme = false;
|
|
6185
|
+
}
|
|
6186
|
+
}
|
|
6187
|
+
else if (this.theme === 'light') {
|
|
6188
|
+
this.isDarkTheme = false;
|
|
6189
|
+
}
|
|
6190
|
+
else if (this.theme === 'dark') {
|
|
6191
|
+
this.isDarkTheme = true;
|
|
6192
|
+
}
|
|
6193
|
+
}
|
|
6194
|
+
componentWillLoad() {
|
|
6195
|
+
this.changeTheme();
|
|
6196
|
+
}
|
|
6197
|
+
render() {
|
|
6198
|
+
const circlesLight = getAssetPath(`assets/empty_state_circles_light.svg`);
|
|
6199
|
+
const circlesDark = getAssetPath(`assets/empty_state_circles_dark.svg`);
|
|
6200
|
+
const gridLight = getAssetPath(`assets/empty_state_grid_light.svg`);
|
|
6201
|
+
const gridDark = getAssetPath(`assets/empty_state_grid_dark.svg`);
|
|
6202
|
+
const gridDotLight = getAssetPath(`assets/empty_state_grid_dot_light.svg`);
|
|
6203
|
+
const gridDotDark = getAssetPath(`assets/empty_state_grid_dot_dark.svg`);
|
|
6204
|
+
const squaresLight = getAssetPath(`assets/empty_state_squares_light.svg`);
|
|
6205
|
+
const squaresDark = getAssetPath(`assets/empty_state_squares_dark.svg`);
|
|
6206
|
+
return (h(Fragment, null, this.type === 'circles' && h("img", { key: '930cc4f06fc7912e4d87c857067841dccb33902d', src: this.isDarkTheme ? circlesDark : circlesLight, class: `pattern`, alt: "" }), this.type === 'grid' && h("img", { key: '2c08703c0b13ec70081c73e1eeb7498359ae2294', src: this.isDarkTheme ? gridDark : gridLight, class: `pattern`, alt: "" }), this.type === 'grid_dot' && h("img", { key: 'ada85cfd2fa71034f7de52604a733c351d9471fa', src: this.isDarkTheme ? gridDotDark : gridDotLight, class: `pattern`, alt: "" }), this.type === 'squares' && h("img", { key: 'ac889646f6d345d81d14d07616b751932ed5dab5', src: this.isDarkTheme ? squaresDark : squaresLight, class: `pattern`, alt: "" })));
|
|
6207
|
+
}
|
|
6208
|
+
static get watchers() { return {
|
|
6209
|
+
"theme": ["changeTheme"]
|
|
6210
|
+
}; }
|
|
6211
|
+
};
|
|
6212
|
+
GbPattern.style = gbPatternCss;
|
|
6213
|
+
|
|
6020
6214
|
const gbProgressBarCss = "/* @import 'tailwind.css'; */\r\n\r\n:root {\r\n /* --------------------------------------Primary Colors--------------------------------------------- */\r\n /* base color palette */\r\n --base-white: #fff;\r\n --base-black: #000;\r\n\r\n /* gray color palette */\r\n --gray-25: #f9fafb;\r\n --gray-50: #f6f8fa;\r\n --gray-100: #eef2f6;\r\n --gray-200: #e3e8ef;\r\n --gray-300: #cdd5df;\r\n --gray-400: #808c9e;\r\n --gray-500: #697586;\r\n --gray-600: #4b5565;\r\n --gray-700: #364152;\r\n --gray-800: #202939;\r\n --gray-900: #121926;\r\n --gray-950: #0d121c;\r\n\r\n /* brand dark blue color palette */\r\n --brandDarkBlue-25: #f9f9fb;\r\n --brandDarkBlue-50: #edeef3;\r\n --brandDarkBlue-100: #d3d5e0;\r\n --brandDarkBlue-200: #b5b9cc;\r\n --brandDarkBlue-300: #9095b2;\r\n --brandDarkBlue-400: #464f7f;\r\n --brandDarkBlue-500: #212c65;\r\n --brandDarkBlue-600: #1e285c;\r\n --brandDarkBlue-700: #1c2554;\r\n --brandDarkBlue-800: #161d43;\r\n --brandDarkBlue-900: #0b0f22;\r\n --brandDarkBlue-950: #070914;\r\n\r\n /* brand red color palette */\r\n --brandRed-25: #fffbfa;\r\n --brandRed-50: #fef1f2;\r\n --brandRed-100: #fde3e5;\r\n --brandRed-200: #f9b4ba;\r\n --brandRed-300: #f68e98;\r\n --brandRed-400: #f36976;\r\n --brandRed-500: #e21b2e;\r\n --brandRed-600: #cc1a2a;\r\n --brandRed-700: #b51726;\r\n --brandRed-800: #8c121d;\r\n --brandRed-900: #680d16;\r\n --brandRed-950: #3f080d;\r\n\r\n /* warning color palette */\r\n --warning-25: #fffcf5;\r\n --warning-50: #fffaeb;\r\n --warning-100: #fef0c7;\r\n --warning-200: #fedf89;\r\n --warning-300: #fec84b;\r\n --warning-400: #fdb022;\r\n --warning-500: #f79009;\r\n --warning-600: #dc6803;\r\n --warning-700: #b54708;\r\n --warning-800: #93370d;\r\n --warning-900: #7a2e0e;\r\n --warning-950: #4e1d09;\r\n\r\n /* success color palette */\r\n --success-25: #f6fef9;\r\n --success-50: #ecfdf3;\r\n --success-100: #dcfaeb;\r\n --success-200: #a9efc5;\r\n --success-300: #75e0a7;\r\n --success-400: #47cd89;\r\n --success-500: #17b26a;\r\n --success-600: #079455;\r\n --success-700: #067647;\r\n --success-800: #085d3a;\r\n --success-900: #074d31;\r\n --success-950: #053321;\r\n\r\n /* ------------------------------------------opacity color palette-------------------------------------- */\r\n /* 0% opacity */\r\n /* White */\r\n --white-opacity0: rgba(255, 255, 255, 0);\r\n\r\n /* Gray */\r\n --gray25-opacity0: rgba(249, 250, 251, 0);\r\n --gray900-opacity0: rgba(18, 25, 38, 0);\r\n --gray950-opacity0: rgba(13, 18, 28, 0);\r\n\r\n /* 20% opacity */\r\n /* White */\r\n --white-opacity20: rgba(255, 255, 255, 0.2);\r\n\r\n /* Dark Blue */\r\n --darkBlue200-opacity20: rgba(181, 185, 204, 0.2);\r\n --darkBlue500-opacity20: rgba(33, 44, 101, 0.2);\r\n\r\n /* Gray */\r\n --gray25-opacity20: rgba(249, 250, 251, 0.2);\r\n --gray900-opacity20: rgba(18, 25, 38, 0.2);\r\n --gray950-opacity20: rgba(13, 18, 28, 0.2);\r\n\r\n /* 30% opacity */\r\n --darkBlue200-opacity30: rgba(181, 185, 204, 0.3);\r\n --darkBlue500-opacity30: rgba(33, 44, 101, 0.3);\r\n\r\n /* 40% opacity */\r\n --darkBlue200-opacity40: rgba(181, 185, 204, 0.4);\r\n --darkBlue500-opacity40: rgba(33, 44, 101, 0.4);\r\n\r\n /* 50% opacity */\r\n /* White */\r\n --white-opacity50: rgba(255, 255, 255, 0.5);\r\n\r\n /* Gray */\r\n --gray25-opacity50: rgba(249, 250, 251, 0.5);\r\n --gray900-opacity50: rgba(18, 25, 38, 0.5);\r\n --gray950-opacity50: rgba(13, 18, 28, 0.5);\r\n\r\n /* ------------------------------------------Secondary Color------------------------------------------- */\r\n /* blueLight color palete */\r\n --lightBlue-25: #f5fbff;\r\n --lightBlue-50: #f0f9ff;\r\n --lightBlue-100: #e0f2fe;\r\n --lightBlue-200: #b9e6fe;\r\n --lightBlue-300: #7cd4fd;\r\n --lightBlue-400: #7cd4fd;\r\n --lightBlue-500: #0ba5ec;\r\n --lightBlue-600: #0086c9;\r\n --lightBlue-700: #026aa2;\r\n --lightBlue-800: #065986;\r\n --lightBlue-900: #0b4a6f;\r\n --lightBlue-950: #062c41;\r\n\r\n /* blue color palette */\r\n --blue-25: #ecf5fe;\r\n --blue-50: #e4f0fc;\r\n --blue-100: #c8e0f9;\r\n --blue-200: #9ac7f4;\r\n --blue-300: #6aa9e7;\r\n --blue-400: #378fe6;\r\n --blue-500: #075db2;\r\n --blue-600: #064e94;\r\n --blue-700: #053e77;\r\n --blue-800: #042f59;\r\n --blue-900: #022445;\r\n --blue-950: #021d37;\r\n\r\n /* Purple color palete */\r\n --purple-25: #fafaff;\r\n --purple-50: #f4f3ff;\r\n --purple-100: #ebe9fe;\r\n --purple-200: #d9d6fe;\r\n --purple-300: #bdb4fe;\r\n --purple-400: #9b8afb;\r\n --purple-500: #7a5af8;\r\n --purple-600: #6938ef;\r\n --purple-700: #5925dc;\r\n --purple-800: #4a1fb8;\r\n --purple-900: #3e1c96;\r\n --purple-950: #27115f;\r\n\r\n /* pink color palette */\r\n --pink-25: #fef6fb;\r\n --pink-50: #fdf2fa;\r\n --pink-100: #fce7f6;\r\n --pink-200: #fcceee;\r\n --pink-300: #faa7e0;\r\n --pink-400: #f670c7;\r\n --pink-500: #ee46bc;\r\n --pink-600: #dd2590;\r\n --pink-700: #c11574;\r\n --pink-800: #9e165f;\r\n --pink-900: #851651;\r\n --pink-950: #4e0d30;\r\n\r\n /* -------------------------------------------------Token---------------------------------------------- */\r\n\r\n /* -----------Text Color----------- */\r\n\r\n [data-theme='light'] {\r\n --color-text-bold: var(--gray-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-bold: var(--gray-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text: var(--gray-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text: var(--gray-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-subtle: var(--gray-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-subtle: var(--gray-400);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-disabled: var(--gray-400);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-disabled: var(--gray-500);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-inverse: var(--base-white);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-inverse: var(--base-black);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-brandDarkBlue: var(--brandDarkBlue-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-brandDarkBlue: var(--brandDarkBlue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-brandRed: var(--brandRed-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-brandRed: var(--brandRed-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-selected: var(--blue-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-selected: var(--blue-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-danger-bold: var(--brandRed-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-danger-bold: var(--brandRed-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-danger: var(--brandRed-700);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-danger: var(--brandRed-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-danger-subtle: var(--brandRed-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-danger-subtle: var(--brandRed-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-danger-inverse: var(--base-white);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-danger-inverse: var(--brandRed-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-warning-bold: var(--warning-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-warning-bold: var(--warning-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-warning: var(--warning-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-warning: var(--warning-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-warning-subtle: var(--warning-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-warning-subtle: var(--warning-400);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-success-bold: var(--success-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-success-bold: var(--success-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-success: var(--success-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-success: var(--success-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-success-subtle: var(--success-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-success-subtle: var(--success-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-discovery-bold: var(--lightBlue-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-discovery-bold: var(--lightBlue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-discovery: var(--lightBlue-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-discovery: var(--lightBlue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-discovery-subtle: var(--lightBlue-400);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-discovery-subtle: var(--lightBlue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-information-bold: var(--blue-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-information-bold: var(--blue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-information: var(--blue-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-information: var(--blue-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-information-subtle: var(--blue-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-information-subtle: var(--blue-400);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-purple-bold: var(--purple-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-purple-bold: var(--purple-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-purple: var(--purple-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-purple: var(--purple-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-purple-subtle: var(--purple-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-purple-subtle: var(--purple-400);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-pink-bold: var(--pink-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-pink-bold: var(--pink-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-pink: var(--pink-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-pink: var(--pink-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-pink-subtle: var(--pink-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-pink-subtle: var(--pink-400);\r\n }\r\n\r\n /* --------------Link color--------------- */\r\n\r\n [data-theme='light'] {\r\n --color-link: var(--blue-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-link: var(--blue-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-link-pressed: var(--blue-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-link-pressed: var(--blue-600);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-link-visited: var(--lightBlue-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-link-visited: var(--lightBlue-300);\r\n }\r\n\r\n /* --------------Icon color--------------- */\r\n\r\n [data-theme='light'] {\r\n --color-icon-bold: var(--gray-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-bold: var(--gray-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon: var(--gray-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon: var(--gray-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-subtle: var(--gray-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-subtle: var(--gray-400);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-disabled: var(--gray-400);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-disabled: var(--gray-500);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-inverse: var(--base-white);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-inverse: var(--gray-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-brandDarkBlue: var(--brandDarkBlue-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-brandDarkBlue: var(--brandDarkBlue-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-brandRed: var(--brandRed-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-brandRed: var(--brandRed-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-selected: var(--blue-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-selected: var(--blue-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-danger-bold: var(--brandRed-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-danger-bold: var(--brandRed-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-danger: var(--brandRed-700);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-danger: var(--brandRed-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-danger-inverse: var(--base-white);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-danger-inverse: var(--brandRed-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-warning-bold: var(--warning-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-warning-bold: var(--warning-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-warning: var(--warning-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-warning: var(--warning-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-success-bold: var(--success-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-success-bold: var(--success-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-success: var(--success-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-success: var(--success-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-discovery-bold: var(--lightBlue-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-discovery-bold: var(--lightBlue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-discovery: var(--lightBlue-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-discovery: var(--lightBlue-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-information-bold: var(--blue-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-information-bold: var(--blue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-information: var(--blue-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-information: var(--blue-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-purple-bold: var(--purple-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-purple-bold: var(--purple-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-purple: var(--purple-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-purple: var(--purple-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-pink-bold: var(--pink-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-pink-bold: var(--pink-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-pink: var(--pink-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-pink: var(--pink-300);\r\n }\r\n\r\n /* ----------------Border Color --------------- */\r\n\r\n [data-theme='light'] {\r\n --color-border-bold: var(--gray-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-bold: var(--gray-400);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border: var(--gray-400);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border: var(--gray-500);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-subtle: var(--gray-300);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-subtle: var(--gray-700);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-subtler: var(--gray-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-subtler: var(--gray-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-disabled: var(--gray-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-disabled: var(--gray-700);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-inverse: var(--base-white);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-inverse: var(--gray-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-input: var(--gray-300);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-input: var(--gray-600);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-focus: var(--gray-400);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-focus: var(--blue-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-selected: var(--blue-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-selected: var(--blue-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-brandDarkBlue: var(--brandDarkBlue-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-brandDarkBlue: var(--brandDarkBlue-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-brandRed: var(--brandRed-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-brandRed: var(--brandRed-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-danger-bold: var(--brandRed-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-danger-bold: var(--brandRed-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-danger: var(--brandRed-700);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-danger: var(--brandRed-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-danger-subtle: var(--brandRed-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-danger-subtle: var(--brandRed-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-danger-subtler: var(--brandRed-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-danger-subtler: var(--brandRed-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-warning-bold: var(--warning-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-warning-bold: var(--warning-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-warning: var(--warning-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-warning: var(--warning-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-warning-subtle: var(--warning-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-warning-subtle: var(--warning-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-warning-subtler: var(--warning-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-warning-subtler: var(--warning-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-success-bold: var(--success-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-success-bold: var(--success-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-success: var(--success-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-success: var(--success-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-success-subtle: var(--success-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-success-subtle: var(--success-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-success-subtler: var(--success-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-success-subtler: var(--success-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-discovery-bold: var(--lightBlue-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-discovery-bold: var(--lightBlue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-discovery: var(--lightBlue-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-discovery: var(--lightBlue-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-discovery-subtle: var(--lightBlue-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-discovery-subtle: var(--lightBlue-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-discovery-subtler: var(--lightBlue-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-discovery-subtler: var(--lightBlue-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-information-bold: var(--blue-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-information-bold: var(--blue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-information: var(--blue-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-information: var(--blue-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-information-subtle: var(--blue-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-information-subtle: var(--blue-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-information-subtler: var(--blue-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-information-subtler: var(--blue-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-purple-bold: var(--purple-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-purple-bold: var(--purple-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-purple: var(--purple-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-purple: var(--purple-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-purple-subtle: var(--purple-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-purple-subtle: var(--purple-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-purple-subtler: var(--purple-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-purple-subtler: var(--purple-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-pink-bold: var(--pink-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-pink-bold: var(--pink-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-pink: var(--pink-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-pink: var(--pink-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-pink-subtle: var(--pink-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-pink-subtle: var(--pink-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-pink-subtler: var(--pink-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-pink-subtler: var(--pink-900);\r\n }\r\n\r\n /* Emmanuel Kadiri starts from background color */\r\n\r\n /* ----------------Background Color --------------- */\r\n\r\n [data-theme='light'] {\r\n --color-background-card-bold: var(--gray-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-card-bold: var(--gray-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-card: var(--base-white);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-card: var(--gray-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-input: var(--gray-400);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-input: var(--gray-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-disabled: var(--gray-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-disabled: var(--gray-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-btn-disabled: var(--gray-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-btn-disabled: var(--gray-700);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-selected: var(--blue-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-selected: var(--blue-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-brandDarkblue: var(--brandDarkBlue-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-brandDarkblue: var(--brandDarkBlue-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-brandRed: var(--brandRed-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-brandRed: var(--brandRed-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-brandRed-hover: var(--brandRed-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-brandRed-hover: var(--brandRed-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-brandRed-pressed: var(--brandRed-700);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-brandRed-pressed: var(--brandRed-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-gray-bold: var(--gray-400);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-gray-bold: var(--gray-500);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-gray: var(--gray-300);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-gray: var(--gray-600);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-gray-subtle: var(--gray-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-gray-subtle: var(--gray-700);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-gray-subtler: var(--gray-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-gray-subtler: var(--gray-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-gray-subtlest: var(--gray-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-gray-subtlest: var(--gray-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-danger-bold: var(--brandRed-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-danger-bold: var(--brandRed-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-danger: var(--brandRed-700);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-danger: var(--brandRed-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-danger-subtle: var(--brandRed-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-danger-subtle: var(--brandRed-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-danger-subtler: var(--brandRed-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-danger-subtler: var(--brandRed-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-danger-subtlest: var(--brandRed-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-danger-subtlest: var(--brandRed-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-warning-bold: var(--warning-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-warning-bold: var(--warning-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-warning: var(--warning-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-warning: var(--warning-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-warning-subtle: var(--warning-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-warning-subtle: var(--warning-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-warning-subtler: var(--warning-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-warning-subtler: var(--warning-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-warning-subtlest: var(--warning-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-warning-subtlest: var(--warning-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-success-bold: var(--success-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-success-bold: var(--success-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-success: var(--success-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-success: var(--success-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-success-subtle: var(--success-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-success-subtle: var(--success-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-success-subtler: var(--success-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-success-subtler: var(--success-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-success-subtlest: var(--success-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-success-subtlest: var(--success-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-discovery-bold: var(--lightBlue-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-discovery-bold: var(--lightBlue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-discovery: var(--lightBlue-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-discovery: var(--lightBlue-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-discovery-subtle: var(--lightBlue-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-discovery-subtle: var(--lightBlue-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-discovery-subtler: var(--lightBlue-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-discovery-subtler: var(--lightBlue-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-discovery-subtlest: var(--lightBlue-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-discovery-subtlest: var(--lightBlue-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-information-bold: var(--blue-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-information-bold: var(--blue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-information: var(--blue-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-information: var(--blue-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-information-subtle: var(--blue-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-information-subtle: var(--blue-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-information-subtler: var(--blue-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-information-subtler: var(--blue-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-information-subtlest: var(--blue-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-information-subtlest: var(--blue-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-purple-bold: var(--purple-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-purple-bold: var(--blue-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-purple: var(--purple-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-purple: var(--blue-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-purple-subtle: var(--purple-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-purple-subtle: var(--purple-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-purple-subtler: var(--purple-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-purple-subtler: var(--purple-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-purple-subtlest: var(--purple-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-purple-subtlest: var(--purple-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-pink-bold: var(--pink-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-pink-bold: var(--pink-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-pink: var(--pink-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-pink: var(--pink-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-pink-subtle: var(--pink-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-pink-subtle: var(--pink-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-pink-subtler: var(--pink-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-pink-subtler: var(--pink-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-pink-subtlest: var(--purple-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-pink-subtlest: var(--pink-950);\r\n }\r\n\r\n /* ----------------Blanket Color --------------- */\r\n [data-theme='light'] {\r\n --color-blanket: var(--darkBlue500-opacity20);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-blanket: var(--darkBlue200-opacity20);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-blanket-subtle: var(--darkBlue500-opacity30);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-blanket-subtle: var(--darkBlue200-opacity30);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-blanket-subtler: var(--darkBlue500-opacity40);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-blanket-subtler: var(--darkBlue200-opacity40);\r\n }\r\n\r\n /* ----------------Skeleton Color --------------- */\r\n [data-theme='light'] {\r\n --color-skeleton: var(--gray-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-skeleton: var(--gray-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-skeleton-bold: var(--gray-300);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-skeleton-bold: var(--gray-700);\r\n }\r\n\r\n /* ----------------Surface Color --------------- */\r\n [data-theme='light'] {\r\n --color-surface-bold: var(--gray-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-surface-bold: var(--gray-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-surface: var(--base-white);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-surface: var(--gray-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-surface-hovered: var(--gray-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-surface-hovered: var(--gray-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-surface-pressed: var(--gray-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-surface-pressed: var(--gray-700);\r\n }\r\n\r\n /* ----------------Transparent Color --------------- */\r\n [data-theme='light'] {\r\n --color-surface-transparent50: var(--white-opacity50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-surface-transparent50: var(--gray900-opacity50);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-surface-transparent20: var(--white-opacity20);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-surface-transparent20: var(--gray900-opacity20);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-surface-transparent-full: var(--white-opacity0);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-surface-transparent-full: var(--gray900-opacity0);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-surface-bold-transparent50: var(--gray25-opacity50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-surface-bold-transparent50: var(--gray950-opacity50);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-surface-bold-transparent20: var(--gray25-opacity20);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-surface-bold-transparent20: var(--gray950-opacity20);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-surface-bold-transparent-full: var(--gray25-opacity0);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-surface-bold-transparent-full: var(--gray950-opacity0);\r\n }\r\n}\r\n\r\n/* -----------------Shadow and Blur----------------- */\r\n:root {\r\n --shadow-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\r\n --shadow-sm: 0px 1px 3px 0px rgba(16, 24, 40, 0.1), 0px 1px 2px 0px rgba(16, 24, 40, 0.06);\r\n --shadow-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);\r\n --shadow-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);\r\n --shadow-xl: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);\r\n --shadow-2xl: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);\r\n --shadow-3xl: 0px 32px 64px -12px rgba(16, 24, 40, 0.14);\r\n\r\n --blur-sm: blur(4px);\r\n --blur-md: blur(8px);\r\n --blur-lg: blur(12px);\r\n --blur-xl: blur(20px);\r\n}\r\n\r\n.shadow-xs {\r\n box-shadow: var(--shadow-xs);\r\n}\r\n\r\n.shadow-sm {\r\n box-shadow: var(--shadow-sm);\r\n}\r\n\r\n.shadow-md {\r\n box-shadow: var(--shadow-md);\r\n}\r\n\r\n.shadow-lg {\r\n box-shadow: var(--shadow-lg);\r\n}\r\n\r\n.shadow-xl {\r\n box-shadow: var(--shadow-xl);\r\n}\r\n\r\n.shadow-2xl {\r\n box-shadow: var(--shadow-2xl);\r\n}\r\n\r\n.shadow-3xl {\r\n box-shadow: var(--shadow-3xl);\r\n}\r\n\r\n.blur-sm {\r\n backdrop-filter: var(--blur-sm);\r\n}\r\n\r\n.blur-md {\r\n backdrop-filter: var(--blur-md);\r\n}\r\n\r\n.blur-lg {\r\n backdrop-filter: var(--blur-lg);\r\n}\r\n\r\n.blur-xl {\r\n backdrop-filter: var(--blur-xl);\r\n}\r\n\r\n/* -----------------Gradients----------------- */\r\n:root {\r\n /* Gray Gradients */\r\n /* --gray-gradient-600: linear-gradient(); */\r\n --gradient-gray-600-to-500-90d: linear-gradient(90deg, var(--gray-600), var(--gray-500));\r\n --gradient-gray-700-to-600-45d: linear-gradient(45deg, var(--gray-700), var(--gray-600));\r\n --gradient-gray-800-to-600-45d: linear-gradient(45deg, var(--gray-800), var(--gray-600));\r\n --gradient-gray-800-to-600-90d: linear-gradient(90deg, var(--gray-800), var(--gray-600));\r\n --gradient-gray-800-to-700265-d: linear-gradient(26.5deg, var(--gray-800), var(--gray-700));\r\n --gradient-gray-900-to-600-45d: linear-gradient(45deg, var(--gray-900), var(--gray-600));\r\n\r\n /* Brand Dark Blue Gradients */\r\n --gradient-darkBlue-500-to-400-90d: linear-gradient(90deg, var(--brandDarkBlue-500), var(--brandDarkBlue-400));\r\n --gradient-darkBlue-700-to-500-45d: linear-gradient(45deg, var(--brandDarkBlue-700), var(--brandDarkBlue-500));\r\n --gradient-darkBlue-700-to-400-45d: linear-gradient(45deg, var(--brandDarkBlue-700), var(--brandDarkBlue-400));\r\n --gradient-darkBlue-800-to-500-90d: linear-gradient(90deg, var(--brandDarkBlue-800), var(--brandDarkBlue-500));\r\n --gradient-darkBlue-800-to-600265-d: linear-gradient(26.5deg, var(--brandDarkBlue-800), var(--brandDarkBlue-600));\r\n --gradient-darkBlue-900-to-600-45d: linear-gradient(45deg, var(--brandDarkBlue-900), var(--brandDarkBlue-600));\r\n\r\n /* Brand Red Gradients */\r\n --gradient-red-500-to-400-90d: linear-gradient(90deg, var(--brandRed-600), var(--brandRed-400));\r\n --gradient-red-700-to-500-45d: linear-gradient(45deg, var(--brandRed-700), var(--brandRed-500));\r\n --gradient-red-700-to-400-45d: linear-gradient(45deg, var(--brandRed-700), var(--brandRed-400));\r\n --gradient-red-800-to-500-90d: linear-gradient(90deg, var(--brandRed-800), var(--brandRed-500));\r\n --gradient-red-800-to-600265-d: linear-gradient(26.5deg, var(--brandRed-800), var(--brandRed-600));\r\n --gradient-red-900-to-600-45d: linear-gradient(45deg, var(--brandRed-900), var(--brandRed-600));\r\n\r\n /* Blue Gradients */\r\n --gradient-blue-500-to-400-90d: linear-gradient(90deg, var(--blue-500), var(--blue-400));\r\n --gradient-blue-700-to-500-45d: linear-gradient(45deg, var(--blue-700), var(--blue-500));\r\n --gradient-blue-700-to-400-45d: linear-gradient(45deg, var(--blue-700), var(--blue-400));\r\n --gradient-blue-800-to-500-90d: linear-gradient(90deg, var(--blue-800), var(--blue-500));\r\n --gradient-blue-800-to-600265-d: linear-gradient(26.5deg, var(--blue-800), var(--blue-600));\r\n --gradient-blue-900-to-600-45d: linear-gradient(45deg, var(--blue-900), var(--blue-600));\r\n}\r\n\r\n.gradient-gray-600-to-500-90d {\r\n background: var(--gradient-gray-600-to-500-90d);\r\n}\r\n\r\n.gradient-gray-700-to-600-45d {\r\n background: var(--gradient-gray-700-to-600-45d);\r\n}\r\n\r\n.gradient-gray-800-to-600-45d {\r\n background: var(--gradient-gray-800-to-600-45d);\r\n}\r\n\r\n.gradient-gray-800-to-600-90d {\r\n background: var(--gradient-gray-800-to-600-90d);\r\n}\r\n\r\n.gradient-gray-800-to-700265-d {\r\n background: var(--gradient-gray-800-to-700265-d);\r\n}\r\n\r\n.gradient-gray-900-to-600-45d {\r\n background: var(--gradient-gray-900-to-600-45d);\r\n}\r\n\r\n.gradient-darkBlue-500-to-400-90d {\r\n background: var(--gradient-darkBlue-500-to-400-90d);\r\n}\r\n\r\n.gradient-darkBlue-700-to-500-45d {\r\n background: var(--gradient-darkBlue-700-to-500-45d);\r\n}\r\n\r\n.gradient-darkBlue-700-to-400-45d {\r\n background: var(--gradient-darkBlue-700-to-400-45d);\r\n}\r\n\r\n.gradient-darkBlue-800-to-500-90d {\r\n background: var(--gradient-darkBlue-800-to-500-90d);\r\n}\r\n\r\n.gradient-darkBlue-800-to-600265-d {\r\n background: var(--gradient-darkBlue-800-to-600265-d);\r\n}\r\n\r\n.gradient-darkBlue-900-to-600-45d {\r\n background: var(--gradient-darkBlue-900-to-600-45d);\r\n}\r\n\r\n.gradient-red-500-to-400-90d {\r\n background: var(--gradient-red-500-to-400-90d);\r\n}\r\n\r\n.gradient-red-700-to-500-45d {\r\n background: var(--gradient-red-700-to-500-45d);\r\n}\r\n\r\n.gradient-red-700-to-400-45d {\r\n background: var(--gradient-red-700-to-400-45d);\r\n}\r\n\r\n.gradient-red-800-to-500-90d {\r\n background: var(--gradient-red-800-to-500-90d);\r\n}\r\n\r\n.gradient-red-800-to-600265-d {\r\n background: var(--gradient-red-800-to-600265-d);\r\n}\r\n\r\n.gradient-red-900-to-600-45d {\r\n background: var(--gradient-red-900-to-600-45d);\r\n}\r\n\r\n.gradient-blue-500-to-400-90d {\r\n background: var(--gradient-blue-500-to-400-90d);\r\n}\r\n\r\n.gradient-blue-700-to-500-45d {\r\n background: var(--gradient-blue-700-to-500-45d);\r\n}\r\n\r\n.gradient-blue-700-to-400-45d {\r\n background: var(--gradient-blue-700-to-400-45d);\r\n}\r\n\r\n.gradient-blue-800-to-500-90d {\r\n background: var(--gradient-blue-800-to-500-90d);\r\n}\r\n\r\n.gradient-blue-800-to-600265-d {\r\n background: var(--gradient-blue-800-to-600265-d);\r\n}\r\n\r\n.gradient-blue-900-to-600-45d {\r\n background: var(--gradient-blue-900-to-600-45d);\r\n}\r\n\r\n/* Spacing Styles */\r\n:root {\r\n /* Positive spacing */\r\n --spacing-none: 0rem;\r\n --spacing-half: 0.125rem;\r\n --spacing-1: 0.25rem;\r\n --spacing-2: 0.5rem;\r\n --spacing-3: 0.75rem;\r\n --spacing-4: 1rem;\r\n --spacing-5: 1.25rem;\r\n --spacing-6: 1.5rem;\r\n --spacing-7: 2rem;\r\n --spacing-8: 2.5rem;\r\n --spacing-12: 3rem;\r\n --spacing-16: 4rem;\r\n --spacing-20: 5rem;\r\n --spacing-24: 6rem;\r\n --spacing-32: 8rem;\r\n --spacing-40: 10rem;\r\n --spacing-48: 12rem;\r\n --spacing-56: 14rem;\r\n --spacing-64: 16rem;\r\n\r\n /* Negative spacing */\r\n\r\n --spacing-negative-half: -0.125rem;\r\n --spacing-negative-1: -0.25rem;\r\n --spacing-negative-2: -0.5rem;\r\n --spacing-negative-3: -0.75rem;\r\n --spacing-negative-4: -1rem;\r\n --spacing-negative-5: -1.25rem;\r\n --spacing-negative-6: -1.5rem;\r\n --spacing-negative-7: -2rem;\r\n\r\n /* Radius */\r\n --rounded-none: 0rem;\r\n --rounded-xs: 0.25rem;\r\n --rounded-sm: 0.5rem;\r\n --rounded-md: 0.75rem;\r\n --rounded-lg: 1rem;\r\n --rounded-xl: 1.5rem;\r\n --rounded-2xl: 2rem;\r\n --rounded-full: 62.438rem;\r\n}\r\n\r\n/* Typography Styles */\r\n@import url('https://fonts.googleapis.com/css2?family=Sora&display=swap');\r\n\r\n:root {\r\n /* Font Sizes */\r\n --font-size-d-2xl: 4.5rem;\r\n --font-size-d-xl: 3.75rem;\r\n --font-size-d-lg: 3rem;\r\n --font-size-d-md: 2.25rem;\r\n --font-size-d-sm: 1.875rem;\r\n --font-size-d-xs: 1.5rem;\r\n --font-size-t-xl: 1.25rem;\r\n --font-size-t-lg: 1.125rem;\r\n --font-size-t-md: 1rem;\r\n --font-size-t-sm: 0.875rem;\r\n --font-size-t-xs: 0.75rem;\r\n --font-size-t-xxs: 0.625rem;\r\n\r\n /* Font Weights */\r\n --font-weight-bold: 700;\r\n --font-weight-semi-bold: 600;\r\n --font-weight-medium: 500;\r\n --font-weight-regular: 400;\r\n\r\n /* Line Heights */\r\n --font-line-height-d-2xl: 5rem;\r\n --font-line-height-d-xl: 4.25rem;\r\n --font-line-height-d-lg: 3.75rem;\r\n --font-line-height-d-md: 2.75rem;\r\n --font-line-height-d-sm: 2.375rem;\r\n --font-line-height-d-xs: 2rem;\r\n --font-line-height-t-xl: 2rem;\r\n --font-line-height-t-lg: 1.875rem;\r\n --font-line-height-t-md: 1.688rem;\r\n --font-line-height-t-sm: 1.5rem;\r\n --font-line-height-t-xs: 1.25rem;\r\n --font-line-height-t-xxs: 1.125rem;\r\n\r\n /* Letter Spacings */\r\n --font-letter-spacing-d-2xl: -0.09rem;\r\n --font-letter-spacing-d-xl: -0.075rem;\r\n --font-letter-spacing-d-lg: -0.075rem;\r\n --font-letter-spacing-d-md: -0.045rem;\r\n --font-letter-spacing-d-sm: 0;\r\n --font-letter-spacing-d-xs: 0;\r\n --font-letter-spacing-d-xxs: 0;\r\n\r\n /* Font Families */\r\n --font-family-title: 'Sora';\r\n --font-family-body: 'Sora';\r\n}\r\n\r\n/* Media queries for medium screens (tablet) */\r\n@media (max-width: 1199px) {\r\n :root {\r\n /* Font Sizes */\r\n --font-size-d-2xl: 3.75rem;\r\n --font-size-d-xl: 3.5rem;\r\n --font-size-d-lg: 2.75rem;\r\n --font-size-d-md: 2.25rem;\r\n --font-size-d-sm: 1.875rem;\r\n --font-size-d-xs: 1.5rem;\r\n\r\n /* Line Heights */\r\n --font-line-height-d-2xl: 4.25rem;\r\n --font-line-height-d-xl: 3.75rem;\r\n --font-line-height-d-lg: 2.4375rem;\r\n --font-line-height-d-md: 2.75rem;\r\n --font-line-height-d-sm: 2.375rem;\r\n --font-line-height-d-xs: 2rem;\r\n\r\n /* Letter Spacings */\r\n --font-letter-spacing-2xl: -0.075rem;\r\n --font-letter-spacing-xl: -0.065rem;\r\n --font-letter-spacing-lg: -0.045rem;\r\n --font-letter-spacing-md: -0.045rem;\r\n --font-letter-spacing-sm: 0rem;\r\n --font-letter-spacing-xs: 0rem;\r\n }\r\n}\r\n\r\n/* Media queries for smaller screens (mobile) */\r\n@media (max-width: 743px) {\r\n :root {\r\n /* Font Sizes */\r\n --font-size-d-2xl: 3rem;\r\n --font-size-d-xl: 2.5rem;\r\n --font-size-d-lg: 2rem;\r\n --font-size-d-md: 1.75rem;\r\n --font-size-d-sm: 1.5rem;\r\n --font-size-d-xs: 1.25rem;\r\n\r\n /* Line Heights */\r\n --font-line-height-d-2xl: 3.375rem;\r\n --font-line-height-d-xl: 2.875rem;\r\n --font-line-height-d-lg: 2.5rem;\r\n --font-line-height-d-md: 2.1375rem;\r\n --font-line-height-d-sm: 2rem;\r\n --font-line-height-d-xs: 1.75rem;\r\n\r\n /* Letter Spacings */\r\n --font-letter-spacing-2xl: -0.06rem;\r\n --font-letter-spacing-xl: -0.05rem;\r\n --font-letter-spacing-lg: -0.045rem;\r\n --font-letter-spacing-md: 0rem;\r\n --font-letter-spacing-sm: 0rem;\r\n --font-letter-spacing-xs: 0rem;\r\n }\r\n}\r\n\r\n.display-2xl-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-2xl);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-d-2xl);\r\n letter-spacing: var(--font-letter-spacing-d-2xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-2xl-bold::before,\r\n.display-2xl-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-2xl-bold::before {\r\n margin-bottom: -0.135em;\r\n}\r\n\r\n.display-2xl-bold::after {\r\n margin-top: -0.205em;\r\n}\r\n\r\n.display-2xl-semi-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-2xl);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-d-2xl);\r\n letter-spacing: var(--font-letter-spacing-d-2xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-2xl-semi-bold::before,\r\n.display-2xl-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-2xl-semi-bold::before {\r\n margin-bottom: -0.135em;\r\n}\r\n\r\n.display-2xl-semi-bold::after {\r\n margin-top: -0.205em;\r\n}\r\n\r\n.display-xl-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-xl);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-d-xl);\r\n letter-spacing: var(--font-letter-spacing-d-xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-xl-bold::before,\r\n.display-xl-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-xl-bold::before {\r\n margin-bottom: -0.145em;\r\n}\r\n\r\n.display-xl-bold::after {\r\n margin-top: -0.215em;\r\n}\r\n\r\n.display-xl-semi-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-xl);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-d-xl);\r\n letter-spacing: var(--font-letter-spacing-d-xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-xl-semi-bold::before,\r\n.display-xl-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-xl-semi-bold::before {\r\n margin-bottom: -0.145em;\r\n}\r\n\r\n.display-xl-semi-bold::after {\r\n margin-top: -0.215em;\r\n}\r\n\r\n.display-lg-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-lg);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-d-lg);\r\n letter-spacing: var(--font-letter-spacing-d-lg);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-lg-bold::before,\r\n.display-lg-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-lg-bold::before {\r\n margin-bottom: -0.015em;\r\n}\r\n\r\n.display-lg-bold::after {\r\n margin-top: -0.095em;\r\n}\r\n\r\n.display-lg-semi-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-lg);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-d-lg);\r\n letter-spacing: var(--font-letter-spacing-d-lg);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-lg-semi-bold::before,\r\n.display-lg-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-lg-semi-bold::before {\r\n margin-bottom: -0.015em;\r\n}\r\n\r\n.display-lg-semi-bold::after {\r\n margin-top: -0.095em;\r\n}\r\n\r\n.display-md-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-md);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-d-md);\r\n letter-spacing: var(--font-letter-spacing-d-md);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-md-bold::before,\r\n.display-md-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-md-bold::before {\r\n margin-bottom: -0.195em;\r\n}\r\n\r\n.display-md-bold::after {\r\n margin-top: -0.255em;\r\n}\r\n\r\n.display-md-semi-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-md);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-d-md);\r\n letter-spacing: var(--font-letter-spacing-d-md);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-md-semi-bold::before,\r\n.display-md-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-md-semi-bold::before {\r\n margin-bottom: -0.195em;\r\n}\r\n\r\n.display-md-semi-bold::after {\r\n margin-top: -0.255em;\r\n}\r\n\r\n.display-sm-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-sm);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-d-sm);\r\n letter-spacing: var(--font-letter-spacing-d-sm);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-sm-bold::before,\r\n.display-sm-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-sm-bold::before {\r\n margin-bottom: -0.195em;\r\n}\r\n\r\n.display-sm-bold::after {\r\n margin-top: -0.255em;\r\n}\r\n\r\n.display-sm-semi-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-sm);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-d-sm);\r\n letter-spacing: var(--font-letter-spacing-d-sm);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-sm-semi-bold::before,\r\n.display-sm-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-sm-semi-bold::before {\r\n margin-bottom: -0.195em;\r\n}\r\n\r\n.display-sm-semi-bold::after {\r\n margin-top: -0.255em;\r\n}\r\n\r\n.display-xs-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-xs);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-d-xs);\r\n letter-spacing: var(--font-letter-spacing-d-xs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-xs-bold::before,\r\n.display-xs-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-xs-bold::before {\r\n margin-bottom: -0.199em;\r\n}\r\n\r\n.display-xs-bold::after {\r\n margin-top: -0.195em; /* Continue from here */\r\n}\r\n\r\n.display-xs-semi-bold {\r\n font-family: var(--font-family-title);\r\n font-size: var(--font-size-d-xs);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-d-xs);\r\n letter-spacing: var(--font-letter-spacing-d-xs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.display-xs-semi-bold::before,\r\n.display-xs-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.display-xs-semi-bold::before {\r\n margin-bottom: -0.259em;\r\n}\r\n\r\n.display-xs-semi-bold::after {\r\n margin-top: -0.295em;\r\n}\r\n\r\n.text-xl-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xl);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-t-xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xl-bold::before,\r\n.text-xl-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xl-bold::before {\r\n margin-bottom: -0.329em;\r\n}\r\n\r\n.text-xl-bold::after {\r\n margin-top: -0.359em;\r\n}\r\n\r\n.text-xl-semi-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xl);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-t-xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xl-semi-bold::before,\r\n.text-xl-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xl-semi-bold::before {\r\n margin-bottom: -0.329em;\r\n}\r\n\r\n.text-xl-semi-bold::after {\r\n margin-top: -0.359em;\r\n}\r\n\r\n.text-xl-medium {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xl);\r\n font-weight: var(--font-weight-medium);\r\n line-height: var(--font-line-height-t-xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xl-medium::before,\r\n.text-xl-medium::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xl-medium::before {\r\n margin-bottom: -0.339em;\r\n}\r\n\r\n.text-xl-medium::after {\r\n margin-top: -0.399em;\r\n}\r\n\r\n.text-xl-regular {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xl);\r\n font-weight: var(--font-weight-regular);\r\n line-height: var(--font-line-height-t-xl);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xl-regular::before,\r\n.text-xl-regular::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xl-regular::before {\r\n margin-bottom: -0.339em;\r\n}\r\n\r\n.text-xl-regular::after {\r\n margin-top: -0.399em;\r\n}\r\n\r\n.text-lg-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-lg);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-t-lg);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-lg-bold::before,\r\n.text-lg-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-lg-bold::before {\r\n margin-bottom: -0.339em;\r\n}\r\n\r\n.text-lg-bold::after {\r\n margin-top: -0.399em;\r\n}\r\n\r\n.text-lg-semi-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-lg);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-t-lg);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-lg-semi-bold::before,\r\n.text-lg-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-lg-semi-bold::before {\r\n margin-bottom: -0.339em;\r\n}\r\n\r\n.text-lg-semi-bold::after {\r\n margin-top: -0.399em;\r\n}\r\n\r\n.text-lg-medium {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-lg);\r\n font-weight: var(--font-weight-medium);\r\n line-height: var(--font-line-height-t-lg);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-lg-medium::before,\r\n.text-lg-medium::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-lg-medium::before {\r\n margin-bottom: -0.349em;\r\n}\r\n\r\n.text-lg-medium::after {\r\n margin-top: -0.389em;\r\n}\r\n\r\n.text-lg-regular {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-lg);\r\n font-weight: var(--font-weight-regular);\r\n line-height: var(--font-line-height-t-lg);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-lg-regular::before,\r\n.text-lg-regular::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-lg-regular::before {\r\n margin-bottom: -0.349em;\r\n}\r\n\r\n.text-lg-regular::after {\r\n margin-top: -0.389em;\r\n}\r\n\r\n.text-md-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-md);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-t-md);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-md-bold::before,\r\n.text-md-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-md-bold::before {\r\n margin-bottom: -0.349em;\r\n}\r\n\r\n.text-md-bold::after {\r\n margin-top: -0.389em;\r\n}\r\n\r\n.text-md-semi-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-md);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-t-md);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-md-semi-bold::before,\r\n.text-md-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-md-semi-bold::before {\r\n margin-bottom: -0.349em;\r\n}\r\n\r\n.text-md-semi-bold::after {\r\n margin-top: -0.389em;\r\n}\r\n\r\n.text-md-medium {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-md);\r\n font-weight: var(--font-weight-medium);\r\n line-height: var(--font-line-height-t-md);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-md-medium::before,\r\n.text-md-medium::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-md-medium::before {\r\n margin-bottom: -0.349em;\r\n}\r\n\r\n.text-md-medium::after {\r\n margin-top: -0.389em;\r\n}\r\n\r\n.text-md-regular {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-md);\r\n font-weight: var(--font-weight-regular);\r\n line-height: var(--font-line-height-t-md);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-md-regular::before,\r\n.text-md-regular::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-md-regular::before {\r\n margin-bottom: -0.349em;\r\n}\r\n\r\n.text-md-regular::after {\r\n margin-top: -0.389em;\r\n}\r\n\r\n.text-sm-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-sm);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-t-sm);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-sm-bold::before,\r\n.text-sm-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-sm-bold::before {\r\n margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-bold::after {\r\n margin-top: -0.349em;\r\n}\r\n\r\n.text-sm-semi-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-sm);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-t-sm);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-sm-semi-bold::before,\r\n.text-sm-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-sm-semi-bold::before {\r\n margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-semi-bold::after {\r\n margin-top: -0.349em;\r\n}\r\n\r\n.text-sm-medium {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-sm);\r\n font-weight: var(--font-weight-medium);\r\n line-height: var(--font-line-height-t-sm);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n position: relative;\r\n display: inline-block;\r\n}\r\n\r\n.text-sm-medium::before,\r\n.text-sm-medium::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-sm-medium::before {\r\n margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-medium::after {\r\n margin-top: -0.299em;\r\n}\r\n\r\n.text-sm-regular {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-sm);\r\n font-weight: var(--font-weight-regular);\r\n line-height: var(--font-line-height-t-sm);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n position: relative;\r\n display: inline-block;\r\n}\r\n\r\n.text-sm-regular::before,\r\n.text-sm-regular::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-sm-regular::before {\r\n margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-regular::after {\r\n margin-top: -0.299em;\r\n}\r\n\r\n.text-xs-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xs);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-t-xs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xs-bold::before,\r\n.text-xs-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xs-bold::before {\r\n margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xs-bold::after {\r\n margin-top: -0.416em;\r\n}\r\n\r\n.text-xs-semi-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xs);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-t-xs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xs-semi-bold::before,\r\n.text-xs-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xs-semi-bold::before {\r\n margin-bottom: -0.321em;\r\n}\r\n\r\n.text-xs-semi-bold::after {\r\n margin-top: -0.416em;\r\n}\r\n\r\n.text-xs-medium {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xs);\r\n font-weight: var(--font-weight-medium);\r\n line-height: var(--font-line-height-t-xs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xs-medium::before,\r\n.text-xs-medium::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xs-medium::before {\r\n margin-bottom: -0.285em;\r\n}\r\n\r\n.text-xs-medium::after {\r\n margin-top: -0.396em;\r\n}\r\n\r\n.text-xs-regular {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xs);\r\n font-weight: var(--font-weight-regular);\r\n line-height: var(--font-line-height-t-xs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xs-regular::before,\r\n.text-xs-regular::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xs-regular::before {\r\n margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xs-regular::after {\r\n margin-top: -0.396em;\r\n}\r\n\r\n.text-xxs-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xxs);\r\n font-weight: var(--font-weight-bold);\r\n line-height: var(--font-line-height-t-xxs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xxs-bold::before,\r\n.text-xxs-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xxs-bold::before {\r\n margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-bold::after {\r\n margin-top: -0.416em;\r\n}\r\n\r\n.text-xxs-semi-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xxs);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-t-xxs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xxs-semi-bold::before,\r\n.text-xxs-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xxs-semi-bold::before {\r\n margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-semi-bold::after {\r\n margin-top: -0.416em;\r\n}\r\n\r\n.text-xxs-medium {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xxs);\r\n font-weight: var(--font-weight-medium);\r\n line-height: var(--font-line-height-t-xxs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xxs-medium::before,\r\n.text-xxs-medium::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xxs-medium::before {\r\n margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-medium::after {\r\n margin-top: -0.416em;\r\n}\r\n\r\n.text-xxs-regular {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xxs);\r\n font-weight: var(--font-weight-regular);\r\n line-height: var(--font-line-height-t-xxs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xxs-regular::before,\r\n.text-xxs-regular::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xxs-regular::before {\r\n margin-bottom: -0.291em;\r\n}\r\n\r\n.text-xxs-regular::after {\r\n margin-top: -0.416em;\r\n}\r\n\r\n/* Button slot styles */\r\n/* .slotted_button_text.primary {\r\n color: var(--color-text-inverse, #ffffff) !important;\r\n}\r\n\r\n.slotted_button_text.secondary_gray {\r\n color: var(--color-text, #4b5565) !important;\r\n}\r\n\r\n.slotted_button_text.secondary_color {\r\n color: var(--color-text-brandRed, #e21b2e) !important;\r\n}\r\n\r\n.slotted_button_text.tertiary_gray {\r\n color: var(--color-text, #4b5565) !important;\r\n}\r\n\r\n.slotted_button_text.tertiary_color {\r\n color: var(--color-text-brandRed, #e21b2e) !important;\r\n}\r\n\r\n.slotted_button_text.link_gray {\r\n color: var(--color-text, #4b5565) !important;\r\n}\r\n\r\n.slotted_button_text.link_color {\r\n color: var(--color-link, #075db2) !important;\r\n}\r\n\r\n.slotted_button_text.primary.destructive {\r\n color: var(--color-text-inverse, #ffffff) !important;\r\n}\r\n\r\n#slotted_button_text.primary.disabled,\r\n#slotted_button_text.secondary_gray.disabled,\r\n#slotted_button_text.secondary_color.disabled,\r\n#slotted_button_text.tertiary_gray.disabled,\r\n#slotted_button_text.tertiary_color.disabled,\r\n#slotted_button_text.link_gray.disabled,\r\n#slotted_button_text.link_color.disabled {\r\n color: var(--color-text-disabled, #9aa4b2) !important;\r\n}\r\n\r\n#slotted_button_text.secondary_gray.default.destructive,\r\n#slotted_button_text.secondary_color.default.destructive,\r\n#slotted_button_text.tertiary_gray.default.destructive,\r\n#slotted_button_text.tertiary_color.default.destructive,\r\n#slotted_button_text.link_gray.default.destructive,\r\n#slotted_button_text.link_color.default.destructive {\r\n color: var(--color-text-danger, #b51726) !important;\r\n} */\r\n\r\n:host{\r\n display: block;\r\n width: 100%;\r\n}\r\n\r\n.progress_bar_container {\r\n background-color: transparent;\r\n display: flex;\r\n align-items: center;\r\n gap: var(--spacing-3);\r\n width: 100%;\r\n height: fit-content;\r\n position: relative;\r\n}\r\n\r\n.progress_bar {\r\n position: relative;\r\n height: 0.4rem;\r\n width: 100%;\r\n background: var(--color-border-subtler, #e3e8ef);\r\n border-radius: var(--rounded-xs);\r\n}\r\n\r\n.progress_fill {\r\n position: absolute;\r\n height: 100%;\r\n width: 0%;\r\n background: var(--color-border-selected, #075db2);\r\n border-radius: 15px;\r\n transition: width 0.5s ease-in-out;\r\n}\r\n\r\n.label {\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\nspan {\r\n color: var(--color-text, #4B5565);\r\n}\r\n\r\n/* Label Position Styles */\r\n.progress_bar_container.right {\r\n flex-direction: row;\r\n gap: var(--spacing-3);\r\n}\r\n\r\n.progress_bar_container.bottom,\r\n.progress_bar_container.bottom_floating {\r\n flex-direction: column;\r\n gap: var(--spacing-2);\r\n}\r\n\r\n.progress_bar_container.top_floating {\r\n flex-direction: column-reverse;\r\n gap: var(--spacing-2);\r\n}\r\n\r\n.label.bottom {\r\n align-self: flex-end;\r\n}\r\n\r\n.label.top_floating {\r\n align-self: flex-start;\r\n}\r\n\r\n.top_tooltip {\r\n position: absolute;\r\n top: -2.2rem;\r\n}\r\n\r\n.bottom_tooltip {\r\n position: absolute;\r\n top: 1rem;\r\n}\r\n\r\n.text-sm-medium {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-sm);\r\n font-weight: var(--font-weight-medium);\r\n line-height: var(--font-line-height-t-sm);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n position: relative;\r\n display: inline-block;\r\n}\r\n\r\n.text-sm-medium::before,\r\n.text-sm-medium::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-sm-medium::before {\r\n margin-bottom: -0.299em;\r\n}\r\n\r\n.text-sm-medium::after {\r\n margin-top: -0.299em;\r\n}\r\n\r\n.text-xs-semi-bold {\r\n font-family: var(--font-family-body);\r\n font-size: var(--font-size-t-xs);\r\n font-weight: var(--font-weight-semi-bold);\r\n line-height: var(--font-line-height-t-xs);\r\n margin: var(--spacing-none);\r\n padding: var(--spacing-none);\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n.text-xs-semi-bold::before,\r\n.text-xs-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n\r\n.text-xs-semi-bold::before {\r\n margin-bottom: -0.321em;\r\n}\r\n\r\n.text-xs-semi-bold::after {\r\n margin-top: -0.416em;\r\n}\r\n";
|
|
6021
6215
|
|
|
6022
6216
|
const GbProgressBar = class {
|
|
@@ -6943,7 +7137,7 @@ const GbVerticalTabs = class {
|
|
|
6943
7137
|
};
|
|
6944
7138
|
GbVerticalTabs.style = gbVerticalTabsCss;
|
|
6945
7139
|
|
|
6946
|
-
export { GbActionPanel as gb_action_panel, gbapprovalmodal as gb_approval_modal, GbAvatar as gb_avatar, GbAvatarContrastInnerBorder as gb_avatar_contrast_inner_border, GbAvatarDropdown as gb_avatar_dropdown, GbAvatarLabelGroup as gb_avatar_label_group, GbAvatarProfilePhoto as gb_avatar_profile_photo, GbBadges as gb_badge, BadgeClose as gb_badge_close, GbButton$1 as gb_btn, GbButton as gb_button, GbButtonClose as gb_button_close, GbButtonGroup as gb_button_group, GbButtonGroupBase as gb_button_group_base, GbCheckbox as gb_checkbox, GbCheckboxBase as gb_checkbox_base, GbCheckboxGroupItem as gb_checkbox_group_item, GbCollapseButton as gb_collapse_button, GbComplexPrimarySideBarItem as gb_complex_primary_side_bar_item, GbComplexSecondarySideBarItem as gb_complex_secondary_side_bar_item, GbDatePicker as gb_date_picker, GbDropdownShortcut as gb_dropdown_items_with_shortcut, GbExportDropdown as gb_export_dropdown, GbExportDropdownItem as gb_export_dropdown_item, GbExportSubDropdown as gb_export_sub_dropdown, GbExportSubDropdownItem as gb_export_sub_dropdown_item, GbFileTypeIcon as gb_file_type_icon, GbFileUploadItemBase as gb_file_upload_item_base, GbFilterButton as gb_filter_button, GbHeader as gb_header, GbHeaderIcon as gb_header_icon, GbHelpDropdown as gb_help_dropdown, GbHelpTooltip as gb_help_tooltip, GbIconButtonBase as gb_icon_button_base, GbInputDropdown as gb_input_dropdown, GbInputDropdownMenuItem as gb_input_dropdown_menu_item, GbInputField as gb_input_field, GbModalAction as gb_modal_action, GbModalHeader as gb_modal_header, GbNavBar as gb_nav_bar, GbNavBarItem as gb_nav_bar_item, GbNavBarSidemenu as gb_nav_bar_sidemenu, GbNotificationContent as gb_notification_content, GbNotificationPane as gb_notification_pane, GbPagination as gb_pagination, GbPaginationButtonGroupBase as gb_pagination_button_group_base, GbPaginationNumberBase as gb_pagination_number_base, GbPasswordButton as gb_password_button, GbProgressBar as gb_progress_bar, GbSidebar as gb_sidebar, GbSimpleSideBarItem as gb_simple_side_bar_item, GbStatusIndicator as gb_status_indicator, GbTabButtonBase as gb_tab_button_base, GbTableHeader as gb_table_header, GbTag as gb_tag, GbTagCheckbox as gb_tag_checkbox, GbTagClose as gb_tag_close, GbTagCount as gb_tag_count, GbTextareaInputField as gb_textarea_input_field, GbThemeTab as gb_theme_tab, GbToast as gb_toast, GbToastButton as gb_toast_button, GbToggle as gb_toggle, GbToggleBase as gb_toggle_base, GbTooltip as gb_tooltip, GbVerticalTabs as gb_vertical_tabs };
|
|
6947
|
-
//# sourceMappingURL=gb-action-panel.gb-approval-modal.gb-avatar.gb-avatar-contrast-inner-border.gb-avatar-dropdown.gb-avatar-label-group.gb-avatar-profile-photo.gb-badge.gb-badge-close.gb-btn.gb-button.gb-button-close.gb-button-group.gb-button-group-base.gb-checkbox.gb-checkbox-base.gb-checkbox-group-item.gb-collapse-button.gb-complex-primary-side-bar-item.gb-complex-secondary-side-bar-item.gb-date-picker.gb-dropdown-items-with-shortcut.gb-export-dropdown.gb-export-dropdown-item.gb-export-sub-dropdown.gb-export-sub-dropdown-item.gb-file-type-icon.gb-file-upload-item-base.gb-filter-button.gb-header.gb-header-icon.gb-help-dropdown.gb-help-tooltip.gb-icon-button-base.gb-input-dropdown.gb-input-dropdown-menu-item.gb-input-field.gb-modal-action.gb-modal-header.gb-nav-bar.gb-nav-bar-item.gb-nav-bar-sidemenu.gb-notification-content.gb-notification-pane.gb-pagination.gb-pagination-button-group-base.gb-pagination-number-base.gb-password-button.gb-progress-bar.gb-sidebar.gb-simple-side-bar-item.gb-status-indicator.gb-tab-button-base.gb-table-header.gb-tag.gb-tag-checkbox.gb-tag-close.gb-tag-count.gb-textarea-input-field.gb-theme-tab.gb-toast.gb-toast-button.gb-toggle.gb-toggle-base.gb-tooltip.gb-vertical-tabs.entry.js.map
|
|
7140
|
+
export { GbActionPanel as gb_action_panel, gbapprovalmodal as gb_approval_modal, GbAvatar as gb_avatar, GbAvatarContrastInnerBorder as gb_avatar_contrast_inner_border, GbAvatarDropdown as gb_avatar_dropdown, GbAvatarLabelGroup as gb_avatar_label_group, GbAvatarProfilePhoto as gb_avatar_profile_photo, GbBadges as gb_badge, BadgeClose as gb_badge_close, GbButton$1 as gb_btn, GbButton as gb_button, GbButtonClose as gb_button_close, GbButtonGroup as gb_button_group, GbButtonGroupBase as gb_button_group_base, GbCheckbox as gb_checkbox, GbCheckboxBase as gb_checkbox_base, GbCheckboxGroupItem as gb_checkbox_group_item, GbCollapseButton as gb_collapse_button, GbComplexPrimarySideBarItem as gb_complex_primary_side_bar_item, GbComplexSecondarySideBarItem as gb_complex_secondary_side_bar_item, GbDatePicker as gb_date_picker, GbDropdownShortcut as gb_dropdown_items_with_shortcut, GbEmptyState as gb_empty_state, GbExportDropdown as gb_export_dropdown, GbExportDropdownItem as gb_export_dropdown_item, GbExportSubDropdown as gb_export_sub_dropdown, GbExportSubDropdownItem as gb_export_sub_dropdown_item, GbFeaturedIcon as gb_featured_icon, GbFileTypeIcon as gb_file_type_icon, GbFileUploadItemBase as gb_file_upload_item_base, GbFilterButton as gb_filter_button, GbHeader as gb_header, GbHeaderIcon as gb_header_icon, GbHelpDropdown as gb_help_dropdown, GbHelpTooltip as gb_help_tooltip, GbIconButtonBase as gb_icon_button_base, GbIllustration as gb_illustration, GbInputDropdown as gb_input_dropdown, GbInputDropdownMenuItem as gb_input_dropdown_menu_item, GbInputField as gb_input_field, GbModalAction as gb_modal_action, GbModalHeader as gb_modal_header, GbNavBar as gb_nav_bar, GbNavBarItem as gb_nav_bar_item, GbNavBarSidemenu as gb_nav_bar_sidemenu, GbNotificationContent as gb_notification_content, GbNotificationPane as gb_notification_pane, GbPagination as gb_pagination, GbPaginationButtonGroupBase as gb_pagination_button_group_base, GbPaginationNumberBase as gb_pagination_number_base, GbPasswordButton as gb_password_button, GbPattern as gb_pattern, GbProgressBar as gb_progress_bar, GbSidebar as gb_sidebar, GbSimpleSideBarItem as gb_simple_side_bar_item, GbStatusIndicator as gb_status_indicator, GbTabButtonBase as gb_tab_button_base, GbTableHeader as gb_table_header, GbTag as gb_tag, GbTagCheckbox as gb_tag_checkbox, GbTagClose as gb_tag_close, GbTagCount as gb_tag_count, GbTextareaInputField as gb_textarea_input_field, GbThemeTab as gb_theme_tab, GbToast as gb_toast, GbToastButton as gb_toast_button, GbToggle as gb_toggle, GbToggleBase as gb_toggle_base, GbTooltip as gb_tooltip, GbVerticalTabs as gb_vertical_tabs };
|
|
7141
|
+
//# sourceMappingURL=gb-action-panel.gb-approval-modal.gb-avatar.gb-avatar-contrast-inner-border.gb-avatar-dropdown.gb-avatar-label-group.gb-avatar-profile-photo.gb-badge.gb-badge-close.gb-btn.gb-button.gb-button-close.gb-button-group.gb-button-group-base.gb-checkbox.gb-checkbox-base.gb-checkbox-group-item.gb-collapse-button.gb-complex-primary-side-bar-item.gb-complex-secondary-side-bar-item.gb-date-picker.gb-dropdown-items-with-shortcut.gb-empty-state.gb-export-dropdown.gb-export-dropdown-item.gb-export-sub-dropdown.gb-export-sub-dropdown-item.gb-featured-icon.gb-file-type-icon.gb-file-upload-item-base.gb-filter-button.gb-header.gb-header-icon.gb-help-dropdown.gb-help-tooltip.gb-icon-button-base.gb-illustration.gb-input-dropdown.gb-input-dropdown-menu-item.gb-input-field.gb-modal-action.gb-modal-header.gb-nav-bar.gb-nav-bar-item.gb-nav-bar-sidemenu.gb-notification-content.gb-notification-pane.gb-pagination.gb-pagination-button-group-base.gb-pagination-number-base.gb-password-button.gb-pattern.gb-progress-bar.gb-sidebar.gb-simple-side-bar-item.gb-status-indicator.gb-tab-button-base.gb-table-header.gb-tag.gb-tag-checkbox.gb-tag-close.gb-tag-count.gb-textarea-input-field.gb-theme-tab.gb-toast.gb-toast-button.gb-toggle.gb-toggle-base.gb-tooltip.gb-vertical-tabs.entry.js.map
|
|
6948
7142
|
|
|
6949
|
-
//# sourceMappingURL=gb-action-
|
|
7143
|
+
//# sourceMappingURL=gb-action-panel_70.entry.js.map
|