profile card basic functionality, needs some UI improvements

app/styles/application.scss

@@ -71,3 +71,4 @@
 @import 'components/error-boundary';
 @import 'components/video-player';
 @import 'components/audio-player';
+@import 'components/profile_hover_card';

app/styles/components/profile_hover_card.scss

@@ -0,0 +1,54 @@
+.display-name__account {
+  position: relative;
+}
+
+.profile-hover-card {
+  @include standard-panel;
+  position: absolute;
+  opacity: 0;
+  transition-property: opacity;
+  transition-duration: 0.5s;
+  z-index: 998;
+  opacity: 1;
+  transition-delay: 1s;
+  left: -10px;
+
+  @media(min-width: 750px) {
+    left: -80px;
+  }
+
+  .profile-hover-card__container {
+    position: relative;
+  }
+
+  .profile-hover-card__action-button {
+    z-index: 999;
+    position: absolute;
+    right: 20px;
+    top: 120px;
+  }
+
+  .user-panel {
+    box-shadow: none;
+
+    .user-panel-stats-item a strong {
+      text-decoration: none;
+    }
+  }
+
+  .profile-hover-card__badges {
+    margin: 0 20px 20px;
+    display: flex;
+
+    .badge, .relationship-tag {
+      padding: 2px 4px;
+      margin-right: 5px;
+      border-radius: 3px;
+      font-size: 11px;
+    }
+  }
+
+  .profile-hover-card__bio {
+    margin: 0 20px 20px;
+  }
+}

app/styles/components/status.scss

@@ -162,22 +162,6 @@
 .status__profile,
 .detailed-status__profile {
   display: inline-block;
-
-  .user-panel {
-    position: absolute;
-    display: flex;
-    opacity: 0;
-    pointer-events: none;
-    transition-property: opacity;
-    transition-duration: 0.5s;
-    z-index: 999;
-
-    &--visible {
-      opacity: 1;
-      transition-delay: 1s;
-      pointer-events: all;
-    }
-  }
 }
 
 .status-check-box {