replace less variables

src/app/modules/brand/new-user/new-user.component.less

@@ -1,4 +1,6 @@
-@animation-duration: 20s;
+:host {
+  --animation-duration: 20s;
+}
 
 .frame {
   width: 512px;
@@ -11,10 +13,10 @@
 .brand {
   position: absolute;
   left: 0;
-  animation: @animation-duration brand ease-in-out forwards;
+  animation: var(--animation-duration) brand ease-in-out forwards;
   opacity: 0;
   @media screen and (max-width: 860px) {
-    animation: @animation-duration brand-mobile ease-in-out forwards;
+    animation: var(--animation-duration) brand-mobile ease-in-out forwards;
   }
 }
 
@@ -34,7 +36,7 @@
     @media screen and (max-width: 860px) {
       font-size: 40px;
     }
-    animation: @animation-duration welcome ease-in-out forwards;
+    animation: var(--animation-duration) welcome ease-in-out forwards;
   }
 
   .name {
@@ -43,14 +45,14 @@
     @media screen and (max-width: 860px) {
       font-size: 30px;
     }
-    animation: @animation-duration name ease-in-out forwards;
+    animation: var(--animation-duration) name ease-in-out forwards;
   }
 
   .roles {
     opacity: 0;
     font-size: 20px;
     margin-top: 40px;
-    animation: @animation-duration roles ease-in-out forwards;
+    animation: var(--animation-duration) roles ease-in-out forwards;
   }
 }
 

src/app/modules/shows/list/list-item/list-item.component.less

@@ -1,5 +1,3 @@
-@import "../../../../../styles/styles";
-
 .list-item {
   padding: 5px 20px;
   display: grid;
@@ -14,7 +12,7 @@
   cursor: pointer;
 
   &:hover {
-    background: @primary-color;
+    background: var(--primary-color);
     color: #fff;
   }
 }

src/app/modules/shows/services/show-song.service.ts

@@ -40,21 +40,14 @@ export class ShowSongService {
   public list = (showId: string): Promise<ShowSong[]> => firstValueFrom(this.list$(showId));
 
   public async delete$(showId: string, showSongId: string, index: number): Promise<void> {
-    const [showSong, show] = await Promise.all([
-      this.read(showId, showSongId),
-      firstValueFrom(this.showService.read$(showId)),
-    ]);
+    const [showSong, show] = await Promise.all([this.read(showId, showSongId), firstValueFrom(this.showService.read$(showId))]);
     if (!show) return;
     if (!showSong) return;
 
     const order = [...show.order];
     order.splice(index, 1);
 
-    await Promise.all([
-      this.showSongDataService.delete(showId, showSongId),
-      this.showService.update$(showId, {order}),
-      this.userService.decSongCount(showSong.songId),
-    ]);
+    await Promise.all([this.showSongDataService.delete(showId, showSongId), this.showService.update$(showId, {order}), this.userService.decSongCount(showSong.songId)]);
   }
 
   public update$ = async (showId: string, songId: string, data: Partial<ShowSong>): Promise<void> => await this.showSongDataService.update$(showId, songId, data);

src/app/modules/shows/services/show.service.ts

@@ -30,11 +30,7 @@ export class ShowService {
         () => this.showDataService.list$,
         (user: User | null, shows: Show[]) => ({user, shows})
       ),
-      map(s =>
-        s.shows
-          .filter(show => !show.archived)
-          .filter(show => show.published || (show.owner === s.user?.id && !publishedOnly))
-      )
+      map(s => s.shows.filter(show => !show.archived).filter(show => show.published || (show.owner === s.user?.id && !publishedOnly)))
     );
   }
 

src/app/modules/songs/song-list/song-list.component.less

@@ -1,5 +1,3 @@
-@import "../../../../styles/styles";
-
 .list-item {
   padding: 5px 20px;
   display: grid;
@@ -13,7 +11,7 @@
   cursor: pointer;
 
   &:hover {
-    background: @primary-color;
+    background: var(--primary-color);
     color: #fff;
 
     .warning {

src/app/modules/user/info/users/user/user.component.less

@@ -1,5 +1,3 @@
-@import "../../../../../../styles/styles";
-
 .users {
   display: grid;
   grid-template-columns: 1fr 1fr 40px;
@@ -10,6 +8,6 @@
   cursor: pointer;
 
   &:hover {
-    color: @primary-color;
+    color: var(--primary-color);
   }
 }

src/app/widget-modules/components/application-frame/navigation/filter/filter.component.less

@@ -1,5 +1,3 @@
-@import "../../../../../../styles/styles";
-
 input {
   font-size: 16px;
   background: transparent;
@@ -10,7 +8,7 @@ input {
 
   &:focus {
     outline: none;
-    border-bottom: 1px solid @primary-color;
+    border-bottom: 1px solid var(--primary-color);
   }
 
   @media screen and (max-width: 500px) {

src/app/widget-modules/components/application-frame/navigation/link/link.component.less

@@ -1,5 +1,3 @@
-@import "../../../../../../styles/styles";
-
 a {
   opacity: 0.8;
   display: block;
@@ -10,13 +8,13 @@ a {
   padding: 15px;
   box-sizing: border-box;
   background: transparent;
-  transition: @transition;
+  transition: var(--transition);
   border-color: #222;
 
   fa-icon {
     display: inline-block;
     transform: scale(1);
-    transition: @transition;
+    transition: var(--transition);
   }
 
   @media screen and (max-width: 860px) {
@@ -35,7 +33,7 @@ a {
   }
 
   &.active {
-    border-bottom: 5px solid @primary-color;
+    border-bottom: 5px solid var(--primary-color);
     opacity: 1;
 
     fa-icon {