//colors
$black: #000;
$white: #fff;
$black_25: rgba(0,0,0, .25);
$white_75: rgba(255, 255, 255, 0.75);
$black_60: rgba(0,0,0, .6);
$black_30: rgba(0,0,0,.3);

//fonts
$font_0: sans-serif;

//urls
$url_0: url(http://leemark.github.io/better-simple-slideshow/img/arrows-alt_ffffff_64.png);

//@extend-elements
//original selectors
//.deslider-next, .deslider-prev
%extend_1 {
	text-align: center;
	color: $white;
	position: absolute;
	background: $black;
	background: $black_60;
	top: 50%;
	z-index: 4;
	font-size: 2em;
	margin-top: -1.2em;
	opacity: .5;
	//Instead of the line below you could use @include user-select($select)
	user-select: none;
}


.deslider {
	display: flex;
	align-items: center;
	width: 300%;
	background-color: $black;
	justify-content: space-around;
	margin-bottom: -15px;
	&.is-animating {
		//Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
		transition: transform 400ms cubic-bezier(0.5, 0, 0.5, 1);
	}
	figure {
		text-align: center;
		margin: 0 auto;
		//Instead of the line below you could use @include user-select($select)
		user-select: none;
		flex-grow: 1;
		img {
			width: 100%;
			//Instead of the line below you could use @include user-select($select)
			user-select: none;
			user-drag: none;
		}
	}
	figcaption {
		position: relative;
		font-family: $font_0;
		font-size: .8em;
		bottom: 1.5em;
		color: $white;
		background: $black;
		background: $black_25;
		//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
		border-radius: 2px;
		opacity: 0;
		//Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
		transition: opacity 1.2s;
		max-width: 30%;
		right: 0;
		z-index: 2;
		opacity: 1;
		a {
			color: $white;
		}
	}
}
.deslider-panel {
	width: 100%;
	height: 100%;
}
.deslider-pagination {
	bottom: 6.25%;
	left: 0;
	pointer-events: none;
	position: absolute;
	text-align: center;
	width: 100%;
	> * {
		//Instead of the line below you could use @include border-radius($radius, $vertical-radius)
		border-radius: 50%;
		//Instead of the line below you could use @include box-shadow($shadow-1, $shadow-2, $shadow-3, $shadow-4, $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9, $shadow-10)
		box-shadow: 0 0 0 2px $white_75;
		display: inline-block;
		height: 6px;
		margin-left: 4px;
		margin-right: 4px;
		//Instead of the line below you could use @include transition($transition-1, $transition-2, $transition-3, $transition-4, $transition-5, $transition-6, $transition-7, $transition-8, $transition-9, $transition-10)
		transition: background-color 250ms;
		width: 6px;
		&.is-active {
			background-color: $white_75;
		}
	}
}
.deslider-next {
	@extend %extend_1;
	right: 0;
	padding: 10px 5px 15px 10px;
	//Instead of the line below you could use @include border-top-left-radius($radius)
	border-top-left-radius: 3px;
	//Instead of the line below you could use @include border-bottom-left-radius($radius)
	border-bottom-left-radius: 3px;
	&:hover {
		cursor: pointer;
		opacity: 1;
	}
}
.deslider-prev {
	@extend %extend_1;
	left: 0;
	padding: 10px 10px 15px 5px;
	//Instead of the line below you could use @include border-top-right-radius($radius)
	border-top-right-radius: 3px;
	//Instead of the line below you could use @include border-bottom-right-radius($radius)
	border-bottom-right-radius: 3px;
	&:hover {
		cursor: pointer;
		opacity: 1;
	}
}
.deslider-fullscreen {
	display: block;
	width: 24px;
	height: 24px;
	background: $black_30 $url_0;
	background-size: contain;
	top: 5px;
	left: 5px;
	cursor: pointer;
	opacity: .3;
	//Instead of the line below you could use @include user-select($select)
	user-select: none;
	position: absolute;
	z-index: 4;
	font-size: 2em;
	&:hover {
		opacity: .8;
	}
}