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

:root {
	--trx-addons-base-size: 1;
}

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

.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 2s 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-block;
	position: relative;

	&:not(:last-child) {
		margin-right: 0.15em;
	}
	&[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;
}

.trx-addons-advanced-title-item-highlighted .trx-addons-advanced-title-text {
	position: relative;
	z-index: 1;
}

.trx-addons-advanced-title-item-text svg {
	position: absolute;
	top: auto;
	left: 50%;
	width: 106%;
	height: 100%;
	transform: translate(-50%);
	overflow: visible;
}

.trx-addons-advanced-title-item-text svg path {
	stroke-width: 9;
	fill: none;
	@include transition-properties(stroke, fill);
}

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

.trx-addons-advanced-title-item-icon svg,
.trx-addons-advanced-title-item-image img {
	vertical-align: middle;
	max-height: calc( 0.88em * var(--trx-addons-base-size, 1) );
	width: auto;
	margin-bottom: .2em;
}

.trx-addons-advanced-title-item-image img {
	@include content-box;
	@include transition-properties(background-color, border-color);
}

.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 highlighted-line {
	from {
		stroke-dasharray: 0 1500;
	}

	to {
		stroke-dasharray: 1500 1500;
	}
}