Move all scss @import to @use/@forward

src/scss/_lg-fonts.scss

@@ -1,3 +1,5 @@
+@use 'lg-variables' as *;
+
 @font-face {
     font-family: 'lg';
     src: url('#{$lg-path-fonts}/lg.woff2?io9a6k') format('woff2'),

src/scss/_lg-mixins.scss

@@ -1,3 +1,5 @@
+@use 'sass:list';
+
 // Vendor Prefixes
 //
 // All vendor mixins are deprecated as of v3.2.0 due to the introduction of
@@ -258,10 +260,10 @@
     $result: ();
 
     @each $prefix in $prefixes {
-        @if index($vendor-prefixed-properties, $property) {
+        @if list.index($vendor-prefixed-properties, $property) {
             $property: -#{$prefix}-#{$property};
         }
-        $result: append($result, $property);
+        $result: list.append($result, $property);
     }
     @return $result;
 }
@@ -270,10 +272,10 @@
     $prefixed: ();
 
     @each $trans in $transition {
-        $prop-name: nth($trans, 1);
+        $prop-name: list.nth($trans, 1);
         $vendor-prop-name: prefix($prop-name, $prefix);
-        $prop-vals: nth($trans, 2);
-        $prefixed: append($prefixed, $vendor-prop-name $prop-vals, comma);
+        $prop-vals: list.nth($trans, 2);
+        $prefixed: list.append($prefixed, $vendor-prop-name $prop-vals, comma);
     }
     @return $prefixed;
 }
@@ -282,17 +284,17 @@
     $transitions: ();
 
     @each $declaration in $values {
-        $prop: nth($declaration, 1);
+        $prop: list.nth($declaration, 1);
         $prop-opts: ();
-        $length: length($declaration);
+        $length: list.length($declaration);
 
         @if $length >= 2 {
             @for $i from 2 through $length {
-                $prop-opts: append($prop-opts, nth($declaration, $i));
+                $prop-opts: list.append($prop-opts, list.nth($declaration, $i));
             }
         }
         $trans: $prop, $prop-opts;
-        $transitions: append($transitions, $trans, comma);
+        $transitions: list.append($transitions, $trans, comma);
     }
     -webkit-transition: trans-prefix($transitions, webkit);
     -moz-transition: trans-prefix($transitions, moz);

src/scss/_lg-theme-default.scss

