@geotab/zenith 3.9.2 → 3.10.0-beta.1

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 (244) hide show
  1. package/README.md +15 -3
  2. package/dist/absolute/absolute.d.ts +7 -1
  3. package/dist/absolute/absolute.js +8 -4
  4. package/dist/alertRaw/alertRaw.js +4 -4
  5. package/dist/alertRaw/components/alertAnimation.js +2 -2
  6. package/dist/banner/bannerMultipLine.js +4 -4
  7. package/dist/banner/bannerSingleLine.js +4 -4
  8. package/dist/betaPill/betaPill.d.ts +4 -9
  9. package/dist/betaPill/betaPill.js +7 -8
  10. package/dist/bookmark/bookmark.d.ts +2 -1
  11. package/dist/bookmark/bookmark.js +4 -2
  12. package/dist/card/components/cardButton/cardButton.d.ts +2 -1
  13. package/dist/card/components/cardButton/cardButton.js +3 -3
  14. package/dist/checkbox/checkbox.js +2 -2
  15. package/dist/commonStyles/rangeFieldMixin.less +9 -9
  16. package/dist/controlledPopup/controlledPopup.d.ts +2 -1
  17. package/dist/controlledPopup/controlledPopup.js +2 -2
  18. package/dist/dataFeed/hooks/useVisibleColumns.js +1 -1
  19. package/dist/dataGrid/extensions/toBasicColumn.js +2 -1
  20. package/dist/dataGrid/listColumn.d.ts +1 -0
  21. package/dist/dataGrid/withFlexibleColumns/components/columnSettingsList.d.ts +2 -2
  22. package/dist/dataGrid/withFlexibleColumns/components/columnSettingsList.js +5 -5
  23. package/dist/dataGrid/withFlexibleColumns/withFlexibleColumns.js +15 -6
  24. package/dist/dialog/dialogContent.js +4 -4
  25. package/dist/dropdownRaw/dropdownHelper.d.ts +4 -1
  26. package/dist/dropdownRaw/dropdownHelper.js +2 -1
  27. package/dist/dropdownRaw/dropdownRaw.js +2 -2
  28. package/dist/dropdownRaw/dropdownTrigger.d.ts +1 -1
  29. package/dist/dropdownRaw/dropdownTrigger.js +1 -1
  30. package/dist/fileUpload/components/uploadedFilesSection.js +3 -3
  31. package/dist/filters/components/filtersSavedChipComponent.js +3 -3
  32. package/dist/filters/components/filtersSearchItemData.js +3 -3
  33. package/dist/filters/components/filtersSidePanel.js +4 -4
  34. package/dist/filtersBar/filtersBarSidePanel/filtersBarSidePanel.js +4 -4
  35. package/dist/formGroup/components/reviewListToggle/reviewListToggle.js +13 -13
  36. package/dist/groupsFilterRaw/groupsFilterInitialState.js +1 -1
  37. package/dist/headerTitle/headerTitle.d.ts +3 -9
  38. package/dist/headerTitle/headerTitle.js +2 -3
  39. package/dist/icons/iconAlignLeft.js +3 -1
  40. package/dist/icons/iconAlignmentLeft.js +3 -1
  41. package/dist/icons/iconAlignmentRight.js +3 -1
  42. package/dist/icons/iconArrowBottomLeft.js +3 -1
  43. package/dist/icons/iconArrowBottomRight.js +3 -1
  44. package/dist/icons/iconArrowLeftPath.js +3 -1
  45. package/dist/icons/iconArrowRight.js +3 -1
  46. package/dist/icons/iconArrowRightCircle.js +3 -1
  47. package/dist/icons/iconArrowRightPath.js +3 -1
  48. package/dist/icons/iconArrowTopLeft.js +3 -1
  49. package/dist/icons/iconArrowTopRight.js +3 -1
  50. package/dist/icons/iconChevronDoubleRight.js +3 -1
  51. package/dist/icons/iconChevronRight.js +3 -1
  52. package/dist/icons/iconChevronRightSmall.js +3 -1
  53. package/dist/icons/iconCornerDownLeft.js +3 -1
  54. package/dist/icons/iconCornerDownRight.js +3 -1
  55. package/dist/icons/iconCornerLeftDown.js +3 -1
  56. package/dist/icons/iconCornerLeftUp.js +3 -1
  57. package/dist/icons/iconCornerRightDown.js +3 -1
  58. package/dist/icons/iconCornerRightUp.js +3 -1
  59. package/dist/icons/iconCornerUpLeft.js +3 -1
  60. package/dist/icons/iconCornerUpRight.js +3 -1
  61. package/dist/icons/iconLayoutSidebar.js +3 -1
  62. package/dist/icons/iconPinFilled.d.ts +3 -0
  63. package/dist/icons/iconPinFilled.js +12 -0
  64. package/dist/icons/iconSidebar.js +3 -1
  65. package/dist/icons/iconUndock.js +3 -1
  66. package/dist/index.css +556 -504
  67. package/dist/index.d.ts +1 -0
  68. package/dist/index.js +8 -6
  69. package/dist/list/listItem/listItem.d.ts +3 -1
  70. package/dist/list/listItem/listItem.js +4 -2
  71. package/dist/menu/controlledMenu.d.ts +1 -0
  72. package/dist/menu/controlledMenu.js +2 -2
  73. package/dist/mobileSheet/mobileSheet.js +4 -4
  74. package/dist/modal/modal.js +4 -4
  75. package/dist/nav/nav.d.ts +7 -1
  76. package/dist/nav/nav.js +11 -6
  77. package/dist/nav/navEmpty/navEmpty.d.ts +10 -0
  78. package/dist/nav/navEmpty/navEmpty.js +7 -0
  79. package/dist/notification/notification.js +4 -4
  80. package/dist/notification/pushNotification/pushNotification.js +1 -1
  81. package/dist/pill/components/pillNonActionable/pillNonActionable.js +4 -4
  82. package/dist/pillExpandable/pillExpandable.js +4 -4
  83. package/dist/table/detailPanel/detailPanelHeader.js +4 -4
  84. package/dist/table/flexible/columnsList.d.ts +1 -2
  85. package/dist/table/flexible/columnsList.js +6 -5
  86. package/dist/table/flexible/columnsPopup.js +0 -3
  87. package/dist/table/flexible/useFlexibleColumns.d.ts +1 -0
  88. package/dist/table/flexible/useFlexibleColumns.js +4 -3
  89. package/dist/table/loading/useLoading.d.ts +1 -0
  90. package/dist/table/loading/useLoading.js +1 -1
  91. package/dist/table/nested/useNestedRows.d.ts +1 -0
  92. package/dist/table/selectable/useSelectableRows.js +23 -5
  93. package/dist/table/table.d.ts +1 -0
  94. package/dist/table/table.js +7 -2
  95. package/dist/tabs/tabItem/tabItem.d.ts +2 -1
  96. package/dist/tabs/tabItem/tabItem.js +4 -2
  97. package/dist/tabs/tabs.d.ts +1 -0
  98. package/dist/tabs/tabs.js +2 -1
  99. package/dist/toastRaw/components/toastAnimation.js +2 -2
  100. package/dist/toastRaw/toastRaw.js +4 -4
  101. package/dist/toggleButtonRaw/toggleButtonRaw.js +13 -13
  102. package/dist/tooltip/tooltip.js +4 -4
  103. package/dist/utils/localization/flipAlignment.d.ts +2 -0
  104. package/dist/utils/localization/flipAlignment.js +19 -0
  105. package/dist/utils/localization/makeLanguageWrapper.d.ts +8 -0
  106. package/dist/utils/localization/makeLanguageWrapper.js +11 -0
  107. package/dist/utils/localization/translations/cs.json +2 -2
  108. package/dist/utils/localization/translations/da-DK.json +2 -2
  109. package/dist/utils/localization/translations/es.json +2 -2
  110. package/dist/utils/localization/translations/fi-FI.json +1 -1
  111. package/dist/utils/localization/translations/hu-HU.json +2 -2
  112. package/dist/utils/localization/translations/ko-KR.json +2 -2
  113. package/dist/utils/localization/translations/ms.json +1 -1
  114. package/dist/utils/localization/translations/nb-NO.json +1 -1
  115. package/dist/utils/localization/translations/pt-BR.json +2 -2
  116. package/dist/utils/localization/translations/pt-PT.json +3 -3
  117. package/dist/utils/localization/translations/ro-RO.json +5 -5
  118. package/dist/utils/localization/translations/sk-SK.json +1 -1
  119. package/dist/utils/localization/translations/zh-Hans.json +1 -1
  120. package/dist/utils/localization/useIsRTL.d.ts +1 -0
  121. package/dist/utils/localization/useIsRTL.js +6 -0
  122. package/dist/utils/localization/useRTLAlignment.d.ts +2 -0
  123. package/dist/utils/localization/useRTLAlignment.js +10 -0
  124. package/esm/absolute/absolute.d.ts +7 -1
  125. package/esm/absolute/absolute.js +8 -4
  126. package/esm/alertRaw/alertRaw.js +4 -4
  127. package/esm/alertRaw/components/alertAnimation.js +2 -2
  128. package/esm/banner/bannerMultipLine.js +4 -4
  129. package/esm/banner/bannerSingleLine.js +4 -4
  130. package/esm/betaPill/betaPill.d.ts +4 -9
  131. package/esm/betaPill/betaPill.js +7 -8
  132. package/esm/bookmark/bookmark.d.ts +2 -1
  133. package/esm/bookmark/bookmark.js +4 -2
  134. package/esm/card/components/cardButton/cardButton.d.ts +2 -1
  135. package/esm/card/components/cardButton/cardButton.js +3 -3
  136. package/esm/checkbox/checkbox.js +2 -2
  137. package/esm/controlledPopup/controlledPopup.d.ts +2 -1
  138. package/esm/controlledPopup/controlledPopup.js +2 -2
  139. package/esm/dataFeed/hooks/useVisibleColumns.js +1 -1
  140. package/esm/dataGrid/extensions/toBasicColumn.js +2 -1
  141. package/esm/dataGrid/listColumn.d.ts +1 -0
  142. package/esm/dataGrid/withFlexibleColumns/components/columnSettingsList.d.ts +2 -2
  143. package/esm/dataGrid/withFlexibleColumns/components/columnSettingsList.js +5 -5
  144. package/esm/dataGrid/withFlexibleColumns/withFlexibleColumns.js +15 -6
  145. package/esm/dialog/dialogContent.js +4 -4
  146. package/esm/dropdownRaw/dropdownHelper.d.ts +4 -1
  147. package/esm/dropdownRaw/dropdownHelper.js +2 -1
  148. package/esm/dropdownRaw/dropdownRaw.js +2 -2
  149. package/esm/dropdownRaw/dropdownTrigger.d.ts +1 -1
  150. package/esm/dropdownRaw/dropdownTrigger.js +1 -1
  151. package/esm/fileUpload/components/uploadedFilesSection.js +3 -3
  152. package/esm/filters/components/filtersSavedChipComponent.js +3 -3
  153. package/esm/filters/components/filtersSearchItemData.js +3 -3
  154. package/esm/filters/components/filtersSidePanel.js +4 -4
  155. package/esm/filtersBar/filtersBarSidePanel/filtersBarSidePanel.js +4 -4
  156. package/esm/formGroup/components/reviewListToggle/reviewListToggle.js +13 -13
  157. package/esm/groupsFilterRaw/groupsFilterInitialState.js +1 -1
  158. package/esm/headerTitle/headerTitle.d.ts +3 -9
  159. package/esm/headerTitle/headerTitle.js +2 -3
  160. package/esm/icons/iconAlignLeft.js +3 -1
  161. package/esm/icons/iconAlignmentLeft.js +3 -1
  162. package/esm/icons/iconAlignmentRight.js +3 -1
  163. package/esm/icons/iconArrowBottomLeft.js +3 -1
  164. package/esm/icons/iconArrowBottomRight.js +3 -1
  165. package/esm/icons/iconArrowLeftPath.js +3 -1
  166. package/esm/icons/iconArrowRight.js +3 -1
  167. package/esm/icons/iconArrowRightCircle.js +3 -1
  168. package/esm/icons/iconArrowRightPath.js +3 -1
  169. package/esm/icons/iconArrowTopLeft.js +3 -1
  170. package/esm/icons/iconArrowTopRight.js +3 -1
  171. package/esm/icons/iconChevronDoubleRight.js +3 -1
  172. package/esm/icons/iconChevronRight.js +3 -1
  173. package/esm/icons/iconChevronRightSmall.js +3 -1
  174. package/esm/icons/iconCornerDownLeft.js +3 -1
  175. package/esm/icons/iconCornerDownRight.js +3 -1
  176. package/esm/icons/iconCornerLeftDown.js +3 -1
  177. package/esm/icons/iconCornerLeftUp.js +3 -1
  178. package/esm/icons/iconCornerRightDown.js +3 -1
  179. package/esm/icons/iconCornerRightUp.js +3 -1
  180. package/esm/icons/iconCornerUpLeft.js +3 -1
  181. package/esm/icons/iconCornerUpRight.js +3 -1
  182. package/esm/icons/iconLayoutSidebar.js +3 -1
  183. package/esm/icons/iconPinFilled.d.ts +3 -0
  184. package/esm/icons/iconPinFilled.js +8 -0
  185. package/esm/icons/iconSidebar.js +3 -1
  186. package/esm/icons/iconUndock.js +3 -1
  187. package/esm/index.d.ts +1 -0
  188. package/esm/index.js +1 -0
  189. package/esm/list/listItem/listItem.d.ts +3 -1
  190. package/esm/list/listItem/listItem.js +4 -2
  191. package/esm/menu/controlledMenu.d.ts +1 -0
  192. package/esm/menu/controlledMenu.js +2 -2
  193. package/esm/mobileSheet/mobileSheet.js +4 -4
  194. package/esm/modal/modal.js +4 -4
  195. package/esm/nav/nav.d.ts +7 -1
  196. package/esm/nav/nav.js +11 -6
  197. package/esm/nav/navEmpty/navEmpty.d.ts +10 -0
  198. package/esm/nav/navEmpty/navEmpty.js +3 -0
  199. package/esm/notification/notification.js +4 -4
  200. package/esm/notification/pushNotification/pushNotification.js +1 -1
  201. package/esm/pill/components/pillNonActionable/pillNonActionable.js +4 -4
  202. package/esm/pillExpandable/pillExpandable.js +4 -4
  203. package/esm/table/detailPanel/detailPanelHeader.js +4 -4
  204. package/esm/table/flexible/columnsList.d.ts +1 -2
  205. package/esm/table/flexible/columnsList.js +6 -5
  206. package/esm/table/flexible/columnsPopup.js +0 -3
  207. package/esm/table/flexible/useFlexibleColumns.d.ts +1 -0
  208. package/esm/table/flexible/useFlexibleColumns.js +4 -3
  209. package/esm/table/loading/useLoading.d.ts +1 -0
  210. package/esm/table/loading/useLoading.js +1 -1
  211. package/esm/table/nested/useNestedRows.d.ts +1 -0
  212. package/esm/table/selectable/useSelectableRows.js +23 -5
  213. package/esm/table/table.d.ts +1 -0
  214. package/esm/table/table.js +7 -2
  215. package/esm/tabs/tabItem/tabItem.d.ts +2 -1
  216. package/esm/tabs/tabItem/tabItem.js +4 -2
  217. package/esm/tabs/tabs.d.ts +1 -0
  218. package/esm/tabs/tabs.js +2 -1
  219. package/esm/toastRaw/components/toastAnimation.js +2 -2
  220. package/esm/toastRaw/toastRaw.js +4 -4
  221. package/esm/toggleButtonRaw/toggleButtonRaw.js +13 -13
  222. package/esm/tooltip/tooltip.js +4 -4
  223. package/esm/utils/localization/flipAlignment.d.ts +2 -0
  224. package/esm/utils/localization/flipAlignment.js +15 -0
  225. package/esm/utils/localization/makeLanguageWrapper.d.ts +8 -0
  226. package/esm/utils/localization/makeLanguageWrapper.js +7 -0
  227. package/esm/utils/localization/translations/cs.json +2 -2
  228. package/esm/utils/localization/translations/da-DK.json +2 -2
  229. package/esm/utils/localization/translations/es.json +2 -2
  230. package/esm/utils/localization/translations/fi-FI.json +1 -1
  231. package/esm/utils/localization/translations/hu-HU.json +2 -2
  232. package/esm/utils/localization/translations/ko-KR.json +2 -2
  233. package/esm/utils/localization/translations/ms.json +1 -1
  234. package/esm/utils/localization/translations/nb-NO.json +1 -1
  235. package/esm/utils/localization/translations/pt-BR.json +2 -2
  236. package/esm/utils/localization/translations/pt-PT.json +3 -3
  237. package/esm/utils/localization/translations/ro-RO.json +5 -5
  238. package/esm/utils/localization/translations/sk-SK.json +1 -1
  239. package/esm/utils/localization/translations/zh-Hans.json +1 -1
  240. package/esm/utils/localization/useIsRTL.d.ts +1 -0
  241. package/esm/utils/localization/useIsRTL.js +2 -0
  242. package/esm/utils/localization/useRTLAlignment.d.ts +2 -0
  243. package/esm/utils/localization/useRTLAlignment.js +6 -0
  244. package/package.json +1 -1
