// out: false

.small-panel-width {
	min-width: 20vw;
}

.medium-panel-width {
	min-width: 40vw;
}

.big-panel-width {
	min-width: 60vw;
}

.small-panel-height {
	min-height: 30vh;
}

.medium-panel-height {
	min-height: 50vh;
}

.big-panel-height {
	min-height: 80vh;
}

.limit-panel-height {
	max-height: 80vh;
}

.panel-header {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-bottom: @big-gap;
}

.panel-title {
	.data;
}

.invisible-panel {
	display: none;
}


.absolute-exit {
	position: absolute;
	top: @big-gap;
	right: @big-gap;
	z-index: 3;
}

.panel {
	.center-absolute;
	background-clip: padding-box;
	overflow-y: scroll;
	position: fixed;
	scrollbar-width: none;
	z-index: 2;
}

.modal-panel {
	.limit-panel-height;
	.panel-with-border;
	color: @primary-fc;
	font-family: @primary-ff;
	font-size: @md-fs;
	padding: @big-gap @big-gap;
}

.panel-with-border {
	background-color: @stardew-bg;
	border-image: url("../../assets/images/content/border_image.png") 15 stretch;
	border-image-outset: 8px;
	border-image-width: 10px;
}

.panel-with-background {
    background-position: center;
    background-repeat: no-repeat;
	background-size: cover;
    box-sizing: border-box;
}

