nicer gutters

Author: Rich-Harris

apps/svelte.dev/src/lib/icons/chevron.svg

@@ -115,7 +115,7 @@
 
 	.fake-gutter {
 		text-align: right;
-		padding-right: 3px;
+		padding-right: 0.7rem;
 	}
 
 	.fake-content {

packages/editor/src/lib/Editor.svelte

@@ -38,16 +38,48 @@
 	}
 
 	.cm-activeLine {
+		background: inherit;
+	}
+
+	.cm-foldGutter {
+		width: 1.4rem;
+	}
+
+	.cm-activeLineGutter {
+		position: relative;
+
 		/* this must be translucent, or it will obscure the selection */
 		background: hsl(0, 0%, 0%, 0.04);
 
 		:root.dark & {
 			background: hsl(0, 0%, 100%, 0.04);
 		}
-	}
 
-	.cm-activeLineGutter {
-		background-color: var(--sk-bg-3);
+		span {
+			position: absolute;
+			display: block;
+			width: 100%;
+			height: 100%;
+			right: 0;
+			color: transparent;
+			user-select: none;
+
+			&::after {
+				content: '';
+				position: absolute;
+				top: 0.1rem;
+				left: 0;
+				width: 100%;
+				height: 100%;
+				background: url($lib/icons/chevron.svg) no-repeat 50% 50%;
+				background-size: contain;
+				rotate: -90deg;
+			}
+
+			&[title='Fold line']::after {
+				rotate: 0deg;
+			}
+		}
 	}
 
 	.cm-lineNumbers {
@@ -60,10 +92,6 @@
 		}
 	}
 
-	.cm-foldGutter {
-		width: 1rem;
-	}
-
 	.cm-foldPlaceholder {
 		background-color: transparent;
 		border: none;