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/_button.scss | 281 +++++++++++++++++++++--------------------------
 1 file changed, 125 insertions(+), 156 deletions(-)

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

diff --git a/src/objects/_button.scss b/src/objects/_button.scss
index 8adc0f7..a3c8187 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -1,119 +1,115 @@
-@use "sass:list";
-@use "sass:map";
-@use "sass:meta";
-@use "sass:string";
-@use "pkg:iro-sass/bem";
-@use "pkg:iro-sass/props";
-@use "../props" as *;
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:string';
+@use 'pkg:iro-sass/src/bem';
+@use 'pkg:iro-sass/src/props';
+@use '../props' as *;
 
-@forward "button.vars";
-@use "button.vars" as vars;
+@forward 'button.vars';
+@use 'button.vars' as vars;
 
 @mixin -apply-theme($theme, $key: ()) {
-	color: props.get($theme, list.join($key, --disabled --label-color)...);
+	color:            props.get($theme, list.join($key, --disabled --label-color)...);
 	background-color: props.get($theme, list.join($key, --disabled --bg-color)...);
-	border-color: props.get($theme, list.join($key, --disabled --border-color)...);
+	border-color:     props.get($theme, list.join($key, --disabled --border-color)...);
 
 	&::after {
 		outline-color: props.get($theme, list.join($key, --key-focus --border-color)...);
-		box-shadow: 0 0 0
-			calc(
-				props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)
-			)
+		box-shadow:
+			0
+			0
+			0
+			calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
 			props.get($theme, list.join($key, --key-focus --outline-color)...);
 	}
 
 	&:link,
 	&:visited,
 	&:enabled {
-		color: props.get($theme, list.join($key, --label-color)...);
+		color:            props.get($theme, list.join($key, --label-color)...);
 		background-color: props.get($theme, list.join($key, --bg-color)...);
-		border-color: props.get($theme, list.join($key, --border-color)...);
-		box-shadow: props.get(vars.$shadow-x) props.get(vars.$shadow-y) props.get(vars.$shadow-blur)
-			props.get(vars.$shadow-grow) props.get($theme, list.join($key, --shadow-color)...);
+		border-color:     props.get($theme, list.join($key, --border-color)...);
+		box-shadow:
+			props.get(vars.$shadow-x)
+			props.get(vars.$shadow-y)
+			props.get(vars.$shadow-blur)
+			props.get(vars.$shadow-grow)
+			props.get($theme, list.join($key, --shadow-color)...);
 
 		&:hover,
 		&:focus-visible {
-			color: props.get($theme, list.join($key, --hover --label-color)...);
+			color:            props.get($theme, list.join($key, --hover --label-color)...);
 			background-color: props.get($theme, list.join($key, --hover --bg-color)...);
-			border-color: props.get($theme, list.join($key, --hover --border-color)...);
+			border-color:     props.get($theme, list.join($key, --hover --border-color)...);
 		}
 
 		&:active {
-			color: props.get($theme, list.join($key, --active --label-color)...);
+			color:            props.get($theme, list.join($key, --active --label-color)...);
 			background-color: props.get($theme, list.join($key, --active --bg-color)...);
-			border-color: props.get($theme, list.join($key, --active --border-color)...);
-			box-shadow: none;
+			border-color:     props.get($theme, list.join($key, --active --border-color)...);
+			box-shadow:       none;
 		}
 	}
 
