/* 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 div {
    display: flex;
    height: var(--semantic-size-content-m);
    width: fit-content;
    padding: var(--badge-inset-vertical) var(--badge-inset-horizontal);
    font: var(--semantic-text-utility-default-s);
    font-style: normal;
    line-height: var(--semantic-line-height-utility-s);
    letter-spacing: var(--semantic-letter-spacing-utility-s);
    border-radius: var(--semantic-border-radius-round);
    /* "Character Badge" styling */
  }
  :host div[data-length="0"], :host div[data-length="1"] {
    width: var(--semantic-size-content-m);
    padding: 0;
    justify-content: center;
    align-items: center;
  }
  :host div.yellow {
    color: var(--semantic-color-on-accent-subtle-yellow-resting);
    background-color: var(--semantic-color-accent-subtle-yellow-resting);
  }
  :host div.yellow.attention {
    color: var(--semantic-color-on-accent-attention-resting);
    background-color: var(--semantic-color-accent-attention-yellow-resting);
  }
  :host div.orange {
    color: var(--semantic-color-on-accent-subtle-orange-resting);
    background-color: var(--semantic-color-accent-subtle-orange-resting);
  }
  :host div.orange.attention {
    color: var(--semantic-color-on-accent-attention-resting);
    background-color: var(--semantic-color-accent-attention-orange-resting);
  }
  :host div.red {
    color: var(--semantic-color-on-accent-subtle-red-resting);
    background-color: var(--semantic-color-accent-subtle-red-resting);
  }
  :host div.red.attention {
    color: var(--semantic-color-on-accent-attention-resting);
    background-color: var(--semantic-color-accent-attention-red-resting);
  }
  :host div.purple {
    color: var(--semantic-color-on-accent-subtle-purple-resting);
    background-color: var(--semantic-color-accent-subtle-purple-resting);
  }
  :host div.purple.attention {
    color: var(--semantic-color-on-accent-attention-resting);
    background-color: var(--semantic-color-accent-attention-purple-resting);
  }
  :host div.blue {
    color: var(--semantic-color-on-accent-subtle-blue-resting);
    background-color: var(--semantic-color-accent-subtle-blue-resting);
  }
  :host div.blue.attention {
    color: var(--semantic-color-on-accent-attention-resting);
    background-color: var(--semantic-color-accent-attention-blue-resting);
  }
  :host div.aqua {
    color: var(--semantic-color-on-accent-subtle-aqua-resting);
    background-color: var(--semantic-color-accent-subtle-aqua-resting);
  }
  :host div.aqua.attention {
    color: var(--semantic-color-on-accent-attention-resting);
    background-color: var(--semantic-color-accent-attention-aqua-resting);
  }
  :host div.teal {
    color: var(--semantic-color-on-accent-subtle-teal-resting);
    background-color: var(--semantic-color-accent-subtle-teal-resting);
  }
  :host div.teal.attention {
    color: var(--semantic-color-on-accent-attention-resting);
    background-color: var(--semantic-color-accent-attention-teal-resting);
  }
  :host div.green {
    color: var(--semantic-color-on-accent-subtle-green-resting);
    background-color: var(--semantic-color-accent-subtle-green-resting);
  }
  :host div.green.attention {
    color: var(--semantic-color-on-accent-attention-resting);
    background-color: var(--semantic-color-accent-attention-green-resting);
  }
  :host div.gray {
    color: var(--semantic-color-on-accent-subtle-gray-resting);
    background: var(--semantic-color-accent-subtle-gray-resting);
  }
  :host div.gray.attention {
    color: var(--semantic-color-on-accent-attention-resting);
    background: var(--semantic-color-accent-attention-gray-resting);
  }
  :host div.disabled {
    color: var(--semantic-color-on-accent-subtle-disabled);
    background: var(--semantic-color-accent-subtle-disabled);
  }
  :host div.disabled.attention {
    color: var(--semantic-color-on-accent-attention-disabled);
    background: var(--semantic-color-accent-attention-disabled);
  }
}