@import "./bootstrap_variations";

// Avatar Icon
.avatar {
	&.small {
		$square: 1.5rem;

		width: $square;
		height: $square;

		img {
			min-width: $square;
			min-height: $square;
			max-width: $square;
			max-height: $square;
			object-fit: contain;
		}
	}

	&.large {
		$square: 10rem;

		width: $square;
		height: $square;

		img {
			min-width: $square;
			min-height: $square;
			max-width: $square;
			max-height: $square;
			object-fit: contain;
		}

		.image-overlay {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 50%;
			right: 0;
			min-width: $square;
			min-height: $square;
			max-width: $square;
			max-height: $square;
			margin-left: -5rem;
			opacity: 0;
			transition: 0.3s ease;
			background-color: #3a3a3a;

			.icon {
				color: white;
				font-size: 1rem;
				text-align: center;
				position: absolute;
				top: 50%;
				left: 50%;
				-webkit-transform: translate(-50%, -50%);
				-ms-transform: translate(-50%, -50%);
				transform: translate(-50%, -50%);
			}
		}

		:hover .image-overlay {
			opacity: 0.5;
			cursor: pointer;
		}
	}
}

// Appearance & Branding Image Containers
.image-container {
	$size: 6rem;
	background-color: $gray-200;

	img {
		min-width: calc(#{$size * 1.8});
		min-height: $size;
		max-width: calc(#{$size * 1.8});
		max-height: $size;
		object-fit: contain;
	}
}
