.settings-dialog {
	background-color: hsl(0 0 15);

	display: flex;
	flex-direction: row;
	gap: 0;
	align-items: stretch;
	padding: 1.5em;
	border-radius: 1em;

	& > .settings-menu {
		display: flex;
		flex-direction: column;
		background-color: hsl(0 0 0);
		border-radius: 0.5em 0 0 0.5em;
		border: 3px solid hsl(0 0 0);
		border-right-width: 0;
		overflow: hidden;

		& button {
			border-radius: 0;
			border-radius: 0.5em 0 0 0.5em;
			background-color: hsl(0 0 0);
			padding: 0.5em;
			color: hsl(0 0 80);

			&.active {
				background-color: hsl(0 0 15);
				color: hsl(0 0 100);
			}

			&:hover {background-color: hsl(0 0 15);}
		}
	}

	& > .settings-content {

		border: 3px solid hsl(0 0 0);
		border-left-width: 0;
		border-radius: 0 0.5em 0.5em 0;

		padding: 1em;

		&  form{
		    display: flex;
		    flex-direction: column;
		    gap: 1em;
		    min-width: 400px;
		    min-height: 300px;

		    &:not(.active) {display: none;}
		}
    }
}