migrate off of deprecated sass @imports

used `sass-migrator` and some manual intervention to migrate all of the
`@import`s to `@use` statements.

1. needed to prefix all of the `styles/main.scss` imports to use a
   relative path (i.e. `../../../../styles/main.scss`
2. needed to add a `@use "container"` to `styles/tab-container` so it
   could resolve its `@extend`s
    - not sure if this was just an ordering issue or what, but it works

src/sites/clips/styles/clips-main.scss

@@ -1,5 +1,5 @@
-@import 'styles/main.scss';
+@use '../../../../styles/main.scss';
-@import '../../twitch-twilight/styles/mod_card.scss';
+@use '../../twitch-twilight/styles/mod_card.scss';
 
 .tw-root--theme-dark, html {
 	body {

src/sites/player/styles/player-main.scss

@@ -1,4 +1,4 @@
-@import 'styles/main.scss';
+@use '../../../../styles/main.scss';
 
 .video-player__inactive,
 .video-player__overlay[data-controls="false"] {

src/sites/twitch-twilight/styles/main.scss

@@ -1,15 +1,15 @@
-@import 'styles/main.scss';
+@use '../../../../styles/main.scss';
 
-@import 'menu_button';
+@use 'menu_button';
-@import 'player';
+@use 'player';
-@import 'channel';
+@use 'channel';
 
-@import 'chat';
+@use 'chat';
-@import 'directory';
+@use 'directory';
 
-@import 'fixes';
+@use 'fixes';
 
 //@import 'host_options';
-@import 'featured_follow';
+@use 'featured_follow';
-@import 'mod_card';
+@use 'mod_card';
-@import 'easteregg';
+@use 'easteregg';

styles/icons.scss

@@ -1,3 +1,4 @@
+@use "sass:meta";
 @font-face {
 	font-family: 'ffz-fontello';
 	src: url('~res/font/ffz-fontello.woff2') format('woff2'),
@@ -94,7 +95,7 @@
 	}
 }
 
-@import "./fontello/ffz-fontello-codes.scss";
+@include meta.load-css("fontello/ffz-fontello-codes.scss");
 
 .ffz-i-pd-1:before { margin-right: 1rem }
 .ffz-i-pd-2:before { margin-right: 2rem }

styles/main.scss

@@ -1,12 +1,12 @@
-@import 'icons';
+@use 'icons';
-@import 'tooltips';
+@use 'tooltips';
-@import 'widgets';
+@use 'widgets';
-@import 'dialog';
+@use 'dialog';
 
-@import 'native/index';
+@use 'native/index';
-@import 'structure/index';
+@use 'structure/index' as index2;
 
-@import 'chat';
+@use 'chat';
 
 @keyframes ffz-rotateplane {
 	0% { transform: rotateY(90deg) rotateX(180deg) }

styles/native/index.scss

@@ -1,14 +1,14 @@
-@import "button";
+@use "button";
-@import "checkbox";
+@use "checkbox";
-@import "interactable";
+@use "interactable";
-@import "text";
+@use "text";
-@import "link";
+@use "link";
-@import "card";
+@use "card";
-@import "tag";
+@use "tag";
-@import "progress";
+@use "progress";
-@import "tooltip";
+@use "tooltip";
-@import "balloon";
+@use "balloon";
-@import "slider";
+@use "slider";
 
 .tw-line-height-body {
     line-height: 1.5!important

styles/structure/index.scss

@@ -1,4 +1,4 @@
-@import "balloon";
+@use "balloon";
 
 .ffz-avatar {
 	background-color: inherit;

styles/widgets.scss

@@ -1,21 +1,21 @@
-@import "./widgets/container.scss";
+@use "widgets/container.scss";
 
-@import "./widgets/main-menu.scss";
+@use "widgets/main-menu.scss";
-@import "./widgets/menu-container.scss";
+@use "widgets/menu-container.scss";
-@import "./widgets/tab-container.scss";
+@use "widgets/tab-container.scss";
 
-@import "./widgets/key-picker.scss";
+@use "widgets/key-picker.scss";
-@import "./widgets/menu-tree.scss";
+@use "widgets/menu-tree.scss";
-@import "./widgets/profile-selector.scss";
+@use "widgets/profile-selector.scss";
-@import "./widgets/badge-visibility.scss";
+@use "widgets/badge-visibility.scss";
-@import "./widgets/add-ons.scss";
+@use "widgets/add-ons.scss";
 
-@import "./widgets/color-picker.scss";
+@use "widgets/color-picker.scss";
-@import "./widgets/icon-picker.scss";
+@use "widgets/icon-picker.scss";
 
-@import "./widgets/chat-tester.scss";
+@use "widgets/chat-tester.scss";
 
-@import "./widgets/check-box.scss";
+@use "widgets/check-box.scss";
 
 .tw-display-inline { display: inline !important }
 .tw-width-auto { width: auto !important }

styles/widgets/menu-container.scss

@@ -1,3 +1,5 @@
+@use "container";
+
 .ffz--menu-container {
 	@extend .ffz--outer-container;
 	@extend .ffz--inner-container;
@@ -5,7 +7,7 @@
 	position: relative;
 
 	&:not(.border):not(.border-b) {
-		margin-bottom: $spacing;
+		margin-bottom: container.$spacing;
 	}
 
 	& > div {
@@ -19,7 +21,7 @@
 
 	& > header {
 		position: absolute;
-		top: 0; left: $spacing - 0.5rem;
+		top: 0; left: container.$spacing - 0.5rem;
 		transform: translateY(-50%);
 		padding: 0 0.5rem;
 

styles/widgets/tab-container.scss

@@ -1,3 +1,5 @@
+@use "container";
+
 .ffz--tab-container {
 	@extend .ffz--outer-container;