globuswebcomponents 2.6.10 → 2.6.11

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.
Files changed (55) hide show
  1. package/dist/cjs/gb-action-panel_72.cjs.entry.js +2 -2
  2. package/dist/cjs/gb-action-panel_72.cjs.entry.js.map +1 -1
  3. package/dist/collection/components/gb-badge/gb-badge.css +1 -5
  4. package/dist/collection/components/gb-tag/gb-tag.js +1 -1
  5. package/dist/collection/components/gb-tag/gb-tag.js.map +1 -1
  6. package/dist/components/gb-approval-modal.js +3 -3
  7. package/dist/components/gb-avatar-dropdown.js +1 -1
  8. package/dist/components/gb-badge.js +1 -1
  9. package/dist/components/gb-detail-cell.js +1 -1
  10. package/dist/components/gb-filter-button.js +1 -1
  11. package/dist/components/gb-header.js +4 -4
  12. package/dist/components/gb-horizontal-tabs.js +2 -2
  13. package/dist/components/gb-input-dropdown.js +1 -1
  14. package/dist/components/gb-input-field.js +1 -1
  15. package/dist/components/gb-metric-card.js +1 -1
  16. package/dist/components/gb-nav-bar-sidemenu.js +3 -3
  17. package/dist/components/gb-pagination.js +3 -3
  18. package/dist/components/gb-sidebar.js +2 -2
  19. package/dist/components/gb-simple-side-bar-item.js +1 -1
  20. package/dist/components/gb-tab-button-base.js +1 -1
  21. package/dist/components/gb-table-header.js +5 -5
  22. package/dist/components/gb-tag.js +1 -1
  23. package/dist/components/gb-textarea-input-field.js +1 -1
  24. package/dist/components/gb-vertical-tabs.js +1 -1
  25. package/dist/components/{p-C7EZ2Xgj.js → p-BFLy5en8.js} +3 -3
  26. package/dist/components/p-BFLy5en8.js.map +1 -0
  27. package/dist/components/{p-BqvCm8Yt.js → p-BSnxRjSZ.js} +3 -3
  28. package/dist/components/{p-BqvCm8Yt.js.map → p-BSnxRjSZ.js.map} +1 -1
  29. package/dist/components/{p-sCbkW23X.js → p-BaY3LOPq.js} +4 -4
  30. package/dist/components/{p-sCbkW23X.js.map → p-BaY3LOPq.js.map} +1 -1
  31. package/dist/components/{p-DGyoOPE5.js → p-C55RieH5.js} +3 -3
  32. package/dist/components/{p-DGyoOPE5.js.map → p-C55RieH5.js.map} +1 -1
  33. package/dist/components/{p-Dcxupnwd.js → p-CEvOvc_r.js} +3 -3
  34. package/dist/components/{p-Dcxupnwd.js.map → p-CEvOvc_r.js.map} +1 -1
  35. package/dist/components/{p-dTV3DROa.js → p-CnDFKHUb.js} +4 -4
  36. package/dist/components/{p-dTV3DROa.js.map → p-CnDFKHUb.js.map} +1 -1
  37. package/dist/components/{p--VYHLSnW.js → p-D3csVTmT.js} +3 -3
  38. package/dist/components/{p--VYHLSnW.js.map → p-D3csVTmT.js.map} +1 -1
  39. package/dist/components/{p-GH1rWTds.js → p-DUkYuAkd.js} +3 -3
  40. package/dist/components/p-DUkYuAkd.js.map +1 -0
  41. package/dist/components/{p-DzFxPx6N.js → p-Du_Pv4sb.js} +3 -3
  42. package/dist/components/{p-DzFxPx6N.js.map → p-Du_Pv4sb.js.map} +1 -1
  43. package/dist/components/{p-CfppGorT.js → p-tCN0hak6.js} +3 -3
  44. package/dist/components/{p-CfppGorT.js.map → p-tCN0hak6.js.map} +1 -1
  45. package/dist/components/test-input-tag.js +1 -1
  46. package/dist/docs.json +1 -1
  47. package/dist/esm/gb-action-panel_72.entry.js +2 -2
  48. package/dist/esm/gb-action-panel_72.entry.js.map +1 -1
  49. package/dist/globuscomponents/globuscomponents.esm.js +1 -1
  50. package/dist/globuscomponents/{p-0bfe4887.entry.js → p-a4331b66.entry.js} +2 -2
  51. package/dist/globuscomponents/p-a4331b66.entry.js.map +1 -0
  52. package/package.json +1 -1
  53. package/dist/components/p-C7EZ2Xgj.js.map +0 -1
  54. package/dist/components/p-GH1rWTds.js.map +0 -1
  55. package/dist/globuscomponents/p-0bfe4887.entry.js.map +0 -1
