@import "/ui/Hud/Style.scss";

.pause-menu {
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	background-color: rgba(17, 17, 17, 0.56);
	
	background-color: $fullscreen-bg;
		backdrop-filter: $fullscreen-blur;
	font-family: Gadugi;
	font-size: 18px;
	font-family: Geneva;
	transition: all 0.2s ease-out;
	color: #fff;
	opacity: 0;
	
	pointer-events: all;
	z-index: 0;
	
	&.enabled {
			display: flex;
			opacity: 1;
		}

	.pause-menu-content {
		position: relative;
		width: 30%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0);
		padding: 1%;
		border-radius: 10px;
		flex-direction: column;
		transform: translateX(-100%);
		transition: transform 0.25s ease-out;
		
		
		
		
			&.enabled {
				transform: translateX(0%);
				transition: opacity 5.5s ease-out;
			}
		
			&.disabled {
				transform: translateX(-100%);
				transition: opacity 5.5s ease-out;

			}
		
		.boy{
			position: relative;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			padding: 10%;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.966);
			border-radius: 10px;
			border-width: 1px;
			.pause-menu-pic{
				position: relative;
				width: 100%;
				height: 50%;
				background-image: url("/ui/textures/vynd.jpg");
				background-size: cover;
				background-position: center;
				background-repeat: no-repeat;
				border-radius: 10px;
				opacity: 0.6;

			}
			.pause-menu-title 
			{
					position: relative;
					width: 100%;
					text-align: center;
					justify-content: center;
					bottom: 580px;
					font-size: 64px;
					font-style: italic;
					text-shadow: 5px 5px 5px rgb(92, 87, 87);
					
					text-decoration: underline;
					
				}
			
				.pause-menu-buttons {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					
			
					.pause-menu-button {
						background-color: rgba(0, 0, 0, 0.5);
						color: #fff;
						padding: 10px 20px;
						margin: 5px;
						border-radius: 5px;
						cursor: pointer;
						transition: all 0.2s ease-out;
						&:hover {
								background-color: rgba(255, 255, 255, 0.7);
							}
						
					}
					
				}
		}

	}
		.pause-menu-content2 {
			
			left: 40%;
			position: relative;
			width: 30%;
			height: 100%;
			
			padding: 1%;
			
			flex-direction: column;
			
			transform: translateX(-0%);
			transition: transform 0.25s ease-in-out;
			
				&.enabled {
					transform: translateX(0%);
					transition: opacity 5.5s ease-out;
				}
			
				&.disabled {
					transform: translateX(100%);
					transition: opacity 5.5s ease-out;
			
				}
			.boy2 
			{
					position: relative;
					
					flex-direction: column;
					padding: 10%;
					width: 100%;
					height: 100%;
					background-color: rgba(0, 0, 0, 0.966);
					border-radius: 10px;
						border-width: 1px;
	
				.discord 
				{
						position: relative;
						width: 100%;
						height: 50%;
						background-color: rgba(0, 21, 103, 0);
						flex-direction: column;
						
						
				
						.discord-title {
							position: relative;
								width: 100%;
								text-align: center;
								justify-content: center;
								
								font-size: 64px;
								font-style: italic;
								text-shadow: 5px 5px 5px rgb(92, 87, 87);
							
								text-decoration: underline;
							
						}
						.discord-title2{
							position: relative;
							width: 25%;
							height: 25%;
							left: 40%;
							top: 10%;
							text-align: center;
							justify-content: center;
							background-image: url("/ui/textures/discord.jpg");
							background-position: center;
							background-size: cover;
							border-radius: 50px;
							
						}
				
						.discord-buttons {
							position: relative;
							top:30%;
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							background-color: rgba(255, 255, 255, 0.148);
				
							.discord-button {
								background-color: rgba(0, 0, 0, 0.5);
								color: #fff;
								padding: 10px 20px;
								margin: 5px;
								border-radius: 5px;
								cursor: pointer;
								transition: all 0.2s ease-out;
				
								&:hover {
									background-color: rgba(0, 0, 0, 0.7);
								}
							}
						}
				
				
					}
					
					
			}
			
			
	
		}
				
		

		

		
}
.settings-background {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: all;
	background-color: $fullscreen-bg;
	backdrop-filter: $fullscreen-blur;

	.settings-dialog {
		position: absolute;
		width: 80%;
		height: 80%;
		top: 10%; 
		left: 10%;
		display: flex;
		font-size: 24px;
		justify-content: center;
		align-items: center;
		z-index: 1;
		transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
		opacity: 0;
		transform: scale(0.9);
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

		&.visible {
			opacity: 1;
			transform: scale(1);
		}

		.settings-content {
			
			position: relative;
			width: 100%;
			height: 100%;
			background-color: #2c2c2c;
			font-family: Geneva;
			box-shadow: 5px 5px 20px rgb(0, 0, 0);
			color: rgb(0, 0, 0);
			padding: 5px;
			border-radius: 10px;
			text-align: center;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			border-width: 1px;
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
			
			.title{
				position: relative;
				color:rgb(196, 196, 196);
				width: 100%;
				height: 10%;
				text-align: center;
				justify-content: center;
				font-size: 64px;
				font-style: italic;
				text-shadow: 5px 0px 0px rgb(0, 0, 0);
				background-color: rgba(0, 0, 0, 0.5);
				border-radius: 10px;
				border-width: 1px;
				border-color: #a3a3a3;
				border-bottom-width: 0px;
				align-items: center;
				
			}

			.settings-tabs {
				
				position:relative;
				top: 2%;
				display: flex;
		
				padding: 0;
				margin: 0;
				gap: 5px;
				
				.settings-tab {
					
					position: relative;
					justify-content: center;
					align-items: center;
					margin: 0 10px;
					padding: 10px 20px;
					background-color: #376392;
					box-shadow: 5px 2px 0px rgb(0, 0, 0);
					text-shadow: 3px 2px 0px rgb(0, 0, 0);
					color: #fff;
					border-radius: 5px;
					cursor: pointer;

					transition: background-color 0.1s ease;

					&:active:not(.disabled) 
					{
						sound-in: 'light_click';
						background-color: rgb(250, 134, 39);
						}
					
						&:hover:not(.disabled) {
							cursor: pointer;
							opacity: 1;
							sound-in: 'hover';
							background-color: rgb(1, 0, 88);
						}

				}
			}

			.settings-tab-content 
			{
				
				position: relative;
				justify-content: flex-start;
				color:white;
				margin-top: 50px;
				background-color: rgba(0, 0, 0, 0.459);
				width: 80%;
				text-shadow: 3px 2px 0px rgb(0, 0, 0);
				height: 1000px;
				flex-direction: column;
				overflow-y: scroll;
				align-items: center;
				
				
				
			
				.settings-tab-box{
					top: 1%;
					position: relative;
					background-color: rgba(0, 0, 0, 0.397);
					
					width: 50%;
					border-width: 1px;
					gap: 10px;
					border-radius: 10px;
				
					align-items: center;
					justify-content: center;
					box-shadow: 5px 5px 0px rgb(0, 0, 0);
					text-shadow: 3px 2px 0px rgb(0, 0, 0);
					
					.button 
					{
					padding: 10px 20px;
					
					margin: 15px;
					border-radius: 5px;
					background-color: #0168d5;
					color: #fff;
					height: 20%;
					align-items: center;
							
					cursor: pointer;
					transition: background-color 0.2s ease-in-out;
					
					&:hover
					{
						background-color: #0056b3;
					}
				}
					
					
				}
				
				.tab-panel 
				{
					position: relative;
					flex-direction: column;
					width: 100%;
					
					background-color: #3c3c3c;
					color: #fff;
					padding: 20px;
					border-radius: 10px;
					box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
					margin-top: 20px;
					align-items: center;

					.prestige-button {
						position: relative;
						top: 10px;
						pointer-events: all;
						z-index: 100;
						margin: 10px;
						padding: 10px 20px;
						background-color: #0168d5;
						color: #fff;
						flex-direction: row;
						justify-content: flex-start;
						align-items: center;
						border-radius: 5px;
						cursor: pointer;
						transition: background-color 0.3s ease;

						&:hover {
							background-color: #0056b3;
						}
					}
						

					

					
            	}
			}

			.settings-button {
				position: relative;
				top: 10px;
				pointer-events: all;
				z-index: 100;
				margin: 10px;
				padding: 10px 20px;
				background-color: #0168d5;
				color: #fff;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				border-radius: 5px;
				cursor: pointer;
				transition: background-color 0.3s ease;

				&:hover {
					background-color: #0056b3;
				}
			}
		}
	}
}

