.xt_woopr-pbadge {

	&.xt_woopr-pbadge-fullwidth{
		--xt-woopr-pbadge-width: 100%;
	}

	&.xt_woopr-pbadge-fullheight{
		--xt-woopr-pbadge-height: 100%;
	}

	position: relative;
	display: flex;
	align-items: var(--xt-woopr-pbadge-valign);
	border-radius: var(--xt-woopr-pbadge-radius);
	border: var(--xt-woopr-pbadge-border-width) var(--xt-woopr-pbadge-border-style) var(--xt-woopr-pbadge-border-color);
	width: var(--xt-woopr-pbadge-width);
	height: var(--xt-woopr-pbadge-height);
	max-width:120%;
	max-height:120%;
	padding: var(--xt-woopr-pbadge-padding);
	font-weight: var(--xt-woopr-pbadge-font-weight);
	font-size: var(--xt-woopr-pbadge-font-size);
	line-height: calc(var(--xt-woopr-pbadge-font-size) * 1.3);
	z-index: var(--xt-woopr-pbadge-zindex);
	background-color: var(--xt-woopr-pbadge-background-color);
	color: var(--xt-woopr-pbadge-color);

	&.xt_woopr-pbadge-hover{
		opacity:0;
		visibility: hidden;
		transition: opacity 0.3s;

		.xtfw-wc-product-image:hover &{
			opacity:1;
			visibility: visible;
		}
	}

	&:not(.xt_woopr-pbadge-absolute){

		margin: var(--xt-woopr-pbadge-margin);

		&.xt_woopr-pbadge-top-left {
			top:0;
			left:0;
		}

		&.xt_woopr-pbadge-top {
			top:0;
			left:50%;
			transform: translateX(-50%);
		}

		&.xt_woopr-pbadge-top-right {
			top:0;
			left: 100%;
			transform: translateX(-100%);
		}

		&.xt_woopr-pbadge-bottom-left {
			bottom: 0;
			left: 0;
		}

		&.xt_woopr-pbadge-bottom {
			bottom: 0;
			left:50%;
			transform: translateX(-50%);
		}

		&.xt_woopr-pbadge-bottom-right {
			bottom: 0;
			left: 100%;
			transform: translateX(-100%);
		}
	}

	&.xt_woopr-pbadge-absolute {

		position: absolute;

		&.xt_woopr-pbadge-top,
		&.xt_woopr-pbadge-bottom{
			--xt-woopr-pbadge-center-x: 50%;
		}

		transform: translateX(calc(var(--xt-woopr-pbadge-x) - var(--xt-woopr-pbadge-center-x))) translateY(var(--xt-woopr-pbadge-y)) rotate(var(--xt-woopr-pbadge-rotate));

		&.xt_woopr-pbadge-top-left {
			top:0;
			left:0;
			margin-top: var(--xt-woopr-pbadge-top);
			margin-left: var(--xt-woopr-pbadge-left);
		}

		&.xt_woopr-pbadge-top {
			top:0;
			left:50%;
			margin-top: var(--xt-woopr-pbadge-top);
			margin-left: var(--xt-woopr-pbadge-left);
		}

		&.xt_woopr-pbadge-top-right {
			top:0;
			right:0;
			margin-top: var(--xt-woopr-pbadge-top);
			margin-right: var(--xt-woopr-pbadge-right);
		}

		&.xt_woopr-pbadge-bottom-left {
			bottom: 0;
			left: 0;
			margin-bottom: var(--xt-woopr-pbadge-bottom);
			margin-left: var(--xt-woopr-pbadge-left);
		}

		&.xt_woopr-pbadge-bottom {
			bottom: 0;
			left:50%;
			margin-bottom: var(--xt-woopr-pbadge-bottom);
			margin-left: var(--xt-woopr-pbadge-left);
		}

		&.xt_woopr-pbadge-bottom-right {
			bottom: 0;
			right: 0;
			margin-bottom: var(--xt-woopr-pbadge-bottom);
			margin-right: var(--xt-woopr-pbadge-right);
		}
	}

	.xt_woopr-pbadge-points {
		position: relative;
		z-index: 10;
		flex: 1;
		text-align: var(--xt-woopr-pbadge-align);
	}
}


.xt_woopr-pbadge-sparkles {
	position: absolute;
	height: 0.625rem;
	width: 0.625rem;
	display: inline-flex;
	z-index: 4;
	animation: xt_woopr_sparkles_animation 1.5s ease infinite;
	transition: top 4s, left 4s, opacity 0.3s;
	will-change: top, left, opacity;
	opacity: 0;

	&::before,
	&::after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		width: 100%;
		height: 30%;
		background-color: var(--xt-woopr-pbadge-sparkle-color);
		border-radius: 0.625rem;
	}

	&::after {
		transform: rotate(90deg);
	}

	&:nth-of-type(1) {
		top: 20%;
		left: 10%;
	}

	&:nth-of-type(2) {
		top: 80%;
		left: 30%;
	}

	&:nth-of-type(3) {
		top: 30%;
		left: 80%;
	}

	&:nth-of-type(1) {
		animation-delay: 0.3333333333s;
	}

	&:nth-of-type(2) {
		animation-delay: 0.6666666667s;
	}

	&:nth-of-type(3) {
		animation-delay: 1s;
	}
}

@keyframes xt_woopr_sparkles_animation {
	0%, 100% {
		transform: scale(1);
		opacity: 1;
		filter: blur(1px);
	}
	50% {
		transform: scale(0.5);
		filter: blur(2px);
	}
}