@sbb-esta/lyne-elements-dev 5.0.0-next.3-dev.1779265349 → 5.0.0-next.3-dev.1779268556

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 (651) hide show
  1. package/_index.scss +6 -2
  2. package/autocomplete/autocomplete-base-element.js +1 -1
  3. package/autocomplete/autocomplete.component.js +1 -1
  4. package/{autocomplete-base-element-6leI6UF4.js → autocomplete-base-element-jaXVQcA7.js} +11 -9
  5. package/autocomplete.js +1 -1
  6. package/autocomplete.pure.js +1 -1
  7. package/breadcrumb/breadcrumb-group/breadcrumb-group.component.js +1 -1
  8. package/{breadcrumb-group.component-XPdnV6-a.js → breadcrumb-group.component-a49dItu9.js} +23 -19
  9. package/breadcrumb.js +1 -1
  10. package/breadcrumb.pure.js +1 -1
  11. package/button/mini-button-group/mini-button-group.component.js +1 -1
  12. package/button.js +1 -1
  13. package/button.pure.js +1 -1
  14. package/calendar/calendar/calendar.component.js +1 -1
  15. package/{calendar.component-CiT0mE7S.js → calendar.component-DKgkIocz.js} +37 -33
  16. package/calendar.js +1 -1
  17. package/calendar.pure.js +1 -1
  18. package/container/sticky-bar/sticky-bar.component.js +1 -1
  19. package/container.js +1 -1
  20. package/container.pure.js +1 -1
  21. package/core/mixins/named-slot-list-mixin.js +14 -14
  22. package/core/styles/_index.scss +1 -12
  23. package/core/styles/_theme.scss +16 -0
  24. package/core/styles/core/functions.scss +0 -8
  25. package/core/styles/{a11y.scss → features/a11y.scss} +2 -2
  26. package/core/styles/{animation.scss → features/animation.scss} +1 -1
  27. package/core/styles/features/color-scheme.scss +11 -0
  28. package/core/styles/{core.scss → features/core.scss} +138 -171
  29. package/core/styles/{image.scss → features/image.scss} +29 -7
  30. package/core/styles/{layout.private.scss → features/layout.private.scss} +5 -4
  31. package/core/styles/{layout.scss → features/layout.scss} +1 -1
  32. package/core/styles/{lists.scss → features/lists.scss} +1 -1
  33. package/core/styles/{scrollbar.scss → features/scrollbar.scss} +1 -1
  34. package/core/styles/features/typography.private.scss +9 -0
  35. package/core/styles/{typography.scss → features/typography.scss} +2 -2
  36. package/core/styles/internals/button-reset.scss +5 -0
  37. package/core/styles/{host-scrollbar.scss → internals/host-scrollbar.scss} +1 -1
  38. package/core/styles/internals/list-reset.scss +6 -0
  39. package/core/styles/internals/popover-reset.scss +6 -0
  40. package/core/styles/{screen-reader-only.scss → internals/screen-reader-only.scss} +1 -1
  41. package/core/styles/mixins/{a11y.scss → _a11y.scss} +0 -21
  42. package/core/styles/mixins/{helpers.scss → _helpers.scss} +3 -14
  43. package/core/styles/mixins/{lists.scss → _lists.scss} +8 -12
  44. package/core/styles/mixins/{pearl-chain-bullet.scss → _pearl-chain-bullet.scss} +5 -5
  45. package/core/styles/mixins/_reset.scss +38 -0
  46. package/core/styles/mixins/{typo.scss → _typo.scss} +23 -75
  47. package/core/styles/styles.js +2 -2
  48. package/core.js +2 -2
  49. package/custom-elements.json +68 -22
  50. package/development/autocomplete/autocomplete-base-element.d.ts.map +1 -1
  51. package/development/autocomplete/autocomplete-base-element.js +1 -1
  52. package/development/autocomplete/autocomplete.component.js +1 -1
  53. package/development/autocomplete-base-element-JxM7QbC4.js +697 -0
  54. package/development/autocomplete.js +1 -1
  55. package/development/autocomplete.pure.js +1 -1
  56. package/development/block-link-common-DNvRfeay.js +1 -1
  57. package/development/breadcrumb/breadcrumb-group/breadcrumb-group.component.d.ts.map +1 -1
  58. package/development/breadcrumb/breadcrumb-group/breadcrumb-group.component.js +1 -1
  59. package/development/breadcrumb-group.component-DvY1hq51.js +197 -0
  60. package/development/breadcrumb.component-D6Cd2FPo.js +1 -1
  61. package/development/breadcrumb.js +1 -1
  62. package/development/breadcrumb.pure.js +1 -1
  63. package/development/button/mini-button-group/mini-button-group.component.js +1 -1
  64. package/development/button-common-C-A7Dulr.js +1 -1
  65. package/development/button.js +1 -1
  66. package/development/button.pure.js +1 -1
  67. package/development/calendar/calendar/calendar.component.d.ts.map +1 -1
  68. package/development/calendar/calendar/calendar.component.js +1 -1
  69. package/development/calendar-cell-base-element-mWRSDeWc.js +1 -1
  70. package/development/calendar.component-CgEXjBeQ.js +1473 -0
  71. package/development/calendar.js +1 -1
  72. package/development/calendar.pure.js +1 -1
  73. package/development/card.component-CL2gHoyP.js +1 -1
  74. package/development/chip-label.component-DHHNtvTt.js +1 -1
  75. package/development/{compact-paginator.component-BgkpxaaD.js → compact-paginator.component-m8MASSB7.js} +1 -1
  76. package/development/container/sticky-bar/sticky-bar.component.js +1 -1
  77. package/development/container.js +1 -1
  78. package/development/container.pure.js +1 -1
  79. package/development/core/mixins/named-slot-list-mixin.js +3 -3
  80. package/development/core/styles/styles.d.ts +3 -1
  81. package/development/core/styles/styles.d.ts.map +1 -1
  82. package/development/core/styles/styles.js +2 -2
  83. package/development/core.js +2 -2
  84. package/development/date-input.component-HxRyCudr.js +1 -1
  85. package/development/dialog-actions.component-e0ZTTUin.js +1 -1
  86. package/development/dialog.component-D8B2dVck.js +1 -1
  87. package/development/error.component-WCkiwM7_.js +1 -1
  88. package/development/expansion-panel-header.component-gg5A_7Pz.js +1 -1
  89. package/development/expansion-panel.component-DcFrWkIt.js +1 -1
  90. package/development/file-selector/common/file-selector-common.js +1 -1
  91. package/development/file-selector/file-selector-dropzone/file-selector-dropzone.component.js +1 -1
  92. package/development/file-selector-common-Dd0S0qE3.js +421 -0
  93. package/development/{file-selector-dropzone.component-B84OL4Xd.js → file-selector-dropzone.component-DWLdqMmI.js} +2 -2
  94. package/development/file-selector.js +2 -2
  95. package/development/file-selector.pure.js +2 -2
  96. package/development/flip-card/flip-card/flip-card.component.d.ts.map +1 -1
  97. package/development/flip-card/flip-card/flip-card.component.js +1 -1
  98. package/development/flip-card.component-MmiS-x-W.js +189 -0
  99. package/development/flip-card.js +1 -1
  100. package/development/flip-card.pure.js +1 -1
  101. package/development/footer.component-K2bWizjw.js +1 -1
  102. package/development/form-field.component-CPWBCHer.js +1 -1
  103. package/development/header/common/header-action-common.js +1 -1
  104. package/development/header-action-common-BYB-HYtn.js +86 -0
  105. package/development/header.component-C4e7CNql.js +1 -1
  106. package/development/header.js +1 -1
  107. package/development/header.pure.js +1 -1
  108. package/development/inline-link-common-BV6oAtAA.js +18 -0
  109. package/development/link/common/inline-link-common.js +1 -1
  110. package/development/link-common-2RGn9Qz_.js +1 -1
  111. package/development/link-list/link-list.component.js +1 -1
  112. package/development/link-list-anchor/link-list-anchor.component.js +1 -1
  113. package/development/{link-list-anchor.component-Csb-FOQL.js → link-list-anchor.component-BMtCbCRD.js} +2 -2
  114. package/development/link-list-anchor.js +1 -1
  115. package/development/link-list-anchor.pure.js +1 -1
  116. package/development/link-list.component-CLxhjWR7.js +97 -0
  117. package/development/link-list.js +1 -1
  118. package/development/link-list.pure.js +1 -1
  119. package/development/link.js +1 -1
  120. package/development/link.pure.js +1 -1
  121. package/development/loading-indicator-circle.component-Cfjw5vyz.js +1 -1
  122. package/development/logo.component-DYKgAgq0.js +1 -1
  123. package/development/menu/common/menu-action-common.js +1 -1
  124. package/development/menu/menu/menu.component.d.ts.map +1 -1
  125. package/development/menu/menu/menu.component.js +1 -1
  126. package/development/menu-action-common-DL4t4_-J.js +32 -0
  127. package/development/menu.component-3qEIFutc.js +369 -0
  128. package/development/menu.js +2 -2
  129. package/development/menu.pure.js +2 -2
  130. package/development/message/message.component.js +1 -1
  131. package/development/{message.component-CdO5GyE2.js → message.component-BJ-84a0B.js} +2 -2
  132. package/development/message.js +1 -1
  133. package/development/message.pure.js +1 -1
  134. package/development/{mini-button-group.component-VYKZf1rq.js → mini-button-group.component-C88pIaaL.js} +2 -2
  135. package/development/mini-button-link.component-kpRsi8I2.js +1 -1
  136. package/development/navigation/navigation/navigation.component.d.ts.map +1 -1
  137. package/development/navigation/navigation/navigation.component.js +1 -1
  138. package/development/navigation/navigation-list/navigation-list.component.js +1 -1
  139. package/development/navigation/navigation-marker/navigation-marker.component.js +1 -1
  140. package/development/navigation-action-common-wrzPCkMT.js +1 -1
  141. package/development/navigation-list.component-CU-SGC8c.js +86 -0
  142. package/development/navigation-marker.component-CTk9U0kA.js +120 -0
  143. package/development/navigation-section.component-iaypc6yQ.js +1 -1
  144. package/development/navigation.component-Bu1wVUNx.js +319 -0
  145. package/development/navigation.js +3 -3
  146. package/development/navigation.pure.js +3 -3
  147. package/development/option/option/option.component.js +1 -1
  148. package/development/option/option-styles.d.ts +2 -0
  149. package/development/option/option-styles.d.ts.map +1 -0
  150. package/development/option/option-styles.js +2 -0
  151. package/development/option-styles-IEQgVpCe.js +8 -0
  152. package/development/option.component-BrTjDq6X.js +131 -0
  153. package/development/option.js +4 -3
  154. package/development/option.pure.d.ts +1 -0
  155. package/development/option.pure.d.ts.map +1 -1
  156. package/development/option.pure.js +3 -2
  157. package/development/overlay/overlay-base-element.d.ts.map +1 -1
  158. package/development/overlay/overlay-base-element.js +3 -3
  159. package/development/overlay/overlay.component.js +1 -1
  160. package/development/{overlay.component-YSCuGeme.js → overlay.component-BH-aue7w.js} +1 -1
  161. package/development/overlay.js +1 -1
  162. package/development/overlay.pure.js +1 -1
  163. package/development/paginator/common/paginator-common.js +1 -1
  164. package/development/paginator/compact-paginator/compact-paginator.component.js +1 -1
  165. package/development/paginator/paginator/paginator.component.d.ts.map +1 -1
  166. package/development/paginator/paginator/paginator.component.js +1 -1
  167. package/development/{paginator-common-B7iba0wQ.js → paginator-common-CRchtcXc.js} +1 -1
  168. package/development/paginator.component-B8y5tVCL.js +265 -0
  169. package/development/paginator.js +3 -3
  170. package/development/paginator.pure.js +3 -3
  171. package/development/panel-mixin-DPybe45K.js +1 -1
  172. package/development/popover/popover.component.d.ts.map +1 -1
  173. package/development/popover/popover.component.js +1 -1
  174. package/development/popover.component-Ds4fNNsq.js +578 -0
  175. package/development/popover.js +1 -1
  176. package/development/popover.pure.js +1 -1
  177. package/development/radio-button/common/radio-button-common.js +1 -1
  178. package/development/radio-button/radio-button.component.js +1 -1
  179. package/development/radio-button-common-Ckz2nMS7.js +129 -0
  180. package/development/{radio-button.component-DnErH-1J.js → radio-button.component-qsLFvciH.js} +2 -2
  181. package/development/radio-button.js +2 -2
  182. package/development/radio-button.pure.js +2 -2
  183. package/development/select/select.component.d.ts.map +1 -1
  184. package/development/select/select.component.js +1 -1
  185. package/development/select.component-BE7ZMrAc.js +809 -0
  186. package/development/select.js +1 -1
  187. package/development/select.pure.js +1 -1
  188. package/development/selection-action-panel/selection-action-panel.component.js +1 -1
  189. package/development/{selection-action-panel.component-BT0HmTja.js → selection-action-panel.component-C3UlmLkJ.js} +1 -1
  190. package/development/selection-action-panel.js +1 -1
  191. package/development/selection-action-panel.pure.js +1 -1
  192. package/development/selection-expansion-panel/selection-expansion-panel.component.js +1 -1
  193. package/development/selection-expansion-panel.component-4Ron8XNy.js +186 -0
  194. package/development/selection-expansion-panel.js +1 -1
  195. package/development/selection-expansion-panel.pure.js +1 -1
  196. package/development/sidebar/common/styles.js +1 -1
  197. package/development/sidebar/sidebar/sidebar.component.js +1 -1
  198. package/development/sidebar/sidebar-close-button/sidebar-close-button.component.js +1 -1
  199. package/development/sidebar/sidebar-container/sidebar-container.component.js +1 -1
  200. package/development/sidebar/sidebar-content/sidebar-content.component.js +1 -1
  201. package/development/sidebar/sidebar-title/sidebar-title.component.js +1 -1
  202. package/development/{sidebar-close-button.component-CXnf-P5H.js → sidebar-close-button.component-ByQtC65O.js} +1 -1
  203. package/development/sidebar-container.component-BmavabUg.js +100 -0
  204. package/development/{sidebar-content.component-DbcREBUa.js → sidebar-content.component-DcsIIWpz.js} +1 -1
  205. package/development/{sidebar-title.component-BW04otyD.js → sidebar-title.component-DgJdkoiE.js} +1 -1
  206. package/development/{sidebar.component-mfXnE6WQ.js → sidebar.component-BszwyJQa.js} +1 -1
  207. package/development/sidebar.js +5 -5
  208. package/development/sidebar.pure.js +5 -5
  209. package/development/signet/signet.component.js +1 -1
  210. package/development/{signet.component-k14RJ8FA.js → signet.component-DXLTVjJS.js} +1 -1
  211. package/development/signet.js +1 -1
  212. package/development/signet.pure.js +1 -1
  213. package/development/skiplink-list/skiplink-list.component.js +1 -1
  214. package/development/skiplink-list.component-BC8rpyf9.js +129 -0
  215. package/development/skiplink-list.js +1 -1
  216. package/development/skiplink-list.pure.js +1 -1
  217. package/development/slider/slider.component.js +1 -1
  218. package/development/slider.component-BLptxiZ4.js +346 -0
  219. package/development/slider.js +1 -1
  220. package/development/slider.pure.js +1 -1
  221. package/development/status/status.component.js +1 -1
  222. package/development/{status.component-B9en2l26.js → status.component-thSGiOrl.js} +1 -1
  223. package/development/status.js +1 -1
  224. package/development/status.pure.js +1 -1
  225. package/development/step-label.component-CpdXVv32.js +127 -0
  226. package/development/{step.component-B_YHm1tz.js → step.component-DpSJEkrK.js} +1 -1
  227. package/development/stepper/step/step.component.js +1 -1
  228. package/development/stepper/step-label/step-label.component.js +1 -1
  229. package/development/stepper/stepper/stepper.component.js +1 -1
  230. package/development/stepper.component-Bv6LCFU0.js +443 -0
  231. package/development/stepper.js +3 -3
  232. package/development/stepper.pure.js +3 -3
  233. package/development/{sticky-bar.component-BJLtRvcd.js → sticky-bar.component-DZpy1gBU.js} +2 -2
  234. package/development/{styles-WppEBrlW.js → styles-BmvNZZle.js} +1 -1
  235. package/development/styles-D8h0fqb5.js +30 -0
  236. package/development/{tab-group.component-CGMBihsQ.js → tab-group.component-DhcfjVxe.js} +1 -1
  237. package/development/{tab-label.component-CQOLO2t7.js → tab-label.component-B7YEhR1C.js} +1 -1
  238. package/development/tab-nav-bar.component-DrZ1U7lM.js +109 -0
  239. package/development/{tab.component-BVhYPy5Y.js → tab.component-COn1G0XA.js} +1 -1
  240. package/development/table/table-wrapper/table-wrapper.component.js +1 -1
  241. package/development/{table-wrapper.component-By59zmcU.js → table-wrapper.component-9Lst6dT2.js} +1 -1
  242. package/development/table.js +1 -1
  243. package/development/table.pure.js +1 -1
  244. package/development/tabs/common/styles.js +1 -1
  245. package/development/tabs/tab/tab.component.js +1 -1
  246. package/development/tabs/tab-group/tab-group.component.js +1 -1
  247. package/development/tabs/tab-label/tab-label.component.js +1 -1
  248. package/development/tabs/tab-nav-bar/tab-nav-bar.component.js +1 -1
  249. package/development/tabs.js +5 -5
  250. package/development/tabs.pure.js +5 -5
  251. package/development/tag/tag/tag.component.js +1 -1
  252. package/development/tag/tag-group/tag-group.component.js +1 -1
  253. package/development/tag-group.component-OQ3sxhZI.js +194 -0
  254. package/development/tag.component-DWOPDWwe.js +238 -0
  255. package/development/tag.js +2 -2
  256. package/development/tag.pure.js +2 -2
  257. package/development/teaser/teaser.component.js +1 -1
  258. package/development/teaser-hero/teaser-hero.component.js +1 -1
  259. package/development/{teaser-hero.component-BHMcPmdh.js → teaser-hero.component-Cp42iJGt.js} +1 -1
  260. package/development/teaser-hero.js +1 -1
  261. package/development/teaser-hero.pure.js +1 -1
  262. package/development/teaser-panel/teaser-panel.component.js +1 -1
  263. package/development/{teaser-panel.component-BRfbvmkb.js → teaser-panel.component-ptDalUEe.js} +1 -1
  264. package/development/teaser-panel.js +1 -1
  265. package/development/teaser-panel.pure.js +1 -1
  266. package/development/teaser-product/common/teaser-product-common.js +1 -1
  267. package/development/teaser-product/teaser-product/teaser-product.component.js +1 -1
  268. package/development/{teaser-product-common-DOyLdTks.js → teaser-product-common-DxBw-__I.js} +1 -1
  269. package/development/teaser-product.component-CPj4vJ2V.js +37 -0
  270. package/development/teaser-product.js +2 -2
  271. package/development/teaser-product.pure.js +2 -2
  272. package/development/teaser.component-Dgrc2jh8.js +116 -0
  273. package/development/teaser.js +1 -1
  274. package/development/teaser.pure.js +1 -1
  275. package/development/time-input/time-input.component.js +1 -1
  276. package/development/time-input.component-BFjDAfbv.js +187 -0
  277. package/development/time-input.js +1 -1
  278. package/development/time-input.pure.js +1 -1
  279. package/development/timetable-form/timetable-form/timetable-form.component.js +1 -1
  280. package/development/timetable-form/timetable-form-details/timetable-form-details.component.js +1 -1
  281. package/development/timetable-form/timetable-form-field/timetable-form-field.component.js +1 -1
  282. package/development/timetable-form/timetable-form-swap-button/timetable-form-swap-button.component.js +1 -1
  283. package/development/{timetable-form-details.component-BeuAZUQe.js → timetable-form-details.component-BFmuJ8-6.js} +1 -1
  284. package/development/{timetable-form-field.component-DC2z1Cwf.js → timetable-form-field.component-DD04XyA0.js} +1 -1
  285. package/development/{timetable-form-swap-button.component-CnbVc8Ok.js → timetable-form-swap-button.component-DphGegO6.js} +1 -1
  286. package/development/{timetable-form.component-C8DfPePn.js → timetable-form.component-EIr4B4mA.js} +1 -1
  287. package/development/timetable-form.js +4 -4
  288. package/development/timetable-form.pure.js +4 -4
  289. package/development/timetable-occupancy/timetable-occupancy.component.d.ts.map +1 -1
  290. package/development/timetable-occupancy/timetable-occupancy.component.js +1 -1
  291. package/development/timetable-occupancy-icon/timetable-occupancy-icon.component.js +1 -1
  292. package/development/timetable-occupancy-icon.component-vsXoAiKz.js +95 -0
  293. package/development/timetable-occupancy-icon.js +1 -1
  294. package/development/timetable-occupancy-icon.pure.js +1 -1
  295. package/development/timetable-occupancy.component-B0zY0RnI.js +126 -0
  296. package/development/timetable-occupancy.js +1 -1
  297. package/development/timetable-occupancy.pure.js +1 -1
  298. package/development/title/title-base.js +1 -1
  299. package/development/title/title.component.d.ts +0 -2
  300. package/development/title/title.component.d.ts.map +1 -1
  301. package/development/title/title.component.js +1 -1
  302. package/development/title-base-CPAVrsQ9.js +102 -0
  303. package/development/title.component-DCg9U2CK.js +69 -0
  304. package/development/title.js +2 -2
  305. package/development/title.pure.js +2 -2
  306. package/development/toast/toast.component.d.ts.map +1 -1
  307. package/development/toast/toast.component.js +1 -1
  308. package/development/{toast.component-DonS3uQm.js → toast.component-TvSfu5nl.js} +3 -3
  309. package/development/toast.js +1 -1
  310. package/development/toast.pure.js +1 -1
  311. package/development/toggle/toggle/toggle.component.js +1 -1
  312. package/development/toggle/toggle-option/toggle-option.component.js +1 -1
  313. package/development/toggle-check/toggle-check.component.js +1 -1
  314. package/development/{toggle-check.component-BIV7jFIc.js → toggle-check.component-CbGa5-8I.js} +1 -1
  315. package/development/toggle-check.js +1 -1
  316. package/development/toggle-check.pure.js +1 -1
  317. package/development/{toggle-option.component-DRxwLSKU.js → toggle-option.component-BxGnhJFH.js} +1 -1
  318. package/development/toggle.component-Q68IDQWX.js +243 -0
  319. package/development/toggle.js +2 -2
  320. package/development/toggle.pure.js +2 -2
  321. package/development/tooltip/tooltip.component.d.ts.map +1 -1
  322. package/development/tooltip/tooltip.component.js +1 -1
  323. package/development/tooltip.component-Baoh6M8V.js +369 -0
  324. package/development/tooltip.js +1 -1
  325. package/development/tooltip.pure.js +1 -1
  326. package/development/train/train/train.component.js +1 -1
  327. package/development/train/train-blocked-passage/train-blocked-passage.component.js +1 -1
  328. package/development/train/train-formation/train-formation.component.js +1 -1
  329. package/development/train/train-wagon-common.js +1 -1
  330. package/development/{train-blocked-passage.component-Cxd7dBDC.js → train-blocked-passage.component-C7ve-a1E.js} +1 -1
  331. package/development/{train-formation.component-BEg6OPib.js → train-formation.component-DQ_hLKNv.js} +2 -2
  332. package/development/train-wagon-common-CdckItEt.js +441 -0
  333. package/development/train.component-Bi74L6C7.js +239 -0
  334. package/development/train.js +4 -4
  335. package/development/train.pure.js +4 -4
  336. package/development/visual-checkbox/visual-checkbox.component.js +1 -1
  337. package/development/{visual-checkbox.component-Dm8DNhH2.js → visual-checkbox.component-B4_iHcsX.js} +1 -1
  338. package/development/visual-checkbox.js +1 -1
  339. package/development/visual-checkbox.pure.js +1 -1
  340. package/file-selector/common/file-selector-common.js +1 -1
  341. package/file-selector/file-selector-dropzone/file-selector-dropzone.component.js +1 -1
  342. package/{file-selector-common-VNwWFEmM.js → file-selector-common-BNGnjK__.js} +1 -1
  343. package/{file-selector-dropzone.component-CGo6odhC.js → file-selector-dropzone.component-sE_fofSq.js} +1 -1
  344. package/file-selector.js +2 -2
  345. package/file-selector.pure.js +2 -2
  346. package/flip-card/flip-card/flip-card.component.js +1 -1
  347. package/{flip-card.component-CZ0v44Ym.js → flip-card.component-ZsA_kDPS.js} +22 -18
  348. package/flip-card.js +1 -1
  349. package/flip-card.pure.js +1 -1
  350. package/header/common/header-action-common.js +1 -1
  351. package/header-action-common-B-eRBjSz.js +64 -0
  352. package/header.js +1 -1
  353. package/header.pure.js +1 -1
  354. package/inline-link-common-O650N_pm.js +13 -0
  355. package/lean-off-brand-theme.css +415 -503
  356. package/lean-safety-theme.css +415 -503
  357. package/lean-theme.css +415 -503
  358. package/link/common/inline-link-common.js +1 -1
  359. package/link-list/link-list.component.js +1 -1
  360. package/link-list-anchor/link-list-anchor.component.js +1 -1
  361. package/{link-list-anchor.component-DG_HCtHH.js → link-list-anchor.component-Bjz_EKvE.js} +1 -1
  362. package/link-list-anchor.js +1 -1
  363. package/link-list-anchor.pure.js +1 -1
  364. package/{link-list.component-BNVd0a8U.js → link-list.component-Dg-7TBPC.js} +1 -1
  365. package/link-list.js +1 -1
  366. package/link-list.pure.js +1 -1
  367. package/link.js +1 -1
  368. package/link.pure.js +1 -1
  369. package/menu/common/menu-action-common.js +1 -1
  370. package/menu/menu/menu.component.js +1 -1
  371. package/{menu-action-common-Wy36tk18.js → menu-action-common-DakEXPg7.js} +1 -1
  372. package/{menu.component-DrrKSRmJ.js → menu.component-CqXsI5Cg.js} +25 -21
  373. package/menu.js +2 -2
  374. package/menu.pure.js +2 -2
  375. package/message/message.component.js +1 -1
  376. package/{message.component-CdfsCpnE.js → message.component-CORYX4KP.js} +1 -1
  377. package/message.js +1 -1
  378. package/message.pure.js +1 -1
  379. package/{mini-button-group.component-DQBU0BDm.js → mini-button-group.component-DWayyUpK.js} +1 -1
  380. package/navigation/navigation/navigation.component.js +1 -1
  381. package/navigation/navigation-list/navigation-list.component.js +1 -1
  382. package/navigation/navigation-marker/navigation-marker.component.js +1 -1
  383. package/{navigation-list.component-Cezo1tC-.js → navigation-list.component-C5y3ohH0.js} +1 -1
  384. package/{navigation-marker.component-CNsMaqpH.js → navigation-marker.component-VbvKu1TR.js} +1 -1
  385. package/{navigation.component-DLgmWh_c.js → navigation.component-DKJujMqj.js} +23 -19
  386. package/navigation.js +3 -3
  387. package/navigation.pure.js +3 -3
  388. package/off-brand-theme.css +415 -503
  389. package/option/option/option.component.js +1 -1
  390. package/option/option-styles.js +2 -0
  391. package/option-styles-DcD5grSB.js +6 -0
  392. package/option.js +5 -4
  393. package/option.pure.js +4 -3
  394. package/overlay/overlay-base-element.js +21 -21
  395. package/overlay/overlay.component.js +1 -1
  396. package/overlay.js +1 -1
  397. package/overlay.pure.js +1 -1
  398. package/package.json +5 -49
  399. package/paginator/common/paginator-common.js +1 -1
  400. package/paginator/compact-paginator/compact-paginator.component.js +1 -1
  401. package/paginator/paginator/paginator.component.js +1 -1
  402. package/paginator.component-Dk1xDHgW.js +212 -0
  403. package/paginator.js +3 -3
  404. package/paginator.pure.js +3 -3
  405. package/popover/popover.component.js +1 -1
  406. package/{popover.component-Dm_86bPY.js → popover.component-Bm-bx-Hs.js} +32 -32
  407. package/popover.js +1 -1
  408. package/popover.pure.js +1 -1
  409. package/radio-button/common/radio-button-common.js +1 -1
  410. package/radio-button/radio-button.component.js +1 -1
  411. package/{radio-button.component-CZ273yAb.js → radio-button.component-CGeTCfMq.js} +1 -1
  412. package/radio-button.js +2 -2
  413. package/radio-button.pure.js +2 -2
  414. package/safety-theme.css +415 -503
  415. package/select/select.component.js +1 -1
  416. package/{select.component-CLPLpFDz.js → select.component-UcWSndDu.js} +41 -39
  417. package/select.js +1 -1
  418. package/select.pure.js +1 -1
  419. package/selection-action-panel/selection-action-panel.component.js +1 -1
  420. package/selection-action-panel.js +1 -1
  421. package/selection-action-panel.pure.js +1 -1
  422. package/selection-expansion-panel/selection-expansion-panel.component.js +1 -1
  423. package/selection-expansion-panel.js +1 -1
  424. package/selection-expansion-panel.pure.js +1 -1
  425. package/sidebar/sidebar/sidebar.component.js +1 -1
  426. package/sidebar/sidebar-close-button/sidebar-close-button.component.js +1 -1
  427. package/sidebar/sidebar-container/sidebar-container.component.js +1 -1
  428. package/sidebar/sidebar-content/sidebar-content.component.js +1 -1
  429. package/sidebar/sidebar-title/sidebar-title.component.js +1 -1
  430. package/sidebar.js +5 -5
  431. package/sidebar.pure.js +5 -5
  432. package/signet/signet.component.js +1 -1
  433. package/signet.js +1 -1
  434. package/signet.pure.js +1 -1
  435. package/skiplink-list/skiplink-list.component.js +1 -1
  436. package/{skiplink-list.component-BXaqYpsI.js → skiplink-list.component-ClGb1J_H.js} +1 -1
  437. package/skiplink-list.js +1 -1
  438. package/skiplink-list.pure.js +1 -1
  439. package/slider/slider.component.js +1 -1
  440. package/slider.js +1 -1
  441. package/slider.pure.js +1 -1
  442. package/standard-theme.css +415 -503
  443. package/status/status.component.js +1 -1
  444. package/status.js +1 -1
  445. package/status.pure.js +1 -1
  446. package/stepper/step/step.component.js +1 -1
  447. package/stepper/step-label/step-label.component.js +1 -1
  448. package/stepper/stepper/stepper.component.js +1 -1
  449. package/stepper.js +3 -3
  450. package/stepper.pure.js +3 -3
  451. package/{sticky-bar.component-dmlGAZLW.js → sticky-bar.component-DtXeRUqi.js} +1 -1
  452. package/styles-DV41ClRb.js +5 -0
  453. package/{tab-nav-bar.component-FT2W0urU.js → tab-nav-bar.component-CRC6xnaX.js} +1 -1
  454. package/table/table-wrapper/table-wrapper.component.js +1 -1
  455. package/table.js +1 -1
  456. package/table.pure.js +1 -1
  457. package/tabs/common/styles.js +1 -1
  458. package/tabs/tab/tab.component.js +1 -1
  459. package/tabs/tab-group/tab-group.component.js +1 -1
  460. package/tabs/tab-label/tab-label.component.js +1 -1
  461. package/tabs/tab-nav-bar/tab-nav-bar.component.js +1 -1
  462. package/tabs.js +5 -5
  463. package/tabs.pure.js +5 -5
  464. package/tag/tag/tag.component.js +1 -1
  465. package/tag/tag-group/tag-group.component.js +1 -1
  466. package/{tag-group.component-9UfHHJ79.js → tag-group.component-wnzXwLPf.js} +1 -1
  467. package/tag.js +2 -2
  468. package/tag.pure.js +2 -2
  469. package/teaser/teaser.component.js +1 -1
  470. package/teaser-hero/teaser-hero.component.js +1 -1
  471. package/teaser-hero.js +1 -1
  472. package/teaser-hero.pure.js +1 -1
  473. package/teaser-panel/teaser-panel.component.js +1 -1
  474. package/teaser-panel.js +1 -1
  475. package/teaser-panel.pure.js +1 -1
  476. package/teaser-product/common/teaser-product-common.js +1 -1
  477. package/teaser-product/teaser-product/teaser-product.component.js +1 -1
  478. package/teaser-product.js +2 -2
  479. package/teaser-product.pure.js +2 -2
  480. package/teaser.js +1 -1
  481. package/teaser.pure.js +1 -1
  482. package/time-input/time-input.component.js +1 -1
  483. package/time-input.js +1 -1
  484. package/time-input.pure.js +1 -1
  485. package/timetable-form/timetable-form/timetable-form.component.js +1 -1
  486. package/timetable-form/timetable-form-details/timetable-form-details.component.js +1 -1
  487. package/timetable-form/timetable-form-field/timetable-form-field.component.js +1 -1
  488. package/timetable-form/timetable-form-swap-button/timetable-form-swap-button.component.js +1 -1
  489. package/timetable-form.js +4 -4
  490. package/timetable-form.pure.js +4 -4
  491. package/timetable-occupancy/timetable-occupancy.component.js +1 -1
  492. package/timetable-occupancy-icon/timetable-occupancy-icon.component.js +1 -1
  493. package/timetable-occupancy-icon.js +1 -1
  494. package/timetable-occupancy-icon.pure.js +1 -1
  495. package/{timetable-occupancy.component-DGQ20zH1.js → timetable-occupancy.component-CIkq1cT7.js} +17 -13
  496. package/timetable-occupancy.js +1 -1
  497. package/timetable-occupancy.pure.js +1 -1
  498. package/title/title-base.js +1 -1
  499. package/title/title.component.js +1 -1
  500. package/{title-base-JBhKD3ur.js → title-base-B1xzk7Zb.js} +1 -1
  501. package/{title.component-VnTeqomb.js → title.component-DTnG8op9.js} +2 -2
  502. package/title.js +2 -2
  503. package/title.pure.js +2 -2
  504. package/toast/toast.component.js +1 -1
  505. package/{toast.component-BMN90Ouu.js → toast.component-Ew5vuGXf.js} +19 -19
  506. package/toast.js +1 -1
  507. package/toast.pure.js +1 -1
  508. package/toggle/toggle/toggle.component.js +1 -1
  509. package/toggle/toggle-option/toggle-option.component.js +1 -1
  510. package/toggle-check/toggle-check.component.js +1 -1
  511. package/toggle-check.js +1 -1
  512. package/toggle-check.pure.js +1 -1
  513. package/toggle.js +2 -2
  514. package/toggle.pure.js +2 -2
  515. package/tooltip/tooltip.component.js +1 -1
  516. package/{tooltip.component-NfyDxfw7.js → tooltip.component-ihyNBI7f.js} +25 -25
  517. package/tooltip.js +1 -1
  518. package/tooltip.pure.js +1 -1
  519. package/train/train/train.component.js +1 -1
  520. package/train/train-blocked-passage/train-blocked-passage.component.js +1 -1
  521. package/train/train-formation/train-formation.component.js +1 -1
  522. package/train/train-wagon-common.js +1 -1
  523. package/{train-formation.component-DVxNBPIB.js → train-formation.component-CYqdWnkL.js} +1 -1
  524. package/{train-wagon-common-CDCsWVgi.js → train-wagon-common-C1Py1D01.js} +1 -1
  525. package/{train.component-DxadS7O8.js → train.component-DRLUjuXY.js} +1 -1
  526. package/train.js +4 -4
  527. package/train.pure.js +4 -4
  528. package/visual-checkbox/visual-checkbox.component.js +1 -1
  529. package/visual-checkbox.js +1 -1
  530. package/visual-checkbox.pure.js +1 -1
  531. package/a11y.css +0 -20
  532. package/animation.css +0 -14
  533. package/badge.css +0 -32
  534. package/core/styles/badge.scss +0 -3
  535. package/core/styles/mixins/badge.scss +0 -42
  536. package/core/styles/mixins/buttons.scss +0 -12
  537. package/core/styles/mixins/card.scss +0 -205
  538. package/core/styles/mixins/dev_and_debug.scss +0 -8
  539. package/core/styles/mixins/image.scss +0 -43
  540. package/core/styles/mixins/inputs.scss +0 -11
  541. package/core/styles/mixins/link.scss +0 -125
  542. package/core/styles/mixins/panel.scss +0 -80
  543. package/core/styles/mixins/popover.scss +0 -14
  544. package/core/styles/mixins/table.scss +0 -185
  545. package/core/styles/mixins/timetable-form.scss +0 -63
  546. package/core/styles/option-panel-common.global.scss +0 -11
  547. package/core/styles/option-panel-common.scss +0 -157
  548. package/core/styles/theme.scss +0 -20
  549. package/core/styles/timetable-form.scss +0 -27
  550. package/core/styles/typography.private.scss +0 -9
  551. package/core.css +0 -2713
  552. package/development/autocomplete-base-element-qnPoRLvM.js +0 -695
  553. package/development/breadcrumb-group.component-BUBfl6LV.js +0 -193
  554. package/development/calendar.component-CG96KGTg.js +0 -1469
  555. package/development/file-selector-common-mZ5UYxOF.js +0 -421
  556. package/development/flip-card.component-DujrPKzU.js +0 -185
  557. package/development/header-action-common-Be0XQge2.js +0 -86
  558. package/development/inline-link-common-gmt6yz3v.js +0 -18
  559. package/development/link-list.component-B90qHOUD.js +0 -97
  560. package/development/menu-action-common-DRXQc85Y.js +0 -32
  561. package/development/menu.component-Cv9wRj4H.js +0 -365
  562. package/development/navigation-list.component-Dvv-bZ2V.js +0 -86
  563. package/development/navigation-marker.component-DMqe-VlY.js +0 -120
  564. package/development/navigation.component-CqNkBvEs.js +0 -315
  565. package/development/option.component-CV6cZnJe.js +0 -131
  566. package/development/paginator.component-BwLUSpDj.js +0 -261
  567. package/development/popover.component-CKUZbWbV.js +0 -578
  568. package/development/radio-button-common-G0jLFo41.js +0 -129
  569. package/development/select.component-CUjF11sq.js +0 -807
  570. package/development/selection-expansion-panel.component-BT78Qhbf.js +0 -186
  571. package/development/sidebar-container.component-CxwDKxv9.js +0 -100
  572. package/development/skiplink-list.component-m7xm-pns.js +0 -129
  573. package/development/slider.component-D_nLTlRF.js +0 -346
  574. package/development/step-label.component-Bo7Z0w7N.js +0 -127
  575. package/development/stepper.component-BeqeUIRN.js +0 -443
  576. package/development/styles-Cctez2BS.js +0 -22
  577. package/development/tab-nav-bar.component-B_mi8GGR.js +0 -109
  578. package/development/tag-group.component-Db8prSBL.js +0 -194
  579. package/development/tag.component-DG1uxD28.js +0 -238
  580. package/development/teaser-product.component-DMyuB-cH.js +0 -37
  581. package/development/teaser.component-CF_NUbwJ.js +0 -116
  582. package/development/time-input.component-XxzRoupm.js +0 -187
  583. package/development/timetable-occupancy-icon.component-UBmyZsTO.js +0 -95
  584. package/development/timetable-occupancy.component-DMm242Fr.js +0 -122
  585. package/development/title-base-D_Rjyk_j.js +0 -102
  586. package/development/title.component-CMxYhTfw.js +0 -71
  587. package/development/toggle.component-B03k5qc1.js +0 -243
  588. package/development/tooltip.component-D8zik3p4.js +0 -369
  589. package/development/train-wagon-common-Dg-BjUtC.js +0 -441
  590. package/development/train.component-dECIGw2x.js +0 -239
  591. package/header-action-common-DuPx0U2o.js +0 -64
  592. package/inline-link-common-BqqH1ExY.js +0 -13
  593. package/layout.css +0 -30
  594. package/lists.css +0 -194
  595. package/normalize.css +0 -95
  596. package/paginator.component-DB8l-B6J.js +0 -208
  597. package/scrollbar.css +0 -124
  598. package/styles-DAMaYe4p.js +0 -5
  599. package/table.css +0 -261
  600. package/timetable-form.css +0 -73
  601. package/typography.css +0 -67
  602. /package/{compact-paginator.component-BAuShgQE.js → compact-paginator.component-B-8gf_qD.js} +0 -0
  603. /package/core/styles/{disable-animation.scss → disable-animation-extension.scss} +0 -0
  604. /package/core/styles/{node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables-as-css.scss → features/node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables-as-css.scss} +0 -0
  605. /package/core/styles/{node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables.scss → features/node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables.scss} +0 -0
  606. /package/core/styles/{normalize.scss → features/normalize.scss} +0 -0
  607. /package/core/styles/{scrollbar.private.scss → features/scrollbar.private.scss} +0 -0
  608. /package/core/styles/mixins/{animation.scss → _animation.scss} +0 -0
  609. /package/core/styles/mixins/{font-face.scss → _font-face.scss} +0 -0
  610. /package/core/styles/mixins/{layout.scss → _layout.scss} +0 -0
  611. /package/core/styles/mixins/{scrollbar.scss → _scrollbar.scss} +0 -0
  612. /package/{disable-animation.css → disable-animation-extension.css} +0 -0
  613. /package/{option.component-BeorlZT0.js → option.component-DiH8AMlV.js} +0 -0
  614. /package/{overlay.component-myJflfLY.js → overlay.component-D7Z_vx1A.js} +0 -0
  615. /package/{paginator-common-BWewgXga.js → paginator-common-C0Kn9ibe.js} +0 -0
  616. /package/{radio-button-common-CrIRn10q.js → radio-button-common-BDNSqXg-.js} +0 -0
  617. /package/{selection-action-panel.component-DCGJQ3Mx.js → selection-action-panel.component-Ba7N1Hgt.js} +0 -0
  618. /package/{selection-expansion-panel.component-Cu1egfTY.js → selection-expansion-panel.component-BL1FPfPM.js} +0 -0
  619. /package/{sidebar-close-button.component-8owwjvk3.js → sidebar-close-button.component-CLjOpBM2.js} +0 -0
  620. /package/{sidebar-container.component-Dcke-Uhr.js → sidebar-container.component-8filIF5E.js} +0 -0
  621. /package/{sidebar-content.component-CYupfsq_.js → sidebar-content.component-DMdjHDdq.js} +0 -0
  622. /package/{sidebar-title.component-Cf64lCJx.js → sidebar-title.component-DaIkBNY9.js} +0 -0
  623. /package/{sidebar.component-LaqQzMo2.js → sidebar.component-D_HLDNnq.js} +0 -0
  624. /package/{signet.component-3Xfke8uk.js → signet.component-6q3GxORI.js} +0 -0
  625. /package/{slider.component-BlUWAWJU.js → slider.component-C8LKcM11.js} +0 -0
  626. /package/{status.component-mel7wA1j.js → status.component-DMfZTgzz.js} +0 -0
  627. /package/{step-label.component-BGSaHafq.js → step-label.component-CjNZYk5b.js} +0 -0
  628. /package/{step.component-tJh-Pb_E.js → step.component-BCkwsZdk.js} +0 -0
  629. /package/{stepper.component-BCl77LVa.js → stepper.component-mq66fR06.js} +0 -0
  630. /package/{styles-DisU4TWi.js → styles-DWm_OYpV.js} +0 -0
  631. /package/{tab-group.component-CDhggNpe.js → tab-group.component-MEm2W7QR.js} +0 -0
  632. /package/{tab-label.component-BuF2qt1T.js → tab-label.component-BqznCfW8.js} +0 -0
  633. /package/{tab.component-D6hfhlZw.js → tab.component-DPwbvqp4.js} +0 -0
  634. /package/{table-wrapper.component-C83EYuZP.js → table-wrapper.component-LzYuAVPb.js} +0 -0
  635. /package/{tag.component-BKuxfdDi.js → tag.component-zGPaopTo.js} +0 -0
  636. /package/{teaser-hero.component-mv6HL4vm.js → teaser-hero.component-BlhffYux.js} +0 -0
  637. /package/{teaser-panel.component-qRmy2lbz.js → teaser-panel.component-BCbKgXVt.js} +0 -0
  638. /package/{teaser-product-common-J1KZ2Hlw.js → teaser-product-common-C_lgMbyC.js} +0 -0
  639. /package/{teaser-product.component-BcleFVcu.js → teaser-product.component-CQIXu7sq.js} +0 -0
  640. /package/{teaser.component-BOqCERR7.js → teaser.component-D9z78Eny.js} +0 -0
  641. /package/{time-input.component-Dw8pPYDK.js → time-input.component-CLHEoWze.js} +0 -0
  642. /package/{timetable-form-details.component-0c6h6shd.js → timetable-form-details.component-DJ3oPkQP.js} +0 -0
  643. /package/{timetable-form-field.component-Cya8n2Ms.js → timetable-form-field.component-6s8_sz9h.js} +0 -0
  644. /package/{timetable-form-swap-button.component-rI_0UYJw.js → timetable-form-swap-button.component-BY2m2_k9.js} +0 -0
  645. /package/{timetable-form.component-DVps6baq.js → timetable-form.component-Swe8BX7g.js} +0 -0
  646. /package/{timetable-occupancy-icon.component-ABh1bz-X.js → timetable-occupancy-icon.component-C44eSFOM.js} +0 -0
  647. /package/{toggle-check.component-BcQ5ht0O.js → toggle-check.component-Ce-klZJB.js} +0 -0
  648. /package/{toggle-option.component-DQcPDXyl.js → toggle-option.component-BdMfGuA-.js} +0 -0
  649. /package/{toggle.component-DARkqJol.js → toggle.component-ySmrXvjA.js} +0 -0
  650. /package/{train-blocked-passage.component-B601YYJl.js → train-blocked-passage.component-UnNCmspZ.js} +0 -0
  651. /package/{visual-checkbox.component-YhX5Qk3j.js → visual-checkbox.component-JmGORoDU.js} +0 -0
