From efab914d29aed90f342c657c984dce0b06c7351a Mon Sep 17 00:00:00 2001
From: vykes-mac <47489215+vykes-mac@users.noreply.github.com>
Date: Wed, 21 Dec 2022 10:58:08 -0500
Subject: [PATCH] Base Styles: Extract long-content-fade to its own file so it
 can be imported and reused. (#46485)

Co-authored-by: Daniel Bachhuber <daniel.bachhuber@automattic.com>
---
 packages/base-styles/_long-content-fade.scss | 61 +++++++++++++++++++
 packages/base-styles/_mixins.scss            | 64 +-------------------
 2 files changed, 62 insertions(+), 63 deletions(-)
 create mode 100644 packages/base-styles/_long-content-fade.scss

diff --git a/packages/base-styles/_long-content-fade.scss b/packages/base-styles/_long-content-fade.scss
new file mode 100644
index 00000000000000..d33a2aede366df
--- /dev/null
+++ b/packages/base-styles/_long-content-fade.scss
@@ -0,0 +1,61 @@
+/**
+ * Long content fade mixin
+ *
+ * Creates a fading overlay to signify that the content is longer
+ * than the space allows.
+ */
+
+@mixin long-content-fade($direction: right, $size: 20%, $color: #fff, $edge: 0, $z-index: false) {
+	content: "";
+	display: block;
+	position: absolute;
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	pointer-events: none;
+
+	@if $z-index {
+		z-index: $z-index;
+	}
+
+	@if $direction == "bottom" {
+		background: linear-gradient(to top, transparent, $color 90%);
+		left: $edge;
+		right: $edge;
+		top: $edge;
+		bottom: calc(100% - $size);
+		width: auto;
+	}
+
+	@if $direction == "top" {
+		background: linear-gradient(to bottom, transparent, $color 90%);
+		top: calc(100% - $size);
+		left: $edge;
+		right: $edge;
+		bottom: $edge;
+		width: auto;
+	}
+
+	@if $direction == "left" {
+		background: linear-gradient(to left, transparent, $color 90%);
+		top: $edge;
+		left: $edge;
+		bottom: $edge;
+		right: auto;
+		width: $size;
+		height: auto;
+	}
+
+	@if $direction == "right" {
+		background: linear-gradient(to right, transparent, $color 90%);
+		top: $edge;
+		bottom: $edge;
+		right: $edge;
+		left: auto;
+		width: $size;
+		height: auto;
+	}
+}
diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss
index 9eee5820eba811..630456b5f59892 100644
--- a/packages/base-styles/_mixins.scss
+++ b/packages/base-styles/_mixins.scss
@@ -1,4 +1,5 @@
 @import "./functions";
+@import "./long-content-fade";
 
 /**
  * Breakpoint mixins
@@ -52,69 +53,6 @@
 	}
 }
 
-
-/**
- * Long content fade mixin
- *
- * Creates a fading overlay to signify that the content is longer
- * than the space allows.
- */
-
-@mixin long-content-fade($direction: right, $size: 20%, $color: #fff, $edge: 0, $z-index: false) {
-	content: "";
-	display: block;
-	position: absolute;
-	-webkit-touch-callout: none;
-	-webkit-user-select: none;
-	-khtml-user-select: none;
-	-moz-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-	pointer-events: none;
-
-	@if $z-index {
-		z-index: $z-index;
-	}
-
-	@if $direction == "bottom" {
-		background: linear-gradient(to top, transparent, $color 90%);
-		left: $edge;
-		right: $edge;
-		top: $edge;
-		bottom: calc(100% - $size);
-		width: auto;
-	}
-
-	@if $direction == "top" {
-		background: linear-gradient(to bottom, transparent, $color 90%);
-		top: calc(100% - $size);
-		left: $edge;
-		right: $edge;
-		bottom: $edge;
-		width: auto;
-	}
-
-	@if $direction == "left" {
-		background: linear-gradient(to left, transparent, $color 90%);
-		top: $edge;
-		left: $edge;
-		bottom: $edge;
-		right: auto;
-		width: $size;
-		height: auto;
-	}
-
-	@if $direction == "right" {
-		background: linear-gradient(to right, transparent, $color 90%);
-		top: $edge;
-		bottom: $edge;
-		right: $edge;
-		left: auto;
-		width: $size;
-		height: auto;
-	}
-}
-
 /**
  * Focus styles.
  */