@@ -1,3 +1,6 @@
+@use 'lg-variables' as *;
+@use 'lg-mixins' as *;
+
 .lg-container {
     font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
         Arial, 'Noto Sans', 'Liberation Sans', sans-serif, 'Apple Color Emoji',

src/scss/lg-autoplay.scss

@@ -1,5 +1,6 @@
-@import 'lg-variables';
-@import 'lg-mixins';
+@use 'lg-variables' as *;
+@use 'lg-mixins' as *;
+
 .lg-progress-bar {
     background-color: $lg-progress-bar-bg;
     height: $lg-progress-bar-height;

src/scss/lg-comments.scss

@@ -1,5 +1,6 @@
-@import 'lg-variables';
-@import 'lg-mixins';
+@use 'lg-variables' as *;
+@use 'lg-mixins' as *;
+
 .lg-comment-box {
     width: 420px;
     max-width: 100%;

src/scss/lg-pager.scss

@@ -1,5 +1,6 @@
-@import 'lg-variables';
-@import 'lg-mixins';
+@use 'lg-variables' as *;
+@use 'lg-mixins' as *;
+
 .lg-outer {
     .lg-pager-outer {
         text-align: center;

src/scss/lg-rotate.scss

@@ -1,5 +1,6 @@
-@import 'lg-variables';
-@import 'lg-mixins';
+@use 'lg-variables' as *;
+@use 'lg-mixins' as *;
+
 .lg-outer {
     .lg-img-rotate {
         position: absolute;
@@ -30,27 +31,32 @@
         }
     }
 }
+
 .lg-rotate-left {
     &:after {
         content: '\e900';
     }
 }
+
 .lg-rotate-right {
     &:after {
         content: '\e901';
     }
 }
+
 .lg-icon {
     &.lg-flip-hor,
     &.lg-flip-ver {
         font-size: 26px;
     }
 }
+
 .lg-flip-ver {
     &:after {
         content: '\e903';
     }
 }
+
 .lg-flip-hor {
     &:after {
         content: '\e902';

src/scss/lg-share.scss

@@ -1,5 +1,6 @@
-@import 'lg-variables';
-@import 'lg-mixins';
+@use 'lg-variables' as *;
+@use 'lg-mixins' as *;
+
 .lg-outer {
     .lg-dropdown-overlay {
         background-color: rgba(0, 0, 0, 0.25);

src/scss/lg-thumbnail.scss

@@ -1,5 +1,6 @@
-@import 'lg-variables';
-@import 'lg-mixins';
+@use 'lg-variables' as *;
+@use 'lg-mixins' as *;
+
 $thumbnails-margin: 5px;
 
 .lg-outer {

src/scss/lg-transitions.scss

@@ -1,32 +1 @@
-@import 'lg-variables';
-@import 'lg-mixins';
-
-@import './transitions/lg-zoom-in';
-@import './transitions/lg-lollipop-rev';
-@import './transitions/lg-slide-skew-ver-cross';
-@import './transitions/lg-lollipop';
-@import './transitions/lg-slide-skew-ver-rev';
-@import './transitions/lg-rotate-rev';
-@import './transitions/lg-slide-skew-ver';
-@import './transitions/lg-rotate';
-@import './transitions/lg-slide-skew';
-@import './transitions/lg-scale-up';
-@import './transitions/lg-slide-vertical-growth';
-@import './transitions/lg-slide-circular-vertical';
-@import './transitions/lg-slide-vertical';
-@import './transitions/lg-slide-circular';
-@import './transitions/lg-soft-zoom';
-@import './transitions/lg-slide-skew-cross-rev';
-@import './transitions/lg-tube';
-@import './transitions/lg-slide-skew-cross';
-@import './transitions/lg-zoom-in-big';
-@import './transitions/lg-slide-skew-only-rev';
-@import './transitions/lg-zoom-in-out';
-@import './transitions/lg-slide-skew-only-y-rev';
-@import './transitions/lg-slide-skew-only-y';
-@import './transitions/lg-zoom-out-big';
-@import './transitions/lg-slide-skew-only';
-@import './transitions/lg-zoom-out-in';
-@import './transitions/lg-slide-skew-rev';
-@import './transitions/lg-zoom-out';
-@import './transitions/lg-slide-skew-ver-cross-rev';
+@use 'transitions';

src/scss/lg-video.scss

@@ -1,5 +1,6 @@
-@import 'lg-variables';
-@import 'lg-mixins';
+@use 'lg-variables' as *;
+@use 'lg-mixins' as *;
+
 .lg-outer {
     .lg-video-cont {
         text-align: center;

src/scss/lg-zoom.scss

@@ -1,5 +1,6 @@
-@import 'lg-variables';
-@import 'lg-mixins';
+@use 'lg-variables' as *;
+@use 'lg-mixins' as *;
+
 .lg-outer {
     // reset transition duration
     &.lg-css3.lg-zoom-dragging {

src/scss/lightgallery-bundle.scss

@@ -14,21 +14,19 @@
 // $lg-progress-bar-bg: #999;
 
 // Core variables and mixins
-@import 'lg-variables';
-@import 'lg-mixins';
-@import 'lg-fonts';
-@import 'lg-theme-default';
-@import 'lg-thumbnail';
-@import 'lg-video';
-@import 'lg-autoplay';
-@import 'lg-zoom';
-@import 'lg-pager';
-@import 'lg-fullscreen';
-@import 'lg-share';
-@import 'lg-comments';
-@import 'lg-rotate';
-@import 'lg-medium-zoom';
-@import 'lg-relative-caption';
+@use 'lg-fonts';
+@use 'lg-theme-default';
+@use 'lg-thumbnail';
+@use 'lg-video';
+@use 'lg-autoplay';
+@use 'lg-zoom';
+@use 'lg-pager';
+@use 'lg-fullscreen';
+@use 'lg-share';
+@use 'lg-comments';
+@use 'lg-rotate';
+@use 'lg-medium-zoom';
+@use 'lg-relative-caption';
 
 // Core
-@import 'lightgallery-core';
+@use 'lightgallery-core';

src/scss/lightgallery-core.scss

@@ -1,5 +1,6 @@
-@import 'lg-variables';
-@import 'lg-mixins';
+@use 'lg-variables' as *;
+@use 'lg-mixins' as *;
+
 // Clearfix
 .lg-group:after {
     content: '';

src/scss/lightgallery.scss

@@ -1,7 +1,5 @@
-@import 'lg-variables';
-@import 'lg-mixins';
-@import 'lg-fonts';
-@import 'lg-theme-default';
+@use 'lg-fonts';
+@use 'lg-theme-default';
 
 // Core
-@import 'lightgallery-core';
+@use 'lightgallery-core';

src/scss/transitions/_index.scss

@@ -0,0 +1,31 @@
+@use '../lg-mixins' as *;
+
+@forward 'lg-zoom-in';
+@forward 'lg-lollipop-rev';
+@forward 'lg-slide-skew-ver-cross';
+@forward 'lg-lollipop';
+@forward 'lg-slide-skew-ver-rev';
+@forward 'lg-rotate-rev';
+@forward 'lg-slide-skew-ver';
+@forward 'lg-rotate';
+@forward 'lg-slide-skew';
+@forward 'lg-scale-up';
+@forward 'lg-slide-vertical-growth';
+@forward 'lg-slide-circular-vertical';
+@forward 'lg-slide-vertical';
+@forward 'lg-slide-circular';
+@forward 'lg-soft-zoom';
+@forward 'lg-slide-skew-cross-rev';
+@forward 'lg-tube';
+@forward 'lg-slide-skew-cross';
+@forward 'lg-zoom-in-big';
+@forward 'lg-slide-skew-only-rev';
+@forward 'lg-zoom-in-out';
+@forward 'lg-slide-skew-only-y-rev';
+@forward 'lg-slide-skew-only-y';
+@forward 'lg-zoom-out-big';
+@forward 'lg-slide-skew-only';
+@forward 'lg-zoom-out-in';
+@forward 'lg-slide-skew-rev';
+@forward 'lg-zoom-out';
+@forward 'lg-slide-skew-ver-cross-rev';

src/scss/transitions/_lg-lollipop-rev.scss

@@ -1,3 +1,5 @@
+@use '../lg-mixins' as *;
+
 .lg-css3 {
     &.lg-lollipop-rev {
         .lg-item {

src/scss/transitions/_lg-lollipop.scss

@@ -1,3 +1,5 @@
+@use '../lg-mixins' as *;
+
 .lg-css3 {
     &.lg-lollipop {
         .lg-item {

src/scss/transitions/_lg-rotate-rev.scss

@@ -1,3 +1,5 @@
+@use '../lg-mixins' as *;
+
 .lg-css3 {
     &.lg-rotate-rev {
         .lg-item {

src/scss/transitions/_lg-rotate.scss

@@ -1,3 +1,5 @@
+@use '../lg-mixins' as *;
+
 .lg-css3 {
     &.lg-rotate {
         .lg-item {

src/scss/transitions/_lg-scale-up.scss

@@ -1,3 +1,5 @@
+@use '../lg-mixins' as *;
+
 .lg-css3 {
     &.lg-scale-up {
         .lg-item {

src/scss/transitions/_lg-slide-circular-vertical.scss

@@ -1,3 +1,5 @@
+@use '../lg-mixins' as *;
+
 .lg-css3 {
     &.lg-slide-circular-vertical {
         .lg-item {

src/scss/transitions/_lg-slide-circular.scss

@@ -1,3 +1,5 @@
+@use '../lg-mixins' as *;
+
 .lg-css3 {
     &.lg-slide-circular {
         .lg-item {

src/scss/transitions/_lg-slide-skew-cross-rev.scss

@@ -1,3 +1,5 @@
+@use '../lg-mixins' as *;
+
 .lg-css3 {
     &.lg-slide-skew-cross-rev {
         .lg-item {

src/scss/transitions/_lg-slide-skew-cross.scss

@@ -1,3 +1,5 @@
+@use '../lg-mixins' as *;
+
 .lg-css3 {
     &.lg-slide-skew-cross {
         .lg-item {

src/scss/transitions/_lg-slide-skew-only-rev.scss

@@ -1,3 +1,5 @@
+@use '../lg-mixins' as *;
+
 .lg-css3 {
     &.lg-slide-skew-only-rev {
         .lg-item {

src/scss/transitions/_lg-slide-skew-only-y-rev.scss

@@ -1,3 +1,5 @@
+@use '../lg-mixins' as *;
+
 .lg-css3 {
     &.lg-slide-skew-only-y-rev {
         .lg-item {

src/scss/transitions/_lg-slide-skew-only-y.scss

@@ -1,3 +1,5 @@
+@use '../lg-mixins' as *;
+
 .lg-css3 {
     &.lg-slide-skew-only-y {
         .lg-item {

src/scss/transitions/_lg-slide-skew-only.scss

@@ -1,3 +1,5 @@
+@use '../lg-mixins' as *;
+
 .lg-css3 {
     &.lg-slide-skew-only {
         .lg-item {

src/scss/transitions/_lg-slide-skew-rev.scss

@@ -1,3 +1,5 @@
+@use '../lg-mixins' as *;
+
 .lg-css3 {
     &.lg-slide-skew-rev {
         .lg-item {

src/scss/transitions/_lg-slide-skew-ver-cross-rev.scss

@@ -1,3 +1,5 @@
+@use '../lg-mixins' as *;
+
 .lg-css3 {
     &.lg-slide-skew-ver-cross-rev {
         .lg-item {

src/scss/transitions/_lg-slide-skew-ver-cross.scss

@@ -1,3 +1,5 @@
+@use '../lg-mixins' as *;
+
 .lg-css3 {
     &.lg-slide-skew-ver-cross {
         .lg-item {

src/scss/transitions/_lg-slide-skew-ver-rev.scss

@@ -1,3 +1,5 @@
+@use '../lg-mixins' as *;
+
 .lg-css3 {
     &.lg-slide-skew-ver-rev {
         .lg-item {