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/_checkbox.scss | 215 +++++++++++++++++++++------------------------
 1 file changed, 102 insertions(+), 113 deletions(-)

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

diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss
index 60cee65..f3fb793 100644
--- a/src/objects/_checkbox.scss
+++ b/src/objects/_checkbox.scss
@@ -1,140 +1,130 @@
-@use "sass:meta";
-@use "pkg:iro-sass/bem";
-@use "pkg:iro-sass/functions" as fn;
-@use "pkg:iro-sass/props";
-@use "../props" as *;
-@use "../core.vars" as core;
+@use 'sass:meta';
+@use 'pkg:iro-sass/src/bem';
+@use 'pkg:iro-sass/src/functions' as fn;
+@use 'pkg:iro-sass/src/props';
+@use '../props' as *;
+@use '../core.vars' as core;
 
-@forward "checkbox.vars";
-@use "checkbox.vars" as vars;
+@forward 'checkbox.vars';
+@use 'checkbox.vars' as vars;
 
 @mixin styles {
-	@include materialize-at-root(meta.module-variables("vars"));
+	@include materialize-at-root(meta.module-variables('vars'));
 
-	@include bem.object("checkbox") {
-		position: relative;
-		display: inline-block;
-		padding-block: props.get(vars.$pad-b);
+	@include bem.object('checkbox') {
+		position:       relative;
+		display:        inline-block;
+		padding-block:  props.get(vars.$pad-b);
 		padding-inline: props.get(vars.$pad-i);
-		margin-inline: calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset))
-			calc(
-				props.get(vars.$spacing-sibling) - props.get(vars.$pad-b) - props.get(
-						vars.$key-focus--border-offset
-					)
-			);
-
-		@include bem.elem("box") {
-			position: relative;
-			display: inline-block;
-			flex: 0 0 auto;
-			inline-size: props.get(vars.$size);
-			block-size: props.get(vars.$size);
-			margin-block-start: calc(
-				0.5em * props.get(core.$font--standard--line-height) - 0.5 *
-					props.get(vars.$size) - props.get(vars.$key-focus--border-offset)
-			);
-			vertical-align: top;
-			background-color: props.get(vars.$box-border-color);
-			background-clip: padding-box;
-			border: props.get(vars.$key-focus--border-offset) solid transparent;
-			border-radius: calc(
-				props.get(vars.$border-width) + props.get(vars.$key-focus--border-offset)
-			);
+		margin-inline:
+			calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset))
+			calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-b) - props.get(vars.$key-focus--border-offset));
+
+		@include bem.elem('box') {
+			position:           relative;
+			display:            inline-block;
+			flex:               0 0 auto;
+			inline-size:        props.get(vars.$size);
+			block-size:         props.get(vars.$size);
+			margin-block-start: calc(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$size) - props.get(vars.$key-focus--border-offset));
+			vertical-align:     top;
+			background-color:   props.get(vars.$box-border-color);
+			background-clip:    padding-box;
+			border:             props.get(vars.$key-focus--border-offset) solid transparent;
+			border-radius:      calc(props.get(vars.$border-width) + props.get(vars.$key-focus--border-offset));
 
 			&::before,
 			&::after {
 				position: absolute;
-				display: block;
-				content: "";
+				display:  block;
+				content:  '';
 			}
 
 			&::before {
-				inset-block-start: props.get(vars.$border-width);
+				inset-block-start:  props.get(vars.$border-width);
 				inset-inline-start: props.get(vars.$border-width);
-				z-index: 2;
-				inline-size: calc(props.get(vars.$size) - 2 * props.get(vars.$border-width));
-				block-size: calc(props.get(vars.$size) - 2 * props.get(vars.$border-width));
-				background-color: props.get(vars.$box-bg-color);
-				transition: transform 0.2s ease;
+				z-index:            2;
+				inline-size:        calc(props.get(vars.$size) - 2 * props.get(vars.$border-width));
+				block-size:         calc(props.get(vars.$size) - 2 * props.get(vars.$border-width));
+				background-color:   props.get(vars.$box-bg-color);
+				transition:         transform .2s ease;
 			}
 
 			&::after {
-				inset-block-start: calc(0.5 * props.get(vars.$size) - 1px);
-				inset-inline-start: calc(1.5 * props.get(vars.$border-width));
-				z-index: 3;
-				box-sizing: border-box;
-				inline-size: calc(props.get(vars.$size) - 3 * props.get(vars.$border-width));
-				block-size: 0;
-				border-color: props.get(vars.$box-bg-color);
-				border-style: solid;
-				border-radius: 2px;
-				transform: scale(0);
-				transition: transform 0.2s ease;
-				border-block-width: 0 2px;
+				inset-block-start:   calc(.5 * props.get(vars.$size) - 1px);
+				inset-inline-start:  calc(1.5 * props.get(vars.$border-width));
+				z-index:             3;
+				box-sizing:          border-box;
+				inline-size:         calc(props.get(vars.$size) - 3 * props.get(vars.$border-width));
+				block-size:          0;
+				border-color:        props.get(vars.$box-bg-color);
+				border-style:        solid;
+				border-radius:       2px;
+				transform:           scale(0);
+				transition:          transform .2s ease;
+				border-block-width:  0 2px;
 				border-inline-width: 0 2px;
 			}
 		}
 
