Switching the video feedback in Svelte

front/style/mobile-style.scss

@@ -1,9 +1,24 @@
+@media (hover: none) {
+  /**
+   * If we cannot hover over elements, let's display camera button in full.
+   */
+  .btn-cam-action {
+    div {
+      transform: translateY(0px);
+    }
+  }
+}
+
 @media screen and (max-width: 700px),
         screen and (max-height: 700px){
-  video#myCamVideo {
+  video.myCamVideo {
     width: 150px;
   }
 
+  .div-myCamVideo.hide {
+    right: -160px;
+  }
+
   .sidebar {
     width: 20%;
     min-width: 200px;
@@ -22,21 +37,6 @@
     }
   }
 
-  .btn-cam-action {
-    min-width: 150px;
-
-    &:hover{
-      transform: translateY(20px);
-    }
-    div {
-      margin: 0 1%;
-      &:hover {
-        background-color: #666;
-      }
-      margin-bottom: 30px;
-    }
-  }
-
   .main-section {
     position: absolute;
     width: 100%;

front/style/style.css

@@ -133,11 +133,11 @@ body .message-info.warning{
     outline: none;
 }
 
-.video-container#div-myCamVideo{
+.video-container.div-myCamVideo{
     border: none;
 }
 
-#div-myCamVideo {
+.div-myCamVideo {
     position: absolute;
     right: 15px;
     bottom: 30px;
@@ -146,11 +146,11 @@ body .message-info.warning{
     transition: right 350ms;
 }
 
-#div-myCamVideo.hide {
+.div-myCamVideo.hide {
     right: -20vw;
 }
 
-video#myCamVideo{
+video.myCamVideo{
     width: 15vw;
     -webkit-transform: scaleX(-1);
     transform: scaleX(-1);