/**
 * This mixin is for truncating text. By now, this can only be done by container height.
 * Because this is actually realy messed up in native CSS, you have to specify the line-height
 * and container height manualy in Stylues. CSS-Variables can unfortunately not be used in this case.
 */
RV-Truncation--fade(background-color=white)
	+RV-Block__Modifier--name('fade')
		
		+RV-Element('Content')
			&:last-child:after
				background-image linear-gradient(180deg, rgba(255, 255, 255, 0), background-color)
				display block
				content '###'
				color transparent
				opacity 1
				position absolute
				top calc(var(--height) - 40px)
				width 100%
				height calc(1.5 * var(--line-height))
				z-index 10

RV-Truncation--ellipsis(background-color=white)
	+RV-Block__Modifier--name('ellipsis')
		
		+RV-Element('Cutter')
			&:after
				position absolute
				display block
				right 0
				content '...'
				background-color background-color
				padding-left 5px
				padding-bottom 10px
				box-shadow -10px 8px 6px 0px background-color;
				line-height --line-height
				top calc(var(--height) - 38px)
			
		+RV-Element('Content')
			&:after
				display block
				background-color background-color
				content ''
				position relative
				right 0
				height --height
				width 100%
				bottom -100%
				z-index 30
				
RV-Truncation(line-height=1.3em, height=100%, background-color=white)
	RV-CSSParameter({
		line-height: line-height,
		height: height,
		background-color: background-color
	})
	
	display grid
	align-content flex-start
	height --height
	grid-template-rows repeat(auto-fill, --line-height)

	height calc_height(--height)
	width calc_width()
	
	position relative
	
	*
		overflow hidden
		grid-row 1/-1
		background --background-color
		line-height --line-height
		z-index -10
		
+RV-Block('RV-Truncation')
	RV-Truncation()
	
	+RV-Block__Modifier()
		RV-Truncation--fade(--background-color)
	
	+RV-Block__Modifier()
		RV-Truncation--ellipsis(--background-color)