@layer components {
  .rs-badge {
    --rs-badge-bg: var(--rs-color-background-neutral);
    --rs-badge-fg: var(--rs-color-on-background-neutral);
    --rs-badge-contrast-fg: contrast-color(var(--rs-badge-bg));
    --rs-badge-border: transparent;
    --rs-badge-p-v: var(--rs-unit-x1);
    --rs-badge-p-h: var(--rs-unit-x2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--rs-unit-x1);
    min-block-size: calc(
      var(--rs-line-height-caption-1) + var(--rs-badge-p-v) * 2
    );
    min-inline-size: calc(
      var(--rs-line-height-caption-1) + var(--rs-badge-p-v) * 2
    );
    border-radius: var(--rs-radius-small);
    padding: var(--rs-badge-p-v) var(--rs-badge-p-h);
    background: var(--rs-badge-bg);
    color: var(--rs-badge-fg);
    box-shadow: inset 0 0 0 1px var(--rs-badge-border);
    font-size: var(--rs-font-size-caption-1);
    font-weight: var(--rs-font-weight-medium);
    line-height: var(--rs-line-height-caption-1);
  }

  .rs-badge[data-rounded] {
    border-radius: var(--rs-radius-circular);
  }

  .rs-badge[data-tone="primary"] {
    --rs-badge-bg: var(--rs-color-background-primary);
    --rs-badge-fg: var(--rs-color-on-background-primary);
  }

  .rs-badge[data-tone="positive"] {
    --rs-badge-bg: var(--rs-color-background-positive);
    --rs-badge-fg: var(--rs-color-on-background-positive);
  }

  .rs-badge[data-tone="critical"] {
    --rs-badge-bg: var(--rs-color-background-critical);
    --rs-badge-fg: var(--rs-color-on-background-critical);
  }

  .rs-badge[data-tone="warning"] {
    --rs-badge-bg: var(--rs-color-background-warning);
    --rs-badge-fg: var(--rs-color-on-background-warning);
  }

  .rs-badge[data-variant="faded"] {
    --rs-badge-bg: var(--rs-color-background-neutral-faded);
    --rs-badge-fg: var(--rs-color-foreground-neutral-faded);
  }

  .rs-badge[data-variant="outline"] {
    --rs-badge-bg: transparent;
    --rs-badge-fg: var(--rs-color-foreground-neutral);
    --rs-badge-border: var(--rs-color-border-neutral);
  }

  .rs-badge[data-tone="primary"][data-variant="faded"] {
    --rs-badge-bg: var(--rs-color-background-primary-faded);
    --rs-badge-fg: var(--rs-color-foreground-primary);
  }

  .rs-badge[data-tone="positive"][data-variant="faded"] {
    --rs-badge-bg: var(--rs-color-background-positive-faded);
    --rs-badge-fg: var(--rs-color-foreground-positive);
  }

  .rs-badge[data-tone="critical"][data-variant="faded"] {
    --rs-badge-bg: var(--rs-color-background-critical-faded);
    --rs-badge-fg: var(--rs-color-foreground-critical);
  }

  .rs-badge[data-tone="warning"][data-variant="faded"] {
    --rs-badge-bg: var(--rs-color-background-warning-faded);
    --rs-badge-fg: var(--rs-color-foreground-warning);
  }

  .rs-badge[data-tone="primary"][data-variant="outline"] {
    --rs-badge-fg: var(--rs-color-foreground-primary);
    --rs-badge-border: var(--rs-color-border-primary-faded);
  }

  .rs-badge[data-tone="positive"][data-variant="outline"] {
    --rs-badge-fg: var(--rs-color-foreground-positive);
    --rs-badge-border: var(--rs-color-border-positive-faded);
  }

  .rs-badge[data-tone="critical"][data-variant="outline"] {
    --rs-badge-fg: var(--rs-color-foreground-critical);
    --rs-badge-border: var(--rs-color-border-critical-faded);
  }

  .rs-badge[data-tone="warning"][data-variant="outline"] {
    --rs-badge-fg: var(--rs-color-foreground-warning);
    --rs-badge-border: var(--rs-color-border-warning-faded);
  }
}