[ tor-browser ].git.dasho

aboutwelcome.scss (72717B)
      1 /* This Source Code Form is subject to the terms of the Mozilla Public
      2 * License, v. 2.0. If a copy of the MPL was not distributed with this
      3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
      4 @use 'sass:math';
      5 
      6 // Don't import any styles that are not scoped to .onboardingContainer. This
      7 // stylesheet is loaded by FeatureCallout.sys.mjs into the browser chrome. To
      8 // add other stylesheets to about:welcome or spotlight, add them to
      9 // aboutwelcome.html or spotlight.html. Ideally, there should be no `@import`
     10 // statements in the built aboutwelcome.css file.
     11 @import '../../asrouter/content-src/styles/feature-callout';
     12 
     13 /* stylelint-disable max-nesting-depth */
     14 
     15 $break-point-small: 570px;
     16 $break-point-medium: 610px;
     17 $break-point-large: 866px;
     18 $container-min-width: 700px;
     19 $logo-size: 80px;
     20 $main-section-width: 504px;
     21 $split-section-width: 400px;
     22 $split-screen-height: 550px;
     23 $small-main-section-height: 450px;
     24 $small-secondary-section-height: 100px;
     25 $noodle-buffer: 106px;
     26 $double-section-width: 800px;
     27 
     28 html {
     29  height: 100%;
     30 }
     31 
     32 // Below variables are used via config JSON in AboutWelcomeDefaults
     33 // and referenced below inside dummy class to pass test browser_parsable_css
     34 .dummy {
     35  background: var(--mr-welcome-background-color) var(--mr-welcome-background-gradient) var(--mr-secondary-position) var(--mr-screen-background-color);
     36 }
     37 
     38 // Styling for content rendered in a Spotlight messaging surface.
     39 :root {
     40  &[dialogroot] {
     41    background-color: transparent;
     42 
     43    body {
     44      padding: 0;
     45    }
     46 
     47    .onboardingContainer {
     48      // Without this, the container will be 100vh in height. When the dialog
     49      // overflows horizontally, the horizontal scrollbar will appear. If the
     50      // scrollbars aren't overlay scrollbars (this is controlled by
     51      // Theme::ScrollbarStyle), they will take up vertical space in the
     52      // viewport, causing the dialog to overflow vertically. This causes the
     53      // vertical scrollbar to appear, which takes up horizontal space, causing
     54      // the horizontal scrollbar to appear, and so on.
     55      height: 100%;
     56      background-color: transparent;
     57 
     58      &:dir(rtl) {
     59        transform: unset;
     60      }
     61 
     62      .logo-container {
     63        pointer-events: none;
     64      }
     65 
     66      .screen {
     67        &:dir(rtl) {
     68          transform: unset;
     69        }
     70      }
     71    }
     72  }
     73 }
     74 
     75 // Styling for about:welcome background container
     76 .welcome-container {
     77  .onboardingContainer {
     78    min-height: $break-point-medium;
     79    min-width: fit-content;
     80  }
     81 }
     82 
     83 // Allows fullscreen scrolling, for addons picker which
     84 // may have taller content than other onboarding screens.
     85 // Overrides fixed height styles to avoid clipping.
     86 .onboardingContainer:has(.addons-picker-container) {
     87  .screen[pos='split'][fullscreen] {
     88    height: auto;
     89 
     90    .section-secondary {
     91      height: auto;
     92    }
     93 
     94    .main-content {
     95      min-height: 100vh;
     96    }
     97  }
     98 }
     99 
    100 .onboardingContainer:has(.embedded-backup-restore-container) {
    101  .screen[pos='split'][fullscreen] {
    102    .section-main {
    103      .main-content {
    104        .welcome-text {
    105          margin-block: 15px 22px;
    106 
    107          h1, h2 {
    108            max-width: 300px;
    109          }
    110        }
    111      }
    112    }
    113  }
    114 }
    115 
    116 .onboardingContainer {
    117  --grey-subtitle-1: light-dark(#696977, #FFF);
    118  --mr-welcome-background-color: light-dark(#F8F6F4, #333336);
    119  --mr-screen-heading-color: var(--text-color);
    120  --mr-welcome-background-gradient: linear-gradient(
    121    0deg,
    122    light-dark(rgba(144, 89, 255, 20%), rgba(144, 89, 255, 30%)) 0%,
    123    light-dark(rgba(2, 144, 238, 20%), rgba(2, 144, 238, 30%)) 100%
    124  );
    125  --mr-screen-background-color: light-dark(#F8F6F4, #62697A);
    126  --single-select-border-color: #8F8F9D;
    127  --single-select-hover-color: light-dark(#DEDEDF, #52525E);
    128  --picker-background-color: color-mix(in srgb, transparent 98%, light-dark(black, white) 2%);
    129  --picker-hover-background-color: color-mix(in srgb, transparent 95%, light-dark(black, white) 5%);
    130  --picker-border-color: var(--border-color);
    131  --picker-checked-border-color: var(--border-color-selected);
    132  --picker-hover-border-color: var(--picker-border-color);
    133  --picker-focus-ring-color: var(--color-accent-primary-selected);
    134  --picker-checkbox-color: var(--color-accent-primary-selected);
    135  --picker-checkbox-hover-color: var(--picker-checkbox-color);
    136  --picker-backup-flair-background: color-mix(in srgb, var(--color-accent-primary) 20%, transparent);
    137  --picker-backup-flair-color: var(--color-accent-primary);
    138 
    139  @media (forced-colors: active) {
    140    --picker-background-color: ButtonFace;
    141    --picker-hover-background-color: SelectedItemText;
    142    --picker-border-color: ButtonText;
    143    --picker-checked-border-color: var(--picker-border-color);
    144    --picker-hover-border-color: SelectedItem;
    145    --picker-focus-ring-color: CanvasText;
    146    --picker-checkbox-color: ButtonText;
    147    --picker-checkbox-hover-color: SelectedItem;
    148  }
    149 
    150  font-family: system-ui;
    151  font-size: 16px;
    152  position: relative;
    153  text-align: center;
    154  height: 100vh;
    155 
    156  @media (prefers-contrast) {
    157    --mr-screen-background-color: buttontext;
    158    --mr-screen-heading-color: buttonface;
    159 
    160    background-color: var(--background-color-canvas);
    161  }
    162 
    163  // Transition all of these and reduced motion effectively only does opacity.
    164  --transition: 0.6s opacity, 0.6s scale, 0.6s rotate, 0.6s translate;
    165 
    166  // Define some variables that are used for in/out states.
    167  @media (prefers-reduced-motion: no-preference) {
    168    --translate: 30px;
    169    --rotate: 20deg;
    170    --scale: 0.4;
    171    --progress-bar-transition: 0.6s translate;
    172 
    173    // Scale is used for noodles that can be flipped.
    174    &:dir(rtl) {
    175      --scale: -0.4 0.4;
    176    }
    177  }
    178 
    179  // Use default values that match "unmoved" state to avoid motion.
    180  @media (prefers-reduced-motion: reduce) {
    181    --translate: 0;
    182    --rotate: 0deg;
    183    --scale: 1;
    184    // To reduce motion, progress bar fades in instead of wiping in.
    185    --progress-bar-transition: none;
    186 
    187    &:dir(rtl) {
    188      --scale: -1 1;
    189    }
    190  }
    191 
    192  &:dir(rtl) {
    193    transform: rotateY(180deg);
    194  }
    195 
    196  &:has([pos='split'][fullscreen]) {
    197    min-height: 100vh;
    198    height: auto;
    199    display: flex;
    200    flex-direction: column;
    201  }
    202 
    203  .section-main {
    204    display: flex;
    205    flex-direction: column;
    206    justify-content: center;
    207    width: $main-section-width;
    208    flex-shrink: 0;
    209  }
    210 
    211  .section-main:not(.embedded-migration) {
    212    position: relative;
    213  }
    214 
    215  .main-content {
    216    background-color: var(--background-color-canvas);
    217    border-radius: var(--border-radius-large);
    218    box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 20%);
    219    display: flex;
    220    flex-direction: column;
    221    height: 100%;
    222    padding: 0;
    223    transition: var(--transition);
    224    z-index: 1;
    225    box-sizing: border-box;
    226 
    227    @media (prefers-contrast){
    228      border: 1px solid var(--text-color)
    229    }
    230 
    231    &.no-steps {
    232      padding-bottom: 48px;
    233    }
    234 
    235    .main-content-inner {
    236      display: flex;
    237      flex-direction: column;
    238      flex-grow: 1;
    239      justify-content: space-around;
    240    }
    241  }
    242 
    243  // Handle conditional display of steps indicator
    244  // Don't show when there's only one screen
    245  .main-content .no-steps {
    246    .main-content {
    247      padding-bottom: 48px;
    248    }
    249 
    250    .steps {
    251      display: none;
    252    }
    253  }
    254 
    255  @mixin arrow-icon-styles {
    256    .arrow-icon {
    257      -moz-context-properties: fill;
    258      fill: currentColor;
    259      text-decoration: none;
    260 
    261      &::after {
    262        content: '';
    263        padding-inline-end: 12px;
    264        margin-inline-start: 4px;
    265        background: url('chrome://browser/skin/forward.svg') no-repeat center / 12px;
    266      }
    267 
    268      &:dir(rtl)::after {
    269        background-image: url('chrome://browser/skin/back.svg');
    270      }
    271    }
    272  }
    273 
    274  @mixin secondary-cta-styles {
    275    background-color: var(--button-background-color);
    276    border: var(--button-border);
    277    line-height: 12px;
    278    font-size: 0.72em;
    279    font-weight: var(--font-weight-semibold);
    280    padding: 8px 16px;
    281    text-decoration: none;
    282    cursor: default;
    283 
    284    &:hover,
    285    &[open] {
    286      background-color: var(--button-background-color-hover);
    287      color: var(--button-text-color-hover);
    288 
    289      &:active {
    290        background-color: var(--button-background-color-active);
    291        color: var(--button-text-color-active);
    292      }
    293    }
    294  }
    295 
    296  @mixin text-link-styles {
    297    background: none;
    298    text-decoration: underline;
    299    cursor: pointer;
    300    color: var(--link-color);
    301 
    302    &:hover {
    303      color: var(--link-color-hover);
    304    }
    305 
    306    &:active {
    307      color: var(--link-color-active);
    308 
    309      @media (prefers-contrast) {
    310        text-decoration: none;
    311      }
    312    }
    313  }
    314 
    315  .screen {
    316    display: flex;
    317    position: relative;
    318    flex-flow: row nowrap;
    319    height: 100%;
    320    min-height: 500px;
    321    overflow: hidden;
    322 
    323    &.light-text {
    324      --text-color: rgb(251, 251, 254);
    325      --button-text-color-primary: rgb(43, 42, 51);
    326      --button-text-color-primary-hover: rgb(43, 42, 51);
    327      --button-background-color-primary: rgb(0, 221, 255);
    328      --button-background-color-primary-hover: rgb(128, 235, 255);
    329      --button-background-color-primary-active: rgb(170, 242, 255);
    330      --button-text-color: var(--text-color);
    331    }
    332 
    333    &.dark-text {
    334      --text-color: rgb(21,  20,  26);
    335      --button-text-color-primary: rgb(251, 251, 254);
    336      --button-text-color-primary-hover: rgb(251, 251, 254);
    337      --button-background-color-primary: #0061E0;
    338      --button-background-color-primary-hover: #0250BB;
    339      --button-background-color-primary-active: #053E94;
    340      --button-border-color-primary: transparent;
    341      --button-border-color-primary-hover: transparent;
    342      --button-text-color: var(--text-color);
    343    }
    344 
    345    &:dir(rtl) {
    346      transform: rotateY(180deg);
    347    }
    348 
    349    &[pos='center'] {
    350      background-color: rgba(21, 20, 26, 50%);
    351      min-width: $main-section-width;
    352 
    353      &.with-noodles {
    354        // Adjust for noodles partially extending out from the square modal
    355        min-width: $main-section-width + $noodle-buffer;
    356        min-height: $main-section-width + $noodle-buffer;
    357 
    358        .section-main {
    359          height: $main-section-width;
    360        }
    361      }
    362 
    363      &.with-video {
    364        justify-content: center;
    365        background: none;
    366        align-items: center;
    367 
    368        .section-main {
    369          width: $double-section-width;
    370          height: $split-screen-height;
    371        }
    372 
    373        .main-content {
    374          background-color: var(--mr-welcome-background-color);
    375          border-radius: var(--border-radius-medium);
    376          box-shadow: 0 2px 14px rgba(58, 57, 68, 20%);
    377          padding: 44px 85px 20px;
    378 
    379          .welcome-text {
    380            margin: 0;
    381          }
    382 
    383          .main-content-inner {
    384            justify-content: space-between;
    385          }
    386 
    387          h1,
    388          h2 {
    389            align-self: start;
    390          }
    391 
    392          h1 {
    393            font-size: 24px;
    394            line-height: 28.8px;
    395          }
    396 
    397          h2 {
    398            font-size: 15px;
    399            line-height: 22px;
    400          }
    401 
    402          .secondary-cta {
    403            @include arrow-icon-styles;
    404 
    405            justify-content: end;
    406 
    407            .secondary {
    408              @include secondary-cta-styles;
    409 
    410              color: var(--button-text-color);
    411            }
    412          }
    413        }
    414      }
    415 
    416      &.addons-picker {
    417        justify-content: center;
    418        align-items: center;
    419        background: none;
    420 
    421        .section-main {
    422          width: $double-section-width;
    423          height: $split-screen-height;
    424        }
    425 
    426        .main-content {
    427          background-color: var(--background-color-canvas);
    428          border-radius: var(--border-radius-medium);
    429          box-shadow: 0 2px 14px rgba(58, 57, 68, 20%);
    430          overflow: hidden;
    431 
    432          .welcome-text {
    433            display: flex;
    434            margin: 0;
    435          }
    436 
    437          .main-content-inner {
    438            padding: 25px 56px 0;
    439            justify-content: space-between;
    440          }
    441 
    442          h1,
    443          h2 {
    444            align-self: start;
    445          }
    446 
    447          h2 {
    448            font-size: 15px;
    449            text-align: start;
    450          }
    451 
    452          .brand-logo {
    453            display: block;
    454            margin: 40px 56px 0;
    455            transition: var(--transition);
    456            height: 30px;
    457          }
    458 
    459          .additional-cta {
    460            display: block;
    461            margin: 8px 0;
    462 
    463            &.cta-link {
    464              background: none;
    465              padding: 0;
    466              font-weight: normal;
    467 
    468              @include text-link-styles;
    469            }
    470 
    471            &.secondary {
    472              &:hover {
    473                background-color: var(--button-background-color-hover);
    474              }
    475            }
    476          }
    477 
    478          .secondary-cta {
    479            @include arrow-icon-styles;
    480 
    481            justify-content: end;
    482 
    483            .secondary {
    484              @include secondary-cta-styles;
    485 
    486              color: var(--button-text-color);
    487            }
    488          }
    489        }
    490 
    491        .addon-container {
    492          display: flex;
    493          border: 1px solid var(--border-color);
    494          box-shadow: 0 1px 2px 0 var(--border-color);
    495          border-radius: var(--border-radius-small);
    496          margin: 5px auto;
    497          text-align: start;
    498 
    499          .rtamo-icon {
    500            img {
    501              margin: 10px;
    502            }
    503          }
    504 
    505          .addon-details {
    506            display: grid;
    507            width: 70%;
    508          }
    509 
    510          .addon-title {
    511            margin: 10px 0 3px;
    512            font-size: 16px;
    513            font-weight: var(--heading-font-weight);
    514          }
    515 
    516          .addon-description {
    517            margin: 2px 0 10px;
    518            font-size: 13px;
    519            font-weight: normal;
    520          }
    521 
    522          .install-button-wrapper {
    523            display: flex;
    524          }
    525 
    526          button {
    527            align-self: center;
    528            width: 124px;
    529          }
    530        }
    531 
    532        .loader {
    533          width: 1em;
    534          height: 1em;
    535          border: 3px solid var(--button-text-color-primary);
    536          border-bottom-color: transparent;
    537          border-radius: var(--border-radius-circle);
    538          box-sizing: border-box;
    539          animation: rotation 1s linear infinite;
    540          justify-self: center;
    541        }
    542 
    543        @keyframes rotation {
    544          0% {
    545            transform: rotate(0deg);
    546          }
    547 
    548          100% {
    549            transform: rotate(360deg);
    550          }
    551        }
    552 
    553        .loaderContainer {
    554          display: flex;
    555          padding: 1.5px 37.5px;
    556          margin: auto;
    557        }
    558      }
    559    }
    560 
    561    &:not([pos='split']) {
    562      .secondary-cta {
    563        .secondary {
    564          @include text-link-styles;
    565 
    566          font-size: 14px;
    567          font-weight: normal;
    568          line-height: 20px;
    569        }
    570 
    571        &.top {
    572          button {
    573            color: #FFF;
    574 
    575            &:hover {
    576              color: #E0E0E6;
    577            }
    578          }
    579        }
    580      }
    581 
    582      migration-wizard {
    583        padding: 5px 60px;
    584 
    585        &::part(header){
    586          text-align: center;
    587        }
    588 
    589        &::part(buttons){
    590          margin: 32px auto 0;
    591        }
    592      }
    593 
    594      .welcome-text {
    595        &:empty {
    596          margin: 0;
    597        }
    598      }
    599    }
    600 
    601    &[pos='split'] {
    602 
    603      // Prevent the drop shadow from appearing in fullscreen mode
    604      &:where(:not([fullscreen])) {
    605        margin: auto;
    606        min-height: $split-screen-height;
    607 
    608        &::before {
    609          content: '';
    610          position: absolute;
    611          box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 20%);
    612          width: $split-section-width + $split-section-width;
    613          height: $split-screen-height;
    614          border-radius: var(--border-radius-medium);
    615          inset: 0;
    616          margin: auto;
    617          pointer-events: none;
    618        }
    619      }
    620 
    621      #content-tiles-container {
    622        margin: 0;
    623 
    624        .content-tile:not(:only-child) {
    625          margin-block: 0 24px;
    626        }
    627 
    628        .content-tile:last-child {
    629          margin-block: 0 40px;
    630        }
    631 
    632        .multi-select-container {
    633          padding: 0;
    634        }
    635      }
    636 
    637      .section-secondary,
    638      .section-main {
    639        width: $split-section-width;
    640        height: $split-screen-height;
    641      }
    642 
    643      .secondary-cta.top {
    644        position: fixed;
    645        padding-inline-end: 0;
    646 
    647        button {
    648          padding: 7px 15px;
    649        }
    650      }
    651 
    652      .secondary-buttons-top-container {
    653        .secondary-cta.top {
    654          position: relative;
    655          padding-top: 0;
    656          top: 0;
    657          inset-inline-end: 0;
    658        }
    659      }
    660 
    661      .section-main {
    662        flex-direction: row;
    663        display: block;
    664        margin: auto;
    665        margin-inline-start: 0;
    666 
    667        &:dir(rtl) {
    668          margin: auto;
    669          margin-inline-start: 0;
    670        }
    671 
    672        &.embedded-migration {
    673          .main-content {
    674            padding-block: 100px 0;
    675          }
    676        }
    677 
    678        .main-content {
    679          border-radius: 0 var(--border-radius-medium) var(--border-radius-medium) 0;
    680          overflow: hidden;
    681          padding-inline: 35px 20px;
    682          padding-block: 120px 0;
    683          box-shadow: none;
    684 
    685          &.no-steps {
    686            padding-bottom: 48px;
    687          }
    688 
    689          &:dir(rtl) {
    690            border-radius: var(--border-radius-medium) 0 0 var(--border-radius-medium);
    691          }
    692 
    693          .legal-paragraph {
    694            text-align: start;
    695            font-size: 11px;
    696            line-height: 16.5px;
    697            color: light-dark(#5B5B66, #CFCFD8);
    698 
    699            @mixin narrow-legal-paragraph {
    700              padding-inline: 30px;
    701            }
    702 
    703            @media only screen and (width <= 800px) {
    704              @include narrow-legal-paragraph;
    705            }
    706 
    707            [narrow] & {
    708              @include narrow-legal-paragraph;
    709            }
    710 
    711          }
    712 
    713          .main-content-inner {
    714            min-height: 330px;
    715 
    716            .mobile-download-buttons {
    717              padding: 0;
    718              margin-inline-start: -5px;
    719              display: flex;
    720 
    721              button {
    722                cursor: pointer;
    723              }
    724            }
    725 
    726            .qr-code-image {
    727              margin: 5px 0 10px;
    728              display: flex;
    729            }
    730 
    731            .language-switcher-container {
    732              .primary {
    733                margin-bottom: 5px;
    734              }
    735            }
    736          }
    737 
    738          .action-buttons {
    739            position: relative;
    740            text-align: initial;
    741            height: 100%;
    742 
    743            .checkbox-container {
    744              font-size: 13px;
    745              margin-block: 1em;
    746 
    747              &:not(.multi-select-item) {
    748                transition: var(--transition);
    749              }
    750 
    751              input,
    752              label {
    753                vertical-align: middle;
    754              }
    755            }
    756 
    757            .additional-cta-box {
    758              margin: 8px 0;
    759 
    760              .additional-cta {
    761                margin: 0;
    762 
    763                &.cta-link {
    764                  @include text-link-styles;
    765 
    766                  padding: 0;
    767                  font-weight: normal;
    768                }
    769 
    770                &.secondary {
    771                  &:hover,
    772                  &[open] {
    773                    background-color: var(--button-background-color-hover);
    774                  }
    775                }
    776              }
    777            }
    778 
    779            &.additional-cta-container {
    780              flex-wrap: nowrap;
    781              align-items: start;
    782            }
    783 
    784            .secondary-cta {
    785              position: absolute;
    786              bottom: -30px;
    787              inset-inline-end: 0;
    788 
    789              .secondary {
    790                @include secondary-cta-styles;
    791              }
    792 
    793              @include arrow-icon-styles;
    794            }
    795 
    796            .loader {
    797              width: 1em;
    798              height: 1em;
    799              border: 3px solid var(--button-text-color-primary);
    800              border-bottom-color: transparent;
    801              border-radius: var(--border-radius-circle);
    802              box-sizing: border-box;
    803              animation: rotation 1s linear infinite;
    804              justify-self: center;
    805            }
    806 
    807            @keyframes rotation {
    808              0% {
    809                transform: rotate(0deg);
    810              }
    811 
    812              100% {
    813                transform: rotate(360deg);
    814              }
    815            }
    816 
    817            .loaderContainer {
    818              display: flex;
    819              padding: 1.5px 37.5px;
    820              margin: auto;
    821            }
    822          }
    823 
    824          .logo-container {
    825            text-align: start;
    826          }
    827 
    828          .brand-logo {
    829            height: 25px;
    830            margin-block: 0;
    831          }
    832 
    833          .logo-alt {
    834            width: inherit;
    835            height: inherit;
    836          }
    837 
    838          .welcome-text {
    839            margin-inline: 0 10px;
    840            margin-block: 10px 35px;
    841            text-align: initial;
    842            align-items: initial;
    843            max-width: 400px;
    844 
    845            &:empty {
    846              margin: 0;
    847            }
    848 
    849            h1 {
    850              font-size: 24px;
    851              line-height: 1.2;
    852              width: 300px;
    853            }
    854 
    855            h2 {
    856              margin: 10px 0 0;
    857              min-height: 1em;
    858              font-size: 15px;
    859              line-height: 1.5;
    860              color: light-dark(#5B5B66, #CFCFD8);
    861            }
    862          }
    863 
    864          .welcome-text h1,
    865          .primary {
    866            margin: 0;
    867          }
    868 
    869          .steps {
    870            z-index: 1;
    871 
    872            &.progress-bar {
    873              margin-inline: -35px;
    874            }
    875          }
    876 
    877          @media (prefers-contrast) {
    878            border: 1px solid var(--text-color);
    879 
    880            .steps.progress-bar {
    881              border-top: 1px solid var(--text-color);
    882              background-color: var(--background-color-canvas);
    883 
    884              .indicator {
    885                background-color: var(--color-accent-primary);
    886              }
    887            }
    888          }
    889        }
    890      }
    891 
    892      .section-secondary {
    893        --mr-secondary-position: center center / auto 350px;
    894 
    895        border-radius: var(--border-radius-medium) 0 0 var(--border-radius-medium);
    896        margin: auto 0 auto auto;
    897        display: flex;
    898        align-items: center;
    899        -moz-context-properties: fill, stroke, fill-opacity, stroke-opacity;
    900        stroke: currentColor;
    901        position: relative;
    902 
    903        &:dir(rtl) {
    904          border-radius: 0 var(--border-radius-medium) var(--border-radius-medium) 0;
    905          margin: auto;
    906          margin-inline-end: 0;
    907        }
    908 
    909        h1 {
    910          color: var(--mr-screen-heading-color);
    911          font-weight: var(--font-weight-bold);
    912          font-size: 47px;
    913          line-height: 110%;
    914          max-width: 340px;
    915          text-align: initial;
    916          white-space: pre-wrap;
    917          text-shadow: none;
    918          margin-inline: 40px 0;
    919        }
    920 
    921        .image-alt {
    922          width: inherit;
    923          height: inherit;
    924        }
    925 
    926        .hero-image {
    927          flex: 1;
    928          display: flex;
    929          justify-content: center;
    930          max-height: 100%;
    931 
    932          img {
    933            width: 100%;
    934            max-width: 180px;
    935            margin: 25px 0;
    936            padding-bottom: 30px;
    937 
    938            @mixin narrow-hero-img {
    939              padding-bottom: unset;
    940            }
    941 
    942            @media only screen and (width <= 800px) {
    943              @include narrow-hero-img;
    944            }
    945 
    946            [narrow] & {
    947              @include narrow-hero-img;
    948            }
    949          }
    950        }
    951      }
    952 
    953      .multi-select-container {
    954        margin-inline: 0 10px;
    955 
    956        .checkbox-container {
    957          display: grid;
    958 
    959          label, p {
    960            grid-column: 2;
    961          }
    962 
    963          p {
    964            margin-block: 0.5em 0;
    965          }
    966        }
    967 
    968        @mixin narrow-multi-select-container {
    969          flex-direction: column;
    970          align-self: center;
    971          align-items: start;
    972          justify-content: center;
    973          width: 240px;
    974          padding: 0 30px;
    975          margin-inline: 0;
    976          box-sizing: content-box;
    977        }
    978 
    979        @media only screen and (width <= 800px) {
    980          @include narrow-multi-select-container;
    981        }
    982 
    983        [narrow] & {
    984          @include narrow-multi-select-container;
    985        }
    986      }
    987 
    988      .tiles-single-select-container {
    989        margin-block: -20px auto;
    990        align-items: initial;
    991 
    992        .select-item {
    993          min-width: 38px;
    994        }
    995      }
    996 
    997      @media only screen and (width >= 800px) {
    998        .tiles-single-select-section {
    999          margin-inline-start: -10px;
   1000        }
   1001 
   1002        &[reverse-split] {
   1003          flex-direction: row-reverse;
   1004 
   1005          .section-main {
   1006            .main-content {
   1007              border-radius: inherit;
   1008            }
   1009 
   1010            margin: auto;
   1011            margin-inline-end: 0;
   1012            border-radius: var(--border-radius-medium) 0 0 var(--border-radius-medium);
   1013 
   1014            &:dir(rtl) {
   1015              border-radius: 0 var(--border-radius-medium) var(--border-radius-medium) 0;
   1016              margin: auto;
   1017              margin-inline-end: 0;
   1018            }
   1019          }
   1020 
   1021          .section-secondary {
   1022            margin: auto;
   1023            margin-inline-start: 0;
   1024            border-radius: 0 var(--border-radius-medium) var(--border-radius-medium) 0;
   1025 
   1026            &:dir(rtl) {
   1027              border-radius: var(--border-radius-medium) 0 0 var(--border-radius-medium);
   1028              margin: auto;
   1029              margin-inline-start: 0;
   1030            }
   1031          }
   1032        }
   1033      }
   1034 
   1035      // duplicate the above styles for no-rdm. unfortunately SASS won't allow
   1036      // us to combine these selectors.
   1037      &:where([no-rdm='true']) {
   1038        .tiles-single-select-section {
   1039          margin-inline-start: -10px;
   1040        }
   1041 
   1042        &[reverse-split] {
   1043          flex-direction: row-reverse;
   1044 
   1045          .section-main {
   1046            .main-content {
   1047              border-radius: inherit;
   1048            }
   1049 
   1050            margin: auto;
   1051            margin-inline-end: 0;
   1052            border-radius: var(--border-radius-medium) 0 0 var(--border-radius-medium);
   1053 
   1054            &:dir(rtl) {
   1055              border-radius: 0 var(--border-radius-medium) var(--border-radius-medium) 0;
   1056              margin: auto;
   1057              margin-inline-end: 0;
   1058            }
   1059          }
   1060 
   1061          .section-secondary {
   1062            margin: auto;
   1063            margin-inline-start: 0;
   1064            border-radius: 0 var(--border-radius-medium) var(--border-radius-medium) 0;
   1065 
   1066            &:dir(rtl) {
   1067              border-radius: var(--border-radius-medium) 0 0 var(--border-radius-medium);
   1068              margin: auto;
   1069              margin-inline-start: 0;
   1070            }
   1071          }
   1072        }
   1073      }
   1074 
   1075      &[fullscreen] {
   1076        $split-section-width: 50%;
   1077        $split-screen-height: 100%;
   1078 
   1079        min-height:100vh;
   1080 
   1081        .section-secondary,
   1082        .section-main {
   1083          width: $split-section-width;
   1084          height: auto;
   1085        }
   1086 
   1087        .section-main {
   1088          margin: 0;
   1089          display: flex;
   1090        }
   1091 
   1092        .section-main .main-content {
   1093          border-radius: 0;
   1094          padding: 0;
   1095          flex: 1;
   1096          height: auto;
   1097 
   1098          h1 {
   1099            width: auto;
   1100          }
   1101 
   1102          .main-content-inner {
   1103            min-height: 0;
   1104            flex-grow: 0;
   1105            padding-inline: 110px;
   1106            margin-block: auto;
   1107            padding-block: 40px;
   1108 
   1109            @media only screen and (width <= 800px) {
   1110              padding-block: 20px;
   1111            }
   1112 
   1113            .steps:not(.progress-bar) {
   1114              justify-content: start;
   1115              padding-top: 24px;
   1116            }
   1117          }
   1118 
   1119          .action-buttons {
   1120            position: static;
   1121            height: auto;
   1122 
   1123            .secondary-cta {
   1124              inset-block-end: 26px;
   1125              inset-inline-end: 30px;
   1126            }
   1127          }
   1128        }
   1129 
   1130        .section-secondary {
   1131          --mr-secondary-position: center center / 50%;
   1132 
   1133          border-radius: 0;
   1134          margin: 0;
   1135 
   1136          .hero-image {
   1137            height: 100%;
   1138            display: flex;
   1139            justify-content: center;
   1140            align-items: center;
   1141 
   1142            img {
   1143              width: 30%;
   1144            }
   1145          }
   1146 
   1147          .message-text.hero-text {
   1148            margin-block: auto;
   1149            margin-inline: 17% auto;
   1150            text-align: start;
   1151            width: 100%;
   1152            max-width: 450px;
   1153 
   1154            h1 {
   1155              font-weight: var(--heading-font-weight);
   1156              font-size: 80px;
   1157              margin: 0;
   1158              width: 100%;
   1159              max-width: 100%;
   1160            }
   1161 
   1162            h2 {
   1163              font-size: 20px;
   1164              margin: 0;
   1165              margin-block-start: 24px;
   1166              font-weight: var(--heading-font-weight);
   1167              width: 100%;
   1168            }
   1169          }
   1170        }
   1171 
   1172        .addons-picker-container {
   1173          background: none;
   1174 
   1175          .addon-container {
   1176            display: flex;
   1177            flex-direction: row;
   1178            border: 1px solid var(--border-color);
   1179            box-shadow: 0 1px 2px 0 var(--border-color);
   1180            border-radius: var(--border-radius-small);
   1181            margin-block: 0 16px;
   1182            text-align: start;
   1183            padding: 16px;
   1184            max-width: 800px;
   1185 
   1186            @media (800px <= width <= 990px) {
   1187              flex-flow: row wrap;
   1188            }
   1189 
   1190            .rtamo-icon {
   1191              img {
   1192                margin-inline: 0 16px;
   1193              }
   1194            }
   1195 
   1196            .addon-rows-container {
   1197              flex-grow: 1;
   1198              display: flex;
   1199              flex-direction: column;
   1200 
   1201              .addon-row {
   1202                display: flex;
   1203                flex-grow: 1;
   1204                justify-content: space-between;
   1205 
   1206                .install-button-wrapper {
   1207                  display: block;
   1208 
   1209                  button {
   1210                    padding-inline: 16px;
   1211                    font-size: 12px;
   1212                    padding-block: 0;
   1213                    background-color: var(--button-background-color);
   1214                    color: var(--button-text-color);
   1215                    min-width: 0;
   1216 
   1217                    &:hover {
   1218                      background-color: var(--button-background-color-hover);
   1219                    }
   1220 
   1221                    &:active {
   1222                      background-color: var(--button-background-color-active);
   1223                    }
   1224                  }
   1225                }
   1226 
   1227 
   1228                &:not(:last-child) {
   1229                  margin-block: 0 12px;
   1230                }
   1231 
   1232                .addon-author-details {
   1233                  margin-block: 0 4px;
   1234 
   1235                  .addon-title {
   1236                    font-size: 16px;
   1237                    font-weight: var(--heading-font-weight);
   1238                  }
   1239 
   1240                  .addon-author {
   1241                    font-size: 12px;
   1242                    margin-block: 2px 0;
   1243 
   1244                    .author-link {
   1245                      background: none;
   1246                      padding: 0;
   1247                      font-weight: normal;
   1248                      min-width: auto;
   1249                      min-height: auto;
   1250                      margin: 0;
   1251                      text-align: start;
   1252 
   1253                      @include text-link-styles;
   1254                    }
   1255 
   1256                    .addon-by-line {
   1257                      margin-inline: 0 4px;
   1258                    }
   1259                  }
   1260                }
   1261 
   1262                .addon-description {
   1263                  font-size: 14px;
   1264                }
   1265              }
   1266            }
   1267          }
   1268 
   1269          .loader {
   1270            width: 1em;
   1271            height: 1em;
   1272            border: 3px solid var(--button-text-color-primary);
   1273            border-bottom-color: transparent;
   1274            border-radius: var(--border-radius-circle);
   1275            box-sizing: border-box;
   1276            animation: rotation 1s linear infinite;
   1277            justify-self: center;
   1278          }
   1279 
   1280          @keyframes rotation {
   1281            0% {
   1282              transform: rotate(0deg);
   1283            }
   1284 
   1285            100% {
   1286              transform: rotate(360deg);
   1287            }
   1288          }
   1289 
   1290          .loaderContainer {
   1291            display: flex;
   1292            padding: 1.5px 37.5px;
   1293            margin: auto;
   1294          }
   1295        }
   1296 
   1297        @mixin narrow-split-fullscreen {
   1298          .section-main,
   1299          .section-secondary {
   1300            width: 100%;
   1301          }
   1302 
   1303          .section-main {
   1304            height: 75%;
   1305            flex-grow: 1;
   1306            margin: 0;
   1307            display: flex;
   1308 
   1309            &[hide-secondary-section='responsive'] {
   1310              height: 100%;
   1311 
   1312              .main-content {
   1313                border-radius: 0;
   1314                padding: 0;
   1315                height: auto;
   1316              }
   1317            }
   1318          }
   1319 
   1320          .section-main .main-content {
   1321            .action-buttons .secondary-cta {
   1322              inset-block-end: 0;
   1323              inset-inline-end: 0;
   1324            }
   1325 
   1326            .main-content-inner {
   1327              padding-inline: 55px;
   1328              margin-inline: auto;
   1329            }
   1330          }
   1331 
   1332          .section-secondary {
   1333            --mr-secondary-position: center var(--mr-secondary-background-position-y) / 50%;
   1334 
   1335            height: 250px;
   1336 
   1337            .hero-image {
   1338              img {
   1339                width: 25%;
   1340                max-height: 75%;
   1341              }
   1342            }
   1343          }
   1344        }
   1345 
   1346        @media only screen and (width <= 800px) {
   1347          height: 100%;
   1348 
   1349          @include narrow-split-fullscreen;
   1350        }
   1351 
   1352        [narrow] & {
   1353          @include narrow-split-fullscreen;
   1354        }
   1355      }
   1356 
   1357      @mixin narrow-split {
   1358        &:where(:not([no-rdm])) {
   1359          flex-direction: column;
   1360          min-height: $small-main-section-height + $small-secondary-section-height;
   1361 
   1362          &::before {
   1363            width: $split-section-width;
   1364          }
   1365 
   1366          &[reverse-split] {
   1367            flex-direction: column;
   1368 
   1369            .section-secondary {
   1370              border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;
   1371              margin: auto;
   1372              margin-bottom: 0;
   1373 
   1374              &:dir(rtl) {
   1375                margin: auto;
   1376                margin-bottom: 0;
   1377                border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;
   1378              }
   1379            }
   1380 
   1381            .section-main {
   1382              height: auto;
   1383              margin: auto;
   1384              margin-top: 0;
   1385              border-radius: 0 0 var(--border-radius-medium) var(--border-radius-medium);
   1386 
   1387              &:dir(rtl) {
   1388                margin: auto;
   1389                margin-top: 0;
   1390                border-radius: 0 0 var(--border-radius-medium) var(--border-radius-medium);
   1391              }
   1392            }
   1393          }
   1394 
   1395          .section-secondary,
   1396          .section-main {
   1397            width: $split-section-width;
   1398          }
   1399 
   1400          .section-secondary {
   1401            --mr-secondary-background-position-y: top;
   1402            --mr-secondary-position: center var(--mr-secondary-background-position-y) / 75%;
   1403 
   1404            border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;
   1405            margin: auto;
   1406            margin-bottom: 0;
   1407            height: $small-secondary-section-height;
   1408 
   1409            .hero-image img {
   1410              margin: 6px 0;
   1411            }
   1412 
   1413            .message-text {
   1414              margin-inline: auto;
   1415            }
   1416 
   1417            h1 {
   1418              font-size: 35px;
   1419              text-align: center;
   1420              white-space: normal;
   1421              margin-inline: auto;
   1422              margin-block: 14px 6px;
   1423            }
   1424 
   1425            &:dir(rtl) {
   1426              margin: auto;
   1427              margin-bottom: 0;
   1428              border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;
   1429            }
   1430 
   1431            &.with-secondary-section-hidden {
   1432              display: none;
   1433            }
   1434          }
   1435 
   1436          migration-wizard {
   1437            &::part(deck){
   1438              min-width: 330px;
   1439              margin-inline: 36px;
   1440            }
   1441          }
   1442 
   1443          .section-main {
   1444            margin: auto;
   1445            margin-top: 0;
   1446            height: $small-main-section-height;
   1447 
   1448            migration-wizard::part(buttons) {
   1449              flex-direction: column;
   1450              margin-inline: 46px;
   1451            }
   1452 
   1453            &[hide-secondary-section='responsive'] {
   1454              height: $split-screen-height;
   1455              margin: auto;
   1456 
   1457              &:dir(rtl) {
   1458                margin: auto;
   1459              }
   1460 
   1461              .main-content {
   1462                padding: 50px 0 0;
   1463                border-radius: var(--border-radius-medium);
   1464 
   1465                &:dir(rtl) {
   1466                  border-radius: var(--border-radius-medium);
   1467                }
   1468              }
   1469            }
   1470 
   1471            .main-content {
   1472              border-radius: 0 0 var(--border-radius-medium) var(--border-radius-medium);
   1473              padding: 30px 0 0;
   1474 
   1475              .main-content-inner {
   1476                align-items: center;
   1477              }
   1478 
   1479              .logo-container {
   1480                text-align: center;
   1481 
   1482                .brand-logo {
   1483                  min-height: 25px;
   1484 
   1485                  &,
   1486                  &:dir(rtl) {
   1487                    background-position: center;
   1488                  }
   1489                }
   1490 
   1491                .logo-alt {
   1492                  width: inherit;
   1493                  height: inherit;
   1494                }
   1495              }
   1496 
   1497              .welcome-text {
   1498                align-items: center;
   1499                text-align: center;
   1500                margin-inline: 0;
   1501                padding-inline: 30px;
   1502 
   1503                .spacer-bottom,
   1504                .spacer-top {
   1505                  display: none;
   1506                }
   1507              }
   1508 
   1509              .action-buttons {
   1510                text-align: center;
   1511 
   1512                .checkbox-container {
   1513                  display: none;
   1514                }
   1515 
   1516                .secondary-cta {
   1517                  position: relative;
   1518                  margin-block: 10px 0;
   1519                  bottom: 0;
   1520                }
   1521              }
   1522 
   1523              .primary,
   1524              .secondary {
   1525                min-width: 240px;
   1526                margin-inline: 0;
   1527              }
   1528 
   1529              .steps {
   1530                padding-block: 0;
   1531                margin: 0;
   1532 
   1533                &.progress-bar {
   1534                  margin-inline: 0;
   1535                }
   1536              }
   1537            }
   1538 
   1539            .additional-cta {
   1540              &.cta-link {
   1541                align-self: center;
   1542              }
   1543            }
   1544 
   1545            .dismiss-button {
   1546              top: -$small-secondary-section-height;
   1547            }
   1548 
   1549            &:dir(rtl) {
   1550              margin: auto;
   1551              margin-top: 0;
   1552 
   1553              .main-content {
   1554                border-radius: 0 0 var(--border-radius-medium) var(--border-radius-medium);
   1555              }
   1556            }
   1557          }
   1558        }
   1559 
   1560        &[no-rdm] {
   1561          width: 800px;
   1562 
   1563          &[reverse-split] {
   1564            flex-direction: row-reverse;
   1565 
   1566            .section-main {
   1567              .main-content {
   1568                border-radius: inherit;
   1569              }
   1570 
   1571              margin: auto;
   1572              margin-inline-end: 0;
   1573              border-radius: var(--border-radius-medium) 0 0 var(--border-radius-medium);
   1574 
   1575              &:dir(rtl) {
   1576                border-radius: 0 var(--border-radius-medium) var(--border-radius-medium) 0;
   1577                margin: auto;
   1578                margin-inline-end: 0;
   1579              }
   1580            }
   1581 
   1582            .section-secondary {
   1583              margin: auto;
   1584              margin-inline-start: 0;
   1585              border-radius: 0 var(--border-radius-medium) var(--border-radius-medium) 0;
   1586 
   1587              &:dir(rtl) {
   1588                border-radius: var(--border-radius-medium) 0 0 var(--border-radius-medium);
   1589                margin: auto;
   1590                margin-inline-start: 0;
   1591              }
   1592            }
   1593          }
   1594        }
   1595      }
   1596 
   1597      @media only screen and (width <= 800px) {
   1598        @include narrow-split;
   1599      }
   1600 
   1601      [narrow] & {
   1602        @include narrow-split;
   1603      }
   1604 
   1605      &:where(:not([fullscreen])) {
   1606        @media only screen and (height <= 650px) {
   1607          // Hide the "Sign in" button on the welcome screen when it would
   1608          // otherwise overlap the screen. We'd reposition it, but then it would
   1609          // overlap the dismiss button. We may change the alignment so they don't
   1610          // overlap in a future revision.
   1611          @media (800px <= width <= 990px) {
   1612            .section-main .secondary-cta.top {
   1613              display: none;
   1614            }
   1615          }
   1616 
   1617          // Reposition the "Sign in" button on the welcome screen to move inside
   1618          // the screen when it would otherwise overlap the screen.
   1619          @mixin extra-narrow-secondary-cta {
   1620            .section-main .secondary-buttons-top-container {
   1621              position: absolute;
   1622              padding: 0;
   1623              top: 0;
   1624              inset-inline-end: 0;
   1625            }
   1626          }
   1627 
   1628          @media (width <= 620px) {
   1629            @include extra-narrow-secondary-cta;
   1630          }
   1631 
   1632          [narrow] & {
   1633            @media (width <= 620px) {
   1634              @include extra-narrow-secondary-cta;
   1635            }
   1636          }
   1637        }
   1638      }
   1639    }
   1640  }
   1641 
   1642  .brand-logo {
   1643    margin-block: 60px 10px;
   1644    transition: var(--transition);
   1645    height: 80px;
   1646    user-select: none;
   1647 
   1648    &.cta-top {
   1649      margin-top: 25px;
   1650    }
   1651 
   1652    &.hide {
   1653      visibility: hidden;
   1654      padding: unset;
   1655      margin-top: 50px;
   1656    }
   1657  }
   1658 
   1659  .logo-alt {
   1660    width: inherit;
   1661    height: inherit;
   1662  }
   1663 
   1664  .rtamo-theme-icon {
   1665    max-height: 30px;
   1666    border-radius: var(--border-radius-xsmall);
   1667    margin-bottom: 10px;
   1668    margin-top: 24px;
   1669  }
   1670 
   1671  .rtamo-icon {
   1672    text-align: start;
   1673 
   1674    @mixin narrow-rtamo-icon {
   1675      text-align: center;
   1676    }
   1677 
   1678    @media only screen and (width <= 800px) {
   1679      @include narrow-rtamo-icon;
   1680    }
   1681 
   1682    [narrow] & {
   1683      @include narrow-rtamo-icon;
   1684    }
   1685  }
   1686 
   1687  .text-link {
   1688    @include text-link-styles;
   1689  }
   1690 
   1691  .welcome-text {
   1692    display: flex;
   1693    flex-direction: column;
   1694    justify-content: center;
   1695    align-items: center;
   1696    margin: 0.5em 1em;
   1697    transition: var(--transition);
   1698 
   1699    h1,
   1700    h2 {
   1701      color: var(--text-color);
   1702      line-height: 1.5;
   1703    }
   1704 
   1705    h1 {
   1706      font-size: 24px;
   1707      font-weight: var(--heading-font-weight);
   1708      margin: 0 6px;
   1709      letter-spacing: -0.02em;
   1710      outline: none;
   1711    }
   1712 
   1713    h2 {
   1714      font-size: 16px;
   1715      font-weight: normal;
   1716      margin: 10px 6px 0;
   1717      max-width: 750px;
   1718      letter-spacing: -0.01em;
   1719    }
   1720 
   1721    &.fancy {
   1722      h1 {
   1723        background-image: linear-gradient(
   1724          90deg,
   1725          light-dark(#9059FF, #C688FF),
   1726          light-dark(#FF4AA2, #FF84C0),
   1727          light-dark(#FF8C00, #FFBD4F),
   1728          light-dark(#FF4AA2, #FF84C0),
   1729          light-dark(#9059FF, #C688FF)
   1730        );
   1731        background-clip: text;
   1732        background-size: 200%;
   1733 
   1734        @media (prefers-contrast: no-preference) {
   1735          color: transparent;
   1736        }
   1737 
   1738        @media (prefers-color-scheme: dark) {
   1739          &::selection {
   1740            color: #FFF;
   1741            background-color: #696977;
   1742          }
   1743        }
   1744      }
   1745    }
   1746 
   1747    &.shine {
   1748      h1 {
   1749        animation: shine 50s linear infinite;
   1750        background-size: 400%;
   1751      }
   1752 
   1753      @keyframes shine {
   1754        to {
   1755          background-position: 400%;
   1756        }
   1757      }
   1758    }
   1759 
   1760    .cta-paragraph {
   1761      a {
   1762        margin: 0;
   1763        text-decoration: underline;
   1764        cursor: pointer;
   1765      }
   1766    }
   1767  }
   1768 
   1769  // Override light and dark mode fancy title colors for use over light and dark backgrounds
   1770  .screen.light-text .welcome-text.fancy h1 {
   1771    background-image: linear-gradient(90deg, #C688FF, #FF84C0, #FFBD4F, #FF84C0, #C688FF);
   1772  }
   1773 
   1774  .screen.dark-text .welcome-text.fancy h1 {
   1775    background-image: linear-gradient(90deg, #9059FF, #FF4AA2, #FF8C00, #FF4AA2, #9059FF);
   1776  }
   1777 
   1778  .welcomeZap {
   1779    span {
   1780      position: relative;
   1781      z-index: 1;
   1782      white-space: nowrap;
   1783    }
   1784 
   1785    .zap {
   1786      &::after {
   1787        display: block;
   1788        background-repeat: no-repeat;
   1789        background-size: 100% 100%;
   1790        content: '';
   1791        position: absolute;
   1792        top: calc(100% - 0.15em);
   1793        width: 100%;
   1794        height: 0.3em;
   1795        left: 0;
   1796        z-index: -1;
   1797        transform: scaleY(3);
   1798      }
   1799 
   1800      &.short::after {
   1801        background-image:  url('chrome://activity-stream/content/data/content/assets/short-zap.svg');
   1802      }
   1803 
   1804      &.long::after {
   1805        background-image:  url('chrome://activity-stream/content/data/content/assets/long-zap.svg');
   1806      }
   1807    }
   1808  }
   1809 
   1810  .language-loader {
   1811    -moz-context-properties: fill;
   1812    fill: currentColor;
   1813    margin-inline-end: 10px;
   1814    position: relative;
   1815    top: 3px;
   1816    width: 16px;
   1817    height: 16px;
   1818    margin-top: -6px;
   1819  }
   1820 
   1821  .tiles-single-select-container {
   1822    display: flex;
   1823    flex-direction: column;
   1824    align-items: center;
   1825    margin: 10px auto;
   1826  }
   1827 
   1828  .sr-only {
   1829    opacity: 0;
   1830    overflow: hidden;
   1831    position: absolute;
   1832 
   1833    &.input {
   1834      height: 1px;
   1835      width: 1px;
   1836    }
   1837  }
   1838 
   1839  .tiles-single-select-section {
   1840    border: 0;
   1841    outline: none;
   1842    display: flex;
   1843    flex-wrap: wrap;
   1844    gap: 5px;
   1845    justify-content: space-evenly;
   1846    margin-inline: 10px;
   1847    padding: 10px;
   1848    transition: var(--transition);
   1849 
   1850    &:hover,
   1851    &:active,
   1852    &:focus-within {
   1853      border-radius: var(--border-radius-medium);
   1854      outline: 2px solid var(--button-background-color-primary);
   1855    }
   1856 
   1857    // single select and theme specific styles
   1858    &.single-select, &.theme {
   1859      flex-direction: row;
   1860      padding-top: 5px;
   1861      gap: 10px;
   1862      justify-content: center;
   1863 
   1864      .select-item {
   1865        position: relative;
   1866        padding-top: 5px;
   1867        border: 1px solid var(--single-select-border-color);
   1868        border-radius: var(--border-radius-large);
   1869 
   1870        &:has(.input:focus),
   1871        &:has(.selected) {
   1872          outline: none;
   1873        }
   1874 
   1875        &:has(.input:focus) {
   1876          outline: 2px solid var(--button-background-color-primary);
   1877          outline-offset: 5px;
   1878        }
   1879 
   1880        &:has(.selected) {
   1881          border: 1px solid var(--button-background-color-primary);
   1882          border-radius: var(--border-radius-large);
   1883        }
   1884 
   1885        &:hover {
   1886          background-color: var(--single-select-hover-color);
   1887        }
   1888 
   1889        &:focus-visible {
   1890          outline: none;
   1891          // Only highlight the image, not the frame around the image and the label
   1892          .icon {
   1893            outline: initial;
   1894          }
   1895        }
   1896 
   1897        .flair {
   1898          height: 18px;
   1899          border-radius: var(--border-radius-small);
   1900          background-color: #9059FF;
   1901          color: #FFF;
   1902          padding: 2px 8px;
   1903          position: absolute;
   1904          right: 1px;
   1905          top: -10px;
   1906          line-height: 1;
   1907 
   1908          &.centered {
   1909            /* stylelint-disable-next-line */
   1910            border-radius: 8px 8px 0 0;
   1911            background-color: var(--button-background-color-primary);
   1912            position: relative;
   1913            right: unset;
   1914            top: -6px;
   1915            line-height: 0.75;
   1916            width: 100%;
   1917            box-sizing: border-box;
   1918 
   1919            &.backup {
   1920              /* stylelint-disable-next-line */
   1921              border-radius: 10px 10px 0 0;
   1922              background-color: var(--picker-backup-flair-background);
   1923              color: var(--picker-backup-flair-color);
   1924 
   1925              &.spacer {
   1926                background-color: transparent;
   1927              }
   1928            }
   1929          }
   1930 
   1931          &.spacer {
   1932            background-color: transparent;
   1933          }
   1934        }
   1935 
   1936        .icon {
   1937          outline: none;
   1938        }
   1939 
   1940        .text {
   1941          margin-block: 8px;
   1942        }
   1943 
   1944        .tile-list-container {
   1945          display: flex;
   1946          flex-direction: column;
   1947          margin-inline-start: 20px;
   1948 
   1949          .tile-list-item {
   1950            display: flex;
   1951 
   1952            &:last-child {
   1953              margin-block-end: 8px;
   1954            }
   1955          }
   1956 
   1957          .tile-list-icon-wrapper {
   1958            padding-block-start: 6px;
   1959          }
   1960 
   1961          .tile-list-text {
   1962            margin-inline-start: 8px;
   1963            margin-inline-end: 20px;
   1964            text-align: start;
   1965          }
   1966        }
   1967      }
   1968    }
   1969 
   1970    // single select and theme specific styles
   1971    &.single-select, &.theme {
   1972      &:hover, &:focus-within {
   1973        outline: none;
   1974      }
   1975 
   1976      .select-item {
   1977        transition: var(--transition);
   1978 
   1979        &:has(.input:focus) {
   1980          outline: 2px solid var(--button-background-color-primary);
   1981          outline-offset: 2px;
   1982        }
   1983      }
   1984    }
   1985 
   1986    .select-item {
   1987      align-items: center;
   1988      display: flex;
   1989      flex-direction: column;
   1990      flex: 1;
   1991      padding: 0;
   1992      min-width: 50px;
   1993      box-shadow: none;
   1994      border-radius: var(--border-radius-small);
   1995      cursor: pointer;
   1996      z-index: 0;
   1997      transition: var(--transition);
   1998 
   1999      &.backup {
   2000        cursor: default;
   2001        width: 225.5px;
   2002        padding-top: 0;
   2003 
   2004        &:has(.selected) {
   2005          border: 1px solid var(--border-color-selected);
   2006        }
   2007 
   2008        &:hover {
   2009          background-color: transparent;
   2010        }
   2011      }
   2012 
   2013      &:focus,
   2014      &:active {
   2015        outline: initial;
   2016        outline-offset: initial;
   2017      }
   2018 
   2019      .icon {
   2020        background-size: cover;
   2021        width: 40px;
   2022        height: 40px;
   2023        border-radius: var(--border-radius-small);
   2024        z-index: -1;
   2025 
   2026        &:dir(rtl) {
   2027          transform: scaleX(-1);
   2028        }
   2029 
   2030 
   2031        &.light {
   2032          background-image: url('resource://builtin-themes/light/icon.svg');
   2033        }
   2034 
   2035        &.dark {
   2036          background-image: url('resource://builtin-themes/dark/icon.svg');
   2037        }
   2038 
   2039        &.alpenglow {
   2040          background-image: url('resource://builtin-themes/alpenglow/icon.svg');
   2041        }
   2042 
   2043        &.default,
   2044        &.automatic {
   2045          background-image: url('resource://default-theme/icon.svg');
   2046        }
   2047      }
   2048 
   2049      .text {
   2050        display: flex;
   2051        font-size: 14px;
   2052        font-weight: normal;
   2053        line-height: 20px;
   2054        margin-inline-start: 0;
   2055        margin-top: 9px;
   2056      }
   2057    }
   2058 
   2059    legend {
   2060      cursor: default;
   2061    }
   2062  }
   2063 
   2064  .tiles-container {
   2065    margin: 10px auto;
   2066 
   2067    &.info {
   2068      padding: 6px 12px 12px;
   2069 
   2070      &:hover,
   2071      &:focus {
   2072        background-color: rgba(217, 217, 227, 30%);
   2073        border-radius: var(--border-radius-small);
   2074      }
   2075    }
   2076  }
   2077 
   2078  .tiles-delayed {
   2079    animation: fadein 0.4s;
   2080  }
   2081 
   2082  .multi-select-container {
   2083    display: flex;
   2084    flex-direction: column;
   2085    flex-wrap: wrap;
   2086    flex-shrink: 0;
   2087    align-items: flex-start;
   2088    gap: 16px;
   2089    margin-block: -1em 2em;
   2090    margin-inline: 1em;
   2091    font-weight: normal;
   2092    font-size: 14px;
   2093    text-align: initial;
   2094    transition: var(--transition);
   2095    z-index: 1;
   2096    color: var(--text-color);
   2097 
   2098    @media not (prefers-contrast) {
   2099      color: light-dark(#5B5B66, #CFCFD8);
   2100    }
   2101 
   2102    #multi-stage-multi-select-label {
   2103      // These styles are based on .welcome-text>h2 (subtitle).
   2104      color: var(--text-color);
   2105      line-height: 1.5;
   2106      font-size: 16px;
   2107      font-weight: normal;
   2108      letter-spacing: -0.01em;
   2109      // Try to get the label positioned the same way it would be if it was a
   2110      // subtitle. -0.5em for the welcome-text margin, 1em for the
   2111      // multi-select-container margin, and 10px for the desired margin between
   2112      // the label and the title.
   2113      margin: calc(-0.5em + 1em + 10px) 6px 0;
   2114      max-width: 750px;
   2115    }
   2116 
   2117    @at-root .onboardingContainer .screen[pos='split'] .multi-select-container #multi-stage-multi-select-label {
   2118      margin: calc(-35px + 1em + 10px) 0 0;
   2119      min-height: 1em;
   2120      font-size: 15px;
   2121      line-height: 1.5;
   2122 
   2123      @media not (prefers-contrast) {
   2124        color: light-dark(#5B5B66, #CFCFD8);
   2125      }
   2126    }
   2127 
   2128    .checkbox-container {
   2129      display: flex;
   2130 
   2131      > input {
   2132        flex-grow: 0;
   2133        flex-shrink: 0;
   2134      }
   2135    }
   2136  }
   2137 
   2138  .confirmation-checklist-section {
   2139    display: flex;
   2140    flex-direction: column;
   2141    align-items: center;
   2142    margin: 10px auto;
   2143 
   2144    .confirmation-checklist-container {
   2145      display: flex;
   2146      flex-direction: column;
   2147      gap: 8px;
   2148 
   2149      .confirmation-checklist-item {
   2150        display: flex;
   2151        flex-direction: column;
   2152        margin-inline-start: 20px;
   2153 
   2154        &:last-child {
   2155          margin-block-end: 8px;
   2156        }
   2157      }
   2158 
   2159      .confirmation-checklist-icon-wrapper {
   2160        display: flex;
   2161        align-items: center;
   2162      }
   2163 
   2164      .confirmation-checklist-text {
   2165        margin-inline-start: 8px;
   2166        font-weight: var(--font-weight-semibold);
   2167      }
   2168 
   2169      .confirmation-checklist-subtext {
   2170        margin-inline-start: 26px;
   2171        text-align: start;
   2172        font-size: 14px;
   2173      }
   2174    }
   2175  }
   2176 
   2177  .mobile-downloads {
   2178    .qr-code-image {
   2179      margin: 24px 0 10px;
   2180      width: 113px;
   2181      height: 113px;
   2182    }
   2183 
   2184    .email-link {
   2185      @include text-link-styles;
   2186 
   2187      font-size: 16px;
   2188      font-weight: normal;
   2189 
   2190      &:hover {
   2191        background: none;
   2192      }
   2193    }
   2194 
   2195    .ios button {
   2196      background-image: url('chrome://app-marketplace-icons/locale/ios.svg');
   2197    }
   2198 
   2199    .android button {
   2200      background-image: url('chrome://app-marketplace-icons/locale/android.png');
   2201    }
   2202  }
   2203 
   2204  .mobile-download-buttons {
   2205    list-style: none;
   2206    padding: 10px 0;
   2207    margin: 0;
   2208 
   2209    li {
   2210      display: inline-block;
   2211 
   2212      button {
   2213        display: inline-block;
   2214        height: 45px;
   2215        width: 152px;
   2216        background-repeat: no-repeat;
   2217        background-size: contain;
   2218        background-position: center;
   2219        box-shadow: none;
   2220        border: 0;
   2221      }
   2222 
   2223      &:not(:first-child) {
   2224        margin-inline: 5px 0;
   2225      }
   2226    }
   2227  }
   2228 
   2229  .onboardingContainer .main-content.no-steps:has(button.content-tiles-header[aria-expanded='false']) {
   2230    padding-bottom: 0;
   2231  }
   2232 
   2233  #content-tiles-container button.tile-header,
   2234  button.content-tiles-header {
   2235    width: 100%;
   2236    margin: 0;
   2237    padding: 12px 16px;
   2238    display: flex;
   2239    flex-direction: row;
   2240    align-items: center;
   2241    border-width: 1px;
   2242    border-radius: 0;
   2243 
   2244    @media (prefers-contrast: no-preference) {
   2245      background-color: var(--background-color-canvas);
   2246      border-color: var(--border-color);
   2247    }
   2248 
   2249    cursor: pointer;
   2250    // ensures focus ring is fully visible
   2251    outline-offset: -12px;
   2252 
   2253    .arrow-icon {
   2254      width: 1em;
   2255      height: 1.5em;
   2256      -moz-context-properties: fill;
   2257      fill: currentColor;
   2258      background: url('chrome://global/skin/icons/arrow-down.svg') center center / 100% no-repeat;
   2259    }
   2260 
   2261    &[aria-expanded='true'] {
   2262      border-end-start-radius: 0;
   2263      border-end-end-radius: 0;
   2264 
   2265      .arrow-icon {
   2266        background: url('chrome://global/skin/icons/arrow-up.svg') center center / 100% no-repeat;
   2267      }
   2268    }
   2269  }
   2270 
   2271  button.content-tiles-header {
   2272    margin: 0.5em 0 0;
   2273    font-size: 11px;
   2274    font-weight: normal;
   2275    justify-content: center;
   2276    border-width: 1px 0;
   2277 
   2278    @media (prefers-contrast: no-preference) {
   2279      color: light-dark(#5B5B66, #CFCFD8);
   2280    }
   2281 
   2282    @media (prefers-contrast) {
   2283      color: var(--text-color);
   2284    }
   2285 
   2286    .arrow-icon {
   2287      margin-inline: 1em
   2288    }
   2289  }
   2290 
   2291  #content-tiles-container {
   2292    --tiles-container-border-radius: var(--border-radius-medium);
   2293 
   2294    margin: 24px 48px;
   2295 
   2296    .content-tile {
   2297      display: flex;
   2298      flex-direction: column;
   2299 
   2300      &.has-header:first-of-type button.tile-header,
   2301      &:not(.has-header) + .content-tile.has-header button.tile-header {
   2302        border-start-start-radius: var(--tiles-container-border-radius);
   2303        border-start-end-radius: var(--tiles-container-border-radius);
   2304      }
   2305 
   2306      &.has-header {
   2307        &:not(:has(+ .content-tile.has-header)) {
   2308          button.tile-header {
   2309            border-end-start-radius: var(--tiles-container-border-radius);
   2310            border-end-end-radius: var(--tiles-container-border-radius);
   2311 
   2312            &[aria-expanded='true'] {
   2313              border-end-start-radius: 0;
   2314              border-end-end-radius: 0;
   2315 
   2316              & + .tile-content {
   2317                border: 1px solid var(--border-color);
   2318                border-top: none;
   2319                border-radius: 0 0 var(--tiles-container-border-radius) var(--tiles-container-border-radius);
   2320              }
   2321            }
   2322          }
   2323        }
   2324 
   2325        &:has(+ .content-tile.has-header) {
   2326          button.tile-header[aria-expanded='false'] {
   2327            border-bottom: none;
   2328          }
   2329        }
   2330      }
   2331 
   2332      button.tile-header {
   2333        font-size: 13px;
   2334        justify-content: space-between;
   2335 
   2336        & + .tile-content {
   2337          border-inline-start: 1px solid var(--border-color);
   2338          border-inline-end: 1px solid var(--border-color);
   2339        }
   2340 
   2341        .header-text-container {
   2342          display: flex;
   2343          flex-direction: column;
   2344 
   2345          .header-title {
   2346            font-weight: var(--heading-font-weight);
   2347            line-height: 1.5;
   2348          }
   2349 
   2350          .header-subtitle {
   2351            font-weight: normal;
   2352            line-height: 1.5;
   2353          }
   2354        }
   2355      }
   2356 
   2357      .multi-select-container {
   2358        padding: 24px;
   2359        margin: 0;
   2360 
   2361        &.picker {
   2362          display: flex;
   2363          flex-flow: row wrap;
   2364          box-sizing: border-box;
   2365 
   2366          input[type='checkbox'] {
   2367            position: absolute;
   2368            opacity: 0;
   2369            width: 0;
   2370            height: 0;
   2371          }
   2372 
   2373          .checkbox-container {
   2374            display: flex;
   2375            flex-direction: row;
   2376            align-items: center;
   2377            background-color: var(--picker-background-color);
   2378            border: 1px solid var(--picker-border-color);
   2379            padding: 8px 12px;
   2380            border-radius: var(--border-radius-circle);
   2381            user-select: none;
   2382 
   2383            &:has(input:checked) {
   2384              border-color: var(--picker-checked-border-color);
   2385              border-width: 3px;
   2386              margin: -2px;
   2387 
   2388              &:hover {
   2389                border-color: var(--picker-hover-border-color);
   2390              }
   2391            }
   2392 
   2393            &:hover {
   2394              background-color: var(--picker-hover-background-color);
   2395              border-color: var(--picker-hover-border-color);
   2396 
   2397              .picker-icon.picker-checked {
   2398                background-color: var(--picker-checkbox-hover-color);
   2399              }
   2400            }
   2401 
   2402            &:focus-visible {
   2403              outline: 2px solid var(--picker-focus-ring-color);
   2404              outline-offset: 6px;
   2405 
   2406              &:has(input:checked) {
   2407                outline-offset: 4px;
   2408              }
   2409            }
   2410 
   2411            .picker-icon {
   2412              border-radius: var(--border-radius-circle);
   2413              width: 27px;
   2414              height: 27px;
   2415              display: flex;
   2416              justify-content: center;
   2417              align-items: center;
   2418              text-align: center;
   2419              margin-inline-end: 8px;
   2420              font-size: 12px;
   2421              forced-color-adjust: none;
   2422 
   2423              &.picker-checked {
   2424                forced-color-adjust: auto;
   2425                background-color: var(--picker-checkbox-color);
   2426                mask: url('chrome://global/skin/icons/check.svg') center / 15px no-repeat exclude, linear-gradient(#000 0 0);
   2427              }
   2428            }
   2429          }
   2430        }
   2431 
   2432        .checkbox-container {
   2433          display: grid;
   2434 
   2435          label,
   2436          p {
   2437            grid-column: 2;
   2438          }
   2439 
   2440          p {
   2441            margin-block: 0.5em 0;
   2442          }
   2443        }
   2444      }
   2445    }
   2446  }
   2447 
   2448  .tile-title-container {
   2449    margin-inline: 0;
   2450    margin-block: 10px 24px;
   2451    text-align: start;
   2452    transition: var(--transition);
   2453  }
   2454 
   2455  .tile-title {
   2456    font-size: 24px;
   2457    font-weight: var(--heading-font-weight);
   2458    margin-block: 0;
   2459 
   2460    &:not(:last-child) {
   2461      margin-block-end: 16px;
   2462    }
   2463  }
   2464 
   2465  .tile-subtitle {
   2466    font-size: 16px;
   2467    margin-block: 0;
   2468  }
   2469 
   2470  .dismiss-button {
   2471    position: absolute;
   2472    z-index: 2;
   2473    top: 0;
   2474    left: auto;
   2475    right: 0;
   2476    box-sizing: border-box;
   2477    padding: 0;
   2478    margin: 16px;
   2479    display: block;
   2480    float: inline-end;
   2481    background: url('chrome://global/skin/icons/close.svg') no-repeat center / 16px;
   2482    height: 32px;
   2483    width: 32px;
   2484    align-self: end;
   2485    // override default min-height and min-width for buttons
   2486    min-height: 32px;
   2487    min-width: 32px;
   2488    -moz-context-properties: fill;
   2489    fill: currentColor;
   2490    transition: var(--transition);
   2491 
   2492    &:dir(rtl) {
   2493      left: 0;
   2494      right: auto;
   2495    }
   2496 
   2497    &.with-background {
   2498      background-color: var(--background-color-canvas);
   2499 
   2500      &:hover {
   2501        background-color: var(--button-background-color-hover);
   2502      }
   2503 
   2504      &:active {
   2505        background-color: var(--button-background-color-active);
   2506      }
   2507    }
   2508  }
   2509 
   2510  @keyframes fadein {
   2511    from { opacity: 0; }
   2512  }
   2513 
   2514  .secondary-cta {
   2515    display: flex;
   2516    align-items: end;
   2517    flex-direction: row;
   2518    justify-content: center;
   2519    font-size: 14px;
   2520    transition: var(--transition);
   2521 
   2522    &.top {
   2523      justify-content: end;
   2524      padding-inline-end: min(150px, 500px - 70vh);
   2525      padding-top: 4px;
   2526      position: absolute;
   2527      top: 10px;
   2528      inset-inline-end: 20px;
   2529      z-index: 2;
   2530    }
   2531 
   2532    span {
   2533      color: var(--grey-subtitle-1);
   2534      margin: 0 4px;
   2535    }
   2536  }
   2537 
   2538  .secondary-buttons-top-container {
   2539    display: flex;
   2540    flex-direction: row-reverse;
   2541    position: fixed;
   2542    top: 10px;
   2543    inset-inline-end: 10px;
   2544    width: auto;
   2545    height: auto;
   2546    z-index: 2;
   2547 
   2548    .secondary-cta.top {
   2549      position: relative;
   2550      padding-top: 0;
   2551    }
   2552  }
   2553 
   2554  .message-text {
   2555    transition: var(--transition);
   2556  }
   2557 
   2558  .helptext {
   2559    padding: 1em;
   2560    text-align: center;
   2561    color: var(--grey-subtitle-1);
   2562    font-size: 12px;
   2563    line-height: 18px;
   2564 
   2565    &.default {
   2566      align-self: center;
   2567      max-width: 40%;
   2568    }
   2569 
   2570    span {
   2571      padding-inline-end: 4px;
   2572    }
   2573  }
   2574 
   2575  .helptext-img {
   2576    height: 1.5em;
   2577    width: 1.5em;
   2578    margin-inline-end: 4px;
   2579    vertical-align: middle;
   2580 
   2581    &.end {
   2582      margin: 4px;
   2583    }
   2584 
   2585    &.footer {
   2586      vertical-align: bottom;
   2587    }
   2588  }
   2589 
   2590  .steps {
   2591    display: flex;
   2592    flex-direction: row;
   2593    justify-content: center;
   2594    margin-top: 0;
   2595    padding-block: 16px 0;
   2596    transition: var(--transition);
   2597    z-index: -1;
   2598    height: 48px;
   2599    box-sizing: border-box;
   2600 
   2601    &.has-helptext {
   2602      padding-bottom: 0;
   2603    }
   2604 
   2605    .indicator {
   2606      width: 0;
   2607      height: 0;
   2608      margin-inline-end: 4px;
   2609      margin-inline-start: 4px;
   2610      background: var(--grey-subtitle-1);
   2611      border-radius: var(--border-radius-small);
   2612      // using border will show up in Windows High Contrast Mode to improve accessibility.
   2613      border: 3px solid var(--button-text-color);
   2614      opacity: 0.35;
   2615      box-sizing: inherit;
   2616 
   2617      &.current {
   2618        opacity: 1;
   2619        border-color: var(--button-background-color-primary);
   2620 
   2621        // This is the only step shown, so visually hide it to maintain spacing.
   2622        &:last-of-type:first-of-type {
   2623          opacity: 0;
   2624        }
   2625      }
   2626    }
   2627 
   2628    &.progress-bar {
   2629      height: 6px;
   2630      padding-block: 0;
   2631      margin-block: 42px 0;
   2632      background-color: color-mix(in srgb, var(--button-text-color) 25%, transparent);
   2633      justify-content: start;
   2634      opacity: 1;
   2635      transition: none;
   2636 
   2637      .indicator {
   2638        width: 100%;
   2639        height: 100%;
   2640        margin-inline: -1px;
   2641        background-color: var(--button-background-color-primary);
   2642        border: 0;
   2643        border-radius: 0;
   2644        opacity: 1;
   2645        transition: var(--progress-bar-transition);
   2646        translate: calc(var(--progress-bar-progress, 0%) - 100%);
   2647 
   2648        &:dir(rtl) {
   2649          translate: calc(var(--progress-bar-progress, 0%) * -1 + 100%);
   2650        }
   2651      }
   2652    }
   2653  }
   2654 
   2655  .additional-cta-container {
   2656    &[flow] {
   2657      display: flex;
   2658      flex-flow: column wrap;
   2659      align-items: center;
   2660 
   2661      &[flow='row'] {
   2662        flex-direction: row;
   2663        justify-content: center;
   2664 
   2665        .secondary-cta {
   2666          flex-basis: 100%;
   2667        }
   2668      }
   2669    }
   2670  }
   2671 
   2672  .legal-paragraph {
   2673    transition: var(--transition)
   2674  }
   2675 
   2676  .primary,
   2677  .secondary,
   2678  .additional-cta,
   2679  .submenu-button {
   2680    font-size: 13px;
   2681    line-height: 16px;
   2682    padding: 11px 15px;
   2683    transition: var(--transition);
   2684 
   2685    &.rtamo {
   2686      margin-top: 24px;
   2687    }
   2688 
   2689    &.slim {
   2690      padding: 0;
   2691    }
   2692  }
   2693 
   2694  .secondary {
   2695    background-color: var(--button-background-color);
   2696    color: var(--button-text-color);
   2697  }
   2698 
   2699  .split-button-container,
   2700  .screen .action-buttons .split-button-container {
   2701    align-items: stretch;
   2702 
   2703    &:not([hidden]) {
   2704      display: flex;
   2705    }
   2706 
   2707    .primary,
   2708    .secondary,
   2709    .additional-cta {
   2710      &:not(.submenu-button) {
   2711        border-start-end-radius: 0;
   2712        border-end-end-radius: 0;
   2713        margin-inline-end: 0;
   2714      }
   2715 
   2716      &:focus-visible {
   2717        z-index: 2;
   2718      }
   2719    }
   2720 
   2721    .submenu-button {
   2722      border-start-start-radius: 0;
   2723      border-end-start-radius: 0;
   2724      margin-inline-start: 1px;
   2725      padding: 8px;
   2726      min-width: 30px;
   2727      box-sizing: border-box;
   2728      background-image: url('chrome://global/skin/icons/arrow-down.svg');
   2729      background-repeat: no-repeat;
   2730      background-size: 16px;
   2731      background-position: center;
   2732      -moz-context-properties: fill;
   2733      fill: currentColor;
   2734    }
   2735  }
   2736 
   2737  // Styles specific to background noodles, with screen-by-screen positions
   2738  .noodle {
   2739    display: block;
   2740    background-repeat: no-repeat;
   2741    background-size: 100% 100%;
   2742    position: absolute;
   2743    transition: var(--transition);
   2744 
   2745    // Flip noodles in a way that combines individual transforms.
   2746    &:dir(rtl) {
   2747      scale: -1 1;
   2748    }
   2749  }
   2750 
   2751  .outline-L {
   2752    background-image: url('chrome://activity-stream/content/data/content/assets/noodle-outline-L.svg');
   2753  }
   2754 
   2755  .solid-L {
   2756    background-image: url('chrome://activity-stream/content/data/content/assets/noodle-solid-L.svg');
   2757    -moz-context-properties: fill;
   2758    fill: var(--background-color-canvas);
   2759    display: none;
   2760  }
   2761 
   2762  .purple-C {
   2763    background-image: url('chrome://activity-stream/content/data/content/assets/noodle-C.svg');
   2764    -moz-context-properties: fill;
   2765    fill: #E7258C;
   2766  }
   2767 
   2768  .orange-L {
   2769    background-image: url('chrome://activity-stream/content/data/content/assets/noodle-solid-L.svg');
   2770    -moz-context-properties: fill;
   2771    fill: #FFA437;
   2772  }
   2773 
   2774  .screen-1 {
   2775    .section-main {
   2776      z-index: 1;
   2777      margin: auto;
   2778    }
   2779 
   2780    .section-main.system-prompt-spotlight {
   2781      margin-top: 100px;
   2782      margin-inline: auto;
   2783    }
   2784    // Position of noodles on second screen
   2785    .outline-L {
   2786      width: 87px;
   2787      height: 80px;
   2788      transform: rotate(10deg) translate(-30%, 200%);
   2789      transition-delay: 0.4s;
   2790      z-index: 2;
   2791    }
   2792 
   2793    .orange-L {
   2794      width: 550px;
   2795      height: 660px;
   2796      transform: rotate(-155deg) translate(11%, -18%);
   2797      transition-delay: 0.2s;
   2798    }
   2799 
   2800    .purple-C {
   2801      width: 310px;
   2802      height: 260px;
   2803      transform: translate(-18%, -67%);
   2804    }
   2805 
   2806    .yellow-circle {
   2807      width: 165px;
   2808      height: 165px;
   2809      border-radius: var(--border-radius-circle);
   2810      transform: translate(230%, -5%);
   2811      background: #952BB9;
   2812      transition-delay: -0.2s;
   2813    }
   2814  }
   2815 
   2816  // Defining the timing of the transition-in for items within the dialog,
   2817  // These longer delays are to allow for the dialog to slide down on first screen
   2818  .dialog-initial {
   2819    .brand-logo {
   2820      transition-delay: 0.6s;
   2821    }
   2822 
   2823    .welcome-text {
   2824      transition-delay: 0.8s;
   2825    }
   2826 
   2827    .tiles-single-select-section,
   2828    .inline-image,
   2829    .link-paragraph,
   2830    .multi-select-container,
   2831    migration-wizard,
   2832    turn-on-scheduled-backups::part(form) {
   2833      transition-delay: 0.9s;
   2834    }
   2835 
   2836    .primary,
   2837    .secondary,
   2838    .secondary-cta,
   2839    .steps,
   2840    .cta-link,
   2841    .legal-paragraph,
   2842    .steps[above-button]:not(.progress-bar) {
   2843      transition-delay: 1s;
   2844    }
   2845  }
   2846 
   2847  // Delays for transitioning-in of intermediate screens
   2848  .screen:not(.dialog-initial) {
   2849    .tiles-single-select-section,
   2850    .inline-image,
   2851    .link-paragraph,
   2852    .multi-select-container
   2853     {
   2854      transition-delay: 0.2s;
   2855    }
   2856 
   2857    .primary,
   2858    .secondary,
   2859    .secondary-cta,
   2860    .cta-link,
   2861    .legal-paragraph,
   2862    .steps[above-button]:not(.progress-bar) {
   2863      transition-delay: 0.4s;
   2864    }
   2865  }
   2866 
   2867  .screen-2 {
   2868    .section-main {
   2869      z-index: 1;
   2870      margin: auto;
   2871    }
   2872 
   2873    .section-main.system-prompt-spotlight {
   2874      margin-top: 100px;
   2875      margin-inline: auto;
   2876    }
   2877 
   2878    // Position of noodles on third screen
   2879    .outline-L {
   2880      width: 87px;
   2881      height: 80px;
   2882      transform: rotate(250deg) translate(-420%, 425%);
   2883      transition-delay: 0.2s;
   2884      z-index: 2;
   2885    }
   2886 
   2887    .orange-L {
   2888      height: 800px;
   2889      width: 660px;
   2890      transform: rotate(35deg) translate(-10%, -7%);
   2891      transition-delay: -0.4s;
   2892    }
   2893 
   2894    .purple-C {
   2895      width: 392px;
   2896      height: 394px;
   2897      transform: rotate(260deg) translate(-34%, -35%);
   2898      transition-delay: -0.2s;
   2899      fill: #952BB9;
   2900    }
   2901 
   2902    .yellow-circle {
   2903      width: 165px;
   2904      height: 165px;
   2905      border-radius: var(--border-radius-circle);
   2906      transform: translate(160%, 130%);
   2907      background: #E7258C;
   2908    }
   2909  }
   2910 
   2911  &.transition-in {
   2912    .noodle {
   2913      opacity: 0;
   2914      rotate: var(--rotate);
   2915      scale: var(--scale);
   2916    }
   2917 
   2918    .dialog-initial {
   2919      .main-content,
   2920      .dismiss-button {
   2921        translate: 0 calc(-2 * var(--translate));
   2922      }
   2923 
   2924      .brand-logo,
   2925      .steps {
   2926        opacity: 0;
   2927        translate: 0 calc(-1 * var(--translate));
   2928      }
   2929    }
   2930 
   2931    .screen {
   2932      .welcome-text,
   2933      .multi-select-container,
   2934      .tiles-single-select-section,
   2935      .link-paragraph,
   2936      .inline-image,
   2937      .primary,
   2938      .checkbox-container:not(.multi-select-item),
   2939      .secondary,
   2940      .secondary-cta:not(.top),
   2941      .cta-link,
   2942      .legal-paragraph,
   2943      migration-wizard,
   2944      turn-on-scheduled-backups::part(form),
   2945      .tile-title-container,
   2946      .steps[above-button]:not(.progress-bar) {
   2947        opacity: 0;
   2948        translate: 0 calc(-1 * var(--translate));
   2949      }
   2950 
   2951      &:not(.dialog-initial) {
   2952        .steps:not(.progress-bar, [above-button]) {
   2953          opacity: 0.2;
   2954        }
   2955      }
   2956    }
   2957  }
   2958 
   2959  .system-prompt-spotlight {
   2960    .inline-icon-container {
   2961      display: flex;
   2962    }
   2963 
   2964    .welcome-text {
   2965      align-items: flex-start;
   2966      padding: 5px;
   2967 
   2968      h2 {
   2969        text-align: start;
   2970        margin: 0;
   2971        margin-block: 10px 15px;
   2972      }
   2973    }
   2974 
   2975    .brand-logo {
   2976      margin-block: 2px;
   2977    }
   2978 
   2979    .multi-select-container {
   2980      margin-inline-start: 23px;
   2981      margin-block-end: 17px;
   2982    }
   2983 
   2984    .additional-cta-container {
   2985      display: flex;
   2986      flex-direction: row-reverse;
   2987      padding-inline-end: 15px;
   2988    }
   2989 
   2990    .main-content.no-steps {
   2991      padding-bottom: 12px;
   2992      margin-inline: auto;
   2993    }
   2994  }
   2995 
   2996  &.transition-out {
   2997    .noodle {
   2998      opacity: 0;
   2999      rotate: var(--rotate);
   3000      scale: var(--scale);
   3001      transition-delay: 0.2s;
   3002    }
   3003 
   3004    .screen:not(.dialog-last) {
   3005      .main-content {
   3006        overflow: hidden;
   3007      }
   3008 
   3009      .welcome-text,
   3010      .multi-select-container {
   3011        opacity: 0;
   3012        translate: 0 var(--translate);
   3013        transition-delay: 0.1s;
   3014      }
   3015 
   3016      // content that is nested between inner main content and navigation CTAs
   3017      // requires an additional 0.1s transition to avoid overlap
   3018      .tiles-single-select-section,
   3019      .inline-image,
   3020      .link-paragraph,
   3021      migration-wizard,
   3022      turn-on-scheduled-backups::part(form) {
   3023        opacity: 0;
   3024        translate: 0 var(--translate);
   3025        transition-delay: 0.2s;
   3026      }
   3027 
   3028      .primary,
   3029      .checkbox-container:not(.multi-select-item),
   3030      .secondary,
   3031      .secondary-cta:not(.top),
   3032      .cta-link,
   3033      .legal-paragraph,
   3034      .steps[above-button]:not(.progress-bar) {
   3035        opacity: 0;
   3036        translate: 0 var(--translate);
   3037        transition-delay: 0.3s;
   3038      }
   3039 
   3040      .steps:not(.progress-bar, [above-button]) {
   3041        opacity: 0.2;
   3042        transition-delay: 0.5s;
   3043      }
   3044    }
   3045 
   3046    .dialog-last {
   3047      .noodle {
   3048        transition-delay: 0s;
   3049      }
   3050 
   3051      .main-content,
   3052      .dismiss-button {
   3053        opacity: 0;
   3054        translate: 0 calc(2 * var(--translate));
   3055        transition-delay: 0.4s;
   3056      }
   3057    }
   3058  }
   3059 
   3060  .inline-image,
   3061  .link-paragraph {
   3062    transition: var(--transition);
   3063  }
   3064 
   3065  migration-wizard {
   3066    width: unset;
   3067    transition: var(--transition);
   3068 
   3069    &::part(buttons) {
   3070      margin-top: 24px;
   3071      justify-content: flex-start;
   3072    }
   3073 
   3074    &::part(deck) {
   3075      font-size: 0.83em;
   3076    }
   3077  }
   3078 
   3079  turn-on-scheduled-backups::part(form) {
   3080    transition: var(--transition);
   3081    border: 1px solid var(--border-color);
   3082    border-radius: var(--border-radius-medium);
   3083    padding: 24px 30px;
   3084    margin-block: 0 24px;
   3085  }
   3086 }
	tor-browser The Tor Browser
	git clone https://git.dasho.dev/tor-browser.git
	Log \| Files \| Refs \| README \| LICENSE