// ==========================================================================
// Thumbnail Selector Styles
// ==========================================================================
.#{$selector} {
	.ipt_fsqm_container_thumbselect {
		.ipt_uif_question_content {
			text-align: center;
			@media screen and ( min-width: $screen-md-min ) {
				text-align: left;
			}
		}
		.ipt_uif_question_centered {
			text-align: center;
			.ipt_uif_question_content {
				text-align: center;
			}
		}
	}
	.ipt_uif_question .ipt_uif_thumbselect_wrap {
		float: none;
		display: inline-block;
		width: auto;

		> label {
			display: inline-block;

			.thumbselect-img-wrapper {
				margin: 0 auto;
				max-width: 100%;
			}

			img {
				opacity: 0.9;
				@include material__smooth-tran( 200ms, all );
				max-width: 100%;
			}
			&:hover {
				img {
					opacity: 1;
				}
			}
		}
		> input:checked + label {
			img {
				opacity: 1;
			}
		}
		.ui-widget-content {
			display: block;
		}
		.ui-widget-header {
			display: block;
			background-color: transparent;
			color: $secondary-text-color;
			border-top: 1px solid $divider-color;
			border-bottom: 1px solid $divider-color;
			text-align: center;
			margin: 12px auto 0;
			padding: 12px 0;
		}

		&.ipt-eform-thumbselect {
			&-border {
				input[type="checkbox"],
				input[type="radio"] {

					+ label {
						padding-left: 0;
						&::before,
						&::after {
							display: none;
						}

						img {
							opacity: 0.75;
							border: 4px solid $disabled-color;
							border-radius: 2px;
						}

						&:hover {
							img {
								opacity: 1;
							}
						}
					}

					&:checked {
						+ label {
							img {
								opacity: 1;
								border-color: $primary-color;
							}
						}
					}
				}
			}
			&-color {
				input[type="checkbox"],
				input[type="radio"] {

					+ label {
						padding-left: 0;
						&::before,
						&::after {
							display: none;
						}

						img {
							opacity: 0.75;
							-webkit-filter: grayscale( 100% ); /* Safari 6.0 - 9.0 */
							filter: grayscale( 100% );
						}

						&:hover {
							img {
								opacity: 0.9;
								filter: grayscale( 0% );
							}
						}
					}

					&:checked {
						+ label {
							img {
								opacity: 1;
								filter: grayscale( 0% );
								box-shadow: 0 0 2px fade-out( $box-shadow-color, 0.2 );
							}
						}
					}
				}
			}
		}
	}
}