/* Register layers in the correct order */
/* 
* Browsers define layer order based on when they encounter @layer declarations.
* This file should be imported by all component styles, and other CSS entry points,
* to ensure that layers are registered in the correct order.
*/
@layer base, tokens, utilities, components, overrides;
/* Add component styles to component layer while preserving Stencil Scoped CSS */
@layer components {
  :host .message {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--semantic-spacing-content-s-gap-plain);
    border: none; /* reset browser default borders */
    font-family: var(--semantic-font-family-utility);
    font-size: var(--semantic-font-size-utility-s);
    font-style: normal;
    font-weight: var(--semantic-font-weight-utility-default);
    line-height: var(--semantic-line-height-utility-s);
    letter-spacing: var(--semantic-letter-spacing-utility-s);
    /* TYPE */
  }
  :host .message .icon {
    width: var(--semantic-size-content-s);
    height: var(--semantic-size-content-s);
    font-family: "Allianz Icons"; /* stylelint-disable -- Declaration of custom font. */
    font-size: var(--semantic-size-content-s);
    vertical-align: text-bottom;
  }
  :host .message.critical {
    color: var(--semantic-color-signal-attention-critical-resting);
  }
  :host .message.critical .icon:before {
    content: "\e914";
  }
  :host .message.warning {
    color: var(--semantic-color-signal-attention-warning-resting);
  }
  :host .message.warning .icon:before {
    content: "\e918";
  }
  :host .message.positive {
    color: var(--semantic-color-signal-attention-positive-resting);
  }
  :host .message.positive .icon:before {
    content: "\e912";
  }
  :host .message.info {
    color: var(--semantic-color-signal-attention-info-resting);
  }
  :host .message.info .icon:before {
    content: "\e920";
  }
}