/*
 * Web Experience Toolkit (WET) / Boîte à outils de l'expérience Web (BOEW)
 * wet-boew.github.io/wet-boew/License-en.html / wet-boew.github.io/wet-boew/Licence-fr.html
 */
%wb-fade-opacity-0 {
	opacity: 0;
}

%wb-fade-opacity-1 {
	opacity: 1;
}

%wb-slide-left {
	transform: translate(-25%, 0);
}

%wb-slide-right {
	transform: translate(25%, 0);
}

%transition-300 {
	transition: all 300ms;
}

%transition-500 {
	transition: all 500ms;
}

%transition-1000 {
	transition: all 1000ms;
}

%transition-1500 {
	transition: all 1500ms;
}

%transition-2000 {
	transition: all 2000ms;
}

/* Fade */
.wb-fade-in-test {
	@extend %wb-fade-opacity-0;
	@extend %transition-300;

	&:hover,
	&:focus {
		@extend %wb-fade-opacity-1;
	}
}

.wb-fade-out-test {
	@extend %wb-fade-opacity-1;
	@extend %transition-500;

	&:hover,
	&:focus {
		@extend %wb-fade-opacity-0;
	}
}

/* Slide */
.wb-slide-left-test {
	@extend %transition-300;

	&:hover,
	&:focus {
		@extend %wb-slide-left;
	}
}

.wb-slide-right-test {
	@extend %transition-500;

	&:hover,
	&:focus {
		@extend %wb-slide-right;
	}
}