@use "../../1-helpers/functions";

.onsale,
.out-of-stock-badge,
[class*="ct-woo-badge-"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
	position: var(--has-container, absolute);
	top: var(--has-container, var(--badge-top, 15px));
	inset-inline-start: var(--has-container, var(--badge-left, 15px));
	height: var(--badge-height, 28px);
	min-width: var(--badge-min-width, 55px);
	border-radius: var(--badge-radius, 0px);
	padding: var(--badge-padding, 5px 10px);
	// font-size: var(--badge-font-size, 12px);
	// line-height: var(--badge-line-height, 0);
	// font-weight: 600;
	text-align: center;
	color: var(--badge-text-color, #fff);
	background-color: var(--badge-background-color, var(--theme-palette-color-1));

	&[data-shape="type-2"] {
		--badge-radius: 3px;
	}

	&[data-shape="type-3"] {
		aspect-ratio: 1/1;
		// --badge-font-size: 10px;
		// --badge-line-height: 1.2;
		--badge-radius: 200px;
		--badge-height: 48px;
		--badge-min-width: auto;
		--badge-padding: 5px 7px;	
	}
}


// product gallery badge position
.product-entry-wrapper {
	position: relative;
	
	--badge-top: 20px;
	--badge-left: 20px;
}

.thumbs-left .product-entry-wrapper {
	@include functions.media-breakpoint-down (sm) {
		--badge-left: 20px;
	}

	@include functions.media-breakpoint-up (md) {
		--badge-left: calc(var(--thumbs-width) + var(--thumbs-spacing, 15px) + 20px);
	}
}