.scrollableWithoutScrollbars(@direction) {
	& when(@direction = "both") {
		overflow: scroll;
	}

	& when(@direction = y), (@direction = x) {
		overflow-@{direction}: scroll;
	}

	scrollbar-width: none; /* Firefox only */

	&::-webkit-scrollbar {
		display: none;
	}
}

.withImagesTrasparencyBackground(@setPositionRelative: false) {
	@chess-color: #ffffff20;

	& when (@setPositionRelative = true) {
		position: relative;
	}

	/**
	* Transparent-background images filler
	*/
	&::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 0;
		background-image: linear-gradient(45deg, @chess-color 25%, transparent 25%),
			linear-gradient(-45deg, @chess-color 25%, transparent 25%),
			linear-gradient(45deg, transparent 75%, @chess-color 75%),
			linear-gradient(-45deg, transparent 75%, @chess-color 75%);
		background-size: 20px 20px;
		background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
		border: 1px solid @chess-color;
	}

	& > img {
		position: relative;
		z-index: 1 !important;
	}
}

.lookMumIamAppearing(@inTime, @tmf: ease-in-out, @delay: 0s) {
	opacity: 0;
	animation-name: appearance;
	animation-duration: @inTime;
	animation-timing-function: @tmf;
	animation-delay: @delay;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;

	@keyframes appearance {
		to {
			opacity: 1;
		}
	}
}

.pagetransition() {
	/** Order is important **/

	&.enter-active,
	&.exit-active {
		transition: opacity 0.5s;
	}

	&.enter {
		opacity: 0;
	}

	&.enter-active {
		opacity: 1;
	}

	&.exit {
		opacity: 1;
	}

	&.exit-active {
		opacity: 0;
	}
}