package/dist/index.css CHANGED
@@ -1510,7 +1510,7 @@ html:lang(ar) .mobile-data-s-drive {
1510
1510
  display: grid;
1511
1511
  grid-template-columns: minmax(min-content, auto) minmax(auto, 168px) minmax(0, auto);
1512
1512
  grid-template-rows: auto auto;
1513
- gap: 4px 8px;
1513
+ gap: 0.25rem 0.5rem;
1514
1514
  align-items: center;
1515
1515
  justify-items: start;
1516
1516
  }
@@ -1518,9 +1518,9 @@ html:lang(ar) .mobile-data-s-drive {
1518
1518
  display: grid;
1519
1519
  align-items: center;
1520
1520
  justify-items: start;
1521
- grid-template-columns: minmax(24px, 32px) minmax(64px, 64px) minmax(24px, 32px) minmax(24px, 32px) minmax(64px, 64px) minmax(24px, 32px);
1522
- row-gap: 4px;
1523
- column-gap: 8px;
1521
+ grid-template-columns: minmax(1.5rem, 2rem) minmax(4rem, 4rem) minmax(1.5rem, 2rem) minmax(1.5rem, 2rem) minmax(4rem, 4rem) minmax(1.5rem, 2rem);
1522
+ row-gap: 0.25rem;
1523
+ column-gap: 0.5rem;
1524
1524
  }
