From b3c3963be23e72d0a1cc14c896320b3b62998012 Mon Sep 17 00:00:00 2001
From: Almog Lemberg <almoglemberg@gmail.com>
Date: Mon, 11 Apr 2022 16:15:50 +0300
Subject: [PATCH 1/9] Added scrollbar css

---
 src/assets/scrollbar-button-down.svg     |  1 +
 src/assets/scrollbar-button-left.svg     |  1 +
 src/assets/scrollbar-button-right.svg    |  1 +
 src/assets/scrollbar-button-up.svg       |  1 +
 src/assets/scrollbar-track-horizonal.svg |  1 +
 src/assets/scrollbar-track-vertical.svg  |  1 +
 src/index.css                            | 57 ++++++++++++++++++++++++
 7 files changed, 63 insertions(+)
 create mode 100644 src/assets/scrollbar-button-down.svg
 create mode 100644 src/assets/scrollbar-button-left.svg
 create mode 100644 src/assets/scrollbar-button-right.svg
 create mode 100644 src/assets/scrollbar-button-up.svg
 create mode 100644 src/assets/scrollbar-track-horizonal.svg
 create mode 100644 src/assets/scrollbar-track-vertical.svg

diff --git a/src/assets/scrollbar-button-down.svg b/src/assets/scrollbar-button-down.svg
new file mode 100644
index 000000000..173fda716
--- /dev/null
+++ b/src/assets/scrollbar-button-down.svg
@@ -0,0 +1 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -0.5 17 17' shape-rendering='crispEdges'><path stroke='#eeede5' d='M0 0h1m15 0h1M0 1h1M0 2h1M0 3h1M0 4h1M0 5h1M0 6h1M0 7h1M0 8h1M0 9h1m-1 1h1m-1 1h1m-1 1h1m-1 1h1m-1 1h1m-1 1h1m15 0h1M0 16h1m15 0h1'/><path stroke='#fdfdfa' d='M1 0h1'/><path stroke='#fff' d='M2 0h14M1 1h1m13 0h1M1 2h1m13 0h1M1 3h1m13 0h1M1 4h1m13 0h1M1 5h1m13 0h1M1 6h1m13 0h1M1 7h1m13 0h1M1 8h1m13 0h1M1 9h1m13 0h1M1 10h1m13 0h1M1 11h1m13 0h1M1 12h1m13 0h1M1 13h1m13 0h1M1 14h1m13 0h1M2 15h13'/><path stroke='#e6eefc' d='M2 1h1'/><path stroke='#d0dffc' d='M3 1h1M2 2h1'/><path stroke='#cad8f9' d='M4 1h1M2 3h1'/><path stroke='#c4d2f7' d='M5 1h1'/><path stroke='#c0d0f7' d='M6 1h1'/><path stroke='#bdcef7' d='M7 1h1M2 6h1'/><path stroke='#bbcdf5' d='M8 1h1'/><path stroke='#b8cbf6' d='M9 1h1M2 7h1'/><path stroke='#b7caf5' d='M10 1h1M2 8h1'/><path stroke='#b5c8f7' d='M11 1h1'/><path stroke='#b3c7f5' d='M12 1h1'/><path stroke='#afc5f4' d='M13 1h1'/><path stroke='#dce6f9' d='M14 1h1'/><path stroke='#dfe2e1' d='M16 1h1'/><path stroke='#e1eafe' d='M3 2h1'/><path stroke='#dae6fe' d='M4 2h1M3 3h1'/><path stroke='#d4e1fc' d='M5 2h1M3 4h1'/><path stroke='#d1e0fd' d='M6 2h1M4 4h1'/><path stroke='#d0ddfc' d='M7 2h1M3 5h1'/><path stroke='#cedbfd' d='M8 2h1M6 3h1'/><path stroke='#cad9fd' d='M9 2h1M7 3h1M5 5h1'/><path stroke='#c8d8fb' d='M10 2h1'/><path stroke='#c5d6fc' d='M11 2h1m-8 8h3'/><path stroke='#c2d3fc' d='M12 2h1m-2 1h1m-9 7h1m0 1h1'/><path stroke='#bccefa' d='M13 2h1m-1 2h1m-9 9h2'/><path stroke='#b9c9f3' d='M14 2h1M5 14h3'/><path stroke='#cfd7dd' d='M16 2h1'/><path stroke='#d8e3fc' d='M4 3h1'/><path stroke='#d1defd' d='M5 3h1'/><path stroke='#c9d8fc' d='M8 3h1M6 4h2M6 6h2M3 7h1'/><path stroke='#c5d5fc' d='M9 3h1M3 9h3'/><path stroke='#c5d3fc' d='M10 3h1'/><path stroke='#bed0fc' d='M12 3h1M9 4h1m-7 7h1m0 1h1'/><path stroke='#bccdfa' d='M13 3h1'/><path stroke='#baccf4' d='M14 3h1'/><path stroke='#bdcbda' d='M16 3h1'/><path stroke='#c4d4f7' d='M2 4h1'/><path stroke='#cddbfc' d='M5 4h1M3 6h1'/><path stroke='#c8d5fb' d='M8 4h1'/><path stroke='#bbcefd' d='M10 4h3M9 5h1M8 6h1'/><path stroke='#bcccf3' d='M14 4h1m-1 1h1m-1 1h1'/><path stroke='#b1c2d5' d='M16 4h1'/><path stroke='#bed0f8' d='M2 5h1'/><path stroke='#ceddfd' d='M4 5h1'/><path stroke='#c8d6fb' d='M6 5h3M3 8h2'/><path stroke='#bacdfc' d='M10 5h1m1 0h2M3 12h1'/><path stroke='#b9cdfb' d='M11 5h1M9 6h2m1 0h2m-1 1h1'/><path stroke='#a8bbd4' d='M16 5h1'/><path stroke='#cddafc' d='M4 6h1'/><path stroke='#4d6185' d='M5 6h1m5 0h1M4 7h3m3 0h3M5 8h3m1 0h3M6 9h5m-4 1h3m-2 1h1'/><path stroke='#a4b8d3' d='M16 6h1'/><path stroke='#c1d3fb' d='M7 7h2M8 8h1'/><path stroke='#b6cefb' d='M9 7h1m2 1h1m-2 1h2'/><path stroke='#bacbf4' d='M14 7h1'/><path stroke='#a0b5d3' d='M16 7h1m-1 1h1m-1 5h1'/><path stroke='#b6cdfb' d='M13 8h1m-5 5h1'/><path stroke='#b9cbf3' d='M14 8h1'/><path stroke='#b4c8f6' d='M2 9h1'/><path stroke='#b5cdfa' d='M13 9h1'/><path stroke='#b5c9f3' d='M14 9h1'/><path stroke='#9fb5d2' d='M16 9h1m-1 1h1m-1 1h1m-1 1h1'/><path stroke='#b1c7f6' d='M2 10h1'/><path stroke='#b2cffb' d='M10 10h3m-2 2h1'/><path stroke='#b1cbfa' d='M13 10h1'/><path stroke='#b3c8f5' d='M14 10h1m-6 4h2'/><path stroke='#adc3f6' d='M2 11h1'/><path stroke='#c3d3fd' d='M5 11h1'/><path stroke='#c2d5fc' d='M6 11h2'/><path stroke='#bad4fc' d='M9 11h1'/><path stroke='#b7d3fc' d='M10 11h1m-2 1h1'/><path stroke='#b3d1fc' d='M11 11h1'/><path stroke='#afcefb' d='M12 11h1'/><path stroke='#aecafa' d='M13 11h1'/><path stroke='#b1c8f3' d='M14 11h1'/><path stroke='#acc2f5' d='M2 12h1'/><path stroke='#c1d2fb' d='M5 12h1'/><path stroke='#bed1fc' d='M6 12h2'/><path stroke='#bdd3fb' d='M8 12h1'/><path stroke='#b6d1fb' d='M10 12h1'/><path stroke='#afccfb' d='M12 12h1'/><path stroke='#adc9f9' d='M13 12h1m-2 1h1'/><path stroke='#b1c5f3' d='M14 12h1'/><path stroke='#aac0f3' d='M2 13h1'/><path stroke='#b7cbf9' d='M3 13h1'/><path stroke='#b9cefb' d='M4 13h1'/><path stroke='#bbcef9' d='M7 13h1'/><path stroke='#b9cffb' d='M8 13h1'/><path stroke='#b2cdfb' d='M10 13h1'/><path stroke='#b0cbf9' d='M11 13h1'/><path stroke='#aec8f7' d='M13 13h1'/><path stroke='#b0c5f2' d='M14 13h1'/><path stroke='#dbe3f8' d='M2 14h1'/><path stroke='#b7c6f1' d='M3 14h1'/><path stroke='#b8c9f2' d='M4 14h1m3 0h1'/><path stroke='#b2c8f4' d='M11 14h1'/><path stroke='#b1c6f3' d='M12 14h1'/><path stroke='#b0c4f2' d='M13 14h1'/><path stroke='#d9e3f6' d='M14 14h1'/><path stroke='#aec0d6' d='M16 14h1'/><path stroke='#c3d4e7' d='M1 15h1'/><path stroke='#aec4e5' d='M15 15h1'/><path stroke='#edf1f3' d='M1 16h1'/><path stroke='#aac0e1' d='M2 16h1'/><path stroke='#94b1d9' d='M3 16h1'/><path stroke='#88a7d8' d='M4 16h1'/><path stroke='#83a4d3' d='M5 16h1'/><path stroke='#7da0d4' d='M6 16h1m3 0h3'/><path stroke='#7e9fd2' d='M7 16h1'/><path stroke='#7c9fd3' d='M8 16h2'/><path stroke='#82a4d6' d='M13 16h1'/><path stroke='#94b0dd' d='M14 16h1'/><path stroke='#ecf2f7' d='M15 16h1'/></svg>
\ No newline at end of file
diff --git a/src/assets/scrollbar-button-left.svg b/src/assets/scrollbar-button-left.svg
new file mode 100644
index 000000000..d6a4df4f4
--- /dev/null
+++ b/src/assets/scrollbar-button-left.svg
@@ -0,0 +1 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -0.5 17 17' shape-rendering='crispEdges'><path stroke='#eeede5' d='M0 0h17m-1 1h1m-1 14h1m-1 1h1'/><path stroke='#fdfdfa' d='M0 1h1'/><path stroke='#fff' d='M1 1h15M0 2h1m14 0h1M0 3h1m14 0h1M0 4h1m14 0h1M0 5h1m14 0h1M0 6h1m14 0h1M0 7h1m14 0h1M0 8h1m14 0h1M0 9h1m14 0h1M0 10h1m14 0h1M0 11h1m14 0h1M0 12h1m14 0h1M0 13h1m14 0h1M0 14h1m14 0h1M1 15h14'/><path stroke='#e6eefc' d='M1 2h1'/><path stroke='#d0dffc' d='M2 2h1M1 3h1'/><path stroke='#cad8f9' d='M3 2h1M1 4h1'/><path stroke='#c4d2f7' d='M4 2h1'/><path stroke='#c0d0f7' d='M5 2h1'/><path stroke='#bdcef7' d='M6 2h1M1 7h1'/><path stroke='#bbcdf5' d='M7 2h2'/><path stroke='#b8cbf6' d='M9 2h1M1 8h1'/><path stroke='#b7caf5' d='M10 2h1M1 9h1'/><path stroke='#b5c8f7' d='M11 2h1'/><path stroke='#b3c7f5' d='M12 2h1'/><path stroke='#afc5f4' d='M13 2h1'/><path stroke='#dce6f9' d='M14 2h1'/><path stroke='#dfe2e1' d='M16 2h1'/><path stroke='#e1eafe' d='M2 3h1'/><path stroke='#dae6fe' d='M3 3h1M2 4h1'/><path stroke='#d4e1fc' d='M4 3h1M2 5h1'/><path stroke='#d1e0fd' d='M5 3h1M3 5h1'/><path stroke='#d0ddfc' d='M6 3h1M2 6h1'/><path stroke='#cedbfd' d='M7 3h1M5 4h1'/><path stroke='#cddbfc' d='M8 3h1M4 5h1M2 7h1'/><path stroke='#cad9fd' d='M9 3h1M6 4h1M4 6h1'/><path stroke='#c8d8fb' d='M10 3h1'/><path stroke='#c5d6fc' d='M11 3h1m-9 7h3'/><path stroke='#c2d3fc' d='M12 3h1m-2 1h1M2 10h1m0 1h1'/><path stroke='#bccefa' d='M13 3h1m-1 2h1M4 13h2'/><path stroke='#b9c9f3' d='M14 3h1M4 14h3'/><path stroke='#cfd7dd' d='M16 3h1'/><path stroke='#d8e3fc' d='M3 4h1'/><path stroke='#d1defd' d='M4 4h1'/><path stroke='#c9d8fc' d='M7 4h1M5 5h2M4 7h1M2 8h1'/><path stroke='#4d6185' d='M8 4h1M7 5h3M6 6h3M5 7h3M4 8h3M5 9h3m-2 1h3m-2 1h3m-2 1h1'/><path stroke='#c5d5fc' d='M9 4h1'/><path stroke='#c5d3fc' d='M10 4h1'/><path stroke='#bed0fc' d='M12 4h1M2 11h1m0 1h1'/><path stroke='#bccdfa' d='M13 4h1'/><path stroke='#baccf4' d='M14 4h1'/><path stroke='#bdcbda' d='M16 4h1'/><path stroke='#c4d4f7' d='M1 5h1'/><path stroke='#bbcefd' d='M10 5h3M9 6h1'/><path stroke='#bcccf3' d='M14 5h1m-1 1h1m-1 1h1'/><path stroke='#b1c2d5' d='M16 5h1'/><path stroke='#bed0f8' d='M1 6h1'/><path stroke='#ceddfd' d='M3 6h1'/><path stroke='#c8d6fb' d='M5 6h1M2 9h3'/><path stroke='#bacdfc' d='M10 6h1m1 0h2M2 12h1'/><path stroke='#b9cdfb' d='M11 6h1M8 7h3m1 0h2m-1 1h1'/><path stroke='#a8bbd4' d='M16 6h1'/><path stroke='#cddafc' d='M3 7h1'/><path stroke='#b7cdfc' d='M11 7h1m0 1h1'/><path stroke='#a4b8d3' d='M16 7h1'/><path stroke='#cad8fd' d='M3 8h1'/><path stroke='#c1d3fb' d='M7 8h2'/><path stroke='#b6cefb' d='M9 8h3M9 9h4'/><path stroke='#bacbf4' d='M14 8h1'/><path stroke='#a0b5d3' d='M16 8h1m-1 1h1m-1 4h1'/><path stroke='#bdd3fb' d='M8 9h1m-2 3h1'/><path stroke='#b6cdfb' d='M13 9h1m-5 4h1'/><path stroke='#b9cbf3' d='M14 9h1'/><path stroke='#b1c7f6' d='M1 10h1'/><path stroke='#bad4fc' d='M9 10h1'/><path stroke='#b2cffb' d='M10 10h3m-2 2h1'/><path stroke='#b1cbfa' d='M13 10h1'/><path stroke='#b3c8f5' d='M14 10h1m-6 4h2'/><path stroke='#9fb5d2' d='M16 10h1m-1 1h1m-1 1h1'/><path stroke='#adc3f6' d='M1 11h1'/><path stroke='#c3d3fd' d='M4 11h1'/><path stroke='#c2d5fc' d='M5 11h2'/><path stroke='#b7d3fc' d='M10 11h1m-2 1h1'/><path stroke='#b3d1fc' d='M11 11h1'/><path stroke='#afcefb' d='M12 11h1'/><path stroke='#aecafa' d='M13 11h1'/><path stroke='#b1c8f3' d='M14 11h1'/><path stroke='#acc2f5' d='M1 12h1'/><path stroke='#c1d2fb' d='M4 12h1'/><path stroke='#bed1fc' d='M5 12h2'/><path stroke='#b6d1fb' d='M10 12h1'/><path stroke='#afccfb' d='M12 12h1'/><path stroke='#adc9f9' d='M13 12h1m-2 1h1'/><path stroke='#b1c5f3' d='M14 12h1'/><path stroke='#aac0f3' d='M1 13h1'/><path stroke='#b7cbf9' d='M2 13h1'/><path stroke='#b9cefb' d='M3 13h1'/><path stroke='#bbcef9' d='M6 13h1'/><path stroke='#b9cffb' d='M7 13h1'/><path stroke='#b8cffa' d='M8 13h1'/><path stroke='#b2cdfb' d='M10 13h1'/><path stroke='#b0cbf9' d='M11 13h1'/><path stroke='#aec8f7' d='M13 13h1'/><path stroke='#b0c5f2' d='M14 13h1'/><path stroke='#dbe3f8' d='M1 14h1'/><path stroke='#b7c6f1' d='M2 14h1'/><path stroke='#b8c9f2' d='M3 14h1m3 0h2'/><path stroke='#b2c8f4' d='M11 14h1'/><path stroke='#b1c6f3' d='M12 14h1'/><path stroke='#b0c4f2' d='M13 14h1'/><path stroke='#d9e3f6' d='M14 14h1'/><path stroke='#aec0d6' d='M16 14h1'/><path stroke='#c3d4e7' d='M0 15h1'/><path stroke='#aec4e5' d='M15 15h1'/><path stroke='#edf1f3' d='M0 16h1'/><path stroke='#aac0e1' d='M1 16h1'/><path stroke='#94b1d9' d='M2 16h1'/><path stroke='#88a7d8' d='M3 16h1'/><path stroke='#83a4d3' d='M4 16h1'/><path stroke='#7da0d4' d='M5 16h1m4 0h3'/><path stroke='#7e9fd2' d='M6 16h1'/><path stroke='#7c9fd3' d='M7 16h3'/><path stroke='#82a4d6' d='M13 16h1'/><path stroke='#94b0dd' d='M14 16h1'/><path stroke='#ecf2f7' d='M15 16h1'/></svg>
\ No newline at end of file
diff --git a/src/assets/scrollbar-button-right.svg b/src/assets/scrollbar-button-right.svg
new file mode 100644
index 000000000..a20630bde
--- /dev/null
+++ b/src/assets/scrollbar-button-right.svg
@@ -0,0 +1 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -0.5 17 17' shape-rendering='crispEdges'><path stroke='#eeede5' d='M0 0h17m-1 1h1m-1 14h1m-1 1h1'/><path stroke='#fdfdfa' d='M0 1h1'/><path stroke='#fff' d='M1 1h15M0 2h1m14 0h1M0 3h1m14 0h1M0 4h1m14 0h1M0 5h1m14 0h1M0 6h1m14 0h1M0 7h1m14 0h1M0 8h1m14 0h1M0 9h1m14 0h1M0 10h1m14 0h1M0 11h1m14 0h1M0 12h1m14 0h1M0 13h1m14 0h1M0 14h1m14 0h1M1 15h14'/><path stroke='#e6eefc' d='M1 2h1'/><path stroke='#d0dffc' d='M2 2h1M1 3h1'/><path stroke='#cad8f9' d='M3 2h1M1 4h1'/><path stroke='#c4d2f7' d='M4 2h1'/><path stroke='#c0d0f7' d='M5 2h1'/><path stroke='#bdcef7' d='M6 2h1M1 7h1'/><path stroke='#bbcdf5' d='M7 2h2'/><path stroke='#b8cbf6' d='M9 2h1M1 8h1'/><path stroke='#b7caf5' d='M10 2h1'/><path stroke='#b5c8f7' d='M11 2h1'/><path stroke='#b3c7f5' d='M12 2h1'/><path stroke='#afc5f4' d='M13 2h1'/><path stroke='#dce6f9' d='M14 2h1'/><path stroke='#dfe2e1' d='M16 2h1'/><path stroke='#e1eafe' d='M2 3h1'/><path stroke='#dae6fe' d='M3 3h1M2 4h1'/><path stroke='#d4e1fc' d='M4 3h1M2 5h1'/><path stroke='#d1e0fd' d='M5 3h1M3 5h1'/><path stroke='#d0ddfc' d='M6 3h1M2 6h1'/><path stroke='#cedbfd' d='M7 3h1M5 4h1'/><path stroke='#cddbfc' d='M8 3h1M4 5h1M2 7h1'/><path stroke='#cad9fd' d='M9 3h1M6 4h1M4 6h1'/><path stroke='#c8d8fb' d='M10 3h1'/><path stroke='#c5d6fc' d='M11 3h1m-9 7h3'/><path stroke='#c2d3fc' d='M12 3h1m-2 1h1M2 10h1m0 1h1'/><path stroke='#bccefa' d='M13 3h1m-1 2h1M4 13h2'/><path stroke='#b9c9f3' d='M14 3h1M4 14h3'/><path stroke='#cfd7dd' d='M16 3h1'/><path stroke='#d8e3fc' d='M3 4h1'/><path stroke='#d1defd' d='M4 4h1'/><path stroke='#4d6185' d='M7 4h1M6 5h3M7 6h3M8 7h3M9 8h3M8 9h3m-4 1h3m-4 1h3m-2 1h1'/><path stroke='#c8d6fb' d='M8 4h1M5 6h2'/><path stroke='#c5d5fc' d='M9 4h1M2 9h5'/><path stroke='#c5d3fc' d='M10 4h1'/><path stroke='#bed0fc' d='M12 4h1M9 5h1m-8 6h1m0 1h1'/><path stroke='#bccdfa' d='M13 4h1'/><path stroke='#baccf4' d='M14 4h1'/><path stroke='#bdcbda' d='M16 4h1'/><path stroke='#c4d4f7' d='M1 5h1'/><path stroke='#c9d8fc' d='M5 5h1M4 7h3M2 8h1'/><path stroke='#bbcefd' d='M10 5h3M7 7h1'/><path stroke='#bcccf3' d='M14 5h1m-1 1h1m-1 1h1'/><path stroke='#b1c2d5' d='M16 5h1'/><path stroke='#bed0f8' d='M1 6h1'/><path stroke='#ceddfd' d='M3 6h1'/><path stroke='#bacdfc' d='M10 6h1m1 0h2M2 12h1'/><path stroke='#b9cdfb' d='M11 6h1m0 1h2m-1 1h1'/><path stroke='#a8bbd4' d='M16 6h1'/><path stroke='#cddafc' d='M3 7h1'/><path stroke='#b7cdfc' d='M11 7h1m0 1h1'/><path stroke='#a4b8d3' d='M16 7h1'/><path stroke='#cad8fd' d='M3 8h3'/><path stroke='#c1d3fb' d='M6 8h3'/><path stroke='#bacbf4' d='M14 8h1'/><path stroke='#a0b5d3' d='M16 8h1m-1 5h1'/><path stroke='#b4c8f6' d='M1 9h1'/><path stroke='#c2d5fc' d='M7 9h1m-3 2h1'/><path stroke='#b6cefb' d='M11 9h2'/><path stroke='#b5cdfa' d='M13 9h1'/><path stroke='#b5c9f3' d='M14 9h1'/><path stroke='#9fb5d2' d='M16 9h1m-1 1h1m-1 1h1m-1 1h1'/><path stroke='#b1c7f6' d='M1 10h1'/><path stroke='#c3d5fd' d='M6 10h1'/><path stroke='#b2cffb' d='M10 10h3m-2 2h1'/><path stroke='#b1cbfa' d='M13 10h1'/><path stroke='#b3c8f5' d='M14 10h1m-6 4h2'/><path stroke='#adc3f6' d='M1 11h1'/><path stroke='#c3d3fd' d='M4 11h1'/><path stroke='#bad4fc' d='M9 11h1'/><path stroke='#b7d3fc' d='M10 11h1m-2 1h1'/><path stroke='#b3d1fc' d='M11 11h1'/><path stroke='#afcefb' d='M12 11h1'/><path stroke='#aecafa' d='M13 11h1'/><path stroke='#b1c8f3' d='M14 11h1'/><path stroke='#acc2f5' d='M1 12h1'/><path stroke='#c1d2fb' d='M4 12h1'/><path stroke='#bed1fc' d='M5 12h2'/><path stroke='#bbd3fd' d='M8 12h1'/><path stroke='#b6d1fb' d='M10 12h1'/><path stroke='#afccfb' d='M12 12h1'/><path stroke='#adc9f9' d='M13 12h1m-2 1h1'/><path stroke='#b1c5f3' d='M14 12h1'/><path stroke='#aac0f3' d='M1 13h1'/><path stroke='#b7cbf9' d='M2 13h1'/><path stroke='#b9cefb' d='M3 13h1'/><path stroke='#bbcef9' d='M6 13h1'/><path stroke='#b9cffb' d='M7 13h1'/><path stroke='#b8cffa' d='M8 13h1'/><path stroke='#b6cdfb' d='M9 13h1'/><path stroke='#b2cdfb' d='M10 13h1'/><path stroke='#b0cbf9' d='M11 13h1'/><path stroke='#aec8f7' d='M13 13h1'/><path stroke='#b0c5f2' d='M14 13h1'/><path stroke='#dbe3f8' d='M1 14h1'/><path stroke='#b7c6f1' d='M2 14h1'/><path stroke='#b8c9f2' d='M3 14h1m3 0h2'/><path stroke='#b2c8f4' d='M11 14h1'/><path stroke='#b1c6f3' d='M12 14h1'/><path stroke='#b0c4f2' d='M13 14h1'/><path stroke='#d9e3f6' d='M14 14h1'/><path stroke='#aec0d6' d='M16 14h1'/><path stroke='#c3d4e7' d='M0 15h1'/><path stroke='#aec4e5' d='M15 15h1'/><path stroke='#edf1f3' d='M0 16h1'/><path stroke='#aac0e1' d='M1 16h1'/><path stroke='#94b1d9' d='M2 16h1'/><path stroke='#88a7d8' d='M3 16h1'/><path stroke='#83a4d3' d='M4 16h1'/><path stroke='#7da0d4' d='M5 16h1m4 0h3'/><path stroke='#7e9fd2' d='M6 16h1'/><path stroke='#7c9fd3' d='M7 16h3'/><path stroke='#82a4d6' d='M13 16h1'/><path stroke='#94b0dd' d='M14 16h1'/><path stroke='#ecf2f7' d='M15 16h1'/></svg>
\ No newline at end of file
diff --git a/src/assets/scrollbar-button-up.svg b/src/assets/scrollbar-button-up.svg
new file mode 100644
index 000000000..f9f93f438
--- /dev/null
+++ b/src/assets/scrollbar-button-up.svg
@@ -0,0 +1 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -0.5 17 17' shape-rendering='crispEdges'><path stroke='#eeede5' d='M0 0h1m15 0h1M0 1h1M0 2h1M0 3h1M0 4h1M0 5h1M0 6h1M0 7h1M0 8h1M0 9h1m-1 1h1m-1 1h1m-1 1h1m-1 1h1m-1 1h1m-1 1h1m15 0h1M0 16h1m15 0h1'/><path stroke='#fdfdfa' d='M1 0h1'/><path stroke='#fff' d='M2 0h14M1 1h1m13 0h1M1 2h1m13 0h1M1 3h1m13 0h1M1 4h1m13 0h1M1 5h1m13 0h1M1 6h1m13 0h1M1 7h1m13 0h1M1 8h1m13 0h1M1 9h1m13 0h1M1 10h1m13 0h1M1 11h1m13 0h1M1 12h1m13 0h1M1 13h1m13 0h1M1 14h1m13 0h1M2 15h13'/><path stroke='#e6eefc' d='M2 1h1'/><path stroke='#d0dffc' d='M3 1h1M2 2h1'/><path stroke='#cad8f9' d='M4 1h1M2 3h1'/><path stroke='#c4d2f7' d='M5 1h1'/><path stroke='#c0d0f7' d='M6 1h1'/><path stroke='#bdcef7' d='M7 1h1M2 6h1'/><path stroke='#bbcdf5' d='M8 1h1'/><path stroke='#b8cbf6' d='M9 1h1M2 7h1'/><path stroke='#b7caf5' d='M10 1h1M2 8h1'/><path stroke='#b5c8f7' d='M11 1h1'/><path stroke='#b3c7f5' d='M12 1h1'/><path stroke='#afc5f4' d='M13 1h1'/><path stroke='#dce6f9' d='M14 1h1'/><path stroke='#dfe2e1' d='M16 1h1'/><path stroke='#e1eafe' d='M3 2h1'/><path stroke='#dae6fe' d='M4 2h1M3 3h1'/><path stroke='#d4e1fc' d='M5 2h1M3 4h1'/><path stroke='#d1e0fd' d='M6 2h1M4 4h1'/><path stroke='#d0ddfc' d='M7 2h1M3 5h1'/><path stroke='#cedbfd' d='M8 2h1M6 3h1'/><path stroke='#cad9fd' d='M9 2h1M7 3h1M5 5h1'/><path stroke='#c8d8fb' d='M10 2h1'/><path stroke='#c5d6fc' d='M11 2h1m-8 8h1m1 0h1'/><path stroke='#c2d3fc' d='M12 2h1m-2 1h1m-9 7h1m0 1h1'/><path stroke='#bccefa' d='M13 2h1m-1 2h1m-9 9h2'/><path stroke='#b9c9f3' d='M14 2h1M5 14h3'/><path stroke='#cfd7dd' d='M16 2h1'/><path stroke='#d8e3fc' d='M4 3h1'/><path stroke='#d1defd' d='M5 3h1'/><path stroke='#c9d8fc' d='M8 3h1M6 4h2M5 6h2M3 7h1'/><path stroke='#c5d5fc' d='M9 3h1M3 9h1m3 0h1'/><path stroke='#c5d3fc' d='M10 3h1'/><path stroke='#bed0fc' d='M12 3h1M9 4h1m-7 7h1m0 1h1'/><path stroke='#bccdfa' d='M13 3h1'/><path stroke='#baccf4' d='M14 3h1'/><path stroke='#bdcbda' d='M16 3h1'/><path stroke='#c4d4f7' d='M2 4h1'/><path stroke='#cddbfc' d='M5 4h1M3 6h1'/><path stroke='#c8d5fb' d='M8 4h1'/><path stroke='#bbcefd' d='M10 4h3M9 5h1'/><path stroke='#bcccf3' d='M14 4h1m-1 1h1m-1 1h1'/><path stroke='#b1c2d5' d='M16 4h1'/><path stroke='#bed0f8' d='M2 5h1'/><path stroke='#ceddfd' d='M4 5h1'/><path stroke='#c8d6fb' d='M6 5h2M3 8h2'/><path stroke='#4d6185' d='M8 5h1M7 6h3M6 7h5M5 8h3m1 0h3M4 9h3m3 0h3m-8 1h1m5 0h1'/><path stroke='#bacdfc' d='M10 5h1m1 0h2M3 12h1'/><path stroke='#b9cdfb' d='M11 5h1m-2 1h1m1 0h2m-1 1h1'/><path stroke='#a8bbd4' d='M16 5h1'/><path stroke='#cddafc' d='M4 6h1'/><path stroke='#b7cdfc' d='M11 6h1m0 1h1'/><path stroke='#a4b8d3' d='M16 6h1'/><path stroke='#cad8fd' d='M4 7h2'/><path stroke='#b6cefb' d='M11 7h1m0 1h1'/><path stroke='#bacbf4' d='M14 7h1'/><path stroke='#a0b5d3' d='M16 7h1m-1 1h1m-1 5h1'/><path stroke='#c1d3fb' d='M8 8h1'/><path stroke='#b6cdfb' d='M13 8h1m-5 5h1'/><path stroke='#b9cbf3' d='M14 8h1'/><path stroke='#b4c8f6' d='M2 9h1'/><path stroke='#c2d5fc' d='M8 9h1m-1 1h1m-3 1h2'/><path stroke='#bdd3fb' d='M9 9h1m-2 3h1'/><path stroke='#b5cdfa' d='M13 9h1'/><path stroke='#b5c9f3' d='M14 9h1'/><path stroke='#9fb5d2' d='M16 9h1m-1 1h1m-1 1h1m-1 1h1'/><path stroke='#b1c7f6' d='M2 10h1'/><path stroke='#c3d5fd' d='M7 10h1'/><path stroke='#bad4fc' d='M9 10h1m-1 1h1'/><path stroke='#b2cffb' d='M10 10h1m1 0h1m-2 2h1'/><path stroke='#b1cbfa' d='M13 10h1'/><path stroke='#b3c8f5' d='M14 10h1m-6 4h2'/><path stroke='#adc3f6' d='M2 11h1'/><path stroke='#c3d3fd' d='M5 11h1'/><path stroke='#c1d5fb' d='M8 11h1'/><path stroke='#b7d3fc' d='M10 11h1m-2 1h1'/><path stroke='#b3d1fc' d='M11 11h1'/><path stroke='#afcefb' d='M12 11h1'/><path stroke='#aecafa' d='M13 11h1'/><path stroke='#b1c8f3' d='M14 11h1'/><path stroke='#acc2f5' d='M2 12h1'/><path stroke='#c1d2fb' d='M5 12h1'/><path stroke='#bed1fc' d='M6 12h2'/><path stroke='#b6d1fb' d='M10 12h1'/><path stroke='#afccfb' d='M12 12h1'/><path stroke='#adc9f9' d='M13 12h1m-2 1h1'/><path stroke='#b1c5f3' d='M14 12h1'/><path stroke='#aac0f3' d='M2 13h1'/><path stroke='#b7cbf9' d='M3 13h1'/><path stroke='#b9cefb' d='M4 13h1'/><path stroke='#bbcef9' d='M7 13h1'/><path stroke='#b9cffb' d='M8 13h1'/><path stroke='#b2cdfb' d='M10 13h1'/><path stroke='#b0cbf9' d='M11 13h1'/><path stroke='#aec8f7' d='M13 13h1'/><path stroke='#b0c5f2' d='M14 13h1'/><path stroke='#dbe3f8' d='M2 14h1'/><path stroke='#b7c6f1' d='M3 14h1'/><path stroke='#b8c9f2' d='M4 14h1m3 0h1'/><path stroke='#b2c8f4' d='M11 14h1'/><path stroke='#b1c6f3' d='M12 14h1'/><path stroke='#b0c4f2' d='M13 14h1'/><path stroke='#d9e3f6' d='M14 14h1'/><path stroke='#aec0d6' d='M16 14h1'/><path stroke='#c3d4e7' d='M1 15h1'/><path stroke='#aec4e5' d='M15 15h1'/><path stroke='#edf1f3' d='M1 16h1'/><path stroke='#aac0e1' d='M2 16h1'/><path stroke='#94b1d9' d='M3 16h1'/><path stroke='#88a7d8' d='M4 16h1'/><path stroke='#83a4d3' d='M5 16h1'/><path stroke='#7da0d4' d='M6 16h1m3 0h3'/><path stroke='#7e9fd2' d='M7 16h1'/><path stroke='#7c9fd3' d='M8 16h2'/><path stroke='#82a4d6' d='M13 16h1'/><path stroke='#94b0dd' d='M14 16h1'/><path stroke='#ecf2f7' d='M15 16h1'/></svg>
\ No newline at end of file
diff --git a/src/assets/scrollbar-track-horizonal.svg b/src/assets/scrollbar-track-horizonal.svg
new file mode 100644
index 000000000..956d17171
--- /dev/null
+++ b/src/assets/scrollbar-track-horizonal.svg
@@ -0,0 +1 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -0.5 8 7' shape-rendering='crispEdges'><path stroke='#eef4fe' d='M0 0h1m1 0h1m1 0h1m1 0h1M0 1h1m1 0h1m1 0h1m1 0h1M0 2h1m1 0h1m1 0h1m1 0h1M0 3h1m1 0h1m1 0h1m1 0h1M0 4h1m1 0h1m1 0h1m1 0h1M0 5h1m1 0h1m1 0h1m1 0h1'/><path stroke='#c8d6fb' d='M1 0h1m1 0h1m1 0h1m1 0h1'/><path stroke='#8cb0f8' d='M1 1h1m1 0h1m1 0h1m1 0h1M1 2h1m1 0h1m1 0h1m1 0h1M1 3h1m1 0h1m1 0h1m1 0h1M1 4h1m1 0h1m1 0h1m1 0h1M1 5h1m1 0h1m1 0h1m1 0h1M1 6h1m1 0h1m1 0h1m1 0h1'/><path stroke='#bad1fc' d='M0 6h1m1 0h1'/><path stroke='#bad3fc' d='M4 6h1m1 0h1'/></svg>
\ No newline at end of file
diff --git a/src/assets/scrollbar-track-vertical.svg b/src/assets/scrollbar-track-vertical.svg
new file mode 100644
index 000000000..72a4d37b9
--- /dev/null
+++ b/src/assets/scrollbar-track-vertical.svg
@@ -0,0 +1 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -0.5 7 8' shape-rendering='crispEdges'><path stroke='#eef4fe' d='M0 0h6M0 2h6M0 4h6M0 6h6'/><path stroke='#bad1fc' d='M6 0h1M6 2h1M6 4h1'/><path stroke='#c8d6fb' d='M0 1h1M0 3h1M0 5h1M0 7h1'/><path stroke='#8cb0f8' d='M1 1h6M1 3h6M1 5h6M1 7h6'/><path stroke='#bad3fc' d='M6 6h1'/></svg>
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index 69487a7a7..da0892bd3 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,60 @@
 #root {
   height: 100%;
 }
