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

.woocommerce-product-gallery {
	transition: opacity 0.3s ease;

	// when switching variation gallery
	&[data-state="loading"] {
		opacity: 0.3;
	}

	.ct-media-container {
		display: flex;
		border-radius: var(--border-radius);
	}
}


// default & stacked gallery
.ct-default-gallery,
.ct-stacked-gallery {

	.product-entry-wrapper {

		@include functions.media-breakpoint-up (lg) {
			display: flex;
		}
	}

	.woocommerce-product-gallery {
		@include functions.media-breakpoint-only (md) {
			width: 100%;
		}

		@include functions.media-breakpoint-up (lg) {
			width: var(--product-gallery-width, 50%);
		}
	}

	.entry-summary {
		@include functions.media-breakpoint-only (md) {
			width: 100%;
		}

		@include functions.media-breakpoint-up (lg) {
			margin-inline-start: 40px;
			width: calc( 100% - var(--product-gallery-width, 50%) );
		}
	}
}