/* mod_my_marquee - แถบข้อความวิ่ง */

.my-mq {
	/* Unset by the module unless colours were picked by hand, so these read the template's tone. */
	--mq-c1: var(--my-primary, #1b5fa8);
	--mq-c2: var(--my-light, #2e80d6);
	--mq-size: 15px;
	--mq-duration: 40s;

	display: flex; align-items: stretch; gap: 0;
	border-radius: var(--my-radius-sm, 8px);
	overflow: hidden;
	min-width: 0;
}

/* ------------------------------------------------------------- label --- */
.my-mq__label {
	display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto;
	padding: 8px 16px; font-size: calc(var(--mq-size) - 1px); font-weight: 700;
	background: linear-gradient(135deg, var(--mq-c1), var(--mq-c2)); color: #fff;
	white-space: nowrap;
}
.my-mq__label i { font-size: .95em; }

/* ------------------------------------------------------------ variants -- */
.my-mq--soft { background: color-mix(in srgb, var(--mq-c1) 8%, #ffffff); }
.my-mq--soft .my-mq__viewport { color: #23324d; }

.my-mq--solid { background: var(--mq-c1); }
.my-mq--solid .my-mq__viewport { color: #fff; }
.my-mq--solid .my-mq__label { background: rgba(0, 0, 0, .18); }

.my-mq--gradient { background: linear-gradient(90deg, var(--mq-c1), var(--mq-c2)); }
.my-mq--gradient .my-mq__viewport { color: #fff; }
.my-mq--gradient .my-mq__label { background: rgba(0, 0, 0, .2); }

.my-mq--plain { background: transparent; }
.my-mq--plain .my-mq__viewport { color: #23324d; }

@supports not (color: color-mix(in srgb, red 50%, blue)) {
	.my-mq--soft { background: #eef4fb; }
}

/* ---------------------------------------------------------- viewport --- */
.my-mq__viewport {
	position: relative; flex: 1 1 auto; min-width: 0; overflow: hidden;
	display: flex; align-items: center;
	font-size: var(--mq-size); line-height: 1.6;
}

.my-mq__track {
	display: flex; align-items: center; width: max-content;
	animation: my-mq-scroll var(--mq-duration) linear infinite;
	will-change: transform;
}
.my-mq__track--ltr { animation-direction: reverse; }

@keyframes my-mq-scroll {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

.my-mq[data-pause="1"]:hover .my-mq__track,
.my-mq[data-pause="1"]:focus-within .my-mq__track { animation-play-state: paused; }

/* -------------------------------------------------------------- item --- */
.my-mq__item { display: inline-flex; align-items: center; gap: 8px; padding-block: 8px; white-space: nowrap; }
.my-mq__sep { opacity: .5; padding-inline: 14px; font-size: .6em; }
.my-mq__icon { opacity: .9; }
.my-mq__date { opacity: .75; font-size: .86em; }

.my-mq__item a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.my-mq__item a:hover,
.my-mq__item a:focus-visible { color: inherit; text-decoration: none; border-bottom-color: currentColor; }

/* Sitting in the breadcrumbs strip, the bar keeps its own spacing. */
.my-crumbs .my-mq { margin-block: 8px; }

@media (max-width: 575px) {
	.my-mq { --mq-size: 13px; }
	.my-mq__label { padding: 7px 11px; }
	.my-mq__label-text { display: none; }
	.my-mq__sep { padding-inline: 10px; }
}

@media (prefers-reduced-motion: reduce) {
	.my-mq__track { animation: none; }
	.my-mq__viewport { overflow-x: auto; }
}