@at-root #{$namespace} {

	@if luiTheme(element, field, image-picker, enabled) {
		@if lui_input_style_enabled("material") {
			$selector: lui_input_get_style_selector("material");
			$vars: luiTheme(element, field, image-picker);

			#{$prefix}.input#{$selector} luid-image-picker,
			luid-image-picker#{$selector} {
				position: relative;
				.luid-image-picker-picture {
					background-position: map-gets($vars, background-position);
					background-repeat: map-gets($vars, background-repeat);
					background-size: map-gets($vars, background-size);
					overflow: hidden;
				}

				.luid-image-picker-popup.lui.popover {
					top: 50% !important;
					left: 50% !important;
					transform: translate(-50%, -40%) scale(1) !important;
				}

				.input-overlay {
					background-color: map-gets($vars, overlay, bg-color);
					position: absolute;
					bottom: 0;
					right: 0;
					left: auto;
					width: 2em;
					height: 2em;
					opacity: .4;
					transition: all .15s ease-out;
					transform-origin: bottom right;
					&.hide-editable {
						opacity: 0;
					}

					> .overlay-content {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						transform: translate(0, 0);
						transition: all .15s ease-out;
						> i {
							line-height: 2em;
							margin-top: 0;
							display: block;
						}
						> span {
							text-align: center;
							display: none;
							padding: map-gets($vars, overlay, padding);
							padding-top: 0;
						}
					}

				}

				.upload-overlay .loader{
					font-size: map-gets($vars, material, loader-size);
				}

				&:hover {
					.input-overlay, .input-overlay.hide-editable {
						width: 100%;
						height: 100%;
						bottom: 0;
						right: 0;
						opacity: .8;
						> .overlay-content {
							top: 50%;
							left: 50%;
							transform: translate(-50%, -50%);
							> i {
								font-size: 1.8em;
							}
							> span {
								display: block;
							}
						}
					}
				}
			}

			// In a field
			// ====
			#{$prefix}.field {
				#{$prefix}.input#{$selector} luid-image-picker,
				luid-image-picker#{$selector} {
					height: map-gets($vars, size) !important;
				}

				#{$prefix}.input#{$selector} luid-image-picker + label,
				luid-image-picker#{$selector} + label {
					@extend %lui_input_label_displaced;
				}
			}
		}
	}
}