Move to sass @use

client/src/app/+about/about-follows/about-follows.component.scss

@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 .subtitle {
   font-size: 18px;

client/src/app/+about/about-instance/about-instance.component.scss

@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 .about-instance-title {
   display: flex;

client/src/app/+about/about-instance/contact-admin-modal.component.scss

@@ -1,5 +1,5 @@
-@import 'variables';
-@import 'mixins';
+@use '_variables';
+@use '_mixins';
 
 .modal-body {
   text-align: left;

client/src/app/+about/about-peertube/about-peertube-contributors.component.scss

@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 .peertube-contributors {
   .framasoft {

client/src/app/+about/about-peertube/about-peertube.component.scss

@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 .root {
   max-width: 1200px;

client/src/app/+accounts/account-video-channels/account-video-channels.component.scss

@@ -1,6 +1,6 @@
-@import '_variables';
-@import '_mixins';
-@import '_miniature';
+@use '_variables';
+@use '_mixins';
+@use '_miniature';
 
 .margin-content {
   @include grid-videos-miniature-margins;

client/src/app/+accounts/accounts.component.scss

@@ -1,7 +1,7 @@
-@import '_variables';
-@import '_mixins';
-@import '_actor';
-@import '_miniature';
+@use '_variables';
+@use '_mixins';
+@use '_actor';
+@use '_miniature';
 
 .root {
   --myGlobalTopPadding: 60px;

client/src/app/+admin/admin.component.scss

@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 my-top-menu-dropdown {
   flex-grow: 1;

client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss

@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 $form-base-input-width: 340px;
 

client/src/app/+admin/follows/followers-list/followers-list.component.scss

@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 a {
   @include disable-default-a-behaviour;

client/src/app/+admin/follows/following-list/following-list.component.scss

@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 a {
   @include disable-default-a-behaviour;

client/src/app/+admin/follows/follows.component.scss

@@ -1,4 +1,4 @@
-@import 'mixins';
+@use '_mixins';
 
 .form-sub-title {
   @include margin-right(30px);

client/src/app/+admin/follows/shared/redundancy-checkbox.component.scss

@@ -1,2 +1,2 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';

client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.scss

@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 a {
   @include disable-default-a-behaviour;

client/src/app/+admin/follows/video-redundancies-list/video-redundancy-information.component.scss

@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 .label {
   display: inline-block;

client/src/app/+admin/moderation/instance-blocklist/instance-account-blocklist.component.scss

@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 .unblock-button {
   @include peertube-button;

client/src/app/+admin/moderation/video-block-list/video-block-list.component.scss

@@ -1,4 +1,4 @@
-@import 'mixins';
+@use '_mixins';
 
 my-global-icon {
   width: 24px;

client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.scss

@@ -1,4 +1,4 @@
-@import 'mixins';
+@use '_mixins';
 
 my-feed {
   @include margin-left(5px);

client/src/app/+admin/plugins/plugin-list-installed/plugin-list-installed.component.scss

@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 .update-button[disabled=true] ::ng-deep .action-button {
   cursor: default !important;

client/src/app/+admin/plugins/plugin-search/plugin-search.component.scss

@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 .search-bar {
   display: flex;

client/src/app/+admin/plugins/plugin-show-installed/plugin-show-installed.component.scss

@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 h2 {
   margin-bottom: 20px;

client/src/app/+admin/plugins/shared/plugin-list.component.scss

@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 .plugin {
   margin: 15px 0;

client/src/app/+admin/plugins/shared/toggle-plugin-type.scss

@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 .toggle-plugin-type {
   display: flex;

client/src/app/+admin/system/debug/debug.component.scss

@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 .root {
   font-size: 15px;

client/src/app/+admin/system/jobs/jobs.component.scss

@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 .select-job-state {
   min-width: 120px;

client/src/app/+admin/system/logs/logs.component.scss

@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 .logs {
   font-family: monospace;

client/src/app/+admin/users/user-edit/user-edit.component.scss

@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 $form-base-input-width: 340px;
 

client/src/app/+admin/users/user-edit/user-password.component.scss

@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 input:not([type=submit]):not([type=checkbox]) {
   @include peertube-input-text(340px);

client/src/app/+admin/users/user-list/user-list.component.scss

@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 .add-button {
   @include create-button;

client/src/app/+login/login.component.scss

@@ -1,8 +1,8 @@
-@import '_variables';
-@import '_mixins';
-@import './_bootstrap-variables';
-@import '~bootstrap/scss/functions';
-@import '~bootstrap/scss/variables';
+@use '_variables';
+@use '_mixins';
+@use './_bootstrap-variables';
+@use '~bootstrap/scss/functions';
+@use '~bootstrap/scss/variables';
 
 label {
   display: block;

client/src/app/+my-account/my-account-applications/my-account-applications.component.scss

@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 label {
   font-weight: $font-regular;

client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss

@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 .header {
   display: flex;

client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.scss

@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 label {
   font-weight: $font-regular;

client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss

@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 label {
   font-weight: $font-regular;

client/src/app/+my-account/my-account-settings/my-account-danger-zone/my-account-danger-zone.component.scss

@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 .delete-me {
   button {

client/src/app/+my-account/my-account-settings/my-account-notification-preferences/my-account-notification-preferences.component.scss

@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 .custom-row {
   display: flex;

client/src/app/+my-account/my-account-settings/my-account-profile/my-account-profile.component.scss

@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 label {
   font-weight: $font-regular;

client/src/app/+my-account/my-account-settings/my-account-settings.component.scss

@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 .account-title {
   @include settings-big-title;

client/src/app/+my-account/my-account.component.scss

@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 .row {
   @include sub-menu-h1;

client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.scss

@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 label {
   font-weight: $font-regular;

client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss

@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 h1 my-global-icon {
   position: relative;

client/src/app/+my-library/my-history/my-history.component.scss

@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 .no-history {
   display: flex;

client/src/app/+my-library/my-library.component.scss

@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 .row {
   @include sub-menu-h1;

client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.scss

@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 .peertube-select-container {
   @include peertube-select-container(350px);

client/src/app/+my-library/my-ownership/my-ownership.component.scss

@@ -1,5 +1,5 @@
-@import 'miniature';
-@import 'mixins';
+@use '_miniature';
+@use '_mixins';
 
 .chip {
   @include chip;

client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss

@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 input[type=text] {
   @include peertube-input-text(300px);

client/src/app/+my-library/my-video-imports/my-video-imports.component.scss

@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 pre {
   font-size: 11px;

client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.scss

@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 label {
   font-weight: $font-regular;

client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss

@@ -1,6 +1,6 @@
-@import '_variables';
-@import '_mixins';
-@import '_miniature';
+@use '_variables';
+@use '_mixins';
+@use '_miniature';
 
 .root {
   display: grid;

client/src/app/+my-library/my-video-playlists/my-video-playlists.component.scss

@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 h1 {
   display: flex;

client/src/app/+my-library/my-videos/modals/video-change-ownership.component.scss

@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 p-autocomplete {
   display: block;

client/src/app/+my-library/my-videos/my-videos.component.scss

@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 input[type=text] {
   @include peertube-input-text(300px);

client/src/app/+page-not-found/page-not-found.component.scss

@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 .root {
   @include margin-left(auto);

client/src/app/+remote-interaction/remote-interaction.component.scss

@@ -1,2 +1,2 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';

client/src/app/+reset-password/reset-password.component.scss

@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 input:not([type=submit]) {
   @include peertube-input-text(340px);

client/src/app/+search/search-filters.component.scss

@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 form {
   margin-top: 40px;

client/src/app/+search/search.component.scss

@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 @mixin build-channel-img-size ($video-img-width) {
   $image-size: min(130px, $video-img-width);

client/src/app/+signup/+register/custom-stepper.component.scss

@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 $grey-color: #9CA3AB;
 $index-block-height: 32px;

client/src/app/+signup/+register/register.component.scss

@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 .alert {
   font-size: 15px;

client/src/app/+signup/+verify-account/verify-account-ask-send-email/verify-account-ask-send-email.component.scss

@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 input:not([type=submit]) {
   @include peertube-input-text(340px);

client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss

@@ -1,6 +1,6 @@
-@import '_variables';
-@import '_mixins';
-@import '_miniature';
+@use '_variables';
+@use '_mixins';
+@use '_miniature';
 
 .playlists {
   display: flex;

client/src/app/+video-channels/video-channels.component.scss

@@ -1,7 +1,7 @@
-@import '_variables';
-@import '_mixins';
-@import '_actor';
-@import '_miniature';
+@use '_variables';
+@use '_mixins';
+@use '_actor';
+@use '_miniature';
 
 .root {
   --myGlobalTopPadding: 60px;

client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.scss

@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 label {
   font-weight: $font-regular;

client/src/app/+videos/+video-edit/shared/video-edit.component.scss

@@ -1,5 +1,5 @@
-@import 'variables';
-@import 'mixins';
+@use '_variables';
+@use '_mixins';
 
 label,
 my-dynamic-form-field ::ng-deep label {

client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.scss

@@ -1,5 +1,5 @@
-@import 'variables';
-@import 'mixins';
+@use '_variables';
+@use '_mixins';
 
 .first-step-block {
   .torrent-or-magnet {

client/src/app/+videos/+video-edit/video-add-components/video-send.scss

@@ -1,5 +1,5 @@
-@import 'variables';
-@import 'mixins';
+@use '_variables';
+@use '_mixins';
 
 $width-size: 190px;
 

client/src/app/+videos/+video-edit/video-add-components/video-upload.component.scss

@@ -1,5 +1,5 @@
-@import 'variables';
-@import 'mixins';
+@use '_variables';
+@use '_mixins';
 
 .first-step-block {
   .form-group-channel {

client/src/app/+videos/+video-edit/video-add.component.scss

@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 $border-width: 3px;
 $border-type: solid;

client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss

@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 $markdown-icon-height: 18px;
 $markdown-icon-width: 30px;

client/src/app/+videos/+video-watch/comment/video-comment.component.scss

@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 .root-comment {
   font-size: 15px;

client/src/app/+videos/+video-watch/comment/video-comments.component.scss

@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 #highlighted-comment {
   margin-bottom: 25px;

client/src/app/+videos/+video-watch/player-styles.component.scss

@@ -1,4 +1,4 @@
-@import 'node_modules/video.js/dist/video-js';
+@use 'node_modules/video.js/dist/video-js';
 
 $assets-path: '../../assets/';
-@import '../../../sass/player/index';
+@use '../../../sass/player/index';

client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.scss

@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 .title-page-container {
   display: flex;

client/src/app/+videos/+video-watch/video-avatar-channel.component.scss

@@ -1,4 +1,4 @@
-@import '_mixins';
+@use '_mixins';
 
 @mixin main {
   @include actor-avatar-size(35px);

client/src/app/+videos/+video-watch/video-watch-playlist.component.scss

@@ -1,7 +1,7 @@
-@import '_variables';
-@import '_mixins';
-@import '_bootstrap-variables';
-@import '_miniature';
+@use '_variables';
+@use '_mixins';
+@use '_bootstrap-variables';
+@use '_miniature';
 
 .playlist {
   min-width: 200px;

client/src/app/+videos/+video-watch/video-watch.component.scss

@@ -1,7 +1,7 @@
-@import '_variables';
-@import '_mixins';
-@import '_bootstrap-variables';
-@import '_miniature';
+@use '_variables';
+@use '_mixins';
+@use '_bootstrap-variables';
+@use '_miniature';
 
 $player-factor: 16/9;
 $video-info-margin-left: 44px;

client/src/app/+videos/video-list/overview/video-overview.component.scss

@@ -1,6 +1,6 @@
-@import '_variables';
-@import '_mixins';
-@import '_miniature';
+@use '_variables';
+@use '_mixins';
+@use '_miniature';
 
 .section-title {
   // make the element span a full grid row within .videos grid

client/src/app/app.component.scss

@@ -1,7 +1,5 @@
-@import '_variables';
-@import '_mixins';
-@import '~bootstrap/scss/functions';
-@import '~bootstrap/scss/variables';
+@use '_variables';
+@use '_mixins';
 
 .peertube-container {
   padding-bottom: 20px;

client/src/app/core/hotkeys/hotkeys.component.scss

@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 .cfp-hotkeys-container {
   display: flex !important;

client/src/app/header/header.component.scss

@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 my-search-typeahead {
   @include margin-right(15px);

client/src/app/header/search-typeahead.component.scss

@@ -1,7 +1,5 @@
-@import '_mixins';
-@import '_variables';
-@import '_bootstrap-variables';
-@import '~bootstrap/scss/mixins/_breakpoints';
+@use '_mixins';
+@use '_variables';
 
 #search-video {
   @include peertube-input-text($search-input-width);

client/src/app/header/suggestion.component.scss

@@ -1,4 +1,4 @@
-@import '_mixins';
+@use '_mixins';
 
 a {
   @include disable-default-a-behaviour;

client/src/app/menu/language-chooser.component.scss

@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 .help-to-translate {
   @include peertube-button-link;

client/src/app/menu/menu.component.scss

@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 $menu-link-icon-size: 22px;
 $menu-link-icon-margin-right: 18px;

client/src/app/menu/notification.component.scss

@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 .content {
   scrollbar-color: auto;

client/src/app/modal/confirm.component.scss

@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 .modal-body {
   font-size: 15px;

client/src/app/modal/custom-modal.component.scss

@@ -1,5 +1,5 @@
-@import '_mixins';
-@import '_variables';
+@use '_mixins';
+@use '_variables';
 
 .modal-body {
   font-size: 15px;

client/src/app/modal/instance-config-warning-modal.component.scss

@@ -1,5 +1,5 @@
-@import '_mixins';
-@import '_variables';
+@use '_mixins';
+@use '_variables';
 
 .modal-body {
   font-size: 15px;

client/src/app/modal/welcome-modal.component.scss

@@ -1,5 +1,5 @@
-@import '_mixins';
-@import '_variables';
+@use '_mixins';
+@use '_variables';
 
 .modal-body {
   font-size: 15px;

client/src/app/shared/shared-abuse-list/abuse-details.component.scss

@@ -1,6 +1,6 @@
-@import 'variables';
-@import 'mixins';
-@import 'miniature';
+@use '_variables';
+@use '_mixins';
+@use '_miniature';
 
 .comment-html {
   background-color: #ececec;

client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss

@@ -1,5 +1,5 @@
-@import 'variables';
-@import 'mixins';
+@use '_variables';
+@use '_mixins';
 
 form {
   margin: 20px 20px 0 0;

client/src/app/shared/shared-abuse-list/moderation-comment-modal.component.scss

@@ -1,5 +1,5 @@
-@import 'variables';
-@import 'mixins';
+@use '_variables';
+@use '_mixins';
 
 textarea {
   @include peertube-textarea(100%, 100px);

client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss

@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 .actor {
   display: flex;

client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.scss

@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 .banner-placeholder {
   @include block-ratio('> div, > img', $banner-inverted-ratio);

client/src/app/shared/shared-actor-image-edit/actor-image-edit.scss

@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 .actor ::ng-deep .popover-image-info .popover-body {
   padding: 0;

client/src/app/shared/shared-actor-image/actor-avatar.component.scss

@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 .avatar {
   --avatarSize: 100%;

client/src/app/shared/shared-custom-markup/peertube-custom-tags/playlist-miniature-markup.component.scss

@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 my-video-playlist-miniature {
   display: inline-block;

client/src/app/shared/shared-custom-markup/peertube-custom-tags/video-miniature-markup.component.scss

@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 my-video-miniature {
   display: inline-block;

client/src/app/shared/shared-forms/advanced-input-filter.component.scss

@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 input {
   @include peertube-input-text(250px);

client/src/app/shared/shared-forms/dynamic-form-field.component.scss

@@ -1,5 +1,5 @@
-@import '_variables';
-@import '_mixins';
+@use '_variables';
+@use '_mixins';
 
 input:not([type=submit]) {
   @include peertube-input-text(340px);