/********************************************************/
/*
/*      Scrollsnap Container CSS
/*
/********************************************************/
.wp-block-cke-scrollsnap-container,
:is(.edit-post-visual-editor, .editor-styles-wrapper) .is-root-container > .wp-block-cke-scrollsnap-container {
	position: relative;
	width: var(--wp--custom--viewport-width) !important;
	max-width: unset !important;
}

.wp-block-cke-scrollsnap-container,
.wp-block-cke-scrollsnap-container + .height-compensator {
	--scrollsnap-container-height: calc(100svh - var(--wp--custom--header-small-height));
}

.wp-block-cke-scrollsnap-container {
	left: calc((var(--wp--custom--viewport-width) - 100%) / 2 * -1);
	max-height: var(--scrollsnap-container-height);
	background-color: var(--wp--custom--color--default--bg);
	overflow-y: visible;
	z-index: 2;

	scrollbar-width: none;/* Firefox */
	-ms-overflow-style: none; /* IE and Edge */
}

.wp-block-cke-scrollsnap-container[data-nav-buttons="true"] {
	pointer-events: none;
}

.wp-block-cke-scrollsnap-container::-webkit-scrollbar,
.wp-block-cke-scrollsnap-container::-webkit-scrollbar-button {
	display: none; /* Chrome */
}

.wp-block-cke-scrollsnap-container::before,
.wp-block-cke-scrollsnap-container::after {
	content: '';
	display: block;
	position: relative;
	width: 100%;
}

.wp-block-cke-scrollsnap-container::before {
	height: var(--scroll-intersect-offset-top);
	/* margin-block-end: calc(var(--scroll-intersect-offset-top) * -1) !important; */
}

.wp-block-cke-scrollsnap-container::after {
	height: var(--scroll-intersect-offset-bottom);
	/* margin-block-start: calc(var(--scroll-intersect-offset-bottom) * -1) !important; */
}

.wp-block-cke-scrollsnap-container + .height-compensator {
	height: 0;
	margin-block: unset;
}

/* Items */
.wp-block-cke-scrollsnap-container::before,
.wp-block-cke-scrollsnap-container::after,
.wp-block-cke-scrollsnap-container > *,
.wp-block-cke-scrollsnap-container > * > .scrollsnap-intersect-detector + * {
	margin-block: unset;
}

.wp-block-cke-scrollsnap-container > * {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	height: var(--scrollsnap-container-height);
	margin-inline: auto;
	margin-block-start: var(--scroll-intersect-offset-top) !important;
	/* scroll-snap-align: initial;
	scroll-snap-stop: initial; */
}

.wp-block-cke-scrollsnap-container > :not(.alignwide, .alignfull) {
	max-width: var(--wp--style--global--content-size);
}

.wp-block-cke-scrollsnap-container > .alignwide {
	max-width: var(--wp--style--global--wide-size);
}

/* Nav buttons */
.wp-block-cke-scrollsnap-container > * > .nav-btn {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 50%;
	right: calc(var(--wp--custom--outer-pad) * -1);
	width: 40px;
	height: 40px;
	background-color: var(--wp--custom--color--default--text);
	cursor: pointer;
	pointer-events: all;
	transition: background-color .3s;
}

.wp-block-cke-scrollsnap-container > * > .nav-btn:is(:hover, :focus) {
	background-color: var(--wp--custom--color--default--focus);
}

.wp-block-cke-scrollsnap-container > * > .nav-btn::before {
	content: '';
	width: 20px;
	height: 20px;
	aspect-ratio: 1;
	background: url(../../assets/images/chevron-up.svg);
	filter: var(--wp--custom--color--filter--pampas-white);
}

.wp-block-cke-scrollsnap-container > * > .nav-btn[rel="prev"] {
	translate: 0 -100%;
}

.wp-block-cke-scrollsnap-container > * > .nav-btn[rel="next"] {
	rotate: 180deg;
	translate: 0 100%;
}

.wp-block-cke-scrollsnap-container[data-nav-buttons="false"] > * > .nav-btn,
.wp-block-cke-scrollsnap-container > :first-child > .nav-btn[rel="prev"],
.wp-block-cke-scrollsnap-container > :last-child > .nav-btn[rel="next"] {
	display: none;
}

