$primary-color: map-get($foundation-palette, primary);
.photo-uploader {
	width: 100%;
	i {
		color: $dark-gray;
	}
}

.photo-container {
	// border: 1px solid $light-gray;
	// box-shadow: 0 1px 3px 0 rgba($primary-color, 0.1);
	background: rgba($light-gray, 0.4);
	flex: 1;
	// display: flex;
	position: relative;
	overflow: hidden;
	&.collage {
		.photo-container {
			display: flex;
			box-shadow: none;
			.photo {
				width: 50%;
				padding-top: 50%;
			}
		}
	}
	&.circle {
		border-radius: 50%;
		overflow: hidden;
		.photo {
			border-radius: inherit;
			img {
				// border-radius:
				// overflow: hidden;
			}
		}
		border: $global-border-secondary;
	}
	.overlay {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		border-radius: inherit;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	&.loading {
		.overlay {
			background: rgba($white, 0.5);
			font-size: 1rem;
		}
	}
}

.multi-photos-container {
	display: flex;
	justify-content: center;
	padding: 0.5rem 0;
	> * {
		margin: 0 0.5rem;
		width: 20%;
	}
}

.photo {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	padding-top: 67%;
	width: 100%;
	transition: background .25s ease-in-out;
	position: relative;

	border-radius: inherit;
	overflow: hidden;
	.background {
		display: inline-block;
		border-radius: inherit;
		position: absolute;
		background-size: inherit;
		background-repeat: inherit;
		background-position: center center;
		transition: opacity .25s ease-in;
		width: 100%;
		height: 100%;
		z-index: 0;
		opacity: 0;
		top: 0;
		left: 0;
		&.loaded {
			opacity: 1;
		}
	}
	.content {
		position: relative;
		z-index: 1;

	}
	img {
		border-radius: inherit;
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		object-fit: cover;
		&.small {
			opacity: 1;
			// filter: blur(50px);
  				/* this is needed so Safari keeps sharp edges */
  			transform: scale(1);
		}
		&.main {
			opacity: 0;
			transition: opacity .25s ease-in;
			&.loaded {
				opacity: 1;
			}
		}
	}
	&.square {
		padding-top: 100%;		
		transition: none;		
	}
	&.circle {
		padding-top: 100%;		
	}
	&.thumbnail {
		margin: 0;
		display: block;
		border: 2px solid $white;
		&.mini {
			width: 50%;
			padding-top: 50%
		}		
	}
	&.cover {
		display: block;
		@include breakpoint(medium) {
			display: block;
			height: 100%;
			padding-top: flex-video($flexvideo-ratio-widescreen);
		}
		// padding: 0;
		// min-height: 20rem;
	}

	&.contain {
		background-size: contain;

		img {
			object-fit: contain;
		}
	}

	&.header {
		img {
			display: none;
		}
		padding: 0;
		background-position: top center;
		&.center {
			background-position: center center;
		}
	}

	&.full {
		@include breakpoint(medium) {
			padding: 0;
			flex: 1;
		}
	}

	&.video-thumbnail {
		padding-top: flex-video($flexvideo-ratio);
		&.widescreen {
			padding-top: flex-video($flexvideo-ratio-widescreen);
		}
	}
}

/// Photo uploader element 
label .photo-container {
	cursor: pointer;
	background: $white;
	border: $global-border;

	.overlay {
		transition: opacity .25s ease-in-out, 
		background .25s ease-in-out;
		justify-content: flex-start;
		align-items: flex-start;
		.content {
			padding: 0.5rem 1rem;
			background: rgba($white, 0.5);
			border-radius: $global-radius;
		}
		&:hover {
			background: rgba($white, 0.2);
		}
	}

	&.edit, &.loading {
		.overlay {
			opacity: 1;
			.content {
				font-size: 1.5rem;
			}
		}
	}

	&.circle {
		max-width: 10rem;
		.overlay {
			justify-content: center;
		}
	}
}

