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/_switch.scss | 156 +++++++++++++++++++++++++----------------------
 1 file changed, 84 insertions(+), 72 deletions(-)

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

diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss
index 0ef95e6..c1f7411 100644
--- a/src/objects/_switch.scss
+++ b/src/objects/_switch.scss
@@ -1,73 +1,79 @@
-@use 'sass:meta';
-@use 'pkg:iro-sass/src/bem';
-@use 'pkg:iro-sass/src/props';
-@use '../props' as *;
-@use '../core.vars' as core;
+@use "sass:meta";
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "../props" as *;
+@use "../core.vars" as core;
 
-@forward 'switch.vars';
-@use 'switch.vars' as vars;
+@forward "switch.vars";
+@use "switch.vars" as vars;
 
 @mixin styles {
-	@include materialize-at-root(meta.module-variables('vars'));
+	@include materialize-at-root(meta.module-variables("vars"));
 
-	@include bem.object('switch') {
-		position:       relative;
-		display:        inline-block;
-		padding-block:  props.get(vars.$pad-b);
+	@include bem.object("switch") {
+		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-i) - props.get(vars.$key-focus--border-offset));
-
-		@include bem.elem('indicator') {
-			display:            inline-block;
-			flex:               0 0 auto;
-			inline-size:        props.get(vars.$inline-size);
-			block-size:         props.get(vars.$block-size);
-			margin-block-start: calc(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$block-size) - props.get(vars.$key-focus--border-offset));
-			vertical-align:     top;
-			background-color:   props.get(vars.$track-bg-color);
-			background-clip:    padding-box;
-			border:             props.get(vars.$key-focus--border-offset) solid transparent;
-			border-radius:      2em;
-			transition:         background-color .2s ease;
+		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-i) - props.get(
+						vars.$key-focus--border-offset
+					)
+			);
+
+		@include bem.elem("indicator") {
+			display: inline-block;
+			flex: 0 0 auto;
+			inline-size: props.get(vars.$inline-size);
+			block-size: props.get(vars.$block-size);
+			margin-block-start: calc(
+				0.5em * props.get(core.$font--standard--line-height) - 0.5 *
+					props.get(vars.$block-size) - props.get(vars.$key-focus--border-offset)
+			);
+			vertical-align: top;
+			background-color: props.get(vars.$track-bg-color);
+			background-clip: padding-box;
+			border: props.get(vars.$key-focus--border-offset) solid transparent;
+			border-radius: 2em;
+			transition: background-color 0.2s ease;
 
 			&::after {
-				display:          block;
-				inline-size:      calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width));
-				block-size:       calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width));
-				content:          '';
+				display: block;
+				inline-size: calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width));
+				block-size: calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width));
+				content: "";
 				background-color: props.get(vars.$handle-bg-color);
-				border:           props.get(vars.$border-width) solid props.get(vars.$handle-border-color);
-				border-radius:    props.get(vars.$inline-size);
-				transition:       transform .2s ease;
+				border: props.get(vars.$border-width) solid props.get(vars.$handle-border-color);
+				border-radius: props.get(vars.$inline-size);
+				transition: transform 0.2s ease;
 			}
 		}
 
-		@include bem.elem('label') {
+		@include bem.elem("label") {
 			margin-inline-start: props.get(vars.$label-gap);
 		}
 
-		@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('indicator') {
+				@include bem.sibling-elem("indicator") {
 					&::after {
 						border-color: props.get(vars.$hover--handle-border-color);
 					}
@@ -75,18 +81,23 @@
 			}
 
 			&:checked {
-				@include bem.sibling-elem('indicator') {
+				@include bem.sibling-elem("indicator") {
 					background-color: props.get(vars.$handle-border-color);
 
 					&::after {
 						border-color: props.get(vars.$handle-border-color);
-						transform:    translate(calc(props.get(vars.$inline-size) - props.get(vars.$block-size) + .5px), 0);
+						transform: translate(
+							calc(
+								props.get(vars.$inline-size) - props.get(vars.$block-size) + 0.5px
+							),
+							0
+						);
 					}
 				}
 
 				&:hover,
 				&:focus-visible {
-					@include bem.sibling-elem('indicator') {
+					@include bem.sibling-elem("indicator") {
 						background-color: props.get(vars.$hover--handle-border-color);
 
 						&::after {
@@ -97,21 +108,21 @@
 			}
 
 			&:disabled {
-				@include bem.sibling-elem('label') {
+				@include bem.sibling-elem("label") {
 					color: props.get(vars.$disabled--label-color);
 				}
 
-				@include bem.sibling-elem('indicator') {
+				@include bem.sibling-elem("indicator") {
 					background-color: props.get(vars.$disabled--track-bg-color);
 
 					&::after {
 						background-color: props.get(vars.$disabled--handle-bg-color);
-						border-color:     props.get(vars.$disabled--handle-border-color);
+						border-color: props.get(vars.$disabled--handle-border-color);
 					}
 				}
 
 				&:checked {
-					@include bem.sibling-elem('indicator') {
+					@include bem.sibling-elem("indicator") {
 						background-color: props.get(vars.$disabled--handle-border-color);
 
 						&::after {
@@ -122,32 +133,33 @@
 			}
 
 			&:focus-visible {
-				@include bem.sibling-elem('label') {
+				@include bem.sibling-elem("label") {
 					color: props.get(vars.$key-focus--label-color);
 				}
 
-				@include bem.sibling-elem('indicator') {
-					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("indicator") {
+					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('indicator') {
+		@include bem.modifier("standalone") {
+			@include bem.elem("indicator") {
 				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('indicator') {
+					@include bem.sibling-elem("indicator") {
 						background-color: props.get(vars.$accent--handle-border-color);
 
 						&::after {
@@ -157,7 +169,7 @@
 
 					&:hover,
 					&:focus-visible {
-						@include bem.sibling-elem('indicator') {
+						@include bem.sibling-elem("indicator") {
 							background-color: props.get(vars.$accent--hover--handle-border-color);
 
 							&::after {
@@ -168,12 +180,12 @@
 				}
 
 				&:disabled {
-					@include bem.sibling-elem('label') {
+					@include bem.sibling-elem("label") {
 						color: props.get(vars.$disabled--label-color);
 					}
 
 					&:checked {
-						@include bem.sibling-elem('indicator') {
+						@include bem.sibling-elem("indicator") {
 							background-color: props.get(vars.$disabled--handle-border-color);
 
 							&::after {
-- 
cgit v1.3.1