woocommerce/plugins/woocommerce-blocks/assets/js/blocks/product-gallery/style.scss

$gallery: ".wc-block-product-gallery";
$large-image: "#{$gallery}-large-image";
$thumbnails: "#{$gallery}-thumbnails";
$next-previous: "#{$large-image}-next-previous";
$next-previous-left-off: "#{$next-previous}-left--off";
$next-previous-right-off: "#{$next-previous}-right--off";
$gallery-next-previous-outside-image: "#{$gallery}[data-next-previous-buttons-position='outsideTheImage']:not(.is-single-product-gallery-image)";
$gallery-next-previous-inside-image: "#{$gallery}:not([data-next-previous-buttons-position='outsideTheImage']:not(.is-single-product-gallery-image))";

$outside-image-offset: 30px;
$outside-image-max-width: calc(100% - (2 * $outside-image-offset));
$thumbnails-gap: 15px;
$default-number-of-thumbnails: 3;
$dialog-header-height: 29px;
$dialog-header-padding-top: calc(30px / 2);
$admin-bar-desktop-height: 32px;
$admin-bar-mobile-height: 46px;

// Product Gallery
#{$gallery} {
	.wc-block-product-gallery-dialog__overlay {
		height: 100vh;
		width: 100vw;
		position: fixed;
		top: 0;
		left: 0;
		background-color: #808080;
		z-index: 9999;
	}

	dialog {
		position: fixed;
		border: none;
		top: 0;
		z-index: 9999;
		padding-top: 0;
		height: 100vh;

		.admin-bar & {
			margin-top: $admin-bar-desktop-height;
			height: calc(100vh - $admin-bar-desktop-height);
		}

		@media screen and (max-width: 782px) {
			.admin-bar & {
				margin-top: $admin-bar-mobile-height;
				height: calc(100vh - $admin-bar-mobile-height);
			}
		}

		.wc-block-product-gallery-dialog__header {
			padding-top: $dialog-header-padding-top;
		}

		.wc-block-product-galler-dialog__header-right {
			display: flex;
			justify-content: flex-end;

			.wc-block-product-gallery-dialog__close {
				border: none;
				background-color: transparent;
				outline: none;
				cursor: pointer;
			}
		}

		#{$large-image} {
			height: calc(100vh - $dialog-header-height - $dialog-header-padding-top);

			.admin-bar & {
				height: calc(100vh - $admin-bar-desktop-height - $dialog-header-height - $dialog-header-padding-top);
			}

			@media screen and (max-width: 782px) {
				.admin-bar & {
					height: calc(100vh - $admin-bar-mobile-height - $dialog-header-height - $dialog-header-padding-top);
				}
			}

			img {
				object-fit: unset;
				aspect-ratio: unset;
				max-height: calc(100vh - (2 * $dialog-header-height) - $dialog-header-padding-top);
				width: auto;

				.admin-bar & {
					max-height: calc(100vh - $admin-bar-desktop-height - (2 * $dialog-header-height) - $dialog-header-padding-top);
				}

				@media screen and (max-width: 782px) {
					.admin-bar & {
						max-height: calc(100vh - $admin-bar-mobile-height - (2 * $dialog-header-height) - $dialog-header-padding-top);
					}
				}
			}

			.wc-block-product-gallery-large-image__wrapper {
				align-items: center;
				aspect-ratio: unset;
			}

			.wc-block-product-gallery-large-image__container {
				height: calc(100vh - (2 * $dialog-header-height) - $dialog-header-padding-top);
				overflow: hidden;

				.admin-bar & {
					height: calc(100vh - $admin-bar-desktop-height - (2 * $dialog-header-height) - $dialog-header-padding-top);
				}

				@media screen and (max-width: 782px) {
					.admin-bar & {
						height: calc(100vh - $admin-bar-mobile-height - (2 * $dialog-header-height) - $dialog-header-padding-top);
					}
				}
			}
		}

		#{$next-previous} {
			height: calc(100vh - $dialog-header-height - $dialog-header-padding-top);

			.admin-bar & {
				height: calc(100vh - $admin-bar-desktop-height - $dialog-header-height - $dialog-header-padding-top);
			}

			@media screen and (max-width: 782px) {
				.admin-bar & {
					height: calc(100vh - $admin-bar-mobile-height - $dialog-header-height - $dialog-header-padding-top);
				}
			}
		}
	}
}

