/* TSF — Video Duotone */

.tsf-vd {
	--tsf-vd-contrast: 1;
	--tsf-vd-brightness: 1;
	--tsf-vd-filter: none;

	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
}

/* Takes no space and must never be caught by a layout rule looking for svg. */
.tsf-vd__defs {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
	pointer-events: none;
}

.tsf-vd__media {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/*
	 * Order is the point: contrast and brightness reshape the greys BEFORE the duotone
	 * maps them onto the ramp. Put the url() first and the adjustments would act on the
	 * two brand colours instead of on the footage.
	 */
	filter:
		contrast( var( --tsf-vd-contrast ) )
		brightness( var( --tsf-vd-brightness ) )
		var( --tsf-vd-filter );
}

/* Editor placeholder only. */
.tsf-vd--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 180px;
	background: rgba( 0, 0, 0, .05 );
	color: #555;
	font-size: 14px;
}