@import "colors";
@import "menu";
@import "queue";
@import "controller";
@import "header";

* {
	padding: 0;
	margin: 0;
	font-family: "Roboto", sans-serif;
	color: var(--text);
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

span,
img {
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: -moz-none;
	-o-user-select: none;
	user-select: none;
}

p {
	font-size: 0.875rem;
}

a {
	color: var(--text);
	text-decoration: none;
}

body {
	overflow-x: hidden;
	overflow-y: hidden;
	background-color: var(--bg-dark);
}

.rotate {
	transform: rotate(180deg);
}

.sortable-chosen {
	opacity: 0.5;
}

.sortable-ghost {
	border-left: 0.375rem solid var(--primary);
}

/* ScrollBar width */
::-webkit-scrollbar {
	width: 0.375rem;
	margin: 0.625rem;
}

/* ScrollBar Handle */
::-webkit-scrollbar-thumb {
	background: var(--text-muted);
	border-radius: 0.75rem;
}

/* Google Icon */
.material-symbols-outlined {
	transition: all ease-in-out 0.2s;
	font-variation-settings:
		"FILL" 0,
		"wght" 400,
		"GRAD" 0,
		"opsz" 24;

	&.filled {
		font-variation-settings:
			"FILL" 1,
			"wght" 400,
			"GRAD" 0,
			"opsz" 24;
	}

	&.clickable {
		&:hover {
			scale: 1.1;
			color: var(--text);
			cursor: pointer;
		}

		&:active {
			scale: 0.9;
			color: var(--text);
		}

		&.active {
			color: var(--text);
		}
	}
}

#screen-loader {
	display: flex;
	position: fixed;
	padding: 0;
	margin: 0;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--bg-dark);
	z-index: 100;

	.loader {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		border: 0.125rem solid var(--text);
		scale: 2;
	}
}

.track-info p.description {
	color: var(--text-muted);
}

/* Main Grid */
.main-grid-container {
	display: grid;
	grid-template-areas:
		"header header header"
		"menu main queue"
		"control control control";
	gap: 0.0625rem;
	height: 100vh;
	height: 100svh;
	grid-template-rows: 0.5fr 8fr 0.5fr;
	grid-template-columns: min-content 1fr min-content;
	overflow: hidden;
	background: var(--bg-dark);
	transition: box-shadow 0.5s ease-in-out;
}

.warning-bar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.9375rem;
	background-color: var(--alert-color-red);
	padding: 0.5rem 0;

	p {
		color: var(--text);
	}

	.loader {
		border: 0.1875rem solid var(--text);
	}
}

