/**
 * 滚动文字组件样式 - 修复版
 * 版本: 1.0.1
 * 修复：鼠标悬停暂停功能，移除按钮样式，修复wrapperClass功能
 */

/* 基础容器样式 */
.marquee-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    background-color: #f8f9fa;
    padding: 10px;
}

/* 内容容器 */
.marquee-content {
	display: inline-block;
	white-space: nowrap;
	position: relative;
	padding-left: 100%;
	/* 默认文字样式 - 可通过自定义CSS类覆盖 */
	color: #2c3e50;
	font-size: 18px;
	/* 动画 */
	animation: marquee-scroll linear infinite;
	animation-play-state: running;
}

/* 必须的渐变遮罩 */
.marquee-mask-left,
.marquee-mask-right {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    z-index: 2;
    pointer-events: none;
}

.marquee-mask-left {
    left: 0;
    background: linear-gradient(to right, rgba(248, 249, 250, 0.9), transparent);
}

.marquee-mask-right {
    right: 0;
    background: linear-gradient(to left, rgba(248, 249, 250, 0.9), transparent);
}

/* 当容器有自定义背景色时，遮罩颜色需要适配 */
.marquee-wrapper[data-has-custom-bg="true"] .marquee-mask-left,
.marquee-wrapper[data-has-custom-bg="true"] .marquee-mask-right {
    background: linear-gradient(to right, var(--marquee-bg-color, rgba(248, 249, 250, 0.9)), transparent);
}

.marquee-wrapper[data-has-custom-bg="true"] .marquee-mask-right {
    background: linear-gradient(to left, var(--marquee-bg-color, rgba(248, 249, 250, 0.9)), transparent);
}

/* 滚动动画 */
@keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

/* 悬停暂停效果 - 修复版本 */
.marquee-wrapper[data-pause-on-hover="true"]:hover .marquee-content {
    animation-play-state: paused !important;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .marquee-mask-left,
    .marquee-mask-right {
        width: 40px;
    }
}
@media (hover: none) and (pointer: coarse) {
	.marquee-wrapper[data-pause-on-hover="true"]:active .marquee-content {
		animation-play-state: paused !important;
	}
}

.zi.marquee-wrapper {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.zi .marquee-content {
	color: white;
	font-size: 20px;
	font-weight: bold;
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}