/* scroll_strip_arrows.css - "NW1": a sideways-scrolling row with the scrollbar hidden and
   prev / next chevron buttons that page it (the treatment first used on the AJP "before you go"
   article strip, ajp_view.render_related_strip / alljobspro.css .ajp_strip_*).

   Markup (js/scroll_strip_arrows.js wires it):

   <div class="strip_viewport js_strip">
       <button type="button" class="strip_ctrl strip_prev js_strip_prev" aria-label="Previous">...</button>
       <div class="strip_scroll js_strip_scroll"> ...items... </div>
       <button type="button" class="strip_ctrl strip_next js_strip_next" aria-label="Next">...</button>
   </div>

   Consumers: the Goodwood careers sector bar (includes/goodwood/careersheader.cfm) and the
   careers portal news cards (careers_portal_view.render_scraped_news_block). Colours are neutral,
   retint .strip_ctrl in the consumer's css. */

.strip_viewport {
	position: relative;
	min-width: 0;
}

.strip_scroll {
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.strip_scroll::-webkit-scrollbar {
	display: none;
}

.strip_ctrl {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 36px;
	height: 36px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid #ddd;
	background: #fff;
	color: #131313;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0,0,0,.16);
	transition: background .15s, color .15s, border-color .15s, opacity .15s;
}

.strip_ctrl svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.strip_ctrl:hover {
	background: #131313;
	border-color: #131313;
	color: #fff;
}

.strip_ctrl:disabled {
	opacity: 0;
	pointer-events: none;
	cursor: default;
}

.strip_prev {
	left: 0;
}

.strip_next {
	right: 0;
}