// ==========================================================================
// Smiley Rating Styles
// ==========================================================================
.#{$selector} {
	.ipt_uif_rating_smiley {
		// Rating elements
		.ipt_uif_smiley_rating_inner {
			@media screen and ( max-width: $screen-md-max ) {
				text-align: center;
			}
			label {
				display: inline-block;
				will-change: transform;
				height: 48px;
				width: 56px;
				color: $radio-empty-color;
				&:after,
				&:before {
					font-family: 'ipt-icomoon';
					font-style: normal;
					font-variant: normal;
					font-weight: normal;
					-webkit-font-smoothing: antialiased;
					border: 0 none;
					content: "\e0fe";
					font-size: 48px;
					line-height: 48px;
					background-color: transparent;
					display: block;
					height: 48px;
					width: 48px;
					will-change: opacity;
					opacity: 1;
					color: inherit;
					@include material__smooth-tran( 200ms, opacity );
				}
				&:after {
					opacity: 0;
					content: "\e0ff";
					transform: none;

				}
				// Hover status
				&:hover {
					transform: scale( 1.4 );
					&:before {
						opacity: 0;
					}
					&:after {
						opacity: 1;
					}
				}
			}
			// Checked status
			input:checked + label {
				color: $radio-fill-color;
				&:before {
					opacity: 0;
				}
				&:after {
					opacity: 1;
				}
			}
			// Different icons
			.ipt_uif_smiley_rating_radio_sad + label {
				&:before {
					content: "\e0f6";
				}
				&:after {
					content: "\e0f7";
				}
			}
			.ipt_uif_smiley_rating_radio_neutral + label {
				&:before {
					content: "\e106";
				}
				&:after {
					content: "\e107";
				}
			}
			.ipt_uif_smiley_rating_radio_happy + label {
				&:before {
					content: "\e0f2";
				}
				&:after {
					content: "\e0f3";
				}
			}
			.ipt_uif_smiley_rating_radio_excited + label {
				&:before {
					content: "\e0f0";
				}
				&:after {
					content: "\e0f1";
				}
			}
		}
		// Feedback element
		.ipt_uif_smiley_rating_feedback_wrap {
			will-change: opacity;
			visibility: hidden;
			height: 0;
			opacity: 0;
			@include material__smooth-tran( 500ms, opacity );
			> .input-field {
				display: none;
			}
		}
		&.ipt_uif_smiley_feedback_active {
			.ipt_uif_smiley_rating_feedback_wrap {
				visibility: visible;
				height: auto;
				opacity: 1;
				padding-top: 28px;
				> .input-field {
					display: block;
				}
			}
		}
	}
}