*,
*::before,
::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
@font-face {
	font-family: "Dinish";
	src: url("../assets/fonts/DINishPreviewCondensed-Heavy.ttf")
		format("truetype");
}
:root {
	--gray_66: hsl(0 0% 66%);
	--teal: hsl(180 66% 50%);
	scrollbar-color: var(--teal) var(--gray_66);
}
img,
svg {
	display: block;
}
svg {
	/* stroke: black; */
}
[popover] {
	width: 80%;
	margin: auto;
	padding: 1rem;
}
::backdrop {
	backdrop-filter: blur(3px);
}
body {
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
	background-color: hsl(300deg 50% 5%);
}
h2 {
	font-weight: 400;
	position: relative;
	button {
		position: absolute;
		cursor: pointer;
		border: none;
		background: transparent;
	}
}
.main {
	max-width: min(92%, 1400px);
	margin: auto;
	background-color: white;
	text-align: center;
	display: grid;
	gap: 1vw;
	padding: 1vw;
	grid-template-areas:
		"header header header"
		"form view view";
	/* grid-template-columns: 1fr 2fr 2fr; */
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: max-content auto;
	> * {
		background-color: var(--gray_66);
	}
	.header {
		grid-area: header;
		padding-block: 0.5rem;
		h1 {
			font-family: "Dinish", sans-serif;
		}
	}
	.form {
		grid-area: form;
		display: grid;
		gap: 1vw;
		padding: 1vw;
		grid-template-areas:
			"header"
			"controls"
			"reference";
		grid-template-columns: 1fr;
		grid-template-rows: max-content auto auto;
		h2 {
			button {
				display: none;
			}
		}
		.controls {
			display: grid;
			gap: 1vw;
			.controls_input {
				/* display: flex; */
				/* ******************************************** */
				display: none;
				/* ******************************************** */
				label,
				input {
					width: 50%;
				}
			}
			.dimensions_presets_group {
				display: block;
				/* ****************************************************** */
				display: flex;
				justify-content: space-evenly;
				column-gap: 1vw;
				> div {
					width: 50%;
					display: grid;
					grid-template-columns: auto auto;
					column-gap: 1vw;
					row-gap: 2vw;
					span {
						grid-row: 1/4;
					}
					label {
						padding: 1vw;
					}
				}
				/* ****************************************************** */
			}
			.checkbox_group {
				display: grid;
				gap: 1vw;
				grid-template-areas:
					"regular festive"
					"light dark";
				grid-template-columns: 1fr 1fr;
				grid-template-rows: auto auto;
				label {
					cursor: pointer;
					text-align: initial;
					display: grid;
					gap: 1vw;
					grid-template-columns: min-content auto;
					border: 5px solid hsl(0 50% 0% / 0.3);
					padding: 1vw;
					input {
						cursor: pointer;
						width: 1.5rem;
						height: 1.5rem;
					}
					.checkbox_group_palette {
						grid-column: 1/3;
						display: grid;
						grid-template-columns: repeat(5, 1fr);
						grid-template-columns: repeat(5, auto);
						span {
							height: 1rem;
						}
					}
				}
			}
		}
		.reference {
			display: block;
			margin: auto;
		}
		> * {
			/* border: 5px dashed hsl(35 50% 50% / 0.5); */
		}
	}
	.view {
		grid-area: view;
		display: grid;
		row-gap: 5vw;
		padding: 2vw;
		padding-block-end: 1vw;
		grid-template-areas:
			"test test"
			"regular festive"
			"light dark";
		grid-template-columns: 1fr 1fr;
		/* grid-template-rows: auto 230px 230px; */
		grid-template-rows: max-content 230px auto;
		align-items: end;
		.test {
			grid-area: test;
			svg {
				/* cursor: pointer; */
				stroke: hsl(0 50% 0% / 0.8);
				stroke-width: 0.5;
				transition: all 0.1s;
			}
			svg:hover {
				border-bottom: 3px solid #2bd4d4;
			}
			button {
				width: 100%;
				height: 100%;
				cursor: pointer;
				/* padding: 0.3rem; */
				outline: none;
				border: none;
				appearance: none;
				background: transparent;
			}
			button:hover {
				/* In Mozilla bug: border-bottom beside the svg
				and there is need to adjust position of button to top.
				I want to implement a hover effect on the SVG */
				/* border-bottom: 3px solid yellow; */
			}
		}
		> * {
			/* border: 5px dashed hsl(35 50% 50% / 0.5); */
			display: grid;
			place-content: center;
		}
		.regular {
			position: relative;
		}
		.regular::before {
			content: "";
			position: absolute;
			top: -2%;
			left: -2%;
			width: 104%;
			height: 104%;
			backdrop-filter: none;
			transition: backdrop-filter 0.3s ease;
		}
		.applied::before {
			backdrop-filter: blur(3px) grayscale(100%);
		}

		.festive {
			position: relative;
		}
		.festive::before {
			content: "";
			position: absolute;
			top: -2%;
			left: -2%;
			width: 104%;
			height: 104%;
			backdrop-filter: none;
			transition: backdrop-filter 0.3s ease;
		}
		.applied::before {
			backdrop-filter: blur(2px) grayscale(100%);
		}
		.light {
			position: relative;
		}
		.light::before {
			content: "";
			position: absolute;
			top: -2%;
			left: -2%;
			width: 104%;
			height: 104%;
			backdrop-filter: none;
			transition: backdrop-filter 0.3s ease;
		}
		.applied::before {
			backdrop-filter: blur(2px) grayscale(100%);
		}
		.dark {
			position: relative;
		}
		.dark::before {
			content: "";
			position: absolute;
			top: -2%;
			left: -2%;
			width: 104%;
			height: 104%;
			backdrop-filter: none;
			transition: backdrop-filter 0.3s ease;
		}
		.applied::before {
			backdrop-filter: blur(3px) grayscale(100%);
		}
	}
}