<h2>Badges</h2>
<p>
	<button data-after-text="5" data-after-type="red badge top left" type="button">red badge top left</button>
	<button data-after-text="5" data-after-type="badge top right" type="button">badge top right</button>
</p>
<p>
	<button data-after-text="5" data-after-type="darkgray badge bottom left" type="button">darkgray badge bottom left</button>
	<button data-after-text="5" data-after-type="orange badge bottom right" type="button">orange badge bottom right</button>
</p>
<p>
	<button data-after-text="5" data-after-type="red badge top right" data-before-text="new" data-before-type="blue pill" type="button">blue pill + red badge top right</button>
	<button data-after-text="5" data-after-type="red badge bottom right" data-before-text="12" data-before-type="blue badge top right" type="button">dual badges</button>
</p>

<h1 data-before-text="New" data-before-type="circle">circle</h1>
<h2 data-before-text="New" data-before-type="darkgray circle">darkgray circle</h2>
<h3 data-before-text="New" data-before-type="lightgray circle">lightgray circle</h3>
<span data-before-text="New" data-before-type="green circle">green circle</span>
<p>
<span data-after-text="New" data-after-type="blue circle">blue circle after text</span>
</p>

<h2>Dots</h2>
<span data-before-text="1" data-before-type="green dot">In Stock</span>, but it could be  <span data-before-text="1" data-before-type="red dot">Out of Stock</span>, or even <span data-before-text="1" data-before-type="orange dot">Temporarily Out of Stock</span>

<p>
	<button data-after-text="5" data-after-type="blue dot top left" type="button">blue dot top left</button>
	<button data-after-text="5" data-after-type="red dot top right" type="button">red dot top right</button>
</p>
<p>
	<button data-after-text="5" data-after-type="green dot bottom left" type="button">green dot bottom left</button>
	<button data-after-text="5" data-after-type="red dot bottom right" type="button">red dot bottom right</button>
</p>

<h2>Pills</h2>
<span data-before-text="before" data-before-type="blue pill">Exiting new item. </span>
<span data-after-text="after" data-after-type="red pill">Exiting new item</span>
<span data-before-text="before" data-before-type="lightgray pill">Exiting new item</span>

[data-after-text],
[data-before-text] {
	--badge-offset-x: calc(0px - var(--badge-size) / 3);
	--badge-offset-y: calc(0px - var(--badge-size) / 3);
	--badge-size: 1.5rem;
	--circle-size: 2rem;
	--dot-offset: 0.5rem;
	--dot-size: 0.5rem;
		
	--b: initial;
	--bgc: hsl(195, 100%, 30%);
	--bdrs: 0;
	--c: hsl(195, 100%, 99%);
	--d: inline-flex;
	--fz: 0.625rem;
	--fw: 700;
	--h: auto;
	--l: initial;
	--m: 0.4rem;
	--p: 0;
	--pos: static;
	--r: initial;
	--t: initial;
	--tt: uppercase;
	--w: initial;
	
	position: relative;
}

[data-after-text]:not([data-after-text=""])::after {
	content: attr(data-after-text);
}
[data-before-text]:not([data-before-text=""])::before {
	content: attr(data-before-text);
}

[data-after-text]:not([data-after-text=""])::after,
[data-before-text]:not([data-before-text=""])::before {
	align-items: center;
	background: var(--bgc);
	border-radius: var(--bdrs);
	bottom: var(--b);
	box-shadow: var(--bxsh);
	box-sizing: border-box;
	color: var(--c);
	display: var(--d);
	font-size: var(--fz);
	font-weight: var(--fw);
	height: var(--h);
	justify-content: center;
	left: var(--l);
	padding: var(--p);
	position: var(--pos);
	right: var(--r);
	text-decoration: none;
	text-transform: var(--tt);
	top: var(--t);
	width: var(--w);
}