.confirmation-dialog 
{
	position: absolute;
	top: 45%;
	left: 37%;
	width: 25%;
	height: 25%;

	display: flex;
	font-size: 24px;
	justify-content: center;
	
	align-items: center;
	z-index: 1;

	.confirmation-content {
		position: relative;
		width: 100%;
		height: 100%;
		background-color: #cecece;
		font-family: Geneva;
		box-shadow: 5 5 20px rgb(0, 0, 0);
		color:rgb(0, 0, 0);
		padding: 5px;
		border-radius: 10px;
		text-align: center;
		flex-direction: column;
		justify-content: center;
			align-items: center;
			border-width: 1px;
			border-color: #000;
			
	}

	.confirmation-button {
		position: relative;
		top: 10px;
		pointer-events: all;
		z-index: 100;
		margin: 10px;
		padding: 10px 20px;
		background-color: #0168d5;
		color: #fff;
		
		border-radius: 5px;
		cursor: pointer;
		transition: background-color 0.3s ease;

		&:hover {
			background-color: #0056b3;
		}
	}
}

.pause-menu.enabled {
	opacity: 1;
	display: flex;
}
WebPanel {
	position: absolute;
	top: 50px;
	left: 50px;
	width: 1280px;
	height: 720px;
	pointer-events: all;
	
}
.webpanel-container {
	position: absolute;
	width: 100%;
	height: 100%;
	pointer-events: all;

	.close-webpanel-button {
		position: absolute;
		top: 100px;
		right:100px;
		font-size: 32px;
		background-color: rgba(255, 0, 0, 0.5);
		color: #fff;
		padding: 10px 20px;
		margin: 5px;
		border-radius: 5px;
		cursor: pointer;
		transition: all 0.2s ease-out;
		z-index: 100;

		&:hover {
			background-color: rgba(255, 255, 255, 0.7);
		}
	}

}