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

// When slideshow block appears inside a layout grid block,
// make it behave like a grid block to prevent grid blowout.
// https://github.com/Automattic/wp-calypso/issues/39956
.wp-block-jetpack-layout-grid-column > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block {
	// First is WPCOM, second is self-hosted
	> .wp-block > .wp-block-jetpack-slideshow,
	> .wp-block-jetpack-slideshow {
		display: grid;

		> .wp-block-jetpack-slideshow_container {
			width: 100%;
		}
	}
}

.wp-block-jetpack-slideshow__add-item {
	margin-top: 4px;
	width: 100%;

	.components-form-file-upload,
	.components-button.wp-block-jetpack-slideshow__add-item-button {
		width: 100%;
	}

	.components-button.wp-block-jetpack-slideshow__add-item-button {
		display: flex;
		flex-direction: column;
		justify-content: center;
		box-shadow: none;
		border: none;
		border-radius: 0;
		min-height: 100px;

		.dashicon {
			margin-top: 10px;
		}

		&:hover,
		&:focus {
			border: 1px solid gb.$gray-600;
		}
	}
}

.wp-block[data-align="wide"] .wp-block-jetpack-slideshow_image,
.wp-block[data-align="full"] .wp-block-jetpack-slideshow_image {
	width: 100vw;
	max-width: unset;
	object-fit: cover;
}

.wp-block-jetpack-slideshow_slide {

	.components-spinner {
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -9px;
		margin-left: -9px;
	}

	&.is-transient img {
		opacity: 0.3;
	}
}

/**
 * SWIPER WORKAROUND - START
 *
 * swiper.css is loaded only once no matter how many times the `createSwiper`
 * JS function is called (this might be related to how webpack caches assets
 * dynamically imported). That becomes an issue in the context of the site
 * editor because when we leave a template page that contains a slideshow,
 * the swiper assets are unlinked from the site editor iframe but never added
 * back when revisiting the page (without a hard refresh).
 * See https://github.com/Automattic/vulcan/issues/615
 *
 * I haven't been able to come up with a proper fix to make sure the swiper
 * assets are loaded when needed. The next best solution is to include the
 * minimum set of rules to align the slideshow controls properly, which
 * has minimal impact on the user experience.
 */

.swiper-button-white {
	position: absolute;
}

.swiper-button-prev {
	left: 10px;
}

.swiper-button-next {
	right: 10px;
}

.swiper-notification {
	display: none;
}

.swiper-pagination-bullet {
	display: inline-block;

	width: 8px;
	height: 8px;
	margin: 0;
	padding: 0;

	background: currentColor;
	color: currentColor;
	border-radius: 50%;
	border: none;

	opacity: 0.5;
	transition: opacity 250ms, transform 250ms;
}

// SWIPER WORKAROUND - END
