/* Side-arrow buttons (design nodes 13605:19044 / 13605:18971 / 13605:19039):
   square rounded alt-surface buttons with a white full arrow. The row itself is
   railed to the edges by .sl_sa-edg at 1280px+; below that it flows normally. */
.scrl-nav-sd {

	button:is([data-action="Prev"], [data-action="Next"]) {
		width: var(--sl-sa-s, 3.5rem);
		height: var(--sl-sa-s, 3.5rem);
		border-radius: 0.625rem;
		background-color: var(--inner-theme);
		color: var(--text-color);
		box-shadow: 0 0.25rem 0.75rem hsl(from var(--black) h s l / 0.16);
		transition: opacity var(--g-trn-sp) var(--g-trn-tf) 0s, background-color var(--g-trn-sp) var(--g-trn-tf) 0s;
	}

	button svg.icn {
		font-size: 1.5rem; /* 24px arrow glyph inside the square */
	}

}

/* The edge rail must clear the square button, not just a bare icon. */
[data-role="scroller"]:has(.scrl-nav-sd) {
	--sl-sa-s: 3.5rem;
}

@media screen and (min-width:1280px) {

	[data-role="scroller"] {
		--sl-sa-pd-mtp: 1.5; /*{ min: 1, max: 2.5, step: 0.1, type: 'range', friendly: 'Side Scrolling Arrows Padding' }*/

		.sl_sa-edg {
			position: relative;
			padding-left: calc(var(--sl-sa-s) * var(--sl-sa-pd-mtp) );
			padding-right: calc(var(--sl-sa-s) * var(--sl-sa-pd-mtp) );
			
			[data-role="container"] {
				z-index: 2;
			}
			
			[data-role="arrows"] {
				position: absolute;
				width: 100%;
				top: 50%;
				left: 0;
				z-index: 1;
				margin-top: 0;
				justify-content: space-between;
				transform: translateY(-50%);
			}
		}
		
	}
}