/** @format */

.slider_parent {
	--snap-item-height: clamp(246px, 25vw, 510px); /* auto, vw, px usw. */
	--snap-item-gap: var(--universal-gap);
	--arrow-area-width: 3rem;
	--arrow-area-height: 3rem;
	--scrollbar-thumb-height: 6px;
	--scrollbar-spacing-tb: var(--universal-gap);
	--scrollbar-spacing-l: 0px;
	--scrollbar-spacing-r: 9rem;
	--scrollbar-color-thumb: var(--color-roedl-hunter-green);
	--scrollbar-color-track: var(--color-neutral-grey);
	--transition-profile: 300ms ease;

	/* Reset all */
	& :where(.slider_area, .slider_item, .slider_arrows, .slider_arrow) {
		all: unset;
		box-sizing: border-box;
	}

	& {
		all: unset;
		box-sizing: border-box;
		display: block;
		height: calc(var(--snap-item-height) + var(--scrollbar-spacing-tb) + var(--scrollbar-thumb-height));
		position: relative;
		z-index: 1;
		container: parent-size / size;

		& .slider_area {
			height: 100cqh;
			display: grid;
			grid-auto-flow: column;
			grid-auto-columns: auto;
			gap: 0px var(--snap-item-gap);
			overflow: scroll hidden;
			scroll-snap-type: x mandatory;
			scroll-behavior: smooth;
			-ms-overflow-style: none;
			scrollbar-width: none;
			justify-content: start;

			& .slider_item {
				height: calc(100cqh - var(--scrollbar-spacing-tb) - var(--scrollbar-thumb-height));
				width: auto;
				scroll-snap-align: start;
			}
		}
	}

	& .slider_arrows {
		position: absolute;
		right: 0px;
		bottom: 0px;
		z-index: 1;
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-items: center;
		text-align: center;
		height: var(--scrollbar-thumb-height);

		& .slider_arrow {
			cursor: pointer;
			width: var(--arrow-area-width);
			height: var(--arrow-area-height);
			transition: transform var(--transition-profile);

			&.slider_arrow--back {
				&::after {
					content: '\e5cb';
					font-family: 'Icons';
					font-size: 1.4em;
					display: block;
				}

				&:hover {
					transform: translateX(-25%);
				}
			}

			&.slider_arrow--next {
				&::after {
					content: '\e5cc';
					font-family: 'Icons';
					font-size: 1.4em;
					display: block;
				}

				&:hover {
					transform: translateX(25%);
				}
			}
		}
	}
}

@supports selector(::-webkit-scrollbar) {
	.slider_parent .slider_area {
		scrollbar-width: auto;

		&::-webkit-scrollbar {
			display: block;
			height: var(--scrollbar-thumb-height);
		}

		&::-webkit-scrollbar-track,
		&::-webkit-scrollbar-thumb {
			--this-element-color: var(--scrollbar-color-track);
			height: var(--scrollbar-thumb-height);
			background-image: linear-gradient(90deg, var(--this-element-color) 0%, var(--this-element-color) 100%), radial-gradient(circle closest-side at center, var(--this-element-color) 0%, var(--this-element-color) 100%, transparent 100%), radial-gradient(circle closest-side at center, var(--this-element-color) 0%, var(--this-element-color) 100%, transparent 100%);
			background-size: calc(100% - var(--scrollbar-thumb-height)) var(--scrollbar-thumb-height), var(--scrollbar-thumb-height) var(--scrollbar-thumb-height), var(--scrollbar-thumb-height) var(--scrollbar-thumb-height);
			background-repeat: no-repeat;
			background-position: center center, left center, right center;
		}

		&::-webkit-scrollbar-track {
			margin-left: var(--scrollbar-spacing-l);
			margin-right: var(--scrollbar-spacing-r);
		}

		&::-webkit-scrollbar-thumb {
			cursor: grab;
			--this-element-color: var(--scrollbar-color-thumb);
		}
	}
}