/* ==========================================================
 * WT BADGE
 * Estensione condivisa
 * ========================================================== */

[data-wt-badge] {
	position: relative;
	overflow: visible;
}

[data-wt-badge]::before {
	content: attr(data-wt-badge);

	position: absolute;
	z-index: 50;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	box-sizing: border-box;

	min-width: 2.2em;
	min-height: 2.2em;

	padding: 0.4em 0.7em;

	font-size:
		var(
			--wtsbk-badge-font-size,
			10px
		);

	font-weight: 700;
	line-height: 1;

	color:
		var(
			--wtsbk-badge-color,
			#ffffff
		);

	background-color:
		var(
			--wtsbk-badge-background,
			#d63638
		);

	border-radius: 999px;

	white-space: nowrap;
	pointer-events: none;
}


/* ==========================================================
 * POSIZIONI
 * ========================================================== */

/* Alto destra */

[data-wt-badge-position="top-right"]::before {
	top: 0;
	right: 0;

	transform: translate(
		var(--wtsbk-badge-offset-x, 40%),
		calc(
			var(
				--wtsbk-badge-offset-y,
				40%
			) * -1
		)
	);
}


/* Alto sinistra */

[data-wt-badge-position="top-left"]::before {
	top: 0;
	left: 0;

	transform: translate(
		calc(
			var(
				--wtsbk-badge-offset-x,
				40%
			) * -1
		),
		calc(
			var(
				--wtsbk-badge-offset-y,
				40%
			) * -1
		)
	);
}


/* Basso destra */

[data-wt-badge-position="bottom-right"]::before {
	right: 0;
	bottom: 0;

	transform: translate(
		var(--wtsbk-badge-offset-x, 40%),
		var(--wtsbk-badge-offset-y, 40%)
	);
}


/* Basso sinistra */

[data-wt-badge-position="bottom-left"]::before {
	bottom: 0;
	left: 0;

	transform: translate(
		calc(
			var(
				--wtsbk-badge-offset-x,
				40%
			) * -1
		),
		var(--wtsbk-badge-offset-y, 40%)
	);
}