/*
 * Fade slider that replaces Slider Revolution (see inc/bbt-slider.php).
 *
 * Everything is laid out on the slider's design grid (--bbt-grid-w x
 * --bbt-grid-h) and scaled with --bbt-s, which is 1px at full size and
 * shrinks with the slider's width, as Slider Revolution's "auto" layout did.
 * Sliders never scale above their design size.
 */

.bbt-slider {
	container-type: inline-size;
	position: relative;
	width: 100%;
	overflow: hidden;
}

.bbt-slider__stage {
	--bbt-s: min( 1px, calc( 100cqw / var( --bbt-grid-w ) ) );
	position: relative;
	width: 100%;
	height: calc( var( --bbt-grid-h ) * var( --bbt-s ) );
}

/* Browsers without container queries: keep the proportions. */
@supports not ( container-type: inline-size ) {
	.bbt-slider__stage {
		height: auto;
		aspect-ratio: var( --bbt-grid-w ) / var( --bbt-grid-h );
	}
}

.bbt-slider__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity var( --bbt-speed, 300ms ) ease-in-out, visibility 0s linear var( --bbt-speed, 300ms );
}

.bbt-slider__slide.is-active {
	opacity: 1;
	visibility: visible;
	z-index: 1;
	transition: opacity var( --bbt-speed, 300ms ) ease-in-out, visibility 0s;
}

.bbt-slider__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.bbt-slider__link {
	position: absolute;
	inset: 0;
	z-index: 3;
}

/* Text slides: blocks positioned on the design grid, like Revolution layers. */
.bbt-slider__layer {
	position: absolute;
	z-index: 2;
	box-sizing: border-box;
	width: calc( var( --w ) * var( --bbt-s ) );
	margin: 0;
	white-space: normal;
	font-size: calc( var( --fs ) * var( --bbt-s ) );
	line-height: calc( var( --lh ) * var( --bbt-s ) );
	letter-spacing: calc( var( --ls ) * var( --bbt-s ) );
}

.bbt-slider__layer > :first-child { margin-top: 0; }
.bbt-slider__layer > :last-child { margin-bottom: 0; }

.bbt-x-left { left: calc( var( --x ) * var( --bbt-s ) ); }
.bbt-x-right { right: calc( var( --x ) * var( --bbt-s ) ); }
.bbt-x-center { left: calc( 50% + var( --x ) * var( --bbt-s ) ); }

.bbt-y-top { top: calc( var( --y ) * var( --bbt-s ) ); }
.bbt-y-bottom { bottom: calc( var( --y ) * var( --bbt-s ) ); }
.bbt-y-center { top: calc( 50% + var( --y ) * var( --bbt-s ) ); }

.bbt-x-center.bbt-y-center { transform: translate( -50%, -50% ); }
.bbt-x-center:not( .bbt-y-center ) { transform: translateX( -50% ); }
.bbt-y-center:not( .bbt-x-center ) { transform: translateY( -50% ); }

/*
 * Arrows: Slider Revolution's default arrows. 40px squares, 50% black,
 * solid black on hover, 20px in from the edges, hidden until the pointer is
 * over the slider (and 200ms after it leaves).
 */
.bbt-slider__arrow {
	position: absolute;
	top: 50%;
	z-index: 4;
	width: 40px;
	height: 40px;
	margin: -20px 0 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: rgba( 0, 0, 0, 0.5 );
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease 0.2s, visibility 0s linear 0.5s, background-color 0.2s;
}

.bbt-slider__arrow--prev { left: 20px; }
.bbt-slider__arrow--next { right: 20px; }

.bbt-slider__arrow:hover,
.bbt-slider__arrow:focus-visible {
	background: #000;
}

.bbt-slider__arrow svg {
	display: block;
	width: 7.1px;
	height: 13px;
	margin: 0 auto;
	overflow: visible;
	fill: none;
	stroke: #fff;
	stroke-width: 11.3;
	stroke-linecap: butt;
	stroke-linejoin: miter;
}

.bbt-slider:hover .bbt-slider__arrow,
.bbt-slider.is-touched .bbt-slider__arrow,
.bbt-slider:focus-within .bbt-slider__arrow {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.3s ease, visibility 0s, background-color 0.2s;
}