7 files changed, 27 insertions, 26 deletions

diff --git a/client/src/sass/player/context-menu.scss b/client/src/sass/player/context-menu.scss
index 501c68ffd..a207d8a28 100644
--- a/client/src/sass/player/context-menu.scss
+++ b/client/src/sass/player/context-menu.scss
@@ -1,6 +1,6 @@
-@import '_variables';
-@import '_mixins';
-@import './_player-variables';
+@use '_variables';
+@use '_mixins';
+@use './_player-variables';
 
 $context-menu-width: 350px;
 
diff --git a/client/src/sass/player/index.scss b/client/src/sass/player/index.scss
index e674fa2f6..385365b6d 100644
--- a/client/src/sass/player/index.scss
+++ b/client/src/sass/player/index.scss
@@ -1,9 +1,9 @@
-@import './peertube-skin';
-@import './mobile';
-@import './context-menu';
-@import './settings-menu';
-@import './spinner';
-@import './upnext';
-@import './bezels';
-@import './playlist';
-@import './stats';
+@use './peertube-skin';
+@use './mobile';
+@use './context-menu';
+@use './settings-menu';
+@use './spinner';
+@use './upnext';
+@use './bezels';
+@use './playlist';
+@use './stats';
diff --git a/client/src/sass/player/mobile.scss b/client/src/sass/player/mobile.scss
index 26066d218..dde2c3127 100644
--- a/client/src/sass/player/mobile.scss
+++ b/client/src/sass/player/mobile.scss
@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 /* Special mobile style */
 
diff --git a/client/src/sass/player/peertube-skin.scss b/client/src/sass/player/peertube-skin.scss
index 148992089..1a84bd7f0 100644
--- a/client/src/sass/player/peertube-skin.scss
+++ b/client/src/sass/player/peertube-skin.scss
@@ -1,6 +1,7 @@
-@import '_variables';
-@import '_mixins';
-@import './_player-variables';
+@use 'sass:math';
+@use '_variables';
+@use '_mixins';
+@use './_player-variables';
 
 body {
   --embedForegroundColor: #{$primary-foreground-color};
@@ -11,8 +12,8 @@ body {
 @mixin big-play-button-triangle-size($triangle-size) {
   width: $triangle-size;
   height: $triangle-size;
-  top: calc(50% - #{$triangle-size / 2});
-  left: calc(53% - #{($triangle-size / 2)});
+  top: calc(50% - math.div($triangle-size / 2));
+  left: calc(53% - math.div($triangle-size / 2));
 }
 
 .video-js.vjs-peertube-skin {
@@ -69,7 +70,7 @@ body {
     width: $big-play-width;
     height: $big-play-height;
     line-height: $big-play-height;
-    margin-top: -($big-play-height / 2);
+    margin-top: -(math.div($big-play-height / 2));
     transition: 0.4s opacity;
 
     &::-moz-focus-inner {
diff --git a/client/src/sass/player/settings-menu.scss b/client/src/sass/player/settings-menu.scss
index 2183a7dbc..2d0b58a1d 100644
--- a/client/src/sass/player/settings-menu.scss
+++ b/client/src/sass/player/settings-menu.scss
@@ -1,6 +1,6 @@
-@import '_variables';
-@import '_mixins';
-@import './_player-variables';
+@use '_variables';
+@use '_mixins';
+@use './_player-variables';
 
 $setting-transition-duration: 0.15s;
 $setting-transition-easing: ease-out;
diff --git a/client/src/sass/player/spinner.scss b/client/src/sass/player/spinner.scss
index 94f4d1008..bd7efd3b8 100644
--- a/client/src/sass/player/spinner.scss
+++ b/client/src/sass/player/spinner.scss
@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 // Thanks: https://projects.lukehaas.me/css-loaders/
 .vjs-loading-spinner {
diff --git a/client/src/sass/player/stats.scss b/client/src/sass/player/stats.scss
index c6388ed13..18b3f0413 100644
--- a/client/src/sass/player/stats.scss
+++ b/client/src/sass/player/stats.scss
@@ -1,4 +1,4 @@
-@import './_player-variables';
+@use './_player-variables';
 
 $stats-width: 420px;
 $contextmenu-background-color: rgba(0, 0, 0, 0.6);