@at-root #{$namespace} {

	@if luiTheme(element, field, image-picker, enabled) {
		$vars: luiTheme(element, field, image-picker);

		luid-image-picker {
			display: inline-block;
			width: 100%;
			height: 100%;
			cursor: pointer;

			> div { height: 100%; }

			.luid-image-picker-picture {
				background-color: map-gets($vars, default-background-color); // Pick a neutral grey color for white transparent images
				text-align: center;
				position: relative;
				width: 100%;
				height: 100%;
				border-image-width: 0;

				.input-overlay,
				.upload-overlay {
					position: absolute;
					left: 0;
					bottom: 0;
					right: 0;
					overflow: hidden;
					opacity: map-gets($vars, overlay, opacity);
					color: map-gets($vars, overlay, color);
					transition: map-gets($vars, overlay, transition);
				}

				.upload-overlay {
					height: 0;
					background-color: map-gets($vars, overlay, bg-color);
				}

				.input-overlay {
					font-size: lui_rem(1);
					text-align: center;
					> span {
						position: absolute;
						left: 0; right: 0;
					}
					.cross {
						position: absolute;
						top: 0;
						right: 0;
						cursor: pointer;
					}
				}

				input[type="file"] {
					vertical-align: top;
					font-size: 0;
					height: 100%;
					width: 100%;
					opacity: 0;
					text-indent: -100%;
					pointer-events: none;
				}

				.lui.loader.inverted {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}
			}
			&[disabled="disabled"], .image-picker.is-disabled {
				color: red;
				cursor: default;
				.input-overlay, input {
					display: none !important;
				}
			}

			.lui.image-picker.uploading .luid-image-picker-picture {
				> .input-overlay { display: none; }
				> .upload-overlay { height: 100%; }
			}
			&.round {
				.luid-image-picker-picture {
					border-radius: 50%;
				}
			}
		}

		.luid-image-picker-popup.lui.popover {
			height: auto;
			.popover-inner {
				padding: 0;
				margin-top: 0 !important;
				background: map-gets($vars, popover, bg-color);
				color: luiTheme(element, typography, body, color);
				.image-picker-menu {
					@extend %lui_unstyled_list;
					@include lui_raised(2);

					li {
						padding: .5em 1em;
						cursor: pointer;
						transition: all .15s ease-out;
						& + li {
							border-top: 1px solid grey;
						}

						&:hover {
							background: map-gets($vars, popover, hover-color);
						}
					}
				}
			}
		}
		.luid-cropper {
			background: map-gets($vars, cropper, bg-color);
			overflow: hidden;
			height: map-gets($vars, cropper, height);

			// copy pasted from the bower component
			> ui-cropper {
				width: 100%;
				height: 100%;
				display: block;
				position: relative;
				overflow: hidden;
				canvas {
					display: block;
					position: absolute;
					top: 50%;
					left: 50%;
					outline: none;
					-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
				}
				.loading {
					width: 100%;
					height: 100%;
					font-size: 16px;
					font-weight: bold;
					display: flex;
					display: -webkit-flex;
					align-items: center;
					-webkit-align-items: center;
					justify-content: center;
					-webkit-justify-content: center;
					color: white;
					background-color: rgba(0, 0, 0, 0.75);
					position: absolute;
				}
			}
		}

		// In a field
		// ====
		#{$prefix}.field {
			luid-image-picker {
				margin-top: 0.5em;
				width: map-gets($vars, size) !important;

				border-bottom: luiTheme(element, field, field, focus-border-width) solid transparent;
				margin-bottom: -#{luiTheme(element, field, field, focus-border-width)};

				&.ng-touched.ng-invalid {
					border-bottom-color: luiTheme(element, field, invalid-color);
				}
			}

			// 4:3 ratio
			&.landscape luid-image-picker {
				width: 4 * (map-gets($vars, size) / 3);
				height: map-gets($vars, size);
			}
			&.portrait luid-image-picker {
				width: 3 * (map-gets($vars, size) / 4);
				height: map-gets($vars, size);
			}

			// Supports sizing
			@each $name, $sizeEms in map-gets($luiTheme, references, sizes) {
				&.#{$name} > luid-image-picker {
					font-size: $sizeEms;
				}
			}
		}
	}
}