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/_navbar.scss | 247 +++++++++++++++++++----------------------------
 1 file changed, 101 insertions(+), 146 deletions(-)

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

diff --git a/src/objects/_navbar.scss b/src/objects/_navbar.scss
index 4b678e0..cc1eaaa 100644
--- a/src/objects/_navbar.scss
+++ b/src/objects/_navbar.scss
@@ -1,197 +1,151 @@
-@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 "navbar.vars";
-@use "navbar.vars" as vars;
+@forward 'navbar.vars';
+@use 'navbar.vars' as vars;
 
 @mixin -apply-theme($theme, $key: ()) {
-	@include bem.elem("item-label") {
+	@include bem.elem('item-label') {
 		color: props.get($theme, list.join($key, --disabled --label-color)...);
 	}
 
-	@include bem.elem("item-content") {
+	@include bem.elem('item-content') {
 		color: props.get($theme, list.join($key, --disabled --text-color)...);
 
 		&::after {
-			outline: props.get($theme, list.join($key, --key-focus --border)...) 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)
-				)
+			outline: props.get($theme, list.join($key, --key-focus --border)...) 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($theme, list.join($key, --key-focus --outline)...);
 		}
 	}
 
-	@include bem.elem("item") {
+	@include bem.elem('item') {
 		&:link,
 		&:visited,
 		&:enabled {
-			@include bem.elem("item-label") {
+			@include bem.elem('item-label') {
 				color: props.get($theme, list.join($key, --label-color)...);
 			}
 
-			@include bem.elem("item-content") {
+			@include bem.elem('item-content') {
 				color: props.get($theme, list.join($key, --text-color)...);
 			}
 
 			&:hover,
 			&:focus-visible {
-				@include bem.elem("item-label") {
+				@include bem.elem('item-label') {
 					color: props.get($theme, list.join($key, --hover --label-color)...);
 				}
 
-				@include bem.elem("item-content") {
-					color: props.get($theme, list.join($key, --hover --text-color)...);
+				@include bem.elem('item-content') {
+					color:            props.get($theme, list.join($key, --hover --text-color)...);
 					background-color: props.get($theme, list.join($key, --hover --bg-color)...);
 				}
 			}
 
 			&:focus-visible {
-				@include bem.elem("item-label") {
+				@include bem.elem('item-label') {
 					color: props.get($theme, list.join($key, --key-focus --label)...);
 				}
 			}
 
 			&:active {
-				@include bem.elem("item-label") {
+				@include bem.elem('item-label') {
 					color: props.get($theme, list.join($key, --active --label-color)...);
 				}
 
-				@include bem.elem("item-content") {
-					color: props.get($theme, list.join($key, --active --text-color)...);
+				@include bem.elem('item-content') {
+					color:            props.get($theme, list.join($key, --active --text-color)...);
 					background-color: props.get($theme, list.join($key, --active --bg-color)...);
 				}
 			}
 		}
 
-		@include bem.is("selected") {
-			@include bem.elem("item-label") {
+		@include bem.is('selected') {
+			@include bem.elem('item-label') {
 				color: props.get($theme, list.join($key, --selected --disabled --label-color)...);
 			}
 
-			@include bem.elem("item-content") {
-				color: props.get($theme, list.join($key, --selected --disabled --text-color)...);
-				background-color: props.get(
-					$theme,
-					list.join($key, --selected --disabled --bg-color)...
-				);
+			@include bem.elem('item-content') {
+				color:            props.get($theme, list.join($key, --selected --disabled --text-color)...);
+				background-color: props.get($theme, list.join($key, --selected --disabled --bg-color)...);
 			}
 
 			&:link,
 			&:visited,
 			&:enabled {
-				@include bem.elem("item-label") {
+				@include bem.elem('item-label') {
 					color: props.get($theme, list.join($key, --selected --label-color)...);
 				}
 
-				@include bem.elem("item-content") {
-					color: props.get($theme, list.join($key, --selected --text-color)...);
+				@include bem.elem('item-content') {
+					color:            props.get($theme, list.join($key, --selected --text-color)...);
 					background-color: props.get($theme, list.join($key, --selected --bg-color)...);
 				}
 
 				&:hover,
 				&:focus-visible {
-					@include bem.elem("item-label") {
-						color: props.get(
-							$theme,
-							list.join($key, --selected --hover --label-color)...
-						);
+					@include bem.elem('item-label') {
+						color: props.get($theme, list.join($key, --selected --hover --label-color)...);
 					}
 
-					@include bem.elem("item-content") {
-						color: props.get(
-							$theme,
-							list.join($key, --selected --hover --text-color)...
-						);
-						background-color: props.get(
-							$theme,
-							list.join($key, --selected --hover --bg-color)...
-						);
+					@include bem.elem('item-content') {
+						color:            props.get($theme, list.join($key, --selected --hover --text-color)...);
+						background-color: props.get($theme, list.join($key, --selected --hover --bg-color)...);
 					}
 				}
 
 				&:active {
-					@include bem.elem("item-label") {
-						color: props.get(
-							$theme,
-							list.join($key, --selected --active --label-color)...
-						);
+					@include bem.elem('item-label') {
+						color: props.get($theme, list.join($key, --selected --active --label-color)...);
 					}
 
-					@include bem.elem("item-content") {
-						color: props.get(
-							$theme,
-							list.join($key, --selected --active --text-color)...
-						);
-						background-color: props.get(
-							$theme,
-							list.join($key, --selected --active --bg-color)...
-						);
+					@include bem.elem('item-content') {
+						color:            props.get($theme, list.join($key, --selected --active --text-color)...);
+						background-color: props.get($theme, list.join($key, --selected --active --bg-color)...);
 					}
 				}
 			}
 		}
 	}
 
-	@include bem.modifier("quiet") {
-		@include bem.elem("item") {
-			@include bem.is("selected") {
-				@include bem.elem("item-content") {
-					color: props.get(
-						$theme,
-						list.join($key, --quiet --selected --disabled --text-color)...
-					);
-					background-color: props.get(
-						$theme,
-						list.join($key, --quiet --selected --disabled --bg-color)...
-					);
+	@include bem.modifier('quiet') {
+		@include bem.elem('item') {
+			@include bem.is('selected') {
+				@include bem.elem('item-content') {
+					color:            props.get($theme, list.join($key, --quiet --selected --disabled --text-color)...);
+					background-color: props.get($theme, list.join($key, --quiet --selected --disabled --bg-color)...);
 				}
 
 				&:link,
 				&:visited,
 				&:enabled {
-					@include bem.elem("item-content") {
-						color: props.get(
-							$theme,
-							list.join($key, --quiet --selected --text-color)...
-						);
-						background-color: props.get(
-							$theme,
-							list.join($key, --quiet --selected --bg-color)...
-						);
+					@include bem.elem('item-content') {
+						color:            props.get($theme, list.join($key, --quiet --selected --text-color)...);
+						background-color: props.get($theme, list.join($key, --quiet --selected --bg-color)...);
 					}
 
 					&:hover,
 					&:focus-visible {
-						@include bem.elem("item-content") {
-							color: props.get(
-								$theme,
-								list.join($key, --quiet --selected --hover --text-color)...
-							);
-							background-color: props.get(
-								$theme,
-								list.join($key, --quiet --selected --hover --bg-color)...
-							);
+						@include bem.elem('item-content') {
+							color:            props.get($theme, list.join($key, --quiet --selected --hover --text-color)...);
+							background-color: props.get($theme, list.join($key, --quiet --selected --hover --bg-color)...);
 						}
 					}
 
 					&:active {
-						@include bem.elem("item-content") {
-							color: props.get(
-								$theme,
-								list.join($key, --quiet --selected --active --text-color)...
-							);
-							background-color: props.get(
-								$theme,
-								list.join($key, --quiet --selected --active --bg-color)...
-							);
+						@include bem.elem('item-content') {
+							color:            props.get($theme, list.join($key, --quiet --selected --active --text-color)...);
+							background-color: props.get($theme, list.join($key, --quiet --selected --active --bg-color)...);
 						}
 					}
 				}
@@ -201,64 +155,64 @@
 }
 
 @mixin styles {
-	@include materialize-at-root(meta.module-variables("vars"));
+	@include materialize-at-root(meta.module-variables('vars'));
 
-	@include bem.object("navbar") {
-		display: flex;
+	@include bem.object('navbar') {
+		display:    flex;
 		block-size: props.get(vars.$block-size);
 
-		@include bem.elem("item-label") {
-			order: 2;
+		@include bem.elem('item-label') {
+			order:              2;
 			margin-block-start: props.get(vars.$item--pad-b-icon);
-			font-size: props.get(vars.$item--label-font-size);
-			font-weight: bold;
+			font-size:          props.get(vars.$item--label-font-size);
+			font-weight:        bold;
 
-			@include bem.next-elem("item-content") {
-				padding-block: props.get(vars.$item--pad-b-icon);
+			@include bem.next-elem('item-content') {
+				padding-block:  props.get(vars.$item--pad-b-icon);
 				padding-inline: props.get(vars.$item--pad-i-icon);
-				font-size: props.get(vars.$item--icon-size);
+				font-size:      props.get(vars.$item--icon-size);
 			}
 		}
 
-		@include bem.elem("item-content-text") {
+		@include bem.elem('item-content-text') {
 			margin-inline: props.get(vars.$item--pad-i-label);
 		}
 
-		@include bem.elem("item-content") {
-			position: relative;
-			order: 1;
-			padding-block: props.get(vars.$item--pad-b);
-			padding-inline: props.get(vars.$item--pad-i);
-			font-size: props.get(vars.$item--font-size);
-			white-space: nowrap;
-			border-radius: 100em;
+		@include bem.elem('item-content') {
+			position:        relative;
+			order:           1;
+			padding-block:   props.get(vars.$item--pad-b);
+			padding-inline:  props.get(vars.$item--pad-i);
+			font-size:       props.get(vars.$item--font-size);
+			white-space:     nowrap;
+			border-radius:   100em;
 
 			&::after {
-				position: absolute;
-				inset: calc(-1 * props.get(vars.$key-focus--border-offset));
-				z-index: -10;
-				display: block;
-				visibility: hidden;
+				position:       absolute;
+				inset:          calc(-1 * props.get(vars.$key-focus--border-offset));
+				z-index:        -10;
+				display:        block;
+				visibility:     hidden;
 				pointer-events: none;
-				content: "";
-				border-radius: 100em;
+				content:        '';
+				border-radius:  100em;
 			}
 		}
 
-		@include bem.elem("item") {
-			display: flex;
-			flex-direction: column;
-			align-items: center;
+		@include bem.elem('item') {
+			display:         flex;
+			flex-direction:  column;
+			align-items:     center;
 			justify-content: center;
-			inline-size: 100%;
-			padding-inline: calc(0.5 * props.get(vars.$spacing));
-			font-weight: 500;
+			inline-size:     100%;
+			padding-inline:  calc(.5 * props.get(vars.$spacing));
+			font-weight:     500;
 
 			&:link,
 			&:visited,
 			&:enabled {
 				&:focus-visible {
-					@include bem.elem("item-content") {
+					@include bem.elem('item-content') {
 						&::after {
 							visibility: visible;
 						}
@@ -266,7 +220,7 @@
 				}
 			}
 
-			@include bem.is("selected") {
+			@include bem.is('selected') {
 				font-weight: bold;
 			}
 		}
@@ -279,21 +233,22 @@
 			}
 		}
 
-		@include bem.modifier("hide-unselected") {
-			@include bem.elem("item") {
+		@include bem.modifier('hide-unselected') {
+			@include bem.elem('item') {
 				display: none;
 
-				@include bem.is("selected") {
+				@include bem.is('selected') {
 					display: flex;
 				}
 			}
 		}
 
-		@include bem.modifier("adapt") {
+		@include bem.modifier('adapt') {
 			block-size: 100%;
 		}
 
-		@include bem.modifier("align-block") {
+
+		@include bem.modifier('align-block') {
 			margin-inline: calc(-1 * props.get(vars.$item--pad-i));
 		}
 	}
-- 
cgit v1.3.1