@mixin multiLineEllipsis($lineHeight: 1.2em, $lineCount: 1, $bgColor: #fff) {
	overflow: hidden;
	position: relative;
	line-height: $lineHeight;
	max-height: $lineHeight * $lineCount;
	text-align: justify;
	margin-right: -1em;
	padding-right: 1em;
	&:before {
		content: '..."';
		position: absolute;
		right: 1em;
		bottom: 0;
		z-index: 1;
	}
	&:after {
		content: '';
		position: absolute;
		right: 1em;
		bottom: 0;
		width: 1.125rem;
		height: $lineHeight;
		background: $bgColor;
	}
}

.casted-quote-content {
	display: flex;
	flex-direction: column;
	padding: 1.25rem 1.25rem 1rem;

	.casted-quote-title {
		max-width: 400px;
		margin: 0 0 0.5rem;
		overflow: hidden;
		white-space: pre;
		text-overflow: ellipsis;
		font-size: 1rem;
		line-height: 1.3125rem;
		font-weight: normal;
		color: $color-gray-3;
		letter-spacing: 0;
	}

	.casted-quote-text {
		font-size: 0.875rem;
		letter-spacing: 0;
		line-height: 1.4375rem;

		&.casted-quote-trim {
			@include multiLineEllipsis(
				$lineHeight: 1.4375rem,
				$lineCount: 3,
				$bgColor: #fff
			);
		}
	}
}

.casted-quote-options {
	display: flex;
	justify-content: flex-end;
	width: 100%;
	padding: 0 1.25rem;
}