/* 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 {
    /* Disable browser-specific styles for password field */
  }
  :host input,
  :host .input-body {
    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-default);
    line-height: var(--semantic-line-height-utility-m);
    letter-spacing: var(--semantic-letter-spacing-utility-m);
    color: var(--semantic-color-on-surface-primary-resting);
    background: var(--semantic-color-surface-default-resting);
  }
  :host .input-body {
    display: flex;
    padding: var(--input-field-inset-vertical) var(--input-field-inset-horizontal);
    align-items: center;
    gap: var(--input-field-gap);
    align-self: stretch;
    border-radius: var(--semantic-border-radius-m);
    border: var(--semantic-border-width-static) solid var(--semantic-color-border-secondary-resting);
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: text;
  }
  :host .input-body .icon {
    font-family: "Allianz Icons"; /* stylelint-disable -- Declaration of custom font. */
    cursor: pointer;
  }
  :host .input-body .icon.icon-password-hide:before {
    content: "\ea52";
  }
  :host .input-body .icon.icon-password-show:before {
    content: "\ea54";
  }
  :host .input-body.input-disabled {
    color: var(--semantic-color-on-surface-primary-disabled);
    border: var(--semantic-border-width-static) solid var(--semantic-color-border-secondary-disabled);
    background: var(--semantic-color-surface-default-disabled);
    pointer-events: none;
    cursor: not-allowed;
  }
  :host .input-body.input-critical {
    border: var(--semantic-border-width-static) solid var(--semantic-color-signal-attention-critical-resting);
  }
  :host .input-body.input-focused {
    background: var(--semantic-color-surface-default-hover);
    border: var(--semantic-border-width-focus) solid var(--semantic-color-border-focus);
  }
  :host .input-body.input-readonly {
    color: var(--semantic-color-on-surface-primary-readonly);
    border: var(--semantic-border-width-static) solid var(--semantic-color-border-secondary-disabled);
    background: var(--semantic-color-surface-default-disabled);
    pointer-events: none;
  }
  :host input {
    border: 0 none;
    padding: 0;
    margin: 0;
    width: 100%;
  }
  :host input[readonly] {
    color: var(--semantic-color-on-surface-primary-readonly);
    background: var(--semantic-color-surface-default-disabled);
  }
  :host input[disabled] {
    cursor: not-allowed;
    color: var(--semantic-color-on-surface-primary-disabled);
    background: var(--semantic-color-surface-default-disabled);
  }
  :host input[disabled]::placeholder {
    color: var(--semantic-color-on-surface-primary-disabled);
  }
  :host input:focus {
    outline: none;
    background: var(--semantic-color-surface-default-hover);
  }
  :host input::placeholder {
    color: var(--semantic-color-on-surface-secondary-resting);
  }
  :host input::-ms-reveal,
  :host input::-ms-clear {
    display: none;
  }
}