.my-account-profile {
	 position: relative;

	 .avatar {
		  position: relative;
		  border-radius: 50%;
		  width: 108px;
		  margin: 0 auto;

		  img {
				width: 100%;
		  }
	 }

	 .my-avatar {
		  position: relative;
	 }

	 .btn-toggle-avatar-upload-menu {
		  color: #fff;
		  font-size: 16px;
		  line-height: 1;
		  position: absolute;
		  bottom: 0;
		  right: 0;
		  z-index: 1;
		  width: 32px;
		  height: 32px;
		  background: #000;
		  border-radius: 50%;

		  &:hover {
				box-shadow: 0 0 0 .2rem $heading-color;
		  }

		  i {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
		  }

		  &.updating-icon {
				&:before {
					 margin: 0;
				}

				i {
					 display: none;
				}
		  }
	 }
}

.minimog-user-profile {
	 .tm_user_avatar {
		  display: none;
	 }

	 &.active {
		  .minimog-user-profile__action {
				z-index: 20;
				opacity: 1;
		  }
	 }
}

.minimog-user-profile__action {
	 position: absolute;
	 top: 100%;
	 left: 50%;
	 width: 124px;
	 background-color: #fff;
	 box-shadow: 0 0 24px rgba(0, 0, 0, .1);
	 border-radius: 10px;
	 overflow: hidden;
	 z-index: -1;
	 opacity: 0;
	 transform: translateX(-50%);

	 a {
		  display: flex;
		  align-items: center;
		  padding: 7px 16px;
		  line-height: 26px;
		  color: $text-color;

		  &:hover,
		  &:focus {
				background-color: #f5f5f5;
				color: $heading-color;
		  }
	 }

	 .action-icon {
		  text-align: center;
		  font-size: 14px;
		  min-width: 20px;
		  display: block;
		  line-height: 1;
		  margin: 0 4px 0 0;
	 }
}