+
+/* Scrollbar */
+
+::-webkit-scrollbar {
+  width: 16px;
+}
+::-webkit-scrollbar:horizontal {
+  height: 17px;
+}
+
+::-webkit-scrollbar {
+  width: 16px;
+}
+::-webkit-scrollbar:horizontal {
+  height: 17px;
+}
+::-webkit-scrollbar-corner {
+  background: #dfdfdf;
+}
+
+::-webkit-scrollbar-thumb {
+  background-position: 50%;
+  background-repeat: no-repeat;
+  background-color: #c8d6fb;
+  background-size: 7px;
+  border: 1px solid #fff;
+  border-radius: 2px;
+  box-shadow: inset -3px 0 #bad1fc, inset 1px 1px #b7caf5;
+  background-image: url(./assets/scrollbar-track-vertical.svg);
+}
+
+::-webkit-scrollbar-thumb:horizontal {
+  background-image: url(./assets/scrollbar-track-horizonal.svg);
+}
+
+::-webkit-scrollbar-button:horizontal:start:decrement,
+::-webkit-scrollbar-button:horizontal:end:increment,
+::-webkit-scrollbar-button:vertical:start:decrement,
+::-webkit-scrollbar-button:vertical:end:increment {
+  display: block;
+}
+::-webkit-scrollbar-button:vertical:start {
+  height: 17px;
+  background-image: url(./assets/scrollbar-button-up.svg);
+}
+::-webkit-scrollbar-button:vertical:end {
+  height: 17px;
+  background-image: url(./assets/scrollbar-button-down.svg);
+}
+::-webkit-scrollbar-button:horizontal:start {
+  width: 16px;
+  background-image: url(./assets/scrollbar-button-left.svg);
+}
+::-webkit-scrollbar-button:horizontal:end {
+  width: 16px;
+  background-image: url(./assets/scrollbar-button-right.svg);
+}

From 152729397de7e7a5cdf8fa955b43c98285d8a2df Mon Sep 17 00:00:00 2001
From: Almog Lemberg <almoglemberg@gmail.com>
Date: Mon, 11 Apr 2022 20:18:43 +0300
Subject: [PATCH 2/9] Added hover and active css, fixed cursor issue

---
 src/index.css | 26 +++++++++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/src/index.css b/src/index.css
index da0892bd3..7243fe0df 100644
--- a/src/index.css
+++ b/src/index.css
@@ -2,8 +2,18 @@
   height: 100%;
 }
 
+textarea {
+  cursor: auto;
+}
+
 /* Scrollbar */
 
+/* CSS taken from: https://botoxparty.github.io/XP.css/ */
+
+::-webkit-scrollbar-track {
+  background-color: #f3f7f0;
+}
+
 ::-webkit-scrollbar {
   width: 16px;
 }
@@ -17,6 +27,7 @@
 ::-webkit-scrollbar:horizontal {
   height: 17px;
 }
+
 ::-webkit-scrollbar-corner {
   background: #dfdfdf;
 }
@@ -28,10 +39,22 @@
   background-size: 7px;
   border: 1px solid #fff;
   border-radius: 2px;
-  box-shadow: inset -3px 0 #bad1fc, inset 1px 1px #b7caf5;
+  box-shadow: inset -2px 0 #bad1fc, inset 1px 1px #b7caf5;
   background-image: url(./assets/scrollbar-track-vertical.svg);
 }
 
+::-webkit-scrollbar-thumb:hover {
+  filter: brightness(0.4);
+  background-color: #cbe4fb;
+  box-shadow: inset -2px 0 #ddeaf5, inset 1px 1px #ddeaf5;
+}
+
+::-webkit-scrollbar-thumb:active {
+  background-color: rgb(176, 193, 237);
+  box-shadow: inset -2px 0 #a6b7e6, inset 1px 1px #a6b7e6;
+  filter: brightness(0);
+}
+
 ::-webkit-scrollbar-thumb:horizontal {
   background-image: url(./assets/scrollbar-track-horizonal.svg);
 }
@@ -42,6 +65,7 @@
 ::-webkit-scrollbar-button:vertical:end:increment {
   display: block;
 }
