@use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;
@use "../../shared/styles/jetpack-variables";

.wp-block-jetpack-slideshow {
	min-width: 0;
	margin-bottom: jetpack-variables.$jetpack-block-margin-bottom;
	position: relative;

	[tabindex="-1"]:focus {
		outline: 0;
	}

	&.wp-amp-block {

		> .wp-block-jetpack-slideshow_container {
			opacity: 1;
		}
	}

	&.wp-amp-block.wp-block-jetpack-slideshow__autoplay {

		&.wp-block-jetpack-slideshow__autoplay-playing .wp-block-jetpack-slideshow_button-pause,
		.wp-block-jetpack-slideshow_button-play {
			display: block;
		}

		&.wp-block-jetpack-slideshow__autoplay-playing .wp-block-jetpack-slideshow_button-play {
			display: none;
		}
	}

	.wp-block-jetpack-slideshow_container {
		width: 100%;
		overflow: hidden;
		opacity: 0;

		&.wp-swiper-initialized {
			opacity: 1;
		}

		// Prevent layout shifts during loading, by using serialized aspect ratio.
		// These rules mimic the conditions in swiperResize() on swiper-callbacks.js.
		&:not(.wp-swiper-initialized) .wp-block-jetpack-slideshow_swiper-wrapper {
			aspect-ratio: max(min(var(--aspect-ratio), calc(16 / 9)), 1);
			max-height: 80vh;
		}

		// For older slideshows, where the aspect ratio wasn't serialized,
		// we can partially mitigate layout shifts during loading.
		// Since the aspect ratio is always calculated based on the first slide,
		// we ensure that other slides don't affect the block height while loading.
		// This reduces layout shifts if a later image is taller than the first one.
		&:not(.wp-swiper-initialized) .wp-block-jetpack-slideshow_slide:not(:first-of-type) {
			height: 1px;
		}

		//overide display collision with coblocks plugin styles which causes a gap
		//see https://github.com/Automattic/wp-calypso/issues/63082#issuecomment-1175225512
		&.swiper-container {
			display: block;
		}

		// High specifity to override theme styles
		.wp-block-jetpack-slideshow_swiper-wrapper,
		.wp-block-jetpack-slideshow_slide {
			padding: 0;
			margin: 0;
			line-height: normal;
		}

		ul.wp-block-jetpack-slideshow_swiper-wrapper {
			display: flex;
		}
	}

	.wp-block-jetpack-slideshow_slide {
		display: flex;
		height: 100%;
		width: 100%;

		figure {
			align-items: center;
			display: flex;
			height: 100%;
			justify-content: center;
			margin: 0;
			position: relative;
			width: 100%;

			.wp-block-jetpack-slideshow_image {
				pointer-events: none;
				user-select: none;
			}
		}
	}

	&.alignwide .wp-block-jetpack-slideshow_image,
	&.alignfull .wp-block-jetpack-slideshow_image {
		width: 100vw;
		max-width: unset;
		object-fit: cover;
	}

	// When slideshow transition is set to "fade", hide slides that are not active.
	.swiper-fade .wp-block-jetpack-slideshow_slide:not(.swiper-slide-active) {
		opacity: 0 !important;
	}

	.wp-block-jetpack-slideshow_image {
		display: block;
		height: auto;
		max-height: 100%;
		max-width: 100%;
		width: auto;
		object-fit: contain;
	}

	.wp-block-jetpack-slideshow_button-prev,
	.wp-block-jetpack-slideshow_button-next,
	.wp-block-jetpack-slideshow_button-pause,
	.wp-block-jetpack-slideshow_button-play,
	.amp-carousel-button {
		background-color: rgba(255, 255, 255);
		transition: 0.5s opacity ease-out;
		opacity: 0.5;
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
		border: 0;
		border-radius: 4px;
		box-shadow: none;
		height: 30px;
		margin: -14px 0 0;
		padding: 0;
		width: 28px;

		&:focus,
		&:hover {
			background-color: rgb(255, 255, 255);
			opacity: 1;
		}

		&:focus {
			outline: thin dotted gb.$white;
			outline-offset: -4px;
		}
	}

	.amp-carousel-button {
		margin: 0;
	}

	.wp-block-jetpack-slideshow_button-prev,
	.wp-block-jetpack-slideshow_button-next {
		display: none;
	}

	// Prevent swiper button pseudo-element content displaying duplicate arrows.
	.swiper-button-prev::after,
	.swiper-rtl .swiper-button-next::after {
		content: "";
	}

	.swiper-button-next::after,
	.swiper-rtl .swiper-button-prev::after {
		content: "";
	}

	&.swiper-rtl .swiper-button-prev.swiper-button-white,
	&.swiper-rtl .wp-block-jetpack-slideshow_button-prev,
	.swiper-button-next.swiper-button-white,
	.wp-block-jetpack-slideshow_button-next,
	.amp-carousel-button-next {
		background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjUiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNSAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48bWFzayBpZD0ibWFza05leHQiIG1hc2stdHlwZT0iYWxwaGEiIG1hc2tVbml0cz0idXNlclNwYWNlT25Vc2UiIHg9IjgiIHk9IjYiIHdpZHRoPSI4IiBoZWlnaHQ9IjEyIj48cGF0aCBkPSJNOC41OTgxNCAxNi41OUwxMy4xNTU3IDEyTDguNTk4MTQgNy40MUwxMC4wMDEyIDZMMTUuOTcxOCAxMkwxMC4wMDEyIDE4TDguNTk4MTQgMTYuNTlaIiBmaWxsPSJ3aGl0ZSIvPjwvbWFzaz48ZyBtYXNrPSJ1cmwoI21hc2tOZXh0KSI+PHJlY3QgeD0iMC4zNDM3NSIgd2lkdGg9IjIzLjg4MjIiIGhlaWdodD0iMjQiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+);
	}

	&.swiper-rtl .swiper-button-next.swiper-button-white,
	&.swiper-rtl .wp-block-jetpack-slideshow_button-next,
	.swiper-button-prev.swiper-button-white,
	.wp-block-jetpack-slideshow_button-prev,
	.amp-carousel-button-prev {
		background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjUiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNSAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48bWFzayBpZD0ibWFza1ByZXYiIG1hc2stdHlwZT0iYWxwaGEiIG1hc2tVbml0cz0idXNlclNwYWNlT25Vc2UiIHg9IjgiIHk9IjYiIHdpZHRoPSI5IiBoZWlnaHQ9IjEyIj48cGF0aCBkPSJNMTYuMjA3MiAxNi41OUwxMS42NDk2IDEyTDE2LjIwNzIgNy40MUwxNC44MDQxIDZMOC44MzM1IDEyTDE0LjgwNDEgMThMMTYuMjA3MiAxNi41OVoiIGZpbGw9IndoaXRlIi8+PC9tYXNrPjxnIG1hc2s9InVybCgjbWFza1ByZXYpIj48cmVjdCB4PSIwLjU3OTEwMiIgd2lkdGg9IjIzLjg4MjMiIGhlaWdodD0iMjQiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+);
	}

	.wp-block-jetpack-slideshow_button-play,
	.wp-block-jetpack-slideshow_button-pause {
		// stylelint-disable-next-line function-url-quotes -- quotes are required here. Bug report: https://github.com/stylelint/stylelint/issues/8544
		background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M6%2019h4V5H6v14zm8-14v14h4V5h-4z'%20fill='black'/%3E%3Cpath%20d='M0%200h24v24H0z'%20fill='none'/%3E%3C/svg%3E");
		display: none;
		margin-top: 0;
		position: absolute;
		inset-inline-end: 10px;
		top: 10px;
		z-index: 1;
	}

	.wp-block-jetpack-slideshow_button-play,
	.wp-block-jetpack-slideshow_autoplay-paused .wp-block-jetpack-slideshow_button-pause {
		// stylelint-disable-next-line function-url-quotes -- quotes are required here. Bug report: https://github.com/stylelint/stylelint/issues/8544
		background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M8%205v14l11-7z'%20fill='black'/%3E%3Cpath%20d='M0 0h24v24H0z'%20fill='none'/%3E%3C/svg%3E");
	}

	&[data-autoplay="true"] .wp-block-jetpack-slideshow_button-pause,
	&:has(> div[data-autoplay="true"]) .wp-block-jetpack-slideshow_button-pause {
		display: block;
	}

	.wp-block-jetpack-slideshow_caption.gallery-caption {
		background-color: rgba(0, 0, 0, 0.5);
		box-sizing: border-box;
		bottom: 0;
		color: gb.$white;
		cursor: text;
		left: 0;
		margin: 0 !important;
		max-height: 100%;
		opacity: 1;
		padding: 0.75em;
		position: absolute;
		right: 0;
		text-align: initial;
		z-index: 1;

		a {
			color: inherit;
		}
	}

	&[data-autoplay="true"] .wp-block-jetpack-slideshow_caption.gallery-caption {
		max-height: calc(100% - 68px);
	}


	.wp-block-jetpack-slideshow_pagination.swiper-pagination-custom,
	.wp-block-jetpack-slideshow_pagination.swiper-pagination-bullets {
		bottom: 0;
		line-height: 24px;
		padding: 10px 0 2px;
		position: relative;
		display: flex;
		justify-content: flex-start;
		gap: 8px;

		.swiper-pagination-bullet {
			background: currentColor;
			color: currentColor;
			height: 8px;
			opacity: 0.5;
			transform: scale(0.75);
			transition: opacity 250ms, transform 250ms;
			vertical-align: top;
			width: 8px;

			&:focus,
			&:hover {
				opacity: 1;
			}

			&:focus {
				outline: thin dotted;
				outline-offset: 0;
			}
		}

		.swiper-pagination-bullet[selected],
		.swiper-pagination-bullet-active {
			background-color: currentColor;
			opacity: 1;
			transform: scale(1);
		}

		.swiper-pagination-simple {
			line-height: 16px;
			font-size: 14px;
			width: 100%;
			text-align: start;
		}
	}
}

