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

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

@@ -0,0 +1,1570 @@
+import { css } from "lit";
+const componentStyle = css`* {
+  -webkit-tap-highlight-color: transparent;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+:host {
+  display: inline-flex;
+}
+
+.alert-button {
+  appearance: none;
+  background: none;
+  border: none;
+  padding: 0;
+  position: relative; /* containing block of the .blink layer */
+  display: flex;
+  flex-grow: 1; /* fills the width a parent gives the host */
+  align-items: center;
+  justify-content: center;
+  min-width: var(--app-components-alert-button-item-min-width);
+  height: var(--app-components-alert-button-item-touch-target-size);
+}
+
+.alert-button.fill-height {
+    height: 100%;
+  }
+
+.icon {
+  display: block;
+  width: var(--app-components-alert-button-item-icon-size);
+  height: var(--app-components-alert-button-item-icon-size);
+}
+
+.visible-wrapper,
+.blink {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: var(--app-components-alert-button-item-visual-target-size);
+  min-width: var(--ui-components-icon-button-visual-target-size);
+  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);
+  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;
+}
+
+.fill-height :is(.visible-wrapper,.blink) {
+    height: 100%;
+  }
+
+/* a parent joins another button to this end */
+
+:host([data-group-item-not-last]) :is(.visible-wrapper,.blink) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+.blink {
+  position: absolute;
+  inset: 0;
+  margin: auto; /* centres the fixed-height layer in the touch target */
+}
+
+.content {
+  display: flex;
+  align-items: center;
+  gap: var(--app-components-alert-button-item-counter-spacing);
+}
+
+.counter .content {
+  /* the Figma stroke is drawn inside the frame, over this padding */
+  padding: 0 calc(var(--ui-components-button-padding-horizontal) - 1px);
+}
+
+.count {
+  padding-right: var(--app-components-alert-button-item-padding-counter-right);
+}
+
+.global-counter .visible-wrapper {
+    /* the Figma stroke is drawn inside the frame, over this padding */
+    padding: 0
+      calc(var(--app-components-alert-button-item-padding-horizontal) - 1px);
+  }
+
+.global-counter .content {
+    padding: 0 var(--ui-components-button-padding-horizontal);
+  }
+
+.type-flat {
+  cursor: pointer;
+}
+
+.type-flat:focus {
+  outline: none;
+}
+
+.type-flat .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);
+}
+
+.type-flat.activated .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) {
+
+.type-flat: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));
+  }
+}
+
+.type-flat:active .visible-wrapper {
+  border-color: var(--flat-pressed-border-color);
+  background-color: var(--flat-pressed-background-color);
+}
+
+.type-flat: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;
+}
+
+.type-flat: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;
+}
+
+.type-flat.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;
+}
+
+.type-flat:disabled {
+  cursor: not-allowed;
+}
+
+.type-flat.disabled {
+  cursor: not-allowed;
+}
+
+.type-flat {
+  cursor: pointer;
+}
+
+.type-flat:focus {
+  outline: none;
+}
+
+.type-flat .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);
+}
+
+.type-flat.activated .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) {
+
+.type-flat: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));
+  }
+}
+
+.type-flat:active .blink {
+  border-color: var(--flat-pressed-border-color);
+  background-color: var(--flat-pressed-background-color);
+}
+
+.type-flat: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;
+}
+
+.type-flat: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;
+}
+
+.type-flat.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;
+}
+
+.type-flat:disabled {
+  cursor: not-allowed;
+}
+
+.type-flat.disabled {
+  cursor: not-allowed;
+}
+
+.type-flat .visible-wrapper {
+    color: var(--on-flat-neutral-color);
+  }
+
+.type-flat .blink {
+    width: min-content;
+  }
+
+.type-normal .visible-wrapper,
+.type-enhanced .visible-wrapper {
+  width: 100%;
+}
+
+.type-normal {
+  cursor: pointer;
+}
+
+.type-normal:focus {
+  outline: none;
+}
+
+.type-normal .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);
+}
+
+.type-normal.activated .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) {
+
+.type-normal: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));
+  }
+}
+
+.type-normal:active .visible-wrapper {
+  border-color: var(--normal-pressed-border-color);
+  background-color: var(--normal-pressed-background-color);
+}
+
+.type-normal: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;
+}
+
+.type-normal: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;
+}
+
+.type-normal.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;
+}
+
+.type-normal:disabled {
+  cursor: not-allowed;
+}
+
+.type-normal.disabled {
+  cursor: not-allowed;
+}
+
+.type-normal {
+  cursor: pointer;
+}
+
+.type-normal:focus {
+  outline: none;
+}
+
+.type-normal .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);
+}
+
+.type-normal.activated .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) {
+
+.type-normal: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));
+  }
+}
+
+.type-normal:active .blink {
+  border-color: var(--normal-pressed-border-color);
+  background-color: var(--normal-pressed-background-color);
+}
+
+.type-normal: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;
+}
+
+.type-normal: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;
+}
+
+.type-normal.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;
+}
+
+.type-normal:disabled {
+  cursor: not-allowed;
+}
+
+.type-normal.disabled {
+  cursor: not-allowed;
+}
+
+.type-enhanced.alert-type-alarm {
+  cursor: pointer;
+}
+
+.type-enhanced.alert-type-alarm:focus {
+  outline: none;
+}
+
+.type-enhanced.alert-type-alarm .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);
+}
+
+.type-enhanced.alert-type-alarm.activated .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) {
+
+.type-enhanced.alert-type-alarm: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));
+  }
+}
+
+.type-enhanced.alert-type-alarm:active .blink {
+  border-color: var(--normal-pressed-border-color);
+  background-color: var(--normal-pressed-background-color);
+}
+
+.type-enhanced.alert-type-alarm: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;
+}
+
+.type-enhanced.alert-type-alarm: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;
+}
+
+.type-enhanced.alert-type-alarm.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;
+}
+
+.type-enhanced.alert-type-alarm:disabled {
+  cursor: not-allowed;
+}
+
+.type-enhanced.alert-type-alarm.disabled {
+  cursor: not-allowed;
+}
+
+.type-enhanced.alert-type-alarm {
+  cursor: pointer;
+}
+
+.type-enhanced.alert-type-alarm:focus {
+  outline: none;
+}
+
+.type-enhanced.alert-type-alarm .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);
+}
+
+.type-enhanced.alert-type-alarm.activated .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) {
+
+.type-enhanced.alert-type-alarm: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));
+  }
+}
+
+.type-enhanced.alert-type-alarm:active .visible-wrapper {
+  border-color: var(--alarm-pressed-border-color);
+  background-color: var(--alarm-pressed-background-color);
+}
+
+.type-enhanced.alert-type-alarm: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;
+}
+
+.type-enhanced.alert-type-alarm: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;
+}
+
+.type-enhanced.alert-type-alarm.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;
+}
+
+.type-enhanced.alert-type-alarm:disabled {
+  cursor: not-allowed;
+}
+
+.type-enhanced.alert-type-alarm.disabled {
+  cursor: not-allowed;
+}
+
+.type-enhanced.alert-type-alarm .visible-wrapper {
+    color: var(--on-alarm-active-color);
+  }
+
+.type-enhanced.alert-type-warning {
+  cursor: pointer;
+}
+
+.type-enhanced.alert-type-warning:focus {
+  outline: none;
+}
+
+.type-enhanced.alert-type-warning .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);
+}
+
+.type-enhanced.alert-type-warning.activated .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) {
+
+.type-enhanced.alert-type-warning: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));
+  }
+}
+
+.type-enhanced.alert-type-warning:active .blink {
+  border-color: var(--normal-pressed-border-color);
+  background-color: var(--normal-pressed-background-color);
+}
+
+.type-enhanced.alert-type-warning: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;
+}
+
+.type-enhanced.alert-type-warning: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;
+}
+
+.type-enhanced.alert-type-warning.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;
+}
+
+.type-enhanced.alert-type-warning:disabled {
+  cursor: not-allowed;
+}
+
+.type-enhanced.alert-type-warning.disabled {
+  cursor: not-allowed;
+}
+
+.type-enhanced.alert-type-warning {
+  cursor: pointer;
+}
+
+.type-enhanced.alert-type-warning:focus {
+  outline: none;
+}
+
+.type-enhanced.alert-type-warning .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);
+}
+
+.type-enhanced.alert-type-warning.activated .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) {
+
+.type-enhanced.alert-type-warning: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));
+  }
+}
+
+.type-enhanced.alert-type-warning:active .visible-wrapper {
+  border-color: var(--warning-pressed-border-color);
+  background-color: var(--warning-pressed-background-color);
+}
+
+.type-enhanced.alert-type-warning: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;
+}
+
+.type-enhanced.alert-type-warning: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;
+}
+
+.type-enhanced.alert-type-warning.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;
+}
+
+.type-enhanced.alert-type-warning:disabled {
+  cursor: not-allowed;
+}
+
+.type-enhanced.alert-type-warning.disabled {
+  cursor: not-allowed;
+}
+
+.type-enhanced.alert-type-warning .visible-wrapper {
+    color: var(--on-warning-active-color);
+  }
+
+.type-enhanced.alert-type-caution {
+  cursor: pointer;
+}
+
+.type-enhanced.alert-type-caution:focus {
+  outline: none;
+}
+
+.type-enhanced.alert-type-caution .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);
+}
+
+.type-enhanced.alert-type-caution.activated .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) {
+
+.type-enhanced.alert-type-caution: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));
+  }
+}
+
+.type-enhanced.alert-type-caution:active .blink {
+  border-color: var(--normal-pressed-border-color);
+  background-color: var(--normal-pressed-background-color);
+}
+
+.type-enhanced.alert-type-caution: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;
+}
+
+.type-enhanced.alert-type-caution: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;
+}
+
+.type-enhanced.alert-type-caution.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;
+}
+
+.type-enhanced.alert-type-caution:disabled {
+  cursor: not-allowed;
+}
+
+.type-enhanced.alert-type-caution.disabled {
+  cursor: not-allowed;
+}
+
+.type-enhanced.alert-type-caution {
+  cursor: pointer;
+}
+
+.type-enhanced.alert-type-caution:focus {
+  outline: none;
+}
+
+.type-enhanced.alert-type-caution .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);
+}
+
+.type-enhanced.alert-type-caution.activated .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) {
+
+.type-enhanced.alert-type-caution: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));
+  }
+}
+
+.type-enhanced.alert-type-caution:active .visible-wrapper {
+  border-color: var(--caution-pressed-border-color);
+  background-color: var(--caution-pressed-background-color);
+}
+
+.type-enhanced.alert-type-caution: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;
+}
+
+.type-enhanced.alert-type-caution: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;
+}
+
+.type-enhanced.alert-type-caution.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;
+}
+
+.type-enhanced.alert-type-caution:disabled {
+  cursor: not-allowed;
+}
+
+.type-enhanced.alert-type-caution.disabled {
+  cursor: not-allowed;
+}
+
+.type-enhanced.alert-type-caution .visible-wrapper {
+    color: var(--on-caution-active-color);
+  }
+
+.type-enhanced.alert-type-level-critical {
+  cursor: pointer;
+}
+
+.type-enhanced.alert-type-level-critical:focus {
+  outline: none;
+}
+
+.type-enhanced.alert-type-level-critical .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);
+}
+
+.type-enhanced.alert-type-level-critical.activated .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) {
+
+.type-enhanced.alert-type-level-critical: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));
+  }
+}
+
+.type-enhanced.alert-type-level-critical:active .blink {
+  border-color: var(--normal-pressed-border-color);
+  background-color: var(--normal-pressed-background-color);
+}
+
+.type-enhanced.alert-type-level-critical: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;
+}
+
+.type-enhanced.alert-type-level-critical: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;
+}
+
+.type-enhanced.alert-type-level-critical.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;
+}
+
+.type-enhanced.alert-type-level-critical:disabled {
+  cursor: not-allowed;
+}
+
+.type-enhanced.alert-type-level-critical.disabled {
+  cursor: not-allowed;
+}
+
+.type-enhanced.alert-type-level-critical {
+  cursor: pointer;
+}
+
+.type-enhanced.alert-type-level-critical:focus {
+  outline: none;
+}
+
+.type-enhanced.alert-type-level-critical .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);
+}
+
+.type-enhanced.alert-type-level-critical.activated .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) {
+
+.type-enhanced.alert-type-level-critical: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));
+  }
+}
+
+.type-enhanced.alert-type-level-critical:active .visible-wrapper {
+  border-color: var(--critical-pressed-border-color);
+  background-color: var(--critical-pressed-background-color);
+}
+
+.type-enhanced.alert-type-level-critical: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;
+}
+
+.type-enhanced.alert-type-level-critical: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;
+}
+
+.type-enhanced.alert-type-level-critical.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;
+}
+
+.type-enhanced.alert-type-level-critical:disabled {
+  cursor: not-allowed;
+}
+
+.type-enhanced.alert-type-level-critical.disabled {
+  cursor: not-allowed;
+}
+
+.type-enhanced.alert-type-level-critical .visible-wrapper {
+    color: var(--on-critical-active-color);
+  }
+
+.type-enhanced.alert-type-level-high {
+  cursor: pointer;
+}
+
+.type-enhanced.alert-type-level-high:focus {
+  outline: none;
+}
+
+.type-enhanced.alert-type-level-high .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);
+}
+
+.type-enhanced.alert-type-level-high.activated .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) {
+
+.type-enhanced.alert-type-level-high: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));
+  }
+}
+
+.type-enhanced.alert-type-level-high:active .blink {
+  border-color: var(--normal-pressed-border-color);
+  background-color: var(--normal-pressed-background-color);
+}
+
+.type-enhanced.alert-type-level-high: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;
+}
+
+.type-enhanced.alert-type-level-high: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;
+}
+
+.type-enhanced.alert-type-level-high.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;
+}
+
+.type-enhanced.alert-type-level-high:disabled {
+  cursor: not-allowed;
+}
+
+.type-enhanced.alert-type-level-high.disabled {
+  cursor: not-allowed;
+}
+
+.type-enhanced.alert-type-level-high {
+  cursor: pointer;
+}
+
+.type-enhanced.alert-type-level-high:focus {
+  outline: none;
+}
+
+.type-enhanced.alert-type-level-high .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);
+}
+
+.type-enhanced.alert-type-level-high.activated .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) {
+
+.type-enhanced.alert-type-level-high: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));
+  }
+}
+
+.type-enhanced.alert-type-level-high:active .visible-wrapper {
+  border-color: var(--alarm-pressed-border-color);
+  background-color: var(--alarm-pressed-background-color);
+}
+
+.type-enhanced.alert-type-level-high: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;
+}
+
+.type-enhanced.alert-type-level-high: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;
+}
+
+.type-enhanced.alert-type-level-high.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;
+}
+
+.type-enhanced.alert-type-level-high:disabled {
+  cursor: not-allowed;
+}
+
+.type-enhanced.alert-type-level-high.disabled {
+  cursor: not-allowed;
+}
+
+.type-enhanced.alert-type-level-high .visible-wrapper {
+    color: var(--on-alarm-active-color);
+  }
+
+.type-enhanced.alert-type-level-medium {
+  cursor: pointer;
+}
+
+.type-enhanced.alert-type-level-medium:focus {
+  outline: none;
+}
+
+.type-enhanced.alert-type-level-medium .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);
+}
+
+.type-enhanced.alert-type-level-medium.activated .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) {
+
+.type-enhanced.alert-type-level-medium: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));
+  }
+}
+
+.type-enhanced.alert-type-level-medium:active .blink {
+  border-color: var(--normal-pressed-border-color);
+  background-color: var(--normal-pressed-background-color);
+}
+
+.type-enhanced.alert-type-level-medium: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;
+}
+
+.type-enhanced.alert-type-level-medium: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;
+}
+
+.type-enhanced.alert-type-level-medium.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;
+}
+
+.type-enhanced.alert-type-level-medium:disabled {
+  cursor: not-allowed;
+}
+
+.type-enhanced.alert-type-level-medium.disabled {
+  cursor: not-allowed;
+}
+
+.type-enhanced.alert-type-level-medium {
+  cursor: pointer;
+}
+
+.type-enhanced.alert-type-level-medium:focus {
+  outline: none;
+}
+
+.type-enhanced.alert-type-level-medium .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);
+}
+
+.type-enhanced.alert-type-level-medium.activated .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) {
+
+.type-enhanced.alert-type-level-medium: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));
+  }
+}
+
+.type-enhanced.alert-type-level-medium:active .visible-wrapper {
+  border-color: var(--warning-pressed-border-color);
+  background-color: var(--warning-pressed-background-color);
+}
+
+.type-enhanced.alert-type-level-medium: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;
+}
+
+.type-enhanced.alert-type-level-medium: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;
+}
+
+.type-enhanced.alert-type-level-medium.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;
+}
+
+.type-enhanced.alert-type-level-medium:disabled {
+  cursor: not-allowed;
+}
+
+.type-enhanced.alert-type-level-medium.disabled {
+  cursor: not-allowed;
+}
+
+.type-enhanced.alert-type-level-medium .visible-wrapper {
+    color: var(--on-warning-active-color);
+  }
+
+.type-enhanced.alert-type-level-low {
+  cursor: pointer;
+}
+
+.type-enhanced.alert-type-level-low:focus {
+  outline: none;
+}
+
+.type-enhanced.alert-type-level-low .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);
+}
+
+.type-enhanced.alert-type-level-low.activated .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) {
+
+.type-enhanced.alert-type-level-low: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));
+  }
+}
+
+.type-enhanced.alert-type-level-low:active .blink {
+  border-color: var(--normal-pressed-border-color);
+  background-color: var(--normal-pressed-background-color);
+}
+
+.type-enhanced.alert-type-level-low: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;
+}
+
+.type-enhanced.alert-type-level-low: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;
+}
+
+.type-enhanced.alert-type-level-low.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;
+}
+
+.type-enhanced.alert-type-level-low:disabled {
+  cursor: not-allowed;
+}
+
+.type-enhanced.alert-type-level-low.disabled {
+  cursor: not-allowed;
+}
+
+.type-enhanced.alert-type-level-low {
+  cursor: pointer;
+}
+
+.type-enhanced.alert-type-level-low:focus {
+  outline: none;
+}
+
+.type-enhanced.alert-type-level-low .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);
+}
+
+.type-enhanced.alert-type-level-low.activated .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) {
+
+.type-enhanced.alert-type-level-low: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));
+  }
+}
+
+.type-enhanced.alert-type-level-low:active .visible-wrapper {
+  border-color: var(--caution-pressed-border-color);
+  background-color: var(--caution-pressed-background-color);
+}
+
+.type-enhanced.alert-type-level-low: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;
+}
+
+.type-enhanced.alert-type-level-low: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;
+}
+
+.type-enhanced.alert-type-level-low.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;
+}
+
+.type-enhanced.alert-type-level-low:disabled {
+  cursor: not-allowed;
+}
+
+.type-enhanced.alert-type-level-low.disabled {
+  cursor: not-allowed;
+}
+
+.type-enhanced.alert-type-level-low .visible-wrapper {
+    color: var(--on-caution-active-color);
+  }
+
+.type-enhanced.alert-type-level-diagnostic {
+  cursor: pointer;
+}
+
+.type-enhanced.alert-type-level-diagnostic:focus {
+  outline: none;
+}
+
+.type-enhanced.alert-type-level-diagnostic .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);
+}
+
+.type-enhanced.alert-type-level-diagnostic.activated .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) {
+
+.type-enhanced.alert-type-level-diagnostic: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));
+  }
+}
+
+.type-enhanced.alert-type-level-diagnostic:active .blink {
+  border-color: var(--normal-pressed-border-color);
+  background-color: var(--normal-pressed-background-color);
+}
+
+.type-enhanced.alert-type-level-diagnostic: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;
+}
+
+.type-enhanced.alert-type-level-diagnostic: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;
+}
+
+.type-enhanced.alert-type-level-diagnostic.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;
+}
+
+.type-enhanced.alert-type-level-diagnostic:disabled {
+  cursor: not-allowed;
+}
+
+.type-enhanced.alert-type-level-diagnostic.disabled {
+  cursor: not-allowed;
+}
+
+.type-enhanced.alert-type-level-diagnostic {
+  cursor: pointer;
+}
+
+.type-enhanced.alert-type-level-diagnostic:focus {
+  outline: none;
+}
+
+.type-enhanced.alert-type-level-diagnostic .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);
+}
+
+.type-enhanced.alert-type-level-diagnostic.activated .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) {
+
+.type-enhanced.alert-type-level-diagnostic: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));
+  }
+}
+
+.type-enhanced.alert-type-level-diagnostic:active .visible-wrapper {
+  border-color: var(--notification-pressed-border-color);
+  background-color: var(--notification-pressed-background-color);
+}
+
+.type-enhanced.alert-type-level-diagnostic: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;
+}
+
+.type-enhanced.alert-type-level-diagnostic: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;
+}
+
+.type-enhanced.alert-type-level-diagnostic.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;
+}
+
+.type-enhanced.alert-type-level-diagnostic:disabled {
+  cursor: not-allowed;
+}
+
+.type-enhanced.alert-type-level-diagnostic.disabled {
+  cursor: not-allowed;
+}
+
+.type-enhanced.alert-type-level-diagnostic .visible-wrapper {
+    color: var(--on-notification-active-color);
+  }
+
+.flash-fast .visible-wrapper {
+    opacity: var(--flash-fast-on);
+  }
+
+.flash-fast .blink {
+    opacity: var(--flash-fast-off);
+  }
+
+.flash-slow .visible-wrapper {
+    opacity: var(--flash-slow-on);
+  }
+
+.flash-slow .blink {
+    opacity: var(--flash-slow-off);
+  }
+
+.flash-very-slow .visible-wrapper {
+    opacity: var(--flash-very-slow-on);
+  }
+
+.flash-very-slow .blink {
+    opacity: var(--flash-very-slow-off);
+  }
+
+.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);
+}
+`;
+export {
+  componentStyle as default
+};
+//# sourceMappingURL=alert-button-item.css.js.map