/*
 * CSS values in this file are specific and
 * designed to match the CSS on Twitter. Therefore there
 * will be exceptions to our CSS guidelines here
 * but please do not "update" this file to conform.
 *
 * @blame: pento
 */

@import "../variables";

.twitter-preview {
	padding: 20px;
}

.twitter-preview__wrapper {
	background-color: #fff;
	max-width: clamp(200px, 100%, 635px);
	margin-inline: auto;
	padding-top: 1rem;
	border-radius: 4px;
	padding-inline-end: 1rem;
}

.twitter-preview__section.social-preview__section {
	width: clamp(200px, 100%, 635px);

	// To compensate for the padding for profile picture in twitter threads
	.social-preview__section-heading,
	.social-preview__section-desc {
		padding-inline-start: 17px;
	}
}

.twitter-preview__container {
	display: grid;
	grid-template-columns: 65px auto;
	margin-bottom: 5px;
	font-size: $tweet-font-size;
	line-height: 20px;

	.twitter-preview__sidebar {
		display: grid;
		grid-template-rows: 35px auto;
		justify-items: center;

		.twitter-preview__profile-image {
			display: flex;
			align-items: center;
			max-width: 30px;
			max-height: 30px;
			border-radius: 50%;
			overflow: hidden;

			img {
				object-fit: cover;
				width: 100%;
			}
		}

		.twitter-preview__connector {
			width: 2px;
			background-color: #8c8f94;
		}
	}

	.twitter-preview__main {
		padding-bottom: 1rem;
		overflow: hidden;
	}

	.twitter-preview__header {
		display: flex;
		gap: 0.25rem;
		font-size: 16px;
		line-height: 18px;
		margin-bottom: 2px;
	}

	.twitter-preview__name {
		font-weight: 700;
	}

	.twitter-preview__screen-name,
	.twitter-preview__date {
		color: #667886;
		letter-spacing: -0.3px;
	}

	.twitter-preview__content {

		.twitter-preview__text {
			color: rgb(15, 20, 25);
			white-space: pre-wrap;
			word-break: break-word;
		}

		.twitter-preview__media {
			border-radius: 15px; /* stylelint-disable-line scales/radii */
			overflow: hidden;
			display: grid;
			grid-gap: 2px;
			grid-template-areas: "a";
			height: 300px;
			margin-top: 12px;

			img,
			video {
				width: 100%;
				height: 100%;
				object-fit: cover;

				&:nth-child(1) {
					grid-area: a;
				}
				&:nth-child(2) {
					grid-area: b;
				}
				&:nth-child(3) {
					grid-area: c;
				}
				&:nth-child(4) {
					grid-area: d;
				}
			}

			&.twitter-preview__media-children-2 {
				grid-template-areas: "a b";
			}

			&.twitter-preview__media-children-3 {
				grid-template-areas:
					"a b"
					"a c";
			}

			&.twitter-preview__media-children-4 {
				grid-template-areas:
					"a b"
					"c d";
			}
		}

		.twitter-preview__quote-tweet {
			margin-top: 10px;
			min-height: 200px;

			.twitter-preview__quote-tweet-overlay {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				opacity: 0;
			}
		}

		.twitter-preview__card {
			margin-top: 12px;
			margin-bottom: 12px;
			overflow: hidden;
			border: 1px solid #e1e8ed;
			border-radius: 12px; /* stylelint-disable-line scales/radii */

			.twitter-preview__card-summary {
				display: grid;

				&.twitter-preview__card-has-image {
					height: 125px;
					display: grid;
					grid-template-columns: 125px auto;

					.twitter-preview__card-body {
						border-left: 1px solid #e1e8ed;
						height: 100%;
					}

					.twitter-preview__card-description {
						-webkit-line-clamp: 3;
					}
				}
			}

			.twitter-preview__card-summary_large_image {
				display: grid;
				grid-template-rows: 254px auto;
			}

			.twitter-preview__card-image {
				width: 100%;
				height: 100%;
				object-fit: cover;
				aspect-ratio: 16/9;
			}

			.twitter-preview__card-body {
				padding: 0.75em;
				text-decoration: none;
				font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
				color: var(--studio-black);
				text-align: left;
				overflow: hidden;
				display: flex;
				flex-direction: column;
				gap: 2px;
			}

			.twitter-preview__card-title {
				max-height: 1.3em;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.twitter-preview__card-description {
				max-height: 3.9em;
				text-overflow: ellipsis;
				color: rgb(83, 100, 113);
				//clamp after three lines
				display: -webkit-box;
				-webkit-line-clamp: 3;
				-webkit-box-orient: vertical;
				overflow: hidden;
			}

			.twitter-preview__card-url {
				text-transform: lowercase;
				color: #8899a6;
				white-space: nowrap;
				overflow-inline: hidden;
				text-overflow: ellipsis;
			}
		}
	}

	.twitter-preview__footer {
		display: flex;
		justify-content: space-between;
		max-width: 425px;
		margin-top: 12px;

		svg {
			fill: #787c82;
			height: 16px;
			width: 16px;
		}
	}
}