.panel {
	&.upload-panel {
		.invisible-panel;
		.modal-panel;
		.small-panel-width;

		& > span {
			display: flex;
			flex-direction: column;
			gap: @big-gap;
			justify-content: center;
			width: fit-content;

			& > span {
				&:first-of-type {
					align-items: center;
					display: flex;
					gap: @md-gap;
				}
			}
		}

		.section-title {
			font-size: @big-fs;
		}

		#browse-files {
			.button-elements;
			.filled-element;
			cursor: @pointer;
			padding: (extract(@button-gaps, 1) * @ratio) (extract(@button-gaps, 2) * @ratio);
		}

		#save-upload {
			display: none;
		}
	}

	&.languages-panel {
		.invisible-panel;
		.modal-panel;
		.small-panel-width;
		max-width: 500px;

		& > .panel-header {
			margin-bottom: 0;
		}

		& > .panel-warning {
			margin-bottom: @big-gap;
		}

		span {
			display: flex;
			gap: @md-gap;
			
			img {
				cursor: @pointer;
				width: 36px;
			}
		}
	}

	&.settings-panel {
		.invisible-panel;
		.modal-panel;
		.small-panel-width;

		.checkboxes {
			display: flex;
			flex-direction: column;
			gap: @md-gap;
			justify-content: center;

			.checkbox {
				align-items: flex-end;
				display: flex;
				gap: @md-gap;

				input {
					.checkbox-elements;
				}
			}
		}
	}

	&.feedback-panel {
		.medium-panel-width;
		.modal-panel;

		span {
			form {
				align-items: flex-start;
				display: flex;
				gap: @big-gap;
				flex-direction: column;

				& > span {
					&:first-of-type {
						display: flex;
						gap: @bigger-gap;
						justify-content: space-between;
						width: 100%;
					}
				}
					
				.label_and_input {
					display: flex;
					flex-direction: column;
					gap: @small-gap;

					&.full_width {
						width: 100%;
					}

					&.stay_start {
						align-items: flex-start;
					}
				
					textarea {
						resize: none;
					}

					&.mail_input {
						flex-grow: 1;
					}
				}

				.topic_selection {
					display: flex;
					justify-content: space-around;
					
					& > span {
						align-items: center;
						display: flex;
						flex-basis: 33%;
						flex-direction: column;
						gap: @md-gap;
					}

					& img {
						height: @big-icon;
						object-fit: contain;
						width: @big-icon;
					}
				}

				input, textarea {
					&:not(input[type=submit]) {
						background-color: @stardew-bg;
						border-bottom: solid 3px #965c3a;
						border-left: solid 3px #965c3a;
						border-radius: 2px;
						border-right: solid 3px #5b2b2a;
						border-top: solid 3px #5b2b2a;
						box-shadow: inset -2px 2px 0 2px #dc7b05, -2px 2px 0 2px #cca36b;
						font-family: @dialogue-ff;
						padding: @small-gap @small-gap;
						scrollbar-width: none;
					}
				}

				input[type=submit] {
					.button-elements;
					.filled-element;
					cursor: @pointer;
					font-family: @primary-ff;
					font-size: @big-fs;
					margin: 0 auto;
					padding: (extract(@button-gaps, 1) * @ratio) (extract(@button-gaps, 2) * @ratio);
				}

				input[type=number] {
					appearance: textfield;
					-moz-appearance: textfield;
					
					&::-webkit-outer-spin-button, &::-webkit-inner-spin-button {
						margin: 0;
						-webkit-appearance: none;
					}
				}

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

	&.visited-locations-panel {
		.big-panel-width;
		.invisible-panel;
		.panel-with-border;
		.panel-with-background;
		aspect-ratio: 1.79;
		background-image: url("../../assets/images/content/map_no_border.png");
		color: @goal-fc;
		font-family: @dialogue-ff;
		font-size: @giant-fs;
		padding: @big-gap @big-gap;

		& > * {
			display: flex;
			flex-direction: column;
			gap: @md-gap;
		}

		& > .header {
			margin-bottom: @big-gap;
			position: relative;
	
			& > .title {
				color: @third-fc;
				display: flex;
				flex-direction: column;
				font-weight: 900;
				letter-spacing: 3px;
				text-align: center;
			}

			& > .dashes {
				@dash-amount: 30;
				@dash-gap: 3px;
				@dash-width: 14px;
				margin-inline: auto;
				width: @dash-amount * @dash-width + (@dash-amount - 1) * @dash-gap;
			}

			& > .exit {
				position: absolute;
				right: @md-gap;
				top: @md-gap;
				width: @big-icon;
			}
		}

		& > .locations {
			display: grid;
			gap: @md-gap @bigger-gap;
			grid-template-columns: repeat(2, 1fr);

			a {
				box-sizing: border-box;
				color: @third-fc;
				padding-inline: @big-gap;
				width: fit-content;
				
				&:hover, & > span:hover {
					cursor: @pointer;
				}

				&:nth-child(odd) {
					left: 55%;
					position: relative;
				}
			}
		}
	}

	&.quests-panel {
		.invisible-panel;
		.medium-panel-width;
		.panel-with-border;
		color: @primary-fc;
		font-family: @primary-ff;
		font-size: @md-fs;
		max-height: 80vh;
		padding: @big-gap @big-gap;

		.section-title {
			margin: 0;
		}

		.quests {
			display: flex;
			flex-direction: column;
			gap: @big-gap;
			white-space: nowrap;

			.quest {
				display: flex;
				gap: @bigger-gap * 2;
				justify-content: space-between;

				& > span {
					gap: @small-gap;
					justify-content: center;
				}

				.quest-infos {
					display: flex;
					flex-direction: column;
					width: 500px;

					.quest-description {
						font-size: @big-fs;
					}

					.quest-title {
						font-style: italic;
					}
				}

				.days-left {
					align-items: center;
					display: flex;
				}
	
				.quest-rewards {
					display: flex;
					gap: @big-gap;
					justify-content: flex-end;
					width: 228px;

					.quest-reward {
						align-items: center;
						display: flex;
						gap: @xsmall-gap;
					}
				}

				img {
					width: @small-icon;
				}
			}
		}

		.section-title {
			font-size: @big-fs;
		}
	}

	&.monster-eradication-goals-panel {
		.big-panel-width;
		.invisible-panel;
		.panel-with-background;
		aspect-ratio: 1.79;
		background-image: url("../../assets/images/content/adventurers_guild_bg.png");
		color: @goal-fc;
		font-family: @dialogue-ff;
		font-size: @giant-fs;
		padding: @big-gap @big-gap;

		& > * {
			display: flex;
			flex-direction: column;
			gap: @md-gap;
		}

		& > .header {
			position: relative;
	
			& > .title {
				display: flex;
				flex-direction: column;
				font-weight: 900;
				letter-spacing: 3px;

				& > span {
					text-align: center;
				}
			}

			& > .dashes {
				@dash-amount: 30;
				@dash-gap: 3px;
				@dash-width: 14px;
				margin-inline: auto;
				width: @dash-amount * @dash-width + (@dash-amount - 1) * @dash-gap;
			}

			& > .exit {
				position: absolute;
				right: @md-gap;
				top: @md-gap;
				width: @big-icon;
			}
		}

		& > .goals {
			margin-left: @md-gap + @small-gap;
			margin-top: @md-gap;

			& > .goal {
				align-items: center;
				display: flex;
				gap: @md-gap;

				& > *:not(.tooltip) {
					font-weight: 900;
					letter-spacing: 3px;
				}

				& img.reward {
					height: @big-icon;
					object-fit: contain;
					width: @big-icon;
				}
			}
		}
	}

	&.calendar-panel {
		.invisible-panel;
		@calendar-ratio: 1;
		@used-width: 50vw;
		@calendar-width: 480;
		// (used-width en vw * valeur en pixel) / calendar-width en px
		@calendar-block: ((@used-width * 64) / @calendar-width) * @calendar-ratio;
		@calendar-border-width: ((@used-width * 2) / @calendar-width) * @calendar-ratio;
		@calendar-left-margin: ((@used-width * 16) / @calendar-width) * @calendar-ratio;
		@calendar-real-width: ((@used-width * @calendar-width) / @calendar-width) * @calendar-ratio;
		@calendar-top-margin: ((@used-width * 64) / @calendar-width) * @calendar-ratio;

		aspect-ratio: 1.43;
		width: @calendar-real-width;

		& > .calendar-block {
			display: block;
			height: 100%;
			position: relative;
			width: 100%;

			& > .calendar-bg {
				height: 100%;
				position: absolute;
				width: 100%;
			}

			& > table {
				border-collapse: collapse;
				height: fit-content;
				left: @calendar-left-margin + (@calendar-border-width / 2);
				position: absolute;
				top: @calendar-top-margin + (@calendar-border-width / 2);
				width: fit-content;

				& > tbody > tr {
					display: block;
					height: @calendar-block;
					width: fit-content;
	
					& > td {
						box-sizing: border-box;
						height: @calendar-block;
						padding: 0;
						text-align: center;
						width: @calendar-block;

						&.filled {
							&:hover {
								border: solid 2px @calendar-bc;
							}
						}
	
						& > span {
							height: 100%;
							margin: 0 auto;
							vertical-align: middle;

							& > a {
								cursor: @pointer;
								display: block;
								height: 100%;
								width: 100%;
							}
						}
					}

					& > td.simple-event {
						& > span {
							display: block;
							width: 100%;
						}
					}

					& > td.double-event {
						& > span {
							display: inline-block;
							width: 45%;
						}
					}
				}
			}
		}
	}

	&.all-animals-panel {
		.invisible-panel;
		.panel-with-border;
		.small-panel-width;
		color: @primary-fc;
		font-family: @primary-ff;
		font-size: @md-fs;
		max-height: 80vh;
		padding: @md-gap @big-gap;

		& > .panel-header {
			& > .section-title {
				font-size: @big-fs;
			}
		}

		& > .friendlist {
			display: flex;
			flex-direction: column;
	
			& > span {
				align-items: center;
				display: flex;
				gap: @bigger-gap;
			}

			.animal-icon {
				cursor: @help;
				height: @bigger-icon;
				object-fit: contain;
				width: @giant-icon;
			}

			.animal-name {
				font-family: @primary-ff;
				overflow: hidden;
				text-overflow: ellipsis;
				width: 100px;
			}

			.hearts-level {
				display: flex;
				flex-wrap: wrap;
				gap: @small-gap;
			
				.hearts {
					width: @small-icon;
				}
			}

			.interactions {
				align-items: center;
				display: flex;
				gap: @big-gap;

				& > span {
					display: flex;
					gap: @md-gap;
				}
				
				.interaction, .status {
					width: @md-icon;
				}
			}

			.animal-status {
				.data;
				font-size: @md-fs;
			}
		}
	}

	&.junimo-kart-leaderboard-panel {
		.big-panel-width;
		.invisible-panel;
		.panel-with-background;
		.panel-with-border;
		aspect-ratio: 2/1;
		background-image: url("../../assets/images/content/junimo_leaderboard_bg.png");
		min-height: 70vh;
		padding: @md-gap @big-gap;

		& > .leaderboard {
			display: flex;
			flex-direction: column;
			gap: @giant-gap;

			& > .absolute-exit {
				position: absolute;
				top: @big-gap;
				right: @big-gap;
			}
			
			& > .image-title {
				margin: @bigger-gap auto 0 auto;
				width: 50%;
			}

			& > .scores {
				display: flex;
				flex-direction: column;
				gap: @md-gap;
				margin: 0 auto @bigger-gap auto;
				width: 25%;

				& > .record-holder {
					color: @third-fc;
					display: flex;
					font-family: @primary-ff;
					font-size: @bigger-fs;
					justify-content: space-between;
					text-shadow: 3px 3px 3px @primary-fc;

					& > .record-holder-details {
						display: flex;
						gap: @md-gap;
						
						& > .record-holder-counter {
							width: 33px;
						}
					}

					&.leader {
						animation: rainbow 10s infinite linear;
					}
				}
			}
		}
	}

	&.museum-panel {
		.invisible-panel;
		.panel-with-background;
		.panel-with-border;
		@museum-ratio: 1;
		@used-width: 50vw;
		@museum-width: 757;
		// (used-width en vw * valeur en pixel) / museum-width en px
		@museum-block: ((@used-width * 31.75) / @museum-width) * @museum-ratio;
		@museum-left-margin: ((@used-width * 14) / @museum-width) * @museum-ratio;
		@museum-real-width: ((@used-width * @museum-width) / @museum-width) * @museum-ratio;
		@museum-top-margin: ((@used-width * 144) / @museum-width) * @museum-ratio;

		aspect-ratio: 1.29;
		background-image: url("../../assets/images/content/museum_bg.png");
		width: @museum-real-width;

		& > .museum-block {
			display: block;
			height: 100%;
			position: relative;
			width: 100%;

			& > table {
				border-collapse: collapse;
				height: fit-content;
				left: @museum-left-margin;
				position: absolute;
				top: @museum-top-margin;
				width: fit-content;

				& > tbody > tr {
					display: block;
					height: @museum-block;
					width: fit-content;

					& > td {
						box-sizing: border-box;
						height: @museum-block;
						padding: 0;
						position: relative;
						width: @museum-block;

						& > span {
							left: 50%;
							margin: 0;
							position: absolute;
							transform: translate(-50%, -50%);
							width: 1.25vw;
							height: 1.25vw;

							.museum-piece {
								filter: drop-shadow(1px 1px 0.5px #2b2a2a);
								position: absolute;
								width: 100%;
							}
						}
					}
				}
			}
		}
	}

	&.community-center-panel {
		.invisible-panel;
		.panel-with-border;
		@cc-ratio: 1.5;
		@used-width: 60vw;
		@cc-width: 1120;
		// (used-width en vw * valeur en pixel) / cc-width en px
		@cc-real-width: ((@used-width * @cc-width) / @cc-width) * @cc-ratio;
		
		aspect-ratio: 2.33;
		width: @cc-real-width;

		& > .community-center-background-container {
			position: relative;

			& > .background-image {
				aspect-ratio: 2.33;
				border-image: url(../../assets/images/content/border_image.png) 15 stretch;
				border-image-outset: 8px;
				border-image-width: 10px;
				width: 100%;
			}

			& > .chevron-down {
				animation: float-up-down 3s ease-in-out infinite;
				bottom: 20px;
				position: absolute;
				right: 50%;
				transform: translateX(-50%);
				width: 1.5rem;
			}
		}

		@keyframes float-up-down {
			0%, 100% {
				transform: translateY(0);
			}
			50% {
				transform: translateY(-10px);
			}
		}

		& > .rooms {
			display: grid;
			gap: @big-gap;
			grid-template-columns: repeat(2, 50%);
			padding: @big-gap;

			h2 {
				font-family: @primary-ff;
				font-size: @big-fs;
				font-weight: 400;
				margin: 0;
			}

			& > .room {
				display: flex;
				flex-direction: column;
				gap: @md-gap;

				& > .bundles {
					display: flex;
					gap: @md-gap;

					& > .bundle {
						aspect-ratio: 1;
						display: flex;
						max-width: 12%;
						position: relative;

						&.bundle-tooltip > span {
							@cc-ratio: 1;
							@used-width: 20vw;
							@cc-width: 340;
							// (used-width en vw * valeur en pixel) / cc-width en px
							@cc-background-width: ((@used-width * @cc-width) / @cc-width) * @cc-ratio;
							@cc-image-left-margin: ((@used-width * 136.5) / @cc-width) * @cc-ratio;
							@cc-items-left-margin: ((@used-width * 66) / @cc-width) * @cc-ratio;
							@cc-items-width: ((@used-width * 198) / @cc-width) * @cc-ratio;
							@cc-image-top-margin: ((@used-width * 44) / @cc-width) * @cc-ratio;
							@cc-image-width: ((@used-width * 64) / @cc-width) * @cc-ratio;
							@cc-required-height: ((@used-width * 62) / @cc-width) * @cc-ratio;
							@cc-required-top-margin: ((@used-width * 138) / @cc-width) * @cc-ratio;
							@cc-slot-border-width: ((@used-width * 8) / @cc-width) * @cc-ratio;
							@cc-slot-height: ((@used-width * 84) / @cc-width) * @cc-ratio;
							@cc-slot-top-margin: ((@used-width * 228) / @cc-width) * @cc-ratio;
							@cc-slot-width: ((@used-width * 182) / @cc-width) * @cc-ratio;

							& > .bundle-bg {
								width: @cc-background-width;
							}
							
							& > .bundle-icon {
								position: absolute;
								left: @cc-image-left-margin;
								top: @cc-image-top-margin;
								width: @cc-image-width;
							}

							& > .required-items {
								align-items: center;
								display: flex;
								flex-wrap: wrap;
								gap: 0.25vw;
								height: @cc-required-height;
								justify-content: center;
								left: @cc-items-left-margin;
								position: absolute;
								top: @cc-required-top-margin;
								width: @cc-items-width;

								& > .required-item {
									position: relative;
									width: 1.5vw;

									& > img {
										&.item {
											height: 100%;
											width: 100%;
										}

										&.quality {
											bottom: 0;
											position: absolute;
											right: 0;
											width: .5vw;
										}
									}
									
									& > .quantity {
										bottom: -.5vw;
										color: @third-fc;
										position: absolute;
										left: 0;
										font-size: .75vw;
									}
								}
							}

							& > .slots {
								align-items: center;
								display: flex;
								flex-wrap: wrap;
								gap: 0.25vw;
								height: @cc-slot-height;
								justify-content: center;
								left: (@cc-items-left-margin + @cc-slot-border-width);
								position: absolute;
								top: @cc-slot-top-margin;
								width: @cc-slot-width;

								& > .slot {
									position: relative;
									width: 2.1vw;

									& > img {
										&.empty-slot, &.purchase {
											height: 100%;
											width: 100%;
										}

										&.added-item {
											height: 70%;
											left: 50%;
											margin: 0;
											position: absolute;
											top: 50%;
											transform: translate(-50%, -50%);
											width: 70%;
										}
									}
								}
							}
						}

						& > .checkmark {
							bottom: 0;
							position: absolute;
							right: 0;
						}
					}
				}
			}
		}
	}
}