@import '@themes/assets/assets.less';
@import '@sharedStyles/core.less';

.vaultPage {
	height           : 100%;
	overflow-y       : hidden;

	--bg-clr                : white;
	--bg-image              : @backgroundImageAlt;
	--h1-clr                : black;
	--h2-clr                : #000077;
	--label-clr             : black;
	--input-bg              : white;
	--input-bg-hover        : #DDDDDD;
	--input-text-clr        : black;
	--input-placeholder-clr : grey;

	*:not(input) { user-select : none; }

	.form { background : white; }

	:where(.content .dataGroup) {
		width      : 100%;
		height     : 100%;

		&.form .brewLookup {
			color                   : var(--label-clr);
			background-color        : var(--bg-clr);
			background-image        : var(--bg-image);
			background-size         : cover;
			height:100%;

			position : relative;
			padding  : 50px clamp(20px, 4vw, 50px);
			

			small {
				font-size : 10pt;
				color     : #555555;
			
				a { color : #333333; }
			}

			code {
				padding-inline : 5px;
				font-family    : monospace;
				background     : lightgrey;
				border-radius  : 5px;
			}

			h1, h2, h3, h4 {
				font-family    : 'CodeBold';
				letter-spacing : 2px;
				color          : var(--h1-clr);
			}
				
			legend {
				h3 {
					margin-block  : 30px 20px;
					font-size     : 20px;
					text-align    : center;
					border-bottom : 2px solid;
				}
				ul {
					padding-inline : 30px 10px;
					li {
						margin-block : 5px;
						line-height  : calc(1em + 5px);
						list-style   : disc;
					}
				} 
			}

			&::after {
				position    : absolute;
				top         : 0;
				right       : 0;
				left        : 0;
				display     : block;
				padding     : 10px;
				font-weight : 900;
				color       : white;
				white-space : pre-wrap;
				content     : 'Error:\A At least one renderer should be enabled to make a search';
				background  : rgb(255, 60, 60);
				opacity     : 0;
				transition  : opacity 0.5s;
			}
			&:not(:has(input[type='checkbox']:checked))::after { opacity : 1; }

			.formTitle {
				margin        : 20px 0;
				font-size     : 30px;
				color         : black;
				text-align    : center;
				border-bottom : 2px solid;
			}

			.formContents {
				position       : relative;
				display        : flex;
				flex-direction : column;

				label {
					display     : flex;
					align-items : center; 
					margin      : 10px 0;
				}
				input[type='text'], textarea, select {
					margin   : 0 10px; 
					color            : var(--input-text-clr);
					background-color : var(--input-bg);
					border           : 1px solid var(--input-placeholder-clr);
					&:hover, :focus { outline          : 1px solid var(--input-placeholder-clr); background-color : var(--input-bg-hover); }
					&::placeholder { color : var(--input-placeholder-clr); }
					&:invalid { background : #ffbcb5; }
				}

				#searchButton {
					.colorButton(@green);
					position : absolute;
					right    : 20px;
					bottom   : 0;

					i {
						margin-left         : 10px;
						animation-duration  : 1000s;
					}
				}
			}
		}

		&.resultsContainer {
			display        : flex;
			flex-direction : column;
			height         : 100%;
			overflow-y     : auto;
			font-size      : 0.34cm;
			container-type : inline-size;

			.foundBrews {
				display:flex;
				flex-direction: column;
				gap:20px;
				padding          : clamp(20px, 5vh, 200px) clamp(20px, 20vw, 200px);
				overflow-y       : scroll;
				scrollbar-gutter : stable;
				@container (max-width : 1200px) {
					padding : clamp(20px, 5vh, 200px) clamp(20px, 10vw, 200px);
				}
				@container (max-width : 800px) {
					padding : clamp(20px, 5vh, 200px) clamp(20px, 5vw, 200px);
				}

				&::-webkit-scrollbar {
					width : 15px;
					&:horizontal {
						width  : auto;
						height : 20px;
					}
					&-thumb {
						background : linear-gradient(90deg, var(--bg-clr) 12px, #00000000 12px);
						&:horizontal { background : linear-gradient(0deg, var(--bg-clr) 15px, #00000000 15px); }
					}
					&-corner { visibility : hidden; }
				}

				&.noBrews {
					margin      : 10px 0px;
					font-size   : 25px;
					font-style  : italic;
					font-weight : 900;
					color       : white;
				}

				&.searching {
					display     : grid;
					place-items : center;
					color       : white;

					h3 { position : relative; }

					h3.searchAnim::after {
						position  : absolute;
						top       : 50%;
						right     : 0;
						width     : max-content;
						height    : 1em;
						content   : '';
						translate : calc(100% + 5px) -50%;
						animation : trailingDots 2s ease infinite;
					}
				}


				.brewCollection {
					h1 {
						width         : fit-content;
						margin-bottom : 20px;
						font-size     : 25px;
						color         : #DDDDDD;

						&.active::before,
						&.inactive::before {
							padding-right : 0.5em;
							font-family   : 'Font Awesome 6 Free';
							font-size     : 0.6cm;
							font-weight   : 900;
						}
						&.active {
							color : white;
							&::before { content : '\f107'; }
						}
						&.inactive::before { content : '\f105'; }
					}
					h1:hover { cursor : pointer; }

					.brewGroup {
						margin-bottom : 20px;
						&.grid {
							display         : flex;
							flex-wrap       : wrap;
							gap             : 20px;
							justify-content : center;
							width           : fit-content;
							min-width       : 200px;
						}

						&.list {
							display        : flex;
							flex-direction : column;
							gap            : 2px;
						}
						&.card {
							--columns             : 4;
							display               : grid;
							grid-template-columns : repeat(var(--columns), 1fr);
							gap                   : 20px;
							justify-items         : center;

							@container (max-width : 1700px) {--columns : 3;}
							@container (max-width : 1400px) {--columns : 2;}
							@container (max-width : 900px) {--columns : 1;}
							h1 { position : absolute; }

							&:not(:has(.brewItem:last-child:nth-child(3n))) {
								.brewItem:last-child { margin-right : auto; }
							}
						}
					}
				}

				.totalBrews {
					position         : fixed;
					right            : 0;
					bottom           : 0;
					z-index          : 1000;
					padding          : 8px 10px;
					font-family      : 'Open Sans';
					font-size        : 11px;
					font-weight      : 800;
					color            : white;
					background-color : #333333;

					.searchAnim {
						position : relative;
						display  : inline-block;
						width    : 3ch;
						height   : 1em;
					}

					.searchAnim::after {
						position  : absolute;
						top       : 50%;
						right     : 0;
						width     : max-content;
						height    : 1em;
						content   : '';
						translate : -50% -50%;
						animation : trailingDots 2s ease infinite;
					}
				}

				.paginationControls {
					display               : grid;
					grid-template-areas   : 'previousPage currentPage nextPage';
					grid-template-columns : 50px 1fr 50px;
					gap                   : 20px;
					place-items           : center;
					width                 : fit-content;
					margin-inline:auto;
					font-size             : 15px;

					.pages {
						display         : flex;
						grid-area       : currentPage;
						gap             : 1em;
						justify-content : space-evenly;
						width           : 100%;
						height          : 100%;
						text-align      : center;

						.pageNumber {
							place-content           : center;
							width                   : fit-content;
							min-width               : 2em;
							font-family             : 'Open Sans';
							font-weight             : 900;
							color                   : white;
							text-wrap               : nowrap;
							text-underline-position : under;
							cursor                  : pointer;

							&:hover {
								color           : gold;
							}
							&.currentPage {
								color:@yellow;
								text-decoration : underline;
								pointer-events  : none;
							}

							&.firstPage { margin-right : -5px; }

							&.lastPage { margin-left : -5px; }
						}
					}

					button {
						.colorButton(@green);
						width : max-content;

						&.previousPage { grid-area : previousPage; }

						&.nextPage { grid-area : nextPage; }
					}

				}
			}
		}
	}

	.listPageNav {
		position        : relative;
		display         : flex;
		flex-wrap       : wrap;
		row-gap         : 10px;
		column-gap      : 20px;
		align-items     : center;
		justify-content : center;
		width           : 100%;
		height          : fit-content;
		font-family     : 'Open Sans', sans-serif;
		color           : white;
		background      : #555555;
		border-top      : 1px solid #666666;
		border-bottom   : 1px solid #666666;
		row-rule        : 1px solid #666666;

		> div {
			width          : fit-content;
			height         : 30px;
			padding-inline : 10px;
		}

		.radio-toggle {
			z-index         : 1;
			display         : flex;
			flex-wrap       : wrap;
			row-gap         : 5px;
			align-items     : center;
			justify-content : center;
			text-align      : center;
			h6 {
				margin-right   : 5px;
				font-size      : 14px;
			}

			.option {
				display     : flex;
				align-items : center;
				height      : 100%;
				padding     : 0 8px;
				color       : #CCCCCC;

				input[type='radio'] { display : none; }

				button {
					padding          : 0;
					font-size        : 11px;
					font-weight      : normal;
					text-transform   : uppercase;
					background-color : transparent;
				}
				&:hover { background-color : #444444; }
				
				&.active, &:has(input:checked) {
					font-weight      : bold;
					color            : white;
					background-color : #333333;

					button {
						height      : 100%;
						font-weight : 800;
						& + .sortDir { padding-left : 5px; }
					}
				}
			}
		}

		
	}
}

@keyframes trailingDots {

	0%,
	32% { content : ' .'; }

	33%,
	65% { content : ' ..'; }

	66%,
	100% { content : ' ...'; }
}