@oicl/openbridge-webcomponents 2.0.0-next.57 → 2.0.0-next.59

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

@@ -753,6 +753,706 @@ button {
       color: var(--on-caution-active-color);
     }
 
+:is(.type-enhanced.alert-type-isa-critical .alert-button) {
+            cursor: pointer;
+}
+
+:is(.type-enhanced.alert-type-isa-critical .alert-button):focus {
+            outline: none;
+}
+
+:is(.type-enhanced.alert-type-isa-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-isa-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-isa-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-isa-critical .alert-button):active .blink {
+            border-color: var(--normal-pressed-border-color);
+            background-color: var(--normal-pressed-background-color);
+}
+
+:is(.type-enhanced.alert-type-isa-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-isa-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-isa-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-isa-critical .alert-button):disabled {
+            cursor: not-allowed;
+}
+
+.disabled:is(.type-enhanced.alert-type-isa-critical .alert-button) {
+            cursor: not-allowed;
+}
+
+:is(.type-enhanced.alert-type-isa-critical .alert-button) {
+            cursor: pointer;
+}
+
+:is(.type-enhanced.alert-type-isa-critical .alert-button):focus {
+            outline: none;
+}
+
+:is(.type-enhanced.alert-type-isa-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-isa-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-isa-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-isa-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-isa-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-isa-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-isa-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-isa-critical .alert-button):disabled {
+            cursor: not-allowed;
+}
+
+.disabled:is(.type-enhanced.alert-type-isa-critical .alert-button) {
+            cursor: not-allowed;
+}
+
+:is(.type-enhanced.alert-type-isa-critical .alert-button) .visible-wrapper {
+      color: var(--on-critical-active-color);
+    }
+
+:is(.type-enhanced.alert-type-isa-high .alert-button) {
+            cursor: pointer;
+}
+
+:is(.type-enhanced.alert-type-isa-high .alert-button):focus {
+            outline: none;
+}
+
+:is(.type-enhanced.alert-type-isa-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-isa-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-isa-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-isa-high .alert-button):active .blink {
+            border-color: var(--normal-pressed-border-color);
+            background-color: var(--normal-pressed-background-color);
+}
+
+:is(.type-enhanced.alert-type-isa-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-isa-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-isa-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-isa-high .alert-button):disabled {
+            cursor: not-allowed;
+}
+
+.disabled:is(.type-enhanced.alert-type-isa-high .alert-button) {
+            cursor: not-allowed;
+}
+
+:is(.type-enhanced.alert-type-isa-high .alert-button) {
+            cursor: pointer;
+}
+
+:is(.type-enhanced.alert-type-isa-high .alert-button):focus {
+            outline: none;
+}
+
+:is(.type-enhanced.alert-type-isa-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-isa-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-isa-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-isa-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-isa-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-isa-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-isa-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-isa-high .alert-button):disabled {
+            cursor: not-allowed;
+}
+
+.disabled:is(.type-enhanced.alert-type-isa-high .alert-button) {
+            cursor: not-allowed;
+}
+
+:is(.type-enhanced.alert-type-isa-high .alert-button) .visible-wrapper {
+      color: var(--on-alarm-active-color);
+    }
+
+:is(.type-enhanced.alert-type-isa-medium .alert-button) {
+            cursor: pointer;
+}
+
+:is(.type-enhanced.alert-type-isa-medium .alert-button):focus {
+            outline: none;
+}
+
+:is(.type-enhanced.alert-type-isa-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-isa-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-isa-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-isa-medium .alert-button):active .blink {
+            border-color: var(--normal-pressed-border-color);
+            background-color: var(--normal-pressed-background-color);
+}
+
+:is(.type-enhanced.alert-type-isa-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-isa-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-isa-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-isa-medium .alert-button):disabled {
+            cursor: not-allowed;
+}
+
+.disabled:is(.type-enhanced.alert-type-isa-medium .alert-button) {
+            cursor: not-allowed;
+}
+
+:is(.type-enhanced.alert-type-isa-medium .alert-button) {
+            cursor: pointer;
+}
+
+:is(.type-enhanced.alert-type-isa-medium .alert-button):focus {
+            outline: none;
+}
+
+:is(.type-enhanced.alert-type-isa-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-isa-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-isa-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-isa-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-isa-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-isa-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-isa-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-isa-medium .alert-button):disabled {
+            cursor: not-allowed;
+}
+
+.disabled:is(.type-enhanced.alert-type-isa-medium .alert-button) {
+            cursor: not-allowed;
+}
+
+:is(.type-enhanced.alert-type-isa-medium .alert-button) .visible-wrapper {
+      color: var(--on-warning-active-color);
+    }
+
+:is(.type-enhanced.alert-type-isa-low .alert-button) {
+            cursor: pointer;
+}
+
+:is(.type-enhanced.alert-type-isa-low .alert-button):focus {
+            outline: none;
+}
+
+:is(.type-enhanced.alert-type-isa-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-isa-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-isa-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-isa-low .alert-button):active .blink {
+            border-color: var(--normal-pressed-border-color);
+            background-color: var(--normal-pressed-background-color);
+}
+
+:is(.type-enhanced.alert-type-isa-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-isa-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-isa-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-isa-low .alert-button):disabled {
+            cursor: not-allowed;
+}
+
+.disabled:is(.type-enhanced.alert-type-isa-low .alert-button) {
+            cursor: not-allowed;
+}
+
+:is(.type-enhanced.alert-type-isa-low .alert-button) {
+            cursor: pointer;
+}
+
+:is(.type-enhanced.alert-type-isa-low .alert-button):focus {
+            outline: none;
+}
+
+:is(.type-enhanced.alert-type-isa-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-isa-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-isa-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-isa-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-isa-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-isa-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-isa-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-isa-low .alert-button):disabled {
+            cursor: not-allowed;
+}
+
+.disabled:is(.type-enhanced.alert-type-isa-low .alert-button) {
+            cursor: not-allowed;
+}
+
+:is(.type-enhanced.alert-type-isa-low .alert-button) .visible-wrapper {
+      color: var(--on-caution-active-color);
+    }
+
+:is(.type-enhanced.alert-type-isa-diagnostic .alert-button) {
+            cursor: pointer;
+}
+
+:is(.type-enhanced.alert-type-isa-diagnostic .alert-button):focus {
+            outline: none;
+}
+
+:is(.type-enhanced.alert-type-isa-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-isa-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-isa-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-isa-diagnostic .alert-button):active .blink {
+            border-color: var(--normal-pressed-border-color);
+            background-color: var(--normal-pressed-background-color);
+}
+
+:is(.type-enhanced.alert-type-isa-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-isa-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-isa-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-isa-diagnostic .alert-button):disabled {
+            cursor: not-allowed;
+}
+
+.disabled:is(.type-enhanced.alert-type-isa-diagnostic .alert-button) {
+            cursor: not-allowed;
+}
+
+:is(.type-enhanced.alert-type-isa-diagnostic .alert-button) {
+            cursor: pointer;
+}
+
+:is(.type-enhanced.alert-type-isa-diagnostic .alert-button):focus {
+            outline: none;
+}
+
+:is(.type-enhanced.alert-type-isa-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-isa-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-isa-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-isa-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-isa-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-isa-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-isa-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-isa-diagnostic .alert-button):disabled {
+            cursor: not-allowed;
+}
+
+.disabled:is(.type-enhanced.alert-type-isa-diagnostic .alert-button) {
+            cursor: not-allowed;
+}
+
+:is(.type-enhanced.alert-type-isa-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)
@@ -796,20 +1496,36 @@ button {
       width: min-content;
     }
 
