globuswebcomponents 2.18.4 → 2.18.6

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 (109) hide show
  1. package/dist/cjs/{gb-accordion-card_86.cjs.entry.js → gb-accordion-card_78.cjs.entry.js} +2631 -5900
  2. package/dist/cjs/gb-approval-modal.cjs.entry.js +5 -1
  3. package/dist/cjs/gb-approval-modal.entry.cjs.js.map +1 -1
  4. package/dist/cjs/gb-filter-modal.gb-pagination.gb-pagination-button-group-base.gb-pagination-number-base.gb-portal.gb-table-header.gb-toggle.gb-toggle-base.entry.cjs.js.map +1 -0
  5. package/dist/cjs/gb-filter-modal_8.cjs.entry.js +2253 -0
  6. package/dist/cjs/gb-table.cjs.entry.js +1240 -0
  7. package/dist/cjs/gb-table.entry.cjs.js.map +1 -0
  8. package/dist/cjs/globuscomponents.cjs.js +1 -1
  9. package/dist/cjs/loader.cjs.js +1 -1
  10. package/dist/cjs/reusableModels-_LRAKnsh.js.map +1 -1
  11. package/dist/collection/components/gb-approval-modal/gb-approval-modal.js +19 -1
  12. package/dist/collection/components/gb-approval-modal/gb-approval-modal.js.map +1 -1
  13. package/dist/collection/components/gb-date-picker/gb-date-picker.js +5 -2
  14. package/dist/collection/components/gb-date-picker/gb-date-picker.js.map +1 -1
  15. package/dist/collection/components/gb-detail-cell/gb-detail-cell.js +1 -1
  16. package/dist/collection/components/gb-detail-cell/gb-detail-cell.js.map +1 -1
  17. package/dist/collection/components/gb-input-field/gb-input-field.css +5 -5
  18. package/dist/collection/components/gb-input-field/gb-input-field.js +59 -16
  19. package/dist/collection/components/gb-input-field/gb-input-field.js.map +1 -1
  20. package/dist/collection/components/gb-rich-text/gb-rich-text.css +30 -6
  21. package/dist/collection/components/gb-rich-text/gb-rich-text.js +4 -4
  22. package/dist/collection/components/gb-rich-text/gb-rich-text.js.map +1 -1
  23. package/dist/collection/components/gb-rich-text/resizable-image.js +84 -0
  24. package/dist/collection/components/gb-rich-text/resizable-image.js.map +1 -0
  25. package/dist/collection/components/gb-sidebar/gb-sidebar.js +81 -28
  26. package/dist/collection/components/gb-sidebar/gb-sidebar.js.map +1 -1
  27. package/dist/collection/components/gb-table/gb-table.js +22 -16
  28. package/dist/collection/components/gb-table/gb-table.js.map +1 -1
  29. package/dist/collection/models/reusableModels.js.map +1 -1
  30. package/dist/components/gb-approval-modal.js +5 -1
  31. package/dist/components/gb-approval-modal.js.map +1 -1
  32. package/dist/components/gb-date-picker.js +1 -1
  33. package/dist/components/gb-detail-cell.js +1 -1
  34. package/dist/components/gb-detail-cell.js.map +1 -1
  35. package/dist/components/gb-filter-modal.js +1 -1
  36. package/dist/components/gb-header.js +1 -1
  37. package/dist/components/gb-input-dropdown-test.js +1 -1
  38. package/dist/components/gb-input-dropdown.js +1 -1
  39. package/dist/components/gb-input-field.js +1 -1
  40. package/dist/components/gb-pagination.js +1 -1
  41. package/dist/components/gb-rich-text.js +260 -177
  42. package/dist/components/gb-rich-text.js.map +1 -1
  43. package/dist/components/gb-sidebar.js +41 -27
  44. package/dist/components/gb-sidebar.js.map +1 -1
  45. package/dist/components/gb-table-header.js +1 -1
  46. package/dist/components/gb-table.js +1 -1
  47. package/dist/components/gb-wysiwyg-toolbar.js +1 -1
  48. package/dist/components/{p-DQBORnne.js → p-6aww0fa8.js} +3 -3
  49. package/dist/components/{p-DQBORnne.js.map → p-6aww0fa8.js.map} +1 -1
  50. package/dist/components/{p-BF-N7J8c.js → p-BiVW1b5P.js} +3 -3
  51. package/dist/components/{p-BF-N7J8c.js.map → p-BiVW1b5P.js.map} +1 -1
  52. package/dist/components/{p-DsN3hb33.js → p-CI0hL2FD.js} +4 -4
  53. package/dist/components/{p-DsN3hb33.js.map → p-CI0hL2FD.js.map} +1 -1
  54. package/dist/components/{p-CsyLoHd6.js → p-CTisVkYS.js} +7 -4
  55. package/dist/components/p-CTisVkYS.js.map +1 -0
  56. package/dist/components/{p-CbkRE1YA.js → p-D9DcC7pf.js} +21 -19
  57. package/dist/components/p-D9DcC7pf.js.map +1 -0
  58. package/dist/components/{p-CzePcMXF.js → p-DTmhoRrl.js} +4 -4
  59. package/dist/components/{p-CzePcMXF.js.map → p-DTmhoRrl.js.map} +1 -1
  60. package/dist/components/p-cHn6O-Kf.js.map +1 -1
  61. package/dist/components/{p-DtJfuVIF.js → p-dJxSwAlJ.js} +41 -18
  62. package/dist/components/p-dJxSwAlJ.js.map +1 -0
  63. package/dist/components/{p-CITjyuOY.js → p-gCnf8M-P.js} +4 -4
  64. package/dist/components/{p-CITjyuOY.js.map → p-gCnf8M-P.js.map} +1 -1
  65. package/dist/components/test-wrapper.js +7 -7
  66. package/dist/docs.json +130 -13
  67. package/dist/esm/{gb-accordion-card_86.entry.js → gb-accordion-card_78.entry.js} +2631 -5892
  68. package/dist/esm/gb-approval-modal.entry.js +5 -1
  69. package/dist/esm/gb-approval-modal.entry.js.map +1 -1
  70. package/dist/esm/gb-filter-modal.gb-pagination.gb-pagination-button-group-base.gb-pagination-number-base.gb-portal.gb-table-header.gb-toggle.gb-toggle-base.entry.js.map +1 -0
  71. package/dist/esm/gb-filter-modal_8.entry.js +2244 -0
  72. package/dist/esm/gb-table.entry.js +1238 -0
  73. package/dist/esm/gb-table.entry.js.map +1 -0
  74. package/dist/esm/globuscomponents.js +1 -1
  75. package/dist/esm/loader.js +1 -1
  76. package/dist/esm/reusableModels-cHn6O-Kf.js.map +1 -1
  77. package/dist/globuscomponents/gb-approval-modal.entry.esm.js.map +1 -1
  78. package/dist/globuscomponents/gb-filter-modal.gb-pagination.gb-pagination-button-group-base.gb-pagination-number-base.gb-portal.gb-table-header.gb-toggle.gb-toggle-base.entry.esm.js.map +1 -0
  79. package/dist/globuscomponents/gb-table.entry.esm.js.map +1 -0
  80. package/dist/globuscomponents/globuscomponents.esm.js +1 -1
  81. package/dist/globuscomponents/{p-80902514.entry.js → p-18789dc0.entry.js} +2 -2
  82. package/dist/globuscomponents/p-18789dc0.entry.js.map +1 -0
  83. package/dist/globuscomponents/{p-9f5a5998.entry.js → p-72b3be60.entry.js} +2 -2
  84. package/dist/globuscomponents/p-72b3be60.entry.js.map +1 -0
  85. package/dist/globuscomponents/p-7b3bf29c.entry.js +2 -0
  86. package/dist/globuscomponents/p-7b3bf29c.entry.js.map +1 -0
  87. package/dist/globuscomponents/p-cHn6O-Kf.js.map +1 -1
  88. package/dist/globuscomponents/p-dbc76ebb.entry.js +2 -0
  89. package/dist/globuscomponents/p-dbc76ebb.entry.js.map +1 -0
  90. package/dist/types/components/gb-approval-modal/gb-approval-modal.d.ts +2 -0
  91. package/dist/types/components/gb-input-field/gb-input-field.d.ts +2 -0
  92. package/dist/types/components/gb-rich-text/resizable-image.d.ts +1 -0
  93. package/dist/types/components/gb-sidebar/gb-sidebar.d.ts +3 -2
  94. package/dist/types/components/gb-table/gb-table.d.ts +2 -1
  95. package/dist/types/components.d.ts +41 -9
  96. package/dist/types/models/reusableModels.d.ts +1 -1
  97. package/package.json +1 -1
  98. package/dist/cjs/gb-detail-cell.cjs.entry.js +0 -94
  99. package/dist/cjs/gb-detail-cell.entry.cjs.js.map +0 -1
  100. package/dist/components/p-CbkRE1YA.js.map +0 -1
  101. package/dist/components/p-CsyLoHd6.js.map +0 -1
  102. package/dist/components/p-DtJfuVIF.js.map +0 -1
  103. package/dist/esm/gb-detail-cell.entry.js +0 -92
  104. package/dist/esm/gb-detail-cell.entry.js.map +0 -1
  105. package/dist/globuscomponents/gb-detail-cell.entry.esm.js.map +0 -1
  106. package/dist/globuscomponents/p-80902514.entry.js.map +0 -1
  107. package/dist/globuscomponents/p-9f5a5998.entry.js.map +0 -1
  108. package/dist/globuscomponents/p-fbf22caa.entry.js +0 -2
  109. package/dist/globuscomponents/p-fbf22caa.entry.js.map +0 -1
