diff --git a/_mantine.scss b/_mantine.scss
new file mode 100644
index 0000000..a3735f1
--- /dev/null
+++ b/_mantine.scss
@@ -0,0 +1,52 @@
+@use 'sass:math';
+
+// Define variables for your breakpoints,
+// values must be the same as in your theme
+$mantine-breakpoint-xs: '36em';
+$mantine-breakpoint-sm: '48em';
+$mantine-breakpoint-md: '62em';
+$mantine-breakpoint-lg: '75em';
+$mantine-breakpoint-xl: '88em';
+
+@function rem($value) {
+  @return #{math.div(math.div($value, $value * 0 + 1), 16)}rem;
+}
+
+@mixin light {
+  [data-mantine-color-scheme='light'] & {
+    @content;
+  }
+}
+
+@mixin dark {
+  [data-mantine-color-scheme='dark'] & {
+    @content;
+  }
+}
+
+@mixin hover {
+  @media (hover: hover) {
+    &:hover {
+      @content;
+    }
+  }
+
+  @media (hover: none) {
+    &:active {
+      @content;
+    }
+  }
+}
+
+// Add direction mixins if you need rtl support
+@mixin rtl {
+  [dir='rtl'] & {
+    @content;
+  }
+}
+
+@mixin ltr {
+  [dir='ltr'] & {
+    @content;
+  }
+}
diff --git a/mixins/_mixins.scss b/mixins/_mixins.scss
deleted file mode 100644
index f754280..0000000
--- a/mixins/_mixins.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-$mantine-breakpoint-xs: '36em';
-$mantine-breakpoint-sm: '48em';
-$mantine-breakpoint-md: '62em';
-$mantine-breakpoint-lg: '75em';
-$mantine-breakpoint-xl: '88em';
-
-@mixin light {
-  [data-mantine-color-scheme='light'] & {
-    @content;
-  }
-}
-
-@mixin dark {
-  [data-mantine-color-scheme='dark'] & {
-    @content;
-  }
-}
diff --git a/next.config.js b/next.config.js
index 9384693..e8ef129 100644
--- a/next.config.js
+++ b/next.config.js
@@ -12,7 +12,6 @@ module.exports = withBundleAnalyzer({
   },
 
   sassOptions: {
-    includePaths: ['./mixins'],
-    prependData: `@import "mixins";`,
+    prependData: `@import "./_mantine.scss";`,
   },
 });