Replace @import with @use (#7424)

Author: laske185

packages/components/src/components/@shared/_kol-button-mixin.scss

@@ -1,12 +1,13 @@
-@import 'mixins';
-@import '../tooltip/style';
+@use 'mixins' as *;
+@use '../tooltip/style' as *;
 
 @mixin kol-button-styles($block-classname) {
 	@layer kol-component {
 		:host {
 			//Needed for custom width
 			display: inline-block;
 		}
+
 		.#{$block-classname} {
 			font-style: rem(16);
 			display: inline-flex;

packages/components/src/components/@shared/_kol-link-mixin.scss

@@ -1,5 +1,5 @@
-@import 'mixins';
-@import '../tooltip/style';
+@use 'mixins' as *;
+@use '../tooltip/style' as *;
 
 @mixin kol-link-styles($block-classname) {
 	@layer kol-component {

packages/components/src/components/@shared/_kol-table-stateless-mixin.scss

@@ -1,6 +1,6 @@
-@import '../@shared/mixins';
-@import '../host-display-block';
-@import '../tooltip/style.scss';
+@use '../@shared/mixins' as *;
+@use '../host-display-block' as *;
+@use '../tooltip/style.scss' as *;
 
 @mixin kol-table-stateless-styles {
 	@layer kol-component {

packages/components/src/components/a11y.scss

@@ -1,4 +1,4 @@
-@import '@shared/mixins';
+@use '@shared/mixins' as *;
 
 /*
  * This file contains all rules for accessibility.

packages/components/src/components/abbr/style.scss

@@ -1,6 +1,6 @@
-@import '../@shared/mixins';
-@import '../../styles/global';
-@import '../tooltip/style.scss';
+@use '../@shared/mixins' as *;
+@use '../../styles/global' as *;
+@use '../tooltip/style.scss' as *;
 
 @layer kol-component {
 	.kol-abbr {

packages/components/src/components/accordion/style.scss

@@ -1,7 +1,7 @@
-@import '../@shared/mixins';
-@import '../../styles/global';
-@import '../host-display-block';
-@import '../../functional-components/Collapsible/collapsible';
+@use '../@shared/mixins' as *;
+@use '../../styles/global' as *;
+@use '../host-display-block' as *;
+@use '../../functional-components/Collapsible/collapsible' as *;
 
 @layer kol-component {
 	.kol-accordion {

packages/components/src/components/alert/style.scss

@@ -1,6 +1,6 @@
-@import '../../styles/global';
-@import '../../styles/kol-alert-mixin';
-@import '../@shared/mixins';
+@use '../../styles/global' as *;
+@use '../../styles/kol-alert-mixin' as *;
+@use '../@shared/mixins' as *;
 
 @include kol-alert;
 

packages/components/src/components/avatar/style.scss

@@ -1,6 +1,6 @@
-@import '../@shared/mixins';
-@import '../../styles/global';
-@import '../host-display-block';
+@use '../@shared/mixins' as *;
+@use '../../styles/global' as *;
+@use '../host-display-block' as *;
 
 @layer kol-component {
 	.kol-avatar {

packages/components/src/components/badge/style.scss

@@ -1,6 +1,6 @@
-@import '../@shared/mixins';
-@import '../../styles/global';
-@import '../tooltip/style.scss';
+@use '../@shared/mixins' as *;
+@use '../../styles/global' as *;
+@use '../tooltip/style.scss' as *;
 
 @layer kol-component {
 	.kol-badge {

packages/components/src/components/breadcrumb/style.scss

@@ -1,5 +1,5 @@
-@import '../@shared/mixins';
-@import '../../styles/global';
+@use '../@shared/mixins' as *;
+@use '../../styles/global' as *;
 
 @layer kol-component {
 	.kol-breadcrumb {