From cc5329a5f4d3ea91cac93bc7f9b8f943b7ced226 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Wed, 22 Jul 2026 12:27:09 +0200
Subject: Paths

---
 src/objects/_card.scss | 393 +++++++++++++++++++++++++++----------------------
 1 file changed, 218 insertions(+), 175 deletions(-)

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

diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index b8bc727..3275bc8 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -1,84 +1,95 @@
-@use 'sass:meta';
-@use 'pkg:iro-sass/src/bem';
-@use 'pkg:iro-sass/src/props';
-@use '../props' as *;
-@use 'avatar.vars' as avatar;
+@use "sass:meta";
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/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 .2s, background-color .2s, border-color .2s, box-shadow .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 0.2s,
+			background-color 0.2s,
+			border-color 0.2s,
+			box-shadow 0.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 .2s;
+				transition: transform 0.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);
@@ -86,207 +97,238 @@
 			}
 		}
 
-		@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 .2s, transform .2s, opacity .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 0.2s,
+				transform 0.2s,
+				opacity 0.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(-.7 * props.get(avatar.$size--xl));
+			@include bem.next-elem("avatar") {
+				margin-block-start: calc(-0.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:          .75;
-						transform:        translateY(props.get(vars.$hover--offset-b));
+						opacity: 0.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 .2s ease,
-					opacity .2s ease,
-					visibility 0s .2s linear;
+					border-color 0.2s ease,
+					opacity 0.2s ease,
+					visibility 0s 0.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 .2s ease,
-							opacity .2s ease,
-							visibility .2s linear;
+							border-color 0.2s ease,
+							opacity 0.2s ease,
+							visibility 0.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 {
@@ -295,37 +337,38 @@
 				}
 			}
 
-			@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") {
@@ -334,7 +377,7 @@
 			}
 
 			&::details-content {
-				opacity:    0;
+				opacity: 0;
 				block-size: 0;
 				overflow-y: clip;
 				transition:
@@ -351,7 +394,7 @@
 				}
 
 				&::details-content {
-					opacity:    1;
+					opacity: 1;
 					block-size: auto;
 				}
 			}
-- 
cgit v1.3.1