/* Avatar */

.avatar-uploader-wrapper {
	width: 100%;
	margin: 0;

	&.user-settings-wrapper {
		.avatar-image-wrapper {
			.change-profile-photo {
				height: 100%;
			}
		}
	}

	.avatar-image-wrapper {
		position: relative;
		display: block;
		cursor: pointer;
		border-radius: 50%;
		max-width: 100%;

		@include mobile {
			margin: 0 auto;
		}

		&:before, &:after {
			border-radius: 50%;
		}

		&:hover .change-profile-photo {
			opacity: 1;
		}

		&.uploading {
			&:before {
				content: "";
				width: 100%;
				height: 100%;
				background: rgb(0 0 0 / 80%);
				border-radius: 50%;
				position: absolute;
				top: 0;
				left: 0;
				opacity: 1;
				z-index: 9;
			}
			&:after {
				content: "";
				width: 100%;
				height: 100%;
				background: url('../images/loader/loader-green.svg') no-repeat;
				position: absolute;
				top: 0;
				left: 0;
				background-position: center center;
				z-index: 10;
			}
		}

		img {
			border-radius: 50%;
			max-width: 100%;
			height: auto;
		}

		.change-profile-photo {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 10;
			width: 100%;
			height: 95%;
			background: rgba(0, 0, 0, 0.7);
			display: block;
			opacity: 0;
			cursor: pointer;
			transition: all 0.5s ease;
			-moz-transition: all 0.5s ease;
			-webkit-transition: all 0.5s ease;
			-o-transition: all 0.5s ease;
			border-radius: 50%;

			&:hover {
				opacity: 1;
			}

			i {
				display: block;
				font-size: 30px;
				margin-left: auto;
				margin-right: auto;
				margin: 0;
				width: auto;
				position: relative;
				top: 50%;
				-webkit-transform: translateY(-50%);
				-ms-transform: translateY(-50%);
				transform: translateY(-50%);
				color: $whiteColor;
				opacity: .5;
			}
		}
	}
}