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/objects/_card.scss | 393 ++++++++++++++++++++++---------------------------
 1 file changed, 175 insertions(+), 218 deletions(-)

(limited to 'src/objects/_card.scss')

diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index 3275bc8..b8bc727 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -1,95 +1,84 @@
-@use "sass:meta";
-@use "pkg:iro-sass/bem";
-@use "pkg:iro-sass/props";
-@use "../props" as *;
-@use "avatar.vars" as avatar;
+@use 'sass:meta';
+@use 'pkg:iro-sass/src/bem';
+@use 'pkg:iro-sass/src/props';
+@use '../props' as *;
+@use 'avatar.vars' as avatar;
 
-@forward "card.vars";
-@use "card.vars" as vars;
+@forward 'card.vars';
+@use 'card.vars' as vars;
 
 @mixin styles {
-	@include materialize-at-root(meta.module-variables("vars"));
+	@include materialize-at-root(meta.module-variables('vars'));
 
-	@include bem.object("card") {
-		position: relative;
-		display: flex;
-		flex-direction: column;
+	@include bem.object('card') {
+		position:         relative;
+		display:          flex;
+		flex-direction:   column;
 		background-color: props.get(vars.$bg-color);
-		border: props.get(vars.$border-width) solid transparent;
-		border-color: props.get(vars.$border-color);
-		border-radius: props.get(vars.$rounding);
-		transition:
-			transform 0.2s,
-			background-color 0.2s,
-			border-color 0.2s,
-			box-shadow 0.2s;
-
-		@include bem.multi(
-			"&:link, &:visited, &:enabled",
-			"modifier" "interactive",
-			"modifier" "collapsible"
-		) {
+		border:           props.get(vars.$border-width) solid transparent;
+		border-color:     props.get(vars.$border-color);
+		border-radius:    props.get(vars.$rounding);
+		transition:       transform .2s, background-color .2s, border-color .2s, box-shadow .2s;
+
+		@include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive', 'modifier' 'collapsible') {
 			&:hover,
 			&:active,
 			&:focus-visible {
 				background-color: props.get(vars.$hover--bg-color);
-				border-color: props.get(vars.$hover--border-color);
-				box-shadow: none;
-				transform: translateY(props.get(vars.$hover--offset-b));
+				border-color:     props.get(vars.$hover--border-color);
+				box-shadow:       none;
+				transform:        translateY(props.get(vars.$hover--offset-b));
 			}
 
 			&:focus-visible {
-				margin: calc(-1 * props.get(vars.$key-focus--border-width));
-				outline: props.get(vars.$key-focus--border-color) solid
-					props.get(vars.$key-focus--border-width);
-				border: calc(
-						props.get(vars.$key-focus--border-offset) + props.get(vars.$border-width)
-					)
-					solid transparent;
-				border-radius: calc(
-					props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)
-				);
-				box-shadow: 0 0 0
-					calc(
-						props.get(vars.$key-focus--border-width) +
-							props.get(vars.$key-focus--outline-width)
-					)
+				margin:        calc(-1 * props.get(vars.$key-focus--border-width));
+				outline:       props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
+				border:        calc(props.get(vars.$key-focus--border-offset) + props.get(vars.$border-width)) solid transparent;
+				border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
+				box-shadow:
+					0 0 0
+					calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
 					props.get(vars.$key-focus--outline-color);
-				transition: transform 0.2s;
+				transition:    transform .2s;
 			}
 		}
 
-		@include bem.modifier("borderless") {
+		@include bem.modifier('borderless') {
 			border-color: props.get(vars.$bg-color);
 		}
 
-		@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(vars.$shadow-color);
 
-			@include bem.modifier("quiet") {
-				@include bem.elem("image") {
-					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('quiet') {
+				@include bem.elem('image') {
+					box-shadow:
+						props.get(vars.$shadow-x)
+						props.get(vars.$shadow-y)
+						props.get(vars.$shadow-blur)
+						props.get(vars.$shadow-grow)
 						props.get(vars.$shadow-color);
 				}
 			}
 		}
 
-		@include bem.modifier("highlight") {
+		@include bem.modifier('highlight') {
 			margin: calc(props.get(vars.$border-width) - props.get(vars.$highlight--border-width));
 			border-color: props.get(vars.$highlight--border-color);
 			border-width: props.get(vars.$highlight--border-width);
-			box-shadow: props.get(vars.$highlight--shadow-x) props.get(vars.$highlight--shadow-y)
-				props.get(vars.$highlight--shadow-blur) props.get(vars.$highlight--shadow-grow)
+			box-shadow:
+				props.get(vars.$highlight--shadow-x)
+				props.get(vars.$highlight--shadow-y)
+				props.get(vars.$highlight--shadow-blur)
+				props.get(vars.$highlight--shadow-grow)
 				props.get(vars.$highlight--shadow-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(vars.$highlight--border-color);
@@ -97,238 +86,207 @@
 			}
 		}
 
-		@include bem.elem("avatar") {
-			margin-block-start: props.get(vars.$pad-b);
+		@include bem.elem('avatar') {
+			margin-block-start:  props.get(vars.$pad-b);
 			margin-inline-start: props.get(vars.$pad-i);
 		}
 
-		@include bem.elem("image") {
-			position: relative;
-			display: block;
-			flex: 0 0 auto;
-			inline-size: calc(100% + 2 * props.get(vars.$border-width));
-			margin: calc(-1 * props.get(vars.$border-width));
-			overflow: hidden;
-			object-fit: cover;
-			transition:
-				background-color 0.2s,
-				transform 0.2s,
-				opacity 0.2s;
+		@include bem.elem('image') {
+			position:      relative;
+			display:       block;
+			flex:          0 0 auto;
+			inline-size:   calc(100% + 2 * props.get(vars.$border-width));
+			margin:        calc(-1 * props.get(vars.$border-width));
+			overflow:      hidden;
+			object-fit:    cover;
+			transition:    background-color .2s, transform .2s, opacity .2s;
 
 			&:first-child {
-				border-start-start-radius: calc(
-					props.get(vars.$rounding) - props.get(vars.$border-width)
-				);
-				border-start-end-radius: calc(
-					props.get(vars.$rounding) - props.get(vars.$border-width)
-				);
+				border-start-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
+				border-start-end-radius:   calc(props.get(vars.$rounding) - props.get(vars.$border-width));
 			}
 
 			&:last-child {
-				border-end-start-radius: calc(
-					props.get(vars.$rounding) - props.get(vars.$border-width)
-				);
-				border-end-end-radius: calc(
-					props.get(vars.$rounding) - props.get(vars.$border-width)
-				);
+				border-end-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
+				border-end-end-radius:   calc(props.get(vars.$rounding) - props.get(vars.$border-width));
 			}
 
-			@include bem.next-elem("avatar") {
-				margin-block-start: calc(-0.7 * props.get(avatar.$size--xl));
+			@include bem.next-elem('avatar') {
+				margin-block-start: calc(-.7 * props.get(avatar.$size--xl));
 			}
 		}
 
-		@include bem.elem("image-img") {
-			display: block;
+		@include bem.elem('image-img') {
+			display:     block;
 			inline-size: 100%;
-			block-size: 100%;
-			object-fit: cover;
+			block-size:  100%;
+			object-fit:  cover;
 		}
 
-		@include bem.elem("image-overlay") {
-			position: absolute;
+		@include bem.elem('image-overlay') {
+			position:        absolute;
 			inset-block-end: 0;
-			inset-inline: 0;
-			z-index: 5;
-			padding-block: props.get(vars.$image-overlay--pad-b);
-			padding-inline: props.get(vars.$image-overlay--pad-i);
+			inset-inline:    0;
+			z-index:         5;
+			padding-block:   props.get(vars.$image-overlay--pad-b);
+			padding-inline:  props.get(vars.$image-overlay--pad-i);
 		}
 
-		@include bem.elem("body") {
-			flex: 0 0 auto;
-			padding-block: props.get(vars.$pad-b);
-			padding-inline: props.get(vars.$pad-i);
+		@include bem.elem('body') {
+			flex:            0 0 auto;
+			padding-block:   props.get(vars.$pad-b);
+			padding-inline:  props.get(vars.$pad-i);
 
 			&::before {
-				display: block;
-				margin-block: -100em 100em;
-				content: "";
+				display:       block;
+				margin-block:  -100em 100em;
+				content:       '';
 			}
 
-			@include bem.modifier("no-mbs-neutralize") {
+			@include bem.modifier('no-mbs-neutralize') {
 				&::before {
 					display: none;
 				}
 			}
 
-			@include bem.modifier("main") {
-				flex-shrink: 1;
-				block-size: 100%;
+			@include bem.modifier('main') {
+				flex-shrink:    1;
+				block-size:     100%;
 				min-block-size: 0;
 			}
 		}
 
-		@include bem.elem("content") {
+		@include bem.elem('content') {
 			margin-block-start: props.get(vars.$spacing);
 		}
 
-		@include bem.elem("footer") {
-			flex: 0 0 auto;
-			padding-block: 0 props.get(vars.$pad-b);
-			padding-inline: props.get(vars.$pad-i);
+		@include bem.elem('footer') {
+			flex:               0 0 auto;
+			padding-block:      0 props.get(vars.$pad-b);
+			padding-inline:     props.get(vars.$pad-i);
 			margin-block-start: calc(-1 * props.get(vars.$pad-b));
 
 			&::before {
-				display: block;
-				block-size: props.get(vars.$divider-width);
-				margin-block: props.get(vars.$spacing);
-				content: "";
+				display:          block;
+				block-size:       props.get(vars.$divider-width);
+				margin-block:     props.get(vars.$spacing);
+				content:          '';
 				background-color: props.get(vars.$divider-width);
 			}
 		}
 
-		@include bem.modifier("quiet") {
-			margin-inline: 0;
+		@include bem.modifier('quiet') {
+			margin-inline:    0;
 			background-color: transparent;
-			border: 0;
-			box-shadow: none;
-
-			@include bem.multi(
-				"&:link, &:visited, &:enabled",
-				"modifier" "interactive",
-				"modifier" "collapsible"
-			) {
+			border:           0;
+			box-shadow:       none;
+
+			@include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive', 'modifier' 'collapsible') {
 				&:hover,
 				&:active,
 				&:focus-visible {
 					background-color: transparent;
-					transform: none;
+					transform:        none;
 
-					@include bem.elem("image") {
+					@include bem.elem('image') {
 						background-color: props.get(vars.$quiet--hover--image-color);
-						opacity: 0.75;
-						transform: translateY(props.get(vars.$hover--offset-b));
+						opacity:          .75;
+						transform:        translateY(props.get(vars.$hover--offset-b));
 					}
 				}
 
 				&:focus-visible {
-					margin: 0;
-					outline: none;
-					border: 0;
+					margin:     0;
+					outline:    none;
+					border:     0;
 					box-shadow: none;
 
-					@include bem.elem("image") {
-						margin: calc(
-							-1 *
-								props.get(vars.$key-focus--border-width) - props.get(
-									vars.$border-width
-								)
-						);
-						outline: props.get(vars.$key-focus--border-color) solid
-							props.get(vars.$key-focus--border-width);
+					@include bem.elem('image') {
+						margin:           calc(-1 * props.get(vars.$key-focus--border-width) - props.get(vars.$border-width));
+						outline:          props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
 						background-color: props.get(vars.$quiet--hover--image-color);
-						border: props.get(vars.$key-focus--border-offset) solid transparent;
-						border-radius: calc(
-							props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)
-						);
-						box-shadow: 0 0 0
-							calc(
-								props.get(vars.$key-focus--border-width) +
-									props.get(vars.$key-focus--outline-width)
-							)
+						border:           props.get(vars.$key-focus--border-offset) solid transparent;
+						border-radius:    calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
+						box-shadow:
+							0
+							0
+							0
+							calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
 							props.get(vars.$key-focus--outline-color);
-						opacity: 1;
+						opacity:          1;
 					}
 				}
 			}
 
-			@include bem.elem("image") {
-				position: relative;
+			@include bem.elem('image') {
+				position:         relative;
 				background-color: props.get(vars.$quiet--image-color);
-				background-clip: padding-box;
-				border-radius: props.get(vars.$rounding);
+				background-clip:  padding-box;
+				border-radius:    props.get(vars.$rounding);
 			}
 
-			@include bem.elem("body") {
-				padding: 0;
+			@include bem.elem('body') {
+				padding:             0;
 				padding-block-start: props.get(vars.$spacing);
 			}
 
-			@include bem.elem("footer") {
+			@include bem.elem('footer') {
 				padding-inline: 0;
 			}
 		}
 
-		@include bem.modifier("thumbnail") {
-			@include bem.elem("image") {
+		@include bem.modifier('thumbnail') {
+			@include bem.elem('image') {
 				border-radius: props.get(vars.$rounding);
 			}
 
-			@include bem.elem("body") {
-				position: absolute;
-				inset-block-end: calc(-1 * props.get(vars.$border-width));
-				inset-inline: calc(-1 * props.get(vars.$border-width));
-				z-index: 10;
-				visibility: hidden;
-				background-color: props.get(vars.$hover--bg-color);
-				border-color: transparent;
-				border-style: solid;
-				border-width: 0 props.get(vars.$border-width) props.get(vars.$border-width);
-				border-end-start-radius: calc(
-					props.get(vars.$rounding) - props.get(vars.$border-width)
-				);
-				border-end-end-radius: calc(
-					props.get(vars.$rounding) - props.get(vars.$border-width)
-				);
-				opacity: 0;
+			@include bem.elem('body') {
+				position:                absolute;
+				inset-block-end:         calc(-1 * props.get(vars.$border-width));
+				inset-inline:            calc(-1 * props.get(vars.$border-width));
+				z-index:                 10;
+				visibility:              hidden;
+				background-color:        props.get(vars.$hover--bg-color);
+				border-color:            transparent;
+				border-style:            solid;
+				border-width:            0 props.get(vars.$border-width) props.get(vars.$border-width);
+				border-end-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
+				border-end-end-radius:   calc(props.get(vars.$rounding) - props.get(vars.$border-width));
+				opacity:                 0;
 				transition:
-					border-color 0.2s ease,
-					opacity 0.2s ease,
-					visibility 0s 0.2s linear;
+					border-color .2s ease,
+					opacity .2s ease,
+					visibility 0s .2s linear;
 			}
 
-			@include bem.multi(
-				"&:link, &:visited, &:enabled",
-				"modifier" "interactive",
-				"modifier" "collapsible"
-			) {
+			@include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive', 'modifier' 'collapsible') {
 				&:hover,
 				&:active,
 				&:focus-visible {
-					@include bem.elem("body") {
-						visibility: visible;
+					@include bem.elem('body') {
+						visibility:   visible;
 						border-color: props.get(vars.$hover--border-color);
-						opacity: 1;
+						opacity:      1;
 						transition:
-							border-color 0.2s ease,
-							opacity 0.2s ease,
-							visibility 0.2s linear;
+							border-color .2s ease,
+							opacity .2s ease,
+							visibility .2s linear;
 					}
 				}
 			}
 		}
 
-		@include bem.modifier("horizontal") {
+		@include bem.modifier('horizontal') {
 			flex-direction: row;
-			align-items: center;
+			align-items:    center;
 
-			@include bem.elem("image") {
-				align-self: stretch;
+			@include bem.elem('image') {
+				align-self:  stretch;
 				inline-size: auto;
 
 				&:first-child {
-					border-start-end-radius: 0;
-					border-end-start-radius: props.get(vars.$rounding);
+					border-start-end-radius:   0;
+					border-end-start-radius:   props.get(vars.$rounding);
 				}
 
 				&:last-child {
@@ -337,38 +295,37 @@
 				}
 			}
 
-			@include bem.elem("body") {
-				@include bem.modifier("main") {
-					block-size: auto;
-					min-block-size: none;
-					inline-size: 100%;
+			@include bem.elem('body') {
+				@include bem.modifier('main') {
+					block-size:      auto;
+					min-block-size:  none;
+					inline-size:     100%;
 					min-inline-size: 0;
 				}
 			}
 		}
 
-		@include bem.modifier("collapsible") {
+		@include bem.modifier('collapsible') {
 			display: block;
 			interpolate-size: allow-keywords;
 
 			@include bem.elem("header") {
-				display: flex;
+				display:     flex;
 				align-items: center;
-				gap: 1em;
-				cursor: pointer;
+				gap:         1em;
+				cursor:      pointer;
 
 				&::before {
-					margin: 0;
+					margin:      0;
 					inline-size: 1em;
-					font-size: 0.8em;
-					content: "▶";
+					font-size:   0.8em;
+					content:     "▶";
 				}
 
 				&:focus-visible {
-					outline: props.get(vars.$key-focus--border-color) solid
-						props.get(vars.$key-focus--border-width);
+					outline:        props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
 					outline-offset: calc(-1 * props.get(vars.$key-focus--border-width));
-					border-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
+					border-radius:  calc(props.get(vars.$rounding) - props.get(vars.$border-width));
 				}
 
 				@include bem.next-elem("body") {
@@ -377,7 +334,7 @@
 			}
 
 			&::details-content {
-				opacity: 0;
+				opacity:    0;
 				block-size: 0;
 				overflow-y: clip;
 				transition:
@@ -394,7 +351,7 @@
 				}
 
 				&::details-content {
-					opacity: 1;
+					opacity:    1;
 					block-size: auto;
 				}
 			}
-- 
cgit v1.3.1