@import "../../styles/mixin";

.wp-block-gutenkit {
	&-back-to-top {
		span {
			cursor: pointer;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			position: relative;
			@include transition(all, 0.3s);

			.progress-indicator {
				.canvas {
					width: 100%;
					height: 100%;
					top: 0;
					left: 0;
					position: absolute;
					border-radius: inherit;
				}
			}
		}

		&.show-on-scroll {
			span {
				&.gkit-tt-show {
					-webkit-animation: gkit-btt-fadein 0.5s;
					animation: gkit-btt-fadein 0.5s;
					opacity: 1;
				}

				&:not(.gkit-tt-show) {
					-webkit-animation: gkit-btt-fadeOut 0.5s;
					animation: gkit-btt-fadeOut 0.5s;
					opacity: 0;
				}
			}
		}
	}
}

@keyframes gkit-btt-fadein {
	from {
		opacity: 0;
		transform: translateY(80px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes gkit-btt-fadeOut {
	from {
		opacity: 1;
		transform: translateY(0);
	}
	to {
		opacity: 0;
		transform: translateY(80px);
	}
}