.main-container {
	grid-area: main;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	.center {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.sections {
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
		scrollbar-gutter: stable;
		overflow-y: scroll;
		overflow-x: hidden;
		.track-header {
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
			margin: 0 0.75rem;
			.small {
				font-size: 0.875rem;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
			}
			.small.skeleton {
				width: 6.25rem;
				height: 0.9375rem;
				opacity: 0.2;
				border-radius: 0.5rem;
				animation: skeleton-loading 1s linear infinite alternate;
				background-color: var(--loadingStart);
				animation-delay: 0.5s;
			}
			.middle {
				font-size: 1rem;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
			}
			.middle.skeleton {
				width: 18.75rem;
				height: 1.125rem;
				opacity: 0.2;
				border-radius: 0.5rem;
				animation: skeleton-loading 1s linear infinite alternate;
				background-color: var(--loadingStart);
				animation-delay: 1.5s;
			}
			.large {
				font-size: 1.875rem;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
			}
			.large.skeleton {
				width: 28.125rem;
				height: 2.1875rem;
				opacity: 0.2;
				border-radius: 0.5rem;
				animation: skeleton-loading 1s linear infinite alternate;
				background-color: var(--loadingStart);
				animation-delay: 1s;
			}
			img {
				width: 10rem;
				height: 10rem;
				border-radius: 0.75rem;
				object-fit: cover;
			}
			.left {
				display: flex;
				align-items: flex-end;
				gap: 1.25rem;
				width: 90%;
				.track-info {
					display: flex;
					flex-direction: column;
					gap: 0.625rem;
					width: 100%;
					overflow: hidden;
				}
			}
			.actions {
				display: flex;
				align-items: center;
				gap: 1.25rem;
				.large {
					font-size: 3.4375rem;
				}
				.middle {
					font-size: 1.875rem;
				}
			}
			.image {
				display: grid;
				grid-template-columns: 5rem 5rem;
				grid-template-rows: 5rem 5rem;
				overflow: hidden;
				border-radius: 0.5rem;
				min-width: 10rem;
				img {
					width: 5rem;
					height: 5rem;
					object-fit: cover;
					border-radius: 0;
				}
			}
			.image.skeleton {
				width: 10rem;
				height: 10rem;
				opacity: 0.2;
				border-radius: 0.5rem;
				animation: skeleton-loading 1s linear infinite alternate;
			}
		}
		.track-rows {
			display: flex;
			flex-direction: column;
		}
		.track-row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			transition: all ease-in-out 0.2s;
			padding: 0.625rem 1.5rem;
			border-radius: 0.5rem;
			cursor: pointer;
			&:hover {
				background-color: var(--bg-light);
				.right {
					span {
						opacity: 1;
						pointer-events: auto;
					}
				}
			}
			&:active {
				opacity: 0.8;
			}
			img {
				width: 3.4375rem;
				height: 3.4375rem;
				object-fit: cover;
				border-radius: 0.3125rem;
				margin-left: 0.625rem;
			}
			.left {
				display: flex;
				align-items: center;
				gap: 0.75rem;
				width: 80%;
				.track-info {
					display: flex;
					flex-direction: column;
					overflow: hidden;
					gap: 0.625rem;
					p {
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
					}
				}
			}
			.right {
				display: flex;
				align-items: center;
				gap: 1.125rem;
				p {
					font-size: 1rem;
				}
				span {
					opacity: 0;
					pointer-events: none;
					font-size: 1.5625rem;
				}
			}
		}
		.footer {
			padding: 1.5rem 0.75rem;

			p.right {
				color: var(--text-muted);
				margin-left: auto;
				margin-right: 0;
			}

			.columns {
				display: flex;
				flex-wrap: wrap;
				flex-grow: 1;

				.column {
					display: flex;
					flex-direction: column;
					width: 20%;
					min-width: 11.25rem;
					gap: 0.5rem;
					margin-bottom: 1.25rem;

					a {
						color: var(--text-muted);
						width: fit-content;
						padding-bottom: 0.5rem;
						&:hover {
							color: var(--text);
							text-decoration: underline;
						}
					}
					.title {
						color: var(--text);
						font-weight: bold;
						padding-bottom: 0.5rem;
						font-size: 1.125rem;
					}
				}
			}
			.row {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
			}
			.social-icons {
				display: flex;
				gap: 0.75rem;
				margin-bottom: 1.25rem;
				a {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 2.75rem;
					height: 2.75rem;
					background-color: var(--bg-light);
					border-radius: 50%;
					transition: background-color 0.2s ease-in-out;
					&:hover {
						background-color: var(--text-muted);
					}
				}
			}
			.footer-line {
				height: 1px;
				margin-bottom: 1.25rem;
				background-color: var(--bg-light);
			}
		}
	}
	.section {
		display: flex;
		flex-direction: column;
		margin: 0.625rem 0.5rem;
		gap: 0.5rem;
		.header {
			display: flex;
			align-items: end;
			justify-content: space-between;
			.header-icon {
				display: flex;
				align-items: center;
				img {
					width: 3.4375rem;
					height: 3.4375rem;
					border-radius: 0.5rem;
				}
			}
			.sub-title {
				display: flex;
				flex-direction: column;
				align-items: start;
				gap: 0.625rem;
				margin-left: 0.75rem;
				white-space: nowrap;
				p {
					color: var(--text-muted);
				}
			}
		}
		.header.skeleton {
			.header-icon {
				img {
					opacity: 0.2;
					animation: skeleton-loading 1s linear infinite alternate;
				}
			}
			p {
				border-radius: 0.3125rem;
				width: 18.75rem;
				height: 0.875rem;
				opacity: 0.2;
				animation: skeleton-loading 1s linear infinite alternate;
				background-color: var(--loadingStart);
				animation-delay: 0.8s;
			}
			.sub-title {
				h2 {
					border-radius: 0.3125rem;
					width: 50%;
					opacity: 0.2;
					height: 1.875rem;
					animation: skeleton-loading 1s linear infinite alternate;
					background-color: var(--loadingStart);
					animation-delay: 0.5s;
				}
			}
		}
		.lyrics-options {
			display: flex;
			align-items: center;
			overflow-y: auto;
			gap: 0.875rem;
			margin-left: 0.75rem;
			&::-webkit-scrollbar {
				display: none;
			}
			.option {
				padding: 0.625rem 0.875rem;
				background-color: var(--bg);
				border-radius: 0.3125rem;
				cursor: pointer;
				transition: all 0.2s ease-in-out;
				&:hover {
					background-color: var(--bg-light);
				}
			}
			.option.active {
				background-color: var(--bg-light);
			}
		}
		.options {
			.option {
				&:active {
					opacity: 0.5;
				}
			}
		}
		.options.skeleton {
			.option {
				width: 4.5rem;
				height: 2.25rem;
				counter-increment: my-counter;
				animation: skeleton-loading 1s linear infinite alternate;
				background-color: var(--loadingStart);
				opacity: 0.2;
				&:nth-child(2) {
					animation-delay: 0.5s;
				}
				&:nth-child(3) {
					animation-delay: 1s;
				}
				&:nth-child(4) {
					animation-delay: 1.5s;
				}
			}
		}
		.lyrics {
			display: flex;
			flex-direction: column;
			gap: 0.625rem;
			margin-left: 0.75rem;
			.line {
				font-size: 1.125rem;
			}
		}
		.lyrics-options.skeleton {
			.option {
				height: 2.375rem;
				width: 4.75rem;
				animation: skeleton-loading 1s linear infinite alternate;
				background-color: var(--loadingStart);
				opacity: 0.2;
			}
		}
		.lyrics.skeleton {
			.line {
				width: 50%;
				min-width: 25rem;
				height: 1.25rem;
				animation: skeleton-loading 1s linear infinite alternate;
				background-color: var(--loadingStart);
				opacity: 0.2;
				border-radius: 0.3125rem;
				&:nth-child(even) {
					width: 35%;
					min-width: 18.75rem;
				}
				&:not(:first-child) {
					animation-delay: 0.5s;
				}
			}
		}
	}
	.card-container {
		display: grid;
		gap: 0.3125rem;
		grid-template-columns: repeat(auto-fill, minmax(10.625rem, 1fr));
		.card {
			display: flex;
			flex-direction: column;
			width: 100%;
			gap: 0.625rem;
			cursor: pointer;
			padding: 0.75rem;
			border-radius: 0.625rem;
			transform: translateY(0.625rem);
			transition: all ease-in-out 0.2s;
			&:hover {
				background-color: var(--bg-light);
				span {
					bottom: 10%;
					opacity: 1;
					color: #fff;
				}
			}
			&:active {
				opacity: 0.8;
			}
			.thumbnail {
				position: relative;
				width: 100%;
				&::before {
					content: "";
					display: block;
					padding-top: 100%;
				}
			}
			img {
				position: absolute;
				object-fit: cover;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				border-radius: 0.625rem;
			}
			span {
				position: absolute;
				right: 7%;
				bottom: 1%;
				font-size: 3.125rem;
				text-decoration-color: #151125;
				text-shadow: 0 0.125rem 0.5rem gray;
				opacity: 0;
				transition: all ease-in-out 0.2s;
				&:hover {
					scale: 1.1;
				}
				&:active {
					scale: 0.9;
				}
			}
			.track-info {
				display: flex;
				flex-direction: column;
				gap: 0.3125rem;
			}
			p {
				font-size: 0.875rem;
				width: 98%;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
			}
		}
		.card.skeleton {
			img {
				opacity: 0.2;
				animation: skeleton-loading 1s linear infinite alternate;
			}
			.title {
				border-radius: 0.3125rem;
				width: 95%;
				opacity: 0.2;
				height: 1.125rem;
				animation: skeleton-loading 1s linear infinite alternate;
				background-color: var(--loadingStart);
				animation-delay: 0.5s;
			}
			.description {
				width: 65%;
				height: 1rem;
				border-radius: 0.3125rem;
				opacity: 0.2;
				animation: skeleton-loading 1s linear infinite alternate;
				background-color: var(--loadingStart);
				animation-delay: 1s;
			}
		}
	}
}

