1 files changed, 69 insertions, 0 deletions
diff --git a/browser/components/shopping/content/settings.css b/browser/components/shopping/content/settings.css
new file mode 100644
index 0000000000..cd0f497a23
--- /dev/null
+++ b/browser/components/shopping/content/settings.css
@@ -0,0 +1,69 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+@import url("chrome://global/skin/in-content/common.css");
+
+#shopping-settings-wrapper {
+  --shopping-settings-between-label-and-control-option-gap: 4px;
+  display: grid;
+  grid-template-rows: auto;
+  row-gap: 8px;
+  margin-top: 12px;
+
+  .shopping-settings-toggle-option-wrapper {
+    display: grid;
+    row-gap: var(--shopping-settings-between-label-and-control-option-gap);
+  }
+
+  #shopping-settings-opt-out-section {
+    display: grid;
+    justify-content: center;
+
+    #shopping-settings-opt-out-button {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  #powered-by-fakespot {
+    font-size: 12px;
+    color: var(--text-color-deemphasized);
+  }
+
+  #shopping-settings-toggles-section {
+    display: grid;
+    row-gap: 8px;
+
+    #shopping-ads-learn-more,
+    #shopping-auto-open-description {
+      margin-inline-end: 20px;
+      color: var(--text-color-deemphasized);
+    }
+  }
+
+  /* When `browser.shopping.experience2023.autoOpen` is true. */
+  &.shopping-settings-auto-open-ui-enabled {
+    --shopping-settings-between-options-gap: 12px;
+    row-gap: var(--shopping-settings-between-options-gap);
+
+    #shopping-settings-toggles-section {
+      display: grid;
+      row-gap: var(--shopping-settings-between-options-gap);
+    }
+
+    .divider {
+      border: var(--shopping-card-border-width) solid var(--shopping-card-border-color);
+    }
+
+    #shopping-settings-opt-out-section {
+      justify-content: flex-start;
+      row-gap: var(--shopping-settings-between-label-and-control-option-gap);
+
+      #shopping-settings-opt-out-button {
+        width: fit-content;
+        margin-inline-start: 0;
+      }
+    }
+  }
+}