refactor css for visibility tray

src/App.scss

@@ -626,17 +626,10 @@ nav {
 }
 
 .visibility-tray {
-  font-size: 1.2em;
-  cursor: pointer;
-
-  .selected {
-    color: $fallback--lightText;
-    color: var(--lightText, $fallback--lightText);
-  }
-
-  div {
-    padding-top: 5px;
-  }
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row-reverse;
+  padding-top: 5px;
 }
 
 .visibility-notice {

src/components/post_status_form/post_status_form.vue

@@ -147,14 +147,6 @@
   }
 }
 
-.post-status-form {
-  .visibility-tray {
-    display: flex;
-    justify-content: space-between;
-    flex-direction: row-reverse;
-  }
-}
-
 .post-status-form, .login {
   .form-bottom {
     display: flex;

src/components/scope_selector/scope_selector.vue

@@ -1,5 +1,5 @@
 <template>
-<div v-if="!showNothing">
+<div v-if="!showNothing" class="scope-selector">
   <i class="icon-mail-alt"
      :class="css.direct"
      :title="$t('post_status.scope.direct')"
@@ -28,3 +28,19 @@
 </template>
 
 <script src="./scope_selector.js"></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.scope-selector {
+  i {
+    font-size: 1.2em;
+    cursor: pointer;
+
+    &.selected {
+      color: $fallback--lightText;
+      color: var(--lightText, $fallback--lightText);
+    }
+  }
+}
+</style>