@layer reset, base, variants, sizes, states;
@layer reset {
  :host {
    display: inline-flex;
  }
  :host,
  :host *,
  :host ::before,
  :host ::after {
    box-sizing: border-box;
  }
  :host,
  :host *:not(dialog) {
    margin: 0;
  }
  :host {
    padding: 0;
    min-inline-size: 0;
    min-block-size: 0;
  }
  :host > * {
    interpolate-size: allow-keywords;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-family: var(--dds-font-family);
    font-feature-settings: var(--dds-font-features);
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }
  :host :focus-visible {
    outline: 2px solid var(--dds-color-border-focus);
  }
}
@layer base {
  :host {
    vertical-align: middle;
    flex-shrink: 0;
    --_chip-background: var(
      --dds-chip-background,
      var(--dds-chip-neutral-background)
    );
    --_chip-dot-color: var(--dds-chip-dot-color, var(--dds-chip-color));
    --_chip-block-size: var(
      --dds-chip-block-size,
      var(--dds-chip-block-size-m)
    );
    --_chip-gap: var(--dds-chip-gap, var(--dds-chip-gap-m));
    --_chip-content-gap: var(
      --dds-chip-content-gap,
      var(--dds-chip-content-gap-m)
    );
    --_chip-padding-inline: var(
      --dds-chip-padding-inline,
      var(--dds-chip-padding-inline-m)
    );
    --_chip-padding-inline-end: var(
      --dds-chip-padding-inline-end,
      var(--dds-chip-padding-inline-m)
    );
    --_chip-font-size: var(--dds-chip-font-size, var(--dds-chip-font-size-m));
    --_chip-radius: var(--dds-chip-radius);
    --_chip-color: var(--dds-chip-color);
    --_chip-key-color: var(--dds-chip-key-color);
  }
  :host [data-part=root] {
    display: inline-flex;
    align-items: center;
    position: relative;
    white-space: nowrap;
    min-block-size: var(--_chip-block-size);
    padding-inline: var(--_chip-padding-inline) var(--_chip-padding-inline-end);
    gap: var(--_chip-gap);
    border-radius: var(--_chip-radius);
    background: var(--_chip-background);
  }
  :host [data-part=content] {
    display: flex;
    align-items: center;
    gap: var(--_chip-content-gap);
    font-size: var(--_chip-font-size);
    font-weight: 500;
    color: var(--_chip-color);
  }
  :host [data-part=dot] {
    flex-shrink: 0;
    inline-size: 0.5em;
    block-size: 0.5em;
    border-radius: 50%;
    background: var(--_chip-dot-color);
  }
  :host ::slotted([slot=key]) {
    color: var(--_chip-key-color);
  }
}
@layer variants {
  :host([status=neutral]) {
    --dds-chip-background: var(--dds-chip-neutral-background);
  }
  :host([status=info]) {
    --dds-chip-background: var(--dds-chip-info-background);
    --dds-chip-dot-color: var(--dds-chip-info-dot-color);
  }
  :host([status=positive]) {
    --dds-chip-background: var(--dds-chip-positive-background);
    --dds-chip-dot-color: var(--dds-chip-positive-dot-color);
  }
  :host([status=warning]) {
    --dds-chip-background: var(--dds-chip-warning-background);
    --dds-chip-dot-color: var(--dds-chip-warning-dot-color);
  }
  :host([status=error]) {
    --dds-chip-background: var(--dds-chip-error-background);
    --dds-chip-dot-color: var(--dds-chip-error-dot-color);
  }
  :host([status=ai]) {
    --dds-chip-background: var(--dds-chip-ai-background);
  }
  :host([variant=ghost]) {
    --dds-chip-background: transparent;
  }
}
@layer sizes {
  :host([size=s]) {
    --dds-chip-block-size: var(--dds-chip-block-size-s);
    --dds-chip-gap: var(--dds-chip-gap-s);
    --dds-chip-content-gap: var(--dds-chip-content-gap-s);
    --dds-chip-padding-inline: var(--dds-chip-padding-inline-s);
    --dds-chip-padding-inline-end: var(--dds-chip-padding-inline-s);
    --dds-chip-font-size: var(--dds-chip-font-size-s);
  }
  :host([size=l]) {
    --dds-chip-block-size: var(--dds-chip-block-size-l);
    --dds-chip-gap: var(--dds-chip-gap-l);
    --dds-chip-content-gap: var(--dds-chip-content-gap-l);
    --dds-chip-padding-inline: var(--dds-chip-padding-inline-l);
    --dds-chip-padding-inline-end: var(--dds-chip-padding-inline-l);
    --dds-chip-font-size: var(--dds-chip-font-size-l);
  }
  :host([variant=ghost][size=s]) {
    --dds-chip-block-size: var(--dds-chip-ghost-block-size-s);
  }
  :host([variant=ghost][size=m]),
  :host([variant=ghost]:not([size])) {
    --dds-chip-block-size: var(--dds-chip-ghost-block-size-m);
  }
  :host([variant=ghost][size=l]) {
    --dds-chip-block-size: var(--dds-chip-ghost-block-size-l);
  }
}
@layer states {
  :host(:has([slot=end])) {
    --dds-chip-padding-inline-end: var(--dds-chip-padding-inline-end-m);
  }
  :host([size=s]:has([slot=end])) {
    --dds-chip-padding-inline-end: var(--dds-chip-padding-inline-end-s);
  }
  :host([size=l]:has([slot=end])) {
    --dds-chip-padding-inline-end: var(--dds-chip-padding-inline-end-l);
  }
}