@import "./variables";
@import "../shared";

.facebook-preview__post {
	overflow-y: hidden;
	max-width: clamp(#{$facebook-preview-min-width}, 100%, #{$facebook-preview-max-width});
	margin-inline: auto;

	display: flex;
	flex-direction: column;

	background-color: $facebook-preview-card-background-color;
	border-radius: $facebook-preview-card-border-radius;
	box-shadow: $facebook-preview-card-box-shadow;

	font-family: $facebook-preview-font-family;

	:any-link {
		color: $facebook-blue;

		text-decoration: none;
	}
}

.facebook-preview__custom-text {
	margin: 0;
	padding: 0 1rem 1rem;

	color: $facebook-preview-text-color;

	/* stylelint-disable-next-line scales/font-sizes */
	font-size: 0.9375rem; // 15px
	line-height: 1.33;
	word-break: break-word;
}

.facebook-preview__custom-text-post-url {
	display: block;
	margin-top: 0.5rem;
}

.facebook-preview__body {
	display: flex;
	flex-direction: column;

	border-top: $facebook-preview-body-border;
	border-bottom: $facebook-preview-body-border;

	&.is-loading {
		visibility: hidden;
	}

	&.is-portrait {
		flex-direction: row;
	}
}

.facebook-preview__text {
	position: relative;

	display: flex;
	align-items: center;
	flex: 1;

	padding: 0.5rem 1rem;

	background-color: $facebook-preview-text-background-color;
	color: $facebook-preview-text-color;

	word-break: break-word;
}

.facebook-preview__text-wrapper {
	width: 100%;
}

.facebook-preview__url {
	margin-bottom: 0.25rem;

	color: $facebook-preview-light-text-color;

	/* stylelint-disable-next-line scales/font-sizes */
	font-size: 0.8125rem; // 13px
	line-height: 1;
	text-transform: uppercase;
}

.facebook-preview__title {
	margin: 0.25rem 0 0.125rem;

	/* stylelint-disable-next-line scales/font-sizes */
	font-size: 0.9444rem; // 17px
	font-weight: 600;
	line-height: 1.18;
}

.facebook-preview__description {
	color: $facebook-preview-light-text-color;

	/* stylelint-disable-next-line scales/font-sizes */
	font-size: 0.9375rem; // 15px
	line-height: 1.33;

	.facebook-preview__body.is-landscape &.is-compact {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

.facebook-preview__image,
.facebook-preview__custom-image,
.facebook-preview__media-item {
	img,
	video {
		display: block;
		object-fit: cover;
		width: 100%;
	}
}

.facebook-preview__image {
	&.is-empty {
		width: 140px;
		height: 140px;

		border-inline-end: $facebook-preview-body-border;
	}

	&.is-portrait {
		img {
			width: 278px;
			height: 430px;
		}
	}

	&.is-landscape {
		img {
			// At the moment of writing, the post card on Facebook.com goes from 508 to 680px wide
			// on desktop. In landscape mode, the image takes the full width of the card, and
			// respect the 1.91 aspect ratio at any width.
			width: 100%;
			aspect-ratio: 1.91;
		}
	}
}

.facebook-preview__custom-image,
.facebook-preview__media-item {
	display: flex;
	justify-content: center;

	width: 100%;

	background-color: $facebook-preview-image-background;

	&.is-portrait {
		img {
			width: 500px;
			height: 685px;
		}
	}

	&.is-landscape {
		img {
			width: 100%;
			aspect-ratio: 1.78;
		}
	}
}

.facebook-preview__info {
	position: absolute;
	right: 15px;
	top: -10px;

	display: flex;
	justify-content: center;
	align-items: center;

	width: 30px;
	height: 30px;

	background-color: $facebook-preview-card-background-color;
	border: $facebook-preview-body-border;
	border-radius: 50%;

	i {
		filter: invert(8%);
	}
}

.facebook-preview__window {
	margin: 0 0.75rem;

	/* stylelint-disable-next-line scales/radii */
	border-radius: 16px;
	border: $facebook-preview-body-border;

	.facebook-preview__image,
	.facebook-preview__custom-image {
		border-top-right-radius: inherit;
		border-top-left-radius: inherit;

		img {
			border-top-right-radius: inherit;
			border-top-left-radius: inherit;
		}
	}
}