.error-container {
	justify-content: center;
	align-items: center;
	height: 100%;
	margin: 1.5625rem 0;
	img {
		max-width: 18.75rem;
	}
	.message {
		display: flex;
		flex-direction: column;
		width: 50%;
		align-items: center;
		text-align: center;
		gap: 1.25rem;
		margin-block: 1.875rem 1.25rem;
		p {
			color: var(--text-muted);
			line-height: 1.25rem;
		}
	}
	.reload-btn {
		padding: 0.875rem 1.125rem;
		border: 0.125rem solid var(--bg-light);
		border-radius: 0.5rem;
		cursor: pointer;
		transition: all ease-in-out 0.2s;
		&:hover {
			background-color: var(--bg-light);
		}
	}
}

.settings-column {
	background-color: var(--bg);
	display: flex;
	flex-direction: column;
	border-radius: 0.5rem;
	.color-select-container {
		padding: 0.25rem 1.125rem 1rem;
		display: flex;
		gap: 1rem;
		.color {
			width: 2.75rem;
			height: 2.75rem;
			border-radius: 0.25rem;
			transition:
				outline 0.2s ease-in-out,
				scale 0.2s ease-in-out;
			outline: 0.125rem solid var(--bg);
			cursor: pointer;
			&:hover {
				outline: 0.125rem solid var(--text-muted);
			}
			&:active {
				scale: 1.05;
			}
			&.selected {
				outline: 0.125rem solid var(--text);
			}
		}
	}
}

