@import "theme";

.rating-modal
{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	pointer-events: none;
}

.rating-modal.mouse
{
	pointer-events: all;
}

.backdrop
{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: rgba( 22, 20, 30, 0.55 );
}

.card
{
	flex-direction: column;
	align-items: center;
	background-color: $pill-dark-solid;
	border: 2px solid $pill-inner;
	border-radius: $pill-radius;
	padding: 32px 44px;
	backdrop-filter: blur( 35px );
	box-shadow: 0px 24px 56px rgba( 0, 0, 0, 0.45 );

	&:intro
	{
		transform: translateY( 24px ) scale( 0.96 );
		opacity: 0;
	}

	transition: transform 0.15s ease-out, opacity 0.15s ease-out;
}

.eyebrow
{
	font-family: $display-font;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: $accent-yellow;
}

.question
{
	font-family: $header-font;
	font-size: 26px;
	font-weight: 800;
	color: $text-bright;
	margin-top: 8px;
	margin-bottom: 22px;
}

.stars
{
	flex-direction: row;
	gap: 8px;
}

.star
{
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: transform 0.1s ease-out;

	i
	{
		font-size: 48px;
		color: rgba( 255, 255, 255, 0.25 );
	}

	&.on i
	{
		color: $accent-yellow;
	}

	&:hover
	{
		transform: translateY( -2px );
	}

	&:active
	{
		transform: translateY( 2px );
	}
}

.dismiss
{
	font-family: $display-font;
	font-size: 13px;
	font-weight: 700;
	color: $hud-text-muted;
	margin-top: 22px;
	cursor: pointer;
	transition: color 0.1s ease-out;

	&:hover
	{
		color: $text-bright;
	}
}