package/dist/cjs/gb-action-panel_72.cjs.entry.js CHANGED
@@ -519,7 +519,7 @@ const GbAvatarProfilePhoto = class {
519
519
  };
520
520
  GbAvatarProfilePhoto.style = gbAvatarProfilePhotoCss;
521
521
 
522
- const gbBadgeCss = "/* @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: flex;\r\n align-items: center;\r\n width: fit-content;\r\n}\r\n\r\ndiv {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 0px;\r\n flex-shrink: 0;\r\n text-align: center;\r\n}\r\n\r\n.label {\r\n padding: 2px;\r\n}\r\n\r\n.icon {\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\ndiv.sm {\r\n height: 22px;\r\n min-height: 22px;\r\n gap: 0.25rem;\r\n padding: var(--spacing-none) var(--spacing-2);\r\n}\r\n\r\ndiv.md {\r\n height: var(--spacing-6);\r\n min-height: var(--spacing-6);\r\n padding: var(--spacing-none) var(--spacing-2);\r\n gap: 0.38rem;\r\n}\r\n\r\ndiv.lg {\r\n height: 28px;\r\n min-height: 28px;\r\n gap: 0.38rem;\r\n padding: var(--spacing-none) var(--spacing-2);\r\n}\r\n\r\ndiv.pill_color {\r\n border-radius: var(--rounded-full);\r\n}\r\n\r\ndiv.pill_color.gray,\r\n.badge_color.gray {\r\n border: 1px solid var(--color-border-subtler, #e3e8ef);\r\n background: var(--color-background-gray-subtler, #eef2f6);\r\n color: var(--color-text, #4b5565) !important;\r\n}\r\n\r\n.pill_color.primary,\r\n.badge_color.primary {\r\n border: 1px solid var(--color-border-information-subtler, #c8e0f9);\r\n background: var(--color-background-information-subtlest, #e4f0fc);\r\n color: var(--color-text-brandDarkBlue, #212c65) !important;\r\n}\r\n\r\n.pill_color.error,\r\n.badge_color.error {\r\n border: 1px solid var(--color-border-danger-subtler, #fde3e5);\r\n background: var(--color-background-danger-subtlest, #fef1f2);\r\n color: var(--color-text-danger, #b51726) !important;\r\n}\r\n\r\n.pill_color.warning,\r\n.badge_color.warning {\r\n border: 1px solid var(--color-border-warning-subtler, #fef0c7);\r\n background: var(--color-background-warning-subtlest, #fffaeb);\r\n color: var(--color-text-warning, #dc6803) !important;\r\n}\r\n\r\n.pill_color.success,\r\n.badge_color.success {\r\n border: 1px solid var(--color-border-success-subtler, #dcfae6);\r\n background: var(--color-background-success-subtlest, #ecfdf3);\r\n color: var(--color-text-success, #079455) !important;\r\n}\r\n\r\n.pill_color.discovery,\r\n.badge_color.discovery {\r\n border: 1px solid var(--color-border-discovery-subtler, #e0f2fe);\r\n background: var(--color-background-discovery-subtlest, #f0f9ff);\r\n color: var(--color-text-discovery, #0086c9) !important;\r\n}\r\n\r\n.pill_color.information,\r\n.badge_color.information {\r\n border: 1px solid var(--color-border-information-subtler, #c8e0f9);\r\n background: var(--color-background-information-subtlest, #e4f0fc);\r\n}\r\n\r\n.pill_color.pink,\r\n.badge_color.pink {\r\n border: 1px solid var(--color-border-pink-subtler, #fce7f6);\r\n background: var(--color-background-pink-subtlest, #fdf2fa);\r\n color: var(--color-text-pink, #dd2590) !important;\r\n}\r\n\r\n.pill_color.purple,\r\n.badge_color.purple {\r\n border: 1px solid var(--color-border-purple-subtler, #ebe9fe);\r\n background: var(--color-background-purple-subtlest, #f4f3ff);\r\n color: var(--color-text-purple, #6938ef);\r\n}\r\n\r\n#badge_text_information {\r\n font-size: 13rem !important;\r\n color: var(--color-text-information, #064e94) !important;\r\n}\r\n\r\n.pill_color svg,\r\n.badge_color svg,\r\n.pill_outline svg,\r\n.badge_modern svg {\r\n width: var(--spacing-2);\r\n height: var(--spacing-2);\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.gray svg path[stroke] {\r\n stroke: var(--color-icon, #4b5565);\r\n}\r\n\r\n.gray svg path[fill] {\r\n fill: var(--color-icon, #4b5565);\r\n}\r\n\r\n.primary svg path[stroke] {\r\n stroke: var(--color-icon-brandDarkBlue, #212c65);\r\n}\r\n\r\n.primary svg path[fill] {\r\n fill: var(--color-icon-brandDarkBlue, #212c65);\r\n}\r\n\r\n.error svg path[stroke] {\r\n stroke: var(--color-icon-danger, #b51726);\r\n}\r\n\r\n.error svg path[fill] {\r\n fill: var(--color-icon-danger, #b51726);\r\n}\r\n\r\n.warning svg path[stroke] {\r\n stroke: var(--color-icon-warning, #dc6803);\r\n}\r\n\r\n.warning svg path[fill] {\r\n fill: var(--color-icon-warning, #dc6803);\r\n}\r\n\r\n.icon.success svg path[stroke] {\r\n stroke: var(--color-icon-success, #079455);\r\n}\r\n\r\n.success svg path[fill] {\r\n fill: var(--color-icon-success, #079455);\r\n}\r\n\r\n.discovery svg path[stroke] {\r\n stroke: var(--color-icon-discovery, #0086c9);\r\n}\r\n\r\n.discovery svg path[fill] {\r\n fill: var(--color-icon-discovery, #0086c9);\r\n}\r\n\r\n.information svg path[stroke] {\r\n stroke: var(--color-icon-information, #064e94);\r\n}\r\n\r\n.information svg path[fill] {\r\n fill: var(--color-icon-information, #064e94);\r\n}\r\n\r\n.pink svg path[stroke] {\r\n stroke: var(--color-icon-pink, #dd2590);\r\n}\r\n\r\n.pink svg path[fill] {\r\n fill: var(--color-icon-pink, #dd2590);\r\n}\r\n\r\n.purple svg path[stroke] {\r\n stroke: var(--color-icon-purple, #6938ef);\r\n}\r\n\r\n.purple svg path[fill] {\r\n fill: var(--color-icon-purple, #6938ef);\r\n}\r\n\r\n.pill_outline {\r\n border-radius: var(--rounded-full);\r\n}\r\n\r\n.pill_outline.gray {\r\n border: 1.5px solid var(--color-text, #4b5565);\r\n color: var(--color-text, #4b5565) !important;\r\n}\r\n\r\n.pill_outline.primary {\r\n border: 1.5px solid var(--color-text-brandDarkBlue, #212c65);\r\n color: var(--color-text-brandDarkBlue, #212c65) !important;\r\n}\r\n\r\n.pill_outline.error {\r\n border: 1.5px solid var(--color-text-danger, #b51726);\r\n color: var(--color-text-danger, #b51726) !important;\r\n}\r\n\r\n.pill_outline.warning {\r\n border: 1.5px solid var(--color-text-warning, #dc6803);\r\n color: var(--color-text-warning, #dc6803) !important;\r\n}\r\n\r\n.pill_outline.success {\r\n border: 1.5px solid var(--color-text-success, #079455);\r\n color: var(--color-text-success, #079455) !important;\r\n}\r\n\r\n.pill_outline.discovery {\r\n border: 1.5px solid var(--color-text-discovery, #0086c9);\r\n color: var(--color-text-discovery, #0086c9) !important;\r\n}\r\n\r\n.pill_outline.information {\r\n border: 1.5px solid var(--color-text-information, #064e94);\r\n}\r\n\r\n.pill_outline.pink {\r\n border: 1.5px solid var(--color-text-pink, #dd2590);\r\n color: var(--color-text-pink, #dd2590) !important;\r\n}\r\n\r\n.pill_outline.purple {\r\n border: 1.5px solid var(--color-text-purple, #6938ef);\r\n color: var(--color-text-purple, #6938ef);\r\n}\r\n\r\n.badge_color {\r\n border-radius: var(--rounded-xs);\r\n}\r\n\r\n.badge_modern {\r\n border-radius: var(--rounded-xs);\r\n border: 1px solid var(--color-border-subtler, #e3e8ef);\r\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\r\n color: var(--color-text, #4b5565);\r\n}\r\n\r\n.badge_modern svg path {\r\n stroke: inherit; /* Inherit color from the parent, but set in the component */\r\n fill: inherit;\r\n}\r\n\r\n.icon svg {\r\n width: var(--spacing-4);\r\n height: var(--spacing-4);\r\n margin-top: -2px;\r\n}\r\n\r\n.icon svg path[stroke] {\r\n stroke: currentColor;\r\n}\r\n\r\n.icon svg path[fill] {\r\n fill: currentColor;\r\n}\r\n\r\n#icon-only svg {\r\n width: var(--spacing-3);\r\n height: var(--spacing-3);\r\n}\r\n\r\ndiv.md #icon-only svg {\r\n padding: 2px;\r\n}\r\n\r\n#icon-only {\r\n display: flex;\r\n padding: var(--spacing-none);\r\n justify-content: center;\r\n align-items: center;\r\n gap: var(--spacing-1);\r\n flex-shrink: 0;\r\n border-radius: var(--rounded-full);\r\n}\r\n";
522
+ const gbBadgeCss = "/* @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: flex;\r\n align-items: center;\r\n width: fit-content;\r\n}\r\n\r\ndiv {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 0px;\r\n flex-shrink: 0;\r\n text-align: center;\r\n}\r\n\r\n.label {\r\n padding: 2px;\r\n}\r\n\r\n.icon {\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\ndiv.sm {\r\n height: 22px;\r\n min-height: 22px;\r\n gap: 0.25rem;\r\n padding: var(--spacing-none) var(--spacing-2);\r\n}\r\n\r\ndiv.md {\r\n height: var(--spacing-6);\r\n min-height: var(--spacing-6);\r\n padding: var(--spacing-none) var(--spacing-2);\r\n gap: 0.38rem;\r\n}\r\n\r\ndiv.lg {\r\n height: 28px;\r\n min-height: 28px;\r\n gap: 0.38rem;\r\n padding: var(--spacing-none) var(--spacing-2);\r\n}\r\n\r\ndiv.pill_color {\r\n border-radius: var(--rounded-full);\r\n}\r\n\r\ndiv.pill_color.gray,\r\n.badge_color.gray {\r\n border: 1px solid var(--color-border-subtler, #e3e8ef);\r\n background: var(--color-background-gray-subtler, #eef2f6);\r\n color: var(--color-text, #4b5565) !important;\r\n}\r\n\r\n.pill_color.primary,\r\n.badge_color.primary {\r\n border: 1px solid var(--color-border-information-subtler, #c8e0f9);\r\n background: var(--color-background-information-subtlest, #e4f0fc);\r\n color: var(--color-text-brandDarkBlue, #212c65) !important;\r\n}\r\n\r\n.pill_color.error,\r\n.badge_color.error {\r\n border: 1px solid var(--color-border-danger-subtler, #fde3e5);\r\n background: var(--color-background-danger-subtlest, #fef1f2);\r\n color: var(--color-text-danger, #b51726) !important;\r\n}\r\n\r\n.pill_color.warning,\r\n.badge_color.warning {\r\n border: 1px solid var(--color-border-warning-subtler, #fef0c7);\r\n background: var(--color-background-warning-subtlest, #fffaeb);\r\n color: var(--color-text-warning, #dc6803) !important;\r\n}\r\n\r\n.pill_color.success,\r\n.badge_color.success {\r\n border: 1px solid var(--color-border-success-subtler, #dcfae6);\r\n background: var(--color-background-success-subtlest, #ecfdf3);\r\n color: var(--color-text-success, #079455) !important;\r\n}\r\n\r\n.pill_color.discovery,\r\n.badge_color.discovery {\r\n border: 1px solid var(--color-border-discovery-subtler, #e0f2fe);\r\n background: var(--color-background-discovery-subtlest, #f0f9ff);\r\n color: var(--color-text-discovery, #0086c9) !important;\r\n}\r\n\r\n.pill_color.information,\r\n.badge_color.information {\r\n border: 1px solid var(--color-border-information-subtler, #c8e0f9);\r\n background: var(--color-background-information-subtlest, #e4f0fc);\r\n color: var(--color-text-information, #064e94) !important;\r\n}\r\n\r\n.pill_color.pink,\r\n.badge_color.pink {\r\n border: 1px solid var(--color-border-pink-subtler, #fce7f6);\r\n background: var(--color-background-pink-subtlest, #fdf2fa);\r\n color: var(--color-text-pink, #dd2590) !important;\r\n}\r\n\r\n.pill_color.purple,\r\n.badge_color.purple {\r\n border: 1px solid var(--color-border-purple-subtler, #ebe9fe);\r\n background: var(--color-background-purple-subtlest, #f4f3ff);\r\n color: var(--color-text-purple, #6938ef);\r\n}\r\n\r\n.pill_color svg,\r\n.badge_color svg,\r\n.pill_outline svg,\r\n.badge_modern svg {\r\n width: var(--spacing-2);\r\n height: var(--spacing-2);\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.gray svg path[stroke] {\r\n stroke: var(--color-icon, #4b5565);\r\n}\r\n\r\n.gray svg path[fill] {\r\n fill: var(--color-icon, #4b5565);\r\n}\r\n\r\n.primary svg path[stroke] {\r\n stroke: var(--color-icon-brandDarkBlue, #212c65);\r\n}\r\n\r\n.primary svg path[fill] {\r\n fill: var(--color-icon-brandDarkBlue, #212c65);\r\n}\r\n\r\n.error svg path[stroke] {\r\n stroke: var(--color-icon-danger, #b51726);\r\n}\r\n\r\n.error svg path[fill] {\r\n fill: var(--color-icon-danger, #b51726);\r\n}\r\n\r\n.warning svg path[stroke] {\r\n stroke: var(--color-icon-warning, #dc6803);\r\n}\r\n\r\n.warning svg path[fill] {\r\n fill: var(--color-icon-warning, #dc6803);\r\n}\r\n\r\n.icon.success svg path[stroke] {\r\n stroke: var(--color-icon-success, #079455);\r\n}\r\n\r\n.success svg path[fill] {\r\n fill: var(--color-icon-success, #079455);\r\n}\r\n\r\n.discovery svg path[stroke] {\r\n stroke: var(--color-icon-discovery, #0086c9);\r\n}\r\n\r\n.discovery svg path[fill] {\r\n fill: var(--color-icon-discovery, #0086c9);\r\n}\r\n\r\n.information svg path[stroke] {\r\n stroke: var(--color-icon-information, #064e94);\r\n}\r\n\r\n.information svg path[fill] {\r\n fill: var(--color-icon-information, #064e94);\r\n}\r\n\r\n.pink svg path[stroke] {\r\n stroke: var(--color-icon-pink, #dd2590);\r\n}\r\n\r\n.pink svg path[fill] {\r\n fill: var(--color-icon-pink, #dd2590);\r\n}\r\n\r\n.purple svg path[stroke] {\r\n stroke: var(--color-icon-purple, #6938ef);\r\n}\r\n\r\n.purple svg path[fill] {\r\n fill: var(--color-icon-purple, #6938ef);\r\n}\r\n\r\n.pill_outline {\r\n border-radius: var(--rounded-full);\r\n}\r\n\r\n.pill_outline.gray {\r\n border: 1.5px solid var(--color-text, #4b5565);\r\n color: var(--color-text, #4b5565) !important;\r\n}\r\n\r\n.pill_outline.primary {\r\n border: 1.5px solid var(--color-text-brandDarkBlue, #212c65);\r\n color: var(--color-text-brandDarkBlue, #212c65) !important;\r\n}\r\n\r\n.pill_outline.error {\r\n border: 1.5px solid var(--color-text-danger, #b51726);\r\n color: var(--color-text-danger, #b51726) !important;\r\n}\r\n\r\n.pill_outline.warning {\r\n border: 1.5px solid var(--color-text-warning, #dc6803);\r\n color: var(--color-text-warning, #dc6803) !important;\r\n}\r\n\r\n.pill_outline.success {\r\n border: 1.5px solid var(--color-text-success, #079455);\r\n color: var(--color-text-success, #079455) !important;\r\n}\r\n\r\n.pill_outline.discovery {\r\n border: 1.5px solid var(--color-text-discovery, #0086c9);\r\n color: var(--color-text-discovery, #0086c9) !important;\r\n}\r\n\r\n.pill_outline.information {\r\n border: 1.5px solid var(--color-text-information, #064e94);\r\n}\r\n\r\n.pill_outline.pink {\r\n border: 1.5px solid var(--color-text-pink, #dd2590);\r\n color: var(--color-text-pink, #dd2590) !important;\r\n}\r\n\r\n.pill_outline.purple {\r\n border: 1.5px solid var(--color-text-purple, #6938ef);\r\n color: var(--color-text-purple, #6938ef);\r\n}\r\n\r\n.badge_color {\r\n border-radius: var(--rounded-xs);\r\n}\r\n\r\n.badge_modern {\r\n border-radius: var(--rounded-xs);\r\n border: 1px solid var(--color-border-subtler, #e3e8ef);\r\n box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\r\n color: var(--color-text, #4b5565);\r\n}\r\n\r\n.badge_modern svg path {\r\n stroke: inherit; /* Inherit color from the parent, but set in the component */\r\n fill: inherit;\r\n}\r\n\r\n.icon svg {\r\n width: var(--spacing-4);\r\n height: var(--spacing-4);\r\n margin-top: -2px;\r\n}\r\n\r\n.icon svg path[stroke] {\r\n stroke: currentColor;\r\n}\r\n\r\n.icon svg path[fill] {\r\n fill: currentColor;\r\n}\r\n\r\n#icon-only svg {\r\n width: var(--spacing-3);\r\n height: var(--spacing-3);\r\n}\r\n\r\ndiv.md #icon-only svg {\r\n padding: 2px;\r\n}\r\n\r\n#icon-only {\r\n display: flex;\r\n padding: var(--spacing-none);\r\n justify-content: center;\r\n align-items: center;\r\n gap: var(--spacing-1);\r\n flex-shrink: 0;\r\n border-radius: var(--rounded-full);\r\n}\r\n";
523
523
 
