@import '../../shared/styles/gutenberg-colors.scss';
@import '../../shared/styles/jetpack-variables.scss';

.wp-block-jetpack-slideshow {
	margin-bottom: $jetpack-block-margin-bottom;
	position: relative;

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

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

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

	.wp-block-jetpack-slideshow_slide {
		background: rgba( 0, 0, 0, 0.1 );
		display: flex;
		height: 100%;
		width: 100%;
		figure {
			align-items: center;
			display: flex;
			height: 100%;
			justify-content: center;
			margin: 0;
			position: relative;
			width: 100%;
		}
	}

	.swiper-container-fade .wp-block-jetpack-slideshow_slide {
		background: var( --color-neutral-0 );
	}

	.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 {
		background-color: rgba( 0, 0, 0, 0.5 );
		background-position: center;
		background-repeat: no-repeat;
		background-size: 24px;
		border: 0;
		border-radius: 4px;
		box-shadow: none;
		height: 48px;
		margin: -24px 0 0;
		padding: 0;
		transition: background-color 250ms;
		width: 48px;

		&:focus,
		&:hover {
			background-color: rgba( 0, 0, 0, 0.75 );
		}

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

	&.swiper-container-rtl .swiper-button-prev.swiper-button-white,
	&.swiper-container-rtl .wp-block-jetpack-slideshow_button-prev,
	.swiper-button-next.swiper-button-white,
	.wp-block-jetpack-slideshow_button-next {
		background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M5.88 4.12L13.76 12l-7.88 7.88L8 22l10-10L8 2z' fill='white'/%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3C/svg%3E" );
	}

	&.swiper-container-rtl .swiper-button-next.swiper-button-white,
	&.swiper-container-rtl .wp-block-jetpack-slideshow_button-next,
	.swiper-button-prev.swiper-button-white,
	.wp-block-jetpack-slideshow_button-prev {
		background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M18 4.12L10.12 12 18 19.88 15.88 22l-10-10 10-10z' fill='white'/%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3C/svg%3E" );
	}

	.wp-block-jetpack-slideshow_button-pause {
		background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M6 19h4V5H6v14zm8-14v14h4V5h-4z' fill='white'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E" );
		display: none;
		margin-top: 0;
		position: absolute;
		right: 10px;
		top: 10px;
		z-index: 1;
	}

	.wp-block-jetpack-slideshow_autoplay-paused .wp-block-jetpack-slideshow_button-pause {
		background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='white'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E" );
	}

	&[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: $white;
		cursor: text;
		left: 0;
		margin: 0 !important;
		padding: 0.75em;
		position: absolute;
		right: 0;
		text-align: initial;
		z-index: 1;
		a {
			color: inherit;
		}
	}

	.wp-block-jetpack-slideshow_pagination.swiper-pagination-bullets {
		bottom: 0;
		line-height: 24px;
		padding: 10px 0 2px;
		position: relative;

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

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

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

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