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/_menu.scss | 101 ++++++++++++++++++++++++++-----------------------
 1 file changed, 54 insertions(+), 47 deletions(-)

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

diff --git a/src/objects/_menu.scss b/src/objects/_menu.scss
index dce14a8..c7fbc0e 100644
--- a/src/objects/_menu.scss
+++ b/src/objects/_menu.scss
@@ -1,75 +1,82 @@
-@use 'sass:meta';
-@use 'pkg:iro-sass/src/bem';
-@use 'pkg:iro-sass/src/props';
-@use '../props' as *;
-@use 'icon.vars' as icon;
+@use "sass:meta";
+@use "pkg:iro-sass/bem";
+@use "pkg:iro-sass/props";
+@use "../props" as *;
+@use "icon.vars" as icon;
 
-@forward 'menu.vars';
-@use 'menu.vars' as vars;
+@forward "menu.vars";
+@use "menu.vars" as vars;
 
 @mixin styles {
-	@include materialize-at-root(meta.module-variables('vars'));
+	@include materialize-at-root(meta.module-variables("vars"));
 
-	@include bem.object('menu') {
-		display:        flex;
+	@include bem.object("menu") {
+		display: flex;
 		flex-direction: column;
-		gap:            props.get(vars.$spacing);
+		gap: props.get(vars.$spacing);
 
-		@include bem.elem('header') {
-			padding-block:  props.get(vars.$item--pad-b);
+		@include bem.elem("header") {
+			padding-block: props.get(vars.$item--pad-b);
 			padding-inline: props.get(vars.$item--pad-i);
-			font-size:      props.get(vars.$header--font-size);
-			font-weight:    500;
-			color:          props.get(vars.$header--label-color);
+			font-size: props.get(vars.$header--font-size);
+			font-weight: 500;
+			color: props.get(vars.$header--label-color);
 			text-transform: uppercase;
-			letter-spacing: .5px;
+			letter-spacing: 0.5px;
 
 			@include bem.next-twin-elem {
-				margin-block-start: calc(props.get(vars.$separator-width) + props.get(vars.$spacing));
+				margin-block-start: calc(
+					props.get(vars.$separator-width) + props.get(vars.$spacing)
+				);
 			}
 		}
 
-		@include bem.elem('item') {
-			padding-block:   props.get(vars.$item--pad-b);
-			padding-inline:  props.get(vars.$item--pad-i);
-			margin:          calc(-1 * props.get(vars.$item--key-focus--outline-width));
-			color:           props.get(vars.$item--disabled--label-color);
+		@include bem.elem("item") {
+			padding-block: props.get(vars.$item--pad-b);
+			padding-inline: props.get(vars.$item--pad-i);
+			margin: calc(-1 * props.get(vars.$item--key-focus--outline-width));
+			color: props.get(vars.$item--disabled--label-color);
 			background-clip: padding-box;
-			border:          props.get(vars.$item--key-focus--outline-width) solid transparent;
-			border-radius:   calc(props.get(vars.$item--rounding) + props.get(vars.$item--key-focus--outline-width));
+			border: props.get(vars.$item--key-focus--outline-width) solid transparent;
+			border-radius: calc(
+				props.get(vars.$item--rounding) + props.get(vars.$item--key-focus--outline-width)
+			);
 
 			&:link,
 			&:visited,
 			&:enabled {
 				color: currentColor;
 
-				@include bem.multi('&:hover, &:focus-visible', 'is' 'selected') {
-					color:            props.get(vars.$item--hover--label-color);
+				@include bem.multi("&:hover, &:focus-visible", "is" "selected") {
+					color: props.get(vars.$item--hover--label-color);
 					background-color: props.get(vars.$item--hover--bg-color);
 				}
 
 				&:active {
-					color:            props.get(vars.$item--active--label-color);
+					color: props.get(vars.$item--active--label-color);
 					background-color: props.get(vars.$item--active--bg-color);
 				}
 
 				&:focus-visible {
-					outline:    props.get(vars.$item--key-focus--border-color) solid props.get(vars.$item--key-focus--border-width);
-					box-shadow:
-						0
-						0
-						0
-						calc(props.get(vars.$item--key-focus--border-width) + props.get(vars.$item--key-focus--outline-width))
+					outline: props.get(vars.$item--key-focus--border-color) solid
+						props.get(vars.$item--key-focus--border-width);
+					box-shadow: 0 0 0
+						calc(
+							props.get(vars.$item--key-focus--border-width) +
+								props.get(vars.$item--key-focus--outline-width)
+						)
 						props.get(vars.$item--key-focus--outline-color);
 				}
 			}
 
-			@include bem.next-elem('header') {
-				margin-block-start: calc(props.get(vars.$separator-width) + props.get(vars.$spacing));
+			@include bem.next-elem("header") {
+				margin-block-start: calc(
+					props.get(vars.$separator-width) + props.get(vars.$spacing)
+				);
 			}
 		}
 
-		@include bem.elem('header') {
+		@include bem.elem("header") {
 			&:link,
 			&:visited,
 			&:enabled {
@@ -77,25 +84,25 @@
 			}
 		}
 
-		@include bem.elem('separator') {
-			block-size:       1px;
-			margin-block:     props.get(vars.$separator-width);
-			margin-inline:    props.get(vars.$item--pad-i);
+		@include bem.elem("separator") {
+			block-size: 1px;
+			margin-block: props.get(vars.$separator-width);
+			margin-inline: props.get(vars.$item--pad-i);
 			background-color: props.get(vars.$separator-color);
 		}
 
-		@include bem.elem('slot') {
-			padding-block:  props.get(vars.$item--pad-b);
+		@include bem.elem("slot") {
+			padding-block: props.get(vars.$item--pad-b);
 			padding-inline: props.get(vars.$item--pad-i);
 		}
 
-		@include bem.elem('icon-slot') {
-			display:         flex;
+		@include bem.elem("icon-slot") {
+			display: flex;
 			justify-content: center;
-			inline-size:     props.get(icon.$size);
+			inline-size: props.get(icon.$size);
 		}
 
-		@include bem.modifier('pull') {
+		@include bem.modifier("pull") {
 			margin: calc(-1 * props.get(vars.$item--pad-i));
 		}
 	}
-- 
cgit v1.3.1