524
524
  const GbBadges = class {
525
525
  constructor(hostRef) {
@@ -6710,7 +6710,7 @@ const GbTag = class {
6710
6710
  }
6711
6711
  render() {
6712
6712
  const flagSwap = index.getAssetPath(`${this.flagSwap}`);
6713
- return (index.h("div", { key: '5312dffcca5e101a2bfcbe1d9cdfab1fcc7ba693', class: `container ${this.size}` }, index.h("div", { key: 'bbff853b9195aa3326c8fea81aeef3b07d6609f0', class: `content ${this.size}` }, this.checkbox && index.h("gb-tag-checkbox", { key: '252273315884bdad6044f2edee5e10edcc087b95', size: this.size }), this.icon === 'false' && index.h(index.Fragment, null), this.icon === 'country' && (index.h("div", { key: 'e8ff949bca03d1aa0c1ff8e6f134a8b3a014934d', class: "icon left-icon" }, index.h("img", { key: 'b3b8a53084dee6b390f78357125f2386f287c86d', src: flagSwap, alt: "Country Icon" }))), this.icon === 'avatar' && (index.h("gb-avatar", { key: '83baf8fc136214a5780a15f5035885bdbd82545d', class: "avatar-icon", size: "xxs", "status-icon": "false", text: false, color: "gray" }, index.h("slot", { key: 'f36dc3ebca760d65d798bdbc62fee4a05c5fc09e', name: "image", slot: "image" }))), this.icon === 'dot' && (index.h("svg", { key: '92434e3562212cb1eeb797bc94d0dff941c89dd9', xmlns: "http://www.w3.org/2000/svg", width: "8", height: "8", viewBox: "0 0 8 8", fill: "none" }, index.h("circle", { key: '2c520f0c9788bc0f233163f69ef8ec8f03dad1d7', cx: "4", cy: "4", r: "3", fill: "#17B26A" }))), index.h("div", { key: '5d66c8ce0724a511dafb016fc7ce92c185567d5a', class: "label" }, index.h("slot", { key: '1dcec82e6ca85dff89673949bca9e7d814f165db' })), this.action === 'count' && (index.h("gb-tag-count", { key: '45e47f0fff04baf3313dba90cd7b5ae9d183ce8d', size: this.size }, index.h("slot", { key: '0f14339df6793a05987dc689cdcee2c45afc67f1', slot: "count", name: "count" })))), this.action === 'X_close' && index.h("gb-tag-close", { key: '11caf59618262aa4cefbb039784a3fbb944f9415', size: this.size, onClick: () => this.onTagClose() })));
6713
+ return (index.h("div", { key: '9d43ee51526d478cee183407c65c27bb5b58333a', class: `container ${this.size} ${this.action}` }, index.h("div", { key: 'c3e2f4e52739b1e42b4d4f37bbf58c8c39dbf8c5', class: `content ${this.size}` }, this.checkbox && index.h("gb-tag-checkbox", { key: '19300153d97b62683aa2d2e0de4bafb52efee393', size: this.size }), this.icon === 'false' && index.h(index.Fragment, null), this.icon === 'country' && (index.h("div", { key: '7a5b5cb11de1a73ea192526f512db2278d546d2d', class: "icon left-icon" }, index.h("img", { key: 'fb0d34bd99ca1555f4beb0bb1134432ceb7e8310', src: flagSwap, alt: "Country Icon" }))), this.icon === 'avatar' && (index.h("gb-avatar", { key: 'f17de1f52a423e786680ebf9e1fc27107a5d8fea', class: "avatar-icon", size: "xxs", "status-icon": "false", text: false, color: "gray" }, index.h("slot", { key: 'bea710bf26113de60b6010a79258feed862af949', name: "image", slot: "image" }))), this.icon === 'dot' && (index.h("svg", { key: 'cf442041a93090229e7dcf4a14b1c0bcf26979c9', xmlns: "http://www.w3.org/2000/svg", width: "8", height: "8", viewBox: "0 0 8 8", fill: "none" }, index.h("circle", { key: 'cc9c2199f5d03b6de36f49f58cd3e8a1d85617b0', cx: "4", cy: "4", r: "3", fill: "#17B26A" }))), index.h("div", { key: 'b68c7180836f146696a07730230edbf50979e7eb', class: "label" }, index.h("slot", { key: 'a44884b1f5aca1c59020b3686053d6044d41639c' })), this.action === 'count' && (index.h("gb-tag-count", { key: '7c6e8424ffa6cc28ca55dc2f429dc199b881099d', size: this.size }, index.h("slot", { key: 'eabf3362b2b320558f7bf95201242c0ae5b80eec', slot: "count", name: "count" })))), this.action === 'X_close' && index.h("gb-tag-close", { key: '59cf5bb130adb0fdfff0438ef6b783e9fcf59ad8', size: this.size, onClick: () => this.onTagClose() })));
6714
6714
  }
6715
6715
  get el() { return index.getElement(this); }
6716
6716
  };