@import (multiple, less) 'shared/naturalcrit/styles/reset.less';

.brewRenderer {
	overflow-y    : scroll;
	will-change   : transform;
	padding-top   : 60px;
	height        : 100vh;
	&:has(.facing, .flow) {
		padding : 60px 30px;
	}
	&.deployment {
		background-color: darkred;
	}
	:where(.pages) {
		&.facing {
			display: grid; 
			grid-template-columns: repeat(2, auto); 
			grid-template-rows: repeat(3, auto); 
			gap: 10px 10px; 
			justify-content: safe center;
			&.recto .page:first-child {
				// sets first page on 'right' ('recto') of the preview, as if for a Cover page.  
				// todo: add a checkbox to toggle this setting
				grid-column-start: 2; 
			}
			& :where(.page) {
				margin-left: unset !important;
				margin-right: unset !important;
			}
		}

		&.flow {
			display: flex;
			flex-wrap: wrap;
			gap: 10px;
			justify-content: safe center;
			& :where(.page) {
				flex: 0 0 auto;
				margin-left: unset !important;
				margin-right: unset !important;
			}

		}

		& > :where(.page) {
			width         : 215.9mm;
			height        : 279.4mm;
			margin-right  : auto;
			margin-bottom : 30px;
			margin-left   : auto;
			box-shadow    : 1px 4px 14px #000000;
		}
		*[id] {
			scroll-margin-top:100px;
		}
	}
	&::-webkit-scrollbar {
		width : 20px;
		&:horizontal {
			width  : auto;
			height : 20px;
		}
		&-thumb {
			background : linear-gradient(90deg, #D3C1AF 15px, #00000000 15px);
			&:horizontal { background : linear-gradient(0deg, #D3C1AF 15px, #00000000 15px); }
		}
		&-corner { visibility : hidden; }
	}
}

.pane { position : relative; }


@media print {
	.toolBar { display : none; }
	.brewRenderer {
		height      : 100%;
		padding-top : unset;
		overflow-y  : unset;
		.pages {
			margin : 0px;
			zoom: 100% !important;
			& > .page { box-shadow : unset; }
		}
	}
	.headerNav {
		visibility: hidden;
	}
}