.nelio-content-social-message-twitter-preview {
	background: #fff;
	border: 1px solid;
	border-color: #e5e6e9 #dfe0e4 #d0d1d5;
	border-radius: 8px;
	cursor: default;
	font-family:
		TwitterChirp,
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Roboto,
		Helvetica,
		Arial,
		sans-serif;
	margin: 1em 1.5em;
	padding: 10px 20px;
	user-select: none;

	.nelio-content-social-profile-icon {
		float: left;
		font-size: 42px;
		margin-right: 10px;
	}

	&__name-info {
		height: 42px;
	}

	&__display-name {
		font-size: 16px;
		font-weight: 700;
		line-height: 1.25;
		margin-top: 3px;
		padding-top: 2px;
	}

	&__username,
	&__date {
		color: #536471;
	}

	&__image {
		border-radius: 16px;
		height: 200px;
		object-fit: cover;
		overflow: hidden;
		width: 100%;

		&--left {
			border-top-right-radius: 0;
			border-bottom-right-radius: 0;
		}

		&--right {
			border-top-left-radius: 0;
			border-bottom-left-radius: 0;
		}

		&--top-left {
			border-top-right-radius: 0;
			border-bottom-left-radius: 0;
			border-bottom-right-radius: 0;
		}

		&--top-right {
			border-top-left-radius: 0;
			border-bottom-left-radius: 0;
			border-bottom-right-radius: 0;
		}

		&--bottom-left {
			border-top-right-radius: 0;
			border-top-left-radius: 0;
			border-bottom-right-radius: 0;
		}

		&--bottom-right {
			border-top-right-radius: 0;
			border-top-left-radius: 0;
			border-bottom-left-radius: 0;
		}
	}

	&__media-item {
		height: 100%;
		object-fit: cover;
		width: 100%;
	}

	&__media-pair {
		display: flex;
		flex-direction: row;
		gap: 2px;

		&--vertical {
			flex-direction: column;
			width: 100%;
			gap: 2px;

			> .nelio-content-social-message-twitter-preview__media-item {
				max-height: 99px;
			}

			img {
				height: 99px;
			}
		}
	}

	&__media-group {
		display: flex;
		flex-direction: row;
		gap: 2px;

		&--vertical {
			flex-direction: column;

			.nelio-content-social-message-twitter-preview__media-pair {
				max-height: 100px;
			}

			.nelio-content-social-message-twitter-preview__image {
				height: 100px;
			}
		}

		> .nelio-content-social-message-twitter-preview__media-item {
			width: 100%;
			height: 200px;
		}
	}
}

/* MESSAGE */

.nelio-content-social-message-twitter-preview
	.nelio-content-computed-text-preview {
	cursor: auto;
	font-size: 18px;
	font-weight: 400;
	letter-spacing: 0.01em;
	line-height: 22px;
	margin: 10px 0;
	user-select: auto;
	word-break: break-word;
	overflow-wrap: break-word;

	&--empty {
		opacity: 0.6;
	}

	&__link,
	&__mention,
	&__hash {
		color: #2ca9e1;
	}
}

/* SHARED POST */

.nelio-content-twitter-shared-link-with-image {
	border: 1px solid #e1e8ed;
	border-radius: 16px;
	overflow: hidden;
	position: relative;
	line-height: 0;

	&__image {
		height: 160px;
		object-fit: cover;
		overflow: hidden;
		width: 100%;
	}

	&__title-container {
		color: #fff;
		text-overflow: ellipsis;
		font-weight: 400;
		padding: 0;
		left: 12px;
		position: absolute;
		right: 12px;
		bottom: 12px;
		display: flex;
	}

	&__title {
		color: #fff;
		border-radius: 4px;
		padding-left: 4px;
		padding-right: 4px;
		text-overflow: ellipsis;
		font-size: 13px;
		line-height: 1.6;
		height: 20px;
		background-color: rgba(0, 0, 0, 0.77);
		overflow-x: hidden;
		white-space: nowrap;
	}

	&__domain {
		margin-bottom: 1em;
		color: #536471;
		font-size: 13px;
	}
}

.nelio-content-twitter-shared-link {
	border: 1px solid #e1e8ed;
	border-radius: 16px;
	overflow: hidden;
	display: flex;
	margin-bottom: 16px;

	&__logo {
		align-items: center;
		justify-content: center;
		background-color: rgb(247, 249, 249);
		box-sizing: border-box;
		display: flex;
		flex-basis: auto;
		flex-direction: column;
		flex-shrink: 0;
		list-style: none;
		margin: 0;
		min-height: 0;
		min-width: 0;
		width: calc(130px);
		border-right-width: 1px;
		border-color: rgb(207, 217, 222);
		border-right-style: solid;
		padding: 0;
		position: relative;
		text-decoration: none;
		z-index: 0;

		svg {
			height: 2em;
			fill: currentcolor;
			color: rgba(83, 100, 113, 1);
		}
	}

	&__content {
		display: flex;
		gap: 2px;
		padding: 12px;
		flex-shrink: 1;
		justify-content: center;
		flex-grow: 1;
		flex-direction: column;
		box-sizing: border-box;
	}

	&__title {
		color: rgb(15, 20, 25);
		font-size: 15px;
		font-weight: 400;
	}

	&__domain {
		font-weight: 400;
		color: #536471;
		font-size: 15px;
	}

	&__excerpt {
		font-weight: 400;
		font-size: 15px;
		color: #536471;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		line-clamp: 2;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
}