/* TSF — Dynamic Shape (ported from graviteit-widgets/assets/arrow-buttons.css) */

.tsf-ds {
	display: block;
	/* A definite inline size, so aspect-ratio can derive the height when the width
	   control is left empty. The widget's own Elementor selectors override it. */
	width: 100%;

	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;

	/* Set per instance from the file's viewBox: a mask carries no intrinsic size, so
	   without it a non-square shape would be squashed into a square box. */
	aspect-ratio: var( --tsf-ds-ratio, 1 );
}

/* Editor placeholder only. */
.tsf-ds--empty {
	background: rgba( 128, 128, 128, .2 ) !important;
	-webkit-mask-image: none !important;
	mask-image: none !important;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 80px;
	color: #999;
	font-size: 14px;
}