@@ -1,2 +1,2 @@
1
- import{r,d as n,h as e}from"./p-Bkubn3IB.js";const a="@import url('https://fonts.googleapis.com/css2?family=Sora&display=swap');\r\n/**\r\n * Global styles for portal-based dropdowns\r\n * Applied outside shadow DOM context\r\n */\r\n.portal_dropdown_wrapper {\r\n width: -moz-fit-content;\r\n width: fit-content;\r\n border-radius: var(--rounded-sm);\r\n border: 1px solid var(--color-border-subtler, #e3e8ef);\r\n background: var(--color-surface, #ffffff);\r\n box-shadow: var(--shadow-md);\r\n position: absolute;\r\n z-index: 9999; /* High z-index to appear above sticky columns */\r\n overflow: hidden;\r\n}\r\n.portal_dropdown_wrapper gb-dropdown-items-with-shortcut {\r\n display: block;\r\n width: 100%;\r\n}\r\n/* .portal_dropdown_wrapper gb-dropdown-items-with-shortcut:hover {\r\n background: var(--color-background-gray-subtler, #eef2f6);\r\n} */\r\n/* @import 'tailwind.css'; */\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 --yellow-25: #fffcf5;\r\n --yellow-50: #fffaeb;\r\n --yellow-100: #fef0c7;\r\n --yellow-200: #fedf89;\r\n --yellow-300: #fec84b;\r\n --yellow-400: #fdb022;\r\n --yellow-500: #f79009;\r\n --yellow-600: #dc6803;\r\n --yellow-700: #b54708;\r\n --yellow-800: #93370d;\r\n --yellow-900: #7a2e0e;\r\n --yellow-950: #4e1d09;\r\n\r\n /* success color palette */\r\n --green-25: #f6fef9;\r\n --green-50: #ecfdf3;\r\n --green-100: #dcfaeb;\r\n --green-200: #a9efc5;\r\n --green-300: #75e0a7;\r\n --green-400: #47cd89;\r\n --green-500: #17b26a;\r\n --green-600: #067f48;\r\n --green-700: #067647;\r\n --green-800: #085d3a;\r\n --green-900: #074d31;\r\n --green-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 /* Light-theme defaults so external hosts still resolve key tokens when data-theme is not set. */\r\n --color-text-bold: var(--gray-800);\r\n --color-text: var(--gray-600);\r\n --color-text-subtle: var(--gray-500);\r\n --color-text-disabled: var(--gray-400);\r\n --color-text-inverse: var(--base-white);\r\n\r\n --color-icon-bold: var(--gray-800);\r\n --color-icon: var(--gray-600);\r\n --color-icon-subtle: var(--gray-500);\r\n --color-icon-disabled: var(--gray-400);\r\n --color-icon-inverse: var(--base-white);\r\n\r\n --color-border-bold: var(--gray-500);\r\n --color-border: var(--gray-400);\r\n --color-border-subtle: var(--gray-300);\r\n --color-border-subtler: var(--gray-200);\r\n --color-border-disabled: var(--gray-200);\r\n --color-border-input: var(--gray-300);\r\n --color-border-focus: var(--gray-400);\r\n\r\n --color-background: var(--base-white);\r\n --color-background-card-bold: var(--gray-100);\r\n --color-background-card: var(--base-white);\r\n --color-background-input: var(--gray-400);\r\n --color-background-disabled: var(--gray-50);\r\n --color-background-btn-disabled: var(--gray-100);\r\n --color-background-selected: var(--blue-500);\r\n\r\n --color-link: var(--blue-500);\r\n --color-link-pressed: var(--blue-600);\r\n --color-link-visited: var(--lightBlue-600);\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(--yellow-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-warning-bold: var(--yellow-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-warning: var(--yellow-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-warning: var(--yellow-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-warning-subtle: var(--yellow-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-warning-subtle: var(--yellow-400);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-success-bold: var(--green-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-success-bold: var(--green-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-success: var(--green-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-success: var(--green-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-success-subtle: var(--green-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-success-subtle: var(--green-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(--yellow-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-warning-bold: var(--yellow-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-warning: var(--yellow-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-warning: var(--yellow-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-success-bold: var(--green-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-success-bold: var(--green-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-success: var(--green-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-success: var(--green-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(--yellow-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-warning-bold: var(--yellow-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-warning: var(--yellow-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-warning: var(--yellow-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-warning-subtle: var(--yellow-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-warning-subtle: var(--yellow-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-warning-subtler: var(--yellow-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-warning-subtler: var(--yellow-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-success-bold: var(--green-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-success-bold: var(--green-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-success: var(--green-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-success: var(--green-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-success-subtle: var(--green-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-success-subtle: var(--green-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-success-subtler: var(--green-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-success-subtler: var(--green-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-bolder: var(--gray-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-card-bolder: 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(--yellow-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-warning-bold: var(--yellow-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-warning: var(--yellow-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-warning: var(--yellow-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-warning-subtle: var(--yellow-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-warning-subtle: var(--yellow-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-warning-subtler: var(--yellow-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-warning-subtler: var(--yellow-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-warning-subtlest: var(--yellow-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-warning-subtlest: var(--yellow-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-success-bold: var(--green-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-success-bold: var(--green-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-success: var(--green-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-success: var(--green-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-success-subtle: var(--green-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-success-subtle: var(--green-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-success-subtler: var(--green-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-success-subtler: var(--green-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-success-subtlest: var(--green-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-success-subtlest: var(--green-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/* -----------------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.shadow-xs {\r\n box-shadow: var(--shadow-xs);\r\n}\r\n.shadow-sm {\r\n box-shadow: var(--shadow-sm);\r\n}\r\n.shadow-md {\r\n box-shadow: var(--shadow-md);\r\n}\r\n.shadow-lg {\r\n box-shadow: var(--shadow-lg);\r\n}\r\n.shadow-xl {\r\n box-shadow: var(--shadow-xl);\r\n}\r\n.shadow-2xl {\r\n box-shadow: var(--shadow-2xl);\r\n}\r\n.shadow-3xl {\r\n box-shadow: var(--shadow-3xl);\r\n}\r\n.blur-sm {\r\n backdrop-filter: var(--blur-sm);\r\n}\r\n.blur-md {\r\n backdrop-filter: var(--blur-md);\r\n}\r\n.blur-lg {\r\n backdrop-filter: var(--blur-lg);\r\n}\r\n.blur-xl {\r\n backdrop-filter: var(--blur-xl);\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.gradient-gray-600-to-500-90d {\r\n background: var(--gradient-gray-600-to-500-90d);\r\n}\r\n.gradient-gray-700-to-600-45d {\r\n background: var(--gradient-gray-700-to-600-45d);\r\n}\r\n.gradient-gray-800-to-600-45d {\r\n background: var(--gradient-gray-800-to-600-45d);\r\n}\r\n.gradient-gray-800-to-600-90d {\r\n background: var(--gradient-gray-800-to-600-90d);\r\n}\r\n.gradient-gray-800-to-700265-d {\r\n background: var(--gradient-gray-800-to-700265-d);\r\n}\r\n.gradient-gray-900-to-600-45d {\r\n background: var(--gradient-gray-900-to-600-45d);\r\n}\r\n.gradient-darkBlue-500-to-400-90d {\r\n background: var(--gradient-darkBlue-500-to-400-90d);\r\n}\r\n.gradient-darkBlue-700-to-500-45d {\r\n background: var(--gradient-darkBlue-700-to-500-45d);\r\n}\r\n.gradient-darkBlue-700-to-400-45d {\r\n background: var(--gradient-darkBlue-700-to-400-45d);\r\n}\r\n.gradient-darkBlue-800-to-500-90d {\r\n background: var(--gradient-darkBlue-800-to-500-90d);\r\n}\r\n.gradient-darkBlue-800-to-600265-d {\r\n background: var(--gradient-darkBlue-800-to-600265-d);\r\n}\r\n.gradient-darkBlue-900-to-600-45d {\r\n background: var(--gradient-darkBlue-900-to-600-45d);\r\n}\r\n.gradient-red-500-to-400-90d {\r\n background: var(--gradient-red-500-to-400-90d);\r\n}\r\n.gradient-red-700-to-500-45d {\r\n background: var(--gradient-red-700-to-500-45d);\r\n}\r\n.gradient-red-700-to-400-45d {\r\n background: var(--gradient-red-700-to-400-45d);\r\n}\r\n.gradient-red-800-to-500-90d {\r\n background: var(--gradient-red-800-to-500-90d);\r\n}\r\n.gradient-red-800-to-600265-d {\r\n background: var(--gradient-red-800-to-600265-d);\r\n}\r\n.gradient-red-900-to-600-45d {\r\n background: var(--gradient-red-900-to-600-45d);\r\n}\r\n.gradient-blue-500-to-400-90d {\r\n background: var(--gradient-blue-500-to-400-90d);\r\n}\r\n.gradient-blue-700-to-500-45d {\r\n background: var(--gradient-blue-700-to-500-45d);\r\n}\r\n.gradient-blue-700-to-400-45d {\r\n background: var(--gradient-blue-700-to-400-45d);\r\n}\r\n.gradient-blue-800-to-500-90d {\r\n background: var(--gradient-blue-800-to-500-90d);\r\n}\r\n.gradient-blue-800-to-600265-d {\r\n background: var(--gradient-blue-800-to-600265-d);\r\n}\r\n.gradient-blue-900-to-600-45d {\r\n background: var(--gradient-blue-900-to-600-45d);\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 --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/* Typography Styles */\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/* 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/* 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.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.display-2xl-bold::before,\r\n.display-2xl-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n.display-2xl-bold::before {\r\n margin-bottom: -0.135em;\r\n}\r\n.display-2xl-bold::after {\r\n margin-top: -0.205em;\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.display-2xl-semi-bold::before,\r\n.display-2xl-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n.display-2xl-semi-bold::before {\r\n margin-bottom: -0.135em;\r\n}\r\n.display-2xl-semi-bold::after {\r\n margin-top: -0.205em;\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.display-xl-bold::before,\r\n.display-xl-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n.display-xl-bold::before {\r\n margin-bottom: -0.145em;\r\n}\r\n.display-xl-bold::after {\r\n margin-top: -0.215em;\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.display-xl-semi-bold::before,\r\n.display-xl-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n.display-xl-semi-bold::before {\r\n margin-bottom: -0.145em;\r\n}\r\n.display-xl-semi-bold::after {\r\n margin-top: -0.215em;\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.display-lg-bold::before,\r\n.display-lg-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n.display-lg-bold::before {\r\n margin-bottom: -0.015em;\r\n}\r\n.display-lg-bold::after {\r\n margin-top: -0.095em;\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.display-lg-semi-bold::before,\r\n.display-lg-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n.display-lg-semi-bold::before {\r\n margin-bottom: -0.015em;\r\n}\r\n.display-lg-semi-bold::after {\r\n margin-top: -0.095em;\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.display-md-bold::before,\r\n.display-md-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n.display-md-bold::before {\r\n margin-bottom: -0.195em;\r\n}\r\n.display-md-bold::after {\r\n margin-top: -0.255em;\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.display-md-semi-bold::before,\r\n.display-md-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n.display-md-semi-bold::before {\r\n margin-bottom: -0.195em;\r\n}\r\n.display-md-semi-bold::after {\r\n margin-top: -0.255em;\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.display-sm-bold::before,\r\n.display-sm-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n.display-sm-bold::before {\r\n margin-bottom: -0.195em;\r\n}\r\n.display-sm-bold::after {\r\n margin-top: -0.255em;\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.display-sm-semi-bold::before,\r\n.display-sm-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n.display-sm-semi-bold::before {\r\n margin-bottom: -0.195em;\r\n}\r\n.display-sm-semi-bold::after {\r\n margin-top: -0.255em;\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.display-xs-bold::before,\r\n.display-xs-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n.display-xs-bold::before {\r\n margin-bottom: -0.199em;\r\n}\r\n.display-xs-bold::after {\r\n margin-top: -0.195em; /* Continue from here */\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.display-xs-semi-bold::before,\r\n.display-xs-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n.display-xs-semi-bold::before {\r\n margin-bottom: -0.259em;\r\n}\r\n.display-xs-semi-bold::after {\r\n margin-top: -0.295em;\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.text-xl-bold::before,\r\n.text-xl-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n.text-xl-bold::before {\r\n margin-bottom: -0.329em;\r\n}\r\n.text-xl-bold::after {\r\n margin-top: -0.359em;\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.text-xl-semi-bold::before,\r\n.text-xl-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n.text-xl-semi-bold::before {\r\n margin-bottom: -0.329em;\r\n}\r\n.text-xl-semi-bold::after {\r\n margin-top: -0.359em;\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.text-xl-medium::before,\r\n.text-xl-medium::after {\r\n content: '';\r\n display: table;\r\n}\r\n.text-xl-medium::before {\r\n margin-bottom: -0.339em;\r\n}\r\n.text-xl-medium::after {\r\n margin-top: -0.399em;\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.text-xl-regular::before,\r\n.text-xl-regular::after {\r\n content: '';\r\n display: table;\r\n}\r\n.text-xl-regular::before {\r\n margin-bottom: -0.339em;\r\n}\r\n.text-xl-regular::after {\r\n margin-top: -0.399em;\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.text-lg-bold::before,\r\n.text-lg-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n.text-lg-bold::before {\r\n margin-bottom: -0.339em;\r\n}\r\n.text-lg-bold::after {\r\n margin-top: -0.399em;\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.text-lg-semi-bold::before,\r\n.text-lg-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n.text-lg-semi-bold::before {\r\n margin-bottom: -0.339em;\r\n}\r\n.text-lg-semi-bold::after {\r\n margin-top: -0.399em;\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.text-lg-medium::before,\r\n.text-lg-medium::after {\r\n content: '';\r\n display: table;\r\n}\r\n.text-lg-medium::before {\r\n margin-bottom: -0.349em;\r\n}\r\n.text-lg-medium::after {\r\n margin-top: -0.389em;\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.text-lg-regular::before,\r\n.text-lg-regular::after {\r\n content: '';\r\n display: table;\r\n}\r\n.text-lg-regular::before {\r\n margin-bottom: -0.349em;\r\n}\r\n.text-lg-regular::after {\r\n margin-top: -0.389em;\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.text-md-bold::before,\r\n.text-md-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n.text-md-bold::before {\r\n margin-bottom: -0.349em;\r\n}\r\n.text-md-bold::after {\r\n margin-top: -0.389em;\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.text-md-semi-bold::before,\r\n.text-md-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n.text-md-semi-bold::before {\r\n margin-bottom: -0.349em;\r\n}\r\n.text-md-semi-bold::after {\r\n margin-top: -0.389em;\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.text-md-medium::before,\r\n.text-md-medium::after {\r\n content: '';\r\n display: table;\r\n}\r\n.text-md-medium::before {\r\n margin-bottom: -0.349em;\r\n}\r\n.text-md-medium::after {\r\n margin-top: -0.389em;\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.text-md-regular::before,\r\n.text-md-regular::after {\r\n content: '';\r\n display: table;\r\n}\r\n.text-md-regular::before {\r\n margin-bottom: -0.349em;\r\n}\r\n.text-md-regular::after {\r\n margin-top: -0.389em;\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.text-sm-bold::before,\r\n.text-sm-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n.text-sm-bold::before {\r\n margin-bottom: -0.299em;\r\n}\r\n.text-sm-bold::after {\r\n margin-top: -0.349em;\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.text-sm-semi-bold::before,\r\n.text-sm-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n.text-sm-semi-bold::before {\r\n margin-bottom: -0.299em;\r\n}\r\n.text-sm-semi-bold::after {\r\n margin-top: -0.349em;\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.text-sm-medium::before,\r\n.text-sm-medium::after {\r\n content: '';\r\n display: table;\r\n}\r\n.text-sm-medium::before {\r\n margin-bottom: -0.299em;\r\n}\r\n.text-sm-medium::after {\r\n margin-top: -0.299em;\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.text-sm-regular::before,\r\n.text-sm-regular::after {\r\n content: '';\r\n display: table;\r\n}\r\n.text-sm-regular::before {\r\n margin-bottom: -0.299em;\r\n}\r\n.text-sm-regular::after {\r\n margin-top: -0.299em;\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.text-xs-bold::before,\r\n.text-xs-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n.text-xs-bold::before {\r\n margin-bottom: -0.291em;\r\n}\r\n.text-xs-bold::after {\r\n margin-top: -0.416em;\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.text-xs-semi-bold::before,\r\n.text-xs-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n.text-xs-semi-bold::before {\r\n margin-bottom: -0.321em;\r\n}\r\n.text-xs-semi-bold::after {\r\n margin-top: -0.416em;\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.text-xs-medium::before,\r\n.text-xs-medium::after {\r\n content: '';\r\n display: table;\r\n}\r\n.text-xs-medium::before {\r\n margin-bottom: -0.285em;\r\n}\r\n.text-xs-medium::after {\r\n margin-top: -0.396em;\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.text-xs-regular::before,\r\n.text-xs-regular::after {\r\n content: '';\r\n display: table;\r\n}\r\n.text-xs-regular::before {\r\n margin-bottom: -0.291em;\r\n}\r\n.text-xs-regular::after {\r\n margin-top: -0.396em;\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.text-xxs-bold::before,\r\n.text-xxs-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n.text-xxs-bold::before {\r\n margin-bottom: -0.291em;\r\n}\r\n.text-xxs-bold::after {\r\n margin-top: -0.416em;\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.text-xxs-semi-bold::before,\r\n.text-xxs-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n.text-xxs-semi-bold::before {\r\n margin-bottom: -0.291em;\r\n}\r\n.text-xxs-semi-bold::after {\r\n margin-top: -0.416em;\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.text-xxs-medium::before,\r\n.text-xxs-medium::after {\r\n content: '';\r\n display: table;\r\n}\r\n.text-xxs-medium::before {\r\n margin-bottom: -0.291em;\r\n}\r\n.text-xxs-medium::after {\r\n margin-top: -0.416em;\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.text-xxs-regular::before,\r\n.text-xxs-regular::after {\r\n content: '';\r\n display: table;\r\n}\r\n.text-xxs-regular::before {\r\n margin-bottom: -0.291em;\r\n}\r\n.text-xxs-regular::after {\r\n margin-top: -0.416em;\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.approval-modal{\r\n width: 25.1875rem;\r\n border-radius: 0.75rem;\r\n background-color:var(--color-background-card, #FFFFFF); \r\n position: relative;\r\n overflow: hidden;\r\n}\r\ngb-button-close{\r\n position: absolute;\r\n right: 0.75rem;\r\n top: 0.59375rem;\r\n}\r\n.modal-top{\r\n padding: var(--spacing-6);\r\n border-bottom: 1px solid var(--color-border-subtler, #E3E8EF);\r\n}\r\n.modal-content{\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--spacing-3);\r\n padding: var(--spacing-6);\r\n}\r\n.heading{\r\n color: var(--color-text-subtle, #697586);\r\n}\r\n.modal-row{\r\n border: 1px solid var(--color-border-subtler, #E3E8EF);\r\n border-radius: var(--rounded-sm);\r\n width: 100%;\r\n padding: var(--spacing-4) var(--spacing-4) var(--spacing-4) var(--spacing-4);\r\n gap: var(--spacing-2);\r\n display: flex;\r\n flex-direction: column;\r\n box-sizing: border-box;\r\n}\r\n.modal-textarea{\r\n /* border-radius: 5px; */\r\n width: 100%;\r\n box-sizing: border-box;\r\n}";const t=class{constructor(e){r(this,e);this.primaryButtonClicked=n(this,"primaryButtonClicked");this.secondaryButtonClicked=n(this,"secondaryButtonClicked");this.textareaValueChanged=n(this,"textareaValueChanged");this.showDecision=true;this.badgeType="badge_color";this.badgeIcon="dot";this.badgeLabel="";this.firstButtonText="";this.secondButtonText="";this.firstButtonState="default";this.headerText="";this.textareaLabel=""}emitTextareaValue(r){this.textareaValueChanged.emit(r.detail)}render(){return e("div",{key:"d5b9de38472f4cbe1bc513d23c52f3985ebd9ac8",class:"approval-modal shadow-sm"},e("gb-modal-header",{key:"7463429f3f020f7db554a6301bfaba095ea2dc2a","close-button-position":"right",text:this.headerText}),e("div",{key:"bf5295ae1426b39fb7cab6dfd9c05adb7ad62398",class:"modal-content"},this.showDecision&&e("div",{key:"ce49b364291f84b0483ed8a6d61caca008f79642",class:"modal-row"},e("p",{key:"afa3c290521c02ff3b29ad43075590e5d0ed6cb6",class:"text-sm-regular heading"},"Reviewer's decision"),e("gb-badge",{key:"7c5e541237af87df7e65b048faf64d6f33ec7dd7",size:"sm",type:this.badgeType,icon:this.badgeIcon,color:this.badgeColor},e("p",{key:"37eaaa45983583b5682c1b5cc618c29fcf266d8a"},this.badgeLabel))),e("div",{key:"a3ebdb7b672441fb4b3c57360ca22107722e1ce9",class:"modal-textarea"},e("gb-textarea-input-field",{key:"8adbf3f7cc2d3ada739877f07932c6060f6a9ebd",idOfInput:"default",state:"default",type:"default","show-label":true,label:this.textareaLabel||"Reason","show-hint-text":false,destructive:false,"placeholder-text":"Enter comments here",onTextareaValueChanged:this.emitTextareaValue.bind(this)}))),e("gb-modal-action",{key:"cfddebf7ac1554a60aadc27317f476e93f63cafc","action-type":"double","first-button-state":this.firstButtonState,"first-button-text":this.firstButtonText,"second-button-text":this.secondButtonText,onFirstButtonClicked:()=>this.primaryButtonClicked.emit(),onSecondButtonClicked:()=>this.secondaryButtonClicked.emit()}))}};t.style=a;export{t as gb_approval_modal};
2
- //# sourceMappingURL=p-80902514.entry.js.map
1
+ import{r,d as n,h as e}from"./p-Bkubn3IB.js";const a="@import url('https://fonts.googleapis.com/css2?family=Sora&display=swap');\r\n/**\r\n * Global styles for portal-based dropdowns\r\n * Applied outside shadow DOM context\r\n */\r\n.portal_dropdown_wrapper {\r\n width: -moz-fit-content;\r\n width: fit-content;\r\n border-radius: var(--rounded-sm);\r\n border: 1px solid var(--color-border-subtler, #e3e8ef);\r\n background: var(--color-surface, #ffffff);\r\n box-shadow: var(--shadow-md);\r\n position: absolute;\r\n z-index: 9999; /* High z-index to appear above sticky columns */\r\n overflow: hidden;\r\n}\r\n.portal_dropdown_wrapper gb-dropdown-items-with-shortcut {\r\n display: block;\r\n width: 100%;\r\n}\r\n/* .portal_dropdown_wrapper gb-dropdown-items-with-shortcut:hover {\r\n background: var(--color-background-gray-subtler, #eef2f6);\r\n} */\r\n/* @import 'tailwind.css'; */\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 --yellow-25: #fffcf5;\r\n --yellow-50: #fffaeb;\r\n --yellow-100: #fef0c7;\r\n --yellow-200: #fedf89;\r\n --yellow-300: #fec84b;\r\n --yellow-400: #fdb022;\r\n --yellow-500: #f79009;\r\n --yellow-600: #dc6803;\r\n --yellow-700: #b54708;\r\n --yellow-800: #93370d;\r\n --yellow-900: #7a2e0e;\r\n --yellow-950: #4e1d09;\r\n\r\n /* success color palette */\r\n --green-25: #f6fef9;\r\n --green-50: #ecfdf3;\r\n --green-100: #dcfaeb;\r\n --green-200: #a9efc5;\r\n --green-300: #75e0a7;\r\n --green-400: #47cd89;\r\n --green-500: #17b26a;\r\n --green-600: #067f48;\r\n --green-700: #067647;\r\n --green-800: #085d3a;\r\n --green-900: #074d31;\r\n --green-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 /* Light-theme defaults so external hosts still resolve key tokens when data-theme is not set. */\r\n --color-text-bold: var(--gray-800);\r\n --color-text: var(--gray-600);\r\n --color-text-subtle: var(--gray-500);\r\n --color-text-disabled: var(--gray-400);\r\n --color-text-inverse: var(--base-white);\r\n\r\n --color-icon-bold: var(--gray-800);\r\n --color-icon: var(--gray-600);\r\n --color-icon-subtle: var(--gray-500);\r\n --color-icon-disabled: var(--gray-400);\r\n --color-icon-inverse: var(--base-white);\r\n\r\n --color-border-bold: var(--gray-500);\r\n --color-border: var(--gray-400);\r\n --color-border-subtle: var(--gray-300);\r\n --color-border-subtler: var(--gray-200);\r\n --color-border-disabled: var(--gray-200);\r\n --color-border-input: var(--gray-300);\r\n --color-border-focus: var(--gray-400);\r\n\r\n --color-background: var(--base-white);\r\n --color-background-card-bold: var(--gray-100);\r\n --color-background-card: var(--base-white);\r\n --color-background-input: var(--gray-400);\r\n --color-background-disabled: var(--gray-50);\r\n --color-background-btn-disabled: var(--gray-100);\r\n --color-background-selected: var(--blue-500);\r\n\r\n --color-link: var(--blue-500);\r\n --color-link-pressed: var(--blue-600);\r\n --color-link-visited: var(--lightBlue-600);\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(--yellow-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-warning-bold: var(--yellow-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-warning: var(--yellow-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-warning: var(--yellow-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-warning-subtle: var(--yellow-500);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-warning-subtle: var(--yellow-400);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-success-bold: var(--green-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-success-bold: var(--green-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-success: var(--green-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-success: var(--green-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-text-success-subtle: var(--green-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-text-success-subtle: var(--green-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(--yellow-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-warning-bold: var(--yellow-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-warning: var(--yellow-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-warning: var(--yellow-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-success-bold: var(--green-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-success-bold: var(--green-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-icon-success: var(--green-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-icon-success: var(--green-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(--yellow-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-warning-bold: var(--yellow-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-warning: var(--yellow-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-warning: var(--yellow-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-warning-subtle: var(--yellow-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-warning-subtle: var(--yellow-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-warning-subtler: var(--yellow-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-warning-subtler: var(--yellow-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-success-bold: var(--green-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-success-bold: var(--green-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-success: var(--green-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-success: var(--green-300);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-success-subtle: var(--green-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-success-subtle: var(--green-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-border-success-subtler: var(--green-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-border-success-subtler: var(--green-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-bolder: var(--gray-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-card-bolder: 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(--yellow-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-warning-bold: var(--yellow-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-warning: var(--yellow-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-warning: var(--yellow-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-warning-subtle: var(--yellow-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-warning-subtle: var(--yellow-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-warning-subtler: var(--yellow-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-warning-subtler: var(--yellow-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-warning-subtlest: var(--yellow-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-warning-subtlest: var(--yellow-950);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-success-bold: var(--green-800);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-success-bold: var(--green-100);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-success: var(--green-600);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-success: var(--green-200);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-success-subtle: var(--green-200);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-success-subtle: var(--green-800);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-success-subtler: var(--green-100);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-success-subtler: var(--green-900);\r\n }\r\n\r\n [data-theme='light'] {\r\n --color-background-success-subtlest: var(--green-50);\r\n }\r\n\r\n [data-theme='dark'] {\r\n --color-background-success-subtlest: var(--green-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/* -----------------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.shadow-xs {\r\n box-shadow: var(--shadow-xs);\r\n}\r\n.shadow-sm {\r\n box-shadow: var(--shadow-sm);\r\n}\r\n.shadow-md {\r\n box-shadow: var(--shadow-md);\r\n}\r\n.shadow-lg {\r\n box-shadow: var(--shadow-lg);\r\n}\r\n.shadow-xl {\r\n box-shadow: var(--shadow-xl);\r\n}\r\n.shadow-2xl {\r\n box-shadow: var(--shadow-2xl);\r\n}\r\n.shadow-3xl {\r\n box-shadow: var(--shadow-3xl);\r\n}\r\n.blur-sm {\r\n backdrop-filter: var(--blur-sm);\r\n}\r\n.blur-md {\r\n backdrop-filter: var(--blur-md);\r\n}\r\n.blur-lg {\r\n backdrop-filter: var(--blur-lg);\r\n}\r\n.blur-xl {\r\n backdrop-filter: var(--blur-xl);\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.gradient-gray-600-to-500-90d {\r\n background: var(--gradient-gray-600-to-500-90d);\r\n}\r\n.gradient-gray-700-to-600-45d {\r\n background: var(--gradient-gray-700-to-600-45d);\r\n}\r\n.gradient-gray-800-to-600-45d {\r\n background: var(--gradient-gray-800-to-600-45d);\r\n}\r\n.gradient-gray-800-to-600-90d {\r\n background: var(--gradient-gray-800-to-600-90d);\r\n}\r\n.gradient-gray-800-to-700265-d {\r\n background: var(--gradient-gray-800-to-700265-d);\r\n}\r\n.gradient-gray-900-to-600-45d {\r\n background: var(--gradient-gray-900-to-600-45d);\r\n}\r\n.gradient-darkBlue-500-to-400-90d {\r\n background: var(--gradient-darkBlue-500-to-400-90d);\r\n}\r\n.gradient-darkBlue-700-to-500-45d {\r\n background: var(--gradient-darkBlue-700-to-500-45d);\r\n}\r\n.gradient-darkBlue-700-to-400-45d {\r\n background: var(--gradient-darkBlue-700-to-400-45d);\r\n}\r\n.gradient-darkBlue-800-to-500-90d {\r\n background: var(--gradient-darkBlue-800-to-500-90d);\r\n}\r\n.gradient-darkBlue-800-to-600265-d {\r\n background: var(--gradient-darkBlue-800-to-600265-d);\r\n}\r\n.gradient-darkBlue-900-to-600-45d {\r\n background: var(--gradient-darkBlue-900-to-600-45d);\r\n}\r\n.gradient-red-500-to-400-90d {\r\n background: var(--gradient-red-500-to-400-90d);\r\n}\r\n.gradient-red-700-to-500-45d {\r\n background: var(--gradient-red-700-to-500-45d);\r\n}\r\n.gradient-red-700-to-400-45d {\r\n background: var(--gradient-red-700-to-400-45d);\r\n}\r\n.gradient-red-800-to-500-90d {\r\n background: var(--gradient-red-800-to-500-90d);\r\n}\r\n.gradient-red-800-to-600265-d {\r\n background: var(--gradient-red-800-to-600265-d);\r\n}\r\n.gradient-red-900-to-600-45d {\r\n background: var(--gradient-red-900-to-600-45d);\r\n}\r\n.gradient-blue-500-to-400-90d {\r\n background: var(--gradient-blue-500-to-400-90d);\r\n}\r\n.gradient-blue-700-to-500-45d {\r\n background: var(--gradient-blue-700-to-500-45d);\r\n}\r\n.gradient-blue-700-to-400-45d {\r\n background: var(--gradient-blue-700-to-400-45d);\r\n}\r\n.gradient-blue-800-to-500-90d {\r\n background: var(--gradient-blue-800-to-500-90d);\r\n}\r\n.gradient-blue-800-to-600265-d {\r\n background: var(--gradient-blue-800-to-600265-d);\r\n}\r\n.gradient-blue-900-to-600-45d {\r\n background: var(--gradient-blue-900-to-600-45d);\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 --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/* Typography Styles */\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/* 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/* 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.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.display-2xl-bold::before,\r\n.display-2xl-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n.display-2xl-bold::before {\r\n margin-bottom: -0.135em;\r\n}\r\n.display-2xl-bold::after {\r\n margin-top: -0.205em;\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.display-2xl-semi-bold::before,\r\n.display-2xl-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n.display-2xl-semi-bold::before {\r\n margin-bottom: -0.135em;\r\n}\r\n.display-2xl-semi-bold::after {\r\n margin-top: -0.205em;\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.display-xl-bold::before,\r\n.display-xl-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n.display-xl-bold::before {\r\n margin-bottom: -0.145em;\r\n}\r\n.display-xl-bold::after {\r\n margin-top: -0.215em;\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.display-xl-semi-bold::before,\r\n.display-xl-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n.display-xl-semi-bold::before {\r\n margin-bottom: -0.145em;\r\n}\r\n.display-xl-semi-bold::after {\r\n margin-top: -0.215em;\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.display-lg-bold::before,\r\n.display-lg-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n.display-lg-bold::before {\r\n margin-bottom: -0.015em;\r\n}\r\n.display-lg-bold::after {\r\n margin-top: -0.095em;\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.display-lg-semi-bold::before,\r\n.display-lg-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n.display-lg-semi-bold::before {\r\n margin-bottom: -0.015em;\r\n}\r\n.display-lg-semi-bold::after {\r\n margin-top: -0.095em;\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.display-md-bold::before,\r\n.display-md-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n.display-md-bold::before {\r\n margin-bottom: -0.195em;\r\n}\r\n.display-md-bold::after {\r\n margin-top: -0.255em;\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.display-md-semi-bold::before,\r\n.display-md-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n.display-md-semi-bold::before {\r\n margin-bottom: -0.195em;\r\n}\r\n.display-md-semi-bold::after {\r\n margin-top: -0.255em;\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.display-sm-bold::before,\r\n.display-sm-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n.display-sm-bold::before {\r\n margin-bottom: -0.195em;\r\n}\r\n.display-sm-bold::after {\r\n margin-top: -0.255em;\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.display-sm-semi-bold::before,\r\n.display-sm-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n.display-sm-semi-bold::before {\r\n margin-bottom: -0.195em;\r\n}\r\n.display-sm-semi-bold::after {\r\n margin-top: -0.255em;\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.display-xs-bold::before,\r\n.display-xs-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n.display-xs-bold::before {\r\n margin-bottom: -0.199em;\r\n}\r\n.display-xs-bold::after {\r\n margin-top: -0.195em; /* Continue from here */\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.display-xs-semi-bold::before,\r\n.display-xs-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n.display-xs-semi-bold::before {\r\n margin-bottom: -0.259em;\r\n}\r\n.display-xs-semi-bold::after {\r\n margin-top: -0.295em;\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.text-xl-bold::before,\r\n.text-xl-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n.text-xl-bold::before {\r\n margin-bottom: -0.329em;\r\n}\r\n.text-xl-bold::after {\r\n margin-top: -0.359em;\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.text-xl-semi-bold::before,\r\n.text-xl-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n.text-xl-semi-bold::before {\r\n margin-bottom: -0.329em;\r\n}\r\n.text-xl-semi-bold::after {\r\n margin-top: -0.359em;\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.text-xl-medium::before,\r\n.text-xl-medium::after {\r\n content: '';\r\n display: table;\r\n}\r\n.text-xl-medium::before {\r\n margin-bottom: -0.339em;\r\n}\r\n.text-xl-medium::after {\r\n margin-top: -0.399em;\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.text-xl-regular::before,\r\n.text-xl-regular::after {\r\n content: '';\r\n display: table;\r\n}\r\n.text-xl-regular::before {\r\n margin-bottom: -0.339em;\r\n}\r\n.text-xl-regular::after {\r\n margin-top: -0.399em;\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.text-lg-bold::before,\r\n.text-lg-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n.text-lg-bold::before {\r\n margin-bottom: -0.339em;\r\n}\r\n.text-lg-bold::after {\r\n margin-top: -0.399em;\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.text-lg-semi-bold::before,\r\n.text-lg-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n.text-lg-semi-bold::before {\r\n margin-bottom: -0.339em;\r\n}\r\n.text-lg-semi-bold::after {\r\n margin-top: -0.399em;\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.text-lg-medium::before,\r\n.text-lg-medium::after {\r\n content: '';\r\n display: table;\r\n}\r\n.text-lg-medium::before {\r\n margin-bottom: -0.349em;\r\n}\r\n.text-lg-medium::after {\r\n margin-top: -0.389em;\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.text-lg-regular::before,\r\n.text-lg-regular::after {\r\n content: '';\r\n display: table;\r\n}\r\n.text-lg-regular::before {\r\n margin-bottom: -0.349em;\r\n}\r\n.text-lg-regular::after {\r\n margin-top: -0.389em;\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.text-md-bold::before,\r\n.text-md-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n.text-md-bold::before {\r\n margin-bottom: -0.349em;\r\n}\r\n.text-md-bold::after {\r\n margin-top: -0.389em;\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.text-md-semi-bold::before,\r\n.text-md-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n.text-md-semi-bold::before {\r\n margin-bottom: -0.349em;\r\n}\r\n.text-md-semi-bold::after {\r\n margin-top: -0.389em;\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.text-md-medium::before,\r\n.text-md-medium::after {\r\n content: '';\r\n display: table;\r\n}\r\n.text-md-medium::before {\r\n margin-bottom: -0.349em;\r\n}\r\n.text-md-medium::after {\r\n margin-top: -0.389em;\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.text-md-regular::before,\r\n.text-md-regular::after {\r\n content: '';\r\n display: table;\r\n}\r\n.text-md-regular::before {\r\n margin-bottom: -0.349em;\r\n}\r\n.text-md-regular::after {\r\n margin-top: -0.389em;\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.text-sm-bold::before,\r\n.text-sm-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n.text-sm-bold::before {\r\n margin-bottom: -0.299em;\r\n}\r\n.text-sm-bold::after {\r\n margin-top: -0.349em;\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.text-sm-semi-bold::before,\r\n.text-sm-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n.text-sm-semi-bold::before {\r\n margin-bottom: -0.299em;\r\n}\r\n.text-sm-semi-bold::after {\r\n margin-top: -0.349em;\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.text-sm-medium::before,\r\n.text-sm-medium::after {\r\n content: '';\r\n display: table;\r\n}\r\n.text-sm-medium::before {\r\n margin-bottom: -0.299em;\r\n}\r\n.text-sm-medium::after {\r\n margin-top: -0.299em;\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.text-sm-regular::before,\r\n.text-sm-regular::after {\r\n content: '';\r\n display: table;\r\n}\r\n.text-sm-regular::before {\r\n margin-bottom: -0.299em;\r\n}\r\n.text-sm-regular::after {\r\n margin-top: -0.299em;\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.text-xs-bold::before,\r\n.text-xs-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n.text-xs-bold::before {\r\n margin-bottom: -0.291em;\r\n}\r\n.text-xs-bold::after {\r\n margin-top: -0.416em;\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.text-xs-semi-bold::before,\r\n.text-xs-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n.text-xs-semi-bold::before {\r\n margin-bottom: -0.321em;\r\n}\r\n.text-xs-semi-bold::after {\r\n margin-top: -0.416em;\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.text-xs-medium::before,\r\n.text-xs-medium::after {\r\n content: '';\r\n display: table;\r\n}\r\n.text-xs-medium::before {\r\n margin-bottom: -0.285em;\r\n}\r\n.text-xs-medium::after {\r\n margin-top: -0.396em;\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.text-xs-regular::before,\r\n.text-xs-regular::after {\r\n content: '';\r\n display: table;\r\n}\r\n.text-xs-regular::before {\r\n margin-bottom: -0.291em;\r\n}\r\n.text-xs-regular::after {\r\n margin-top: -0.396em;\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.text-xxs-bold::before,\r\n.text-xxs-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n.text-xxs-bold::before {\r\n margin-bottom: -0.291em;\r\n}\r\n.text-xxs-bold::after {\r\n margin-top: -0.416em;\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.text-xxs-semi-bold::before,\r\n.text-xxs-semi-bold::after {\r\n content: '';\r\n display: table;\r\n}\r\n.text-xxs-semi-bold::before {\r\n margin-bottom: -0.291em;\r\n}\r\n.text-xxs-semi-bold::after {\r\n margin-top: -0.416em;\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.text-xxs-medium::before,\r\n.text-xxs-medium::after {\r\n content: '';\r\n display: table;\r\n}\r\n.text-xxs-medium::before {\r\n margin-bottom: -0.291em;\r\n}\r\n.text-xxs-medium::after {\r\n margin-top: -0.416em;\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.text-xxs-regular::before,\r\n.text-xxs-regular::after {\r\n content: '';\r\n display: table;\r\n}\r\n.text-xxs-regular::before {\r\n margin-bottom: -0.291em;\r\n}\r\n.text-xxs-regular::after {\r\n margin-top: -0.416em;\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.approval-modal{\r\n width: 25.1875rem;\r\n border-radius: 0.75rem;\r\n background-color:var(--color-background-card, #FFFFFF); \r\n position: relative;\r\n overflow: hidden;\r\n}\r\ngb-button-close{\r\n position: absolute;\r\n right: 0.75rem;\r\n top: 0.59375rem;\r\n}\r\n.modal-top{\r\n padding: var(--spacing-6);\r\n border-bottom: 1px solid var(--color-border-subtler, #E3E8EF);\r\n}\r\n.modal-content{\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--spacing-3);\r\n padding: var(--spacing-6);\r\n}\r\n.heading{\r\n color: var(--color-text-subtle, #697586);\r\n}\r\n.modal-row{\r\n border: 1px solid var(--color-border-subtler, #E3E8EF);\r\n border-radius: var(--rounded-sm);\r\n width: 100%;\r\n padding: var(--spacing-4) var(--spacing-4) var(--spacing-4) var(--spacing-4);\r\n gap: var(--spacing-2);\r\n display: flex;\r\n flex-direction: column;\r\n box-sizing: border-box;\r\n}\r\n.modal-textarea{\r\n /* border-radius: 5px; */\r\n width: 100%;\r\n box-sizing: border-box;\r\n}";const t=class{constructor(e){r(this,e);this.primaryButtonClicked=n(this,"primaryButtonClicked");this.secondaryButtonClicked=n(this,"secondaryButtonClicked");this.closeButtonClicked=n(this,"closeButtonClicked");this.textareaValueChanged=n(this,"textareaValueChanged");this.showDecision=true;this.badgeType="badge_color";this.badgeIcon="dot";this.badgeLabel="";this.firstButtonText="";this.secondButtonText="";this.firstButtonState="default";this.headerText="";this.textareaLabel=""}emitCloseEvent(){this.closeButtonClicked.emit()}emitTextareaValue(r){this.textareaValueChanged.emit(r.detail)}render(){return e("div",{key:"549ff28e85d1edcc00d4f3b62a877f2c7b803080",class:"approval-modal shadow-sm"},e("gb-modal-header",{key:"d0bb20a931fdf2669d25577d9fa115f665496b26","close-button-position":"right",text:this.headerText,onCloseButtonClicked:()=>this.emitCloseEvent()}),e("div",{key:"16e549a9a34102fadf5c055e366915a9f6107937",class:"modal-content"},this.showDecision&&e("div",{key:"4babe32b8cae93399a352d01fb37cea0f336c9dd",class:"modal-row"},e("p",{key:"04ca0781a91b9b5de3ff66e1f1dc79a471b6ab5e",class:"text-sm-regular heading"},"Reviewer's decision"),e("gb-badge",{key:"772437d596ab658c0812d93e3061198b46d4d4d9",size:"sm",type:this.badgeType,icon:this.badgeIcon,color:this.badgeColor},e("p",{key:"5b98c24e2ea01b659d1c63b4244a89fd8f4dfbf9"},this.badgeLabel))),e("div",{key:"dd3fe764033a4aaac502d41eaae773973f9cb875",class:"modal-textarea"},e("gb-textarea-input-field",{key:"48e039cf4484020a4854c210c950c912d5220439",idOfInput:"default",state:"default",type:"default","show-label":true,label:this.textareaLabel||"Reason","show-hint-text":false,destructive:false,"placeholder-text":"Enter comments here",onTextareaValueChanged:this.emitTextareaValue.bind(this)}))),e("gb-modal-action",{key:"abafde01477748e33e55bc5bfa7ce529c7f05db7","action-type":"double","first-button-state":this.firstButtonState,"first-button-text":this.firstButtonText,"second-button-text":this.secondButtonText,onFirstButtonClicked:()=>this.primaryButtonClicked.emit(),onSecondButtonClicked:()=>this.secondaryButtonClicked.emit()}))}};t.style=a;export{t as gb_approval_modal};
2
+ //# sourceMappingURL=p-18789dc0.entry.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["registerInstance","createEvent","h","gbApprovalModalCss","GbApprovalModal","constructor","hostRef","this","primaryButtonClicked","secondaryButtonClicked","closeButtonClicked","textareaValueChanged","showDecision","badgeType","badgeIcon","badgeLabel","firstButtonText","secondButtonText","firstButtonState","headerText","textareaLabel","emitCloseEvent","emit","emitTextareaValue","textareaValue","detail","render","key","class","text","onCloseButtonClicked","size","type","icon","color","badgeColor","idOfInput","state","label","destructive","onTextareaValueChanged","bind","onFirstButtonClicked","onSecondButtonClicked","style"],"sources":["0"],"mappings":"OAAcA,OAAuBC,OAAaC,MAAS,kBAE3D,MAAMC,EAAqB,2rsEAE3B,MAAMC,EAAkB,MACpB,WAAAC,CAAYC,GACRN,EAAiBO,KAAMD,GACvBC,KAAKC,qBAAuBP,EAAYM,KAAM,wBAC9CA,KAAKE,uBAAyBR,EAAYM,KAAM,0BAChDA,KAAKG,mBAAqBT,EAAYM,KAAM,sBAC5CA,KAAKI,qBAAuBV,EAAYM,KAAM,wBAC9CA,KAAKK,aAAe,KACpBL,KAAKM,UAAY,cACjBN,KAAKO,UAAY,MACjBP,KAAKQ,WAAa,GAClBR,KAAKS,gBAAkB,GACvBT,KAAKU,iBAAmB,GACxBV,KAAKW,iBAAmB,UACxBX,KAAKY,WAAa,GAClBZ,KAAKa,cAAgB,EACzB,CACA,cAAAC,GACId,KAAKG,mBAAmBY,MAC5B,CACA,iBAAAC,CAAkBC,GACdjB,KAAKI,qBAAqBW,KAAKE,EAAcC,OACjD,CACA,MAAAC,GACI,OAAQxB,EAAE,MAAO,CAAEyB,IAAK,2CAA4CC,MAAO,4BAA8B1B,EAAE,kBAAmB,CAAEyB,IAAK,2CAA4C,wBAAyB,QAASE,KAAMtB,KAAKY,WAAYW,qBAAsB,IAAMvB,KAAKc,mBAAqBnB,EAAE,MAAO,CAAEyB,IAAK,2CAA4CC,MAAO,iBAAmBrB,KAAKK,cAAiBV,EAAE,MAAO,CAAEyB,IAAK,2CAA4CC,MAAO,aAAe1B,EAAE,IAAK,CAAEyB,IAAK,2CAA4CC,MAAO,2BAA6B,uBAAwB1B,EAAE,WAAY,CAAEyB,IAAK,2CAA4CI,KAAM,KAAMC,KAAMzB,KAAKM,UAAWoB,KAAM1B,KAAKO,UAAWoB,MAAO3B,KAAK4B,YAAcjC,EAAE,IAAK,CAAEyB,IAAK,4CAA8CpB,KAAKQ,cAAgBb,EAAE,MAAO,CAAEyB,IAAK,2CAA4CC,MAAO,kBAAoB1B,EAAE,0BAA2B,CAAEyB,IAAK,2CAA4CS,UAAW,UAAWC,MAAO,UAAWL,KAAM,UAAW,aAAc,KAAMM,MAAO/B,KAAKa,eAAiB,SAAU,iBAAkB,MAAOmB,YAAa,MAAO,mBAAoB,sBAAuBC,uBAAwBjC,KAAKgB,kBAAkBkB,KAAKlC,UAAYL,EAAE,kBAAmB,CAAEyB,IAAK,2CAA4C,cAAe,SAAU,qBAAsBpB,KAAKW,iBAAkB,oBAAqBX,KAAKS,gBAAiB,qBAAsBT,KAAKU,iBAAkByB,qBAAsB,IAAMnC,KAAKC,qBAAqBc,OAAQqB,sBAAuB,IAAMpC,KAAKE,uBAAuBa,SAC5kD,GAEJlB,EAAgBwC,MAAQzC,SAEfC","ignoreList":[]}