diff --git a/client/components/popover/style.scss b/client/components/popover/style.scss
index 3b891b2..bc0cc87 100644
--- a/client/components/popover/style.scss
+++ b/client/components/popover/style.scss
@@ -35,6 +35,16 @@
 	&.fade {
 		transition: opacity 100ms;
 	}
+	@mixin shared-between-base-and-before(
+		$side, $cross-side, $opposite-side, $cross-opposite-side
+	) {
+		#{$cross-side}: 50% #{"/*rtl:ignore*/"};
+		margin-#{$cross-side}: -10px#{"/*rtl:ignore*/"};
+		border-#{$side}-style: solid#{"/*rtl:ignore*/"};
+		border-#{$opposite-side}: none#{"/*rtl:ignore*/"};
+		border-#{$cross-side}-color: transparent#{"/*rtl:ignore*/"};
+		border-#{$cross-opposite-side}-color: transparent#{"/*rtl:ignore*/"};
+	}
 
 	@mixin popover__arrow( $side ) {
 		$opposite-side: "";
@@ -62,24 +72,26 @@
 		&.is-#{$side} .dops-popover__arrow,
 		&.is-#{$side}-#{$cross-side} .dops-popover__arrow,
 		&.is-#{$side}-#{$cross-opposite-side} .dops-popover__arrow {
-			@mixin shared-between-base-and-before {
-				#{$cross-side}: 50% #{"/*rtl:ignore*/"};
-				margin-#{$cross-side}: -10px#{"/*rtl:ignore*/"};
-				border-#{$side}-style: solid#{"/*rtl:ignore*/"};
-				border-#{$opposite-side}: none#{"/*rtl:ignore*/"};
-				border-#{$cross-side}-color: transparent#{"/*rtl:ignore*/"};
-				border-#{$cross-opposite-side}-color: transparent#{"/*rtl:ignore*/"};
-			}
 
 			#{$opposite-side}: 0 #{"/*rtl:ignore*/"};
-			@include shared-between-base-and-before;
+			@include shared-between-base-and-before(
+				$side,
+				$cross-side,
+				$opposite-side,
+				$cross-opposite-side
+			);
 
 			&::before {
 				#{$opposite-side}: 2px #{"/*rtl:ignore*/"};
 				border: 10px solid $white;
 				content: " ";
 				position: absolute;
-				@include shared-between-base-and-before;
+				@include shared-between-base-and-before(
+					$side,
+					$cross-side,
+					$opposite-side,
+					$cross-opposite-side
+				);
 			}
 		}
 	}