/* MODIFIERS */
[data-after-type*="badge"]::after,
[data-before-type*="badge"]::before {
	--bdrs: var(--badge-size);
	--bxsh: 0 0 0 2px rgba(255, 255, 255, 0.5);
	--h: var(--badge-size);
	--p: 0;
	--pos: absolute;
	--w: var(--badge-size);
}
[data-after-type*="circle"],
[data-before-type*="circle"]{
	align-items: center;
	display: flex;
}
[data-after-type*="circle"]::after,
[data-before-type*="circle"]::before {
	--bdrs: 50%;
	--fw: 400;
	--h: var(--circle-size);
	// --pos: relative;
	// --t: -0.75em;
	--tt: initial;
	--w: var(--circle-size);
}
[data-after-type*="circle"]::after,
[data-after-type*="pill"]::after {
	margin-inline-start: 1ch;
}
[data-before-type*="circle"]::before,
[data-before-type*="dot"]::before,
[data-before-type*="pill"]::before {
	margin-inline-end: 1ch;
}
[data-after-type*="dot"]::after,
[data-before-type*="dot"]::before {
	--bdrs: 50%;
	--d: inline-block;
	--fz: 50%;
	--h: var(--dot-size);
	--p: 0;
	--pos: relative;
	--t: -1px;
	--w: var(--dot-size);
}
[data-after-type*="dot"]::after,
[data-before-type*="dot"]::before {
	content: "" !important;
}
[data-after-type*="pill"]::after,
[data-before-type*="pil"]::before {
	--bdrs: 1rem;
	--p: 0.25rem 0.75rem;
	--pos: relative;
	--t: -1px;
}

/* COLORS */
[data-after-type*="blue"]::after,
[data-before-type*="blue"]::before {
	--bgc: #007acc;
}
[data-after-type*="darkgray"]::after,
[data-before-type*="darkgray"]::before {
	--bgc: #706e6b;
	--c: #fff;
}
[data-after-type*="green"]::after,
[data-before-type*="green"]::before {
	--bgc: #04844b;
}
[data-after-type*="lightgray"]::after,
[data-before-type*="lightgray"]::before {
	--bgc: #ecebea;
	--c: #080707;
}
[data-after-type*="orange"]::after,
[data-before-type*="orange"]::before {
	--bgc: #ffb75d;
	--c: #080707;
}

[data-after-type*="red"]::after,
[data-before-type*="red"]::before {
	--bgc: #c23934;
}

/* POSITION */
[data-after-type*="top"]::after,
[data-before-type*="top"]::before {
	--b: auto;
	--pos: absolute;
	--t: var(--dot-offset);
}
[data-after-type*="right"]::after,
[data-before-type*="right"]::before {
	--l: auto;
	--pos: absolute;
	--r: var(--dot-offset);
}
[data-after-type*="bottom"]::after,
[data-before-type*="bottom"]::before {
	--b: var(--dot-offset);
	--pos: absolute;
	--t: auto;
}
[data-after-type*="left"]::after,
[data-before-type*="left"]::before {
	--pos: absolute;
	--r: auto;
	--l: var(--dot-offset);
}
[data-after-type*="badge"][data-after-type*="top"]::after,
[data-before-type*="badge"][data-before-type*="top"]::before {
	--m: 0;
	--t: var(--badge-offset-y);
}
[data-after-type*="badge"][data-after-type*="right"]::after,
[data-before-type*="badge"][data-before-type*="right"]::before {
	--m: 0;
	--r: var(--badge-offset-x);
}
[data-after-type*="badge"][data-after-type*="bottom"]::after,
[data-before-type*="badge"][data-before-type*="bottom"]::before {
	--b: var(--badge-offset-y);
	--m: 0;
}
[data-after-type*="badge"][data-after-type*="left"]::after,
[data-before-type*="badge"][data-before-type*="left"]::before {
	--l: var(--badge-offset-x);
	--m: 0;
}


/* For this demo only */
body { font-family: system-ui, sans-serif; font-size: 1rem; padding: 1rem; }
button {
	background-image: linear-gradient(34deg, hsl(195, 25%, 80%), hsl(195, 25%, 90%));
	border: 0;
	border-radius: .25rem;
	font-size: 1rem;
	margin: 0.5rem 0.5rem 0.5rem 0;
	padding: 0.75rem 1.5rem;
}