@import "variables";
.page-poll {
	max-width: 600px;
	h1 {
		margin-bottom: 24px;
		font-size: 24px;
		font-weight: bold;
		color: $blue;
	}
	.poll-rating {
		margin-bottom: 32px;
		.poll-rating__heading {
			display: none;
			font-weight: bold;
			color: $red;
			margin-bottom: 8px;
		}
		.poll-rating__list {
			display: flex;
			margin: 0 -8px;
			padding: 0;
			list-style: none;
			& > li {
				padding-left: 8px;
				padding-right: 8px;
			}
		}
		.poll-rating__item {
			position: relative;
			display: block;
			&:before {
				content: '';
				position: absolute; top: 1px; right: 1px; bottom: 1px; left: 1px;
				z-index: 1;
				display: block;
				@include border-radius(50%);
				@include box-shadow(0 4px 12px rgba(0,0,0,.2));
				@include transition();
			}
			input {
				position: absolute; top: 0; left: 0;
				visibility: hidden;
				opacity: 0;
				&:checked {
					& + img {
						-webkit-filter: grayscale(0);
						filter: none;
					}
				}
			}
			img {
				position: relative;
				display: block;
				width: 40px;
				z-index: 2;
				/*filter: gray;
				-webkit-filter: grayscale(1);
				filter: grayscale(1);*/
			}
			&:hover {
				cursor: pointer;
				&:before {
					@include box-shadow(0 0 24px #ffc20e);
				}
			}
			&._highlight {
				&:before {
					@include box-shadow(0 0 24px #ffc20e);
				}
				img {
					-webkit-filter: grayscale(0);
					filter: none;
				}
			}
		}
		&.has-error {
			border: 1px solid $red;
			padding: 8px;
			.poll-rating__heading {
				display: block;
			}
		}
		&.in {
			.poll-rating__item {
				img {
					filter: gray;
					-webkit-filter: grayscale(1);
					filter: grayscale(1);
				}
				&:hover {
					img {
						-webkit-filter: grayscale(0);
						filter: none;
					}
				}
			}
		}
	}
	.poll-message {
		margin-bottom: 24px;
	}

	&._success {
		h1 {
			color: $green;
		}
	}
}