.settings-row {
	background-color: var(--bg);
	padding: 1rem 1.125rem;
	border-radius: 0.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.info {
		display: flex;
		flex-direction: column;
		gap: 0.625rem;
		width: 70%;
	}
	.title {
		color: var(--text);
	}
	.desc {
		color: var(--text-muted);
	}
	input.text-input {
		outline: none;
		border: none;
		background-color: transparent;
		border-radius: 0.5rem;
		border: 0.125rem solid transparent;
		background-color: var(--bg-light);
		font-size: 0.875rem;
		padding: 0.625rem 0.75rem;
		width: 6.25rem;
		outline: 0.0625rem solid var(--bg-light);
		transition: outline 0.1s ease-in-out;
	}
	input {
		&:hover.text-input {
			outline: 0.125rem solid var(--text-muted);
		}
		&:focus.text-input {
			outline: 0.125rem solid var(--active-text);
		}
	}
	.select-container {
		width: 12.5rem;
		border-radius: 0.5rem;
		background-color: var(--bg-light);
		font-size: 0.875rem;
		padding: 0.625rem 0.75rem;
		position: relative;
		outline: 0.125rem solid var(--bg);
		transition: outline 0.1s ease-in-out;
		&:hover {
			outline: 0.125rem solid var(--text-muted);
		}
		.selected-container {
			display: flex;
			align-items: center;
			justify-content: space-between;
			cursor: pointer;
		}
		.options {
			display: none;
			position: absolute;
			max-height: 9.375rem;
			width: 100%;
			padding: 0.1875rem;
			border-radius: 0.5rem;
			left: 0;
			top: 3.125rem;
			background-color: var(--bg-light);
			overflow-y: auto;
			z-index: 1;
		}
		.option {
			font-size: 0.875rem;
			padding: 0.625rem 0.75rem;
			transition: all 0.2s ease-in-out;
			border-radius: 0.3125rem;
			cursor: pointer;
			&:hover {
				background-color: var(--bg);
			}
		}
	}
}
.settings-row.long-input {
	gap: 1.25rem;
	flex-direction: column;
	align-items: start;
	input.text-input {
		width: 100%;
		height: 2.5rem;
	}
}

