.form.control {
	appearance: none;
	outline: none;
    display: block;
    width: 100%;
    padding: 0.5rem;
    color: white;
    background-color: rgba(0, 0, 0, 0.2);
	border: 1px solid transparent;
    border-radius: 4px;
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.1);
	font-size: 1rem;

	&::placeholder {
		color: rgba(255, 255, 255, 0.7);
	}

	&:hover {
		background-color: rgba(0, 0, 0, 0.3);
	}

	&:focus {
		background-color: rgba(0, 0, 0, 0.5);
		border-color: rgba(0, 0, 0, 0.8);
	}

	&.error {
		background-color: rgba(255, 43, 43, 0.2);

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

		&:focus {
			background-color: rgba(255, 43, 43, 0.3);
			border-color: rgba(255, 43, 43, 0.8);
		}
	}
}

.form.group {
	margin-bottom: 1rem;

	& > label {
		display: block;
		margin-bottom: 0.5rem;
	}

	& > .form.control:not(:last-child) {
		margin-bottom: 0.5rem;
	}
}

.character-select > .radio-block {
	display: inline-block;
	background-color: rgba(0, 0, 0, 0.2);
	border-radius: 0.15rem;

	&:not(:last-child) {
		margin-bottom: 0.25rem;
	}

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

	& > label {
		display: flex;
		align-items: center;
		width: 100%;
		border-radius: 0.15rem;
		cursor: pointer;
		transition: color, background-color, border-color, background-image 0.2s ease;
		padding: 0.5rem;
		border: 1px solid transparent;
		background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0));

		&:hover {
			background-color: rgba(0, 0, 0, 0.3);
			color: white;
		}

		& > .badge {
			margin-left: 0.25rem;
		}

		& > span.selected {
			display: none;
			margin-left: 1rem;
			color: #a6e3a1;
		}
	}

	&.active > label {
		background-color: #444c55;
		color: #ffffff;
		background-image: linear-gradient(rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.1));
		border: 1px solid;
		border-color: #3D444C #2F353B #2C3137;
		box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset;

		& > span.selected {
			display: inline-block;
		}
	}

	/* When the radio button is checked, change the background color of the label */
	& > input[type="radio"]:checked + label {
		background-color: #f4cc67;
		background-image: linear-gradient(rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.1));
		box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset;
		color: #111111;
		border: 1px solid;
		border-color: #C59F43 #AA8326 #957321;
	}

	/* When the radio button is disabled, show a normal cursor */
	& > input[type="radio"]:disabled + label {
		cursor: default;
	}
}

/* If there is no character selected, hide the buttons */
.character-select:not(:has(input[type="radio"]:checked)) > .buttons {
	display: none;
}