.gravatar-hovercard {
	// Ensure our styles take precedence over the default styles
	background: var( --studio-white );
	border-radius: 4px;

	.gravatar-hovercard__inner {
		box-shadow:
			0 6px 10px 0 rgba( 42, 57, 75, 0.07 ),
			0 1.809px 24.118px 0 rgba( 42, 57, 75, 0.05 ),
			0 0.751px 10.017px 0 rgba( 42, 57, 75, 0.04 ),
			0 0.272px 3.623px 0 rgba( 42, 57, 75, 0.02 );
		.gravatar-hovercard__header {
			.gravatar-hovercard__name {
				color: var( --color-text );
			}
			.gravatar-hovercard__description {
				color: var( --color-text );
				margin-bottom: 4px;
			}
		}
		.gravatar-hovercard__primary-blog-card {
			background: var( --color-main-background );
			border: 1px solid var( --color-border-subtle );
			border-radius: 8px;
			padding: 12px;
			margin-top: 12px;

			.gravatar-hovercard__primary-blog-card-header {
				align-items: center;
				display: flex;
				gap: 8px;
				margin-bottom: 12px;
			}

			.gravatar-hovercard__primary-blog-card-site-icon.reader-avatar {
				display: inline-block;
				max-height: unset;
				position: relative;

				.site-icon {
					border-radius: 4px;
				}

				img {
					border-radius: 4px;
					height: 36px;
					width: 36px;
				}
			}

			.gravatar-hovercard__primary-blog-card-site-info {
				align-items: flex-start;
				display: flex;
				flex-direction: column;
				flex-grow: 1;
				gap: 2px;
				min-width: 0; // Enable text truncation
				position: relative;
				top: -2px;
			}

			.gravatar-hovercard__primary-blog-card-site-title {
				font-size: 14px;
				font-weight: 500;
				letter-spacing: -0.154px;
				line-height: 1.3;
				margin: 0;
				color: var( --color-text );
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				line-clamp: 1;
				-webkit-box-orient: vertical;
			}

			.gravatar-hovercard__primary-blog-card-username {
				font-size: 12px;
				line-height: 1.4;
				color: var( --color-text-subtle );
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.gravatar-hovercard__primary-blog-card-description {
				font-size: 13px;
				line-height: 1.4;
				margin: 0 0 16px;
				color: var( --color-text );
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				line-clamp: 2;
				-webkit-box-orient: vertical;
			}

			.gravatar-hovercard__primary-blog-card-follow-button {
				width: 100%;
				justify-content: center;

				&.is-following {
					border-color: var( --color-accent );
					.follow-button__label {
						color: var( --color-accent );
					}
					svg path {
						fill: var( --color-accent );
					}
					&:hover svg path {
						fill: var( --color-text );
					}
				}
			}
		}

		.gravatar-hovercard__recommended-blogs {
			width: 100%;
			max-width: 100%;

			.gravatar-hovercard__recommended-blogs-header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 8px 0;
			}

			.gravatar-hovercard__recommended-blogs-title {
				color: var( --color-text-subtle );
				font-weight: 400;
			}

			.gravatar-hovercard__recommended-blogs-view-all {
				color: var( --color-accent );
			}

			.gravatar-hovercard__recommended-blog-item {
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 10px;
				padding: 8px 0;
			}

			.gravatar-hovercard__recommended-blog-site-icon.reader-avatar {
				max-height: unset;
				.site-icon {
					border-radius: 50%;
					border: 1px solid var( --color-border-subtle );
					height: 30px;
					width: 30px;

					img {
						object-fit: cover;
						/* !rtl:ignore */
						object-position: left center;
					}
				}
			}

			.gravatar-hovercard__recommended-blog-site-info {
				flex: 1 1 0%;
				overflow: hidden;

				.gravatar-hovercard__recommended-blog-site-name {
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}
	}
}