+
 ::-webkit-scrollbar-button:vertical:start {
   height: 17px;
   background-image: url(./assets/scrollbar-button-up.svg);

From eaceac9a9ad4a93b99ce3f65591a85ce86c66531 Mon Sep 17 00:00:00 2001
From: Almog Lemberg <almoglemberg@gmail.com>
Date: Wed, 13 Apr 2022 10:48:29 +0300
Subject: [PATCH 3/9] svg files location and name changes

---
 src/assets/scrollbar-button-down.svg     |   1 -
 src/assets/scrollbar-button-left.svg     |   1 -
 src/assets/scrollbar-button-right.svg    |   1 -
 src/assets/scrollbar-button-up.svg       |   1 -
 src/assets/scrollbar-track-horizonal.svg |   1 -
 src/assets/scrollbar-track-vertical.svg  |   1 -
 src/assets/scrollbar/button-down.svg     | 119 ++++++++++++++++++++++
 src/assets/scrollbar/button-left.svg     | 117 +++++++++++++++++++++
 src/assets/scrollbar/button-right.svg    | 120 ++++++++++++++++++++++
 src/assets/scrollbar/button-up.svg       | 123 +++++++++++++++++++++++
 src/assets/scrollbar/track-horizonal.svg |   9 ++
 src/assets/scrollbar/track-vertical.svg  |   7 ++
 src/index.css                            |  12 +--
 13 files changed, 501 insertions(+), 12 deletions(-)
 delete mode 100644 src/assets/scrollbar-button-down.svg
 delete mode 100644 src/assets/scrollbar-button-left.svg
 delete mode 100644 src/assets/scrollbar-button-right.svg
 delete mode 100644 src/assets/scrollbar-button-up.svg
 delete mode 100644 src/assets/scrollbar-track-horizonal.svg
 delete mode 100644 src/assets/scrollbar-track-vertical.svg
 create mode 100644 src/assets/scrollbar/button-down.svg
 create mode 100644 src/assets/scrollbar/button-left.svg
 create mode 100644 src/assets/scrollbar/button-right.svg
 create mode 100644 src/assets/scrollbar/button-up.svg
 create mode 100644 src/assets/scrollbar/track-horizonal.svg
 create mode 100644 src/assets/scrollbar/track-vertical.svg

diff --git a/src/assets/scrollbar-button-down.svg b/src/assets/scrollbar-button-down.svg
deleted file mode 100644
index 173fda716..000000000
--- a/src/assets/scrollbar-button-down.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -0.5 17 17' shape-rendering='crispEdges'><path stroke='#eeede5' d='M0 0h1m15 0h1M0 1h1M0 2h1M0 3h1M0 4h1M0 5h1M0 6h1M0 7h1M0 8h1M0 9h1m-1 1h1m-1 1h1m-1 1h1m-1 1h1m-1 1h1m-1 1h1m15 0h1M0 16h1m15 0h1'/><path stroke='#fdfdfa' d='M1 0h1'/><path stroke='#fff' d='M2 0h14M1 1h1m13 0h1M1 2h1m13 0h1M1 3h1m13 0h1M1 4h1m13 0h1M1 5h1m13 0h1M1 6h1m13 0h1M1 7h1m13 0h1M1 8h1m13 0h1M1 9h1m13 0h1M1 10h1m13 0h1M1 11h1m13 0h1M1 12h1m13 0h1M1 13h1m13 0h1M1 14h1m13 0h1M2 15h13'/><path stroke='#e6eefc' d='M2 1h1'/><path stroke='#d0dffc' d='M3 1h1M2 2h1'/><path stroke='#cad8f9' d='M4 1h1M2 3h1'/><path stroke='#c4d2f7' d='M5 1h1'/><path stroke='#c0d0f7' d='M6 1h1'/><path stroke='#bdcef7' d='M7 1h1M2 6h1'/><path stroke='#bbcdf5' d='M8 1h1'/><path stroke='#b8cbf6' d='M9 1h1M2 7h1'/><path stroke='#b7caf5' d='M10 1h1M2 8h1'/><path stroke='#b5c8f7' d='M11 1h1'/><path stroke='#b3c7f5' d='M12 1h1'/><path stroke='#afc5f4' d='M13 1h1'/><path stroke='#dce6f9' d='M14 1h1'/><path stroke='#dfe2e1' d='M16 1h1'/><path stroke='#e1eafe' d='M3 2h1'/><path stroke='#dae6fe' d='M4 2h1M3 3h1'/><path stroke='#d4e1fc' d='M5 2h1M3 4h1'/><path stroke='#d1e0fd' d='M6 2h1M4 4h1'/><path stroke='#d0ddfc' d='M7 2h1M3 5h1'/><path stroke='#cedbfd' d='M8 2h1M6 3h1'/><path stroke='#cad9fd' d='M9 2h1M7 3h1M5 5h1'/><path stroke='#c8d8fb' d='M10 2h1'/><path stroke='#c5d6fc' d='M11 2h1m-8 8h3'/><path stroke='#c2d3fc' d='M12 2h1m-2 1h1m-9 7h1m0 1h1'/><path stroke='#bccefa' d='M13 2h1m-1 2h1m-9 9h2'/><path stroke='#b9c9f3' d='M14 2h1M5 14h3'/><path stroke='#cfd7dd' d='M16 2h1'/><path stroke='#d8e3fc' d='M4 3h1'/><path stroke='#d1defd' d='M5 3h1'/><path stroke='#c9d8fc' d='M8 3h1M6 4h2M6 6h2M3 7h1'/><path stroke='#c5d5fc' d='M9 3h1M3 9h3'/><path stroke='#c5d3fc' d='M10 3h1'/><path stroke='#bed0fc' d='M12 3h1M9 4h1m-7 7h1m0 1h1'/><path stroke='#bccdfa' d='M13 3h1'/><path stroke='#baccf4' d='M14 3h1'/><path stroke='#bdcbda' d='M16 3h1'/><path stroke='#c4d4f7' d='M2 4h1'/><path stroke='#cddbfc' d='M5 4h1M3 6h1'/><path stroke='#c8d5fb' d='M8 4h1'/><path stroke='#bbcefd' d='M10 4h3M9 5h1M8 6h1'/><path stroke='#bcccf3' d='M14 4h1m-1 1h1m-1 1h1'/><path stroke='#b1c2d5' d='M16 4h1'/><path stroke='#bed0f8' d='M2 5h1'/><path stroke='#ceddfd' d='M4 5h1'/><path stroke='#c8d6fb' d='M6 5h3M3 8h2'/><path stroke='#bacdfc' d='M10 5h1m1 0h2M3 12h1'/><path stroke='#b9cdfb' d='M11 5h1M9 6h2m1 0h2m-1 1h1'/><path stroke='#a8bbd4' d='M16 5h1'/><path stroke='#cddafc' d='M4 6h1'/><path stroke='#4d6185' d='M5 6h1m5 0h1M4 7h3m3 0h3M5 8h3m1 0h3M6 9h5m-4 1h3m-2 1h1'/><path stroke='#a4b8d3' d='M16 6h1'/><path stroke='#c1d3fb' d='M7 7h2M8 8h1'/><path stroke='#b6cefb' d='M9 7h1m2 1h1m-2 1h2'/><path stroke='#bacbf4' d='M14 7h1'/><path stroke='#a0b5d3' d='M16 7h1m-1 1h1m-1 5h1'/><path stroke='#b6cdfb' d='M13 8h1m-5 5h1'/><path stroke='#b9cbf3' d='M14 8h1'/><path stroke='#b4c8f6' d='M2 9h1'/><path stroke='#b5cdfa' d='M13 9h1'/><path stroke='#b5c9f3' d='M14 9h1'/><path stroke='#9fb5d2' d='M16 9h1m-1 1h1m-1 1h1m-1 1h1'/><path stroke='#b1c7f6' d='M2 10h1'/><path stroke='#b2cffb' d='M10 10h3m-2 2h1'/><path stroke='#b1cbfa' d='M13 10h1'/><path stroke='#b3c8f5' d='M14 10h1m-6 4h2'/><path stroke='#adc3f6' d='M2 11h1'/><path stroke='#c3d3fd' d='M5 11h1'/><path stroke='#c2d5fc' d='M6 11h2'/><path stroke='#bad4fc' d='M9 11h1'/><path stroke='#b7d3fc' d='M10 11h1m-2 1h1'/><path stroke='#b3d1fc' d='M11 11h1'/><path stroke='#afcefb' d='M12 11h1'/><path stroke='#aecafa' d='M13 11h1'/><path stroke='#b1c8f3' d='M14 11h1'/><path stroke='#acc2f5' d='M2 12h1'/><path stroke='#c1d2fb' d='M5 12h1'/><path stroke='#bed1fc' d='M6 12h2'/><path stroke='#bdd3fb' d='M8 12h1'/><path stroke='#b6d1fb' d='M10 12h1'/><path stroke='#afccfb' d='M12 12h1'/><path stroke='#adc9f9' d='M13 12h1m-2 1h1'/><path stroke='#b1c5f3' d='M14 12h1'/><path stroke='#aac0f3' d='M2 13h1'/><path stroke='#b7cbf9' d='M3 13h1'/><path stroke='#b9cefb' d='M4 13h1'/><path stroke='#bbcef9' d='M7 13h1'/><path stroke='#b9cffb' d='M8 13h1'/><path stroke='#b2cdfb' d='M10 13h1'/><path stroke='#b0cbf9' d='M11 13h1'/><path stroke='#aec8f7' d='M13 13h1'/><path stroke='#b0c5f2' d='M14 13h1'/><path stroke='#dbe3f8' d='M2 14h1'/><path stroke='#b7c6f1' d='M3 14h1'/><path stroke='#b8c9f2' d='M4 14h1m3 0h1'/><path stroke='#b2c8f4' d='M11 14h1'/><path stroke='#b1c6f3' d='M12 14h1'/><path stroke='#b0c4f2' d='M13 14h1'/><path stroke='#d9e3f6' d='M14 14h1'/><path stroke='#aec0d6' d='M16 14h1'/><path stroke='#c3d4e7' d='M1 15h1'/><path stroke='#aec4e5' d='M15 15h1'/><path stroke='#edf1f3' d='M1 16h1'/><path stroke='#aac0e1' d='M2 16h1'/><path stroke='#94b1d9' d='M3 16h1'/><path stroke='#88a7d8' d='M4 16h1'/><path stroke='#83a4d3' d='M5 16h1'/><path stroke='#7da0d4' d='M6 16h1m3 0h3'/><path stroke='#7e9fd2' d='M7 16h1'/><path stroke='#7c9fd3' d='M8 16h2'/><path stroke='#82a4d6' d='M13 16h1'/><path stroke='#94b0dd' d='M14 16h1'/><path stroke='#ecf2f7' d='M15 16h1'/></svg>
\ No newline at end of file
diff --git a/src/assets/scrollbar-button-left.svg b/src/assets/scrollbar-button-left.svg
deleted file mode 100644
index d6a4df4f4..000000000
--- a/src/assets/scrollbar-button-left.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -0.5 17 17' shape-rendering='crispEdges'><path stroke='#eeede5' d='M0 0h17m-1 1h1m-1 14h1m-1 1h1'/><path stroke='#fdfdfa' d='M0 1h1'/><path stroke='#fff' d='M1 1h15M0 2h1m14 0h1M0 3h1m14 0h1M0 4h1m14 0h1M0 5h1m14 0h1M0 6h1m14 0h1M0 7h1m14 0h1M0 8h1m14 0h1M0 9h1m14 0h1M0 10h1m14 0h1M0 11h1m14 0h1M0 12h1m14 0h1M0 13h1m14 0h1M0 14h1m14 0h1M1 15h14'/><path stroke='#e6eefc' d='M1 2h1'/><path stroke='#d0dffc' d='M2 2h1M1 3h1'/><path stroke='#cad8f9' d='M3 2h1M1 4h1'/><path stroke='#c4d2f7' d='M4 2h1'/><path stroke='#c0d0f7' d='M5 2h1'/><path stroke='#bdcef7' d='M6 2h1M1 7h1'/><path stroke='#bbcdf5' d='M7 2h2'/><path stroke='#b8cbf6' d='M9 2h1M1 8h1'/><path stroke='#b7caf5' d='M10 2h1M1 9h1'/><path stroke='#b5c8f7' d='M11 2h1'/><path stroke='#b3c7f5' d='M12 2h1'/><path stroke='#afc5f4' d='M13 2h1'/><path stroke='#dce6f9' d='M14 2h1'/><path stroke='#dfe2e1' d='M16 2h1'/><path stroke='#e1eafe' d='M2 3h1'/><path stroke='#dae6fe' d='M3 3h1M2 4h1'/><path stroke='#d4e1fc' d='M4 3h1M2 5h1'/><path stroke='#d1e0fd' d='M5 3h1M3 5h1'/><path stroke='#d0ddfc' d='M6 3h1M2 6h1'/><path stroke='#cedbfd' d='M7 3h1M5 4h1'/><path stroke='#cddbfc' d='M8 3h1M4 5h1M2 7h1'/><path stroke='#cad9fd' d='M9 3h1M6 4h1M4 6h1'/><path stroke='#c8d8fb' d='M10 3h1'/><path stroke='#c5d6fc' d='M11 3h1m-9 7h3'/><path stroke='#c2d3fc' d='M12 3h1m-2 1h1M2 10h1m0 1h1'/><path stroke='#bccefa' d='M13 3h1m-1 2h1M4 13h2'/><path stroke='#b9c9f3' d='M14 3h1M4 14h3'/><path stroke='#cfd7dd' d='M16 3h1'/><path stroke='#d8e3fc' d='M3 4h1'/><path stroke='#d1defd' d='M4 4h1'/><path stroke='#c9d8fc' d='M7 4h1M5 5h2M4 7h1M2 8h1'/><path stroke='#4d6185' d='M8 4h1M7 5h3M6 6h3M5 7h3M4 8h3M5 9h3m-2 1h3m-2 1h3m-2 1h1'/><path stroke='#c5d5fc' d='M9 4h1'/><path stroke='#c5d3fc' d='M10 4h1'/><path stroke='#bed0fc' d='M12 4h1M2 11h1m0 1h1'/><path stroke='#bccdfa' d='M13 4h1'/><path stroke='#baccf4' d='M14 4h1'/><path stroke='#bdcbda' d='M16 4h1'/><path stroke='#c4d4f7' d='M1 5h1'/><path stroke='#bbcefd' d='M10 5h3M9 6h1'/><path stroke='#bcccf3' d='M14 5h1m-1 1h1m-1 1h1'/><path stroke='#b1c2d5' d='M16 5h1'/><path stroke='#bed0f8' d='M1 6h1'/><path stroke='#ceddfd' d='M3 6h1'/><path stroke='#c8d6fb' d='M5 6h1M2 9h3'/><path stroke='#bacdfc' d='M10 6h1m1 0h2M2 12h1'/><path stroke='#b9cdfb' d='M11 6h1M8 7h3m1 0h2m-1 1h1'/><path stroke='#a8bbd4' d='M16 6h1'/><path stroke='#cddafc' d='M3 7h1'/><path stroke='#b7cdfc' d='M11 7h1m0 1h1'/><path stroke='#a4b8d3' d='M16 7h1'/><path stroke='#cad8fd' d='M3 8h1'/><path stroke='#c1d3fb' d='M7 8h2'/><path stroke='#b6cefb' d='M9 8h3M9 9h4'/><path stroke='#bacbf4' d='M14 8h1'/><path stroke='#a0b5d3' d='M16 8h1m-1 1h1m-1 4h1'/><path stroke='#bdd3fb' d='M8 9h1m-2 3h1'/><path stroke='#b6cdfb' d='M13 9h1m-5 4h1'/><path stroke='#b9cbf3' d='M14 9h1'/><path stroke='#b1c7f6' d='M1 10h1'/><path stroke='#bad4fc' d='M9 10h1'/><path stroke='#b2cffb' d='M10 10h3m-2 2h1'/><path stroke='#b1cbfa' d='M13 10h1'/><path stroke='#b3c8f5' d='M14 10h1m-6 4h2'/><path stroke='#9fb5d2' d='M16 10h1m-1 1h1m-1 1h1'/><path stroke='#adc3f6' d='M1 11h1'/><path stroke='#c3d3fd' d='M4 11h1'/><path stroke='#c2d5fc' d='M5 11h2'/><path stroke='#b7d3fc' d='M10 11h1m-2 1h1'/><path stroke='#b3d1fc' d='M11 11h1'/><path stroke='#afcefb' d='M12 11h1'/><path stroke='#aecafa' d='M13 11h1'/><path stroke='#b1c8f3' d='M14 11h1'/><path stroke='#acc2f5' d='M1 12h1'/><path stroke='#c1d2fb' d='M4 12h1'/><path stroke='#bed1fc' d='M5 12h2'/><path stroke='#b6d1fb' d='M10 12h1'/><path stroke='#afccfb' d='M12 12h1'/><path stroke='#adc9f9' d='M13 12h1m-2 1h1'/><path stroke='#b1c5f3' d='M14 12h1'/><path stroke='#aac0f3' d='M1 13h1'/><path stroke='#b7cbf9' d='M2 13h1'/><path stroke='#b9cefb' d='M3 13h1'/><path stroke='#bbcef9' d='M6 13h1'/><path stroke='#b9cffb' d='M7 13h1'/><path stroke='#b8cffa' d='M8 13h1'/><path stroke='#b2cdfb' d='M10 13h1'/><path stroke='#b0cbf9' d='M11 13h1'/><path stroke='#aec8f7' d='M13 13h1'/><path stroke='#b0c5f2' d='M14 13h1'/><path stroke='#dbe3f8' d='M1 14h1'/><path stroke='#b7c6f1' d='M2 14h1'/><path stroke='#b8c9f2' d='M3 14h1m3 0h2'/><path stroke='#b2c8f4' d='M11 14h1'/><path stroke='#b1c6f3' d='M12 14h1'/><path stroke='#b0c4f2' d='M13 14h1'/><path stroke='#d9e3f6' d='M14 14h1'/><path stroke='#aec0d6' d='M16 14h1'/><path stroke='#c3d4e7' d='M0 15h1'/><path stroke='#aec4e5' d='M15 15h1'/><path stroke='#edf1f3' d='M0 16h1'/><path stroke='#aac0e1' d='M1 16h1'/><path stroke='#94b1d9' d='M2 16h1'/><path stroke='#88a7d8' d='M3 16h1'/><path stroke='#83a4d3' d='M4 16h1'/><path stroke='#7da0d4' d='M5 16h1m4 0h3'/><path stroke='#7e9fd2' d='M6 16h1'/><path stroke='#7c9fd3' d='M7 16h3'/><path stroke='#82a4d6' d='M13 16h1'/><path stroke='#94b0dd' d='M14 16h1'/><path stroke='#ecf2f7' d='M15 16h1'/></svg>
\ No newline at end of file
diff --git a/src/assets/scrollbar-button-right.svg b/src/assets/scrollbar-button-right.svg
deleted file mode 100644
index a20630bde..000000000
--- a/src/assets/scrollbar-button-right.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -0.5 17 17' shape-rendering='crispEdges'><path stroke='#eeede5' d='M0 0h17m-1 1h1m-1 14h1m-1 1h1'/><path stroke='#fdfdfa' d='M0 1h1'/><path stroke='#fff' d='M1 1h15M0 2h1m14 0h1M0 3h1m14 0h1M0 4h1m14 0h1M0 5h1m14 0h1M0 6h1m14 0h1M0 7h1m14 0h1M0 8h1m14 0h1M0 9h1m14 0h1M0 10h1m14 0h1M0 11h1m14 0h1M0 12h1m14 0h1M0 13h1m14 0h1M0 14h1m14 0h1M1 15h14'/><path stroke='#e6eefc' d='M1 2h1'/><path stroke='#d0dffc' d='M2 2h1M1 3h1'/><path stroke='#cad8f9' d='M3 2h1M1 4h1'/><path stroke='#c4d2f7' d='M4 2h1'/><path stroke='#c0d0f7' d='M5 2h1'/><path stroke='#bdcef7' d='M6 2h1M1 7h1'/><path stroke='#bbcdf5' d='M7 2h2'/><path stroke='#b8cbf6' d='M9 2h1M1 8h1'/><path stroke='#b7caf5' d='M10 2h1'/><path stroke='#b5c8f7' d='M11 2h1'/><path stroke='#b3c7f5' d='M12 2h1'/><path stroke='#afc5f4' d='M13 2h1'/><path stroke='#dce6f9' d='M14 2h1'/><path stroke='#dfe2e1' d='M16 2h1'/><path stroke='#e1eafe' d='M2 3h1'/><path stroke='#dae6fe' d='M3 3h1M2 4h1'/><path stroke='#d4e1fc' d='M4 3h1M2 5h1'/><path stroke='#d1e0fd' d='M5 3h1M3 5h1'/><path stroke='#d0ddfc' d='M6 3h1M2 6h1'/><path stroke='#cedbfd' d='M7 3h1M5 4h1'/><path stroke='#cddbfc' d='M8 3h1M4 5h1M2 7h1'/><path stroke='#cad9fd' d='M9 3h1M6 4h1M4 6h1'/><path stroke='#c8d8fb' d='M10 3h1'/><path stroke='#c5d6fc' d='M11 3h1m-9 7h3'/><path stroke='#c2d3fc' d='M12 3h1m-2 1h1M2 10h1m0 1h1'/><path stroke='#bccefa' d='M13 3h1m-1 2h1M4 13h2'/><path stroke='#b9c9f3' d='M14 3h1M4 14h3'/><path stroke='#cfd7dd' d='M16 3h1'/><path stroke='#d8e3fc' d='M3 4h1'/><path stroke='#d1defd' d='M4 4h1'/><path stroke='#4d6185' d='M7 4h1M6 5h3M7 6h3M8 7h3M9 8h3M8 9h3m-4 1h3m-4 1h3m-2 1h1'/><path stroke='#c8d6fb' d='M8 4h1M5 6h2'/><path stroke='#c5d5fc' d='M9 4h1M2 9h5'/><path stroke='#c5d3fc' d='M10 4h1'/><path stroke='#bed0fc' d='M12 4h1M9 5h1m-8 6h1m0 1h1'/><path stroke='#bccdfa' d='M13 4h1'/><path stroke='#baccf4' d='M14 4h1'/><path stroke='#bdcbda' d='M16 4h1'/><path stroke='#c4d4f7' d='M1 5h1'/><path stroke='#c9d8fc' d='M5 5h1M4 7h3M2 8h1'/><path stroke='#bbcefd' d='M10 5h3M7 7h1'/><path stroke='#bcccf3' d='M14 5h1m-1 1h1m-1 1h1'/><path stroke='#b1c2d5' d='M16 5h1'/><path stroke='#bed0f8' d='M1 6h1'/><path stroke='#ceddfd' d='M3 6h1'/><path stroke='#bacdfc' d='M10 6h1m1 0h2M2 12h1'/><path stroke='#b9cdfb' d='M11 6h1m0 1h2m-1 1h1'/><path stroke='#a8bbd4' d='M16 6h1'/><path stroke='#cddafc' d='M3 7h1'/><path stroke='#b7cdfc' d='M11 7h1m0 1h1'/><path stroke='#a4b8d3' d='M16 7h1'/><path stroke='#cad8fd' d='M3 8h3'/><path stroke='#c1d3fb' d='M6 8h3'/><path stroke='#bacbf4' d='M14 8h1'/><path stroke='#a0b5d3' d='M16 8h1m-1 5h1'/><path stroke='#b4c8f6' d='M1 9h1'/><path stroke='#c2d5fc' d='M7 9h1m-3 2h1'/><path stroke='#b6cefb' d='M11 9h2'/><path stroke='#b5cdfa' d='M13 9h1'/><path stroke='#b5c9f3' d='M14 9h1'/><path stroke='#9fb5d2' d='M16 9h1m-1 1h1m-1 1h1m-1 1h1'/><path stroke='#b1c7f6' d='M1 10h1'/><path stroke='#c3d5fd' d='M6 10h1'/><path stroke='#b2cffb' d='M10 10h3m-2 2h1'/><path stroke='#b1cbfa' d='M13 10h1'/><path stroke='#b3c8f5' d='M14 10h1m-6 4h2'/><path stroke='#adc3f6' d='M1 11h1'/><path stroke='#c3d3fd' d='M4 11h1'/><path stroke='#bad4fc' d='M9 11h1'/><path stroke='#b7d3fc' d='M10 11h1m-2 1h1'/><path stroke='#b3d1fc' d='M11 11h1'/><path stroke='#afcefb' d='M12 11h1'/><path stroke='#aecafa' d='M13 11h1'/><path stroke='#b1c8f3' d='M14 11h1'/><path stroke='#acc2f5' d='M1 12h1'/><path stroke='#c1d2fb' d='M4 12h1'/><path stroke='#bed1fc' d='M5 12h2'/><path stroke='#bbd3fd' d='M8 12h1'/><path stroke='#b6d1fb' d='M10 12h1'/><path stroke='#afccfb' d='M12 12h1'/><path stroke='#adc9f9' d='M13 12h1m-2 1h1'/><path stroke='#b1c5f3' d='M14 12h1'/><path stroke='#aac0f3' d='M1 13h1'/><path stroke='#b7cbf9' d='M2 13h1'/><path stroke='#b9cefb' d='M3 13h1'/><path stroke='#bbcef9' d='M6 13h1'/><path stroke='#b9cffb' d='M7 13h1'/><path stroke='#b8cffa' d='M8 13h1'/><path stroke='#b6cdfb' d='M9 13h1'/><path stroke='#b2cdfb' d='M10 13h1'/><path stroke='#b0cbf9' d='M11 13h1'/><path stroke='#aec8f7' d='M13 13h1'/><path stroke='#b0c5f2' d='M14 13h1'/><path stroke='#dbe3f8' d='M1 14h1'/><path stroke='#b7c6f1' d='M2 14h1'/><path stroke='#b8c9f2' d='M3 14h1m3 0h2'/><path stroke='#b2c8f4' d='M11 14h1'/><path stroke='#b1c6f3' d='M12 14h1'/><path stroke='#b0c4f2' d='M13 14h1'/><path stroke='#d9e3f6' d='M14 14h1'/><path stroke='#aec0d6' d='M16 14h1'/><path stroke='#c3d4e7' d='M0 15h1'/><path stroke='#aec4e5' d='M15 15h1'/><path stroke='#edf1f3' d='M0 16h1'/><path stroke='#aac0e1' d='M1 16h1'/><path stroke='#94b1d9' d='M2 16h1'/><path stroke='#88a7d8' d='M3 16h1'/><path stroke='#83a4d3' d='M4 16h1'/><path stroke='#7da0d4' d='M5 16h1m4 0h3'/><path stroke='#7e9fd2' d='M6 16h1'/><path stroke='#7c9fd3' d='M7 16h3'/><path stroke='#82a4d6' d='M13 16h1'/><path stroke='#94b0dd' d='M14 16h1'/><path stroke='#ecf2f7' d='M15 16h1'/></svg>
\ No newline at end of file
diff --git a/src/assets/scrollbar-button-up.svg b/src/assets/scrollbar-button-up.svg
deleted file mode 100644
index f9f93f438..000000000
--- a/src/assets/scrollbar-button-up.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -0.5 17 17' shape-rendering='crispEdges'><path stroke='#eeede5' d='M0 0h1m15 0h1M0 1h1M0 2h1M0 3h1M0 4h1M0 5h1M0 6h1M0 7h1M0 8h1M0 9h1m-1 1h1m-1 1h1m-1 1h1m-1 1h1m-1 1h1m-1 1h1m15 0h1M0 16h1m15 0h1'/><path stroke='#fdfdfa' d='M1 0h1'/><path stroke='#fff' d='M2 0h14M1 1h1m13 0h1M1 2h1m13 0h1M1 3h1m13 0h1M1 4h1m13 0h1M1 5h1m13 0h1M1 6h1m13 0h1M1 7h1m13 0h1M1 8h1m13 0h1M1 9h1m13 0h1M1 10h1m13 0h1M1 11h1m13 0h1M1 12h1m13 0h1M1 13h1m13 0h1M1 14h1m13 0h1M2 15h13'/><path stroke='#e6eefc' d='M2 1h1'/><path stroke='#d0dffc' d='M3 1h1M2 2h1'/><path stroke='#cad8f9' d='M4 1h1M2 3h1'/><path stroke='#c4d2f7' d='M5 1h1'/><path stroke='#c0d0f7' d='M6 1h1'/><path stroke='#bdcef7' d='M7 1h1M2 6h1'/><path stroke='#bbcdf5' d='M8 1h1'/><path stroke='#b8cbf6' d='M9 1h1M2 7h1'/><path stroke='#b7caf5' d='M10 1h1M2 8h1'/><path stroke='#b5c8f7' d='M11 1h1'/><path stroke='#b3c7f5' d='M12 1h1'/><path stroke='#afc5f4' d='M13 1h1'/><path stroke='#dce6f9' d='M14 1h1'/><path stroke='#dfe2e1' d='M16 1h1'/><path stroke='#e1eafe' d='M3 2h1'/><path stroke='#dae6fe' d='M4 2h1M3 3h1'/><path stroke='#d4e1fc' d='M5 2h1M3 4h1'/><path stroke='#d1e0fd' d='M6 2h1M4 4h1'/><path stroke='#d0ddfc' d='M7 2h1M3 5h1'/><path stroke='#cedbfd' d='M8 2h1M6 3h1'/><path stroke='#cad9fd' d='M9 2h1M7 3h1M5 5h1'/><path stroke='#c8d8fb' d='M10 2h1'/><path stroke='#c5d6fc' d='M11 2h1m-8 8h1m1 0h1'/><path stroke='#c2d3fc' d='M12 2h1m-2 1h1m-9 7h1m0 1h1'/><path stroke='#bccefa' d='M13 2h1m-1 2h1m-9 9h2'/><path stroke='#b9c9f3' d='M14 2h1M5 14h3'/><path stroke='#cfd7dd' d='M16 2h1'/><path stroke='#d8e3fc' d='M4 3h1'/><path stroke='#d1defd' d='M5 3h1'/><path stroke='#c9d8fc' d='M8 3h1M6 4h2M5 6h2M3 7h1'/><path stroke='#c5d5fc' d='M9 3h1M3 9h1m3 0h1'/><path stroke='#c5d3fc' d='M10 3h1'/><path stroke='#bed0fc' d='M12 3h1M9 4h1m-7 7h1m0 1h1'/><path stroke='#bccdfa' d='M13 3h1'/><path stroke='#baccf4' d='M14 3h1'/><path stroke='#bdcbda' d='M16 3h1'/><path stroke='#c4d4f7' d='M2 4h1'/><path stroke='#cddbfc' d='M5 4h1M3 6h1'/><path stroke='#c8d5fb' d='M8 4h1'/><path stroke='#bbcefd' d='M10 4h3M9 5h1'/><path stroke='#bcccf3' d='M14 4h1m-1 1h1m-1 1h1'/><path stroke='#b1c2d5' d='M16 4h1'/><path stroke='#bed0f8' d='M2 5h1'/><path stroke='#ceddfd' d='M4 5h1'/><path stroke='#c8d6fb' d='M6 5h2M3 8h2'/><path stroke='#4d6185' d='M8 5h1M7 6h3M6 7h5M5 8h3m1 0h3M4 9h3m3 0h3m-8 1h1m5 0h1'/><path stroke='#bacdfc' d='M10 5h1m1 0h2M3 12h1'/><path stroke='#b9cdfb' d='M11 5h1m-2 1h1m1 0h2m-1 1h1'/><path stroke='#a8bbd4' d='M16 5h1'/><path stroke='#cddafc' d='M4 6h1'/><path stroke='#b7cdfc' d='M11 6h1m0 1h1'/><path stroke='#a4b8d3' d='M16 6h1'/><path stroke='#cad8fd' d='M4 7h2'/><path stroke='#b6cefb' d='M11 7h1m0 1h1'/><path stroke='#bacbf4' d='M14 7h1'/><path stroke='#a0b5d3' d='M16 7h1m-1 1h1m-1 5h1'/><path stroke='#c1d3fb' d='M8 8h1'/><path stroke='#b6cdfb' d='M13 8h1m-5 5h1'/><path stroke='#b9cbf3' d='M14 8h1'/><path stroke='#b4c8f6' d='M2 9h1'/><path stroke='#c2d5fc' d='M8 9h1m-1 1h1m-3 1h2'/><path stroke='#bdd3fb' d='M9 9h1m-2 3h1'/><path stroke='#b5cdfa' d='M13 9h1'/><path stroke='#b5c9f3' d='M14 9h1'/><path stroke='#9fb5d2' d='M16 9h1m-1 1h1m-1 1h1m-1 1h1'/><path stroke='#b1c7f6' d='M2 10h1'/><path stroke='#c3d5fd' d='M7 10h1'/><path stroke='#bad4fc' d='M9 10h1m-1 1h1'/><path stroke='#b2cffb' d='M10 10h1m1 0h1m-2 2h1'/><path stroke='#b1cbfa' d='M13 10h1'/><path stroke='#b3c8f5' d='M14 10h1m-6 4h2'/><path stroke='#adc3f6' d='M2 11h1'/><path stroke='#c3d3fd' d='M5 11h1'/><path stroke='#c1d5fb' d='M8 11h1'/><path stroke='#b7d3fc' d='M10 11h1m-2 1h1'/><path stroke='#b3d1fc' d='M11 11h1'/><path stroke='#afcefb' d='M12 11h1'/><path stroke='#aecafa' d='M13 11h1'/><path stroke='#b1c8f3' d='M14 11h1'/><path stroke='#acc2f5' d='M2 12h1'/><path stroke='#c1d2fb' d='M5 12h1'/><path stroke='#bed1fc' d='M6 12h2'/><path stroke='#b6d1fb' d='M10 12h1'/><path stroke='#afccfb' d='M12 12h1'/><path stroke='#adc9f9' d='M13 12h1m-2 1h1'/><path stroke='#b1c5f3' d='M14 12h1'/><path stroke='#aac0f3' d='M2 13h1'/><path stroke='#b7cbf9' d='M3 13h1'/><path stroke='#b9cefb' d='M4 13h1'/><path stroke='#bbcef9' d='M7 13h1'/><path stroke='#b9cffb' d='M8 13h1'/><path stroke='#b2cdfb' d='M10 13h1'/><path stroke='#b0cbf9' d='M11 13h1'/><path stroke='#aec8f7' d='M13 13h1'/><path stroke='#b0c5f2' d='M14 13h1'/><path stroke='#dbe3f8' d='M2 14h1'/><path stroke='#b7c6f1' d='M3 14h1'/><path stroke='#b8c9f2' d='M4 14h1m3 0h1'/><path stroke='#b2c8f4' d='M11 14h1'/><path stroke='#b1c6f3' d='M12 14h1'/><path stroke='#b0c4f2' d='M13 14h1'/><path stroke='#d9e3f6' d='M14 14h1'/><path stroke='#aec0d6' d='M16 14h1'/><path stroke='#c3d4e7' d='M1 15h1'/><path stroke='#aec4e5' d='M15 15h1'/><path stroke='#edf1f3' d='M1 16h1'/><path stroke='#aac0e1' d='M2 16h1'/><path stroke='#94b1d9' d='M3 16h1'/><path stroke='#88a7d8' d='M4 16h1'/><path stroke='#83a4d3' d='M5 16h1'/><path stroke='#7da0d4' d='M6 16h1m3 0h3'/><path stroke='#7e9fd2' d='M7 16h1'/><path stroke='#7c9fd3' d='M8 16h2'/><path stroke='#82a4d6' d='M13 16h1'/><path stroke='#94b0dd' d='M14 16h1'/><path stroke='#ecf2f7' d='M15 16h1'/></svg>
\ No newline at end of file
diff --git a/src/assets/scrollbar-track-horizonal.svg b/src/assets/scrollbar-track-horizonal.svg
deleted file mode 100644
index 956d17171..000000000
--- a/src/assets/scrollbar-track-horizonal.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -0.5 8 7' shape-rendering='crispEdges'><path stroke='#eef4fe' d='M0 0h1m1 0h1m1 0h1m1 0h1M0 1h1m1 0h1m1 0h1m1 0h1M0 2h1m1 0h1m1 0h1m1 0h1M0 3h1m1 0h1m1 0h1m1 0h1M0 4h1m1 0h1m1 0h1m1 0h1M0 5h1m1 0h1m1 0h1m1 0h1'/><path stroke='#c8d6fb' d='M1 0h1m1 0h1m1 0h1m1 0h1'/><path stroke='#8cb0f8' d='M1 1h1m1 0h1m1 0h1m1 0h1M1 2h1m1 0h1m1 0h1m1 0h1M1 3h1m1 0h1m1 0h1m1 0h1M1 4h1m1 0h1m1 0h1m1 0h1M1 5h1m1 0h1m1 0h1m1 0h1M1 6h1m1 0h1m1 0h1m1 0h1'/><path stroke='#bad1fc' d='M0 6h1m1 0h1'/><path stroke='#bad3fc' d='M4 6h1m1 0h1'/></svg>
\ No newline at end of file
diff --git a/src/assets/scrollbar-track-vertical.svg b/src/assets/scrollbar-track-vertical.svg
deleted file mode 100644
index 72a4d37b9..000000000
--- a/src/assets/scrollbar-track-vertical.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -0.5 7 8' shape-rendering='crispEdges'><path stroke='#eef4fe' d='M0 0h6M0 2h6M0 4h6M0 6h6'/><path stroke='#bad1fc' d='M6 0h1M6 2h1M6 4h1'/><path stroke='#c8d6fb' d='M0 1h1M0 3h1M0 5h1M0 7h1'/><path stroke='#8cb0f8' d='M1 1h6M1 3h6M1 5h6M1 7h6'/><path stroke='#bad3fc' d='M6 6h1'/></svg>
\ No newline at end of file
diff --git a/src/assets/scrollbar/button-down.svg b/src/assets/scrollbar/button-down.svg
new file mode 100644
index 000000000..b09d57e7b
--- /dev/null
+++ b/src/assets/scrollbar/button-down.svg
@@ -0,0 +1,119 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -0.5 17 17' shape-rendering='crispEdges'>
+    <path stroke='#eeede5'
+        d='M0 0h1m15 0h1M0 1h1M0 2h1M0 3h1M0 4h1M0 5h1M0 6h1M0 7h1M0 8h1M0 9h1m-1 1h1m-1 1h1m-1 1h1m-1 1h1m-1 1h1m-1 1h1m15 0h1M0 16h1m15 0h1' />
+    <path stroke='#fdfdfa' d='M1 0h1' />
+    <path stroke='#fff'
+        d='M2 0h14M1 1h1m13 0h1M1 2h1m13 0h1M1 3h1m13 0h1M1 4h1m13 0h1M1 5h1m13 0h1M1 6h1m13 0h1M1 7h1m13 0h1M1 8h1m13 0h1M1 9h1m13 0h1M1 10h1m13 0h1M1 11h1m13 0h1M1 12h1m13 0h1M1 13h1m13 0h1M1 14h1m13 0h1M2 15h13' />
+    <path stroke='#e6eefc' d='M2 1h1' />
+    <path stroke='#d0dffc' d='M3 1h1M2 2h1' />
+    <path stroke='#cad8f9' d='M4 1h1M2 3h1' />
+    <path stroke='#c4d2f7' d='M5 1h1' />
+    <path stroke='#c0d0f7' d='M6 1h1' />
+    <path stroke='#bdcef7' d='M7 1h1M2 6h1' />
+    <path stroke='#bbcdf5' d='M8 1h1' />
+    <path stroke='#b8cbf6' d='M9 1h1M2 7h1' />
+    <path stroke='#b7caf5' d='M10 1h1M2 8h1' />
+    <path stroke='#b5c8f7' d='M11 1h1' />
+    <path stroke='#b3c7f5' d='M12 1h1' />
+    <path stroke='#afc5f4' d='M13 1h1' />
+    <path stroke='#dce6f9' d='M14 1h1' />
+    <path stroke='#dfe2e1' d='M16 1h1' />
+    <path stroke='#e1eafe' d='M3 2h1' />
+    <path stroke='#dae6fe' d='M4 2h1M3 3h1' />
+    <path stroke='#d4e1fc' d='M5 2h1M3 4h1' />
+    <path stroke='#d1e0fd' d='M6 2h1M4 4h1' />
+    <path stroke='#d0ddfc' d='M7 2h1M3 5h1' />
+    <path stroke='#cedbfd' d='M8 2h1M6 3h1' />
+    <path stroke='#cad9fd' d='M9 2h1M7 3h1M5 5h1' />
+    <path stroke='#c8d8fb' d='M10 2h1' />
+    <path stroke='#c5d6fc' d='M11 2h1m-8 8h3' />
+    <path stroke='#c2d3fc' d='M12 2h1m-2 1h1m-9 7h1m0 1h1' />
+    <path stroke='#bccefa' d='M13 2h1m-1 2h1m-9 9h2' />
+    <path stroke='#b9c9f3' d='M14 2h1M5 14h3' />
+    <path stroke='#cfd7dd' d='M16 2h1' />
+    <path stroke='#d8e3fc' d='M4 3h1' />
+    <path stroke='#d1defd' d='M5 3h1' />
+    <path stroke='#c9d8fc' d='M8 3h1M6 4h2M6 6h2M3 7h1' />
+    <path stroke='#c5d5fc' d='M9 3h1M3 9h3' />
+    <path stroke='#c5d3fc' d='M10 3h1' />
+    <path stroke='#bed0fc' d='M12 3h1M9 4h1m-7 7h1m0 1h1' />
+    <path stroke='#bccdfa' d='M13 3h1' />
+    <path stroke='#baccf4' d='M14 3h1' />
+    <path stroke='#bdcbda' d='M16 3h1' />
+    <path stroke='#c4d4f7' d='M2 4h1' />
+    <path stroke='#cddbfc' d='M5 4h1M3 6h1' />
+    <path stroke='#c8d5fb' d='M8 4h1' />
+    <path stroke='#bbcefd' d='M10 4h3M9 5h1M8 6h1' />
+    <path stroke='#bcccf3' d='M14 4h1m-1 1h1m-1 1h1' />
+    <path stroke='#b1c2d5' d='M16 4h1' />
+    <path stroke='#bed0f8' d='M2 5h1' />
+    <path stroke='#ceddfd' d='M4 5h1' />
+    <path stroke='#c8d6fb' d='M6 5h3M3 8h2' />
+    <path stroke='#bacdfc' d='M10 5h1m1 0h2M3 12h1' />
+    <path stroke='#b9cdfb' d='M11 5h1M9 6h2m1 0h2m-1 1h1' />
+    <path stroke='#a8bbd4' d='M16 5h1' />
+    <path stroke='#cddafc' d='M4 6h1' />
+    <path stroke='#4d6185' d='M5 6h1m5 0h1M4 7h3m3 0h3M5 8h3m1 0h3M6 9h5m-4 1h3m-2 1h1' />
+    <path stroke='#a4b8d3' d='M16 6h1' />
+    <path stroke='#c1d3fb' d='M7 7h2M8 8h1' />
+    <path stroke='#b6cefb' d='M9 7h1m2 1h1m-2 1h2' />
+    <path stroke='#bacbf4' d='M14 7h1' />
+    <path stroke='#a0b5d3' d='M16 7h1m-1 1h1m-1 5h1' />
+    <path stroke='#b6cdfb' d='M13 8h1m-5 5h1' />
+    <path stroke='#b9cbf3' d='M14 8h1' />
+    <path stroke='#b4c8f6' d='M2 9h1' />
+    <path stroke='#b5cdfa' d='M13 9h1' />
+    <path stroke='#b5c9f3' d='M14 9h1' />
+    <path stroke='#9fb5d2' d='M16 9h1m-1 1h1m-1 1h1m-1 1h1' />
+    <path stroke='#b1c7f6' d='M2 10h1' />
+    <path stroke='#b2cffb' d='M10 10h3m-2 2h1' />
+    <path stroke='#b1cbfa' d='M13 10h1' />
+    <path stroke='#b3c8f5' d='M14 10h1m-6 4h2' />
+    <path stroke='#adc3f6' d='M2 11h1' />
+    <path stroke='#c3d3fd' d='M5 11h1' />
+    <path stroke='#c2d5fc' d='M6 11h2' />
+    <path stroke='#bad4fc' d='M9 11h1' />
+    <path stroke='#b7d3fc' d='M10 11h1m-2 1h1' />
+    <path stroke='#b3d1fc' d='M11 11h1' />
+    <path stroke='#afcefb' d='M12 11h1' />
+    <path stroke='#aecafa' d='M13 11h1' />
+    <path stroke='#b1c8f3' d='M14 11h1' />
+    <path stroke='#acc2f5' d='M2 12h1' />
+    <path stroke='#c1d2fb' d='M5 12h1' />
+    <path stroke='#bed1fc' d='M6 12h2' />
+    <path stroke='#bdd3fb' d='M8 12h1' />
+    <path stroke='#b6d1fb' d='M10 12h1' />
+    <path stroke='#afccfb' d='M12 12h1' />
+    <path stroke='#adc9f9' d='M13 12h1m-2 1h1' />
+    <path stroke='#b1c5f3' d='M14 12h1' />
+    <path stroke='#aac0f3' d='M2 13h1' />
+    <path stroke='#b7cbf9' d='M3 13h1' />
+    <path stroke='#b9cefb' d='M4 13h1' />
+    <path stroke='#bbcef9' d='M7 13h1' />
+    <path stroke='#b9cffb' d='M8 13h1' />
+    <path stroke='#b2cdfb' d='M10 13h1' />
+    <path stroke='#b0cbf9' d='M11 13h1' />
+    <path stroke='#aec8f7' d='M13 13h1' />
+    <path stroke='#b0c5f2' d='M14 13h1' />
+    <path stroke='#dbe3f8' d='M2 14h1' />
+    <path stroke='#b7c6f1' d='M3 14h1' />
+    <path stroke='#b8c9f2' d='M4 14h1m3 0h1' />
+    <path stroke='#b2c8f4' d='M11 14h1' />
+    <path stroke='#b1c6f3' d='M12 14h1' />
+    <path stroke='#b0c4f2' d='M13 14h1' />
+    <path stroke='#d9e3f6' d='M14 14h1' />
+    <path stroke='#aec0d6' d='M16 14h1' />
+    <path stroke='#c3d4e7' d='M1 15h1' />
+    <path stroke='#aec4e5' d='M15 15h1' />
+    <path stroke='#edf1f3' d='M1 16h1' />
+    <path stroke='#aac0e1' d='M2 16h1' />
+    <path stroke='#94b1d9' d='M3 16h1' />
+    <path stroke='#88a7d8' d='M4 16h1' />
+    <path stroke='#83a4d3' d='M5 16h1' />
+    <path stroke='#7da0d4' d='M6 16h1m3 0h3' />
+    <path stroke='#7e9fd2' d='M7 16h1' />
+    <path stroke='#7c9fd3' d='M8 16h2' />
+    <path stroke='#82a4d6' d='M13 16h1' />
+    <path stroke='#94b0dd' d='M14 16h1' />
+    <path stroke='#ecf2f7' d='M15 16h1' />
+</svg>
\ No newline at end of file
diff --git a/src/assets/scrollbar/button-left.svg b/src/assets/scrollbar/button-left.svg
new file mode 100644
index 000000000..d2fdbbc9c
--- /dev/null
+++ b/src/assets/scrollbar/button-left.svg
@@ -0,0 +1,117 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -0.5 17 17' shape-rendering='crispEdges'>
+    <path stroke='#eeede5' d='M0 0h17m-1 1h1m-1 14h1m-1 1h1' />
+    <path stroke='#fdfdfa' d='M0 1h1' />
+    <path stroke='#fff'
+        d='M1 1h15M0 2h1m14 0h1M0 3h1m14 0h1M0 4h1m14 0h1M0 5h1m14 0h1M0 6h1m14 0h1M0 7h1m14 0h1M0 8h1m14 0h1M0 9h1m14 0h1M0 10h1m14 0h1M0 11h1m14 0h1M0 12h1m14 0h1M0 13h1m14 0h1M0 14h1m14 0h1M1 15h14' />
+    <path stroke='#e6eefc' d='M1 2h1' />
+    <path stroke='#d0dffc' d='M2 2h1M1 3h1' />
+    <path stroke='#cad8f9' d='M3 2h1M1 4h1' />
+    <path stroke='#c4d2f7' d='M4 2h1' />
+    <path stroke='#c0d0f7' d='M5 2h1' />
+    <path stroke='#bdcef7' d='M6 2h1M1 7h1' />
+    <path stroke='#bbcdf5' d='M7 2h2' />
+    <path stroke='#b8cbf6' d='M9 2h1M1 8h1' />
+    <path stroke='#b7caf5' d='M10 2h1M1 9h1' />
+    <path stroke='#b5c8f7' d='M11 2h1' />
+    <path stroke='#b3c7f5' d='M12 2h1' />
+    <path stroke='#afc5f4' d='M13 2h1' />
+    <path stroke='#dce6f9' d='M14 2h1' />
+    <path stroke='#dfe2e1' d='M16 2h1' />
+    <path stroke='#e1eafe' d='M2 3h1' />
+    <path stroke='#dae6fe' d='M3 3h1M2 4h1' />
+    <path stroke='#d4e1fc' d='M4 3h1M2 5h1' />
+    <path stroke='#d1e0fd' d='M5 3h1M3 5h1' />
+    <path stroke='#d0ddfc' d='M6 3h1M2 6h1' />
+    <path stroke='#cedbfd' d='M7 3h1M5 4h1' />
+    <path stroke='#cddbfc' d='M8 3h1M4 5h1M2 7h1' />
+    <path stroke='#cad9fd' d='M9 3h1M6 4h1M4 6h1' />
+    <path stroke='#c8d8fb' d='M10 3h1' />
+    <path stroke='#c5d6fc' d='M11 3h1m-9 7h3' />
+    <path stroke='#c2d3fc' d='M12 3h1m-2 1h1M2 10h1m0 1h1' />
+    <path stroke='#bccefa' d='M13 3h1m-1 2h1M4 13h2' />
+    <path stroke='#b9c9f3' d='M14 3h1M4 14h3' />
+    <path stroke='#cfd7dd' d='M16 3h1' />
+    <path stroke='#d8e3fc' d='M3 4h1' />
+    <path stroke='#d1defd' d='M4 4h1' />
+    <path stroke='#c9d8fc' d='M7 4h1M5 5h2M4 7h1M2 8h1' />
+    <path stroke='#4d6185' d='M8 4h1M7 5h3M6 6h3M5 7h3M4 8h3M5 9h3m-2 1h3m-2 1h3m-2 1h1' />
+    <path stroke='#c5d5fc' d='M9 4h1' />
+    <path stroke='#c5d3fc' d='M10 4h1' />
+    <path stroke='#bed0fc' d='M12 4h1M2 11h1m0 1h1' />
+    <path stroke='#bccdfa' d='M13 4h1' />
+    <path stroke='#baccf4' d='M14 4h1' />
+    <path stroke='#bdcbda' d='M16 4h1' />
+    <path stroke='#c4d4f7' d='M1 5h1' />
+    <path stroke='#bbcefd' d='M10 5h3M9 6h1' />
+    <path stroke='#bcccf3' d='M14 5h1m-1 1h1m-1 1h1' />
+    <path stroke='#b1c2d5' d='M16 5h1' />
+    <path stroke='#bed0f8' d='M1 6h1' />
+    <path stroke='#ceddfd' d='M3 6h1' />
+    <path stroke='#c8d6fb' d='M5 6h1M2 9h3' />
+    <path stroke='#bacdfc' d='M10 6h1m1 0h2M2 12h1' />
+    <path stroke='#b9cdfb' d='M11 6h1M8 7h3m1 0h2m-1 1h1' />
+    <path stroke='#a8bbd4' d='M16 6h1' />
+    <path stroke='#cddafc' d='M3 7h1' />
+    <path stroke='#b7cdfc' d='M11 7h1m0 1h1' />
+    <path stroke='#a4b8d3' d='M16 7h1' />
+    <path stroke='#cad8fd' d='M3 8h1' />
+    <path stroke='#c1d3fb' d='M7 8h2' />
+    <path stroke='#b6cefb' d='M9 8h3M9 9h4' />
+    <path stroke='#bacbf4' d='M14 8h1' />
+    <path stroke='#a0b5d3' d='M16 8h1m-1 1h1m-1 4h1' />
+    <path stroke='#bdd3fb' d='M8 9h1m-2 3h1' />
+    <path stroke='#b6cdfb' d='M13 9h1m-5 4h1' />
+    <path stroke='#b9cbf3' d='M14 9h1' />
+    <path stroke='#b1c7f6' d='M1 10h1' />
+    <path stroke='#bad4fc' d='M9 10h1' />
+    <path stroke='#b2cffb' d='M10 10h3m-2 2h1' />
+    <path stroke='#b1cbfa' d='M13 10h1' />
+    <path stroke='#b3c8f5' d='M14 10h1m-6 4h2' />
+    <path stroke='#9fb5d2' d='M16 10h1m-1 1h1m-1 1h1' />
+    <path stroke='#adc3f6' d='M1 11h1' />
+    <path stroke='#c3d3fd' d='M4 11h1' />
+    <path stroke='#c2d5fc' d='M5 11h2' />
+    <path stroke='#b7d3fc' d='M10 11h1m-2 1h1' />
+    <path stroke='#b3d1fc' d='M11 11h1' />
+    <path stroke='#afcefb' d='M12 11h1' />
+    <path stroke='#aecafa' d='M13 11h1' />
+    <path stroke='#b1c8f3' d='M14 11h1' />
+    <path stroke='#acc2f5' d='M1 12h1' />
+    <path stroke='#c1d2fb' d='M4 12h1' />
+    <path stroke='#bed1fc' d='M5 12h2' />
+    <path stroke='#b6d1fb' d='M10 12h1' />
+    <path stroke='#afccfb' d='M12 12h1' />
+    <path stroke='#adc9f9' d='M13 12h1m-2 1h1' />
+    <path stroke='#b1c5f3' d='M14 12h1' />
+    <path stroke='#aac0f3' d='M1 13h1' />
+    <path stroke='#b7cbf9' d='M2 13h1' />
+    <path stroke='#b9cefb' d='M3 13h1' />
+    <path stroke='#bbcef9' d='M6 13h1' />
+    <path stroke='#b9cffb' d='M7 13h1' />
+    <path stroke='#b8cffa' d='M8 13h1' />
+    <path stroke='#b2cdfb' d='M10 13h1' />
+    <path stroke='#b0cbf9' d='M11 13h1' />
+    <path stroke='#aec8f7' d='M13 13h1' />
+    <path stroke='#b0c5f2' d='M14 13h1' />
+    <path stroke='#dbe3f8' d='M1 14h1' />
+    <path stroke='#b7c6f1' d='M2 14h1' />
+    <path stroke='#b8c9f2' d='M3 14h1m3 0h2' />
+    <path stroke='#b2c8f4' d='M11 14h1' />
+    <path stroke='#b1c6f3' d='M12 14h1' />
+    <path stroke='#b0c4f2' d='M13 14h1' />
+    <path stroke='#d9e3f6' d='M14 14h1' />
+    <path stroke='#aec0d6' d='M16 14h1' />
+    <path stroke='#c3d4e7' d='M0 15h1' />
+    <path stroke='#aec4e5' d='M15 15h1' />
+    <path stroke='#edf1f3' d='M0 16h1' />
+    <path stroke='#aac0e1' d='M1 16h1' />
+    <path stroke='#94b1d9' d='M2 16h1' />
+    <path stroke='#88a7d8' d='M3 16h1' />
+    <path stroke='#83a4d3' d='M4 16h1' />
+    <path stroke='#7da0d4' d='M5 16h1m4 0h3' />
+    <path stroke='#7e9fd2' d='M6 16h1' />
+    <path stroke='#7c9fd3' d='M7 16h3' />
+    <path stroke='#82a4d6' d='M13 16h1' />
+    <path stroke='#94b0dd' d='M14 16h1' />
+    <path stroke='#ecf2f7' d='M15 16h1' />
+</svg>
\ No newline at end of file
diff --git a/src/assets/scrollbar/button-right.svg b/src/assets/scrollbar/button-right.svg
new file mode 100644
index 000000000..8ccce69d4
--- /dev/null
+++ b/src/assets/scrollbar/button-right.svg
@@ -0,0 +1,120 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -0.5 17 17' shape-rendering='crispEdges'>
+    <path stroke='#eeede5' d='M0 0h17m-1 1h1m-1 14h1m-1 1h1' />
+    <path stroke='#fdfdfa' d='M0 1h1' />
+    <path stroke='#fff'
+        d='M1 1h15M0 2h1m14 0h1M0 3h1m14 0h1M0 4h1m14 0h1M0 5h1m14 0h1M0 6h1m14 0h1M0 7h1m14 0h1M0 8h1m14 0h1M0 9h1m14 0h1M0 10h1m14 0h1M0 11h1m14 0h1M0 12h1m14 0h1M0 13h1m14 0h1M0 14h1m14 0h1M1 15h14' />
+    <path stroke='#e6eefc' d='M1 2h1' />
+    <path stroke='#d0dffc' d='M2 2h1M1 3h1' />
+    <path stroke='#cad8f9' d='M3 2h1M1 4h1' />
+    <path stroke='#c4d2f7' d='M4 2h1' />
+    <path stroke='#c0d0f7' d='M5 2h1' />
+    <path stroke='#bdcef7' d='M6 2h1M1 7h1' />
+    <path stroke='#bbcdf5' d='M7 2h2' />
+    <path stroke='#b8cbf6' d='M9 2h1M1 8h1' />
+    <path stroke='#b7caf5' d='M10 2h1' />
+    <path stroke='#b5c8f7' d='M11 2h1' />
+    <path stroke='#b3c7f5' d='M12 2h1' />
+    <path stroke='#afc5f4' d='M13 2h1' />
+    <path stroke='#dce6f9' d='M14 2h1' />
+    <path stroke='#dfe2e1' d='M16 2h1' />
+    <path stroke='#e1eafe' d='M2 3h1' />
+    <path stroke='#dae6fe' d='M3 3h1M2 4h1' />
+    <path stroke='#d4e1fc' d='M4 3h1M2 5h1' />
+    <path stroke='#d1e0fd' d='M5 3h1M3 5h1' />
+    <path stroke='#d0ddfc' d='M6 3h1M2 6h1' />
+    <path stroke='#cedbfd' d='M7 3h1M5 4h1' />
+    <path stroke='#cddbfc' d='M8 3h1M4 5h1M2 7h1' />
+    <path stroke='#cad9fd' d='M9 3h1M6 4h1M4 6h1' />
+    <path stroke='#c8d8fb' d='M10 3h1' />
+    <path stroke='#c5d6fc' d='M11 3h1m-9 7h3' />
+    <path stroke='#c2d3fc' d='M12 3h1m-2 1h1M2 10h1m0 1h1' />
+    <path stroke='#bccefa' d='M13 3h1m-1 2h1M4 13h2' />
+    <path stroke='#b9c9f3' d='M14 3h1M4 14h3' />
+    <path stroke='#cfd7dd' d='M16 3h1' />
+    <path stroke='#d8e3fc' d='M3 4h1' />
+    <path stroke='#d1defd' d='M4 4h1' />
+    <path stroke='#4d6185' d='M7 4h1M6 5h3M7 6h3M8 7h3M9 8h3M8 9h3m-4 1h3m-4 1h3m-2 1h1' />
+    <path stroke='#c8d6fb' d='M8 4h1M5 6h2' />
+    <path stroke='#c5d5fc' d='M9 4h1M2 9h5' />
+    <path stroke='#c5d3fc' d='M10 4h1' />
+    <path stroke='#bed0fc' d='M12 4h1M9 5h1m-8 6h1m0 1h1' />
+    <path stroke='#bccdfa' d='M13 4h1' />
+    <path stroke='#baccf4' d='M14 4h1' />
+    <path stroke='#bdcbda' d='M16 4h1' />
+    <path stroke='#c4d4f7' d='M1 5h1' />
+    <path stroke='#c9d8fc' d='M5 5h1M4 7h3M2 8h1' />
+    <path stroke='#bbcefd' d='M10 5h3M7 7h1' />
+    <path stroke='#bcccf3' d='M14 5h1m-1 1h1m-1 1h1' />
+    <path stroke='#b1c2d5' d='M16 5h1' />
+    <path stroke='#bed0f8' d='M1 6h1' />
+    <path stroke='#ceddfd' d='M3 6h1' />
+    <path stroke='#bacdfc' d='M10 6h1m1 0h2M2 12h1' />
+    <path stroke='#b9cdfb' d='M11 6h1m0 1h2m-1 1h1' />
+    <path stroke='#a8bbd4' d='M16 6h1' />
+    <path stroke='#cddafc' d='M3 7h1' />
+    <path stroke='#b7cdfc' d='M11 7h1m0 1h1' />
+    <path stroke='#a4b8d3' d='M16 7h1' />
+    <path stroke='#cad8fd' d='M3 8h3' />
+    <path stroke='#c1d3fb' d='M6 8h3' />
+    <path stroke='#bacbf4' d='M14 8h1' />
+    <path stroke='#a0b5d3' d='M16 8h1m-1 5h1' />
+    <path stroke='#b4c8f6' d='M1 9h1' />
+    <path stroke='#c2d5fc' d='M7 9h1m-3 2h1' />
+    <path stroke='#b6cefb' d='M11 9h2' />
+    <path stroke='#b5cdfa' d='M13 9h1' />
+    <path stroke='#b5c9f3' d='M14 9h1' />
+    <path stroke='#9fb5d2' d='M16 9h1m-1 1h1m-1 1h1m-1 1h1' />
+    <path stroke='#b1c7f6' d='M1 10h1' />
+    <path stroke='#c3d5fd' d='M6 10h1' />
+    <path stroke='#b2cffb' d='M10 10h3m-2 2h1' />
+    <path stroke='#b1cbfa' d='M13 10h1' />
+    <path stroke='#b3c8f5' d='M14 10h1m-6 4h2' />
+    <path stroke='#adc3f6' d='M1 11h1' />
+    <path stroke='#c3d3fd' d='M4 11h1' />
+    <path stroke='#bad4fc' d='M9 11h1' />
+    <path stroke='#b7d3fc' d='M10 11h1m-2 1h1' />
+    <path stroke='#b3d1fc' d='M11 11h1' />
+    <path stroke='#afcefb' d='M12 11h1' />
+    <path stroke='#aecafa' d='M13 11h1' />
+    <path stroke='#b1c8f3' d='M14 11h1' />
+    <path stroke='#acc2f5' d='M1 12h1' />
+    <path stroke='#c1d2fb' d='M4 12h1' />
+    <path stroke='#bed1fc' d='M5 12h2' />
+    <path stroke='#bbd3fd' d='M8 12h1' />
+    <path stroke='#b6d1fb' d='M10 12h1' />
+    <path stroke='#afccfb' d='M12 12h1' />
+    <path stroke='#adc9f9' d='M13 12h1m-2 1h1' />
+    <path stroke='#b1c5f3' d='M14 12h1' />
+    <path stroke='#aac0f3' d='M1 13h1' />
+    <path stroke='#b7cbf9' d='M2 13h1' />
+    <path stroke='#b9cefb' d='M3 13h1' />
+    <path stroke='#bbcef9' d='M6 13h1' />
+    <path stroke='#b9cffb' d='M7 13h1' />
+    <path stroke='#b8cffa' d='M8 13h1' />
+    <path stroke='#b6cdfb' d='M9 13h1' />
+    <path stroke='#b2cdfb' d='M10 13h1' />
+    <path stroke='#b0cbf9' d='M11 13h1' />
+    <path stroke='#aec8f7' d='M13 13h1' />
+    <path stroke='#b0c5f2' d='M14 13h1' />
+    <path stroke='#dbe3f8' d='M1 14h1' />
+    <path stroke='#b7c6f1' d='M2 14h1' />
+    <path stroke='#b8c9f2' d='M3 14h1m3 0h2' />
+    <path stroke='#b2c8f4' d='M11 14h1' />
+    <path stroke='#b1c6f3' d='M12 14h1' />
+    <path stroke='#b0c4f2' d='M13 14h1' />
+    <path stroke='#d9e3f6' d='M14 14h1' />
+    <path stroke='#aec0d6' d='M16 14h1' />
+    <path stroke='#c3d4e7' d='M0 15h1' />
+    <path stroke='#aec4e5' d='M15 15h1' />
+    <path stroke='#edf1f3' d='M0 16h1' />
+    <path stroke='#aac0e1' d='M1 16h1' />
+    <path stroke='#94b1d9' d='M2 16h1' />
+    <path stroke='#88a7d8' d='M3 16h1' />
+    <path stroke='#83a4d3' d='M4 16h1' />
+    <path stroke='#7da0d4' d='M5 16h1m4 0h3' />
+    <path stroke='#7e9fd2' d='M6 16h1' />
+    <path stroke='#7c9fd3' d='M7 16h3' />
+    <path stroke='#82a4d6' d='M13 16h1' />
+    <path stroke='#94b0dd' d='M14 16h1' />
+    <path stroke='#ecf2f7' d='M15 16h1' />
+</svg>
\ No newline at end of file
diff --git a/src/assets/scrollbar/button-up.svg b/src/assets/scrollbar/button-up.svg
new file mode 100644
index 000000000..a4caac66c
--- /dev/null
+++ b/src/assets/scrollbar/button-up.svg
@@ -0,0 +1,123 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -0.5 17 17' shape-rendering='crispEdges'>
+    <path stroke='#eeede5'
+        d='M0 0h1m15 0h1M0 1h1M0 2h1M0 3h1M0 4h1M0 5h1M0 6h1M0 7h1M0 8h1M0 9h1m-1 1h1m-1 1h1m-1 1h1m-1 1h1m-1 1h1m-1 1h1m15 0h1M0 16h1m15 0h1' />
+    <path stroke='#fdfdfa' d='M1 0h1' />
+    <path stroke='#fff'
+        d='M2 0h14M1 1h1m13 0h1M1 2h1m13 0h1M1 3h1m13 0h1M1 4h1m13 0h1M1 5h1m13 0h1M1 6h1m13 0h1M1 7h1m13 0h1M1 8h1m13 0h1M1 9h1m13 0h1M1 10h1m13 0h1M1 11h1m13 0h1M1 12h1m13 0h1M1 13h1m13 0h1M1 14h1m13 0h1M2 15h13' />
+    <path stroke='#e6eefc' d='M2 1h1' />
+    <path stroke='#d0dffc' d='M3 1h1M2 2h1' />
+    <path stroke='#cad8f9' d='M4 1h1M2 3h1' />
+    <path stroke='#c4d2f7' d='M5 1h1' />
+    <path stroke='#c0d0f7' d='M6 1h1' />
+    <path stroke='#bdcef7' d='M7 1h1M2 6h1' />
+    <path stroke='#bbcdf5' d='M8 1h1' />
+    <path stroke='#b8cbf6' d='M9 1h1M2 7h1' />
+    <path stroke='#b7caf5' d='M10 1h1M2 8h1' />
+    <path stroke='#b5c8f7' d='M11 1h1' />
+    <path stroke='#b3c7f5' d='M12 1h1' />
+    <path stroke='#afc5f4' d='M13 1h1' />
+    <path stroke='#dce6f9' d='M14 1h1' />
+    <path stroke='#dfe2e1' d='M16 1h1' />
+    <path stroke='#e1eafe' d='M3 2h1' />
+    <path stroke='#dae6fe' d='M4 2h1M3 3h1' />
+    <path stroke='#d4e1fc' d='M5 2h1M3 4h1' />
+    <path stroke='#d1e0fd' d='M6 2h1M4 4h1' />
+    <path stroke='#d0ddfc' d='M7 2h1M3 5h1' />
+    <path stroke='#cedbfd' d='M8 2h1M6 3h1' />
+    <path stroke='#cad9fd' d='M9 2h1M7 3h1M5 5h1' />
+    <path stroke='#c8d8fb' d='M10 2h1' />
+    <path stroke='#c5d6fc' d='M11 2h1m-8 8h1m1 0h1' />
+    <path stroke='#c2d3fc' d='M12 2h1m-2 1h1m-9 7h1m0 1h1' />
+    <path stroke='#bccefa' d='M13 2h1m-1 2h1m-9 9h2' />
+    <path stroke='#b9c9f3' d='M14 2h1M5 14h3' />
+    <path stroke='#cfd7dd' d='M16 2h1' />
+    <path stroke='#d8e3fc' d='M4 3h1' />
+    <path stroke='#d1defd' d='M5 3h1' />
+    <path stroke='#c9d8fc' d='M8 3h1M6 4h2M5 6h2M3 7h1' />
+    <path stroke='#c5d5fc' d='M9 3h1M3 9h1m3 0h1' />
+    <path stroke='#c5d3fc' d='M10 3h1' />
+    <path stroke='#bed0fc' d='M12 3h1M9 4h1m-7 7h1m0 1h1' />
+    <path stroke='#bccdfa' d='M13 3h1' />
+    <path stroke='#baccf4' d='M14 3h1' />
+    <path stroke='#bdcbda' d='M16 3h1' />
+    <path stroke='#c4d4f7' d='M2 4h1' />
+    <path stroke='#cddbfc' d='M5 4h1M3 6h1' />
+    <path stroke='#c8d5fb' d='M8 4h1' />
+    <path stroke='#bbcefd' d='M10 4h3M9 5h1' />
+    <path stroke='#bcccf3' d='M14 4h1m-1 1h1m-1 1h1' />
+    <path stroke='#b1c2d5' d='M16 4h1' />
+    <path stroke='#bed0f8' d='M2 5h1' />
+    <path stroke='#ceddfd' d='M4 5h1' />
+    <path stroke='#c8d6fb' d='M6 5h2M3 8h2' />
+    <path stroke='#4d6185' d='M8 5h1M7 6h3M6 7h5M5 8h3m1 0h3M4 9h3m3 0h3m-8 1h1m5 0h1' />
+    <path stroke='#bacdfc' d='M10 5h1m1 0h2M3 12h1' />
+    <path stroke='#b9cdfb' d='M11 5h1m-2 1h1m1 0h2m-1 1h1' />
+    <path stroke='#a8bbd4' d='M16 5h1' />
+    <path stroke='#cddafc' d='M4 6h1' />
+    <path stroke='#b7cdfc' d='M11 6h1m0 1h1' />
+    <path stroke='#a4b8d3' d='M16 6h1' />
+    <path stroke='#cad8fd' d='M4 7h2' />
+    <path stroke='#b6cefb' d='M11 7h1m0 1h1' />
+    <path stroke='#bacbf4' d='M14 7h1' />
+    <path stroke='#a0b5d3' d='M16 7h1m-1 1h1m-1 5h1' />
+    <path stroke='#c1d3fb' d='M8 8h1' />
+    <path stroke='#b6cdfb' d='M13 8h1m-5 5h1' />
+    <path stroke='#b9cbf3' d='M14 8h1' />
+    <path stroke='#b4c8f6' d='M2 9h1' />
+    <path stroke='#c2d5fc' d='M8 9h1m-1 1h1m-3 1h2' />
+    <path stroke='#bdd3fb' d='M9 9h1m-2 3h1' />
+    <path stroke='#b5cdfa' d='M13 9h1' />
+    <path stroke='#b5c9f3' d='M14 9h1' />
+    <path stroke='#9fb5d2' d='M16 9h1m-1 1h1m-1 1h1m-1 1h1' />
+    <path stroke='#b1c7f6' d='M2 10h1' />
+    <path stroke='#c3d5fd' d='M7 10h1' />
+    <path stroke='#bad4fc' d='M9 10h1m-1 1h1' />
+    <path stroke='#b2cffb' d='M10 10h1m1 0h1m-2 2h1' />
+    <path stroke='#b1cbfa' d='M13 10h1' />
+    <path stroke='#b3c8f5' d='M14 10h1m-6 4h2' />
+    <path stroke='#adc3f6' d='M2 11h1' />
+    <path stroke='#c3d3fd' d='M5 11h1' />
+    <path stroke='#c1d5fb' d='M8 11h1' />
+    <path stroke='#b7d3fc' d='M10 11h1m-2 1h1' />
+    <path stroke='#b3d1fc' d='M11 11h1' />
+    <path stroke='#afcefb' d='M12 11h1' />
+    <path stroke='#aecafa' d='M13 11h1' />
+    <path stroke='#b1c8f3' d='M14 11h1' />
+    <path stroke='#acc2f5' d='M2 12h1' />
+    <path stroke='#c1d2fb' d='M5 12h1' />
+    <path stroke='#bed1fc' d='M6 12h2' />
+    <path stroke='#b6d1fb' d='M10 12h1' />
+    <path stroke='#afccfb' d='M12 12h1' />
+    <path stroke='#adc9f9' d='M13 12h1m-2 1h1' />
+    <path stroke='#b1c5f3' d='M14 12h1' />
+    <path stroke='#aac0f3' d='M2 13h1' />
+    <path stroke='#b7cbf9' d='M3 13h1' />
+    <path stroke='#b9cefb' d='M4 13h1' />
+    <path stroke='#bbcef9' d='M7 13h1' />
+    <path stroke='#b9cffb' d='M8 13h1' />
+    <path stroke='#b2cdfb' d='M10 13h1' />
+    <path stroke='#b0cbf9' d='M11 13h1' />
+    <path stroke='#aec8f7' d='M13 13h1' />
+    <path stroke='#b0c5f2' d='M14 13h1' />
+    <path stroke='#dbe3f8' d='M2 14h1' />
+    <path stroke='#b7c6f1' d='M3 14h1' />
+    <path stroke='#b8c9f2' d='M4 14h1m3 0h1' />
+    <path stroke='#b2c8f4' d='M11 14h1' />
+    <path stroke='#b1c6f3' d='M12 14h1' />
+    <path stroke='#b0c4f2' d='M13 14h1' />
+    <path stroke='#d9e3f6' d='M14 14h1' />
+    <path stroke='#aec0d6' d='M16 14h1' />
+    <path stroke='#c3d4e7' d='M1 15h1' />
+    <path stroke='#aec4e5' d='M15 15h1' />
+    <path stroke='#edf1f3' d='M1 16h1' />
+    <path stroke='#aac0e1' d='M2 16h1' />
+    <path stroke='#94b1d9' d='M3 16h1' />
+    <path stroke='#88a7d8' d='M4 16h1' />
+    <path stroke='#83a4d3' d='M5 16h1' />
+    <path stroke='#7da0d4' d='M6 16h1m3 0h3' />
+    <path stroke='#7e9fd2' d='M7 16h1' />
+    <path stroke='#7c9fd3' d='M8 16h2' />
+    <path stroke='#82a4d6' d='M13 16h1' />
+    <path stroke='#94b0dd' d='M14 16h1' />
+    <path stroke='#ecf2f7' d='M15 16h1' />
+</svg>
\ No newline at end of file
diff --git a/src/assets/scrollbar/track-horizonal.svg b/src/assets/scrollbar/track-horizonal.svg
new file mode 100644
index 000000000..8b15baa37
--- /dev/null
+++ b/src/assets/scrollbar/track-horizonal.svg
@@ -0,0 +1,9 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -0.5 8 7' shape-rendering='crispEdges'>
+    <path stroke='#eef4fe'
+        d='M0 0h1m1 0h1m1 0h1m1 0h1M0 1h1m1 0h1m1 0h1m1 0h1M0 2h1m1 0h1m1 0h1m1 0h1M0 3h1m1 0h1m1 0h1m1 0h1M0 4h1m1 0h1m1 0h1m1 0h1M0 5h1m1 0h1m1 0h1m1 0h1' />
+    <path stroke='#c8d6fb' d='M1 0h1m1 0h1m1 0h1m1 0h1' />
+    <path stroke='#8cb0f8'
+        d='M1 1h1m1 0h1m1 0h1m1 0h1M1 2h1m1 0h1m1 0h1m1 0h1M1 3h1m1 0h1m1 0h1m1 0h1M1 4h1m1 0h1m1 0h1m1 0h1M1 5h1m1 0h1m1 0h1m1 0h1M1 6h1m1 0h1m1 0h1m1 0h1' />
+    <path stroke='#bad1fc' d='M0 6h1m1 0h1' />
+    <path stroke='#bad3fc' d='M4 6h1m1 0h1' />
+</svg>
\ No newline at end of file
diff --git a/src/assets/scrollbar/track-vertical.svg b/src/assets/scrollbar/track-vertical.svg
new file mode 100644
index 000000000..a52df6b7c
--- /dev/null
+++ b/src/assets/scrollbar/track-vertical.svg
@@ -0,0 +1,7 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -0.5 7 8' shape-rendering='crispEdges'>
+    <path stroke='#eef4fe' d='M0 0h6M0 2h6M0 4h6M0 6h6' />
+    <path stroke='#bad1fc' d='M6 0h1M6 2h1M6 4h1' />
+    <path stroke='#c8d6fb' d='M0 1h1M0 3h1M0 5h1M0 7h1' />
+    <path stroke='#8cb0f8' d='M1 1h6M1 3h6M1 5h6M1 7h6' />
+    <path stroke='#bad3fc' d='M6 6h1' />
+</svg>
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index 7243fe0df..acf54d15e 100644
--- a/src/index.css
+++ b/src/index.css
@@ -40,7 +40,7 @@ textarea {
   border: 1px solid #fff;
   border-radius: 2px;
   box-shadow: inset -2px 0 #bad1fc, inset 1px 1px #b7caf5;
-  background-image: url(./assets/scrollbar-track-vertical.svg);
+  background-image: url(./assets/scrollbar/track-vertical.svg);
 }
 
 ::-webkit-scrollbar-thumb:hover {
@@ -56,7 +56,7 @@ textarea {
 }
 
 ::-webkit-scrollbar-thumb:horizontal {
-  background-image: url(./assets/scrollbar-track-horizonal.svg);
+  background-image: url(./assets/scrollbar/track-horizonal.svg);
 }
 
 ::-webkit-scrollbar-button:horizontal:start:decrement,
@@ -68,17 +68,17 @@ textarea {
 
 ::-webkit-scrollbar-button:vertical:start {
   height: 17px;
-  background-image: url(./assets/scrollbar-button-up.svg);
+  background-image: url(./assets/scrollbar/button-up.svg);
 }
 ::-webkit-scrollbar-button:vertical:end {
   height: 17px;
-  background-image: url(./assets/scrollbar-button-down.svg);
+  background-image: url(./assets/scrollbar/button-down.svg);
 }
 ::-webkit-scrollbar-button:horizontal:start {
   width: 16px;
-  background-image: url(./assets/scrollbar-button-left.svg);
+  background-image: url(./assets/scrollbar/button-left.svg);
 }
 ::-webkit-scrollbar-button:horizontal:end {
   width: 16px;
-  background-image: url(./assets/scrollbar-button-right.svg);
+  background-image: url(./assets/scrollbar/button-right.svg);
 }

From 1c941838603a5130947ff7a63f4b0e6d8d08b5c7 Mon Sep 17 00:00:00 2001
From: Almog Lemberg <almoglemberg@gmail.com>
Date: Wed, 13 Apr 2022 16:36:38 +0300
Subject: [PATCH 4/9] Scrollbar CSS moved into external js file

---
 src/WinXP/apps/Notepad/index.js | 38 ++--------------
 src/WinXP/apps/Notepad/utils.js | 32 +++++++++++++
 src/WinXP/index.js              |  3 ++
 src/index.css                   | 77 -------------------------------
 src/scrollbar.js                | 80 +++++++++++++++++++++++++++++++++
 5 files changed, 118 insertions(+), 112 deletions(-)
 create mode 100644 src/WinXP/apps/Notepad/utils.js
 create mode 100644 src/scrollbar.js

diff --git a/src/WinXP/apps/Notepad/index.js b/src/WinXP/apps/Notepad/index.js
index 5c05977e6..b374cd222 100644
--- a/src/WinXP/apps/Notepad/index.js
+++ b/src/WinXP/apps/Notepad/index.js
@@ -5,6 +5,7 @@ import styled from 'styled-components';
 
 import { WindowDropDowns } from 'components';
 import { getDropDownData } from './dropDownData';
+import { getNotepadIframeStyle } from './utils';
 
 import { Context as AppContext } from '../../index';
 import { ADD_APP } from '../../constants/actions';
@@ -242,46 +243,13 @@ export default function Notepad({ onClose, isFocus }) {
     });
   }
 
-  const frameInitialContent = `
-  <!DOCTYPE html><html>
-  <head>
-  <style>
-  html, div, body, textarea {
-    height: 100%;
-    width: 100%;
-    margin: 0;
-  }
-  html, body {
-    overflow: hidden;
-  }
-  textarea {
-    flex: auto;
-    outline: none;
-    font-family: 'Lucida Console', monospace;
-    font-size: 13px;
-    line-height: 14px;
-    resize: none;
-    padding: 2px;
-    ${wordWrap ? '' : 'white-space: nowrap; overflow-x: scroll;'}
-    overflow-y: scroll;
-    border: 1px solid #96abff;
-  }
-
-  textarea::selection {
-    background-color: #1660e8;
-    color: white;
-  }
-  </style>
-  </head>
-  <body><div></div></body></html>`;
-
   return (
     <Div>
       <section className="np__toolbar">
         <WindowDropDowns items={dropDownData} onClickItem={onClickOptionItem} />
       </section>
-
-      <Frame initialContent={frameInitialContent} ref={frameRef} tabIndex={-1}>
+      <Frame ref={frameRef} tabIndex={-1}>
+        <style>{getNotepadIframeStyle(wordWrap)}</style>
         <textarea
           ref={textareaRef}
           value={docText}
diff --git a/src/WinXP/apps/Notepad/utils.js b/src/WinXP/apps/Notepad/utils.js
new file mode 100644
index 000000000..339125e81
--- /dev/null
+++ b/src/WinXP/apps/Notepad/utils.js
@@ -0,0 +1,32 @@
+import { getScrollbarCSS } from 'scrollbar';
+
+export function getNotepadIframeStyle(wordWrap) {
+  return `
+${getScrollbarCSS()}
+html, div, body, textarea {
+height: -webkit-fill-available;
+width: -webkit-fill-available;
+margin: 0;
+}
+html, body {
+overflow: hidden;
+}
+textarea {
+cursor: auto;
+flex: auto;
+outline: none;
+font-family: 'Lucida Console', monospace;
+font-size: 13px;
+line-height: 14px;
+resize: none;
+padding: 2px;
+${wordWrap ? '' : 'white-space: nowrap; overflow-x: scroll;'}
+overflow-y: scroll;
+border: 1px solid #96abff;
+}
+
+textarea::selection {
+background-color: #1660e8;
+color: white;
+}`;
+}
diff --git a/src/WinXP/index.js b/src/WinXP/index.js
index 1fa4d61f3..420751516 100644
--- a/src/WinXP/index.js
+++ b/src/WinXP/index.js
@@ -11,6 +11,8 @@ import useMouse from 'react-use/lib/useMouse';
 import ga from 'react-ga';
 
 import { getLocalStorage, setLocalStorage, throttledFunc } from './utils';
+import { getScrollbarCSS } from '../scrollbar';
+
 import {
   defaultDesktop,
   defaultScreenSaver,
@@ -439,6 +441,7 @@ function WinXP() {
       state={state.powerState}
       tabIndex={0}
     >
+      <style>{getScrollbarCSS()}</style>
       <Icons
         icons={state.icons}
         onMouseDown={onMouseDownIcon}
diff --git a/src/index.css b/src/index.css
index e7c53d424..a1af09732 100644
--- a/src/index.css
+++ b/src/index.css
@@ -10,80 +10,3 @@ textarea {
   background-color: #1660e8;
   color: white;
 }
-
-/* Scrollbar */
-
-/* CSS taken from: https://botoxparty.github.io/XP.css/ */
-
-::-webkit-scrollbar-track {
-  background-color: #f3f7f0;
-}
-
-::-webkit-scrollbar {
-  width: 16px;
-}
-::-webkit-scrollbar:horizontal {
-  height: 17px;
-}
-
-::-webkit-scrollbar {
-  width: 16px;
-}
-::-webkit-scrollbar:horizontal {
-  height: 17px;
-}
-
-::-webkit-scrollbar-corner {
-  background: #dfdfdf;
-}
-
-::-webkit-scrollbar-thumb {
-  background-position: 50%;
-  background-repeat: no-repeat;
-  background-color: #c8d6fb;
-  background-size: 7px;
-  border: 1px solid #fff;
-  border-radius: 2px;
-  box-shadow: inset -2px 0 #bad1fc, inset 1px 1px #b7caf5;
-  background-image: url(./assets/scrollbar/track-vertical.svg);
-}
-
-::-webkit-scrollbar-thumb:hover {
-  filter: brightness(0.4);
-  background-color: #cbe4fb;
-  box-shadow: inset -2px 0 #ddeaf5, inset 1px 1px #ddeaf5;
-}
-
-::-webkit-scrollbar-thumb:active {
-  background-color: rgb(176, 193, 237);
-  box-shadow: inset -2px 0 #a6b7e6, inset 1px 1px #a6b7e6;
-  filter: brightness(0);
-}
-
-::-webkit-scrollbar-thumb:horizontal {
-  background-image: url(./assets/scrollbar/track-horizonal.svg);
-}
-
-::-webkit-scrollbar-button:horizontal:start:decrement,
-::-webkit-scrollbar-button:horizontal:end:increment,
-::-webkit-scrollbar-button:vertical:start:decrement,
-::-webkit-scrollbar-button:vertical:end:increment {
-  display: block;
-}
-
-::-webkit-scrollbar-button:vertical:start {
-  height: 17px;
-  background-image: url(./assets/scrollbar/button-up.svg);
-}
-::-webkit-scrollbar-button:vertical:end {
-  height: 17px;
-  background-image: url(./assets/scrollbar/button-down.svg);
-}
-::-webkit-scrollbar-button:horizontal:start {
-  width: 16px;
-  background-image: url(./assets/scrollbar/button-left.svg);
-}
-::-webkit-scrollbar-button:horizontal:end {
-  width: 16px;
-  background-image: url(./assets/scrollbar/button-right.svg);
-}
diff --git a/src/scrollbar.js b/src/scrollbar.js
new file mode 100644
index 000000000..3f16ed2c6
--- /dev/null
+++ b/src/scrollbar.js
@@ -0,0 +1,80 @@
+import buttonUp from 'assets/scrollbar/button-up.svg';
+import buttonDown from 'assets/scrollbar/button-down.svg';
+import buttonRight from 'assets/scrollbar/button-right.svg';
+import buttonLeft from 'assets/scrollbar/button-left.svg';
+import trackHorizonal from 'assets/scrollbar/track-horizonal.svg';
+import trackVertical from 'assets/scrollbar/track-vertical.svg';
+
+/* CSS taken from: https://botoxparty.github.io/XP.css/ */
+
+export function getScrollbarCSS() {
+  return `
+  ::-webkit-scrollbar {
+    width: 16px;
+  }
+  ::-webkit-scrollbar:horizontal {
+    height: 17px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background-color: #f8f7f0;
+  }
+  
+  ::-webkit-scrollbar-corner {
+    background: #ECEAD6;
+  }
+  
+  ::-webkit-scrollbar-thumb {
+    background-position: 50%;
+    background-repeat: no-repeat;
+    background-color: #c8d6fb;
+    background-size: 7px;
+    border: 1px solid #fff;
+    border-radius: 2px;
+    box-shadow: inset -2px 0 #bad1fc, inset 1px 1px #b7caf5;
+    background-image: url(${trackVertical});
+  }
+  
+  ::-webkit-scrollbar-thumb:hover {
+    filter: brightness(0.4);
+    background-color: #cbe4fb;
+    box-shadow: inset -2px 0 #ddeaf5, inset 1px 1px #ddeaf5;
+  }
+  
+  ::-webkit-scrollbar-thumb:active {
+    background-color: rgb(176, 193, 237);
+    box-shadow: inset -2px 0 #a6b7e6, inset 1px 1px #a6b7e6;
+    filter: brightness(0);
+  }
+
+  
+  
+  ::-webkit-scrollbar-thumb:horizontal {
+    background-image: url(${trackHorizonal});
+  }
+  
+  ::-webkit-scrollbar-button:horizontal:start:decrement,
+  ::-webkit-scrollbar-button:horizontal:end:increment,
+  ::-webkit-scrollbar-button:vertical:start:decrement,
+  ::-webkit-scrollbar-button:vertical:end:increment {
+    display: block;
+  }
+  
+  ::-webkit-scrollbar-button:vertical:start {
+    height: 17px;
+    background-image: url(${buttonUp});
+  }
+  ::-webkit-scrollbar-button:vertical:end {
+    height: 17px;
+    background-image: url(${buttonDown});
+  }
+  ::-webkit-scrollbar-button:horizontal:start {
+    width: 16px;
+    background-image: url(${buttonLeft});
+  }
+  ::-webkit-scrollbar-button:horizontal:end {
+    width: 16px;
+    background-image: url(${buttonRight});
+  }
+`;
+}

From 77cb563202dc444b088195010548ddc7d749d843 Mon Sep 17 00:00:00 2001
From: Almog Lemberg <almoglemberg@gmail.com>
Date: Wed, 13 Apr 2022 18:33:01 +0300
Subject: [PATCH 5/9] Added light button on hover

---
 src/WinXP/apps/Notepad/index.js          |   4 +-
 src/assets/scrollbar/button-up-light.svg | 123 +++++++++++++++++++++++
 src/scrollbar.js                         |  13 +++
 3 files changed, 138 insertions(+), 2 deletions(-)
 create mode 100644 src/assets/scrollbar/button-up-light.svg

diff --git a/src/WinXP/apps/Notepad/index.js b/src/WinXP/apps/Notepad/index.js
index b374cd222..89a7d839f 100644
--- a/src/WinXP/apps/Notepad/index.js
+++ b/src/WinXP/apps/Notepad/index.js
@@ -277,8 +277,8 @@ const Div = styled.div`
   align-items: stretch;
 
   iframe {
-    height: 100%;
-    width: 100%;
+    height: -webkit-fill-available;
+    width: -webkit-fill-available;
     margin: 0;
     border: 0;
   }
diff --git a/src/assets/scrollbar/button-up-light.svg b/src/assets/scrollbar/button-up-light.svg
new file mode 100644
index 000000000..d01556886
--- /dev/null
+++ b/src/assets/scrollbar/button-up-light.svg
@@ -0,0 +1,123 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -0.5 17 17' shape-rendering='crispEdges'>
+    <path stroke="#e5ebee"
+        d='M0 0h1m15 0h1M0 1h1M0 2h1M0 3h1M0 4h1M0 5h1M0 6h1M0 7h1M0 8h1M0 9h1m-1 1h1m-1 1h1m-1 1h1m-1 1h1m-1 1h1m-1 1h1m15 0h1M0 16h1m15 0h1' />
+    <path stroke="#fafcfd" d='M1 0h1' />
+    <path stroke="#ffffff"
+        d='M2 0h14M1 1h1m13 0h1M1 2h1m13 0h1M1 3h1m13 0h1M1 4h1m13 0h1M1 5h1m13 0h1M1 6h1m13 0h1M1 7h1m13 0h1M1 8h1m13 0h1M1 9h1m13 0h1M1 10h1m13 0h1M1 11h1m13 0h1M1 12h1m13 0h1M1 13h1m13 0h1M1 14h1m13 0h1M2 15h13' />
+    <path stroke="#e6f5fc" d='M2 1h1' />
+    <path stroke="#d0edfc" d='M3 1h1M2 2h1' />
+    <path stroke="#cae9f9" d='M4 1h1M2 3h1' />
+    <path stroke="#c4e6f7" d='M5 1h1' />
+    <path stroke="#c0e5f7" d='M6 1h1' />
+    <path stroke="#bde4f7" d='M7 1h1M2 6h1' />
+    <path stroke="#bbe2f5" d='M8 1h1' />
+    <path stroke="#b8e1f6" d='M9 1h1M2 7h1' />
+    <path stroke="#b7e0f5" d='M10 1h1M2 8h1' />
+    <path stroke="#b5e1f7" d='M11 1h1' />
+    <path stroke="#b3dff5" d='M12 1h1' />
+    <path stroke="#afddf4" d='M13 1h1' />
+    <path stroke="#dceff9" d='M14 1h1' />
+    <path stroke="#dfe1e2" d='M16 1h1' />
+    <path stroke="#e1f4fe" d='M3 2h1' />
+    <path stroke="#d2ecf9" d='M4 2h1M3 3h1' />
+    <path stroke="#d4effc" d='M5 2h1M3 4h1' />
+    <path stroke="#d1eefd" d='M6 2h1M4 4h1' />
+    <path stroke="#d0edfc" d='M7 2h1M3 5h1' />
+    <path stroke="#ceedfd" d='M8 2h1M6 3h1' />
+    <path stroke="#caecfd" d='M9 2h1M7 3h1M5 5h1' />
+    <path stroke="#c8eafb" d='M10 2h1' />
+    <path stroke="#c5eafc" d='M11 2h1m-8 8h1m1 0h1' />
+    <path stroke="#c2e9fc" d='M12 2h1m-2 1h1m-9 7h1m0 1h1' />
+    <path stroke="#bce5fa" d='M13 2h1m-1 2h1m-9 9h2' />
+    <path stroke="#b9e0f3" d='M14 2h1M5 14h3' />
+    <path stroke="#cfd8dd" d='M16 2h1' />
+    <path stroke="#d8f0fc" d='M4 3h1' />
+    <path stroke="#d1eefd" d='M5 3h1' />
+    <path stroke="#c9ebfc" d='M8 3h1M6 4h2M5 6h2M3 7h1' />
+    <path stroke="#c5eafc" d='M9 3h1M3 9h1m3 0h1' />
+    <path stroke="#c5eafc" d='M10 3h1' />
+    <path stroke="#bee7fc" d='M12 3h1M9 4h1m-7 7h1m0 1h1' />
+    <path stroke="#bce5fa" d='M13 3h1' />
+    <path stroke="#bae1f4" d='M14 3h1' />
+    <path stroke="#bdd0da" d='M16 3h1' />
+    <path stroke="#c4e6f7" d='M2 4h1' />
+    <path stroke="#cdecfc" d='M5 4h1M3 6h1' />
+    <path stroke="#c8eafb" d='M8 4h1' />
+    <path stroke="#bbe7fd" d='M10 4h3M9 5h1' />
+    <path stroke="#bce1f3" d='M14 4h1m-1 1h1m-1 1h1' />
+    <path stroke="#b1c9d5" d='M16 4h1' />
+    <path stroke="#bee5f8" d='M2 5h1' />
+    <path stroke="#ceedfd" d='M4 5h1' />
+    <path stroke="#c8eafb" d='M6 5h2M3 8h2' />
+    <path stroke="#1f5f8b" d='M8 5h1M7 6h3M6 7h5M5 8h3m1 0h3M4 9h3m3 0h3m-8 1h1m5 0h1' />
+    <path stroke="#bae6fc" d='M10 5h1m1 0h2M3 12h1' />
+    <path stroke="#b9e5fb" d='M11 5h1m-2 1h1m1 0h2m-1 1h1' />
+    <path stroke="#a8c5d4" d='M16 5h1' />
+    <path stroke="#cdecfc" d='M4 6h1' />
+    <path stroke="#b7e5fc" d='M11 6h1m0 1h1' />
+    <path stroke="#a4c3d3" d='M16 6h1' />
+    <path stroke="#caecfd" d='M4 7h2' />
+    <path stroke="#b6e4fb" d='M11 7h1m0 1h1' />
+    <path stroke="#bae1f4" d='M14 7h1' />
+    <path stroke="#a0c2d3" d='M16 7h1m-1 1h1m-1 5h1' />
+    <path stroke="#c1e8fb" d='M8 8h1' />
+    <path stroke="#b6e4fb" d='M13 8h1m-5 5h1' />
+    <path stroke="#b9e0f3" d='M14 8h1' />
+    <path stroke="#b4e0f6" d='M2 9h1' />
+    <path stroke="#c2e9fc" d='M8 9h1m-1 1h1m-3 1h2' />
+    <path stroke="#bde6fb" d='M9 9h1m-2 3h1' />
+    <path stroke="#b5e3fa" d='M13 9h1' />
+    <path stroke="#b5def3" d='M14 9h1' />
+    <path stroke="#9fc1d2" d='M16 9h1m-1 1h1m-1 1h1m-1 1h1' />
+    <path stroke="#b1dff6" d='M2 10h1' />
+    <path stroke="#c3eafd" d='M7 10h1' />
+    <path stroke="#bae6fc" d='M9 10h1m-1 1h1' />
+    <path stroke="#b2e3fb" d='M10 10h1m1 0h1m-2 2h1' />
+    <path stroke="#b1e2fa" d='M13 10h1' />
+    <path stroke="#b3dff5" d='M14 10h1m-6 4h2' />
+    <path stroke="#addef6" d='M2 11h1' />
+    <path stroke="#c3eafd" d='M5 11h1' />
+    <path stroke="#c1e8fb" d='M8 11h1' />
+    <path stroke="#b7e5fc" d='M10 11h1m-2 1h1' />
+    <path stroke="#b3e4fc" d='M11 11h1' />
+    <path stroke="#afe2fb" d='M12 11h1' />
+    <path stroke="#aee1fa" d='M13 11h1' />
+    <path stroke="#b1ddf3" d='M14 11h1' />
+    <path stroke="#acddf5" d='M2 12h1' />
+    <path stroke="#c1e8fb" d='M5 12h1' />
+    <path stroke="#bee7fc" d='M6 12h2' />
+    <path stroke="#b6e4fb" d='M10 12h1' />
+    <path stroke="#afe2fb" d='M12 12h1' />
+    <path stroke="#ade0f9" d='M13 12h1m-2 1h1' />
+    <path stroke="#b1ddf3" d='M14 12h1' />
+    <path stroke="#aadbf3" d='M2 13h1' />
+    <path stroke="#b7e3f9" d='M3 13h1' />
+    <path stroke="#b9e5fb" d='M4 13h1' />
+    <path stroke="#bbe4f9" d='M7 13h1' />
+    <path stroke="#b9e5fb" d='M8 13h1' />
+    <path stroke="#b2e3fb" d='M10 13h1' />
+    <path stroke="#b0e1f9" d='M11 13h1' />
+    <path stroke="#aedff7" d='M13 13h1' />
+    <path stroke="#b0dcf2" d='M14 13h1' />
+    <path stroke="#dbeef8" d='M2 14h1' />
+    <path stroke="#b7def1" d='M3 14h1' />
+    <path stroke="#b8dff2" d='M4 14h1m3 0h1' />
+    <path stroke="#b2def4" d='M11 14h1' />
+    <path stroke="#b1ddf3" d='M12 14h1' />
+    <path stroke="#b0dcf2" d='M13 14h1' />
+    <path stroke="#d9ecf6" d='M14 14h1' />
+    <path stroke="#aec9d6" d='M16 14h1' />
+    <path stroke="#c3dbe7" d='M1 15h1' />
+    <path stroke="#aed3e5" d='M15 15h1' />
+    <path stroke="#edf1f3" d='M1 16h1' />
+    <path stroke="#aacfe1" d='M2 16h1' />
+    <path stroke="#94c2d9" d='M3 16h1' />
+    <path stroke="#88bdd8" d='M4 16h1' />
+    <path stroke="#83b8d3" d='M5 16h1' />
+    <path stroke="#7dc4d4" d='M6 16h1m3 0h3' />
+    <path stroke="#7ec3d2" d='M7 16h1' />
+    <path stroke="#1891ac" d='M8 16h2' />
+    <path stroke="#82bad6" d='M13 16h1' />
+    <path stroke="#94c5dd" d='M14 16h1' />
+    <path stroke="#ecf3f7" d='M15 16h1' />
+</svg>
\ No newline at end of file
diff --git a/src/scrollbar.js b/src/scrollbar.js
index 3f16ed2c6..71277e68a 100644
--- a/src/scrollbar.js
+++ b/src/scrollbar.js
@@ -1,4 +1,6 @@
 import buttonUp from 'assets/scrollbar/button-up.svg';
+import buttonUpLight from 'assets/scrollbar/button-up-light.svg';
+
 import buttonDown from 'assets/scrollbar/button-down.svg';
 import buttonRight from 'assets/scrollbar/button-right.svg';
 import buttonLeft from 'assets/scrollbar/button-left.svg';
@@ -64,14 +66,25 @@ export function getScrollbarCSS() {
     height: 17px;
     background-image: url(${buttonUp});
   }
+
+  ::-webkit-scrollbar-button:vertical:start:hover {
+    background-image: url(${buttonUpLight});
+  }
+
+  ::-webkit-scrollbar-button:vertical:start:active {
+    background: red;
+  }
+
   ::-webkit-scrollbar-button:vertical:end {
     height: 17px;
     background-image: url(${buttonDown});
   }
+
   ::-webkit-scrollbar-button:horizontal:start {
     width: 16px;
     background-image: url(${buttonLeft});
   }
+
   ::-webkit-scrollbar-button:horizontal:end {
     width: 16px;
     background-image: url(${buttonRight});

From 9f0d0fda6f36806fb8bc53d44511ad31598c6b24 Mon Sep 17 00:00:00 2001
From: Almog Lemberg <almoglemberg@gmail.com>
Date: Thu, 14 Apr 2022 09:30:02 +0300
Subject: [PATCH 6/9] Iframe scorllbar being cut issue fixed

---
 src/WinXP/apps/Notepad/index.js | 4 ++--
 src/WinXP/apps/Notepad/utils.js | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/WinXP/apps/Notepad/index.js b/src/WinXP/apps/Notepad/index.js
index 89a7d839f..b374cd222 100644
--- a/src/WinXP/apps/Notepad/index.js
+++ b/src/WinXP/apps/Notepad/index.js
@@ -277,8 +277,8 @@ const Div = styled.div`
   align-items: stretch;
 
   iframe {
-    height: -webkit-fill-available;
-    width: -webkit-fill-available;
+    height: 100%;
+    width: 100%;
     margin: 0;
     border: 0;
   }
diff --git a/src/WinXP/apps/Notepad/utils.js b/src/WinXP/apps/Notepad/utils.js
index 339125e81..d0a3d56a3 100644
--- a/src/WinXP/apps/Notepad/utils.js
+++ b/src/WinXP/apps/Notepad/utils.js
@@ -4,8 +4,8 @@ export function getNotepadIframeStyle(wordWrap) {
   return `
 ${getScrollbarCSS()}
 html, div, body, textarea {
-height: -webkit-fill-available;
-width: -webkit-fill-available;
+  height: calc(100% - 1px);
+  width: calc(100% - 1px);
 margin: 0;
 }
 html, body {

From 551df62097b2ad23f47145e35a48f9363a3b58e8 Mon Sep 17 00:00:00 2001
From: Almog Lemberg <almoglemberg@gmail.com>
Date: Thu, 14 Apr 2022 13:11:44 +0300
Subject: [PATCH 7/9] Added buttons svg

---
 src/assets/scrollbar/button-down-dark.svg   | 119 +++++++++++++++++++
 src/assets/scrollbar/button-down-light.svg  | 119 +++++++++++++++++++
 src/assets/scrollbar/button-left-dark.svg   | 117 +++++++++++++++++++
 src/assets/scrollbar/button-left-light.svg  | 117 +++++++++++++++++++
 src/assets/scrollbar/button-right-dark.svg  | 120 +++++++++++++++++++
 src/assets/scrollbar/button-right-light.svg | 120 +++++++++++++++++++
 src/assets/scrollbar/button-up-dark.svg     | 123 ++++++++++++++++++++
 7 files changed, 835 insertions(+)
 create mode 100644 src/assets/scrollbar/button-down-dark.svg
 create mode 100644 src/assets/scrollbar/button-down-light.svg
 create mode 100644 src/assets/scrollbar/button-left-dark.svg
 create mode 100644 src/assets/scrollbar/button-left-light.svg
 create mode 100644 src/assets/scrollbar/button-right-dark.svg
 create mode 100644 src/assets/scrollbar/button-right-light.svg
 create mode 100644 src/assets/scrollbar/button-up-dark.svg

diff --git a/src/assets/scrollbar/button-down-dark.svg b/src/assets/scrollbar/button-down-dark.svg
new file mode 100644
index 000000000..726a1c3ca
--- /dev/null
+++ b/src/assets/scrollbar/button-down-dark.svg
@@ -0,0 +1,119 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -0.5 17 17' shape-rendering='crispEdges'>
+    <path stroke='#d9dcfa'
+        d='M0 0h1m15 0h1M0 1h1M0 2h1M0 3h1M0 4h1M0 5h1M0 6h1M0 7h1M0 8h1M0 9h1m-1 1h1m-1 1h1m-1 1h1m-1 1h1m-1 1h1m-1 1h1m15 0h1M0 16h1m15 0h1' />
+    <path stroke='#f9f9fe' d='M1 0h1' />
+    <path stroke='#ffffff'
+        d='M2 0h14M1 1h1m13 0h1M1 2h1m13 0h1M1 3h1m13 0h1M1 4h1m13 0h1M1 5h1m13 0h1M1 6h1m13 0h1M1 7h1m13 0h1M1 8h1m13 0h1M1 9h1m13 0h1M1 10h1m13 0h1M1 11h1m13 0h1M1 12h1m13 0h1M1 13h1m13 0h1M1 14h1m13 0h1M2 15h13' />
+    <path stroke='#e6e8fc' d='M2 1h1' />
+    <path stroke='#d3d6f9' d='M3 1h1M2 2h1' />
+    <path stroke='#cbcff8' d='M4 1h1M2 3h1' />
+    <path stroke='#c4c8f7' d='M5 1h1' />
+    <path stroke='#c0c5f6' d='M6 1h1' />
+    <path stroke='#bec3f6' d='M7 1h1M2 6h1' />
+    <path stroke='#babff6' d='M8 1h1' />
+    <path stroke='#b9bef5' d='M9 1h1M2 7h1' />
+    <path stroke='#b7bcf5' d='M10 1h1M2 8h1' />
+    <path stroke='#b7bcf5' d='M11 1h1' />
+    <path stroke='#b3b9f5' d='M12 1h1' />
+    <path stroke='#afb5f4' d='M13 1h1' />
+    <path stroke='#dbdefa' d='M14 1h1' />
+    <path stroke='#c9cdf8' d='M16 1h1' />
+    <path stroke='#e4e6fb' d='M3 2h1' />
+    <path stroke='#dee0fa' d='M4 2h1M3 3h1' />
+    <path stroke='#d7d9f9' d='M5 2h1M3 4h1' />
+    <path stroke='#d5d8f9' d='M6 2h1M4 4h1' />
+    <path stroke='#d3d6f9' d='M7 2h1M3 5h1' />
+    <path stroke='#d2d5f9' d='M8 2h1M6 3h1' />
+    <path stroke='#cfd2f8' d='M9 2h1M7 3h1M5 5h1' />
+    <path stroke='#cbcff8' d='M10 2h1' />
+    <path stroke='#c9cdf8' d='M11 2h1m-8 8h3' />
+    <path stroke='#c7cbf7' d='M12 2h1m-2 1h1m-9 7h1m0 1h1' />
+    <path stroke='#c0c4f6' d='M13 2h1m-1 2h1m-9 9h2' />
+    <path stroke='#b7bcf5' d='M14 2h1M5 14h3' />
+    <path stroke='#b7bcf5' d='M16 2h1' />
+    <path stroke='#daddfa' d='M4 3h1' />
+    <path stroke='#d5d8f9' d='M5 3h1' />
+    <path stroke='#cdd0f8' d='M8 3h1M6 4h2M6 6h2M3 7h1' />
+    <path stroke='#c9cdf8' d='M9 3h1M3 9h3' />
+    <path stroke='#c9cdf8' d='M10 3h1' />
+    <path stroke='#c3c7f7' d='M12 3h1M9 4h1m-7 7h1m0 1h1' />
+    <path stroke='#c0c4f6' d='M13 3h1' />
+    <path stroke='#b9bef5' d='M14 3h1' />
+    <path stroke='#a4abf3' d='M16 3h1' />
+    <path stroke='#c4c8f7' d='M2 4h1' />
+    <path stroke='#d0d4f9' d='M5 4h1M3 6h1' />
+    <path stroke='#cbcff8' d='M8 4h1' />
+    <path stroke='#c1c6f7' d='M10 4h3M9 5h1M8 6h1' />
+    <path stroke='#b9bef6' d='M14 4h1m-1 1h1m-1 1h1' />
+    <path stroke='#959df1' d='M16 4h1' />
+    <path stroke='#c0c4f6' d='M2 5h1' />
+    <path stroke='#d2d5f9' d='M4 5h1' />
+    <path stroke='#cbcff8' d='M6 5h3M3 8h2' />
+    <path stroke='#c0c4f6' d='M10 5h1m1 0h2M3 12h1' />
+    <path stroke='#bec3f6' d='M11 5h1M9 6h2m1 0h2m-1 1h1' />
+    <path stroke='#8d95ef' d='M16 5h1' />
+    <path stroke='#d0d4f9' d='M4 6h1' />
+    <path stroke='#1926b9' d='M5 6h1m5 0h1M4 7h3m3 0h3M5 8h3m1 0h3M6 9h5m-4 1h3m-2 1h1' />
+    <path stroke='#8891ef' d='M16 6h1' />
+    <path stroke='#c5c9f7' d='M7 7h2M8 8h1' />
+    <path stroke='#bbc0f6' d='M9 7h1m2 1h1m-2 1h2' />
+    <path stroke='#b9bef5' d='M14 7h1' />
+    <path stroke='#858dee' d='M16 7h1m-1 1h1m-1 5h1' />
+    <path stroke='#bbc0f6' d='M13 8h1m-5 5h1' />
+    <path stroke='#b7bcf5' d='M14 8h1' />
+    <path stroke='#b5baf5' d='M2 9h1' />
+    <path stroke='#b9bef6' d='M13 9h1' />
+    <path stroke='#b3b9f5' d='M14 9h1' />
+    <path stroke='#838cee' d='M16 9h1m-1 1h1m-1 1h1m-1 1h1' />
+    <path stroke='#b2b8f5' d='M2 10h1' />
+    <path stroke='#b8bdf5' d='M10 10h3m-2 2h1' />
+    <path stroke='#b6bbf5' d='M13 10h1' />
+    <path stroke='#b3b9f5' d='M14 10h1m-6 4h2' />
+    <path stroke='#afb5f4' d='M2 11h1' />
+    <path stroke='#c8ccf8' d='M5 11h1' />
+    <path stroke='#c7cbf7' d='M6 11h2' />
+    <path stroke='#c0c4f6' d='M9 11h1' />
+    <path stroke='#bdc2f6' d='M10 11h1m-2 1h1' />
+    <path stroke='#b9bef6' d='M11 11h1' />
+    <path stroke='#b5baf5' d='M12 11h1' />
+    <path stroke='#b3b9f5' d='M13 11h1' />
+    <path stroke='#b0b5f4' d='M14 11h1' />
+    <path stroke='#adb3f4' d='M2 12h1' />
+    <path stroke='#c5c9f7' d='M5 12h1' />
+    <path stroke='#c3c7f7' d='M6 12h2' />
+    <path stroke='#c1c6f7' d='M8 12h1' />
+    <path stroke='#bbc0f6' d='M10 12h1' />
+    <path stroke='#b5baf5' d='M12 12h1' />
+    <path stroke='#b2b7f4' d='M13 12h1m-2 1h1' />
+    <path stroke='#b0b5f4' d='M14 12h1' />
+    <path stroke='#aab0f3' d='M2 13h1' />
+    <path stroke='#babff6' d='M3 13h1' />
+    <path stroke='#bec3f6' d='M4 13h1' />
+    <path stroke='#bec3f6' d='M7 13h1' />
+    <path stroke='#bec3f6' d='M8 13h1' />
+    <path stroke='#b8bdf5' d='M10 13h1' />
+    <path stroke='#b4baf5' d='M11 13h1' />
+    <path stroke='#b1b6f4' d='M13 13h1' />
+    <path stroke='#aeb4f4' d='M14 13h1' />
+    <path stroke='#d9dcfa' d='M2 14h1' />
+    <path stroke='#b3b9f5' d='M3 14h1' />
+    <path stroke='#b5baf5' d='M4 14h1m3 0h1' />
+    <path stroke='#b2b7f4' d='M11 14h1' />
+    <path stroke='#b0b5f4' d='M12 14h1' />
+    <path stroke='#aeb4f4' d='M13 14h1' />
+    <path stroke='#d6d9f9' d='M14 14h1' />
+    <path stroke='#949bf0' d='M16 14h1' />
+    <path stroke='#b5baf5' d='M1 15h1' />
+    <path stroke='#a1a8f2' d='M15 15h1' />
+    <path stroke='#e5e6fb' d='M1 16h1' />
+    <path stroke='#9aa1f1' d='M2 16h1' />
+    <path stroke='#7f89ee' d='M3 16h1' />
+    <path stroke='#747eec' d='M4 16h1' />
+    <path stroke='#6b76eb' d='M5 16h1' />
+    <path stroke='#6772ea' d='M6 16h1m3 0h3' />
+    <path stroke='#6671ea' d='M7 16h1' />
+    <path stroke='#6570ea' d='M8 16h2' />
+    <path stroke='#6d77eb' d='M13 16h1' />
+    <path stroke='#838cee' d='M14 16h1' />
+    <path stroke='#e7e9fc' d='M15 16h1' />
+</svg>
\ No newline at end of file
diff --git a/src/assets/scrollbar/button-down-light.svg b/src/assets/scrollbar/button-down-light.svg
new file mode 100644
index 000000000..814414300
--- /dev/null
+++ b/src/assets/scrollbar/button-down-light.svg
@@ -0,0 +1,119 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -0.5 17 17' shape-rendering='crispEdges'>
+    <path stroke='#e5ebee'
+        d='M0 0h1m15 0h1M0 1h1M0 2h1M0 3h1M0 4h1M0 5h1M0 6h1M0 7h1M0 8h1M0 9h1m-1 1h1m-1 1h1m-1 1h1m-1 1h1m-1 1h1m-1 1h1m15 0h1M0 16h1m15 0h1' />
+    <path stroke='#fafcfd' d='M1 0h1' />
+    <path stroke='#ffffff'
+        d='M2 0h14M1 1h1m13 0h1M1 2h1m13 0h1M1 3h1m13 0h1M1 4h1m13 0h1M1 5h1m13 0h1M1 6h1m13 0h1M1 7h1m13 0h1M1 8h1m13 0h1M1 9h1m13 0h1M1 10h1m13 0h1M1 11h1m13 0h1M1 12h1m13 0h1M1 13h1m13 0h1M1 14h1m13 0h1M2 15h13' />
+    <path stroke='#e6f5fc' d='M2 1h1' />
+    <path stroke='#d0effc' d='M3 1h1M2 2h1' />
+    <path stroke='#caebf9' d='M4 1h1M2 3h1' />
+    <path stroke='#c4e8f7' d='M5 1h1' />
+    <path stroke='#c0e6f7' d='M6 1h1' />
+    <path stroke='#bde6f7' d='M7 1h1M2 6h1' />
+    <path stroke='#bbe4f5' d='M8 1h1' />
+    <path stroke='#b8e3f6' d='M9 1h1M2 7h1' />
+    <path stroke='#b7e2f5' d='M10 1h1M2 8h1' />
+    <path stroke='#b5e3f7' d='M11 1h1' />
+    <path stroke='#b3e1f5' d='M12 1h1' />
+    <path stroke='#afdff4' d='M13 1h1' />
+    <path stroke='#dcf0f9' d='M14 1h1' />
+    <path stroke='#dfe1e2' d='M16 1h1' />
+    <path stroke='#e1f5fe' d='M3 2h1' />
+    <path stroke='#daf3fe' d='M4 2h1M3 3h1' />
+    <path stroke='#d4f0fc' d='M5 2h1M3 4h1' />
+    <path stroke='#d1f0fd' d='M6 2h1M4 4h1' />
+    <path stroke='#d0effc' d='M7 2h1M3 5h1' />
+    <path stroke='#ceeffd' d='M8 2h1M6 3h1' />
+    <path stroke='#caeefd' d='M9 2h1M7 3h1M5 5h1' />
+    <path stroke='#c8ecfb' d='M10 2h1' />
+    <path stroke='#c5ebfc' d='M11 2h1m-8 8h3' />
+    <path stroke='#c2ebfc' d='M12 2h1m-2 1h1m-9 7h1m0 1h1' />
+    <path stroke='#bce7fa' d='M13 2h1m-1 2h1m-9 9h2' />
+    <path stroke='#b9e2f3' d='M14 2h1M5 14h3' />
+    <path stroke='#cfd9dd' d='M16 2h1' />
+    <path stroke='#d8f1fc' d='M4 3h1' />
+    <path stroke='#d1f0fd' d='M5 3h1' />
+    <path stroke='#c9edfc' d='M8 3h1M6 4h2M6 6h2M3 7h1' />
+    <path stroke='#c5ebfc' d='M9 3h1M3 9h3' />
+    <path stroke='#c5ebfc' d='M10 3h1' />
+    <path stroke='#bee9fc' d='M12 3h1M9 4h1m-7 7h1m0 1h1' />
+    <path stroke='#bce7fa' d='M13 3h1' />
+    <path stroke='#bae3f4' d='M14 3h1' />
+    <path stroke='#bdd1da' d='M16 3h1' />
+    <path stroke='#c4e8f7' d='M2 4h1' />
+    <path stroke='#cdeefc' d='M5 4h1M3 6h1' />
+    <path stroke='#c8ecfb' d='M8 4h1' />
+    <path stroke='#bbe9fd' d='M10 4h3M9 5h1M8 6h1' />
+    <path stroke='#bce2f3' d='M14 4h1m-1 1h1m-1 1h1' />
+    <path stroke='#b1cad5' d='M16 4h1' />
+    <path stroke='#bee7f8' d='M2 5h1' />
+    <path stroke='#ceeffd' d='M4 5h1' />
+    <path stroke='#c8ecfb' d='M6 5h3M3 8h2' />
+    <path stroke='#bae8fc' d='M10 5h1m1 0h2M3 12h1' />
+    <path stroke='#b9e7fb' d='M11 5h1M9 6h2m1 0h2m-1 1h1' />
+    <path stroke='#a8c7d4' d='M16 5h1' />
+    <path stroke='#cdeefc' d='M4 6h1' />
+    <path stroke='#4d7485' d='M5 6h1m5 0h1M4 7h3m3 0h3M5 8h3m1 0h3M6 9h5m-4 1h3m-2 1h1' />
+    <path stroke='#a4c5d3' d='M16 6h1' />
+    <path stroke='#c1eafb' d='M7 7h2M8 8h1' />
+    <path stroke='#b6e6fb' d='M9 7h1m2 1h1m-2 1h2' />
+    <path stroke='#bae3f4' d='M14 7h1' />
+    <path stroke='#a0c4d3' d='M16 7h1m-1 1h1m-1 5h1' />
+    <path stroke='#b6e6fb' d='M13 8h1m-5 5h1' />
+    <path stroke='#b9e2f3' d='M14 8h1' />
+    <path stroke='#b4e2f6' d='M2 9h1' />
+    <path stroke='#b5e5fa' d='M13 9h1' />
+    <path stroke='#b5e0f3' d='M14 9h1' />
+    <path stroke='#9fc3d2' d='M16 9h1m-1 1h1m-1 1h1m-1 1h1' />
+    <path stroke='#b1e1f6' d='M2 10h1' />
+    <path stroke='#b2e5fb' d='M10 10h3m-2 2h1' />
+    <path stroke='#b1e4fa' d='M13 10h1' />
+    <path stroke='#b3e1f5' d='M14 10h1m-6 4h2' />
+    <path stroke='#ade0f6' d='M2 11h1' />
+    <path stroke='#c3ecfd' d='M5 11h1' />
+    <path stroke='#c2ebfc' d='M6 11h2' />
+    <path stroke='#bae8fc' d='M9 11h1' />
+    <path stroke='#b7e7fc' d='M10 11h1m-2 1h1' />
+    <path stroke='#b3e6fc' d='M11 11h1' />
+    <path stroke='#afe4fb' d='M12 11h1' />
+    <path stroke='#aee3fa' d='M13 11h1' />
+    <path stroke='#b1dff3' d='M14 11h1' />
+    <path stroke='#acdff5' d='M2 12h1' />
+    <path stroke='#c1eafb' d='M5 12h1' />
+    <path stroke='#bee9fc' d='M6 12h2' />
+    <path stroke='#bde8fb' d='M8 12h1' />
+    <path stroke='#b6e6fb' d='M10 12h1' />
+    <path stroke='#afe4fb' d='M12 12h1' />
+    <path stroke='#ade2f9' d='M13 12h1m-2 1h1' />
+    <path stroke='#b1dff3' d='M14 12h1' />
+    <path stroke='#aaddf3' d='M2 13h1' />
+    <path stroke='#b7e5f9' d='M3 13h1' />
+    <path stroke='#b9e7fb' d='M4 13h1' />
+    <path stroke='#bbe6f9' d='M7 13h1' />
+    <path stroke='#b9e7fb' d='M8 13h1' />
+    <path stroke='#b2e5fb' d='M10 13h1' />
+    <path stroke='#b0e3f9' d='M11 13h1' />
+    <path stroke='#aee1f7' d='M13 13h1' />
+    <path stroke='#b0def2' d='M14 13h1' />
+    <path stroke='#dbeff8' d='M2 14h1' />
+    <path stroke='#b7e0f1' d='M3 14h1' />
+    <path stroke='#b8e1f2' d='M4 14h1m3 0h1' />
+    <path stroke='#b2e0f4' d='M11 14h1' />
+    <path stroke='#b1dff3' d='M12 14h1' />
+    <path stroke='#b0def2' d='M13 14h1' />
+    <path stroke='#d9edf6' d='M14 14h1' />
+    <path stroke='#aecad6' d='M16 14h1' />
+    <path stroke='#c3dce7' d='M1 15h1' />
+    <path stroke='#aed4e5' d='M15 15h1' />
+    <path stroke='#edf1f3' d='M1 16h1' />
+    <path stroke='#aad0e1' d='M2 16h1' />
+    <path stroke='#94c4d9' d='M3 16h1' />
+    <path stroke='#88c0d8' d='M4 16h1' />
+    <path stroke='#83bbd3' d='M5 16h1' />
+    <path stroke='#7dbad4' d='M6 16h1m3 0h3' />
+    <path stroke='#7eb9d2' d='M7 16h1' />
+    <path stroke='#7cb9d3' d='M8 16h2' />
+    <path stroke='#82bdd6' d='M13 16h1' />
+    <path stroke='#94c7dd' d='M14 16h1' />
+    <path stroke='#ecf4f7' d='M15 16h1' />
+</svg>
\ No newline at end of file
diff --git a/src/assets/scrollbar/button-left-dark.svg b/src/assets/scrollbar/button-left-dark.svg
new file mode 100644
index 000000000..e1862f634
--- /dev/null
+++ b/src/assets/scrollbar/button-left-dark.svg
@@ -0,0 +1,117 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -0.5 17 17' shape-rendering='crispEdges'>
+    <path stroke='#dadbf9' d='M0 0h17m-1 1h1m-1 14h1m-1 1h1' />
+    <path stroke='#f9f9fe' d='M0 1h1' />
+    <path stroke='#ffffff'
+        d='M1 1h15M0 2h1m14 0h1M0 3h1m14 0h1M0 4h1m14 0h1M0 5h1m14 0h1M0 6h1m14 0h1M0 7h1m14 0h1M0 8h1m14 0h1M0 9h1m14 0h1M0 10h1m14 0h1M0 11h1m14 0h1M0 12h1m14 0h1M0 13h1m14 0h1M0 14h1m14 0h1M1 15h14' />
+    <path stroke='#e7e8fb' d='M1 2h1' />
+    <path stroke='#d4d6f8' d='M2 2h1M1 3h1' />
+    <path stroke='#cccef7' d='M3 2h1M1 4h1' />
+    <path stroke='#c5c7f6' d='M4 2h1' />
+    <path stroke='#c2c4f5' d='M5 2h1' />
+    <path stroke='#bfc2f5' d='M6 2h1M1 7h1' />
+    <path stroke='#bcbef4' d='M7 2h2' />
+    <path stroke='#babdf4' d='M9 2h1M1 8h1' />
+    <path stroke='#b8bbf4' d='M10 2h1M1 9h1' />
+    <path stroke='#b8bbf4' d='M11 2h1' />
+    <path stroke='#b5b8f3' d='M12 2h1' />
+    <path stroke='#b0b4f3' d='M13 2h1' />
+    <path stroke='#dcddf9' d='M14 2h1' />
+    <path stroke='#caccf7' d='M16 2h1' />
+    <path stroke='#e4e5fb' d='M2 3h1' />
+    <path stroke='#dedffa' d='M3 3h1M2 4h1' />
+    <path stroke='#d7d9f9' d='M4 3h1M2 5h1' />
+    <path stroke='#d5d7f9' d='M5 3h1M3 5h1' />
+    <path stroke='#d4d6f8' d='M6 3h1M2 6h1' />
+    <path stroke='#d3d5f8' d='M7 3h1M5 4h1' />
+    <path stroke='#d1d3f8' d='M8 3h1M4 5h1M2 7h1' />
+    <path stroke='#cfd1f8' d='M9 3h1M6 4h1M4 6h1' />
+    <path stroke='#cccef7' d='M10 3h1' />
+    <path stroke='#caccf7' d='M11 3h1m-9 7h3' />
+    <path stroke='#c8caf6' d='M12 3h1m-2 1h1M2 10h1m0 1h1' />
+    <path stroke='#c1c3f5' d='M13 3h1m-1 2h1M4 13h2' />
+    <path stroke='#b8bbf4' d='M14 3h1M4 14h3' />
+    <path stroke='#b8bbf4' d='M16 3h1' />
+    <path stroke='#dbdcf9' d='M3 4h1' />
+    <path stroke='#d5d7f9' d='M4 4h1' />
+    <path stroke='#ced0f7' d='M7 4h1M5 5h2M4 7h1M2 8h1' />
+    <path stroke='#1c24b6' d='M8 4h1M7 5h3M6 6h3M5 7h3M4 8h3M5 9h3m-2 1h3m-2 1h3m-2 1h1' />
+    <path stroke='#caccf7' d='M9 4h1' />
+    <path stroke='#caccf7' d='M10 4h1' />
+    <path stroke='#c4c7f6' d='M12 4h1M2 11h1m0 1h1' />
+    <path stroke='#c1c3f5' d='M13 4h1' />
+    <path stroke='#babdf4' d='M14 4h1' />
+    <path stroke='#a6aaf1' d='M16 4h1' />
+    <path stroke='#c5c7f6' d='M1 5h1' />
+    <path stroke='#c2c5f6' d='M10 5h3M9 6h1' />
+    <path stroke='#bbbef4' d='M14 5h1m-1 1h1m-1 1h1' />
+    <path stroke='#979cef' d='M16 5h1' />
+    <path stroke='#c1c3f5' d='M1 6h1' />
+    <path stroke='#d3d5f8' d='M3 6h1' />
+    <path stroke='#cccef7' d='M5 6h1M2 9h3' />
+    <path stroke='#c1c3f5' d='M10 6h1m1 0h2M2 12h1' />
+    <path stroke='#bfc2f5' d='M11 6h1M8 7h3m1 0h2m-1 1h1' />
+    <path stroke='#8f93ed' d='M16 6h1' />
+    <path stroke='#d1d3f8' d='M3 7h1' />
+    <path stroke='#bec1f5' d='M11 7h1m0 1h1' />
+    <path stroke='#8a8fed' d='M16 7h1' />
+    <path stroke='#cfd1f8' d='M3 8h1' />
+    <path stroke='#c6c8f6' d='M7 8h2' />
+    <path stroke='#bcbff5' d='M9 8h3M9 9h4' />
+    <path stroke='#babdf4' d='M14 8h1' />
+    <path stroke='#878cec' d='M16 8h1m-1 1h1m-1 4h1' />
+    <path stroke='#c2c5f6' d='M8 9h1m-2 3h1' />
+    <path stroke='#bcbff5' d='M13 9h1m-5 4h1' />
+    <path stroke='#b8bbf4' d='M14 9h1' />
+    <path stroke='#b4b7f3' d='M1 10h1' />
+    <path stroke='#c1c3f5' d='M9 10h1' />
+    <path stroke='#b9bcf4' d='M10 10h3m-2 2h1' />
+    <path stroke='#b7baf4' d='M13 10h1' />
+    <path stroke='#b5b8f3' d='M14 10h1m-6 4h2' />
+    <path stroke='#858aec' d='M16 10h1m-1 1h1m-1 1h1' />
+    <path stroke='#b0b4f3' d='M1 11h1' />
+    <path stroke='#c9ccf7' d='M4 11h1' />
+    <path stroke='#c8caf6' d='M5 11h2' />
+    <path stroke='#bec1f5' d='M10 11h1m-2 1h1' />
+    <path stroke='#bbbef4' d='M11 11h1' />
+    <path stroke='#b6b9f4' d='M12 11h1' />
+    <path stroke='#b5b8f3' d='M13 11h1' />
+    <path stroke='#b1b4f3' d='M14 11h1' />
+    <path stroke='#afb2f2' d='M1 12h1' />
+    <path stroke='#c6c8f6' d='M4 12h1' />
+    <path stroke='#c4c7f6' d='M5 12h2' />
+    <path stroke='#bcbff5' d='M10 12h1' />
+    <path stroke='#b6b9f4' d='M12 12h1' />
+    <path stroke='#b3b6f3' d='M13 12h1m-2 1h1' />
+    <path stroke='#b1b4f3' d='M14 12h1' />
+    <path stroke='#abaff2' d='M1 13h1' />
+    <path stroke='#bcbef4' d='M2 13h1' />
+    <path stroke='#bfc2f5' d='M3 13h1' />
+    <path stroke='#bfc2f5' d='M6 13h1' />
+    <path stroke='#bfc2f5' d='M7 13h1' />
+    <path stroke='#bdc0f5' d='M8 13h1' />
+    <path stroke='#b9bcf4' d='M10 13h1' />
+    <path stroke='#b5b9f4' d='M11 13h1' />
+    <path stroke='#b2b5f3' d='M13 13h1' />
+    <path stroke='#afb3f3' d='M14 13h1' />
+    <path stroke='#dadbf9' d='M1 14h1' />
+    <path stroke='#b5b8f3' d='M2 14h1' />
+    <path stroke='#b6b9f4' d='M3 14h1m3 0h2' />
+    <path stroke='#b3b6f3' d='M11 14h1' />
+    <path stroke='#b1b4f3' d='M12 14h1' />
+    <path stroke='#afb3f3' d='M13 14h1' />
+    <path stroke='#d6d8f9' d='M14 14h1' />
+    <path stroke='#959aef' d='M16 14h1' />
+    <path stroke='#b6b9f4' d='M0 15h1' />
+    <path stroke='#a2a6f1' d='M15 15h1' />
+    <path stroke='#e5e6fb' d='M0 16h1' />
+    <path stroke='#9ca0ef' d='M1 16h1' />
+    <path stroke='#8287eb' d='M2 16h1' />
+    <path stroke='#767cea' d='M3 16h1' />
+    <path stroke='#6e74e8' d='M4 16h1' />
+    <path stroke='#6970e8' d='M5 16h1m4 0h3' />
+    <path stroke='#686fe8' d='M6 16h1' />
+    <path stroke='#686ee7' d='M7 16h3' />
+    <path stroke='#6f75e9' d='M13 16h1' />
+    <path stroke='#858aec' d='M14 16h1' />
+    <path stroke='#e8e9fb' d='M15 16h1' />
+</svg>
\ No newline at end of file
diff --git a/src/assets/scrollbar/button-left-light.svg b/src/assets/scrollbar/button-left-light.svg
new file mode 100644
index 000000000..041a6e2c3
--- /dev/null
+++ b/src/assets/scrollbar/button-left-light.svg
@@ -0,0 +1,117 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -0.5 17 17' shape-rendering='crispEdges'>
+    <path stroke='#e5ebee' d='M0 0h17m-1 1h1m-1 14h1m-1 1h1' />
+    <path stroke='#fafcfd' d='M0 1h1' />
+    <path stroke='#ffffff'
+        d='M1 1h15M0 2h1m14 0h1M0 3h1m14 0h1M0 4h1m14 0h1M0 5h1m14 0h1M0 6h1m14 0h1M0 7h1m14 0h1M0 8h1m14 0h1M0 9h1m14 0h1M0 10h1m14 0h1M0 11h1m14 0h1M0 12h1m14 0h1M0 13h1m14 0h1M0 14h1m14 0h1M1 15h14' />
+    <path stroke='#e6f5fc' d='M1 2h1' />
+    <path stroke='#d0edfc' d='M2 2h1M1 3h1' />
+    <path stroke='#cae9f9' d='M3 2h1M1 4h1' />
+    <path stroke='#c4e6f7' d='M4 2h1' />
+    <path stroke='#c0e5f7' d='M5 2h1' />
+    <path stroke='#bde4f7' d='M6 2h1M1 7h1' />
+    <path stroke='#bbe2f5' d='M7 2h2' />
+    <path stroke='#b8e1f6' d='M9 2h1M1 8h1' />
+    <path stroke='#b7e0f5' d='M10 2h1M1 9h1' />
+    <path stroke='#b5e1f7' d='M11 2h1' />
+    <path stroke='#b3dff5' d='M12 2h1' />
+    <path stroke='#afddf4' d='M13 2h1' />
+    <path stroke='#dceff9' d='M14 2h1' />
+    <path stroke='#dfe1e2' d='M16 2h1' />
+    <path stroke='#e1f4fe' d='M2 3h1' />
+    <path stroke='#daf2fe' d='M3 3h1M2 4h1' />
+    <path stroke='#d4effc' d='M4 3h1M2 5h1' />
+    <path stroke='#d1eefd' d='M5 3h1M3 5h1' />
+    <path stroke='#d0edfc' d='M6 3h1M2 6h1' />
+    <path stroke='#ceedfd' d='M7 3h1M5 4h1' />
+    <path stroke='#cdecfc' d='M8 3h1M4 5h1M2 7h1' />
+    <path stroke='#caecfd' d='M9 3h1M6 4h1M4 6h1' />
+    <path stroke='#c8eafb' d='M10 3h1' />
+    <path stroke='#c5eafc' d='M11 3h1m-9 7h3' />
+    <path stroke='#c2e9fc' d='M12 3h1m-2 1h1M2 10h1m0 1h1' />
+    <path stroke='#bce5fa' d='M13 3h1m-1 2h1M4 13h2' />
+    <path stroke='#b9e0f3' d='M14 3h1M4 14h3' />
+    <path stroke='#cfd8dd' d='M16 3h1' />
+    <path stroke='#d8f0fc' d='M3 4h1' />
+    <path stroke='#d1eefd' d='M4 4h1' />
+    <path stroke='#c9ebfc' d='M7 4h1M5 5h2M4 7h1M2 8h1' />
+    <path stroke='#4d7285' d='M8 4h1M7 5h3M6 6h3M5 7h3M4 8h3M5 9h3m-2 1h3m-2 1h3m-2 1h1' />
+    <path stroke='#c5eafc' d='M9 4h1' />
+    <path stroke='#c5eafc' d='M10 4h1' />
+    <path stroke='#bee7fc' d='M12 4h1M2 11h1m0 1h1' />
+    <path stroke='#bce5fa' d='M13 4h1' />
+    <path stroke='#bae1f4' d='M14 4h1' />
+    <path stroke='#bdd0da' d='M16 4h1' />
+    <path stroke='#c4e6f7' d='M1 5h1' />
+    <path stroke='#bbe7fd' d='M10 5h3M9 6h1' />
+    <path stroke='#bce1f3' d='M14 5h1m-1 1h1m-1 1h1' />
+    <path stroke='#b1c9d5' d='M16 5h1' />
+    <path stroke='#bee5f8' d='M1 6h1' />
+    <path stroke='#ceedfd' d='M3 6h1' />
+    <path stroke='#c8eafb' d='M5 6h1M2 9h3' />
+    <path stroke='#bae6fc' d='M10 6h1m1 0h2M2 12h1' />
+    <path stroke='#b9e5fb' d='M11 6h1M8 7h3m1 0h2m-1 1h1' />
+    <path stroke='#a8c5d4' d='M16 6h1' />
+    <path stroke='#cdecfc' d='M3 7h1' />
+    <path stroke='#b7e5fc' d='M11 7h1m0 1h1' />
+    <path stroke='#a4c3d3' d='M16 7h1' />
+    <path stroke='#caecfd' d='M3 8h1' />
+    <path stroke='#c1e8fb' d='M7 8h2' />
+    <path stroke='#b6e4fb' d='M9 8h3M9 9h4' />
+    <path stroke='#bae1f4' d='M14 8h1' />
+    <path stroke='#a0c2d3' d='M16 8h1m-1 1h1m-1 4h1' />
+    <path stroke='#bde6fb' d='M8 9h1m-2 3h1' />
+    <path stroke='#b6e4fb' d='M13 9h1m-5 4h1' />
+    <path stroke='#b9e0f3' d='M14 9h1' />
+    <path stroke='#b1dff6' d='M1 10h1' />
+    <path stroke='#bae6fc' d='M9 10h1' />
+    <path stroke='#b2e3fb' d='M10 10h3m-2 2h1' />
+    <path stroke='#b1e2fa' d='M13 10h1' />
+    <path stroke='#b3dff5' d='M14 10h1m-6 4h2' />
+    <path stroke='#9fc1d2' d='M16 10h1m-1 1h1m-1 1h1' />
+    <path stroke='#addef6' d='M1 11h1' />
+    <path stroke='#c3eafd' d='M4 11h1' />
+    <path stroke='#c2e9fc' d='M5 11h2' />
+    <path stroke='#b7e5fc' d='M10 11h1m-2 1h1' />
+    <path stroke='#b3e4fc' d='M11 11h1' />
+    <path stroke='#afe2fb' d='M12 11h1' />
+    <path stroke='#aee1fa' d='M13 11h1' />
+    <path stroke='#b1ddf3' d='M14 11h1' />
+    <path stroke='#acddf5' d='M1 12h1' />
+    <path stroke='#c1e8fb' d='M4 12h1' />
+    <path stroke='#bee7fc' d='M5 12h2' />
+    <path stroke='#b6e4fb' d='M10 12h1' />
+    <path stroke='#afe2fb' d='M12 12h1' />
+    <path stroke='#ade0f9' d='M13 12h1m-2 1h1' />
+    <path stroke='#b1ddf3' d='M14 12h1' />
+    <path stroke='#aadbf3' d='M1 13h1' />
+    <path stroke='#b7e3f9' d='M2 13h1' />
+    <path stroke='#b9e5fb' d='M3 13h1' />
+    <path stroke='#bbe4f9' d='M6 13h1' />
+    <path stroke='#b9e5fb' d='M7 13h1' />
+    <path stroke='#b8e4fa' d='M8 13h1' />
+    <path stroke='#b2e3fb' d='M10 13h1' />
+    <path stroke='#b0e1f9' d='M11 13h1' />
+    <path stroke='#aedff7' d='M13 13h1' />
+    <path stroke='#b0dcf2' d='M14 13h1' />
+    <path stroke='#dbeef8' d='M1 14h1' />
+    <path stroke='#b7def1' d='M2 14h1' />
+    <path stroke='#b8dff2' d='M3 14h1m3 0h2' />
+    <path stroke='#b2def4' d='M11 14h1' />
+    <path stroke='#b1ddf3' d='M12 14h1' />
+    <path stroke='#b0dcf2' d='M13 14h1' />
+    <path stroke='#d9ecf6' d='M14 14h1' />
+    <path stroke='#aec9d6' d='M16 14h1' />
+    <path stroke='#c3dbe7' d='M0 15h1' />
+    <path stroke='#aed3e5' d='M15 15h1' />
+    <path stroke='#edf1f3' d='M0 16h1' />
+    <path stroke='#aacfe1' d='M1 16h1' />
+    <path stroke='#94c2d9' d='M2 16h1' />
+    <path stroke='#88bdd8' d='M3 16h1' />
+    <path stroke='#83b8d3' d='M4 16h1' />
+    <path stroke='#7db7d4' d='M5 16h1m4 0h3' />
+    <path stroke='#7eb6d2' d='M6 16h1' />
+    <path stroke='#7cb6d3' d='M7 16h3' />
+    <path stroke='#82bad6' d='M13 16h1' />
+    <path stroke='#94c5dd' d='M14 16h1' />
+    <path stroke='#ecf3f7' d='M15 16h1' />
+</svg>
\ No newline at end of file
diff --git a/src/assets/scrollbar/button-right-dark.svg b/src/assets/scrollbar/button-right-dark.svg
new file mode 100644
index 000000000..49d3e54d9
--- /dev/null
+++ b/src/assets/scrollbar/button-right-dark.svg
@@ -0,0 +1,120 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -0.5 17 17' shape-rendering='crispEdges'>
+    <path stroke='#dadbf9' d='M0 0h17m-1 1h1m-1 14h1m-1 1h1' />
+    <path stroke='#f9f9fe' d='M0 1h1' />
+    <path stroke='#ffffff'
+        d='M1 1h15M0 2h1m14 0h1M0 3h1m14 0h1M0 4h1m14 0h1M0 5h1m14 0h1M0 6h1m14 0h1M0 7h1m14 0h1M0 8h1m14 0h1M0 9h1m14 0h1M0 10h1m14 0h1M0 11h1m14 0h1M0 12h1m14 0h1M0 13h1m14 0h1M0 14h1m14 0h1M1 15h14' />
+    <path stroke='#e7e7fb' d='M1 2h1' />
+    <path stroke='#d4d5f8' d='M2 2h1M1 3h1' />
+    <path stroke='#cccdf7' d='M3 2h1M1 4h1' />
+    <path stroke='#c5c7f6' d='M4 2h1' />
+    <path stroke='#c2c3f5' d='M5 2h1' />
+    <path stroke='#bfc1f5' d='M6 2h1M1 7h1' />
+    <path stroke='#bcbdf4' d='M7 2h2' />
+    <path stroke='#babcf4' d='M9 2h1M1 8h1' />
+    <path stroke='#b8baf4' d='M10 2h1' />
+    <path stroke='#b8baf4' d='M11 2h1' />
+    <path stroke='#b5b7f3' d='M12 2h1' />
+    <path stroke='#b0b2f3' d='M13 2h1' />
+    <path stroke='#dcddf9' d='M14 2h1' />
+    <path stroke='#caccf7' d='M16 2h1' />
+    <path stroke='#e4e5fb' d='M2 3h1' />
+    <path stroke='#dedffa' d='M3 3h1M2 4h1' />
+    <path stroke='#d7d8f9' d='M4 3h1M2 5h1' />
+    <path stroke='#d5d7f9' d='M5 3h1M3 5h1' />
+    <path stroke='#d4d5f8' d='M6 3h1M2 6h1' />
+    <path stroke='#d3d4f8' d='M7 3h1M5 4h1' />
+    <path stroke='#d1d2f8' d='M8 3h1M4 5h1M2 7h1' />
+    <path stroke='#cfd1f8' d='M9 3h1M6 4h1M4 6h1' />
+    <path stroke='#cccdf7' d='M10 3h1' />
+    <path stroke='#caccf7' d='M11 3h1m-9 7h3' />
+    <path stroke='#c8c9f6' d='M12 3h1m-2 1h1M2 10h1m0 1h1' />
+    <path stroke='#c1c2f5' d='M13 3h1m-1 2h1M4 13h2' />
+    <path stroke='#b8baf4' d='M14 3h1M4 14h3' />
+    <path stroke='#b8baf4' d='M16 3h1' />
+    <path stroke='#dbdcf9' d='M3 4h1' />
+    <path stroke='#d5d7f9' d='M4 4h1' />
+    <path stroke='#1c21b6' d='M7 4h1M6 5h3M7 6h3M8 7h3M9 8h3M8 9h3m-4 1h3m-4 1h3m-2 1h1' />
+    <path stroke='#cccdf7' d='M8 4h1M5 6h2' />
+    <path stroke='#caccf7' d='M9 4h1M2 9h5' />
+    <path stroke='#caccf7' d='M10 4h1' />
+    <path stroke='#c4c6f6' d='M12 4h1M9 5h1m-8 6h1m0 1h1' />
+    <path stroke='#c1c2f5' d='M13 4h1' />
+    <path stroke='#babcf4' d='M14 4h1' />
+    <path stroke='#a6a8f1' d='M16 4h1' />
+    <path stroke='#c5c7f6' d='M1 5h1' />
+    <path stroke='#cecff7' d='M5 5h1M4 7h3M2 8h1' />
+    <path stroke='#c2c4f6' d='M10 5h3M7 7h1' />
+    <path stroke='#bbbdf4' d='M14 5h1m-1 1h1m-1 1h1' />
+    <path stroke='#979aef' d='M16 5h1' />
+    <path stroke='#c1c2f5' d='M1 6h1' />
+    <path stroke='#d3d4f8' d='M3 6h1' />
+    <path stroke='#c1c2f5' d='M10 6h1m1 0h2M2 12h1' />
+    <path stroke='#bfc1f5' d='M11 6h1m0 1h2m-1 1h1' />
+    <path stroke='#8f92ed' d='M16 6h1' />
+    <path stroke='#d1d2f8' d='M3 7h1' />
+    <path stroke='#bec0f5' d='M11 7h1m0 1h1' />
+    <path stroke='#8a8ded' d='M16 7h1' />
+    <path stroke='#cfd1f8' d='M3 8h3' />
+    <path stroke='#c6c7f6' d='M6 8h3' />
+    <path stroke='#babcf4' d='M14 8h1' />
+    <path stroke='#878aec' d='M16 8h1m-1 5h1' />
+    <path stroke='#b6b8f4' d='M1 9h1' />
+    <path stroke='#c8c9f6' d='M7 9h1m-3 2h1' />
+    <path stroke='#bcbef5' d='M11 9h2' />
+    <path stroke='#bbbdf4' d='M13 9h1' />
+    <path stroke='#b5b7f3' d='M14 9h1' />
+    <path stroke='#8588ec' d='M16 9h1m-1 1h1m-1 1h1m-1 1h1' />
+    <path stroke='#b4b6f3' d='M1 10h1' />
+    <path stroke='#c9cbf7' d='M6 10h1' />
+    <path stroke='#b9bbf4' d='M10 10h3m-2 2h1' />
+    <path stroke='#b7b9f4' d='M13 10h1' />
+    <path stroke='#b5b7f3' d='M14 10h1m-6 4h2' />
+    <path stroke='#b0b2f3' d='M1 11h1' />
+    <path stroke='#c9cbf7' d='M4 11h1' />
+    <path stroke='#c1c2f5' d='M9 11h1' />
+    <path stroke='#bec0f5' d='M10 11h1m-2 1h1' />
+    <path stroke='#bbbdf4' d='M11 11h1' />
+    <path stroke='#b6b8f4' d='M12 11h1' />
+    <path stroke='#b5b7f3' d='M13 11h1' />
+    <path stroke='#b1b3f3' d='M14 11h1' />
+    <path stroke='#afb1f2' d='M1 12h1' />
+    <path stroke='#c6c7f6' d='M4 12h1' />
+    <path stroke='#c4c6f6' d='M5 12h2' />
+    <path stroke='#c2c4f6' d='M8 12h1' />
+    <path stroke='#bcbef5' d='M10 12h1' />
+    <path stroke='#b6b8f4' d='M12 12h1' />
+    <path stroke='#b3b5f3' d='M13 12h1m-2 1h1' />
+    <path stroke='#b1b3f3' d='M14 12h1' />
+    <path stroke='#abadf2' d='M1 13h1' />
+    <path stroke='#bcbdf4' d='M2 13h1' />
+    <path stroke='#bfc1f5' d='M3 13h1' />
+    <path stroke='#bfc1f5' d='M6 13h1' />
+    <path stroke='#bfc1f5' d='M7 13h1' />
+    <path stroke='#bdbff5' d='M8 13h1' />
+    <path stroke='#bcbef5' d='M9 13h1' />
+    <path stroke='#b9bbf4' d='M10 13h1' />
+    <path stroke='#b5b8f4' d='M11 13h1' />
+    <path stroke='#b2b4f3' d='M13 13h1' />
+    <path stroke='#afb2f3' d='M14 13h1' />
+    <path stroke='#dadbf9' d='M1 14h1' />
+    <path stroke='#b5b7f3' d='M2 14h1' />
+    <path stroke='#b6b8f4' d='M3 14h1m3 0h2' />
+    <path stroke='#b3b5f3' d='M11 14h1' />
+    <path stroke='#b1b3f3' d='M12 14h1' />
+    <path stroke='#afb2f3' d='M13 14h1' />
+    <path stroke='#d6d7f9' d='M14 14h1' />
+    <path stroke='#9598ef' d='M16 14h1' />
+    <path stroke='#b6b8f4' d='M0 15h1' />
+    <path stroke='#a2a5f1' d='M15 15h1' />
+    <path stroke='#e5e6fb' d='M0 16h1' />
+    <path stroke='#9c9eef' d='M1 16h1' />
+    <path stroke='#8285eb' d='M2 16h1' />
+    <path stroke='#767aea' d='M3 16h1' />
+    <path stroke='#6e72e8' d='M4 16h1' />
+    <path stroke='#696ee8' d='M5 16h1m4 0h3' />
+    <path stroke='#686de8' d='M6 16h1' />
+    <path stroke='#686ce7' d='M7 16h3' />
+    <path stroke='#6f73e9' d='M13 16h1' />
+    <path stroke='#8588ec' d='M14 16h1' />
+    <path stroke='#e8e8fb' d='M15 16h1' />
+</svg>
\ No newline at end of file
diff --git a/src/assets/scrollbar/button-right-light.svg b/src/assets/scrollbar/button-right-light.svg
new file mode 100644
index 000000000..2994017be
--- /dev/null
+++ b/src/assets/scrollbar/button-right-light.svg
@@ -0,0 +1,120 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -0.5 17 17' shape-rendering='crispEdges'>
+    <path stroke='#e5ebee' d='M0 0h17m-1 1h1m-1 14h1m-1 1h1' />
+    <path stroke='#fafcfd' d='M0 1h1' />
+    <path stroke='#ffffff'
+        d='M1 1h15M0 2h1m14 0h1M0 3h1m14 0h1M0 4h1m14 0h1M0 5h1m14 0h1M0 6h1m14 0h1M0 7h1m14 0h1M0 8h1m14 0h1M0 9h1m14 0h1M0 10h1m14 0h1M0 11h1m14 0h1M0 12h1m14 0h1M0 13h1m14 0h1M0 14h1m14 0h1M1 15h14' />
+    <path stroke='#e6f5fc' d='M1 2h1' />
+    <path stroke='#d0edfc' d='M2 2h1M1 3h1' />
+    <path stroke='#cae9f9' d='M3 2h1M1 4h1' />
+    <path stroke='#c4e6f7' d='M4 2h1' />
+    <path stroke='#c0e5f7' d='M5 2h1' />
+    <path stroke='#bde4f7' d='M6 2h1M1 7h1' />
+    <path stroke='#bbe2f5' d='M7 2h2' />
+    <path stroke='#b8e1f6' d='M9 2h1M1 8h1' />
+    <path stroke='#b7e0f5' d='M10 2h1' />
+    <path stroke='#b5e1f7' d='M11 2h1' />
+    <path stroke='#b3dff5' d='M12 2h1' />
+    <path stroke='#afddf4' d='M13 2h1' />
+    <path stroke='#dceff9' d='M14 2h1' />
+    <path stroke='#dfe1e2' d='M16 2h1' />
+    <path stroke='#e1f4fe' d='M2 3h1' />
+    <path stroke='#daf2fe' d='M3 3h1M2 4h1' />
+    <path stroke='#d4effc' d='M4 3h1M2 5h1' />
+    <path stroke='#d1eefd' d='M5 3h1M3 5h1' />
+    <path stroke='#d0edfc' d='M6 3h1M2 6h1' />
+    <path stroke='#ceedfd' d='M7 3h1M5 4h1' />
+    <path stroke='#cdecfc' d='M8 3h1M4 5h1M2 7h1' />
+    <path stroke='#caecfd' d='M9 3h1M6 4h1M4 6h1' />
+    <path stroke='#c8eafb' d='M10 3h1' />
+    <path stroke='#c5eafc' d='M11 3h1m-9 7h3' />
+    <path stroke='#c2e9fc' d='M12 3h1m-2 1h1M2 10h1m0 1h1' />
+    <path stroke='#bce5fa' d='M13 3h1m-1 2h1M4 13h2' />
+    <path stroke='#b9e0f3' d='M14 3h1M4 14h3' />
+    <path stroke='#cfd8dd' d='M16 3h1' />
+    <path stroke='#d8f0fc' d='M3 4h1' />
+    <path stroke='#d1eefd' d='M4 4h1' />
+    <path stroke='#4d7285' d='M7 4h1M6 5h3M7 6h3M8 7h3M9 8h3M8 9h3m-4 1h3m-4 1h3m-2 1h1' />
+    <path stroke='#c8eafb' d='M8 4h1M5 6h2' />
+    <path stroke='#c5eafc' d='M9 4h1M2 9h5' />
+    <path stroke='#c5eafc' d='M10 4h1' />
+    <path stroke='#bee7fc' d='M12 4h1M9 5h1m-8 6h1m0 1h1' />
+    <path stroke='#bce5fa' d='M13 4h1' />
+    <path stroke='#bae1f4' d='M14 4h1' />
+    <path stroke='#bdd0da' d='M16 4h1' />
+    <path stroke='#c4e6f7' d='M1 5h1' />
+    <path stroke='#c9ebfc' d='M5 5h1M4 7h3M2 8h1' />
+    <path stroke='#bbe7fd' d='M10 5h3M7 7h1' />
+    <path stroke='#bce1f3' d='M14 5h1m-1 1h1m-1 1h1' />
+    <path stroke='#b1c9d5' d='M16 5h1' />
+    <path stroke='#bee5f8' d='M1 6h1' />
+    <path stroke='#ceedfd' d='M3 6h1' />
+    <path stroke='#bae6fc' d='M10 6h1m1 0h2M2 12h1' />
+    <path stroke='#b9e5fb' d='M11 6h1m0 1h2m-1 1h1' />
+    <path stroke='#a8c5d4' d='M16 6h1' />
+    <path stroke='#cdecfc' d='M3 7h1' />
+    <path stroke='#b7e5fc' d='M11 7h1m0 1h1' />
+    <path stroke='#a4c3d3' d='M16 7h1' />
+    <path stroke='#caecfd' d='M3 8h3' />
+    <path stroke='#c1e8fb' d='M6 8h3' />
+    <path stroke='#bae1f4' d='M14 8h1' />
+    <path stroke='#a0c2d3' d='M16 8h1m-1 5h1' />
+    <path stroke='#b4e0f6' d='M1 9h1' />
+    <path stroke='#c2e9fc' d='M7 9h1m-3 2h1' />
+    <path stroke='#b6e4fb' d='M11 9h2' />
+    <path stroke='#b5e3fa' d='M13 9h1' />
+    <path stroke='#b5def3' d='M14 9h1' />
+    <path stroke='#9fc1d2' d='M16 9h1m-1 1h1m-1 1h1m-1 1h1' />
+    <path stroke='#b1dff6' d='M1 10h1' />
+    <path stroke='#c3eafd' d='M6 10h1' />
+    <path stroke='#b2e3fb' d='M10 10h3m-2 2h1' />
+    <path stroke='#b1e2fa' d='M13 10h1' />
+    <path stroke='#b3dff5' d='M14 10h1m-6 4h2' />
+    <path stroke='#addef6' d='M1 11h1' />
+    <path stroke='#c3eafd' d='M4 11h1' />
+    <path stroke='#bae6fc' d='M9 11h1' />
+    <path stroke='#b7e5fc' d='M10 11h1m-2 1h1' />
+    <path stroke='#b3e4fc' d='M11 11h1' />
+    <path stroke='#afe2fb' d='M12 11h1' />
+    <path stroke='#aee1fa' d='M13 11h1' />
+    <path stroke='#b1ddf3' d='M14 11h1' />
+    <path stroke='#acddf5' d='M1 12h1' />
+    <path stroke='#c1e8fb' d='M4 12h1' />
+    <path stroke='#bee7fc' d='M5 12h2' />
+    <path stroke='#bbe7fd' d='M8 12h1' />
+    <path stroke='#b6e4fb' d='M10 12h1' />
+    <path stroke='#afe2fb' d='M12 12h1' />
+    <path stroke='#ade0f9' d='M13 12h1m-2 1h1' />
+    <path stroke='#b1ddf3' d='M14 12h1' />
+    <path stroke='#aadbf3' d='M1 13h1' />
+    <path stroke='#b7e3f9' d='M2 13h1' />
+    <path stroke='#b9e5fb' d='M3 13h1' />
+    <path stroke='#bbe4f9' d='M6 13h1' />
+    <path stroke='#b9e5fb' d='M7 13h1' />
+    <path stroke='#b8e4fa' d='M8 13h1' />
+    <path stroke='#b6e4fb' d='M9 13h1' />
+    <path stroke='#b2e3fb' d='M10 13h1' />
+    <path stroke='#b0e1f9' d='M11 13h1' />
+    <path stroke='#aedff7' d='M13 13h1' />
+    <path stroke='#b0dcf2' d='M14 13h1' />
+    <path stroke='#dbeef8' d='M1 14h1' />
+    <path stroke='#b7def1' d='M2 14h1' />
+    <path stroke='#b8dff2' d='M3 14h1m3 0h2' />
+    <path stroke='#b2def4' d='M11 14h1' />
+    <path stroke='#b1ddf3' d='M12 14h1' />
+    <path stroke='#b0dcf2' d='M13 14h1' />
+    <path stroke='#d9ecf6' d='M14 14h1' />
+    <path stroke='#aec9d6' d='M16 14h1' />
+    <path stroke='#c3dbe7' d='M0 15h1' />
+    <path stroke='#aed3e5' d='M15 15h1' />
+    <path stroke='#edf1f3' d='M0 16h1' />
+    <path stroke='#aacfe1' d='M1 16h1' />
+    <path stroke='#94c2d9' d='M2 16h1' />
+    <path stroke='#88bdd8' d='M3 16h1' />
+    <path stroke='#83b8d3' d='M4 16h1' />
+    <path stroke='#7db7d4' d='M5 16h1m4 0h3' />
+    <path stroke='#7eb6d2' d='M6 16h1' />
+    <path stroke='#7cb6d3' d='M7 16h3' />
+    <path stroke='#82bad6' d='M13 16h1' />
+    <path stroke='#94c5dd' d='M14 16h1' />
+    <path stroke='#ecf3f7' d='M15 16h1' />
+</svg>
\ No newline at end of file
diff --git a/src/assets/scrollbar/button-up-dark.svg b/src/assets/scrollbar/button-up-dark.svg
new file mode 100644
index 000000000..8ee23e0f1
--- /dev/null
+++ b/src/assets/scrollbar/button-up-dark.svg
@@ -0,0 +1,123 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -0.5 17 17' shape-rendering='crispEdges'>
+    <path stroke="#dadbf9"
+        d='M0 0h1m15 0h1M0 1h1M0 2h1M0 3h1M0 4h1M0 5h1M0 6h1M0 7h1M0 8h1M0 9h1m-1 1h1m-1 1h1m-1 1h1m-1 1h1m-1 1h1m-1 1h1m15 0h1M0 16h1m15 0h1' />
+    <path stroke="#f9f9fe" d='M1 0h1' />
+    <path stroke="#ffffff"
+        d='M2 0h14M1 1h1m13 0h1M1 2h1m13 0h1M1 3h1m13 0h1M1 4h1m13 0h1M1 5h1m13 0h1M1 6h1m13 0h1M1 7h1m13 0h1M1 8h1m13 0h1M1 9h1m13 0h1M1 10h1m13 0h1M1 11h1m13 0h1M1 12h1m13 0h1M1 13h1m13 0h1M1 14h1m13 0h1M2 15h13' />
+    <path stroke="#e7e7fb" d='M2 1h1' />
+    <path stroke="#d4d5f8" d='M3 1h1M2 2h1' />
+    <path stroke="#cccdf7" d='M4 1h1M2 3h1' />
+    <path stroke="#c5c7f6" d='M5 1h1' />
+    <path stroke="#c2c3f5" d='M6 1h1' />
+    <path stroke="#bfc1f5" d='M7 1h1M2 6h1' />
+    <path stroke="#bcbdf4" d='M8 1h1' />
+    <path stroke="#babcf4" d='M9 1h1M2 7h1' />
+    <path stroke="#b8baf4" d='M10 1h1M2 8h1' />
+    <path stroke="#b8baf4" d='M11 1h1' />
+    <path stroke="#b5b7f3" d='M12 1h1' />
+    <path stroke="#b0b2f3" d='M13 1h1' />
+    <path stroke="#dcddf9" d='M14 1h1' />
+    <path stroke="#caccf7" d='M16 1h1' />
+    <path stroke="#e4e5fb" d='M3 2h1' />
+    <path stroke="#dedffa" d='M4 2h1M3 3h1' />
+    <path stroke="#d7d8f9" d='M5 2h1M3 4h1' />
+    <path stroke="#d5d7f9" d='M6 2h1M4 4h1' />
+    <path stroke="#d4d5f8" d='M7 2h1M3 5h1' />
+    <path stroke="#d3d4f8" d='M8 2h1M6 3h1' />
+    <path stroke="#cfd1f8" d='M9 2h1M7 3h1M5 5h1' />
+    <path stroke="#cccdf7" d='M10 2h1' />
+    <path stroke="#caccf7" d='M11 2h1m-8 8h1m1 0h1' />
+    <path stroke="#c8c9f6" d='M12 2h1m-2 1h1m-9 7h1m0 1h1' />
+    <path stroke="#c1c2f5" d='M13 2h1m-1 2h1m-9 9h2' />
+    <path stroke="#b8baf4" d='M14 2h1M5 14h3' />
+    <path stroke="#b8baf4" d='M16 2h1' />
+    <path stroke="#dbdcf9" d='M4 3h1' />
+    <path stroke="#d5d7f9" d='M5 3h1' />
+    <path stroke="#cecff7" d='M8 3h1M6 4h2M5 6h2M3 7h1' />
+    <path stroke="#caccf7" d='M9 3h1M3 9h1m3 0h1' />
+    <path stroke="#caccf7" d='M10 3h1' />
+    <path stroke="#c4c6f6" d='M12 3h1M9 4h1m-7 7h1m0 1h1' />
+    <path stroke="#c1c2f5" d='M13 3h1' />
+    <path stroke="#babcf4" d='M14 3h1' />
+    <path stroke="#a6a8f1" d='M16 3h1' />
+    <path stroke="#c5c7f6" d='M2 4h1' />
+    <path stroke="#d1d2f8" d='M5 4h1M3 6h1' />
+    <path stroke="#cccdf7" d='M8 4h1' />
+    <path stroke="#c2c4f6" d='M10 4h3M9 5h1' />
+    <path stroke="#bbbdf4" d='M14 4h1m-1 1h1m-1 1h1' />
+    <path stroke="#979aef" d='M16 4h1' />
+    <path stroke="#c1c2f5" d='M2 5h1' />
+    <path stroke="#d3d4f8" d='M4 5h1' />
+    <path stroke="#cccdf7" d='M6 5h2M3 8h2' />
+    <path stroke="#1c21b6" d='M8 5h1M7 6h3M6 7h5M5 8h3m1 0h3M4 9h3m3 0h3m-8 1h1m5 0h1' />
+    <path stroke="#c1c2f5" d='M10 5h1m1 0h2M3 12h1' />
+    <path stroke="#bfc1f5" d='M11 5h1m-2 1h1m1 0h2m-1 1h1' />
+    <path stroke="#8f92ed" d='M16 5h1' />
+    <path stroke="#d1d2f8" d='M4 6h1' />
+    <path stroke="#bec0f5" d='M11 6h1m0 1h1' />
+    <path stroke="#8a8ded" d='M16 6h1' />
+    <path stroke="#cfd1f8" d='M4 7h2' />
+    <path stroke="#bcbef5" d='M11 7h1m0 1h1' />
+    <path stroke="#babcf4" d='M14 7h1' />
+    <path stroke="#878aec" d='M16 7h1m-1 1h1m-1 5h1' />
+    <path stroke="#c6c7f6" d='M8 8h1' />
+    <path stroke="#bcbef5" d='M13 8h1m-5 5h1' />
+    <path stroke="#b8baf4" d='M14 8h1' />
+    <path stroke="#b6b8f4" d='M2 9h1' />
+    <path stroke="#c8c9f6" d='M8 9h1m-1 1h1m-3 1h2' />
+    <path stroke="#c2c4f6" d='M9 9h1m-2 3h1' />
+    <path stroke="#bbbdf4" d='M13 9h1' />
+    <path stroke="#b5b7f3" d='M14 9h1' />
+    <path stroke="#8588ec" d='M16 9h1m-1 1h1m-1 1h1m-1 1h1' />
+    <path stroke="#b4b6f3" d='M2 10h1' />
+    <path stroke="#c9cbf7" d='M7 10h1' />
+    <path stroke="#c1c2f5" d='M9 10h1m-1 1h1' />
+    <path stroke="#b9bbf4" d='M10 10h1m1 0h1m-2 2h1' />
+    <path stroke="#b7b9f4" d='M13 10h1' />
+    <path stroke="#b5b7f3" d='M14 10h1m-6 4h2' />
+    <path stroke="#b0b2f3" d='M2 11h1' />
+    <path stroke="#c9cbf7" d='M5 11h1' />
+    <path stroke="#c6c7f6" d='M8 11h1' />
+    <path stroke="#bec0f5" d='M10 11h1m-2 1h1' />
+    <path stroke="#bbbdf4" d='M11 11h1' />
+    <path stroke="#b6b8f4" d='M12 11h1' />
+    <path stroke="#b5b7f3" d='M13 11h1' />
+    <path stroke="#b1b3f3" d='M14 11h1' />
+    <path stroke="#afb1f2" d='M2 12h1' />
+    <path stroke="#c6c7f6" d='M5 12h1' />
+    <path stroke="#c4c6f6" d='M6 12h2' />
+    <path stroke="#bcbef5" d='M10 12h1' />
+    <path stroke="#b6b8f4" d='M12 12h1' />
+    <path stroke="#b3b5f3" d='M13 12h1m-2 1h1' />
+    <path stroke="#b1b3f3" d='M14 12h1' />
+    <path stroke="#abadf2" d='M2 13h1' />
+    <path stroke="#bcbdf4" d='M3 13h1' />
+    <path stroke="#bfc1f5" d='M4 13h1' />
+    <path stroke="#bfc1f5" d='M7 13h1' />
+    <path stroke="#bfc1f5" d='M8 13h1' />
+    <path stroke="#b9bbf4" d='M10 13h1' />
+    <path stroke="#b5b8f4" d='M11 13h1' />
+    <path stroke="#b2b4f3" d='M13 13h1' />
+    <path stroke="#afb2f3" d='M14 13h1' />
+    <path stroke="#dadbf9" d='M2 14h1' />
+    <path stroke="#b5b7f3" d='M3 14h1' />
+    <path stroke="#b6b8f4" d='M4 14h1m3 0h1' />
+    <path stroke="#b3b5f3" d='M11 14h1' />
+    <path stroke="#b1b3f3" d='M12 14h1' />
+    <path stroke="#afb2f3" d='M13 14h1' />
+    <path stroke="#d6d7f9" d='M14 14h1' />
+    <path stroke="#9598ef" d='M16 14h1' />
+    <path stroke="#b6b8f4" d='M1 15h1' />
+    <path stroke="#a2a5f1" d='M15 15h1' />
+    <path stroke="#e5e6fb" d='M1 16h1' />
+    <path stroke="#9c9eef" d='M2 16h1' />
+    <path stroke="#8285eb" d='M3 16h1' />
+    <path stroke="#767aea" d='M4 16h1' />
+    <path stroke="#6e72e8" d='M5 16h1' />
+    <path stroke="#696ee8" d='M6 16h1m3 0h3' />
+    <path stroke="#686de8" d='M7 16h1' />
+    <path stroke="#686ce7" d='M8 16h2' />
+    <path stroke="#6f73e9" d='M13 16h1' />
+    <path stroke="#8588ec" d='M14 16h1' />
+    <path stroke="#e8e8fb" d='M15 16h1' />
+</svg>
\ No newline at end of file

From 59b875e4e07e2c5dec9746466b85d377c9230342 Mon Sep 17 00:00:00 2001
From: Almog Lemberg <almoglemberg@gmail.com>
Date: Sun, 17 Apr 2022 11:20:04 +0300
Subject: [PATCH 8/9] Disabled state and css added

---
 src/WinXP/Windows/index.js                    |   5 +-
 src/WinXP/apps/InternetExplorer/index.js      |   2 +
 src/WinXP/apps/Notepad/index.js               |   5 +
 src/assets/scrollbar/button-down-disabled.svg | 119 +++++++++++++++++
 src/assets/scrollbar/button-left-disabled.svg | 117 +++++++++++++++++
 .../scrollbar/button-right-disabled.svg       | 120 +++++++++++++++++
 src/assets/scrollbar/button-up-disabled.svg   | 123 ++++++++++++++++++
 src/scrollbar.js                              |  76 ++++++++++-
 8 files changed, 565 insertions(+), 2 deletions(-)
 create mode 100644 src/assets/scrollbar/button-down-disabled.svg
 create mode 100644 src/assets/scrollbar/button-left-disabled.svg
 create mode 100644 src/assets/scrollbar/button-right-disabled.svg
 create mode 100644 src/assets/scrollbar/button-up-disabled.svg

diff --git a/src/WinXP/Windows/index.js b/src/WinXP/Windows/index.js
index facc1eafa..ff459c741 100644
--- a/src/WinXP/Windows/index.js
+++ b/src/WinXP/Windows/index.js
@@ -66,6 +66,8 @@ const Window = memo(function({
   }
   const dragRef = useRef(null);
   const ref = useRef(null);
+  const innerWindowRef = useRef(null);
+
   const { width: windowWidth, height: windowHeight } = useWindowSize();
   const { offset, size } = useElementResize(ref, {
     dragRef,
@@ -92,6 +94,7 @@ const Window = memo(function({
     x = offset.x;
     y = offset.y;
   }
+
   return (
     <div
       className={className}
@@ -125,7 +128,7 @@ const Window = memo(function({
           isFocus={isFocus}
         />
       </header>
-      <div className="app__content">
+      <div className="app__content" ref={innerWindowRef}>
         {component({
           onClose: _onMouseUpClose,
           onMinimize: _onMouseUpMinimize,
diff --git a/src/WinXP/apps/InternetExplorer/index.js b/src/WinXP/apps/InternetExplorer/index.js
index 995503bb5..fb9ff50e2 100644
--- a/src/WinXP/apps/InternetExplorer/index.js
+++ b/src/WinXP/apps/InternetExplorer/index.js
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import styled from 'styled-components';
 
 import { WindowDropDowns, Google } from 'components';
+
 import dropDownData from './dropDownData';
 import ie from 'assets/windowsIcons/ie-paper.png';
 import printer from 'assets/windowsIcons/17(32x32).png';
@@ -27,6 +28,7 @@ function InternetExplorer({ onClose }) {
     route: 'main',
     query: '',
   });
+
   function onSearch(str) {
     if (str.length) {
       setState({
diff --git a/src/WinXP/apps/Notepad/index.js b/src/WinXP/apps/Notepad/index.js
index b374cd222..76717f40e 100644
--- a/src/WinXP/apps/Notepad/index.js
+++ b/src/WinXP/apps/Notepad/index.js
@@ -6,6 +6,7 @@ import styled from 'styled-components';
 import { WindowDropDowns } from 'components';
 import { getDropDownData } from './dropDownData';
 import { getNotepadIframeStyle } from './utils';
+import { applyScrollbarClass } from 'scrollbar';
 
 import { Context as AppContext } from '../../index';
 import { ADD_APP } from '../../constants/actions';
@@ -243,6 +244,10 @@ export default function Notepad({ onClose, isFocus }) {
     });
   }
 
+  applyScrollbarClass(
+    frameRef.current?.contentDocument.querySelector('.frame-content'),
+  );
+
   return (
     <Div>
       <section className="np__toolbar">
diff --git a/src/assets/scrollbar/button-down-disabled.svg b/src/assets/scrollbar/button-down-disabled.svg
new file mode 100644
index 000000000..1a6171762
--- /dev/null
+++ b/src/assets/scrollbar/button-down-disabled.svg
@@ -0,0 +1,119 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -0.5 17 17' shape-rendering='crispEdges'>
+    <path stroke='#ebe9e8'
+        d='M0 0h1m15 0h1M0 1h1M0 2h1M0 3h1M0 4h1M0 5h1M0 6h1M0 7h1M0 8h1M0 9h1m-1 1h1m-1 1h1m-1 1h1m-1 1h1m-1 1h1m-1 1h1m15 0h1M0 16h1m15 0h1' />
+    <path stroke='#fcfbfb' d='M1 0h1' />
+    <path stroke='#ffffff'
+        d='M2 0h14M1 1h1m13 0h1M1 2h1m13 0h1M1 3h1m13 0h1M1 4h1m13 0h1M1 5h1m13 0h1M1 6h1m13 0h1M1 7h1m13 0h1M1 8h1m13 0h1M1 9h1m13 0h1M1 10h1m13 0h1M1 11h1m13 0h1M1 12h1m13 0h1M1 13h1m13 0h1M1 14h1m13 0h1M2 15h13' />
+    <path stroke='#f2f1f0' d='M2 1h1' />
+    <path stroke='#e7e5e4' d='M3 1h1M2 2h1' />
+    <path stroke='#e3e1e0' d='M4 1h1M2 3h1' />
+    <path stroke='#e0dcdb' d='M5 1h1' />
+    <path stroke='#dedad9' d='M6 1h1' />
+    <path stroke='#dcd9d8' d='M7 1h1M2 6h1' />
+    <path stroke='#dad7d6' d='M8 1h1' />
+    <path stroke='#d9d6d5' d='M9 1h1M2 7h1' />
+    <path stroke='#d8d5d4' d='M10 1h1M2 8h1' />
+    <path stroke='#d8d5d4' d='M11 1h1' />
+    <path stroke='#d7d3d1' d='M12 1h1' />
+    <path stroke='#d4d0cf' d='M13 1h1' />
+    <path stroke='#eceae9' d='M14 1h1' />
+    <path stroke='#e2e0df' d='M16 1h1' />
+    <path stroke='#f0efef' d='M3 2h1' />
+    <path stroke='#edebeb' d='M4 2h1M3 3h1' />
+    <path stroke='#e9e7e7' d='M5 2h1M3 4h1' />
+    <path stroke='#e8e6e6' d='M6 2h1M4 4h1' />
+    <path stroke='#e7e5e4' d='M7 2h1M3 5h1' />
+    <path stroke='#e7e5e4' d='M8 2h1M6 3h1' />
+    <path stroke='#e5e3e2' d='M9 2h1M7 3h1M5 5h1' />
+    <path stroke='#e3e1e0' d='M10 2h1' />
+    <path stroke='#e2e0df' d='M11 2h1m-8 8h3' />
+    <path stroke='#e1dedd' d='M12 2h1m-2 1h1m-9 7h1m0 1h1' />
+    <path stroke='#dddad9' d='M13 2h1m-1 2h1m-9 9h2' />
+    <path stroke='#d8d5d4' d='M14 2h1M5 14h3' />
+    <path stroke='#d8d5d4' d='M16 2h1' />
+    <path stroke='#ebe9e9' d='M4 3h1' />
+    <path stroke='#e8e6e6' d='M5 3h1' />
+    <path stroke='#e4e2e1' d='M8 3h1M6 4h2M6 6h2M3 7h1' />
+    <path stroke='#e2e0df' d='M9 3h1M3 9h3' />
+    <path stroke='#e2e0df' d='M10 3h1' />
+    <path stroke='#dfdcdb' d='M12 3h1M9 4h1m-7 7h1m0 1h1' />
+    <path stroke='#dddad9' d='M13 3h1' />
+    <path stroke='#d9d6d5' d='M14 3h1' />
+    <path stroke='#cfcac8' d='M16 3h1' />
+    <path stroke='#e0dcdb' d='M2 4h1' />
+    <path stroke='#e6e4e3' d='M5 4h1M3 6h1' />
+    <path stroke='#e3e1e0' d='M8 4h1' />
+    <path stroke='#dedbda' d='M10 4h3M9 5h1M8 6h1' />
+    <path stroke='#dad6d5' d='M14 4h1m-1 1h1m-1 1h1' />
+    <path stroke='#c7c1bf' d='M16 4h1' />
+    <path stroke='#dddad9' d='M2 5h1' />
+    <path stroke='#e7e5e4' d='M4 5h1' />
+    <path stroke='#e3e1e0' d='M6 5h3M3 8h2' />
+    <path stroke='#dddad9' d='M10 5h1m1 0h2M3 12h1' />
+    <path stroke='#dcd9d8' d='M11 5h1M9 6h2m1 0h2m-1 1h1' />
+    <path stroke='#c2bcba' d='M16 5h1' />
+    <path stroke='#e6e4e3' d='M4 6h1' />
+    <path stroke='#6f6663' d='M5 6h1m5 0h1M4 7h3m3 0h3M5 8h3m1 0h3M6 9h5m-4 1h3m-2 1h1' />
+    <path stroke='#c0b9b7' d='M16 6h1' />
+    <path stroke='#e0dddc' d='M7 7h2M8 8h1' />
+    <path stroke='#dbd7d6' d='M9 7h1m2 1h1m-2 1h2' />
+    <path stroke='#d9d6d5' d='M14 7h1' />
+    <path stroke='#beb7b5' d='M16 7h1m-1 1h1m-1 5h1' />
+    <path stroke='#dbd7d6' d='M13 8h1m-5 5h1' />
+    <path stroke='#d8d5d4' d='M14 8h1' />
+    <path stroke='#d7d4d2' d='M2 9h1' />
+    <path stroke='#dad6d5' d='M13 9h1' />
+    <path stroke='#d7d3d1' d='M14 9h1' />
+    <path stroke='#bdb6b4' d='M16 9h1m-1 1h1m-1 1h1m-1 1h1' />
+    <path stroke='#d6d2d1' d='M2 10h1' />
+    <path stroke='#d9d5d4' d='M10 10h3m-2 2h1' />
+    <path stroke='#d8d4d3' d='M13 10h1' />
+    <path stroke='#d7d3d1' d='M14 10h1m-6 4h2' />
+    <path stroke='#d4d0cf' d='M2 11h1' />
+    <path stroke='#e2dfde' d='M5 11h1' />
+    <path stroke='#e1dedd' d='M6 11h2' />
+    <path stroke='#dddad9' d='M9 11h1' />
+    <path stroke='#dcd8d7' d='M10 11h1m-2 1h1' />
+    <path stroke='#dad6d5' d='M11 11h1' />
+    <path stroke='#d7d4d2' d='M12 11h1' />
+    <path stroke='#d7d3d1' d='M13 11h1' />
+    <path stroke='#d5d1cf' d='M14 11h1' />
+    <path stroke='#d3cfce' d='M2 12h1' />
+    <path stroke='#e0dddc' d='M5 12h1' />
+    <path stroke='#dfdcdb' d='M6 12h2' />
+    <path stroke='#dedbda' d='M8 12h1' />
+    <path stroke='#dbd7d6' d='M10 12h1' />
+    <path stroke='#d7d4d2' d='M12 12h1' />
+    <path stroke='#d6d2d0' d='M13 12h1m-2 1h1' />
+    <path stroke='#d5d1cf' d='M14 12h1' />
+    <path stroke='#d1cdcc' d='M2 13h1' />
+    <path stroke='#dad7d6' d='M3 13h1' />
+    <path stroke='#dcd9d8' d='M4 13h1' />
+    <path stroke='#dcd9d8' d='M7 13h1' />
+    <path stroke='#dcd9d8' d='M8 13h1' />
+    <path stroke='#d9d5d4' d='M10 13h1' />
+    <path stroke='#d7d3d2' d='M11 13h1' />
+    <path stroke='#d5d1d0' d='M13 13h1' />
+    <path stroke='#d4d0ce' d='M14 13h1' />
+    <path stroke='#ebe9e8' d='M2 14h1' />
+    <path stroke='#d7d3d1' d='M3 14h1' />
+    <path stroke='#d7d4d2' d='M4 14h1m3 0h1' />
+    <path stroke='#d6d2d0' d='M11 14h1' />
+    <path stroke='#d5d1cf' d='M12 14h1' />
+    <path stroke='#d4d0ce' d='M13 14h1' />
+    <path stroke='#e9e7e6' d='M14 14h1' />
+    <path stroke='#c6c0be' d='M16 14h1' />
+    <path stroke='#d7d4d2' d='M1 15h1' />
+    <path stroke='#cdc8c6' d='M15 15h1' />
+    <path stroke='#f1f0ef' d='M1 16h1' />
+    <path stroke='#c9c4c2' d='M2 16h1' />
+    <path stroke='#bbb4b2' d='M3 16h1' />
+    <path stroke='#b5aeab' d='M4 16h1' />
+    <path stroke='#b0a8a6' d='M5 16h1' />
+    <path stroke='#aea6a3' d='M6 16h1m3 0h3' />
+    <path stroke='#ada5a3' d='M7 16h1' />
+    <path stroke='#ada5a2' d='M8 16h2' />
+    <path stroke='#b1aaa7' d='M13 16h1' />
+    <path stroke='#bdb6b4' d='M14 16h1' />
+    <path stroke='#f2f1f1' d='M15 16h1' />
+</svg>
\ No newline at end of file
diff --git a/src/assets/scrollbar/button-left-disabled.svg b/src/assets/scrollbar/button-left-disabled.svg
new file mode 100644
index 000000000..5508a4306
--- /dev/null
+++ b/src/assets/scrollbar/button-left-disabled.svg
@@ -0,0 +1,117 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -0.5 17 17' shape-rendering='crispEdges'>
+    <path stroke='#ebe9e8' d='M0 0h17m-1 1h1m-1 14h1m-1 1h1' />
+    <path stroke='#fcfbfb' d='M0 1h1' />
+    <path stroke='#ffffff'
+        d='M1 1h15M0 2h1m14 0h1M0 3h1m14 0h1M0 4h1m14 0h1M0 5h1m14 0h1M0 6h1m14 0h1M0 7h1m14 0h1M0 8h1m14 0h1M0 9h1m14 0h1M0 10h1m14 0h1M0 11h1m14 0h1M0 12h1m14 0h1M0 13h1m14 0h1M0 14h1m14 0h1M1 15h14' />
+    <path stroke='#f2f1f0' d='M1 2h1' />
+    <path stroke='#e7e5e4' d='M2 2h1M1 3h1' />
+    <path stroke='#e3e1e0' d='M3 2h1M1 4h1' />
+    <path stroke='#e0dcdb' d='M4 2h1' />
+    <path stroke='#dedad9' d='M5 2h1' />
+    <path stroke='#dcd9d8' d='M6 2h1M1 7h1' />
+    <path stroke='#dad7d6' d='M7 2h2' />
+    <path stroke='#d9d6d5' d='M9 2h1M1 8h1' />
+    <path stroke='#d8d5d4' d='M10 2h1M1 9h1' />
+    <path stroke='#d8d5d4' d='M11 2h1' />
+    <path stroke='#d7d3d1' d='M12 2h1' />
+    <path stroke='#d4d0cf' d='M13 2h1' />
+    <path stroke='#eceae9' d='M14 2h1' />
+    <path stroke='#e2e0df' d='M16 2h1' />
+    <path stroke='#f0efef' d='M2 3h1' />
+    <path stroke='#edebeb' d='M3 3h1M2 4h1' />
+    <path stroke='#e9e7e7' d='M4 3h1M2 5h1' />
+    <path stroke='#e8e6e6' d='M5 3h1M3 5h1' />
+    <path stroke='#e7e5e4' d='M6 3h1M2 6h1' />
+    <path stroke='#e7e5e4' d='M7 3h1M5 4h1' />
+    <path stroke='#e6e4e3' d='M8 3h1M4 5h1M2 7h1' />
+    <path stroke='#e5e3e2' d='M9 3h1M6 4h1M4 6h1' />
+    <path stroke='#e3e1e0' d='M10 3h1' />
+    <path stroke='#e2e0df' d='M11 3h1m-9 7h3' />
+    <path stroke='#e1dedd' d='M12 3h1m-2 1h1M2 10h1m0 1h1' />
+    <path stroke='#dddad9' d='M13 3h1m-1 2h1M4 13h2' />
+    <path stroke='#d8d5d4' d='M14 3h1M4 14h3' />
+    <path stroke='#d8d5d4' d='M16 3h1' />
+    <path stroke='#ebe9e9' d='M3 4h1' />
+    <path stroke='#e8e6e6' d='M4 4h1' />
+    <path stroke='#e4e2e1' d='M7 4h1M5 5h2M4 7h1M2 8h1' />
+    <path stroke='#6f6663' d='M8 4h1M7 5h3M6 6h3M5 7h3M4 8h3M5 9h3m-2 1h3m-2 1h3m-2 1h1' />
+    <path stroke='#e2e0df' d='M9 4h1' />
+    <path stroke='#e2e0df' d='M10 4h1' />
+    <path stroke='#dfdcdb' d='M12 4h1M2 11h1m0 1h1' />
+    <path stroke='#dddad9' d='M13 4h1' />
+    <path stroke='#d9d6d5' d='M14 4h1' />
+    <path stroke='#cfcac8' d='M16 4h1' />
+    <path stroke='#e0dcdb' d='M1 5h1' />
+    <path stroke='#dedbda' d='M10 5h3M9 6h1' />
+    <path stroke='#dad6d5' d='M14 5h1m-1 1h1m-1 1h1' />
+    <path stroke='#c7c1bf' d='M16 5h1' />
+    <path stroke='#dddad9' d='M1 6h1' />
+    <path stroke='#e7e5e4' d='M3 6h1' />
+    <path stroke='#e3e1e0' d='M5 6h1M2 9h3' />
+    <path stroke='#dddad9' d='M10 6h1m1 0h2M2 12h1' />
+    <path stroke='#dcd9d8' d='M11 6h1M8 7h3m1 0h2m-1 1h1' />
+    <path stroke='#c2bcba' d='M16 6h1' />
+    <path stroke='#e6e4e3' d='M3 7h1' />
+    <path stroke='#dcd8d7' d='M11 7h1m0 1h1' />
+    <path stroke='#c0b9b7' d='M16 7h1' />
+    <path stroke='#e5e3e2' d='M3 8h1' />
+    <path stroke='#e0dddc' d='M7 8h2' />
+    <path stroke='#dbd7d6' d='M9 8h3M9 9h4' />
+    <path stroke='#d9d6d5' d='M14 8h1' />
+    <path stroke='#beb7b5' d='M16 8h1m-1 1h1m-1 4h1' />
+    <path stroke='#dedbda' d='M8 9h1m-2 3h1' />
+    <path stroke='#dbd7d6' d='M13 9h1m-5 4h1' />
+    <path stroke='#d8d5d4' d='M14 9h1' />
+    <path stroke='#d6d2d1' d='M1 10h1' />
+    <path stroke='#dddad9' d='M9 10h1' />
+    <path stroke='#d9d5d4' d='M10 10h3m-2 2h1' />
+    <path stroke='#d8d4d3' d='M13 10h1' />
+    <path stroke='#d7d3d1' d='M14 10h1m-6 4h2' />
+    <path stroke='#bdb6b4' d='M16 10h1m-1 1h1m-1 1h1' />
+    <path stroke='#d4d0cf' d='M1 11h1' />
+    <path stroke='#e2dfde' d='M4 11h1' />
+    <path stroke='#e1dedd' d='M5 11h2' />
+    <path stroke='#dcd8d7' d='M10 11h1m-2 1h1' />
+    <path stroke='#dad6d5' d='M11 11h1' />
+    <path stroke='#d7d4d2' d='M12 11h1' />
+    <path stroke='#d7d3d1' d='M13 11h1' />
+    <path stroke='#d5d1cf' d='M14 11h1' />
+    <path stroke='#d3cfce' d='M1 12h1' />
+    <path stroke='#e0dddc' d='M4 12h1' />
+    <path stroke='#dfdcdb' d='M5 12h2' />
+    <path stroke='#dbd7d6' d='M10 12h1' />
+    <path stroke='#d7d4d2' d='M12 12h1' />
+    <path stroke='#d6d2d0' d='M13 12h1m-2 1h1' />
+    <path stroke='#d5d1cf' d='M14 12h1' />
+    <path stroke='#d1cdcc' d='M1 13h1' />
+    <path stroke='#dad7d6' d='M2 13h1' />
+    <path stroke='#dcd9d8' d='M3 13h1' />
+    <path stroke='#dcd9d8' d='M6 13h1' />
+    <path stroke='#dcd9d8' d='M7 13h1' />
+    <path stroke='#dbd8d7' d='M8 13h1' />
+    <path stroke='#d9d5d4' d='M10 13h1' />
+    <path stroke='#d7d3d2' d='M11 13h1' />
+    <path stroke='#d5d1d0' d='M13 13h1' />
+    <path stroke='#d4d0ce' d='M14 13h1' />
+    <path stroke='#ebe9e8' d='M1 14h1' />
+    <path stroke='#d7d3d1' d='M2 14h1' />
+    <path stroke='#d7d4d2' d='M3 14h1m3 0h2' />
+    <path stroke='#d6d2d0' d='M11 14h1' />
+    <path stroke='#d5d1cf' d='M12 14h1' />
+    <path stroke='#d4d0ce' d='M13 14h1' />
+    <path stroke='#e9e7e6' d='M14 14h1' />
+    <path stroke='#c6c0be' d='M16 14h1' />
+    <path stroke='#d7d4d2' d='M0 15h1' />
+    <path stroke='#cdc8c6' d='M15 15h1' />
+    <path stroke='#f1f0ef' d='M0 16h1' />
+    <path stroke='#c9c4c2' d='M1 16h1' />
+    <path stroke='#bbb4b2' d='M2 16h1' />
+    <path stroke='#b5aeab' d='M3 16h1' />
+    <path stroke='#b0a8a6' d='M4 16h1' />
+    <path stroke='#aea6a3' d='M5 16h1m4 0h3' />
+    <path stroke='#ada5a3' d='M6 16h1' />
+    <path stroke='#ada5a2' d='M7 16h3' />
+    <path stroke='#b1aaa7' d='M13 16h1' />
+    <path stroke='#bdb6b4' d='M14 16h1' />
+    <path stroke='#f2f1f1' d='M15 16h1' />
+</svg>
\ No newline at end of file
diff --git a/src/assets/scrollbar/button-right-disabled.svg b/src/assets/scrollbar/button-right-disabled.svg
new file mode 100644
index 000000000..f2e5cee33
--- /dev/null
+++ b/src/assets/scrollbar/button-right-disabled.svg
@@ -0,0 +1,120 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -0.5 17 17' shape-rendering='crispEdges'>
+    <path stroke='#ebe9e8' d='M0 0h17m-1 1h1m-1 14h1m-1 1h1' />
+    <path stroke='#fcfbfb' d='M0 1h1' />
+    <path stroke='#ffffff'
+        d='M1 1h15M0 2h1m14 0h1M0 3h1m14 0h1M0 4h1m14 0h1M0 5h1m14 0h1M0 6h1m14 0h1M0 7h1m14 0h1M0 8h1m14 0h1M0 9h1m14 0h1M0 10h1m14 0h1M0 11h1m14 0h1M0 12h1m14 0h1M0 13h1m14 0h1M0 14h1m14 0h1M1 15h14' />
+    <path stroke='#f2f1f0' d='M1 2h1' />
+    <path stroke='#e7e5e4' d='M2 2h1M1 3h1' />
+    <path stroke='#e3e1e0' d='M3 2h1M1 4h1' />
+    <path stroke='#e0dcdb' d='M4 2h1' />
+    <path stroke='#dedad9' d='M5 2h1' />
+    <path stroke='#dcd9d8' d='M6 2h1M1 7h1' />
+    <path stroke='#dad7d6' d='M7 2h2' />
+    <path stroke='#d9d6d5' d='M9 2h1M1 8h1' />
+    <path stroke='#d8d5d4' d='M10 2h1' />
+    <path stroke='#d8d5d4' d='M11 2h1' />
+    <path stroke='#d7d3d1' d='M12 2h1' />
+    <path stroke='#d4d0cf' d='M13 2h1' />
+    <path stroke='#eceae9' d='M14 2h1' />
+    <path stroke='#e2e0df' d='M16 2h1' />
+    <path stroke='#f0efef' d='M2 3h1' />
+    <path stroke='#edebeb' d='M3 3h1M2 4h1' />
+    <path stroke='#e9e7e7' d='M4 3h1M2 5h1' />
+    <path stroke='#e8e6e6' d='M5 3h1M3 5h1' />
+    <path stroke='#e7e5e4' d='M6 3h1M2 6h1' />
+    <path stroke='#e7e5e4' d='M7 3h1M5 4h1' />
+    <path stroke='#e6e4e3' d='M8 3h1M4 5h1M2 7h1' />
+    <path stroke='#e5e3e2' d='M9 3h1M6 4h1M4 6h1' />
+    <path stroke='#e3e1e0' d='M10 3h1' />
+    <path stroke='#e2e0df' d='M11 3h1m-9 7h3' />
+    <path stroke='#e1dedd' d='M12 3h1m-2 1h1M2 10h1m0 1h1' />
+    <path stroke='#dddad9' d='M13 3h1m-1 2h1M4 13h2' />
+    <path stroke='#d8d5d4' d='M14 3h1M4 14h3' />
+    <path stroke='#d8d5d4' d='M16 3h1' />
+    <path stroke='#ebe9e9' d='M3 4h1' />
+    <path stroke='#e8e6e6' d='M4 4h1' />
+    <path stroke='#6f6663' d='M7 4h1M6 5h3M7 6h3M8 7h3M9 8h3M8 9h3m-4 1h3m-4 1h3m-2 1h1' />
+    <path stroke='#e3e1e0' d='M8 4h1M5 6h2' />
+    <path stroke='#e2e0df' d='M9 4h1M2 9h5' />
+    <path stroke='#e2e0df' d='M10 4h1' />
+    <path stroke='#dfdcdb' d='M12 4h1M9 5h1m-8 6h1m0 1h1' />
+    <path stroke='#dddad9' d='M13 4h1' />
+    <path stroke='#d9d6d5' d='M14 4h1' />
+    <path stroke='#cfcac8' d='M16 4h1' />
+    <path stroke='#e0dcdb' d='M1 5h1' />
+    <path stroke='#e4e2e1' d='M5 5h1M4 7h3M2 8h1' />
+    <path stroke='#dedbda' d='M10 5h3M7 7h1' />
+    <path stroke='#dad6d5' d='M14 5h1m-1 1h1m-1 1h1' />
+    <path stroke='#c7c1bf' d='M16 5h1' />
+    <path stroke='#dddad9' d='M1 6h1' />
+    <path stroke='#e7e5e4' d='M3 6h1' />
+    <path stroke='#dddad9' d='M10 6h1m1 0h2M2 12h1' />
+    <path stroke='#dcd9d8' d='M11 6h1m0 1h2m-1 1h1' />
+    <path stroke='#c2bcba' d='M16 6h1' />
+    <path stroke='#e6e4e3' d='M3 7h1' />
+    <path stroke='#dcd8d7' d='M11 7h1m0 1h1' />
+    <path stroke='#c0b9b7' d='M16 7h1' />
+    <path stroke='#e5e3e2' d='M3 8h3' />
+    <path stroke='#e0dddc' d='M6 8h3' />
+    <path stroke='#d9d6d5' d='M14 8h1' />
+    <path stroke='#beb7b5' d='M16 8h1m-1 5h1' />
+    <path stroke='#d7d4d2' d='M1 9h1' />
+    <path stroke='#e1dedd' d='M7 9h1m-3 2h1' />
+    <path stroke='#dbd7d6' d='M11 9h2' />
+    <path stroke='#dad6d5' d='M13 9h1' />
+    <path stroke='#d7d3d1' d='M14 9h1' />
+    <path stroke='#bdb6b4' d='M16 9h1m-1 1h1m-1 1h1m-1 1h1' />
+    <path stroke='#d6d2d1' d='M1 10h1' />
+    <path stroke='#e2dfde' d='M6 10h1' />
+    <path stroke='#d9d5d4' d='M10 10h3m-2 2h1' />
+    <path stroke='#d8d4d3' d='M13 10h1' />
+    <path stroke='#d7d3d1' d='M14 10h1m-6 4h2' />
+    <path stroke='#d4d0cf' d='M1 11h1' />
+    <path stroke='#e2dfde' d='M4 11h1' />
+    <path stroke='#dddad9' d='M9 11h1' />
+    <path stroke='#dcd8d7' d='M10 11h1m-2 1h1' />
+    <path stroke='#dad6d5' d='M11 11h1' />
+    <path stroke='#d7d4d2' d='M12 11h1' />
+    <path stroke='#d7d3d1' d='M13 11h1' />
+    <path stroke='#d5d1cf' d='M14 11h1' />
+    <path stroke='#d3cfce' d='M1 12h1' />
+    <path stroke='#e0dddc' d='M4 12h1' />
+    <path stroke='#dfdcdb' d='M5 12h2' />
+    <path stroke='#dedbda' d='M8 12h1' />
+    <path stroke='#dbd7d6' d='M10 12h1' />
+    <path stroke='#d7d4d2' d='M12 12h1' />
+    <path stroke='#d6d2d0' d='M13 12h1m-2 1h1' />
+    <path stroke='#d5d1cf' d='M14 12h1' />
+    <path stroke='#d1cdcc' d='M1 13h1' />
+    <path stroke='#dad7d6' d='M2 13h1' />
+    <path stroke='#dcd9d8' d='M3 13h1' />
+    <path stroke='#dcd9d8' d='M6 13h1' />
+    <path stroke='#dcd9d8' d='M7 13h1' />
+    <path stroke='#dbd8d7' d='M8 13h1' />
+    <path stroke='#dbd7d6' d='M9 13h1' />
+    <path stroke='#d9d5d4' d='M10 13h1' />
+    <path stroke='#d7d3d2' d='M11 13h1' />
+    <path stroke='#d5d1d0' d='M13 13h1' />
+    <path stroke='#d4d0ce' d='M14 13h1' />
+    <path stroke='#ebe9e8' d='M1 14h1' />
+    <path stroke='#d7d3d1' d='M2 14h1' />
+    <path stroke='#d7d4d2' d='M3 14h1m3 0h2' />
+    <path stroke='#d6d2d0' d='M11 14h1' />
+    <path stroke='#d5d1cf' d='M12 14h1' />
+    <path stroke='#d4d0ce' d='M13 14h1' />
+    <path stroke='#e9e7e6' d='M14 14h1' />
+    <path stroke='#c6c0be' d='M16 14h1' />
+    <path stroke='#d7d4d2' d='M0 15h1' />
+    <path stroke='#cdc8c6' d='M15 15h1' />
+    <path stroke='#f1f0ef' d='M0 16h1' />
+    <path stroke='#c9c4c2' d='M1 16h1' />
+    <path stroke='#bbb4b2' d='M2 16h1' />
+    <path stroke='#b5aeab' d='M3 16h1' />
+    <path stroke='#b0a8a6' d='M4 16h1' />
+    <path stroke='#aea6a3' d='M5 16h1m4 0h3' />
+    <path stroke='#ada5a3' d='M6 16h1' />
+    <path stroke='#ada5a2' d='M7 16h3' />
+    <path stroke='#b1aaa7' d='M13 16h1' />
+    <path stroke='#bdb6b4' d='M14 16h1' />
+    <path stroke='#f2f1f1' d='M15 16h1' />
+</svg>
\ No newline at end of file
diff --git a/src/assets/scrollbar/button-up-disabled.svg b/src/assets/scrollbar/button-up-disabled.svg
new file mode 100644
index 000000000..3edc42c46
--- /dev/null
+++ b/src/assets/scrollbar/button-up-disabled.svg
@@ -0,0 +1,123 @@
+<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 -0.5 17 17' shape-rendering='crispEdges'>
+    <path stroke="#ebe9e8"
+        d='M0 0h1m15 0h1M0 1h1M0 2h1M0 3h1M0 4h1M0 5h1M0 6h1M0 7h1M0 8h1M0 9h1m-1 1h1m-1 1h1m-1 1h1m-1 1h1m-1 1h1m-1 1h1m15 0h1M0 16h1m15 0h1' />
+    <path stroke="#fcfbfb" d='M1 0h1' />
+    <path stroke="#ffffff"
+        d='M2 0h14M1 1h1m13 0h1M1 2h1m13 0h1M1 3h1m13 0h1M1 4h1m13 0h1M1 5h1m13 0h1M1 6h1m13 0h1M1 7h1m13 0h1M1 8h1m13 0h1M1 9h1m13 0h1M1 10h1m13 0h1M1 11h1m13 0h1M1 12h1m13 0h1M1 13h1m13 0h1M1 14h1m13 0h1M2 15h13' />
+    <path stroke="#f2f1f0" d='M2 1h1' />
+    <path stroke="#e7e5e4" d='M3 1h1M2 2h1' />
+    <path stroke="#e3e1e0" d='M4 1h1M2 3h1' />
+    <path stroke="#e0dcdb" d='M5 1h1' />
+    <path stroke="#dedad9" d='M6 1h1' />
+    <path stroke="#dcd9d8" d='M7 1h1M2 6h1' />
+    <path stroke="#dad7d6" d='M8 1h1' />
+    <path stroke="#d9d6d5" d='M9 1h1M2 7h1' />
+    <path stroke="#d8d5d4" d='M10 1h1M2 8h1' />
+    <path stroke="#d8d5d4" d='M11 1h1' />
+    <path stroke="#d7d3d1" d='M12 1h1' />
+    <path stroke="#d4d0cf" d='M13 1h1' />
+    <path stroke="#eceae9" d='M14 1h1' />
+    <path stroke="#e2e0df" d='M16 1h1' />
+    <path stroke="#f0efef" d='M3 2h1' />
+    <path stroke="#edebeb" d='M4 2h1M3 3h1' />
+    <path stroke="#e9e7e7" d='M5 2h1M3 4h1' />
+    <path stroke="#e8e6e6" d='M6 2h1M4 4h1' />
+    <path stroke="#e7e5e4" d='M7 2h1M3 5h1' />
+    <path stroke="#e7e5e4" d='M8 2h1M6 3h1' />
+    <path stroke="#e5e3e2" d='M9 2h1M7 3h1M5 5h1' />
+    <path stroke="#e3e1e0" d='M10 2h1' />
+    <path stroke="#e2e0df" d='M11 2h1m-8 8h1m1 0h1' />
+    <path stroke="#e1dedd" d='M12 2h1m-2 1h1m-9 7h1m0 1h1' />
+    <path stroke="#dddad9" d='M13 2h1m-1 2h1m-9 9h2' />
+    <path stroke="#d8d5d4" d='M14 2h1M5 14h3' />
+    <path stroke="#d8d5d4" d='M16 2h1' />
+    <path stroke="#ebe9e9" d='M4 3h1' />
+    <path stroke="#e8e6e6" d='M5 3h1' />
+    <path stroke="#e4e2e1" d='M8 3h1M6 4h2M5 6h2M3 7h1' />
+    <path stroke="#e2e0df" d='M9 3h1M3 9h1m3 0h1' />
+    <path stroke="#e2e0df" d='M10 3h1' />
+    <path stroke="#dfdcdb" d='M12 3h1M9 4h1m-7 7h1m0 1h1' />
+    <path stroke="#dddad9" d='M13 3h1' />
+    <path stroke="#d9d6d5" d='M14 3h1' />
+    <path stroke="#cfcac8" d='M16 3h1' />
+    <path stroke="#e0dcdb" d='M2 4h1' />
+    <path stroke="#e6e4e3" d='M5 4h1M3 6h1' />
+    <path stroke="#e3e1e0" d='M8 4h1' />
+    <path stroke="#dedbda" d='M10 4h3M9 5h1' />
+    <path stroke="#dad6d5" d='M14 4h1m-1 1h1m-1 1h1' />
+    <path stroke="#c7c1bf" d='M16 4h1' />
+    <path stroke="#dddad9" d='M2 5h1' />
+    <path stroke="#e7e5e4" d='M4 5h1' />
+    <path stroke="#e3e1e0" d='M6 5h2M3 8h2' />
+    <path stroke="#6f6663" d='M8 5h1M7 6h3M6 7h5M5 8h3m1 0h3M4 9h3m3 0h3m-8 1h1m5 0h1' />
+    <path stroke="#dddad9" d='M10 5h1m1 0h2M3 12h1' />
+    <path stroke="#dcd9d8" d='M11 5h1m-2 1h1m1 0h2m-1 1h1' />
+    <path stroke="#c2bcba" d='M16 5h1' />
+    <path stroke="#e6e4e3" d='M4 6h1' />
+    <path stroke="#dcd8d7" d='M11 6h1m0 1h1' />
+    <path stroke="#c0b9b7" d='M16 6h1' />
+    <path stroke="#e5e3e2" d='M4 7h2' />
+    <path stroke="#dbd7d6" d='M11 7h1m0 1h1' />
+    <path stroke="#d9d6d5" d='M14 7h1' />
+    <path stroke="#beb7b5" d='M16 7h1m-1 1h1m-1 5h1' />
+    <path stroke="#e0dddc" d='M8 8h1' />
+    <path stroke="#dbd7d6" d='M13 8h1m-5 5h1' />
+    <path stroke="#d8d5d4" d='M14 8h1' />
+    <path stroke="#d7d4d2" d='M2 9h1' />
+    <path stroke="#e1dedd" d='M8 9h1m-1 1h1m-3 1h2' />
+    <path stroke="#dedbda" d='M9 9h1m-2 3h1' />
+    <path stroke="#dad6d5" d='M13 9h1' />
+    <path stroke="#d7d3d1" d='M14 9h1' />
+    <path stroke="#bdb6b4" d='M16 9h1m-1 1h1m-1 1h1m-1 1h1' />
+    <path stroke="#d6d2d1" d='M2 10h1' />
+    <path stroke="#e2dfde" d='M7 10h1' />
+    <path stroke="#dddad9" d='M9 10h1m-1 1h1' />
+    <path stroke="#d9d5d4" d='M10 10h1m1 0h1m-2 2h1' />
+    <path stroke="#d8d4d3" d='M13 10h1' />
+    <path stroke="#d7d3d1" d='M14 10h1m-6 4h2' />
+    <path stroke="#d4d0cf" d='M2 11h1' />
+    <path stroke="#e2dfde" d='M5 11h1' />
+    <path stroke="#e0dddc" d='M8 11h1' />
+    <path stroke="#dcd8d7" d='M10 11h1m-2 1h1' />
+    <path stroke="#dad6d5" d='M11 11h1' />
+    <path stroke="#d7d4d2" d='M12 11h1' />
+    <path stroke="#d7d3d1" d='M13 11h1' />
+    <path stroke="#d5d1cf" d='M14 11h1' />
+    <path stroke="#d3cfce" d='M2 12h1' />
+    <path stroke="#e0dddc" d='M5 12h1' />
+    <path stroke="#dfdcdb" d='M6 12h2' />
+    <path stroke="#dbd7d6" d='M10 12h1' />
+    <path stroke="#d7d4d2" d='M12 12h1' />
+    <path stroke="#d6d2d0" d='M13 12h1m-2 1h1' />
+    <path stroke="#d5d1cf" d='M14 12h1' />
+    <path stroke="#d1cdcc" d='M2 13h1' />
+    <path stroke="#dad7d6" d='M3 13h1' />
+    <path stroke="#dcd9d8" d='M4 13h1' />
+    <path stroke="#dcd9d8" d='M7 13h1' />
+    <path stroke="#dcd9d8" d='M8 13h1' />
+    <path stroke="#d9d5d4" d='M10 13h1' />
+    <path stroke="#d7d3d2" d='M11 13h1' />
+    <path stroke="#d5d1d0" d='M13 13h1' />
+    <path stroke="#d4d0ce" d='M14 13h1' />
+    <path stroke="#ebe9e8" d='M2 14h1' />
+    <path stroke="#d7d3d1" d='M3 14h1' />
+    <path stroke="#d7d4d2" d='M4 14h1m3 0h1' />
+    <path stroke="#d6d2d0" d='M11 14h1' />
+    <path stroke="#d5d1cf" d='M12 14h1' />
+    <path stroke="#d4d0ce" d='M13 14h1' />
+    <path stroke="#e9e7e6" d='M14 14h1' />
+    <path stroke="#c6c0be" d='M16 14h1' />
+    <path stroke="#d7d4d2" d='M1 15h1' />
+    <path stroke="#cdc8c6" d='M15 15h1' />
+    <path stroke="#f1f0ef" d='M1 16h1' />
+    <path stroke="#c9c4c2" d='M2 16h1' />
+    <path stroke="#bbb4b2" d='M3 16h1' />
+    <path stroke="#b5aeab" d='M4 16h1' />
+    <path stroke="#b0a8a6" d='M5 16h1' />
+    <path stroke="#aea6a3" d='M6 16h1m3 0h3' />
+    <path stroke="#ada5a3" d='M7 16h1' />
+    <path stroke="#ada5a2" d='M8 16h2' />
+    <path stroke="#b1aaa7" d='M13 16h1' />
+    <path stroke="#bdb6b4" d='M14 16h1' />
+    <path stroke="#f2f1f1" d='M15 16h1' />
+</svg>
\ No newline at end of file
diff --git a/src/scrollbar.js b/src/scrollbar.js
index 71277e68a..ef01db57b 100644
--- a/src/scrollbar.js
+++ b/src/scrollbar.js
@@ -1,9 +1,23 @@
 import buttonUp from 'assets/scrollbar/button-up.svg';
 import buttonUpLight from 'assets/scrollbar/button-up-light.svg';
+import buttonUpDark from 'assets/scrollbar/button-up-dark.svg';
+import buttonUpDisabled from 'assets/scrollbar/button-up-disabled.svg';
 
 import buttonDown from 'assets/scrollbar/button-down.svg';
+import buttonDownLight from 'assets/scrollbar/button-down-light.svg';
+import buttonDownDark from 'assets/scrollbar/button-down-dark.svg';
+import buttonDownDisabled from 'assets/scrollbar/button-down-disabled.svg';
+
 import buttonRight from 'assets/scrollbar/button-right.svg';
+import buttonRightLight from 'assets/scrollbar/button-right-light.svg';
+import buttonRightDark from 'assets/scrollbar/button-right-dark.svg';
+import buttonRightDisabled from 'assets/scrollbar/button-right-disabled.svg';
+
 import buttonLeft from 'assets/scrollbar/button-left.svg';
+import buttonLeftLight from 'assets/scrollbar/button-left-light.svg';
+import buttonLeftDark from 'assets/scrollbar/button-left-dark.svg';
+import buttonLeftDisabled from 'assets/scrollbar/button-left-disabled.svg';
+
 import trackHorizonal from 'assets/scrollbar/track-horizonal.svg';
 import trackVertical from 'assets/scrollbar/track-vertical.svg';
 
@@ -72,7 +86,7 @@ export function getScrollbarCSS() {
   }
 
   ::-webkit-scrollbar-button:vertical:start:active {
-    background: red;
+    background-image: url(${buttonUpDark});
   }
 
   ::-webkit-scrollbar-button:vertical:end {
@@ -80,14 +94,74 @@ export function getScrollbarCSS() {
     background-image: url(${buttonDown});
   }
 
+  ::-webkit-scrollbar-button:vertical:end:hover {
+    background-image: url(${buttonDownLight});
+  }
+
+  ::-webkit-scrollbar-button:vertical:end:active {
+    background-image: url(${buttonDownDark});
+  }
+
   ::-webkit-scrollbar-button:horizontal:start {
     width: 16px;
     background-image: url(${buttonLeft});
   }
 
+  ::-webkit-scrollbar-button:horizontal:start:hover {
+    background-image: url(${buttonLeftLight});
+  }
+
+  ::-webkit-scrollbar-button:horizontal:start:active {
+    background-image: url(${buttonLeftDark});
+  }
+
   ::-webkit-scrollbar-button:horizontal:end {
     width: 16px;
     background-image: url(${buttonRight});
   }
+
+  ::-webkit-scrollbar-button:horizontal:end:hover {
+    background-image: url(${buttonRightLight});
+  }
+
+  ::-webkit-scrollbar-button:horizontal:end:active {
+    background-image: url(${buttonRightDark});
+  }
+
+  .disabled-scrollbar-vertical::-webkit-scrollbar-button:vertical:end {
+    background-image: url(${buttonDownDisabled});
+}
+
+.disabled-scrollbar-vertical::-webkit-scrollbar-button:vertical:start {
+  background-image: url(${buttonUpDisabled});
+}
+
+  .disabled-scrollbar-horizontal::-webkit-scrollbar-button:horizontal:start {
+    background-image: url(${buttonLeftDisabled});
+}
+
+.disabled-scrollbar-horizontal::-webkit-scrollbar-button:horizontal:end {
+  background-image: url(${buttonRightDisabled});
+}
 `;
 }
+
+export function applyScrollbarClass(element) {
+  if (!element) return;
+
+  const children = element.getElementsByTagName('*');
+
+  if (!children) return;
+
+  const childrenArr = Array.from(children);
+
+  childrenArr.forEach(child => {
+    const horizontalAction =
+      child.scrollWidth <= child.clientWidth ? 'add' : 'remove';
+    child.classList[horizontalAction]('disabled-scrollbar-horizontal');
+
+    const verticalAction =
+      child.scrollHeight <= child.clientHeight ? 'add' : 'remove';
+    child.classList[verticalAction]('disabled-scrollbar-vertical');
+  });
+}

From edbfb209276a3897b6c55c39f96ff97851b5539b Mon Sep 17 00:00:00 2001
From: Almog Lemberg <almoglemberg@gmail.com>
Date: Sun, 17 Apr 2022 11:30:35 +0300
Subject: [PATCH 9/9] "applyScrollbarClass" moved to a useEffect

---
 src/WinXP/apps/Notepad/index.js | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/WinXP/apps/Notepad/index.js b/src/WinXP/apps/Notepad/index.js
index 76717f40e..15d9f41ad 100644
--- a/src/WinXP/apps/Notepad/index.js
+++ b/src/WinXP/apps/Notepad/index.js
@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import React, { useState, useRef, useContext, useEffect } from 'react';
 import Frame from 'react-frame-component';
 
@@ -43,6 +44,16 @@ export default function Notepad({ onClose, isFocus }) {
     textareaRef.current && textareaRef.current.focus();
   }, [isFocus]);
 
+  useEffect(() => {
+    applyScrollbarClass(
+      frameRef.current?.contentDocument.querySelector('.frame-content'),
+    );
+  }, [
+    textareaRef.current?.value?.length,
+    frameRef.current?.clientWidth,
+    frameRef.current?.clientHeight,
+  ]);
+
   function selectText(start, end) {
     caretStart.current = start;
     caretEnd.current = end;
@@ -244,10 +255,6 @@ export default function Notepad({ onClose, isFocus }) {
     });
   }
 
-  applyScrollbarClass(
-    frameRef.current?.contentDocument.querySelector('.frame-content'),
-  );
-
   return (
     <Div>
       <section className="np__toolbar">