/* 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 .list {
    padding-inline-start: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--semantic-spacing-list-m);
    font-family: var(--semantic-font-family-body);
    font-size: var(--semantic-font-size-body-m);
    font-style: normal;
    font-weight: var(--semantic-font-weight-body);
    line-height: var(--semantic-line-height-body-m);
    letter-spacing: var(--semantic-letter-spacing-body-m);
    color: var(--semantic-color-on-surface-primary-resting);
  }
  :host .list:has(.icon) {
    list-style-type: none;
  }
  :host .list .list--bullet {
    font-family: "Allianz Icons";
  }
  :host .list .list--bullet::before {
    vertical-align: middle;
  }
  :host .list .list--item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--list-m-item-gap);
  }
  :host .list .list--text {
    word-break: break-word;
  }
  :host .theme--inverted .list,
  :host .theme--inverted .list .list--item .icon.c-icon--check,
  :host .theme--inverted .list .list--item .icon.c-icon--product-cross {
    color: var(--semantic-color-on-surface-primary-inverse-resting);
  }
  :host .theme--colorful .list--item .icon.c-icon--check,
  :host .list.list--colorful .list--item .icon.c-icon--check {
    color: var(--semantic-color-signal-attention-positive-resting);
  }
  :host .theme--colorful .list--item .icon.c-icon--product-cross,
  :host .list.list--colorful .list--item .icon.c-icon--product-cross {
    color: var(--semantic-color-signal-attention-critical-resting);
  }
  :host .theme--inverted.theme--colorful .list .list--item .icon.c-icon--check,
  :host .list.list--colorful .list .list--item .icon.c-icon--check {
    color: var(--semantic-color-signal-attention-inverse-positive-resting);
  }
  :host .theme--inverted.theme--colorful .list .list--item .icon.c-icon--product-cross,
  :host .list.list--colorful .list .list--item .icon.c-icon--product-cross {
    color: var(--semantic-color-signal-attention-inverse-critical-resting);
  }
}