@media (width <= 1000px) {
	.wp-block-cke-scrollsnap-container[data-nav-buttons="false"] {
		pointer-events: none;
	}
	
	.wp-block-cke-scrollsnap-container[data-nav-buttons="false"] > * > .nav-btn {
		display: flex;
	}
}

/******************************/
/* Scrollable state
/******************************/
html.autoscroll .wp-block-cke-scrollsnap-container,
.wp-block-cke-scrollsnap-container.scrollable {
	position: fixed;
	top: var(--root-intersect-offset-top);
	width: calc(100vw - var(--wp--custom--scrollbar-width));
	overflow-y: scroll;
}

html.autoscroll .wp-block-cke-scrollsnap-container + .height-compensator,
.wp-block-cke-scrollsnap-container.scrollable + .height-compensator {
	height: var(--scrollsnap-container-height);
}

.wp-block-cke-scrollsnap-container.scrollable ~ * {
	z-index: -1 !important;
}

/* .wp-block-cke-scrollsnap-container.scrollable > * {
	scroll-snap-align: start;
	scroll-snap-stop: always;
} */

/******************************/
/* Other states
/******************************/
.wp-block-cke-scrollsnap-container.transitioning,
.wp-block-cke-scrollsnap-container.transitioning * {
	pointer-events: none !important;
}

.wp-block-cke-scrollsnap-container:not(.scrollable) > * {
	opacity: 0;
	pointer-events: none;
}

.wp-block-cke-scrollsnap-container:not(.scrollable).at-start > :first-child,
.wp-block-cke-scrollsnap-container:not(.scrollable).at-end > :last-child {
	opacity: 1;
	pointer-events: all;
}

.wp-block-cke-scrollsnap-container:not(.scrollable).at-end > * {
	translate: 0 calc(((var(--scrollsnap-container-height) + var(--scroll-intersect-offset-top)) * (var(--item-count) - 1) + (var(--scroll-intersect-offset-bottom) * 2)) * -1);
}

/******************************/
/* Intersect detectors
/* & Debugging
/******************************/
.wp-block-cke-scrollsnap-container > * > .scrollsnap-intersect-detector,
body:has(.wp-block-cke-scrollsnap-container.debug) > .scrollsnap-debug-line {
	left: 0;
	width: var(--wp--custom--viewport-width);
	height: 3px;
	z-index: 999;
	padding-block: var(--intersect-padding);
}

.wp-block-cke-scrollsnap-container > * > .scrollsnap-intersect-detector {
	position: absolute;
	opacity: 0;
}

.wp-block-cke-scrollsnap-container > * > .scrollsnap-intersect-detector[data-edge="top"] {
	top: var(--scroll-intersect-offset-top);
}

.wp-block-cke-scrollsnap-container > * > .scrollsnap-intersect-detector[data-edge="bottom"] {
	bottom: var(--scroll-intersect-offset-bottom);
}

.wp-block-cke-scrollsnap-container > :first-child > .scrollsnap-intersect-detector[data-edge="top"] {
	top: calc(var(--scroll-intersect-offset-top) * -1);
}

.wp-block-cke-scrollsnap-container > :last-child > .scrollsnap-intersect-detector[data-edge="bottom"] {
	bottom: calc(var(--scroll-intersect-offset-bottom) * -1);
}

/* Debugging */
body:has(.wp-block-cke-scrollsnap-container.debug) > .scrollsnap-debug-line,
.wp-block-cke-scrollsnap-container.debug > * > .scrollsnap-intersect-detector {
	opacity: .5;
}

body:has(.wp-block-cke-scrollsnap-container.debug) > .scrollsnap-debug-line {
	position: fixed;
	top: calc(var(--root-intersect-offset-top) - var(--intersect-padding));
	background-color: red;
}

body:has(.wp-block-cke-scrollsnap-container.debug) > .scrollsnap-debug-line + .scrollsnap-debug-line {
	top: unset;
	bottom: calc(var(--root-intersect-offset-bottom) + var(--intersect-padding));
}

.wp-block-cke-scrollsnap-container.debug > * > .scrollsnap-intersect-detector[data-edge="top"] {
	background-color: blue;
}

.wp-block-cke-scrollsnap-container.debug > * > .scrollsnap-intersect-detector[data-edge="bottom"] {
	background-color: purple;
}