// Generic TinySlider Slider for Purdue
// Using the .alignwide style with overflow so items span the entire width of the browser window
//
// Options:
// $slider-width: $rkv-max-width-entry-content -- Width of the carousel. Default is to the be like .alignwide.
// $slider-nav-bar-width: 1110px, -- Width of the nav-bar area. This overruns the width of the carousel to reflect the design
// $slider-item-gap: 25px; -- Space between slider items
// $slider-item-display: inline-flex -- Overrides TinySlider's default of inline-block
// $slider-overflow : visible; -- Allows the carousel items to be visible outside of the content area and fill the width of the browser window.

@mixin purdue_carousel_tinyslider_default(
	$slider-width: 100%,
	$slider-nav-bar-width: 1002px,
	$slider-item-gap: 25px,
	$slider-item-display: inline-flex,
	$slider-overflow: visible
) {
	$slider-controls-width: 72px;
	$slider-controls-gap: 41px;

	.tns-outer {
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		max-width: $slider-width;
		position: relative;
		// margin-bottom: $rkv-gutter-quadruple;
		body.single-post & {
			margin-bottom: 0;
		}
		display: grid;
		// On our "regular" content width pages. The nav bar will overhang the content area, thus getting two grid columns.
		// The slides only take up the content area, so there are two "x" columns to the right that are unused.
		grid-template-areas:
			'slides x x'
			'nav nav controls';
		justify-content: space-between;
		// grid-template-columns: $slider-width 1fr $slider-controls-width;
		grid-template-rows: 1fr 80px;
		body:not(.header-convergent) & {
			// When the width of the page is no longer wider than the content area, we will collapses all the columns into one
			// There are rules below which relocate the controls to the 'nav' columns.
			// @include mq($until: lg) {
			grid-template-areas:
				'slides'
				'nav';
			justify-content: space-between;
			grid-template-columns: 100%;
			grid-template-rows: 1fr;
			// }
		}
		// Header Convergent pages have an align wide content area and do not want the overhang of the scrollbar.
		// Both the nav and controls are under the 'nav' column.
		body.header-convergent &,
		div.alignfull & {
			grid-template-areas:
				'slides'
				'nav';
			justify-content: space-between;
			grid-template-columns: 100%;
			grid-template-rows: 1fr;
		}
		grid-column-gap: $slider-controls-gap;
		grid-row-gap: 0px;
		> .tns-ovh {
			overflow: $slider-overflow; // The carousel content will be visible outside of the $slider-width area
			grid-area: slides;
			width: 100%;
			.tns-inner > .tns-outer > .tns-nav {
				display: none;
			}
			.tns-inner {
				max-width: 100%;
				.tns-slider.tns-carousel {
					cursor: grab;
					.tns-item {
						&:not(a) {
							cursor: grab;
						}
						&a {
							pointer-events: all;
						}
						display: $slider-item-display; // Override TinySlider's default of inline-block.
						&.tns-slide-active {
						}
						&:last-child {
							// The last slide should not have space afterwards.
							padding-right: 0 !important;
							margin-right: 0 !important;
						}
					}
					&.tns-dragging {
						cursor: grabbing;
						.tns-item {
							cursor: grabbing;
						}
						a {
							pointer-events: none;
						}
					}
				}
			}
		}

	}
}

/* Front End Style */
.purdue_carousel_default_wrapper {
	@include purdue_carousel_tinyslider_default(
		$slider-width: 100%,
		$slider-item-gap: 0,
		$slider-item-display: inline-table
	);
    margin-top:-1rem;
    margin-bottom:3rem;
    @include mobile{
        
    }
	.slider-controls{
		margin-top:2rem;
	}
	.purdue_carousel_default {

		&[data-size='medium'] {
			figure {
				img {
					width: 300px;
					height: auto;
				}
			}
		}
		&[data-size='rkv-two-to-one'] {
			figure {
				img {
					width: 666px;
					height: auto;
					aspect-ratio: 2/1;
					@include mobile {
						height: auto;
						width: 318px;
					}
				}
			}
		}
		&[data-size='rkv-four-to-five'] {
			figure {
				img {
					width: 432px;
					height: 539px;
					aspect-ratio: 4/5;
					@include mobile {
						width: 317px;
						height: 396px;
					}
				}
			}
		}
		&[data-size='rkv-square-variation-5-slider'] {
			figure {
				img {
					width: 318px;
					height: 318px;
					aspect-ratio: 318/318;
					max-width: initial;
					max-height: 50vh;
				}
			}
		} 
	}
}
.tiny-slider-navigation{
	.tns-nav-active{
		background: #8e6f3e;
		opacity: 1;
	}
}
/* Editor Style */
.purdue_carousel_default[class].wp-block-gallery[class],
.purdue_carousel_default[class].rkv-block-gallery[class] {
	&.block-editor-block-list__block {
		.blocks-gallery-grid {
			display: flex;
			flex-wrap: nowrap;
			overflow-x: scroll;
			align-items: flex-start;
			flex-direction: row;

			&::-webkit-scrollbar {
				height: 2px;
			}

			&::-webkit-scrollbar-track {
				background-color: $black;
				border-radius: 0;
				opacity: 0.25;
			}

			&::-webkit-scrollbar-thumb {
				border-radius: 0;
				background-color: $black;
				height: 5px;
			}

			> li {
				width: auto;
				min-width: 325px;
				flex: 0 0 auto;
				figure {
					width: auto;
					height: 100%;
					display: inline-table;
					img {
						width: auto;
						height: 444px;
						max-width: 100%;
						vertical-align: top;
					}
				}
			}
		}
	}
}
.rkv-related-content
	.rkv-default-archive-card-slider__wrapper[class]
	.tns-outer
	> .tns-controls
	> button {
	filter: invert(1);
}


