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

:is(
	.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);
	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-radius: 200px;
		--badge-height: 48px;
		--badge-min-width: auto;
		--badge-padding: 5px 7px;	
	}
}


// product gallery badge position
// .product-entry-wrapper {
// 	position: relative;
// }

.woocommerce-product-gallery {
	--badge-top: 20px;
	--badge-left: 20px;

	&[data-thumbs="left"] {
		@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);
		}
	}
}