strona-czynna/src/back/jdd-components/autoscrolling-images/autoscrolling-images.css

/* stylelint-disable no-descending-specificity */
.autoscrolling-images {
	display: grid;
	grid-template-columns: subgrid;
	grid-column: screen;
	justify-content: center;
	--gap-between-horizontal-images: 14px;
}

.autoscrolling-images-wrapper {
	display: grid;
	width: 100%;
	grid-template-columns: subgrid;
	grid-column: screen;
	row-gap: 16px;
}

.autoscrolling-images__img-wrapper {
	width: 288px;
	height: 150px;
	display: flex;
	align-items: center;
	justify-content: space-around;
}

.autoscrolling-images--mode-white .autoscrolling-images__img-wrapper {
	background-color: white;
}

.autoscrolling-images__carousel-container {
	position: relative;
	grid-column: main-column;

	picture,
	img {
		max-height: 150px;
		max-width: 288px;
	}
}

.autoscrolling-images__arrow img {
	max-width: 30px;
}

.autoscrolling-images--mode-white-square .autoscrolling-images__img-wrapper,
.autoscrolling-images--mode-white .autoscrolling-images__img-wrapper {
	img {
		background: white; /* to get rid of weird artifacts on FF */
	}
}

.autoscrolling-images--mode-white-square .autoscrolling-images__img-wrapper {
	background-color: white;
	padding: 16px;
	height: unset;
	width: 160px;
	min-width: 0px;
	aspect-ratio: 1/1;
}

.autoscrolling-images__title-wrapper {
	display: grid;
	width: 100%;
	grid-column: content;
	grid-template-columns: 1fr 100px;
	column-gap: 16px;

	.autoscrolling-images__title {
		font-family: var(--font-headings);
		font-size: 32px;
		color: var(--color-brand-text-accent);
		margin: 0;
		text-align: left;
		flex-basis: 200px;
	}

	.autoscrolling-images__arrow-carousel-container {
		.autoscrolling-images__arrow-carousel {
			display: grid;
			height: 100%;
			grid-template-rows: 1fr;
			grid-template-columns: 1fr;

			.autoscrolling-images__arrow-container {
				display: none; /* to be overwritten in CSS within the generated HTML */
				grid-row: 1/2;
				grid-column: 1/2;
				justify-content: space-between;
			}
		}
	}
}

.autoscrolling-images__arrow-carousel {
	transition: none !important;
	width: 100%;
	display: flex;
	flex-flow: row nowrap;
}

.autoscrolling-images__arrow-container {
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-wrap: wrap;
	scroll-snap-align: start;
	flex: 1 0 100%;
}

.autoscrolling-images__arrow:hover {
	cursor: pointer;
}

.autoscrolling-images__img-arrow-left {
	transform: rotate(180deg);
}

.autoscrolling-images__imgs-carousel {
	overflow-x: clip;
}

.autoscrolling-images__carousel {
	width: 100%;
	display: flex;
	flex-flow: row nowrap;
	transition: transform 200ms;
}

.autoscrolling-images__carousel-page {
	align-items: center;
	scroll-snap-align: start;
	box-sizing: border-box;

	flex: 1 0 100%;

	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	gap: var(--gap-between-horizontal-images);

	max-width: 940px;
}

.autoscrolling-images__carousel-page--looping-head,
.autoscrolling-images__carousel-page--looping-tail {
	display: none;
}

.autoscrolling-images__carousel-page--looping-tail {
	position: absolute;
	left: calc(100% + var(--gap-between-horizontal-images));
}

.autoscrolling-images__carousel-page--looping-head {
	position: absolute;
	right: 100%;
}

.autoscrolling-images__radio {
	display: none;
}

.autoscrolling-images__dots-container {
	display: flex;
	justify-content: center;
	margin-top: 24px;
}

.autoscrolling-images__dots {
	cursor: pointer;
	height: 12px;
	width: 12px;
	background-color: var(--color-brand-accent-09);
	border-radius: 50%;
	display: inline-block;
	margin: 4px;
}

.autoscrolling-images__dots:hover {
	background-color: var(--color-brand-accent-04);
}

@keyframes autoscrolling-images-infinite-scroll {
	0% {
		transform: translateX(0%);
	}

	100% {
		transform: translateX(calc(-100% - var(--gap-between-horizontal-images)));
	}
}

.autoscrolling-images.endless {
	.autoscrolling-images__arrow-carousel-container {
		display: none;
	}

	.autoscrolling-images__dots-container {
		display: none;
	}

	.autoscrolling-images__carousel {
		max-width: none;
		width: max-content;
		animation-name: autoscrolling-images-infinite-scroll;
		animation-duration: var(--animation-length);
		animation-iteration-count: infinite;
		animation-timing-function: linear;
	}

	.autoscrolling-images__carousel-page {
		display: flex;
		flex: none !important;
		margin: 0;
		flex-wrap: nowrap !important;
		max-width: none;
	}

	.autoscrolling-images__img-wrapper {
		min-width: 288px;
	}

	.autoscrolling-images__carousel-page--looping-head,
	.autoscrolling-images__carousel-page--looping-tail {
		display: flex;
	}

	@container (width > 800px) {
		.autoscrolling-images__carousel-page {
			display: grid !important;
			grid-template-rows: repeat(2, auto);
			grid-auto-flow: column;
			gap: 16px;
		}

		.autoscrolling-images__img-wrapper:last-child:nth-child(odd) {
			grid-row: 1 / span 2; /* take both rows */
			align-self: center;
			justify-self: center;
		}
	}
}

.autoscrolling-images:not(.endless) {
	@container (width < 1115px) {
		.autoscrolling-images__arrow-carousel-container {
			right: 0;
		}
	}

	@container (width < 800px) {
		.autoscrolling-images__arrow-carousel-container {
			display: none;
		}

		.autoscrolling-images__dots-container {
			display: none;
		}

		.autoscrolling-images__carousel {
			max-width: none;
			width: max-content;
			animation-name: autoscrolling-images-infinite-scroll;
			animation-duration: var(--animation-length);
			animation-iteration-count: infinite;
			animation-timing-function: linear;
		}

		.autoscrolling-images__carousel-page {
			display: flex;
			flex: none !important;
			margin: 0;
			flex-wrap: nowrap !important;
			max-width: none;
		}

		.autoscrolling-images__img-wrapper {
			min-width: 288px;
		}

		.autoscrolling-images__carousel-page--looping-head,
		.autoscrolling-images__carousel-page--looping-tail {
			display: flex;
		}
	}
}