@oicl/openbridge-webcomponents 2.0.0-next.152 → 2.0.0-next.153

package/dist/components/alert-button/alert-button.css.js

@@ -23,7 +23,7 @@ const compentStyle = css`* {
     padding-bottom: var(--app-components-alert-button-tall-padding-vertical);
   }
 
-.wrapper.large .visible-wrapper,.wrapper.large .blink {
+.wrapper.large .silence-button .visible-wrapper {
       height: 100%;
     }
 
@@ -31,6 +31,11 @@ const compentStyle = css`* {
     width: min-content;
   }
 
+obc-alert-button-item {
+  flex-grow: 1; /* the bell takes the width the silence button leaves */
+  flex-basis: var(--global-size-spacing-touch-target-min);
+}
+
 button {
   appearance: none;
   background: none;
@@ -50,1517 +55,6 @@ button {
   height: var(--global-size-spacing-icon-icon-size-regular);
 }
 
-.alert-button {
-  position: relative;
-  display: flex;
-  justify-content: center;
-}
-
-:is(.type-flat .alert-button) {
-  cursor: pointer;
-}
-
-:is(.type-flat .alert-button):focus {
-  outline: none;
-}
-
-:is(.type-flat .alert-button) .visible-wrapper {
-  border-color: var(--flat-enabled-border-color);
-  background-color: var(--flat-enabled-background-color);
-  border-width: 1px;
-  border-style: solid;
-  cursor: pointer;
-  --base-border-color: var(--flat-enabled-border-color);
-  --base-background-color: var(--flat-enabled-background-color);
-}
-
-.activated:is(.type-flat .alert-button) .visible-wrapper {
-  border-color: var(--flat-activated-border-color);
-  background-color: var(--flat-activated-background-color);
-  --base-border-color: var(--flat-activated-border-color);
-  --base-background-color: var(--flat-activated-background-color);
-}
-
-@media (hover:hover) {
-
-:is(.type-flat .alert-button):hover .visible-wrapper {
-    border-color: color-mix(in srgb, var(--flat-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
-    background-color: color-mix(in srgb, var(--flat-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
-  }
-}
-
-:is(.type-flat .alert-button):active .visible-wrapper {
-  border-color: var(--flat-pressed-border-color);
-  background-color: var(--flat-pressed-background-color);
-}
-
-:is(.type-flat .alert-button):focus-visible .visible-wrapper {
-  outline-color: var(--border-focus-color);
-  outline-width: var(--global-size-spacing-border-weight-focusframe);
-  outline-style: solid;
-  border-color: var(--container-global-color);
-  z-index: 1;
-}
-
-:is(.type-flat .alert-button):disabled .visible-wrapper {
-  border-color: var(--flat-disabled-border-color);
-  background-color: var(--flat-disabled-background-color);
-  cursor: not-allowed;
-  color: var(--on-flat-disabled-color) !important;
-}
-
-.disabled:is(.type-flat .alert-button) .visible-wrapper {
-  border-color: var(--flat-disabled-border-color);
-  background-color: var(--flat-disabled-background-color);
-  cursor: not-allowed;
-  color: var(--on-flat-disabled-color) !important;
-}
-
-:is(.type-flat .alert-button):disabled {
-  cursor: not-allowed;
-}
-
-.disabled:is(.type-flat .alert-button) {
-  cursor: not-allowed;
-}
-
-:is(.type-flat .alert-button) {
-  cursor: pointer;
-}
-
-:is(.type-flat .alert-button):focus {
-  outline: none;
-}
-
-:is(.type-flat .alert-button) .blink {
-  border-color: var(--flat-enabled-border-color);
-  background-color: var(--flat-enabled-background-color);
-  border-width: 1px;
-  border-style: solid;
-  cursor: pointer;
-  --base-border-color: var(--flat-enabled-border-color);
-  --base-background-color: var(--flat-enabled-background-color);
-}
-
-.activated:is(.type-flat .alert-button) .blink {
-  border-color: var(--flat-activated-border-color);
-  background-color: var(--flat-activated-background-color);
-  --base-border-color: var(--flat-activated-border-color);
-  --base-background-color: var(--flat-activated-background-color);
-}
-
-@media (hover:hover) {
-
-:is(.type-flat .alert-button):hover .blink {
-    border-color: color-mix(in srgb, var(--flat-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
-    background-color: color-mix(in srgb, var(--flat-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
-  }
-}
-
-:is(.type-flat .alert-button):active .blink {
-  border-color: var(--flat-pressed-border-color);
-  background-color: var(--flat-pressed-background-color);
-}
-
-:is(.type-flat .alert-button):focus-visible .blink {
-  outline-color: var(--border-focus-color);
-  outline-width: var(--global-size-spacing-border-weight-focusframe);
-  outline-style: solid;
-  border-color: var(--container-global-color);
-  z-index: 1;
-}
-
-:is(.type-flat .alert-button):disabled .blink {
-  border-color: var(--flat-disabled-border-color);
-  background-color: var(--flat-disabled-background-color);
-  cursor: not-allowed;
-  color: var(--on-flat-disabled-color) !important;
-}
-
-.disabled:is(.type-flat .alert-button) .blink {
-  border-color: var(--flat-disabled-border-color);
-  background-color: var(--flat-disabled-background-color);
-  cursor: not-allowed;
-  color: var(--on-flat-disabled-color) !important;
-}
-
-:is(.type-flat .alert-button):disabled {
-  cursor: not-allowed;
-}
-
-.disabled:is(.type-flat .alert-button) {
-  cursor: not-allowed;
-}
-
-.type-normal .alert-button .visible-wrapper,.type-enhanced .alert-button .visible-wrapper {
-    width: 100%;
-  }
-
-:is(.type-normal .alert-button) {
-  cursor: pointer;
-}
-
-:is(.type-normal .alert-button):focus {
-  outline: none;
-}
-
-:is(.type-normal .alert-button) .visible-wrapper {
-  border-color: var(--normal-enabled-border-color);
-  background-color: var(--normal-enabled-background-color);
-  border-width: 1px;
-  border-style: solid;
-  cursor: pointer;
-  --base-border-color: var(--normal-enabled-border-color);
-  --base-background-color: var(--normal-enabled-background-color);
-}
-
-.activated:is(.type-normal .alert-button) .visible-wrapper {
-  border-color: var(--normal-activated-border-color);
-  background-color: var(--normal-activated-background-color);
-  --base-border-color: var(--normal-activated-border-color);
-  --base-background-color: var(--normal-activated-background-color);
-}
-
-@media (hover:hover) {
-
-:is(.type-normal .alert-button):hover .visible-wrapper {
-    border-color: color-mix(in srgb, var(--normal-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
-    background-color: color-mix(in srgb, var(--normal-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
-  }
-}
-
-:is(.type-normal .alert-button):active .visible-wrapper {
-  border-color: var(--normal-pressed-border-color);
-  background-color: var(--normal-pressed-background-color);
-}
-
-:is(.type-normal .alert-button):focus-visible .visible-wrapper {
-  outline-color: var(--border-focus-color);
-  outline-width: var(--global-size-spacing-border-weight-focusframe);
-  outline-style: solid;
-  border-color: var(--container-global-color);
-  z-index: 1;
-}
-
-:is(.type-normal .alert-button):disabled .visible-wrapper {
-  border-color: var(--normal-disabled-border-color);
-  background-color: var(--normal-disabled-background-color);
-  cursor: not-allowed;
-  color: var(--on-normal-disabled-color) !important;
-}
-
-.disabled:is(.type-normal .alert-button) .visible-wrapper {
-  border-color: var(--normal-disabled-border-color);
-  background-color: var(--normal-disabled-background-color);
-  cursor: not-allowed;
-  color: var(--on-normal-disabled-color) !important;
-}
-
-:is(.type-normal .alert-button):disabled {
-  cursor: not-allowed;
-}
-
-.disabled:is(.type-normal .alert-button) {
-  cursor: not-allowed;
-}
-
-:is(.type-normal .alert-button) {
-  cursor: pointer;
-}
-
-:is(.type-normal .alert-button):focus {
-  outline: none;
-}
-
-:is(.type-normal .alert-button) .blink {
-  border-color: var(--normal-enabled-border-color);
-  background-color: var(--normal-enabled-background-color);
-  border-width: 1px;
-  border-style: solid;
-  cursor: pointer;
-  --base-border-color: var(--normal-enabled-border-color);
-  --base-background-color: var(--normal-enabled-background-color);
-}
-
-.activated:is(.type-normal .alert-button) .blink {
-  border-color: var(--normal-activated-border-color);
-  background-color: var(--normal-activated-background-color);
-  --base-border-color: var(--normal-activated-border-color);
-  --base-background-color: var(--normal-activated-background-color);
-}
-
-@media (hover:hover) {
-
-:is(.type-normal .alert-button):hover .blink {
-    border-color: color-mix(in srgb, var(--normal-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
-    background-color: color-mix(in srgb, var(--normal-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
-  }
-}
-
-:is(.type-normal .alert-button):active .blink {
-  border-color: var(--normal-pressed-border-color);
-  background-color: var(--normal-pressed-background-color);
-}
-
-:is(.type-normal .alert-button):focus-visible .blink {
-  outline-color: var(--border-focus-color);
-  outline-width: var(--global-size-spacing-border-weight-focusframe);
-  outline-style: solid;
-  border-color: var(--container-global-color);
-  z-index: 1;
-}
-
-:is(.type-normal .alert-button):disabled .blink {
-  border-color: var(--normal-disabled-border-color);
-  background-color: var(--normal-disabled-background-color);
-  cursor: not-allowed;
-  color: var(--on-normal-disabled-color) !important;
-}
-
-.disabled:is(.type-normal .alert-button) .blink {
-  border-color: var(--normal-disabled-border-color);
-  background-color: var(--normal-disabled-background-color);
-  cursor: not-allowed;
-  color: var(--on-normal-disabled-color) !important;
-}
-
-:is(.type-normal .alert-button):disabled {
-  cursor: not-allowed;
-}
-
-.disabled:is(.type-normal .alert-button) {
-  cursor: not-allowed;
-}
-
-:is(.type-enhanced.alert-type-alarm .alert-button) {
-  cursor: pointer;
-}
-
-:is(.type-enhanced.alert-type-alarm .alert-button):focus {
-  outline: none;
-}
-
-:is(.type-enhanced.alert-type-alarm .alert-button) .blink {
-  border-color: var(--normal-enabled-border-color);
-  background-color: var(--normal-enabled-background-color);
-  border-width: 1px;
-  border-style: solid;
-  cursor: pointer;
-  --base-border-color: var(--normal-enabled-border-color);
-  --base-background-color: var(--normal-enabled-background-color);
-}
-
-.activated:is(.type-enhanced.alert-type-alarm .alert-button) .blink {
-  border-color: var(--normal-activated-border-color);
-  background-color: var(--normal-activated-background-color);
-  --base-border-color: var(--normal-activated-border-color);
-  --base-background-color: var(--normal-activated-background-color);
-}
-
-@media (hover:hover) {
-
-:is(.type-enhanced.alert-type-alarm .alert-button):hover .blink {
-    border-color: color-mix(in srgb, var(--normal-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
-    background-color: color-mix(in srgb, var(--normal-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
-  }
-}
-
-:is(.type-enhanced.alert-type-alarm .alert-button):active .blink {
-  border-color: var(--normal-pressed-border-color);
-  background-color: var(--normal-pressed-background-color);
-}
-
-:is(.type-enhanced.alert-type-alarm .alert-button):focus-visible .blink {
-  outline-color: var(--border-focus-color);
-  outline-width: var(--global-size-spacing-border-weight-focusframe);
-  outline-style: solid;
-  border-color: var(--container-global-color);
-  z-index: 1;
-}
-
-:is(.type-enhanced.alert-type-alarm .alert-button):disabled .blink {
-  border-color: var(--normal-disabled-border-color);
-  background-color: var(--normal-disabled-background-color);
-  cursor: not-allowed;
-  color: var(--on-normal-disabled-color) !important;
-}
-
-.disabled:is(.type-enhanced.alert-type-alarm .alert-button) .blink {
-  border-color: var(--normal-disabled-border-color);
-  background-color: var(--normal-disabled-background-color);
-  cursor: not-allowed;
-  color: var(--on-normal-disabled-color) !important;
-}
-
-:is(.type-enhanced.alert-type-alarm .alert-button):disabled {
-  cursor: not-allowed;
-}
-
-.disabled:is(.type-enhanced.alert-type-alarm .alert-button) {
-  cursor: not-allowed;
-}
-
-:is(.type-enhanced.alert-type-alarm .alert-button) {
-  cursor: pointer;
-}
-
-:is(.type-enhanced.alert-type-alarm .alert-button):focus {
-  outline: none;
-}
-
-:is(.type-enhanced.alert-type-alarm .alert-button) .visible-wrapper {
-  border-color: var(--alarm-enabled-border-color);
-  background-color: var(--alarm-enabled-background-color);
-  border-width: 1px;
-  border-style: solid;
-  cursor: pointer;
-  --base-border-color: var(--alarm-enabled-border-color);
-  --base-background-color: var(--alarm-enabled-background-color);
-}
-
-.activated:is(.type-enhanced.alert-type-alarm .alert-button) .visible-wrapper {
-  border-color: var(--alarm-activated-border-color);
-  background-color: var(--alarm-activated-background-color);
-  --base-border-color: var(--alarm-activated-border-color);
-  --base-background-color: var(--alarm-activated-background-color);
-}
-
-@media (hover:hover) {
-
-:is(.type-enhanced.alert-type-alarm .alert-button):hover .visible-wrapper {
-    border-color: color-mix(in srgb, var(--alarm-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
-    background-color: color-mix(in srgb, var(--alarm-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
-  }
-}
-
-:is(.type-enhanced.alert-type-alarm .alert-button):active .visible-wrapper {
-  border-color: var(--alarm-pressed-border-color);
-  background-color: var(--alarm-pressed-background-color);
-}
-
-:is(.type-enhanced.alert-type-alarm .alert-button):focus-visible .visible-wrapper {
-  outline-color: var(--border-focus-color);
-  outline-width: var(--global-size-spacing-border-weight-focusframe);
-  outline-style: solid;
-  border-color: var(--container-global-color);
-  z-index: 1;
-}
-
-:is(.type-enhanced.alert-type-alarm .alert-button):disabled .visible-wrapper {
-  border-color: var(--alarm-disabled-border-color);
-  background-color: var(--alarm-disabled-background-color);
-  cursor: not-allowed;
-  color: var(--on-alarm-disabled-color) !important;
-}
-
-.disabled:is(.type-enhanced.alert-type-alarm .alert-button) .visible-wrapper {
-  border-color: var(--alarm-disabled-border-color);
-  background-color: var(--alarm-disabled-background-color);
-  cursor: not-allowed;
-  color: var(--on-alarm-disabled-color) !important;
-}
-
-:is(.type-enhanced.alert-type-alarm .alert-button):disabled {
-  cursor: not-allowed;
-}
-
-.disabled:is(.type-enhanced.alert-type-alarm .alert-button) {
-  cursor: not-allowed;
-}
-
-:is(.type-enhanced.alert-type-alarm .alert-button) .visible-wrapper {
-      color: var(--on-alarm-active-color);
-    }
-
-:is(.type-enhanced.alert-type-warning .alert-button) {
-  cursor: pointer;
-}
-
-:is(.type-enhanced.alert-type-warning .alert-button):focus {
-  outline: none;
-}
-
-:is(.type-enhanced.alert-type-warning .alert-button) .blink {
-  border-color: var(--normal-enabled-border-color);
-  background-color: var(--normal-enabled-background-color);
-  border-width: 1px;
-  border-style: solid;
-  cursor: pointer;
-  --base-border-color: var(--normal-enabled-border-color);
-  --base-background-color: var(--normal-enabled-background-color);
-}
-
-.activated:is(.type-enhanced.alert-type-warning .alert-button) .blink {
-  border-color: var(--normal-activated-border-color);
-  background-color: var(--normal-activated-background-color);
-  --base-border-color: var(--normal-activated-border-color);
-  --base-background-color: var(--normal-activated-background-color);
-}
-
-@media (hover:hover) {
-
-:is(.type-enhanced.alert-type-warning .alert-button):hover .blink {
-    border-color: color-mix(in srgb, var(--normal-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
-    background-color: color-mix(in srgb, var(--normal-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
-  }
-}
-
-:is(.type-enhanced.alert-type-warning .alert-button):active .blink {
-  border-color: var(--normal-pressed-border-color);
-  background-color: var(--normal-pressed-background-color);
-}
-
-:is(.type-enhanced.alert-type-warning .alert-button):focus-visible .blink {
-  outline-color: var(--border-focus-color);
-  outline-width: var(--global-size-spacing-border-weight-focusframe);
-  outline-style: solid;
-  border-color: var(--container-global-color);
-  z-index: 1;
-}
-
-:is(.type-enhanced.alert-type-warning .alert-button):disabled .blink {
-  border-color: var(--normal-disabled-border-color);
-  background-color: var(--normal-disabled-background-color);
-  cursor: not-allowed;
-  color: var(--on-normal-disabled-color) !important;
-}
-
-.disabled:is(.type-enhanced.alert-type-warning .alert-button) .blink {
-  border-color: var(--normal-disabled-border-color);
-  background-color: var(--normal-disabled-background-color);
-  cursor: not-allowed;
-  color: var(--on-normal-disabled-color) !important;
-}
-
-:is(.type-enhanced.alert-type-warning .alert-button):disabled {
-  cursor: not-allowed;
-}
-
-.disabled:is(.type-enhanced.alert-type-warning .alert-button) {
-  cursor: not-allowed;
-}
-
-:is(.type-enhanced.alert-type-warning .alert-button) {
-  cursor: pointer;
-}
-
-:is(.type-enhanced.alert-type-warning .alert-button):focus {
-  outline: none;
-}
-
-:is(.type-enhanced.alert-type-warning .alert-button) .visible-wrapper {
-  border-color: var(--warning-enabled-border-color);
-  background-color: var(--warning-enabled-background-color);
-  border-width: 1px;
-  border-style: solid;
-  cursor: pointer;
-  --base-border-color: var(--warning-enabled-border-color);
-  --base-background-color: var(--warning-enabled-background-color);
-}
-
-.activated:is(.type-enhanced.alert-type-warning .alert-button) .visible-wrapper {
-  border-color: var(--warning-activated-border-color);
-  background-color: var(--warning-activated-background-color);
-  --base-border-color: var(--warning-activated-border-color);
-  --base-background-color: var(--warning-activated-background-color);
-}
-
-@media (hover:hover) {
-
-:is(.type-enhanced.alert-type-warning .alert-button):hover .visible-wrapper {
-    border-color: color-mix(in srgb, var(--warning-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
-    background-color: color-mix(in srgb, var(--warning-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
-  }
-}
-
-:is(.type-enhanced.alert-type-warning .alert-button):active .visible-wrapper {
-  border-color: var(--warning-pressed-border-color);
-  background-color: var(--warning-pressed-background-color);
-}
-
-:is(.type-enhanced.alert-type-warning .alert-button):focus-visible .visible-wrapper {
-  outline-color: var(--border-focus-color);
-  outline-width: var(--global-size-spacing-border-weight-focusframe);
-  outline-style: solid;
-  border-color: var(--container-global-color);
-  z-index: 1;
-}
-
-:is(.type-enhanced.alert-type-warning .alert-button):disabled .visible-wrapper {
-  border-color: var(--warning-disabled-border-color);
-  background-color: var(--warning-disabled-background-color);
-  cursor: not-allowed;
-  color: var(--on-warning-disabled-color) !important;
-}
-
-.disabled:is(.type-enhanced.alert-type-warning .alert-button) .visible-wrapper {
-  border-color: var(--warning-disabled-border-color);
-  background-color: var(--warning-disabled-background-color);
-  cursor: not-allowed;
-  color: var(--on-warning-disabled-color) !important;
-}
-
-:is(.type-enhanced.alert-type-warning .alert-button):disabled {
-  cursor: not-allowed;
-}
-
-.disabled:is(.type-enhanced.alert-type-warning .alert-button) {
-  cursor: not-allowed;
-}
-
-:is(.type-enhanced.alert-type-warning .alert-button) .visible-wrapper {
-      color: var(--on-warning-active-color);
-    }
-
-:is(.type-enhanced.alert-type-caution .alert-button) {
-  cursor: pointer;
-}
-
-:is(.type-enhanced.alert-type-caution .alert-button):focus {
-  outline: none;
-}
-
-:is(.type-enhanced.alert-type-caution .alert-button) .blink {
-  border-color: var(--normal-enabled-border-color);
-  background-color: var(--normal-enabled-background-color);
-  border-width: 1px;
-  border-style: solid;
-  cursor: pointer;
-  --base-border-color: var(--normal-enabled-border-color);
-  --base-background-color: var(--normal-enabled-background-color);
-}
-
-.activated:is(.type-enhanced.alert-type-caution .alert-button) .blink {
-  border-color: var(--normal-activated-border-color);
-  background-color: var(--normal-activated-background-color);
-  --base-border-color: var(--normal-activated-border-color);
-  --base-background-color: var(--normal-activated-background-color);
-}
-
-@media (hover:hover) {
-
-:is(.type-enhanced.alert-type-caution .alert-button):hover .blink {
-    border-color: color-mix(in srgb, var(--normal-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
-    background-color: color-mix(in srgb, var(--normal-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
-  }
-}
-
-:is(.type-enhanced.alert-type-caution .alert-button):active .blink {
-  border-color: var(--normal-pressed-border-color);
-  background-color: var(--normal-pressed-background-color);
-}
-
-:is(.type-enhanced.alert-type-caution .alert-button):focus-visible .blink {
-  outline-color: var(--border-focus-color);
-  outline-width: var(--global-size-spacing-border-weight-focusframe);
-  outline-style: solid;
-  border-color: var(--container-global-color);
-  z-index: 1;
-}
-
-:is(.type-enhanced.alert-type-caution .alert-button):disabled .blink {
-  border-color: var(--normal-disabled-border-color);
-  background-color: var(--normal-disabled-background-color);
-  cursor: not-allowed;
-  color: var(--on-normal-disabled-color) !important;
-}
-
-.disabled:is(.type-enhanced.alert-type-caution .alert-button) .blink {
-  border-color: var(--normal-disabled-border-color);
-  background-color: var(--normal-disabled-background-color);
-  cursor: not-allowed;
-  color: var(--on-normal-disabled-color) !important;
-}
-
-:is(.type-enhanced.alert-type-caution .alert-button):disabled {
-  cursor: not-allowed;
-}
-
-.disabled:is(.type-enhanced.alert-type-caution .alert-button) {
-  cursor: not-allowed;
-}
-
-:is(.type-enhanced.alert-type-caution .alert-button) {
-  cursor: pointer;
-}
-
-:is(.type-enhanced.alert-type-caution .alert-button):focus {
-  outline: none;
-}
-
-:is(.type-enhanced.alert-type-caution .alert-button) .visible-wrapper {
-  border-color: var(--caution-enabled-border-color);
-  background-color: var(--caution-enabled-background-color);
-  border-width: 1px;
-  border-style: solid;
-  cursor: pointer;
-  --base-border-color: var(--caution-enabled-border-color);
-  --base-background-color: var(--caution-enabled-background-color);
-}
-
-.activated:is(.type-enhanced.alert-type-caution .alert-button) .visible-wrapper {
-  border-color: var(--caution-activated-border-color);
-  background-color: var(--caution-activated-background-color);
-  --base-border-color: var(--caution-activated-border-color);
-  --base-background-color: var(--caution-activated-background-color);
-}
-
-@media (hover:hover) {
-
-:is(.type-enhanced.alert-type-caution .alert-button):hover .visible-wrapper {
-    border-color: color-mix(in srgb, var(--caution-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
-    background-color: color-mix(in srgb, var(--caution-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
-  }
-}
-
-:is(.type-enhanced.alert-type-caution .alert-button):active .visible-wrapper {
-  border-color: var(--caution-pressed-border-color);
-  background-color: var(--caution-pressed-background-color);
-}
-
-:is(.type-enhanced.alert-type-caution .alert-button):focus-visible .visible-wrapper {
-  outline-color: var(--border-focus-color);
-  outline-width: var(--global-size-spacing-border-weight-focusframe);
-  outline-style: solid;
-  border-color: var(--container-global-color);
-  z-index: 1;
-}
-
-:is(.type-enhanced.alert-type-caution .alert-button):disabled .visible-wrapper {
-  border-color: var(--caution-disabled-border-color);
-  background-color: var(--caution-disabled-background-color);
-  cursor: not-allowed;
-  color: var(--on-caution-disabled-color) !important;
-}
-
-.disabled:is(.type-enhanced.alert-type-caution .alert-button) .visible-wrapper {
-  border-color: var(--caution-disabled-border-color);
-  background-color: var(--caution-disabled-background-color);
-  cursor: not-allowed;
-  color: var(--on-caution-disabled-color) !important;
-}
-
-:is(.type-enhanced.alert-type-caution .alert-button):disabled {
-  cursor: not-allowed;
-}
-
-.disabled:is(.type-enhanced.alert-type-caution .alert-button) {
-  cursor: not-allowed;
-}
-
-:is(.type-enhanced.alert-type-caution .alert-button) .visible-wrapper {
-      color: var(--on-caution-active-color);
-    }
-
-:is(.type-enhanced.alert-type-level-critical .alert-button) {
-  cursor: pointer;
-}
-
-:is(.type-enhanced.alert-type-level-critical .alert-button):focus {
-  outline: none;
-}
-
-:is(.type-enhanced.alert-type-level-critical .alert-button) .blink {
-  border-color: var(--normal-enabled-border-color);
-  background-color: var(--normal-enabled-background-color);
-  border-width: 1px;
-  border-style: solid;
-  cursor: pointer;
-  --base-border-color: var(--normal-enabled-border-color);
-  --base-background-color: var(--normal-enabled-background-color);
-}
-
-.activated:is(.type-enhanced.alert-type-level-critical .alert-button) .blink {
-  border-color: var(--normal-activated-border-color);
-  background-color: var(--normal-activated-background-color);
-  --base-border-color: var(--normal-activated-border-color);
-  --base-background-color: var(--normal-activated-background-color);
-}
-
-@media (hover:hover) {
-
-:is(.type-enhanced.alert-type-level-critical .alert-button):hover .blink {
-    border-color: color-mix(in srgb, var(--normal-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
-    background-color: color-mix(in srgb, var(--normal-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
-  }
-}
-
-:is(.type-enhanced.alert-type-level-critical .alert-button):active .blink {
-  border-color: var(--normal-pressed-border-color);
-  background-color: var(--normal-pressed-background-color);
-}
-
-:is(.type-enhanced.alert-type-level-critical .alert-button):focus-visible .blink {
-  outline-color: var(--border-focus-color);
-  outline-width: var(--global-size-spacing-border-weight-focusframe);
-  outline-style: solid;
-  border-color: var(--container-global-color);
-  z-index: 1;
-}
-
-:is(.type-enhanced.alert-type-level-critical .alert-button):disabled .blink {
-  border-color: var(--normal-disabled-border-color);
-  background-color: var(--normal-disabled-background-color);
-  cursor: not-allowed;
-  color: var(--on-normal-disabled-color) !important;
-}
-
-.disabled:is(.type-enhanced.alert-type-level-critical .alert-button) .blink {
-  border-color: var(--normal-disabled-border-color);
-  background-color: var(--normal-disabled-background-color);
-  cursor: not-allowed;
-  color: var(--on-normal-disabled-color) !important;
-}
-
-:is(.type-enhanced.alert-type-level-critical .alert-button):disabled {
-  cursor: not-allowed;
-}
-
-.disabled:is(.type-enhanced.alert-type-level-critical .alert-button) {
-  cursor: not-allowed;
-}
-
-:is(.type-enhanced.alert-type-level-critical .alert-button) {
-  cursor: pointer;
-}
-
-:is(.type-enhanced.alert-type-level-critical .alert-button):focus {
-  outline: none;
-}
-
-:is(.type-enhanced.alert-type-level-critical .alert-button) .visible-wrapper {
-  border-color: var(--critical-enabled-border-color);
-  background-color: var(--critical-enabled-background-color);
-  border-width: 1px;
-  border-style: solid;
-  cursor: pointer;
-  --base-border-color: var(--critical-enabled-border-color);
-  --base-background-color: var(--critical-enabled-background-color);
-}
-
-.activated:is(.type-enhanced.alert-type-level-critical .alert-button) .visible-wrapper {
-  border-color: var(--critical-activated-border-color);
-  background-color: var(--critical-activated-background-color);
-  --base-border-color: var(--critical-activated-border-color);
-  --base-background-color: var(--critical-activated-background-color);
-}
-
-@media (hover:hover) {
-
-:is(.type-enhanced.alert-type-level-critical .alert-button):hover .visible-wrapper {
-    border-color: color-mix(in srgb, var(--critical-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
-    background-color: color-mix(in srgb, var(--critical-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
-  }
-}
-
-:is(.type-enhanced.alert-type-level-critical .alert-button):active .visible-wrapper {
-  border-color: var(--critical-pressed-border-color);
-  background-color: var(--critical-pressed-background-color);
-}
-
-:is(.type-enhanced.alert-type-level-critical .alert-button):focus-visible .visible-wrapper {
-  outline-color: var(--border-focus-color);
-  outline-width: var(--global-size-spacing-border-weight-focusframe);
-  outline-style: solid;
-  border-color: var(--container-global-color);
-  z-index: 1;
-}
-
-:is(.type-enhanced.alert-type-level-critical .alert-button):disabled .visible-wrapper {
-  border-color: var(--critical-disabled-border-color);
-  background-color: var(--critical-disabled-background-color);
-  cursor: not-allowed;
-  color: var(--on-critical-disabled-color) !important;
-}
-
-.disabled:is(.type-enhanced.alert-type-level-critical .alert-button) .visible-wrapper {
-  border-color: var(--critical-disabled-border-color);
-  background-color: var(--critical-disabled-background-color);
-  cursor: not-allowed;
-  color: var(--on-critical-disabled-color) !important;
-}
-
-:is(.type-enhanced.alert-type-level-critical .alert-button):disabled {
-  cursor: not-allowed;
-}
-
-.disabled:is(.type-enhanced.alert-type-level-critical .alert-button) {
-  cursor: not-allowed;
-}
-
-:is(.type-enhanced.alert-type-level-critical .alert-button) .visible-wrapper {
-      color: var(--on-critical-active-color);
-    }
-
-:is(.type-enhanced.alert-type-level-high .alert-button) {
-  cursor: pointer;
-}
-
-:is(.type-enhanced.alert-type-level-high .alert-button):focus {
-  outline: none;
-}
-
-:is(.type-enhanced.alert-type-level-high .alert-button) .blink {
-  border-color: var(--normal-enabled-border-color);
-  background-color: var(--normal-enabled-background-color);
-  border-width: 1px;
-  border-style: solid;
-  cursor: pointer;
-  --base-border-color: var(--normal-enabled-border-color);
-  --base-background-color: var(--normal-enabled-background-color);
-}
-
-.activated:is(.type-enhanced.alert-type-level-high .alert-button) .blink {
-  border-color: var(--normal-activated-border-color);
-  background-color: var(--normal-activated-background-color);
-  --base-border-color: var(--normal-activated-border-color);
-  --base-background-color: var(--normal-activated-background-color);
-}
-
-@media (hover:hover) {
-
-:is(.type-enhanced.alert-type-level-high .alert-button):hover .blink {
-    border-color: color-mix(in srgb, var(--normal-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
-    background-color: color-mix(in srgb, var(--normal-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
-  }
-}
-
-:is(.type-enhanced.alert-type-level-high .alert-button):active .blink {
-  border-color: var(--normal-pressed-border-color);
-  background-color: var(--normal-pressed-background-color);
-}
-
-:is(.type-enhanced.alert-type-level-high .alert-button):focus-visible .blink {
-  outline-color: var(--border-focus-color);
-  outline-width: var(--global-size-spacing-border-weight-focusframe);
-  outline-style: solid;
-  border-color: var(--container-global-color);
-  z-index: 1;
-}
-
-:is(.type-enhanced.alert-type-level-high .alert-button):disabled .blink {
-  border-color: var(--normal-disabled-border-color);
-  background-color: var(--normal-disabled-background-color);
-  cursor: not-allowed;
-  color: var(--on-normal-disabled-color) !important;
-}
-
-.disabled:is(.type-enhanced.alert-type-level-high .alert-button) .blink {
-  border-color: var(--normal-disabled-border-color);
-  background-color: var(--normal-disabled-background-color);
-  cursor: not-allowed;
-  color: var(--on-normal-disabled-color) !important;
-}
-
-:is(.type-enhanced.alert-type-level-high .alert-button):disabled {
-  cursor: not-allowed;
-}
-
-.disabled:is(.type-enhanced.alert-type-level-high .alert-button) {
-  cursor: not-allowed;
-}
-
-:is(.type-enhanced.alert-type-level-high .alert-button) {
-  cursor: pointer;
-}
-
-:is(.type-enhanced.alert-type-level-high .alert-button):focus {
-  outline: none;
-}
-
-:is(.type-enhanced.alert-type-level-high .alert-button) .visible-wrapper {
-  border-color: var(--alarm-enabled-border-color);
-  background-color: var(--alarm-enabled-background-color);
-  border-width: 1px;
-  border-style: solid;
-  cursor: pointer;
-  --base-border-color: var(--alarm-enabled-border-color);
-  --base-background-color: var(--alarm-enabled-background-color);
-}
-
-.activated:is(.type-enhanced.alert-type-level-high .alert-button) .visible-wrapper {
-  border-color: var(--alarm-activated-border-color);
-  background-color: var(--alarm-activated-background-color);
-  --base-border-color: var(--alarm-activated-border-color);
-  --base-background-color: var(--alarm-activated-background-color);
-}
-
-@media (hover:hover) {
-
-:is(.type-enhanced.alert-type-level-high .alert-button):hover .visible-wrapper {
-    border-color: color-mix(in srgb, var(--alarm-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
-    background-color: color-mix(in srgb, var(--alarm-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
-  }
-}
-
-:is(.type-enhanced.alert-type-level-high .alert-button):active .visible-wrapper {
-  border-color: var(--alarm-pressed-border-color);
-  background-color: var(--alarm-pressed-background-color);
-}
-
-:is(.type-enhanced.alert-type-level-high .alert-button):focus-visible .visible-wrapper {
-  outline-color: var(--border-focus-color);
-  outline-width: var(--global-size-spacing-border-weight-focusframe);
-  outline-style: solid;
-  border-color: var(--container-global-color);
-  z-index: 1;
-}
-
-:is(.type-enhanced.alert-type-level-high .alert-button):disabled .visible-wrapper {
-  border-color: var(--alarm-disabled-border-color);
-  background-color: var(--alarm-disabled-background-color);
-  cursor: not-allowed;
-  color: var(--on-alarm-disabled-color) !important;
-}
-
-.disabled:is(.type-enhanced.alert-type-level-high .alert-button) .visible-wrapper {
-  border-color: var(--alarm-disabled-border-color);
-  background-color: var(--alarm-disabled-background-color);
-  cursor: not-allowed;
-  color: var(--on-alarm-disabled-color) !important;
-}
-
-:is(.type-enhanced.alert-type-level-high .alert-button):disabled {
-  cursor: not-allowed;
-}
-
-.disabled:is(.type-enhanced.alert-type-level-high .alert-button) {
-  cursor: not-allowed;
-}
-
-:is(.type-enhanced.alert-type-level-high .alert-button) .visible-wrapper {
-      color: var(--on-alarm-active-color);
-    }
-
-:is(.type-enhanced.alert-type-level-medium .alert-button) {
-  cursor: pointer;
-}
-
-:is(.type-enhanced.alert-type-level-medium .alert-button):focus {
-  outline: none;
-}
-
-:is(.type-enhanced.alert-type-level-medium .alert-button) .blink {
-  border-color: var(--normal-enabled-border-color);
-  background-color: var(--normal-enabled-background-color);
-  border-width: 1px;
-  border-style: solid;
-  cursor: pointer;
-  --base-border-color: var(--normal-enabled-border-color);
-  --base-background-color: var(--normal-enabled-background-color);
-}
-
-.activated:is(.type-enhanced.alert-type-level-medium .alert-button) .blink {
-  border-color: var(--normal-activated-border-color);
-  background-color: var(--normal-activated-background-color);
-  --base-border-color: var(--normal-activated-border-color);
-  --base-background-color: var(--normal-activated-background-color);
-}
-
-@media (hover:hover) {
-
-:is(.type-enhanced.alert-type-level-medium .alert-button):hover .blink {
-    border-color: color-mix(in srgb, var(--normal-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
-    background-color: color-mix(in srgb, var(--normal-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
-  }
-}
-
-:is(.type-enhanced.alert-type-level-medium .alert-button):active .blink {
-  border-color: var(--normal-pressed-border-color);
-  background-color: var(--normal-pressed-background-color);
-}
-
-:is(.type-enhanced.alert-type-level-medium .alert-button):focus-visible .blink {
-  outline-color: var(--border-focus-color);
-  outline-width: var(--global-size-spacing-border-weight-focusframe);
-  outline-style: solid;
-  border-color: var(--container-global-color);
-  z-index: 1;
-}
-
-:is(.type-enhanced.alert-type-level-medium .alert-button):disabled .blink {
-  border-color: var(--normal-disabled-border-color);
-  background-color: var(--normal-disabled-background-color);
-  cursor: not-allowed;
-  color: var(--on-normal-disabled-color) !important;
-}
-
-.disabled:is(.type-enhanced.alert-type-level-medium .alert-button) .blink {
-  border-color: var(--normal-disabled-border-color);
-  background-color: var(--normal-disabled-background-color);
-  cursor: not-allowed;
-  color: var(--on-normal-disabled-color) !important;
-}
-
-:is(.type-enhanced.alert-type-level-medium .alert-button):disabled {
-  cursor: not-allowed;
-}
-
-.disabled:is(.type-enhanced.alert-type-level-medium .alert-button) {
-  cursor: not-allowed;
-}
-
-:is(.type-enhanced.alert-type-level-medium .alert-button) {
-  cursor: pointer;
-}
-
-:is(.type-enhanced.alert-type-level-medium .alert-button):focus {
-  outline: none;
-}
-
-:is(.type-enhanced.alert-type-level-medium .alert-button) .visible-wrapper {
-  border-color: var(--warning-enabled-border-color);
-  background-color: var(--warning-enabled-background-color);
-  border-width: 1px;
-  border-style: solid;
-  cursor: pointer;
-  --base-border-color: var(--warning-enabled-border-color);
-  --base-background-color: var(--warning-enabled-background-color);
-}
-
-.activated:is(.type-enhanced.alert-type-level-medium .alert-button) .visible-wrapper {
-  border-color: var(--warning-activated-border-color);
-  background-color: var(--warning-activated-background-color);
-  --base-border-color: var(--warning-activated-border-color);
-  --base-background-color: var(--warning-activated-background-color);
-}
-
-@media (hover:hover) {
-
-:is(.type-enhanced.alert-type-level-medium .alert-button):hover .visible-wrapper {
-    border-color: color-mix(in srgb, var(--warning-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
-    background-color: color-mix(in srgb, var(--warning-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
-  }
-}
-
-:is(.type-enhanced.alert-type-level-medium .alert-button):active .visible-wrapper {
-  border-color: var(--warning-pressed-border-color);
-  background-color: var(--warning-pressed-background-color);
-}
-
-:is(.type-enhanced.alert-type-level-medium .alert-button):focus-visible .visible-wrapper {
-  outline-color: var(--border-focus-color);
-  outline-width: var(--global-size-spacing-border-weight-focusframe);
-  outline-style: solid;
-  border-color: var(--container-global-color);
-  z-index: 1;
-}
-
-:is(.type-enhanced.alert-type-level-medium .alert-button):disabled .visible-wrapper {
-  border-color: var(--warning-disabled-border-color);
-  background-color: var(--warning-disabled-background-color);
-  cursor: not-allowed;
-  color: var(--on-warning-disabled-color) !important;
-}
-
-.disabled:is(.type-enhanced.alert-type-level-medium .alert-button) .visible-wrapper {
-  border-color: var(--warning-disabled-border-color);
-  background-color: var(--warning-disabled-background-color);
-  cursor: not-allowed;
-  color: var(--on-warning-disabled-color) !important;
-}
-
-:is(.type-enhanced.alert-type-level-medium .alert-button):disabled {
-  cursor: not-allowed;
-}
-
-.disabled:is(.type-enhanced.alert-type-level-medium .alert-button) {
-  cursor: not-allowed;
-}
-
-:is(.type-enhanced.alert-type-level-medium .alert-button) .visible-wrapper {
-      color: var(--on-warning-active-color);
-    }
-
-:is(.type-enhanced.alert-type-level-low .alert-button) {
-  cursor: pointer;
-}
-
-:is(.type-enhanced.alert-type-level-low .alert-button):focus {
-  outline: none;
-}
-
-:is(.type-enhanced.alert-type-level-low .alert-button) .blink {
-  border-color: var(--normal-enabled-border-color);
-  background-color: var(--normal-enabled-background-color);
-  border-width: 1px;
-  border-style: solid;
-  cursor: pointer;
-  --base-border-color: var(--normal-enabled-border-color);
-  --base-background-color: var(--normal-enabled-background-color);
-}
-
-.activated:is(.type-enhanced.alert-type-level-low .alert-button) .blink {
-  border-color: var(--normal-activated-border-color);
-  background-color: var(--normal-activated-background-color);
-  --base-border-color: var(--normal-activated-border-color);
-  --base-background-color: var(--normal-activated-background-color);
-}
-
-@media (hover:hover) {
-
-:is(.type-enhanced.alert-type-level-low .alert-button):hover .blink {
-    border-color: color-mix(in srgb, var(--normal-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
-    background-color: color-mix(in srgb, var(--normal-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
-  }
-}
-
-:is(.type-enhanced.alert-type-level-low .alert-button):active .blink {
-  border-color: var(--normal-pressed-border-color);
-  background-color: var(--normal-pressed-background-color);
-}
-
-:is(.type-enhanced.alert-type-level-low .alert-button):focus-visible .blink {
-  outline-color: var(--border-focus-color);
-  outline-width: var(--global-size-spacing-border-weight-focusframe);
-  outline-style: solid;
-  border-color: var(--container-global-color);
-  z-index: 1;
-}
-
-:is(.type-enhanced.alert-type-level-low .alert-button):disabled .blink {
-  border-color: var(--normal-disabled-border-color);
-  background-color: var(--normal-disabled-background-color);
-  cursor: not-allowed;
-  color: var(--on-normal-disabled-color) !important;
-}
-
-.disabled:is(.type-enhanced.alert-type-level-low .alert-button) .blink {
-  border-color: var(--normal-disabled-border-color);
-  background-color: var(--normal-disabled-background-color);
-  cursor: not-allowed;
-  color: var(--on-normal-disabled-color) !important;
-}
-
-:is(.type-enhanced.alert-type-level-low .alert-button):disabled {
-  cursor: not-allowed;
-}
-
-.disabled:is(.type-enhanced.alert-type-level-low .alert-button) {
-  cursor: not-allowed;
-}
-
-:is(.type-enhanced.alert-type-level-low .alert-button) {
-  cursor: pointer;
-}
-
-:is(.type-enhanced.alert-type-level-low .alert-button):focus {
-  outline: none;
-}
-
-:is(.type-enhanced.alert-type-level-low .alert-button) .visible-wrapper {
-  border-color: var(--caution-enabled-border-color);
-  background-color: var(--caution-enabled-background-color);
-  border-width: 1px;
-  border-style: solid;
-  cursor: pointer;
-  --base-border-color: var(--caution-enabled-border-color);
-  --base-background-color: var(--caution-enabled-background-color);
-}
-
-.activated:is(.type-enhanced.alert-type-level-low .alert-button) .visible-wrapper {
-  border-color: var(--caution-activated-border-color);
-  background-color: var(--caution-activated-background-color);
-  --base-border-color: var(--caution-activated-border-color);
-  --base-background-color: var(--caution-activated-background-color);
-}
-
-@media (hover:hover) {
-
-:is(.type-enhanced.alert-type-level-low .alert-button):hover .visible-wrapper {
-    border-color: color-mix(in srgb, var(--caution-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
-    background-color: color-mix(in srgb, var(--caution-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
-  }
-}
-
-:is(.type-enhanced.alert-type-level-low .alert-button):active .visible-wrapper {
-  border-color: var(--caution-pressed-border-color);
-  background-color: var(--caution-pressed-background-color);
-}
-
-:is(.type-enhanced.alert-type-level-low .alert-button):focus-visible .visible-wrapper {
-  outline-color: var(--border-focus-color);
-  outline-width: var(--global-size-spacing-border-weight-focusframe);
-  outline-style: solid;
-  border-color: var(--container-global-color);
-  z-index: 1;
-}
-
-:is(.type-enhanced.alert-type-level-low .alert-button):disabled .visible-wrapper {
-  border-color: var(--caution-disabled-border-color);
-  background-color: var(--caution-disabled-background-color);
-  cursor: not-allowed;
-  color: var(--on-caution-disabled-color) !important;
-}
-
-.disabled:is(.type-enhanced.alert-type-level-low .alert-button) .visible-wrapper {
-  border-color: var(--caution-disabled-border-color);
-  background-color: var(--caution-disabled-background-color);
-  cursor: not-allowed;
-  color: var(--on-caution-disabled-color) !important;
-}
-
-:is(.type-enhanced.alert-type-level-low .alert-button):disabled {
-  cursor: not-allowed;
-}
-
-.disabled:is(.type-enhanced.alert-type-level-low .alert-button) {
-  cursor: not-allowed;
-}
-
-:is(.type-enhanced.alert-type-level-low .alert-button) .visible-wrapper {
-      color: var(--on-caution-active-color);
-    }
-
-:is(.type-enhanced.alert-type-level-diagnostic .alert-button) {
-  cursor: pointer;
-}
-
-:is(.type-enhanced.alert-type-level-diagnostic .alert-button):focus {
-  outline: none;
-}
-
-:is(.type-enhanced.alert-type-level-diagnostic .alert-button) .blink {
-  border-color: var(--normal-enabled-border-color);
-  background-color: var(--normal-enabled-background-color);
-  border-width: 1px;
-  border-style: solid;
-  cursor: pointer;
-  --base-border-color: var(--normal-enabled-border-color);
-  --base-background-color: var(--normal-enabled-background-color);
-}
-
-.activated:is(.type-enhanced.alert-type-level-diagnostic .alert-button) .blink {
-  border-color: var(--normal-activated-border-color);
-  background-color: var(--normal-activated-background-color);
-  --base-border-color: var(--normal-activated-border-color);
-  --base-background-color: var(--normal-activated-background-color);
-}
-
-@media (hover:hover) {
-
-:is(.type-enhanced.alert-type-level-diagnostic .alert-button):hover .blink {
-    border-color: color-mix(in srgb, var(--normal-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
-    background-color: color-mix(in srgb, var(--normal-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
-  }
-}
-
-:is(.type-enhanced.alert-type-level-diagnostic .alert-button):active .blink {
-  border-color: var(--normal-pressed-border-color);
-  background-color: var(--normal-pressed-background-color);
-}
-
-:is(.type-enhanced.alert-type-level-diagnostic .alert-button):focus-visible .blink {
-  outline-color: var(--border-focus-color);
-  outline-width: var(--global-size-spacing-border-weight-focusframe);
-  outline-style: solid;
-  border-color: var(--container-global-color);
-  z-index: 1;
-}
-
-:is(.type-enhanced.alert-type-level-diagnostic .alert-button):disabled .blink {
-  border-color: var(--normal-disabled-border-color);
-  background-color: var(--normal-disabled-background-color);
-  cursor: not-allowed;
-  color: var(--on-normal-disabled-color) !important;
-}
-
-.disabled:is(.type-enhanced.alert-type-level-diagnostic .alert-button) .blink {
-  border-color: var(--normal-disabled-border-color);
-  background-color: var(--normal-disabled-background-color);
-  cursor: not-allowed;
-  color: var(--on-normal-disabled-color) !important;
-}
-
-:is(.type-enhanced.alert-type-level-diagnostic .alert-button):disabled {
-  cursor: not-allowed;
-}
-
-.disabled:is(.type-enhanced.alert-type-level-diagnostic .alert-button) {
-  cursor: not-allowed;
-}
-
-:is(.type-enhanced.alert-type-level-diagnostic .alert-button) {
-  cursor: pointer;
-}
-
-:is(.type-enhanced.alert-type-level-diagnostic .alert-button):focus {
-  outline: none;
-}
-
-:is(.type-enhanced.alert-type-level-diagnostic .alert-button) .visible-wrapper {
-  border-color: var(--notification-enabled-border-color);
-  background-color: var(--notification-enabled-background-color);
-  border-width: 1px;
-  border-style: solid;
-  cursor: pointer;
-  --base-border-color: var(--notification-enabled-border-color);
-  --base-background-color: var(--notification-enabled-background-color);
-}
-
-.activated:is(.type-enhanced.alert-type-level-diagnostic .alert-button) .visible-wrapper {
-  border-color: var(--notification-activated-border-color);
-  background-color: var(--notification-activated-background-color);
-  --base-border-color: var(--notification-activated-border-color);
-  --base-background-color: var(--notification-activated-background-color);
-}
-
-@media (hover:hover) {
-
-:is(.type-enhanced.alert-type-level-diagnostic .alert-button):hover .visible-wrapper {
-    border-color: color-mix(in srgb, var(--notification-hover-border-color) calc(var(--obc-can-hover) * 100%), var(--base-border-color));
-    background-color: color-mix(in srgb, var(--notification-hover-background-color) calc(var(--obc-can-hover) * 100%), var(--base-background-color));
-  }
-}
-
-:is(.type-enhanced.alert-type-level-diagnostic .alert-button):active .visible-wrapper {
-  border-color: var(--notification-pressed-border-color);
-  background-color: var(--notification-pressed-background-color);
-}
-
-:is(.type-enhanced.alert-type-level-diagnostic .alert-button):focus-visible .visible-wrapper {
-  outline-color: var(--border-focus-color);
-  outline-width: var(--global-size-spacing-border-weight-focusframe);
-  outline-style: solid;
-  border-color: var(--container-global-color);
-  z-index: 1;
-}
-
-:is(.type-enhanced.alert-type-level-diagnostic .alert-button):disabled .visible-wrapper {
-  border-color: var(--notification-disabled-border-color);
-  background-color: var(--notification-disabled-background-color);
-  cursor: not-allowed;
-  color: var(--on-notification-disabled-color) !important;
-}
-
-.disabled:is(.type-enhanced.alert-type-level-diagnostic .alert-button) .visible-wrapper {
-  border-color: var(--notification-disabled-border-color);
-  background-color: var(--notification-disabled-background-color);
-  cursor: not-allowed;
-  color: var(--on-notification-disabled-color) !important;
-}
-
-:is(.type-enhanced.alert-type-level-diagnostic .alert-button):disabled {
-  cursor: not-allowed;
-}
-
-.disabled:is(.type-enhanced.alert-type-level-diagnostic .alert-button) {
-  cursor: not-allowed;
-}
-
-:is(.type-enhanced.alert-type-level-diagnostic .alert-button) .visible-wrapper {
-      color: var(--on-notification-active-color);
-    }
-
-.alert-button .visible-wrapper,.alert-button .blink {
-    border-radius: var(--ui-components-button-border-radius-top-left)
-      var(--ui-components-button-border-radius-top-right)
-      var(--ui-components-button-border-radius-bottom-right)
-      var(--ui-components-button-border-radius-bottom-left);
-    height: var(--ui-components-icon-button-visual-target-size);
-    min-width: var(--ui-components-icon-button-visual-target-size);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    color: var(--on-normal-neutral-color);
-    font-family: var(--global-typography-font-family);
-    font-weight: var(--global-typography-ui-button-font-weight);
-    font-size: var(--global-typography-ui-button-font-size);
-    line-height: var(--global-typography-ui-button-line-height);
-    font-feature-settings:
-    "liga" off,
-    "clig" off,
-    "ss04" on;
-  }
-
-.has-silence :is(.alert-button .visible-wrapper,.alert-button .blink) {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-
-.type-flat .alert-button .visible-wrapper {
-    color: var(--on-flat-neutral-color);
-  }
-
-.alert-button .blink {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    margin: auto;
-  }
-
-.type-flat :is(.alert-button .blink) {
-      width: min-content;
-    }
-
-:is(.flash-fast .alert-button) .visible-wrapper {
-    opacity: var(--flash-fast-on);
-  }
-
-:is(.flash-fast .alert-button) .blink {
-    opacity: var(--flash-fast-off);
-  }
-
-:is(.flash-slow .alert-button) .visible-wrapper {
-    opacity: var(--flash-slow-on);
-  }
-
-:is(.flash-slow .alert-button) .blink {
-    opacity: var(--flash-slow-off);
-  }
-
-:is(.flash-very-slow .alert-button) .visible-wrapper {
-    opacity: var(--flash-very-slow-on);
-  }
-
-:is(.flash-very-slow .alert-button) .blink {
-    opacity: var(--flash-very-slow-off);
-  }
-
-.counter .alert-button .visible-wrapper,
-.counter .alert-button .blink {
-  padding: 0px var(--ui-components-button-padding-horizontal);
-  gap: var(--app-components-alert-button-item-counter-spacing);
-}
-
-.alert-type-alarm {
-  --icon-fill: var(--alarm-enabled-background-color);
-  --icon-stroke: var(--alarm-pressed-border-color);
-}
-
-.alert-type-warning {
-  --icon-fill: var(--warning-enabled-background-color);
-  --icon-stroke: var(--warning-pressed-border-color);
-}
-
-.alert-type-caution,
-.alert-type-level-low {
-  --icon-fill: var(--caution-enabled-background-color);
-  --icon-stroke: var(--caution-pressed-border-color);
-}
-
-.alert-type-level-critical {
-  --icon-fill: var(--alert-critical-color);
-  --icon-stroke: var(--alert-critical-outline-color);
-}
-
-.alert-type-level-high {
-  --icon-fill: var(--alarm-enabled-background-color);
-  --icon-stroke: var(--alarm-pressed-border-color);
-}
-
-.alert-type-level-medium {
-  --icon-fill: var(--warning-enabled-background-color);
-  --icon-stroke: var(--warning-pressed-border-color);
-}
-
-.alert-type-level-diagnostic {
-  --icon-fill: var(--alert-diagnostic-color);
-  --icon-stroke: var(--alert-diagnostic-outline-color);
-}
-
 .silence-button {
   cursor: pointer;
 }
@@ -1638,7 +132,7 @@ button {
     height: var(--ui-components-icon-button-visual-target-size);
     border-radius: 0 var(--ui-components-button-border-radius-top-right)
       var(--ui-components-button-border-radius-bottom-right) 0;
-    border-left: 0;
+    border-left: 0; /* the item's right border is the divider */
     display: flex;
     justify-content: center;
     align-items: center;