@use '../../shared/sass/variables';
@use '../../shared/sass/mixins';
@use '../../shared/sass/colors';
@use '../../shared/sass/preview';

.wp-block-newspack-blocks-carousel {
	position: relative;
	margin-top: 0;

	article {
		max-width: 100%;
		padding: 0;
		position: relative;
		margin-bottom: 0;
		word-break: break-word;
		overflow-wrap: break-word;
		a {
			color: #fff;

			&:active,
			&:focus,
			&:hover {
				color: rgba( 255, 255, 255, 0.75 );
			}
		}
		.entry-title {
			font-size: 1.2em;

			a {
				/* autoprefixer: off */
				-webkit-box-orient: vertical;
				/* autoprefixer: on */
				display: -webkit-box;
				-webkit-line-clamp: 3;
				max-height: 3.5625em;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
		.avatar {
			height: 1.8em;
			width: 1.8em;
		}

		@include mixins.media( tablet ) {
			.entry-title {
				font-size: 1.6em;
			}
			.avatar {
				height: 40px;
				width: 40px;
			}
		}
		.entry-wrapper {
			bottom: 0;
			background-color: rgba( black, 0.5 );
			color: white;
			left: 0;
			padding: 1.5em;
			position: absolute;
			right: 0;
		}
		.entry-meta {
			color: #fff;
			margin-bottom: 0;
			font-size: 0.8em;

			a {
				color: #fff;
				font-weight: bold;
				text-decoration: none;

				&:active,
				&:focus,
				&:hover {
					color: rgba( 255, 255, 255, 0.75 );
				}
			}
		}
	}
	.post-thumbnail {
		margin: 0;
		height: 100%;
		width: 100%;
		padding: 0;
		position: relative;
		a,
		img {
			display: block;
			height: 100%;
			object-fit: cover;
			width: 100%;

			&.image-fit-contain {
				object-fit: contain;
			}
		}
	}
	&__placeholder {
		height: 420px;
		background: colors.$color__background-screen;
	}
	.swiper-initialized .wp-block-newspack-blocks-carousel__placeholder {
		height: 100%;
	}
	p {
		white-space: normal;
	}
	.swiper-pagination-bullets {
		align-items: flex-end;
		bottom: 0;
		display: flex;
		flex-wrap: wrap;
		height: calc( 1.5em + 12px );
		justify-content: center;
		padding: 0;
		position: relative;
	}
	.swiper-pagination-bullet {
		background: black;
		border-radius: 6px;
		display: inline-block;
		height: 12px;
		margin: 0 4px;
		opacity: 0.5;
		padding: 0;
		transition: box-shadow 250ms, opacity 250ms, width 250ms;
		width: 12px;
		&:focus {
			box-shadow: 0 0 0 2px white, 0 0 0 4px black;
			outline: 0;
		}
		&.swiper-pagination-bullet-active,
		&[selected] {
			opacity: 1;
			outline: 0;
			width: 24px;
		}

		span {
			@include mixins.visuallyHidden;
		}
	}
	.swiper-button {
		background-color: rgba( black, 0.5 );
		background-position: center;
		background-repeat: no-repeat;
		background-size: 24px;
		border: 0;
		border-radius: 4px;
		box-shadow: none;
		cursor: pointer;
		height: 48px;
		margin: 0;
		padding: 0;
		transition: background-color 250ms, box-shadow 250ms;
		width: 48px;
		&:focus,
		&:hover {
			background-color: rgba( black, 0.75 );
		}
		&:focus {
			box-shadow: inset 0 0 0 2px rgba( black, 0.75 ), inset 0 0 0 4px white;
			outline: 0;
		}
	}
	.swiper-button-next,
	.swiper-button-prev {
		left: 1.5em;
		display: none;
		right: auto;
		margin-top: -24px;

		@include mixins.media( mobile ) {
			display: block;
		}
	}
	.swiper-button-prev::after,
	.swiper-rtl .swiper-button-next::after {
		content: none;
	}
	.swiper-button-next::after,
	.swiper-rtl .swiper-button-prev::after {
		content: none;
	}
	.swiper-button-next {
		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='M5.88%204.12L13.76%2012l-7.88%207.88L8%2022l10-10L8%202z'%20fill='white'/%3E%3Cpath%20fill='none'%20d='M0 0h24v24H0z'/%3E%3C/svg%3E" );
		left: auto;
		right: 1.5em;
	}
	.swiper-button-prev {
		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='M18%204.12L10.12%2012%2018%2019.88%2015.88%2022l-10-10%2010-10z'%20fill='white'/%3E%3Cpath%20fill='none'%20d='M0 0h24v24H0z'/%3E%3C/svg%3E" );
	}
	.swiper-button-pause,
	.swiper-button-play {
		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='white'/%3E%3Cpath%20d='M0%200h24v24H0z'%20fill='none'/%3E%3C/svg%3E" );
		display: none;
		margin-top: 0;
		position: absolute;
		right: 1.5em;
		top: 1.5em;
		transform: none;
		z-index: 9;
	}
	.swiper-button-play {
		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='white'/%3E%3Cpath%20d='M0 0h24v24H0z'%20fill='none'/%3E%3C/svg%3E" );
	}

	/* Swiper Slide */
	.swiper-slide {
		height: auto;
		max-height: 75vh;
	}

	/* Image styles */
	figcaption {
		font-size: variables.$font__size-xxs;
	}

	/* Headings */
	.entry-title {
		margin: 0 0 0.25em;
		a {
			color: #fff;
			text-decoration: none;
		}
	}

	/* Article meta */
	.entry-meta {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		margin-top: 0.5em;
		.byline:not( :last-child ) {
			margin-right: 1.5em;
		}
	}
	.cat-links {
		color: #fff;
		font-size: 0.6em;
		font-weight: bold;
		margin: 0 0 0.5em;

		&.sponsor-label {
			align-items: center;

			.flag + a {
				margin-left: 0.5em;
			}
		}

		a {
			text-decoration: none;
		}
	}
	.avatar {
		border-radius: 100%;
		display: block;
		margin-right: 0.5em;
	}

	&.wp-block-newspack-blocks-carousel__autoplay-playing .swiper-button-pause,
	.swiper-button-play {
		display: block;
	}
	&.wp-block-newspack-blocks-carousel__autoplay-playing .swiper-button-play,
	.swiper-button-pause {
		display: none;
	}

	// Make sure Jetpack Content Options don't affect the block.
	.posted-on,
	.cat-links,
	.tags-links,
	.byline,
	.author-avatar {
		clip: auto;
		height: auto;
		position: relative;
		width: auto;
	}

	// If hideControls is enabled, visually hide the UI elements.
	&.hide-controls {
		button {
			display: none;
			visibility: hidden;
		}
	}

	&.slides-per-view-2 article {
		.entry-title {
			@include mixins.media( tablet ) {
				font-size: 1.4em;
			}
		}
	}

	&.slides-per-view-3 article,
	&.slides-per-view-4 article {
		.entry-title {
			@include mixins.media( tablet ) {
				font-size: 1.2em;
			}
			@include mixins.media( desktop ) {
				font-size: 1em;
			}
		}
		.entry-meta {
			@include mixins.media( tablet ) {
				font-size: 0.7em;
			}
		}
	}

	&.slides-per-view-5 article,
	&.slides-per-view-6 article {
		.entry-wrapper {
			@include mixins.media( desktop ) {
				padding: 1em;
			}
		}
		.entry-title {
			@include mixins.media( tablet ) {
				font-size: 1.2em;
			}
			@include mixins.media( desktop ) {
				font-size: 0.9em;

				a {
					-webkit-line-clamp: 2;
				}
			}
		}
		.entry-meta {
			@include mixins.media( tablet ) {
				font-size: 0.7em;
			}
		}
	}
}

/* stylelint-disable selector-type-no-unknown  */
.wpnbpc {
	.entry-sponsors {
		align-items: center;
		display: inline-flex;
		flex-wrap: wrap;
		gap: 0.5em;
		width: 100%;

		&.plus-author {
			font-size: 0.9em;

			&:not( :last-child ) {
				margin-bottom: 0.5rem;
			}
		}
	}

	.sponsor-logos {
		align-items: center;
		display: inline-flex;
		flex-wrap: wrap;
		gap: 0.5em;
		line-height: 1;
	}
}
/* stylelint-enable */