$bg-color: #010810d0;
$bg-color-hover: #0f0fff03;

AdminMenu {
	position: absolute;
	top: 128px;
	right: 12px;
	height: 52px;
	width: 70px;
	padding: 8px;
	background-color: $bg-color;
	transition:
		height 200ms 0s,
		width 200ms 0ms;
	flex-direction: column;
	font-weight: bold;
	border-radius: 16px;
	border-color: #fff1;
	border-width: 1px;
	overflow: hidden;

	div {
		.title {
			margin-right: 4px;
		}

		&.wideload {
			gap: 16px;

			* {
				flex-grow: 1;
			}
		}

		&.options {
			transition: opacity 100ms 0ms;
			opacity: 0;
			flex-direction: column;
			gap: 12px;
			span {
				height: 48px;
			}
		}
	}

	label {
		font-family: Poppins;
		white-space: nowrap;

		&.title,
		&#menutext {
			font-size: 25px;
			color: #fff7;
		}

		&#menutext {
			opacity: 0;
			transition: opacity 100ms 0;
		}

		&.spacer {
			font-size: 25px;
			color: #fff7;
			text-align: center;
		}
	}

	button {
		background-color: $bg-color;
		color: #ffff;
		padding: 8px 16px;
		border-radius: 8px;
		border-color: #fff1;
		border-width: 1px;
		font-size: 16px;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;

		&:hover {
			background-color: $bg-color-hover;
		}
	}

	.checkbox {
		display: flex;
		align-items: center;
		cursor: pointer;
		padding: 8px 16px;
		border-radius: 8px;
		border: 1px solid #fff1;
		background-color: $bg-color;
		color: #ffff;
		font-size: 16px;

		&:hover {
			background-color: $bg-color-hover;
		}

		.checkpanel {
			flex-shrink: 0;
			width: 15px;
			height: 15px;
			border: 1px solid rgba(103, 100, 88, 255);
			border-radius: 3px;
			margin-right: 8px;
			display: flex;
			align-items: center;
			justify-content: center;

			.checklabel {
				font-size: 12px;
				color: transparent;
				font-weight: bold;
			}
		}

		.label {
			font-size: 16px;
			display: flex;
			align-items: center;
		}

		&.checked {
			.label {
				color: #c4b550;
			}

			.checkpanel {
				.checklabel {
					color: white;
				}
			}
		}

		&:active {
			transform: scale(0.98);
		}
	}

	&.unfolded {
		pointer-events: all;
		width: 512px;
		height: 600px;

		#menutext {
			opacity: 1;
		}

		.options {
			opacity: 1;
		}
	}
}