1525
1525
  :root {
1526
1526
  --border-width-default: 1px;
@@ -2127,6 +2127,9 @@ html:lang(ar) .zen-button--mobile {
2127
2127
  width: 30px;
2128
2128
  height: 30px;
2129
2129
  }
2130
+ .zen-icon--rtl {
2131
+ transform: scaleX(-1);
2132
+ }
2130
2133
  .zen-accordion {
2131
2134
  font-family: var(--main-font);
2132
2135
  font-size: 14px;
@@ -2222,7 +2225,7 @@ html:lang(ar) .zen-accordion {
2222
2225
  }
2223
2226
  .zen-banner {
2224
2227
  box-sizing: border-box;
2225
- min-height: 48px;
2228
+ min-height: 3rem;
2226
2229
  }
2227
2230
  .zen-banner__content {
2228
2231
  flex-grow: 2;
@@ -2236,11 +2239,11 @@ html:lang(ar) .zen-accordion {
2236
2239
  max-width: unset;
2237
2240
  }
2238
2241
  .zen-banner__content--XL {
2239
- max-width: 1440px;
2242
+ max-width: 90rem;
2240
2243
  }
2241
2244
  .zen-banner__content--multiline {
2242
2245
  flex-direction: column;
2243
- row-gap: 8px;
2246
+ row-gap: 0.5rem;
2244
2247
  }
2245
2248
  .zen-banner__close-button {
2246
2249
  display: flex;
@@ -2252,7 +2255,7 @@ html:lang(ar) .zen-accordion {
2252
2255
  border-radius: 15px;
2253
2256
  cursor: pointer;
2254
2257
  padding: 0;
2255
- margin: 8px;
2258
+ margin: 0.5rem;
2256
2259
  align-self: flex-start;
2257
2260
  }
2258
2261
  .zen-banner__close-button:active,
@@ -2262,15 +2265,16 @@ html:lang(ar) .zen-accordion {
2262
2265
  fill: var(--accents-warning--main);
2263
2266
  }
2264
2267
  .zen-banner__close-button--top-gap {
2265
- margin: 5px;
2268
+ margin: 0.3125rem;
2266
2269
  }
2267
2270
  .zen-banner__close-button--drive,
2268
2271
  .zen-banner__close-button--drive-tablet {
2269
- margin: 12px;
2272
+ margin: 0.75rem;
2270
2273
  }
2271
2274
  .zen-banner__block {
2272
2275
  display: flex;
2273
- padding: 8px 12px 8px 16px;
2276
+ padding-block: 0.5rem 0.5rem;
2277
+ padding-inline: 1rem 0.75rem;
2274
2278
  background-color: var(--accents-warning--main);
2275
2279
  color: var(--accents-warning--detail);
2276
2280
  fill: var(--accents-warning--detail);
@@ -2278,7 +2282,8 @@ html:lang(ar) .zen-accordion {
2278
2282
  }
2279
2283
  .zen-banner__block--drive,
2280
2284
  .zen-banner__block--drive-tablet {
2281
- padding: 8px 12px 16px 16px;
2285
+ padding-block: 0.5rem 1rem;
2286
+ padding-inline: 1rem 0.75rem;
2282
2287
  }
2283
2288
  .zen-banner__block--multiline {
2284
2289
  height: unset;
@@ -2291,20 +2296,20 @@ html:lang(ar) .zen-accordion {
2291
2296
  justify-content: center;
2292
2297
  }
2293
2298
  .zen-banner__block--L {
2294
- max-width: 1136px;
2295
- min-width: 268px;
2299
+ max-width: 71rem;
2300
+ min-width: 16.75rem;
2296
2301
  }
2297
2302
  .zen-banner__block--M {
2298
- max-width: 752px;
2299
- min-width: 268px;
2303
+ max-width: 47rem;
2304
+ min-width: 16.75rem;
2300
2305
  }
2301
2306
  .zen-banner__block--S {
2302
- max-width: 560px;
2303
- min-width: 268px;
2307
+ max-width: 35rem;
2308
+ min-width: 16.75rem;
2304
2309
  }
2305
2310
  .zen-banner__block--XS {
2306
- max-width: 360px;
2307
- min-width: 268px;
2311
+ max-width: 22.5rem;
2312
+ min-width: 16.75rem;
2308
2313
  }
2309
2314
  .zen-banner__block--multiline {
2310
2315
  flex-wrap: wrap;
@@ -2329,7 +2334,7 @@ html:lang(ar) .zen-accordion {
2329
2334
  line-height: 16px;
2330
2335
  text-transform: none;
2331
2336
  text-decoration: none;
2332
- padding-right: 8px;
2337
+ padding-inline-end: 0.5rem;
2333
2338
  display: -webkit-box;
2334
2339
  -webkit-box-orient: vertical;
2335
2340
  -webkit-line-clamp: 1;
@@ -2367,10 +2372,10 @@ html:lang(ar) .zen-banner__header--drive-tablet {
2367
2372
  }
2368
2373
  .zen-banner__icon-block {
2369
2374
  display: flex;
2370
- padding-right: 8px;
2375
+ padding-inline-end: 0.5rem;
2371
2376
  }
2372
2377
  .zen-banner__icon-block--top-gap {
2373
- margin: 3px;
2378
+ margin: 0.1875rem;
2374
2379
  }
2375
2380
  .zen-banner__message {
2376
2381
  font-family: var(--main-font);
@@ -2385,9 +2390,9 @@ html:lang(ar) .zen-banner__header--drive-tablet {
2385
2390
  text-overflow: ellipsis;
2386
2391
  white-space: nowrap;
2387
2392
  word-wrap: normal;
2388
- text-align: left;
2389
- margin-right: auto;
2390
- max-width: 1035px;
2393
+ text-align: start;
2394
+ margin-inline-end: auto;
2395
+ max-width: 64.6875rem;
2391
2396
  }
2392
2397
  html:lang(ar) .zen-banner__message {
2393
2398
  font-family: var(--arabic-font-family);
@@ -2399,8 +2404,8 @@ html:lang(ar) .zen-banner__message {
2399
2404
  }
2400
2405
  .zen-banner__message--drive,
2401
2406
  .zen-banner__message--drive-tablet {
2402
- max-width: 452px;
2403
- padding-top: 4px;
2407
+ max-width: 28.25rem;
2408
+ padding-top: 0.25rem;
2404
2409
  }
2405
2410
  .zen-banner__message--drive {
2406
2411
  font-family: var(--main-font);
@@ -2489,7 +2494,7 @@ html:lang(ar) .zen-banner__message--multiline.zen-banner__message--drive-tablet
2489
2494
  align-items: center;
2490
2495
  }
2491
2496
  .zen-banner__action {
2492
- margin-left: 16px;
2497
+ margin-inline-start: 1rem;
2493
2498
  display: flex;
2494
2499
  }
2495
2500
  .zen-banner__action--multiline {
@@ -3518,6 +3523,9 @@ html:lang(ar) .zen-side-panel {
3518
3523
  visibility: visible;
3519
3524
  pointer-events: auto;
3520
3525
  }
3526
+ .zen-side-panel.zen-side-panel--shown {
3527
+ transform: translateX(0);
3528
+ }
3521
3529
  .zen-side-panel--shown .zen-form-field--new-component {
3522
3530
  display: flex;
3523
3531
  }
@@ -3630,10 +3638,10 @@ html:lang(ar) .zen-side-panel-cell__title {
3630
3638
  .zen-toast {
3631
3639
  box-sizing: border-box;
3632
3640
  display: grid;
3633
- grid-template-rows: 4px 1fr;
3641
+ grid-template-rows: 0.25rem 1fr;
3634
3642
  border-radius: 4px;
3635
- width: 368px;
3636
- height: 56px;
3643
+ width: 23rem;
3644
+ height: 3.5rem;
3637
3645
  }
3638
3646
  .zen-toast * {
3639
3647
  box-sizing: border-box;
@@ -3642,18 +3650,18 @@ html:lang(ar) .zen-side-panel-cell__title {
3642
3650
  width: 100%;
3643
3651
  }
3644
3652
  .zen-toast--drive {
3645
- height: 68px;
3653
+ height: 4.25rem;
3646
3654
  }
3647
3655
  .zen-toast__content {
3648
3656
  display: flex;
3649
3657
  justify-content: space-between;
3650
3658
  align-items: center;
3651
- padding: 12px;
3659
+ padding: 0.75rem;
3652
3660
  }
3653
3661
  .zen-toast__content-start,
3654
3662
  .zen-toast__content-end {
3655
3663
  display: flex;
3656
- gap: 8px;
3664
+ gap: 0.5rem;
3657
3665
  align-items: center;
3658
3666
  }
3659
3667
  .zen-toast__content-start {
@@ -3662,16 +3670,16 @@ html:lang(ar) .zen-side-panel-cell__title {
3662
3670
  align-items: center;
3663
3671
  }
3664
3672
  .zen-toast__content-start--icon {
3665
- grid-template-columns: 24px 1fr;
3673
+ grid-template-columns: 1.5rem 1fr;
3666
3674
  }
3667
3675
  .zen-toast__content-end {
3668
3676
  display: grid;
3669
- grid-template-columns: 24px;
3677
+ grid-template-columns: 1.5rem;
3670
3678
  align-items: center;
3671
3679
  }
3672
3680
  .zen-toast__content-end--action {
3673
3681
  display: grid;
3674
- grid-template-columns: minmax(75px, 110px) 24px;
3682
+ grid-template-columns: minmax(4.6875rem, 6.875rem) 1.5rem;
3675
3683
  justify-self: end;
3676
3684
  }
3677
3685
  .zen-toast--info {
@@ -3683,7 +3691,7 @@ html:lang(ar) .zen-side-panel-cell__title {
3683
3691
  border-color: var(--accents-success--detail);
3684
3692
  }
3685
3693
  .zen-toast__icon {
3686
- padding-right: 8px;
3694
+ padding-inline-end: 0.5rem;
3687
3695
  }
3688
3696
  .zen-toast__icon--info {
3689
3697
  fill: var(--accents-general--detail);
@@ -3721,8 +3729,8 @@ html:lang(ar) .zen-toast__header {
3721
3729
  display: flex;
3722
3730
  align-items: center;
3723
3731
  justify-content: center;
3724
- width: 20px;
3725
- height: 20px;
3732
+ width: 1.25rem;
3733
+ height: 1.25rem;
3726
3734
  background: none;
3727
3735
  border: none;
3728
3736
  padding: 0;
@@ -3746,10 +3754,11 @@ html:lang(ar) .zen-toast__header {
3746
3754
  outline-color: var(--accents-success--detail);
3747
3755
  }
3748
3756
  .zen-toast__action {
3749
- max-width: 110px;
3750
- white-space: nowrap;
3757
+ max-width: 6.875rem;
3751
3758
  overflow: hidden;
3752
3759
  text-overflow: ellipsis;
3760
+ white-space: nowrap;
3761
+ word-wrap: normal;
3753
3762
  justify-self: end;
3754
3763
  }
3755
3764
  .zen-toast__progress {
@@ -3780,13 +3789,13 @@ html:lang(ar) .zen-toast__header {
3780
3789
  display: flex;
3781
3790
  flex-direction: row;
3782
3791
  justify-content: space-between;
3783
- padding: 16px;
3792
+ padding: 1rem;
3784
3793
  border-radius: 8px;
3785
3794
  background-color: var(--backgrounds-main);
3786
- max-width: 368px;
3787
- min-width: 368px;
3788
- min-height: 96px;
3789
- max-height: 220px;
3795
+ max-width: 23rem;
3796
+ min-width: 23rem;
3797
+ min-height: 6rem;
3798
+ max-height: 13.75rem;
3790
3799
  }
3791
3800
  .zen-alert * {
3792
3801
  box-sizing: border-box;
@@ -3795,22 +3804,22 @@ html:lang(ar) .zen-alert {
3795
3804
  font-family: var(--arabic-font-family);
3796
3805
  }
3797
3806
  .zen-alert--with-header {
3798
- min-height: 128px;
3807
+ min-height: 8rem;
3799
3808
  }
3800
3809
  .zen-alert::before {
3801
3810
  content: "";
3802
3811
  position: absolute;
3803
- top: 0px;
3804
- left: -4px;
3805
- width: 8px;
3812
+ top: 0;
3813
+ inset-inline-start: -0.25rem;
3814
+ width: 0.5rem;
3806
3815
  height: 100%;
3807
- border-top-left-radius: 15px;
3808
- border-bottom-left-radius: 15px;
3809
- border-left: 4px solid transparent;
3816
+ border-start-start-radius: 15px;
3817
+ border-end-start-radius: 15px;
3818
+ border-inline-start: 4px solid transparent;
3810
3819
  }
3811
3820
  .zen-alert__header {
3812
3821
  display: grid;
3813
- grid-template-columns: minmax(20px, 24px) 1fr minmax(20px, 24px);
3822
+ grid-template-columns: minmax(1.25rem, 1.5rem) 1fr minmax(1.25rem, 1.5rem);
3814
3823
  }
3815
3824
  .zen-alert__content {
3816
3825
  flex-grow: 1;
@@ -3828,23 +3837,24 @@ html:lang(ar) .zen-alert {
3828
3837
  flex-grow: 1;
3829
3838
  display: flex;
3830
3839
  flex-direction: column;
3831
- line-height: 24px;
3832
- gap: 8px;
3840
+ line-height: 1.5rem;
3841
+ gap: 0.5rem;
3833
3842
  }
3834
3843
  html:lang(ar) .zen-alert__body {
3835
3844
  font-family: var(--arabic-font-family);
3836
3845
  }
3837
3846
  .zen-alert__body-actions {
3838
3847
  display: flex;
3839
- gap: 8px;
3840
- margin-left: auto;
3848
+ gap: 0.5rem;
3849
+ margin-inline-start: auto;
3841
3850
  }
3842
3851
  .zen-alert__button {
3843
- font-size: 12px;
3844
- max-width: 140px;
3845
- white-space: nowrap;
3852
+ font-size: 0.75rem;
3853
+ max-width: 8.75rem;
3846
3854
  overflow: hidden;
3847
3855
  text-overflow: ellipsis;
3856
+ white-space: nowrap;
3857
+ word-wrap: normal;
3848
3858
  }
3849
3859
  .zen-alert__text {
3850
3860
  display: -webkit-box;
@@ -3862,7 +3872,7 @@ html:lang(ar) .zen-alert__body {
3862
3872
  -webkit-box-orient: vertical;
3863
3873
  overflow: hidden;
3864
3874
  text-overflow: ellipsis;
3865
- padding-top: 2px;
3875
+ padding-top: 0.125rem;
3866
3876
  color: var(--text-primary);
3867
3877
  font-family: var(--main-font);
3868
3878
  font-size: 14px;
@@ -3880,8 +3890,8 @@ html:lang(ar) .zen-alert__title {
3880
3890
  display: flex;
3881
3891
  align-items: center;
3882
3892
  justify-content: center;
3883
- width: 20px;
3884
- height: 20px;
3893
+ width: 1.25rem;
3894
+ height: 1.25rem;
3885
3895
  background: none;
3886
3896
  border: none;
3887
3897
  padding: 0;
@@ -3897,22 +3907,22 @@ html:lang(ar) .zen-alert__title {
3897
3907
  }
3898
3908
  .zen-alert__actions {
3899
3909
  height: 100%;
3900
- margin-left: auto;
3910
+ margin-inline-start: auto;
3901
3911
  }
3902
3912
  .zen-alert--error::before {
3903
- border-left-color: var(--action-destructive--active);
3913
+ border-inline-start-color: var(--action-destructive--active);
3904
3914
  }
3905
3915
  .zen-alert--info::before {
3906
- border-left-color: var(--accents-general--detail);
3916
+ border-inline-start-color: var(--accents-general--detail);
3907
3917
  }
3908
3918
  .zen-alert--success::before {
3909
- border-left-color: var(--accents-success--detail);
3919
+ border-inline-start-color: var(--accents-success--detail);
3910
3920
  }
3911
3921
  .zen-alert--warning::before {
3912
- border-left-color: var(--accents-warning--detail);
3922
+ border-inline-start-color: var(--accents-warning--detail);
3913
3923
  }
3914
3924
  .zen-alert__icon {
3915
- padding-right: 8px;
3925
+ padding-inline-end: 0.5rem;
3916
3926
  }
3917
3927
  .zen-alert__icon--error {
3918
3928
  fill: var(--accents-error--detail);
@@ -3929,18 +3939,18 @@ html:lang(ar) .zen-alert__title {
3929
3939
  .zen-alert__body-container {
3930
3940
  display: flex;
3931
3941
  flex-direction: column;
3932
- gap: 8px;
3942
+ gap: 0.5rem;
3933
3943
  width: 100%;
3934
3944
  }
3935
3945
  .zen-alert__header-container {
3936
3946
  display: flex;
3937
3947
  flex-direction: column;
3938
- gap: 10px;
3948
+ gap: 0.625rem;
3939
3949
  width: 100%;
3940
3950
  }
3941
3951
  .zen-alert--drive {
3942
- min-height: 114px;
3943
- max-height: 230px;
3952
+ min-height: 7.125rem;
3953
+ max-height: 14.375rem;
3944
3954
  }
3945
3955
  .zen-alert--drive.zen-alert--mobile .zen-alert__title {
3946
3956
  font-family: var(--main-font);
@@ -3982,7 +3992,7 @@ html:lang(ar) .zen-alert--drive .zen-alert__title {
3982
3992
  font-family: var(--arabic-font-family);
3983
3993
  }
3984
3994
  .zen-alert--drive--with-header {
3985
- min-height: 138px;
3995
+ min-height: 8.625rem;
3986
3996
  }
3987
3997
  .zen-alert--drive .zen-alert__text {
3988
3998
  line-clamp: 4;
@@ -4000,7 +4010,7 @@ html:lang(ar) .zen-alert--drive .zen-alert__text {
4000
4010
  font-family: var(--arabic-font-family);
4001
4011
  }
4002
4012
  .zen-alert--drive .zen-alert__icon {
4003
- padding-top: 2px;
4013
+ padding-top: 0.125rem;
4004
4014
  }
4005
4015
  .zen-alert--mobile {
4006
4016
  max-width: 100%;
@@ -4742,9 +4752,9 @@ html:lang(ar) .zen-feed-item__value {
4742
4752
  display: flex;
4743
4753
  justify-content: center;
4744
4754
  align-items: center;
4745
- width: 16px;
4746
- height: 16px;
4747
- min-width: 16px;
4755
+ width: 1rem;
4756
+ height: 1rem;
4757
+ min-width: 1rem;
4748
4758
  border-radius: var(--border-radius-default);
4749
4759
  background-color: var(--backgrounds-main);
4750
4760
  border: var(--border-width-default) solid var(--borders-form-field--hover);
@@ -4752,9 +4762,9 @@ html:lang(ar) .zen-feed-item__value {
4752
4762
  cursor: pointer;
4753
4763
  }
4754
4764
  .zen-checkbox--mobile .zen-checkbox__box {
4755
- width: 24px;
4756
- height: 24px;
4757
- min-width: 24px;
4765
+ width: 1.5rem;
4766
+ height: 1.5rem;
4767
+ min-width: 1.5rem;
4758
4768
  }
4759
4769
  .zen-checkbox--mobile .zen-checkbox__label-text {
4760
4770
  font-family: var(--main-font);
@@ -4772,7 +4782,7 @@ html:lang(ar) .zen-checkbox--mobile .zen-checkbox__label-text {
4772
4782
  .zen-checkbox__label {
4773
4783
  cursor: pointer;
4774
4784
  display: flex;
4775
- gap: 8px;
4785
+ gap: 0.5rem;
4776
4786
  align-items: center;
4777
4787
  fill: var(--text-reverse-primary);
4778
4788
  color: var(--text-primary);
@@ -4794,9 +4804,9 @@ html:lang(ar) .zen-checkbox--drive .zen-checkbox__label-text {
4794
4804
  font-family: var(--arabic-font-family);
4795
4805
  }
4796
4806
  .zen-checkbox--drive .zen-checkbox__box {
4797
- width: 24px;
4798
- height: 24px;
4799
- min-width: 24px;
4807
+ width: 1.5rem;
4808
+ height: 1.5rem;
4809
+ min-width: 1.5rem;
4800
4810
  }
4801
4811
  .zen-checkbox--drive-tablet .zen-checkbox__label-text {
4802
4812
  font-family: var(--main-font);
@@ -4812,9 +4822,9 @@ html:lang(ar) .zen-checkbox--drive-tablet .zen-checkbox__label-text {
4812
4822
  font-family: var(--arabic-font-family);
4813
4823
  }
4814
4824
  .zen-checkbox--drive-tablet .zen-checkbox__box {
4815
- width: 24px;
4816
- height: 24px;
4817
- min-width: 24px;
4825
+ width: 1.5rem;
4826
+ height: 1.5rem;
4827
+ min-width: 1.5rem;
4818
4828
  }
4819
4829
  .zen-checkbox__label-text {
4820
4830
  font-family: var(--main-font);
@@ -4842,42 +4852,45 @@ html:lang(ar) .zen-checkbox__label-text {
4842
4852
  .zen-checkbox__icon--disabled {
4843
4853
  fill: var(--backgrounds-content-0);
4844
4854
  }
4845
- .zen-checkbox__input:checked + .zen-checkbox__label > .zen-checkbox__box,
4846
- .zen-checkbox__input:indeterminate + .zen-checkbox__label > .zen-checkbox__box {
4855
+ .zen-checkbox:has(.zen-checkbox__input:checked) .zen-checkbox__box,
4856
+ .zen-checkbox:has(.zen-checkbox__input:indeterminate) .zen-checkbox__box {
4847
4857
  border-color: var(--borders-form-field--active);
4848
4858
  background-color: var(--borders-form-field--active);
4849
4859
  fill: var(--text-reverse-primary);
4850
4860
  color: var(--text-reverse-primary);
4851
4861
  stroke: var(--text-reverse-primary);
4852
4862
  }
4853
- .zen-checkbox__input:checked + .zen-checkbox__label > .zen-checkbox__box .zen-checkbox__icon,
4854
- .zen-checkbox__input:indeterminate + .zen-checkbox__label > .zen-checkbox__box .zen-checkbox__icon {
4863
+ .zen-checkbox:has(.zen-checkbox__input:checked) .zen-checkbox__box .zen-checkbox__icon,
4864
+ .zen-checkbox:has(.zen-checkbox__input:indeterminate) .zen-checkbox__box .zen-checkbox__icon {
4855
4865
  display: block;
4856
4866
  }
4857
- .zen-checkbox__input:focus + .zen-checkbox__label > .zen-checkbox__box {
4867
+ .zen-checkbox:has(.zen-checkbox__input:focus) .zen-checkbox__box,
4868
+ .zen-checkbox:has(.zen-checkbox__input:focus) .zen-checkbox__label {
4858
4869
  outline: 1px solid var(--zen-checkbox-outline, var(--borders-form-field--active));
4859
4870
  outline-offset: var(--border-width-default);
4860
4871
  }
4861
4872
  /* This was added because safari just added support for :focus-visible. Can be removed after 3 versions of safari browser. */
4862
4873
  @supports selector(:focus-visible) {
4863
- .zen-checkbox__input:focus + .zen-checkbox__label > .zen-checkbox__box {
4874
+ .zen-checkbox:has(.zen-checkbox__input:focus) .zen-checkbox__box,
4875
+ .zen-checkbox:has(.zen-checkbox__input:focus) .zen-checkbox__label {
4864
4876
  outline: none;
4865
4877
  }
4866
- .zen-checkbox__input:focus-visible + .zen-checkbox__label > .zen-checkbox__box {
4878
+ .zen-checkbox:has(.zen-checkbox__input:focus-visible) .zen-checkbox__box,
4879
+ .zen-checkbox:has(.zen-checkbox__input:focus-visible) .zen-checkbox__label {
4867
4880
  outline: 1px solid var(--zen-checkbox-outline, var(--borders-form-field--active));
4868
4881
  outline-offset: var(--border-width-default);
4869
4882
  }
4870
4883
  }
4871
- .zen-checkbox__input:disabled + .zen-checkbox__label {
4884
+ .zen-checkbox:has(.zen-checkbox__input:disabled) .zen-checkbox__label {
4872
4885
  fill: var(--text-reverse-primary);
4873
4886
  color: var(--text-button-disabled);
4874
4887
  }
4875
- .zen-checkbox__input:disabled + .zen-checkbox__label > .zen-checkbox__box {
4888
+ .zen-checkbox:has(.zen-checkbox__input:disabled) .zen-checkbox__box {
4876
4889
  border-color: var(--borders-general);
4877
4890
  background-color: var(--backgrounds-field-disabled);
4878
4891
  }
4879
- .zen-checkbox__input:disabled:checked + .zen-checkbox__label > .zen-checkbox__box,
4880
- .zen-checkbox__input:disabled:indeterminate + .zen-checkbox__label > .zen-checkbox__box {
4892
+ .zen-checkbox:has(.zen-checkbox__input:disabled:checked) .zen-checkbox__box,
4893
+ .zen-checkbox:has(.zen-checkbox__input:disabled:indeterminate) .zen-checkbox__box {
4881
4894
  border-color: var(--borders-general);
4882
4895
  background-color: var(--borders-general);
4883
4896
  }
@@ -4921,7 +4934,8 @@ html:lang(ar) .zen-checkbox__label-text {
4921
4934
  }
4922
4935
  .zen-select-list__item-content {
4923
4936
  width: 100%;
4924
- padding: 12px 16px;
4937
+ padding-block: 0.75rem;
4938
+ padding-inline: 1rem;
4925
4939
  color: var(--text-primary);
4926
4940
  overflow: hidden;
4927
4941
  text-overflow: ellipsis;
@@ -4936,7 +4950,7 @@ html:lang(ar) .zen-checkbox__label-text {
4936
4950
  }
4937
4951
  .zen-select-list.zen-select-list--drive .zen-select-list__item-content,
4938
4952
  .zen-select-list.zen-select-list--drive-tablet .zen-select-list__item-content {
4939
- padding: 16px;
4953
+ padding: 1rem;
4940
4954
  }
4941
4955
  .zen-select-item {
4942
4956
  box-sizing: border-box;
@@ -4989,7 +5003,7 @@ html:lang(ar) .zen-select-item {
4989
5003
  .zen-select-item .zen-select-item__wrapper--with-arrow {
4990
5004
  display: flex;
4991
5005
  justify-content: space-between;
4992
- padding-right: 8px;
5006
+ padding-inline-end: 0.5rem;
4993
5007
  fill: var(--text-primary);
4994
5008
  }
4995
5009
  .zen-select-item.zen-select-item--drive {
@@ -5096,8 +5110,8 @@ html:lang(ar) .zen-link-column__groups {
5096
5110
  font-family: var(--arabic-font-family);
5097
5111
  }
5098
5112
  .zen-primary-icon {
5099
- width: 24px;
5100
- height: 24px;
5113
+ width: 1.5rem;
5114
+ height: 1.5rem;
5101
5115
  fill: var(--text-reverse-primary-button);
5102
5116
  background-color: var(--action-primary--default);
5103
5117
  border: none;
@@ -5517,6 +5531,72 @@ html:lang(ar) .zen-columns-list__title {
5517
5531
  .zen-nested-button__padding {
5518
5532
  padding-left: 40px;
5519
5533
  }
5534
+ .zen-empty-state {
5535
+ box-sizing: border-box;
5536
+ display: grid;
5537
+ justify-content: center;
5538
+ align-content: center;
5539
+ text-align: center;
5540
+ gap: 0.625rem;
5541
+ grid-auto-flow: row;
5542
+ height: 100%;
5543
+ width: 100%;
5544
+ min-height: 12.5rem;
5545
+ padding: 1.25rem;
5546
+ }
5547
+ .zen-empty-state * {
5548
+ box-sizing: border-box;
5549
+ }
5550
+ .zen-empty-state__image {
5551
+ width: 180px;
5552
+ height: 180px;
5553
+ align-self: center;
5554
+ justify-self: center;
5555
+ justify-content: center;
5556
+ display: flex;
5557
+ align-items: center;
5558
+ }
5559
+ .zen-empty-state__header {
5560
+ font-family: var(--main-font);
5561
+ font-size: 14px;
5562
+ font-style: normal;
5563
+ font-weight: 500;
5564
+ letter-spacing: 0.16px;
5565
+ line-height: 16px;
5566
+ text-transform: none;
5567
+ text-decoration: none;
5568
+ margin: 0;
5569
+ }
5570
+ html:lang(ar) .zen-empty-state__header {
5571
+ font-family: var(--arabic-font-family);
5572
+ }
5573
+ .zen-empty-state__description {
5574
+ font-family: var(--main-font);
5575
+ font-size: 12px;
5576
+ font-style: italic;
5577
+ font-weight: 400;
5578
+ letter-spacing: 0.32px;
5579
+ line-height: 16px;
5580
+ text-transform: none;
5581
+ text-decoration: none;
5582
+ }
5583
+ html:lang(ar) .zen-empty-state__description {
5584
+ font-family: var(--arabic-font-family);
5585
+ }
5586
+ .zen-svg-image {
5587
+ box-sizing: border-box;
5588
+ display: inline;
5589
+ }
5590
+ .zen-svg-image * {
5591
+ box-sizing: border-box;
5592
+ }
5593
+ .zen-svg-image:hover,
5594
+ .zen-svg-image:focus {
5595
+ outline: none;
5596
+ }
5597
+ .zen-svg-image > use {
5598
+ pointer-events: none;
5599
+ }
5520
5600
  .zen-data-grid-actions {
5521
5601
  box-sizing: border-box;
5522
5602
  width: 100%;
@@ -5731,72 +5811,6 @@ html:lang(ar) .zen-bulk-actions__number-of-selected {
5731
5811
  html:lang(ar) .zen-pagination__text {
5732
5812
  font-family: var(--arabic-font-family);
5733
5813
  }
5734
- .zen-empty-state {
5735
- box-sizing: border-box;
5736
- display: grid;
5737
- justify-content: center;
5738
- align-content: center;
5739
- text-align: center;
5740
- gap: 10px;
5741
- grid-auto-flow: row;
5742
- height: 100%;
5743
- width: 100%;
5744
- min-height: 200px;
5745
- padding: 20px;
5746
- }
5747
- .zen-empty-state * {
5748
- box-sizing: border-box;
5749
- }
5750
- .zen-empty-state__image {
5751
- width: 180px;
5752
- height: 180px;
5753
- align-self: center;
5754
- justify-self: center;
5755
- justify-content: center;
5756
- display: flex;
5757
- align-items: center;
5758
- }
5759
- .zen-empty-state__header {
5760
- font-family: var(--main-font);
5761
- font-size: 14px;
5762
- font-style: normal;
5763
- font-weight: 500;
5764
- letter-spacing: 0.16px;
5765
- line-height: 16px;
5766
- text-transform: none;
5767
- text-decoration: none;
5768
- margin: 0;
5769
- }
5770
- html:lang(ar) .zen-empty-state__header {
5771
- font-family: var(--arabic-font-family);
5772
- }
5773
- .zen-empty-state__description {
5774
- font-family: var(--main-font);
5775
- font-size: 12px;
5776
- font-style: italic;
5777
- font-weight: 400;
5778
- letter-spacing: 0.32px;
5779
- line-height: 16px;
5780
- text-transform: none;
5781
- text-decoration: none;
5782
- }
5783
- html:lang(ar) .zen-empty-state__description {
5784
- font-family: var(--arabic-font-family);
5785
- }
5786
- .zen-svg-image {
5787
- box-sizing: border-box;
5788
- display: inline;
5789
- }
5790
- .zen-svg-image * {
5791
- box-sizing: border-box;
5792
- }
5793
- .zen-svg-image:hover,
5794
- .zen-svg-image:focus {
5795
- outline: none;
5796
- }
5797
- .zen-svg-image > use {
5798
- pointer-events: none;
5799
- }
5800
5814
  .zen-table__detail-panel--header {
5801
5815
  background-color: var(--backgrounds-main);
5802
5816
  border-bottom: 1px solid var(--borders-general);
@@ -6571,23 +6585,23 @@ html:lang(ar) .zen-review-text-control {
6571
6585
  align-items: start;
6572
6586
  }
6573
6587
  .zen-toggler-component {
6574
- --zen-toggler-component-height: 16px;
6575
- --zen-toggler-component-height-drive: 24px;
6576
- --zen-toggler-component-width: 30px;
6577
- --zen-toggler-component-width-drive: 42px;
6578
- --zen-toggler-tap-area-width-drive: 50px;
6579
- --zen-toggler-tap-area-height-drive: 32px;
6580
- --zen-toggler-runner-size: 12px;
6581
- --zen-toggler-runner-size-drive: 18px;
6582
- --zen-toggler-runner-focus-size: 26px;
6583
- --zen-toggler-runner-focus-size-drive: 32px;
6588
+ --zen-toggler-component-height: 1rem;
6589
+ --zen-toggler-component-height-drive: 1.5rem;
6590
+ --zen-toggler-component-width: 1.875rem;
6591
+ --zen-toggler-component-width-drive: 2.625rem;
6592
+ --zen-toggler-tap-area-width-drive: 3.125rem;
6593
+ --zen-toggler-tap-area-height-drive: 2rem;
6594
+ --zen-toggler-runner-size: 0.75rem;
6595
+ --zen-toggler-runner-size-drive: 1.125rem;
6596
+ --zen-toggler-runner-focus-size: 1.625rem;
6597
+ --zen-toggler-runner-focus-size-drive: 2rem;
6584
6598
  box-sizing: border-box;
6585
6599
  width: var(--zen-toggler-component-width);
6586
6600
  min-width: var(--zen-toggler-component-width);
6587
6601
  height: var(--zen-toggler-component-height);
6588
6602
  min-height: var(--zen-toggler-component-height);
6589
6603
  border-radius: var(--zen-toggler-component-height);
6590
- padding: 2px;
6604
+ padding: 0.125rem;
6591
6605
  background-color: var(--action-secondary--default);
6592
6606
  overflow: visible;
6593
6607
  position: relative;
@@ -6617,16 +6631,16 @@ html:lang(ar) .zen-review-text-control {
6617
6631
  min-width: var(--zen-toggler-runner-size-drive);
6618
6632
  height: var(--zen-toggler-runner-size-drive);
6619
6633
  min-height: var(--zen-toggler-runner-size-drive);
6620
- margin-top: 1px;
6621
- margin-left: 1px;
6634
+ margin-top: 0.0625rem;
6635
+ margin-inline-start: 0.0625rem;
6622
6636
  }
6623
6637
  .zen-toggler-component--drive .zen-toggler-component__focus {
6624
6638
  width: var(--zen-toggler-runner-focus-size-drive);
6625
6639
  min-width: var(--zen-toggler-runner-focus-size-drive);
6626
6640
  height: var(--zen-toggler-runner-focus-size-drive);
6627
6641
  min-height: var(--zen-toggler-runner-focus-size-drive);
6628
- top: -4px;
6629
- left: -4px;
6642
+ top: -0.25rem;
6643
+ inset-inline-start: -0.25rem;
6630
6644
  }
6631
6645
  .zen-toggler-component--drive-tablet {
6632
6646
  height: var(--zen-toggler-component-height-drive);
@@ -6649,16 +6663,16 @@ html:lang(ar) .zen-review-text-control {
6649
6663
  min-width: var(--zen-toggler-runner-size-drive);
6650
6664
  height: var(--zen-toggler-runner-size-drive);
6651
6665
  min-height: var(--zen-toggler-runner-size-drive);
6652
- margin-top: 1px;
6653
- margin-left: 1px;
6666
+ margin-top: 0.0625rem;
6667
+ margin-inline-start: 0.0625rem;
6654
6668
  }
6655
6669
  .zen-toggler-component--drive-tablet .zen-toggler-component__focus {
6656
6670
  width: var(--zen-toggler-runner-focus-size-drive);
6657
6671
  min-width: var(--zen-toggler-runner-focus-size-drive);
6658
6672
  height: var(--zen-toggler-runner-focus-size-drive);
6659
6673
  min-height: var(--zen-toggler-runner-focus-size-drive);
6660
- top: -4px;
6661
- left: -4px;
6674
+ top: -0.25rem;
6675
+ inset-inline-start: -0.25rem;
6662
6676
  }
6663
6677
  .zen-toggler-component__runner {
6664
6678
  width: var(--zen-toggler-runner-size);
@@ -6677,9 +6691,9 @@ html:lang(ar) .zen-review-text-control {
6677
6691
  min-height: var(--zen-toggler-runner-focus-size);
6678
6692
  border-radius: 50%;
6679
6693
  opacity: 0.4;
6680
- top: -5px;
6694
+ top: -0.3125rem;
6681
6695
  background-color: var(--action-secondary--default);
6682
- left: -5px;
6696
+ inset-inline-start: -0.3125rem;
6683
6697
  }
6684
6698
  .zen-toggler__input {
6685
6699
  position: absolute;
@@ -6702,7 +6716,7 @@ html:lang(ar) .zen-review-text-control {
6702
6716
  text-transform: none;
6703
6717
  text-decoration: none;
6704
6718
  color: var(--text-primary);
6705
- margin-left: 8px;
6719
+ margin-inline-start: 0.5rem;
6706
6720
  }
6707
6721
  html:lang(ar) .zen-toggler__label-text {
6708
6722
  font-family: var(--arabic-font-family);
@@ -6737,8 +6751,8 @@ html:lang(ar) .zen-toggler--drive-tablet .zen-toggler__label-text {
6737
6751
  flex-direction: row-reverse;
6738
6752
  }
6739
6753
  .zen-toggler__label--reverted .zen-toggler__label-text {
6740
- margin-right: 8px;
6741
- margin-left: 0;
6754
+ margin-inline-end: 0.5rem;
6755
+ margin-inline-start: 0;
6742
6756
  }
6743
6757
  .zen-toggler__input:focus-visible + .zen-toggler__label > .zen-toggler-component .zen-toggler-component__focus,
6744
6758
  .zen-toggler__input:hover + .zen-toggler__label > .zen-toggler-component .zen-toggler-component__focus {
@@ -6748,12 +6762,12 @@ html:lang(ar) .zen-toggler--drive-tablet .zen-toggler__label-text {
6748
6762
  background-color: var(--action-primary--default);
6749
6763
  }
6750
6764
  .zen-toggler__input:checked + .zen-toggler__label > .zen-toggler-component .zen-toggler-component__runner {
6751
- float: right;
6765
+ float: inline-end;
6752
6766
  }
6753
6767
  .zen-toggler__input:checked + .zen-toggler__label > .zen-toggler-component .zen-toggler-component__focus {
6754
6768
  background-color: var(--action-primary--default);
6755
- left: unset;
6756
- right: -5px;
6769
+ inset-inline-start: unset;
6770
+ inset-inline-end: -0.3125rem;
6757
6771
  }
6758
6772
  .zen-toggler__input:disabled + .zen-toggler__label > .zen-toggler-component {
6759
6773
  opacity: 0.4;
@@ -7460,7 +7474,7 @@ html:lang(ar) .zen-form-field__length {
7460
7474
  border: 1px solid var(--text-error-message);
7461
7475
  }
7462
7476
  .zen-dropdown .zen-dropdown__trigger-button:not(.zen-dropdown--form-item) {
7463
- max-width: 420px;
7477
+ max-width: 26.25rem;
7464
7478
  }
7465
7479
  .zen-dropdown .zen-dropdown__trigger-button--checked {
7466
7480
  color: var(--text-primary);
@@ -7474,10 +7488,11 @@ html:lang(ar) .zen-form-field__length {
7474
7488
  border-bottom: none;
7475
7489
  }
7476
7490
  .zen-dropdown--mobile .zen-dropdown-mobile-sheet__search-container {
7477
- padding: 16px 12px;
7491
+ padding-block: 1rem;
7492
+ padding-inline: 0.75rem;
7478
7493
  }
7479
7494
  .zen-dropdown--mobile .zen-dropdown-mobile-sheet__checkbox-container {
7480
- padding: 16px;
7495
+ padding: 1rem;
7481
7496
  border-bottom: var(--border-width-default) solid var(--borders-general);
7482
7497
  }
7483
7498
  .zen-dropdown--mobile .zen-dropdown-mobile-sheet__search {
@@ -7494,7 +7509,7 @@ html:lang(ar) .zen-form-field__length {
7494
7509
  }
7495
7510
  .zen-checkbox-list-with-action {
7496
7511
  box-sizing: border-box;
7497
- margin-bottom: 16px;
7512
+ margin-bottom: 1rem;
7498
7513
  }
7499
7514
  .zen-checkbox-list-with-action * {
7500
7515
  box-sizing: border-box;
@@ -7503,8 +7518,8 @@ html:lang(ar) .zen-form-field__length {
7503
7518
  display: flex;
7504
7519
  flex-direction: column;
7505
7520
  list-style: none;
7506
- padding: 0px;
7507
- margin: 0px;
7521
+ padding: 0;
7522
+ margin: 0;
7508
7523
  }
7509
7524
  .zen-checkbox-list-with-action__list-item {
7510
7525
  display: flex;
@@ -7522,7 +7537,8 @@ html:lang(ar) .zen-form-field__length {
7522
7537
  text-transform: none;
7523
7538
  text-decoration: none;
7524
7539
  color: var(--text-secondary);
7525
- padding: 8px 8px 8px 16px;
7540
+ padding: 0.5rem;
7541
+ padding-inline-start: 1rem;
7526
7542
  }
7527
7543
  html:lang(ar) .zen-checkbox-list-with-action__title {
7528
7544
  font-family: var(--arabic-font-family);
@@ -7533,20 +7549,20 @@ html:lang(ar) .zen-checkbox-list-with-action__title {
7533
7549
  align-items: center;
7534
7550
  }
7535
7551
  .zen-checkbox-list-with-action__action-item--action .zen-checkbox__label {
7536
- padding-right: 8px;
7537
- padding-bottom: 12px;
7538
- padding-top: 12px;
7552
+ padding-inline-end: 0.5rem;
7553
+ padding-bottom: 0.75rem;
7554
+ padding-top: 0.75rem;
7539
7555
  }
7540
7556
  .zen-checkbox-list-with-action__singled {
7541
7557
  font-weight: 700;
7542
7558
  }
7543
7559
  .zen-checkbox-list-with-action__action-checkbox {
7544
- height: 40px;
7560
+ height: 2.5rem;
7545
7561
  position: relative;
7546
7562
  flex-grow: 0;
7547
7563
  }
7548
7564
  .zen-checkbox-list-with-action__action-checkbox .zen-checkbox__label {
7549
- padding-left: 16px;
7565
+ padding-inline-start: 1rem;
7550
7566
  }
7551
7567
  .zen-checkbox-list-with-action__action-checkbox .zen-checkbox__label-text {
7552
7568
  overflow: hidden;
@@ -7574,7 +7590,9 @@ html:lang(ar) .zen-checkbox-list-with-action__title {
7574
7590
  fill: var(--text-placeholder);
7575
7591
  color: var(--text-primary);
7576
7592
  width: 100%;
7577
- padding: 7px 8px 7px 4px;
7593
+ padding-block: 0.4375rem;
7594
+ padding-inline-start: 0.25rem;
7595
+ padding-inline-end: 0.5rem;
7578
7596
  }
7579
7597
  html:lang(ar) .zen-checkbox-list-with-action__label {
7580
7598
  font-family: var(--arabic-font-family);
@@ -7594,14 +7612,14 @@ html:lang(ar) .zen-checkbox-list-with-action__label {
7594
7612
  .zen-checkbox-list-with-action__label-text {
7595
7613
  display: flex;
7596
7614
  flex-grow: 1;
7597
- padding-right: 8px;
7615
+ padding-inline-end: 0.5rem;
7598
7616
  }
7599
7617
  .zen-checkbox-list-with-action__label-info {
7600
7618
  display: flex;
7601
7619
  align-items: center;
7602
7620
  }
7603
7621
  .zen-checkbox-list-with-action__label-count {
7604
- margin-left: 6px;
7622
+ margin-inline-start: 0.375rem;
7605
7623
  }
7606
7624
  .zen-checkbox-list-with-action__counter {
7607
7625
  font-family: var(--main-font);
@@ -7614,13 +7632,13 @@ html:lang(ar) .zen-checkbox-list-with-action__label {
7614
7632
  text-decoration: none;
7615
7633
  background: var(--action-primary--default);
7616
7634
  color: var(--text-reverse-primary);
7617
- border-radius: 9px;
7635
+ border-radius: 0.5625rem;
7618
7636
  display: flex;
7619
- min-width: 16px;
7620
- height: 16px;
7637
+ min-width: 1rem;
7638
+ height: 1rem;
7621
7639
  justify-content: center;
7622
7640
  align-items: center;
7623
- padding: 2px 4px;
7641
+ padding: 0.125rem 0.25rem;
7624
7642
  }
7625
7643
  html:lang(ar) .zen-checkbox-list-with-action__counter {
7626
7644
  font-family: var(--arabic-font-family);
@@ -7631,29 +7649,29 @@ html:lang(ar) .zen-checkbox-list-with-action__counter {
7631
7649
  justify-content: center;
7632
7650
  }
7633
7651
  .zen-checkbox-list-with-action__color-info {
7634
- margin-right: 5px;
7635
- height: 6px;
7636
- width: 20px;
7637
- min-width: 20px;
7638
- border-radius: 3px;
7652
+ width: 1.25rem;
7653
+ min-width: 1.25rem;
7654
+ border-radius: 0.1875rem;
7655
+ margin-inline-end: 0.3125rem;
7656
+ height: 0.375rem;
7639
7657
  border: 1px solid black;
7640
7658
  }
7641
7659
  .zen-checkbox-list-with-action__color-info--right-indent {
7642
- margin-right: 16px;
7660
+ margin-inline-end: 1rem;
7643
7661
  }
7644
7662
  .zen-checkbox-list-with-action__color-info--hidden {
7645
7663
  display: none;
7646
7664
  }
7647
7665
  .zen-checkbox-list-with-action__sr-only {
7648
7666
  position: absolute;
7649
- left: -9999px;
7667
+ inset-inline-start: -624.9375rem;
7650
7668
  width: 1px;
7651
7669
  height: 1px;
7652
7670
  opacity: 0;
7653
7671
  }
7654
7672
  .zen-checkbox-list-with-action.zen-checkbox-list-with-action--drive .zen-checkbox-list-with-action__action-checkbox,
7655
7673
  .zen-checkbox-list-with-action.zen-checkbox-list-with-action--drive-tablet .zen-checkbox-list-with-action__action-checkbox {
7656
- height: 60px;
7674
+ height: 3.75rem;
7657
7675
  }
7658
7676
  .zen-checkbox-list-with-action.zen-checkbox-list-with-action--drive .zen-checkbox-list-with-action__title {
7659
7677
  font-family: var(--main-font);
@@ -7735,8 +7753,8 @@ html:lang(ar) .zen-checkbox-list-with-action.zen-checkbox-list-with-action--driv
7735
7753
  }
7736
7754
  .zen-dropdown-list {
7737
7755
  margin: 0;
7738
- padding: 4px 0 0;
7739
- min-width: 180px;
7756
+ padding: 0.25rem 0 0;
7757
+ min-width: 11.25rem;
7740
7758
  }
7741
7759
  .zen-dropdown-list__elements {
7742
7760
  font-family: var(--main-font);
@@ -7749,7 +7767,7 @@ html:lang(ar) .zen-checkbox-list-with-action.zen-checkbox-list-with-action--driv
7749
7767
  text-decoration: none;
7750
7768
  height: 100%;
7751
7769
  overflow-y: auto;
7752
- max-height: 245px;
7770
+ max-height: 15.3125rem;
7753
7771
  }
7754
7772
  html:lang(ar) .zen-dropdown-list__elements {
7755
7773
  font-family: var(--arabic-font-family);
@@ -7764,15 +7782,17 @@ html:lang(ar) .zen-dropdown-list__elements {
7764
7782
  text-transform: none;
7765
7783
  text-decoration: none;
7766
7784
  width: 100%;
7767
- height: 40px;
7785
+ height: 2.5rem;
7768
7786
  color: var(--text-secondary);
7769
- padding: 8px 16px;
7787
+ padding-block: 0.5rem;
7788
+ padding-inline: 1rem;
7770
7789
  }
7771
7790
  html:lang(ar) .zen-dropdown-list__label {
7772
7791
  font-family: var(--arabic-font-family);
7773
7792
  }
7774
7793
  .zen-dropdown-list__checkbox-container {
7775
- padding: 8px 16px;
7794
+ padding-block: 0.5rem;
7795
+ padding-inline: 1rem;
7776
7796
  border-bottom: var(--border-width-default) solid var(--borders-general);
7777
7797
  }
7778
7798
  .zen-dropdown-list__checkbox-container .zen-checkbox__label-text {
@@ -7794,10 +7814,11 @@ html:lang(ar) .zen-dropdown-list__label {
7794
7814
  align-items: center;
7795
7815
  background-color: transparent;
7796
7816
  width: 100%;
7797
- height: 40px;
7817
+ height: 2.5rem;
7798
7818
  font-weight: 400;
7799
7819
  border: none;
7800
- padding: 7px 16px;
7820
+ padding-block: 0.4375rem;
7821
+ padding-inline: 1rem;
7801
7822
  border-radius: 0;
7802
7823
  }
7803
7824
  .zen-dropdown-list__item--interactive:not(:disabled) {
@@ -7847,17 +7868,17 @@ html:lang(ar) .zen-dropdown-list__action-label {
7847
7868
  }
7848
7869
  .zen-dropdown-list__action-label--limited {
7849
7870
  display: block;
7850
- max-width: 200px;
7871
+ max-width: 12.5rem;
7851
7872
  }
7852
7873
  .zen-dropdown-list__icon {
7853
7874
  color: var(--action-secondary--default);
7854
7875
  fill: var(--action-secondary--default);
7855
7876
  }
7856
7877
  .zen-dropdown-list__action-icon {
7857
- margin-right: 6px;
7878
+ margin-inline-end: 0.375rem;
7858
7879
  }
7859
7880
  .zen-dropdown-list__action-button {
7860
- height: 40px;
7881
+ height: 2.5rem;
7861
7882
  border: none;
7862
7883
  margin: 0;
7863
7884
  }
@@ -7880,7 +7901,8 @@ html:lang(ar) .zen-dropdown-list__action-label {
7880
7901
  border-top: var(--border-width-default) solid var(--borders-general);
7881
7902
  }
7882
7903
  .zen-dropdown-list__action-button-back {
7883
- padding: 7px 14px;
7904
+ padding-block: 0.4375rem;
7905
+ padding-inline: 0.875rem;
7884
7906
  }
7885
7907
  .zen-dropdown-list__button-group {
7886
7908
  display: inline-flex;
@@ -7890,37 +7912,38 @@ html:lang(ar) .zen-dropdown-list__action-label {
7890
7912
  .zen-dropdown-list__clear-button,
7891
7913
  .zen-dropdown-list__cancel-button,
7892
7914
  .zen-dropdown-list__apply-button {
7893
- margin-right: 8px;
7894
- margin-top: 8px;
7895
- margin-bottom: 4px;
7915
+ margin-inline-end: 0.5rem;
7916
+ margin-block-start: 0.5rem;
7917
+ margin-block-end: 0.25rem;
7896
7918
  }
7897
7919
  .zen-dropdown-list__clear-button {
7898
- margin-left: 8px;
7920
+ margin-inline-start: 0.5rem;
7899
7921
  }
7900
7922
  .zen-dropdown-list__container {
7901
- width: 250px;
7902
- max-height: 245px;
7923
+ width: 15.625rem;
7924
+ max-height: 15.3125rem;
7903
7925
  border-radius: var(--border-radius-default);
7904
7926
  }
7905
7927
  .zen-dropdown-list__container--empty {
7906
- padding: 16px 20px;
7928
+ padding-block: 1rem;
7929
+ padding-inline: 1.25rem;
7907
7930
  }
7908
7931
  .zen-dropdown-list.zen-dropdown-list--drive .zen-dropdown-list__label,
7909
7932
  .zen-dropdown-list.zen-dropdown-list--drive-tablet .zen-dropdown-list__label {
7910
- height: 44px;
7911
- padding: 12px;
7933
+ height: 2.75rem;
7934
+ padding: 0.75rem;
7912
7935
  }
7913
7936
  .zen-dropdown-list.zen-dropdown-list--drive .zen-dropdown-list__item,
7914
7937
  .zen-dropdown-list.zen-dropdown-list--drive-tablet .zen-dropdown-list__item {
7915
- height: 60px;
7938
+ height: 3.75rem;
7916
7939
  }
7917
7940
  .zen-dropdown-list.zen-dropdown-list--drive .zen-dropdown-list__action-button,
7918
7941
  .zen-dropdown-list.zen-dropdown-list--drive-tablet .zen-dropdown-list__action-button {
7919
- height: 52px;
7942
+ height: 3.25rem;
7920
7943
  }
7921
7944
  .zen-dropdown-list.zen-dropdown-list--drive .zen-dropdown-list__elements,
7922
7945
  .zen-dropdown-list.zen-dropdown-list--drive-tablet .zen-dropdown-list__elements {
7923
- max-height: 260px;
7946
+ max-height: 16.25rem;
7924
7947
  }
7925
7948
  .zen-dropdown-list.zen-dropdown-list--drive .zen-dropdown-list__action-label {
7926
7949
  font-family: var(--main-font);
@@ -8499,7 +8522,7 @@ html:lang(ar) .zen-filter-button.zen-filter-button--drive-tablet .zen-filter-but
8499
8522
  font-family: var(--arabic-font-family);
8500
8523
  }
8501
8524
  .zen-dropdown-searchable-trigger {
8502
- max-width: 420px;
8525
+ max-width: 26.25rem;
8503
8526
  cursor: pointer;
8504
8527
  box-sizing: border-box;
8505
8528
  display: flex;
@@ -8517,26 +8540,26 @@ html:lang(ar) .zen-filter-button.zen-filter-button--drive-tablet .zen-filter-but
8517
8540
  .zen-dropdown-searchable-trigger__icon {
8518
8541
  color: var(--action-secondary--default);
8519
8542
  fill: var(--action-secondary--default);
8520
- min-width: 16px;
8521
- min-height: 16px;
8522
- width: 16px;
8523
- height: 16px;
8543
+ min-width: 1rem;
8544
+ min-height: 1rem;
8545
+ width: 1rem;
8546
+ height: 1rem;
8524
8547
  }
8525
8548
  .zen-dropdown-searchable-trigger__search-container {
8526
8549
  display: flex;
8527
8550
  align-items: center;
8528
- height: 32px;
8551
+ height: 2rem;
8529
8552
  outline: none;
8530
- margin-top: 0;
8531
- margin-bottom: 0;
8532
- padding: 7px 9px;
8553
+ margin-block: 0;
8554
+ padding-block: 0.4375rem;
8555
+ padding-inline: 0.5625rem;
8533
8556
  flex: 1 1 auto;
8534
8557
  background-color: var(--backgrounds-main);
8535
8558
  border: var(--border-width-default) solid var(--borders-general);
8536
- min-width: 120px;
8559
+ min-width: 7.5rem;
8537
8560
  border-radius: var(--border-radius-default);
8538
- border-top-right-radius: 0;
8539
- border-bottom-right-radius: 0;
8561
+ border-start-end-radius: 0;
8562
+ border-end-end-radius: 0;
8540
8563
  fill: var(--action-secondary--default);
8541
8564
  }
8542
8565
  .zen-dropdown-searchable-trigger__search-container:hover {
@@ -8552,7 +8575,7 @@ html:lang(ar) .zen-filter-button.zen-filter-button--drive-tablet .zen-filter-but
8552
8575
  }
8553
8576
  .zen-dropdown-searchable-trigger__input-container {
8554
8577
  width: 100%;
8555
- min-height: 24px;
8578
+ min-height: 1.5rem;
8556
8579
  display: flex;
8557
8580
  align-items: center;
8558
8581
  }
@@ -8565,12 +8588,13 @@ html:lang(ar) .zen-filter-button.zen-filter-button--drive-tablet .zen-filter-but
8565
8588
  line-height: 16px;
8566
8589
  text-transform: none;
8567
8590
  text-decoration: none;
8568
- min-width: 85px;
8591
+ min-width: 5.3125rem;
8569
8592
  height: 100%;
8570
8593
  width: 100%;
8571
8594
  border: none;
8572
8595
  outline: none;
8573
- padding: 0 5px 0 0;
8596
+ padding-block: 0;
8597
+ padding-inline: 0 0.3125rem;
8574
8598
  -webkit-appearance: none;
8575
8599
  appearance: none;
8576
8600
  background-color: inherit;
@@ -8588,10 +8612,10 @@ html:lang(ar) .zen-dropdown-searchable-trigger .zen-dropdown-searchable-trigger_
8588
8612
  align-items: center;
8589
8613
  background: var(--backgrounds-main);
8590
8614
  fill: var(--action-secondary--default);
8591
- width: 32px;
8592
- border-top-left-radius: 0;
8593
- border-bottom-left-radius: 0;
8594
- margin-left: -1px;
8615
+ width: 2rem;
8616
+ border-start-start-radius: 0;
8617
+ border-end-start-radius: 0;
8618
+ margin-inline-start: -1px;
8595
8619
  cursor: pointer;
8596
8620
  flex-shrink: 0;
8597
8621
  }
@@ -8614,7 +8638,7 @@ html:lang(ar) .zen-dropdown-searchable-trigger .zen-dropdown-searchable-trigger_
8614
8638
  background-color: var(--backgrounds-hover);
8615
8639
  }
8616
8640
  .zen-dropdown-searchable-trigger__label-element {
8617
- margin-right: 0;
8641
+ margin-inline-end: 0;
8618
8642
  display: flex;
8619
8643
  white-space: nowrap;
8620
8644
  }
@@ -8631,11 +8655,12 @@ html:lang(ar) .zen-dropdown-searchable-trigger .zen-dropdown-searchable-trigger_
8631
8655
  color: var(--text-reverse-primary);
8632
8656
  border-radius: 9px;
8633
8657
  display: flex;
8634
- min-width: 16px;
8635
- height: 16px;
8658
+ min-width: 1rem;
8659
+ height: 1rem;
8636
8660
  justify-content: center;
8637
8661
  align-items: center;
8638
- padding: 2px 4px;
8662
+ padding-block: 0.125rem;
8663
+ padding-inline: 0.25rem;
8639
8664
  }
8640
8665
  html:lang(ar) .zen-dropdown-searchable-trigger__counter {
8641
8666
  font-family: var(--arabic-font-family);
@@ -8660,13 +8685,13 @@ html:lang(ar) .zen-dropdown-searchable-trigger__counter {
8660
8685
  }
8661
8686
  .zen-dropdown-searchable-trigger__close-button {
8662
8687
  border-radius: 16px;
8663
- height: 16px;
8664
- min-width: 16px;
8688
+ height: 1rem;
8689
+ min-width: 1rem;
8665
8690
  display: flex;
8666
8691
  align-items: center;
8667
8692
  justify-content: center;
8668
8693
  padding: 0;
8669
- margin-left: 4px;
8694
+ margin-inline-start: 0.25rem;
8670
8695
  background-color: transparent;
8671
8696
  border: none;
8672
8697
  fill: var(--action-secondary--default);
@@ -8687,28 +8712,29 @@ html:lang(ar) .zen-dropdown-searchable-trigger__counter {
8687
8712
  }
8688
8713
  .zen-dropdown-searchable-trigger.zen-dropdown-searchable-trigger--drive .zen-dropdown-searchable-trigger__search-container,
8689
8714
  .zen-dropdown-searchable-trigger.zen-dropdown-searchable-trigger--drive-tablet .zen-dropdown-searchable-trigger__search-container {
8690
- height: 44px;
8715
+ height: 2.75rem;
8691
8716
  }
8692
8717
  .zen-dropdown-searchable-trigger.zen-dropdown-searchable-trigger--drive .zen-dropdown-searchable-trigger__popup-trigger,
8693
8718
  .zen-dropdown-searchable-trigger.zen-dropdown-searchable-trigger--drive-tablet .zen-dropdown-searchable-trigger__popup-trigger {
8694
- width: 44px;
8719
+ width: 2.75rem;
8695
8720
  }
8696
8721
  .zen-dropdown-searchable-trigger.zen-dropdown-searchable-trigger--drive .zen-dropdown-searchable-trigger__counter,
8697
8722
  .zen-dropdown-searchable-trigger.zen-dropdown-searchable-trigger--drive-tablet .zen-dropdown-searchable-trigger__counter {
8698
- height: 22px;
8699
- padding: 0 8px;
8723
+ height: 1.375rem;
8724
+ padding-block: 0;
8725
+ padding-inline: 0.5rem;
8700
8726
  border-radius: 12px;
8701
8727
  }
8702
8728
  .zen-dropdown-searchable-trigger.zen-dropdown-searchable-trigger--drive .zen-dropdown-searchable-trigger__close-button,
8703
8729
  .zen-dropdown-searchable-trigger.zen-dropdown-searchable-trigger--drive-tablet .zen-dropdown-searchable-trigger__close-button {
8704
- height: 20px;
8705
- min-width: 20px;
8730
+ height: 1.25rem;
8731
+ min-width: 1.25rem;
8706
8732
  }
8707
8733
  .zen-dropdown-searchable-trigger.zen-dropdown-searchable-trigger--drive .zen-dropdown-searchable-trigger__search-container {
8708
- height: 44px;
8734
+ height: 2.75rem;
8709
8735
  }
8710
8736
  .zen-dropdown-searchable-trigger.zen-dropdown-searchable-trigger--drive .zen-dropdown-searchable-trigger__popup-trigger {
8711
- width: 44px;
8737
+ width: 2.75rem;
8712
8738
  }
8713
8739
  .zen-dropdown-searchable-trigger.zen-dropdown-searchable-trigger--drive .zen-dropdown-searchable-trigger__input {
8714
8740
  font-family: var(--main-font);
@@ -8737,10 +8763,10 @@ html:lang(ar) .zen-dropdown-searchable-trigger.zen-dropdown-searchable-trigger--
8737
8763
  font-family: var(--arabic-font-family);
8738
8764
  }
8739
8765
  .zen-dropdown-searchable-trigger.zen-dropdown-searchable-trigger--drive-tablet .zen-dropdown-searchable-trigger__search-container {
8740
- height: 46px;
8766
+ height: 2.875rem;
8741
8767
  }
8742
8768
  .zen-dropdown-searchable-trigger.zen-dropdown-searchable-trigger--drive-tablet .zen-dropdown-searchable-trigger__popup-trigger {
8743
- width: 46px;
8769
+ width: 2.875rem;
8744
8770
  }
8745
8771
  .zen-dropdown-searchable-trigger.zen-dropdown-searchable-trigger--drive-tablet .zen-dropdown-searchable-trigger__input {
8746
8772
  font-family: var(--main-font);
@@ -8774,17 +8800,17 @@ html:lang(ar) .zen-dropdown-searchable-trigger.zen-dropdown-searchable-trigger--
8774
8800
  }
8775
8801
  .zen-dropdown-searchable-trigger--error .zen-dropdown-searchable-trigger__popup-trigger {
8776
8802
  border: none;
8777
- border-left: 1px solid var(--text-error-message);
8803
+ border-inline-start: 1px solid var(--text-error-message);
8778
8804
  }
8779
8805
  .zen-dropdown-searchable-trigger--error .zen-dropdown-searchable-trigger__popup-trigger:hover,
8780
8806
  .zen-dropdown-searchable-trigger--error .zen-dropdown-searchable-trigger__popup-trigger:active,
8781
8807
  .zen-dropdown-searchable-trigger--error .zen-dropdown-searchable-trigger__popup-trigger:focus {
8782
8808
  border: none;
8783
- border-left: 1px solid var(--text-error-message);
8809
+ border-inline-start: 1px solid var(--text-error-message);
8784
8810
  }
8785
8811
  .zen-dropdown-searchable-trigger--error .zen-dropdown-searchable-trigger__search-container {
8786
8812
  border: none;
8787
- border-right: 1px solid var(--text-error-message);
8813
+ border-inline-end: 1px solid var(--text-error-message);
8788
8814
  }
8789
8815
  .zen-dropdown-searchable-trigger:focus-within .zen-dropdown-searchable-trigger__search-container {
8790
8816
  z-index: 1;
@@ -8831,7 +8857,7 @@ html:lang(ar) .zen-dropdown-searchable-trigger.zen-dropdown-searchable-trigger--
8831
8857
  background-color: var(--backgrounds-main);
8832
8858
  color: var(--text-primary);
8833
8859
  fill: var(--text-primary);
8834
- padding: 7px;
8860
+ padding: 0.4375rem;
8835
8861
  cursor: text;
8836
8862
  overflow: hidden;
8837
8863
  text-overflow: ellipsis;
@@ -8870,7 +8896,7 @@ html:lang(ar) .zen-text-input {
8870
8896
  }
8871
8897
  .zen-text-input.zen-text-input--drive,
8872
8898
  .zen-text-input.zen-text-input--drive-tablet {
8873
- padding: 11px 12px;
8899
+ padding: 0.6875rem 0.75rem;
8874
8900
  }
8875
8901
  .zen-text-input.zen-text-input--drive {
8876
8902
  font-family: var(--main-font);
@@ -8899,7 +8925,7 @@ html:lang(ar) .zen-text-input.zen-text-input--drive-tablet {
8899
8925
  font-family: var(--arabic-font-family);
8900
8926
  }
8901
8927
  .zen-text-input.zen-text-input--mobile {
8902
- padding: 11px 12px 12px;
8928
+ padding: 0.6875rem 0.75rem 0.75rem;
8903
8929
  font-family: var(--main-font);
8904
8930
  font-size: 14px;
8905
8931
  font-style: normal;
@@ -8918,7 +8944,8 @@ html:lang(ar) .zen-text-input.zen-text-input--mobile {
8918
8944
  border: 0;
8919
8945
  border-radius: 0;
8920
8946
  outline: 0;
8921
- padding: 0 0 0 4px;
8947
+ padding: 0;
8948
+ padding-inline-start: 0.25rem;
8922
8949
  -webkit-appearance: none;
8923
8950
  appearance: none;
8924
8951
  background-color: inherit;
@@ -8929,27 +8956,27 @@ html:lang(ar) .zen-text-input.zen-text-input--mobile {
8929
8956
  }
8930
8957
  .zen-input-adornments {
8931
8958
  box-sizing: border-box;
8932
- height: 32px;
8959
+ height: 2rem;
8933
8960
  border: var(--border-width-default) solid var(--borders-general);
8934
8961
  border-radius: var(--border-radius-default);
8935
8962
  background-color: var(--backgrounds-main);
8936
8963
  overflow: hidden;
8937
- padding: 8px;
8964
+ padding: 0.5rem;
8938
8965
  display: grid;
8939
- grid-gap: 8px;
8966
+ grid-gap: 0.5rem;
8940
8967
  align-items: center;
8941
8968
  }
8942
8969
  .zen-input-adornments * {
8943
8970
  box-sizing: border-box;
8944
8971
  }
8945
8972
  .zen-input-adornments.zen-input-adornments--has-start.zen-input-adornments--has-end {
8946
- grid-template-columns: 16px 1fr 16px;
8973
+ grid-template-columns: 1rem 1fr 1rem;
8947
8974
  }
8948
8975
  .zen-input-adornments.zen-input-adornments--has-start:not(.zen-input-adornments--has-end) {
8949
- grid-template-columns: 16px 1fr;
8976
+ grid-template-columns: 1rem 1fr;
8950
8977
  }
8951
8978
  .zen-input-adornments.zen-input-adornments--has-end:not(.zen-input-adornments--has-start) {
8952
- grid-template-columns: 1fr 16px;
8979
+ grid-template-columns: 1fr 1rem;
8953
8980
  }
8954
8981
  .zen-input-adornments:not(.zen-input-adornments--has-start):not(.zen-input-adornments--has-end) {
8955
8982
  grid-template-columns: 1fr;
@@ -8959,7 +8986,7 @@ html:lang(ar) .zen-text-input.zen-text-input--mobile {
8959
8986
  display: flex;
8960
8987
  }
8961
8988
  .zen-input-adornments .zen-input-adornments__wrapper--has-end.zen-input-adornments__wrapper--empty {
8962
- width: calc(100% + 24px);
8989
+ width: calc(100% + (24 / 16rem));
8963
8990
  }
8964
8991
  .zen-input-adornments:hover {
8965
8992
  border-color: var(--borders-form-field--hover);
@@ -8980,7 +9007,7 @@ html:lang(ar) .zen-text-input.zen-text-input--mobile {
8980
9007
  .zen-input-adornments__input {
8981
9008
  height: 100%;
8982
9009
  width: 100%;
8983
- height: 16px;
9010
+ height: 1rem;
8984
9011
  }
8985
9012
  .zen-input-adornments__input::placeholder {
8986
9013
  color: var(--text-secondary);
@@ -8993,7 +9020,8 @@ html:lang(ar) .zen-text-input.zen-text-input--mobile {
8993
9020
  border: 0;
8994
9021
  border-radius: 0;
8995
9022
  outline: 0;
8996
- padding: 0 0 0 4px;
9023
+ padding: 0;
9024
+ padding-inline-start: 0.25rem;
8997
9025
  -webkit-appearance: none;
8998
9026
  appearance: none;
8999
9027
  background-color: inherit;
@@ -9007,9 +9035,9 @@ html:lang(ar) .zen-text-input.zen-text-input--mobile {
9007
9035
  align-items: center;
9008
9036
  }
9009
9037
  .zen-input-adornments.zen-input-adornments--drive {
9010
- height: 44px;
9038
+ height: 2.75rem;
9011
9039
  display: grid;
9012
- grid-gap: 8px;
9040
+ grid-gap: 0.5rem;
9013
9041
  align-items: center;
9014
9042
  }
9015
9043
  .zen-input-adornments.zen-input-adornments--drive.zen-input-adornments--has-start,
@@ -9018,13 +9046,13 @@ html:lang(ar) .zen-text-input.zen-text-input--mobile {
9018
9046
  align-items: center;
9019
9047
  }
9020
9048
  .zen-input-adornments.zen-input-adornments--drive.zen-input-adornments--has-start.zen-input-adornments--has-end {
9021
- grid-template-columns: 20px 1fr 20px;
9049
+ grid-template-columns: 1.25rem 1fr 1.25rem;
9022
9050
  }
9023
9051
  .zen-input-adornments.zen-input-adornments--drive.zen-input-adornments--has-start:not(.zen-input-adornments--has-end) {
9024
- grid-template-columns: 20px 1fr;
9052
+ grid-template-columns: 1.25rem 1fr;
9025
9053
  }
9026
9054
  .zen-input-adornments.zen-input-adornments--drive.zen-input-adornments--has-end:not(.zen-input-adornments--has-start) {
9027
- grid-template-columns: 1fr 20px;
9055
+ grid-template-columns: 1fr 1.25rem;
9028
9056
  }
9029
9057
  .zen-input-adornments.zen-input-adornments--drive:not(.zen-input-adornments--has-start):not(.zen-input-adornments--has-end) {
9030
9058
  grid-template-columns: 1fr;
@@ -9034,14 +9062,14 @@ html:lang(ar) .zen-text-input.zen-text-input--mobile {
9034
9062
  display: flex;
9035
9063
  }
9036
9064
  .zen-input-adornments.zen-input-adornments--drive .zen-input-adornments__wrapper--has-end.zen-input-adornments__wrapper--empty {
9037
- width: calc(100% + 36px);
9065
+ width: calc(100% + (36 / 16rem));
9038
9066
  }
9039
9067
  .zen-input-adornments.zen-input-adornments--mobile {
9040
- height: 44px;
9068
+ height: 2.75rem;
9041
9069
  display: grid;
9042
- grid-gap: 8px;
9070
+ grid-gap: 0.5rem;
9043
9071
  align-items: center;
9044
- font-size: 17px;
9072
+ font-size: 1.0625rem;
9045
9073
  }
9046
9074
  .zen-input-adornments.zen-input-adornments--mobile.zen-input-adornments--has-start,
9047
9075
  .zen-input-adornments.zen-input-adornments--mobile.zen-input-adornments--has-end {
@@ -9049,13 +9077,13 @@ html:lang(ar) .zen-text-input.zen-text-input--mobile {
9049
9077
  align-items: center;
9050
9078
  }
9051
9079
  .zen-input-adornments.zen-input-adornments--mobile.zen-input-adornments--has-start.zen-input-adornments--has-end {
9052
- grid-template-columns: 20px 1fr 20px;
9080
+ grid-template-columns: 1.25rem 1fr 1.25rem;
9053
9081
  }
9054
9082
  .zen-input-adornments.zen-input-adornments--mobile.zen-input-adornments--has-start:not(.zen-input-adornments--has-end) {
9055
- grid-template-columns: 20px 1fr;
9083
+ grid-template-columns: 1.25rem 1fr;
9056
9084
  }
9057
9085
  .zen-input-adornments.zen-input-adornments--mobile.zen-input-adornments--has-end:not(.zen-input-adornments--has-start) {
9058
- grid-template-columns: 1fr 20px;
9086
+ grid-template-columns: 1fr 1.25rem;
9059
9087
  }
9060
9088
  .zen-input-adornments.zen-input-adornments--mobile:not(.zen-input-adornments--has-start):not(.zen-input-adornments--has-end) {
9061
9089
  grid-template-columns: 1fr;
@@ -9065,12 +9093,12 @@ html:lang(ar) .zen-text-input.zen-text-input--mobile {
9065
9093
  display: flex;
9066
9094
  }
9067
9095
  .zen-input-adornments.zen-input-adornments--mobile .zen-input-adornments__wrapper--has-end.zen-input-adornments__wrapper--empty {
9068
- width: calc(100% + 36px);
9096
+ width: calc(100% + (36 / 16rem));
9069
9097
  }
9070
9098
  .zen-input-adornments.zen-input-adornments--drive-tablet {
9071
- height: 46px;
9099
+ height: 2.875rem;
9072
9100
  display: grid;
9073
- grid-gap: 8px;
9101
+ grid-gap: 0.5rem;
9074
9102
  align-items: center;
9075
9103
  }
9076
9104
  .zen-input-adornments.zen-input-adornments--drive-tablet.zen-input-adornments--has-start,
@@ -9079,13 +9107,13 @@ html:lang(ar) .zen-text-input.zen-text-input--mobile {
9079
9107
  align-items: center;
9080
9108
  }
9081
9109
  .zen-input-adornments.zen-input-adornments--drive-tablet.zen-input-adornments--has-start.zen-input-adornments--has-end {
9082
- grid-template-columns: 20px 1fr 20px;
9110
+ grid-template-columns: 1.25rem 1fr 1.25rem;
9083
9111
  }
9084
9112
  .zen-input-adornments.zen-input-adornments--drive-tablet.zen-input-adornments--has-start:not(.zen-input-adornments--has-end) {
9085
- grid-template-columns: 20px 1fr;
9113
+ grid-template-columns: 1.25rem 1fr;
9086
9114
  }
9087
9115
  .zen-input-adornments.zen-input-adornments--drive-tablet.zen-input-adornments--has-end:not(.zen-input-adornments--has-start) {
9088
- grid-template-columns: 1fr 20px;
9116
+ grid-template-columns: 1fr 1.25rem;
9089
9117
  }
9090
9118
  .zen-input-adornments.zen-input-adornments--drive-tablet:not(.zen-input-adornments--has-start):not(.zen-input-adornments--has-end) {
9091
9119
  grid-template-columns: 1fr;
@@ -9095,7 +9123,7 @@ html:lang(ar) .zen-text-input.zen-text-input--mobile {
9095
9123
  display: flex;
9096
9124
  }
9097
9125
  .zen-input-adornments.zen-input-adornments--drive-tablet .zen-input-adornments__wrapper--has-end.zen-input-adornments__wrapper--empty {
9098
- width: calc(100% + 36px);
9126
+ width: calc(100% + (36 / 16rem));
9099
9127
  }
9100
9128
  .zen-search-input {
9101
9129
  box-sizing: border-box;
@@ -9113,16 +9141,16 @@ html:lang(ar) .zen-text-input.zen-text-input--mobile {
9113
9141
  border-color: var(--borders-form-field--error);
9114
9142
  }
9115
9143
  .zen-search-input__error {
9116
- padding-top: 4px;
9117
- padding-left: 2px;
9144
+ padding-block-start: 0.25rem;
9145
+ padding-inline-start: 0.125rem;
9118
9146
  }
9119
9147
  .zen-search-input__pre-icon {
9120
9148
  color: var(--action-secondary--default);
9121
9149
  fill: var(--action-secondary--default);
9122
9150
  }
9123
9151
  .zen-search-input .zen-search-input__close-button {
9124
- width: 16px;
9125
- height: 16px;
9152
+ width: 1rem;
9153
+ height: 1rem;
9126
9154
  display: flex;
9127
9155
  align-items: center;
9128
9156
  justify-content: center;
@@ -9135,8 +9163,8 @@ html:lang(ar) .zen-text-input.zen-text-input--mobile {
9135
9163
  .zen-search-input .zen-search-input__close-button.zen-search-input__close-button--drive,
9136
9164
  .zen-search-input .zen-search-input__close-button.zen-search-input__close-button--drive-tablet,
9137
9165
  .zen-search-input .zen-search-input__close-button.zen-search-input__close-button--mobile {
9138
- width: 20px;
9139
- height: 20px;
9166
+ width: 1.25rem;
9167
+ height: 1.25rem;
9140
9168
  }
9141
9169
  .zen-search-input .zen-search-input__close-button:hover {
9142
9170
  cursor: pointer;
@@ -9415,7 +9443,8 @@ html:lang(ar) .zen-group-button--mobile {
9415
9443
  flex-wrap: wrap;
9416
9444
  }
9417
9445
  .zen-combobox-selected__selected-item {
9418
- margin: 0 8px 8px 0;
9446
+ margin-block: 0 0.5rem;
9447
+ margin-inline: 0 0.5rem;
9419
9448
  }
9420
9449
  .zen-pill-box-item__icon.zen-pill-box-item__icon {
9421
9450
  padding: 0;
@@ -10112,10 +10141,10 @@ html:lang(ar) .zen-status-pill-popup__view-more-badge {
10112
10141
  box-sizing: border-box;
10113
10142
  cursor: pointer;
10114
10143
  background: 0 0;
10115
- padding: 8px;
10144
+ padding: 0.5rem;
10116
10145
  vertical-align: middle;
10117
10146
  border-width: 0;
10118
- margin: 1px;
10147
+ margin: 0.0625rem;
10119
10148
  border: none;
10120
10149
  background-color: transparent;
10121
10150
  fill: var(--text-secondary);
@@ -12029,7 +12058,7 @@ html:lang(ar) .zen-date-range-inner__mobile-custom-label {
12029
12058
  }
12030
12059
  .zen-radio__wrapper--reversed {
12031
12060
  flex-direction: row-reverse;
12032
- gap: 5px;
12061
+ gap: 0.3125rem;
12033
12062
  }
12034
12063
  .zen-radio__label {
12035
12064
  font-family: var(--main-font);
@@ -12040,7 +12069,7 @@ html:lang(ar) .zen-date-range-inner__mobile-custom-label {
12040
12069
  line-height: 16px;
12041
12070
  text-transform: none;
12042
12071
  text-decoration: none;
12043
- margin-left: 8px;
12072
+ margin-inline-start: 0.5rem;
12044
12073
  cursor: pointer;
12045
12074
  }
12046
12075
  html:lang(ar) .zen-radio__label {
@@ -12056,11 +12085,11 @@ html:lang(ar) .zen-radio__label {
12056
12085
  display: flex;
12057
12086
  flex-wrap: nowrap;
12058
12087
  align-items: center;
12059
- margin-left: 0;
12060
- padding: 12px 16px;
12088
+ margin-inline-start: 0;
12089
+ padding: 0.75rem 1rem;
12061
12090
  }
12062
12091
  .zen-radio__label--input-wrapper .zen-radio__label-text {
12063
- margin-left: 5px;
12092
+ margin-inline-start: 0.3125rem;
12064
12093
  width: 100%;
12065
12094
  }
12066
12095
  .zen-radio__label--input-wrapper .zen-radio__input:disabled {
@@ -12080,15 +12109,15 @@ html:lang(ar) .zen-radio--drive .zen-radio__label {
12080
12109
  font-family: var(--arabic-font-family);
12081
12110
  }
12082
12111
  .zen-radio--drive .zen-radio__input {
12083
- min-width: 24px;
12084
- max-width: 24px;
12085
- height: 24px;
12112
+ min-width: 1.5rem;
12113
+ max-width: 1.5rem;
12114
+ height: 1.5rem;
12086
12115
  }
12087
12116
  .zen-radio--drive .zen-radio__input::before {
12088
- width: 14px;
12089
- height: 14px;
12090
- top: calc(50% - 14px / 2);
12091
- left: calc(50% - 14px / 2);
12117
+ width: 0.875rem;
12118
+ height: 0.875rem;
12119
+ top: calc(50% - 0.875rem / 2);
12120
+ left: calc(50% - 0.875rem / 2);
12092
12121
  }
12093
12122
  .zen-radio__wrapper--mobile .zen-radio__label {
12094
12123
  font-family: var(--main-font);
@@ -12104,15 +12133,15 @@ html:lang(ar) .zen-radio__wrapper--mobile .zen-radio__label {
12104
12133
  font-family: var(--arabic-font-family);
12105
12134
  }
12106
12135
  .zen-radio__wrapper--mobile .zen-radio__input {
12107
- min-width: 24px;
12108
- max-width: 24px;
12109
- height: 24px;
12136
+ min-width: 1.5rem;
12137
+ max-width: 1.5rem;
12138
+ height: 1.5rem;
12110
12139
  }
12111
12140
  .zen-radio__wrapper--mobile .zen-radio__input::before {
12112
- width: 14px;
12113
- height: 14px;
12114
- top: calc(50% - 14px / 2);
12115
- left: calc(50% - 14px / 2);
12141
+ width: 0.875rem;
12142
+ height: 0.875rem;
12143
+ top: calc(50% - 0.875rem / 2);
12144
+ left: calc(50% - 0.875rem / 2);
12116
12145
  }
12117
12146
  .zen-radio--drive-tablet .zen-radio__label {
12118
12147
  font-family: var(--main-font);
@@ -12128,24 +12157,24 @@ html:lang(ar) .zen-radio--drive-tablet .zen-radio__label {
12128
12157
  font-family: var(--arabic-font-family);
12129
12158
  }
12130
12159
  .zen-radio--drive-tablet .zen-radio__input {
12131
- min-width: 24px;
12132
- max-width: 24px;
12133
- height: 24px;
12160
+ min-width: 1.5rem;
12161
+ max-width: 1.5rem;
12162
+ height: 1.5rem;
12134
12163
  }
12135
12164
  .zen-radio--drive-tablet .zen-radio__input::before {
12136
- width: 14px;
12137
- height: 14px;
12138
- top: calc(50% - 14px / 2);
12139
- left: calc(50% - 14px / 2);
12165
+ width: 0.875rem;
12166
+ height: 0.875rem;
12167
+ top: calc(50% - 0.875rem / 2);
12168
+ left: calc(50% - 0.875rem / 2);
12140
12169
  }
12141
12170
  .zen-radio__input {
12142
12171
  -webkit-appearance: none;
12143
12172
  appearance: none;
12144
12173
  position: relative;
12145
12174
  cursor: pointer;
12146
- min-width: 16px;
12147
- max-width: 16px;
12148
- height: 16px;
12175
+ min-width: 1rem;
12176
+ max-width: 1rem;
12177
+ height: 1rem;
12149
12178
  margin: 0;
12150
12179
  border: 1px solid var(--borders-form-field--hover);
12151
12180
  border-radius: 50%;
@@ -12159,11 +12188,11 @@ html:lang(ar) .zen-radio--drive-tablet .zen-radio__label {
12159
12188
  }
12160
12189
  .zen-radio__input::before {
12161
12190
  content: "";
12162
- width: 10px;
12163
- height: 10px;
12191
+ width: 0.625rem;
12192
+ height: 0.625rem;
12164
12193
  position: absolute;
12165
- top: calc(50% - 10px / 2);
12166
- left: calc(50% - 10px / 2);
12194
+ top: calc(50% - 0.625rem / 2);
12195
+ left: calc(50% - 0.625rem / 2);
12167
12196
  border-radius: 50%;
12168
12197
  transform: scale(0);
12169
12198
  transition: 120ms transform ease-in-out;
@@ -12198,19 +12227,19 @@ html:lang(ar) .zen-radio--drive-tablet .zen-radio__label {
12198
12227
  margin: 0;
12199
12228
  }
12200
12229
  .zen-radio-group__item {
12201
- padding: 12px 16px;
12230
+ padding: 0.75rem 1rem;
12202
12231
  }
12203
12232
  .zen-radio-group__item--no-paddings {
12204
12233
  padding: 0;
12205
12234
  }
12206
12235
  .zen-radio-group__item--small {
12207
- padding: 4px 0;
12236
+ padding: 0.25rem 0;
12208
12237
  }
12209
12238
  .zen-radio-group__item--small.zen-radio-group__item--no-paddings {
12210
12239
  padding: 0;
12211
12240
  }
12212
12241
  .zen-radio-group__item--small.zen-radio-group__item--no-paddings .zen-radio__label--input-wrapper {
12213
- padding: 4px;
12242
+ padding: 0.25rem;
12214
12243
  }
12215
12244
  .zen-radio-group--horizontal .zen-radio-group__wrapper {
12216
12245
  flex-direction: row;
@@ -12407,8 +12436,8 @@ html:lang(ar) .zen-radio--drive-tablet .zen-radio__label {
12407
12436
  }
12408
12437
  .zen-waiting--inline {
12409
12438
  position: relative;
12410
- width: 40px;
12411
- height: 24px;
12439
+ width: 2.5rem;
12440
+ height: 1.5rem;
12412
12441
  }
12413
12442
  .zen-waiting__spinner-text {
12414
12443
  font-family: var(--main-font);
@@ -12420,7 +12449,7 @@ html:lang(ar) .zen-radio--drive-tablet .zen-radio__label {
12420
12449
  text-transform: none;
12421
12450
  text-decoration: none;
12422
12451
  color: var(--text-secondary);
12423
- max-width: 144px;
12452
+ max-width: 9rem;
12424
12453
  text-align: center;
12425
12454
  }
12426
12455
  html:lang(ar) .zen-waiting__spinner-text {
@@ -12468,41 +12497,41 @@ html:lang(ar) .zen-waiting__spinner-text--drive-tablet {
12468
12497
  }
12469
12498
  .zen-waiting__spinner-container {
12470
12499
  display: flex;
12471
- min-height: 20px;
12500
+ min-height: 1.25rem;
12472
12501
  height: 100%;
12473
12502
  width: 100%;
12474
12503
  justify-content: center;
12475
12504
  align-items: center;
12476
12505
  flex-direction: column;
12477
- gap: 8px;
12506
+ gap: 0.5rem;
12478
12507
  }
12479
12508
  .zen-waiting__spinner {
12480
12509
  display: flex;
12481
- max-width: 64px;
12482
- max-height: 64px;
12483
- min-width: 40px;
12484
- min-height: 40px;
12510
+ max-width: 4rem;
12511
+ max-height: 4rem;
12512
+ min-width: 2.5rem;
12513
+ min-height: 2.5rem;
12485
12514
  position: relative;
12486
12515
  width: 100%;
12487
12516
  height: 100%;
12488
12517
  justify-content: center;
12489
12518
  }
12490
12519
  .zen-waiting__spinner--drive-tablet {
12491
- max-width: 40px;
12492
- max-height: 40px;
12520
+ max-width: 2.5rem;
12521
+ max-height: 2.5rem;
12493
12522
  }
12494
12523
  .zen-waiting__spinner--drive {
12495
- max-width: 40px;
12496
- max-height: 40px;
12524
+ max-width: 2.5rem;
12525
+ max-height: 2.5rem;
12497
12526
  }
12498
12527
  @media (max-width: 640px) {
12499
12528
  .zen-waiting__spinner {
12500
- max-width: 40px;
12501
- max-height: 40px;
12529
+ max-width: 2.5rem;
12530
+ max-height: 2.5rem;
12502
12531
  }
12503
12532
  }
12504
12533
  .zen-waiting__spinner-animation {
12505
- transform-origin: 32px 32px;
12534
+ transform-origin: 2rem 2rem;
12506
12535
  animation: waiting 1.5s linear infinite;
12507
12536
  }
12508
12537
  .zen-file-upload {
@@ -12510,7 +12539,7 @@ html:lang(ar) .zen-waiting__spinner-text--drive-tablet {
12510
12539
  position: relative;
12511
12540
  display: flex;
12512
12541
  flex-direction: column;
12513
- gap: 16px;
12542
+ gap: 1rem;
12514
12543
  width: 100%;
12515
12544
  }
12516
12545
  .zen-file-upload * {
@@ -12525,17 +12554,17 @@ html:lang(ar) .zen-waiting__spinner-text--drive-tablet {
12525
12554
  border-radius: var(--border-radius-default);
12526
12555
  }
12527
12556
  .zen-file-upload--drive {
12528
- gap: 20px;
12557
+ gap: 1.25rem;
12529
12558
  }
12530
12559
  .zen-file-upload--drive-tablet {
12531
- gap: 20px;
12560
+ gap: 1.25rem;
12532
12561
  }
12533
12562
  .zen-file-upload__drop-zone {
12534
12563
  display: flex;
12535
12564
  flex-direction: column;
12536
12565
  align-items: center;
12537
12566
  justify-content: center;
12538
- padding: 32px 24px;
12567
+ padding: 2rem 1.5rem;
12539
12568
  border: 2px dashed var(--borders-general);
12540
12569
  border-radius: var(--border-radius-default);
12541
12570
  background-color: var(--backgrounds-main);
@@ -12560,13 +12589,13 @@ html:lang(ar) .zen-waiting__spinner-text--drive-tablet {
12560
12589
  pointer-events: none;
12561
12590
  }
12562
12591
  .zen-file-upload__drop-zone--condensed {
12563
- padding: 24px;
12592
+ padding: 1.5rem;
12564
12593
  }
12565
12594
  .zen-file-upload__drop-zone-content {
12566
12595
  display: flex;
12567
12596
  flex-direction: column;
12568
12597
  align-items: center;
12569
- gap: 12px;
12598
+ gap: 0.75rem;
12570
12599
  }
12571
12600
  .zen-file-upload__cloud-image {
12572
12601
  width: 120px;
@@ -12588,7 +12617,7 @@ html:lang(ar) .zen-waiting__spinner-text--drive-tablet {
12588
12617
  color: var(--text-primary);
12589
12618
  display: flex;
12590
12619
  align-items: center;
12591
- gap: 4px;
12620
+ gap: 0.25rem;
12592
12621
  }
12593
12622
  html:lang(ar) .zen-file-upload__drop-zone-text {
12594
12623
  font-family: var(--arabic-font-family);
@@ -12624,15 +12653,15 @@ html:lang(ar) .zen-file-upload__supported-formats {
12624
12653
  display: flex;
12625
12654
  align-items: center;
12626
12655
  justify-content: space-between;
12627
- padding: 16px;
12656
+ padding: 1rem;
12628
12657
  background-color: var(--backgrounds-content-1);
12629
12658
  border-radius: var(--border-radius-default);
12630
- gap: 16px;
12659
+ gap: 1rem;
12631
12660
  }
12632
12661
  .zen-file-upload__template-content {
12633
12662
  display: flex;
12634
12663
  align-items: flex-start;
12635
- gap: 12px;
12664
+ gap: 0.75rem;
12636
12665
  }
12637
12666
  .zen-file-upload__template-icon {
12638
12667
  fill: var(--accents-success--detail);
@@ -12641,7 +12670,7 @@ html:lang(ar) .zen-file-upload__supported-formats {
12641
12670
  .zen-file-upload__template-info {
12642
12671
  display: flex;
12643
12672
  flex-direction: column;
12644
- gap: 4px;
12673
+ gap: 0.25rem;
12645
12674
  }
12646
12675
  .zen-file-upload__template-title {
12647
12676
  font-family: var(--main-font);
@@ -12682,7 +12711,7 @@ html:lang(ar) .zen-file-upload__template-description {
12682
12711
  text-transform: none;
12683
12712
  text-decoration: none;
12684
12713
  color: var(--text-secondary);
12685
- margin-bottom: 8px;
12714
+ margin-block-end: 0.5rem;
12686
12715
  display: block;
12687
12716
  }
12688
12717
  html:lang(ar) .zen-file-upload__section-label {
@@ -12705,23 +12734,23 @@ html:lang(ar) .zen-file-upload__section-label {
12705
12734
  padding: 0;
12706
12735
  display: flex;
12707
12736
  flex-direction: column;
12708
- gap: 10px;
12737
+ gap: 0.625rem;
12709
12738
  }
12710
12739
  .zen-file-upload__file-list-item {
12711
12740
  display: flex;
12712
12741
  flex-direction: column;
12713
- gap: 10px;
12742
+ gap: 0.625rem;
12714
12743
  }
12715
12744
  .zen-file-upload__file-item {
12716
12745
  display: flex;
12717
12746
  align-items: center;
12718
12747
  justify-content: space-between;
12719
- height: 48px;
12720
- padding: 8px;
12748
+ height: 3rem;
12749
+ padding: 0.5rem;
12721
12750
  border: 1px solid var(--borders-general);
12722
12751
  border-radius: var(--border-radius-default);
12723
12752
  background-color: var(--backgrounds-main);
12724
- gap: 10px;
12753
+ gap: 0.625rem;
12725
12754
  }
12726
12755
  .zen-file-upload__file-item--error {
12727
12756
  border: 1px solid var(--borders-form-field--error);
@@ -12729,7 +12758,7 @@ html:lang(ar) .zen-file-upload__section-label {
12729
12758
  .zen-file-upload__file-info {
12730
12759
  display: flex;
12731
12760
  align-items: center;
12732
- gap: 10px;
12761
+ gap: 0.625rem;
12733
12762
  overflow: hidden;
12734
12763
  }
12735
12764
  .zen-file-upload__file-icon {
@@ -13343,6 +13372,7 @@ html:lang(ar) .zen-groups-filter .zen-groups-filter__input::placeholder {
13343
13372
  }
13344
13373
  .zen-groups-filter__popup.zen-groups-filter__popup {
13345
13374
  z-index: 11001;
13375
+ overflow-y: hidden;
13346
13376
  }
13347
13377
  .zen-groups-filter__popup.zen-groups-filter__popup.zen-groups-filter__popup--inactive {
13348
13378
  z-index: 10999;
@@ -14044,6 +14074,19 @@ html:lang(ar) .zen-list-item__secondary {
14044
14074
  .zen-list-item--clickable {
14045
14075
  cursor: pointer;
14046
14076
  }
14077
+ .zen-list-item--vertical .zen-list-item__identifier,
14078
+ .zen-list-item--wrap .zen-list-item__identifier {
14079
+ flex-direction: column;
14080
+ align-items: initial;
14081
+ row-gap: 4px;
14082
+ }
14083
+ .zen-list-item--wrap .zen-list-item__secondary {
14084
+ white-space: normal;
14085
+ overflow: hidden;
14086
+ display: -webkit-box;
14087
+ -webkit-line-clamp: 2;
14088
+ -webkit-box-orient: vertical;
14089
+ }
14047
14090
  @media (max-width: 640px) {
14048
14091
  .zen-list-item__identifier {
14049
14092
  flex-direction: column;
@@ -15370,7 +15413,7 @@ html:lang(ar) .zen-range-field {
15370
15413
  .zen-range-field--column.zen-range-field--min .zen-range-field__error {
15371
15414
  grid-column: 1 / span 3;
15372
15415
  grid-row: 2;
15373
- min-height: 24px;
15416
+ min-height: 1.5rem;
15374
15417
  }
15375
15418
  .zen-range-field--column.zen-range-field--max .zen-range-field__label {
15376
15419
  grid-column: 1;
@@ -15387,30 +15430,30 @@ html:lang(ar) .zen-range-field {
15387
15430
  .zen-range-field--column.zen-range-field--max .zen-range-field__error {
15388
15431
  grid-column: 1 / span 3;
15389
15432
  grid-row: 4;
15390
- min-height: 24px;
15433
+ min-height: 1.5rem;
15391
15434
  }
15392
15435
  .zen-range-field--column .zen-range-field__label {
15393
- min-width: 28px;
15394
- max-width: 56px;
15436
+ min-width: 1.75rem;
15437
+ max-width: 3.5rem;
15395
15438
  }
15396
15439
  .zen-range-field--column .zen-range-field__input-container {
15397
15440
  width: 100%;
15398
15441
  }
15399
15442
  .zen-range-field--column .zen-range-field__sense {
15400
- min-width: 28px;
15401
- max-width: 56px;
15443
+ min-width: 1.75rem;
15444
+ max-width: 3.5rem;
15402
15445
  }
15403
15446
  .zen-range-field--row .zen-range-field__label {
15404
- max-width: 32px;
15405
- min-width: 24px;
15447
+ max-width: 2rem;
15448
+ min-width: 1.5rem;
15406
15449
  }
15407
15450
  .zen-range-field--row .zen-range-field__input-container {
15408
- max-width: 64px;
15409
- min-width: 64px;
15451
+ max-width: 4rem;
15452
+ min-width: 4rem;
15410
15453
  }
15411
15454
  .zen-range-field--row .zen-range-field__sense {
15412
- max-width: 32px;
15413
- min-width: 24px;
15455
+ max-width: 2rem;
15456
+ min-width: 1.5rem;
15414
15457
  }
15415
15458
  .zen-range-field--row.zen-range-field--min {
15416
15459
  display: contents;
@@ -15465,13 +15508,13 @@ html:lang(ar) .zen-range-field {
15465
15508
  text-decoration: none;
15466
15509
  color: var(--text-error-message);
15467
15510
  fill: var(--text-error-message);
15468
- margin-top: 4px;
15511
+ margin-top: 0.25rem;
15469
15512
  }
15470
15513
  html:lang(ar) .zen-range-field__error {
15471
15514
  font-family: var(--arabic-font-family);
15472
15515
  }
15473
15516
  .zen-range-field__error-text {
15474
- margin-left: 2px;
15517
+ margin-inline-start: 0.125rem;
15475
15518
  }
15476
15519
  .zen-range-field__label {
15477
15520
  font-family: var(--main-font);
@@ -15502,7 +15545,7 @@ html:lang(ar) .zen-range-field__label--mobile {
15502
15545
  font-family: var(--arabic-font-family);
15503
15546
  }
15504
15547
  .zen-range-field__input {
15505
- height: 32px;
15548
+ height: 2rem;
15506
15549
  }
15507
15550
  .zen-range-field__input::-webkit-inner-spin-button,
15508
15551
  .zen-range-field__input::-webkit-outer-spin-button {
@@ -15510,7 +15553,7 @@ html:lang(ar) .zen-range-field__label--mobile {
15510
15553
  margin: 0;
15511
15554
  }
15512
15555
  .zen-range-field__input--mobile {
15513
- height: 44px;
15556
+ height: 2.75rem;
15514
15557
  }
15515
15558
  .zen-range-field .zen-range-field__input:focus {
15516
15559
  border: var(--border-width-default) solid var(--borders-form-field--active);
@@ -15567,42 +15610,42 @@ html:lang(ar) .zen-range {
15567
15610
  font-family: var(--arabic-font-family);
15568
15611
  }
15569
15612
  .zen-range__fields-wrapper {
15570
- padding: 12px 16px;
15613
+ padding: 0.75rem 1rem;
15571
15614
  }
15572
15615
  .zen-range__fields-container {
15573
15616
  display: grid;
15574
15617
  }
15575
15618
  .zen-range__fields-container--row {
15576
- min-width: 296px;
15577
- max-width: 328px;
15619
+ min-width: 18.5rem;
15620
+ max-width: 20.5rem;
15578
15621
  display: grid;
15579
15622
  align-items: center;
15580
15623
  justify-items: start;
15581
- grid-template-columns: minmax(24px, 32px) minmax(64px, 64px) minmax(24px, 32px) minmax(24px, 32px) minmax(64px, 64px) minmax(24px, 32px);
15582
- row-gap: 4px;
15583
- column-gap: 8px;
15624
+ grid-template-columns: minmax(1.5rem, 2rem) minmax(4rem, 4rem) minmax(1.5rem, 2rem) minmax(1.5rem, 2rem) minmax(4rem, 4rem) minmax(1.5rem, 2rem);
15625
+ row-gap: 0.25rem;
15626
+ column-gap: 0.5rem;
15584
15627
  }
15585
15628
  .zen-range__fields-container--column {
15586
- min-width: 200px;
15587
- max-width: 228px;
15629
+ min-width: 12.5rem;
15630
+ max-width: 14.25rem;
15588
15631
  display: grid;
15589
15632
  grid-template-columns: minmax(min-content, auto) minmax(auto, 168px) minmax(0, auto);
15590
15633
  grid-template-rows: auto auto;
15591
- gap: 4px 8px;
15634
+ gap: 0.25rem 0.5rem;
15592
15635
  align-items: center;
15593
15636
  justify-items: start;
15594
15637
  }
15595
15638
  .zen-range__trigger-button {
15596
- max-width: 200px;
15639
+ max-width: 12.5rem;
15597
15640
  }
15598
15641
  .zen-range__content {
15599
15642
  display: grid;
15600
15643
  margin: 0;
15601
- padding: 4px 0 0;
15644
+ padding: 0.25rem 0 0;
15602
15645
  }
15603
15646
  .zen-range__label {
15604
15647
  width: 100%;
15605
- height: 40px;
15648
+ height: 2.5rem;
15606
15649
  font-family: var(--main-font);
15607
15650
  font-size: 12px;
15608
15651
  font-style: normal;
@@ -15612,7 +15655,7 @@ html:lang(ar) .zen-range {
15612
15655
  text-transform: none;
15613
15656
  text-decoration: none;
15614
15657
  color: var(--text-secondary);
15615
- padding: 12px 16px 11px 16px;
15658
+ padding: 0.75rem 1rem 0.6875rem 1rem;
15616
15659
  border-bottom: 1px solid var(--backgrounds-content-1);
15617
15660
  }
15618
15661
  html:lang(ar) .zen-range__label {
@@ -15634,12 +15677,12 @@ html:lang(ar) .zen-range__label {
15634
15677
  .zen-range__clear-button,
15635
15678
  .zen-range__cancel-button,
15636
15679
  .zen-range__apply-button {
15637
- margin-right: 8px;
15638
- margin-top: 8px;
15639
- margin-bottom: 4px;
15680
+ margin-inline-end: 0.5rem;
15681
+ margin-top: 0.5rem;
15682
+ margin-bottom: 0.25rem;
15640
15683
  }
15641
15684
  .zen-range__clear-button {
15642
- margin-left: 8px;
15685
+ margin-inline-start: 0.5rem;
15643
15686
  }
15644
15687
  .zen-range--error .zen-range__trigger-button {
15645
15688
  border: 1px solid var(--text-error-message);
@@ -15673,7 +15716,7 @@ html:lang(ar) .zen-range-popup.zen-range-popup {
15673
15716
  display: grid;
15674
15717
  grid-template-columns: minmax(min-content, auto) minmax(auto, 168px) minmax(0, auto);
15675
15718
  grid-template-rows: auto auto;
15676
- gap: 4px 8px;
15719
+ gap: 0.25rem 0.5rem;
15677
15720
  align-items: center;
15678
15721
  justify-items: start;
15679
15722
  }
@@ -15682,9 +15725,9 @@ html:lang(ar) .zen-range-popup.zen-range-popup {
15682
15725
  display: grid;
15683
15726
  align-items: center;
15684
15727
  justify-items: start;
15685
- grid-template-columns: minmax(24px, 32px) minmax(64px, 64px) minmax(24px, 32px) minmax(24px, 32px) minmax(64px, 64px) minmax(24px, 32px);
15686
- row-gap: 4px;
15687
- column-gap: 8px;
15728
+ grid-template-columns: minmax(1.5rem, 2rem) minmax(4rem, 4rem) minmax(1.5rem, 2rem) minmax(1.5rem, 2rem) minmax(4rem, 4rem) minmax(1.5rem, 2rem);
15729
+ row-gap: 0.25rem;
15730
+ column-gap: 0.5rem;
15688
15731
  }
15689
15732
  .zen-filters-bar-side-panel-range__item--column {
15690
15733
  min-width: 136px;
@@ -17462,6 +17505,15 @@ html:lang(ar) .zen-mini-tabs {
17462
17505
  flex-direction: column;
17463
17506
  gap: var(--nav-gap);
17464
17507
  }
17508
+ .zen-nav__empty-state {
17509
+ min-height: 100%;
17510
+ display: flex;
17511
+ align-items: center;
17512
+ justify-content: center;
17513
+ padding: 16px 12px 24px;
17514
+ box-sizing: border-box;
17515
+ text-align: center;
17516
+ }
17465
17517
  .zen-nav__footer {
17466
17518
  flex: 0 0 auto;
17467
17519
  }
@@ -17929,9 +17981,9 @@ html:lang(ar) .zen-nav-edit-list__header {
17929
17981
  display: flex;
17930
17982
  flex-direction: row;
17931
17983
  justify-content: space-between;
17932
- padding: 16px 16px 16px 16px;
17933
- max-width: 490px;
17934
- min-width: 490px;
17984
+ padding: 1rem;
17985
+ max-width: 30.625rem;
17986
+ min-width: 30.625rem;
17935
17987
  border-radius: 8px;
17936
17988
  }
17937
17989
  .zen-push * {
@@ -17943,13 +17995,13 @@ html:lang(ar) .zen-push {
17943
17995
  .zen-push::before {
17944
17996
  content: "";
17945
17997
  position: absolute;
17946
- top: 0px;
17947
- left: -6px;
17948
- width: 7px;
17998
+ top: 0;
17999
+ inset-inline-start: -0.375rem;
18000
+ width: 0.4375rem;
17949
18001
  height: 100%;
17950
- border-top-left-radius: 15px;
17951
- border-bottom-left-radius: 15px;
17952
- border-left: 5px solid transparent;
18002
+ border-start-start-radius: 15px;
18003
+ border-end-start-radius: 15px;
18004
+ border-inline-start: 5px solid transparent;
17953
18005
  }
17954
18006
  .zen-push__header {
17955
18007
  font-family: var(--main-font);
@@ -17980,7 +18032,7 @@ html:lang(ar) .zen-push__header {
17980
18032
  text-transform: none;
17981
18033
  text-decoration: none;
17982
18034
  flex-grow: 1;
17983
- padding-top: 8px;
18035
+ padding-top: 0.5rem;
17984
18036
  display: flex;
17985
18037
  flex-direction: column;
17986
18038
  }
@@ -17989,20 +18041,20 @@ html:lang(ar) .zen-push__body {
17989
18041
  }
17990
18042
  .zen-push__body-buttons {
17991
18043
  display: flex;
17992
- gap: 8px;
17993
- margin-left: auto;
18044
+ gap: 0.5rem;
18045
+ margin-inline-start: auto;
17994
18046
  }
17995
18047
  .zen-push__button {
17996
- font-size: 12px;
18048
+ font-size: 0.75rem;
17997
18049
  }
17998
18050
  .zen-push__text {
17999
- font-size: 12px;
18000
- padding-bottom: 16px;
18051
+ font-size: 0.75rem;
18052
+ padding-bottom: 1rem;
18001
18053
  }
18002
18054
  .zen-push__title {
18003
18055
  font-style: normal;
18004
- padding-bottom: 8px;
18005
- padding-top: 2px;
18056
+ padding-bottom: 0.5rem;
18057
+ padding-top: 0.125rem;
18006
18058
  }
18007
18059
  .zen-push__title--error {
18008
18060
  color: var(--accents-error--detail);
@@ -18020,8 +18072,8 @@ html:lang(ar) .zen-push__body {
18020
18072
  display: flex;
18021
18073
  align-items: center;
18022
18074
  justify-content: center;
18023
- width: 20px;
18024
- height: 20px;
18075
+ width: 1.25rem;
18076
+ height: 1.25rem;
18025
18077
  background: none;
18026
18078
  border: none;
18027
18079
  padding: 0;
@@ -18082,7 +18134,7 @@ html:lang(ar) .zen-push__body {
18082
18134
  fill: var(--accents-error--detail);
18083
18135
  }
18084
18136
  .zen-push--error::before {
18085
- border-left-color: var(--action-destructive--active);
18137
+ border-inline-start-color: var(--action-destructive--active);
18086
18138
  }
18087
18139
  .zen-push--error .zen-push__close-button {
18088
18140
  fill: var(--accents-error--detail);
@@ -18099,7 +18151,7 @@ html:lang(ar) .zen-push__body {
18099
18151
  fill: var(--accents-general--detail);
18100
18152
  }
18101
18153
  .zen-push--info::before {
18102
- border-left-color: var(--accents-general--detail);
18154
+ border-inline-start-color: var(--accents-general--detail);
18103
18155
  }
18104
18156
  .zen-push--info .zen-push__close-button {
18105
18157
  fill: var(--accents-general--detail);
@@ -18116,7 +18168,7 @@ html:lang(ar) .zen-push__body {
18116
18168
  fill: var(--accents-success--detail);
18117
18169
  }
18118
18170
  .zen-push--success::before {
18119
- border-left-color: var(--accents-success--detail);
18171
+ border-inline-start-color: var(--accents-success--detail);
18120
18172
  }
18121
18173
  .zen-push--success .zen-push__close-button {
18122
18174
  fill: var(--accents-success--detail);
@@ -18133,7 +18185,7 @@ html:lang(ar) .zen-push__body {
18133
18185
  fill: var(--accents-warning--detail);
18134
18186
  }
18135
18187
  .zen-push--warning::before {
18136
- border-left-color: var(--accents-warning--detail);
18188
+ border-inline-start-color: var(--accents-warning--detail);
18137
18189
  }
18138
18190
  .zen-push--warning .zen-push__close-button {
18139
18191
  fill: var(--accents-success--detail);
@@ -18145,7 +18197,7 @@ html:lang(ar) .zen-push__body {
18145
18197
  fill: var(--accents-success--main);
18146
18198
  }
18147
18199
  .zen-push__icon {
18148
- padding-right: 9px;
18200
+ padding-inline-end: 0.5625rem;
18149
18201
  }
18150
18202
  .zen-push__icon--error {
18151
18203
  fill: var(--accents-error--detail);
@@ -18196,7 +18248,7 @@ html:lang(ar) .zen-push__body {
18196
18248
  }
18197
18249
  @media (max-width: 540px) {
18198
18250
  .zen-push {
18199
- min-width: 150px;
18251
+ min-width: 9.375rem;
18200
18252
  }
18201
18253
  }
18202
18254
  .zen-overview {
@@ -18529,13 +18581,13 @@ html:lang(ar) .zen-pill-actionable__block {
18529
18581
  box-sizing: border-box;
18530
18582
  }
18531
18583
  .zen-progress--large {
18532
- height: 16px;
18584
+ height: 1rem;
18533
18585
  }
18534
18586
  .zen-progress--medium {
18535
- height: 12px;
18587
+ height: 0.75rem;
18536
18588
  }
18537
18589
  .zen-progress--small {
18538
- height: 8px;
18590
+ height: 0.5rem;
18539
18591
  }
18540
18592
  .zen-progress__bar {
18541
18593
  background-color: var(--chart-sequential-blue-5);
@@ -18685,7 +18737,7 @@ html:lang(ar) .zen-sort-container.zen-sort-container--drive-tablet .zen-sort-con
18685
18737
  text-transform: none;
18686
18738
  text-decoration: none;
18687
18739
  display: grid;
18688
- gap: 4px;
18740
+ gap: 0.25rem;
18689
18741
  }
18690
18742
  html:lang(ar) .zen-stepper-field {
18691
18743
  font-family: var(--arabic-font-family);
@@ -18704,24 +18756,24 @@ html:lang(ar) .zen-stepper-field {
18704
18756
  }
18705
18757
  .zen-stepper-field__controls {
18706
18758
  display: grid;
18707
- width: 16px;
18708
- height: 16px;
18759
+ width: 1rem;
18760
+ height: 1rem;
18709
18761
  position: absolute;
18710
- top: 6px;
18762
+ top: 0.375rem;
18711
18763
  }
18712
18764
  .zen-stepper-field__controls:not(:hover),
18713
18765
  .zen-stepper-field__controls:not(:active) {
18714
18766
  visibility: hidden;
18715
18767
  }
18716
18768
  .zen-stepper-field__control {
18717
- height: 10px;
18769
+ height: 0.625rem;
18718
18770
  padding: 0;
18719
18771
  fill: var(--action-secondary--default);
18720
18772
  }
18721
18773
  .zen-stepper-field__input {
18722
18774
  /* For Chrome, Safari, Edge, Opera */
18723
18775
  /* For Firefox */
18724
- height: 32px;
18776
+ height: 2rem;
18725
18777
  }
18726
18778
  .zen-stepper-field__input::-webkit-outer-spin-button,
18727
18779
  .zen-stepper-field__input::-webkit-inner-spin-button {
@@ -18739,7 +18791,7 @@ html:lang(ar) .zen-stepper-field {
18739
18791
  border-color: var(--borders-form-field--active);
18740
18792
  }
18741
18793
  .zen-stepper-field__input.zen-text-input {
18742
- padding-right: 24px;
18794
+ padding-inline-end: 1.5rem;
18743
18795
  }
18744
18796
  .zen-stepper-field__input--error:not(:disabled) {
18745
18797
  border-color: var(--borders-form-field--error);
@@ -18767,24 +18819,24 @@ html:lang(ar) .zen-stepper-field {
18767
18819
  }
18768
18820
  .zen-stepper-field.zen-stepper-field--drive .zen-stepper-field__controls,
18769
18821
  .zen-stepper-field.zen-stepper-field--drive-tablet .zen-stepper-field__controls {
18770
- width: 20px;
18771
- height: 20px;
18822
+ width: 1.25rem;
18823
+ height: 1.25rem;
18772
18824
  }
18773
18825
  .zen-stepper-field.zen-stepper-field--drive .zen-stepper-field__input,
18774
18826
  .zen-stepper-field.zen-stepper-field--drive-tablet .zen-stepper-field__input {
18775
- min-height: 48px;
18827
+ min-height: 3rem;
18776
18828
  }
18777
18829
  .zen-stepper-field.zen-stepper-field--drive .zen-stepper-field__controls,
18778
18830
  .zen-stepper-field.zen-stepper-field--drive-tablet .zen-stepper-field__controls {
18779
- top: 14px;
18831
+ top: 0.875rem;
18780
18832
  }
18781
18833
  .zen-stepper-field.zen-stepper-field--drive.zen-stepper-field--drive .zen-text-input,
18782
18834
  .zen-stepper-field.zen-stepper-field--drive-tablet.zen-stepper-field--drive .zen-text-input {
18783
- padding-right: 26px;
18835
+ padding-inline-end: 1.625rem;
18784
18836
  }
18785
18837
  .zen-stepper-field.zen-stepper-field--drive.zen-stepper-field--drive-tablet .zen-text-input,
18786
18838
  .zen-stepper-field.zen-stepper-field--drive-tablet.zen-stepper-field--drive-tablet .zen-text-input {
18787
- padding-right: 25px;
18839
+ padding-inline-end: 1.5625rem;
18788
18840
  }
18789
18841
  .zen-stepper-field.zen-stepper-field--mobile {
18790
18842
  font-family: var(--main-font);
@@ -18800,17 +18852,17 @@ html:lang(ar) .zen-stepper-field.zen-stepper-field--mobile {
18800
18852
  font-family: var(--arabic-font-family);
18801
18853
  }
18802
18854
  .zen-stepper-field.zen-stepper-field--mobile .zen-stepper-field__controls {
18803
- width: 20px;
18804
- height: 20px;
18855
+ width: 1.25rem;
18856
+ height: 1.25rem;
18805
18857
  }
18806
18858
  .zen-stepper-field.zen-stepper-field--mobile .zen-stepper-field__input {
18807
- min-height: 48px;
18859
+ min-height: 3rem;
18808
18860
  }
18809
18861
  .zen-stepper-field.zen-stepper-field--mobile .zen-stepper-field__controls {
18810
- top: 14px;
18862
+ top: 0.875rem;
18811
18863
  }
18812
18864
  .zen-stepper-field.zen-stepper-field--mobile.zen-stepper-field--mobile .zen-text-input {
18813
- padding-right: 26px;
18865
+ padding-inline-end: 1.625rem;
18814
18866
  }
18815
18867
  .zen-summaries__row {
18816
18868
  display: flex;
@@ -18987,14 +19039,14 @@ html:lang(ar) .zen-two-options-switcher {
18987
19039
  }
18988
19040
  .zen-two-options-switcher__label {
18989
19041
  cursor: pointer;
18990
- padding: 3px;
19042
+ padding: 0.1875rem;
18991
19043
  color: var(--text-primary);
18992
19044
  }
18993
19045
  .zen-two-options-switcher__label--left {
18994
- margin-right: 6px;
19046
+ margin-inline-end: 0.375rem;
18995
19047
  }
18996
19048
  .zen-two-options-switcher__label--right {
18997
- margin-left: 6px;
19049
+ margin-inline-start: 0.375rem;
18998
19050
  }
18999
19051
  .zen-two-options-switcher__input {
19000
19052
  position: absolute;
@@ -19015,12 +19067,12 @@ html:lang(ar) .zen-two-options-switcher {
19015
19067
  display: flex;
19016
19068
  align-items: center;
19017
19069
  justify-content: flex-start;
19018
- width: 30px;
19019
- min-width: 30px;
19020
- height: 16px;
19021
- min-height: 16px;
19022
- border-radius: 16px;
19023
- padding: 2px;
19070
+ width: 1.875rem;
19071
+ min-width: 1.875rem;
19072
+ height: 1rem;
19073
+ min-height: 1rem;
19074
+ border-radius: 1rem;
19075
+ padding: 0.125rem;
19024
19076
  background-color: var(--backgroundSwitcher);
19025
19077
  overflow: visible;
19026
19078
  position: relative;
@@ -19029,21 +19081,21 @@ html:lang(ar) .zen-two-options-switcher {
19029
19081
  .zen-two-options-switcher-control__focus {
19030
19082
  display: none;
19031
19083
  position: absolute;
19032
- width: 26px;
19033
- min-width: 26px;
19034
- height: 26px;
19035
- min-height: 26px;
19084
+ width: 1.625rem;
19085
+ min-width: 1.625rem;
19086
+ height: 1.625rem;
19087
+ min-height: 1.625rem;
19036
19088
  border-radius: 50%;
19037
19089
  opacity: 0.4;
19038
- top: -5px;
19090
+ top: -0.3125rem;
19039
19091
  background-color: var(--backgroundSwitcher);
19040
- left: -5px;
19092
+ inset-inline-start: -0.3125rem;
19041
19093
  }
19042
19094
  .zen-two-options-switcher-control__runner {
19043
- width: 12px;
19044
- min-width: 12px;
19045
- height: 12px;
19046
- min-height: 12px;
19095
+ width: 0.75rem;
19096
+ min-width: 0.75rem;
19097
+ height: 0.75rem;
19098
+ min-height: 0.75rem;
19047
19099
  border-radius: 50%;
19048
19100
  background-color: var(--backgroundRunner);
19049
19101
  }
@@ -19060,5 +19112,5 @@ html:lang(ar) .zen-two-options-switcher {
19060
19112
  justify-content: flex-end;
19061
19113
  }
19062
19114
  .zen-two-options-switcher-control--right .zen-two-options-switcher-control__focus {
19063
- left: 10px;
19115
+ inset-inline-start: 0.625rem;
19064
19116
  }