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

.brewRenderer {
	height        : 100vh;
	padding-top   : 60px;
	overflow-y    : scroll;
	will-change   : transform;
	&:has(.facing, .flow) { padding : 60px 30px; }
	:where(.pages) {
		&.facing {
			display               : grid; 
			grid-template-rows    : repeat(3, auto); 
			grid-template-columns : repeat(2, 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-right : unset !important;
				margin-left  : unset !important;
			}
		}

		&.flow {
			display         : flex;
			flex-wrap       : wrap;
			gap             : 10px;
			justify-content : safe center;
			& :where(.page) {
				flex         : 0 0 auto;
				margin-right : unset !important;
				margin-left  : 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    : unset;
		overflow-y : unset;
		&:has(.facing, .flow) {
			padding : unset;
		}
		.pages {
			margin  : 0px;
			zoom    : 100% !important;
			display : block;
			& > .page { box-shadow : unset; }
		}
	}
	.headerNav { visibility : hidden; }
}