Reversible blockchain components

frontend/src/app/components/blockchain/blockchain.component.scss

@@ -16,7 +16,7 @@
 .blockchain-wrapper {
   height: 250px;
 
-  -webkit-user-select: none; /* Safari */        
+  -webkit-user-select: none; /* Safari */
   -moz-user-select: none; /* Firefox */
   -ms-user-select: none; /* IE10+/Edge */
   user-select: none; /* Standard */
@@ -24,23 +24,46 @@
 
 .position-container {
   position: absolute;
-  left: 50%;
+  left: 0;
   top: 75px;
+  transform: translateX(50vw);
+  transition: transform 1s;
 }
 
 .position-container.liquid, .position-container.liquidtestnet {
-  left: 420px;
+  transform: translateX(420px);
+}
+
+@media (min-width: 768px) {
+  .blockchain-wrapper.time-ltr {
+    .position-container.liquid, .position-container.liquidtestnet {
+      transform: translateX(calc(100vw - 420px));
+    }
+  }
 }
 
 @media (max-width: 767.98px) {
-  .position-container {
-    left: 95%;
+  .blockchain-wrapper {
+    .position-container {
+      transform: translateX(95vw);
+    }
+    .position-container.liquid, .position-container.liquidtestnet {
+      transform: translateX(50vw);
+    }
+    .position-container.loading {
+      transform: translateX(50vw);
+    }
   }
-  .position-container.liquid, .position-container.liquidtestnet {
-    left: 50%;
-  }
-  .position-container.loading {
-    left: 50%;
+  .blockchain-wrapper.time-ltr {
+    .position-container {
+      transform: translateX(5vw);
+    }
+    .position-container.liquid, .position-container.liquidtestnet {
+      transform: translateX(50vw);
+    }
+    .position-container.loading {
+      transform: translateX(50vw);
+    }
   }
 }
 
@@ -57,4 +80,31 @@
   width: 300px;
   left: -150px;
   top: 0px;
+}
+
+.time-toggle {
+  color: white;
+  font-size: 1rem;
+  position: absolute;
+  bottom: -1.5em;
+  left: 1px;
+  transform: translateX(-50%);
+  background: none;
+  border: none;
+  outline: none;
+  margin: 0;
+  padding: 0;
+  transition: transform 1s;
+}
+
+.blockchain-wrapper.ltr-transition .blocks-wrapper {
+  transition: transform 1s;
+}
+
+.blockchain-wrapper.time-ltr .blocks-wrapper {
+  transform: scaleX(-1);
+}
+
+.blockchain-wrapper.time-ltr .time-toggle {
+  transform: translateX(-50%) scaleX(-1);
 }