-:is(.blinking.alert-type-alarm .alert-button) .visible-wrapper {
+:is(.blinking.alert-type-warning .alert-button,.blinking.alert-type-isa-medium .alert-button) .visible-wrapper {
+    opacity: var(--warning-blink-on);
+  }
+
+:is(.blinking.alert-type-warning .alert-button,.blinking.alert-type-isa-medium .alert-button) .blink {
+    opacity: var(--warning-blink-off);
+  }
+
+:is(.blinking.alert-type-isa-critical .alert-button) .visible-wrapper {
+    opacity: var(--critical-blink-on);
+  }
+
+:is(.blinking.alert-type-isa-critical .alert-button) .blink {
+    opacity: var(--critical-blink-off);
+  }
+
+:is(.blinking.alert-type-alarm .alert-button,.blinking.alert-type-isa-high .alert-button) .visible-wrapper {
     opacity: var(--alarm-blink-on);
   }
 
-:is(.blinking.alert-type-alarm .alert-button) .blink {
+:is(.blinking.alert-type-alarm .alert-button,.blinking.alert-type-isa-high .alert-button) .blink {
     opacity: var(--alarm-blink-off);
   }
 
-:is(.blinking.alert-type-warning .alert-button) .visible-wrapper {
-    opacity: var(--warning-blink-on);
+:is(.blinking.alert-type-caution .alert-button,.blinking.alert-type-isa-low .alert-button) .visible-wrapper {
+    opacity: var(--low-blink-on);
   }
 
-:is(.blinking.alert-type-warning .alert-button) .blink {
-    opacity: var(--warning-blink-off);
+:is(.blinking.alert-type-caution .alert-button,.blinking.alert-type-isa-low .alert-button) .blink {
+    opacity: var(--low-blink-off);
   }
 
 .counter .alert-button .visible-wrapper,
@@ -828,11 +1544,32 @@ button {
   --icon-stroke: var(--warning-pressed-border-color);
 }
 
-.alert-type-caution {
+.alert-type-caution,
+.alert-type-isa-low {
   --icon-fill: var(--caution-enabled-background-color);
   --icon-stroke: var(--caution-pressed-border-color);
 }
 
+.alert-type-isa-critical {
+  --icon-fill: var(--alert-critical-color);
+  --icon-stroke: var(--alert-critical-outline-color);
+}
+
+.alert-type-isa-high {
+  --icon-fill: var(--alarm-enabled-background-color);
+  --icon-stroke: var(--alarm-pressed-border-color);
+}
+
+.alert-type-isa-medium {
+  --icon-fill: var(--warning-enabled-background-color);
+  --icon-stroke: var(--warning-pressed-border-color);
+}
+
+.alert-type-isa-diagnostic {
+  --icon-fill: var(--alert-diagnostic-color);
+  --icon-stroke: var(--alert-diagnostic-outline-color);
+}
+
 .silence-button {
             cursor: pointer;
 }