Adding upstream version 115.7.0esr.upstream/115.7.0esr

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

1 files changed, 1676 insertions, 0 deletions

diff --git a/browser/components/newtab/content-src/aboutwelcome/aboutwelcome.scss b/browser/components/newtab/content-src/aboutwelcome/aboutwelcome.scss
new file mode 100644
index 0000000000..f4f756dfd0
--- /dev/null
+++ b/browser/components/newtab/content-src/aboutwelcome/aboutwelcome.scss
@@ -0,0 +1,1676 @@
+/* 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/. */
+@use 'sass:math';
+@import '../styles/feature-callout';
+
+$break-point-small: 570px;
+$break-point-medium: 610px;
+$break-point-large: 866px;
+$container-min-width: 700px;
+$logo-size: 80px;
+$main-section-width: 504px;
+$split-section-width: 400px;
+$split-screen-height: 550px;
+$small-main-section-height: 450px;
+$small-secondary-section-height: 100px;
+$noodle-buffer: 106px;
+$video-section-width: 800px;
+
+html {
+  height: 100%;
+}
+
+// Below variables are used via config JSON in AboutWelcomeDefaults
+// and referenced below inside dummy class to pass test browser_parsable_css
+.dummy {
+  background: var(--mr-welcome-background-color) var(--mr-welcome-background-gradient) var(--mr-secondary-position) var(--mr-screen-background-color);
+}
+
+// Styling for content rendered in a Spotlight messaging surface.
+:root {
+  &[dialogroot] {
+    background-color: transparent;
+
+    body {
+      padding: 0;
+    }
+
+    .onboardingContainer {
+      // Without this, the container will be 100vh in height. When the dialog
+      // overflows horizontally, the horizontal scrollbar will appear. If the
+      // scrollbars aren't overlay scrollbars (this is controlled by
+      // Theme::ScrollbarStyle), they will take up vertical space in the
+      // viewport, causing the dialog to overflow vertically. This causes the
+      // vertical scrollbar to appear, which takes up horizontal space, causing
+      // the horizontal scrollbar to appear, and so on.
+      height: 100%;
+      background-color: transparent;
+
+      &:dir(rtl) {
+        transform: unset;
+      }
+
+      .logo-container {
+        pointer-events: none;
+      }
+
+      .screen {
+        &:dir(rtl) {
+          transform: unset;
+        }
+      }
+    }
+  }
+}
+
+// Styling for about:welcome background container
+.welcome-container {
+  .onboardingContainer {
+    min-height: $break-point-medium;
+    min-width: fit-content;
+  }
+}
+
+.onboardingContainer {
+  --grey-subtitle-1: #696977;
+  --mr-welcome-background-color: #F8F6F4;
+  --mr-screen-heading-color: var(--in-content-text-color);
+  --mr-welcome-background-gradient: linear-gradient(0deg, rgba(144, 89, 255, 20%) 0%, rgba(2, 144, 238, 20%) 100%);
+  --mr-screen-background-color: #F8F6F4;
+
+  @media (prefers-color-scheme: dark) {
+    --grey-subtitle-1: #FFF;
+    --mr-welcome-background-color: #333336;
+    --mr-welcome-background-gradient: linear-gradient(0deg, rgba(144, 89, 255, 30%) 0%, rgba(2, 144, 238, 30%) 100%);
+    --mr-screen-background-color: #62697A;
+  }
+
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Ubuntu,
+    'Helvetica Neue', sans-serif;
+  font-size: 16px;
+  position: relative;
+  text-align: center;
+  height: 100vh;
+
+  @media (prefers-contrast) {
+    --mr-screen-background-color: buttontext;
+    --mr-screen-heading-color: buttonface;
+
+    background-color: var(--in-content-page-background);
+  }
+
+  // Transition all of these and reduced motion effectively only does opacity.
+  --transition: 0.6s opacity, 0.6s scale, 0.6s rotate, 0.6s translate;
+
+  // Define some variables that are used for in/out states.
+  @media (prefers-reduced-motion: no-preference) {
+    --translate: 30px;
+    --rotate: 20deg;
+    --scale: 0.4;
+    --progress-bar-transition: 0.6s translate;
+
+    // Scale is used for noodles that can be flipped.
+    &:dir(rtl) {
+      --scale: -0.4 0.4;
+    }
+  }
+
+  // Use default values that match "unmoved" state to avoid motion.
+  @media (prefers-reduced-motion: reduce) {
+    --translate: 0;
+    --rotate: 0deg;
+    --scale: 1;
+    // To reduce motion, progress bar fades in instead of wiping in.
+    --progress-bar-transition: none;
+
+    &:dir(rtl) {
+      --scale: -1 1;
+    }
+  }
+
+  &:dir(rtl) {
+    transform: rotateY(180deg);
+  }
+
+  .section-main {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    width: $main-section-width;
+    flex-shrink: 0;
+  }
+
+  .section-main:not(.embedded-migration) {
+    position: relative;
+  }
+
+  .main-content {
+    background-color: var(--in-content-page-background);
+    border-radius: 20px;
+    box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 20%);
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    padding: 0;
+    transition: var(--transition);
+    z-index: 1;
+    box-sizing: border-box;
+
+    &.no-steps {
+      padding-bottom: 48px;
+    }
+
+    .main-content-inner {
+      display: flex;
+      flex-direction: column;
+      flex-grow: 1;
+      justify-content: space-around;
+    }
+  }
+
+  // Handle conditional display of steps indicator
+  // Don't show when there's only one screen
+  .main-content .no-steps {
+    .main-content {
+      padding-bottom: 48px;
+    }
+
+    .steps {
+      display: none;
+    }
+  }
+
+  @mixin arrow-icon-styles {
+    .arrow-icon {
+      -moz-context-properties: fill;
+      fill: currentColor;
+      text-decoration: none;
+
+      &::after {
+        content: '';
+        padding-inline-end: 12px;
+        margin-inline-start: 4px;
+        background: url('chrome://browser/skin/forward.svg') no-repeat center / 12px;
+      }
+
+      &:dir(rtl)::after {
+        background-image: url('chrome://browser/skin/back.svg');
+      }
+    }
+  }
+
+  @mixin secondary-cta-styles {
+    background-color: var(--in-content-button-background) !important; // stylelint-disable-line declaration-no-important
+    border: 1px solid var(--in-content-button-border-color);
+    line-height: 12px;
+    font-size: 0.72em;
+    font-weight: 600;
+    padding: 8px 16px;
+    text-decoration: none;
+
+    &:hover {
+      background-color: var(--in-content-button-background-hover) !important; // stylelint-disable-line declaration-no-important
+      color: var(--in-content-button-text-color-hover);
+    }
+  }
+
+  @mixin text-link-styles {
+    text-decoration: underline;
+    cursor: pointer;
+    color: var(--in-content-link-color);
+
+    &:hover {
+      text-decoration: none;
+      color: var(--in-content-link-color-hover);
+    }
+
+    &:active {
+      text-decoration: none;
+      color: var(--in-content-link-color-active);
+    }
+  }
+
+  .screen {
+    display: flex;
+    position: relative;
+    flex-flow: row nowrap;
+    height: 100%;
+    min-height: 500px;
+    overflow: hidden;
+
+    --in-content-link-color: var(--in-content-primary-button-background);
+    --in-content-link-color-hover: var(--in-content-primary-button-background-hover);
+    --in-content-link-color-active: var(--in-content-primary-button-background-active);
+    --in-content-link-color-visited: var(--in-content-link-color);
+
+    &.light-text {
+      --in-content-page-color: rgb(251, 251, 254);
+      --in-content-primary-button-text-color: rgb(43, 42, 51);
+      --in-content-primary-button-text-color-hover: rgb(43, 42, 51);
+      --in-content-primary-button-background: rgb(0, 221, 255);
+      --in-content-primary-button-background-hover: rgb(128, 235, 255);
+      --in-content-primary-button-background-active: rgb(170, 242, 255);
+      --checkbox-checked-bgcolor: var(--in-content-primary-button-background);
+      --in-content-button-text-color: var(--in-content-page-color);
+    }
+
+    &.dark-text {
+      --in-content-page-color: rgb(21,  20,  26);
+      --in-content-primary-button-text-color: rgb(251, 251, 254);
+      --in-content-primary-button-text-color-hover: rgb(251, 251, 254);
+      --in-content-primary-button-background: #0061E0;
+      --in-content-primary-button-background-hover: #0250BB;
+      --in-content-primary-button-background-active: #053E94;
+      --in-content-primary-button-border-color: transparent;
+      --in-content-primary-button-border-hover: transparent;
+      --checkbox-checked-bgcolor: var(--in-content-primary-button-background);
+      --in-content-button-text-color: var(--in-content-page-color);
+    }
+
+    &:dir(rtl) {
+      transform: rotateY(180deg);
+    }
+
+    &[pos='center'] {
+      background-color: rgba(21, 20, 26, 50%);
+      min-width: $main-section-width;
+
+      &.with-noodles {
+        // Adjust for noodles partially extending out from the square modal
+        min-width: $main-section-width + $noodle-buffer;
+        min-height: $main-section-width + $noodle-buffer;
+
+        .section-main {
+          height: $main-section-width;
+        }
+      }
+
+      &.with-video {
+        justify-content: center;
+        background: none;
+        align-items: center;
+
+        .section-main {
+          width: $video-section-width;
+          height: $split-screen-height;
+        }
+
+        .main-content {
+          background-color: var(--mr-welcome-background-color);
+          border-radius: 8px;
+          box-shadow: 0 2px 14px rgba(58, 57, 68, 20%);
+          padding: 44px 85px 20px;
+
+          .welcome-text {
+            margin: 0;
+          }
+
+          .main-content-inner {
+            justify-content: space-between;
+          }
+
+          h1,
+          h2 {
+            align-self: start;
+          }
+
+          h1 {
+            font-size: 24px;
+            line-height: 28.8px;
+          }
+
+          h2 {
+            font-size: 15px;
+            line-height: 22px;
+          }
+
+          .secondary-cta {
+            @include arrow-icon-styles;
+
+            justify-content: end;
+
+            .secondary {
+              @include secondary-cta-styles;
+
+              color: var(--in-content-button-text-color);
+            }
+          }
+        }
+      }
+    }
+
+    &:not([pos='split']) {
+      .secondary-cta {
+        .secondary {
+          background: none;
+          color: var(--in-content-link-color);
+          font-size: 14px;
+          font-weight: normal;
+          line-height: 20px;
+        }
+
+        &.top {
+          button {
+            color: #FFF;
+
+            &:hover {
+              color: #E0E0E6;
+            }
+          }
+        }
+      }
+    }
+
+    &[pos='split'] {
+      margin: auto;
+      min-height: $split-screen-height;
+
+      &::before {
+        content: '';
+        position: absolute;
+        box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 20%);
+        width: $split-section-width + $split-section-width;
+        height: $split-screen-height;
+        border-radius: 8px;
+        inset: 0;
+        margin: auto;
+        pointer-events: none;
+      }
+
+      .section-secondary,
+      .section-main {
+        width: $split-section-width;
+        height: $split-screen-height;
+      }
+
+      .secondary-cta.top {
+        position: fixed;
+        padding-inline-end: 0;
+
+        button {
+          color: var(--in-content-page-color);
+        }
+      }
+
+      .section-main {
+        flex-direction: row;
+        display: block;
+        margin: auto auto auto 0;
+
+        &:dir(rtl) {
+          margin: auto 0 auto auto;
+        }
+
+        .main-content {
+          border-radius: 0 8px 8px 0;
+          overflow: hidden;
+          padding-inline: 35px 20px;
+          padding-block: 120px 0;
+          box-shadow: none;
+
+          &.no-steps {
+            padding-bottom: 48px;
+          }
+
+          &:dir(rtl) {
+            border-radius: 8px 0 0 8px;
+          }
+
+          .main-content-inner {
+            min-height: 330px;
+
+            .language-switcher-container {
+              .primary {
+                margin-bottom: 5px;
+              }
+            }
+          }
+
+          .action-buttons {
+            position: relative;
+            text-align: initial;
+            height: 100%;
+
+            .checkbox-container {
+              font-size: 13px;
+              margin-block: 1em;
+
+              &:not(.multi-select-item) {
+                transition: var(--transition);
+              }
+
+              input,
+              label {
+                vertical-align: middle;
+              }
+            }
+
+            .additional-cta {
+              margin: 8px 0;
+
+              &.cta-link {
+                background: none;
+                padding: 0;
+                font-weight: normal;
+
+                @include text-link-styles;
+              }
+
+              &.secondary {
+                &:hover {
+                  background-color: var(--in-content-button-background-hover);
+                }
+              }
+            }
+
+            &.additional-cta-container {
+              flex-wrap: nowrap;
+              align-items: start;
+            }
+
+            .secondary-cta {
+              position: absolute;
+              bottom: -30px;
+              inset-inline-end: 0;
+
+              .secondary {
+                @include secondary-cta-styles;
+              }
+
+              @include arrow-icon-styles;
+            }
+          }
+
+          .logo-container {
+            text-align: start;
+          }
+
+          .brand-logo {
+            height: 25px;
+            margin-block: 0;
+          }
+
+          .welcome-text {
+            margin-inline: 0 10px;
+            margin-block: 10px 35px;
+            text-align: initial;
+            align-items: initial;
+
+            &:empty {
+              margin: 0;
+            }
+
+            h1 {
+              font-size: 24px;
+              line-height: 1.2;
+              width: 300px;
+            }
+
+            h2 {
+              margin: 10px 0 0;
+              min-height: 1em;
+              font-size: 15px;
+              line-height: 1.5;
+
+              @media (prefers-contrast: no-preference) {
+                color: #5B5B66;
+              }
+            }
+          }
+
+          .welcome-text h1,
+          .primary {
+            margin: 0;
+          }
+
+          .steps {
+            z-index: 1;
+
+            &.progress-bar {
+              width: $split-section-width;
+              margin-inline: -35px;
+            }
+          }
+
+          @media (prefers-contrast) {
+            border: 1px solid var(--in-content-page-color);
+
+            .steps.progress-bar {
+              border-top: 1px solid var(--in-content-page-color);
+              background-color: var(--in-content-page-background);
+
+              .indicator {
+                background-color: var(--in-content-accent-color);
+              }
+            }
+          }
+        }
+      }
+
+      .section-secondary {
+        --mr-secondary-position: center center / auto 350px;
+
+        border-radius: 8px 0 0 8px;
+        margin: auto 0 auto auto;
+        display: flex;
+        align-items: center;
+        -moz-context-properties: fill, stroke, fill-opacity, stroke-opacity;
+        stroke: currentColor;
+
+        &:dir(rtl) {
+          border-radius: 0 8px 8px 0;
+          margin: auto auto auto 0;
+        }
+
+        h1 {
+          color: var(--mr-screen-heading-color);
+          font-weight: 700;
+          font-size: 47px;
+          line-height: 110%;
+          max-width: 340px;
+          text-align: initial;
+          white-space: pre-wrap;
+          text-shadow: none;
+          margin-inline: 40px 0;
+        }
+
+        .image-alt {
+          width: inherit;
+          height: inherit;
+        }
+
+        .hero-image {
+          flex: 1;
+          display: flex;
+          justify-content: center;
+          max-height: 100%;
+
+          img {
+            width: 100%;
+            max-width: 180px;
+            margin: 25px 0;
+            padding-bottom: 30px;
+
+            @media only screen and (max-width: 800px) {
+              padding-bottom: unset;
+            }
+          }
+        }
+      }
+
+      .tiles-theme-container {
+        margin-block: -20px auto;
+        align-items: initial;
+
+        .colorway-text {
+          text-align: initial;
+          transition: var(--transition);
+          font-size: 13px;
+          line-height: 1.5;
+          min-height: 4.5em;
+          margin-block: 10px 20px;
+        }
+
+        .theme {
+          min-width: 38px;
+        }
+      }
+
+      @media (prefers-contrast: no-preference) and (prefers-color-scheme: dark) {
+        .section-main .main-content {
+          .welcome-text h2 {
+            color: #CFCFD8;
+          }
+
+          .action-buttons .secondary {
+            background-color: #2B2A33;
+          }
+        }
+      }
+
+      @media only screen and (min-width: 800px) {
+        .tiles-theme-section {
+          margin-inline-start: -10px;
+        }
+      }
+
+      @media only screen and (max-width: 800px) {
+        flex-direction: column;
+        min-height: $small-main-section-height + $small-secondary-section-height;
+
+        &::before {
+          width: $split-section-width;
+        }
+
+        .section-secondary,
+        .section-main {
+          width: $split-section-width;
+        }
+
+        .section-secondary {
+          --mr-secondary-background-position-y: top;
+          --mr-secondary-position: center var(--mr-secondary-background-position-y) / 75%;
+
+          border-radius: 8px 8px 0 0;
+          margin: auto auto 0;
+          height: $small-secondary-section-height;
+
+          .hero-image img {
+            margin: 6px 0;
+          }
+
+          .message-text {
+            margin-inline: auto;
+          }
+
+          h1 {
+            font-size: 35px;
+            text-align: center;
+            white-space: normal;
+            margin-inline: auto;
+            margin-block: 14px 6px;
+          }
+
+          &:dir(rtl) {
+            margin: auto auto 0;
+            border-radius: 8px 8px 0 0;
+          }
+        }
+
+        .section-main {
+          margin: 0 auto auto;
+          height: $small-main-section-height;
+
+          .main-content {
+            border-radius: 0 0 8px 8px;
+            padding: 30px 0 0;
+
+            .main-content-inner {
+              align-items: center;
+            }
+
+            .logo-container {
+              text-align: center;
+
+              .brand-logo {
+                min-height: 25px;
+
+                &,
+                &:dir(rtl) {
+                  background-position: center;
+                }
+              }
+            }
+
+            .welcome-text {
+              align-items: center;
+              text-align: center;
+              margin-inline: 0;
+              padding-inline: 30px;
+
+              .spacer-bottom,
+              .spacer-top {
+                display: none;
+              }
+            }
+
+            .action-buttons {
+              text-align: center;
+
+              .checkbox-container {
+                display: none;
+              }
+
+              .secondary-cta {
+                position: relative;
+                margin-block: 10px 0;
+                bottom: 0;
+              }
+            }
+
+            .primary,
+            .secondary {
+              min-width: 240px;
+            }
+
+            .colorway-text {
+              text-align: center;
+              margin-inline: 30px;
+            }
+
+            .steps {
+              padding-block: 0;
+              margin: 0;
+
+              &.progress-bar {
+                margin-inline: 0;
+              }
+            }
+          }
+
+          .additional-cta {
+            &.cta-link {
+              align-self: center;
+            }
+          }
+
+          .dismiss-button {
+            top: -$small-secondary-section-height;
+          }
+
+          &:dir(rtl) {
+            margin: 0 auto auto;
+
+            .main-content {
+              border-radius: 0 0 8px 8px;
+            }
+          }
+        }
+
+      }
+
+      @media only screen and (max-height: 650px) {
+        // Hide the "Sign in" button on the welcome screen when it would
+        // otherwise overlap the screen. We'd reposition it, but then it would
+        // overlap the dismiss button. We may change the alignment so they don't
+        // overlap in a future revision.
+        @media (min-width: 800px) and (max-width: 990px) {
+          .section-main .secondary-cta.top {
+            display: none;
+          }
+        }
+
+        // Reposition the "Sign in" button on the welcome screen to move inside
+        // the screen when it would otherwise overlap the screen.
+        @media (max-width: 590px) {
+          .section-main .secondary-cta.top {
+            position: absolute;
+            padding: 0;
+            top: 0;
+            inset-inline-end: 0;
+          }
+        }
+      }
+    }
+  }
+
+  .brand-logo {
+    margin-block: 60px 10px;
+    transition: var(--transition);
+    height: 80px;
+
+    &.cta-top {
+      margin-top: 25px;
+    }
+
+    &.hide {
+      visibility: hidden;
+      padding: unset;
+      margin-top: 50px;
+    }
+  }
+
+  .rtamo-theme-icon {
+    max-height: 30px;
+    border-radius: 2px;
+    margin-bottom: 10px;
+    margin-top: 24px;
+  }
+
+  .rtamo-icon {
+    text-align: start;
+
+    @media only screen and (max-width: 800px) {
+      text-align: center;
+    }
+  }
+
+  .text-link {
+    @include text-link-styles;
+  }
+
+  .welcome-text {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin: 0.5em 1em;
+    transition: var(--transition);
+
+    h1,
+    h2 {
+      color: var(--in-content-page-color);
+      line-height: 1.5;
+    }
+
+    h1 {
+      font-size: 24px;
+      font-weight: 600;
+      margin: 0 6px;
+      letter-spacing: -0.02em;
+      outline: none;
+    }
+
+    h2 {
+      font-size: 16px;
+      font-weight: normal;
+      margin: 10px 6px 0;
+      max-width: 750px;
+      letter-spacing: -0.01em;
+    }
+
+    &.fancy {
+      h1 {
+        background-image: linear-gradient(90deg, #9059FF, #FF4AA2, #FF8C00, #FF4AA2, #9059FF);
+        background-clip: text;
+        background-size: 200%;
+
+        @media (prefers-contrast: no-preference) {
+          color: transparent;
+        }
+
+        @media (prefers-color-scheme: dark) {
+          background-image: linear-gradient(90deg, #C688FF, #FF84C0, #FFBD4F, #FF84C0, #C688FF);
+
+          &::selection {
+            color: #FFF;
+            background-color: #696977;
+          }
+        }
+      }
+    }
+
+    &.shine {
+      h1 {
+        animation: shine 50s linear infinite;
+        background-size: 400%;
+      }
+
+      @keyframes shine {
+        to {
+          background-position: 400%;
+        }
+      }
+    }
+
+    .cta-paragraph {
+      a {
+        margin: 0;
+        text-decoration: underline;
+        cursor: pointer;
+      }
+    }
+  }
+
+  // Override light and dark mode fancy title colors for use over light and dark backgrounds
+  .screen.light-text .welcome-text.fancy h1 {
+    background-image: linear-gradient(90deg, #C688FF, #FF84C0, #FFBD4F, #FF84C0, #C688FF);
+  }
+
+  .screen.dark-text .welcome-text.fancy h1 {
+    background-image: linear-gradient(90deg, #9059FF, #FF4AA2, #FF8C00, #FF4AA2, #9059FF);
+  }
+
+  .welcomeZap {
+    span {
+      position: relative;
+      z-index: 1;
+      white-space: nowrap;
+    }
+
+    .zap {
+      &::after {
+        display: block;
+        background-repeat: no-repeat;
+        background-size: 100% 100%;
+        content: '';
+        position: absolute;
+        top: calc(100% - 0.15em);
+        width: 100%;
+        height: 0.3em;
+        left: 0;
+        z-index: -1;
+        transform: scaleY(3);
+      }
+
+      &.short::after {
+        background-image:  url('chrome://activity-stream/content/data/content/assets/short-zap.svg');
+      }
+
+      &.long::after {
+        background-image:  url('chrome://activity-stream/content/data/content/assets/long-zap.svg');
+      }
+    }
+  }
+
+  .language-loader {
+    filter: invert(1);
+    margin-inline-end: 10px;
+    position: relative;
+    top: 3px;
+    width: 16px;
+    height: 16px;
+    margin-top: -6px;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .language-loader {
+      filter: invert(0);
+    }
+  }
+
+  .tiles-theme-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 10px auto;
+  }
+
+  .sr-only {
+    opacity: 0;
+    overflow: hidden;
+    position: absolute;
+
+    &.input {
+      height: 1px;
+      width: 1px;
+    }
+  }
+
+  .tiles-theme-section {
+    border: 0;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 5px;
+    justify-content: space-evenly;
+    margin-inline: 10px;
+    padding: 10px;
+    transition: var(--transition);
+
+    &:hover,
+    &:active,
+    &:focus-within {
+      border-radius: 8px;
+      outline: 2px solid var(--in-content-primary-button-background);
+    }
+
+    .theme {
+      align-items: center;
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      padding: 0;
+      min-width: 50px;
+      width: 180px;
+      color: #000;
+      box-shadow: none;
+      border-radius: 4px;
+      cursor: pointer;
+      z-index: 0;
+
+      &.colorway {
+        width: auto;
+      }
+
+      &:focus,
+      &:active {
+        outline: initial;
+        outline-offset: initial;
+      }
+
+      .icon.colorway,
+      .label.colorway {
+        width: 20px;
+        height: 20px;
+      }
+
+      .icon {
+        background-size: cover;
+        width: 40px;
+        height: 40px;
+        border-radius: 40px;
+        outline: 1px solid var(--in-content-border-color);
+        outline-offset: -0.5px;
+        z-index: -1;
+
+        &:dir(rtl) {
+          transform: scaleX(-1);
+        }
+
+        &:focus,
+        &:active,
+        &.selected {
+          outline: 2px solid var(--in-content-primary-button-background);
+          outline-offset: 2px;
+        }
+
+        &.light {
+          background-image: url('resource://builtin-themes/light/icon.svg');
+        }
+
+        &.dark {
+          background-image: url('resource://builtin-themes/dark/icon.svg');
+        }
+
+        &.alpenglow {
+          background-image: url('resource://builtin-themes/alpenglow/icon.svg');
+        }
+
+        &.default,
+        &.automatic {
+          background-image: url('resource://default-theme/icon.svg');
+
+          &.colorway {
+            background-image: url('chrome://activity-stream/content/data/content/assets/default.svg');
+          }
+        }
+
+        &.playmaker {
+          background-image: url('resource://builtin-themes/colorways/2022playmaker/balanced/icon.svg');
+        }
+
+        &.expressionist {
+          background-image: url('resource://builtin-themes/colorways/2022expressionist/balanced/icon.svg');
+        }
+
+        &.visionary {
+          background-image: url('resource://builtin-themes/colorways/2022visionary/balanced/icon.svg');
+        }
+
+        &.dreamer {
+          background-image: url('resource://builtin-themes/colorways/2022dreamer/balanced/icon.svg');
+        }
+
+        &.innovator {
+          background-image: url('resource://builtin-themes/colorways/2022innovator/balanced/icon.svg');
+        }
+
+        &.activist {
+          background-image: url('resource://builtin-themes/colorways/2022activist/balanced/icon.svg');
+        }
+      }
+
+      .text {
+        display: flex;
+        color: var(--in-content-page-color);
+        font-size: 14px;
+        font-weight: normal;
+        line-height: 20px;
+        margin-inline-start: 0;
+        margin-top: 9px;
+      }
+    }
+
+    legend {
+      cursor: default;
+    }
+  }
+
+  .tiles-container {
+    margin: 10px auto;
+
+    &.info {
+      padding: 6px 12px 12px;
+
+      &:hover,
+      &:focus {
+        background-color: rgba(217, 217, 227, 30%);
+        border-radius: 4px;
+      }
+    }
+  }
+
+  .tiles-delayed {
+    animation: fadein 0.4s;
+  }
+
+  .multi-select-container {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    margin-block: -1em 1em;
+    color: #5B5B66;
+    font-weight: 400;
+    font-size: 14px;
+    text-align: initial;
+    transition: var(--transition);
+    z-index: 1;
+
+    .checkbox-container {
+      display: flex;
+      margin-bottom: 16px;
+    }
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .multi-select-container {
+      color: #CFCFD8;
+    }
+  }
+
+  @media only screen and (max-width: 800px) {
+    .multi-select-container {
+      padding: 0 30px;
+    }
+  }
+
+  .mobile-downloads {
+    .qr-code-image {
+      margin: 24px 0 10px;
+      width: 113px;
+      height: 113px;
+    }
+
+    .email-link {
+      font-size: 16px;
+      font-weight: 400;
+      background: none;
+
+      @include text-link-styles;
+
+      &:hover {
+        background: none;
+      }
+    }
+
+    .ios button {
+      background-image: url('chrome://app-marketplace-icons/locale/ios.svg');
+    }
+
+    .android button {
+      background-image: url('chrome://app-marketplace-icons/locale/android.png');
+    }
+  }
+
+  .mobile-download-buttons {
+    list-style: none;
+    padding: 10px 0;
+    margin: 0;
+
+    li {
+      display: inline-block;
+
+      button {
+        display: inline-block;
+        height: 45px;
+        width: 152px;
+        background-repeat: no-repeat;
+        background-size: contain;
+        background-position: center;
+        box-shadow: none;
+        border: 0;
+      }
+
+      &:not(:first-child) {
+        margin-inline: 5px 0;
+      }
+    }
+  }
+
+  .dismiss-button {
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    left: auto;
+    right: 0;
+    box-sizing: border-box;
+    padding: 0;
+    margin: 16px;
+    display: block;
+    float: inline-end;
+    background: url('chrome://global/skin/icons/close.svg') no-repeat center / 16px;
+    height: 32px;
+    width: 32px;
+    align-self: end;
+    // override default min-height and min-width for buttons
+    min-height: 32px;
+    min-width: 32px;
+    -moz-context-properties: fill;
+    fill: currentColor;
+    transition: var(--transition);
+
+    &:dir(rtl) {
+      left: 0;
+      right: auto;
+    }
+  }
+
+  @keyframes fadein {
+    from { opacity: 0; }
+  }
+
+  .secondary-cta {
+    display: flex;
+    align-items: end;
+    flex-direction: row;
+    justify-content: center;
+    font-size: 14px;
+    transition: var(--transition);
+
+    &.top {
+      justify-content: end;
+      padding-inline-end: min(150px, 500px - 70vh);
+      padding-top: 4px;
+      position: absolute;
+      top: 10px;
+      inset-inline-end: 20px;
+      z-index: 2;
+    }
+
+    span {
+      color: var(--grey-subtitle-1);
+      margin: 0 4px;
+    }
+  }
+
+  .message-text,
+  .attrib-text {
+    transition: var(--transition);
+  }
+
+  .helptext {
+    padding: 1em;
+    text-align: center;
+    color: var(--grey-subtitle-1);
+    font-size: 12px;
+    line-height: 18px;
+
+    &.default {
+      align-self: center;
+      max-width: 40%;
+    }
+
+    span {
+      padding-inline-end: 4px;
+    }
+  }
+
+  .helptext-img {
+    height: 1.5em;
+    width: 1.5em;
+    margin-inline-end: 4px;
+    vertical-align: middle;
+
+    &.end {
+      margin: 4px;
+    }
+
+    &.footer {
+      vertical-align: bottom;
+    }
+  }
+
+  .steps {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    margin-top: 0;
+    padding-block: 16px 0;
+    transition: var(--transition);
+    z-index: -1;
+    height: 48px;
+    box-sizing: border-box;
+
+    &.has-helptext {
+      padding-bottom: 0;
+    }
+
+    .indicator {
+      width: 0;
+      height: 0;
+      margin-inline-end: 4px;
+      margin-inline-start: 4px;
+      background: var(--grey-subtitle-1);
+      border-radius: 5px;
+      // using border will show up in Windows High Contrast Mode to improve accessibility.
+      border: 3px solid var(--in-content-button-text-color);
+      opacity: 0.35;
+      box-sizing: inherit;
+
+      &.current {
+        opacity: 1;
+        border-color: var(--checkbox-checked-bgcolor);
+
+        // This is the only step shown, so visually hide it to maintain spacing.
+        &:last-of-type:first-of-type {
+          opacity: 0;
+        }
+      }
+    }
+
+    &.progress-bar {
+      height: 6px;
+      padding-block: 0;
+      margin-block: 42px 0;
+      background-color: color-mix(in srgb, var(--in-content-button-text-color) 25%, transparent);
+      justify-content: start;
+      opacity: 1;
+      transition: none;
+
+      .indicator {
+        width: 100%;
+        height: 100%;
+        margin-inline: -1px;
+        background-color: var(--checkbox-checked-bgcolor);
+        border: 0;
+        border-radius: 0;
+        opacity: 1;
+        transition: var(--progress-bar-transition);
+        translate: calc(var(--progress-bar-progress, 0%) - 100%);
+
+        &:dir(rtl) {
+          translate: calc(var(--progress-bar-progress, 0%) * -1 + 100%);
+        }
+      }
+    }
+  }
+
+  .additional-cta-container {
+    &[flow] {
+      display: flex;
+      flex-flow: column wrap;
+      align-items: center;
+
+      &[flow='row'] {
+        flex-direction: row;
+        justify-content: center;
+
+        .secondary-cta {
+          flex-basis: 100%;
+        }
+      }
+    }
+  }
+
+  .primary,
+  .secondary,
+  .additional-cta {
+    font-size: 13px;
+    line-height: 16px;
+    padding: 11px 15px;
+    transition: var(--transition);
+
+    &.rtamo {
+      margin-top: 24px;
+    }
+  }
+
+  .secondary {
+    background-color: var(--in-content-button-background);
+    color: var(--in-content-button-text-color);
+  }
+
+  // Styles specific to background noodles, with screen-by-screen positions
+  .noodle {
+    display: block;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    position: absolute;
+    transition: var(--transition);
+
+    // Flip noodles in a way that combines individual transforms.
+    &:dir(rtl) {
+      scale: -1 1;
+    }
+  }
+
+  .outline-L {
+    background-image: url('chrome://activity-stream/content/data/content/assets/noodle-outline-L.svg');
+  }
+
+  .solid-L {
+    background-image: url('chrome://activity-stream/content/data/content/assets/noodle-solid-L.svg');
+    -moz-context-properties: fill;
+    fill: var(--in-content-page-background);
+    display: none;
+  }
+
+  .purple-C {
+    background-image: url('chrome://activity-stream/content/data/content/assets/noodle-C.svg');
+    -moz-context-properties: fill;
+    fill: #E7258C;
+  }
+
+  .orange-L {
+    background-image: url('chrome://activity-stream/content/data/content/assets/noodle-solid-L.svg');
+    -moz-context-properties: fill;
+    fill: #FFA437;
+  }
+
+  .screen-1 {
+    .section-main {
+      z-index: 1;
+      margin: auto;
+    }
+
+    // Position of noodles on second screen
+    .outline-L {
+      width: 87px;
+      height: 80px;
+      transform: rotate(10deg) translate(-30%, 200%);
+      transition-delay: 0.4s;
+      z-index: 2;
+    }
+
+    .orange-L {
+      width: 550px;
+      height: 660px;
+      transform: rotate(-155deg) translate(11%, -18%);
+      transition-delay: 0.2s;
+    }
+
+    .purple-C {
+      width: 310px;
+      height: 260px;
+      transform: translate(-18%, -67%);
+    }
+
+    .yellow-circle {
+      width: 165px;
+      height: 165px;
+      border-radius: 50%;
+      transform: translate(230%, -5%);
+      background: #952BB9;
+      transition-delay: -0.2s;
+    }
+  }
+
+  // Defining the timing of the transition-in for items within the dialog,
+  // These longer delays are to allow for the dialog to slide down on first screen
+  .dialog-initial {
+    .brand-logo {
+      transition-delay: 0.6s;
+    }
+
+    .welcome-text {
+      transition-delay: 0.8s;
+    }
+
+    .tiles-theme-section,
+    .multi-select-container,
+    migration-wizard {
+      transition-delay: 0.9s;
+    }
+
+    .primary,
+    .secondary,
+    .secondary-cta,
+    .steps,
+    .cta-link {
+      transition-delay: 1s;
+    }
+  }
+
+  // Delays for transitioning-in of intermediate screens
+  .screen:not(.dialog-initial) {
+    .tiles-theme-section,
+    .multi-select-container,
+    .colorway-text {
+      transition-delay: 0.2s;
+    }
+
+    .primary,
+    .secondary,
+    .secondary-cta,
+    .cta-link {
+      transition-delay: 0.4s;
+    }
+  }
+
+  .screen-2 {
+    .section-main {
+      z-index: 1;
+      margin: auto;
+    }
+
+    // Position of noodles on third screen
+    .outline-L {
+      width: 87px;
+      height: 80px;
+      transform: rotate(250deg) translate(-420%, 425%);
+      transition-delay: 0.2s;
+      z-index: 2;
+    }
+
+    .orange-L {
+      height: 800px;
+      width: 660px;
+      transform: rotate(35deg) translate(-10%, -7%);
+      transition-delay: -0.4s;
+    }
+
+    .purple-C {
+      width: 392px;
+      height: 394px;
+      transform: rotate(260deg) translate(-34%, -35%);
+      transition-delay: -0.2s;
+      fill: #952BB9;
+    }
+
+    .yellow-circle {
+      width: 165px;
+      height: 165px;
+      border-radius: 50%;
+      transform: translate(160%, 130%);
+      background: #E7258C;
+    }
+  }
+
+  &.transition-in {
+    .noodle {
+      opacity: 0;
+      rotate: var(--rotate);
+      scale: var(--scale);
+    }
+
+    .dialog-initial {
+      .main-content,
+      .dismiss-button {
+        translate: 0 calc(-2 * var(--translate));
+      }
+
+      .brand-logo,
+      .steps {
+        opacity: 0;
+        translate: 0 calc(-1 * var(--translate));
+      }
+    }
+
+    .screen {
+      .welcome-text,
+      .multi-select-container,
+      .tiles-theme-section,
+      .colorway-text,
+      .primary,
+      .checkbox-container:not(.multi-select-item),
+      .secondary,
+      .secondary-cta:not(.top),
+      .cta-link,
+      migration-wizard {
+        opacity: 0;
+        translate: 0 calc(-1 * var(--translate));
+      }
+
+      &:not(.dialog-initial) {
+        .steps:not(.progress-bar) {
+          opacity: 0.2;
+        }
+      }
+    }
+  }
+
+  &.transition-out {
+    .noodle {
+      opacity: 0;
+      rotate: var(--rotate);
+      scale: var(--scale);
+      transition-delay: 0.2s;
+    }
+
+    .screen:not(.dialog-last) {
+      .main-content {
+        overflow: hidden;
+      }
+
+      .welcome-text,
+      .multi-select-container {
+        opacity: 0;
+        translate: 0 var(--translate);
+        transition-delay: 0.1s;
+      }
+
+      // content that is nested between inner main content and navigation CTAs
+      // requires an additional 0.1s transition to avoid overlap
+      .tiles-theme-section,
+      .colorway-text,
+      migration-wizard {
+        opacity: 0;
+        translate: 0 var(--translate);
+        transition-delay: 0.2s;
+      }
+
+      .primary,
+      .checkbox-container:not(.multi-select-item),
+      .secondary,
+      .secondary-cta:not(.top),
+      .cta-link {
+        opacity: 0;
+        translate: 0 var(--translate);
+        transition-delay: 0.3s;
+      }
+
+      .steps:not(.progress-bar) {
+        opacity: 0.2;
+        transition-delay: 0.5s;
+      }
+    }
+
+    .dialog-last {
+      .noodle {
+        transition-delay: 0s;
+      }
+
+      .main-content,
+      .dismiss-button {
+        opacity: 0;
+        translate: 0 calc(2 * var(--translate));
+        transition-delay: 0.4s;
+      }
+    }
+  }
+
+  migration-wizard {
+    width: unset;
+    transition: var(--transition);
+
+    &::part(buttons) {
+      margin-top: 32px;
+      justify-content: flex-start;
+    }
+
+    &::part(deck) {
+      font-size: 0.83em;
+    }
+  }
+}