.switch {
	position: relative;
	display: inline-block;
	width: 3.4375rem;
	height: 1.75rem;
	margin-left: 1rem;
	input {
		opacity: 0;
		width: 0;
		height: 0;
	}
}
.switch-slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--text-muted);
	-webkit-transition: 0.4s;
	transition: 0.4s;
	border-radius: 2.125rem;
	&:before {
		position: absolute;
		content: "";
		height: 1.25rem;
		width: 1.25rem;
		left: 0.25rem;
		bottom: 0.25rem;
		background-color: #fff;
		-webkit-transition: 0.4s;
		transition: 0.4s;
		border-radius: 50%;
	}
}
input {
	&:checked {
		+ {
			.switch-slider {
				background-color: var(--active-text);
				&:before {
					-webkit-transform: translateX(1.6563rem);
					-ms-transform: translateX(1.6563rem);
					transform: translateX(1.6563rem);
				}
			}
		}
	}
	&:focus {
		+ {
			.switch-slider {
				box-shadow: 0 0 0.0625rem var(--active-text);
			}
		}
	}
}
.changes-bar {
	position: sticky;
	bottom: 0.625rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.625rem 1rem;
	margin: 0 1.75rem;
	z-index: 1;
	background-color: var(--bg-light);
	border-radius: 0.5rem;
	box-shadow: rgba(149, 157, 165, 0.2) 0rem 0.5rem 1.5rem;
	opacity: 0;
	transform: translateY(6.25rem);
	transition: all 0.6s ease-in-out;
	.left {
		display: flex;
		align-items: center;
		height: 2.5rem;
		gap: 0.875rem;
	}
	.right {
		display: flex;
		align-items: center;
		height: 2.5rem;
		gap: 0.875rem;
	}
	span {
		color: #ae9328;
		font-size: 2rem;
	}
	p {
		font-size: 0.9375rem;
	}
	.reset {
		text-decoration: underline;
		cursor: pointer;
	}
	.submit {
		padding: 0.625rem 0.875rem;
		background-color: var(--active-text);
		cursor: pointer;
		border-radius: 0.3125rem;
		transition: all 0.2s ease-in-out;
		&:hover {
			background-color: var(--bg);
		}
		&:active {
			opacity: 0.8;
		}
	}
}
.changes-bar.show {
	opacity: 1;
	transform: translateY(0);
}
.server-cards {
	display: grid;
	gap: 0.9375rem;
	grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
	padding: 0 0.75rem;
}
.server-card {
	display: flex;
	flex-direction: column;
	border-radius: 0.75rem;
	overflow: hidden;
	background-color: var(--bg);
	cursor: pointer;
	position: relative;
	box-shadow: rgba(0, 0, 0, 0.24) 0rem 0.1875rem 0.5rem;
	.action-info {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		background-color: rgba(0, 0, 0, 0.7);
		transition: opacity 0.2s ease-in-out;
		display: flex;
		justify-content: center;
		align-items: center;
		color: var(--text);
		gap: 0.625rem;
		p {
			color: #fff;
		}
		span {
			color: #fff;
			font-size: 3rem;
		}
	}
	&:hover {
		.action-info {
			opacity: 1;
		}
		> .banner {
			img {
				transform: scale(1.2);
			}
		}
	}
	.banner {
		height: 8.125rem;
		overflow: hidden;
		img {
			height: 100%;
			width: 100%;
			object-fit: cover;
			transition: all 0.3s ease-in-out;
		}
	}
	.info {
		display: flex;
		align-items: center;
		gap: 0.9375rem;
		padding: 0.9375rem 1.25rem;
		.server-icon {
			width: 2.8125rem;
			border-radius: 50%;
		}
		.server-info {
			display: flex;
			flex-direction: column;
			gap: 0.5rem;
			.title {
				color: var(--text);
			}
			.description {
				color: var(--text-muted);
			}
		}
	}
}

