From aeed08dc46662a0d70e04bcea612a701633736e7 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Wed, 22 Jul 2026 13:00:59 +0200
Subject: Revert "Paths"

This reverts commit cc5329a5f4d3ea91cac93bc7f9b8f943b7ced226.
---
 src/layouts/_card-list.scss | 178 +++++++++++++++++++-------------------------
 1 file changed, 75 insertions(+), 103 deletions(-)

(limited to 'src/layouts/_card-list.scss')

diff --git a/src/layouts/_card-list.scss b/src/layouts/_card-list.scss
index c05b798..f2a6ff5 100644
--- a/src/layouts/_card-list.scss
+++ b/src/layouts/_card-list.scss
@@ -1,44 +1,39 @@
-@use "sass:meta";
-@use "pkg:include-media/dist/include-media" as media;
-@use "pkg:iro-sass/bem";
-@use "pkg:iro-sass/props";
-@use "../props" as *;
+@use 'sass:meta';
+@use 'pkg:include-media/dist/include-media' as media;
+@use 'pkg:iro-sass/src/bem';
+@use 'pkg:iro-sass/src/props';
+@use '../props' as *;
 
-@use "../objects/card.vars" as card;
+@use '../objects/card.vars' as card;
 
-@forward "card-list.vars";
-@use "card-list.vars" as vars;
+@forward 'card-list.vars';
+@use 'card-list.vars' as vars;
 
 @mixin styles {
-	@include materialize-at-root(meta.module-variables("vars"));
+	@include materialize-at-root(meta.module-variables('vars'));
 
-	@include bem.layout("card-list") {
-		display: flex;
+	@include bem.layout('card-list') {
+		display:        flex;
 		flex-direction: column;
-		gap: props.get(vars.$row-gap);
+		gap:            props.get(vars.$row-gap);
 
-		@include bem.modifier("merge") {
-			position: relative;
-			gap: 0;
+		@include bem.modifier('merge') {
+			position:      relative;
+			gap:           0;
 			border-radius: props.get(card.$rounding);
 
-			@include bem.elem("card") {
-				border-color: props.get(card.$border-color) props.get(card.$border-color)
-					props.get(vars.$border-color);
+			@include bem.elem('card') {
+				border-color:    props.get(card.$border-color) props.get(card.$border-color) props.get(vars.$border-color);
 				background-clip: content-box;
-				box-shadow: none;
+				box-shadow:      none;
 
 				&:not(:last-child) {
-					position: relative;
+					position:                relative;
 					border-end-start-radius: 0;
-					border-end-end-radius: 0;
+					border-end-end-radius:   0;
 				}
 
-				@include bem.multi(
-					"&:link, &:visited, &:enabled",
-					"modifier" "interactive",
-					"modifier" "collapsible"
-				) {
+				@include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive', 'modifier' 'collapsible') {
 					&:hover,
 					&:active,
 					&:focus-visible {
@@ -51,28 +46,19 @@
 				}
 
 				@include bem.next-twin-elem {
-					margin-block-start: calc(-1 * props.get(card.$border-width));
-					border-block-start-color: transparent;
+					margin-block-start:        calc(-1 * props.get(card.$border-width));
+					border-block-start-color:  transparent;
 					border-start-start-radius: 0;
-					border-start-end-radius: 0;
+					border-start-end-radius:   0;
 
-					@include bem.multi(
-						"&:link, &:visited, &:enabled",
-						"modifier" "interactive",
-						"modifier" "collapsible"
-					) {
+					@include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive', 'modifier' 'collapsible') {
 						&:hover,
 						&:active {
 							border-block-start-color: props.get(card.$hover--border-color);
 						}
 
 						&:focus-visible {
-							margin-block-start: calc(
-								-1 *
-									props.get(card.$border-width) - props.get(
-										card.$key-focus--border-width
-									)
-							);
+							margin-block-start: calc(-1 * props.get(card.$border-width) - props.get(card.$key-focus--border-width));
 						}
 					}
 				}
@@ -81,11 +67,7 @@
 					border-block-end-color: props.get(card.$border-color);
 				}
 
-				@include bem.multi(
-					"&:link, &:visited, &:enabled",
-					"modifier" "interactive",
-					"modifier" "collapsible"
-				) {
+				@include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive', 'modifier' 'collapsible') {
 					&:hover,
 					&:active {
 						border-color: props.get(card.$hover--border-color);
@@ -93,20 +75,17 @@
 
 					&:focus-visible {
 						border-color: props.get(card.$hover--bg-color);
-						box-shadow: 0 0 0
-							calc(
-								props.get(card.$key-focus--border-width) +
-									props.get(card.$key-focus--outline-width)
-							)
+						box-shadow:
+							0 0 0
+							calc(props.get(card.$key-focus--border-width) + props.get(card.$key-focus--outline-width))
 							props.get(card.$key-focus--outline-color);
 					}
 				}
 			}
 
-			@include bem.modifier("borderless") {
-				@include bem.elem("card") {
-					border-color: props.get(card.$bg-color) props.get(card.$bg-color)
-						props.get(vars.$border-color);
+			@include bem.modifier('borderless') {
+				@include bem.elem('card') {
+					border-color: props.get(card.$bg-color) props.get(card.$bg-color) props.get(vars.$border-color);
 
 					@include bem.next-twin-elem {
 						border-block-start-color: transparent;
@@ -116,11 +95,7 @@
 						border-block-end-color: props.get(card.$bg-color);
 					}
 
-					@include bem.multi(
-						"&:link, &:visited, &:enabled",
-						"modifier" "interactive",
-						"modifier" "collapsible"
-					) {
+					@include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive', 'modifier' 'collapsible') {
 						&:hover,
 						&:active {
 							border-color: props.get(card.$hover--border-color);
@@ -133,87 +108,84 @@
 				}
 			}
 
-			@include bem.modifier("shadow") {
-				box-shadow: props.get(vars.$shadow-x) props.get(vars.$shadow-y)
-					props.get(vars.$shadow-blur) props.get(vars.$shadow-grow)
+			@include bem.modifier('shadow') {
+				box-shadow:
+					props.get(vars.$shadow-x)
+					props.get(vars.$shadow-y)
+					props.get(vars.$shadow-blur)
+					props.get(vars.$shadow-grow)
 					props.get(card.$shadow-color);
 			}
 
-			@include bem.modifier("interactive") {
-				transition:
-					transform 0.2s,
-					box-shadow 0.2s;
+			@include bem.modifier('interactive') {
+				transition: transform .2s, box-shadow .2s;
 
 				&:hover,
 				&:active,
 				&:focus-within {
 					box-shadow: none;
-					transform: translateY(props.get(card.$hover--offset-b));
+					transform:  translateY(props.get(card.$hover--offset-b));
 				}
 			}
 		}
 
-		@include bem.modifier("quiet") {
+		@include bem.modifier('quiet') {
 			row-gap: props.get(vars.$quiet--row-gap);
 		}
 
-		@each $mod, $row-gap, $col-gap, $col-width, $quiet--row-gap,
-			$breakpoint in vars.$grid-layouts
-		{
+		@each $mod, $row-gap, $col-gap, $col-width, $quiet--row-gap, $breakpoint in vars.$grid-layouts {
 			@include bem.modifier($mod) {
-				display: grid;
+				display:               grid;
 				grid-template-columns: repeat(auto-fill, minmax(props.get($col-width), 1fr));
-				gap: props.get($row-gap) props.get($col-gap);
+				gap:                   props.get($row-gap) props.get($col-gap);
 
-				@include bem.modifier("quiet") {
+				@include bem.modifier('quiet') {
 					row-gap: props.get($quiet--row-gap);
 				}
 
-				@include media.media("<=#{$breakpoint}") {
+				@include media.media('<=#{$breakpoint}') {
 					display: flex;
 				}
 			}
 		}
 
-		@each $mod, $row-gap, $col-gap, $col-width, $quiet--row-gap,
-			$breakpoint in vars.$flex-layouts
-		{
+		@each $mod, $row-gap, $col-gap, $col-width, $quiet--row-gap, $breakpoint in vars.$flex-layouts {
 			@include bem.modifier($mod) {
-				display: flex;
+				display:   flex;
 				flex-flow: row wrap;
-				gap: props.get($row-gap) props.get($col-gap);
+				gap:       props.get($row-gap) props.get($col-gap);
 
-				@include bem.modifier("quiet") {
+				@include bem.modifier('quiet') {
 					row-gap: props.get($quiet--row-gap);
 				}
 
-				@include bem.elem("card") {
-					flex: 0.1 0 auto;
+				@include bem.elem('card') {
+					flex:        0.1 0 auto;
 					inline-size: props.get($col-width);
 				}
 
-				@include media.media("<=#{$breakpoint}") {
+				@include media.media('<=#{$breakpoint}') {
 					flex-flow: column nowrap;
 
-					@include bem.elem("card") {
+					@include bem.elem('card') {
 						inline-size: auto;
 					}
 				}
 			}
 		}
 
-		@include bem.modifier("masonry") {
-			display: block;
-			columns: auto props.get(vars.$masonry--col-width);
+		@include bem.modifier('masonry') {
+			display:    block;
+			columns:    auto props.get(vars.$masonry--col-width);
 			column-gap: props.get(vars.$masonry--col-gap);
 
-			@include bem.elem("card") {
+			@include bem.elem('card') {
 				margin-block-end: props.get(vars.$masonry--row-gap);
-				break-inside: avoid;
+				break-inside:     avoid;
 			}
 
-			@include bem.modifier("quiet") {
-				@include bem.elem("card") {
+			@include bem.modifier('quiet') {
+				@include bem.elem('card') {
 					margin-block-end: props.get(vars.$masonry--quiet--row-gap);
 				}
 			}
@@ -222,34 +194,34 @@
 		@each $mod, $row-gap, $col-gap, $row-height, $quiet--row-gap in vars.$masonry-h-layouts {
 			@include bem.modifier($mod) {
 				flex-flow: row wrap;
-				gap: props.get($row-gap) props.get($col-gap);
+				gap:       props.get($row-gap) props.get($col-gap);
 
-				@include bem.modifier("no-flush") {
+				@include bem.modifier('no-flush') {
 					&::after {
-						display: block;
-						flex: 1 0 auto;
+						display:     block;
+						flex:        1 0 auto;
 						inline-size: props.get($row-height);
-						content: "";
+						content:     '';
 					}
 				}
 
-				@include bem.elem("card") {
-					flex: 1 0 auto;
+				@include bem.elem('card') {
+					flex:            1 0 auto;
 					max-inline-size: 100%;
 				}
 
-				@include bem.elem("card-image") {
+				@include bem.elem('card-image') {
 					block-size: props.get($row-height);
 				}
 
-				@include bem.modifier("quiet") {
+				@include bem.modifier('quiet') {
 					row-gap: props.get($quiet--row-gap);
 				}
 			}
 		}
 
-		@include bem.modifier("aspect-5\\/4") {
-			@include bem.elem("card-image") {
+		@include bem.modifier('aspect-5\\/4') {
+			@include bem.elem('card-image') {
 				aspect-ratio: 5 / 4;
 			}
 		}
-- 
cgit v1.3.1