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/_thumbnail.scss | 95 +++++++++++++++++++++++----------------------
 1 file changed, 48 insertions(+), 47 deletions(-)

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

diff --git a/src/objects/_thumbnail.scss b/src/objects/_thumbnail.scss
index 9925dd0..c7a9791 100644
--- a/src/objects/_thumbnail.scss
+++ b/src/objects/_thumbnail.scss
@@ -1,65 +1,66 @@
-@use 'sass:map';
-@use 'sass:meta';
-@use 'sass:string';
-@use 'pkg:iro-sass/src/bem';
-@use 'pkg:iro-sass/src/props';
-@use '../props' as *;
+@use "sass:map";
+@use "sass:meta";
+@use "sass:string";
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "../props" as *;
 
-@forward 'thumbnail.vars';
-@use 'thumbnail.vars' as vars;
+@forward "thumbnail.vars";
+@use "thumbnail.vars" as vars;
 
 @mixin styles {
-	@include materialize-at-root(meta.module-variables('vars'));
+	@include materialize-at-root(meta.module-variables("vars"));
 
-	@include bem.object('thumbnail') {
-		position:       relative;
-		display:        block;
-		flex:           0 0 auto;
-		inline-size:    props.get(vars.$size);
-		block-size:     props.get(vars.$size);
-		overflow:       hidden;
-		outline:        props.get(vars.$border-color) solid props.get(vars.$border-width);
+	@include bem.object("thumbnail") {
+		position: relative;
+		display: block;
+		flex: 0 0 auto;
+		inline-size: props.get(vars.$size);
+		block-size: props.get(vars.$size);
+		overflow: hidden;
+		outline: props.get(vars.$border-color) solid props.get(vars.$border-width);
 		outline-offset: calc(-1 * props.get(vars.$border-width));
-		border-radius:  props.get(vars.$rounding);
+		border-radius: props.get(vars.$rounding);
 
 		&:hover,
 		&:active,
 		&:focus-visible {
 			outline-color: props.get(vars.$hover--border-color);
-			opacity:       1;
+			opacity: 1;
 		}
 
-		@include bem.elem('image') {
-			position:           absolute;
-			inset-block-start:  0;
+		@include bem.elem("image") {
+			position: absolute;
+			inset-block-start: 0;
 			inset-inline-start: 0;
-			display:            block;
-			inline-size:        100%;
-			block-size:         100%;
-			object-fit:         cover;
-			object-position:    center center;
+			display: block;
+			inline-size: 100%;
+			block-size: 100%;
+			object-fit: cover;
+			object-position: center center;
 		}
 
-		@include bem.elem('icon') {
-			position:           absolute;
-			inset-block-start:  50%;
+		@include bem.elem("icon") {
+			position: absolute;
+			inset-block-start: 50%;
 			inset-inline-start: 50%;
-			transform:          translate(-50%, -50%);
+			transform: translate(-50%, -50%);
 		}
 
 		&:focus-visible {
 			$focus-border-offset: calc(-1 * props.get(vars.$key-focus--border-offset));
 
-			margin:         $focus-border-offset;
-			outline:        props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
+			margin: $focus-border-offset;
+			outline: props.get(vars.$key-focus--border-color) solid
+				props.get(vars.$key-focus--border-width);
 			outline-offset: 0;
-			border:         props.get(vars.$key-focus--border-offset) solid transparent;
-			border-radius:  calc(props.get(vars.$rounding) - $focus-border-offset);
-			box-shadow:
-				0
-				0
-				0
-				calc(props.get(vars.$key-focus--outline-width) + props.get(vars.$key-focus--border-width))
+			border: props.get(vars.$key-focus--border-offset) solid transparent;
+			border-radius: calc(props.get(vars.$rounding) - $focus-border-offset);
+			box-shadow: 0 0 0
+				calc(
+					props.get(vars.$key-focus--outline-width) +
+						props.get(vars.$key-focus--border-width)
+				)
 				props.get(vars.$key-focus--outline-color);
 		}
 
@@ -73,18 +74,18 @@
 					outline-color: props.get(vars.$static-themes, $theme, --hover, --border);
 				}
 
-				@include bem.is('selected') {
+				@include bem.is("selected") {
 					border-color: props.get(vars.$static-themes, $theme, --selected, --border);
 				}
 
 				&:focus-visible {
 					outline-color: props.get(vars.$static-themes, $theme, --key-focus, --border);
-					border-color:  transparent;
-					box-shadow:
-						0
-						0
-						0
-						calc(props.get(vars.$key-focus--outline-width) + props.get(vars.$key-focus--border-width))
+					border-color: transparent;
+					box-shadow: 0 0 0
+						calc(
+							props.get(vars.$key-focus--outline-width) +
+								props.get(vars.$key-focus--border-width)
+						)
 						props.get(vars.$static-themes, $theme, --key-focus, --outline);
 				}
 			}
-- 
cgit v1.3.1