@layer base, sizes;
@layer base {
  :host {
    --_flag-block-size: var(--dds-flag-block-size, 20px);
    --_flag-inline-size: var(--dds-flag-inline-size, 28px);
    --_flag-outline: rgba(0, 0, 0, 0.05);
  }
  :host [data-part=root] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  :host [data-part=image],
  :host [data-part=fallback] {
    overflow: clip;
    border-radius: 4px;
    outline-offset: -1px;
    outline: 1px solid var(--_flag-outline);
    block-size: var(--_flag-block-size);
    inline-size: var(--_flag-inline-size);
  }
  :host [data-part=fallback] {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  :host [data-part=image] img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
@layer sizes {
  :host([size=s]) {
    --dds-flag-block-size: 16px;
    --dds-flag-inline-size: 20px;
  }
  :host([size=m]) {
    --dds-flag-block-size: 20px;
    --dds-flag-inline-size: 28px;
  }
  :host([size=l]) {
    --dds-flag-block-size: 24px;
    --dds-flag-inline-size: 32px;
  }
}