/* 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 label {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--semantic-spacing-content-m-gap-plain);
    font-family: var(--semantic-font-family-utility);
    font-size: var(--semantic-font-size-utility-m);
    font-style: normal;
    font-weight: var(--semantic-font-weight-utility-attention);
    line-height: var(--semantic-line-height-utility-m);
    letter-spacing: var(--semantic-letter-spacing-utility-m);
    color: var(--semantic-color-on-surface-primary-resting);
  }
  :host label .label-optional {
    font-weight: var(--semantic-font-weight-utility-default);
  }
  :host label .icon {
    font-size: var(--semantic-size-content-s);
    font-family: "Allianz Icons"; /* stylelint-disable -- Declaration of custom font. */
    font-weight: var(--semantic-font-weight-utility-default);
    color: var(--semantic-color-on-surface-secondary-resting);
    font-style: normal;
  }
  :host label .icon.icon--info-circle-o::before {
    content: "\e921";
  }
  :host label.label-disabled {
    color: var(--semantic-color-on-surface-primary-disabled);
  }
}