package/core.css DELETED
@@ -1,2713 +0,0 @@
1
- /**
2
- * Do not edit directly, this file was auto-generated.
3
- */
4
- :host {
5
- display: flex;
6
- flex-flow: var(--sbb-selection-group-orientation) wrap;
7
- gap: var(--sbb-selection-group-gap);
8
- align-items: flex-start;
9
- width: var(--sbb-selection-group-width);
10
- }
11
-
12
- :host([orientation=vertical]) {
13
- --sbb-selection-group-orientation: column;
14
- --sbb-selection-group-width: 100%;
15
- --sbb-selection-group-elements-width: 100%;
16
- }
17
-
18
- :host(:is(:state(has-panel),[state--has-panel])) {
19
- --sbb-selection-group-width: 100%;
20
- --sbb-selection-group-gap: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-4x);
21
- --sbb-selection-group-elements-flex: auto;
22
- }
23
-
24
- @media (min-width: calc(0rem)) {
25
- :host([orientation=vertical][horizontal-from=zero]) {
26
- --sbb-selection-group-orientation: row;
27
- --sbb-selection-group-elements-width: auto;
28
- }
29
- :host([orientation=vertical][horizontal-from=zero]:not(:is(:state(has-panel),[state--has-panel]))) {
30
- --sbb-selection-group-width: auto;
31
- }
32
- }
33
- @media (min-width: calc(37.5rem)) {
34
- :host([orientation=vertical][horizontal-from=small]) {
35
- --sbb-selection-group-orientation: row;
36
- --sbb-selection-group-elements-width: auto;
37
- }
38
- :host([orientation=vertical][horizontal-from=small]:not(:is(:state(has-panel),[state--has-panel]))) {
39
- --sbb-selection-group-width: auto;
40
- }
41
- }
42
- @media (min-width: calc(64rem)) {
43
- :host([orientation=vertical][horizontal-from=large]) {
44
- --sbb-selection-group-orientation: row;
45
- --sbb-selection-group-elements-width: auto;
46
- }
47
- :host([orientation=vertical][horizontal-from=large]:not(:is(:state(has-panel),[state--has-panel]))) {
48
- --sbb-selection-group-width: auto;
49
- }
50
- }
51
- @media (min-width: calc(90rem)) {
52
- :host([orientation=vertical][horizontal-from=ultra]) {
53
- --sbb-selection-group-orientation: row;
54
- --sbb-selection-group-elements-width: auto;
55
- }
56
- :host([orientation=vertical][horizontal-from=ultra]:not(:is(:state(has-panel),[state--has-panel]))) {
57
- --sbb-selection-group-width: auto;
58
- }
59
- }
60
- slot[name=error]::slotted(*) {
61
- flex-basis: 100%;
62
- }
63
-
64
- ::slotted(:is(sbb-checkbox-panel, sbb-radio-button-panel)) {
65
- flex: var(--sbb-selection-group-elements-flex);
66
- }
67
-
68
- ::slotted(:is(sbb-checkbox, sbb-checkbox-panel, sbb-radio-button-panel)) {
69
- width: var(--sbb-selection-group-elements-width);
70
- }
71
-
72
- :host {
73
- --sbb-tab-label-animation-duration: var(
74
- --sbb-disable-animation-duration,
75
- var(--sbb-animation-duration-2x)
76
- );
77
- --sbb-tab-label-outline-border-radius-internal: calc(
78
- var(--sbb-tab-label-outline-border-radius) - var(--sbb-focus-outline-offset)
79
- );
80
- }
81
-
82
- :host(:is(:is(:state(size-s),[state--size-s]), [size=s])) {
83
- --sbb-tab-label-height: var(--sbb-size-element-xs);
84
- --sbb-tab-label-inline-padding: var(--sbb-spacing-responsive-xxxs);
85
- --sbb-tab-label-font-size: var(--sbb-text-font-size-s);
86
- }
87
-
88
- :host(:is(:is(:state(size-l),[state--size-l]), [size=l])) {
89
- --sbb-tab-label-height: var(--sbb-size-element-m);
90
- --sbb-tab-label-inline-padding: var(--sbb-spacing-responsive-xs);
91
- --sbb-tab-label-font-size: var(--sbb-text-font-size-m);
92
- }
93
-
94
- :host(:is(:is(:state(size-xl),[state--size-xl]), [size=xl])) {
95
- --sbb-tab-label-height: var(--sbb-size-element-m);
96
- --sbb-tab-label-inline-padding: var(--sbb-spacing-responsive-xs);
97
- --sbb-tab-label-font-size: var(--sbb-text-font-size-xl);
98
- }
99
-
100
- :host(sbb-tab-label),
101
- :host(sbb-tab-nav-bar) ::slotted(a) {
102
- pointer-events: var(--sbb-tab-label-pointer-events, unset);
103
- }
104
- @media (forced-colors: active) {
105
- :host(sbb-tab-label),
106
- :host(sbb-tab-nav-bar) ::slotted(a) {
107
- --sbb-tab-label-color: ButtonText;
108
- --sbb-tab-label-amount-color: ButtonText;
109
- }
110
- }
111
-
112
- :host(sbb-tab-nav-bar) ::slotted(a),
113
- :host(sbb-tab-label) .sbb-tab-label {
114
- position: relative;
115
- display: flex;
116
- align-items: center;
117
- gap: var(--sbb-tab-label-gap);
118
- color: var(--sbb-tab-label-color);
119
- margin: 0;
120
- padding-inline: var(--sbb-tab-label-inline-padding);
121
- min-height: var(--sbb-tab-label-height);
122
- transition: color var(--sbb-tab-label-animation-duration) var(--sbb-tab-label-animation-easing);
123
- font-size: var(--sbb-tab-label-font-size);
124
- letter-spacing: var(--sbb-typo-letter-spacing-text);
125
- line-height: var(--sbb-typo-line-height-text);
126
- font-weight: var(--sbb-tab-label-font-weight);
127
- text-decoration: var(--sbb-tab-label-text-decoration);
128
- }
129
- :host(sbb-tab-nav-bar) ::slotted(a)::after,
130
- :host(sbb-tab-label) .sbb-tab-label::after {
131
- position: absolute;
132
- content: "";
133
- inset-inline: 0;
134
- inset-block-end: 0;
135
- height: var(--sbb-tab-label-marker-thickness);
136
- background-color: var(--sbb-tab-label-color);
137
- scale: var(--sbb-tab-label-marker-scale, 0);
138
- transition-duration: var(--sbb-tab-label-animation-duration);
139
- transition-timing-function: var(--sbb-tab-label-animation-easing);
140
- transition-property: scale, background-color;
141
- }
142
-
143
- :host(sbb-tab-nav-bar) .sbb-tab-nav-bar > [data-has-divider],
144
- :host(sbb-tab-label:is(:state(has-divider),[state--has-divider])) {
145
- position: relative;
146
- }
147
- :host(sbb-tab-nav-bar) .sbb-tab-nav-bar > [data-has-divider]::before,
148
- :host(sbb-tab-label:is(:state(has-divider),[state--has-divider]))::before {
149
- content: "";
150
- position: absolute;
151
- inset-inline-start: 0;
152
- inset-block-end: 0;
153
- width: var(--sbb-tab-group-width);
154
- height: var(--sbb-border-width-1x);
155
- background-color: var(--sbb-tab-label-line-color);
156
- }
157
-
158
- :host(sbb-tab-nav-bar) ::slotted(a.sbb-disabled),
159
- :host(sbb-tab-label[disabled]) {
160
- --sbb-tab-label-cursor: unset;
161
- --sbb-tab-label-pointer-events: none;
162
- --sbb-tab-label-text-decoration: line-through;
163
- }
164
- @media (forced-colors: active) {
165
- :host(sbb-tab-nav-bar) ::slotted(a.sbb-disabled),
166
- :host(sbb-tab-label[disabled]) {
167
- --sbb-tab-label-color: GrayText;
168
- --sbb-tab-label-amount-color: GrayText;
169
- }
170
- }
171
-
172
- :host(sbb-tab-nav-bar) ::slotted(a.sbb-active:not(.sbb-disabled)),
173
- :host(sbb-tab-label[active]:not([disabled])) {
174
- --sbb-tab-label-color: var(--sbb-color-3);
175
- --sbb-tab-label-cursor: unset;
176
- --sbb-tab-label-pointer-events: none;
177
- --sbb-tab-label-marker-scale: 1;
178
- }
179
- @media (forced-colors: active) {
180
- :host(sbb-tab-nav-bar) ::slotted(a.sbb-active:not(.sbb-disabled)),
181
- :host(sbb-tab-label[active]:not([disabled])) {
182
- --sbb-tab-label-color: ButtonText;
183
- --sbb-tab-label-amount-color: ButtonText;
184
- }
185
- }
186
-
187
- @media (any-hover: hover) {
188
- :host(sbb-tab-nav-bar) ::slotted(a:hover:not(.sbb-disabled)),
189
- :host(sbb-tab-label:hover:not([disabled])) {
190
- --sbb-tab-label-marker-scale: 1;
191
- }
192
- }
193
-
194
- :host(sbb-tab-nav-bar) ::slotted(a:active:not(.sbb-disabled)),
195
- :host(sbb-tab-label:active) {
196
- --sbb-tab-label-color: var(--sbb-color-3);
197
- }
198
- @media (forced-colors: active) {
199
- :host(sbb-tab-nav-bar) ::slotted(a:active:not(.sbb-disabled)),
200
- :host(sbb-tab-label:active) {
201
- --sbb-tab-label-color: ButtonText;
202
- --sbb-tab-label-amount-color: ButtonText;
203
- }
204
- }
205
-
206
- :host(sbb-tab-nav-bar) ::slotted(a:focus-visible),
207
- :host(sbb-tab-label:focus-visible) .sbb-tab-label {
208
- outline-offset: var(--sbb-focus-outline-offset);
209
- outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);
210
- border-radius: var(--sbb-tab-label-outline-border-radius-internal);
211
- }
212
-
213
- *,
214
- ::before,
215
- ::after {
216
- box-sizing: border-box;
217
- }
218
-
219
- :root {
220
- --sbb-animation-duration-1x: 0.04s;
221
- --sbb-animation-duration-2x: 0.08s;
222
- --sbb-animation-duration-3x: 0.12s;
223
- --sbb-animation-duration-4x: 0.16s;
224
- --sbb-animation-duration-5x: 0.20s;
225
- --sbb-animation-duration-6x: 0.24s;
226
- --sbb-animation-duration-12x: 0.48s;
227
- --sbb-animation-easing: cubic-bezier(.47, .1, 1, .63);
228
- /**
229
- * Original Value: 1px
230
- */
231
- --sbb-border-width-1x: 0.0625rem;
232
- /**
233
- * Original Value: 2px
234
- */
235
- --sbb-border-width-2x: 0.125rem;
236
- /**
237
- * Original Value: 3px
238
- */
239
- --sbb-border-width-3x: 0.1875rem;
240
- /**
241
- * Original Value: 4px
242
- */
243
- --sbb-border-width-4x: 0.25rem;
244
- /**
245
- * Original Value: 2px
246
- */
247
- --sbb-border-radius-1x: 0.125rem;
248
- /**
249
- * Original Value: 4px
250
- */
251
- --sbb-border-radius-2x: 0.25rem;
252
- /**
253
- * Original Value: 8px
254
- */
255
- --sbb-border-radius-4x: 0.5rem;
256
- /**
257
- * Original Value: 12px
258
- */
259
- --sbb-border-radius-6x: 0.75rem;
260
- /**
261
- * Original Value: 16px
262
- */
263
- --sbb-border-radius-8x: 1rem;
264
- /**
265
- * Original Value: 32px
266
- */
267
- --sbb-border-radius-16x: 2rem;
268
- /**
269
- * Original Value: 0px
270
- */
271
- --sbb-breakpoint-zero-min: 0rem;
272
- /**
273
- * Original Value: 599px
274
- */
275
- --sbb-breakpoint-zero-max: 37.4375rem;
276
- /**
277
- * Original Value: 600px
278
- */
279
- --sbb-breakpoint-small-min: 37.5rem;
280
- /**
281
- * Original Value: 1023px
282
- */
283
- --sbb-breakpoint-small-max: 63.9375rem;
284
- /**
285
- * Original Value: 1024px
286
- */
287
- --sbb-breakpoint-large-min: 64rem;
288
- /**
289
- * Original Value: 1439px
290
- */
291
- --sbb-breakpoint-large-max: 89.9375rem;
292
- /**
293
- * Original Value: 1440px
294
- */
295
- --sbb-breakpoint-ultra-min: 90rem;
296
- /**
297
- * Original Value: 2579px
298
- */
299
- --sbb-breakpoint-ultra-max: 161.1875rem;
300
- --sbb-color-black: #000000;
301
- --sbb-color-midnight: #151515;
302
- --sbb-color-blue: #2d327d;
303
- --sbb-color-charcoal: #212121;
304
- --sbb-color-iron: #444444;
305
- --sbb-color-anthracite: #5a5a5a;
306
- --sbb-color-granite: #686868;
307
- --sbb-color-metal: #767676;
308
- --sbb-color-smoke: #8d8d8d;
309
- --sbb-color-storm: #a8a8a8;
310
- --sbb-color-graphite: #b7b7b7;
311
- --sbb-color-cement: #bdbdbd;
312
- --sbb-color-platinum: #cdcdcd;
313
- --sbb-color-aluminium: #d2d2d2;
314
- --sbb-color-silver: #dcdcdc;
315
- --sbb-color-cloud: #e5e5e5;
316
- --sbb-color-milk: #f6f6f6;
317
- --sbb-color-red: #eb0000;
318
- --sbb-color-red85: #ff3838;
319
- --sbb-color-red125: #c60018;
320
- --sbb-color-red150: #a20013;
321
- --sbb-color-royal-light: #06348b;
322
- --sbb-color-royal-dark: #0053ef;
323
- --sbb-color-royal85-light: #4077df;
324
- --sbb-color-royal85-dark: #4077df;
325
- --sbb-color-royal125-light: #032668;
326
- --sbb-color-royal125-dark: #245ecb;
327
- --sbb-color-royal150-light: #021c4e;
328
- --sbb-color-royal150-dark: #3c65b3;
329
- --sbb-color-white: #ffffff;
330
- --sbb-color-sky-light: #0074bf;
331
- --sbb-color-sky-dark: #128ede;
332
- --sbb-color-night-light: #143a85;
333
- --sbb-color-night-dark: #6587ca;
334
- --sbb-color-violet-light: #6f2282;
335
- --sbb-color-violet-dark: #b36cc5;
336
- --sbb-color-pink-light: #c7387a;
337
- --sbb-color-pink-dark: #e45295;
338
- --sbb-color-autumn-light: #cf3b00;
339
- --sbb-color-autumn-dark: #f05313;
340
- --sbb-color-orange-light: #f27e00;
341
- --sbb-color-orange-dark: #fb8e19;
342
- --sbb-color-peach-light: #fcbb00;
343
- --sbb-color-peach-dark: #ffc727;
344
- --sbb-color-lemon-light: #ffde15;
345
- --sbb-color-lemon-dark: #ffe547;
346
- --sbb-color-brown-light: #a05400;
347
- --sbb-color-brown-dark: #cf6f04;
348
- --sbb-color-green-light: #008233;
349
- --sbb-color-green-dark: #109d47;
350
- --sbb-color-turquoise-light: #007e84;
351
- --sbb-color-turquoise-dark: #00a59b;
352
- /**
353
- * Original Value: 3px
354
- */
355
- --sbb-focus-outline-offset: 0.1875rem;
356
- --sbb-hover-image-brightness: 1.075;
357
- --sbb-layout-base-grid-columns-zero: 4;
358
- --sbb-layout-base-grid-columns-small: 8;
359
- --sbb-layout-base-grid-columns-large: 12;
360
- --sbb-layout-base-grid-columns-ultra: 16;
361
- /**
362
- * Original Value: 16px
363
- */
364
- --sbb-layout-base-grid-gutter-responsive-zero: 1rem;
365
- /**
366
- * Original Value: 24px
367
- */
368
- --sbb-layout-base-grid-gutter-responsive-small: 1.5rem;
369
- /**
370
- * Original Value: 32px
371
- */
372
- --sbb-layout-base-grid-gutter-responsive-large: 2rem;
373
- /**
374
- * Original Value: 32px
375
- */
376
- --sbb-layout-base-grid-gutter-responsive-ultra: 2rem;
377
- /**
378
- * Original Value: 20px
379
- */
380
- --sbb-layout-base-offset-responsive-zero: 1.25rem;
381
- /**
382
- * Original Value: 48px
383
- */
384
- --sbb-layout-base-offset-responsive-small: 3rem;
385
- /**
386
- * Original Value: 64px
387
- */
388
- --sbb-layout-base-offset-responsive-large: 4rem;
389
- /**
390
- * Original Value: 120px
391
- */
392
- --sbb-layout-base-offset-responsive-ultra: 7.5rem;
393
- /**
394
- * Original Value: 1200px
395
- */
396
- --sbb-layout-base-page-max-width: 75rem;
397
- /**
398
- * Original Value: 0px
399
- */
400
- --sbb-shadow-elevation-level-3-shadow-1-offset-x: 0rem;
401
- /**
402
- * Original Value: 2px
403
- */
404
- --sbb-shadow-elevation-level-3-shadow-1-offset-y: 0.125rem;
405
- /**
406
- * Original Value: 16px
407
- */
408
- --sbb-shadow-elevation-level-3-shadow-1-blur: 1rem;
409
- /**
410
- * Original Value: 0px
411
- */
412
- --sbb-shadow-elevation-level-3-shadow-1-spread: 0rem;
413
- /**
414
- * Original Value: 0px
415
- */
416
- --sbb-shadow-elevation-level-3-shadow-2-offset-x: 0rem;
417
- /**
418
- * Original Value: 1px
419
- */
420
- --sbb-shadow-elevation-level-3-shadow-2-offset-y: 0.0625rem;
421
- /**
422
- * Original Value: 4px
423
- */
424
- --sbb-shadow-elevation-level-3-shadow-2-blur: 0.25rem;
425
- /**
426
- * Original Value: 0px
427
- */
428
- --sbb-shadow-elevation-level-3-shadow-2-spread: 0rem;
429
- /**
430
- * Original Value: 0px
431
- */
432
- --sbb-shadow-elevation-level-5-shadow-1-offset-x: 0rem;
433
- /**
434
- * Original Value: 4px
435
- */
436
- --sbb-shadow-elevation-level-5-shadow-1-offset-y: 0.25rem;
437
- /**
438
- * Original Value: 32px
439
- */
440
- --sbb-shadow-elevation-level-5-shadow-1-blur: 2rem;
441
- /**
442
- * Original Value: 0px
443
- */
444
- --sbb-shadow-elevation-level-5-shadow-1-spread: 0rem;
445
- /**
446
- * Original Value: 0px
447
- */
448
- --sbb-shadow-elevation-level-5-shadow-2-offset-x: 0rem;
449
- /**
450
- * Original Value: 1px
451
- */
452
- --sbb-shadow-elevation-level-5-shadow-2-offset-y: 0.0625rem;
453
- /**
454
- * Original Value: 8px
455
- */
456
- --sbb-shadow-elevation-level-5-shadow-2-blur: 0.5rem;
457
- /**
458
- * Original Value: 0px
459
- */
460
- --sbb-shadow-elevation-level-5-shadow-2-spread: 0rem;
461
- /**
462
- * Original Value: 0px
463
- */
464
- --sbb-shadow-elevation-level-9-shadow-1-offset-x: 0rem;
465
- /**
466
- * Original Value: 16px
467
- */
468
- --sbb-shadow-elevation-level-9-shadow-1-offset-y: 1rem;
469
- /**
470
- * Original Value: 128px
471
- */
472
- --sbb-shadow-elevation-level-9-shadow-1-blur: 8rem;
473
- /**
474
- * Original Value: 0px
475
- */
476
- --sbb-shadow-elevation-level-9-shadow-1-spread: 0rem;
477
- /**
478
- * Original Value: 0px
479
- */
480
- --sbb-shadow-elevation-level-9-shadow-2-offset-x: 0rem;
481
- /**
482
- * Original Value: 4px
483
- */
484
- --sbb-shadow-elevation-level-9-shadow-2-offset-y: 0.25rem;
485
- /**
486
- * Original Value: 32px
487
- */
488
- --sbb-shadow-elevation-level-9-shadow-2-blur: 2rem;
489
- /**
490
- * Original Value: 0px
491
- */
492
- --sbb-shadow-elevation-level-9-shadow-2-spread: 0rem;
493
- /**
494
- * Original Value: 0px
495
- */
496
- --sbb-shadow-elevation-level-11-shadow-1-offset-x: 0rem;
497
- /**
498
- * Original Value: 24px
499
- */
500
- --sbb-shadow-elevation-level-11-shadow-1-offset-y: 1.5rem;
501
- /**
502
- * Original Value: 192px
503
- */
504
- --sbb-shadow-elevation-level-11-shadow-1-blur: 12rem;
505
- /**
506
- * Original Value: 0px
507
- */
508
- --sbb-shadow-elevation-level-11-shadow-1-spread: 0rem;
509
- /**
510
- * Original Value: 0px
511
- */
512
- --sbb-shadow-elevation-level-11-shadow-2-offset-x: 0rem;
513
- /**
514
- * Original Value: 4px
515
- */
516
- --sbb-shadow-elevation-level-11-shadow-2-offset-y: 0.25rem;
517
- /**
518
- * Original Value: 64px
519
- */
520
- --sbb-shadow-elevation-level-11-shadow-2-blur: 4rem;
521
- /**
522
- * Original Value: 0px
523
- */
524
- --sbb-shadow-elevation-level-11-shadow-2-spread: 0rem;
525
- /**
526
- * Original Value: 28px
527
- */
528
- --sbb-size-element-xxxs-zero: 1.75rem;
529
- /**
530
- * Original Value: 28px
531
- */
532
- --sbb-size-element-xxxs-small: 1.75rem;
533
- /**
534
- * Original Value: 32px
535
- */
536
- --sbb-size-element-xxxs-large: 2rem;
537
- /**
538
- * Original Value: 32px
539
- */
540
- --sbb-size-element-xxxs-ultra: 2rem;
541
- /**
542
- * Original Value: 32px
543
- */
544
- --sbb-size-element-xxs-zero: 2rem;
545
- /**
546
- * Original Value: 32px
547
- */
548
- --sbb-size-element-xxs-small: 2rem;
549
- /**
550
- * Original Value: 36px
551
- */
552
- --sbb-size-element-xxs-large: 2.25rem;
553
- /**
554
- * Original Value: 36px
555
- */
556
- --sbb-size-element-xxs-ultra: 2.25rem;
557
- /**
558
- * Original Value: 36px
559
- */
560
- --sbb-size-element-xs-zero: 2.25rem;
561
- /**
562
- * Original Value: 36px
563
- */
564
- --sbb-size-element-xs-small: 2.25rem;
565
- /**
566
- * Original Value: 40px
567
- */
568
- --sbb-size-element-xs-large: 2.5rem;
569
- /**
570
- * Original Value: 40px
571
- */
572
- --sbb-size-element-xs-ultra: 2.5rem;
573
- /**
574
- * Original Value: 44px
575
- */
576
- --sbb-size-element-s-zero: 2.75rem;
577
- /**
578
- * Original Value: 44px
579
- */
580
- --sbb-size-element-s-small: 2.75rem;
581
- /**
582
- * Original Value: 48px
583
- */
584
- --sbb-size-element-s-large: 3rem;
585
- /**
586
- * Original Value: 48px
587
- */
588
- --sbb-size-element-s-ultra: 3rem;
589
- /**
590
- * Original Value: 48px
591
- */
592
- --sbb-size-element-m-zero: 3rem;
593
- /**
594
- * Original Value: 48px
595
- */
596
- --sbb-size-element-m-small: 3rem;
597
- /**
598
- * Original Value: 56px
599
- */
600
- --sbb-size-element-m-large: 3.5rem;
601
- /**
602
- * Original Value: 56px
603
- */
604
- --sbb-size-element-m-ultra: 3.5rem;
605
- /**
606
- * Original Value: 56px
607
- */
608
- --sbb-size-element-l-zero: 3.5rem;
609
- /**
610
- * Original Value: 56px
611
- */
612
- --sbb-size-element-l-small: 3.5rem;
613
- /**
614
- * Original Value: 64px
615
- */
616
- --sbb-size-element-l-large: 4rem;
617
- /**
618
- * Original Value: 64px
619
- */
620
- --sbb-size-element-l-ultra: 4rem;
621
- /**
622
- * Original Value: 16px
623
- */
624
- --sbb-size-icon-ui-extra-small: 1rem;
625
- /**
626
- * Original Value: 24px
627
- */
628
- --sbb-size-icon-ui-small: 1.5rem;
629
- /**
630
- * Original Value: 36px
631
- */
632
- --sbb-size-icon-ui-medium: 2.25rem;
633
- /**
634
- * Original Value: 48px
635
- */
636
- --sbb-size-icon-ui-large: 3rem;
637
- /**
638
- * Original Value: 4px
639
- */
640
- --sbb-spacing-fixed-1x: 0.25rem;
641
- /**
642
- * Original Value: 8px
643
- */
644
- --sbb-spacing-fixed-2x: 0.5rem;
645
- /**
646
- * Original Value: 12px
647
- */
648
- --sbb-spacing-fixed-3x: 0.75rem;
649
- /**
650
- * Original Value: 16px
651
- */
652
- --sbb-spacing-fixed-4x: 1rem;
653
- /**
654
- * Original Value: 20px
655
- */
656
- --sbb-spacing-fixed-5x: 1.25rem;
657
- /**
658
- * Original Value: 24px
659
- */
660
- --sbb-spacing-fixed-6x: 1.5rem;
661
- /**
662
- * Original Value: 28px
663
- */
664
- --sbb-spacing-fixed-7x: 1.75rem;
665
- /**
666
- * Original Value: 32px
667
- */
668
- --sbb-spacing-fixed-8x: 2rem;
669
- /**
670
- * Original Value: 36px
671
- */
672
- --sbb-spacing-fixed-9x: 2.25rem;
673
- /**
674
- * Original Value: 40px
675
- */
676
- --sbb-spacing-fixed-10x: 2.5rem;
677
- /**
678
- * Original Value: 48px
679
- */
680
- --sbb-spacing-fixed-12x: 3rem;
681
- /**
682
- * Original Value: 56px
683
- */
684
- --sbb-spacing-fixed-14x: 3.5rem;
685
- /**
686
- * Original Value: 64px
687
- */
688
- --sbb-spacing-fixed-16x: 4rem;
689
- /**
690
- * Original Value: 72px
691
- */
692
- --sbb-spacing-fixed-18x: 4.5rem;
693
- /**
694
- * Original Value: 76px
695
- */
696
- --sbb-spacing-fixed-19x: 4.75rem;
697
- /**
698
- * Original Value: 80px
699
- */
700
- --sbb-spacing-fixed-20x: 5rem;
701
- /**
702
- * Original Value: 96px
703
- */
704
- --sbb-spacing-fixed-24x: 6rem;
705
- /**
706
- * Original Value: 120px
707
- */
708
- --sbb-spacing-fixed-30x: 7.5rem;
709
- /**
710
- * Original Value: 12px
711
- */
712
- --sbb-spacing-responsive-xxxs-zero: 0.75rem;
713
- /**
714
- * Original Value: 12px
715
- */
716
- --sbb-spacing-responsive-xxxs-small: 0.75rem;
717
- /**
718
- * Original Value: 16px
719
- */
720
- --sbb-spacing-responsive-xxxs-large: 1rem;
721
- /**
722
- * Original Value: 16px
723
- */
724
- --sbb-spacing-responsive-xxxs-ultra: 1rem;
725
- /**
726
- * Original Value: 16px
727
- */
728
- --sbb-spacing-responsive-xxs-zero: 1rem;
729
- /**
730
- * Original Value: 16px
731
- */
732
- --sbb-spacing-responsive-xxs-small: 1rem;
733
- /**
734
- * Original Value: 24px
735
- */
736
- --sbb-spacing-responsive-xxs-large: 1.5rem;
737
- /**
738
- * Original Value: 24px
739
- */
740
- --sbb-spacing-responsive-xxs-ultra: 1.5rem;
741
- /**
742
- * Original Value: 20px
743
- */
744
- --sbb-spacing-responsive-xs-zero: 1.25rem;
745
- /**
746
- * Original Value: 20px
747
- */
748
- --sbb-spacing-responsive-xs-small: 1.25rem;
749
- /**
750
- * Original Value: 24px
751
- */
752
- --sbb-spacing-responsive-xs-large: 1.5rem;
753
- /**
754
- * Original Value: 24px
755
- */
756
- --sbb-spacing-responsive-xs-ultra: 1.5rem;
757
- /**
758
- * Original Value: 24px
759
- */
760
- --sbb-spacing-responsive-s-zero: 1.5rem;
761
- /**
762
- * Original Value: 24px
763
- */
764
- --sbb-spacing-responsive-s-small: 1.5rem;
765
- /**
766
- * Original Value: 32px
767
- */
768
- --sbb-spacing-responsive-s-large: 2rem;
769
- /**
770
- * Original Value: 32px
771
- */
772
- --sbb-spacing-responsive-s-ultra: 2rem;
773
- /**
774
- * Original Value: 32px
775
- */
776
- --sbb-spacing-responsive-m-zero: 2rem;
777
- /**
778
- * Original Value: 32px
779
- */
780
- --sbb-spacing-responsive-m-small: 2rem;
781
- /**
782
- * Original Value: 40px
783
- */
784
- --sbb-spacing-responsive-m-large: 2.5rem;
785
- /**
786
- * Original Value: 48px
787
- */
788
- --sbb-spacing-responsive-m-ultra: 3rem;
789
- /**
790
- * Original Value: 32px
791
- */
792
- --sbb-spacing-responsive-l-zero: 2rem;
793
- /**
794
- * Original Value: 40px
795
- */
796
- --sbb-spacing-responsive-l-small: 2.5rem;
797
- /**
798
- * Original Value: 56px
799
- */
800
- --sbb-spacing-responsive-l-large: 3.5rem;
801
- /**
802
- * Original Value: 64px
803
- */
804
- --sbb-spacing-responsive-l-ultra: 4rem;
805
- /**
806
- * Original Value: 32px
807
- */
808
- --sbb-spacing-responsive-xl-zero: 2rem;
809
- /**
810
- * Original Value: 48px
811
- */
812
- --sbb-spacing-responsive-xl-small: 3rem;
813
- /**
814
- * Original Value: 80px
815
- */
816
- --sbb-spacing-responsive-xl-large: 5rem;
817
- /**
818
- * Original Value: 96px
819
- */
820
- --sbb-spacing-responsive-xl-ultra: 6rem;
821
- /**
822
- * Original Value: 48px
823
- */
824
- --sbb-spacing-responsive-xxl-zero: 3rem;
825
- /**
826
- * Original Value: 72px
827
- */
828
- --sbb-spacing-responsive-xxl-small: 4.5rem;
829
- /**
830
- * Original Value: 96px
831
- */
832
- --sbb-spacing-responsive-xxl-large: 6rem;
833
- /**
834
- * Original Value: 120px
835
- */
836
- --sbb-spacing-responsive-xxl-ultra: 7.5rem;
837
- --sbb-typo-font-family: "SBB", "Helvetica Neue", Helvetica, Arial, sans-serif;
838
- --sbb-typo-letter-spacing-heading: 0em;
839
- --sbb-typo-letter-spacing-text: 0.03em;
840
- --sbb-typo-line-height-heading: 1.4;
841
- --sbb-typo-line-height-text: 1.75;
842
- /**
843
- * Original Value: 12px
844
- */
845
- --sbb-typo-scale-0-75x: 0.75rem;
846
- /**
847
- * Original Value: 13px
848
- */
849
- --sbb-typo-scale-0-8125x: 0.8125rem;
850
- /**
851
- * Original Value: 14px
852
- */
853
- --sbb-typo-scale-0-875x: 0.875rem;
854
- /**
855
- * Original Value: 16px
856
- */
857
- --sbb-typo-scale-default: 1rem;
858
- /**
859
- * Original Value: 18px
860
- */
861
- --sbb-typo-scale-1-125x: 1.125rem;
862
- /**
863
- * Original Value: 20px
864
- */
865
- --sbb-typo-scale-1-25x: 1.25rem;
866
- /**
867
- * Original Value: 24px
868
- */
869
- --sbb-typo-scale-1-5x: 1.5rem;
870
- /**
871
- * Original Value: 32px
872
- */
873
- --sbb-typo-scale-2x: 2rem;
874
- /**
875
- * Original Value: 40px
876
- */
877
- --sbb-typo-scale-2-5x: 2.5rem;
878
- /**
879
- * Original Value: 48px
880
- */
881
- --sbb-typo-scale-3x: 3rem;
882
- /**
883
- * Original Value: 56px
884
- */
885
- --sbb-typo-scale-3-5x: 3.5rem;
886
- /**
887
- * Original Value: 64px
888
- */
889
- --sbb-typo-scale-4x: 4rem;
890
- /**
891
- * We provide an extended collection of CSS variables which are mainly breakpoint
892
- * dependant or simply referencing other variables.
893
- * Due to technical limitations these variables are only provided as CSS variables.
894
- */
895
- /* Colors */
896
- --sbb-color-sky: var(--sbb-color-sky-light);
897
- --sbb-color-sky: light-dark(var(--sbb-color-sky-light), var(--sbb-color-sky-dark));
898
- --sbb-color-night: var(--sbb-color-night-light);
899
- --sbb-color-night: light-dark(var(--sbb-color-night-light), var(--sbb-color-night-dark));
900
- --sbb-color-violet: var(--sbb-color-violet-light);
901
- --sbb-color-violet: light-dark(var(--sbb-color-violet-light), var(--sbb-color-violet-dark));
902
- --sbb-color-pink: var(--sbb-color-pink-light);
903
- --sbb-color-pink: light-dark(var(--sbb-color-pink-light), var(--sbb-color-pink-dark));
904
- --sbb-color-autumn: var(--sbb-color-autumn-light);
905
- --sbb-color-autumn: light-dark(var(--sbb-color-autumn-light), var(--sbb-color-autumn-dark));
906
- --sbb-color-orange: var(--sbb-color-orange-light);
907
- --sbb-color-orange: light-dark(var(--sbb-color-orange-light), var(--sbb-color-orange-dark));
908
- --sbb-color-peach: var(--sbb-color-peach-light);
909
- --sbb-color-peach: light-dark(var(--sbb-color-peach-light), var(--sbb-color-peach-dark));
910
- --sbb-color-lemon: var(--sbb-color-lemon-light);
911
- --sbb-color-lemon: light-dark(var(--sbb-color-lemon-light), var(--sbb-color-lemon-dark));
912
- --sbb-color-brown: var(--sbb-color-brown-light);
913
- --sbb-color-brown: light-dark(var(--sbb-color-brown-light), var(--sbb-color-brown-dark));
914
- --sbb-color-green: var(--sbb-color-green-light);
915
- --sbb-color-green: light-dark(var(--sbb-color-green-light), var(--sbb-color-green-dark));
916
- --sbb-color-turquoise: var(--sbb-color-turquoise-light);
917
- --sbb-color-turquoise: light-dark(
918
- var(--sbb-color-turquoise-light),
919
- var(--sbb-color-turquoise-dark)
920
- );
921
- --sbb-color-royal: var(--sbb-color-royal-light);
922
- --sbb-color-royal: light-dark(var(--sbb-color-royal-light), var(--sbb-color-royal-dark));
923
- --sbb-color-royal85: var(--sbb-color-royal85-light);
924
- --sbb-color-royal85: light-dark(var(--sbb-color-royal85-light), var(--sbb-color-royal85-dark));
925
- --sbb-color-royal125: var(--sbb-color-royal125-light);
926
- --sbb-color-royal125: light-dark(var(--sbb-color-royal125-light), var(--sbb-color-royal125-dark));
927
- --sbb-color-royal150: var(--sbb-color-royal150-light);
928
- --sbb-color-royal150: light-dark(var(--sbb-color-royal150-light), var(--sbb-color-royal150-dark));
929
- --sbb-color-primary: var(--sbb-color-red);
930
- --sbb-color-primary85: var(--sbb-color-red85);
931
- --sbb-color-primary125: var(--sbb-color-red125);
932
- --sbb-color-primary150: var(--sbb-color-red150);
933
- --sbb-color-error: var(--sbb-color-red125);
934
- --sbb-color-error: light-dark(var(--sbb-color-red125), var(--sbb-color-red85));
935
- --sbb-color-success: var(--sbb-color-green);
936
- --sbb-color-warning: var(--sbb-color-peach);
937
- --sbb-color-brand: var(--sbb-color-red);
938
- --sbb-background-color-1: var(--sbb-color-white);
939
- --sbb-background-color-1: light-dark(var(--sbb-color-white), var(--sbb-color-midnight));
940
- --sbb-background-color-1-inverted: var(--sbb-color-midnight);
941
- --sbb-background-color-1-inverted: light-dark(var(--sbb-color-midnight), var(--sbb-color-white));
942
- --sbb-background-color-1-negative: var(--sbb-color-midnight);
943
- --sbb-background-color-1-negative-inverted: var(--sbb-color-white);
944
- --sbb-background-color-2: var(--sbb-color-white);
945
- --sbb-background-color-2: light-dark(var(--sbb-color-white), var(--sbb-color-charcoal));
946
- --sbb-background-color-2-inverted: var(--sbb-color-charcoal);
947
- --sbb-background-color-2-inverted: light-dark(var(--sbb-color-charcoal), var(--sbb-color-white));
948
- --sbb-background-color-2-negative: var(--sbb-color-charcoal);
949
- --sbb-background-color-2-negative-inverted: var(--sbb-color-white);
950
- --sbb-background-color-3: var(--sbb-color-milk);
951
- --sbb-background-color-3: light-dark(var(--sbb-color-milk), var(--sbb-color-charcoal));
952
- --sbb-background-color-3-inverted: var(--sbb-color-charcoal);
953
- --sbb-background-color-3-inverted: light-dark(var(--sbb-color-charcoal), var(--sbb-color-milk));
954
- --sbb-background-color-3-negative: var(--sbb-color-charcoal);
955
- --sbb-background-color-3-negative-inverted: var(--sbb-color-milk);
956
- --sbb-background-color-4: var(--sbb-color-cloud);
957
- --sbb-background-color-4: light-dark(var(--sbb-color-cloud), var(--sbb-color-iron));
958
- --sbb-background-color-4-inverted: var(--sbb-color-iron);
959
- --sbb-background-color-4-inverted: light-dark(var(--sbb-color-iron), var(--sbb-color-cloud));
960
- --sbb-background-color-4-negative: var(--sbb-color-iron);
961
- --sbb-background-color-4-negative-inverted: var(--sbb-color-cloud);
962
- --sbb-color-1: var(--sbb-color-midnight);
963
- --sbb-color-1: light-dark(var(--sbb-color-midnight), var(--sbb-color-white));
964
- --sbb-color-1-inverted: var(--sbb-color-white);
965
- --sbb-color-1-inverted: light-dark(var(--sbb-color-white), var(--sbb-color-midnight));
966
- --sbb-color-1-negative: var(--sbb-color-white);
967
- --sbb-color-1-negative-inverted: var(--sbb-color-midnight);
968
- --sbb-color-2: var(--sbb-color-charcoal);
969
- --sbb-color-2: light-dark(var(--sbb-color-charcoal), var(--sbb-color-white));
970
- --sbb-color-2-inverted: var(--sbb-color-white);
971
- --sbb-color-2-inverted: light-dark(var(--sbb-color-white), var(--sbb-color-charcoal));
972
- --sbb-color-2-negative: var(--sbb-color-white);
973
- --sbb-color-2-negative-inverted: var(--sbb-color-charcoal);
974
- --sbb-color-3: var(--sbb-color-charcoal);
975
- --sbb-color-3: light-dark(var(--sbb-color-charcoal), var(--sbb-color-milk));
976
- --sbb-color-3-inverted: var(--sbb-color-milk);
977
- --sbb-color-3-inverted: light-dark(var(--sbb-color-milk), var(--sbb-color-charcoal));
978
- --sbb-color-3-negative: var(--sbb-color-milk);
979
- --sbb-color-3-negative-inverted: var(--sbb-color-charcoal);
980
- --sbb-color-4: var(--sbb-color-iron);
981
- --sbb-color-4: light-dark(var(--sbb-color-iron), var(--sbb-color-cloud));
982
- --sbb-color-4-inverted: var(--sbb-color-cloud);
983
- --sbb-color-4-inverted: light-dark(var(--sbb-color-cloud), var(--sbb-color-iron));
984
- --sbb-color-4-negative: var(--sbb-color-cloud);
985
- --sbb-color-4-negative-inverted: var(--sbb-color-iron);
986
- --sbb-color-5: var(--sbb-color-smoke);
987
- --sbb-color-6: var(--sbb-color-anthracite);
988
- --sbb-color-6: light-dark(var(--sbb-color-anthracite), var(--sbb-color-platinum));
989
- --sbb-color-6-inverted: var(--sbb-color-platinum);
990
- --sbb-color-6-inverted: light-dark(var(--sbb-color-platinum), var(--sbb-color-anthracite));
991
- --sbb-color-6-negative: var(--sbb-color-platinum);
992
- --sbb-color-6-negative-inverted: var(--sbb-color-anthracite);
993
- --sbb-border-color-1: var(--sbb-color-midnight);
994
- --sbb-border-color-1: light-dark(var(--sbb-color-midnight), var(--sbb-color-white));
995
- --sbb-border-color-1-inverted: var(--sbb-color-white);
996
- --sbb-border-color-1-inverted: light-dark(var(--sbb-color-white), var(--sbb-color-midnight));
997
- --sbb-border-color-1-negative: var(--sbb-color-white);
998
- --sbb-border-color-1-negative-inverted: var(--sbb-color-midnight);
999
- --sbb-border-color-2: var(--sbb-color-charcoal);
1000
- --sbb-border-color-2: light-dark(var(--sbb-color-charcoal), var(--sbb-color-white));
1001
- --sbb-border-color-2-inverted: var(--sbb-color-white);
1002
- --sbb-border-color-2-inverted: light-dark(var(--sbb-color-white), var(--sbb-color-charcoal));
1003
- --sbb-border-color-2-negative: var(--sbb-color-white);
1004
- --sbb-border-color-2-negative-inverted: var(--sbb-color-charcoal);
1005
- --sbb-border-color-3: var(--sbb-color-charcoal);
1006
- --sbb-border-color-3: light-dark(var(--sbb-color-charcoal), var(--sbb-color-milk));
1007
- --sbb-border-color-3-inverted: var(--sbb-color-milk);
1008
- --sbb-border-color-3-inverted: light-dark(var(--sbb-color-milk), var(--sbb-color-charcoal));
1009
- --sbb-border-color-3-negative: var(--sbb-color-milk);
1010
- --sbb-border-color-3-negative-inverted: var(--sbb-color-charcoal);
1011
- --sbb-border-color-4: var(--sbb-color-iron);
1012
- --sbb-border-color-4: light-dark(var(--sbb-color-iron), var(--sbb-color-cloud));
1013
- --sbb-border-color-4-inverted: var(--sbb-color-cloud);
1014
- --sbb-border-color-4-inverted: light-dark(var(--sbb-color-cloud), var(--sbb-color-iron));
1015
- --sbb-border-color-4-negative: var(--sbb-color-cloud);
1016
- --sbb-border-color-4-negative-inverted: var(--sbb-color-iron);
1017
- --sbb-border-color-5: var(--sbb-color-smoke);
1018
- --sbb-border-color-6: var(--sbb-color-anthracite);
1019
- --sbb-border-color-6: light-dark(var(--sbb-color-anthracite), var(--sbb-color-platinum));
1020
- --sbb-border-color-6-inverted: var(--sbb-color-platinum);
1021
- --sbb-border-color-6-inverted: light-dark(var(--sbb-color-platinum), var(--sbb-color-anthracite));
1022
- --sbb-border-color-6-negative: var(--sbb-color-platinum);
1023
- --sbb-border-color-6-negative-inverted: var(--sbb-color-anthracite);
1024
- --sbb-shadow-color-soft-1: color-mix(in srgb, var(--sbb-color-smoke) 5%, transparent);
1025
- --sbb-shadow-color-soft-1: light-dark(
1026
- color-mix(in srgb, var(--sbb-color-smoke) 5%, transparent),
1027
- color-mix(in srgb, var(--sbb-color-black) 15%, transparent)
1028
- );
1029
- --sbb-shadow-color-soft-2: color-mix(in srgb, var(--sbb-color-smoke) 10%, transparent);
1030
- --sbb-shadow-color-soft-2: light-dark(
1031
- color-mix(in srgb, var(--sbb-color-smoke) 10%, transparent),
1032
- color-mix(in srgb, var(--sbb-color-black) 20%, transparent)
1033
- );
1034
- --sbb-shadow-color-soft-1-negative: color-mix(in srgb, var(--sbb-color-black) 15%, transparent);
1035
- --sbb-shadow-color-soft-2-negative: color-mix(in srgb, var(--sbb-color-black) 20%, transparent);
1036
- --sbb-shadow-color-hard-1: color-mix(in srgb, var(--sbb-color-smoke) 10%, transparent);
1037
- --sbb-shadow-color-hard-1: light-dark(
1038
- color-mix(in srgb, var(--sbb-color-smoke) 10%, transparent),
1039
- color-mix(in srgb, var(--sbb-color-black) 30%, transparent)
1040
- );
1041
- --sbb-shadow-color-hard-2: color-mix(in srgb, var(--sbb-color-smoke) 20%, transparent);
1042
- --sbb-shadow-color-hard-2: light-dark(
1043
- color-mix(in srgb, var(--sbb-color-smoke) 20%, transparent),
1044
- color-mix(in srgb, var(--sbb-color-black) 40%, transparent)
1045
- );
1046
- --sbb-shadow-color-hard-1-negative: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);
1047
- --sbb-shadow-color-hard-2-negative: color-mix(in srgb, var(--sbb-color-black) 40%, transparent);
1048
- --sbb-shadow-level-3-shadow-1: var(--sbb-shadow-elevation-level-3-shadow-1-offset-x)
1049
- var(--sbb-shadow-elevation-level-3-shadow-1-offset-y)
1050
- var(--sbb-shadow-elevation-level-3-shadow-1-blur)
1051
- var(--sbb-shadow-elevation-level-3-shadow-1-spread);
1052
- --sbb-shadow-level-3-shadow-2: var(--sbb-shadow-elevation-level-3-shadow-2-offset-x)
1053
- var(--sbb-shadow-elevation-level-3-shadow-2-offset-y)
1054
- var(--sbb-shadow-elevation-level-3-shadow-2-blur)
1055
- var(--sbb-shadow-elevation-level-3-shadow-2-spread);
1056
- --sbb-box-shadow-level-3-soft:
1057
- var(--sbb-shadow-level-3-shadow-2) var(--sbb-shadow-color-soft-2),
1058
- var(--sbb-shadow-level-3-shadow-1) var(--sbb-shadow-color-soft-1);
1059
- --sbb-box-shadow-level-3-soft-negative:
1060
- var(--sbb-shadow-level-3-shadow-2) var(--sbb-shadow-color-soft-2-negative),
1061
- var(--sbb-shadow-level-3-shadow-1) var(--sbb-shadow-color-soft-1-negative);
1062
- --sbb-box-shadow-level-3-hard:
1063
- var(--sbb-shadow-level-3-shadow-2) var(--sbb-shadow-color-hard-2),
1064
- var(--sbb-shadow-level-3-shadow-1) var(--sbb-shadow-color-hard-1);
1065
- --sbb-box-shadow-level-3-hard-negative:
1066
- var(--sbb-shadow-level-3-shadow-2) var(--sbb-shadow-color-hard-2-negative),
1067
- var(--sbb-shadow-level-3-shadow-1) var(--sbb-shadow-color-hard-1-negative);
1068
- --sbb-shadow-level-5-shadow-1: var(--sbb-shadow-elevation-level-5-shadow-1-offset-x)
1069
- var(--sbb-shadow-elevation-level-5-shadow-1-offset-y)
1070
- var(--sbb-shadow-elevation-level-5-shadow-1-blur)
1071
- var(--sbb-shadow-elevation-level-5-shadow-1-spread);
1072
- --sbb-shadow-level-5-shadow-2: var(--sbb-shadow-elevation-level-5-shadow-2-offset-x)
1073
- var(--sbb-shadow-elevation-level-5-shadow-2-offset-y)
1074
- var(--sbb-shadow-elevation-level-5-shadow-2-blur)
1075
- var(--sbb-shadow-elevation-level-5-shadow-2-spread);
1076
- --sbb-box-shadow-level-5-soft:
1077
- var(--sbb-shadow-level-5-shadow-2) var(--sbb-shadow-color-soft-2),
1078
- var(--sbb-shadow-level-5-shadow-1) var(--sbb-shadow-color-soft-1);
1079
- --sbb-box-shadow-level-5-soft-negative:
1080
- var(--sbb-shadow-level-5-shadow-2) var(--sbb-shadow-color-soft-2-negative),
1081
- var(--sbb-shadow-level-5-shadow-1) var(--sbb-shadow-color-soft-1-negative);
1082
- --sbb-box-shadow-level-5-hard:
1083
- var(--sbb-shadow-level-5-shadow-2) var(--sbb-shadow-color-hard-2),
1084
- var(--sbb-shadow-level-5-shadow-1) var(--sbb-shadow-color-hard-1);
1085
- --sbb-box-shadow-level-5-hard-negative:
1086
- var(--sbb-shadow-level-5-shadow-2) var(--sbb-shadow-color-hard-2-negative),
1087
- var(--sbb-shadow-level-5-shadow-1) var(--sbb-shadow-color-hard-1-negative);
1088
- --sbb-shadow-level-9-shadow-1: var(--sbb-shadow-elevation-level-9-shadow-1-offset-x)
1089
- var(--sbb-shadow-elevation-level-9-shadow-1-offset-y)
1090
- var(--sbb-shadow-elevation-level-9-shadow-1-blur)
1091
- var(--sbb-shadow-elevation-level-9-shadow-1-spread);
1092
- --sbb-shadow-level-9-shadow-2: var(--sbb-shadow-elevation-level-9-shadow-2-offset-x)
1093
- var(--sbb-shadow-elevation-level-9-shadow-2-offset-y)
1094
- var(--sbb-shadow-elevation-level-9-shadow-2-blur)
1095
- var(--sbb-shadow-elevation-level-9-shadow-2-spread);
1096
- --sbb-box-shadow-level-9-soft:
1097
- var(--sbb-shadow-level-9-shadow-2) var(--sbb-shadow-color-soft-2),
1098
- var(--sbb-shadow-level-9-shadow-1) var(--sbb-shadow-color-soft-1);
1099
- --sbb-box-shadow-level-9-soft-negative:
1100
- var(--sbb-shadow-level-9-shadow-2) var(--sbb-shadow-color-soft-2-negative),
1101
- var(--sbb-shadow-level-9-shadow-1) var(--sbb-shadow-color-soft-1-negative);
1102
- --sbb-box-shadow-level-9-hard:
1103
- var(--sbb-shadow-level-9-shadow-2) var(--sbb-shadow-color-hard-2),
1104
- var(--sbb-shadow-level-9-shadow-1) var(--sbb-shadow-color-hard-1);
1105
- --sbb-box-shadow-level-9-hard-negative:
1106
- var(--sbb-shadow-level-9-shadow-2) var(--sbb-shadow-color-hard-2-negative),
1107
- var(--sbb-shadow-level-9-shadow-1) var(--sbb-shadow-color-hard-1-negative);
1108
- --sbb-shadow-level-11-shadow-1: var(--sbb-shadow-elevation-level-11-shadow-1-offset-x)
1109
- var(--sbb-shadow-elevation-level-11-shadow-1-offset-y)
1110
- var(--sbb-shadow-elevation-level-11-shadow-1-blur)
1111
- var(--sbb-shadow-elevation-level-11-shadow-1-spread);
1112
- --sbb-shadow-level-11-shadow-2: var(--sbb-shadow-elevation-level-11-shadow-2-offset-x)
1113
- var(--sbb-shadow-elevation-level-11-shadow-2-offset-y)
1114
- var(--sbb-shadow-elevation-level-11-shadow-2-blur)
1115
- var(--sbb-shadow-elevation-level-11-shadow-2-spread);
1116
- --sbb-box-shadow-level-11-soft:
1117
- var(--sbb-shadow-level-11-shadow-2) var(--sbb-shadow-color-soft-2),
1118
- var(--sbb-shadow-level-11-shadow-1) var(--sbb-shadow-color-soft-1);
1119
- --sbb-box-shadow-level-11-soft-negative:
1120
- var(--sbb-shadow-level-11-shadow-2) var(--sbb-shadow-color-soft-2-negative),
1121
- var(--sbb-shadow-level-11-shadow-1) var(--sbb-shadow-color-soft-1-negative);
1122
- --sbb-box-shadow-level-11-hard:
1123
- var(--sbb-shadow-level-11-shadow-2) var(--sbb-shadow-color-hard-2),
1124
- var(--sbb-shadow-level-11-shadow-1) var(--sbb-shadow-color-hard-1);
1125
- --sbb-box-shadow-level-11-hard-negative:
1126
- var(--sbb-shadow-level-11-shadow-2) var(--sbb-shadow-color-hard-2-negative),
1127
- var(--sbb-shadow-level-11-shadow-1) var(--sbb-shadow-color-hard-1-negative);
1128
- --sbb-font-color-default: var(--sbb-color-2);
1129
- /* Focus outline */
1130
- --sbb-focus-outline-color-default: var(--sbb-color-black);
1131
- --sbb-focus-outline-color-dark: var(--sbb-color-white);
1132
- --sbb-focus-outline-color: var(--sbb-focus-outline-color-default);
1133
- --sbb-focus-outline-color: light-dark(
1134
- var(--sbb-focus-outline-color-default),
1135
- var(--sbb-focus-outline-color-dark)
1136
- );
1137
- --sbb-focus-outline-width: var(--sbb-border-width-1x);
1138
- /* Title */
1139
- --sbb-heading-font-size-1: var(--sbb-typo-scale-2-5x);
1140
- --sbb-heading-font-size-2: var(--sbb-typo-scale-2x);
1141
- --sbb-heading-font-size-3: var(--sbb-typo-scale-1-5x);
1142
- --sbb-heading-font-size-4: var(--sbb-typo-scale-1-25x);
1143
- --sbb-heading-font-size-5: var(--sbb-typo-scale-1-125x);
1144
- --sbb-heading-font-size-6: var(--sbb-typo-scale-0-875x);
1145
- --sbb-heading-margin-block-1: var(--sbb-spacing-responsive-l) var(--sbb-spacing-responsive-s);
1146
- --sbb-heading-margin-block-2: var(--sbb-spacing-responsive-m) var(--sbb-spacing-responsive-xxxs);
1147
- --sbb-heading-margin-block-3: var(--sbb-spacing-responsive-m) var(--sbb-spacing-responsive-xxxs);
1148
- --sbb-heading-margin-block-4: var(--sbb-spacing-responsive-m) var(--sbb-spacing-fixed-3x);
1149
- --sbb-heading-margin-block-5: var(--sbb-spacing-responsive-m) var(--sbb-spacing-fixed-2x);
1150
- --sbb-heading-margin-block-6: var(--sbb-spacing-responsive-m) var(--sbb-spacing-fixed-1x);
1151
- /* Text */
1152
- --sbb-text-font-size-xl: var(--sbb-typo-scale-1-25x);
1153
- --sbb-text-font-size-l: var(--sbb-typo-scale-1-125x);
1154
- --sbb-text-font-size-m: var(--sbb-typo-scale-default);
1155
- --sbb-text-font-size-s: var(--sbb-typo-scale-0-875x);
1156
- --sbb-text-font-size-xs: var(--sbb-typo-scale-0-75x);
1157
- --sbb-text-font-size-xxs: var(--sbb-typo-scale-0-75x);
1158
- /* Spacing */
1159
- --sbb-spacing-responsive-xxxs: var(--sbb-spacing-responsive-xxxs-zero);
1160
- --sbb-spacing-responsive-xxs: var(--sbb-spacing-responsive-xxs-zero);
1161
- --sbb-spacing-responsive-xs: var(--sbb-spacing-responsive-xs-zero);
1162
- --sbb-spacing-responsive-s: var(--sbb-spacing-responsive-s-zero);
1163
- --sbb-spacing-responsive-m: var(--sbb-spacing-responsive-m-zero);
1164
- --sbb-spacing-responsive-l: var(--sbb-spacing-responsive-l-zero);
1165
- --sbb-spacing-responsive-xl: var(--sbb-spacing-responsive-xl-zero);
1166
- --sbb-spacing-responsive-xxl: var(--sbb-spacing-responsive-xxl-zero);
1167
- /* Layout */
1168
- --sbb-layout-base-offset-responsive: var(--sbb-layout-base-offset-responsive-zero);
1169
- --sbb-grid-base-columns: var(--sbb-layout-base-grid-columns-zero);
1170
- --sbb-grid-base-gutter-responsive: var(--sbb-layout-base-grid-gutter-responsive-zero);
1171
- /* Size */
1172
- --sbb-size-element-xxxs: var(--sbb-size-element-xxxs-zero);
1173
- --sbb-size-element-xxs: var(--sbb-size-element-xxs-zero);
1174
- --sbb-size-element-xs: var(--sbb-size-element-xs-zero);
1175
- --sbb-size-element-s: var(--sbb-size-element-s-zero);
1176
- --sbb-size-element-m: var(--sbb-size-element-m-zero);
1177
- --sbb-size-element-l: var(--sbb-size-element-l-zero);
1178
- --sbb-alert-background-color: var(--sbb-background-color-1-inverted);
1179
- --sbb-alert-border-radius: var(--sbb-border-radius-4x);
1180
- --sbb-alert-color: var(--sbb-color-aluminium);
1181
- --sbb-alert-color: light-dark(var(--sbb-color-aluminium), var(--sbb-color-anthracite));
1182
- --sbb-alert-padding: var(--sbb-spacing-responsive-xxs) var(--sbb-spacing-responsive-xs);
1183
- --sbb-alert-timing-function: ease-in;
1184
- --sbb-alert-icon-size: 1.25rem;
1185
- --sbb-alert-icon-size-l: var(--sbb-size-icon-ui-small);
1186
- --sbb-alert-title-margin-block: 0;
1187
- --sbb-alert-font-size: var(--sbb-text-font-size-s);
1188
- --sbb-alert-gap: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-responsive-xs);
1189
- --sbb-alert-close-icon-margin: var(--sbb-spacing-responsive-xxs);
1190
- --sbb-alert-group-gap: var(--sbb-spacing-fixed-3x);
1191
- --sbb-alert-group-border-radius: var(--sbb-border-radius-4x);
1192
- --sbb-breadcrumb-color: var(--sbb-color-granite);
1193
- --sbb-breadcrumb-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium));
1194
- --sbb-breadcrumb-color-hover: var(--sbb-color-charcoal);
1195
- --sbb-breadcrumb-color-hover: light-dark(var(--sbb-color-charcoal), var(--sbb-color-smoke));
1196
- --sbb-breadcrumb-color-active: var(--sbb-color-anthracite);
1197
- --sbb-breadcrumb-color-active: light-dark(var(--sbb-color-anthracite), var(--sbb-color-cloud));
1198
- --sbb-breadcrumb-font-size: var(--sbb-text-font-size-xs);
1199
- --sbb-breadcrumb-gap: var(--sbb-spacing-fixed-2x);
1200
- --sbb-breadcrumb-group-wrap: nowrap;
1201
- --sbb-breadcrumb-group-visibility: hidden;
1202
- --sbb-breadcrumb-group-ellipsis-color: var(--sbb-color-granite);
1203
- --sbb-breadcrumb-group-ellipsis-color: light-dark(
1204
- var(--sbb-color-granite),
1205
- var(--sbb-color-cloud)
1206
- );
1207
- --sbb-breadcrumb-group-ellipsis-background-color: transparent;
1208
- --sbb-breadcrumb-group-ellipsis-border-width: var(--sbb-border-width-1x);
1209
- --sbb-breadcrumb-group-ellipsis-border-color: var(--sbb-color-silver);
1210
- --sbb-breadcrumb-group-ellipsis-border-color: light-dark(
1211
- var(--sbb-color-silver),
1212
- var(--sbb-color-anthracite)
1213
- );
1214
- --sbb-button-box-shadow: transparent 0 0;
1215
- --sbb-button-border-radius: var(--sbb-border-radius-infinity);
1216
- --sbb-button-border-width: var(--sbb-border-width-2x);
1217
- --sbb-button-border-disabled-style: dashed;
1218
- --sbb-button-border-disabled-width: var(--sbb-border-width-1x);
1219
- --sbb-button-color-disabled-background: var(--sbb-background-color-3);
1220
- --sbb-button-color-disabled-border: var(--sbb-border-color-5);
1221
- --sbb-button-color-disabled-text: var(--sbb-color-granite);
1222
- --sbb-button-color-disabled-text: light-dark(
1223
- var(--sbb-color-granite),
1224
- var(--sbb-color-aluminium)
1225
- );
1226
- --sbb-button-gap: var(--sbb-spacing-fixed-2x);
1227
- --sbb-button-loading-border-width: var(--sbb-border-width-3x);
1228
- --sbb-button-loading-delay: 300ms;
1229
- --sbb-button-min-height-size-l: var(--sbb-size-element-m);
1230
- --sbb-button-min-height-size-m: var(--sbb-size-element-s);
1231
- --sbb-button-min-height-size-s: var(--sbb-size-element-xs);
1232
- --sbb-button-min-height: var(--sbb-button-min-height-size-m);
1233
- --sbb-button-padding-block-min: var(--sbb-spacing-fixed-1x);
1234
- --sbb-button-padding-inline-size-l: var(--sbb-spacing-fixed-8x);
1235
- --sbb-button-padding-inline-size-m: var(--sbb-spacing-fixed-5x);
1236
- --sbb-button-padding-inline-size-s: var(--sbb-spacing-fixed-4x);
1237
- --sbb-button-padding-inline: var(--sbb-button-padding-inline-size-m);
1238
- --sbb-button-shadow-1-offset-y: var(--sbb-shadow-elevation-level-3-shadow-1-offset-y);
1239
- --sbb-button-shadow-2-offset-y: var(--sbb-shadow-elevation-level-3-shadow-2-offset-y);
1240
- --sbb-button-shadow-1-blur: var(--sbb-shadow-elevation-level-3-shadow-1-blur);
1241
- --sbb-button-shadow-2-blur: var(--sbb-shadow-elevation-level-3-shadow-2-blur);
1242
- --sbb-button-transition-easing-function: var(--sbb-animation-easing);
1243
- --sbb-mini-button-color-text: var(--sbb-color-3);
1244
- --sbb-mini-button-color-default-background: transparent;
1245
- --sbb-mini-button-color-hover-background: var(--sbb-background-color-3);
1246
- --sbb-mini-button-color-active-background: var(--sbb-background-color-4);
1247
- --sbb-mini-button-color-disabled-background: var(--sbb-background-color-3);
1248
- --sbb-mini-button-color-disabled-border: var(--sbb-border-color-5);
1249
- --sbb-mini-button-color-disabled-text: var(--sbb-color-granite);
1250
- --sbb-mini-button-color-disabled-text: light-dark(
1251
- var(--sbb-color-granite),
1252
- var(--sbb-color-smoke)
1253
- );
1254
- --sbb-mini-button-border-radius: var(--sbb-border-radius-infinity);
1255
- --sbb-mini-button-transition-easing-function: var(--sbb-animation-easing);
1256
- --sbb-mini-button-group-background: var(--sbb-background-color-1);
1257
- --sbb-mini-button-group-border-color: var(--sbb-border-color-4-inverted);
1258
- --sbb-mini-button-group-border-width: var(--sbb-border-width-2x);
1259
- --sbb-mini-button-group-border-radius: var(--sbb-border-radius-infinity);
1260
- --sbb-mini-button-group-gap: var(--sbb-spacing-fixed-2x);
1261
- --sbb-mini-button-group-divider-height: var(--sbb-size-icon-ui-small);
1262
- --sbb-mini-button-group-divider-padding: var(--sbb-spacing-fixed-1x);
1263
- --sbb-mini-button-group-min-height-s: var(--sbb-size-element-xs);
1264
- --sbb-mini-button-group-min-height-m: var(--sbb-size-element-s);
1265
- --sbb-mini-button-group-min-height-l: var(--sbb-size-element-m);
1266
- --sbb-mini-button-group-min-height-xl: var(--sbb-size-element-l);
1267
- --sbb-mini-button-group-min-height: var(--sbb-mini-button-group-min-height-m);
1268
- --sbb-mini-button-group-padding-inline-s: var(--sbb-spacing-fixed-2x);
1269
- --sbb-mini-button-group-padding-inline-m: var(--sbb-spacing-fixed-3x);
1270
- --sbb-mini-button-group-padding-inline-l: var(--sbb-spacing-fixed-3x);
1271
- --sbb-mini-button-group-padding-inline-xl: var(--sbb-spacing-fixed-4x);
1272
- --sbb-mini-button-group-padding-inline: var(--sbb-mini-button-group-padding-inline-m);
1273
- --sbb-calendar-cell-background-color: transparent;
1274
- --sbb-calendar-cell-background-color-hover: var(--sbb-background-color-3);
1275
- --sbb-calendar-cell-background-color-active: var(--sbb-background-color-4);
1276
- --sbb-calendar-cell-padding: 0.125rem;
1277
- --sbb-calendar-cell-border-width: var(--sbb-border-width-2x);
1278
- --sbb-calendar-cell-disabled-height: 0.09375rem;
1279
- --sbb-calendar-cell-disabled-width: 1.59375rem;
1280
- --sbb-calendar-cell-disabled-color: var(--sbb-color-granite);
1281
- --sbb-calendar-cell-disabled-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
1282
- --sbb-calendar-cell-transition-easing-function: var(--sbb-animation-easing);
1283
- --sbb-calendar-control-gap: var(--sbb-spacing-fixed-2x);
1284
- --sbb-calendar-control-margin-block-end: var(--sbb-spacing-fixed-4x);
1285
- --sbb-calendar-control-view-change-height: 2.75rem;
1286
- --sbb-calendar-control-view-change-color: var(--sbb-color-3);
1287
- --sbb-calendar-control-view-change-background: var(--sbb-background-color-1);
1288
- --sbb-calendar-control-view-change-padding-inline: var(--sbb-spacing-fixed-5x)
1289
- var(--sbb-spacing-fixed-2x);
1290
- --sbb-calendar-header-color: var(--sbb-color-granite);
1291
- --sbb-calendar-header-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
1292
- --sbb-calendar-table-animation-shift: 0.00625rem;
1293
- --sbb-calendar-table-column-spaces: 12;
1294
- --sbb-calendar-tables-gap: var(--sbb-spacing-fixed-10x);
1295
- --sbb-calendar-table-animation-duration: 0.1ms;
1296
- --sbb-calendar-cell-border: var(--sbb-calendar-cell-border-width) solid
1297
- var(--sbb-border-color-1-inverted);
1298
- --sbb-calendar-cell-color: var(--sbb-color-2);
1299
- --sbb-calendar-cell-cursor: var(--sbb-cursor-pointer);
1300
- --sbb-calendar-cell-justify-content: normal;
1301
- --sbb-calendar-cell-inset: 0.0625rem;
1302
- --sbb-calendar-cell-font-size: var(--sbb-text-font-size-s);
1303
- --sbb-calendar-cell-font-weight: unset;
1304
- --sbb-calendar-cell-transition-easing-function: var(--sbb-animation-easing);
1305
- --sbb-calendar-cell-year-month-width: 4.8125rem;
1306
- --sbb-calendar-cell-year-month-height: 2.75rem;
1307
- --sbb-calendar-day-width: 2.75rem;
1308
- --sbb-calendar-day-height: 3rem;
1309
- --sbb-calendar-day-extra-display: block;
1310
- --sbb-calendar-day-extra-height: var(--sbb-spacing-fixed-4x);
1311
- --sbb-calendar-day-crossed-out-top: 33%;
1312
- --sbb-calendar-day-crossed-out-translate: translate(-50%, -33%) rotate(-45deg);
1313
- --sbb-card-background-color: var(--sbb-background-color-1);
1314
- --sbb-card-border-color: transparent;
1315
- --sbb-card-border-radius: var(--sbb-border-radius-4x);
1316
- --sbb-card-animation-easing: var(--sbb-animation-easing);
1317
- --sbb-card-border-style: solid;
1318
- --sbb-card-padding-inline-default: var(--sbb-spacing-responsive-s);
1319
- --sbb-card-padding-block-default: var(--sbb-spacing-responsive-xxxs);
1320
- --sbb-card-with-badge-padding-block-default: var(--sbb-spacing-fixed-6x) var(--sbb-spacing-responsive-xxxs);
1321
- --sbb-card-badge-gap: var(--sbb-spacing-fixed-2x);
1322
- --sbb-card-badge-color: var(--sbb-color-2-inverted);
1323
- --sbb-card-badge-background-color: var(--sbb-background-color-3-inverted);
1324
- --sbb-card-badge-border-color: transparent;
1325
- --sbb-card-badge-padding-inline: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-3x);
1326
- --sbb-card-badge-border-width: var(--sbb-border-width-1x);
1327
- --sbb-card-badge-border-radius: var(--sbb-border-radius-4x);
1328
- --sbb-card-badge-skew: skew(16deg, 0deg);
1329
- --sbb-carousel-background-color: var(--sbb-background-color-1);
1330
- --sbb-carousel-border-radius: var(--sbb-border-radius-4x);
1331
- --sbb-carousel-box-shadow: var(--sbb-box-shadow-level-9-hard);
1332
- --sbb-carousel-paginator-padding: var(--sbb-spacing-responsive-xs);
1333
- --sbb-chip-label-color: var(--sbb-color-granite);
1334
- --sbb-chip-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cloud));
1335
- --sbb-chip-label-background-color: var(--sbb-background-color-3);
1336
- --sbb-chip-label-padding-block: 0em;
1337
- --sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-2x);
1338
- --sbb-chip-label-font-size: var(--sbb-text-font-size-xxs);
1339
- --sbb-chip-background-color: var(--sbb-background-color-3);
1340
- --sbb-chip-background-color-active: var(--sbb-background-color-1);
1341
- --sbb-chip-background-color-hover: var(--sbb-background-color-1);
1342
- --sbb-chip-border-color: var(--sbb-border-color-4-inverted);
1343
- --sbb-chip-border-radius: var(--sbb-border-radius-2x);
1344
- --sbb-chip-color: var(--sbb-color-granite);
1345
- --sbb-chip-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cloud));
1346
- --sbb-chip-color-hover: var(--sbb-color-2);
1347
- --sbb-chip-font-size: var(--sbb-text-font-size-xxs);
1348
- --sbb-chip-height: 1.5rem;
1349
- --sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-2x);
1350
- --sbb-chip-group-gap: var(--sbb-spacing-fixed-1x);
1351
- --sbb-chip-group-input-min-width: 9.375rem;
1352
- --_sbb-chip-group-margin-block-start-default: 0.125rem;
1353
- --_sbb-chip-group-margin-block-start-default-large: 0.21875rem;
1354
- --_sbb-chip-group-margin-block-base-lm: var(--_sbb-chip-group-margin-block-start-default) 0;
1355
- --_sbb-chip-group-margin-block-with-label-s: 0.375rem 0.3125rem;
1356
- --_sbb-chip-group-margin-block-without-label-s: 0 0.4375rem;
1357
- --_sbb-chip-group-margin-block-without-label-m: 0.1875rem
1358
- 0.6875rem;
1359
- --_sbb-chip-group-margin-block-without-label-l: var(--_sbb-chip-group-margin-block-start-default)
1360
- 1rem;
1361
- --_sbb-chip-group-margin-block-with-label-l: var(--_sbb-chip-group-margin-block-start-default)
1362
- 0.46875rem;
1363
- --_sbb-chip-group-margin-block-with-label-m: var(--_sbb-chip-group-margin-block-start-default)
1364
- var(--_sbb-chip-group-margin-block-start-default-large);
1365
- --sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-base-lm);
1366
- --sbb-chip-group-margin-block-no-label-not-empty: var(--_sbb-chip-group-margin-block-without-label-m);
1367
- --sbb-chip-group-margin-block-with-label-not-empty: var(--_sbb-chip-group-margin-block-with-label-m);
1368
- --sbb-selection-panel-background-default: var(--sbb-background-color-1);
1369
- --sbb-selection-panel-background-milk: var(--sbb-background-color-3);
1370
- --sbb-selection-panel-border-radius: var(--sbb-border-radius-4x);
1371
- --sbb-selection-panel-border-color-default: var(--sbb-border-color-4-inverted);
1372
- --sbb-selection-panel-border-color-checked: var(--sbb-border-color-3);
1373
- --sbb-selection-panel-border-color-borderless: transparent;
1374
- --sbb-selection-panel-border-color: var(--sbb-selection-panel-border-color-default);
1375
- --sbb-selection-panel-border-width-default: var(--sbb-border-width-1x);
1376
- --sbb-selection-panel-border-width-checked: var(--sbb-border-width-2x);
1377
- --sbb-selection-panel-input-padding-block-xs: var(--sbb-spacing-responsive-xxs);
1378
- --sbb-selection-panel-input-padding-inline-xs: var(--sbb-spacing-responsive-xxxs);
1379
- --sbb-selection-panel-input-padding-block-s: var(--sbb-spacing-responsive-xxs);
1380
- --sbb-selection-panel-input-padding-inline-s: var(--sbb-spacing-responsive-xxxs);
1381
- --sbb-selection-panel-input-padding-block-m: var(--sbb-spacing-responsive-xs);
1382
- --sbb-selection-panel-input-padding-inline-m: var(--sbb-spacing-responsive-xxs);
1383
- --sbb-selection-panel-input-padding: var(--sbb-selection-panel-input-padding-block-m) var(--sbb-selection-panel-input-padding-inline-m);
1384
- --sbb-selection-panel-checkbox-dimension: var(--sbb-checkbox-dimension-m);
1385
- --sbb-selection-panel-cursor: var(--sbb-cursor-pointer);
1386
- --sbb-selection-panel-suffix-color: var(--sbb-color-3);
1387
- --sbb-selection-panel-subtext-color: var(--sbb-color-granite);
1388
- --sbb-selection-panel-subtext-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
1389
- --sbb-checkbox-label-icon-flex-direction: row;
1390
- --sbb-checkbox-label-icon-justify-content: space-between;
1391
- --sbb-checkbox-label-icon-flex-grow: 1;
1392
- --sbb-checkbox-label-gap: var(--sbb-spacing-fixed-2x);
1393
- --sbb-checkbox-dimension-xs: 1.25rem;
1394
- --sbb-checkbox-dimension-s: var(--sbb-size-icon-ui-small);
1395
- --sbb-checkbox-dimension-m: var(--sbb-size-icon-ui-small);
1396
- --sbb-checkbox-dimension: var(--sbb-checkbox-dimension-m);
1397
- --sbb-checkbox-font-size: var(--sbb-text-font-size-m);
1398
- --sbb-checkbox-label-color: var(--sbb-color-color-3);
1399
- --sbb-checkbox-cursor: var(--sbb-cursor-pointer);
1400
- --sbb-container-background-border-radius: 0;
1401
- --sbb-container-color: inherit;
1402
- --sbb-sticky-bar-animation-easing: var(--sbb-animation-easing);
1403
- --sbb-sticky-bar-border-radius: var(--sbb-border-radius-8x);
1404
- --sbb-sticky-bar-padding-block: var(--sbb-spacing-responsive-xs);
1405
- --sbb-sticky-bar-position: sticky;
1406
- --sbb-sticky-bar-slide-vertically-animation-easing: ease-out;
1407
- --sbb-clock-seconds-hand-color: var(--sbb-color-brand);
1408
- --sbb-clock-face-color: var(--sbb-color-1);
1409
- --sbb-clock-background-color: var(--sbb-background-color-1);
1410
- --sbb-dialog-padding-inline: var(--sbb-spacing-fixed-5x);
1411
- --sbb-dialog-color: var(--sbb-color-2);
1412
- --sbb-dialog-background-color: var(--sbb-background-color-1);
1413
- --sbb-dialog-block-shadow: var(--sbb-box-shadow-level-9-soft);
1414
- --sbb-dialog-color-negative: var(--sbb-color-2-negative);
1415
- --sbb-dialog-block-shadow-negative: var(--sbb-box-shadow-level-9-soft-negative);
1416
- --sbb-dialog-width: auto;
1417
- --sbb-dialog-max-width: 100%;
1418
- --sbb-dialog-height: auto;
1419
- --sbb-dialog-max-height: calc(100vh - var(--sbb-spacing-fixed-6x));
1420
- --sbb-dialog-inset-block: 0 auto;
1421
- --sbb-dialog-inset-inline: 0 auto;
1422
- --sbb-dialog-border-radius: var(--sbb-border-radius-8x);
1423
- --sbb-dialog-animation-easing: ease;
1424
- --sbb-dialog-pointer-events: none;
1425
- --sbb-dialog-backdrop-visibility: hidden;
1426
- --sbb-dialog-backdrop-pointer-events: none;
1427
- --sbb-dialog-backdrop-color: transparent;
1428
- --sbb-dialog-actions-border-color: var(--sbb-background-color-4);
1429
- --sbb-dialog-close-button-inset-inline-end: var(--sbb-spacing-fixed-4x);
1430
- --sbb-dialog-close-button-margin-inline: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-4x);
1431
- --sbb-divider-color: var(--sbb-background-color-4);
1432
- --sbb-divider-color-negative: var(--sbb-background-color-4-negative);
1433
- --sbb-divider-border-width: var(--sbb-border-width-1x);
1434
- --sbb-error-color: var(--sbb-color-error);
1435
- --sbb-error-icon-size: 1.0625rem;
1436
- --sbb-error-font-size: var(--sbb-text-font-size-xs);
1437
- --sbb-expansion-panel-background-color: var(--sbb-background-color-1);
1438
- --sbb-expansion-panel-background-color-hover: var(--sbb-background-color-3);
1439
- --sbb-expansion-panel-border-radius: var(--sbb-border-radius-4x);
1440
- --sbb-expansion-panel-icon-size: var(--sbb-size-icon-ui-medium);
1441
- --sbb-expansion-panel-title-gap-s: var(--sbb-spacing-fixed-2x);
1442
- --sbb-expansion-panel-title-gap-l: var(--sbb-spacing-fixed-4x);
1443
- --sbb-expansion-panel-title-gap-default: var(--sbb-expansion-panel-title-gap-l);
1444
- --sbb-expansion-panel-content-padding-block-end: var(--sbb-spacing-responsive-s);
1445
- --sbb-expansion-panel-content-padding-inline-s: var(--sbb-spacing-fixed-5x);
1446
- --sbb-expansion-panel-content-padding-inline-l: var(--sbb-spacing-fixed-6x);
1447
- --sbb-expansion-panel-content-padding-inline-default: var(--sbb-expansion-panel-content-padding-inline-l);
1448
- --sbb-expansion-panel-header-cursor: var(--sbb-cursor-pointer);
1449
- --sbb-expansion-panel-header-font-size: var(--sbb-text-font-size-l);
1450
- --sbb-expansion-panel-header-text-color: var(--sbb-color-2);
1451
- --sbb-expansion-panel-header-justify-content: space-between;
1452
- --sbb-expansion-panel-header-gap-s: var(--sbb-spacing-fixed-2x);
1453
- --sbb-expansion-panel-header-gap-l: var(--sbb-spacing-fixed-6x);
1454
- --sbb-expansion-panel-header-gap-default: var(--sbb-expansion-panel-header-gap-l);
1455
- --sbb-expansion-panel-header-padding-block-s: var(--sbb-spacing-fixed-3x);
1456
- --sbb-expansion-panel-header-padding-block-l: var(--sbb-spacing-responsive-xs);
1457
- --sbb-expansion-panel-header-padding-block-default: var(--sbb-expansion-panel-header-padding-block-l);
1458
- --sbb-expansion-panel-header-padding-inline-s: var(--sbb-spacing-fixed-5x);
1459
- --sbb-expansion-panel-header-padding-inline-l: var(--sbb-spacing-fixed-6x);
1460
- --sbb-expansion-panel-header-padding-inline-default: var(--sbb-expansion-panel-header-padding-inline-l);
1461
- --sbb-file-selector-color: var(--sbb-color-2);
1462
- --sbb-file-selector-subtitle-color: var(--sbb-color-granite);
1463
- --sbb-file-selector-subtitle-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
1464
- --sbb-file-selector-background-color: var(--sbb-background-color-1);
1465
- --sbb-file-selector-border-color: var(--sbb-border-color-4-inverted);
1466
- --sbb-file-selector-transition-easing-function: var(--sbb-animation-easing);
1467
- --_sbb-file-selector-dropzone-icon-medium-display: block;
1468
- --_sbb-file-selector-dropzone-icon-small-display: none;
1469
- --sbb-flip-card-background-color: var(--sbb-background-color-4);
1470
- --sbb-flip-card-border: var(--sbb-border-width-2x);
1471
- --sbb-flip-card-border-radius: var(--sbb-border-radius-4x);
1472
- --sbb-flip-card-button-dimensions: var(--sbb-button-min-height-size-s);
1473
- --sbb-flip-card-padding: var(--sbb-spacing-responsive-s);
1474
- --sbb-flip-card-padding-block-end: var(--sbb-spacing-responsive-xs);
1475
- --sbb-flip-card-min-height: 17.5rem;
1476
- --sbb-flip-card-details-translate-y: var(--sbb-spacing-fixed-2x);
1477
- --sbb-footer-background-color: var(--sbb-background-color-3);
1478
- --sbb-footer-clock-width: 4.75rem;
1479
- --sbb-footer-color: var(--sbb-color-granite);
1480
- --sbb-footer-color: light-dark(var(--sbb-color-granite), var(--sbb-color-white));
1481
- --sbb-footer-font-size: var(--sbb-text-font-size-s);
1482
- --sbb-footer-gap-horizontal: var(--sbb-grid-base-gutter-responsive);
1483
- --sbb-footer-gap-vertical: var(--sbb-spacing-responsive-l);
1484
- --sbb-footer-padding-block: var(--sbb-spacing-responsive-l);
1485
- --sbb-form-field-background-color: var(--sbb-background-color-1);
1486
- --sbb-form-field-border-color: var(--sbb-border-color-5);
1487
- --sbb-form-field-border-style: solid;
1488
- --sbb-form-field-border-radius: var(--sbb-border-radius-4x);
1489
- --sbb-form-field-border-width: var(--sbb-border-width-1x);
1490
- --sbb-form-field-color: var(--sbb-color-3);
1491
- --sbb-form-field-label-color: var(--sbb-color-metal);
1492
- --sbb-form-field-label-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
1493
- --sbb-form-field-prefix-color: var(--sbb-color-metal);
1494
- --sbb-form-field-prefix-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
1495
- --sbb-form-field-text-color: var(--sbb-color-3);
1496
- --sbb-form-field-arrow-color: var(--sbb-color-3);
1497
- --sbb-form-field-gap: var(--sbb-spacing-fixed-2x);
1498
- --sbb-form-field-icon-size: var(--sbb-size-icon-ui-small);
1499
- --sbb-form-field-min-height: var(--sbb-size-element-m);
1500
- --sbb-form-field-padding-inline: var(--sbb-spacing-fixed-3x);
1501
- --sbb-form-field-input-text-size: var(--sbb-text-font-size-m);
1502
- --sbb-form-field-label-text-size: var(--sbb-text-font-size-xs);
1503
- --_sbb-form-field-label-to-input-overlapping: var(--sbb-spacing-fixed-1x);
1504
- --_sbb-form-field-floating-label-transform: 0.53125rem;
1505
- --_sbb-form-field-spacer-margin-block-end: calc(-1 * var(--_sbb-form-field-label-to-input-overlapping));
1506
- --_sbb-form-field-input-margin-block-end: 0;
1507
- --sbb-header-background: var(--sbb-background-color-1);
1508
- --sbb-header-box-shadow: var(--sbb-box-shadow-level-9-soft);
1509
- --sbb-header-inset-inline-end: 0;
1510
- --sbb-header-position: fixed;
1511
- --sbb-header-height-s: 3.25rem;
1512
- --sbb-header-height-m: var(--sbb-spacing-fixed-14x);
1513
- --sbb-header-height: var(--sbb-header-height-m);
1514
- --sbb-header-action-color: var(--sbb-color-1);
1515
- --sbb-header-action-background-color: transparent;
1516
- --sbb-header-action-min-height-s: var(--sbb-size-element-xs);
1517
- --sbb-header-action-min-height-m: var(--sbb-size-element-s);
1518
- --sbb-header-action-min-height: var(--sbb-header-action-min-height-m);
1519
- --sbb-header-action-padding-inline-s: var(--sbb-spacing-fixed-4x);
1520
- --sbb-header-action-padding-inline-m: var(--sbb-spacing-fixed-5x);
1521
- --sbb-header-action-padding-inline: var(--sbb-header-action-padding-inline-m);
1522
- --sbb-header-action-transition-easing: var(--sbb-animation-easing);
1523
- --sbb-header-action-border-color: transparent;
1524
- --sbb-header-action-gap: var(--sbb-spacing-fixed-2x);
1525
- --sbb-header-action-icon-dimension: var(--sbb-size-icon-ui-small);
1526
- --sbb-header-action-active-border-width: var(--sbb-border-width-2x);
1527
- --sbb-header-action-active-border-color: var(--sbb-header-action-color);
1528
- --sbb-header-first-item-icon-shift: 0.125rem;
1529
- --sbb-header-environment-background-color: var(--sbb-color-granite);
1530
- --sbb-header-environment-color: var(--sbb-color-1-negative);
1531
- --sbb-header-environment-size: 2.375rem;
1532
- --sbb-header-environment-rotate: 45deg;
1533
- --sbb-icon-sidebar-background-color: var(--sbb-background-color-1);
1534
- --sbb-icon-sidebar-border-radius: var(--sbb-border-radius-8x);
1535
- --sbb-lead-container-background-color: var(--sbb-background-color-1);
1536
- --sbb-lead-container-image-ratio: 2 / 1;
1537
- --sbb-lead-container-image-overlap: var(--sbb-spacing-fixed-24x);
1538
- --sbb-lead-container-content-padding-block: var(--sbb-spacing-responsive-l);
1539
- --sbb-lead-container-padding-block: 0 var(--sbb-spacing-responsive-l);
1540
- --sbb-lead-container-padding-inline: var(--sbb-layout-base-offset-responsive);
1541
- --sbb-lead-container-border-radius: var(--sbb-border-radius-6x);
1542
- --sbb-lead-container-image-border-radius: 0;
1543
- --sbb-block-link-gap: var(--sbb-spacing-fixed-1x);
1544
- --sbb-block-link-icon-size: var(--sbb-size-icon-ui-small);
1545
- --sbb-block-link-font-size: var(--sbb-text-font-size-s);
1546
- --sbb-loading-indicator-color: var(--sbb-color-primary);
1547
- --sbb-loading-indicator-window-element-rotation: 55.24deg;
1548
- --sbb-loading-indicator-window-height: 1.125rem;
1549
- --sbb-loading-indicator-window-element-width: 3.4375rem;
1550
- --sbb-loading-indicator-circle-color: var(--sbb-color-primary);
1551
- --sbb-loading-indicator-circle-padding: 0.125rem;
1552
- --sbb-loading-indicator-circle-background-color: var(--sbb-color-white);
1553
- --sbb-loading-indicator-circle-animated-width: 0.1875em;
1554
- --sbb-loading-indicator-circle-animated-height: 0.1875em;
1555
- --sbb-loading-indicator-circle-animated-border-radius: 50%;
1556
- --sbb-logo-panel-color: var(--sbb-color-brand);
1557
- --sbb-logo-signet-color: var(--sbb-color-white);
1558
- --sbb-logo-word-mark-color: var(--sbb-color-black);
1559
- --sbb-logo-word-mark-color: light-dark(var(--sbb-color-black), var(--sbb-color-white));
1560
- --sbb-logo-aspect-ratio: 454 / 48;
1561
- --sbb-map-container-map-height-zero: 18.4375rem;
1562
- --sbb-map-container-map-height-small: 20rem;
1563
- --sbb-map-container-sidebar-width: 25rem;
1564
- --sbb-map-container-sidebar-background-color: var(--sbb-background-color-1);
1565
- --sbb-map-container-border-radius: var(--sbb-border-radius-4x);
1566
- --sbb-menu-animation-easing: ease;
1567
- --sbb-menu-max-width: 100%;
1568
- --sbb-menu-min-width: 100%;
1569
- --sbb-menu-container-height: 100dvh;
1570
- --sbb-menu-max-height: calc(85vh - var(--sbb-spacing-fixed-8x));
1571
- --sbb-menu-min-height: 3.03125rem;
1572
- --sbb-menu-border-radius: var(--sbb-border-radius-4x);
1573
- --sbb-menu-color: var(--sbb-color-2-inverted);
1574
- --sbb-menu-background-color: var(--sbb-background-color-1-inverted);
1575
- --sbb-menu-action-border-radius: var(--sbb-border-radius-infinity);
1576
- --sbb-menu-action-outer-horizontal-padding: var(--sbb-spacing-fixed-3x);
1577
- --sbb-menu-action-outer-vertical-padding: var(--sbb-spacing-fixed-1x);
1578
- --sbb-menu-action-gap: var(--sbb-spacing-fixed-2x);
1579
- --sbb-menu-action-color: var(--sbb-color-2-inverted);
1580
- --sbb-menu-action-content-padding-inline: var(--sbb-spacing-fixed-2x);
1581
- --sbb-menu-action-content-padding-block: var(--sbb-spacing-fixed-1x);
1582
- --sbb-menu-action-forced-color-border-color: CanvasText;
1583
- --sbb-message-action-margin-block: var(--sbb-spacing-responsive-xxxs) 0;
1584
- --sbb-message-image-margin-block: 0 var(--sbb-spacing-responsive-s);
1585
- --sbb-message-image-border-radius: var(--sbb-border-radius-4x);
1586
- --sbb-message-subtitle-color: var(--sbb-color-granite);
1587
- --sbb-message-subtitle-color: light-dark(var(--sbb-color-granite), var(--sbb-color-platinum));
1588
- --sbb-message-legend-margin-block: var(--sbb-spacing-responsive-xxxs) 0;
1589
- --sbb-navigation-grid-column: 1 / -1;
1590
- --sbb-navigation-animation-easing: ease-in;
1591
- --sbb-navigation-padding-inline: var(--sbb-layout-base-offset-responsive);
1592
- --sbb-navigation-padding-block-start: var(--sbb-spacing-responsive-l);
1593
- --sbb-navigation-padding-block-end: var(--sbb-spacing-responsive-xl);
1594
- --sbb-navigation-backdrop-color: color-mix(in srgb, var(--sbb-color-black) 70%, transparent);
1595
- --sbb-navigation-backdrop-animation-name: backdrop-open;
1596
- --sbb-navigation-background-color: var(--sbb-background-color-1-negative);
1597
- --sbb-navigation-color: var(--sbb-color-1-negative);
1598
- --sbb-navigation-list-margin-block-start: var(--sbb-spacing-responsive-xxl);
1599
- --sbb-navigation-expanded-width: 100%;
1600
- --sbb-navigation-inset: 0 auto auto 0;
1601
- --sbb-navigation-translate: -100% 0;
1602
- --sbb-navigation-content-gap: var(--sbb-spacing-responsive-xxl);
1603
- --sbb-navigation-content-translate: 0;
1604
- --sbb-navigation-width: 100%;
1605
- --sbb-navigation-height: 100dvh;
1606
- --sbb-navigation-action-color: var(--sbb-color-4-negative);
1607
- --sbb-navigation-action-icon-display: none;
1608
- --sbb-navigation-action-font-size: var(--sbb-text-font-size-xl);
1609
- --sbb-navigation-action-letter-spacing: var(--sbb-typo-letter-spacing-heading);
1610
- --sbb-navigation-action-line-height: var(--sbb-typo-line-height-heading);
1611
- --sbb-navigation-list-font-size: var(--sbb-text-font-size-xxs);
1612
- --sbb-navigation-list-gap: var(--sbb-spacing-fixed-2x);
1613
- --sbb-navigation-list-margin-block: var(--sbb-spacing-fixed-1x);
1614
- --sbb-navigation-list-padding-block-end: var(--sbb-spacing-fixed-2x);
1615
- --sbb-navigation-action-gap: var(--sbb-spacing-responsive-xs);
1616
- --sbb-navigation-marker-position-x: var(--sbb-spacing-fixed-1x);
1617
- --sbb-navigation-marker-position-y: unset;
1618
- --sbb-navigation-marker-width: 1.0625rem;
1619
- --sbb-navigation-marker-border: var(--sbb-border-width-1x);
1620
- --sbb-navigation-marker-padding-inline-start: var(--sbb-spacing-fixed-6x);
1621
- --sbb-navigation-marker-typo-line-height: var(--sbb-typo-line-height-heading);
1622
- --sbb-navigation-margin-inline-start: var(--sbb-spacing-fixed-3x);
1623
- --sbb-navigation-marker-font-size: var(--sbb-text-font-size-xl);
1624
- --sbb-navigation-marker-letter-spacing: var(--sbb-typo-letter-spacing-heading);
1625
- --sbb-navigation-marker-line-height: var(--sbb-typo-line-height-heading);
1626
- --sbb-navigation-section-column: 1 / -1;
1627
- --sbb-navigation-section-position: fixed;
1628
- --sbb-navigation-section-pointer-events: none;
1629
- --sbb-navigation-section-animation-easing: ease-out;
1630
- --sbb-navigation-section-padding-inline: var(--sbb-layout-base-offset-responsive);
1631
- --sbb-navigation-section-padding-block: var(--sbb-spacing-responsive-l);
1632
- --sbb-navigation-section-translate: 100%;
1633
- --sbb-navigation-section-content-padding-inline-start: var(--sbb-spacing-fixed-12x);
1634
- --sbb-navigation-section-width: 100dvw;
1635
- --sbb-navigation-section-height: 100dvh;
1636
- --sbb-navigation-section-font-size: var(--sbb-heading-font-size-4);
1637
- --sbb-mini-calendar-day-animation-easing: var(--sbb-animation-easing);
1638
- --sbb-mini-calendar-day-dimensions: 0.375rem;
1639
- --sbb-mini-calendar-day-scale: 1.333;
1640
- --sbb-mini-calendar-month-offset: 0;
1641
- --sbb-mini-calendar-month-visibilty-year: hidden;
1642
- --sbb-mini-calendar-month-label-color: var(--sbb-color-granite);
1643
- --sbb-mini-calendar-month-label-color: light-dark(
1644
- var(--sbb-color-granite),
1645
- var(--sbb-color-silver)
1646
- );
1647
- --sbb-notification-base-border-radius: var(--sbb-border-radius-4x);
1648
- --sbb-notification-border-width: var(--sbb-border-width-1x);
1649
- --sbb-notification-color: var(--sbb-color-2-negative-inverted);
1650
- --sbb-notification-icon-align-self: center;
1651
- --sbb-notification-margin: 0;
1652
- --sbb-notification-timing-function: ease-in;
1653
- --sbb-notification-font-size: var(--sbb-text-font-size-s);
1654
- --sbb-notification-padding-block: var(--sbb-spacing-responsive-xxs);
1655
- --sbb-notification-padding-inline: var(--sbb-spacing-responsive-xs);
1656
- --sbb-notification-content-margin-block-start: var(--sbb-spacing-fixed-2x);
1657
- --sbb-notification-content-padding-inline: var(--sbb-spacing-responsive-xxxs) var(--sbb-spacing-responsive-xs);
1658
- --sbb-notification-close-wrapper-gap: var(--sbb-spacing-responsive-xxs);
1659
- --sbb-option-color: var(--sbb-color-3);
1660
- --sbb-option-background-color: inherit;
1661
- --sbb-option-background-color-hover: var(--sbb-color-milk);
1662
- --sbb-option-background-color-hover: light-dark(var(--sbb-color-milk), var(--sbb-color-midnight));
1663
- --sbb-option-background-color-active: var(--sbb-background-color-4);
1664
- --sbb-option-disabled-border-color: var(--sbb-color-graphite);
1665
- --sbb-option-disabled-border-color: light-dark(var(--sbb-color-graphite), var(--sbb-color-smoke));
1666
- --sbb-option-disabled-background-color: var(--sbb-background-color-3);
1667
- --sbb-option-padding-inline: var(--sbb-spacing-responsive-xxxs);
1668
- --sbb-option-min-height: var(--sbb-size-element-s);
1669
- --sbb-option-column-gap: var(--sbb-spacing-responsive-xxxs);
1670
- --sbb-option-justify-content: start;
1671
- --sbb-option-cursor: var(--sbb-cursor-pointer);
1672
- --sbb-option-border-radius: var(--sbb-border-radius-4x);
1673
- --sbb-option-icon-color: var(--sbb-color-metal);
1674
- --sbb-option-icon-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
1675
- --sbb-option-focus-outline-offset: inherit;
1676
- --sbb-option-focus-outline-color: transparent;
1677
- --sbb-option-focus-outline-inset: var(--sbb-spacing-fixed-1x);
1678
- --sbb-option-font-size: var(--sbb-text-font-size-s);
1679
- --sbb-option-hint-color: var(--sbb-color-metal);
1680
- --sbb-option-hint-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
1681
- --sbb-option-hint-column-gap: var(--sbb-spacing-responsive-xxxs);
1682
- --sbb-option-hint-padding-block-end: var(--sbb-spacing-fixed-2x);
1683
- --sbb-option-hint-padding-inline: var(--sbb-spacing-responsive-xxxs);
1684
- --sbb-option-hint-font-size: var(--sbb-text-font-size-xxs);
1685
- --sbb-options-panel-border-radius: var(--sbb-border-radius-4x);
1686
- --sbb-options-panel-animation-timing-function: ease;
1687
- --sbb-options-panel-background-color: var(--sbb-background-color-2);
1688
- --sbb-options-panel-divider-margin-block: var(--sbb-spacing-fixed-3x);
1689
- --sbb-options-panel-box-shadow: var(--sbb-box-shadow-level-9-hard);
1690
- --sbb-options-panel-margin-block-start: var(--sbb-spacing-fixed-2x);
1691
- --sbb-options-panel-padding-block: var(--sbb-spacing-fixed-1x);
1692
- --sbb-optgroup-label-color: var(--sbb-color-metal);
1693
- --sbb-optgroup-label-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
1694
- --sbb-optgroup-label-font-size: var(--sbb-text-font-size-xxs);
1695
- --sbb-optgroup-label-padding-end: var(--sbb-spacing-fixed-2x);
1696
- --sbb-optgroup-label-padding-inline: var(--sbb-spacing-responsive-xxxs);
1697
- --sbb-overlay-background-color: var(--sbb-background-color-3);
1698
- --sbb-overlay-display: none;
1699
- --sbb-overlay-height: 100%;
1700
- --sbb-overlay-inset: 0 auto auto 0;
1701
- --sbb-overlay-animation-easing: ease;
1702
- --sbb-overlay-pointer-events: none;
1703
- --sbb-overlay-container-display: none;
1704
- --sbb-paginator-color: var(--sbb-color-metal);
1705
- --sbb-paginator-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
1706
- --sbb-paginator-height: var(--sbb-size-element-m);
1707
- --sbb-paginator-page-border-width: 0;
1708
- --sbb-paginator-page-cursor: var(--sbb-cursor-pointer);
1709
- --sbb-paginator-animation-easing: var(--sbb-animation-easing);
1710
- --sbb-paginator-font-size: var(--sbb-text-font-size-s);
1711
- --sbb-compact-paginator-font-size: var(--sbb-text-font-size-m);
1712
- --sbb-compact-paginator-gap: var(--sbb-spacing-fixed-5x);
1713
- --sbb-compact-paginator-pages-gap: var(--sbb-spacing-fixed-2x);
1714
- --sbb-popover-arrow-size: var(--sbb-spacing-fixed-4x);
1715
- --sbb-popover-max-width: calc(100% - var(--sbb-spacing-fixed-2x));
1716
- --sbb-popover-border-radius: var(--sbb-border-radius-8x);
1717
- --sbb-popover-padding: var(--sbb-spacing-fixed-4x);
1718
- --sbb-popover-background: var(--sbb-background-color-2);
1719
- --sbb-popover-animation-easing: ease-out;
1720
- --sbb-radio-button-label-gap: var(--sbb-spacing-fixed-2x);
1721
- --sbb-radio-button-label-color: var(--sbb-color-3);
1722
- --sbb-radio-button-background-color: var(--sbb-background-color-1);
1723
- --sbb-radio-button-border-width: var(--sbb-border-width-1x);
1724
- --sbb-radio-button-border-style: solid;
1725
- --sbb-radio-button-border-color: var(--sbb-border-color-5);
1726
- --sbb-radio-button-cursor: var(--sbb-cursor-pointer);
1727
- --sbb-radio-button-dimension-xs: 1.25rem;
1728
- --sbb-radio-button-dimension-s: var(--sbb-size-icon-ui-small);
1729
- --sbb-radio-button-dimension-m: var(--sbb-size-icon-ui-small);
1730
- --sbb-radio-button-dimension: var(--sbb-radio-button-dimension-m);
1731
- --sbb-radio-button-inner-circle-dimension: 0.625rem;
1732
- --sbb-radio-button-font-size: var(--sbb-text-font-size-m);
1733
- --sbb-selection-group-orientation: row;
1734
- --sbb-selection-group-elements-width: auto;
1735
- --sbb-selection-group-width: auto;
1736
- --sbb-selection-group-gap: var(--sbb-spacing-fixed-3x) var(--sbb-spacing-fixed-6x);
1737
- --sbb-selection-group-elements-flex: none;
1738
- --sbb-selection-action-panel-action-margin-inline-xs: var(--sbb-spacing-responsive-xxxs);
1739
- --sbb-selection-action-panel-action-margin-inline-s: var(--sbb-spacing-responsive-xxxs);
1740
- --sbb-selection-action-panel-action-margin-inline-m: var(--sbb-spacing-responsive-xxs);
1741
- --sbb-selection-action-panel-action-margin-inline: var(--sbb-selection-action-panel-action-margin-inline-m);
1742
- --sbb-selection-action-panel-background: var(--sbb-selection-panel-background-default);
1743
- --sbb-selection-action-panel-border-color: var(--sbb-selection-panel-border-color-default);
1744
- --sbb-selection-action-panel-border-width: var(--sbb-selection-panel-border-width-default);
1745
- --sbb-selection-expansion-panel-background: var(--sbb-selection-panel-background-default);
1746
- --sbb-selection-expansion-panel-border-color: var(--sbb-selection-panel-border-color-default);
1747
- --sbb-selection-expansion-panel-border-width: var(--sbb-selection-panel-border-width-default);
1748
- --sbb-selection-expansion-panel-content-visibility: visible;
1749
- --sbb-selection-expansion-panel-content-padding-block-start: var(--sbb-spacing-responsive-xxs);
1750
- --sbb-selection-expansion-panel-content-padding-block-end: var(
1751
- --sbb-selection-panel-input-padding-block-m
1752
- );
1753
- --sbb-selection-expansion-panel-content-padding-inline: var(--sbb-selection-panel-input-padding-inline-m);
1754
- --sbb-sidebar-background-color: var(--sbb-background-color-1);
1755
- --sbb-sidebar-title-padding-block: var(--sbb-spacing-fixed-3x);
1756
- --sbb-sidebar-padding: var(--sbb-spacing-responsive-xs);
1757
- --sbb-sidebar-border-radius: var(--sbb-border-radius-8x);
1758
- --sbb-sidebar-margin: var(--sbb-spacing-fixed-3x);
1759
- --sbb-sidebar-title-gap: var(--sbb-spacing-fixed-2x);
1760
- --sbb-signet-background-color: var(--sbb-color-brand);
1761
- --sbb-signet-panel-color: var(--sbb-color-brand);
1762
- --sbb-signet-icon-color: var(--sbb-color-white);
1763
- --sbb-signet-aspect-ratio: 2 / 1;
1764
- --sbb-select-placeholder-fallback-color: var(--sbb-color-metal);
1765
- --sbb-select-placeholder-fallback-color: light-dark(
1766
- var(--sbb-color-metal),
1767
- var(--sbb-color-smoke)
1768
- );
1769
- --sbb-slider-line-height: 0.25rem;
1770
- --sbb-slider-knob-size: 1.75rem;
1771
- --sbb-slider-knob-size-active: 1.9375rem;
1772
- --sbb-slider-knob-border-size: 0.1875rem;
1773
- --sbb-slider-knob-border-style: solid;
1774
- --sbb-slider-knob-color: var(--sbb-background-color-1);
1775
- --sbb-slider-knob-border-color: var(--sbb-color-primary);
1776
- --sbb-slider-icon-color: var(--sbb-color-1);
1777
- --sbb-slider-selected-line-disabled-color: var(--sbb-color-smoke);
1778
- --sbb-slider-selected-line-disabled-color: light-dark(
1779
- var(--sbb-color-smoke),
1780
- var(--sbb-color-cement)
1781
- );
1782
- --sbb-slider-line-color: var(--sbb-border-color-5);
1783
- --sbb-slider-selected-line-color: var(--sbb-color-primary);
1784
- --sbb-slider-line-disabled-color: var(--sbb-color-graphite);
1785
- --sbb-slider-line-disabled-color: light-dark(var(--sbb-color-graphite), var(--sbb-color-granite));
1786
- --sbb-slider-width: 25rem;
1787
- --sbb-slider-min-width: 9.375rem;
1788
- --sbb-slider-gap: var(--sbb-spacing-fixed-2x);
1789
- --sbb-slider-padding-block: 0.125rem;
1790
- --sbb-status-color: var(--sbb-color-4);
1791
- --sbb-status-gap: var(--sbb-spacing-fixed-1x);
1792
- --sbb-status-font-size: var(--sbb-text-font-size-s);
1793
- --sbb-status-title-color: var(--sbb-color-granite);
1794
- --sbb-status-title-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
1795
- --sbb-step-label-color: var(--sbb-color-4);
1796
- --sbb-step-label-prefix-border-style: solid;
1797
- --sbb-step-label-prefix-border-color: var(--sbb-border-color-4-inverted);
1798
- --sbb-step-label-prefix-background-color: var(--sbb-background-color-1);
1799
- --sbb-step-label-number-font-size: var(--sbb-text-font-size-xxs);
1800
- --sbb-step-label-font-size-s: var(--sbb-text-font-size-m);
1801
- --sbb-step-label-font-size-m: var(--sbb-text-font-size-l);
1802
- --sbb-step-label-font-size: var(--sbb-step-label-font-size-m);
1803
- --sbb-step-label-gap-s: var(--sbb-spacing-fixed-3x);
1804
- --sbb-step-label-gap-m: var(--sbb-spacing-fixed-4x);
1805
- --sbb-step-label-gap: var(--sbb-step-label-gap-m);
1806
- --sbb-step-label-prefix-size-s: var(--sbb-size-element-xxxs);
1807
- --sbb-step-label-prefix-size-m: var(--sbb-size-element-xxs);
1808
- --sbb-step-label-prefix-size: var(--sbb-step-label-prefix-size-m);
1809
- --sbb-stepper-orientation: row;
1810
- --sbb-stepper-border-width: var(--sbb-border-width-1x);
1811
- --sbb-stepper-marker-width: var(--sbb-border-width-3x);
1812
- --sbb-stepper-marker-color: var(--sbb-color-3);
1813
- --sbb-tab-group-content-gap-size-s: var(--sbb-spacing-responsive-xs);
1814
- --sbb-tab-group-content-gap-size-l: var(--sbb-spacing-responsive-s);
1815
- --sbb-tab-group-content-gap-size-xl: var(--sbb-spacing-responsive-m);
1816
- --sbb-tab-group-content-gap-default: var(--sbb-tab-group-content-gap-size-l);
1817
- --sbb-tab-label-height: var(--sbb-size-element-m);
1818
- --sbb-tab-label-inline-padding: var(--sbb-spacing-responsive-xs);
1819
- --sbb-tab-label-color: var(--sbb-color-granite);
1820
- --sbb-tab-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-graphite));
1821
- --sbb-tab-label-marker-thickness: var(--sbb-border-width-3x);
1822
- --sbb-tab-label-text-decoration: none;
1823
- --sbb-tab-label-animation-easing: var(--sbb-animation-easing);
1824
- --sbb-tab-label-font-size: var(--sbb-text-font-size-m);
1825
- --sbb-tab-label-font-weight: bold;
1826
- --sbb-tab-label-gap: var(--sbb-spacing-fixed-2x);
1827
- --sbb-tab-label-outline-border-radius: var(--sbb-border-radius-2x);
1828
- --sbb-tab-label-amount-color: var(--sbb-color-metal);
1829
- --sbb-tab-label-amount-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
1830
- --sbb-tab-label-line-color: var(--sbb-border-color-4-inverted);
1831
- --sbb-tab-label-cursor: var(--sbb-cursor-pointer);
1832
- --sbb-train-blocked-passage-background-color: var(--sbb-color-error);
1833
- --sbb-train-blocked-passage-bar-color: var(--sbb-color-white);
1834
- --sbb-train-blocked-passage-icon-bar-width: 0.625rem;
1835
- --sbb-train-blocked-passage-icon-bar-height: 0.25rem;
1836
- --sbb-train-blocked-passage-icon-bar-border-radius: var(--sbb-border-radius-1x);
1837
- --sbb-train-formation-wagon-dimension-short: 2.25rem;
1838
- --sbb-train-formation-wagon-dimension-long: 5.25rem;
1839
- --sbb-train-formation-wagon-gap: var(--sbb-spacing-fixed-1x);
1840
- --sbb-train-formation-sector-line-color: var(--sbb-color-cement);
1841
- --sbb-train-formation-sector-line-color: light-dark(
1842
- var(--sbb-color-cement),
1843
- var(--sbb-color-smoke)
1844
- );
1845
- --sbb-train-formation-sector-line-width: var(--sbb-border-width-1x);
1846
- --sbb-train-formation-blocked-passage-dimension: 1rem;
1847
- --sbb-train-formation-text-color: var(--sbb-color-3);
1848
- --sbb-train-formation-gap: var(--sbb-spacing-fixed-2x);
1849
- --sbb-train-formation-sector-padding: var(--sbb-spacing-fixed-1x);
1850
- --sbb-train-formation-sector-margin: var(--sbb-spacing-fixed-2x);
1851
- --sbb-train-formation-padding: var(--sbb-spacing-fixed-1x);
1852
- --_sbb-train-formation-flex-direction: row;
1853
- --_sbb-train-formation-flex-direction-inverted: column;
1854
- --sbb-train-wagon-font-size: var(--sbb-text-font-size-xxs);
1855
- --sbb-train-wagon-shape-color: var(--sbb-color-3);
1856
- --sbb-train-wagon-vertical-gap: 0.125rem;
1857
- --sbb-train-wagon-padding-inline: var(--sbb-spacing-fixed-3x);
1858
- --sbb-train-wagon-border-width: var(--sbb-border-width-1x);
1859
- --sbb-train-wagon-main-icon-height: 1.25rem;
1860
- --sbb-train-wagon-attribute-icon-gap: 0.125rem;
1861
- --sbb-train-wagon-attribute-icon-height: 0.875rem;
1862
- --sbb-train-wagon-attribute-icon-color: var(--sbb-color-1);
1863
- --sbb-train-wagon-attributes-max-width: 3.4375rem;
1864
- --sbb-train-wagon-attributes-mean-width: 1.75rem;
1865
- --sbb-train-wagon-occupancy-height: 0.75rem;
1866
- --sbb-train-wagon-background-color-hover: var(--sbb-background-color-3);
1867
- --sbb-train-wagon-background-color-active: var(--sbb-background-color-4);
1868
- --sbb-train-wagon-border-radius: var(--sbb-border-radius-6x);
1869
- --sbb-train-wagon-information-gap: var(--sbb-spacing-fixed-1x);
1870
- --sbb-train-wagon-information-min-width: 1.875rem;
1871
- --sbb-train-wagon-class-dimension: 1.125rem;
1872
- --sbb-train-wagon-class-color: var(--sbb-color-anthracite);
1873
- --sbb-train-wagon-class-color: light-dark(var(--sbb-color-anthracite), var(--sbb-color-graphite));
1874
- --sbb-train-wagon-class-background-color: var(--sbb-background-color-3);
1875
- --sbb-train-wagon-class-border-width: var(--sbb-border-width-1x);
1876
- --sbb-train-wagon-class-border: var(--sbb-train-wagon-class-border-width) solid
1877
- var(--sbb-color-graphite);
1878
- --sbb-train-wagon-class-border: var(--sbb-train-wagon-class-border-width) solid
1879
- light-dark(var(--sbb-color-graphite), var(--sbb-color-anthracite));
1880
- --sbb-train-wagon-class-border-radius: var(--sbb-border-radius-2x);
1881
- --sbb-train-wagon-class-font-weight: bold;
1882
- --sbb-train-wagon-class-first-thickness: 0.25rem;
1883
- --sbb-train-wagon-class-first-color: var(--sbb-color-lemon);
1884
- --sbb-train-wagon-class-first-border-radius: var(--sbb-border-radius-1x);
1885
- --sbb-tag-animation-easing: var(--sbb-animation-easing);
1886
- --sbb-tag-background-color: var(--sbb-background-color-1);
1887
- --sbb-tag-border-color: var(--sbb-border-color-4-inverted);
1888
- --sbb-tag-border-style: solid;
1889
- --sbb-tag-border-width: var(--sbb-border-width-1x);
1890
- --sbb-tag-border-radius: var(--sbb-border-radius-infinity);
1891
- --sbb-tag-gap: var(--sbb-spacing-fixed-2x);
1892
- --sbb-tag-text-color: var(--sbb-color-2);
1893
- --sbb-tag-amount-color: var(--sbb-color-metal);
1894
- --sbb-tag-amount-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
1895
- --sbb-tag-height-s: var(--sbb-size-element-xxxs);
1896
- --sbb-tag-height-m: var(--sbb-size-element-xs);
1897
- --sbb-tag-height: var(--sbb-tag-height-m);
1898
- --sbb-tag-padding-inline-s: var(--sbb-spacing-fixed-3x);
1899
- --sbb-tag-padding-inline-m: var(--sbb-spacing-fixed-5x);
1900
- --sbb-tag-padding-inline: var(--sbb-tag-padding-inline-m);
1901
- --sbb-teaser-scale-hover: 1.02;
1902
- --sbb-teaser-description-color: var(--sbb-color-granite);
1903
- --sbb-teaser-description-color: light-dark(var(--sbb-color-granite), var(--sbb-color-silver));
1904
- --sbb-teaser-flex-direction: row;
1905
- --sbb-teaser-align-items: center;
1906
- --sbb-teaser-font-size: var(--sbb-text-font-size-s);
1907
- --sbb-teaser-gap: var(--sbb-spacing-fixed-4x);
1908
- --sbb-teaser-border-radius: var(--sbb-border-radius-4x);
1909
- --sbb-teaser-image-width: 18.75rem;
1910
- --sbb-teaser-hero-link-font-weight: 400;
1911
- --sbb-panel-width: 13.9375rem;
1912
- --sbb-panel-inner-height: 10.4375rem;
1913
- --sbb-panel-triangle-height: 2.0625rem;
1914
- --sbb-panel-line-height: var(--sbb-typo-line-height-heading);
1915
- --sbb-panel-font-size: var(--sbb-typo-scale-1-5x);
1916
- --sbb-panel-font-weight: 300;
1917
- --sbb-panel-color: var(--sbb-color-1-negative);
1918
- --sbb-panel-background-color: color-mix(in srgb, var(--sbb-color-primary) 90%, transparent);
1919
- --sbb-panel-background-color-hover: var(--sbb-color-primary);
1920
- --sbb-panel-padding-inline: var(--sbb-spacing-responsive-m);
1921
- --sbb-panel-gap: var(--sbb-spacing-responsive-xs);
1922
- --sbb-panel-animation-easing: var(--sbb-animation-easing);
1923
- --sbb-teaser-product-background-color: var(--sbb-color-cloud);
1924
- --sbb-teaser-product-background-color: light-dark(
1925
- var(--sbb-color-cloud),
1926
- var(--sbb-color-midnight)
1927
- );
1928
- --sbb-teaser-product-background-gradient-direction: to right;
1929
- --sbb-teaser-product-border-radius: var(--sbb-border-radius-4x);
1930
- --sbb-teaser-product-min-height: 37.5rem;
1931
- --sbb-teaser-product-background-gradient-start: 25%;
1932
- --sbb-teaser-product-background-gradient-end: 75%;
1933
- --sbb-teaser-product-container-padding-block: var(--sbb-spacing-responsive-s);
1934
- --sbb-teaser-product-container-padding-inline: var(--sbb-spacing-responsive-s);
1935
- --sbb-teaser-product-container-spacing: var(--sbb-spacing-responsive-l);
1936
- --sbb-teaser-product-content-color: var(--sbb-color-4);
1937
- --sbb-teaser-product-footer-color: var(--sbb-color-anthracite);
1938
- --sbb-teaser-product-footer-color: light-dark(
1939
- var(--sbb-color-anthracite),
1940
- var(--sbb-color-cloud)
1941
- );
1942
- --sbb-teaser-product-footer-font-size: var(--sbb-text-font-size-xxs);
1943
- --sbb-teaser-product-footer-padding-block-start: var(--sbb-spacing-responsive-s);
1944
- --sbb-teaser-product-footer-padding-block-end: 0;
1945
- --sbb-timetable-form-background-color: var(--sbb-background-color-1);
1946
- --sbb-timetable-form-border-radius: var(--sbb-border-radius-4x);
1947
- --sbb-timetable-form-details-border-block-start: var(--sbb-border-width-1x) solid
1948
- var(--sbb-border-color-4-inverted);
1949
- --sbb-timetable-form-details-gap: var(--sbb-spacing-fixed-1x);
1950
- --sbb-timetable-form-details-padding-block: var(--sbb-spacing-fixed-1x);
1951
- --sbb-timetable-form-details-padding-inline: var(--sbb-spacing-responsive-xxs);
1952
- --sbb-timetable-form-details-horizontal-divider-height: 1.5rem;
1953
- --sbb-timetable-form-field-route-icon-color: var(--sbb-color-2);
1954
- --sbb-timetable-form-field-route-icon-background-color: var(--sbb-background-color-1);
1955
- --sbb-timetable-form-field-route-via-icon-width: var(--sbb-size-icon-ui-small);
1956
- --sbb-timetable-form-field-route-via-after-dimension: 0.4375rem;
1957
- --sbb-timetable-occupancy-color: var(--sbb-color-2);
1958
- --sbb-timetable-occupancy-font-size: var(--sbb-text-font-size-s);
1959
- --sbb-timetable-occupancy-list-gap: var(--sbb-spacing-fixed-2x);
1960
- --sbb-timetable-occupancy-item-gap: var(--sbb-spacing-fixed-1x);
1961
- --sbb-time-input-max-width: 3.625rem;
1962
- --sbb-title-font-size: var(--sbb-heading-font-size-1);
1963
- --sbb-title-color: var(--sbb-color-3);
1964
- --sbb-title-margin-block: var(--sbb-heading-margin-block-1);
1965
- --sbb-toggle-check-font-size: var(--sbb-text-font-size-s);
1966
- --sbb-toggle-check-color: var(--sbb-color-2);
1967
- --sbb-toggle-check-checked-color: var(--sbb-color-primary);
1968
- --sbb-toggle-check-background-color: var(--sbb-background-color-4);
1969
- --sbb-toggle-check-icon-color: var(--sbb-toggle-check-checked-color);
1970
- --sbb-toggle-check-circle-background-color: var(--sbb-background-color-1);
1971
- --sbb-toggle-check-circle-border-color: var(--sbb-border-color-5);
1972
- --sbb-toggle-check-circle-border-style: solid;
1973
- --sbb-toggle-check-circle-diameter: 1.75rem;
1974
- --sbb-toggle-check-height: var(--sbb-size-icon-ui-small);
1975
- --sbb-toggle-check-cursor: var(--sbb-cursor-pointer);
1976
- --sbb-toggle-check-gap: var(--sbb-spacing-fixed-3x);
1977
- --sbb-toggle-check-border-width: var(--sbb-border-width-1x);
1978
- --sbb-toggle-check-border-radius: var(--sbb-border-radius-4x);
1979
- --sbb-toggle-check-shadow: var(--sbb-box-shadow-level-5-hard);
1980
- --sbb-toggle-height-s: var(--sbb-size-element-xxs);
1981
- --sbb-toggle-height-m: var(--sbb-size-element-m);
1982
- --sbb-toggle-height: var(--sbb-toggle-height-m);
1983
- --sbb-toggle-padding-inline-s: var(--sbb-spacing-responsive-xxxs);
1984
- --sbb-toggle-padding-inline-m: var(--sbb-spacing-responsive-xs);
1985
- --sbb-toggle-padding-inline: var(--sbb-toggle-padding-inline-m);
1986
- --sbb-toggle-background-color: var(--sbb-background-color-4);
1987
- --sbb-toggle-background-inset: 0.125rem;
1988
- --sbb-toggle-border-radius: var(--sbb-border-radius-infinity);
1989
- --sbb-toggle-font-size: var(--sbb-text-font-size-m);
1990
- --sbb-toggle-grid-template-columns: auto auto;
1991
- --sbb-toggle-selected-option-border-width: var(--sbb-border-width-1x);
1992
- --sbb-toggle-selected-option-border-style: solid;
1993
- --sbb-toggle-selected-option-border-color: var(--sbb-border-color-5);
1994
- --sbb-toggle-selected-option-background-color: var(--sbb-background-color-1);
1995
- --sbb-toggle-option-color: var(--sbb-color-anthracite);
1996
- --sbb-toggle-option-color: light-dark(var(--sbb-color-anthracite), var(--sbb-color-cloud));
1997
- --sbb-toggle-option-gap: var(--sbb-spacing-fixed-1x);
1998
- --sbb-toggle-option-font-size: var(--sbb-text-font-size-xs);
1999
- --sbb-toggle-option-icon-min-size: var(--sbb-size-icon-ui-small);
2000
- --sbb-tooltip-animation-easing: ease-out;
2001
- --sbb-tooltip-animation-translate: 0 var(--sbb-spacing-fixed-2x);
2002
- --sbb-tooltip-background-color: var(--sbb-background-color-1-inverted);
2003
- --sbb-tooltip-color: var(--sbb-color-2-inverted);
2004
- --sbb-tooltip-border-color: var(--sbb-background-color-1-inverted);
2005
- --sbb-tooltip-border-radius: var(--sbb-border-radius-8x);
2006
- --sbb-tooltip-font-size: var(--sbb-text-font-size-xs);
2007
- --sbb-tooltip-gap: var(--sbb-spacing-fixed-2x);
2008
- --sbb-tooltip-min-width: var(--sbb-spacing-fixed-8x);
2009
- --sbb-tooltip-padding: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-4x);
2010
- --sbb-overlay-position-area: block-start;
2011
- --sbb-overlay-position-try-fallbacks:
2012
- block-start span-inline-end, block-start span-inline-start, block-end,
2013
- block-end span-inline-end, block-end span-inline-start;
2014
- --sbb-toast-max-width: 25rem;
2015
- --sbb-toast-animation-timing-function: ease;
2016
- --sbb-toast-text-color: var(--sbb-color-3-inverted);
2017
- --sbb-toast-background-color: var(--sbb-background-color-1-inverted);
2018
- --sbb-toast-margin: var(--sbb-spacing-responsive-s);
2019
- --sbb-toast-padding-block: var(--sbb-spacing-responsive-xxxs);
2020
- --sbb-toast-padding-inline: var(--sbb-spacing-responsive-xs);
2021
- --sbb-toast-border-radius: var(--sbb-border-radius-4x);
2022
- --sbb-toast-container-position: fixed;
2023
- --sbb-toast-horizontal-position: initial;
2024
- --sbb-toast-vertical-position: initial;
2025
- --sbb-toast-gap: var(--sbb-spacing-fixed-2x);
2026
- --sbb-visual-checkbox-dimension: var(--sbb-checkbox-dimension-m);
2027
- --sbb-visual-checkbox-selection-color: var(--sbb-color-primary);
2028
- --sbb-visual-checkbox-selection-color-negative: var(--sbb-color-primary85);
2029
- --sbb-visual-checkbox-selection-color-disabled: var(--sbb-color-2);
2030
- --sbb-visual-checkbox-selection-color-disabled-negative: var(--sbb-color-2-negative);
2031
- --sbb-visual-checkbox-background-color: var(--sbb-background-color-1);
2032
- --sbb-visual-checkbox-background-color-negative: var(--sbb-background-color-1-negative);
2033
- --sbb-visual-checkbox-background-color-disabled: var(--sbb-background-color-3);
2034
- --sbb-visual-checkbox-background-color-negative-disabled: var(--sbb-background-color-3-negative);
2035
- --sbb-visual-checkbox-border-color: var(--sbb-border-color-5);
2036
- --sbb-visual-checkbox-border-color-disabled: var(--sbb-border-color-5);
2037
- --sbb-visual-checkbox-border-style: solid;
2038
- --sbb-visual-checkbox-border-style-disabled: dashed;
2039
- --sbb-visual-checkbox-border-width: var(--sbb-border-width-1x);
2040
- --sbb-visual-checkbox-cursor: var(--sbb-cursor-pointer);
2041
- }
2042
- @media (forced-colors: active) {
2043
- :root {
2044
- /* Focus outline */
2045
- --sbb-focus-outline-color-default: Highlight;
2046
- --sbb-focus-outline-color-dark: Highlight;
2047
- --sbb-focus-outline-width: var(--sbb-border-width-2x);
2048
- --sbb-alert-outline: var(--sbb-border-width-1x) solid CanvasText;
2049
- --sbb-alert-forced-color-border-radius: var(--sbb-alert-border-radius);
2050
- --sbb-breadcrumb-color: ButtonText;
2051
- --sbb-breadcrumb-color-active: Highlight;
2052
- --sbb-card-border-color: CanvasText;
2053
- --sbb-card-border-width: var(--sbb-border-width-2x);
2054
- --sbb-card-badge-border-display: block;
2055
- --sbb-card-badge-inline-border-display: none;
2056
- --sbb-header-action-border-color: CanvasText;
2057
- --sbb-header-action-color: LinkText;
2058
- --sbb-header-action-active-border-width: 0;
2059
- --sbb-expansion-panel-header-text-color: ButtonText;
2060
- --sbb-form-field-border-color: ButtonBorder;
2061
- --sbb-loading-indicator-circle-animated-width: 50%;
2062
- --sbb-loading-indicator-circle-animated-height: 100%;
2063
- --sbb-loading-indicator-circle-animated-border-radius: 0;
2064
- --sbb-loading-indicator-circle-background: transparent;
2065
- --sbb-logo-panel-color: ButtonText !important;
2066
- --sbb-logo-signet-color: Canvas !important;
2067
- --sbb-visual-checkbox-selection-color: Canvas;
2068
- --sbb-visual-checkbox-selection-color-negative: Canvas;
2069
- --sbb-visual-checkbox-selection-color-disabled: Canvas;
2070
- --sbb-visual-checkbox-selection-color-disabled-negative: Canvas;
2071
- --sbb-visual-checkbox-border-color: ButtonBorder;
2072
- --sbb-visual-checkbox-border-color-disabled: GrayText;
2073
- --sbb-visual-checkbox-border-width: var(--sbb-border-width-2x);
2074
- --sbb-visual-checkbox-border-style-disabled: solid;
2075
- --sbb-radio-button-background-color: Canvas;
2076
- --sbb-radio-button-border-width: var(--sbb-border-width-2x);
2077
- --sbb-radio-button-border-color: ButtonBorder;
2078
- --sbb-signet-background-color: ButtonText !important;
2079
- --sbb-signet-panel-color: ButtonText !important;
2080
- --sbb-signet-icon-color: Canvas !important;
2081
- --sbb-slider-selected-line-color: Highlight;
2082
- --sbb-slider-line-color: CanvasText;
2083
- --sbb-step-label-color: ButtonText;
2084
- --sbb-step-label-prefix-border-color: ButtonText;
2085
- --sbb-tag-amount-color: ButtonText;
2086
- --sbb-tag-background-color: Canvas !important;
2087
- --sbb-tag-text-color: ButtonText;
2088
- --sbb-tag-border-color: CanvasText;
2089
- --sbb-tag-border-width: var(--sbb-border-width-2x);
2090
- --sbb-toggle-check-background-color: CanvasText;
2091
- --sbb-toggle-check-circle-background-color: Canvas;
2092
- --sbb-toggle-selected-option-border-width: var(--sbb-border-width-2x);
2093
- --sbb-toggle-selected-option-border-color: Highlight;
2094
- --sbb-train-blocked-passage-background-color: CanvasText;
2095
- --sbb-train-blocked-passage-bar-color: Canvas;
2096
- --sbb-train-formation-sector-line-color: CanvasText;
2097
- --sbb-train-wagon-shape-color: CanvasText;
2098
- }
2099
- }
2100
- :root {
2101
- --sbb-overlay-default-z-index: 1000;
2102
- --sbb-cursor-default: default;
2103
- --sbb-cursor-pointer: pointer;
2104
- --sbb-border-radius-infinity: calc(infinity * 1px);
2105
- }
2106
- :root:where(.sbb-focus-modality-mouse, .sbb-focus-modality-touch) {
2107
- --sbb-focus-outline-style: none;
2108
- }
2109
- @media (min-width: calc(37.5rem)) {
2110
- :root {
2111
- /* Title */
2112
- --sbb-heading-font-size-1: var(--sbb-typo-scale-3x);
2113
- /* Spacing */
2114
- --sbb-spacing-responsive-l: var(--sbb-spacing-responsive-l-small);
2115
- --sbb-spacing-responsive-xl: var(--sbb-spacing-responsive-xl-small);
2116
- --sbb-spacing-responsive-xxl: var(--sbb-spacing-responsive-xxl-small);
2117
- /* Layout */
2118
- --sbb-layout-base-offset-responsive: var(--sbb-layout-base-offset-responsive-small);
2119
- --sbb-grid-base-columns: var(--sbb-layout-base-grid-columns-small);
2120
- --sbb-grid-base-gutter-responsive: var(--sbb-layout-base-grid-gutter-responsive-small);
2121
- --sbb-alert-close-button-divider-display: block;
2122
- --sbb-dialog-padding-inline: var(--sbb-spacing-fixed-8x);
2123
- --sbb-dialog-max-height: calc(100vh - 2 * var(--sbb-spacing-fixed-6x));
2124
- --sbb-dialog-max-width: 90vw;
2125
- --sbb-dialog-translate-y: var(--sbb-spacing-fixed-4x);
2126
- --sbb-footer-clock-width: 7rem;
2127
- --sbb-notification-icon-align-self: flex-start;
2128
- --sbb-notification-padding-inline: var(--sbb-spacing-responsive-xs);
2129
- }
2130
- }
2131
- @media (min-width: calc(64rem)) {
2132
- :root {
2133
- /* Title */
2134
- --sbb-heading-font-size-1: var(--sbb-typo-scale-3-5x);
2135
- --sbb-heading-font-size-2: var(--sbb-typo-scale-2-5x);
2136
- --sbb-heading-font-size-3: var(--sbb-typo-scale-2x);
2137
- --sbb-heading-font-size-4: var(--sbb-typo-scale-1-5x);
2138
- --sbb-heading-font-size-5: var(--sbb-typo-scale-1-25x);
2139
- --sbb-heading-font-size-6: var(--sbb-typo-scale-default);
2140
- /* Text */
2141
- --sbb-text-font-size-xl: var(--sbb-typo-scale-1-5x);
2142
- --sbb-text-font-size-l: var(--sbb-typo-scale-1-25x);
2143
- --sbb-text-font-size-m: var(--sbb-typo-scale-1-125x);
2144
- --sbb-text-font-size-s: var(--sbb-typo-scale-default);
2145
- --sbb-text-font-size-xs: var(--sbb-typo-scale-0-875x);
2146
- /* Spacing */
2147
- --sbb-spacing-responsive-xxxs: var(--sbb-spacing-responsive-xxxs-large);
2148
- --sbb-spacing-responsive-xxs: var(--sbb-spacing-responsive-xxs-large);
2149
- --sbb-spacing-responsive-xs: var(--sbb-spacing-responsive-xs-large);
2150
- --sbb-spacing-responsive-s: var(--sbb-spacing-responsive-s-large);
2151
- --sbb-spacing-responsive-m: var(--sbb-spacing-responsive-m-large);
2152
- --sbb-spacing-responsive-l: var(--sbb-spacing-responsive-l-large);
2153
- --sbb-spacing-responsive-xl: var(--sbb-spacing-responsive-xl-large);
2154
- --sbb-spacing-responsive-xxl: var(--sbb-spacing-responsive-xxl-large);
2155
- /* Layout */
2156
- --sbb-layout-base-offset-responsive: var(--sbb-layout-base-offset-responsive-large);
2157
- --sbb-grid-base-columns: var(--sbb-layout-base-grid-columns-large);
2158
- --sbb-grid-base-gutter-responsive: var(--sbb-layout-base-grid-gutter-responsive-large);
2159
- /* Size */
2160
- --sbb-size-element-xxxs: var(--sbb-size-element-xxxs-large);
2161
- --sbb-size-element-xxs: var(--sbb-size-element-xxs-large);
2162
- --sbb-size-element-xs: var(--sbb-size-element-xs-large);
2163
- --sbb-size-element-s: var(--sbb-size-element-s-large);
2164
- --sbb-size-element-m: var(--sbb-size-element-m-large);
2165
- --sbb-size-element-l: var(--sbb-size-element-l-large);
2166
- --sbb-alert-icon-size: 1.75rem;
2167
- --sbb-alert-icon-size-l: 2.125rem;
2168
- --sbb-button-padding-inline-size-l: var(--sbb-spacing-fixed-10x);
2169
- --sbb-button-padding-inline-size-m: var(--sbb-spacing-fixed-8x);
2170
- --sbb-button-padding-inline-size-s: var(--sbb-spacing-fixed-5x);
2171
- --_sbb-chip-group-margin-block-base-lm: var(--_sbb-chip-group-margin-block-start-default-large) 0;
2172
- --_sbb-chip-group-margin-block-with-label-s: 0.3125rem 0.1875rem;
2173
- --_sbb-chip-group-margin-block-without-label-s: 0 0.3125rem;
2174
- --_sbb-chip-group-margin-block-without-label-m: 0.1875rem
2175
- 0.875rem;
2176
- --_sbb-chip-group-margin-block-without-label-l: var(
2177
- --_sbb-chip-group-margin-block-start-default-large
2178
- )
2179
- 1.25rem;
2180
- --_sbb-chip-group-margin-block-with-label-l: var(
2181
- --_sbb-chip-group-margin-block-start-default-large
2182
- )
2183
- 0.46875rem;
2184
- --_sbb-chip-group-margin-block-with-label-m: var(
2185
- --_sbb-chip-group-margin-block-start-default-large
2186
- )
2187
- var(--_sbb-chip-group-margin-block-start-default-large);
2188
- --sbb-flip-card-min-height: 20rem;
2189
- --_sbb-form-field-label-to-input-overlapping: var(--sbb-spacing-fixed-1x);
2190
- --_sbb-form-field-floating-label-transform: 0.65625rem;
2191
- --_sbb-form-field-spacer-margin-block-end: calc(-1 * var(--_sbb-form-field-label-to-input-overlapping));
2192
- --sbb-header-height-s: var(--sbb-spacing-fixed-14x);
2193
- --sbb-header-height-m: var(--sbb-spacing-fixed-24x);
2194
- --sbb-navigation-grid-column: 1 / 5;
2195
- --sbb-navigation-padding-block-start: var(--sbb-spacing-responsive-xl);
2196
- --sbb-navigation-padding-inline: var(--sbb-layout-base-offset-responsive) 0;
2197
- --sbb-navigation-list-margin-block-start: var(--sbb-spacing-fixed-1x);
2198
- --sbb-navigation-inline-start: calc(var(--sbb-layout-base-offset-responsive) * -1);
2199
- --sbb-navigation-section-column: 5 / 13;
2200
- --sbb-navigation-section-padding-block: var(--sbb-spacing-responsive-xl);
2201
- --sbb-navigation-section-padding-inline: var(--sbb-spacing-fixed-8x)
2202
- var(--sbb-layout-base-offset-responsive);
2203
- --sbb-navigation-section-position: relative;
2204
- --sbb-navigation-section-translate: 0;
2205
- --sbb-navigation-section-content-padding-inline-start: 0;
2206
- --sbb-navigation-section-font-size: var(--sbb-heading-font-size-2);
2207
- --sbb-menu-max-width: 20rem;
2208
- --sbb-menu-min-width: 11.25rem;
2209
- --sbb-menu-transform-y: var(--sbb-spacing-fixed-2x);
2210
- --sbb-panel-width: 20.0625rem;
2211
- --sbb-panel-inner-height: 15.006875rem;
2212
- --sbb-panel-triangle-height: 2.965625rem;
2213
- --sbb-panel-font-size: var(--sbb-typo-scale-2x);
2214
- --sbb-teaser-product-container-padding-block: var(--sbb-spacing-responsive-l) 0;
2215
- --sbb-teaser-product-container-padding-inline: var(--sbb-spacing-responsive-xl);
2216
- --sbb-teaser-product-content-align-content: center;
2217
- --sbb-teaser-product-footer-padding-block-start: var(--sbb-spacing-responsive-xs);
2218
- --sbb-teaser-product-footer-padding-block-end: var(--sbb-spacing-responsive-xs);
2219
- --sbb-teaser-product-footer-min-height: var(--sbb-teaser-product-container-spacing);
2220
- --sbb-time-input-max-width: 4.0625rem;
2221
- }
2222
- }
2223
- @media (min-width: calc(90rem)) {
2224
- :root {
2225
- /* Title */
2226
- --sbb-heading-font-size-1: var(--sbb-typo-scale-4x);
2227
- /* Spacing */
2228
- --sbb-spacing-responsive-m: var(--sbb-spacing-responsive-m-ultra);
2229
- --sbb-spacing-responsive-l: var(--sbb-spacing-responsive-l-ultra);
2230
- --sbb-spacing-responsive-xl: var(--sbb-spacing-responsive-xl-ultra);
2231
- --sbb-spacing-responsive-xxl: var(--sbb-spacing-responsive-xxl-ultra);
2232
- /* Layout */
2233
- --sbb-layout-base-offset-responsive: var(--sbb-layout-base-offset-responsive-ultra);
2234
- --sbb-grid-base-columns: var(--sbb-layout-base-grid-columns-ultra);
2235
- --sbb-grid-base-gutter-responsive: var(--sbb-layout-base-grid-gutter-responsive-ultra);
2236
- --sbb-lead-container-image-ratio: 21 / 9;
2237
- --sbb-lead-container-image-border-radius: var(--sbb-lead-container-border-radius);
2238
- --sbb-map-container-sidebar-width: 30rem;
2239
- --sbb-navigation-grid-column: 1 / 6;
2240
- --sbb-navigation-padding-block-start: var(--sbb-spacing-responsive-xxl);
2241
- --sbb-navigation-section-column: 6 / 17;
2242
- --sbb-navigation-section-padding-block: var(--sbb-spacing-responsive-xxl)
2243
- var(--sbb-spacing-responsive-l);
2244
- --sbb-panel-width: 26.75rem;
2245
- --sbb-panel-inner-height: 20.02375rem;
2246
- --sbb-panel-triangle-height: 3.956875rem;
2247
- --sbb-panel-font-size: var(--sbb-typo-scale-2-5x);
2248
- --sbb-panel-line-height: 1.2;
2249
- }
2250
- }
2251
-
2252
- @font-face {
2253
- font-family: SBB;
2254
- src: url("https://cdn.app.sbb.ch/fonts/v1_9_subset/SBBWeb-Roman.woff2") format("woff2");
2255
- font-display: fallback;
2256
- font-weight: 400;
2257
- }
2258
- @font-face {
2259
- font-family: SBB;
2260
- src: url("https://cdn.app.sbb.ch/fonts/v1_9_subset/SBBWeb-Bold.woff2") format("woff2");
2261
- font-display: swap;
2262
- font-weight: 700;
2263
- }
2264
- @font-face {
2265
- font-family: SBB;
2266
- src: url("https://cdn.app.sbb.ch/fonts/v1_9_subset/SBBWeb-Light.woff2") format("woff2");
2267
- font-display: swap;
2268
- font-weight: 300;
2269
- }
2270
- sbb-breadcrumb-group:not(:defined) {
2271
- display: block;
2272
- height: calc(var(--sbb-typo-line-height-text) * var(--sbb-text-font-size-xs));
2273
- overflow: hidden;
2274
- }
2275
-
2276
- sbb-container > [slot=image]:is(sbb-image, img),
2277
- sbb-container > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
2278
- --sbb-image-object-fit: cover;
2279
- border-radius: var(--sbb-container-background-border-radius);
2280
- height: 100%;
2281
- position: absolute;
2282
- }
2283
-
2284
- sbb-dialog:not(:has(> sbb-dialog-title)) > sbb-dialog-close-button, sbb-dialog:is(:state(has-intermediate-element),[state--has-intermediate-element]):not(:has(> * > sbb-dialog-title)) > * > sbb-dialog-close-button {
2285
- position: absolute;
2286
- z-index: 1;
2287
- }
2288
- sbb-dialog:has(> sbb-dialog-title[visual-level="3"]) > sbb-dialog-close-button, sbb-dialog:is(:state(has-intermediate-element),[state--has-intermediate-element]):has(> * > sbb-dialog-title[visual-level="3"]) > * > sbb-dialog-close-button {
2289
- --_sbb-dialog-title-size: var(--sbb-heading-font-size-3);
2290
- }
2291
- sbb-dialog:has(> sbb-dialog-title[visual-level="5"]) > sbb-dialog-close-button, sbb-dialog:is(:state(has-intermediate-element),[state--has-intermediate-element]):has(> * > sbb-dialog-title[visual-level="5"]) > * > sbb-dialog-close-button {
2292
- --_sbb-dialog-title-size: var(--sbb-heading-font-size-5);
2293
- }
2294
-
2295
- sbb-dialog:has(> sbb-dialog-title) > sbb-dialog-content, sbb-dialog:is(:state(has-intermediate-element),[state--has-intermediate-element]):has(> * > sbb-dialog-title) > * > sbb-dialog-content {
2296
- padding-block-start: var(--sbb-spacing-fixed-1x);
2297
- }
2298
-
2299
- sbb-dialog:has(> sbb-dialog-close-button) > sbb-dialog-title, sbb-dialog:is(:state(has-intermediate-element),[state--has-intermediate-element]):has(> * > sbb-dialog-close-button) > * > sbb-dialog-title {
2300
- padding-inline-end: 0;
2301
- }
2302
-
2303
- sbb-flip-card-summary > [slot=image]:is(sbb-image, img),
2304
- sbb-flip-card-summary > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
2305
- --sbb-image-aspect-ratio: auto;
2306
- --sbb-image-object-fit: cover;
2307
- border-radius: 0;
2308
- display: block;
2309
- height: 100%;
2310
- }
2311
-
2312
- :is(sbb-form-field, sbb-timetable-form-field) :where(input, select, textarea, sbb-select, sbb-date-input, sbb-time-input) {
2313
- overflow: hidden;
2314
- white-space: nowrap;
2315
- text-overflow: ellipsis;
2316
- outline: none;
2317
- border: none;
2318
- background-color: transparent;
2319
- padding: 0;
2320
- appearance: none;
2321
- display: flex;
2322
- outline: none !important;
2323
- overflow: var(--sbb-form-field-overflow, hidden);
2324
- width: 100%;
2325
- box-sizing: border-box;
2326
- color: var(--sbb-form-field-text-color);
2327
- -webkit-text-fill-color: var(--sbb-form-field-text-color);
2328
- opacity: 1;
2329
- background-color: transparent;
2330
- font-size: var(--sbb-form-field-input-text-size) !important;
2331
- letter-spacing: var(--sbb-typo-letter-spacing-text) !important;
2332
- font-family: var(--sbb-typo-font-family) !important;
2333
- line-height: var(--sbb-typo-line-height-text) !important;
2334
- }
2335
- :is(sbb-form-field, sbb-timetable-form-field) :where(input, select, textarea, sbb-select, sbb-date-input, sbb-time-input)::placeholder {
2336
- color: var(--sbb-color-5);
2337
- -webkit-text-fill-color: var(--sbb-color-5);
2338
- opacity: 1;
2339
- }
2340
- :is(sbb-form-field, sbb-timetable-form-field)[floating-label] :where(input, select, textarea, sbb-select)::placeholder, :is(sbb-form-field, sbb-timetable-form-field)[floating-label] :where(sbb-date-input, sbb-time-input)::after {
2341
- color: transparent !important;
2342
- -webkit-text-fill-color: transparent !important;
2343
- }
2344
- @media (forced-colors: active) {
2345
- :is(sbb-form-field, sbb-timetable-form-field)[floating-label] :where(input, select, textarea, sbb-select)::placeholder, :is(sbb-form-field, sbb-timetable-form-field)[floating-label] :where(sbb-date-input, sbb-time-input)::after {
2346
- color: Canvas !important;
2347
- -webkit-text-fill-color: Canvas !important;
2348
- }
2349
- }
2350
- :is(sbb-form-field, sbb-timetable-form-field):not([floating-label]) :where(input, select, textarea, sbb-select):disabled::placeholder {
2351
- color: var(--sbb-color-granite);
2352
- color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
2353
- -webkit-text-fill-color: var(--sbb-color-granite);
2354
- -webkit-text-fill-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
2355
- }
2356
- :is(sbb-form-field, sbb-timetable-form-field) :where(select) {
2357
- vertical-align: middle;
2358
- }
2359
- :is(sbb-form-field, sbb-timetable-form-field) :where(select, sbb-select) {
2360
- padding-inline-end: var(--sbb-form-field-select-inline-padding-end);
2361
- }
2362
- :is(sbb-form-field, sbb-timetable-form-field)[size=s] :where(input, sbb-date-input, sbb-time-input) {
2363
- height: calc(var(--sbb-form-field-input-text-size) * 1.25);
2364
- line-height: 1 !important;
2365
- margin-block: calc(0.5 * var(--sbb-form-field-input-text-size) * (var(--sbb-typo-line-height-text) - 1.25));
2366
- }
2367
- :is(sbb-form-field, sbb-timetable-form-field)[size=s] > :not(sbb-chip-group):has(input, sbb-date-input, sbb-time-input, select, sbb-select) {
2368
- margin-block-end: -0.125rem;
2369
- }
2370
- :is(sbb-form-field, sbb-timetable-form-field) :where(textarea) {
2371
- --sbb-scrollbar-width: var(--sbb-spacing-fixed-3x);
2372
- --sbb-scrollbar-thumb-width: 0.125rem;
2373
- --sbb-scrollbar-thumb-width-hover: 0.25rem;
2374
- --sbb-scrollbar-width-firefox: thin;
2375
- --sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);
2376
- --sbb-scrollbar-color: light-dark(
2377
- color-mix(in srgb, var(--sbb-color-black) 30%, transparent),
2378
- color-mix(in srgb, var(--sbb-color-white) 30%, transparent)
2379
- );
2380
- --sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-black) 60%, transparent);
2381
- --sbb-scrollbar-color-hover: light-dark(
2382
- color-mix(in srgb, var(--sbb-color-black) 60%, transparent),
2383
- color-mix(in srgb, var(--sbb-color-white) 60%, transparent)
2384
- );
2385
- }
2386
- :is(sbb-form-field, sbb-timetable-form-field) :where(textarea)::-webkit-scrollbar {
2387
- width: var(--sbb-scrollbar-width);
2388
- height: var(--sbb-scrollbar-width);
2389
- background-color: var(--sbb-scrollbar-track-color, transparent);
2390
- }
2391
- :is(sbb-form-field, sbb-timetable-form-field) :where(textarea)::-webkit-scrollbar-corner {
2392
- background-color: var(--sbb-scrollbar-track-color, transparent);
2393
- }
2394
- :is(sbb-form-field, sbb-timetable-form-field) :where(textarea)::-webkit-scrollbar-thumb {
2395
- background-color: var(--sbb-scrollbar-color, currentcolor);
2396
- border: calc(0.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;
2397
- border-radius: var(--sbb-border-radius-4x);
2398
- background-clip: padding-box;
2399
- }
2400
- :is(sbb-form-field, sbb-timetable-form-field) :where(textarea)::-webkit-scrollbar-thumb:hover {
2401
- background-color: var(--sbb-scrollbar-color-hover, currentcolor);
2402
- border-width: calc(0.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)));
2403
- }
2404
- :is(sbb-form-field, sbb-timetable-form-field) :where(textarea)::-webkit-scrollbar-button, :is(sbb-form-field, sbb-timetable-form-field) :where(textarea)::-webkit-scrollbar-corner {
2405
- display: none;
2406
- }
2407
- @supports not selector(::-webkit-scrollbar) {
2408
- :is(sbb-form-field, sbb-timetable-form-field) :where(textarea) {
2409
- scrollbar-width: var(--sbb-scrollbar-width-firefox);
2410
- scrollbar-color: var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent);
2411
- }
2412
- }
2413
- :is(sbb-form-field, sbb-timetable-form-field) :where(textarea) {
2414
- position: relative;
2415
- resize: none;
2416
- white-space: break-spaces;
2417
- overflow-y: auto;
2418
- min-height: calc(var(--sbb-typo-line-height-text) * 1em);
2419
- height: 100%;
2420
- }
2421
- :is(sbb-form-field, sbb-timetable-form-field)[size=l] :where(textarea) {
2422
- padding-block-end: 0.34375rem;
2423
- }
2424
- :is(sbb-form-field, sbb-timetable-form-field)[negative] :where(textarea) {
2425
- --sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-white) 30%, transparent);
2426
- --sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-white) 60%, transparent);
2427
- }
2428
- :is(sbb-form-field, sbb-timetable-form-field):has(:is(:is(input, textarea, select):user-invalid,
2429
- :is(:state(interacted),[state--interacted]):invalid,
2430
- .ng-touched.ng-invalid,
2431
- .sbb-invalid)), :is(.ng-submitted, .sbb-show-errors) :is(sbb-form-field, sbb-timetable-form-field):has(:is(:invalid, .ng-invalid)) {
2432
- --sbb-form-field-border-color: var(--sbb-color-error);
2433
- --sbb-form-field-text-color: var(--sbb-color-error);
2434
- }
2435
- :is(sbb-form-field, sbb-timetable-form-field):has(:is(:is(input, textarea, select):user-invalid,
2436
- :is(:state(interacted),[state--interacted]):invalid,
2437
- .ng-touched.ng-invalid,
2438
- .sbb-invalid))[negative], :is(.ng-submitted, .sbb-show-errors) :is(sbb-form-field, sbb-timetable-form-field):has(:is(:invalid, .ng-invalid))[negative] {
2439
- --sbb-form-field-border-color: var(--sbb-color-red85);
2440
- --sbb-form-field-text-color: var(--sbb-color-red85);
2441
- }
2442
- @media (forced-colors: active) {
2443
- :is(sbb-form-field, sbb-timetable-form-field):has(:is(:is(input, textarea, select):user-invalid,
2444
- :is(:state(interacted),[state--interacted]):invalid,
2445
- .ng-touched.ng-invalid,
2446
- .sbb-invalid)), :is(.ng-submitted, .sbb-show-errors) :is(sbb-form-field, sbb-timetable-form-field):has(:is(:invalid, .ng-invalid)) {
2447
- --sbb-form-field-border-color: LinkText !important;
2448
- --sbb-form-field-text-color: LinkText !important;
2449
- }
2450
- }
2451
-
2452
- :root.sbb-form-field-required-highlight :is(sbb-form-field, sbb-timetable-form-field):is(:state(empty),[state--empty]):not(:is(:state(readonly),[state--readonly]),
2453
- :is(:state(disabled),[state--disabled])):has(:where(input, select, textarea, sbb-select, sbb-date-input, sbb-time-input)[required]), :is(sbb-form-field, sbb-timetable-form-field):is(:state(empty),[state--empty]):not(:is(:state(readonly),[state--readonly]),
2454
- :is(:state(disabled),[state--disabled])).sbb-form-field-required-highlight {
2455
- --sbb-form-field-background-color: color-mix(in srgb, var(--sbb-color-peach) 5%, var(--sbb-background-color-1));
2456
- --sbb-form-field-background-color: light-dark(
2457
- color-mix(in srgb, var(--sbb-color-peach) 5%, var(--sbb-background-color-1)),
2458
- color-mix(in srgb, var(--sbb-color-peach) 10%, var(--sbb-background-color-1))
2459
- );
2460
- }
2461
- :root.sbb-form-field-required-highlight :is(sbb-form-field, sbb-timetable-form-field):is(:state(empty),[state--empty]):not(:is(:state(readonly),[state--readonly]),
2462
- :is(:state(disabled),[state--disabled])):has(:where(input, select, textarea, sbb-select, sbb-date-input, sbb-time-input)[required])[negative], :is(sbb-form-field, sbb-timetable-form-field):is(:state(empty),[state--empty]):not(:is(:state(readonly),[state--readonly]),
2463
- :is(:state(disabled),[state--disabled])).sbb-form-field-required-highlight[negative] {
2464
- --sbb-form-field-background-color: color-mix(
2465
- in srgb,
2466
- var(--sbb-color-peach) 10%,
2467
- var(--sbb-background-color-1-negative)
2468
- );
2469
- }
2470
-
2471
- @media (forced-colors: active) {
2472
- :root.sbb-form-field-required-highlight :is(sbb-form-field, sbb-timetable-form-field):not(:is(:state(readonly),[state--readonly]), :is(:state(disabled),[state--disabled])):has(:where(input, select, textarea, sbb-select, sbb-date-input, sbb-time-input)[required]) label::after, :is(sbb-form-field, sbb-timetable-form-field):not(:is(:state(readonly),[state--readonly]), :is(:state(disabled),[state--disabled])).sbb-form-field-required-highlight label::after {
2473
- content: " *";
2474
- color: Highlight;
2475
- }
2476
- }
2477
-
2478
- :root:has(sbb-header[size=s]) {
2479
- --sbb-header-height: var(--sbb-header-height-s);
2480
- }
2481
-
2482
- sbb-header + :where(sbb-sidebar-container, sbb-icon-sidebar-container) {
2483
- margin-block-start: var(--sbb-header-height);
2484
- }
2485
-
2486
- .sbb-header-info {
2487
- display: flex;
2488
- padding-inline: var(--sbb-spacing-fixed-4x);
2489
- gap: var(--sbb-spacing-fixed-1x);
2490
- align-items: baseline;
2491
- color: var(--sbb-color-1);
2492
- font-size: var(--sbb-text-font-size-xs);
2493
- letter-spacing: var(--sbb-typo-letter-spacing-text);
2494
- }
2495
- .sbb-header-info strong + * {
2496
- font-size: var(--sbb-text-font-size-xxs);
2497
- letter-spacing: var(--sbb-typo-letter-spacing-text);
2498
- color: var(--sbb-color-granite);
2499
- color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
2500
- }
2501
-
2502
- sbb-icon-sidebar-content + sbb-icon-sidebar :is(sbb-icon-sidebar-link, sbb-icon-sidebar-button) {
2503
- --sbb-icon-sidebar-button__current-border-inset-inline-start: auto;
2504
- }
2505
-
2506
- sbb-icon-sidebar-content + sbb-icon-sidebar {
2507
- border-start-end-radius: 0;
2508
- border-start-start-radius: var(--sbb-icon-sidebar-border-radius);
2509
- }
2510
-
2511
- sbb-lead-container > [slot=image]:is(sbb-image, img, picture),
2512
- sbb-lead-container > [slot=image] :is(sbb-image, img, picture):not(.sbb-figure-overlap-image) {
2513
- --sbb-image-aspect-ratio: var(--sbb-lead-container-image-ratio);
2514
- --sbb-image-object-fit: cover;
2515
- border-radius: var(--sbb-lead-container-image-border-radius);
2516
- }
2517
-
2518
- sbb-message > [slot=image]:is(sbb-image, img),
2519
- sbb-message > [slot=image] :is(sbb-image, img):not(.sbb-figure-overlap-image) {
2520
- border-radius: var(--sbb-message-image-border-radius);
2521
- }
2522
-
2523
- .sbb-options-nowrap {
2524
- --sbb-option-text-overflow: ellipsis;
2525
- --sbb-option-overflow: hidden;
2526
- --sbb-option-white-space: nowrap;
2527
- }
2528
-
2529
- .sbb-select-trigger {
2530
- width: 100%;
2531
- height: var(--sbb-size-element-xs);
2532
- }
2533
- sbb-form-field .sbb-select-trigger {
2534
- top: 0;
2535
- }
2536
-
2537
- sbb-sidebar:has(sbb-sidebar-title) {
2538
- --_sbb-sidebar-padding-block-start: 0;
2539
- }
2540
-
2541
- sbb-sidebar:not(:has(sbb-sidebar-title)) sbb-sidebar-close-button {
2542
- position: absolute;
2543
- }
2544
-
2545
- sbb-sidebar-container:has(> sbb-sidebar:is(:state(skip-animation),[state--skip-animation])) {
2546
- --sbb-sidebar-container-animation-duration: 0s;
2547
- }
2548
- sbb-sidebar-container:has(> sbb-sidebar:is([mode=over], :is(:state(mode-over-forced),[state--mode-over-forced])):is(:is(:state(state-opening),[state--state-opening]),
2549
- :is(:state(state-opened),[state--state-opened]))) {
2550
- --sbb-sidebar-container__backdrop-visibility: visible;
2551
- --sbb-sidebar-container-backdrop-opacity: 0.4;
2552
- }
2553
- sbb-sidebar-container:is(:has(> sbb-sidebar[position=end]:is(:is(:state(state-closing),[state--state-closing]),
2554
- :is(:state(state-closed),[state--state-closed]),
2555
- [mode=over],
2556
- :is(:state(mode-over-forced),[state--mode-over-forced]))),
2557
- :not(:has(> sbb-sidebar[position=end]))) > sbb-sidebar-content {
2558
- --_sbb-sidebar-content-margin-inline-end: 0;
2559
- }
2560
- sbb-sidebar-container:is(:has(> sbb-sidebar:not([position=end]):is(:is(:state(state-closing),[state--state-closing]),
2561
- :is(:state(state-closed),[state--state-closed]),
2562
- [mode=over],
2563
- :is(:state(mode-over-forced),[state--mode-over-forced]))),
2564
- :not(:has(> sbb-sidebar:not([position=end])))) > sbb-sidebar-content {
2565
- --_sbb-sidebar-content-margin-inline-start: 0;
2566
- }
2567
-
2568
- sbb-tab-nav-bar .sbb-tab-amount {
2569
- margin: 0;
2570
- color: var(--sbb-tab-label-amount-color);
2571
- font-weight: normal;
2572
- text-decoration: var(--sbb-tab-label-text-decoration);
2573
- }
2574
-
2575
- sbb-teaser :is(sbb-image, img):not(.sbb-figure-overlap-image) {
2576
- --sbb-image-object-fit: cover;
2577
- --sbb-image-aspect-ratio: 4 / 3;
2578
- transition-property: filter, scale;
2579
- will-change: filter, scale;
2580
- scale: var(--sbb-teaser-scale, 1);
2581
- }
2582
-
2583
- sbb-teaser-hero :is(sbb-image, img):not(.sbb-figure-overlap-image) {
2584
- --sbb-image-aspect-ratio: 1 / 1;
2585
- border-radius: 0;
2586
- }
2587
- @media (min-width: calc(37.5rem)) {
2588
- sbb-teaser-hero :is(sbb-image, img):not(.sbb-figure-overlap-image) {
2589
- --sbb-image-aspect-ratio: 16 / 9;
2590
- }
2591
- }
2592
- sbb-teaser-hero img:not(.sbb-figure-overlap-image) {
2593
- display: block;
2594
- align-self: stretch;
2595
- width: 100%;
2596
- }
2597
-
2598
- :is(sbb-teaser-product, sbb-teaser-product-static) :is(sbb-image, img):not(.sbb-figure-overlap-image) {
2599
- border-radius: 0;
2600
- --sbb-image-object-fit: cover;
2601
- --sbb-image-aspect-ratio: 16 / 9;
2602
- }
2603
- :is(sbb-teaser-product, sbb-teaser-product-static) img:not(.sbb-figure-overlap-image) {
2604
- place-self: stretch;
2605
- }
2606
-
2607
- sbb-toggle:has(:focus-visible) {
2608
- outline-offset: var(--sbb-focus-outline-offset);
2609
- outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);
2610
- }
2611
-
2612
- .sbb-dark {
2613
- color-scheme: dark;
2614
- }
2615
-
2616
- .sbb-light {
2617
- color-scheme: light;
2618
- }
2619
-
2620
- .sbb-light-dark {
2621
- color-scheme: light dark;
2622
- }
2623
-
2624
- html {
2625
- font-family: var(--sbb-typo-font-family);
2626
- font-weight: normal;
2627
- line-height: var(--sbb-typo-line-height-text);
2628
- letter-spacing: var(--sbb-typo-letter-spacing-text);
2629
- font-size: var(--sbb-text-font-size);
2630
- color-scheme: light dark;
2631
- color: var(--sbb-font-color-default);
2632
- background-color: var(--sbb-background-color-1);
2633
- }
2634
-
2635
- ::placeholder {
2636
- color: var(--sbb-color-5);
2637
- -webkit-text-fill-color: var(--sbb-color-5);
2638
- opacity: 1;
2639
- }
2640
-
2641
- :is(sbb-autocomplete,
2642
- sbb-autocomplete-grid,
2643
- sbb-datepicker,
2644
- sbb-dialog,
2645
- sbb-menu,
2646
- sbb-navigation,
2647
- sbb-navigation-section,
2648
- sbb-overlay,
2649
- sbb-popover,
2650
- sbb-select,
2651
- sbb-skiplink-list,
2652
- sbb-toast,
2653
- sbb-tooltip):not(:defined) {
2654
- display: none;
2655
- }
2656
-
2657
- [popover]:where(sbb-autocomplete,
2658
- sbb-autocomplete-grid,
2659
- sbb-datepicker,
2660
- sbb-dialog,
2661
- sbb-menu,
2662
- sbb-navigation,
2663
- sbb-overlay,
2664
- sbb-popover,
2665
- sbb-toast) {
2666
- margin: 0;
2667
- padding: 0;
2668
- border: none;
2669
- width: auto;
2670
- height: auto;
2671
- background-color: transparent;
2672
- color: inherit;
2673
- pointer-events: none;
2674
- }
2675
-
2676
- :is(sbb-card, sbb-flip-card) .sbb-action {
2677
- pointer-events: all;
2678
- }
2679
-
2680
- sbb-title + p {
2681
- margin-block-start: 0;
2682
- }
2683
-
2684
- img {
2685
- aspect-ratio: var(--sbb-image-aspect-ratio);
2686
- object-fit: var(--sbb-image-object-fit);
2687
- object-position: var(--sbb-image-object-position);
2688
- }
2689
-
2690
- :is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product) {
2691
- --sbb-teaser-image-brightness-hover: var(--sbb-hover-image-brightness);
2692
- --sbb-teaser-image-animation-duration: var(
2693
- --sbb-disable-animation-duration,
2694
- var(--sbb-animation-duration-4x)
2695
- );
2696
- --sbb-teaser-image-animation-easing: var(--sbb-animation-easing);
2697
- }
2698
- @media (any-hover: hover) {
2699
- :is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product):hover {
2700
- --sbb-teaser-image-brightness: var(--sbb-teaser-image-brightness-hover);
2701
- }
2702
- }
2703
- :is(sbb-teaser, sbb-teaser-hero, sbb-teaser-product) :is(sbb-image, img):not(.sbb-figure-overlap-image) {
2704
- will-change: filter;
2705
- filter: brightness(var(--sbb-teaser-image-brightness, 1));
2706
- transition: filter var(--sbb-teaser-image-animation-duration) var(--sbb-teaser-image-animation-easing);
2707
- }
2708
-
2709
- .sbb-overlay-outlet {
2710
- position: fixed;
2711
- inset: 0;
2712
- pointer-events: none;
2713
- }