-		@include bem.elem("check-icon") {
-			position: absolute;
-			inset-block-start: calc(1 * props.get(vars.$border-width));
+		@include bem.elem('check-icon') {
+			position:           absolute;
+			inset-block-start:  calc(1 * props.get(vars.$border-width));
 			inset-inline-start: calc(1 * props.get(vars.$border-width));
-			z-index: 2;
-			display: block;
-			inline-size: calc(100% - 2 * props.get(vars.$border-width));
-			block-size: calc(100% - 2 * props.get(vars.$border-width));
-			margin: 0;
-			color: props.get(vars.$box-bg-color);
-			stroke-width: fn.px-to-rem(3px);
-			transform: scale(0);
-			transform-origin: 40% 90%;
-			transition: transform 0.2s ease;
+			z-index:            2;
+			display:            block;
+			inline-size:        calc(100% - 2 * props.get(vars.$border-width));
+			block-size:         calc(100% - 2 * props.get(vars.$border-width));
+			margin:             0;
+			color:              props.get(vars.$box-bg-color);
+			stroke-width:       fn.px-to-rem(3px);
+			transform:          scale(0);
+			transform-origin:   40% 90%;
+			transition:         transform .2s ease;
 		}
 
-		@include bem.elem("label") {
-			margin-inline-start: calc(
-				props.get(vars.$label-gap) - props.get(vars.$key-focus--border-offset)
-			);
+		@include bem.elem('label') {
+			margin-inline-start: calc(props.get(vars.$label-gap) - props.get(vars.$key-focus--border-offset));
 		}
 
-		@include bem.elem("native") {
-			position: absolute;
-			inset-block-start: 0;
+		@include bem.elem('native') {
+			position:           absolute;
+			inset-block-start:  0;
 			inset-inline-start: 0;
-			z-index: -1;
-			inline-size: 100%;
-			block-size: 100%;
-			padding: 0;
-			margin: 0;
-			overflow: hidden;
-			appearance: none;
-			border-radius: props.get(vars.$rounding);
+			z-index:            -1;
+			inline-size:        100%;
+			block-size:         100%;
+			padding:            0;
+			margin:             0;
+			overflow:           hidden;
+			appearance:         none;
+			border-radius:      props.get(vars.$rounding);
 
 			&:hover,
 			&:focus-visible {
-				@include bem.sibling-elem("label") {
+				@include bem.sibling-elem('label') {
 					color: props.get(vars.$hover--label-color);
 				}
 
-				@include bem.sibling-elem("box") {
+				@include bem.sibling-elem('box') {
 					background-color: props.get(vars.$hover--box-border-color);
 				}
 			}
 
 			&:checked {
-				@include bem.sibling-elem("box") {
+				@include bem.sibling-elem('box') {
 					&::before {
 						transform: scale(0);
 					}
 
-					@include bem.elem("check-icon") {
+					@include bem.elem('check-icon') {
 						transform: scale(1);
 					}
 				}
 			}
 
 			&:indeterminate {
-				@include bem.sibling-elem("box") {
+				@include bem.sibling-elem('box') {
 					&::before {
 						transform: scale(0);
 					}
@@ -143,18 +133,18 @@
 						transform: scale(1);
 					}
 
-					@include bem.elem("check-icon") {
+					@include bem.elem('check-icon') {
 						transform: scale(0);
 					}
 				}
 			}
 
 			&:disabled {
-				@include bem.sibling-elem("label") {
+				@include bem.sibling-elem('label') {
 					color: props.get(vars.$disabled--label-color);
 				}
 
-				@include bem.sibling-elem("box") {
+				@include bem.sibling-elem('box') {
 					background-color: props.get(vars.$disabled--box-border-color);
 
 					&::before {
@@ -164,59 +154,58 @@
 			}
 
 			&:focus-visible {
-				@include bem.sibling-elem("label") {
+				@include bem.sibling-elem('label') {
 					color: props.get(vars.$key-focus--label-color);
 				}
 
-				@include bem.sibling-elem("box") {
-					outline: props.get(vars.$key-focus--border-color) solid
-						props.get(vars.$key-focus--border-width);
-					box-shadow: 0 0 0
-						calc(
-							props.get(vars.$key-focus--border-width) +
-								props.get(vars.$key-focus--outline-width)
-						)
+				@include bem.sibling-elem('box') {
+					outline:    props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
+					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);
 				}
 			}
 		}
 
-		@include bem.modifier("standalone") {
-			@include bem.elem("box") {
+		@include bem.modifier('standalone') {
+			@include bem.elem('box') {
 				margin-block-start: 0;
 			}
 		}
 
-		@include bem.modifier("accent") {
-			@include bem.elem("native") {
+		@include bem.modifier('accent') {
+			@include bem.elem('native') {
 				&:checked {
-					@include bem.sibling-elem("box") {
+					@include bem.sibling-elem('box') {
 						background-color: props.get(vars.$accent--box-border-color);
 					}
 
 					&:hover,
 					&:focus-visible {
-						@include bem.sibling-elem("box") {
+						@include bem.sibling-elem('box') {
 							background-color: props.get(vars.$accent--hover--box-border-color);
 						}
 					}
 				}
 
 				&:indeterminate {
-					@include bem.sibling-elem("box") {
+					@include bem.sibling-elem('box') {
 						background-color: props.get(vars.$accent--box-border-color);
 					}
 
 					&:hover,
 					&:focus-visible {
-						@include bem.sibling-elem("box") {
+						@include bem.sibling-elem('box') {
 							background-color: props.get(vars.$accent--hover--box-border-color);
 						}
 					}
 				}
 
 				&:disabled {
-					@include bem.sibling-elem("box") {
+					@include bem.sibling-elem('box') {
 						background-color: props.get(vars.$disabled--box-border-color);
 
 						&::before {
@@ -225,13 +214,13 @@
 					}
 
 					&:checked {
-						@include bem.sibling-elem("box") {
+						@include bem.sibling-elem('box') {
 							background-color: props.get(vars.$disabled--box-border-color);
 						}
 					}
 
 					&:indeterminate {
-						@include bem.sibling-elem("box") {
+						@include bem.sibling-elem('box') {
 							background-color: props.get(vars.$disabled--box-border-color);
 						}
 					}
-- 
cgit v1.3.1