1 files changed, 42 insertions, 0 deletions
diff --git a/browser/components/newtab/content-src/components/PocketLoggedInCta/_PocketLoggedInCta.scss b/browser/components/newtab/content-src/components/PocketLoggedInCta/_PocketLoggedInCta.scss
new file mode 100644
index 0000000000..e1eed58e9c
--- /dev/null
+++ b/browser/components/newtab/content-src/components/PocketLoggedInCta/_PocketLoggedInCta.scss
@@ -0,0 +1,42 @@
+@use 'sass:math';
+
+.pocket-logged-in-cta {
+  $max-button-width: 130px;
+  $min-button-height: 18px;
+
+  font-size: 13px;
+  margin-inline-end: 20px;
+  display: flex;
+  align-items: flex-start;
+
+  .pocket-cta-button {
+    white-space: nowrap;
+    background: var(--newtab-primary-action-background);
+    letter-spacing: -0.34px;
+    color: $white;
+    border-radius: 4px;
+    cursor: pointer;
+    max-width: $max-button-width;
+    // The button height is 2px taller than the rest of the cta text.
+    // So I move it up by 1px to align with the rest of the cta text.
+    margin-top: -1px;
+    min-height: $min-button-height;
+    padding: 0 8px;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 11px;
+    margin-inline-end: 10px;
+  }
+
+  .cta-text {
+    font-weight: normal;
+    font-size: 13px;
+    line-height: math.div(16, 13); // (16 / 13) -> 16px computed
+  }
+
+  .pocket-cta-button,
+  .cta-text {
+    vertical-align: top;
+  }
+}