1 files changed, 55 insertions, 0 deletions
diff --git a/browser/components/newtab/content-src/asrouter/templates/EOYSnippet/_EOYSnippet.scss b/browser/components/newtab/content-src/asrouter/templates/EOYSnippet/_EOYSnippet.scss
new file mode 100644
index 0000000000..d9911ff02c
--- /dev/null
+++ b/browser/components/newtab/content-src/asrouter/templates/EOYSnippet/_EOYSnippet.scss
@@ -0,0 +1,55 @@
+.EOYSnippetForm {
+  margin: 10px 0 8px;
+  align-self: start;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+
+  .donation-amount,
+  .donation-form-url {
+    white-space: nowrap;
+    font-size: 14px;
+    padding: 8px 20px;
+    border-radius: 2px;
+  }
+
+  .donation-amount {
+    color: var(--newtab-text-primary-color);
+    margin-inline-end: 18px;
+    border: $input-border;
+    padding: 5px 14px;
+    background: var(--newtab-background-color-secondary);
+    cursor: pointer;
+  }
+
+  input {
+    &[type='radio'] {
+      opacity: 0;
+      margin-inline-end: -18px;
+
+      &:checked + .donation-amount {
+        // Use a text color for the background to achieve an inverted look.
+        background: var(--newtab-text-secondary-color);
+        color: var(--newtab-background-color-secondary);
+        border: $border-secondary;
+      }
+
+      // accessibility
+      &:checked:focus + .donation-amount,
+      &:not(:checked):focus + .donation-amount {
+        border: 1px dotted var(--newtab-primary-action-background);
+      }
+    }
+  }
+
+  .monthly-checkbox-container {
+    display: flex;
+    width: 100%;
+  }
+
+  .donation-form-url {
+    margin-inline-start: 18px;
+    align-self: flex-end;
+    display: flex;
+  }
+}