-	@include bem.modifier("badge") {
-		color: props.get($theme, list.join($key, --badge --label-color)...);
+	@include bem.modifier('badge') {
+		color:            props.get($theme, list.join($key, --badge --label-color)...);
 		background-color: props.get($theme, list.join($key, --badge --bg-color)...);
-		border-color: props.get($theme, list.join($key, --badge --border-color)...);
-		box-shadow: none;
+		border-color:     props.get($theme, list.join($key, --badge --border-color)...);
+		box-shadow:       none;
 
 		&:link,
 		&:visited,
 		&:enabled {
-			color: props.get($theme, list.join($key, --badge --label-color)...);
+			color:            props.get($theme, list.join($key, --badge --label-color)...);
 			background-color: props.get($theme, list.join($key, --badge --bg-color)...);
-			border-color: props.get($theme, list.join($key, --badge --border-color)...);
-			box-shadow: none;
+			border-color:     props.get($theme, list.join($key, --badge --border-color)...);
+			box-shadow:       none;
 
 			&:hover,
 			&:focus-visible {
-				color: props.get($theme, list.join($key, --badge --hover --label-color)...);
+				color:            props.get($theme, list.join($key, --badge --hover --label-color)...);
 				background-color: props.get($theme, list.join($key, --badge --hover --bg-color)...);
-				border-color: props.get($theme, list.join($key, --badge --hover --border-color)...);
+				border-color:     props.get($theme, list.join($key, --badge --hover --border-color)...);
 			}
 
 			&:active {
-				color: props.get($theme, list.join($key, --badge --active --label-color)...);
-				background-color: props.get(
-					$theme,
-					list.join($key, --badge --active --bg-color)...
-				);
-				border-color: props.get(
-					$theme,
-					list.join($key, --badge --active --border-color)...
-				);
+				color:            props.get($theme, list.join($key, --badge --active --label-color)...);
+				background-color: props.get($theme, list.join($key, --badge --active --bg-color)...);
+				border-color:     props.get($theme, list.join($key, --badge --active --border-color)...);
 			}
 		}
 	}
 
-	@include bem.modifier("quiet") {
-		color: props.get($theme, list.join($key, --quiet --disabled --label-color)...);
+	@include bem.modifier('quiet') {
+		color:            props.get($theme, list.join($key, --quiet --disabled --label-color)...);
 		background-color: transparent;
-		border-color: transparent;
+		border-color:     transparent;
 
 		&:link,
 		&:visited,
 		&:enabled {
-			color: props.get($theme, list.join($key, --quiet --label-color)...);
+			color:            props.get($theme, list.join($key, --quiet --label-color)...);
 			background-color: transparent;
-			border-color: transparent;
-			box-shadow: none;
+			border-color:     transparent;
+			box-shadow:       none;
 
 			&:hover,
 			&:focus-visible {
-				color: props.get($theme, list.join($key, --quiet --hover --label-color)...);
+				color:            props.get($theme, list.join($key, --quiet --hover --label-color)...);
 				background-color: props.get($theme, list.join($key, --quiet --hover --bg-color)...);
-				border-color: transparent;
+				border-color:     transparent;
 			}
 
 			&:active {
-				color: props.get($theme, list.join($key, --quiet --active --label-color)...);
-				background-color: props.get(
-					$theme,
-					list.join($key, --quiet --active --bg-color)...
-				);
-				border-color: transparent;
+				color:            props.get($theme, list.join($key, --quiet --active --label-color)...);
+				background-color: props.get($theme, list.join($key, --quiet --active --bg-color)...);
+				border-color:     transparent;
 			}
 		}
 	}
 
-	@include bem.is("highlighted") {
+	@include bem.is('highlighted') {
 		&:link,
 		&:visited,
 		&:enabled {
@@ -125,27 +121,32 @@
 
 			box-shadow:
 				0 0 0 1px props.get($theme, list.join($key, --highlighted --border-color)...),
-				props.get(vars.$shadow-x) props.get(vars.$shadow-y) props.get(vars.$shadow-blur)
-					props.get(vars.$shadow-grow)
-					props.get($theme, list.join($key, --highlighted --shadow-color)...);
+				props.get(vars.$shadow-x)
+				props.get(vars.$shadow-y)
+				props.get(vars.$shadow-blur)
+				props.get(vars.$shadow-grow)
+				props.get($theme, list.join($key, --highlighted --shadow-color)...);
 
 			&:focus-visible {
-				box-shadow: props.get(vars.$shadow-x) props.get(vars.$shadow-y)
-					props.get(vars.$shadow-blur) props.get(vars.$shadow-grow)
+				box-shadow:
+					props.get(vars.$shadow-x)
+					props.get(vars.$shadow-y)
+					props.get(vars.$shadow-blur)
+					props.get(vars.$shadow-grow)
 					props.get($theme, list.join($key, --shadow-color)...);
 			}
 		}
 	}
 
-	@include bem.is("selected") {
-		color: props.get($theme, list.join($key, --selected --disabled --label-color)...);
+	@include bem.is('selected') {
+		color:            props.get($theme, list.join($key, --selected --disabled --label-color)...);
 		background-color: props.get($theme, list.join($key, --selected --disabled --bg-color)...);
-		border-color: props.get($theme, list.join($key, --selected --disabled --border-color)...);
+		border-color:     props.get($theme, list.join($key, --selected --disabled --border-color)...);
 
-		@include bem.multi("&:link, &:visited, &:enabled", "modifier" "badge") {
-			color: props.get($theme, list.join($key, --selected --label-color)...);
+		@include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'badge') {
+			color:            props.get($theme, list.join($key, --selected --label-color)...);
 			background-color: props.get($theme, list.join($key, --selected --bg-color)...);
-			border-color: props.get($theme, list.join($key, --selected --border-color)...);
+			border-color:     props.get($theme, list.join($key, --selected --border-color)...);
 		}
 
 		&:link,
@@ -153,67 +154,47 @@
 		&:enabled {
 			&:hover,
 			&:focus-visible {
-				color: props.get($theme, list.join($key, --selected --hover --label-color)...);
-				background-color: props.get(
-					$theme,
-					list.join($key, --selected --hover --bg-color)...
-				);
-				border-color: props.get(
-					$theme,
-					list.join($key, --selected --hover --border-color)...
-				);
+				color:            props.get($theme, list.join($key, --selected --hover --label-color)...);
+				background-color: props.get($theme, list.join($key, --selected --hover --bg-color)...);
+				border-color:     props.get($theme, list.join($key, --selected --hover --border-color)...);
 			}
 
 			&:active {
-				color: props.get($theme, list.join($key, --selected --active --label-color)...);
-				background-color: props.get(
-					$theme,
-					list.join($key, --selected --active --bg-color)...
-				);
-				border-color: props.get(
-					$theme,
-					list.join($key, --selected --active --border-color)...
-				);
+				color:            props.get($theme, list.join($key, --selected --active --label-color)...);
+				background-color: props.get($theme, list.join($key, --selected --active --bg-color)...);
+				border-color:     props.get($theme, list.join($key, --selected --active --border-color)...);
 			}
 		}
 	}
 }
 
 @mixin styles {
-	@include materialize-at-root(meta.module-variables("vars"));
-
-	@include bem.object("button") {
-		position: relative;
-		display: inline-block;
-		padding-block: props.get(vars.$pad-b);
-		padding-inline: props.get(vars.$pad-i);
-		text-overflow: ellipsis;
-		font-size: props.get(vars.$font-size);
-		line-height: props.get(vars.$line-height);
-		text-align: center;
-		white-space: nowrap;
-		text-decoration: none;
-		border: props.get(vars.$border-width) solid transparent;
-		border-radius: props.get(vars.$rounding);
-		transition:
-			color 0.1s,
-			background-color 0.1s,
-			border-color 0.1s,
-			box-shadow 0.1s;
+	@include materialize-at-root(meta.module-variables('vars'));
+
+	@include bem.object('button') {
+		position:         relative;
+		display:          inline-block;
+		padding-block:    props.get(vars.$pad-b);
+		padding-inline:   props.get(vars.$pad-i);
+		text-overflow:    ellipsis;
+		font-size:        props.get(vars.$font-size);
+		line-height:      props.get(vars.$line-height);
+		text-align:       center;
+		white-space:      nowrap;
+		text-decoration:  none;
+		border:           props.get(vars.$border-width) solid transparent;
+		border-radius:    props.get(vars.$rounding);
+		transition:       color .1s, background-color .1s, border-color .1s, box-shadow .1s;
 
 		&::after {
-			position: absolute;
-			inset: calc(
-				-1 * props.get(vars.$border-width) - props.get(vars.$key-focus--border-offset)
-			);
-			z-index: 1;
-			display: none;
+			position:       absolute;
+			inset:          calc(-1 * props.get(vars.$border-width) - props.get(vars.$key-focus--border-offset));
+			z-index:        1;
+			display:        none;
 			pointer-events: none;
-			outline: transparent solid props.get(vars.$key-focus--border-width);
-			content: "";
-			border-radius: calc(
-				props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)
-			);
+			outline:        transparent solid props.get(vars.$key-focus--border-width);
+			content:        '';
+			border-radius:  calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
 		}
 
 		&:link,
@@ -228,7 +209,7 @@
 			}
 		}
 
-		@include bem.elem("label") {
+		@include bem.elem('label') {
 			display: inline-block;
 			margin-inline: props.get(vars.$pad-i-label);
 		}
@@ -241,91 +222,79 @@
 			}
 		}
 
-		@include bem.modifier("pill") {
+		@include bem.modifier('pill') {
 			padding-inline: props.get(vars.$pad-i-pill);
-			border-radius: 100em;
+			border-radius:  100em;
 
 			&::after {
-				border-radius: 100em;
+				border-radius:  100em;
 			}
 		}
 
-		@include bem.modifier("icon") {
-			inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b));
+		@include bem.modifier('icon') {
+			inline-size:    calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b));
 			padding-inline: 0;
 		}
 
