/* Styles for both the editor and the frontend view. */

$font:
	"SF Pro Text",
	-apple-system,
	BlinkMacSystemFont,
	"Segoe UI",
	Roboto,
	Oxygen-Sans,
	Ubuntu,
	Cantarell,
	"Helvetica Neue",
	sans-serif;

$color-white: #fff;
$color-black: #101517;
$color-lighter-gray: #f4f4f4;
$color-light-gray: #d8dbdd;
$color-gray: #50575e;

@mixin text-truncate($lines: 1) {
	display: -webkit-box;
	-webkit-line-clamp: $lines;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

.gravatar-text-truncate-1-line {
	@include text-truncate(1);
}

.gravatar-text-truncate-2-lines {
	@include text-truncate(2);
}

.gravatar-text-truncate-3-lines {
	@include text-truncate(3);
}

div.wp-block-gravatar-block.gravatar-block {
	position: relative;
	font-size: 14px;
	line-height: 1.5;
	padding: 24px;
	border: 1px solid $color-light-gray;
	border-radius: 4px;
	box-sizing: border-box;
	background-color: $color-white;
	min-width: 400px;

	&,
	h4,
	p {
		font-family: $font;
		color: $color-black;
	}

	h4,
	p {
		margin: 0;
		padding: 0;
	}

	a {
		text-decoration: none;
		box-shadow: none; /* Override themes' default styles. */
	}

	img {
		box-shadow: none; /* Override themes' default styles. */
	}

	.gravatar-block-group {
		&.gravatar-block-group--comma-separated .gravatar-block-paragraph {
			display: flex;

			&:not(:first-of-type)::before {
				content: " · ";
				white-space: pre;
			}

			.gravatar-block-paragraph__text {
				@include text-truncate(1);
			}
		}
	}

	.gravatar-block-image {
		display: flex; /* Fix the extra bottom padding issue. */

		&.gravatar-block-image--avatar .gravatar-block-image__image {
			max-width: 72px; /* Override themes' default styles. */
			border-radius: 50%;
			background-color: $color-lighter-gray;
		}
	}

	.gravatar-block-name {
		word-break: break-word;

		.gravatar-block-name__text {
			font-size: 18px;
			line-height: normal;
			font-weight: 700;
		}
	}

	.gravatar-block-paragraph {
		word-break: break-word;

		&.gravatar-block-paragraph--job .gravatar-block-paragraph__text,
		&.gravatar-block-paragraph--company .gravatar-block-paragraph__text,
		&.gravatar-block-paragraph--location .gravatar-block-paragraph__text {
			color: $color-gray;
		}
	}

	.gravatar-block-link {
		color: $color-gray;

		&.gravatar-block-link--align-right {
			margin-left: auto;
		}
	}

	.gravatar-block__status {
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: center;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba($color-white, 0.75);
		padding: 10px;
		border-radius: inherit;
		box-sizing: inherit;
		z-index: 1000;
	}

	&.gravatar-block--custom-text-color {
		h4,
		p,
		.gravatar-block-paragraph--job .gravatar-block-paragraph__text,
		.gravatar-block-paragraph--company .gravatar-block-paragraph__text,
		.gravatar-block-paragraph--location .gravatar-block-paragraph__text,
		.gravatar-block-link {
			color: unset;
		}
	}

	&.gravatar-block--child-block-unclickable .gravatar-block__child {
		pointer-events: none;
	}
}

div.wp-block-gravatar-block.gravatar-block--portrait {
	max-width: 434px !important; /* Use `!important` to override themes' default styles. */
	min-width: 300px;
	padding: 40px;

	.gravatar-block-image.gravatar-block-image--avatar {
		margin-bottom: 24px !important; /* Use `!important` to override themes' default styles. */

		.gravatar-block-image__image {
			max-width: 100%; /* Override themes' default styles. */
			height: auto;
			border-radius: 0;
			aspect-ratio: 1 / 1;
		}
	}

	.gravatar-block-name .gravatar-block-name__text {
		font-size: 32px;
	}

	.gravatar-block-paragraph {
		&.gravatar-block-paragraph--job,
		&.gravatar-block-paragraph--location {
			font-size: 14px;
		}

		&.gravatar-block-paragraph--description {
			font-size: 18px;
		}
	}

	.gravatar-block-paragraph--job + .gravatar-block-paragraph--location {
		margin-top: -16px;
	}
}
