// sass-lint:disable no-css-comments
/* 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 {
  // sass-lint:disable no-color-literals

  --grey-subtitle-1: #696977;
  --newtab-button-secondary-color: #0060DF;
  --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, 0.2) 0%, rgba(2, 144, 238, 0.2) 100%);
  --mr-screen-background-color: #F8F6F4;

  @media (prefers-color-scheme: dark) {
    --grey-subtitle-1: #FFF;
    --newtab-button-secondary-color: #FFF;
    --mr-welcome-background-color: #333336;
    --mr-welcome-background-gradient: linear-gradient(0deg, rgba(144, 89, 255, 0.3) 0%, rgba(2, 144, 238, 0.3) 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;
  }

  .main-content {
    background-color: var(--in-content-page-background);
    border-radius: 20px;
    box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.2);
    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 on corner screen or when there's
  // only one centered screen
  .main-content .no-steps,
  .screen {
    &[pos='corner'],
    &[pos='center'].dialog-initial.dialog-last {
      .main-content {
        padding-bottom: 48px;
      }

      .steps {
        display: none;
      }
    }
  }

  @mixin arrow-icon-styles {
    .arrow-icon {
      -moz-context-properties: fill;
      fill: currentColor;

      &::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 {
    // sass-lint:disable-block no-important
    background-color: var(--in-content-button-background) !important;
    border: 1px solid var(--in-content-button-border-color);
    line-height: 12px;
    font-size: 0.72em;
    font-weight: 600;
    padding: 8px 16px;

    &:hover {
      text-decoration: none;
      // sass-lint:disable-block no-important
      background-color: var(--in-content-button-background-hover) !important;
      color: var(--in-content-button-text-color-hover);
    }
  }

  .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, 0.5);
      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, 0.2);
          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, 0.2);
        width: $split-section-width + $split-section-width;
        height: $split-screen-height;
        border-radius: 8px;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        pointer-events: none;
      }

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

      .secondary-cta.top {
        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;

          &: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;
              transition: var(--transition);

              input,
              label {
                vertical-align: middle;
              }
            }

            .additional-cta {
              margin: 8px 0;

              &.cta-link {
                color: var(--in-content-link-color);
                background: none;
                padding: 0;
                font-weight: normal;
                text-decoration: underline;
                cursor: pointer;

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

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

            &.additional-cta-container {
              display: flex;
              flex-direction: column;
              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;

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

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

            .main-content {
              border-radius: 0 0 8px 8px;
            }
          }
        }

      }

      // Reposition the "Sign in" button on the welcome screen to move inside
      // the screen when it would otherwise overlap the screen.
      @media only screen and (max-height: 650px) {
        @media (min-width: 800px) and (max-width: 990px) {
          .section-main {
            position: relative;

            .secondary-cta.top {
              padding: 0;
              top: 20px;
              inset-inline-end: 20px;
            }
          }
        }

        @media (max-width: 590px) {
          .section-main {
            position: relative;

            .secondary-cta.top {
              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;
    }
  }

  .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; // sass-lint:disable-line no-misspelled-properties
    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, 0.3);
        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;
    transition: var(--transition);
    z-index: 1;

    .checkbox-container {
      display: flex;
      margin-bottom: 16px;
      align-items: center;
    }
  }

  @media (prefers-color-scheme: dark) {
    .multi-select-container {
      color: #CFCFD8;
    }
  }

  .mobile-downloads {

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

    .email-link {
      font-size: 16px;
      font-weight: 400;
      text-decoration: underline;
      color: var(--in-content-link-color);
      background: none;

      &: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 {
    padding: 0;
    margin-block: 30px -45px;
    margin-inline: 0 30px;
    display: block;
    float: inline-end;
    background: url('chrome://global/skin/icons/close.svg') no-repeat center / cover;
    height: 15px;
    width: 15px;
    align-self: end;
    // override default min-height and min-width for buttons
    min-height: 15px;
    min-width: 15px;
    -moz-context-properties: fill;
    fill: currentColor;
  }

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

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

  [pos='corner'] {
    min-width: $container-min-width;

    .section-secondary {
      display: flex;
      flex-direction: column;
      margin-inline-start: 6vw;

      .message-text {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .spacer-top {
          flex: 1;
        }

        .spacer-bottom {
          flex: 1;
        }

        h1 {
          color: #FFF;
          font-weight: bold;
          font-size: clamp(48px, 7vw, 104px);
          line-height: 1em;
          margin: 0 6px;
          max-width: 5em;
          text-align: initial;
          white-space: pre-wrap;
          text-shadow: 0 4px 8px rgba(0, 0, 0, 0.35);
        }
      }

      .attrib-text {
        height: 18px;
        margin-bottom: 25px;
        text-align: initial;
        font-size: 12px;
        line-height: 18px;
        color: #F9F9FB;
        text-shadow: 0 0 7px rgba(0, 0, 0, 0.6);
        transition-delay: 0.5s;
      }
    }

    .section-main {
      z-index: 1;

      .main-content {
        background: transparent;
        box-shadow: none;
        display: flex;
        position: absolute;
        height: auto;
        width: 350px;
        bottom: 0;
        inset-inline-end: 30px;
        overflow: visible;
        transition: var(--transition);
      }

      .brand-logo {
        margin-top: 0;
        transition-delay: 1.2s;
      }

      .primary,
      .secondary-cta:not(.top) {
        transition-delay: 1.7s;
      }

      .secondary-cta.top {
        transition-delay: 0.5s;
      }

      .welcome-text {
        transition-delay: 1.2s;

        h2 {
          margin: 10px 6px;
        }
      }
    }

    // Position noodles on first screen
    // and show solid L for corner positioned screen
    .solid-L {
      display: block;
      width: 1300px;
      height: 1050px;
      bottom: -390px;
      inset-inline-end: -640px;
      transform: rotate(-80deg);
      transition-delay: 0.5s;
    }

    .orange-L {
      width: 466px;
      height: 356px;
      bottom: 270px;
      inset-inline-end: -245px;
      transition-delay: 0.8s;
    }

    .purple-C {
      width: 467px;
      height: 382px;
      bottom: -100px;
      inset-inline-end: 125px;
      transform: rotate(-75deg);
      transition-delay: 0.8s;
    }
  }

  .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,
    .multi-select-container {
      transition-delay: 0.8s;
    }

    .tiles-theme-section {
      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):not([pos='corner']) {
    .tiles-theme-section,
    .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);
    }

    [pos='corner'] {
      .brand-logo,
      .welcome-text,
      .primary,
      .checkbox-container,
      .secondary,
      .secondary-cta:not(.top),
      .message-text {
        opacity: 0;
        translate: 0 var(--translate);
      }

      .attrib-text,
      .secondary-cta.top {
        opacity: 0;
      }
    }

    .dialog-initial {
      .main-content {
        translate: 0 calc(-2 * var(--translate));
      }

      .brand-logo,
      .steps {
        opacity: 0;
        translate: 0 calc(-1 * var(--translate));
      }
    }

    .screen:not(.dialog-initial):not([pos='corner']) {
      .steps:not(.progress-bar) {
        opacity: 0.2;
      }
    }

    .screen:not([pos='corner']) {
      .welcome-text,
      .tiles-theme-section,
      .colorway-text,
      .primary,
      .checkbox-container,
      .secondary,
      .secondary-cta:not(.top),
      .cta-link {
        opacity: 0;
        translate: 0 calc(-1 * var(--translate));
      }
    }
  }

  &.transition-out {
    .noodle {
      opacity: 0;
      rotate: var(--rotate);
      scale: var(--scale);
      transition-delay: 0.2s;
    }

    [pos='corner'] {
      .message-text {
        opacity: 0;
        translate: 0 var(--translate);
      }

      .main-content {
        opacity: 0;
        translate: 0 var(--translate);
        transition-delay: 0.2s;
      }

      .solid-L {
        transition-delay: 0.4s;
      }

      .attrib-text,
      .secondary-cta.top {
        opacity: 0;
        transition-delay: 0.2s;
      }
    }

    .screen:not(.dialog-last):not([pos='corner']) {
      .main-content {
        overflow: hidden;
      }

      .welcome-text,
      .multi-select-container {
        opacity: 0;
        translate: 0 var(--translate);
        transition-delay: 0.1s;
      }

      .tiles-theme-section,
      .colorway-text {
        opacity: 0;
        translate: 0 var(--translate);
        transition-delay: 0.2s;

      }

      .primary,
      .checkbox-container,
      .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 {
        opacity: 0;
        translate: 0 calc(2 * var(--translate));
        transition-delay: 0.4s;
      }
    }
  }
}