/********************************************************/
/*
/*      History CSS
/*
/********************************************************/
.wp-block-cke-history,
:is(.edit-post-visual-editor, .editor-styles-wrapper) .is-root-container > .wp-block-cke-history {
	--block-pad: var(--wp--preset--spacing--13);
	--active-year-height: 160px;
	
	display: grid;
	grid-template-columns: 40.5% max-content 1fr;
	grid-template-rows: max-content var(--active-year-height) max-content;
	column-gap: 6.25%;
	row-gap: var(--wp--preset--spacing--2-5);
	position: relative;
	background-color: var(--wp--custom--color--default--text);
	padding-block: var(--block-pad);
	overflow-y: clip;
	
	/* Overwrite editor style */
	&:not(.alignfull, .alignwide, .wp-block-spacer) {
		width: 100% !important;
		max-width: var(--wp--style--global--wide-size) !important;	
	}
	
	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: calc((var(--wp--custom--viewport-width) - 100%) / 2 * -1);
		width: var(--wp--custom--viewport-width);
		height: 100%;
		background-color: inherit;
		z-index: -1;
	}
	
	/* Color */
	* {
		color: var(--wp--custom--color--default--bg);
	}
	
	/* Margins */
	:is(.acf-innerblocks-container, .entry-content, .indicator-years, .active-year) > * {
		margin-block: unset;
		
		:is(.acf-innerblocks-container, .entry-content) > & + * {
			margin-block-start: 1em;
		}
	}
	
	/* Layout */
	& > :is(.entries-images, .indicator-years) {
		grid-row: 1 / span 3;
		
		&.entries-images {
			grid-column: 1;
		}
		
		&.indicator-years {
			grid-column: 2;
		}
	}
	
	& > :is(.acf-innerblocks-container, .active-year, .entries-content) {
		grid-column: 3;
		
		&.acf-innerblocks-container {
			grid-row: 1;
		}
		
		&.active-year {
			grid-row: 2;
		}
		
		&.entries-content {
			grid-row: 3;
		}
	}
	
	/* Innerblocks */
	& > .acf-innerblocks-container {
		max-width: 75%;
		margin-block-end: var(--wp--preset--spacing--4);
	}
	
	/* Entries images */
	& > .entries-images {
		display: flex;
		flex-direction: column;
		gap: var(--wp--preset--spacing--2);
		position: absolute;
		top: calc(var(--block-pad) * -1);
		left: 0;
		width: 40.5%;
		max-height: calc(100% + (var(--block-pad) * 2));
		overflow-x: visible;
		overflow-y: scroll;
		pointer-events: none;
		
		/* Hide scrollbar */
		scrollbar-width: none; /* Firefox */
		scrollbar-color: transparent transparent;
		-ms-overflow-style: none;  /* Internet Explorer 10+ */
		&::-webkit-scrollbar { /* WebKit */
			width: 0;
			height: 0;
		}
		
		& > figure {
			width: 57.5%;
			/* max-width: 100%; */
			height: auto;
			aspect-ratio: 363/223;
			margin-block: unset;
			pointer-events: none;
			user-select: none;
			transition: width var(--wp--custom--speed--slow);
			
			&:first-child {
				margin-block-start: var(--block-pad);
			}
			
			&:last-child {
				margin-block-end: calc(var(--block-pad) * 3);
			}
			
			/* :not(.scrolling) > &.active { */
			&.active {
				width: 100%;
			}
			
			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
	}
	
	/* Entries content */
	& > .entries-content {
		display: grid;
		grid-template-columns: 100%;
		grid-template-rows: max-content;
		
		& > .entry-content {
			grid-column: 1;
			grid-row: 1;
			display: flex;
			flex-direction: column;
			width: 100%;
			height: 100%;
			opacity: 0;
			pointer-events: none;
			user-select: none;
			transition: opacity var(--wp--custom--speed--slow);
			
			&.active {
				opacity: 1;
				pointer-events: all;
				transition: opacity var(--wp--custom--speed--slow) .45s;
			}
			
			& > * {
				max-width: 75%;
			}
		}
	}
	
	/* Active year */
	& > .active-year {
		--height: var(--active-year-height);
		
		width: max-content;
		height: var(--height);
		max-height: 80svh;
		display: flex;
		overflow: hidden;
		pointer-events: none;
		user-select: none;
		
		& > h2 {
			--digit: 0;
			--max-width: 100%;
			--gap: var(--wp--preset--spacing--1);
			
			display: flex;
			flex-direction: column;
			gap: var(--gap);
			max-width: var(--max-width);
			height: 100%;
			margin-block: unset;
			translate: 0 calc((var(--height) * (var(--digit) * -1)) - (var(--gap) * var(--digit)));
			transition: translate var(--wp--custom--speed--slow) cubic-bezier(0.770, 0.000, 0.175, 1.000), max-width var(--wp--custom--speed--medium) var(--wp--custom--speed--medium);
			
			.resizing > & {
				transition: unset !important;
			}
			
			& > span {
				position: relative;
				width: max-content;
				height: var(--height);
				font-family: var(--wp--preset--font-family--ringside-narrow);
				font-size: var(--wp--preset--font-size--omega, 15rem);
				line-height: var(--height);
				font-weight: 900;
				color: var(--wp--custom--color--default--accent--2);
				text-align: center;
				user-select: none;
			}
		}
	}
	
	/* Indicator years */
	& > .indicator-years {
		display: flex;
		flex-direction: column;
		row-gap: var(--wp--preset--spacing--0-75);
		
		& > span {
			position: relative;
			width: max-content;
			max-width: 100%;
			font-family: var(--wp--preset--font-family--ringside-narrow);
			font-size: calc(var(--wp--preset--font-size--x-large) * 1.4);
			font-weight: 700;
			line-height: 1;
			cursor: pointer;
			transition: color var(--wp--custom--speed--medium);
			user-select: none;
			
			&:is(:hover, :focus, :active) {
				color: var(--wp--custom--color--default--accent--2);
			}
			
			&.active {
				color: var(--wp--custom--color--default--accent--1);
			}
			
			&::before {
				content: '';
				display: block;
				position: absolute;
				bottom: .175em;
				right: calc(100% + (var(--wp--preset--spacing--2) / 2));
				width: calc((var(--wp--style--global--wide-size) * .0625) - var(--wp--preset--spacing--2));
				height: 3px;
				background-color: var(--wp--custom--color--default--accent--1);
				opacity: 0;
				transition: opacity var(--wp--custom--speed--medium);
			}
			
			&.active::before {
				opacity: 1;
			}
		}
	}
	
	/******************************/
	/* Backend style
	/******************************/
	:is(.edit-post-visual-editor, .editor-styles-wrapper) & {
		opacity: 1;
		
		& > .indicator-years > span {
			pointer-events: none;
		}
	}
	
	/******************************/
	/* Responsive
	/******************************/
	@media (width <= 1600px) {
		--block-pad: var(--wp--preset--spacing--11);
		--active-year-height: 140px;
	}
	
	@media (width <= 1400px) {
		--block-pad: var(--wp--preset--spacing--10);
		--active-year-height: 130px;
		
		/* Innerblocks */
		& > .acf-innerblocks-container {
			max-width: 85%;
			margin-block-end: var(--wp--preset--spacing--3);
		}
		
		/* Indicator years */
		& > .indicator-years {
			& > span {
				font-size: var(--wp--preset--font-size--x-large);
			}
		}
	}
	
	@media (width <= 1240px) {
		--block-pad: var(--wp--preset--spacing--9);
		--active-year-height: 120px;
		
		column-gap: 5%;
		
		/* Indicator years */
		& > .indicator-years {
			& > span {
				&::before {
					width: calc((var(--wp--style--global--wide-size) * .05) - var(--wp--preset--spacing--1));
					right: calc(100% + (var(--wp--preset--spacing--1) / 2));
				}
			}
		}
	}
	
	@media (width <= 1100px) {
		--active-year-height: 110px;
	}
	
	@media (width <= 1000px) {
		--block-pad: var(--wp--preset--spacing--9);
		--active-year-height: 90px;
		
		column-gap: 2.5%;
		
		/* Innerblocks */
		& > .acf-innerblocks-container {
			max-width: 100%;
			margin-block-end: unset;
		}
		
		/* Indicator years */
		& > .indicator-years {
			& > span {
				&::before {
					width: calc((var(--wp--style--global--wide-size) * .025) - var(--wp--preset--spacing--1));
					right: calc(100% + (var(--wp--preset--spacing--1) / 2));
				}
			}
		}
	}
	
	@media (width <= 800px) {
		--block-pad: var(--wp--preset--spacing--7-5);
		--active-year-height: 75px;
		
		grid-template-columns: 40.5% 1fr;
		grid-template-rows: repeat(2, max-content) var(--active-year-height) max-content;
		row-gap: var(--wp--preset--spacing--1);
		
		/* Layout */
		& > :is(.entries-images, .indicator-years) {
			&.entries-images {
				grid-row: 1 / span 4;
				grid-column: 1;
			}
			
			&.indicator-years {
				grid-row: 2;
				grid-column: 2;
			}
		}
		
		& > :is(.acf-innerblocks-container, .active-year, .entries-content) {
			grid-column: 2;
			
			&.acf-innerblocks-container {
				grid-row: 1;
			}
			
			&.active-year {
				grid-row: 3;
			}
			
			&.entries-content {
				grid-row: 4;
			}
		}
		
		/* Indicator years */
		& > .indicator-years {
			flex-direction: row;
			flex-wrap: wrap;
			column-gap: var(--wp--preset--spacing--0-75);
			row-gap: var(--wp--preset--spacing--0-25);
			justify-content: center;
			
			& > span {
				font-size: var(--wp--preset--font-size--large);
				letter-spacing: -1px;
				
				&::before {
					display: none;
				}
			}
		}
		
		/* Entries content */
		& > .entries-content {
			& > .entry-content {
				& > * {
					max-width: 100%;
				}
			}
		}
	}
	
	@media (width <= 600px) {
		--block-pad: var(--wp--preset--spacing--5);
		--active-year-height: 65px;
		
		grid-template-columns: 100%;
		grid-template-rows: repeat(3, max-content) var(--active-year-height) max-content;
		
		/* Layout */
		& > :is(.entries-images, .indicator-years) {
			grid-column: 1 !important;
			
			&.entries-images {
				grid-row: 1;
			}
			
			&.indicator-years {
				grid-row: 3;
			}
		}
		
		& > :is(.acf-innerblocks-container, .active-year, .entries-content) {
			grid-column: 1;
			
			&.acf-innerblocks-container {
				grid-row: 2;
			}
			
			&.active-year {
				grid-row: 4;
			}
			
			&.entries-content {
				grid-row: 5;
			}
		}
		
		/* Entries images */
		& > .entries-images {
			display: grid;
			grid-template-columns: 100%;
			grid-template-rows: 100%;
			position: relative;
			top: unset;
			left: unset;
			width: 100%;
			max-height: 100%;
			overflow-x: clip;
			overflow-y: clip;
			
			& > figure {
				grid-column: 1;
				grid-row: 1;
				width: 100%;
				height: auto;
				aspect-ratio: 363/223;
				opacity: 0;
				transition: opacity var(--wp--custom--speed--medium);
				margin-block: unset !important;
				
				&.active {
					opacity: 1;
					transition: opacity var(--wp--custom--speed--medium) var(--wp--custom--speed--medium);
				}
			}
		}
		
		/* Indicator years */
		& > .indicator-years {
			justify-content: start;
		}
	}
}