1 files changed, 120 insertions, 0 deletions
diff --git a/scss/widgets.scss b/scss/widgets.scss
new file mode 100644
index 0000000..0e11f46
--- /dev/null
+++ b/scss/widgets.scss
@@ -0,0 +1,120 @@
+@use "sass:color";
+@use "scheme";
+@use "lib";
+@use "font";
+
+@keyframes appear {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+@mixin -appear($duration: 100ms) {
+    animation-name: appear;
+    animation-duration: $duration;
+    animation-timing-function: ease-out;
+    animation-iteration-count: 1;
+}
+
+menu {
+    @include -appear;
+    @include lib.rounded(5);
+    @include lib.border(color.change(scheme.$blue, $alpha: 0.7), 2);
+    @include font.main;
+
+    padding: lib.s(10);
+    background-color: scheme.$surface0;
+    color: scheme.$text;
+
+    & > menuitem {
+        @include lib.rounded(8);
+
+        padding: lib.s(8) lib.s(16);
+        background: transparent;
+        transition: 0.2s ease background-color;
+
+        &:hover,
+        &:focus {
+            background-color: scheme.$surface1;
+        }
+
+        &:active {
+            background-color: scheme.$surface2;
+        }
+
+        &:disabled {
+            color: scheme.$subtext0;
+        }
+
+        & > arrow {
+            @include lib.rounded(1000);
+
+            min-width: lib.s(5);
+            min-height: lib.s(5);
+            background-color: scheme.$blue;
+
+            &.right {
+                margin-left: lib.s(12);
+            }
+
+            &.left {
+                margin-right: lib.s(12);
+            }
+        }
+    }
+
+    & > separator {
+        @include lib.rounded(1);
+
+        background-color: scheme.$blue;
+        min-width: lib.s(0.5);
+        min-height: lib.s(0.5);
+        margin: lib.s(8) 0;
+    }
+}
+
+tooltip,
+.tooltip {
+    @include lib.rounded(5);
+    @include lib.border(color.change(scheme.$teal, $alpha: 0.7));
+    @include font.reading;
+
+    background-color: scheme.$surface0;
+    color: scheme.$text;
+    padding: lib.s(4) lib.s(8);
+}
+
+tooltip {
+    @include -appear(200ms);
+}
+
+scrollbar {
+    trough {
+        @include lib.rounded(1000);
+
+        min-width: lib.s(12);
+        background-color: transparent;
+    }
+
+    slider {
+        @include lib.rounded(1000);
+        @include lib.element-decel;
+
+        min-width: lib.s(6);
+        min-height: lib.s(30);
+        background-color: color.change(scheme.$overlay0, $alpha: 0.3);
+
+        &:hover,
+        &:focus {
+            background-color: color.change(scheme.$overlay0, $alpha: 0.4);
+        }
+
+        &:active {
+            background-color: color.change(scheme.$overlay1, $alpha: 0.5);
+        }
+    }
+}