/** @format */

.slider_parent {
	--snap-item-width: auto; /* auto, vw, px usw. */
	--snap-item-height: auto; /* 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 */
	& :is(.slider_area, .social_post, .slider_arrows, .slider_arrow) {
		all: unset;
		box-sizing: border-box;
	}

	& {
		all: unset;
		box-sizing: border-box;
		display: grid;
		grid: auto / 100%;
	}

	& .slider_area {
		grid-area: 1 / 1 / 2 / 2;
		z-index: 1;
		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;
		padding-bottom: calc(var(--scrollbar-spacing-tb) / 2);
		margin-bottom: calc(0px - (var(--scrollbar-spacing-tb) / 2));

		&::-webkit-scrollbar {
			display: block;
			height: calc(var(--scrollbar-thumb-height) + var(--scrollbar-spacing-tb));
		}

		&::-webkit-scrollbar-track,
		&::-webkit-scrollbar-thumb {
			--this-element-color: var(--scrollbar-color-track);
			height: calc(var(--scrollbar-thumb-height) + var(--scrollbar-spacing-tb));
			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);
		}

		& .social_post {
			width: var(--snap-item-width);
			height: var(--snap-item-height);
			scroll-snap-align: start;
		}
	}

	& .slider_arrows {
		grid-area: 1 / 1 / 2 / 2;
		z-index: 2;
		place-self: end end;
		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%);
				}
			}
		}
	}
}