Style tree

src/components/tree-item.scss

@@ -1,37 +1,51 @@
 @use '../rem' as *;
 
 @layer kol-theme-component {
-	.tree-item {
-		ul {
-			list-style: disc inside;
-			border-left: rem(2) solid;
-			padding-left: rem(calc(0.4 * 16));
-			margin-left: rem(calc(2 * 16));
-			margin-top: rem(calc(0.4 * 16));
-		}
+	.tree-link {
+		display: block;
+		border: rem(1) solid transparent;
+
+		&:hover,
+		&:focus-within {
+			border: rem(1) solid var(--color-primary);
+			background-color: var(--color-primary-variant);
 
-		li {
-			margin: rem(calc(0.4 * 16)) 0;
+			& > a {
+				outline-offset: 0;
+			}
+
+			& > a,
+			.toggle-button {
+				color: var(--color-light);
+			}
 		}
 
-		.toggle-button {
-			align-items: center;
-			border: rem(1) solid var(--color-primary);
-			display: inline-flex;
-			height: rem(calc(1.6 * 16));
-			justify-content: center;
-			margin-right: rem(calc(0.4 * 16));
-			width: rem(calc(1.6 * 16));
+		&.active {
+			background-color: var(--color-primary);
+
+			a,
+			.toggle-button {
+				color: var(--color-light);
+			}
 		}
-	}
 
-	.tree-link {
-		display: inline-block;
-		padding: rem(calc(0.4 * 16));
+		a {
+			display: block;
+			color: var(--color-text);
+			text-decoration: none;
+			text-align: left;
 
-		&.active {
-			background: var(--color-primary-variant);
-			color: var(--color-light);
+			.toggle-button {
+				display: inline-block;
+
+				&:hover {
+					transform: scale(1.3);
+				}
+			}
+		}
+
+		& > a {
+			padding-left: max(calc(rem(30) * var(--level)), rem(8));
 		}
 	}
 }

src/components/tree.scss

@@ -2,8 +2,17 @@
 
 @layer kol-theme-component {
 	.tree {
+		ul {
+			border: rem(2) solid transparent;
+			border-radius: var(--border-radius);
+		}
+
 		&:focus-within {
-			outline: rem(1) solid var(--color-primary);
+			outline: 0;
+
+			ul {
+				border: rem(2) solid var(--color-primary);
+			}
 		}
 	}
 }