/* 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';

// Don't import any styles that are not scoped to .onboardingContainer. This
// stylesheet is loaded by FeatureCallout.sys.mjs into the browser chrome. To
// add other stylesheets to about:welcome or spotlight, add them to
// aboutwelcome.html or spotlight.html. Ideally, there should be no `@import`
// statements in the built aboutwelcome.css file.
@import '../../asrouter/content-src/styles/feature-callout';

/* stylelint-disable max-nesting-depth */

$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;
$double-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;
  }
}

// Allows fullscreen scrolling, for addons picker which
// may have taller content than other onboarding screens.
// Overrides fixed height styles to avoid clipping.
.onboardingContainer:has(.addons-picker-container) {
  .screen[pos='split'][fullscreen] {
    height: auto;

    .section-secondary {
      height: auto;
    }

    .main-content {
      min-height: 100vh;
    }
  }
}

.onboardingContainer:has(.embedded-backup-restore-container) {
  .screen[pos='split'][fullscreen] {
    .section-main {
      .main-content {
        .welcome-text {
          margin-block: 15px 22px;

          h1, h2 {
            max-width: 300px;
          }
        }
      }
    }
  }
}

.onboardingContainer {
  --grey-subtitle-1: light-dark(#696977, #FFF);
  --mr-welcome-background-color: light-dark(#F8F6F4, #333336);
  --mr-screen-heading-color: var(--text-color);
  --mr-welcome-background-gradient: linear-gradient(
    0deg,
    light-dark(rgba(144, 89, 255, 20%), rgba(144, 89, 255, 30%)) 0%,
    light-dark(rgba(2, 144, 238, 20%), rgba(2, 144, 238, 30%)) 100%
  );
  --mr-screen-background-color: light-dark(#F8F6F4, #62697A);
  --single-select-border-color: #8F8F9D;
  --single-select-hover-color: light-dark(#DEDEDF, #52525E);
  --picker-background-color: color-mix(in srgb, transparent 98%, light-dark(black, white) 2%);
  --picker-hover-background-color: color-mix(in srgb, transparent 95%, light-dark(black, white) 5%);
  --picker-border-color: var(--border-color);
  --picker-checked-border-color: var(--border-color-selected);
  --picker-hover-border-color: var(--picker-border-color);
  --picker-focus-ring-color: var(--color-accent-primary-selected);
  --picker-checkbox-color: var(--color-accent-primary-selected);
  --picker-checkbox-hover-color: var(--picker-checkbox-color);
  --picker-backup-flair-background: color-mix(in srgb, var(--color-accent-primary) 20%, transparent);
  --picker-backup-flair-color: var(--color-accent-primary);

  @media (forced-colors: active) {
    --picker-background-color: ButtonFace;
    --picker-hover-background-color: SelectedItemText;
    --picker-border-color: ButtonText;
    --picker-checked-border-color: var(--picker-border-color);
    --picker-hover-border-color: SelectedItem;
    --picker-focus-ring-color: CanvasText;
    --picker-checkbox-color: ButtonText;
    --picker-checkbox-hover-color: SelectedItem;
  }

  font-family: system-ui;
  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(--background-color-canvas);
  }

  // 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);
  }

  &:has([pos='split'][fullscreen]) {
    min-height: 100vh;
    height: auto;
    display: flex;
    flex-direction: column;
  }

  .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(--background-color-canvas);
    border-radius: var(--border-radius-large);
    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;

    @media (prefers-contrast){
      border: 1px solid var(--text-color)
    }

    &.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(--button-background-color);
    border: var(--button-border);
    line-height: 12px;
    font-size: 0.72em;
    font-weight: var(--font-weight-semibold);
    padding: 8px 16px;
    text-decoration: none;
    cursor: default;

    &:hover,
    &[open] {
      background-color: var(--button-background-color-hover);
      color: var(--button-text-color-hover);

      &:active {
        background-color: var(--button-background-color-active);
        color: var(--button-text-color-active);
      }
    }
  }

  @mixin text-link-styles {
    background: none;
    text-decoration: underline;
    cursor: pointer;
    color: var(--link-color);

    &:hover {
      color: var(--link-color-hover);
    }

    &:active {
      color: var(--link-color-active);

      @media (prefers-contrast) {
        text-decoration: none;
      }
    }
  }

  .screen {
    display: flex;
    position: relative;
    flex-flow: row nowrap;
    height: 100%;
    min-height: 500px;
    overflow: hidden;

    &.light-text {
      --text-color: rgb(251, 251, 254);
      --button-text-color-primary: rgb(43, 42, 51);
      --button-text-color-primary-hover: rgb(43, 42, 51);
      --button-background-color-primary: rgb(0, 221, 255);
      --button-background-color-primary-hover: rgb(128, 235, 255);
      --button-background-color-primary-active: rgb(170, 242, 255);
      --button-text-color: var(--text-color);
    }

    &.dark-text {
      --text-color: rgb(21,  20,  26);
      --button-text-color-primary: rgb(251, 251, 254);
      --button-text-color-primary-hover: rgb(251, 251, 254);
      --button-background-color-primary: #0061E0;
      --button-background-color-primary-hover: #0250BB;
      --button-background-color-primary-active: #053E94;
      --button-border-color-primary: transparent;
      --button-border-color-primary-hover: transparent;
      --button-text-color: var(--text-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: $double-section-width;
          height: $split-screen-height;
        }

        .main-content {
          background-color: var(--mr-welcome-background-color);
          border-radius: var(--border-radius-medium);
          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(--button-text-color);
            }
          }
        }
      }

      &.addons-picker {
        justify-content: center;
        align-items: center;
        background: none;

        .section-main {
          width: $double-section-width;
          height: $split-screen-height;
        }

        .main-content {
          background-color: var(--background-color-canvas);
          border-radius: var(--border-radius-medium);
          box-shadow: 0 2px 14px rgba(58, 57, 68, 20%);
          overflow: hidden;

          .welcome-text {
            display: flex;
            margin: 0;
          }

          .main-content-inner {
            padding: 25px 56px 0;
            justify-content: space-between;
          }

          h1,
          h2 {
            align-self: start;
          }

          h2 {
            font-size: 15px;
            text-align: start;
          }

          .brand-logo {
            display: block;
            margin: 40px 56px 0;
            transition: var(--transition);
            height: 30px;
          }

          .additional-cta {
            display: block;
            margin: 8px 0;

            &.cta-link {
              background: none;
              padding: 0;
              font-weight: normal;

              @include text-link-styles;
            }

            &.secondary {
              &:hover {
                background-color: var(--button-background-color-hover);
              }
            }
          }

          .secondary-cta {
            @include arrow-icon-styles;

            justify-content: end;

            .secondary {
              @include secondary-cta-styles;

              color: var(--button-text-color);
            }
          }
        }

        .addon-container {
          display: flex;
          border: 1px solid var(--border-color);
          box-shadow: 0 1px 2px 0 var(--border-color);
          border-radius: var(--border-radius-small);
          margin: 5px auto;
          text-align: start;

          .rtamo-icon {
            img {
              margin: 10px;
            }
          }

          .addon-details {
            display: grid;
            width: 70%;
          }

          .addon-title {
            margin: 10px 0 3px;
            font-size: 16px;
            font-weight: var(--heading-font-weight);
          }

          .addon-description {
            margin: 2px 0 10px;
            font-size: 13px;
            font-weight: normal;
          }

          .install-button-wrapper {
            display: flex;
          }

          button {
            align-self: center;
            width: 124px;
          }
        }

        .loader {
          width: 1em;
          height: 1em;
          border: 3px solid var(--button-text-color-primary);
          border-bottom-color: transparent;
          border-radius: var(--border-radius-circle);
          box-sizing: border-box;
          animation: rotation 1s linear infinite;
          justify-self: center;
        }

        @keyframes rotation {
          0% {
            transform: rotate(0deg);
          }

          100% {
            transform: rotate(360deg);
          }
        }

        .loaderContainer {
          display: flex;
          padding: 1.5px 37.5px;
          margin: auto;
        }
      }
    }

    &:not([pos='split']) {
      .secondary-cta {
        .secondary {
          @include text-link-styles;

          font-size: 14px;
          font-weight: normal;
          line-height: 20px;
        }

        &.top {
          button {
            color: #FFF;

            &:hover {
              color: #E0E0E6;
            }
          }
        }
      }

      migration-wizard {
        padding: 5px 60px;

        &::part(header){
          text-align: center;
        }

        &::part(buttons){
          margin: 32px auto 0;
        }
      }

      .welcome-text {
        &:empty {
          margin: 0;
        }
      }
    }

    &[pos='split'] {

      // Prevent the drop shadow from appearing in fullscreen mode
      &:where(:not([fullscreen])) {
        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: var(--border-radius-medium);
          inset: 0;
          margin: auto;
          pointer-events: none;
        }
      }

      #content-tiles-container {
        margin: 0;

        .content-tile:not(:only-child) {
          margin-block: 0 24px;
        }

        .content-tile:last-child {
          margin-block: 0 40px;
        }

        .multi-select-container {
          padding: 0;
        }
      }

      .section-secondary,
      .section-main {
        width: $split-section-width;
        height: $split-screen-height;
      }

      .secondary-cta.top {
        position: fixed;
        padding-inline-end: 0;

        button {
          padding: 7px 15px;
        }
      }

      .secondary-buttons-top-container {
        .secondary-cta.top {
          position: relative;
          padding-top: 0;
          top: 0;
          inset-inline-end: 0;
        }
      }

      .section-main {
        flex-direction: row;
        display: block;
        margin: auto;
        margin-inline-start: 0;

        &:dir(rtl) {
          margin: auto;
          margin-inline-start: 0;
        }

        &.embedded-migration {
          .main-content {
            padding-block: 100px 0;
          }
        }

        .main-content {
          border-radius: 0 var(--border-radius-medium) var(--border-radius-medium) 0;
          overflow: hidden;
          padding-inline: 35px 20px;
          padding-block: 120px 0;
          box-shadow: none;

          &.no-steps {
            padding-bottom: 48px;
          }

          &:dir(rtl) {
            border-radius: var(--border-radius-medium) 0 0 var(--border-radius-medium);
          }

          .legal-paragraph {
            text-align: start;
            font-size: 11px;
            line-height: 16.5px;
            color: light-dark(#5B5B66, #CFCFD8);

            @mixin narrow-legal-paragraph {
              padding-inline: 30px;
            }

            @media only screen and (width <= 800px) {
              @include narrow-legal-paragraph;
            }

            [narrow] & {
              @include narrow-legal-paragraph;
            }

          }

          .main-content-inner {
            min-height: 330px;

            .mobile-download-buttons {
              padding: 0;
              margin-inline-start: -5px;
              display: flex;

              button {
                cursor: pointer;
              }
            }

            .qr-code-image {
              margin: 5px 0 10px;
              display: flex;
            }

            .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-box {
              margin: 8px 0;

              .additional-cta {
                margin: 0;

                &.cta-link {
                  @include text-link-styles;

                  padding: 0;
                  font-weight: normal;
                }

                &.secondary {
                  &:hover,
                  &[open] {
                    background-color: var(--button-background-color-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;
            }

            .loader {
              width: 1em;
              height: 1em;
              border: 3px solid var(--button-text-color-primary);
              border-bottom-color: transparent;
              border-radius: var(--border-radius-circle);
              box-sizing: border-box;
              animation: rotation 1s linear infinite;
              justify-self: center;
            }

            @keyframes rotation {
              0% {
                transform: rotate(0deg);
              }

              100% {
                transform: rotate(360deg);
              }
            }

            .loaderContainer {
              display: flex;
              padding: 1.5px 37.5px;
              margin: auto;
            }
          }

          .logo-container {
            text-align: start;
          }

          .brand-logo {
            height: 25px;
            margin-block: 0;
          }

          .logo-alt {
            width: inherit;
            height: inherit;
          }

          .welcome-text {
            margin-inline: 0 10px;
            margin-block: 10px 35px;
            text-align: initial;
            align-items: initial;
            max-width: 400px;

            &: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;
              color: light-dark(#5B5B66, #CFCFD8);
            }
          }

          .welcome-text h1,
          .primary {
            margin: 0;
          }

          .steps {
            z-index: 1;

            &.progress-bar {
              margin-inline: -35px;
            }
          }

          @media (prefers-contrast) {
            border: 1px solid var(--text-color);

            .steps.progress-bar {
              border-top: 1px solid var(--text-color);
              background-color: var(--background-color-canvas);

              .indicator {
                background-color: var(--color-accent-primary);
              }
            }
          }
        }
      }

      .section-secondary {
        --mr-secondary-position: center center / auto 350px;

        border-radius: var(--border-radius-medium) 0 0 var(--border-radius-medium);
        margin: auto 0 auto auto;
        display: flex;
        align-items: center;
        -moz-context-properties: fill, stroke, fill-opacity, stroke-opacity;
        stroke: currentColor;
        position: relative;

        &:dir(rtl) {
          border-radius: 0 var(--border-radius-medium) var(--border-radius-medium) 0;
          margin: auto;
          margin-inline-end: 0;
        }

        h1 {
          color: var(--mr-screen-heading-color);
          font-weight: var(--font-weight-bold);
          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;

            @mixin narrow-hero-img {
              padding-bottom: unset;
            }

            @media only screen and (width <= 800px) {
              @include narrow-hero-img;
            }

            [narrow] & {
              @include narrow-hero-img;
            }
          }
        }
      }

      .multi-select-container {
        margin-inline: 0 10px;

        .checkbox-container {
          display: grid;

          label, p {
            grid-column: 2;
          }

          p {
            margin-block: 0.5em 0;
          }
        }

        @mixin narrow-multi-select-container {
          flex-direction: column;
          align-self: center;
          align-items: start;
          justify-content: center;
          width: 240px;
          padding: 0 30px;
          margin-inline: 0;
          box-sizing: content-box;
        }

        @media only screen and (width <= 800px) {
          @include narrow-multi-select-container;
        }

        [narrow] & {
          @include narrow-multi-select-container;
        }
      }

      .tiles-single-select-container {
        margin-block: -20px auto;
        align-items: initial;

        .select-item {
          min-width: 38px;
        }
      }

      @media only screen and (width >= 800px) {
        .tiles-single-select-section {
          margin-inline-start: -10px;
        }

        &[reverse-split] {
          flex-direction: row-reverse;

          .section-main {
            .main-content {
              border-radius: inherit;
            }

            margin: auto;
            margin-inline-end: 0;
            border-radius: var(--border-radius-medium) 0 0 var(--border-radius-medium);

            &:dir(rtl) {
              border-radius: 0 var(--border-radius-medium) var(--border-radius-medium) 0;
              margin: auto;
              margin-inline-end: 0;
            }
          }

          .section-secondary {
            margin: auto;
            margin-inline-start: 0;
            border-radius: 0 var(--border-radius-medium) var(--border-radius-medium) 0;

            &:dir(rtl) {
              border-radius: var(--border-radius-medium) 0 0 var(--border-radius-medium);
              margin: auto;
              margin-inline-start: 0;
            }
          }
        }
      }

      // duplicate the above styles for no-rdm. unfortunately SASS won't allow
      // us to combine these selectors.
      &:where([no-rdm='true']) {
        .tiles-single-select-section {
          margin-inline-start: -10px;
        }

        &[reverse-split] {
          flex-direction: row-reverse;

          .section-main {
            .main-content {
              border-radius: inherit;
            }

            margin: auto;
            margin-inline-end: 0;
            border-radius: var(--border-radius-medium) 0 0 var(--border-radius-medium);

            &:dir(rtl) {
              border-radius: 0 var(--border-radius-medium) var(--border-radius-medium) 0;
              margin: auto;
              margin-inline-end: 0;
            }
          }

          .section-secondary {
            margin: auto;
            margin-inline-start: 0;
            border-radius: 0 var(--border-radius-medium) var(--border-radius-medium) 0;

            &:dir(rtl) {
              border-radius: var(--border-radius-medium) 0 0 var(--border-radius-medium);
              margin: auto;
              margin-inline-start: 0;
            }
          }
        }
      }

      &[fullscreen] {
        $split-section-width: 50%;
        $split-screen-height: 100%;

        min-height:100vh;

        .section-secondary,
        .section-main {
          width: $split-section-width;
          height: auto;
        }

        .section-main {
          margin: 0;
          display: flex;
        }

        .section-main .main-content {
          border-radius: 0;
          padding: 0;
          flex: 1;
          height: auto;

          h1 {
            width: auto;
          }

          .main-content-inner {
            min-height: 0;
            flex-grow: 0;
            padding-inline: 110px;
            margin-block: auto;
            padding-block: 40px;

            @media only screen and (width <= 800px) {
              padding-block: 20px;
            }

            .steps:not(.progress-bar) {
              justify-content: start;
              padding-top: 24px;
            }
          }

          .action-buttons {
            position: static;
            height: auto;

            .secondary-cta {
              inset-block-end: 26px;
              inset-inline-end: 30px;
            }
          }
        }

        .section-secondary {
          --mr-secondary-position: center center / 50%;

          border-radius: 0;
          margin: 0;

          .hero-image {
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;

            img {
              width: 30%;
            }
          }

          .message-text.hero-text {
            margin-block: auto;
            margin-inline: 17% auto;
            text-align: start;
            width: 100%;
            max-width: 450px;

            h1 {
              font-weight: var(--heading-font-weight);
              font-size: 80px;
              margin: 0;
              width: 100%;
              max-width: 100%;
            }

            h2 {
              font-size: 20px;
              margin: 0;
              margin-block-start: 24px;
              font-weight: var(--heading-font-weight);
              width: 100%;
            }
          }
        }

        .addons-picker-container {
          background: none;

          .addon-container {
            display: flex;
            flex-direction: row;
            border: 1px solid var(--border-color);
            box-shadow: 0 1px 2px 0 var(--border-color);
            border-radius: var(--border-radius-small);
            margin-block: 0 16px;
            text-align: start;
            padding: 16px;
            max-width: 800px;

            @media (800px <= width <= 990px) {
              flex-flow: row wrap;
            }

            .rtamo-icon {
              img {
                margin-inline: 0 16px;
              }
            }

            .addon-rows-container {
              flex-grow: 1;
              display: flex;
              flex-direction: column;

              .addon-row {
                display: flex;
                flex-grow: 1;
                justify-content: space-between;

                .install-button-wrapper {
                  display: block;

                  button {
                    padding-inline: 16px;
                    font-size: 12px;
                    padding-block: 0;
                    background-color: var(--button-background-color);
                    color: var(--button-text-color);
                    min-width: 0;

                    &:hover {
                      background-color: var(--button-background-color-hover);
                    }

                    &:active {
                      background-color: var(--button-background-color-active);
                    }
                  }
                }


                &:not(:last-child) {
                  margin-block: 0 12px;
                }

                .addon-author-details {
                  margin-block: 0 4px;

                  .addon-title {
                    font-size: 16px;
                    font-weight: var(--heading-font-weight);
                  }

                  .addon-author {
                    font-size: 12px;
                    margin-block: 2px 0;

                    .author-link {
                      background: none;
                      padding: 0;
                      font-weight: normal;
                      min-width: auto;
                      min-height: auto;
                      margin: 0;
                      text-align: start;

                      @include text-link-styles;
                    }

                    .addon-by-line {
                      margin-inline: 0 4px;
                    }
                  }
                }

                .addon-description {
                  font-size: 14px;
                }
              }
            }
          }

          .loader {
            width: 1em;
            height: 1em;
            border: 3px solid var(--button-text-color-primary);
            border-bottom-color: transparent;
            border-radius: var(--border-radius-circle);
            box-sizing: border-box;
            animation: rotation 1s linear infinite;
            justify-self: center;
          }

          @keyframes rotation {
            0% {
              transform: rotate(0deg);
            }

            100% {
              transform: rotate(360deg);
            }
          }

          .loaderContainer {
            display: flex;
            padding: 1.5px 37.5px;
            margin: auto;
          }
        }

        @mixin narrow-split-fullscreen {
          .section-main,
          .section-secondary {
            width: 100%;
          }

          .section-main {
            height: 75%;
            flex-grow: 1;
            margin: 0;
            display: flex;

            &[hide-secondary-section='responsive'] {
              height: 100%;

              .main-content {
                border-radius: 0;
                padding: 0;
                height: auto;
              }
            }
          }

          .section-main .main-content {
            .action-buttons .secondary-cta {
              inset-block-end: 0;
              inset-inline-end: 0;
            }

            .main-content-inner {
              padding-inline: 55px;
              margin-inline: auto;
            }
          }

          .section-secondary {
            --mr-secondary-position: center var(--mr-secondary-background-position-y) / 50%;

            height: 250px;

            .hero-image {
              img {
                width: 25%;
                max-height: 75%;
              }
            }
          }
        }

        @media only screen and (width <= 800px) {
          height: 100%;

          @include narrow-split-fullscreen;
        }

        [narrow] & {
          @include narrow-split-fullscreen;
        }
      }

      @mixin narrow-split {
        &:where(:not([no-rdm])) {
          flex-direction: column;
          min-height: $small-main-section-height + $small-secondary-section-height;

          &::before {
            width: $split-section-width;
          }

          &[reverse-split] {
            flex-direction: column;

            .section-secondary {
              border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;
              margin: auto;
              margin-bottom: 0;

              &:dir(rtl) {
                margin: auto;
                margin-bottom: 0;
                border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;
              }
            }

            .section-main {
              height: auto;
              margin: auto;
              margin-top: 0;
              border-radius: 0 0 var(--border-radius-medium) var(--border-radius-medium);

              &:dir(rtl) {
                margin: auto;
                margin-top: 0;
                border-radius: 0 0 var(--border-radius-medium) var(--border-radius-medium);
              }
            }
          }

          .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: var(--border-radius-medium) var(--border-radius-medium) 0 0;
            margin: auto;
            margin-bottom: 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;
              margin-bottom: 0;
              border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;
            }

            &.with-secondary-section-hidden {
              display: none;
            }
          }

          migration-wizard {
            &::part(deck){
              min-width: 330px;
              margin-inline: 36px;
            }
          }

          .section-main {
            margin: auto;
            margin-top: 0;
            height: $small-main-section-height;

            migration-wizard::part(buttons) {
              flex-direction: column;
              margin-inline: 46px;
            }

            &[hide-secondary-section='responsive'] {
              height: $split-screen-height;
              margin: auto;

              &:dir(rtl) {
                margin: auto;
              }

              .main-content {
                padding: 50px 0 0;
                border-radius: var(--border-radius-medium);

                &:dir(rtl) {
                  border-radius: var(--border-radius-medium);
                }
              }
            }

            .main-content {
              border-radius: 0 0 var(--border-radius-medium) var(--border-radius-medium);
              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;
                  }
                }

                .logo-alt {
                  width: inherit;
                  height: inherit;
                }
              }

              .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;
                margin-inline: 0;
              }

              .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: auto;
              margin-top: 0;

              .main-content {
                border-radius: 0 0 var(--border-radius-medium) var(--border-radius-medium);
              }
            }
          }
        }

        &[no-rdm] {
          width: 800px;

          &[reverse-split] {
            flex-direction: row-reverse;

            .section-main {
              .main-content {
                border-radius: inherit;
              }

              margin: auto;
              margin-inline-end: 0;
              border-radius: var(--border-radius-medium) 0 0 var(--border-radius-medium);

              &:dir(rtl) {
                border-radius: 0 var(--border-radius-medium) var(--border-radius-medium) 0;
                margin: auto;
                margin-inline-end: 0;
              }
            }

            .section-secondary {
              margin: auto;
              margin-inline-start: 0;
              border-radius: 0 var(--border-radius-medium) var(--border-radius-medium) 0;

              &:dir(rtl) {
                border-radius: var(--border-radius-medium) 0 0 var(--border-radius-medium);
                margin: auto;
                margin-inline-start: 0;
              }
            }
          }
        }
      }

      @media only screen and (width <= 800px) {
        @include narrow-split;
      }

      [narrow] & {
        @include narrow-split;
      }

      &:where(:not([fullscreen])) {
        @media only screen and (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 (800px <= 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.
          @mixin extra-narrow-secondary-cta {
            .section-main .secondary-buttons-top-container {
              position: absolute;
              padding: 0;
              top: 0;
              inset-inline-end: 0;
            }
          }

          @media (width <= 620px) {
            @include extra-narrow-secondary-cta;
          }

          [narrow] & {
            @media (width <= 620px) {
              @include extra-narrow-secondary-cta;
            }
          }
        }
      }
    }
  }

  .brand-logo {
    margin-block: 60px 10px;
    transition: var(--transition);
    height: 80px;
    user-select: none;

    &.cta-top {
      margin-top: 25px;
    }

    &.hide {
      visibility: hidden;
      padding: unset;
      margin-top: 50px;
    }
  }

  .logo-alt {
    width: inherit;
    height: inherit;
  }

  .rtamo-theme-icon {
    max-height: 30px;
    border-radius: var(--border-radius-xsmall);
    margin-bottom: 10px;
    margin-top: 24px;
  }

  .rtamo-icon {
    text-align: start;

    @mixin narrow-rtamo-icon {
      text-align: center;
    }

    @media only screen and (width <= 800px) {
      @include narrow-rtamo-icon;
    }

    [narrow] & {
      @include narrow-rtamo-icon;
    }
  }

  .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(--text-color);
      line-height: 1.5;
    }

    h1 {
      font-size: 24px;
      font-weight: var(--heading-font-weight);
      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,
          light-dark(#9059FF, #C688FF),
          light-dark(#FF4AA2, #FF84C0),
          light-dark(#FF8C00, #FFBD4F),
          light-dark(#FF4AA2, #FF84C0),
          light-dark(#9059FF, #C688FF)
        );
        background-clip: text;
        background-size: 200%;

        @media (prefers-contrast: no-preference) {
          color: transparent;
        }

        @media (prefers-color-scheme: dark) {
          &::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 {
    -moz-context-properties: fill;
    fill: currentColor;
    margin-inline-end: 10px;
    position: relative;
    top: 3px;
    width: 16px;
    height: 16px;
    margin-top: -6px;
  }

  .tiles-single-select-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-single-select-section {
    border: 0;
    outline: none;
    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: var(--border-radius-medium);
      outline: 2px solid var(--button-background-color-primary);
    }

    // single select and theme specific styles
    &.single-select, &.theme {
      flex-direction: row;
      padding-top: 5px;
      gap: 10px;
      justify-content: center;

      .select-item {
        position: relative;
        padding-top: 5px;
        border: 1px solid var(--single-select-border-color);
        border-radius: var(--border-radius-large);

        &:has(.input:focus),
        &:has(.selected) {
          outline: none;
        }

        &:has(.input:focus) {
          outline: 2px solid var(--button-background-color-primary);
          outline-offset: 5px;
        }

        &:has(.selected) {
          border: 1px solid var(--button-background-color-primary);
          border-radius: var(--border-radius-large);
        }

        &:hover {
          background-color: var(--single-select-hover-color);
        }

        &:focus-visible {
          outline: none;
          // Only highlight the image, not the frame around the image and the label
          .icon {
            outline: initial;
          }
        }

        .flair {
          height: 18px;
          border-radius: var(--border-radius-small);
          background-color: #9059FF;
          color: #FFF;
          padding: 2px 8px;
          position: absolute;
          right: 1px;
          top: -10px;
          line-height: 1;

          &.centered {
            /* stylelint-disable-next-line */
            border-radius: 8px 8px 0 0;
            background-color: var(--button-background-color-primary);
            position: relative;
            right: unset;
            top: -6px;
            line-height: 0.75;
            width: 100%;
            box-sizing: border-box;

            &.backup {
              /* stylelint-disable-next-line */
              border-radius: 10px 10px 0 0;
              background-color: var(--picker-backup-flair-background);
              color: var(--picker-backup-flair-color);

              &.spacer {
                background-color: transparent;
              }
            }
          }

          &.spacer {
            background-color: transparent;
          }
        }

        .icon {
          outline: none;
        }

        .text {
          margin-block: 8px;
        }

        .tile-list-container {
          display: flex;
          flex-direction: column;
          margin-inline-start: 20px;

          .tile-list-item {
            display: flex;

            &:last-child {
              margin-block-end: 8px;
            }
          }

          .tile-list-icon-wrapper {
            padding-block-start: 6px;
          }

          .tile-list-text {
            margin-inline-start: 8px;
            margin-inline-end: 20px;
            text-align: start;
          }
        }
      }
    }

    // single select and theme specific styles
    &.single-select, &.theme {
      &:hover, &:focus-within {
        outline: none;
      }

      .select-item {
        transition: var(--transition);

        &:has(.input:focus) {
          outline: 2px solid var(--button-background-color-primary);
          outline-offset: 2px;
        }
      }
    }

    .select-item {
      align-items: center;
      display: flex;
      flex-direction: column;
      flex: 1;
      padding: 0;
      min-width: 50px;
      box-shadow: none;
      border-radius: var(--border-radius-small);
      cursor: pointer;
      z-index: 0;
      transition: var(--transition);

      &.backup {
        cursor: default;
        width: 225.5px;
        padding-top: 0;

        &:has(.selected) {
          border: 1px solid var(--border-color-selected);
        }

        &:hover {
          background-color: transparent;
        }
      }

      &:focus,
      &:active {
        outline: initial;
        outline-offset: initial;
      }

      .icon {
        background-size: cover;
        width: 40px;
        height: 40px;
        border-radius: var(--border-radius-small);
        z-index: -1;

        &:dir(rtl) {
          transform: scaleX(-1);
        }


        &.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');
        }
      }

      .text {
        display: flex;
        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: var(--border-radius-small);
      }
    }
  }

  .tiles-delayed {
    animation: fadein 0.4s;
  }

  .multi-select-container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    flex-shrink: 0;
    align-items: flex-start;
    gap: 16px;
    margin-block: -1em 2em;
    margin-inline: 1em;
    font-weight: normal;
    font-size: 14px;
    text-align: initial;
    transition: var(--transition);
    z-index: 1;
    color: var(--text-color);

    @media not (prefers-contrast) {
      color: light-dark(#5B5B66, #CFCFD8);
    }

    #multi-stage-multi-select-label {
      // These styles are based on .welcome-text>h2 (subtitle).
      color: var(--text-color);
      line-height: 1.5;
      font-size: 16px;
      font-weight: normal;
      letter-spacing: -0.01em;
      // Try to get the label positioned the same way it would be if it was a
      // subtitle. -0.5em for the welcome-text margin, 1em for the
      // multi-select-container margin, and 10px for the desired margin between
      // the label and the title.
      margin: calc(-0.5em + 1em + 10px) 6px 0;
      max-width: 750px;
    }

    @at-root .onboardingContainer .screen[pos='split'] .multi-select-container #multi-stage-multi-select-label {
      margin: calc(-35px + 1em + 10px) 0 0;
      min-height: 1em;
      font-size: 15px;
      line-height: 1.5;

      @media not (prefers-contrast) {
        color: light-dark(#5B5B66, #CFCFD8);
      }
    }

    .checkbox-container {
      display: flex;

      > input {
        flex-grow: 0;
        flex-shrink: 0;
      }
    }
  }

  .confirmation-checklist-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 10px auto;

    .confirmation-checklist-container {
      display: flex;
      flex-direction: column;
      gap: 8px;

      .confirmation-checklist-item {
        display: flex;
        flex-direction: column;
        margin-inline-start: 20px;

        &:last-child {
          margin-block-end: 8px;
        }
      }

      .confirmation-checklist-icon-wrapper {
        display: flex;
        align-items: center;
      }

      .confirmation-checklist-text {
        margin-inline-start: 8px;
        font-weight: var(--font-weight-semibold);
      }

      .confirmation-checklist-subtext {
        margin-inline-start: 26px;
        text-align: start;
        font-size: 14px;
      }
    }
  }

  .mobile-downloads {
    .qr-code-image {
      margin: 24px 0 10px;
      width: 113px;
      height: 113px;
    }

    .email-link {
      @include text-link-styles;

      font-size: 16px;
      font-weight: normal;

      &: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;
      }
    }
  }

  .onboardingContainer .main-content.no-steps:has(button.content-tiles-header[aria-expanded='false']) {
    padding-bottom: 0;
  }

  #content-tiles-container button.tile-header,
  button.content-tiles-header {
    width: 100%;
    margin: 0;
    padding: 12px 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-width: 1px;
    border-radius: 0;

    @media (prefers-contrast: no-preference) {
      background-color: var(--background-color-canvas);
      border-color: var(--border-color);
    }

    cursor: pointer;
    // ensures focus ring is fully visible
    outline-offset: -12px;

    .arrow-icon {
      width: 1em;
      height: 1.5em;
      -moz-context-properties: fill;
      fill: currentColor;
      background: url('chrome://global/skin/icons/arrow-down.svg') center center / 100% no-repeat;
    }

    &[aria-expanded='true'] {
      border-end-start-radius: 0;
      border-end-end-radius: 0;

      .arrow-icon {
        background: url('chrome://global/skin/icons/arrow-up.svg') center center / 100% no-repeat;
      }
    }
  }

  button.content-tiles-header {
    margin: 0.5em 0 0;
    font-size: 11px;
    font-weight: normal;
    justify-content: center;
    border-width: 1px 0;

    @media (prefers-contrast: no-preference) {
      color: light-dark(#5B5B66, #CFCFD8);
    }

    @media (prefers-contrast) {
      color: var(--text-color);
    }

    .arrow-icon {
      margin-inline: 1em
    }
  }

  #content-tiles-container {
    --tiles-container-border-radius: var(--border-radius-medium);

    margin: 24px 48px;

    .content-tile {
      display: flex;
      flex-direction: column;

      &.has-header:first-of-type button.tile-header,
      &:not(.has-header) + .content-tile.has-header button.tile-header {
        border-start-start-radius: var(--tiles-container-border-radius);
        border-start-end-radius: var(--tiles-container-border-radius);
      }

      &.has-header {
        &:not(:has(+ .content-tile.has-header)) {
          button.tile-header {
            border-end-start-radius: var(--tiles-container-border-radius);
            border-end-end-radius: var(--tiles-container-border-radius);

            &[aria-expanded='true'] {
              border-end-start-radius: 0;
              border-end-end-radius: 0;

              & + .tile-content {
                border: 1px solid var(--border-color);
                border-top: none;
                border-radius: 0 0 var(--tiles-container-border-radius) var(--tiles-container-border-radius);
              }
            }
          }
        }

        &:has(+ .content-tile.has-header) {
          button.tile-header[aria-expanded='false'] {
            border-bottom: none;
          }
        }
      }

      button.tile-header {
        font-size: 13px;
        justify-content: space-between;

        & + .tile-content {
          border-inline-start: 1px solid var(--border-color);
          border-inline-end: 1px solid var(--border-color);
        }

        .header-text-container {
          display: flex;
          flex-direction: column;

          .header-title {
            font-weight: var(--heading-font-weight);
            line-height: 1.5;
          }

          .header-subtitle {
            font-weight: normal;
            line-height: 1.5;
          }
        }
      }

      .multi-select-container {
        padding: 24px;
        margin: 0;

        &.picker {
          display: flex;
          flex-flow: row wrap;
          box-sizing: border-box;

          input[type='checkbox'] {
            position: absolute;
            opacity: 0;
            width: 0;
            height: 0;
          }

          .checkbox-container {
            display: flex;
            flex-direction: row;
            align-items: center;
            background-color: var(--picker-background-color);
            border: 1px solid var(--picker-border-color);
            padding: 8px 12px;
            border-radius: var(--border-radius-circle);
            user-select: none;

            &:has(input:checked) {
              border-color: var(--picker-checked-border-color);
              border-width: 3px;
              margin: -2px;

              &:hover {
                border-color: var(--picker-hover-border-color);
              }
            }

            &:hover {
              background-color: var(--picker-hover-background-color);
              border-color: var(--picker-hover-border-color);

              .picker-icon.picker-checked {
                background-color: var(--picker-checkbox-hover-color);
              }
            }

            &:focus-visible {
              outline: 2px solid var(--picker-focus-ring-color);
              outline-offset: 6px;

              &:has(input:checked) {
                outline-offset: 4px;
              }
            }

            .picker-icon {
              border-radius: var(--border-radius-circle);
              width: 27px;
              height: 27px;
              display: flex;
              justify-content: center;
              align-items: center;
              text-align: center;
              margin-inline-end: 8px;
              font-size: 12px;
              forced-color-adjust: none;

              &.picker-checked {
                forced-color-adjust: auto;
                background-color: var(--picker-checkbox-color);
                mask: url('chrome://global/skin/icons/check.svg') center / 15px no-repeat exclude, linear-gradient(#000 0 0);
              }
            }
          }
        }

        .checkbox-container {
          display: grid;

          label,
          p {
            grid-column: 2;
          }

          p {
            margin-block: 0.5em 0;
          }
        }
      }
    }
  }

  .tile-title-container {
    margin-inline: 0;
    margin-block: 10px 24px;
    text-align: start;
    transition: var(--transition);
  }

  .tile-title {
    font-size: 24px;
    font-weight: var(--heading-font-weight);
    margin-block: 0;

    &:not(:last-child) {
      margin-block-end: 16px;
    }
  }

  .tile-subtitle {
    font-size: 16px;
    margin-block: 0;
  }

  .dismiss-button {
    position: absolute;
    z-index: 2;
    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;
    }

    &.with-background {
      background-color: var(--background-color-canvas);

      &:hover {
        background-color: var(--button-background-color-hover);
      }

      &:active {
        background-color: var(--button-background-color-active);
      }
    }
  }

  @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;
    }
  }

  .secondary-buttons-top-container {
    display: flex;
    flex-direction: row-reverse;
    position: fixed;
    top: 10px;
    inset-inline-end: 10px;
    width: auto;
    height: auto;
    z-index: 2;

    .secondary-cta.top {
      position: relative;
      padding-top: 0;
    }
  }

  .message-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: var(--border-radius-small);
      // using border will show up in Windows High Contrast Mode to improve accessibility.
      border: 3px solid var(--button-text-color);
      opacity: 0.35;
      box-sizing: inherit;

      &.current {
        opacity: 1;
        border-color: var(--button-background-color-primary);

        // 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(--button-text-color) 25%, transparent);
      justify-content: start;
      opacity: 1;
      transition: none;

      .indicator {
        width: 100%;
        height: 100%;
        margin-inline: -1px;
        background-color: var(--button-background-color-primary);
        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%;
        }
      }
    }
  }

  .legal-paragraph {
    transition: var(--transition)
  }

  .primary,
  .secondary,
  .additional-cta,
  .submenu-button {
    font-size: 13px;
    line-height: 16px;
    padding: 11px 15px;
    transition: var(--transition);

    &.rtamo {
      margin-top: 24px;
    }

    &.slim {
      padding: 0;
    }
  }

  .secondary {
    background-color: var(--button-background-color);
    color: var(--button-text-color);
  }

  .split-button-container,
  .screen .action-buttons .split-button-container {
    align-items: stretch;

    &:not([hidden]) {
      display: flex;
    }

    .primary,
    .secondary,
    .additional-cta {
      &:not(.submenu-button) {
        border-start-end-radius: 0;
        border-end-end-radius: 0;
        margin-inline-end: 0;
      }

      &:focus-visible {
        z-index: 2;
      }
    }

    .submenu-button {
      border-start-start-radius: 0;
      border-end-start-radius: 0;
      margin-inline-start: 1px;
      padding: 8px;
      min-width: 30px;
      box-sizing: border-box;
      background-image: url('chrome://global/skin/icons/arrow-down.svg');
      background-repeat: no-repeat;
      background-size: 16px;
      background-position: center;
      -moz-context-properties: fill;
      fill: currentColor;
    }
  }

  // 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(--background-color-canvas);
    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;
    }

    .section-main.system-prompt-spotlight {
      margin-top: 100px;
      margin-inline: 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: var(--border-radius-circle);
      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-single-select-section,
    .inline-image,
    .link-paragraph,
    .multi-select-container,
    migration-wizard,
    turn-on-scheduled-backups::part(form) {
      transition-delay: 0.9s;
    }

    .primary,
    .secondary,
    .secondary-cta,
    .steps,
    .cta-link,
    .legal-paragraph,
    .steps[above-button]:not(.progress-bar) {
      transition-delay: 1s;
    }
  }

  // Delays for transitioning-in of intermediate screens
  .screen:not(.dialog-initial) {
    .tiles-single-select-section,
    .inline-image,
    .link-paragraph,
    .multi-select-container
     {
      transition-delay: 0.2s;
    }

    .primary,
    .secondary,
    .secondary-cta,
    .cta-link,
    .legal-paragraph,
    .steps[above-button]:not(.progress-bar) {
      transition-delay: 0.4s;
    }
  }

  .screen-2 {
    .section-main {
      z-index: 1;
      margin: auto;
    }

    .section-main.system-prompt-spotlight {
      margin-top: 100px;
      margin-inline: 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: var(--border-radius-circle);
      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-single-select-section,
      .link-paragraph,
      .inline-image,
      .primary,
      .checkbox-container:not(.multi-select-item),
      .secondary,
      .secondary-cta:not(.top),
      .cta-link,
      .legal-paragraph,
      migration-wizard,
      turn-on-scheduled-backups::part(form),
      .tile-title-container,
      .steps[above-button]:not(.progress-bar) {
        opacity: 0;
        translate: 0 calc(-1 * var(--translate));
      }

      &:not(.dialog-initial) {
        .steps:not(.progress-bar, [above-button]) {
          opacity: 0.2;
        }
      }
    }
  }

  .system-prompt-spotlight {
    .inline-icon-container {
      display: flex;
    }

    .welcome-text {
      align-items: flex-start;
      padding: 5px;

      h2 {
        text-align: start;
        margin: 0;
        margin-block: 10px 15px;
      }
    }

    .brand-logo {
      margin-block: 2px;
    }

    .multi-select-container {
      margin-inline-start: 23px;
      margin-block-end: 17px;
    }

    .additional-cta-container {
      display: flex;
      flex-direction: row-reverse;
      padding-inline-end: 15px;
    }

    .main-content.no-steps {
      padding-bottom: 12px;
      margin-inline: auto;
    }
  }

  &.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-single-select-section,
      .inline-image,
      .link-paragraph,
      migration-wizard,
      turn-on-scheduled-backups::part(form) {
        opacity: 0;
        translate: 0 var(--translate);
        transition-delay: 0.2s;
      }

      .primary,
      .checkbox-container:not(.multi-select-item),
      .secondary,
      .secondary-cta:not(.top),
      .cta-link,
      .legal-paragraph,
      .steps[above-button]:not(.progress-bar) {
        opacity: 0;
        translate: 0 var(--translate);
        transition-delay: 0.3s;
      }

      .steps:not(.progress-bar, [above-button]) {
        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;
      }
    }
  }

  .inline-image,
  .link-paragraph {
    transition: var(--transition);
  }

  migration-wizard {
    width: unset;
    transition: var(--transition);

    &::part(buttons) {
      margin-top: 24px;
      justify-content: flex-start;
    }

    &::part(deck) {
      font-size: 0.83em;
    }
  }

  turn-on-scheduled-backups::part(form) {
    transition: var(--transition);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-medium);
    padding: 24px 30px;
    margin-block: 0 24px;
  }
}
