/**
 * Text Stroke Line Frontend Styles
 *
 * @package Templines_Image_Text_Stroke
 * @since 1.0.0
 */

/* ================================
   Main Container
   ================================ */
.tits-stroke-line-wrapper {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.tits-stroke-line-container {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
}

/* ================================
   Line Wrapper
   ================================ */
.tits-stroke-line-wrap {
	position: relative;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	white-space: nowrap;
	overflow: hidden;
	will-change: transform;
}

/* Auto scroll animation */
.tits-stroke-line-wrapper[data-animation-type="auto"] .tits-stroke-line-wrap {
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

/* Direction left */
.tits-stroke-line-wrapper[data-animation-type="auto"] .tits-stroke-line-wrap[data-direction="left"] {
	animation-name: tits-scroll-left;
}

/* Direction right */
.tits-stroke-line-wrapper[data-animation-type="auto"] .tits-stroke-line-wrap[data-direction="right"] {
	animation-name: tits-scroll-right;
}

/* Pause on hover */
.tits-stroke-line-wrapper[data-pause-on-hover="true"] .tits-stroke-line-wrap:hover {
	animation-play-state: paused;
}

/* ================================
   Text Elements
   ================================ */
.tits-stroke-line-title {
	display: inline-block;
	margin: 0;
	padding: 0;
	line-height: 1;
	white-space: nowrap;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

/* Bordered/Stroke Text */
.tits-stroke-line-title.tits-bordered {
	color: transparent !important;
	-webkit-text-fill-color: transparent !important;
	-webkit-text-stroke-width: 2px;
	-webkit-text-stroke-color: #ffffff;
}

/* ================================
   Decorations
   ================================ */
.tits-stroke-line-decor {
	display: inline-block;
	width: 100px;
	height: 2px;
	background-color: #ffffff;
	margin: 0 30px;
	flex-shrink: 0;
}

/* Icon decorations */
.tits-stroke-line-decor.tits-icon-decor {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: auto;
	background-color: transparent;
	font-size: 1em;
	line-height: 1;
}

.tits-stroke-line-decor.tits-icon-decor i,
.tits-stroke-line-decor.tits-icon-decor svg {
	width: 1em;
	height: 1em;
}

/* ================================
   Animations
   ================================ */
@keyframes tits-scroll-left {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}

@keyframes tits-scroll-right {
	0% {
		transform: translateX(-50%);
	}
	100% {
		transform: translateX(0);
	}
}

/* ================================
   Accessibility
   ================================ */
@media (prefers-reduced-motion: reduce) {
	.tits-stroke-line-wrap {
		animation: none !important;
		transform: none !important;
	}
}

/* ================================
   Responsive Adjustments
   ================================ */
@media (max-width: 768px) {
	.tits-stroke-line-title {
		font-size: 80%;
	}
	
	.tits-stroke-line-decor {
		width: 50px;
		margin: 0 15px;
	}
}

@media (max-width: 480px) {
	.tits-stroke-line-title {
		font-size: 60%;
	}
	
	.tits-stroke-line-decor {
		width: 30px;
		margin: 0 10px;
	}
	
	.tits-stroke-line-title.tits-bordered {
		-webkit-text-stroke-width: 1px;
	}
}