// Large Image
#{$large-image} {
	width: 100%;
	height: fit-content;
	position: relative;
	overflow: hidden;
	flex-grow: 1;

	// Restrict the width of the Large Image when the Next/Previous buttons are outside the image.
	#{$gallery-next-previous-outside-image} & .wc-block-product-gallery-large-image__image-element {
		overflow: hidden;
		margin-right: auto;
		margin-left: auto;
		max-width: $outside-image-max-width;
	}

	.wc-block-product-gallery-large-image__container {
		display: flex;
		overflow-x: hidden;
		scroll-snap-type: x mandatory;
		scroll-behavior: auto;
		width: fit-content;
		height: fit-content;
		align-items: center;
		margin: 0;
		padding: 0;
	}

	.wc-block-product-gallery-large-image__wrapper {
		aspect-ratio: 1 / 1;
		flex-shrink: 0;
		max-width: 100%;
		overflow: hidden;
		width: 100%;
		display: flex;
		align-items: center;
		scroll-snap-align: none center;
	}

	#{$gallery-next-previous-inside-image} & .wc-block-product-gallery-large-image__image-element {
		width: fit-content;
		overflow: hidden;
		margin-right: auto;
		margin-left: auto;
	}


	img {
		display: block;
		position: relative;
		margin: 0 auto;
		z-index: 1;
		transition: all 0.1s linear;
		aspect-ratio: 1 / 1;
		object-fit: contain;

		// Keep the order in this way. The hoverZoom class should override the full-screen-on-click class when both are applied.
		&.wc-block-woocommerce-product-gallery-large-image__image--full-screen-on-click {
			cursor: pointer;
		}

		&.wc-block-woocommerce-product-gallery-large-image__image--hoverZoom {
			cursor: zoom-in;
		}
	}

	.wc-block-product-gallery-large-image__inner-blocks {
		display: flex;
		flex-direction: column;
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;

		// Reset the margin of the inner blocks when the Next/Previous buttons are outside the image.
		#{$gallery-next-previous-outside-image} & > * {
			margin-left: $outside-image-offset;
			margin-right: $outside-image-offset;
		}

		// Unset the margin of the inner blocks when the Next/Previous buttons are inside the image.
		#{$gallery-next-previous-inside-image}  & > * {
			margin-left: unset;
			margin-right: unset;
		}
	}
}

// Next/Previous Buttons
#{$next-previous} {
	display: flex;
	position: absolute;
	flex-direction: row;
	justify-content: space-between;
	width: 100%;
	height: 100%;

	button {
		cursor: pointer;
		z-index: 3;
		pointer-events: all;
		padding: 0;
		border: none;
		background: none;
	}

	.is-vertically-aligned-top {
		align-items: flex-start;
	}

	.is-vertically-aligned-center {
		align-items: center;
	}

	.is-vertically-aligned-bottom {
		align-items: flex-end;
	}
}

// Next/Previous Buttons Settings
.wc-block-product-gallery-large-image-next-previous-settings {
	width: 100%;
}

// Next/Previous Buttons Off Setting
#{$next-previous-left-off},
#{$next-previous-right-off} {
	display: none;
}

//  Next/Previous Buttons Inside the Image Settings
.wc-block-product-gallery-large-image-next-previous-left--inside-image {
	margin-left: 15px;
}

.wc-block-product-gallery-large-image-next-previous-right--inside-image {
	margin-right: 15px;
}

// Next/Previous Buttons Outside the Image Settings
#{$gallery-next-previous-outside-image} .wc-block-product-gallery-large-image-next-previous-left--outside-image {
	bottom: 0;
	left: 0;
	position: absolute;
}

#{$gallery-next-previous-outside-image} .wc-block-product-gallery-large-image-next-previous-right--outside-image {
	bottom: 0;
	right: 0;
	position: absolute;
}

#{$gallery-next-previous-outside-image} #{$large-image} #{$next-previous} {
	margin-right: 0;
	margin-left: 0;
}

.wc-block-product-gallery-large-image-next-previous-container {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	position: absolute;
	width: 100%;

	&.wc-block-product-gallery-large-image-next-previous--inside-image {
		margin-top: 15px;
		margin-bottom: 15px;
	}
}

// Pager
.wc-block-product-gallery-pager__pager {
	display: flex;
	justify-content: center;
	list-style: none;
	gap: $gap-small;
	margin-top: 0;
	margin-bottom: 0;
	padding: 0;

	button {
		border: none;
		background: none;
		color: inherit;
		font-size: inherit;
		font-weight: inherit;
		padding: 0;
		cursor: pointer;
	}
}