.context-menu {
	position: absolute;
	width: 12.5rem;
	height: fit-content;
	display: flex;
	flex-direction: column;
	background-color: var(--bg-light);
	border-radius: 0.5rem;
	padding: 0.25rem;
	gap: 0.125rem;
	z-index: 10;
	opacity: 0;
	pointer-events: none;
	top: 0;
	left: 0;
	.row {
		position: relative;
		display: flex;
		align-items: center;
		padding: 0.75rem 0.875rem;
		gap: 0.75rem;
		border-radius: 0.3125rem;
		cursor: pointer;
		&:hover {
			background-color: var(--bg);
			.sub-menu {
				opacity: 1;
				pointer-events: auto;
			}
		}
		.btn {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			.left {
				display: flex;
				align-items: center;
				justify-content: space-between;
				gap: 0.75rem;
			}
		}
		span {
			font-size: 1.125rem;
		}
	}
	.row.blocked {
		cursor: not-allowed;
		&:hover {
			background-color: transparent;
		}
	}
	.row.alert {
		> p {
			color: #cc8889;
		}
		> span {
			color: #cc8889;
		}
	}
	.sub-menu {
		position: absolute;
		width: fit-content;
		height: fit-content;
		right: -12.1875rem;
		background-color: var(--bg-light);
		border-radius: 0.5rem;
		padding: 0.25rem;
		gap: 0.125rem;
		box-shadow: 0 0.3125rem 0.625rem rgba(0, 0, 0, 0.8);
		pointer-events: none;
		opacity: 0;
	}
}
dialog {
	&::backdrop {
		-webkit-backdrop-filter: blur(0.1875rem);
		backdrop-filter: blur(0.1875rem);
	}
}
.modal-background {
	position: fixed;
	display: flex;
	justify-content: center;
	align-items: center;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 999;
	animation: fadeInBackground 0.5s forwards;

	&.inactive {
		animation: fadeOutBackground 0.5s forwards;

		.modal-container {
			animation: scaleDown 0.5s forwards;
		}
	}

	.modal-container {
		border: none;
		outline: none;
		background-color: var(--bg);
		border-radius: 0.75rem;
		padding: 1.5rem;
		width: 31.25rem;
		height: fit-content;
		transition: all 0.2s ease-in-out;
		box-shadow: rgba(99, 99, 99, 0.2) 0rem 0.125rem 0.5rem 0rem;
		overflow-y: auto;
		animation: scaleUp 0.5s forwards;
		.header {
			margin-bottom: 1.5625rem;
			.top {
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				margin-bottom: 1.25rem;
				.icon {
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 0.4375rem;
					border-radius: 50%;
					background-color: var(--primary);
					color: #fff;
				}
				.icon.red {
					background-color: #cc888959;
				}
				.icon-background {
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: var(--active-text);
					border-radius: 50%;
					padding: 0.5rem;
					width: 3.375rem;
					height: 3.375rem;
				}
				.icon-background.red {
					background-color: #cc88896a;
				}
				.close {
					padding: 0.625rem;
					cursor: pointer;
				}
			}
			.description {
				color: var(--text-muted);
				margin-top: 0.5rem;
			}
		}
		.section {
			display: flex;
			flex-direction: column;
			gap: 0.625rem;
			margin-bottom: 1.5625rem;
			.title {
				padding-left: 0.125rem;
			}
			.description {
				padding-left: 0.125rem;
				font-size: 0.75rem;
			}
			input[type="text"] {
				width: 100%;
				height: 2.8125rem;
				padding: 0.625rem 0.9375rem;
				border: none;
				outline: 0.0625rem solid var(--bg);
				border-radius: 0.5rem;
				background-color: transparent;
				background-color: var(--bg-light);
				transition: outline 0.1s ease-in-out;
				font-size: 0.875rem;
				&:hover {
					outline: 0.125rem solid var(--text-muted);
				}
				&:focus {
					outline: 0.125rem solid var(--active-text);
				}
			}
			.select-container {
				position: relative;
				width: 100%;
				height: 2.8125rem;
				border-radius: 0.5rem;
				padding: 0.625rem 0.9375rem;
				background-color: var(--bg-light);
				outline: 0.0625rem solid var(--bg);
				transition: outline 0.1s ease-in-out;
				cursor: pointer;
				&:hover {
					outline: 0.125rem solid var(--text-muted);
				}
				.selected-container {
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
				.options {
					display: none;
					position: absolute;
					width: 100%;
					height: fit-content;
					row-gap: 0.125rem;
					padding: 0.1875rem;
					left: 0;
					top: 3.125rem;
					background-color: var(--bg-light);
					border-radius: 0.5rem;
					.option {
						padding: 0.75rem;
						border-radius: 0.5rem;
						cursor: pointer;
						&:hover {
							background-color: var(--bg);
						}
					}
				}
			}
		}
		.section.error {
			p {
				color: var(--red);
			}
			input[type="text"] {
				outline: 0.125rem solid var(--red);
			}
		}
		.footer {
			padding-top: 0.625rem;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.btn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 48%;
				padding: 0.625rem 1.125rem;
				border-radius: 0.5rem;
				border: 0.125rem solid var(--bg-light);
				cursor: pointer;
				transition: all 0.2s ease-in-out;
			}
			.btn.submit {
				border: none;
				background-color: var(--active-text);
			}
			.btn.submit.red {
				background-color: var(--red);
			}
			.btn.close {
				color: #cc8889;
				&:hover {
					color: white;
					background-color: #cc8889;
				}
			}
		}
	}

	.shortcuts-modal {
		width: 43.75rem;
		max-height: 80vh;
		overflow-y: auto;

		.shortcuts-content {
			margin-bottom: 1.5625rem;
		}

		.shortcuts-category {
			margin-bottom: 1.875rem;

			&:last-child {
				margin-bottom: 0;
			}

			.category-title {
				font-size: 1.125rem;
				font-weight: 600;
				color: var(--text);
				margin-bottom: 0.9375rem;
				padding-bottom: 0.5rem;
				border-bottom: 0.0625rem solid var(--bg-light);
			}

			.shortcuts-list {
				display: flex;
				flex-direction: column;
				gap: 0.75rem;
			}

			.shortcut-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0.75rem;
				background-color: var(--bg-light);
				border-radius: 0.5rem;
				transition: background-color 0.2s ease-in-out;

				&:hover {
					background-color: var(--bg);
				}

				.shortcut-key {
					font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
					font-size: 0.875rem;
					font-weight: 500;
					color: var(--active-text);
					background-color: var(--bg);
					padding: 0.375rem 0.75rem;
					border-radius: 0.375rem;
					border: 0.0625rem solid var(--text-muted);
					min-width: 6.25rem;
					text-align: center;
				}

				.shortcut-description {
					font-size: 0.875rem;
					color: var(--text);
					flex: 1;
					margin-left: 1rem;
				}
			}
		}

		.footer {
			justify-content: center;

			.btn {
				width: auto;
				min-width: 6.25rem;
			}
		}
	}
}
.alert-msg {
	position: absolute;
	color: white;
	width: 2.8125rem;
	height: 2.8125rem;
	z-index: 10;
	top: -1.25rem;
	left: 0;
	right: 0;
	margin: 0 auto;
	overflow: hidden;
	opacity: 0;
	transform: scale(0);
	transition: all 0.6s;
	border-radius: 5rem;
	background-color: var(--bg-light);
	box-shadow: rgba(99, 99, 99, 0.2) 0rem 0.125rem 0.5rem 0rem;
	backdrop-filter: blur(0.625rem);
	a {
		color: var(--text);
		text-decoration: underline;
	}
	.alert-msg--content {
		opacity: 0;
	}
	.alert-msg--words {
		font-size: 0.875rem;
		opacity: 0;
		transition: all 0.3s;
		transition-delay: 0.5s;
		white-space: nowrap;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 3.4375rem;
		height: 2.8125rem;
		color: var(--text);
	}
	.alert-msg--icon {
		display: flex;
		align-self: center;
		justify-self: center;
		height: 2.8125rem;
		width: 2.8125rem;
		object-fit: cover;
		float: left;
		border-radius: 50%;
		padding: 0.25rem;
	}
}
.alert-msg.alert-msg__active {
	position: absolute;
	opacity: 1;
	top: -3.4375rem;
	transform: scale(1);
}
.alert-msg.alert-msg__extended {
	width: 500px;
	.alert-msg--content {
		opacity: 1;
		transition: all 0.5s;
	}
	.alert-msg--words {
		opacity: 1;
	}
}
.alert-msg.error {
	background-color: var(--alert-color-red);
}
.alert-msg.success {
	background-color: var(--alert-color-green);
}
.alert-msg.info {
	background-color: var(--alert-color-yellow);
}
.effect-panel {
	position: absolute;
	bottom: 1.875rem;
	padding: 0.9375rem;
	height: 22.0625rem;
	width: 21.875rem;
	right: 0%;
	background-color: var(--bg-dark);
	opacity: 0;
	transition: all 0.3s ease-in-out;
	border-radius: 0.5rem;
	box-shadow: rgba(99, 99, 99, 0.2) 0rem 0.125rem 0.5rem 0rem;
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	pointer-events: none;
	overflow: hidden;
	&::-webkit-scrollbar {
		display: none;
	}
	.section {
		background-color: var(--bg-light);
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0.75rem;
		border-radius: 0.3125rem;
	}
	.info {
		p {
			margin-top: 0.1875rem;
			color: var(--text-muted);
		}
	}
	.options {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 0.625rem;
		.option {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			gap: 0.625rem;
			background-color: var(--bg-light);
			cursor: pointer;
			padding: 0.75rem;
			border-radius: 0.3125rem;
			transition: all 0.2s ease-in-out;
			p {
				color: var(--text-muted);
				transition: all 0.2s ease-in-out;
			}
			&:hover {
				background-color: var(--bg);
				span {
					color: var(--text);
				}
				p {
					color: var(--text);
				}
			}
		}
		.option.active {
			background-color: var(--active-text);
			span {
				color: var(--text);
			}
			p {
				color: var(--text);
			}
		}
	}
	.control {
		display: flex;
		flex-direction: column;
		gap: 0.625rem;
		.control-section {
			position: relative;
			background-color: var(--bg-light);
			padding: 0.75rem;
			border-radius: 0.3125rem;
			p {
				font-size: 1rem;
				font-weight: 700;
			}
			.position-info {
				position: absolute;
				top: 0.3125rem;
				padding: 0.3125rem 0.625rem;
				background-color: var(--bg);
				border-radius: 0.3125rem;
				left: -0.625rem;
				opacity: 0;
				transition: opacity 0.2s ease-in-out;
			}
			&:hover {
				.position-info {
					opacity: 1;
				}
			}
			.slider {
				-webkit-appearance: none;
				appearance: none;
				width: 100%;
				cursor: pointer;
				outline: none;
				border-radius: 0.9375rem;
				height: 0.3125rem;
				transition: all 0.2s ease-in-out;
				background: var(--text-muted);
				margin-top: 1.25rem;
				&::-webkit-slider-thumb {
					-webkit-appearance: none;
					appearance: none;
					height: 0.9375rem;
					width: 0.9375rem;
					background-color: var(--active-text);
					border-radius: 50%;
					border: none;
					transition: 0.2s ease-in-out;
				}
			}
		}
	}
}
.effect-panel.active {
	opacity: 1;
	transform: translateY(-1.25rem);
	pointer-events: auto;
	overflow-y: auto;
	-ms-overflow-style: none;
	scrollbar-width: none;
}
@keyframes l20-1 {
	0% {
		clip-path: polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
	}

	12.5% {
		clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%);
	}

	25% {
		clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100%);
	}

	50% {
		clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
	}

	62.5% {
		clip-path: polygon(50% 50%, 100% 0, 100% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
	}

	75% {
		clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 100%, 0% 100%);
	}

	100% {
		clip-path: polygon(50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0% 100%);
	}
}

