From a3cf9c669d3d5b7b4c742005ae4aa8465484a9ee Mon Sep 17 00:00:00 2001
From: ChaosExAnima <ChaosExAnima@users.noreply.github.com>
Date: Fri, 12 Sep 2025 19:09:05 +0200
Subject: [PATCH] style dropdown

---
 .../features/donate/donate_modal.scss         | 41 +++++++++++++++++++
 1 file changed, 41 insertions(+)

diff --git a/app/javascript/mastodon/features/donate/donate_modal.scss b/app/javascript/mastodon/features/donate/donate_modal.scss
index 29eda7aec37..ad2bd7d8a22 100644
--- a/app/javascript/mastodon/features/donate/donate_modal.scss
+++ b/app/javascript/mastodon/features/donate/donate_modal.scss
@@ -1,3 +1,5 @@
+@use '../../../styles/mastodon/variables' as vars;
+
 .donate_modal {
   .dialog-modal__header {
     gap: 1rem;
@@ -53,6 +55,45 @@
     }
   }
 
+  &__dropdown {
+    // TODO: Move these to CSS variables
+    --dropdown-text-color: #{vars.$primary-text-color};
+    --dropdown-active-color: #{vars.$ui-highlight-color};
+
+    box-shadow: var(--dropdown-shadow);
+    background: var(--dropdown-background-color);
+    backdrop-filter: #{vars.$backdrop-blur-filter};
+    border: 1px solid var(--dropdown-border-color);
+    padding: 4px;
+    border-radius: 4px;
+    overflow: hidden;
+  }
+
+  &__option {
+    font-size: 14px;
+    line-height: 20px;
+    letter-spacing: 0.25px;
+    padding: 8px 12px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    border-radius: 4px;
+    color: var(--dropdown-text-color);
+
+    &:hover,
+    &:active {
+      background: var(--dropdown-border-color);
+    }
+
+    &:focus,
+    &.active {
+      background: var(--dropdown-active-color);
+      color: var(--dropdown-text-color);
+      outline: 0;
+    }
+  }
+
   .title {
     flex-grow: 1;
   }