refactor: extract repeated lines into mixin

src/framework/theme/components/card/flip-card/flip-card.component.scss

@@ -4,6 +4,13 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
+@mixin prefix-backface-visibility($value) {
+  backface-visibility: $value;
+  // Don't remove prefixed property as it's wouldn't be added during the build.
+  // Fixes back card visibility in Safari.
+  -webkit-backface-visibility: $value;
+}
+
 :host {
   display: block;
   perspective: 1200px;
@@ -17,10 +24,7 @@
     .front-container {
       opacity: 0;
       transition: opacity 0s 0.25s;
-      backface-visibility: hidden;
-      // Don't remove prefixed property as it's wouldn't be added during the build.
-      // Fixes back card visibility in Safari.
-      -webkit-backface-visibility: hidden;
+      @include prefix-backface-visibility(hidden);
 
       .flip-button {
         opacity: 0;
@@ -29,10 +33,7 @@
     }
 
     .back-container {
-      backface-visibility: visible;
-      // Don't remove prefixed property as it's wouldn't be added during the build.
-      // Fixes back card visibility in Safari.
-      -webkit-backface-visibility: visible;
+      @include prefix-backface-visibility(visible);
     }
   }
 }
@@ -57,18 +58,12 @@
   }
 
   .front-container {
-    backface-visibility: visible;
-    // Don't remove prefixed property as it's wouldn't be added during the build.
-    // Fixes back card visibility in Safari.
-    -webkit-backface-visibility: visible;
+    @include prefix-backface-visibility(visible);
     transition: opacity 0s 0.2s;
   }
 
   .back-container {
-    backface-visibility: hidden;
-    // Don't remove prefixed property as it's wouldn't be added during the build.
-    // Fixes back card visibility in Safari.
-    -webkit-backface-visibility: hidden;
+    @include prefix-backface-visibility(hidden);
     transform: rotateY(180deg);
   }
 }