/* GWS Lightbox */
body:has(#gws-lightbox.open) {
	overflow: hidden;
}


[gws-lightbox] img:not([gws-lightbox-hide]) {
	cursor:pointer;
}

#gws-lightbox{
	display:block;
	z-index: 2000;
	position: fixed;
	inset: var(--wp-admin--admin-bar--height,0) 0 0 0;
	background: rgb(0 0 0 / .8);
	opacity: 0;
	transition: opacity .3s ease-in-out;
	pointer-events: none;

	&.open{
		opacity: 1;
		pointer-events: auto;
	}

	&:before{
		content: '×';
		right: 0;
		top: 0;
		position: absolute;
		background: var(--wp--preset--color--light);
		color: var(--wp--preset--color--dark);
		font-size: 2em;
		line-height: 1em;
		aspect-ratio: 1 / 1;
		display: block;
		cursor: pointer;
		text-align: center;
		height: 1lh;
	}

	&>.lightbox-content{
		position: absolute;
		inset: 100px 0;
		overflow: auto;
		display: flex;

		filter: blur(0px);
		background-color: transparent;
		transition: backdrop-filter .3s ease-in-out, background-color .3s ease-in-out, inset .3s ease-in-out;
		z-index: 10;

		flex-wrap: nowrap;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		scrollbar-width: none;
		&::-webkit-scrollbar {
			display: none;
		}

		figure{
			height: 100%;
			width: 100%;
			flex: 0 0 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			scroll-snap-align: center;
			margin:0;
		}
		img,video{
			max-width: 100%;
			max-height: 100%;
			height: auto;
			width: auto;
			display: block;
		}
		img{
			cursor: zoom-in;
		}
	}

	&:has(.lightbox-pagination)>.lightbox-content{
		top: 50px;
		bottom: 150px;
	}

	.lightbox-pagination{
		position: absolute;
		inset: auto 0 0 0;
		height: 100px;
		overflow: auto;
		display: flex;
		gap: 5px;
		scroll-behavior: smooth;
		scrollbar-width: none;
		&::-webkit-scrollbar {
			display: none;
		}

		img{
			opacity: .6;
		}
		img:hover{
			opacity: .8;
		}
		img.gws-active{
			opacity: 1;
		}
	}

	&:has(.lightbox-arrow)>.lightbox-content{
		left: 80px;
		right: 80px;
	}

	.lightbox-arrow{
		position: absolute;
		top: calc(50% - 20px);
		left: 20px;
		width: 40px;
		height: 40px;
		background: var(--wp--preset--color--light);
		color: var(--wp--preset--color--dark);
		text-align: center;
		line-height: 40px;
		font-size: 20px;

		&:before{
			content: '<';
		}
		&.next{
			left: auto;
			right: 20px;
		}
		&.next:before{
			content: '>';
		}
	}
	&:has(.lightbox-pagination)>.lightbox-arrow{
		top: calc((100% - 100px) / 2 - 20px);
	}




	&.zoom>.lightbox-content{
		/* overflow: hidden; */
		inset: 0;
		backdrop-filter: blur(10px);
		background-color: rgb(0 0 0 / .4);

		*{
			cursor: zoom-out;
		}
	}

}