.wp-block-jetpack-slideshow_pagination.amp-pagination {
	text-align: center;

	.swiper-pagination-bullet {
		margin: 0 4px;
		border-radius: 100%;
		display: inline-block;
		padding: 0;
		border: 0;
	}
}

@media ( min-width: gb.$break-small ) {

	.wp-block-jetpack-slideshow {

		.wp-block-jetpack-slideshow_button-prev,
		.wp-block-jetpack-slideshow_button-next {
			display: block;
		}
	}
}

.is-email {

	.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_container {
		overflow: visible;
		opacity: 1;
		width: auto;
		height: auto;
	}

	.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_container ul.wp-block-jetpack-slideshow_swiper-wrapper,
	.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_slide figure {
		display: block;
		margin-bottom: 12px;
	}

	.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_container ul.wp-block-jetpack-slideshow_swiper-wrapper,
	.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_slide {
		list-style: none;
		margin-left: auto;
		margin-right: auto;
	}

	.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_slide {
		display: inline-block;
		width: 42%;
		margin-left: 2% !important;
		margin-right: 2% !important;
		height: auto;
		vertical-align: top;
	}

	.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_caption.gallery-caption {
		position: relative;
		inset-inline-end: auto;
		bottom: auto;
		background-color: transparent;
		color: inherit;
		padding-top: 0;
	}
}

.entry-content:has(.wp-block-group.is-vertical:not(.is-layout-constrained)) .wp-block-group.is-vertical:not(.is-layout-constrained),
#editor:has(.wp-block-group.is-vertical:not(.is-layout-constrained)) .wp-block-group.is-vertical:not(.is-layout-constrained) {

	.wp-block-jetpack-slideshow {
		max-width: inherit;
	}
}

div:not(.entry-content):not(.block-editor__container) > .wp-block-group.is-vertical:not(.is-layout-constrained) {

	.wp-block-jetpack-slideshow {
		max-width: 100vw;
	}
}
