/* 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 .indicator {
    display: flex;
    text-align: center;
    color: var(--semantic-color-on-signal-attention-resting);
    border: var(--semantic-border-width-static) solid var(--semantic-color-border-primary-inverse-resting);
    font-family: var(--semantic-font-family-utility);
    font-size: var(--semantic-font-size-utility-indication);
    font-style: normal;
    font-weight: var(--semantic-font-weight-utility-indication);
    letter-spacing: var(--semantic-letter-spacing-utility-indication);
    border-radius: var(--semantic-border-radius-round);
    min-width: var(--indicator-count-min-width);
    height: var(--indicator-count-height);
    align-items: center;
    line-height: normal;
    width: fit-content;
    /* TYPE */
  }
  :host .indicator.countless {
    min-width: unset;
    width: var(--indicator-countless-size);
    height: var(--indicator-countless-size);
  }
  :host .indicator.count {
    padding: var(--indicator-count-inset-all);
  }
  :host .indicator.critical {
    background-color: var(--semantic-color-signal-attention-critical-resting);
  }
  :host .indicator.warning {
    background-color: var(--semantic-color-signal-attention-warning-resting);
  }
  :host .indicator.positive {
    background-color: var(--semantic-color-signal-attention-positive-resting);
  }
  :host .indicator.info {
    background-color: var(--semantic-color-signal-attention-info-resting);
  }
}