@use "../shared/style" as *;

// Avatar loader
.avatar.avatar-loading,
.user-verified-services .gravatar-profile__loading,
.gravatar-hovercard__avatar.avatar-loading {
	animation: gravatar-pulse 2s infinite ease-in-out;
}

.user-gravatar-card .description,
.gravatar-hovercard-container {
	margin-bottom: 10px;
}

.gravatar-profile:not(.gravatar-profile__hidden) {
	display: flex;
	margin-top: 10px;
	align-items: center;
	gap: 10px;
}

// Hovercard differences
.avatar.avatar-loading .gravatar-hovercard {
	.gravatar-hovercard__inner {
		width: 500px;
		box-shadow: inherit;
		border-color: #8d8f94;
	}

	.gravatar-hovercard__personal-info-link,
	.gravatar-hovercard__avatar-link {
		cursor: text;
	}

	.gravatar-hovercard__social-links,
	.gravatar-hovercard__profile-link {
		display: none;
	}

	&.gravatar-hovercard--editable {
		.gravatar-hovercard__personal-info-link,
		.gravatar-hovercard__avatar-link {
			cursor: pointer;
		}

		.gravatar-hovercard__social-links,
		.gravatar-hovercard__profile-link {
			display: inherit;
		}
	}
}

// Account
.gravatar-account {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;

	> div {
		display: flex;
		align-items: center;
		gap: 10px;
	}
}

// Flash all the things on a hovercard when loading
.gravatar-profile__loading {
	.gravatar-hovercard__avatar {
		animation: pulse 2s infinite ease-in-out;
	}

	.gravatar-hovercard__name {
		width: 200px;
		height: 30px;
		@include pulsate();
	}

	.gravatar-hovercard__description {
		color: #999;
		width: 100%;
		height: 30px;
		@include pulsate();
	}

	.gravatar-hovercard__social-links {
		width: 100px;
		height: 30px;
		@include pulsate();
	}
}

.user-verified-services {
	.gravatar-profile__loading {
		width: 36px;
		height: 36px;
		@include pulsate();
	}

	.gravatar-hovercard__social-link {
		text-decoration: none;
		display: inline-flex;
	}
}

.gravatar-profile__hidden {
	display: none !important;
}

// Quick Editor
.user-profile-picture {
	img {
		cursor: pointer;
	}
}

#profile-page #gravatar-profile-sync__description {
	h4 {
		margin: 5px 0;
	}

	p {
		margin-bottom: 10px;
	}
}
