:root {
	--gold: #ffbd00;
}

.content {
	.formContent {
		min-height: var(--content-height);
		display: flex;
		gap: var(--spacing);
		padding: var(--spacing);
		flex-direction: column;
		height: min-content;
		align-items: center;
		justify-content: center;

		.form {
			flex-grow: 0;
			flex-basis: min-content;

            border-radius: var(--spacing-double);
            border: 6px solid var(--color-primary);

			box-shadow: var(--color-primary) 0.1em 0.1em var(--spacing);
		}

		.form-item--system {
			display: none;
		}

		&>* {
			width: clamp(50vw, 300px, 100%);
		}
	}



	.card {
		background-color: var(--color-background-offset);
	}

}

.form {
	.form-item__input {
		&.form-item__input--rating {
			display: flex;
			padding: 0;
			justify-content: center;
            width: 100%;
		}
	}
}

.ctrlRating {
	width: 10px;
	height: 10px;
	display: inline-block;

	&::after {
		content: '';
		display: inline-block;
		cursor: pointer;

		width: 10px;
		height: 10px;
	}
}

.dialog__instructions {
	text-align: center;
}

.rating-container {
	display: flex;
	flex-direction: row-reverse;
	justify-content: center;
	align-items: center;

	.star {
font-size: 2rem;
        color: var(--color-primary);
        cursor: pointer;
        display: inline-block;
        transition: color 0.2s;
        background-color: transparent;
		&.active {
			color: var(--gold);
			text-shadow: 2px 2px 2px rgb(255 255 255 / 100%);
		}
	}

	.star:hover,
	.star:hover~.star {
		color: var(--gold);
	}
}