[hr-badge-after],
[hr-badge-before] {
	--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;

	--badge-bottom: initial;
	--badge-background-color: hsl(195, 100%, 30%);
	--badge-border-radius: 0;
	--badge-color: hsl(195, 100%, 99%);
	--badge-display: inline-flex;
	--badge-font-size: 0.625rem;
	--badge-font-weight: 700;
	--badge-hight: auto;
	--badge-left: initial;
	--badge-padding: 0;
	--badge-position: static;
	--badge-right: initial;
	--badge-top: initial;
	--badge-text-transform: uppercase;
	--badge-width: initial;

	position: relative;
}

[hr-badge-after]:not([hr-badge-after=""])::after {
	content: attr(hr-badge-after);
}

[hr-badge-font-size]:not([hr-badge-font-size=""]) {
	--badge-font-size: attr(hr-badge-font-size);
}

[hr-badge-before]:not([hr-badge-before=""])::before {
	content: attr(hr-badge-before);
}

[hr-badge-after]:not([hr-badge-after=""])::after,
[hr-badge-before]:not([hr-badge-before=""])::before {
	align-items: center;
	background: var(--badge-background-color) !important;
	border-radius: var(--badge-border-radius);
	bottom: var(--badge-bottom);
	box-shadow: var(--bxsh);
	box-sizing: border-box;
	color: var(--badge-color);
	display: var(--badge-display);
	font-size: var(--badge-font-size);
	font-weight: var(--badge-font-weight);
	height: var(--badge-hight);
	justify-content: center;
	left: var(--badge-left);
	padding: var(--badge-padding);
	position: var(--badge-position);
	right: var(--badge-right);
	text-decoration: none;
	text-transform: var(--badge-text-transform);
	top: var(--badge-top);
	width: var(--badge-width);
}

/* MODIFIERS */
[hr-badge-after-type*="badge"]::after,
[hr-badge-before-type*="badge"]::before {
	--badge-border-radius: var(--badge-size);
	--bxsh: 0 0 0 2px rgba(255, 255, 255, 0.5);
	--badge-hight: var(--badge-size);
	--badge-padding: 0;
	--badge-position: absolute;
	--badge-width: var(--badge-size);
}
[hr-badge-after-type*="circle"],
[hr-badge-before-type*="circle"]{
	align-items: center;
	display: flex;
}
[hr-badge-after-type*="circle"]::after,
[hr-badge-before-type*="circle"]::before {
	--badge-border-radius: 50%;
	--badge-font-weight: 400;
	--badge-hight: var(--circle-size);
	// --badge-position: relative;
	// --badge-top: -0.75em;
	--badge-text-transform: initial;
	--badge-width: var(--circle-size);
}
[hr-badge-after-type*="circle"]::after,
[hr-badge-after-type*="pill"]::after {
	margin-inline-start: 1ch;
}
[hr-badge-before-type*="circle"]::before,
[hr-badge-before-type*="dot"]::before,
[hr-badge-before-type*="pill"]::before {
	margin-inline-end: 1ch;
}
[hr-badge-after-type*="dot"]::after,
[hr-badge-before-type*="dot"]::before {
	--badge-border-radius: 50%;
	--badge-display: inline-block;
	--badge-font-size: 50%;
	--badge-hight: var(--dot-size);
	--badge-padding: 0;
	--badge-position: relative;
	--badge-top: -1px;
	--badge-width: var(--dot-size);
}
[hr-badge-after-type*="dot"]::after,
[hr-badge-before-type*="dot"]::before {
	content: "" !important;
}
[hr-badge-after-type*="pill"]::after,
[hr-badge-before-type*="pil"]::before {
	--badge-border-radius: 1rem;
	--badge-padding: 0.25rem 0.75rem;
	--badge-position: relative;
	--badge-top: -1px;
}

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

[hr-badge-after-type*="red"]::after,
[hr-badge-before-type*="red"]::before {
	--badge-background-color: #ff0900;//#c23934;
}

/* POSITION */
[hr-badge-after-type*="top"]::after,
[hr-badge-before-type*="top"]::before {
	--badge-bottom: auto;
	--badge-position: absolute;
	--badge-top: var(--dot-offset);
}
[hr-badge-after-type*="right"]::after,
[hr-badge-before-type*="right"]::before {
	--badge-left: auto;
	--badge-position: absolute;
	--badge-right: var(--dot-offset);
}
[hr-badge-after-type*="bottom"]::after,
[hr-badge-before-type*="bottom"]::before {
	--badge-bottom: var(--dot-offset);
	--badge-position: absolute;
	--badge-top: auto;
}
[hr-badge-after-type*="left"]::after,
[hr-badge-before-type*="left"]::before {
	--badge-position: absolute;
	--badge-right: auto;
	--badge-left: var(--dot-offset);
}
[hr-badge-after-type*="badge"][hr-badge-after-type*="top"]::after,
[hr-badge-before-type*="badge"][hr-badge-before-type*="top"]::before {
	--badge-top: var(--badge-offset-y);
}
[hr-badge-after-type*="badge"][hr-badge-after-type*="right"]::after,
[hr-badge-before-type*="badge"][hr-badge-before-type*="right"]::before {
	--badge-right: var(--badge-offset-x);
}
[hr-badge-after-type*="badge"][hr-badge-after-type*="bottom"]::after,
[hr-badge-before-type*="badge"][hr-badge-before-type*="bottom"]::before {
	--badge-bottom: var(--badge-offset-y);
}
[hr-badge-after-type*="badge"][hr-badge-after-type*="left"]::after,
[hr-badge-before-type*="badge"][hr-badge-before-type*="left"]::before {
	--badge-left: var(--badge-offset-x);
}