.wc-block-product-gallery-pager__pager-item {
	@include font-size(regular);
	color: $gray-600;
	cursor: pointer;
}

.wc-block-product-gallery-pager__pager-item--is-active {
	font-weight: bold;
	color: $black;
}

// Thumbnails
#{$thumbnails} {
	display: flex;

	img {
		cursor: pointer;
		height: auto;
		width: auto;
		max-width: 100%;
	}

	#{$gallery}[data-thumbnails-position='bottom'] & {
		flex-direction: row;
		gap: 0 15px;
	}

	#{$gallery}:not([data-thumbnails-position='bottom']) & {
		flex-direction: column;
		gap: 15px 0;

		// Calculate the total width occupied by the gaps between thumbnails.
		$gap-width: $thumbnails-gap * ($default-number-of-thumbnails - 1);

		// Calculate the border width, which is multiplied by 2 to account for both sides of each thumbnail.
		$border-width: #{$default-number-of-thumbnails * 1px * 2};

		// Calculate the width of each thumbnail by accounting for the gap, border, and additional space.
		flex-basis: calc((100% - #{$gap-width} - #{$border-width} - 4px) / #{$default-number-of-thumbnails});
	}

	@for $i from 3 through 8 {
		#{$gallery}[data-thumbnails-number-of-thumbnails='#{$i}']:not([data-thumbnails-position='bottom']) & {
			// Calculate the total width occupied by the gaps between thumbnails.
			$gap-width: $thumbnails-gap * ($i - 1);

			// Calculate the border width, which is multiplied by 2 to account for both sides of each thumbnail.
			$border-width: $i * 1px * 2;

			flex-basis: calc((100% - #{$gap-width} - #{$border-width}) / $i);
		}
	}

	.wc-block-product-gallery-thumbnails__thumbnail {
		border: 1px solid rgba($color: #000, $alpha: 0.1);
		height: auto;
		width: auto;
		display: flex;
		justify-content: center;
		align-items: center;
		aspect-ratio: 1 / 1;
		position: relative;
		flex-basis: 0;
		flex-grow: 1;

		img {
			aspect-ratio: 1 / 1;
			object-fit: contain;
		}

		&::before {
			content: "";
			display: block;
			padding-top: 100%;
		}

		@for $i from 3 through 8 {
			#{$gallery}[data-thumbnails-number-of-thumbnails='#{$i}'][data-thumbnails-position="bottom"] & {
				// Calculate the total width occupied by the gaps between thumbnails.
				$gap-width: $thumbnails-gap * ($i - 1);

				// Calculate the border width, which is multiplied by 2 to account for both sides of each thumbnail.
				$border-width: $i * 1px * 2;

				$thumbnail-width: calc((100% - #{$gap-width} - #{$border-width}) / $i);

				flex: 0 0 $thumbnail-width;
			}
		}
	}

	.wc-block-product-gallery-thumbnails__thumbnail__overlay {
		container-type: inline-size;
		cursor: pointer;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: absolute;
		background-color: rgba(0, 0, 0, 0.4);
		top: 0;
		width: 100%;
		height: 100%;
		line-height: 1.5;

		.wc-block-product-gallery-thumbnails__thumbnail__remaining-thumbnails-count {
			font-size: 1.2rem;
			font-weight: 700;
		}

		.wc-block-product-gallery-thumbnails__thumbnail__view-all {
			text-decoration: underline;
		}

		.wc-block-product-gallery-thumbnails__thumbnail__remaining-thumbnails-count,
		.wc-block-product-gallery-thumbnails__thumbnail__view-all {
			color: #fff;
		}

		@container (width < 70px) {
			.wc-block-product-gallery-thumbnails__thumbnail__view-all {
				display: none;
			}

			.wc-block-product-gallery-thumbnails__thumbnail__remaining-thumbnails-count {
				font-size: 1rem;
			}

			.wc-block-product-gallery-thumbnails__thumbnail__view-all {
				font-size: 0.6rem;
			}
		}

		@container (width > 70px) {
			.wc-block-product-gallery-thumbnails__thumbnail__remaining-thumbnails-count {
				font-size: 1.2rem;
			}

			.wc-block-product-gallery-thumbnails__thumbnail__view-all {
				font-size: 0.8rem;
			}
		}

		@container (width > 100px) {
			.wc-block-product-gallery-thumbnails__thumbnail__remaining-thumbnails-count {
				font-size: 1.4rem;
			}

			.wc-block-product-gallery-thumbnails__thumbnail__view-all {
				font-size: 1rem;
			}
		}
	}
}