// ==========================================================================
// 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;
				}
			}
		}

		.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;
			transition: color 200ms ease-in-out, border-color 200ms ease-in-out;
		}

		&:hover {
			.ui-widget-header {
				color: $primary-text-color;
				border-color: darken($divider-color, 10%);
			}
		}

		> input:checked + label {
			img {
				opacity: 1;
			}
			.ui-widget-header {
				color: $primary-color;
				border-color: $primary-color;
			}
		}

		&.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;
								-webkit-filter: grayscale(0%);
								        filter: grayscale(0%);
							}
						}
					}

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