@import "../../../../../../css/_mixins.scss";
@import "../../../../../../css/_trx_addons.vars.scss";
@import "../../../../../../css/_trx_addons.colors.scss";

:root {
	--trx-addons-base-size: 1;
	--var-trx-addons-advanced-title-highlight-animation-duration: 2000ms;
}

.trx-addons-advanced-title {
	position: relative;
	margin: 0;

	& > .sc_item_word:not(:first-child) {
		white-space-collapse: preserve-spaces;

		&:before {
			content: ' ';
			display: inline-block;
		}
	}
}

.trx-addons-advanced-title-link {
	display: block;
	@include abs-cover(10);
}

.elementor-widget-trx_elm_advanced_title {
	&.trx-addons-animate {
		.trx-addons-svg-wrapper path {
			stroke-dasharray: 1500;
			animation: highlighted-line var(--var-trx-addons-advanced-title-highlight-animation-duration) cubic-bezier(.29, 1.11, .74, 1.04) forwards;
			animation-play-state: paused;
		}
	}
	// &.elementor-element-edit-mode path {
	// 	animation-play-state: running !important
	// }
}

.trx-addons-advanced-title-item {
	display: inline;
	position: relative;

	.animation_type_sequental &,
	.animation_type_random & {
		display: inline-block;
	}
	
	&.trx-addons-advanced-title-item-nowrap,
	.sc_item_word {
		white-space: nowrap;
	}

	& + .sc_item_animated_block {
		min-width: 0.3em;
	}

	.sc_item_animated_block {
		background-clip: content-box;
		-webkit-text-fill-color: initial;
	}	

	// &:not(:last-child) {
	// 	margin-right: 0.15em;
	// }

	&.trx-addons-advanced-title-color,
	&[class*="trx-addons-advanced-title-stroke"] {
		padding-left: 0.1em;
		padding-right: 0.1em;
	}
}

.trx-addons-advanced-title-item-text {
	position: relative;
	@include transition-colors;

	&[class*="trx-addons-advanced-title-stroke"] {
		white-space: nowrap;
	}
}

.trx-addons-advanced-title-item-highlighted[class*="trx-addons-advanced-title-stroke"] .trx-addons-advanced-title-text {
	position: relative;
	z-index: 1;
}

.trx-addons-advanced-title-item-text {
	svg {
		position: absolute;
		top: auto;
		left: -3%;
		width: 106%;
		height: 100%;
		overflow: visible;
		pointer-events: none;
	}
	svg path {
		stroke-width: 9;
		fill: none;
		@include transition-properties(stroke, fill);
	}
	.trx-addons-svg-wrapper .sc_item_animated_block {
		position: absolute;
		top: 0;
		left: -3%;
		width: 106%;
		height: 100%;
		pointer-events: none;

		svg {
			left: 0;
			width: 100%;
		}
	}
	&.trx-addons-advanced-title-color {
		--trx-addons-advanced-title-color: #f00;
		background-image: -webkit-gradient(linear, left top, right top, from(var(--trx-addons-advanced-title-color)), to(var(--trx-addons-advanced-title-color)));
		background-image: -webkit-linear-gradient(left, var(--trx-addons-advanced-title-color) 0%, var(--trx-addons-advanced-title-color) 100%);
		background-image: -o-linear-gradient(left, var(--trx-addons-advanced-title-color) 0%, var(--trx-addons-advanced-title-color) 100%);
		background-image: linear-gradient(to right, var(--trx-addons-advanced-title-color) 0%, var(--trx-addons-advanced-title-color) 100%);
		background-position: 0 0;
		background-repeat: no-repeat;
		background-size: 0 100%;
	 	@include transition-property(background-size, 1s, cubic-bezier(.5,.5,0,1));

		&.trx-addons-animate-complete {
			background-size: 100% 100%;
		}
	}
}

.trx-addons-advanced-title-item-gallery {
	img:not(:first-child) {
		display: none;
	}
}

.trx-addons-advanced-title-item-icon svg,
.trx-addons-advanced-title-item-image img,
.trx-addons-advanced-title-item-gallery img,
.trx-addons-advanced-title-item-video video {
	vertical-align: middle;
	max-height: calc( 0.88em * var(--trx-addons-base-size, 1) );
	width: auto;
	@include content-box;
}
.trx-addons-advanced-title-item-image img,
.trx-addons-advanced-title-item-gallery img,
.trx-addons-advanced-title-item-video video {
	@include transition-properties(background-color, border-color);
}
.trx-addons-advanced-title-item.trx-addons-advanced-title-item-video video {
	min-height: 0;
	width: auto;	// To override the default Elementor video width = 100%
}

.trx-addons-advanced-title-item-icon svg {
	height: calc( 0.88em * var(--trx-addons-base-size, 1) );
	overflow: visible !important;
}
.trx-addons-advanced-title-item-icon .trx-addons-advanced-title-item-icon-svg {
	display: inline-block;
	vertical-align: middle;
	line-height: 0;
	overflow: hidden;
}


.trx-addons-advanced-title-item-icon i {
	vertical-align: middle;
	font-size: calc( 0.88em * var(--trx-addons-base-size, 1) );
	@include transition-colors;
}


@keyframes trx-addons-advanced-title-animate-gradient {
	0% {
		background-position: 0 0;
	}

    50% {
		background-position: 100% 0;
    }

	100% {
		background-position: 0 0;
    }
}

@keyframes highlighted-line {
	from {
		stroke-dasharray: 0 1500;
	}

	to {
		stroke-dasharray: 1500 1500;
	}
}