// style for ../../templates/qommon/forms/widgets/*evaluation.html
.template-evaluation label.star-choice,
div.star-choice {
	span.star {
		&::before {
			position: static;
			height: auto;
			width: auto;
			border: none;
			font-family: FontAwesome;
			content: "\f006";  // star-o
			color: #776;
			font-size: 22px;
			display: inline-block;
			transition: transform ease 0.2s;
		}
		&.selected::before, &:hover::before {
			content: "\f005"; // star
			color: #ffaa00;
		}
	}
	input[type=radio]:hover + span.star::before,
	input[type=radio]:focus + span.star::before,
	span.star:hover::before {
		transform: scale(1.4);
		opacity: 0.8;
	}
}

.RadiobuttonsWidget.template-evaluation {
	br {
		display: none;
	}
	input {
		@extend .sr-only;
	}
	input:focus + span.star {
		@if $widget-focus-outline == none {
			outline: $widget-border;
			@if extract-color($widget-border) == transparent {
				outline-color: #444;
			}
			outline-style: dotted;
		} @else {
			outline: $widget-focus-outline;
			outline-offset: $widget-focus-outline-offset;
		}

	}
	input + span::after {
		// cancel custom radio rendering
		display: none;
	}
	label {
		margin-right: 0;
	}
	input + span {
		padding-left: 0;
	}
	.star-label {
		@extend .sr-only;
	}
}
