_slide-with-configuration.scss

@use "../node_modules/sass-true/sass/true" as *;
@use "../src/slide" as *;

@include describe("slide with configuration") {
	@include it("should slide in & down") {
		@include assert() {
			@include output() {
				@include slide-in-down();
			}

			@include expect() {
				@keyframes slide-in-down {
					from {
						visibility: visible;
						transform: translate3d(0, -200%, 0);
					}

					to {
						transform: translate3d(0, 0, 0);
					}
				}

				.custom-class.slide-in-down {
					animation-name: slide-in-down;
				}
			}
		}
	}

	@include it("should slide in & left") {
		@include assert() {
			@include output() {
				@include slide-in-left();
			}

			@include expect() {
				@keyframes slide-in-left {
					from {
						visibility: visible;
						transform: translate3d(-200%, 0, 0);
					}

					to {
						transform: translate3d(0, 0, 0);
					}
				}

				.custom-class.slide-in-left {
					animation-name: slide-in-left;
				}
			}
		}
	}

	@include it("should slide in & right") {
		@include assert() {
			@include output() {
				@include slide-in-right();
			}

			@include expect() {
				@keyframes slide-in-right {
					from {
						visibility: visible;
						transform: translate3d(200%, 0, 0);
					}

					to {
						transform: translate3d(0, 0, 0);
					}
				}

				.custom-class.slide-in-right {
					animation-name: slide-in-right;
				}
			}
		}
	}

	@include it("should slide in & up") {
		@include assert() {
			@include output() {
				@include slide-in-up();
			}

			@include expect() {
				@keyframes slide-in-up {
					from {
						visibility: visible;
						transform: translate3d(0, 200%, 0);
					}

					to {
						transform: translate3d(0, 0, 0);
					}
				}

				.custom-class.slide-in-up {
					animation-name: slide-in-up;
				}
			}
		}
	}

	@include it("should slide out & down") {
		@include assert() {
			@include output() {
				@include slide-out-down();
			}

			@include expect() {
				@keyframes slide-out-down {
					from {
						transform: translate3d(0, 0, 0);
					}

					to {
						visibility: hidden;
						transform: translate3d(0, 300%, 0);
					}
				}

				.custom-class.slide-out-down {
					animation-name: slide-out-down;
				}
			}
		}
	}

	@include it("should slide out & left") {
		@include assert() {
			@include output() {
				@include slide-out-left();
			}

			@include expect() {
				@keyframes slide-out-left {
					from {
						transform: translate3d(0, 0, 0);
					}

					to {
						visibility: hidden;
						transform: translate3d(-200%, 0, 0);
					}
				}

				.custom-class.slide-out-left {
					animation-name: slide-out-left;
				}
			}
		}
	}

	@include it("should slide out & right") {
		@include assert() {
			@include output() {
				@include slide-out-right();
			}

			@include expect() {
				@keyframes slide-out-right {
					from {
						transform: translate3d(0, 0, 0);
					}

					to {
						visibility: hidden;
						transform: translate3d(200%, 0, 0);
					}
				}

				.custom-class.slide-out-right {
					animation-name: slide-out-right;
				}
			}
		}
	}

	@include it("should slide out & up") {
		@include assert() {
			@include output() {
				@include slide-out-up();
			}

			@include expect() {
				@keyframes slide-out-up {
					from {
						transform: translate3d(0, 0, 0);
					}

					to {
						visibility: hidden;
						transform: translate3d(0, -200%, 0);
					}
				}

				.custom-class.slide-out-up {
					animation-name: slide-out-up;
				}
			}
		}
	}
}