@use "~admin-stylesheets/colors";

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

	&__header {
		margin-bottom: 1em;
	}

	&__name-info {
		height: 42px;
	}

	&__app {
		display: flex;
		flex-direction: row;
		gap: 1em;
	}

	&__app-logo {
		width: 3em;
		height: 3em;
		flex-shrink: 0;
		fill: colors.$components-colors__logo--is-dark;
	}

	&__app-info {
		display: flex;
		flex-direction: row;
		gap: 5px;
	}

	&__app-name {
		font-weight: 600;
		font-size: 15px;
		color: #1d1c1d;
	}

	&__app-tag {
		color: #573c3b;
		background-color: #e2e2e2;
		font-size: 0.9em;
		border-radius: 5px;
		padding: 0 3px;
	}

	&__message-text {
		margin-bottom: 1em;
	}

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

	&__date {
		color: #42566c;
		font-size: 0.9em;
	}

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

/* MESSAGE */

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

	&--empty {
		opacity: 0.6;
	}

	&__link,
	&__mention,
	&__hash {
		color: #1264a3;
	}
}

.nelio-content-slack-shared-image {
	overflow: hidden;
	margin-bottom: 1em;
	max-width: 300px;
	height: 200px;

	&__image {
		border-radius: 8px;
		object-fit: cover;
		overflow: hidden;
		max-width: 300px;
		height: 200px;
	}
}

/* SHARED POST */

.nelio-content-slack-shared-link {
	border-left: 4px solid #e1e8ed;
	margin-bottom: 1em;
	padding: 0 1em;
	overflow: hidden;

	&__image {
		object-fit: cover;
		overflow: hidden;
		border-radius: 8px;
		height: 101px;
		width: 180px;
	}

	&__title {
		margin-bottom: 0.7em;
		padding: 0;
		font-weight: 600;
		font-size: 15px;
		color: #1264a3;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		line-clamp: 2;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	&__excerpt {
		font-weight: 500;
		font-size: 13px;
		margin-bottom: 0.7em;
		margin-top: -0.2em;
	}
}