/*
 * The careers rails' shared mechanics.
 *
 * Read from cp-all-designer css/career.css:592-620, 2120-2144 and 2133-2136.
 * Each rail's own look is its widget's.
 */

/* a scroll box that runs to the window's edge on both sides, its bar hidden */
[data-custom-career-rail-view] {
	margin-right: calc(-1 * var(--custom-career-rail-bleed, 90px));
	margin-left: calc(-1 * var(--custom-career-rail-bleed, 90px));
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x proximity;
	scroll-padding-inline: var(--custom-career-rail-bleed, 90px);
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	overscroll-behavior-x: contain;
}

[data-custom-career-rail-view]::-webkit-scrollbar {
	display: none;
}

/* the first card lines up with the content; the last one stops short of the window by the same */
[data-custom-career-rail-view] > ul {
	display: flex;
	margin: 0;
	list-style: none;
	padding-left: var(--custom-career-rail-bleed, 90px);
}

[data-custom-career-rail-view] > ul > li {
	scroll-snap-align: start;
	list-style: none;
}

[data-custom-career-rail-view] > ul::after {
	content: "";
	flex: 0 0 calc(var(--custom-career-rail-bleed, 90px) - var(--custom-career-rail-gap, 0px));
}

/* career.css:2133-2136 — a mouse grabs the rail and pulls it */
@media (hover: hover) and (pointer: fine) {
	[data-custom-career-rail-view] {
		cursor: grab;
	}
	[data-custom-career-rail-view].is-dragging {
		cursor: grabbing;
		user-select: none;
	}
}