/* SLIDESHOW */

div.wp-block-on-blocks-slider {
	aspect-ratio: 16 / 9;
	display: block;
	margin: 0;
	position: relative;
	width: 100%;

	&:not(.wp-block)>div.slideshow-wrapper {
		height: 100%;
		left: 0;
		max-width: 100% !important;
		overflow: hidden;
		position: absolute;
		top: 0;
		width: 100%;

		&>* {
			height: 100%;
			left: 0;
			position: absolute;
			top: 0;
			width: 100%;

			&:not(:first-child) {
				display: none;
			}
		}
	}

	div.slideshow-navigation {
		display: block;
		height: 0;
		left: 0;
		max-width: 100% !important;
		position: absolute;
		top: 50%;
		width: 100%;
		z-index: 200;

		svg {
			align-items: center;
			background-color: rgba(255, 255, 255, 0.5);
			color: var(--color-p);
			cursor: pointer;
			display: flex;
			height: 60px;
			justify-content: center;
			padding: 12px;
			position: absolute;
			transform: translateY(-50%);
			width: 40px;

			* {
				cursor: pointer;
			}

			&:hover {
				background-color: white;
			}

			&.navigate-to-prev {
				left: 16px;
			}

			&.navigate-to-next {
				right: 16px;
			}
		}
	}

	div.slideshow-pagination {
		bottom: 32px;
		display: block;
		height: 0;
		left: 0;
		max-width: 100% !important;
		position: absolute;
		width: 100%;
		z-index: 200;

		ul.navigate-to-page {
			align-items: center;
			background-color: transparent;
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			gap: 8px;
			height: 12px;
			justify-content: center;
			position: absolute;
			transform: translateY(-50%);
			width: 100%;

			li {
				background-color: white;
				border: 2px solid var(--color-count);
				border-radius: 9999px;
				cursor: pointer;
				display: block;
				height: 12px;
				width: 12px;

				* {
					cursor: pointer;
				}

				&:hover {
					transform: scale(1.2);
				}

				&.active {
					background-color: var(--color-count);
					transform: scale(1.2);
				}
			}
		}
	}
}