@keyframes l20-2 {
	0% {
		transform: scaleY(1) rotate(0deg);
	}

	49.99% {
		transform: scaleY(1) rotate(135deg);
	}

	50% {
		transform: scaleY(-1) rotate(0deg);
	}

	100% {
		transform: scaleY(-1) rotate(-135deg);
	}
}

@keyframes skeleton-loading {
	0% {
		background-color: var(--loadingStart);
	}

	100% {
		background-color: var(--loadingEnd);
	}
}

@keyframes fadeInBackground {
	0% {
		background: rgba(0, 0, 0, 0);
		backdrop-filter: blur(0rem);
	}
	100% {
		background: rgba(0, 0, 0, 0.7);
		backdrop-filter: blur(0.375rem);
	}
}

@keyframes fadeOutBackground {
	0% {
		background: rgba(0, 0, 0, 0.7);
		backdrop-filter: blur(0.375rem);
	}
	100% {
		background: rgba(0, 0, 0, 0);
		backdrop-filter: blur(0rem);
	}
}

@keyframes scaleUp {
	0% {
		transform: scale(0.9) translateY(200%);
		opacity: 0;
	}
	80% {
		transform: scale(0.9) translateY(0rem);
		opacity: 1;
	}
	100% {
		transform: scale(1);
	}
}

@keyframes scaleDown {
	0% {
		transform: scale(1);
	}
	35% {
		transform: scale(0.9) translateY(0rem);
		opacity: 1;
	}
	100% {
		transform: translateY(200%);
		opacity: 0;
	}
}

@media (max-width: 768px) {
	.alert-msg.alert-msg__extended {
		width: 90vw;
	}
}
