@oicl/openbridge-webcomponents 2.0.0-next.80 → 2.0.0-next.82

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 (399) hide show
  1. package/bundle/openbridge-webcomponents.bundle.js +5267 -5458
  2. package/bundle/openbridge-webcomponents.bundle.js.map +1 -1
  3. package/custom-elements.json +74 -2
  4. package/dist/ar/building-blocks/poi-graphic-line/poi-graphic-line.css.js +3 -4
  5. package/dist/ar/building-blocks/poi-graphic-line/poi-graphic-line.css.js.map +1 -1
  6. package/dist/ar/building-blocks/poi-header/poi-header.css.js +3 -4
  7. package/dist/ar/building-blocks/poi-header/poi-header.css.js.map +1 -1
  8. package/dist/ar/building-blocks/poi-line/poi-line.css.js +3 -4
  9. package/dist/ar/building-blocks/poi-line/poi-line.css.js.map +1 -1
  10. package/dist/ar/building-blocks/poi-pointer/poi-pointer.css.js +3 -4
  11. package/dist/ar/building-blocks/poi-pointer/poi-pointer.css.js.map +1 -1
  12. package/dist/ar/building-blocks/poi-selection-frame/poi-selection-frame.css.js +3 -4
  13. package/dist/ar/building-blocks/poi-selection-frame/poi-selection-frame.css.js.map +1 -1
  14. package/dist/ar/building-blocks/ruler-pointer/ruler-pointer.css.js +3 -4
  15. package/dist/ar/building-blocks/ruler-pointer/ruler-pointer.css.js.map +1 -1
  16. package/dist/ar/chart-object-vessel-button/chart-object-vessel-button.css.js +36 -37
  17. package/dist/ar/chart-object-vessel-button/chart-object-vessel-button.css.js.map +1 -1
  18. package/dist/ar/poi/poi-base.css.js +3 -4
  19. package/dist/ar/poi/poi-base.css.js.map +1 -1
  20. package/dist/ar/poi/poi.css.js +3 -4
  21. package/dist/ar/poi/poi.css.js.map +1 -1
  22. package/dist/ar/poi-button/poi-button.css.js +69 -70
  23. package/dist/ar/poi-button/poi-button.css.js.map +1 -1
  24. package/dist/ar/poi-card/poi-card.css.js +3 -4
  25. package/dist/ar/poi-card/poi-card.css.js.map +1 -1
  26. package/dist/ar/poi-card-header/poi-card-header.css.js +3 -4
  27. package/dist/ar/poi-card-header/poi-card-header.css.js.map +1 -1
  28. package/dist/ar/poi-controller/poi-controller.css.js +3 -4
  29. package/dist/ar/poi-controller/poi-controller.css.js.map +1 -1
  30. package/dist/ar/poi-group/poi-group.css.js +36 -37
  31. package/dist/ar/poi-group/poi-group.css.js.map +1 -1
  32. package/dist/ar/poi-layer/poi-layer.css.js +3 -4
  33. package/dist/ar/poi-layer/poi-layer.css.js.map +1 -1
  34. package/dist/ar/poi-layer-stack/poi-layer-stack.css.js +3 -4
  35. package/dist/ar/poi-layer-stack/poi-layer-stack.css.js.map +1 -1
  36. package/dist/ar/poi-object/poi-object-aton.css.js +3 -4
  37. package/dist/ar/poi-object/poi-object-aton.css.js.map +1 -1
  38. package/dist/ar/poi-object/poi-object-vessel.css.js +3 -4
  39. package/dist/ar/poi-object/poi-object-vessel.css.js.map +1 -1
  40. package/dist/ar/poi-object/poi-object.css.js +3 -4
  41. package/dist/ar/poi-object/poi-object.css.js.map +1 -1
  42. package/dist/automation/automation-badge/automation-badge.css.js +15 -16
  43. package/dist/automation/automation-badge/automation-badge.css.js.map +1 -1
  44. package/dist/automation/automation-button/automation-button.css.js +33 -34
  45. package/dist/automation/automation-button/automation-button.css.js.map +1 -1
  46. package/dist/automation/automation-input-modal/automation-input-modal.css.js +3 -4
  47. package/dist/automation/automation-input-modal/automation-input-modal.css.js.map +1 -1
  48. package/dist/automation/automation-readout/automation-readout.css.js +36 -37
  49. package/dist/automation/automation-readout/automation-readout.css.js.map +1 -1
  50. package/dist/automation/automation-tank/automation-tank.css.js +36 -37
  51. package/dist/automation/automation-tank/automation-tank.css.js.map +1 -1
  52. package/dist/automation/valve-analog-three-way-icon/valve-analog-three-way-icon.css.js +3 -4
  53. package/dist/automation/valve-analog-three-way-icon/valve-analog-three-way-icon.css.js.map +1 -1
  54. package/dist/automation/valve-analoge-two-way-icon/valve-analog-two-way-icon.css.js +3 -4
  55. package/dist/automation/valve-analoge-two-way-icon/valve-analog-two-way-icon.css.js.map +1 -1
  56. package/dist/bars-graphs/donut-chart/donut-chart.css.js +3 -4
  57. package/dist/bars-graphs/donut-chart/donut-chart.css.js.map +1 -1
  58. package/dist/bars-graphs/pie-chart/pie-chart.css.js +3 -4
  59. package/dist/bars-graphs/pie-chart/pie-chart.css.js.map +1 -1
  60. package/dist/bars-graphs/polar-chart/polar-chart.css.js +3 -4
  61. package/dist/bars-graphs/polar-chart/polar-chart.css.js.map +1 -1
  62. package/dist/bars-graphs/radial-bar-chart/radial-bar-chart.css.js +3 -4
  63. package/dist/bars-graphs/radial-bar-chart/radial-bar-chart.css.js.map +1 -1
  64. package/dist/building-blocks/alert-list/alert-list.css.js +3 -4
  65. package/dist/building-blocks/alert-list/alert-list.css.js.map +1 -1
  66. package/dist/building-blocks/chart-line/chart-line-base.css.js +3 -4
  67. package/dist/building-blocks/chart-line/chart-line-base.css.js.map +1 -1
  68. package/dist/building-blocks/circular-progress/circular-progress.css.js +3 -4
  69. package/dist/building-blocks/circular-progress/circular-progress.css.js.map +1 -1
  70. package/dist/charthelpers/chart-common.css.js +3 -4
  71. package/dist/charthelpers/chart-common.css.js.map +1 -1
  72. package/dist/charthelpers/chart-debug.css.js +3 -4
  73. package/dist/charthelpers/chart-debug.css.js.map +1 -1
  74. package/dist/charthelpers/chart-legend.css.js +3 -4
  75. package/dist/charthelpers/chart-legend.css.js.map +1 -1
  76. package/dist/components/accordion-card/accordion-card.css.js +36 -37
  77. package/dist/components/accordion-card/accordion-card.css.js.map +1 -1
  78. package/dist/components/accordion-item/accordion-item.css.js +33 -34
  79. package/dist/components/accordion-item/accordion-item.css.js.map +1 -1
  80. package/dist/components/advice-button/advice-button.css.js +69 -70
  81. package/dist/components/advice-button/advice-button.css.js.map +1 -1
  82. package/dist/components/advice-floating-item/advice-floating-item.css.js +3 -4
  83. package/dist/components/advice-floating-item/advice-floating-item.css.js.map +1 -1
  84. package/dist/components/advice-menu-item/advice-menu-item.css.js +3 -4
  85. package/dist/components/advice-menu-item/advice-menu-item.css.js.map +1 -1
  86. package/dist/components/advice-message-item/advice-message-item.css.js +3 -4
  87. package/dist/components/advice-message-item/advice-message-item.css.js.map +1 -1
  88. package/dist/components/alert-button/alert-button.css.js +696 -697
  89. package/dist/components/alert-button/alert-button.css.js.map +1 -1
  90. package/dist/components/alert-floating-item/alert-floating-item.css.js +3 -4
  91. package/dist/components/alert-floating-item/alert-floating-item.css.js.map +1 -1
  92. package/dist/components/alert-frame/alert-frame.css.js +3 -4
  93. package/dist/components/alert-frame/alert-frame.css.js.map +1 -1
  94. package/dist/components/alert-list-details/alert-list-details.css.js +3 -4
  95. package/dist/components/alert-list-details/alert-list-details.css.js.map +1 -1
  96. package/dist/components/alert-menu/alert-menu.css.js +3 -4
  97. package/dist/components/alert-menu/alert-menu.css.js.map +1 -1
  98. package/dist/components/alert-menu-item/alert-menu-item.css.js +3 -4
  99. package/dist/components/alert-menu-item/alert-menu-item.css.js.map +1 -1
  100. package/dist/components/app-button/app-button.css.js +105 -106
  101. package/dist/components/app-button/app-button.css.js.map +1 -1
  102. package/dist/components/app-menu/app-menu.css.js +3 -4
  103. package/dist/components/app-menu/app-menu.css.js.map +1 -1
  104. package/dist/components/attachment-list-item/attachment-list-item.css.js +42 -43
  105. package/dist/components/attachment-list-item/attachment-list-item.css.js.map +1 -1
  106. package/dist/components/audio-output/audio-output.css.js +3 -4
  107. package/dist/components/audio-output/audio-output.css.js.map +1 -1
  108. package/dist/components/audio-recording-item/audio-recording-item.css.js +3 -4
  109. package/dist/components/audio-recording-item/audio-recording-item.css.js.map +1 -1
  110. package/dist/components/automation-button-readout-stack/automation-button-readout-stack.css.js +3 -4
  111. package/dist/components/automation-button-readout-stack/automation-button-readout-stack.css.js.map +1 -1
  112. package/dist/components/badge/badge.css.js +3 -4
  113. package/dist/components/badge/badge.css.js.map +1 -1
  114. package/dist/components/breadcrumb/breadcrumb.css.js +36 -37
  115. package/dist/components/breadcrumb/breadcrumb.css.js.map +1 -1
  116. package/dist/components/brilliance-menu/brilliance-menu.css.js +3 -4
  117. package/dist/components/brilliance-menu/brilliance-menu.css.js.map +1 -1
  118. package/dist/components/button/button.css.js +102 -103
  119. package/dist/components/button/button.css.js.map +1 -1
  120. package/dist/components/calendar/calendar.css.js +3 -4
  121. package/dist/components/calendar/calendar.css.js.map +1 -1
  122. package/dist/components/card/card.css.js +36 -37
  123. package/dist/components/card/card.css.js.map +1 -1
  124. package/dist/components/chat-message/chat-message.css.js +3 -4
  125. package/dist/components/chat-message/chat-message.css.js.map +1 -1
  126. package/dist/components/check-button/check-button.css.js +139 -140
  127. package/dist/components/check-button/check-button.css.js.map +1 -1
  128. package/dist/components/checkbox/checkbox.css.js +126 -127
  129. package/dist/components/checkbox/checkbox.css.js.map +1 -1
  130. package/dist/components/checkbox-item/checkbox-item.css.js +42 -43
  131. package/dist/components/checkbox-item/checkbox-item.css.js.map +1 -1
  132. package/dist/components/clock/clock.css.js +69 -70
  133. package/dist/components/clock/clock.css.js.map +1 -1
  134. package/dist/components/command-button/command-button.css.js +69 -70
  135. package/dist/components/command-button/command-button.css.js.map +1 -1
  136. package/dist/components/command-menu/command-menu.css.js +3 -4
  137. package/dist/components/command-menu/command-menu.css.js.map +1 -1
  138. package/dist/components/communication-table/communication-table.css.js +3 -4
  139. package/dist/components/communication-table/communication-table.css.js.map +1 -1
  140. package/dist/components/context-menu-input/context-menu-input.css.js +3 -4
  141. package/dist/components/context-menu-input/context-menu-input.css.js.map +1 -1
  142. package/dist/components/date-item/date-item.css.js +132 -133
  143. package/dist/components/date-item/date-item.css.js.map +1 -1
  144. package/dist/components/divider/divider.css.js +3 -4
  145. package/dist/components/divider/divider.css.js.map +1 -1
  146. package/dist/components/dropdown-button/dropdown-button.css.js +162 -163
  147. package/dist/components/dropdown-button/dropdown-button.css.js.map +1 -1
  148. package/dist/components/elevated-card/elevated-card.css.js +39 -40
  149. package/dist/components/elevated-card/elevated-card.css.js.map +1 -1
  150. package/dist/components/elevated-card-radio-group/elevated-card-radio-group.css.js +117 -118
  151. package/dist/components/elevated-card-radio-group/elevated-card-radio-group.css.js.map +1 -1
  152. package/dist/components/event-item/event-item.css.js +36 -37
  153. package/dist/components/event-item/event-item.css.js.map +1 -1
  154. package/dist/components/event-list/event-list.css.js +3 -4
  155. package/dist/components/event-list/event-list.css.js.map +1 -1
  156. package/dist/components/filter-chip/filter-chip.css.js +69 -70
  157. package/dist/components/filter-chip/filter-chip.css.js.map +1 -1
  158. package/dist/components/floating-item/floating-item.css.js +3 -4
  159. package/dist/components/floating-item/floating-item.css.js.map +1 -1
  160. package/dist/components/form-container/form-container.css.js +3 -4
  161. package/dist/components/form-container/form-container.css.js.map +1 -1
  162. package/dist/components/form-footer-container/form-footer-container.css.js +3 -4
  163. package/dist/components/form-footer-container/form-footer-container.css.js.map +1 -1
  164. package/dist/components/form-group/form-group.css.js +3 -4
  165. package/dist/components/form-group/form-group.css.js.map +1 -1
  166. package/dist/components/form-item/form-item.css.js +3 -4
  167. package/dist/components/form-item/form-item.css.js.map +1 -1
  168. package/dist/components/icon-button/icon-button.css.js +135 -136
  169. package/dist/components/icon-button/icon-button.css.js.map +1 -1
  170. package/dist/components/icon-check-button/icon-check-button.css.js +66 -67
  171. package/dist/components/icon-check-button/icon-check-button.css.js.map +1 -1
  172. package/dist/components/input-chip/input-chip.css.js +36 -37
  173. package/dist/components/input-chip/input-chip.css.js.map +1 -1
  174. package/dist/components/keyboard-full/keyboard-full.css.js +3 -4
  175. package/dist/components/keyboard-full/keyboard-full.css.js.map +1 -1
  176. package/dist/components/keyboard-numeric/keyboard-numeric.css.js +3 -4
  177. package/dist/components/keyboard-numeric/keyboard-numeric.css.js.map +1 -1
  178. package/dist/components/menu-button/menu-button.css.js +36 -37
  179. package/dist/components/menu-button/menu-button.css.js.map +1 -1
  180. package/dist/components/message-menu-item/message-menu-item.css.js +33 -34
  181. package/dist/components/message-menu-item/message-menu-item.css.js.map +1 -1
  182. package/dist/components/modal-window/modal-window.css.js +3 -4
  183. package/dist/components/modal-window/modal-window.css.js.map +1 -1
  184. package/dist/components/navigation-item/navigation-item.css.js +69 -70
  185. package/dist/components/navigation-item/navigation-item.css.js.map +1 -1
  186. package/dist/components/navigation-item-group/navigation-item-group.css.js +3 -4
  187. package/dist/components/navigation-item-group/navigation-item-group.css.js.map +1 -1
  188. package/dist/components/navigation-menu/navigation-menu.css.js +3 -4
  189. package/dist/components/navigation-menu/navigation-menu.css.js.map +1 -1
  190. package/dist/components/notification-badge-button/notification-badge-button.css.js +36 -37
  191. package/dist/components/notification-badge-button/notification-badge-button.css.js.map +1 -1
  192. package/dist/components/notification-button/notification-button.css.js +102 -103
  193. package/dist/components/notification-button/notification-button.css.js.map +1 -1
  194. package/dist/components/notification-floating-item/notification-floating-item.css.js +3 -4
  195. package/dist/components/notification-floating-item/notification-floating-item.css.js.map +1 -1
  196. package/dist/components/notification-menu-item/notification-menu-item.css.js +3 -4
  197. package/dist/components/notification-menu-item/notification-menu-item.css.js.map +1 -1
  198. package/dist/components/notification-message-item/notification-message-item.css.js +3 -4
  199. package/dist/components/notification-message-item/notification-message-item.css.js.map +1 -1
  200. package/dist/components/number-input-field/number-input-field.css.js +36 -37
  201. package/dist/components/number-input-field/number-input-field.css.js.map +1 -1
  202. package/dist/components/pagination/pagination.css.js +3 -4
  203. package/dist/components/pagination/pagination.css.js.map +1 -1
  204. package/dist/components/pivot-item/pivot-item.css.js +36 -37
  205. package/dist/components/pivot-item/pivot-item.css.js.map +1 -1
  206. package/dist/components/pivot-item-group/pivot-item-group.css.js +3 -4
  207. package/dist/components/pivot-item-group/pivot-item-group.css.js.map +1 -1
  208. package/dist/components/progress-bar/progress-bar.css.js +3 -4
  209. package/dist/components/progress-bar/progress-bar.css.js.map +1 -1
  210. package/dist/components/progress-bar/progress-bar.d.ts +102 -9
  211. package/dist/components/progress-bar/progress-bar.d.ts.map +1 -1
  212. package/dist/components/progress-bar/progress-bar.js.map +1 -1
  213. package/dist/components/progress-button/progress-button.css.js +135 -136
  214. package/dist/components/progress-button/progress-button.css.js.map +1 -1
  215. package/dist/components/progress-button/progress-button.d.ts +104 -6
  216. package/dist/components/progress-button/progress-button.d.ts.map +1 -1
  217. package/dist/components/progress-button/progress-button.js.map +1 -1
  218. package/dist/components/progress-indicator-dots/progress-indicator-dots.css.js +3 -4
  219. package/dist/components/progress-indicator-dots/progress-indicator-dots.css.js.map +1 -1
  220. package/dist/components/radio/radio.css.js +120 -121
  221. package/dist/components/radio/radio.css.js.map +1 -1
  222. package/dist/components/rich-button/rich-button.css.js +33 -34
  223. package/dist/components/rich-button/rich-button.css.js.map +1 -1
  224. package/dist/components/scrollbar/scrollbar.css.js +3 -4
  225. package/dist/components/scrollbar/scrollbar.css.js.map +1 -1
  226. package/dist/components/sequence-card/sequence-card.css.js +3 -4
  227. package/dist/components/sequence-card/sequence-card.css.js.map +1 -1
  228. package/dist/components/sequence-connector/sequence-connector.css.js +3 -4
  229. package/dist/components/sequence-connector/sequence-connector.css.js.map +1 -1
  230. package/dist/components/sequence-item/sequence-item.css.js +3 -4
  231. package/dist/components/sequence-item/sequence-item.css.js.map +1 -1
  232. package/dist/components/sequence-loading-spinner/sequence-loading-spinner.css.js +3 -4
  233. package/dist/components/sequence-loading-spinner/sequence-loading-spinner.css.js.map +1 -1
  234. package/dist/components/sequence-modal/sequence-modal.css.js +3 -4
  235. package/dist/components/sequence-modal/sequence-modal.css.js.map +1 -1
  236. package/dist/components/sequence-step/sequence-step.css.js +153 -154
  237. package/dist/components/sequence-step/sequence-step.css.js.map +1 -1
  238. package/dist/components/sequence-toolbar/sequence-toolbar.css.js +3 -4
  239. package/dist/components/sequence-toolbar/sequence-toolbar.css.js.map +1 -1
  240. package/dist/components/slide-button/slide-button.css.js +42 -43
  241. package/dist/components/slide-button/slide-button.css.js.map +1 -1
  242. package/dist/components/slider/slider.css.js +3 -4
  243. package/dist/components/slider/slider.css.js.map +1 -1
  244. package/dist/components/slider-double/slider-double.css.js +3 -4
  245. package/dist/components/slider-double/slider-double.css.js.map +1 -1
  246. package/dist/components/split-button/split-button.css.js +3 -4
  247. package/dist/components/split-button/split-button.css.js.map +1 -1
  248. package/dist/components/start-stop-switch/start-stop-switch.css.js +54 -55
  249. package/dist/components/start-stop-switch/start-stop-switch.css.js.map +1 -1
  250. package/dist/components/status-indicator/status-indicator.css.js +3 -4
  251. package/dist/components/status-indicator/status-indicator.css.js.map +1 -1
  252. package/dist/components/stepper-box/stepper-box.css.js +3 -4
  253. package/dist/components/stepper-box/stepper-box.css.js.map +1 -1
  254. package/dist/components/system-button/system-button.css.js +36 -37
  255. package/dist/components/system-button/system-button.css.js.map +1 -1
  256. package/dist/components/system-menu/system-menu.css.js +63 -64
  257. package/dist/components/system-menu/system-menu.css.js.map +1 -1
  258. package/dist/components/tab-item/tab-item.css.js +33 -34
  259. package/dist/components/tab-item/tab-item.css.js.map +1 -1
  260. package/dist/components/tab-row/tab-row.css.js +3 -4
  261. package/dist/components/tab-row/tab-row.css.js.map +1 -1
  262. package/dist/components/tabbed-card/tabbed-card.css.js +63 -64
  263. package/dist/components/tabbed-card/tabbed-card.css.js.map +1 -1
  264. package/dist/components/table/table.css.js +69 -70
  265. package/dist/components/table/table.css.js.map +1 -1
  266. package/dist/components/table-header-item/table-header-item.css.js +69 -70
  267. package/dist/components/table-header-item/table-header-item.css.js.map +1 -1
  268. package/dist/components/tag/tag.css.js +3 -4
  269. package/dist/components/tag/tag.css.js.map +1 -1
  270. package/dist/components/text-input-field/text-input-field.css.js +36 -37
  271. package/dist/components/text-input-field/text-input-field.css.js.map +1 -1
  272. package/dist/components/textarea-field/textarea-field.css.js +3 -4
  273. package/dist/components/textarea-field/textarea-field.css.js.map +1 -1
  274. package/dist/components/textbox/textbox.css.js +3 -4
  275. package/dist/components/textbox/textbox.css.js.map +1 -1
  276. package/dist/components/title-container/title-container.css.js +3 -4
  277. package/dist/components/title-container/title-container.css.js.map +1 -1
  278. package/dist/components/toggle-button-group/toggle-button-group.css.js +3 -4
  279. package/dist/components/toggle-button-group/toggle-button-group.css.js.map +1 -1
  280. package/dist/components/toggle-button-option/toggle-button-option.css.js +126 -127
  281. package/dist/components/toggle-button-option/toggle-button-option.css.js.map +1 -1
  282. package/dist/components/toggle-button-three-state/toggle-button-three-state.css.js +3 -4
  283. package/dist/components/toggle-button-three-state/toggle-button-three-state.css.js.map +1 -1
  284. package/dist/components/toggle-button-vertical-group/toggle-button-vertical-group.css.js +3 -4
  285. package/dist/components/toggle-button-vertical-group/toggle-button-vertical-group.css.js.map +1 -1
  286. package/dist/components/toggle-button-vertical-option/toggle-button-vertical-option.css.js +126 -127
  287. package/dist/components/toggle-button-vertical-option/toggle-button-vertical-option.css.js.map +1 -1
  288. package/dist/components/toggle-switch/toggle-switch.css.js +63 -64
  289. package/dist/components/toggle-switch/toggle-switch.css.js.map +1 -1
  290. package/dist/components/toggletip/toggletip.css.js +3 -4
  291. package/dist/components/toggletip/toggletip.css.js.map +1 -1
  292. package/dist/components/tooltip/tooltip.css.js +3 -4
  293. package/dist/components/tooltip/tooltip.css.js.map +1 -1
  294. package/dist/components/top-bar/top-bar.css.js +3 -4
  295. package/dist/components/top-bar/top-bar.css.js.map +1 -1
  296. package/dist/components/topbar-message-item/topbar-message-item.css.js +81 -82
  297. package/dist/components/topbar-message-item/topbar-message-item.css.js.map +1 -1
  298. package/dist/components/tree-navigation/tree-navigation.css.js +3 -4
  299. package/dist/components/tree-navigation/tree-navigation.css.js.map +1 -1
  300. package/dist/components/tree-navigation-group/tree-navigation-group.css.js +3 -4
  301. package/dist/components/tree-navigation-group/tree-navigation-group.css.js.map +1 -1
  302. package/dist/components/tree-navigation-item/tree-navigation-item.css.js +69 -70
  303. package/dist/components/tree-navigation-item/tree-navigation-item.css.js.map +1 -1
  304. package/dist/components/user-button/user-button.css.js +96 -97
  305. package/dist/components/user-button/user-button.css.js.map +1 -1
  306. package/dist/components/user-menu/user-menu.css.js +3 -4
  307. package/dist/components/user-menu/user-menu.css.js.map +1 -1
  308. package/dist/components/vendor-button/vendor-button.css.js +34 -35
  309. package/dist/components/vendor-button/vendor-button.css.js.map +1 -1
  310. package/dist/integration-systems/integration-app-bar/integration-app-bar.css.js +3 -4
  311. package/dist/integration-systems/integration-app-bar/integration-app-bar.css.js.map +1 -1
  312. package/dist/integration-systems/integration-bar/integration-bar.css.js +3 -4
  313. package/dist/integration-systems/integration-bar/integration-bar.css.js.map +1 -1
  314. package/dist/integration-systems/integration-bar-dropdown/integration-bar-dropdown.css.js +3 -4
  315. package/dist/integration-systems/integration-bar-dropdown/integration-bar-dropdown.css.js.map +1 -1
  316. package/dist/integration-systems/integration-button/integration-button.css.js +135 -136
  317. package/dist/integration-systems/integration-button/integration-button.css.js.map +1 -1
  318. package/dist/integration-systems/integration-dropdown-button/integration-dropdown-button.css.js +96 -97
  319. package/dist/integration-systems/integration-dropdown-button/integration-dropdown-button.css.js.map +1 -1
  320. package/dist/integration-systems/integration-fleet-button/integration-fleet-button.css.js +63 -64
  321. package/dist/integration-systems/integration-fleet-button/integration-fleet-button.css.js.map +1 -1
  322. package/dist/integration-systems/integration-tabs/integration-tabs.css.js +69 -70
  323. package/dist/integration-systems/integration-tabs/integration-tabs.css.js.map +1 -1
  324. package/dist/integration-systems/integration-vessel-menu/integration-vessel-menu.css.js +9 -10
  325. package/dist/integration-systems/integration-vessel-menu/integration-vessel-menu.css.js.map +1 -1
  326. package/dist/integration-systems/integration-vessel-selector/integration-vessel-selector.css.js +3 -4
  327. package/dist/integration-systems/integration-vessel-selector/integration-vessel-selector.css.js.map +1 -1
  328. package/dist/navigation-instruments/azimuth-thruster/azimuth-thruster.css.js +3 -4
  329. package/dist/navigation-instruments/azimuth-thruster/azimuth-thruster.css.js.map +1 -1
  330. package/dist/navigation-instruments/azimuth-thruster-labeled/azimuth-thruster-labeled.css.js +3 -4
  331. package/dist/navigation-instruments/azimuth-thruster-labeled/azimuth-thruster-labeled.css.js.map +1 -1
  332. package/dist/navigation-instruments/bearing-indicator/bearing-indicator.css.js +3 -4
  333. package/dist/navigation-instruments/bearing-indicator/bearing-indicator.css.js.map +1 -1
  334. package/dist/navigation-instruments/compass-flat/compass-flat.css.js +3 -4
  335. package/dist/navigation-instruments/compass-flat/compass-flat.css.js.map +1 -1
  336. package/dist/navigation-instruments/compass-indicator/compass-indicator.css.js +3 -4
  337. package/dist/navigation-instruments/compass-indicator/compass-indicator.css.js.map +1 -1
  338. package/dist/navigation-instruments/compass-sector/compass-sector.css.js +3 -4
  339. package/dist/navigation-instruments/compass-sector/compass-sector.css.js.map +1 -1
  340. package/dist/navigation-instruments/depth-indicator/depth-indicator.css.js +3 -4
  341. package/dist/navigation-instruments/depth-indicator/depth-indicator.css.js.map +1 -1
  342. package/dist/navigation-instruments/gauge-bar-indicator/gauge-bar-indicator.css.js +3 -4
  343. package/dist/navigation-instruments/gauge-bar-indicator/gauge-bar-indicator.css.js.map +1 -1
  344. package/dist/navigation-instruments/gauge-radial/gauge-radial.css.js +3 -4
  345. package/dist/navigation-instruments/gauge-radial/gauge-radial.css.js.map +1 -1
  346. package/dist/navigation-instruments/gauge-radial-indicator/gauge-radial-indicator.css.js +3 -4
  347. package/dist/navigation-instruments/gauge-radial-indicator/gauge-radial-indicator.css.js.map +1 -1
  348. package/dist/navigation-instruments/gauge-trend-indicator/gauge-trend-indicator.css.js +3 -4
  349. package/dist/navigation-instruments/gauge-trend-indicator/gauge-trend-indicator.css.js.map +1 -1
  350. package/dist/navigation-instruments/graph-mini/graph-mini.css.js +3 -4
  351. package/dist/navigation-instruments/graph-mini/graph-mini.css.js.map +1 -1
  352. package/dist/navigation-instruments/heading-indicator/heading-indicator.css.js +3 -4
  353. package/dist/navigation-instruments/heading-indicator/heading-indicator.css.js.map +1 -1
  354. package/dist/navigation-instruments/indicator-graph/indicator-graph.css.js +3 -4
  355. package/dist/navigation-instruments/indicator-graph/indicator-graph.css.js.map +1 -1
  356. package/dist/navigation-instruments/instrument-field/instrument-field.css.js +3 -4
  357. package/dist/navigation-instruments/instrument-field/instrument-field.css.js.map +1 -1
  358. package/dist/navigation-instruments/main-engine/main-engine.css.js +3 -4
  359. package/dist/navigation-instruments/main-engine/main-engine.css.js.map +1 -1
  360. package/dist/navigation-instruments/readout/instrument-readout.css.js +3 -4
  361. package/dist/navigation-instruments/readout/instrument-readout.css.js.map +1 -1
  362. package/dist/navigation-instruments/readout/readout.css.js +3 -4
  363. package/dist/navigation-instruments/readout/readout.css.js.map +1 -1
  364. package/dist/navigation-instruments/readout-advice/readout-advice.css.js +9 -10
  365. package/dist/navigation-instruments/readout-advice/readout-advice.css.js.map +1 -1
  366. package/dist/navigation-instruments/readout-list-item/readout-list-item.css.js +3 -4
  367. package/dist/navigation-instruments/readout-list-item/readout-list-item.css.js.map +1 -1
  368. package/dist/navigation-instruments/readout-setpoint/readout-setpoint.css.js +3 -4
  369. package/dist/navigation-instruments/readout-setpoint/readout-setpoint.css.js.map +1 -1
  370. package/dist/navigation-instruments/rot-indicator/rot-indicator.css.js +3 -4
  371. package/dist/navigation-instruments/rot-indicator/rot-indicator.css.js.map +1 -1
  372. package/dist/navigation-instruments/rudder-indicator/rudder-indicator.css.js +3 -4
  373. package/dist/navigation-instruments/rudder-indicator/rudder-indicator.css.js.map +1 -1
  374. package/dist/navigation-instruments/speed-arrows/speed-arrows.css.js +3 -4
  375. package/dist/navigation-instruments/speed-arrows/speed-arrows.css.js.map +1 -1
  376. package/dist/navigation-instruments/speed-indicator/speed-indicator.css.js +3 -4
  377. package/dist/navigation-instruments/speed-indicator/speed-indicator.css.js.map +1 -1
  378. package/dist/navigation-instruments/velocity-projection-plot/velocity-projection-plot.css.js +3 -4
  379. package/dist/navigation-instruments/velocity-projection-plot/velocity-projection-plot.css.js.map +1 -1
  380. package/dist/navigation-instruments/watch/watch.css.js +3 -4
  381. package/dist/navigation-instruments/watch/watch.css.js.map +1 -1
  382. package/dist/navigation-instruments/watch-flat/watch-flat.css.js +3 -4
  383. package/dist/navigation-instruments/watch-flat/watch-flat.css.js.map +1 -1
  384. package/dist/navigation-instruments/wind/wind.css.js +3 -4
  385. package/dist/navigation-instruments/wind/wind.css.js.map +1 -1
  386. package/dist/navigation-instruments/wind-propulsion/wind-propulsion.css.js +3 -4
  387. package/dist/navigation-instruments/wind-propulsion/wind-propulsion.css.js.map +1 -1
  388. package/dist/openbridge.css +117 -118
  389. package/dist/pages/alert-detail-page/alert-detail-page.css.js +3 -4
  390. package/dist/pages/alert-detail-page/alert-detail-page.css.js.map +1 -1
  391. package/dist/pages/alert-list-page-small/alert-list-page-small.css.js +3 -4
  392. package/dist/pages/alert-list-page-small/alert-list-page-small.css.js.map +1 -1
  393. package/package.json +3 -3
  394. package/dist/components/input/input.d.ts +0 -1
  395. package/dist/components/input/input.d.ts.map +0 -1
  396. package/dist/components/input/input.js +0 -2
  397. package/dist/components/input/input.js.map +0 -1
  398. package/dist/vite-env.d.js +0 -2
  399. package/dist/vite-env.d.js.map +0 -1