-		@include bem.modifier("wide") {
-			@include bem.elem("label") {
+		@include bem.modifier('wide') {
+			@include bem.elem('label') {
 				margin-inline: props.get(vars.$pad-i-wide);
 			}
 		}
 
-		@include bem.modifier("justify") {
+		@include bem.modifier('justify') {
 			text-align: justify;
 			text-align-last: justify;
 		}
 
-		@each $mod, $pad-i, $pad-i-label, $pad-i-wide, $pad-i-pill, $pad-b,
-			$font-size in vars.$fixed-sizes
-		{
+		@each $mod, $pad-i, $pad-i-label, $pad-i-wide, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes {
 			@include bem.modifier($mod) {
-				padding-block: props.get($pad-b);
+				padding-block:  props.get($pad-b);
 				padding-inline: props.get($pad-i);
-				font-size: props.get($font-size);
+				font-size:      props.get($font-size);
 
-				@include bem.elem("label") {
+				@include bem.elem('label') {
 					margin-inline: props.get($pad-i-label);
 				}
 
-				@include bem.modifier("pill") {
+				@include bem.modifier('pill') {
 					padding-inline: props.get($pad-i-pill);
 				}
 
-				@include bem.modifier("icon") {
-					inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get($pad-b));
+				@include bem.modifier('icon') {
+					inline-size:    calc(1em * props.get(vars.$line-height) + 2 * props.get($pad-b));
 					padding-inline: 0;
 				}
 
-				@include bem.modifier("wide") {
-					@include bem.elem("label") {
+				@include bem.modifier('wide') {
+					@include bem.elem('label') {
 						margin-inline: props.get($pad-i-wide);
 					}
 				}
 			}
 		}
 
-		@include bem.modifier("align-block") {
+		@include bem.modifier('align-block') {
 			margin-inline: calc(-1 * props.get(vars.$pad-i) - props.get(vars.$border-width));
 
-			@include bem.modifier("pill") {
-				margin-inline: calc(
-					-1 * props.get(vars.$pad-i-pill) - props.get(vars.$border-width)
-				);
+			@include bem.modifier('pill') {
+				margin-inline: calc(-1 * props.get(vars.$pad-i-pill) - props.get(vars.$border-width));
 			}
 
-			@include bem.modifier("icon") {
-				margin-inline: calc(
-					-1 * props.get(vars.$pad-b) - props.get(vars.$border-width) - 0.5em *
-						(props.get(vars.$line-height) - 1)
-				);
+			@include bem.modifier('icon') {
+				margin-inline: calc(-1 * props.get(vars.$pad-b) - props.get(vars.$border-width) - .5em * (props.get(vars.$line-height) - 1));
 			}
 
 			@each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes {
 				@include bem.modifier($mod) {
 					margin-inline: calc(-1 * props.get($pad-i) - props.get(vars.$border-width));
 
-					@include bem.modifier("pill") {
-						margin-inline: calc(
-							-1 * props.get($pad-i-pill) - props.get(vars.$border-width)
-						);
+					@include bem.modifier('pill') {
+						margin-inline: calc(-1 * props.get($pad-i-pill) - props.get(vars.$border-width));
 					}
 
-					@include bem.modifier("icon") {
-						margin-inline: calc(
-							-1 * props.get($pad-b) - props.get(vars.$border-width) - 0.5em *
-								(props.get(vars.$line-height) - 1)
-						);
+					@include bem.modifier('icon') {
+						margin-inline: calc(-1 * props.get($pad-b) - props.get(vars.$border-width) - .5em * (props.get(vars.$line-height) - 1));
 					}
 				}
 			}
-- 
cgit v1.3.1