// Tooltips
@include tooltip(progress-page, scrolltotop,'');
@include tooltip(attr-swatches, sub-swatch, '');
@include tooltip(footer-section-inner, barberry_product_wishlist_button,'\ea08');
@include tooltip(footer-section-inner, barberry_product_compare_button,'\ea08');
@include tooltip(footer-section-inner, barberry_product_quick_view_button,'\ea18');

// Back To Top Button


.progress-page {
	position: fixed;
	right: 30px;
	bottom: 60px;
	height: 46px;
	width: 46px;
	border-radius:50%;
	box-shadow: inset  0 0 0 1px rgba(0,0,0,0.2);
	opacity:0;
	z-index:10;
	-webkit-transform: scale(0.8);
	transform: scale(0.8);
	webkit-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;


	@include breakpoint(1440px down) {
		right: 20px;
		bottom: 20px;
	}


	&.is-active.is-visible {
	    opacity: 1;
	    -webkit-transform: scale(1);
	    -moz-transform: scale(1);
	    -o-transform: scale(1);
	    -ms-transform: scale(1);
			transform: scale(1);
			cursor: pointer;
	}	

	.scrolltotop {
		z-index: 4;
		height: 46px;
		right: 0px;
		bottom: 40px;
		width: 46px;
		cursor: inherit;
		opacity:1;
		position:absolute;
		-webkit-transition: all 0.2s ease-in-out;
		-moz-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		-ms-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;

		.arrow-top {
		    border-bottom: 2px solid #000;
		    border-left: 2px solid #000;
		    height: 8px;
		    transform: rotate(135deg);
		    width: 8px;
		    position: absolute;
		    left: 19px;
		    top: 16px;
		    transition: all 0.2s ease-in-out;
		}		

		.arrow-top-line {
			background-color: #000;
			height: 14px;
			left: 50%;
			position: absolute;
			top: 16px;
			width: 2px;
			margin-left:-1px;
			-webkit-transition: all 0.2s ease-in-out;
			-moz-transition: all 0.2s ease-in-out;
			-o-transition: all 0.2s ease-in-out;
			-ms-transition: all 0.2s ease-in-out;
			transition: all 0.2s ease-in-out;
		}


		&.is-active.is-visible {
			opacity:1;
			bottom:0;
		}

	}	

	svg {
		transition: all 0.2s ease-in-out;
		top:0;
		path {
			fill: none;
		}
	}

	svg.progress-circle  {
		path {
		    stroke: rgba(0, 0, 0, 1);
		    stroke-width: 3;
		    box-sizing: border-box;			
		}
	}



}

body:not(.is-mobile) {
	.progress-page {
		&:hover {
			box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);

			.scrolltotop {
				.arrow-top {
					top: 14px;
				}
				.arrow-top-line {
					top: 14px;
					height: 18px;
				}
			}

			svg {
				opacity: 0;
			}
		}
	}
}