diff --git a/.stylelintrc.yml b/.stylelintrc.yml
index 6fcae1119..5231e306d 100644
--- a/.stylelintrc.yml
+++ b/.stylelintrc.yml
@@ -94,3 +94,6 @@ overrides:
     rules:
       max-nesting-depth: 8
       selector-max-compound-selectors: 8
+  - files: app/assets/stylesheets/shared/social_share.scss
+    rules:
+      selector-class-pattern: "^([a-z][a-z0-9]*)((-|_)[a-z0-9]+)*$"
diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index febe1eb35..ea8387908 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -1284,35 +1284,6 @@ table {
   }
 }
 
-.social-share-button .ssb-icon {
-  background-image: none;
-  color: #fff;
-  height: $icon-width;
-  line-height: $icon-width;
-  text-align: center;
-  width: $icon-width;
-
-  &::before {
-    font-size: calc(#{$icon-width} / 2);
-    margin-right: 0;
-  }
-
-  &:hover,
-  &:focus {
-    background: #fff;
-  }
-}
-
-.ssb-twitter {
-  @include has-fa-icon(twitter, brands);
-  background: #45b0e3;
-
-  &:hover,
-  &:focus {
-    color: #40a2d1;
-  }
-}
-
 .button.button-facebook {
   @include has-fa-icon(facebook-f, brands);
   background: #ebeef4;
@@ -1323,16 +1294,6 @@ table {
   }
 }
 
-.ssb-facebook {
-  @include has-fa-icon(facebook-f, brands);
-  background: #3b5998;
-
-  &:hover,
-  &:focus {
-    color: #354f88;
-  }
-}
-
 .button.button-google {
   @include has-fa-icon(google, brands);
   background: #fcedea;
@@ -1353,42 +1314,6 @@ table {
   }
 }
 
-.ssb-telegram {
-  @include has-fa-icon(telegram-plane, brands);
-  background: #08c;
-
-  &:hover,
-  &:focus {
-    color: #40a2d1;
-  }
-}
-
-.ssb-whatsapp_app {
-  @include has-fa-icon(whatsapp, brands);
-  background: #43d854;
-
-  &:hover,
-  &:focus {
-    color: #43d854;
-  }
-}
-
-@include breakpoint(medium) {
-
-  .ssb-telegram,
-  .ssb-whatsapp_app {
-    display: none !important;
-  }
-}
-
-.share-supported {
-  text-align: center;
-
-  .social-share-button {
-    display: inline-block;
-  }
-}
-
 // 14. Verification
 // ----------------
 
diff --git a/app/assets/stylesheets/shared/social_share.scss b/app/assets/stylesheets/shared/social_share.scss
new file mode 100644
index 000000000..367c6bec2
--- /dev/null
+++ b/app/assets/stylesheets/shared/social_share.scss
@@ -0,0 +1,75 @@
+.social-share-button .ssb-icon {
+  background-image: none;
+  color: #fff;
+  height: $icon-width;
+  line-height: $icon-width;
+  text-align: center;
+  width: $icon-width;
+
+  &::before {
+    font-size: calc(#{$icon-width} / 2);
+    margin-right: 0;
+  }
+
+  &:hover,
+  &:focus {
+    background: #fff;
+  }
+}
+
+.ssb-twitter {
+  @include has-fa-icon(twitter, brands);
+  background: #45b0e3;
+
+  &:hover,
+  &:focus {
+    color: #40a2d1;
+  }
+}
+
+
+.ssb-facebook {
+  @include has-fa-icon(facebook-f, brands);
+  background: #3b5998;
+
+  &:hover,
+  &:focus {
+    color: #354f88;
+  }
+}
+
+.ssb-telegram {
+  @include has-fa-icon(telegram-plane, brands);
+  background: #08c;
+
+  &:hover,
+  &:focus {
+    color: #40a2d1;
+  }
+}
+
+.ssb-whatsapp_app {
+  @include has-fa-icon(whatsapp, brands);
+  background: #43d854;
+
+  &:hover,
+  &:focus {
+    color: #43d854;
+  }
+}
+
+@include breakpoint(medium) {
+
+  .ssb-telegram,
+  .ssb-whatsapp_app {
+    display: none !important;
+  }
+}
+
+.share-supported {
+  text-align: center;
+
+  .social-share-button {
+    display: inline-block;
+  }
+}