package/dist/components/alert-button/alert-button.css.js CHANGED
@@ -1,8 +1,7 @@
1
1
  import { css } from "lit";
2
- const compentStyle = css`
3
- * {
4
- -webkit-tap-highlight-color: transparent;
5
- }
2
+ const compentStyle = css`* {
3
+ -webkit-tap-highlight-color: transparent;
4
+ }
6
5
 
7
6
  * {
8
7
  box-sizing: border-box;
@@ -58,139 +57,139 @@ button {
58
57
  }
59
58
 
60
59
  :is(.type-flat .alert-button) {
61
- cursor: pointer;
60
+ cursor: pointer;
62
61
  }
63
62
 
64
63
  :is(.type-flat .alert-button):focus {
65
- outline: none;
64
+ outline: none;
66
65
  }
67
66
 
68
67
  :is(.type-flat .alert-button) .visible-wrapper {
69
- border-color: var(--flat-enabled-border-color);
70
- background-color: var(--flat-enabled-background-color);
71
- border-width: 1px;
72
- border-style: solid;
73
- cursor: pointer;
74
- --base-border-color: var(--flat-enabled-border-color);
75
- --base-background-color: var(--flat-enabled-background-color);
68
+ border-color: var(--flat-enabled-border-color);
69
+ background-color: var(--flat-enabled-background-color);
70
+ border-width: 1px;
71
+ border-style: solid;
72
+ cursor: pointer;
73
+ --base-border-color: var(--flat-enabled-border-color);
74
+ --base-background-color: var(--flat-enabled-background-color);
76
75
  }
77
76
 
78
77
  .activated:is(.type-flat .alert-button) .visible-wrapper {
79
- border-color: var(--flat-activated-border-color);
80
- background-color: var(--flat-activated-background-color);
81
- --base-border-color: var(--flat-activated-border-color);
82
- --base-background-color: var(--flat-activated-background-color);
78
+ border-color: var(--flat-activated-border-color);
79
+ background-color: var(--flat-activated-background-color);
80
+ --base-border-color: var(--flat-activated-border-color);
81
+ --base-background-color: var(--flat-activated-background-color);
83
82
  }
84
83
 
85
84
  @media (hover:hover) {
86
85
 
87
86
  :is(.type-flat .alert-button):hover .visible-wrapper {
88
- border-color: color-mix(in srgb, var(--flat-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
89
- background-color: color-mix(in srgb, var(--flat-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
90
- }
87
+ border-color: color-mix(in srgb, var(--flat-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
88
+ background-color: color-mix(in srgb, var(--flat-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
89
+ }
91
90
  }
92
91
 
93
92
  :is(.type-flat .alert-button):active .visible-wrapper {
94
- border-color: var(--flat-pressed-border-color);
95
- background-color: var(--flat-pressed-background-color);
93
+ border-color: var(--flat-pressed-border-color);
94
+ background-color: var(--flat-pressed-background-color);
96
95
  }
97
96
 
98
97
  :is(.type-flat .alert-button):focus-visible .visible-wrapper {
99
- outline-color: var(--border-focus-color);
100
- outline-width: var(--global-size-spacing-border-weight-focusframe);
101
- outline-style: solid;
102
- border-color: var(--container-global-color);
103
- z-index: 1;
98
+ outline-color: var(--border-focus-color);
99
+ outline-width: var(--global-size-spacing-border-weight-focusframe);
100
+ outline-style: solid;
101
+ border-color: var(--container-global-color);
102
+ z-index: 1;
104
103
  }
105
104
 
106
105
  :is(.type-flat .alert-button):disabled .visible-wrapper {
107
- border-color: var(--flat-disabled-border-color);
108
- background-color: var(--flat-disabled-background-color);
109
- cursor: not-allowed;
110
- color: var(--on-flat-disabled-color) !important;
106
+ border-color: var(--flat-disabled-border-color);
107
+ background-color: var(--flat-disabled-background-color);
108
+ cursor: not-allowed;
109
+ color: var(--on-flat-disabled-color) !important;
111
110
  }
112
111
 
113
112
  .disabled:is(.type-flat .alert-button) .visible-wrapper {
114
- border-color: var(--flat-disabled-border-color);
115
- background-color: var(--flat-disabled-background-color);
116
- cursor: not-allowed;
117
- color: var(--on-flat-disabled-color) !important;
113
+ border-color: var(--flat-disabled-border-color);
114
+ background-color: var(--flat-disabled-background-color);
115
+ cursor: not-allowed;
116
+ color: var(--on-flat-disabled-color) !important;
118
117
  }
119
118
 
120
119
  :is(.type-flat .alert-button):disabled {
121
- cursor: not-allowed;
120
+ cursor: not-allowed;
122
121
  }
123
122
 
124
123
  .disabled:is(.type-flat .alert-button) {
125
- cursor: not-allowed;
124
+ cursor: not-allowed;
126
125
  }
127
126
 
128
127
  :is(.type-flat .alert-button) {
129
- cursor: pointer;
128
+ cursor: pointer;
130
129
  }
131
130
 
132
131
  :is(.type-flat .alert-button):focus {
133
- outline: none;
132
+ outline: none;
134
133
  }
135
134
 
136
135
  :is(.type-flat .alert-button) .blink {
137
- border-color: var(--flat-enabled-border-color);
138
- background-color: var(--flat-enabled-background-color);
139
- border-width: 1px;
140
- border-style: solid;
141
- cursor: pointer;
142
- --base-border-color: var(--flat-enabled-border-color);
143
- --base-background-color: var(--flat-enabled-background-color);
136
+ border-color: var(--flat-enabled-border-color);
137
+ background-color: var(--flat-enabled-background-color);
138
+ border-width: 1px;
139
+ border-style: solid;
140
+ cursor: pointer;
141
+ --base-border-color: var(--flat-enabled-border-color);
142
+ --base-background-color: var(--flat-enabled-background-color);
144
143
  }
145
144
 
146
145
  .activated:is(.type-flat .alert-button) .blink {
147
- border-color: var(--flat-activated-border-color);
148
- background-color: var(--flat-activated-background-color);
149
- --base-border-color: var(--flat-activated-border-color);
150
- --base-background-color: var(--flat-activated-background-color);
146
+ border-color: var(--flat-activated-border-color);
147
+ background-color: var(--flat-activated-background-color);
148
+ --base-border-color: var(--flat-activated-border-color);
149
+ --base-background-color: var(--flat-activated-background-color);
151
150
  }
152
151
 
153
152
  @media (hover:hover) {
154
153
 
155
154
  :is(.type-flat .alert-button):hover .blink {
156
- border-color: color-mix(in srgb, var(--flat-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
157
- background-color: color-mix(in srgb, var(--flat-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
158
- }
155
+ border-color: color-mix(in srgb, var(--flat-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
156
+ background-color: color-mix(in srgb, var(--flat-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
157
+ }
159
158
  }
160
159
 
161
160
  :is(.type-flat .alert-button):active .blink {
162
- border-color: var(--flat-pressed-border-color);
163
- background-color: var(--flat-pressed-background-color);
161
+ border-color: var(--flat-pressed-border-color);
162
+ background-color: var(--flat-pressed-background-color);
164
163
  }
165
164
 
166
165
  :is(.type-flat .alert-button):focus-visible .blink {
167
- outline-color: var(--border-focus-color);
168
- outline-width: var(--global-size-spacing-border-weight-focusframe);
169
- outline-style: solid;
170
- border-color: var(--container-global-color);
171
- z-index: 1;
166
+ outline-color: var(--border-focus-color);
167
+ outline-width: var(--global-size-spacing-border-weight-focusframe);
168
+ outline-style: solid;
169
+ border-color: var(--container-global-color);
170
+ z-index: 1;
172
171
  }
173
172
 
174
173
  :is(.type-flat .alert-button):disabled .blink {
175
- border-color: var(--flat-disabled-border-color);
176
- background-color: var(--flat-disabled-background-color);
177
- cursor: not-allowed;
178
- color: var(--on-flat-disabled-color) !important;
174
+ border-color: var(--flat-disabled-border-color);
175
+ background-color: var(--flat-disabled-background-color);
176
+ cursor: not-allowed;
177
+ color: var(--on-flat-disabled-color) !important;
179
178
  }
180
179
 
181
180
  .disabled:is(.type-flat .alert-button) .blink {
182
- border-color: var(--flat-disabled-border-color);
183
- background-color: var(--flat-disabled-background-color);
184
- cursor: not-allowed;
185
- color: var(--on-flat-disabled-color) !important;
181
+ border-color: var(--flat-disabled-border-color);
182
+ background-color: var(--flat-disabled-background-color);
183
+ cursor: not-allowed;
184
+ color: var(--on-flat-disabled-color) !important;
186
185
  }
187
186
 
188
187
  :is(.type-flat .alert-button):disabled {
189
- cursor: not-allowed;
188
+ cursor: not-allowed;
190
189
  }
191
190
 
192
191
  .disabled:is(.type-flat .alert-button) {
193
- cursor: not-allowed;
192
+ cursor: not-allowed;
194
193
  }
195
194
 
196
195
  .type-normal .alert-button .visible-wrapper,.type-enhanced .alert-button .visible-wrapper {
@@ -198,275 +197,275 @@ button {
198
197
  }
199
198
 
200
199
  :is(.type-normal .alert-button) {
201
- cursor: pointer;
200
+ cursor: pointer;
202
201
  }
203
202
 
204
203
  :is(.type-normal .alert-button):focus {
205
- outline: none;
204
+ outline: none;
206
205
  }
207
206
 
208
207
  :is(.type-normal .alert-button) .visible-wrapper {
209
- border-color: var(--normal-enabled-border-color);
210
- background-color: var(--normal-enabled-background-color);
211
- border-width: 1px;
212
- border-style: solid;
213
- cursor: pointer;
214
- --base-border-color: var(--normal-enabled-border-color);
215
- --base-background-color: var(--normal-enabled-background-color);
208
+ border-color: var(--normal-enabled-border-color);
209
+ background-color: var(--normal-enabled-background-color);
210
+ border-width: 1px;
211
+ border-style: solid;
212
+ cursor: pointer;
213
+ --base-border-color: var(--normal-enabled-border-color);
214
+ --base-background-color: var(--normal-enabled-background-color);
216
215
  }
217
216
 
218
217
  .activated:is(.type-normal .alert-button) .visible-wrapper {
219
- border-color: var(--normal-activated-border-color);
220
- background-color: var(--normal-activated-background-color);
221
- --base-border-color: var(--normal-activated-border-color);
222
- --base-background-color: var(--normal-activated-background-color);
218
+ border-color: var(--normal-activated-border-color);
219
+ background-color: var(--normal-activated-background-color);
220
+ --base-border-color: var(--normal-activated-border-color);
221
+ --base-background-color: var(--normal-activated-background-color);
223
222
  }
224
223
 
225
224
  @media (hover:hover) {
226
225
 
227
226
  :is(.type-normal .alert-button):hover .visible-wrapper {
228
- border-color: color-mix(in srgb, var(--normal-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
229
- background-color: color-mix(in srgb, var(--normal-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
230
- }
227
+ border-color: color-mix(in srgb, var(--normal-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
228
+ background-color: color-mix(in srgb, var(--normal-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
229
+ }
231
230
  }
232
231
 
233
232
  :is(.type-normal .alert-button):active .visible-wrapper {
234
- border-color: var(--normal-pressed-border-color);
235
- background-color: var(--normal-pressed-background-color);
233
+ border-color: var(--normal-pressed-border-color);
234
+ background-color: var(--normal-pressed-background-color);
236
235
  }
237
236
 
238
237
  :is(.type-normal .alert-button):focus-visible .visible-wrapper {
239
- outline-color: var(--border-focus-color);
240
- outline-width: var(--global-size-spacing-border-weight-focusframe);
241
- outline-style: solid;
242
- border-color: var(--container-global-color);
243
- z-index: 1;
238
+ outline-color: var(--border-focus-color);
239
+ outline-width: var(--global-size-spacing-border-weight-focusframe);
240
+ outline-style: solid;
241
+ border-color: var(--container-global-color);
242
+ z-index: 1;
244
243
  }
245
244
 
246
245
  :is(.type-normal .alert-button):disabled .visible-wrapper {
247
- border-color: var(--normal-disabled-border-color);
248
- background-color: var(--normal-disabled-background-color);
249
- cursor: not-allowed;
250
- color: var(--on-normal-disabled-color) !important;
246
+ border-color: var(--normal-disabled-border-color);
247
+ background-color: var(--normal-disabled-background-color);
248
+ cursor: not-allowed;
249
+ color: var(--on-normal-disabled-color) !important;
251
250
  }
252
251
 
253
252
  .disabled:is(.type-normal .alert-button) .visible-wrapper {
254
- border-color: var(--normal-disabled-border-color);
255
- background-color: var(--normal-disabled-background-color);
256
- cursor: not-allowed;
257
- color: var(--on-normal-disabled-color) !important;
253
+ border-color: var(--normal-disabled-border-color);
254
+ background-color: var(--normal-disabled-background-color);
255
+ cursor: not-allowed;
256
+ color: var(--on-normal-disabled-color) !important;
258
257
  }
259
258
 
260
259
  :is(.type-normal .alert-button):disabled {
261
- cursor: not-allowed;
260
+ cursor: not-allowed;
262
261
  }
263
262
 
264
263
  .disabled:is(.type-normal .alert-button) {
265
- cursor: not-allowed;
264
+ cursor: not-allowed;
266
265
  }
267
266
 
268
267
  :is(.type-normal .alert-button) {
269
- cursor: pointer;
268
+ cursor: pointer;
270
269
  }
271
270
 
272
271
  :is(.type-normal .alert-button):focus {
273
- outline: none;
272
+ outline: none;
274
273
  }
275
274
 
276
275
  :is(.type-normal .alert-button) .blink {
277
- border-color: var(--normal-enabled-border-color);
278
- background-color: var(--normal-enabled-background-color);
279
- border-width: 1px;
280
- border-style: solid;
281
- cursor: pointer;
282
- --base-border-color: var(--normal-enabled-border-color);
283
- --base-background-color: var(--normal-enabled-background-color);
276
+ border-color: var(--normal-enabled-border-color);
277
+ background-color: var(--normal-enabled-background-color);
278
+ border-width: 1px;
279
+ border-style: solid;
280
+ cursor: pointer;
281
+ --base-border-color: var(--normal-enabled-border-color);
282
+ --base-background-color: var(--normal-enabled-background-color);
284
283
  }
285
284
 
286
285
  .activated:is(.type-normal .alert-button) .blink {
287
- border-color: var(--normal-activated-border-color);
288
- background-color: var(--normal-activated-background-color);
289
- --base-border-color: var(--normal-activated-border-color);
290
- --base-background-color: var(--normal-activated-background-color);
286
+ border-color: var(--normal-activated-border-color);
287
+ background-color: var(--normal-activated-background-color);
288
+ --base-border-color: var(--normal-activated-border-color);
289
+ --base-background-color: var(--normal-activated-background-color);
291
290
  }
292
291
 
293
292
  @media (hover:hover) {
294
293
 
295
294
  :is(.type-normal .alert-button):hover .blink {
296
- border-color: color-mix(in srgb, var(--normal-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
297
- background-color: color-mix(in srgb, var(--normal-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
298
- }
295
+ border-color: color-mix(in srgb, var(--normal-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
296
+ background-color: color-mix(in srgb, var(--normal-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
297
+ }
299
298
  }
300
299
 
301
300
  :is(.type-normal .alert-button):active .blink {
302
- border-color: var(--normal-pressed-border-color);
303
- background-color: var(--normal-pressed-background-color);
301
+ border-color: var(--normal-pressed-border-color);
302
+ background-color: var(--normal-pressed-background-color);
304
303
  }
305
304
 
306
305
  :is(.type-normal .alert-button):focus-visible .blink {
307
- outline-color: var(--border-focus-color);
308
- outline-width: var(--global-size-spacing-border-weight-focusframe);
309
- outline-style: solid;
310
- border-color: var(--container-global-color);
311
- z-index: 1;
306
+ outline-color: var(--border-focus-color);
307
+ outline-width: var(--global-size-spacing-border-weight-focusframe);
308
+ outline-style: solid;
309
+ border-color: var(--container-global-color);
310
+ z-index: 1;
312
311
  }
313
312
 
314
313
  :is(.type-normal .alert-button):disabled .blink {
315
- border-color: var(--normal-disabled-border-color);
316
- background-color: var(--normal-disabled-background-color);
317
- cursor: not-allowed;
318
- color: var(--on-normal-disabled-color) !important;
314
+ border-color: var(--normal-disabled-border-color);
315
+ background-color: var(--normal-disabled-background-color);
316
+ cursor: not-allowed;
317
+ color: var(--on-normal-disabled-color) !important;
319
318
  }
320
319
 
321
320
  .disabled:is(.type-normal .alert-button) .blink {
322
- border-color: var(--normal-disabled-border-color);
323
- background-color: var(--normal-disabled-background-color);
324
- cursor: not-allowed;
325
- color: var(--on-normal-disabled-color) !important;
321
+ border-color: var(--normal-disabled-border-color);
322
+ background-color: var(--normal-disabled-background-color);
323
+ cursor: not-allowed;
324
+ color: var(--on-normal-disabled-color) !important;
326
325
  }
327
326
 
328
327
  :is(.type-normal .alert-button):disabled {
329
- cursor: not-allowed;
328
+ cursor: not-allowed;
330
329
  }
331
330
 
332
331
  .disabled:is(.type-normal .alert-button) {
333
- cursor: not-allowed;
332
+ cursor: not-allowed;
334
333
  }
335
334
 
336
335
  :is(.type-enhanced.alert-type-alarm .alert-button) {
337
- cursor: pointer;
336
+ cursor: pointer;
338
337
  }
339
338
 
340
339
  :is(.type-enhanced.alert-type-alarm .alert-button):focus {
341
- outline: none;
340
+ outline: none;
342
341
  }
343
342
 
344
343
  :is(.type-enhanced.alert-type-alarm .alert-button) .blink {
345
- border-color: var(--normal-enabled-border-color);
346
- background-color: var(--normal-enabled-background-color);
347
- border-width: 1px;
348
- border-style: solid;
349
- cursor: pointer;
350
- --base-border-color: var(--normal-enabled-border-color);
351
- --base-background-color: var(--normal-enabled-background-color);
344
+ border-color: var(--normal-enabled-border-color);
345
+ background-color: var(--normal-enabled-background-color);
346
+ border-width: 1px;
347
+ border-style: solid;
348
+ cursor: pointer;
349
+ --base-border-color: var(--normal-enabled-border-color);
350
+ --base-background-color: var(--normal-enabled-background-color);
352
351
  }
353
352
 
354
353
  .activated:is(.type-enhanced.alert-type-alarm .alert-button) .blink {
355
- border-color: var(--normal-activated-border-color);
356
- background-color: var(--normal-activated-background-color);
357
- --base-border-color: var(--normal-activated-border-color);
358
- --base-background-color: var(--normal-activated-background-color);
354
+ border-color: var(--normal-activated-border-color);
355
+ background-color: var(--normal-activated-background-color);
356
+ --base-border-color: var(--normal-activated-border-color);
357
+ --base-background-color: var(--normal-activated-background-color);
359
358
  }
360
359
 
361
360
  @media (hover:hover) {
362
361
 
363
362
  :is(.type-enhanced.alert-type-alarm .alert-button):hover .blink {
364
- border-color: color-mix(in srgb, var(--normal-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
365
- background-color: color-mix(in srgb, var(--normal-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
366
- }
363
+ border-color: color-mix(in srgb, var(--normal-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
364
+ background-color: color-mix(in srgb, var(--normal-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
365
+ }
367
366
  }
368
367
 
369
368
  :is(.type-enhanced.alert-type-alarm .alert-button):active .blink {
370
- border-color: var(--normal-pressed-border-color);
371
- background-color: var(--normal-pressed-background-color);
369
+ border-color: var(--normal-pressed-border-color);
370
+ background-color: var(--normal-pressed-background-color);
372
371
  }
373
372
 
374
373
  :is(.type-enhanced.alert-type-alarm .alert-button):focus-visible .blink {
375
- outline-color: var(--border-focus-color);
376
- outline-width: var(--global-size-spacing-border-weight-focusframe);
377
- outline-style: solid;
378
- border-color: var(--container-global-color);
379
- z-index: 1;
374
+ outline-color: var(--border-focus-color);
375
+ outline-width: var(--global-size-spacing-border-weight-focusframe);
376
+ outline-style: solid;
377
+ border-color: var(--container-global-color);
378
+ z-index: 1;
380
379
  }
381
380
 
382
381
  :is(.type-enhanced.alert-type-alarm .alert-button):disabled .blink {
383
- border-color: var(--normal-disabled-border-color);
384
- background-color: var(--normal-disabled-background-color);
385
- cursor: not-allowed;
386
- color: var(--on-normal-disabled-color) !important;
382
+ border-color: var(--normal-disabled-border-color);
383
+ background-color: var(--normal-disabled-background-color);
384
+ cursor: not-allowed;
385
+ color: var(--on-normal-disabled-color) !important;
387
386
  }
388
387
 
389
388
  .disabled:is(.type-enhanced.alert-type-alarm .alert-button) .blink {
390
- border-color: var(--normal-disabled-border-color);
391
- background-color: var(--normal-disabled-background-color);
392
- cursor: not-allowed;
393
- color: var(--on-normal-disabled-color) !important;
389
+ border-color: var(--normal-disabled-border-color);
390
+ background-color: var(--normal-disabled-background-color);
391
+ cursor: not-allowed;
392
+ color: var(--on-normal-disabled-color) !important;
394
393
  }
395
394
 
396
395
  :is(.type-enhanced.alert-type-alarm .alert-button):disabled {
397
- cursor: not-allowed;
396
+ cursor: not-allowed;
398
397
  }
399
398
 
400
399
  .disabled:is(.type-enhanced.alert-type-alarm .alert-button) {
401
- cursor: not-allowed;
400
+ cursor: not-allowed;
402
401
  }
403
402
 
404
403
  :is(.type-enhanced.alert-type-alarm .alert-button) {
405
- cursor: pointer;
404
+ cursor: pointer;
406
405
  }
407
406
 
408
407
  :is(.type-enhanced.alert-type-alarm .alert-button):focus {
409
- outline: none;
408
+ outline: none;
410
409
  }
411
410
 
412
411
  :is(.type-enhanced.alert-type-alarm .alert-button) .visible-wrapper {
413
- border-color: var(--alarm-enabled-border-color);
414
- background-color: var(--alarm-enabled-background-color);
415
- border-width: 1px;
416
- border-style: solid;
417
- cursor: pointer;
418
- --base-border-color: var(--alarm-enabled-border-color);
419
- --base-background-color: var(--alarm-enabled-background-color);
412
+ border-color: var(--alarm-enabled-border-color);
413
+ background-color: var(--alarm-enabled-background-color);
414
+ border-width: 1px;
415
+ border-style: solid;
416
+ cursor: pointer;
417
+ --base-border-color: var(--alarm-enabled-border-color);
418
+ --base-background-color: var(--alarm-enabled-background-color);
420
419
  }
421
420
 
422
421
  .activated:is(.type-enhanced.alert-type-alarm .alert-button) .visible-wrapper {
423
- border-color: var(--alarm-activated-border-color);
424
- background-color: var(--alarm-activated-background-color);
425
- --base-border-color: var(--alarm-activated-border-color);
426
- --base-background-color: var(--alarm-activated-background-color);
422
+ border-color: var(--alarm-activated-border-color);
423
+ background-color: var(--alarm-activated-background-color);
424
+ --base-border-color: var(--alarm-activated-border-color);
425
+ --base-background-color: var(--alarm-activated-background-color);
427
426
  }
428
427
 
429
428
  @media (hover:hover) {
430
429
 
431
430
  :is(.type-enhanced.alert-type-alarm .alert-button):hover .visible-wrapper {
432
- border-color: color-mix(in srgb, var(--alarm-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
433
- background-color: color-mix(in srgb, var(--alarm-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
434
- }
431
+ border-color: color-mix(in srgb, var(--alarm-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
432
+ background-color: color-mix(in srgb, var(--alarm-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
433
+ }
435
434
  }
436
435
 
437
436
  :is(.type-enhanced.alert-type-alarm .alert-button):active .visible-wrapper {
438
- border-color: var(--alarm-pressed-border-color);
439
- background-color: var(--alarm-pressed-background-color);
437
+ border-color: var(--alarm-pressed-border-color);
438
+ background-color: var(--alarm-pressed-background-color);
440
439
  }
441
440
 
442
441
  :is(.type-enhanced.alert-type-alarm .alert-button):focus-visible .visible-wrapper {
443
- outline-color: var(--border-focus-color);
444
- outline-width: var(--global-size-spacing-border-weight-focusframe);
445
- outline-style: solid;
446
- border-color: var(--container-global-color);
447
- z-index: 1;
442
+ outline-color: var(--border-focus-color);
443
+ outline-width: var(--global-size-spacing-border-weight-focusframe);
444
+ outline-style: solid;
445
+ border-color: var(--container-global-color);
446
+ z-index: 1;
448
447
  }
449
448
 
450
449
  :is(.type-enhanced.alert-type-alarm .alert-button):disabled .visible-wrapper {
451
- border-color: var(--alarm-disabled-border-color);
452
- background-color: var(--alarm-disabled-background-color);
453
- cursor: not-allowed;
454
- color: var(--on-alarm-disabled-color) !important;
450
+ border-color: var(--alarm-disabled-border-color);
451
+ background-color: var(--alarm-disabled-background-color);
452
+ cursor: not-allowed;
453
+ color: var(--on-alarm-disabled-color) !important;
455
454
  }
456
455
 
457
456
  .disabled:is(.type-enhanced.alert-type-alarm .alert-button) .visible-wrapper {
458
- border-color: var(--alarm-disabled-border-color);
459
- background-color: var(--alarm-disabled-background-color);
460
- cursor: not-allowed;
461
- color: var(--on-alarm-disabled-color) !important;
457
+ border-color: var(--alarm-disabled-border-color);
458
+ background-color: var(--alarm-disabled-background-color);
459
+ cursor: not-allowed;
460
+ color: var(--on-alarm-disabled-color) !important;
462
461
  }
463
462
 
464
463
  :is(.type-enhanced.alert-type-alarm .alert-button):disabled {
465
- cursor: not-allowed;
464
+ cursor: not-allowed;
466
465
  }
467
466
 
468
467
  .disabled:is(.type-enhanced.alert-type-alarm .alert-button) {
469
- cursor: not-allowed;
468
+ cursor: not-allowed;
470
469
  }
471
470
 
472
471
  :is(.type-enhanced.alert-type-alarm .alert-button) .visible-wrapper {
@@ -474,139 +473,139 @@ button {
474
473
  }
475
474
 
476
475
  :is(.type-enhanced.alert-type-warning .alert-button) {
477
- cursor: pointer;
476
+ cursor: pointer;
478
477
  }
479
478
 
480
479
  :is(.type-enhanced.alert-type-warning .alert-button):focus {
481
- outline: none;
480
+ outline: none;
482
481
  }
483
482
 
484
483
  :is(.type-enhanced.alert-type-warning .alert-button) .blink {
485
- border-color: var(--normal-enabled-border-color);
486
- background-color: var(--normal-enabled-background-color);
487
- border-width: 1px;
488
- border-style: solid;
489
- cursor: pointer;
490
- --base-border-color: var(--normal-enabled-border-color);
491
- --base-background-color: var(--normal-enabled-background-color);
484
+ border-color: var(--normal-enabled-border-color);
485
+ background-color: var(--normal-enabled-background-color);
486
+ border-width: 1px;
487
+ border-style: solid;
488
+ cursor: pointer;
489
+ --base-border-color: var(--normal-enabled-border-color);
490
+ --base-background-color: var(--normal-enabled-background-color);
492
491
  }
493
492
 
494
493
  .activated:is(.type-enhanced.alert-type-warning .alert-button) .blink {
495
- border-color: var(--normal-activated-border-color);
496
- background-color: var(--normal-activated-background-color);
497
- --base-border-color: var(--normal-activated-border-color);
498
- --base-background-color: var(--normal-activated-background-color);
494
+ border-color: var(--normal-activated-border-color);
495
+ background-color: var(--normal-activated-background-color);
496
+ --base-border-color: var(--normal-activated-border-color);
497
+ --base-background-color: var(--normal-activated-background-color);
499
498
  }
500
499
 
501
500
  @media (hover:hover) {
502
501
 
503
502
  :is(.type-enhanced.alert-type-warning .alert-button):hover .blink {
504
- border-color: color-mix(in srgb, var(--normal-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
505
- background-color: color-mix(in srgb, var(--normal-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
506
- }
503
+ border-color: color-mix(in srgb, var(--normal-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
504
+ background-color: color-mix(in srgb, var(--normal-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
505
+ }
507
506
  }
508
507
 
509
508
  :is(.type-enhanced.alert-type-warning .alert-button):active .blink {
510
- border-color: var(--normal-pressed-border-color);
511
- background-color: var(--normal-pressed-background-color);
509
+ border-color: var(--normal-pressed-border-color);
510
+ background-color: var(--normal-pressed-background-color);
512
511
  }
513
512
 
514
513
  :is(.type-enhanced.alert-type-warning .alert-button):focus-visible .blink {
515
- outline-color: var(--border-focus-color);
516
- outline-width: var(--global-size-spacing-border-weight-focusframe);
517
- outline-style: solid;
518
- border-color: var(--container-global-color);
519
- z-index: 1;
514
+ outline-color: var(--border-focus-color);
515
+ outline-width: var(--global-size-spacing-border-weight-focusframe);
516
+ outline-style: solid;
517
+ border-color: var(--container-global-color);
518
+ z-index: 1;
520
519
  }
521
520
 
522
521
  :is(.type-enhanced.alert-type-warning .alert-button):disabled .blink {
523
- border-color: var(--normal-disabled-border-color);
524
- background-color: var(--normal-disabled-background-color);
525
- cursor: not-allowed;
526
- color: var(--on-normal-disabled-color) !important;
522
+ border-color: var(--normal-disabled-border-color);
523
+ background-color: var(--normal-disabled-background-color);
524
+ cursor: not-allowed;
525
+ color: var(--on-normal-disabled-color) !important;
527
526
  }
528
527
 
529
528
  .disabled:is(.type-enhanced.alert-type-warning .alert-button) .blink {
530
- border-color: var(--normal-disabled-border-color);
531
- background-color: var(--normal-disabled-background-color);
532
- cursor: not-allowed;
533
- color: var(--on-normal-disabled-color) !important;
529
+ border-color: var(--normal-disabled-border-color);
530
+ background-color: var(--normal-disabled-background-color);
531
+ cursor: not-allowed;
532
+ color: var(--on-normal-disabled-color) !important;
534
533
  }
535
534
 
536
535
  :is(.type-enhanced.alert-type-warning .alert-button):disabled {
537
- cursor: not-allowed;
536
+ cursor: not-allowed;
538
537
  }
539
538
 
540
539
  .disabled:is(.type-enhanced.alert-type-warning .alert-button) {
541
- cursor: not-allowed;
540
+ cursor: not-allowed;
542
541
  }
543
542
 
544
543
  :is(.type-enhanced.alert-type-warning .alert-button) {
545
- cursor: pointer;
544
+ cursor: pointer;
546
545
  }
547
546
 
548
547
  :is(.type-enhanced.alert-type-warning .alert-button):focus {
549
- outline: none;
548
+ outline: none;
550
549
  }
551
550
 
552
551
  :is(.type-enhanced.alert-type-warning .alert-button) .visible-wrapper {
553
- border-color: var(--warning-enabled-border-color);
554
- background-color: var(--warning-enabled-background-color);
555
- border-width: 1px;
556
- border-style: solid;
557
- cursor: pointer;
558
- --base-border-color: var(--warning-enabled-border-color);
559
- --base-background-color: var(--warning-enabled-background-color);
552
+ border-color: var(--warning-enabled-border-color);
553
+ background-color: var(--warning-enabled-background-color);
554
+ border-width: 1px;
555
+ border-style: solid;
556
+ cursor: pointer;
557
+ --base-border-color: var(--warning-enabled-border-color);
558
+ --base-background-color: var(--warning-enabled-background-color);
560
559
  }
561
560
 
562
561
  .activated:is(.type-enhanced.alert-type-warning .alert-button) .visible-wrapper {
563
- border-color: var(--warning-activated-border-color);
564
- background-color: var(--warning-activated-background-color);
565
- --base-border-color: var(--warning-activated-border-color);
566
- --base-background-color: var(--warning-activated-background-color);
562
+ border-color: var(--warning-activated-border-color);
563
+ background-color: var(--warning-activated-background-color);
564
+ --base-border-color: var(--warning-activated-border-color);
565
+ --base-background-color: var(--warning-activated-background-color);
567
566
  }
568
567
 
569
568
  @media (hover:hover) {
570
569
 
571
570
  :is(.type-enhanced.alert-type-warning .alert-button):hover .visible-wrapper {
572
- border-color: color-mix(in srgb, var(--warning-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
573
- background-color: color-mix(in srgb, var(--warning-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
574
- }
571
+ border-color: color-mix(in srgb, var(--warning-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
572
+ background-color: color-mix(in srgb, var(--warning-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
573
+ }
575
574
  }
576
575
 
577
576
  :is(.type-enhanced.alert-type-warning .alert-button):active .visible-wrapper {
578
- border-color: var(--warning-pressed-border-color);
579
- background-color: var(--warning-pressed-background-color);
577
+ border-color: var(--warning-pressed-border-color);
578
+ background-color: var(--warning-pressed-background-color);
580
579
  }
581
580
 
582
581
  :is(.type-enhanced.alert-type-warning .alert-button):focus-visible .visible-wrapper {
583
- outline-color: var(--border-focus-color);
584
- outline-width: var(--global-size-spacing-border-weight-focusframe);
585
- outline-style: solid;
586
- border-color: var(--container-global-color);
587
- z-index: 1;
582
+ outline-color: var(--border-focus-color);
583
+ outline-width: var(--global-size-spacing-border-weight-focusframe);
584
+ outline-style: solid;
585
+ border-color: var(--container-global-color);
586
+ z-index: 1;
588
587
  }
589
588
 
590
589
  :is(.type-enhanced.alert-type-warning .alert-button):disabled .visible-wrapper {
591
- border-color: var(--warning-disabled-border-color);
592
- background-color: var(--warning-disabled-background-color);
593
- cursor: not-allowed;
594
- color: var(--on-warning-disabled-color) !important;
590
+ border-color: var(--warning-disabled-border-color);
591
+ background-color: var(--warning-disabled-background-color);
592
+ cursor: not-allowed;
593
+ color: var(--on-warning-disabled-color) !important;
595
594
  }
596
595
 
597
596
  .disabled:is(.type-enhanced.alert-type-warning .alert-button) .visible-wrapper {
598
- border-color: var(--warning-disabled-border-color);
599
- background-color: var(--warning-disabled-background-color);
600
- cursor: not-allowed;
601
- color: var(--on-warning-disabled-color) !important;
597
+ border-color: var(--warning-disabled-border-color);
598
+ background-color: var(--warning-disabled-background-color);
599
+ cursor: not-allowed;
600
+ color: var(--on-warning-disabled-color) !important;
602
601
  }
603
602
 
604
603
  :is(.type-enhanced.alert-type-warning .alert-button):disabled {
605
- cursor: not-allowed;
604
+ cursor: not-allowed;
606
605
  }
607
606
 
608
607
  .disabled:is(.type-enhanced.alert-type-warning .alert-button) {
609
- cursor: not-allowed;
608
+ cursor: not-allowed;
610
609
  }
611
610
 
612
611
  :is(.type-enhanced.alert-type-warning .alert-button) .visible-wrapper {
@@ -614,139 +613,139 @@ button {
614
613
  }
615
614
 
616
615
  :is(.type-enhanced.alert-type-caution .alert-button) {
617
- cursor: pointer;
616
+ cursor: pointer;
618
617
  }
619
618
 
620
619
  :is(.type-enhanced.alert-type-caution .alert-button):focus {
621
- outline: none;
620
+ outline: none;
622
621
  }
623
622
 
624
623
  :is(.type-enhanced.alert-type-caution .alert-button) .blink {
625
- border-color: var(--normal-enabled-border-color);
626
- background-color: var(--normal-enabled-background-color);
627
- border-width: 1px;
628
- border-style: solid;
629
- cursor: pointer;
630
- --base-border-color: var(--normal-enabled-border-color);
631
- --base-background-color: var(--normal-enabled-background-color);
624
+ border-color: var(--normal-enabled-border-color);
625
+ background-color: var(--normal-enabled-background-color);
626
+ border-width: 1px;
627
+ border-style: solid;
628
+ cursor: pointer;
629
+ --base-border-color: var(--normal-enabled-border-color);
630
+ --base-background-color: var(--normal-enabled-background-color);
632
631
  }
633
632
 
634
633
  .activated:is(.type-enhanced.alert-type-caution .alert-button) .blink {
635
- border-color: var(--normal-activated-border-color);
636
- background-color: var(--normal-activated-background-color);
637
- --base-border-color: var(--normal-activated-border-color);
638
- --base-background-color: var(--normal-activated-background-color);
634
+ border-color: var(--normal-activated-border-color);
635
+ background-color: var(--normal-activated-background-color);
636
+ --base-border-color: var(--normal-activated-border-color);
637
+ --base-background-color: var(--normal-activated-background-color);
639
638
  }
640
639
 
641
640
  @media (hover:hover) {
642
641
 
643
642
  :is(.type-enhanced.alert-type-caution .alert-button):hover .blink {
644
- border-color: color-mix(in srgb, var(--normal-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
645
- background-color: color-mix(in srgb, var(--normal-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
646
- }
643
+ border-color: color-mix(in srgb, var(--normal-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
644
+ background-color: color-mix(in srgb, var(--normal-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
645
+ }
647
646
  }
648
647
 
649
648
  :is(.type-enhanced.alert-type-caution .alert-button):active .blink {
650
- border-color: var(--normal-pressed-border-color);
651
- background-color: var(--normal-pressed-background-color);
649
+ border-color: var(--normal-pressed-border-color);
650
+ background-color: var(--normal-pressed-background-color);
652
651
  }
653
652
 
654
653
  :is(.type-enhanced.alert-type-caution .alert-button):focus-visible .blink {
655
- outline-color: var(--border-focus-color);
656
- outline-width: var(--global-size-spacing-border-weight-focusframe);
657
- outline-style: solid;
658
- border-color: var(--container-global-color);
659
- z-index: 1;
654
+ outline-color: var(--border-focus-color);
655
+ outline-width: var(--global-size-spacing-border-weight-focusframe);
656
+ outline-style: solid;
657
+ border-color: var(--container-global-color);
658
+ z-index: 1;
660
659
  }
661
660
 
662
661
  :is(.type-enhanced.alert-type-caution .alert-button):disabled .blink {
663
- border-color: var(--normal-disabled-border-color);
664
- background-color: var(--normal-disabled-background-color);
665
- cursor: not-allowed;
666
- color: var(--on-normal-disabled-color) !important;
662
+ border-color: var(--normal-disabled-border-color);
663
+ background-color: var(--normal-disabled-background-color);
664
+ cursor: not-allowed;
665
+ color: var(--on-normal-disabled-color) !important;
667
666
  }
668
667
 
669
668
  .disabled:is(.type-enhanced.alert-type-caution .alert-button) .blink {
670
- border-color: var(--normal-disabled-border-color);
671
- background-color: var(--normal-disabled-background-color);
672
- cursor: not-allowed;
673
- color: var(--on-normal-disabled-color) !important;
669
+ border-color: var(--normal-disabled-border-color);
670
+ background-color: var(--normal-disabled-background-color);
671
+ cursor: not-allowed;
672
+ color: var(--on-normal-disabled-color) !important;
674
673
  }
675
674
 
676
675
  :is(.type-enhanced.alert-type-caution .alert-button):disabled {
677
- cursor: not-allowed;
676
+ cursor: not-allowed;
678
677
  }
679
678
 
680
679
  .disabled:is(.type-enhanced.alert-type-caution .alert-button) {
681
- cursor: not-allowed;
680
+ cursor: not-allowed;
682
681
  }
683
682
 
684
683
  :is(.type-enhanced.alert-type-caution .alert-button) {
685
- cursor: pointer;
684
+ cursor: pointer;
686
685
  }
687
686
 
688
687
  :is(.type-enhanced.alert-type-caution .alert-button):focus {
689
- outline: none;
688
+ outline: none;
690
689
  }
691
690
 
692
691
  :is(.type-enhanced.alert-type-caution .alert-button) .visible-wrapper {
693
- border-color: var(--caution-enabled-border-color);
694
- background-color: var(--caution-enabled-background-color);
695
- border-width: 1px;
696
- border-style: solid;
697
- cursor: pointer;
698
- --base-border-color: var(--caution-enabled-border-color);
699
- --base-background-color: var(--caution-enabled-background-color);
692
+ border-color: var(--caution-enabled-border-color);
693
+ background-color: var(--caution-enabled-background-color);
694
+ border-width: 1px;
695
+ border-style: solid;
696
+ cursor: pointer;
697
+ --base-border-color: var(--caution-enabled-border-color);
698
+ --base-background-color: var(--caution-enabled-background-color);
700
699
  }
701
700
 
702
701
  .activated:is(.type-enhanced.alert-type-caution .alert-button) .visible-wrapper {
703
- border-color: var(--caution-activated-border-color);
704
- background-color: var(--caution-activated-background-color);
705
- --base-border-color: var(--caution-activated-border-color);
706
- --base-background-color: var(--caution-activated-background-color);
702
+ border-color: var(--caution-activated-border-color);
703
+ background-color: var(--caution-activated-background-color);
704
+ --base-border-color: var(--caution-activated-border-color);
705
+ --base-background-color: var(--caution-activated-background-color);
707
706
  }
708
707
 
709
708
  @media (hover:hover) {
710
709
 
711
710
  :is(.type-enhanced.alert-type-caution .alert-button):hover .visible-wrapper {
712
- border-color: color-mix(in srgb, var(--caution-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
713
- background-color: color-mix(in srgb, var(--caution-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
714
- }
711
+ border-color: color-mix(in srgb, var(--caution-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
712
+ background-color: color-mix(in srgb, var(--caution-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
713
+ }
715
714
  }
716
715
 
717
716
  :is(.type-enhanced.alert-type-caution .alert-button):active .visible-wrapper {
718
- border-color: var(--caution-pressed-border-color);
719
- background-color: var(--caution-pressed-background-color);
717
+ border-color: var(--caution-pressed-border-color);
718
+ background-color: var(--caution-pressed-background-color);
720
719
  }
721
720
 
722
721
  :is(.type-enhanced.alert-type-caution .alert-button):focus-visible .visible-wrapper {
723
- outline-color: var(--border-focus-color);
724
- outline-width: var(--global-size-spacing-border-weight-focusframe);
725
- outline-style: solid;
726
- border-color: var(--container-global-color);
727
- z-index: 1;
722
+ outline-color: var(--border-focus-color);
723
+ outline-width: var(--global-size-spacing-border-weight-focusframe);
724
+ outline-style: solid;
725
+ border-color: var(--container-global-color);
726
+ z-index: 1;
728
727
  }
729
728
 
730
729
  :is(.type-enhanced.alert-type-caution .alert-button):disabled .visible-wrapper {
731
- border-color: var(--caution-disabled-border-color);
732
- background-color: var(--caution-disabled-background-color);
733
- cursor: not-allowed;
734
- color: var(--on-caution-disabled-color) !important;
730
+ border-color: var(--caution-disabled-border-color);
731
+ background-color: var(--caution-disabled-background-color);
732
+ cursor: not-allowed;
733
+ color: var(--on-caution-disabled-color) !important;
735
734
  }
736
735
 
737
736
  .disabled:is(.type-enhanced.alert-type-caution .alert-button) .visible-wrapper {
738
- border-color: var(--caution-disabled-border-color);
739
- background-color: var(--caution-disabled-background-color);
740
- cursor: not-allowed;
741
- color: var(--on-caution-disabled-color) !important;
737
+ border-color: var(--caution-disabled-border-color);
738
+ background-color: var(--caution-disabled-background-color);
739
+ cursor: not-allowed;
740
+ color: var(--on-caution-disabled-color) !important;
742
741
  }
743
742
 
744
743
  :is(.type-enhanced.alert-type-caution .alert-button):disabled {
745
- cursor: not-allowed;
744
+ cursor: not-allowed;
746
745
  }
747
746
 
748
747
  .disabled:is(.type-enhanced.alert-type-caution .alert-button) {
749
- cursor: not-allowed;
748
+ cursor: not-allowed;
750
749
  }
751
750
 
752
751
  :is(.type-enhanced.alert-type-caution .alert-button) .visible-wrapper {
@@ -754,139 +753,139 @@ button {
754
753
  }
755
754
 
756
755
  :is(.type-enhanced.alert-type-level-critical .alert-button) {
757
- cursor: pointer;
756
+ cursor: pointer;
758
757
  }
759
758
 
760
759
  :is(.type-enhanced.alert-type-level-critical .alert-button):focus {
761
- outline: none;
760
+ outline: none;
762
761
  }
763
762
 
764
763
  :is(.type-enhanced.alert-type-level-critical .alert-button) .blink {
765
- border-color: var(--normal-enabled-border-color);
766
- background-color: var(--normal-enabled-background-color);
767
- border-width: 1px;
768
- border-style: solid;
769
- cursor: pointer;
770
- --base-border-color: var(--normal-enabled-border-color);
771
- --base-background-color: var(--normal-enabled-background-color);
764
+ border-color: var(--normal-enabled-border-color);
765
+ background-color: var(--normal-enabled-background-color);
766
+ border-width: 1px;
767
+ border-style: solid;
768
+ cursor: pointer;
769
+ --base-border-color: var(--normal-enabled-border-color);
770
+ --base-background-color: var(--normal-enabled-background-color);
772
771
  }
773
772
 
774
773
  .activated:is(.type-enhanced.alert-type-level-critical .alert-button) .blink {
775
- border-color: var(--normal-activated-border-color);
776
- background-color: var(--normal-activated-background-color);
777
- --base-border-color: var(--normal-activated-border-color);
778
- --base-background-color: var(--normal-activated-background-color);
774
+ border-color: var(--normal-activated-border-color);
775
+ background-color: var(--normal-activated-background-color);
776
+ --base-border-color: var(--normal-activated-border-color);
777
+ --base-background-color: var(--normal-activated-background-color);
779
778
  }
780
779
 
781
780
  @media (hover:hover) {
782
781
 
783
782
  :is(.type-enhanced.alert-type-level-critical .alert-button):hover .blink {
784
- border-color: color-mix(in srgb, var(--normal-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
785
- background-color: color-mix(in srgb, var(--normal-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
786
- }
783
+ border-color: color-mix(in srgb, var(--normal-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
784
+ background-color: color-mix(in srgb, var(--normal-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
785
+ }
787
786
  }
788
787
 
789
788
  :is(.type-enhanced.alert-type-level-critical .alert-button):active .blink {
790
- border-color: var(--normal-pressed-border-color);
791
- background-color: var(--normal-pressed-background-color);
789
+ border-color: var(--normal-pressed-border-color);
790
+ background-color: var(--normal-pressed-background-color);
792
791
  }
793
792
 
794
793
  :is(.type-enhanced.alert-type-level-critical .alert-button):focus-visible .blink {
795
- outline-color: var(--border-focus-color);
796
- outline-width: var(--global-size-spacing-border-weight-focusframe);
797
- outline-style: solid;
798
- border-color: var(--container-global-color);
799
- z-index: 1;
794
+ outline-color: var(--border-focus-color);
795
+ outline-width: var(--global-size-spacing-border-weight-focusframe);
796
+ outline-style: solid;
797
+ border-color: var(--container-global-color);
798
+ z-index: 1;
800
799
  }
801
800
 
802
801
  :is(.type-enhanced.alert-type-level-critical .alert-button):disabled .blink {
803
- border-color: var(--normal-disabled-border-color);
804
- background-color: var(--normal-disabled-background-color);
805
- cursor: not-allowed;
806
- color: var(--on-normal-disabled-color) !important;
802
+ border-color: var(--normal-disabled-border-color);
803
+ background-color: var(--normal-disabled-background-color);
804
+ cursor: not-allowed;
805
+ color: var(--on-normal-disabled-color) !important;
807
806
  }
808
807
 
809
808
  .disabled:is(.type-enhanced.alert-type-level-critical .alert-button) .blink {
810
- border-color: var(--normal-disabled-border-color);
811
- background-color: var(--normal-disabled-background-color);
812
- cursor: not-allowed;
813
- color: var(--on-normal-disabled-color) !important;
809
+ border-color: var(--normal-disabled-border-color);
810
+ background-color: var(--normal-disabled-background-color);
811
+ cursor: not-allowed;
812
+ color: var(--on-normal-disabled-color) !important;
814
813
  }
815
814
 
816
815
  :is(.type-enhanced.alert-type-level-critical .alert-button):disabled {
817
- cursor: not-allowed;
816
+ cursor: not-allowed;
818
817
  }
819
818
 
820
819
  .disabled:is(.type-enhanced.alert-type-level-critical .alert-button) {
821
- cursor: not-allowed;
820
+ cursor: not-allowed;
822
821
  }
823
822
 
824
823
  :is(.type-enhanced.alert-type-level-critical .alert-button) {
825
- cursor: pointer;
824
+ cursor: pointer;
826
825
  }
827
826
 
828
827
  :is(.type-enhanced.alert-type-level-critical .alert-button):focus {
829
- outline: none;
828
+ outline: none;
830
829
  }
831
830
 
832
831
  :is(.type-enhanced.alert-type-level-critical .alert-button) .visible-wrapper {
833
- border-color: var(--critical-enabled-border-color);
834
- background-color: var(--critical-enabled-background-color);
835
- border-width: 1px;
836
- border-style: solid;
837
- cursor: pointer;
838
- --base-border-color: var(--critical-enabled-border-color);
839
- --base-background-color: var(--critical-enabled-background-color);
832
+ border-color: var(--critical-enabled-border-color);
833
+ background-color: var(--critical-enabled-background-color);
834
+ border-width: 1px;
835
+ border-style: solid;
836
+ cursor: pointer;
837
+ --base-border-color: var(--critical-enabled-border-color);
838
+ --base-background-color: var(--critical-enabled-background-color);
840
839
  }
841
840
 
842
841
  .activated:is(.type-enhanced.alert-type-level-critical .alert-button) .visible-wrapper {
843
- border-color: var(--critical-activated-border-color);
844
- background-color: var(--critical-activated-background-color);
845
- --base-border-color: var(--critical-activated-border-color);
846
- --base-background-color: var(--critical-activated-background-color);
842
+ border-color: var(--critical-activated-border-color);
843
+ background-color: var(--critical-activated-background-color);
844
+ --base-border-color: var(--critical-activated-border-color);
845
+ --base-background-color: var(--critical-activated-background-color);
847
846
  }
848
847
 
849
848
  @media (hover:hover) {
850
849
 
851
850
  :is(.type-enhanced.alert-type-level-critical .alert-button):hover .visible-wrapper {
852
- border-color: color-mix(in srgb, var(--critical-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
853
- background-color: color-mix(in srgb, var(--critical-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
854
- }
851
+ border-color: color-mix(in srgb, var(--critical-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
852
+ background-color: color-mix(in srgb, var(--critical-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
853
+ }
855
854
  }
856
855
 
857
856
  :is(.type-enhanced.alert-type-level-critical .alert-button):active .visible-wrapper {
858
- border-color: var(--critical-pressed-border-color);
859
- background-color: var(--critical-pressed-background-color);
857
+ border-color: var(--critical-pressed-border-color);
858
+ background-color: var(--critical-pressed-background-color);
860
859
  }
861
860
 
862
861
  :is(.type-enhanced.alert-type-level-critical .alert-button):focus-visible .visible-wrapper {
863
- outline-color: var(--border-focus-color);
864
- outline-width: var(--global-size-spacing-border-weight-focusframe);
865
- outline-style: solid;
866
- border-color: var(--container-global-color);
867
- z-index: 1;
862
+ outline-color: var(--border-focus-color);
863
+ outline-width: var(--global-size-spacing-border-weight-focusframe);
864
+ outline-style: solid;
865
+ border-color: var(--container-global-color);
866
+ z-index: 1;
868
867
  }
869
868
 
870
869
  :is(.type-enhanced.alert-type-level-critical .alert-button):disabled .visible-wrapper {
871
- border-color: var(--critical-disabled-border-color);
872
- background-color: var(--critical-disabled-background-color);
873
- cursor: not-allowed;
874
- color: var(--on-critical-disabled-color) !important;
870
+ border-color: var(--critical-disabled-border-color);
871
+ background-color: var(--critical-disabled-background-color);
872
+ cursor: not-allowed;
873
+ color: var(--on-critical-disabled-color) !important;
875
874
  }
876
875
 
877
876
  .disabled:is(.type-enhanced.alert-type-level-critical .alert-button) .visible-wrapper {
878
- border-color: var(--critical-disabled-border-color);
879
- background-color: var(--critical-disabled-background-color);
880
- cursor: not-allowed;
881
- color: var(--on-critical-disabled-color) !important;
877
+ border-color: var(--critical-disabled-border-color);
878
+ background-color: var(--critical-disabled-background-color);
879
+ cursor: not-allowed;
880
+ color: var(--on-critical-disabled-color) !important;
882
881
  }
883
882
 
884
883
  :is(.type-enhanced.alert-type-level-critical .alert-button):disabled {
885
- cursor: not-allowed;
884
+ cursor: not-allowed;
886
885
  }
887
886
 
888
887
  .disabled:is(.type-enhanced.alert-type-level-critical .alert-button) {
889
- cursor: not-allowed;
888
+ cursor: not-allowed;
890
889
  }
891
890
 
892
891
  :is(.type-enhanced.alert-type-level-critical .alert-button) .visible-wrapper {
@@ -894,139 +893,139 @@ button {
894
893
  }
895
894
 
896
895
  :is(.type-enhanced.alert-type-level-high .alert-button) {
897
- cursor: pointer;
896
+ cursor: pointer;
898
897
  }
899
898
 
900
899
  :is(.type-enhanced.alert-type-level-high .alert-button):focus {
901
- outline: none;
900
+ outline: none;
902
901
  }
903
902
 
904
903
  :is(.type-enhanced.alert-type-level-high .alert-button) .blink {
905
- border-color: var(--normal-enabled-border-color);
906
- background-color: var(--normal-enabled-background-color);
907
- border-width: 1px;
908
- border-style: solid;
909
- cursor: pointer;
910
- --base-border-color: var(--normal-enabled-border-color);
911
- --base-background-color: var(--normal-enabled-background-color);
904
+ border-color: var(--normal-enabled-border-color);
905
+ background-color: var(--normal-enabled-background-color);
906
+ border-width: 1px;
907
+ border-style: solid;
908
+ cursor: pointer;
909
+ --base-border-color: var(--normal-enabled-border-color);
910
+ --base-background-color: var(--normal-enabled-background-color);
912
911
  }
913
912
 
914
913
  .activated:is(.type-enhanced.alert-type-level-high .alert-button) .blink {
915
- border-color: var(--normal-activated-border-color);
916
- background-color: var(--normal-activated-background-color);
917
- --base-border-color: var(--normal-activated-border-color);
918
- --base-background-color: var(--normal-activated-background-color);
914
+ border-color: var(--normal-activated-border-color);
915
+ background-color: var(--normal-activated-background-color);
916
+ --base-border-color: var(--normal-activated-border-color);
917
+ --base-background-color: var(--normal-activated-background-color);
919
918
  }
920
919
 
921
920
  @media (hover:hover) {
922
921
 
923
922
  :is(.type-enhanced.alert-type-level-high .alert-button):hover .blink {
924
- border-color: color-mix(in srgb, var(--normal-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
925
- background-color: color-mix(in srgb, var(--normal-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
926
- }
923
+ border-color: color-mix(in srgb, var(--normal-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
924
+ background-color: color-mix(in srgb, var(--normal-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
925
+ }
927
926
  }
928
927
 
929
928
  :is(.type-enhanced.alert-type-level-high .alert-button):active .blink {
930
- border-color: var(--normal-pressed-border-color);
931
- background-color: var(--normal-pressed-background-color);
929
+ border-color: var(--normal-pressed-border-color);
930
+ background-color: var(--normal-pressed-background-color);
932
931
  }
933
932
 
934
933
  :is(.type-enhanced.alert-type-level-high .alert-button):focus-visible .blink {
935
- outline-color: var(--border-focus-color);
936
- outline-width: var(--global-size-spacing-border-weight-focusframe);
937
- outline-style: solid;
938
- border-color: var(--container-global-color);
939
- z-index: 1;
934
+ outline-color: var(--border-focus-color);
935
+ outline-width: var(--global-size-spacing-border-weight-focusframe);
936
+ outline-style: solid;
937
+ border-color: var(--container-global-color);
938
+ z-index: 1;
940
939
  }
941
940
 
942
941
  :is(.type-enhanced.alert-type-level-high .alert-button):disabled .blink {
943
- border-color: var(--normal-disabled-border-color);
944
- background-color: var(--normal-disabled-background-color);
945
- cursor: not-allowed;
946
- color: var(--on-normal-disabled-color) !important;
942
+ border-color: var(--normal-disabled-border-color);
943
+ background-color: var(--normal-disabled-background-color);
944
+ cursor: not-allowed;
945
+ color: var(--on-normal-disabled-color) !important;
947
946
  }
948
947
 
949
948
  .disabled:is(.type-enhanced.alert-type-level-high .alert-button) .blink {
950
- border-color: var(--normal-disabled-border-color);
951
- background-color: var(--normal-disabled-background-color);
952
- cursor: not-allowed;
953
- color: var(--on-normal-disabled-color) !important;
949
+ border-color: var(--normal-disabled-border-color);
950
+ background-color: var(--normal-disabled-background-color);
951
+ cursor: not-allowed;
952
+ color: var(--on-normal-disabled-color) !important;
954
953
  }
955
954
 
956
955
  :is(.type-enhanced.alert-type-level-high .alert-button):disabled {
957
- cursor: not-allowed;
956
+ cursor: not-allowed;
958
957
  }
959
958
 
960
959
  .disabled:is(.type-enhanced.alert-type-level-high .alert-button) {
961
- cursor: not-allowed;
960
+ cursor: not-allowed;
962
961
  }
963
962
 
964
963
  :is(.type-enhanced.alert-type-level-high .alert-button) {
965
- cursor: pointer;
964
+ cursor: pointer;
966
965
  }
967
966
 
968
967
  :is(.type-enhanced.alert-type-level-high .alert-button):focus {
969
- outline: none;
968
+ outline: none;
970
969
  }
971
970
 
972
971
  :is(.type-enhanced.alert-type-level-high .alert-button) .visible-wrapper {
973
- border-color: var(--alarm-enabled-border-color);
974
- background-color: var(--alarm-enabled-background-color);
975
- border-width: 1px;
976
- border-style: solid;
977
- cursor: pointer;
978
- --base-border-color: var(--alarm-enabled-border-color);
979
- --base-background-color: var(--alarm-enabled-background-color);
972
+ border-color: var(--alarm-enabled-border-color);
973
+ background-color: var(--alarm-enabled-background-color);
974
+ border-width: 1px;
975
+ border-style: solid;
976
+ cursor: pointer;
977
+ --base-border-color: var(--alarm-enabled-border-color);
978
+ --base-background-color: var(--alarm-enabled-background-color);
980
979
  }
981
980
 
982
981
  .activated:is(.type-enhanced.alert-type-level-high .alert-button) .visible-wrapper {
983
- border-color: var(--alarm-activated-border-color);
984
- background-color: var(--alarm-activated-background-color);
985
- --base-border-color: var(--alarm-activated-border-color);
986
- --base-background-color: var(--alarm-activated-background-color);
982
+ border-color: var(--alarm-activated-border-color);
983
+ background-color: var(--alarm-activated-background-color);
984
+ --base-border-color: var(--alarm-activated-border-color);
985
+ --base-background-color: var(--alarm-activated-background-color);
987
986
  }
988
987
 
989
988
  @media (hover:hover) {
990
989
 
991
990
  :is(.type-enhanced.alert-type-level-high .alert-button):hover .visible-wrapper {
992
- border-color: color-mix(in srgb, var(--alarm-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
993
- background-color: color-mix(in srgb, var(--alarm-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
994
- }
991
+ border-color: color-mix(in srgb, var(--alarm-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
992
+ background-color: color-mix(in srgb, var(--alarm-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
993
+ }
995
994
  }
996
995
 
997
996
  :is(.type-enhanced.alert-type-level-high .alert-button):active .visible-wrapper {
998
- border-color: var(--alarm-pressed-border-color);
999
- background-color: var(--alarm-pressed-background-color);
997
+ border-color: var(--alarm-pressed-border-color);
998
+ background-color: var(--alarm-pressed-background-color);
1000
999
  }
1001
1000
 
1002
1001
  :is(.type-enhanced.alert-type-level-high .alert-button):focus-visible .visible-wrapper {
1003
- outline-color: var(--border-focus-color);
1004
- outline-width: var(--global-size-spacing-border-weight-focusframe);
1005
- outline-style: solid;
1006
- border-color: var(--container-global-color);
1007
- z-index: 1;
1002
+ outline-color: var(--border-focus-color);
1003
+ outline-width: var(--global-size-spacing-border-weight-focusframe);
1004
+ outline-style: solid;
1005
+ border-color: var(--container-global-color);
1006
+ z-index: 1;
1008
1007
  }
1009
1008
 
1010
1009
  :is(.type-enhanced.alert-type-level-high .alert-button):disabled .visible-wrapper {
1011
- border-color: var(--alarm-disabled-border-color);
1012
- background-color: var(--alarm-disabled-background-color);
1013
- cursor: not-allowed;
1014
- color: var(--on-alarm-disabled-color) !important;
1010
+ border-color: var(--alarm-disabled-border-color);
1011
+ background-color: var(--alarm-disabled-background-color);
1012
+ cursor: not-allowed;
1013
+ color: var(--on-alarm-disabled-color) !important;
1015
1014
  }
1016
1015
 
1017
1016
  .disabled:is(.type-enhanced.alert-type-level-high .alert-button) .visible-wrapper {
1018
- border-color: var(--alarm-disabled-border-color);
1019
- background-color: var(--alarm-disabled-background-color);
1020
- cursor: not-allowed;
1021
- color: var(--on-alarm-disabled-color) !important;
1017
+ border-color: var(--alarm-disabled-border-color);
1018
+ background-color: var(--alarm-disabled-background-color);
1019
+ cursor: not-allowed;
1020
+ color: var(--on-alarm-disabled-color) !important;
1022
1021
  }
1023
1022
 
1024
1023
  :is(.type-enhanced.alert-type-level-high .alert-button):disabled {
1025
- cursor: not-allowed;
1024
+ cursor: not-allowed;
1026
1025
  }
1027
1026
 
1028
1027
  .disabled:is(.type-enhanced.alert-type-level-high .alert-button) {
1029
- cursor: not-allowed;
1028
+ cursor: not-allowed;
1030
1029
  }
1031
1030
 
1032
1031
  :is(.type-enhanced.alert-type-level-high .alert-button) .visible-wrapper {
@@ -1034,139 +1033,139 @@ button {
1034
1033
  }
1035
1034
 
1036
1035
  :is(.type-enhanced.alert-type-level-medium .alert-button) {
1037
- cursor: pointer;
1036
+ cursor: pointer;
1038
1037
  }
1039
1038
 
1040
1039
  :is(.type-enhanced.alert-type-level-medium .alert-button):focus {
1041
- outline: none;
1040
+ outline: none;
1042
1041
  }
1043
1042
 
1044
1043
  :is(.type-enhanced.alert-type-level-medium .alert-button) .blink {
1045
- border-color: var(--normal-enabled-border-color);
1046
- background-color: var(--normal-enabled-background-color);
1047
- border-width: 1px;
1048
- border-style: solid;
1049
- cursor: pointer;
1050
- --base-border-color: var(--normal-enabled-border-color);
1051
- --base-background-color: var(--normal-enabled-background-color);
1044
+ border-color: var(--normal-enabled-border-color);
1045
+ background-color: var(--normal-enabled-background-color);
1046
+ border-width: 1px;
1047
+ border-style: solid;
1048
+ cursor: pointer;
1049
+ --base-border-color: var(--normal-enabled-border-color);
1050
+ --base-background-color: var(--normal-enabled-background-color);
1052
1051
  }
1053
1052
 
1054
1053
  .activated:is(.type-enhanced.alert-type-level-medium .alert-button) .blink {
1055
- border-color: var(--normal-activated-border-color);
1056
- background-color: var(--normal-activated-background-color);
1057
- --base-border-color: var(--normal-activated-border-color);
1058
- --base-background-color: var(--normal-activated-background-color);
1054
+ border-color: var(--normal-activated-border-color);
1055
+ background-color: var(--normal-activated-background-color);
1056
+ --base-border-color: var(--normal-activated-border-color);
1057
+ --base-background-color: var(--normal-activated-background-color);
1059
1058
  }
1060
1059
 
1061
1060
  @media (hover:hover) {
1062
1061
 
1063
1062
  :is(.type-enhanced.alert-type-level-medium .alert-button):hover .blink {
1064
- border-color: color-mix(in srgb, var(--normal-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
1065
- background-color: color-mix(in srgb, var(--normal-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
1066
- }
1063
+ border-color: color-mix(in srgb, var(--normal-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
1064
+ background-color: color-mix(in srgb, var(--normal-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
1065
+ }
1067
1066
  }
1068
1067
 
1069
1068
  :is(.type-enhanced.alert-type-level-medium .alert-button):active .blink {
1070
- border-color: var(--normal-pressed-border-color);
1071
- background-color: var(--normal-pressed-background-color);
1069
+ border-color: var(--normal-pressed-border-color);
1070
+ background-color: var(--normal-pressed-background-color);
1072
1071
  }
1073
1072
 
1074
1073
  :is(.type-enhanced.alert-type-level-medium .alert-button):focus-visible .blink {
1075
- outline-color: var(--border-focus-color);
1076
- outline-width: var(--global-size-spacing-border-weight-focusframe);
1077
- outline-style: solid;
1078
- border-color: var(--container-global-color);
1079
- z-index: 1;
1074
+ outline-color: var(--border-focus-color);
1075
+ outline-width: var(--global-size-spacing-border-weight-focusframe);
1076
+ outline-style: solid;
1077
+ border-color: var(--container-global-color);
1078
+ z-index: 1;
1080
1079
  }
1081
1080
 
1082
1081
  :is(.type-enhanced.alert-type-level-medium .alert-button):disabled .blink {
1083
- border-color: var(--normal-disabled-border-color);
1084
- background-color: var(--normal-disabled-background-color);
1085
- cursor: not-allowed;
1086
- color: var(--on-normal-disabled-color) !important;
1082
+ border-color: var(--normal-disabled-border-color);
1083
+ background-color: var(--normal-disabled-background-color);
1084
+ cursor: not-allowed;
1085
+ color: var(--on-normal-disabled-color) !important;
1087
1086
  }
1088
1087
 
1089
1088
  .disabled:is(.type-enhanced.alert-type-level-medium .alert-button) .blink {
1090
- border-color: var(--normal-disabled-border-color);
1091
- background-color: var(--normal-disabled-background-color);
1092
- cursor: not-allowed;
1093
- color: var(--on-normal-disabled-color) !important;
1089
+ border-color: var(--normal-disabled-border-color);
1090
+ background-color: var(--normal-disabled-background-color);
1091
+ cursor: not-allowed;
1092
+ color: var(--on-normal-disabled-color) !important;
1094
1093
  }
1095
1094
 
1096
1095
  :is(.type-enhanced.alert-type-level-medium .alert-button):disabled {
1097
- cursor: not-allowed;
1096
+ cursor: not-allowed;
1098
1097
  }
1099
1098
 
1100
1099
  .disabled:is(.type-enhanced.alert-type-level-medium .alert-button) {
1101
- cursor: not-allowed;
1100
+ cursor: not-allowed;
1102
1101
  }
1103
1102
 
1104
1103
  :is(.type-enhanced.alert-type-level-medium .alert-button) {
1105
- cursor: pointer;
1104
+ cursor: pointer;
1106
1105
  }
1107
1106
 
1108
1107
  :is(.type-enhanced.alert-type-level-medium .alert-button):focus {
1109
- outline: none;
1108
+ outline: none;
1110
1109
  }
1111
1110
 
1112
1111
  :is(.type-enhanced.alert-type-level-medium .alert-button) .visible-wrapper {
1113
- border-color: var(--warning-enabled-border-color);
1114
- background-color: var(--warning-enabled-background-color);
1115
- border-width: 1px;
1116
- border-style: solid;
1117
- cursor: pointer;
1118
- --base-border-color: var(--warning-enabled-border-color);
1119
- --base-background-color: var(--warning-enabled-background-color);
1112
+ border-color: var(--warning-enabled-border-color);
1113
+ background-color: var(--warning-enabled-background-color);
1114
+ border-width: 1px;
1115
+ border-style: solid;
1116
+ cursor: pointer;
1117
+ --base-border-color: var(--warning-enabled-border-color);
1118
+ --base-background-color: var(--warning-enabled-background-color);
1120
1119
  }
1121
1120
 
1122
1121
  .activated:is(.type-enhanced.alert-type-level-medium .alert-button) .visible-wrapper {
1123
- border-color: var(--warning-activated-border-color);
1124
- background-color: var(--warning-activated-background-color);
1125
- --base-border-color: var(--warning-activated-border-color);
1126
- --base-background-color: var(--warning-activated-background-color);
1122
+ border-color: var(--warning-activated-border-color);
1123
+ background-color: var(--warning-activated-background-color);
1124
+ --base-border-color: var(--warning-activated-border-color);
1125
+ --base-background-color: var(--warning-activated-background-color);
1127
1126
  }
1128
1127
 
1129
1128
  @media (hover:hover) {
1130
1129
 
1131
1130
  :is(.type-enhanced.alert-type-level-medium .alert-button):hover .visible-wrapper {
1132
- border-color: color-mix(in srgb, var(--warning-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
1133
- background-color: color-mix(in srgb, var(--warning-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
1134
- }
1131
+ border-color: color-mix(in srgb, var(--warning-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
1132
+ background-color: color-mix(in srgb, var(--warning-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
1133
+ }
1135
1134
  }
1136
1135
 
1137
1136
  :is(.type-enhanced.alert-type-level-medium .alert-button):active .visible-wrapper {
1138
- border-color: var(--warning-pressed-border-color);
1139
- background-color: var(--warning-pressed-background-color);
1137
+ border-color: var(--warning-pressed-border-color);
1138
+ background-color: var(--warning-pressed-background-color);
1140
1139
  }
1141
1140
 
1142
1141
  :is(.type-enhanced.alert-type-level-medium .alert-button):focus-visible .visible-wrapper {
1143
- outline-color: var(--border-focus-color);
1144
- outline-width: var(--global-size-spacing-border-weight-focusframe);
1145
- outline-style: solid;
1146
- border-color: var(--container-global-color);
1147
- z-index: 1;
1142
+ outline-color: var(--border-focus-color);
1143
+ outline-width: var(--global-size-spacing-border-weight-focusframe);
1144
+ outline-style: solid;
1145
+ border-color: var(--container-global-color);
1146
+ z-index: 1;
1148
1147
  }
1149
1148
 
1150
1149
  :is(.type-enhanced.alert-type-level-medium .alert-button):disabled .visible-wrapper {
1151
- border-color: var(--warning-disabled-border-color);
1152
- background-color: var(--warning-disabled-background-color);
1153
- cursor: not-allowed;
1154
- color: var(--on-warning-disabled-color) !important;
1150
+ border-color: var(--warning-disabled-border-color);
1151
+ background-color: var(--warning-disabled-background-color);
1152
+ cursor: not-allowed;
1153
+ color: var(--on-warning-disabled-color) !important;
1155
1154
  }
1156
1155
 
1157
1156
  .disabled:is(.type-enhanced.alert-type-level-medium .alert-button) .visible-wrapper {
1158
- border-color: var(--warning-disabled-border-color);
1159
- background-color: var(--warning-disabled-background-color);
1160
- cursor: not-allowed;
1161
- color: var(--on-warning-disabled-color) !important;
1157
+ border-color: var(--warning-disabled-border-color);
1158
+ background-color: var(--warning-disabled-background-color);
1159
+ cursor: not-allowed;
1160
+ color: var(--on-warning-disabled-color) !important;
1162
1161
  }
1163
1162
 
1164
1163
  :is(.type-enhanced.alert-type-level-medium .alert-button):disabled {
1165
- cursor: not-allowed;
1164
+ cursor: not-allowed;
1166
1165
  }
1167
1166
 
1168
1167
  .disabled:is(.type-enhanced.alert-type-level-medium .alert-button) {
1169
- cursor: not-allowed;
1168
+ cursor: not-allowed;
1170
1169
  }
1171
1170
 
1172
1171
  :is(.type-enhanced.alert-type-level-medium .alert-button) .visible-wrapper {
@@ -1174,139 +1173,139 @@ button {
1174
1173
  }
1175
1174
 
1176
1175
  :is(.type-enhanced.alert-type-level-low .alert-button) {
1177
- cursor: pointer;
1176
+ cursor: pointer;
1178
1177
  }
1179
1178
 
1180
1179
  :is(.type-enhanced.alert-type-level-low .alert-button):focus {
1181
- outline: none;
1180
+ outline: none;
1182
1181
  }
1183
1182
 
1184
1183
  :is(.type-enhanced.alert-type-level-low .alert-button) .blink {
1185
- border-color: var(--normal-enabled-border-color);
1186
- background-color: var(--normal-enabled-background-color);
1187
- border-width: 1px;
1188
- border-style: solid;
1189
- cursor: pointer;
1190
- --base-border-color: var(--normal-enabled-border-color);
1191
- --base-background-color: var(--normal-enabled-background-color);
1184
+ border-color: var(--normal-enabled-border-color);
1185
+ background-color: var(--normal-enabled-background-color);
1186
+ border-width: 1px;
1187
+ border-style: solid;
1188
+ cursor: pointer;
1189
+ --base-border-color: var(--normal-enabled-border-color);
1190
+ --base-background-color: var(--normal-enabled-background-color);
1192
1191
  }
1193
1192
 
1194
1193
  .activated:is(.type-enhanced.alert-type-level-low .alert-button) .blink {
1195
- border-color: var(--normal-activated-border-color);
1196
- background-color: var(--normal-activated-background-color);
1197
- --base-border-color: var(--normal-activated-border-color);
1198
- --base-background-color: var(--normal-activated-background-color);
1194
+ border-color: var(--normal-activated-border-color);
1195
+ background-color: var(--normal-activated-background-color);
1196
+ --base-border-color: var(--normal-activated-border-color);
1197
+ --base-background-color: var(--normal-activated-background-color);
1199
1198
  }
1200
1199
 
1201
1200
  @media (hover:hover) {
1202
1201
 
1203
1202
  :is(.type-enhanced.alert-type-level-low .alert-button):hover .blink {
1204
- border-color: color-mix(in srgb, var(--normal-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
1205
- background-color: color-mix(in srgb, var(--normal-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
1206
- }
1203
+ border-color: color-mix(in srgb, var(--normal-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
1204
+ background-color: color-mix(in srgb, var(--normal-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
1205
+ }
1207
1206
  }
1208
1207
 
1209
1208
  :is(.type-enhanced.alert-type-level-low .alert-button):active .blink {
1210
- border-color: var(--normal-pressed-border-color);
1211
- background-color: var(--normal-pressed-background-color);
1209
+ border-color: var(--normal-pressed-border-color);
1210
+ background-color: var(--normal-pressed-background-color);
1212
1211
  }
1213
1212
 
1214
1213
  :is(.type-enhanced.alert-type-level-low .alert-button):focus-visible .blink {
1215
- outline-color: var(--border-focus-color);
1216
- outline-width: var(--global-size-spacing-border-weight-focusframe);
1217
- outline-style: solid;
1218
- border-color: var(--container-global-color);
1219
- z-index: 1;
1214
+ outline-color: var(--border-focus-color);
1215
+ outline-width: var(--global-size-spacing-border-weight-focusframe);
1216
+ outline-style: solid;
1217
+ border-color: var(--container-global-color);
1218
+ z-index: 1;
1220
1219
  }
1221
1220
 
1222
1221
  :is(.type-enhanced.alert-type-level-low .alert-button):disabled .blink {
1223
- border-color: var(--normal-disabled-border-color);
1224
- background-color: var(--normal-disabled-background-color);
1225
- cursor: not-allowed;
1226
- color: var(--on-normal-disabled-color) !important;
1222
+ border-color: var(--normal-disabled-border-color);
1223
+ background-color: var(--normal-disabled-background-color);
1224
+ cursor: not-allowed;
1225
+ color: var(--on-normal-disabled-color) !important;
1227
1226
  }
1228
1227
 
1229
1228
  .disabled:is(.type-enhanced.alert-type-level-low .alert-button) .blink {
1230
- border-color: var(--normal-disabled-border-color);
1231
- background-color: var(--normal-disabled-background-color);
1232
- cursor: not-allowed;
1233
- color: var(--on-normal-disabled-color) !important;
1229
+ border-color: var(--normal-disabled-border-color);
1230
+ background-color: var(--normal-disabled-background-color);
1231
+ cursor: not-allowed;
1232
+ color: var(--on-normal-disabled-color) !important;
1234
1233
  }
1235
1234
 
1236
1235
  :is(.type-enhanced.alert-type-level-low .alert-button):disabled {
1237
- cursor: not-allowed;
1236
+ cursor: not-allowed;
1238
1237
  }
1239
1238
 
1240
1239
  .disabled:is(.type-enhanced.alert-type-level-low .alert-button) {
1241
- cursor: not-allowed;
1240
+ cursor: not-allowed;
1242
1241
  }
1243
1242
 
1244
1243
  :is(.type-enhanced.alert-type-level-low .alert-button) {
1245
- cursor: pointer;
1244
+ cursor: pointer;
1246
1245
  }
1247
1246
 
1248
1247
  :is(.type-enhanced.alert-type-level-low .alert-button):focus {
1249
- outline: none;
1248
+ outline: none;
1250
1249
  }
1251
1250
 
1252
1251
  :is(.type-enhanced.alert-type-level-low .alert-button) .visible-wrapper {
1253
- border-color: var(--caution-enabled-border-color);
1254
- background-color: var(--caution-enabled-background-color);
1255
- border-width: 1px;
1256
- border-style: solid;
1257
- cursor: pointer;
1258
- --base-border-color: var(--caution-enabled-border-color);
1259
- --base-background-color: var(--caution-enabled-background-color);
1252
+ border-color: var(--caution-enabled-border-color);
1253
+ background-color: var(--caution-enabled-background-color);
1254
+ border-width: 1px;
1255
+ border-style: solid;
1256
+ cursor: pointer;
1257
+ --base-border-color: var(--caution-enabled-border-color);
1258
+ --base-background-color: var(--caution-enabled-background-color);
1260
1259
  }
1261
1260
 
1262
1261
  .activated:is(.type-enhanced.alert-type-level-low .alert-button) .visible-wrapper {
1263
- border-color: var(--caution-activated-border-color);
1264
- background-color: var(--caution-activated-background-color);
1265
- --base-border-color: var(--caution-activated-border-color);
1266
- --base-background-color: var(--caution-activated-background-color);
1262
+ border-color: var(--caution-activated-border-color);
1263
+ background-color: var(--caution-activated-background-color);
1264
+ --base-border-color: var(--caution-activated-border-color);
1265
+ --base-background-color: var(--caution-activated-background-color);
1267
1266
  }
1268
1267
 
1269
1268
  @media (hover:hover) {
1270
1269
 
1271
1270
  :is(.type-enhanced.alert-type-level-low .alert-button):hover .visible-wrapper {
1272
- border-color: color-mix(in srgb, var(--caution-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
1273
- background-color: color-mix(in srgb, var(--caution-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
1274
- }
1271
+ border-color: color-mix(in srgb, var(--caution-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
1272
+ background-color: color-mix(in srgb, var(--caution-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
1273
+ }
1275
1274
  }
1276
1275
 
1277
1276
  :is(.type-enhanced.alert-type-level-low .alert-button):active .visible-wrapper {
1278
- border-color: var(--caution-pressed-border-color);
1279
- background-color: var(--caution-pressed-background-color);
1277
+ border-color: var(--caution-pressed-border-color);
1278
+ background-color: var(--caution-pressed-background-color);
1280
1279
  }
1281
1280
 
1282
1281
  :is(.type-enhanced.alert-type-level-low .alert-button):focus-visible .visible-wrapper {
1283
- outline-color: var(--border-focus-color);
1284
- outline-width: var(--global-size-spacing-border-weight-focusframe);
1285
- outline-style: solid;
1286
- border-color: var(--container-global-color);
1287
- z-index: 1;
1282
+ outline-color: var(--border-focus-color);
1283
+ outline-width: var(--global-size-spacing-border-weight-focusframe);
1284
+ outline-style: solid;
1285
+ border-color: var(--container-global-color);
1286
+ z-index: 1;
1288
1287
  }
1289
1288
 
1290
1289
  :is(.type-enhanced.alert-type-level-low .alert-button):disabled .visible-wrapper {
1291
- border-color: var(--caution-disabled-border-color);
1292
- background-color: var(--caution-disabled-background-color);
1293
- cursor: not-allowed;
1294
- color: var(--on-caution-disabled-color) !important;
1290
+ border-color: var(--caution-disabled-border-color);
1291
+ background-color: var(--caution-disabled-background-color);
1292
+ cursor: not-allowed;
1293
+ color: var(--on-caution-disabled-color) !important;
1295
1294
  }
1296
1295
 
1297
1296
  .disabled:is(.type-enhanced.alert-type-level-low .alert-button) .visible-wrapper {
1298
- border-color: var(--caution-disabled-border-color);
1299
- background-color: var(--caution-disabled-background-color);
1300
- cursor: not-allowed;
1301
- color: var(--on-caution-disabled-color) !important;
1297
+ border-color: var(--caution-disabled-border-color);
1298
+ background-color: var(--caution-disabled-background-color);
1299
+ cursor: not-allowed;
1300
+ color: var(--on-caution-disabled-color) !important;
1302
1301
  }
1303
1302
 
1304
1303
  :is(.type-enhanced.alert-type-level-low .alert-button):disabled {
1305
- cursor: not-allowed;
1304
+ cursor: not-allowed;
1306
1305
  }
1307
1306
 
1308
1307
  .disabled:is(.type-enhanced.alert-type-level-low .alert-button) {
1309
- cursor: not-allowed;
1308
+ cursor: not-allowed;
1310
1309
  }
1311
1310
 
1312
1311
  :is(.type-enhanced.alert-type-level-low .alert-button) .visible-wrapper {
@@ -1314,139 +1313,139 @@ button {
1314
1313
  }
1315
1314
 
1316
1315
  :is(.type-enhanced.alert-type-level-diagnostic .alert-button) {
1317
- cursor: pointer;
1316
+ cursor: pointer;
1318
1317
  }
1319
1318
 
1320
1319
  :is(.type-enhanced.alert-type-level-diagnostic .alert-button):focus {
1321
- outline: none;
1320
+ outline: none;
1322
1321
  }
1323
1322
 
1324
1323
  :is(.type-enhanced.alert-type-level-diagnostic .alert-button) .blink {
1325
- border-color: var(--normal-enabled-border-color);
1326
- background-color: var(--normal-enabled-background-color);
1327
- border-width: 1px;
1328
- border-style: solid;
1329
- cursor: pointer;
1330
- --base-border-color: var(--normal-enabled-border-color);
1331
- --base-background-color: var(--normal-enabled-background-color);
1324
+ border-color: var(--normal-enabled-border-color);
1325
+ background-color: var(--normal-enabled-background-color);
1326
+ border-width: 1px;
1327
+ border-style: solid;
1328
+ cursor: pointer;
1329
+ --base-border-color: var(--normal-enabled-border-color);
1330
+ --base-background-color: var(--normal-enabled-background-color);
1332
1331
  }
1333
1332
 
1334
1333
  .activated:is(.type-enhanced.alert-type-level-diagnostic .alert-button) .blink {
1335
- border-color: var(--normal-activated-border-color);
1336
- background-color: var(--normal-activated-background-color);
1337
- --base-border-color: var(--normal-activated-border-color);
1338
- --base-background-color: var(--normal-activated-background-color);
1334
+ border-color: var(--normal-activated-border-color);
1335
+ background-color: var(--normal-activated-background-color);
1336
+ --base-border-color: var(--normal-activated-border-color);
1337
+ --base-background-color: var(--normal-activated-background-color);
1339
1338
  }
1340
1339
 
1341
1340
  @media (hover:hover) {
1342
1341
 
1343
1342
  :is(.type-enhanced.alert-type-level-diagnostic .alert-button):hover .blink {
1344
- border-color: color-mix(in srgb, var(--normal-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
1345
- background-color: color-mix(in srgb, var(--normal-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
1346
- }
1343
+ border-color: color-mix(in srgb, var(--normal-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
1344
+ background-color: color-mix(in srgb, var(--normal-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
1345
+ }
1347
1346
  }
1348
1347
 
1349
1348
  :is(.type-enhanced.alert-type-level-diagnostic .alert-button):active .blink {
1350
- border-color: var(--normal-pressed-border-color);
1351
- background-color: var(--normal-pressed-background-color);
1349
+ border-color: var(--normal-pressed-border-color);
1350
+ background-color: var(--normal-pressed-background-color);
1352
1351
  }
1353
1352
 
1354
1353
  :is(.type-enhanced.alert-type-level-diagnostic .alert-button):focus-visible .blink {
1355
- outline-color: var(--border-focus-color);
1356
- outline-width: var(--global-size-spacing-border-weight-focusframe);
1357
- outline-style: solid;
1358
- border-color: var(--container-global-color);
1359
- z-index: 1;
1354
+ outline-color: var(--border-focus-color);
1355
+ outline-width: var(--global-size-spacing-border-weight-focusframe);
1356
+ outline-style: solid;
1357
+ border-color: var(--container-global-color);
1358
+ z-index: 1;
1360
1359
  }
1361
1360
 
1362
1361
  :is(.type-enhanced.alert-type-level-diagnostic .alert-button):disabled .blink {
1363
- border-color: var(--normal-disabled-border-color);
1364
- background-color: var(--normal-disabled-background-color);
1365
- cursor: not-allowed;
1366
- color: var(--on-normal-disabled-color) !important;
1362
+ border-color: var(--normal-disabled-border-color);
1363
+ background-color: var(--normal-disabled-background-color);
1364
+ cursor: not-allowed;
1365
+ color: var(--on-normal-disabled-color) !important;
1367
1366
  }
1368
1367
 
1369
1368
  .disabled:is(.type-enhanced.alert-type-level-diagnostic .alert-button) .blink {
1370
- border-color: var(--normal-disabled-border-color);
1371
- background-color: var(--normal-disabled-background-color);
1372
- cursor: not-allowed;
1373
- color: var(--on-normal-disabled-color) !important;
1369
+ border-color: var(--normal-disabled-border-color);
1370
+ background-color: var(--normal-disabled-background-color);
1371
+ cursor: not-allowed;
1372
+ color: var(--on-normal-disabled-color) !important;
1374
1373
  }
1375
1374
 
1376
1375
  :is(.type-enhanced.alert-type-level-diagnostic .alert-button):disabled {
1377
- cursor: not-allowed;
1376
+ cursor: not-allowed;
1378
1377
  }
1379
1378
 
1380
1379
  .disabled:is(.type-enhanced.alert-type-level-diagnostic .alert-button) {
1381
- cursor: not-allowed;
1380
+ cursor: not-allowed;
1382
1381
  }
1383
1382
 
1384
1383
  :is(.type-enhanced.alert-type-level-diagnostic .alert-button) {
1385
- cursor: pointer;
1384
+ cursor: pointer;
1386
1385
  }
1387
1386
 
1388
1387
  :is(.type-enhanced.alert-type-level-diagnostic .alert-button):focus {
1389
- outline: none;
1388
+ outline: none;
1390
1389
  }
1391
1390
 
1392
1391
  :is(.type-enhanced.alert-type-level-diagnostic .alert-button) .visible-wrapper {
1393
- border-color: var(--notification-enabled-border-color);
1394
- background-color: var(--notification-enabled-background-color);
1395
- border-width: 1px;
1396
- border-style: solid;
1397
- cursor: pointer;
1398
- --base-border-color: var(--notification-enabled-border-color);
1399
- --base-background-color: var(--notification-enabled-background-color);
1392
+ border-color: var(--notification-enabled-border-color);
1393
+ background-color: var(--notification-enabled-background-color);
1394
+ border-width: 1px;
1395
+ border-style: solid;
1396
+ cursor: pointer;
1397
+ --base-border-color: var(--notification-enabled-border-color);
1398
+ --base-background-color: var(--notification-enabled-background-color);
1400
1399
  }
1401
1400
 
1402
1401
  .activated:is(.type-enhanced.alert-type-level-diagnostic .alert-button) .visible-wrapper {
1403
- border-color: var(--notification-activated-border-color);
1404
- background-color: var(--notification-activated-background-color);
1405
- --base-border-color: var(--notification-activated-border-color);
1406
- --base-background-color: var(--notification-activated-background-color);
1402
+ border-color: var(--notification-activated-border-color);
1403
+ background-color: var(--notification-activated-background-color);
1404
+ --base-border-color: var(--notification-activated-border-color);
1405
+ --base-background-color: var(--notification-activated-background-color);
1407
1406
  }
1408
1407
 
1409
1408
  @media (hover:hover) {
1410
1409
 
1411
1410
  :is(.type-enhanced.alert-type-level-diagnostic .alert-button):hover .visible-wrapper {
1412
- border-color: color-mix(in srgb, var(--notification-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
1413
- background-color: color-mix(in srgb, var(--notification-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
1414
- }
1411
+ border-color: color-mix(in srgb, var(--notification-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
1412
+ background-color: color-mix(in srgb, var(--notification-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
1413
+ }
1415
1414
  }
1416
1415
 
1417
1416
  :is(.type-enhanced.alert-type-level-diagnostic .alert-button):active .visible-wrapper {
1418
- border-color: var(--notification-pressed-border-color);
1419
- background-color: var(--notification-pressed-background-color);
1417
+ border-color: var(--notification-pressed-border-color);
1418
+ background-color: var(--notification-pressed-background-color);
1420
1419
  }
1421
1420
 
1422
1421
  :is(.type-enhanced.alert-type-level-diagnostic .alert-button):focus-visible .visible-wrapper {
1423
- outline-color: var(--border-focus-color);
1424
- outline-width: var(--global-size-spacing-border-weight-focusframe);
1425
- outline-style: solid;
1426
- border-color: var(--container-global-color);
1427
- z-index: 1;
1422
+ outline-color: var(--border-focus-color);
1423
+ outline-width: var(--global-size-spacing-border-weight-focusframe);
1424
+ outline-style: solid;
1425
+ border-color: var(--container-global-color);
1426
+ z-index: 1;
1428
1427
  }
1429
1428
 
1430
1429
  :is(.type-enhanced.alert-type-level-diagnostic .alert-button):disabled .visible-wrapper {
1431
- border-color: var(--notification-disabled-border-color);
1432
- background-color: var(--notification-disabled-background-color);
1433
- cursor: not-allowed;
1434
- color: var(--on-notification-disabled-color) !important;
1430
+ border-color: var(--notification-disabled-border-color);
1431
+ background-color: var(--notification-disabled-background-color);
1432
+ cursor: not-allowed;
1433
+ color: var(--on-notification-disabled-color) !important;
1435
1434
  }
1436
1435
 
1437
1436
  .disabled:is(.type-enhanced.alert-type-level-diagnostic .alert-button) .visible-wrapper {
1438
- border-color: var(--notification-disabled-border-color);
1439
- background-color: var(--notification-disabled-background-color);
1440
- cursor: not-allowed;
1441
- color: var(--on-notification-disabled-color) !important;
1437
+ border-color: var(--notification-disabled-border-color);
1438
+ background-color: var(--notification-disabled-background-color);
1439
+ cursor: not-allowed;
1440
+ color: var(--on-notification-disabled-color) !important;
1442
1441
  }
1443
1442
 
1444
1443
  :is(.type-enhanced.alert-type-level-diagnostic .alert-button):disabled {
1445
- cursor: not-allowed;
1444
+ cursor: not-allowed;
1446
1445
  }
1447
1446
 
1448
1447
  .disabled:is(.type-enhanced.alert-type-level-diagnostic .alert-button) {
1449
- cursor: not-allowed;
1448
+ cursor: not-allowed;
1450
1449
  }
1451
1450
 
1452
1451
  :is(.type-enhanced.alert-type-level-diagnostic .alert-button) .visible-wrapper {
@@ -1571,71 +1570,71 @@ button {
1571
1570
  }
1572
1571
 
1573
1572
  .silence-button {
1574
- cursor: pointer;
1573
+ cursor: pointer;
1575
1574
  }
1576
1575
 
1577
1576
  .silence-button:focus {
1578
- outline: none;
1577
+ outline: none;
1579
1578
  }
1580
1579
 
1581
1580
  .silence-button .visible-wrapper {
1582
- border-color: var(--normal-enabled-border-color);
1583
- background-color: var(--normal-enabled-background-color);
1584
- border-width: 1px;
1585
- border-style: solid;
1586
- cursor: pointer;
1587
- --base-border-color: var(--normal-enabled-border-color);
1588
- --base-background-color: var(--normal-enabled-background-color);
1581
+ border-color: var(--normal-enabled-border-color);
1582
+ background-color: var(--normal-enabled-background-color);
1583
+ border-width: 1px;
1584
+ border-style: solid;
1585
+ cursor: pointer;
1586
+ --base-border-color: var(--normal-enabled-border-color);
1587
+ --base-background-color: var(--normal-enabled-background-color);
1589
1588
  }
1590
1589
 
1591
1590
  .silence-button.activated .visible-wrapper {
1592
- border-color: var(--normal-activated-border-color);
1593
- background-color: var(--normal-activated-background-color);
1594
- --base-border-color: var(--normal-activated-border-color);
1595
- --base-background-color: var(--normal-activated-background-color);
1591
+ border-color: var(--normal-activated-border-color);
1592
+ background-color: var(--normal-activated-background-color);
1593
+ --base-border-color: var(--normal-activated-border-color);
1594
+ --base-background-color: var(--normal-activated-background-color);
1596
1595
  }
1597
1596
 
1598
1597
  @media (hover:hover) {
1599
1598
 
1600
1599
  .silence-button:hover .visible-wrapper {
1601
- border-color: color-mix(in srgb, var(--normal-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
1602
- background-color: color-mix(in srgb, var(--normal-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
1603
- }
1600
+ border-color: color-mix(in srgb, var(--normal-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
1601
+ background-color: color-mix(in srgb, var(--normal-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
1602
+ }
1604
1603
  }
1605
1604
 
1606
1605
  .silence-button:active .visible-wrapper {
1607
- border-color: var(--normal-pressed-border-color);
1608
- background-color: var(--normal-pressed-background-color);
1606
+ border-color: var(--normal-pressed-border-color);
1607
+ background-color: var(--normal-pressed-background-color);
1609
1608
  }
1610
1609
 
1611
1610
  .silence-button:focus-visible .visible-wrapper {
1612
- outline-color: var(--border-focus-color);
1613
- outline-width: var(--global-size-spacing-border-weight-focusframe);
1614
- outline-style: solid;
1615
- border-color: var(--container-global-color);
1616
- z-index: 1;
1611
+ outline-color: var(--border-focus-color);
1612
+ outline-width: var(--global-size-spacing-border-weight-focusframe);
1613
+ outline-style: solid;
1614
+ border-color: var(--container-global-color);
1615
+ z-index: 1;
1617
1616
  }
1618
1617
 
1619
1618
  .silence-button:disabled .visible-wrapper {
1620
- border-color: var(--normal-disabled-border-color);
1621
- background-color: var(--normal-disabled-background-color);
1622
- cursor: not-allowed;
1623
- color: var(--on-normal-disabled-color) !important;
1619
+ border-color: var(--normal-disabled-border-color);
1620
+ background-color: var(--normal-disabled-background-color);
1621
+ cursor: not-allowed;
1622
+ color: var(--on-normal-disabled-color) !important;
1624
1623
  }
1625
1624
 
1626
1625
  .silence-button.disabled .visible-wrapper {
1627
- border-color: var(--normal-disabled-border-color);
1628
- background-color: var(--normal-disabled-background-color);
1629
- cursor: not-allowed;
1630
- color: var(--on-normal-disabled-color) !important;
1626
+ border-color: var(--normal-disabled-border-color);
1627
+ background-color: var(--normal-disabled-background-color);
1628
+ cursor: not-allowed;
1629
+ color: var(--on-normal-disabled-color) !important;
1631
1630
  }
1632
1631
 
1633
1632
  .silence-button:disabled {
1634
- cursor: not-allowed;
1633
+ cursor: not-allowed;
1635
1634
  }
1636
1635
 
1637
1636
  .silence-button.disabled {
1638
- cursor: not-allowed;
1637
+ cursor: not-allowed;
1639
1638
  }
1640
1639
 
1641
1640
  .silence-button {