// Back to top link
$back-top-display: none !default; // `mobile-only || block || inline || none`
$back-top-icon-character: "\f102" !default; // any content CSS property values, default: fontawesome angle-double-up
$back-top-icon-size: 2.5em !default;
$back-top-icon-label-space: .33em;
$back-top-layout-direction: vertical !default; // horizontal || vertical
// layout position
// 	values: `static (options) || fixed (options)`
// 	static options values: `left: length || right: length`
//	fixed options values: one or more of
//		`left: length || right: length || top: length || bottom: length`
//		separated by comma
//	examples: `static (left: 2em)`, `fixed (right: 0, bottom: 20px)`
$back-top-layout-position: static (right) !default;

// display options
.back-top {
	@if $back-top-display == none {
		@include sr-only();
	} @else if $back-top-display == mobile-only {
		@extend .mobile-only;
	} @else {
		display: $back-top-display;
	}
}

// Default link styles
.back-top--link {
	display: inline-flex;
	align-items: center;
	// icon
	&::before {
		content: $back-top-icon-character;
		font-family: fontawesome, sans-serif;
		font-size: $back-top-icon-size;
	}
}

//
// Layout options
//

// Layout direction
@if ($back-top-layout-direction == vertical) {
	.back-top--link-label {
		margin-left: $back-top-icon-label-space;
		margin-right: $back-top-icon-label-space;
	}
} @else if ($back-top-layout-direction == horizontal) {
	.back-top--link-label {
		margin-top: $back-top-icon-label-space;
		margin-bottom: $back-top-icon-label-space;
	}
	.back-top--link {
		flex-direction: column;
	}
}

// Layout Position
// refere to CSS position property (static or fixed)
$back-top-layout-position-type: nth($back-top-layout-position, 1);
$back-top-layout-position-datas: false;
@if (length($back-top-layout-position) > 1) {
	$back-top-layout-position-datas: nth($back-top-layout-position, 2);
}

.back-top--link {
	position: $back-top-layout-position-type;
	z-index: 1000;
}

@if ($back-top-layout-position-type == static) {
	.back-top {
		@if (type-of($back-top-layout-position-datas) == map) {
			@each $text-align, $padding-value in $back-top-layout-position-datas {
				text-align: $text-align;
				padding-#{$text-align}: $padding-value;
			}
		} @else {
			text-align: $back-top-layout-position-datas;
		}
	}
}

@if ($back-top-layout-position-type == fixed) {
	.back-top--link {
		@if (type-of($back-top-layout-position-datas) == map) {
			@each $property, $value in $back-top-layout-position-datas {
				#{$property}: $value;
			}
		} @else if (
			type-of($back-top-layout-position-datas) == list or
			type-of($back-top-layout-position-datas) == string
		) {
			@each $property in $back-top-layout-position-datas {
				#{$property}: 0;
			}
		}
	}
}

// Show/hide animation
// $back-top-layout-position-type == fixed, JS add .back-top-scroll-Y class
// and a .[below | above]-scroll-position to component (when scroll goes a custom limit)
@keyframes back-top-show {
	0% {
		opacity: 0;
		z-index: -1;
	}
	1% {
		z-index: 1000;
	}
	100% {
		opacity: 1;
		z-index: 1000;
	}
}
@keyframes back-top-hide {
	0% {
		opacity: 1;
		z-index: 1000;
	}
	99% {
		z-index: -1;
	}
	100% {
		opacity: 0;
		z-index: -1;
	}
}
.back-top-scrollY {
	animation-fill-mode: both;
	animation-duration: 600ms;
	&.below-scroll-limit  {
		animation-name: back-top-show;
	}
	&.above-scroll-limit {
		animation-name: back-top-hide;
	}
}
