Changed scroll component button design. Removed unnecessary z-index from tooltip arrow.

assets/components/scroll/scroll.vue

@@ -163,74 +163,12 @@ export default {
 	display: none;
 }
 
-.scroll-light {
+.expand-dark {
-	background: var(--background-dim);
-
-	.scroll-button {
-		.icon {
-			fill: var(--darken);
-		}
-
-		&.scroll-start .icon,
-		&.scroll-end .icon {
-			fill: var(--darken-weak);
-		}
-
-		&:hover:not(.scroll-start):not(.scroll-end) .icon {
-			fill: var(--text-dark);
-		}
-	}
-
-	.scroll-left {
-		background: linear-gradient(to right, var(--background-dim) 50%, transparent);
-	}
-
-	.scroll-right {
-		background: linear-gradient(to left, var(--background-dim) 50%, transparent);
-	}
-
-	.expand-dark {
 	display: none;
-	}
-
-	.expand-light {
-		display: block;
-	}
 }
 
-.scroll-dark {
+.expand-light {
-	background: var(--profile);
-
-	.scroll-button {
-		.icon {
-			fill: var(--lighten);
-		}
-
-		&.scroll-start .icon,
-		&.scroll-end .icon {
-			fill: var(--darken-weak);
-		}
-
-		&:hover:not(.scroll-start):not(.scroll-end) .icon {
-			fill: var(--text-light);
-		}
-	}
-
-	.scroll-left {
-		background: linear-gradient(to right, var(--profile) 50%, transparent);
-	}
-
-	.scroll-right {
-		background: linear-gradient(to left, var(--profile) 50%, transparent);
-	}
-
-	.expand-light {
-		display: none;
-	}
-
-	.expand-dark {
 	display: block;
-	}
 }
 
 .scroll-button {
@@ -257,6 +195,21 @@ export default {
 		right: 0;
 	}
 
+	.icon {
+		width: 1.5rem;
+		height: 1.5rem;
+		fill: var(--lighten);
+	}
+
+	&.scroll-start .icon,
+	&.scroll-end .icon {
+		fill: var(--lighten-weak);
+	}
+
+	&:hover:not(.scroll-start):not(.scroll-end) .icon {
+		fill: var(--lighten-strong);
+	}
+
 	&:hover {
 		display: flex;
 		cursor: pointer;

assets/components/tooltip/tooltip.vue

@@ -133,7 +133,6 @@ export default {
 		width: 0;
 		height: 0;
 		position: absolute;
-		z-index : 11;
 		top: -.5rem;
 		left: calc(50% - .5rem);
 		border-left: .5rem solid transparent;