//*******************************************
//
//	BACK TO TOP
//
//	Description
//	- Styling and placement for a back to top button on longer pages
//
//	Contents
//	1) LAYOUT
//
//*******************************************


//*******************************************
//
//	LAYOUT
//
//*******************************************
.backToTop {
	//	EXTEND
	//	VARS (locally scoped)
	//	LAYOUT
		// Display, Positioning
		display: none;
		position: fixed;
		float: right;
		// Box Model
		width: $gridUnit-larger;
		padding: 1.25rem 0;
		// Type
		text-align: center;
	//	DISPLAY
		// Visual Enhancement
		color: $color_gray-lighter;
		background-color: $color_gray-darkest;
		cursor: pointer;
		// Type
	//	PSUEDO Elements & Classes
		// Elements :: before, after, first-line, first-letter, selection
		&::before {
			//	EXTEND
			@extend %fontSmoothing;
			//	VARS (locally scoped)
			content: 'Top';
			//	LAYOUT
				// Display, Positioning
				display: block;
				// Box Model
				// Type
				font-size: $fontSize-smaller;
				line-height: $gridUnit-small;
			//	DISPLAY
				// Visual Enhancement
				// Type
				font-family: $fontFamily-default;
				font-weight: 700;
				text-transform:uppercase;
			//	PSUEDO Elements & Classes
				// Elements :: before, after, first-line, first-letter, selection
				// Classes : http://css-tricks.com/almanac/
			//	CHILDREN (Sass 3.3 Syntax Only, otherwise scope child outside this selector)
			//	MODIFIERS
				// Static
				// Dynamic
				transition: transform $transition-default-out 0s;
			//	BREAKPOINTS
		}
		&:hover::before {
			@include bp($bp_width-600, min-) {
				transform: scale(0.8333333,0.8333333); // 1/1.2
			}
		}
		// Classes : http://css-tricks.com/almanac/
	//	CHILDREN (Sass 3.3 Syntax Only, otherwise scope child outside this selector)
	//	MODIFIERS
		// Static
		transform: scale(1,1) translateZ(0);
		// Dynamic
		transition: 
			color $transition-default-out 0s,
			background-color $transition-default-out 0s,
			transform $transition-default-out 0s;
		&:hover {
			color: $color_gray-lightest;
			background-color: $color_gray-darker;
			@include bp($bp_width-600, min-) {
				transform: scale(1.2,1.2);
			}
		}
	//	BREAKPOINTS
	@include bp($bp_width-600, max-) {
		bottom: $gridUnit-smallest;
		right: $gridUnit-smallest;
	}
	@include bp($bp_width-600, min-, $bp_width-1024) {
		bottom: $gridUnit-small;
		right: $gridUnit-small;
	}
	@include bp($bp_width-1024, min-) {
		bottom: $gridUnit-large;
		right: $gridUnit-larger;
	}
}


.backToTop-sticky { // Stops the back to top button from appearing over the footer
	display: inline-block;
	position: absolute;
	bottom: $gridUnit-large +9.7rem; // 9.7rem is the current size of the footer
}

.learn_sidebar .backToTop {
	&:hover {
		@include bp($bp_width-1024, min-) {
			background-color: $color_gray-lightest;
		}
	}
	@include bp($bp_width-1024, min-) {
		color: $color_gray-darker;
		background-color: $color_gray-lighter;
	}
}