: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);
			border: 1px solid var(--color-primary);
		}

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



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

}

.form-item__input--rating {
	display: flex;
}

.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-background);
		cursor: pointer;
		display: inline-block;
		transition: color 0.2s;
		&.active {
			color: var(--gold);
		}
	}

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