@layer components {
  [is-~=badge] {
    color:var(--badge-text);
    background-image:linear-gradient(90deg,transparent 0,transparent calc(1ch - 1px),var(--badge-color) calc(1ch - 1px),var(--badge-color) calc(100% - 1ch + 1px),transparent calc(100% - 1ch + 1px),transparent);
    display:inline-flex;
    vertical-align:top;
    white-space:nowrap;
    height:1lh;
    line-height:1lh
  }

  [is-~=badge][variant-=foreground0],[is-~=badge]:not([variant-]) {
    --badge-color: var(--foreground0);
    --badge-text: var(--background0)
  }

  [is-~=badge][variant-=foreground1] {
    --badge-color: var(--foreground1);
    --badge-text: var(--background0)
  }

  [is-~=badge][variant-=foreground2] {
    --badge-color: var(--foreground2);
    --badge-text: var(--background0)
  }

  [is-~=badge][variant-=background0] {
    --badge-color: var(--background0);
    --badge-text: var(--foreground0)
  }

  [is-~=badge][variant-=background1] {
    --badge-color: var(--background1);
    --badge-text: var(--foreground0)
  }

  [is-~=badge][variant-=background2] {
    --badge-color: var(--background2);
    --badge-text: var(--foreground0)
  }

  [is-~=badge][variant-=background3] {
    --badge-color: var(--background3);
    --badge-text: var(--foreground0)
  }

  [is-~=badge]:before,[is-~=badge]:after {
    content:"";
    width:1ch;
    height:1lh;
    display:inline-block;
    vertical-align:middle;
    background-color:var(--badge-color);
    overflow:hidden
  }

  [is-~=badge][cap-^=round]:before {
    border-top-left-radius:1lh;
    border-bottom-left-radius:1lh
  }

  [is-~=badge][cap-$=round]:after {
    border-top-right-radius:1lh;
    border-bottom-right-radius:1lh
  }

  [is-~=badge][cap-^=triangle]:before {
    clip-path:polygon(100% 0,100% 100%,0 50%)
  }

  [is-~=badge][cap-$=triangle]:after {
    clip-path:polygon(0 0,0 100%,100% 50%)
  }

  [is-~=badge][cap-^=slant-top]:before {
    clip-path:polygon(0 0,100% 0,100% 100%)
  }

  [is-~=badge][cap-$=slant-top]:after {
    clip-path:polygon(0 0,100% 0,0 100%)
  }

  [is-~=badge][cap-^=slant-bottom]:before {
    clip-path:polygon(100% 0,100% 100%,0 100%)
  }

  [is-~=badge][cap-$=slant-bottom]:after {
    clip-path:polygon(0 0,100% 100%,0 100%)
  }

  [is-~=badge][cap-^=ribbon]:before {
    clip-path:polygon(0 0,100% 0,100% 100%,0 100%,100% 50%)
  }

  [is-~=badge][cap-$=ribbon]:after {
    clip-path:polygon(0 0,100% 0,0% 50%,100% 100%,0% 100%)
  }
}