/**
 * Slim Brand Ticker frontend styles.
 *
 * @package Brand_Ticker
 */

.brand-ticker {
	--bt-speed: 40s;
	--bt-gap: 48px;
	--bt-logo-height: 40px;
	--bt-row-gap: 24px;
	--bt-section-padding: 40px;
	--bt-fade-width: 80px;
	--bt-background: #f5f5f5;
	--bt-scroll: 0px;
	--bt-default-opacity: 0.65;
	--bt-default-grayscale: 100%;
	--bt-hover-opacity: 1;
	--bt-hover-grayscale: 0%;
	--bt-hover-scale: 1;
	--bt-effect-duration: 200ms;

	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: var(--bt-row-gap);
	width: 100%;
	padding: var(--bt-section-padding) 0;
	background-color: var(--bt-background);
}

.brand-ticker *,
.brand-ticker *::before,
.brand-ticker *::after {
	box-sizing: inherit;
}

.brand-ticker > p:empty {
	display: none;
	margin: 0;
	padding: 0;
}

.brand-ticker__row {
	width: 100%;
}

.brand-ticker__viewport {
	overflow: hidden;
	width: 100%;

	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 var(--bt-fade-width),
		#000 calc(100% - var(--bt-fade-width)),
		transparent 100%
	);

	mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 var(--bt-fade-width),
		#000 calc(100% - var(--bt-fade-width)),
		transparent 100%
	);
}

.brand-ticker__track {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	width: max-content;
	backface-visibility: hidden;
	will-change: transform;
}

.brand-ticker__track--left.brand-ticker__track--ready {
	animation: brand-ticker-scroll-left var(--bt-duration, var(--bt-speed)) linear infinite;
}

.brand-ticker__track--right.brand-ticker__track--ready {
	animation: brand-ticker-scroll-right var(--bt-duration, var(--bt-speed)) linear infinite;
}

.brand-ticker__group {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: var(--bt-gap);
	padding-right: var(--bt-gap);
}

.brand-ticker__item {
	display: flex;
	flex-shrink: 0;
	flex-grow: 0;
	align-items: center;
	justify-content: center;
}

.brand-ticker__link {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
	text-decoration: none;
}

.brand-ticker__logo {
	display: block;
	width: auto;
	max-width: none;
	height: var(--bt-logo-height);
	opacity: var(--bt-default-opacity);
	filter: grayscale(var(--bt-default-grayscale));
	transform: scale(1);
	transition:
		opacity var(--bt-effect-duration) ease,
		filter var(--bt-effect-duration) ease,
		transform var(--bt-effect-duration) ease;
}

.brand-ticker__link:hover .brand-ticker__logo,
.brand-ticker__link:focus-visible .brand-ticker__logo,
.brand-ticker__item:hover .brand-ticker__logo {
	opacity: var(--bt-hover-opacity);
	filter: grayscale(var(--bt-hover-grayscale));
	transform: scale(var(--bt-hover-scale));
}

@keyframes brand-ticker-scroll-left {
	from {
		transform: translate3d(0, 0, 0);
	}

	to {
		transform: translate3d(calc(-1 * var(--bt-scroll)), 0, 0);
	}
}

@keyframes brand-ticker-scroll-right {
	from {
		transform: translate3d(calc(-1 * var(--bt-scroll)), 0, 0);
	}

	to {
		transform: translate3d(0, 0, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.brand-ticker__track {
		animation: none;
		transform: none;
	}
}

@media (max-width: 782px) {
	.brand-ticker {
		padding: calc(var(--bt-section-padding) * 0.7) 0;
	}
}