:root {
	--scrl-nv-mrg-tp: 2.75rem;
    --g-pd-v: 3.5rem;
    --g-pd-h: 2rem;
}

/* Overflow Scrolling Lists */
.s-active {
	
	.off-scr {
		margin-inline: calc( var(--g-pd-h) * -1 );
		
		&:before, &:after {
		    content: '';
		    display: block;
		    width: var(--g-pd-h);
		    flex-shrink: 0;
			scroll-snap-align: center;
		}
			
		&[class*='gp_sp'] {
			
			&:before, &:after {
				width: calc( var(--g-pd-h) - var(--grd-sp-dyn) );
			}
			
		}
		
		[data-role='item'] {
			scroll-snap-align: center;
		}
		
	}
	
	@media screen and (width >= 1280px) {
		
		.off-scr {
			margin-inline: calc( (100svw - var(--mn-w)) * -0.5 );
			
			&:before, &:after {
			    width: calc( (100svw - var(--mn-w)) * 0.5 );
			}
			
			&[class*='gp_sp'] {
				
				&:before, &:after {
					width: calc( (100svw - var(--mn-w)) * 0.5 - var(--grd-sp-dyn) );
				}
				
			}
			
		}
		
	}
		
}

/* Scroll Nav */
[data-role="arrows"]:has( [data-role="thumbList"] ) {
	--sl-sa-s: 0.8rem;
	--scrl-nv-rds: 0.5rem;
	--scrl-nv-pd-v: 0.7rem;
	--scrl-nv-pd-h: 0.75rem;
	--scrl-nv-gp: 1.2rem;
	
	color: var(--text-color);
	font-size: var(--sl-sa-s);
	margin-block-start: var(--scrl-nv-mrg-tp);
	
	&:has( [data-role="thumbList"] ) {
		--scrl-nv-rds: 5rem;
		--scrl-nv-pd-v: 0.9rem;
		--scrl-nv-pd-h: 1.2rem;
	}

	> div {
		gap: var(--scrl-nv-gp);
		padding: var(--scrl-nv-pd-v) var(--scrl-nv-pd-h);
		border-radius: var(--scrl-nv-rds);
		
	}
	
}

:is(.wht-bg, .lt-bg) [data-role="arrows"] > div {
	background-color: var(--background);
}

.dk-bg [data-role="arrows"] > div {
	background-color: hsl(from var(--black) h s l / 0.5);
}

/* Play / Pause Button */
[data-action='PlayPause'] {
	color: var(--white);
	background-color: var(--buttons);
	border-radius: 50%;
	width: 1.11rem;
	height: 1.11rem;
	position: relative;
	display: none;
	visibility: hidden;
	transition: background-color var(--g-trn-sp) var(--g-trn-tf);
	
	svg {
		font-size: 0.5rem;
		position: absolute;
		top: 50%;
		left: 50%;
		translate: -50% -50%;
		display: none;
		
		&.pse-icn {
			display: block;
		}
		
	}
	
	&:is( :hover, :focus-visible ) {
		color: var(--white);
		background-color: #00407F;
	}
	
}

.s-paused [data-action='PlayPause'] {
	
	.ply-icn {
		display: block;
	}
	
	.pse-icn, .rst-icn {
		display: none;
	}
	
}

.s-restart [data-action='PlayPause'] {
	
	.rst-icn {
		display: block;
	}
	
	.ply-icn, .pse-icn {
		display: none;
	}
	
}

[data-auto-advance="true"] [data-action='PlayPause'] {
	display: flex;
	visibility: visible;
}

/* Thumbs Nav */
[data-role="thumbList"] {
	--ato-adv-thb-dur: 19.5s;
	
	button {
		--thmb-o: 0.25;
		
		display: block;
		color: inherit;
		width: 0.5rem;
		height: 0.5rem;
		position: relative;
		overflow: hidden;
		background-color: hsl(from var(--text-color) h s l / var(--thmb-o));
		border-radius: 0.5rem;
		transition: background-color var(--g-trn-sp) var(--g-trn-tf);
		
		&.s-active {
			pointer-events: none;
		}
		
	}
	
}

:is(.wht-bg, .lt-bg) [data-role="thumbList"] button {
			
	&:is( .s-active, :hover, :focus-visible ) {
		--thmb-o: 1;
	}
		
	&.s-active {
		background-color: var(--buttons);
	}
	
}

:is(.blk-bg, .dk-bg) [data-role="thumbList"] button {
		
	&:is( :hover, :focus-visible ) {
		--thmb-o: 0.6;
	}
		
	&.s-active {
		--thmb-o: 1;
	}
	
}

/* Auto Advance Thumbs Nav */
[data-auto-advance="true"] {

	[data-role="thumbList"] {
		
		button {
			transition: width 0.2s ease, background-color var(--g-trn-sp) var(--g-trn-tf);
			
			&:after {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 0;
				height: 100%;
				border-radius: inherit;
				background-color: var(--buttons);
			}
		
			&.s-active {
				--thmb-o: 0.25;
		
				width: 3.2rem;
				background-color: hsl(from var(--text-color) h s l / var(--thmb-o));
				
				&:after {
					animation: timerThumb var(--ato-adv-thb-dur) linear forwards;
				}
				
			}
			
		}
		
	}
	
	&.s-paused, .s-paused {
		
		[data-role="thumbList"] button.s-active:after {
			animation-play-state: paused;
		}
		
	}

}

/* Auto Advance Thumbs Nav Keyframe */
@keyframes timerThumb {
	to {
		width: 100%;
	}
}