browser/components/newtab/css/activity-stream-linux.css

   1 @charset "UTF-8";
   2 /* This Source Code Form is subject to the terms of the Mozilla Public
   3  * License, v. 2.0. If a copy of the MPL was not distributed with this
   4  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   5 /* This is the linux variant */
   6 html {
   7   box-sizing: border-box;
   8 }
   9
  10 *,
  11 *::before,
  12 *::after {
  13   box-sizing: inherit;
  14 }
  15
  16 *::-moz-focus-inner {
  17   border: 0;
  18 }
  19
  20 body {
  21   margin: 0;
  22 }
  23
  24 button,
  25 input {
  26   background-color: inherit;
  27   color: inherit;
  28   font-family: inherit;
  29   font-size: inherit;
  30 }
  31
  32 [hidden] {
  33   display: none !important;
  34 }
  35
  36 :root {
  37   --newtab-background-color: #F9F9FB;
  38   --newtab-background-color-secondary: #FFF;
  39   --newtab-text-primary-color: #15141a;
  40   --newtab-primary-action-background: #0061e0;
  41   --newtab-primary-action-background-pocket: #008078;
  42   --newtab-text-secondary-color: color-mix(in srgb, var(--newtab-text-primary-color) 70%, transparent);
  43   --newtab-element-hover-color: color-mix(in srgb, var(--newtab-background-color) 90%, #000);
  44   --newtab-element-active-color: color-mix(in srgb, var(--newtab-background-color) 80%, #000);
  45   --newtab-element-secondary-color: color-mix(in srgb, currentColor 5%, transparent);
  46   --newtab-element-secondary-hover-color: color-mix(in srgb, currentColor 12%, transparent);
  47   --newtab-element-secondary-active-color: color-mix(in srgb, currentColor 25%, transparent);
  48   --newtab-primary-element-hover-color: color-mix(in srgb, var(--newtab-primary-action-background) 90%, #000);
  49   --newtab-primary-element-hover-pocket-color: color-mix(in srgb, var(--newtab-primary-action-background-pocket) 90%, #000);
  50   --newtab-primary-element-active-color: color-mix(in srgb, var(--newtab-primary-action-background) 80%, #000);
  51   --newtab-primary-element-text-color: #FFF;
  52   --newtab-primary-action-background-dimmed: color-mix(in srgb, var(--newtab-primary-action-background) 25%, transparent);
  53   --newtab-primary-action-background-pocket-dimmed: color-mix(in srgb, var(--newtab-primary-action-background-pocket) 25%, transparent);
  54   --newtab-border-color: color-mix(in srgb, var(--newtab-background-color) 75%, #000);
  55   --newtab-wordmark-color: #20123A;
  56   --newtab-status-success: #058B00;
  57   --newtab-status-error: #D70022;
  58   --newtab-inner-box-shadow-color: rgba(0, 0, 0, 0.1);
  59   --newtab-overlay-color: color-mix(in srgb, var(--newtab-background-color) 85%, transparent);
  60   --newtab-textbox-focus-color: var(--newtab-primary-action-background);
  61   --newtab-textbox-focus-boxshadow: 0 0 0 1px var(--newtab-primary-action-background), 0 0 0 4px rgba(var(--newtab-primary-action-background), 0.3);
  62   --newtab-button-secondary-color: inherit;
  63 }
  64 :root[lwt-newtab-brighttext] {
  65   --newtab-background-color: #2B2A33;
  66   --newtab-background-color-secondary: #42414d;
  67   --newtab-text-primary-color: #fbfbfe;
  68   --newtab-primary-action-background: #00ddff;
  69   --newtab-primary-action-background-pocket: #00ddff;
  70   --newtab-primary-action-background-pocket-dimmed: color-mix(in srgb, var(--newtab-primary-action-background) 25%, transparent);
  71   --newtab-primary-element-hover-color: color-mix(in srgb, var(--newtab-primary-action-background) 55%, #FFF);
  72   --newtab-primary-element-hover-pocket-color: color-mix(in srgb, var(--newtab-primary-action-background-pocket) 55%, #FFF);
  73   --newtab-element-hover-color: color-mix(in srgb, var(--newtab-background-color) 80%, #FFF);
  74   --newtab-element-active-color: color-mix(in srgb, var(--newtab-background-color) 60%, #FFF);
  75   --newtab-element-secondary-color: color-mix(in srgb, currentColor 10%, transparent);
  76   --newtab-element-secondary-hover-color: color-mix(in srgb, currentColor 17%, transparent);
  77   --newtab-element-secondary-active-color: color-mix(in srgb, currentColor 30%, transparent);
  78   --newtab-border-color: color-mix(in srgb, var(--newtab-background-color) 75%, #FFF);
  79   --newtab-primary-element-text-color: #2b2a33;
  80   --newtab-wordmark-color: #fbfbfe;
  81   --newtab-status-success: #7C6;
  82 }
  83
  84 @media (prefers-contrast) {
  85   :root {
  86     --newtab-text-secondary-color: var(--newtab-text-primary-color);
  87   }
  88 }
  89 .icon {
  90   background-position: center center;
  91   background-repeat: no-repeat;
  92   background-size: 16px;
  93   -moz-context-properties: fill;
  94   display: inline-block;
  95   color: var(--newtab-text-primary-color);
  96   fill: currentColor;
  97   height: 16px;
  98   vertical-align: middle;
  99   width: 16px;
 100 }
 101 .icon.icon-spacer {
 102   margin-inline-end: 8px;
 103 }
 104 .icon.icon-small-spacer {
 105   margin-inline-end: 6px;
 106 }
 107 .icon.icon-button-style {
 108   fill: var(--newtab-text-secondary-color);
 109   border: 0;
 110 }
 111 .icon.icon-button-style:focus, .icon.icon-button-style:hover {
 112   fill: var(--newtab-text-primary-color);
 113 }
 114 .icon.icon-bookmark-added {
 115   background-image: url("chrome://browser/skin/bookmark.svg");
 116 }
 117 .icon.icon-bookmark-hollow {
 118   background-image: url("chrome://browser/skin/bookmark-hollow.svg");
 119 }
 120 .icon.icon-clear-input {
 121   background-image: url("chrome://global/skin/icons/close-fill.svg");
 122 }
 123 .icon.icon-delete {
 124   background-image: url("chrome://global/skin/icons/delete.svg");
 125 }
 126 .icon.icon-search {
 127   background-image: url("chrome://global/skin/icons/search-glass.svg");
 128 }
 129 .icon.icon-modal-delete {
 130   flex-shrink: 0;
 131   background-image: url("chrome://activity-stream/content/data/content/assets/glyph-modal-delete-20.svg");
 132   background-size: 32px;
 133   height: 32px;
 134   width: 32px;
 135 }
 136 .icon.icon-mail {
 137   background-image: url("chrome://activity-stream/content/data/content/assets/glyph-mail-16.svg");
 138 }
 139 .icon.icon-dismiss {
 140   background-image: url("chrome://global/skin/icons/close.svg");
 141 }
 142 .icon.icon-info {
 143   background-image: url("chrome://global/skin/icons/info.svg");
 144 }
 145 .icon.icon-help {
 146   background-image: url("chrome://global/skin/icons/help.svg");
 147 }
 148 .icon.icon-new-window {
 149   background-image: url("chrome://activity-stream/content/data/content/assets/glyph-newWindow-16.svg");
 150 }
 151 .icon.icon-new-window:dir(rtl) {
 152   transform: scaleX(-1);
 153 }
 154 .icon.icon-new-window-private {
 155   background-image: url("chrome://browser/skin/privateBrowsing.svg");
 156 }
 157 .icon.icon-settings {
 158   background-image: url("chrome://global/skin/icons/settings.svg");
 159 }
 160 .icon.icon-pin {
 161   background-image: url("chrome://activity-stream/content/data/content/assets/glyph-pin-16.svg");
 162 }
 163 .icon.icon-pin:dir(rtl) {
 164   transform: scaleX(-1);
 165 }
 166 .icon.icon-unpin {
 167   background-image: url("chrome://activity-stream/content/data/content/assets/glyph-unpin-16.svg");
 168 }
 169 .icon.icon-unpin:dir(rtl) {
 170   transform: scaleX(-1);
 171 }
 172 .icon.icon-edit {
 173   background-image: url("chrome://global/skin/icons/edit.svg");
 174 }
 175 .icon.icon-pocket {
 176   background-image: url("chrome://global/skin/icons/pocket.svg");
 177 }
 178 .icon.icon-pocket-save {
 179   background-image: url("chrome://global/skin/icons/pocket.svg");
 180   fill: #FFF;
 181 }
 182 .icon.icon-pocket-delete {
 183   background-image: url("chrome://activity-stream/content/data/content/assets/glyph-pocket-delete-16.svg");
 184 }
 185 .icon.icon-pocket-archive {
 186   background-image: url("chrome://activity-stream/content/data/content/assets/glyph-pocket-archive-16.svg");
 187 }
 188 .icon.icon-history-item {
 189   background-image: url("chrome://browser/skin/history.svg");
 190 }
 191 .icon.icon-trending {
 192   background-image: url("chrome://browser/skin/trending.svg");
 193   transform: translateY(2px);
 194 }
 195 .icon.icon-now {
 196   background-image: url("chrome://browser/skin/history.svg");
 197 }
 198 .icon.icon-topsites {
 199   background-image: url("chrome://browser/skin/topsites.svg");
 200 }
 201 .icon.icon-pin-small {
 202   background-image: url("chrome://browser/skin/pin-12.svg");
 203   background-size: 12px;
 204   height: 12px;
 205   width: 12px;
 206 }
 207 .icon.icon-pin-small:dir(rtl) {
 208   transform: scaleX(-1);
 209 }
 210 .icon.icon-check {
 211   background-image: url("chrome://global/skin/icons/check.svg");
 212 }
 213 .icon.icon-download {
 214   background-image: url("chrome://browser/skin/downloads/downloads.svg");
 215 }
 216 .icon.icon-copy {
 217   background-image: url("chrome://global/skin/icons/edit-copy.svg");
 218 }
 219 .icon.icon-open-file {
 220   background-image: url("chrome://activity-stream/content/data/content/assets/glyph-open-file-16.svg");
 221 }
 222 .icon.icon-webextension {
 223   background-image: url("chrome://activity-stream/content/data/content/assets/glyph-webextension-16.svg");
 224 }
 225 .icon.icon-highlights {
 226   background-image: url("chrome://global/skin/icons/highlights.svg");
 227 }
 228 .icon.icon-arrowhead-down {
 229   background-image: url("chrome://global/skin/icons/arrow-down.svg");
 230 }
 231 .icon.icon-arrowhead-down-small {
 232   background-image: url("chrome://global/skin/icons/arrow-down-12.svg");
 233   background-size: 12px;
 234   height: 12px;
 235   width: 12px;
 236 }
 237 .icon.icon-arrowhead-forward-small {
 238   background-image: url("chrome://global/skin/icons/arrow-right-12.svg");
 239   background-size: 12px;
 240   height: 12px;
 241   width: 12px;
 242 }
 243 .icon.icon-arrowhead-forward-small:dir(rtl) {
 244   background-image: url("chrome://global/skin/icons/arrow-left-12.svg");
 245 }
 246 .icon.icon-arrowhead-up {
 247   background-image: url("chrome://global/skin/icons/arrow-up.svg");
 248 }
 249 .icon.icon-add {
 250   background-image: url("chrome://global/skin/icons/plus.svg");
 251 }
 252 .icon.icon-minimize {
 253   background-image: url("chrome://activity-stream/content/data/content/assets/glyph-minimize-16.svg");
 254 }
 255 .icon.icon-maximize {
 256   background-image: url("chrome://activity-stream/content/data/content/assets/glyph-maximize-16.svg");
 257 }
 258 .icon.icon-arrow {
 259   background-image: url("chrome://global/skin/icons/arrow-right-12.svg");
 260 }
 261
 262 html {
 263   height: 100%;
 264 }
 265
 266 body,
 267 #root {
 268   min-height: 100vh;
 269 }
 270
 271 #root {
 272   position: relative;
 273 }
 274
 275 body {
 276   background-color: var(--newtab-background-color);
 277   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif;
 278   font-size: 16px;
 279   background-image: var(--newtab-wallpaper, "");
 280   background-repeat: no-repeat;
 281   background-size: cover;
 282   background-position: center;
 283   background-attachment: fixed;
 284 }
 285
 286 .no-scroll {
 287   overflow: hidden;
 288 }
 289
 290 h1,
 291 h2 {
 292   font-weight: normal;
 293 }
 294
 295 .inner-border {
 296   border: 1px solid var(--newtab-border-color);
 297   border-radius: 3px;
 298   height: 100%;
 299   left: 0;
 300   pointer-events: none;
 301   position: absolute;
 302   top: 0;
 303   width: 100%;
 304   z-index: 100;
 305 }
 306
 307 @keyframes fadeIn {
 308   from {
 309     opacity: 0;
 310   }
 311   to {
 312     opacity: 1;
 313   }
 314 }
 315 .show-on-init {
 316   opacity: 0;
 317   transition: opacity 0.2s ease-in;
 318 }
 319 .show-on-init.on {
 320   animation: fadeIn 0.2s;
 321   opacity: 1;
 322 }
 323
 324 .actions {
 325   border-top: 1px solid var(--newtab-border-color);
 326   display: flex;
 327   flex-direction: row;
 328   flex-wrap: wrap;
 329   justify-content: flex-start;
 330   margin: 0;
 331   padding: 15px 25px 0;
 332 }
 333
 334 .button,
 335 .actions button {
 336   background-color: var(--newtab-button-secondary-color);
 337   border: 1px solid var(--newtab-border-color);
 338   border-radius: 4px;
 339   color: inherit;
 340   cursor: pointer;
 341   margin-bottom: 15px;
 342   padding: 10px 30px;
 343   white-space: nowrap;
 344 }
 345 .button:hover:not(.dismiss), .button:focus:not(.dismiss),
 346 .actions button:hover:not(.dismiss),
 347 .actions button:focus:not(.dismiss) {
 348   box-shadow: 0 0 0 5px var(--newtab-element-secondary-color);
 349   transition: box-shadow 150ms;
 350 }
 351 .button.dismiss,
 352 .actions button.dismiss {
 353   background-color: transparent;
 354   border: 0;
 355   padding: 0;
 356   text-decoration: underline;
 357 }
 358 .button.primary, .button.done,
 359 .actions button.primary,
 360 .actions button.done {
 361   background-color: var(--newtab-primary-action-background);
 362   border: solid 1px var(--newtab-primary-action-background);
 363   color: var(--newtab-primary-element-text-color);
 364   margin-inline-start: auto;
 365 }
 366
 367 input[type=text], input[type=search] {
 368   border-radius: 3px;
 369 }
 370
 371 .clamp {
 372   -webkit-box-orient: vertical;
 373   display: -webkit-box;
 374   overflow: hidden;
 375   word-break: break-word;
 376 }
 377
 378 .a11y-link-button {
 379   border: 0;
 380   padding: 0;
 381   cursor: pointer;
 382   text-align: unset;
 383   color: var(--newtab-primary-action-background);
 384 }
 385 .a11y-link-button:hover, .a11y-link-button:focus {
 386   text-decoration: underline;
 387 }
 388
 389 .outer-wrapper {
 390   color: var(--newtab-text-primary-color);
 391   display: flex;
 392   flex-grow: 1;
 393   min-height: 100vh;
 394   padding: 30px 32px 32px;
 395 }
 396 .outer-wrapper.ds-outer-wrapper-breakpoint-override {
 397   padding: 30px 0 32px;
 398 }
 399 @media (min-width: 610px) {
 400   .outer-wrapper.ds-outer-wrapper-breakpoint-override {
 401     padding: 30px 32px 32px;
 402   }
 403 }
 404 .outer-wrapper.only-search {
 405   display: block;
 406   padding-top: 134px;
 407 }
 408 .outer-wrapper a {
 409   color: var(--newtab-primary-action-background);
 410 }
 411
 412 main {
 413   margin: 0 auto;
 414   display: flex;
 415   flex-direction: column;
 416   justify-content: center;
 417   width: 274px;
 418   padding: 0;
 419 }
 420 main .vertical-center-wrapper {
 421   margin: auto 0;
 422 }
 423 main section {
 424   margin-bottom: 20px;
 425   position: relative;
 426 }
 427 .hide-main main {
 428   visibility: hidden;
 429 }
 430 @media (min-width: 610px) {
 431   main {
 432     width: 530px;
 433   }
 434 }
 435 @media (min-width: 866px) {
 436   main {
 437     width: 786px;
 438   }
 439 }
 440 @media (min-width: 1122px) {
 441   main {
 442     width: 1042px;
 443   }
 444 }
 445
 446 .ds-outer-wrapper-search-alignment main {
 447   margin: 0 auto;
 448 }
 449
 450 .ds-outer-wrapper-breakpoint-override main {
 451   width: 266px;
 452   padding-bottom: 0;
 453 }
 454 @media (min-width: 610px) {
 455   .ds-outer-wrapper-breakpoint-override main {
 456     width: 510px;
 457   }
 458 }
 459 @media (min-width: 866px) {
 460   .ds-outer-wrapper-breakpoint-override main {
 461     width: 746px;
 462   }
 463 }
 464 @media (min-width: 1122px) {
 465   .ds-outer-wrapper-breakpoint-override main {
 466     width: 986px;
 467   }
 468 }
 469
 470 .base-content-fallback {
 471   height: 100vh;
 472 }
 473
 474 .body-wrapper .section-title, .body-wrapper .sections-list .section:last-of-type, .body-wrapper .topics {
 475   opacity: 0;
 476 }
 477 .body-wrapper.on .section-title, .body-wrapper.on .sections-list .section:last-of-type, .body-wrapper.on .topics {
 478   opacity: 1;
 479 }
 480
 481 .non-collapsible-section {
 482   padding: 0 25px;
 483 }
 484
 485 .prefs-button button {
 486   background-color: transparent;
 487   border: 0;
 488   border-radius: 2px;
 489   cursor: pointer;
 490   inset-inline-end: 15px;
 491   padding: 15px;
 492   position: fixed;
 493   top: 15px;
 494   z-index: 1000;
 495 }
 496 .prefs-button button:hover, .prefs-button button:focus {
 497   background-color: var(--newtab-element-hover-color);
 498 }
 499 .prefs-button button:active {
 500   background-color: var(--newtab-element-active-color);
 501 }
 502
 503 .wallpaper-attribution {
 504   padding: 0 25px;
 505   font-size: 14px;
 506 }
 507 .wallpaper-attribution.theme-light {
 508   display: inline-block;
 509 }
 510 [lwt-newtab-brighttext] .wallpaper-attribution.theme-light {
 511   display: none;
 512 }
 513 .wallpaper-attribution.theme-dark {
 514   display: none;
 515 }
 516 [lwt-newtab-brighttext] .wallpaper-attribution.theme-dark {
 517   display: inline-block;
 518 }
 519 .wallpaper-attribution a {
 520   color: var(--newtab-element-color);
 521 }
 522 .wallpaper-attribution a:hover {
 523   text-decoration: none;
 524 }
 525
 526 .as-error-fallback {
 527   align-items: center;
 528   border-radius: 3px;
 529   box-shadow: inset 0 0 0 1px var(--newtab-inner-box-shadow-color);
 530   color: var(--newtab-text-secondary-color);
 531   display: flex;
 532   flex-direction: column;
 533   font-size: 12px;
 534   justify-content: center;
 535   justify-items: center;
 536   line-height: 1.5;
 537 }
 538 .as-error-fallback.borderless-error {
 539   box-shadow: none;
 540 }
 541 .as-error-fallback a {
 542   color: var(--newtab-text-secondary-color);
 543   text-decoration: underline;
 544 }
 545
 546 /* stylelint-disable max-nesting-depth */
 547 .top-sites-list {
 548   list-style: none;
 549   margin: 0 -16px;
 550   padding: 0;
 551 }
 552 .top-sites-list a {
 553   text-decoration: none;
 554 }
 555 .top-sites-list:not(.dnd-active) .top-site-outer:is(.active, :focus, :hover) {
 556   background: var(--newtab-element-hover-color);
 557 }
 558 @media (max-width: 610px) {
 559   .top-sites-list > :nth-child(2n+1) .context-menu {
 560     margin-inline-end: auto;
 561     margin-inline-start: auto;
 562     inset-inline-end: auto;
 563     inset-inline-start: -32px;
 564   }
 565   .top-sites-list > :nth-child(2n) .context-menu {
 566     margin-inline-end: 5px;
 567     margin-inline-start: auto;
 568     inset-inline-end: 0;
 569     inset-inline-start: auto;
 570   }
 571 }
 572 @media (min-width: 610px) and (max-width: 866px) {
 573   .top-sites-list :nth-child(4n) .context-menu {
 574     margin-inline-end: 5px;
 575     margin-inline-start: auto;
 576     inset-inline-end: 0;
 577     inset-inline-start: auto;
 578   }
 579 }
 580 @media (min-width: 610px) and (max-width: 802px) {
 581   .top-sites-list :nth-child(4n+3) .context-menu {
 582     margin-inline-end: 5px;
 583     margin-inline-start: auto;
 584     inset-inline-end: 0;
 585     inset-inline-start: auto;
 586   }
 587 }
 588 @media (min-width: 866px) and (max-width: 1250px) {
 589   .top-sites-list :nth-child(6n) .context-menu {
 590     margin-inline-end: 5px;
 591     margin-inline-start: auto;
 592     inset-inline-end: 0;
 593     inset-inline-start: auto;
 594   }
 595 }
 596 @media (min-width: 866px) and (max-width: 1058px) {
 597   .top-sites-list :nth-child(6n+5) .context-menu {
 598     margin-inline-end: 5px;
 599     margin-inline-start: auto;
 600     inset-inline-end: 0;
 601     inset-inline-start: auto;
 602   }
 603 }
 604 @media (min-width: 1122px) and (max-width: 1506px) {
 605   .top-sites-list :nth-child(8n) .context-menu {
 606     margin-inline-end: 5px;
 607     margin-inline-start: auto;
 608     inset-inline-end: 0;
 609     inset-inline-start: auto;
 610   }
 611 }
 612 @media (min-width: 1122px) and (max-width: 1314px) {
 613   .top-sites-list :nth-child(8n+7) .context-menu {
 614     margin-inline-end: 5px;
 615     margin-inline-start: auto;
 616     inset-inline-end: 0;
 617     inset-inline-start: auto;
 618   }
 619 }
 620 .top-sites-list .hide-for-narrow {
 621   display: none;
 622 }
 623 @media (min-width: 610px) {
 624   .top-sites-list .hide-for-narrow {
 625     display: inline-block;
 626   }
 627 }
 628 @media (min-width: 866px) {
 629   .top-sites-list .hide-for-narrow {
 630     display: none;
 631   }
 632 }
 633 @media (min-width: 1122px) {
 634   .top-sites-list .hide-for-narrow {
 635     display: inline-block;
 636   }
 637 }
 638
 639 .top-site-outer {
 640   width: 120px;
 641   border-radius: 8px;
 642   display: inline-block;
 643   margin-block-end: 16px;
 644 }
 645 .top-site-outer .top-site-inner {
 646   position: relative;
 647 }
 648 .top-site-outer .top-site-inner > a {
 649   padding: 20px 16px 4px;
 650   color: inherit;
 651   display: block;
 652   outline: none;
 653 }
 654 .top-site-outer:is(:hover) .context-menu-button {
 655   opacity: 1;
 656 }
 657 .top-site-outer .context-menu-button {
 658   background-image: url("chrome://global/skin/icons/more.svg");
 659   border: 0;
 660   border-radius: 4px;
 661   cursor: pointer;
 662   fill: var(--newtab-text-primary-color);
 663   -moz-context-properties: fill;
 664   height: 20px;
 665   width: 20px;
 666   inset-inline-end: 3px;
 667   opacity: 0;
 668   position: absolute;
 669   top: -20px;
 670   transition: opacity 200ms;
 671 }
 672 .top-site-outer .context-menu-button:is(:active, :focus) {
 673   outline: 0;
 674   opacity: 1;
 675   background-color: var(--newtab-element-hover-color);
 676   fill: var(--newtab-primary-action-background);
 677 }
 678 .top-site-outer .tile {
 679   border-radius: 8px;
 680   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
 681   background-color: var(--newtab-background-color-secondary);
 682   justify-content: center;
 683   margin: 0 auto;
 684   height: 80px;
 685   width: 80px;
 686   cursor: pointer;
 687   position: relative;
 688   align-items: center;
 689   color: var(--newtab-text-secondary-color);
 690   display: flex;
 691   font-size: 32px;
 692   font-weight: 200;
 693   text-transform: uppercase;
 694 }
 695 .top-site-outer .tile .icon-wrapper {
 696   border-radius: 4px;
 697   width: 48px;
 698   height: 48px;
 699   overflow: hidden;
 700   position: relative;
 701   display: flex;
 702   align-items: center;
 703   justify-content: center;
 704 }
 705 .top-site-outer .tile .icon-wrapper.letter-fallback::before {
 706   content: attr(data-fallback);
 707   text-transform: uppercase;
 708   display: flex;
 709   align-items: center;
 710   justify-content: center;
 711   font-size: 64px;
 712   font-weight: 800;
 713   transform: rotate(-10deg);
 714   top: 6px;
 715   position: relative;
 716   color: #FFF;
 717 }
 718 .top-site-outer .top-site-icon {
 719   background-color: var(--newtab-background-color-secondary);
 720   background-position: center center;
 721   background-repeat: no-repeat;
 722   border-radius: 4px;
 723   position: absolute;
 724 }
 725 .top-site-outer .rich-icon {
 726   background-size: cover;
 727   height: 100%;
 728   inset-inline-start: 0;
 729   top: 0;
 730   width: 100%;
 731 }
 732 .top-site-outer .default-icon,
 733 .top-site-outer .search-topsite {
 734   background-size: 32px;
 735   height: 32px;
 736   width: 32px;
 737   align-items: center;
 738   display: flex;
 739   font-size: 20px;
 740   justify-content: center;
 741 }
 742 .top-site-outer .default-icon[data-fallback]::before,
 743 .top-site-outer .search-topsite[data-fallback]::before {
 744   content: attr(data-fallback);
 745 }
 746 .top-site-outer .search-topsite {
 747   background-image: url("chrome://global/skin/icons/search-glass.svg");
 748   background-size: 16px;
 749   background-color: var(--newtab-primary-action-background);
 750   border-radius: 32px;
 751   -moz-context-properties: fill;
 752   fill: var(--newtab-primary-element-text-color);
 753   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
 754   transition-duration: 150ms;
 755   transition-property: background-size, bottom, inset-inline-end, height, width;
 756   height: 32px;
 757   width: 32px;
 758   bottom: -6px;
 759   inset-inline-end: -6px;
 760 }
 761 .top-site-outer.placeholder .tile {
 762   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
 763   cursor: default;
 764 }
 765 .top-site-outer.placeholder.add-button .tile {
 766   background-color: var(--button-background-color);
 767 }
 768 .top-site-outer.placeholder.add-button .tile .icon-wrapper {
 769   background-image: url("chrome://global/skin/icons/plus-20.svg");
 770   background-size: cover;
 771   background-repeat: no-repeat;
 772   height: 20px;
 773   width: 20px;
 774   fill: var(--icon-color);
 775   -moz-context-properties: fill;
 776 }
 777 .top-site-outer .title {
 778   color: var(--newtab-text-primary-color);
 779   padding-top: 8px;
 780   font: caption;
 781   text-align: center;
 782   position: relative;
 783 }
 784 .top-site-outer .title .icon {
 785   margin-inline-end: 2px;
 786   fill: var(--newtab-text-primary-color);
 787 }
 788 .top-site-outer .title span {
 789   display: block;
 790   overflow: hidden;
 791   text-overflow: ellipsis;
 792   white-space: nowrap;
 793 }
 794 .top-site-outer .title .sponsored-label {
 795   color: var(--newtab-text-secondary-color);
 796   font-size: 0.9em;
 797 }
 798 .top-site-outer .title:not(.sponsored) .sponsored-label {
 799   visibility: hidden;
 800 }
 801 .top-site-outer.search-shortcut .rich-icon {
 802   background-color: #FFF;
 803 }
 804 .top-site-outer .edit-button {
 805   background-image: url("chrome://global/skin/icons/edit.svg");
 806 }
 807 .top-site-outer.dragged .tile *, .top-site-outer.dragged .tile::before {
 808   display: none;
 809 }
 810 .top-site-outer.dragged .title {
 811   visibility: hidden;
 812 }
 813
 814 .edit-topsites-wrapper .top-site-inner > .top-site-button > .tile {
 815   border: 1px solid var(--newtab-border-color);
 816 }
 817 .edit-topsites-wrapper .modal {
 818   box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2);
 819   left: 0;
 820   margin: 0 auto;
 821   max-height: calc(100% - 40px);
 822   position: fixed;
 823   right: 0;
 824   top: 40px;
 825   width: 274px;
 826 }
 827 @media (min-width: 610px) {
 828   .edit-topsites-wrapper .modal {
 829     width: 530px;
 830   }
 831 }
 832 @media (min-width: 866px) {
 833   .edit-topsites-wrapper .modal {
 834     width: 786px;
 835   }
 836 }
 837
 838 .topsite-form .section-title {
 839   font-size: 16px;
 840   margin: 0 0 16px;
 841 }
 842 .topsite-form .form-input-container {
 843   max-width: 492px;
 844   margin: 0 auto;
 845   padding: 32px;
 846 }
 847 .topsite-form .form-input-container .top-site-outer {
 848   pointer-events: none;
 849 }
 850 .topsite-form .search-shortcuts-container {
 851   max-width: 700px;
 852   margin: 0 auto;
 853   padding: 32px;
 854 }
 855 .topsite-form .search-shortcuts-container > div {
 856   margin-inline-end: -39px;
 857 }
 858 .topsite-form .search-shortcuts-container .top-site-outer {
 859   margin-inline-start: 0;
 860   margin-inline-end: 39px;
 861 }
 862 .topsite-form .top-site-outer {
 863   padding: 0;
 864   margin: 24px 0 0;
 865   margin-inline-start: 32px;
 866 }
 867 .topsite-form .fields-and-preview {
 868   display: flex;
 869 }
 870 .topsite-form label {
 871   font-size: 17px;
 872 }
 873 .topsite-form .form-wrapper {
 874   width: 100%;
 875 }
 876 .topsite-form .form-wrapper .field {
 877   position: relative;
 878 }
 879 .topsite-form .form-wrapper .field .icon-clear-input {
 880   position: absolute;
 881   transform: translateY(-50%);
 882   top: 50%;
 883   inset-inline-end: 8px;
 884 }
 885 .topsite-form .form-wrapper .url input:dir(ltr) {
 886   padding-right: 32px;
 887 }
 888 .topsite-form .form-wrapper .url input:dir(rtl) {
 889   padding-left: 32px;
 890 }
 891 .topsite-form .form-wrapper .url input:dir(rtl):not(:placeholder-shown) {
 892   direction: ltr;
 893   text-align: right;
 894 }
 895 .topsite-form .form-wrapper .enable-custom-image-input {
 896   display: inline-block;
 897   font-size: 13px;
 898   margin-top: 4px;
 899   cursor: pointer;
 900 }
 901 .topsite-form .form-wrapper .custom-image-input-container {
 902   margin-top: 4px;
 903 }
 904 .topsite-form .form-wrapper .custom-image-input-container .loading-container {
 905   width: 16px;
 906   height: 16px;
 907   overflow: hidden;
 908   position: absolute;
 909   transform: translateY(-50%);
 910   top: 50%;
 911   inset-inline-end: 8px;
 912 }
 913 .topsite-form .form-wrapper .custom-image-input-container .loading-animation {
 914   width: 960px;
 915   height: 16px;
 916   -moz-context-properties: fill;
 917   fill: var(--newtab-primary-action-background);
 918   background-image: url("chrome://browser/skin/tabbrowser/loading.svg");
 919   animation: tab-throbber-animation 1.05s steps(60) infinite;
 920 }
 921 @keyframes tab-throbber-animation {
 922   100% {
 923     transform: translateX(-960px);
 924   }
 925 }
 926 @keyframes tab-throbber-animation-rtl {
 927   100% {
 928     transform: translateX(960px);
 929   }
 930 }
 931 .topsite-form .form-wrapper .custom-image-input-container .loading-animation:dir(rtl) {
 932   animation-name: tab-throbber-animation-rtl;
 933 }
 934 .topsite-form .form-wrapper input[type=text] {
 935   background-color: var(--newtab-background-color-secondary);
 936   border: 1px solid var(--newtab-border-color);
 937   margin: 8px 0;
 938   padding: 0 8px;
 939   height: 32px;
 940   width: 100%;
 941   font-size: 15px;
 942 }
 943 .topsite-form .form-wrapper input[type=text][disabled] {
 944   border: 1px solid var(--newtab-border-color);
 945   box-shadow: none;
 946   opacity: 0.4;
 947 }
 948 .topsite-form .form-wrapper .invalid input[type=text] {
 949   border: 1px solid var(--newtab-status-error);
 950   box-shadow: 0 0 0 1px var(--newtab-status-error), 0 0 0 4px rgba(var(--newtab-status-error), 0.3);
 951 }
 952 .topsite-form .form-wrapper .error-tooltip {
 953   animation: fade-up-tt 450ms;
 954   background: var(--newtab-status-error);
 955   border-radius: 2px;
 956   color: #FFF;
 957   inset-inline-start: 3px;
 958   padding: 5px 12px;
 959   position: absolute;
 960   top: 44px;
 961   z-index: 1;
 962 }
 963 .topsite-form .form-wrapper .error-tooltip::before {
 964   background: var(--newtab-status-error);
 965   bottom: -8px;
 966   content: ".";
 967   height: 16px;
 968   inset-inline-start: 12px;
 969   position: absolute;
 970   text-indent: -999px;
 971   top: -7px;
 972   transform: rotate(45deg);
 973   white-space: nowrap;
 974   width: 16px;
 975   z-index: -1;
 976 }
 977 .topsite-form .actions {
 978   justify-content: flex-end;
 979 }
 980 .topsite-form .actions button {
 981   margin-inline-start: 10px;
 982   margin-inline-end: 0;
 983 }
 984 @media (max-width: 610px) {
 985   .topsite-form .fields-and-preview {
 986     flex-direction: column;
 987   }
 988   .topsite-form .fields-and-preview .top-site-outer {
 989     margin-inline-start: 0;
 990   }
 991 }
 992 .topsite-form .title {
 993   user-select: none;
 994 }
 995 .topsite-form [type=checkbox]:not(:checked),
 996 .topsite-form [type=checkbox]:checked {
 997   inset-inline-start: -9999px;
 998   position: absolute;
 999 }
1000 .topsite-form [type=checkbox]:not(:checked) + label,
1001 .topsite-form [type=checkbox]:checked + label {
1002   cursor: pointer;
1003   display: block;
1004   position: relative;
1005 }
1006 .topsite-form [type=checkbox]:not(:checked) + label::before,
1007 .topsite-form [type=checkbox]:checked + label::before {
1008   background: var(--newtab-background-color);
1009   border: 1px solid var(--newtab-border-color);
1010   border-radius: 3px;
1011   content: "";
1012   height: 21px;
1013   left: -8px;
1014   position: absolute;
1015   top: -8px;
1016   width: 21px;
1017   z-index: 1;
1018 }
1019 [dir=rtl] .topsite-form [type=checkbox]:not(:checked) + label::before,
1020 [dir=rtl] .topsite-form [type=checkbox]:checked + label::before {
1021   left: auto;
1022   right: -8px;
1023 }
1024 .topsite-form [type=checkbox]:not(:checked) + label::after,
1025 .topsite-form [type=checkbox]:checked + label::after {
1026   background: url("chrome://global/skin/icons/check.svg") no-repeat center center;
1027   content: "";
1028   height: 21px;
1029   left: -8px;
1030   position: absolute;
1031   top: -8px;
1032   width: 21px;
1033   -moz-context-properties: fill;
1034   fill: var(--newtab-primary-action-background);
1035   z-index: 2;
1036 }
1037 [dir=rtl] .topsite-form [type=checkbox]:not(:checked) + label::after,
1038 [dir=rtl] .topsite-form [type=checkbox]:checked + label::after {
1039   left: auto;
1040   right: -8px;
1041 }
1042 .topsite-form [type=checkbox]:checked + label .tile {
1043   box-shadow: 0 0 0 2px var(--newtab-primary-action-background-dimmed);
1044 }
1045 .topsite-form [type=checkbox]:not(:checked) + label::after {
1046   opacity: 0;
1047 }
1048 .topsite-form [type=checkbox]:checked + label::after {
1049   opacity: 1;
1050 }
1051 .topsite-form [type=checkbox]:checked:focus + label::before,
1052 .topsite-form [type=checkbox]:not(:checked):focus + label::before {
1053   border: 1px dotted var(--newtab-primary-action-background);
1054 }
1055
1056 @keyframes fade-up-tt {
1057   0% {
1058     opacity: 0;
1059     transform: translateY(15px);
1060   }
1061   100% {
1062     opacity: 1;
1063     transform: translateY(0);
1064   }
1065 }
1066 .topsite-impression-observer {
1067   position: absolute;
1068   top: 0;
1069   width: 100%;
1070   height: 100%;
1071   pointer-events: none;
1072 }
1073
1074 .sections-list .section-list {
1075   display: grid;
1076   grid-gap: 32px;
1077   grid-template-columns: repeat(auto-fit, 192px);
1078   margin: 0;
1079 }
1080 @media (max-width: 610px) {
1081   .sections-list .section-list .context-menu {
1082     margin-inline-end: 5px;
1083     margin-inline-start: auto;
1084     inset-inline-end: 0;
1085     inset-inline-start: auto;
1086   }
1087 }
1088 @media (min-width: 610px) and (max-width: 866px) {
1089   .sections-list .section-list :nth-child(2n) .context-menu {
1090     margin-inline-end: 5px;
1091     margin-inline-start: auto;
1092     inset-inline-end: 0;
1093     inset-inline-start: auto;
1094   }
1095 }
1096 @media (min-width: 866px) and (max-width: 1250px) {
1097   .sections-list .section-list :nth-child(3n) .context-menu {
1098     margin-inline-end: 5px;
1099     margin-inline-start: auto;
1100     inset-inline-end: 0;
1101     inset-inline-start: auto;
1102   }
1103 }
1104 @media (min-width: 1122px) and (max-width: 1506px) {
1105   .sections-list .section-list :nth-child(3n) .context-menu,
1106 .sections-list .section-list :nth-child(4n) .context-menu {
1107     margin-inline-end: 5px;
1108     margin-inline-start: auto;
1109     inset-inline-end: 0;
1110     inset-inline-start: auto;
1111   }
1112 }
1113 .sections-list .section-empty-state {
1114   border: 1px solid var(--newtab-border-color);
1115   border-radius: 3px;
1116   display: flex;
1117   height: 266px;
1118   width: 100%;
1119 }
1120 .sections-list .section-empty-state .empty-state {
1121   margin: auto;
1122   max-width: 350px;
1123 }
1124 .sections-list .section-empty-state .empty-state .empty-state-message {
1125   color: var(--newtab-text-primary-color);
1126   font-size: 13px;
1127   margin-bottom: 0;
1128   text-align: center;
1129 }
1130 @media (min-width: 1122px) {
1131   .sections-list .section-empty-state {
1132     height: 370px;
1133   }
1134 }
1135
1136 .top-stories-bottom-container {
1137   color: var(--newtab-text-primary-color);
1138   font-size: 12px;
1139   line-height: 1.6;
1140   margin-top: 12px;
1141   display: flex;
1142   justify-content: space-between;
1143 }
1144 .top-stories-bottom-container a {
1145   color: var(--newtab-primary-action-background);
1146   font-weight: bold;
1147 }
1148 .top-stories-bottom-container a.more-recommendations {
1149   font-weight: normal;
1150   font-size: 13px;
1151 }
1152 @media (max-width: 865px) {
1153   .top-stories-bottom-container .wrapper-topics,
1154 .top-stories-bottom-container .wrapper-cta + .wrapper-more-recommendations {
1155     display: none;
1156   }
1157 }
1158 @media (max-width: 609px) {
1159   .top-stories-bottom-container .wrapper-cta {
1160     text-align: center;
1161   }
1162   .top-stories-bottom-container .wrapper-cta .pocket-logged-in-cta {
1163     display: block;
1164     margin-inline-end: 0;
1165   }
1166   .top-stories-bottom-container .wrapper-cta .pocket-logged-in-cta .pocket-cta-button {
1167     max-width: none;
1168     display: block;
1169     margin-inline-end: 0;
1170     margin: 5px 0 10px;
1171   }
1172   .top-stories-bottom-container .wrapper-more-recommendations {
1173     width: 100%;
1174   }
1175   .top-stories-bottom-container .wrapper-more-recommendations .more-recommendations {
1176     justify-content: center;
1177   }
1178   .top-stories-bottom-container .wrapper-more-recommendations .more-recommendations::after {
1179     display: none;
1180   }
1181 }
1182
1183 @media (min-width: 1122px) {
1184   .sections-list .normal-cards .section-list {
1185     grid-template-columns: repeat(auto-fit, 309px);
1186   }
1187 }
1188 .topics ul {
1189   margin: 0;
1190   padding: 0;
1191 }
1192 @media (min-width: 866px) {
1193   .topics ul {
1194     display: inline;
1195     padding-inline-start: 12px;
1196   }
1197 }
1198 .topics ul li {
1199   display: inline-block;
1200 }
1201 .topics ul li::after {
1202   content: "•";
1203   padding: 8px;
1204 }
1205 .topics ul li:last-child::after {
1206   content: none;
1207 }
1208
1209 .search-wrapper {
1210   padding: 34px 0 38px;
1211 }
1212 .only-search .search-wrapper {
1213   padding: 0 0 38px;
1214 }
1215 .search-wrapper .logo-and-wordmark {
1216   align-items: center;
1217   display: flex;
1218   justify-content: center;
1219   margin-bottom: 48px;
1220 }
1221 .search-wrapper .logo-and-wordmark .logo {
1222   display: inline-block;
1223   height: 82px;
1224   width: 82px;
1225   background: image-set(url("chrome://branding/content/about-logo.png"), url("chrome://branding/content/about-logo@2x.png") 2x) no-repeat center;
1226   background-size: 82px;
1227 }
1228 .search-wrapper .logo-and-wordmark .wordmark {
1229   background: url("chrome://branding/content/firefox-wordmark.svg") no-repeat center center;
1230   background-size: 134px;
1231   -moz-context-properties: fill;
1232   display: inline-block;
1233   fill: var(--newtab-wordmark-color);
1234   height: 82px;
1235   margin-inline-start: 16px;
1236   width: 134px;
1237 }
1238 @media (max-width: 609px) {
1239   .search-wrapper .logo-and-wordmark .logo {
1240     background-size: 64px;
1241     height: 64px;
1242     width: 64px;
1243   }
1244   .search-wrapper .logo-and-wordmark .wordmark {
1245     background-size: 100px;
1246     height: 64px;
1247     width: 100px;
1248     margin-inline-start: 12px;
1249   }
1250 }
1251 .search-wrapper .search-inner-wrapper {
1252   cursor: default;
1253   display: flex;
1254   min-height: 52px;
1255   margin: 0 auto;
1256   position: relative;
1257   width: 200px;
1258 }
1259 @media (min-width: 610px) {
1260   .search-wrapper .search-inner-wrapper {
1261     width: 360px;
1262   }
1263 }
1264 @media (min-width: 866px) {
1265   .search-wrapper .search-inner-wrapper {
1266     width: 600px;
1267   }
1268 }
1269 @media (min-width: 1122px) {
1270   .search-wrapper .search-inner-wrapper {
1271     width: 720px;
1272   }
1273 }
1274 .search-wrapper .search-handoff-button,
1275 .search-wrapper input {
1276   background: var(--newtab-background-color-secondary) var(--newtab-search-icon) 16px center no-repeat;
1277   background-size: 24px;
1278   padding-inline-start: 52px;
1279   padding-inline-end: 10px;
1280   padding-block: 0;
1281   width: 100%;
1282   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
1283   border: 1px solid transparent;
1284   border-radius: 8px;
1285   color: var(--newtab-text-primary-color);
1286   -moz-context-properties: fill;
1287   fill: var(--newtab-text-secondary-color);
1288 }
1289 .search-wrapper .search-handoff-button:dir(rtl),
1290 .search-wrapper input:dir(rtl) {
1291   background-position-x: right 16px;
1292 }
1293 .search-wrapper .search-inner-wrapper:active input,
1294 .search-wrapper input:focus {
1295   border: 1px solid var(--newtab-primary-action-background);
1296   outline: 0;
1297   box-shadow: 0 0 0 2px var(--newtab-primary-action-background-dimmed);
1298 }
1299 .search-wrapper .search-button {
1300   background: url("chrome://browser/skin/forward.svg") no-repeat center center;
1301   background-size: 16px 16px;
1302   border: 0;
1303   border-radius: 0 3px 3px 0;
1304   -moz-context-properties: fill;
1305   fill: var(--newtab-text-secondary-color);
1306   height: 100%;
1307   inset-inline-end: 0;
1308   position: absolute;
1309   width: 48px;
1310 }
1311 .search-wrapper .search-button:focus, .search-wrapper .search-button:hover {
1312   background-color: var(--newtab-element-hover-color);
1313   cursor: pointer;
1314 }
1315 .search-wrapper .search-button:focus {
1316   outline: 0;
1317   box-shadow: 0 0 0 2px var(--newtab-primary-action-background-dimmed);
1318   border: 1px solid var(--newtab-primary-action-background);
1319   border-radius: 0 8px 8px 0;
1320 }
1321 .search-wrapper .search-button:active {
1322   background-color: var(--newtab-element-hover-color);
1323 }
1324 .search-wrapper .search-button:dir(rtl) {
1325   transform: scaleX(-1);
1326 }
1327 .search-wrapper.fake-focus:not(.search.disabled) .search-handoff-button {
1328   border: 1px solid var(--newtab-primary-action-background);
1329   box-shadow: 0 0 0 2px var(--newtab-primary-action-background-dimmed);
1330 }
1331 .search-wrapper .search-handoff-button {
1332   padding-inline-end: 15px;
1333   color: var(--newtab-text-primary-color);
1334   fill: var(--newtab-text-secondary-color);
1335   -moz-context-properties: fill;
1336 }
1337 .search-wrapper .search-handoff-button .fake-caret {
1338   top: 18px;
1339   inset-inline-start: 52px;
1340 }
1341 .search-wrapper .search-handoff-button .fake-caret:dir(rtl) {
1342   background-position-x: right 16px;
1343 }
1344 .search-wrapper.visible-logo .logo-and-wordmark .wordmark {
1345   fill: var(--newtab-wordmark-color);
1346 }
1347
1348 @media (height <= 700px) {
1349   .search-wrapper {
1350     padding: 0 0 30px;
1351   }
1352 }
1353 .search-handoff-button {
1354   background: var(--newtab-background-color-secondary) var(--newtab-search-icon) 16px center no-repeat;
1355   background-size: 24px;
1356   border: solid 1px transparent;
1357   border-radius: 3px;
1358   box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.15);
1359   cursor: text;
1360   font-size: 15px;
1361   padding: 0;
1362   padding-inline-end: 48px;
1363   padding-inline-start: 46px;
1364   opacity: 1;
1365   width: 100%;
1366 }
1367 .search-handoff-button:dir(rtl) {
1368   background-position-x: right 16px;
1369 }
1370 .fake-focus:not(.search-disabled) .search-handoff-button {
1371   border: 1px solid var(--newtab-textbox-focus-color);
1372   box-shadow: var(--newtab-textbox-focus-boxshadow);
1373 }
1374 .fake-focus:not(.search-disabled) .search-handoff-button .fake-caret {
1375   display: block;
1376 }
1377 .search-disabled .search-handoff-button {
1378   opacity: 0.5;
1379   box-shadow: none;
1380 }
1381 .search-handoff-button .fake-editable:focus {
1382   outline: none;
1383   caret-color: transparent;
1384 }
1385 .search-handoff-button .fake-editable {
1386   color: transparent;
1387   height: 100%;
1388   opacity: 0;
1389   position: absolute;
1390   inset: 0;
1391 }
1392 .search-handoff-button .fake-textbox {
1393   opacity: 0.54;
1394   text-align: start;
1395 }
1396 .search-handoff-button .fake-caret {
1397   animation: caret-animation 1.3s steps(5, start) infinite;
1398   background: var(--newtab-text-primary-color);
1399   display: none;
1400   inset-inline-start: 47px;
1401   height: 17px;
1402   position: absolute;
1403   top: 16px;
1404   width: 1px;
1405 }
1406 @keyframes caret-animation {
1407   to {
1408     visibility: hidden;
1409   }
1410 }
1411
1412 @media (height > 700px) {
1413   body:not(.inline-onboarding) .fixed-search main {
1414     padding-top: 124px;
1415   }
1416   body:not(.inline-onboarding) .fixed-search.visible-logo main {
1417     padding-top: 254px;
1418   }
1419   body:not(.inline-onboarding) .fixed-search .search-wrapper {
1420     border-bottom: solid 1px var(--newtab-border-color);
1421     padding: 27px 0;
1422     background-color: var(--newtab-overlay-color);
1423     min-height: 95px;
1424     left: 0;
1425     position: fixed;
1426     top: 0;
1427     width: 100%;
1428     z-index: 9;
1429   }
1430   body:not(.inline-onboarding) .fixed-search .search-wrapper .search-inner-wrapper {
1431     min-height: 45px;
1432   }
1433   body:not(.inline-onboarding) .fixed-search .search-wrapper input {
1434     background-position-x: 16px;
1435     background-size: 24px;
1436   }
1437   body:not(.inline-onboarding) .fixed-search .search-wrapper input:dir(rtl) {
1438     background-position-x: right 16px;
1439   }
1440   body:not(.inline-onboarding) .fixed-search .search-wrapper .search-handoff-button .fake-caret {
1441     top: 14px;
1442   }
1443   body:not(.inline-onboarding) .fixed-search .search-wrapper .logo-and-wordmark {
1444     display: none;
1445   }
1446   body:not(.inline-onboarding) .fixed-search .search-handoff-button {
1447     background-position-x: 16px;
1448     background-size: 24px;
1449   }
1450   body:not(.inline-onboarding) .fixed-search .search-handoff-button:dir(rtl) {
1451     background-position-x: right 16px;
1452   }
1453   body:not(.inline-onboarding) .fixed-search .search-handoff-button .fake-caret {
1454     top: 10px;
1455   }
1456 }
1457 .contentSearchSuggestionTable {
1458   border: 0;
1459   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.2);
1460   transform: translateY(4px);
1461   background-color: var(--newtab-background-color);
1462 }
1463 .contentSearchSuggestionTable .contentSearchHeader {
1464   color: var(--newtab-text-secondary-color);
1465   background-color: var(--newtab-background-color-secondary);
1466 }
1467 .contentSearchSuggestionTable .contentSearchHeader,
1468 .contentSearchSuggestionTable .contentSearchSettingsButton {
1469   border-color: var(--newtab-border-color);
1470 }
1471 .contentSearchSuggestionTable .contentSearchSuggestionsList {
1472   color: var(--newtab-text-primary-color);
1473   border: 0;
1474 }
1475 .contentSearchSuggestionTable .contentSearchOneOffsTable {
1476   border-top: solid 1px var(--newtab-border-color);
1477   background-color: var(--newtab-background-color);
1478 }
1479 .contentSearchSuggestionTable .contentSearchSearchWithHeaderSearchText {
1480   color: var(--newtab-text-primary-color);
1481 }
1482 .contentSearchSuggestionTable .contentSearchSuggestionRow.selected {
1483   background: var(--newtab-element-hover-color);
1484   color: var(--newtab-text-primary-color);
1485 }
1486 .contentSearchSuggestionTable .contentSearchSuggestionRow.selected:active {
1487   background: var(--newtab-element-active-color);
1488 }
1489 .contentSearchSuggestionTable .contentSearchSuggestionRow.selected .historyIcon {
1490   fill: var(--newtab-text-secondary-color);
1491 }
1492 .contentSearchSuggestionTable .contentSearchOneOffItem {
1493   background-image: none;
1494   border-image: linear-gradient(transparent 18%, var(--newtab-border-color) 18%, var(--newtab-border-color) 82%, transparent 82%) 1;
1495   border-inline-end: 1px solid;
1496   position: relative;
1497 }
1498 .contentSearchSuggestionTable .contentSearchOneOffItem.selected {
1499   background: var(--newtab-element-hover-color);
1500 }
1501 .contentSearchSuggestionTable .contentSearchOneOffItem:active {
1502   background: var(--newtab-element-active-color);
1503 }
1504 .contentSearchSuggestionTable .contentSearchSettingsButton:hover {
1505   background: var(--newtab-element-hover-color);
1506   color: var(--newtab-text-primary-color);
1507 }
1508
1509 .contentSearchHeaderRow > td > img,
1510 .contentSearchSuggestionRow > td > .historyIcon {
1511   margin-inline-start: 7px;
1512   margin-inline-end: 15px;
1513 }
1514
1515 /* stylelint-disable max-nesting-depth */
1516 .context-menu {
1517   background: var(--newtab-background-color-secondary);
1518   border-radius: 5px;
1519   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.2);
1520   display: block;
1521   font-size: 14px;
1522   margin-inline-start: 5px;
1523   inset-inline-start: 100%;
1524   position: absolute;
1525   top: 6.75px;
1526   z-index: 8;
1527 }
1528 .context-menu > ul {
1529   list-style: none;
1530   margin: 0;
1531   padding: 5px 0;
1532 }
1533 .context-menu > ul > li {
1534   margin: 0;
1535   width: 100%;
1536 }
1537 .context-menu > ul > li.separator {
1538   border-bottom: 1px solid var(--newtab-border-color);
1539   margin: 5px 0;
1540 }
1541 .context-menu > ul > li > a,
1542 .context-menu > ul > li > button {
1543   align-items: center;
1544   color: inherit;
1545   cursor: pointer;
1546   display: flex;
1547   width: 100%;
1548   line-height: 16px;
1549   outline: none;
1550   border: 0;
1551   padding: 3px 12px;
1552   white-space: nowrap;
1553 }
1554 .context-menu > ul > li > a:is(:focus, :hover),
1555 .context-menu > ul > li > button:is(:focus, :hover) {
1556   background: var(--newtab-element-secondary-hover-color);
1557 }
1558 .context-menu > ul > li > a:active,
1559 .context-menu > ul > li > button:active {
1560   background: var(--newtab-element-secondary-active-color);
1561 }
1562 .context-menu > ul > li > a.disabled,
1563 .context-menu > ul > li > button.disabled {
1564   opacity: 0.4;
1565   pointer-events: none;
1566 }
1567
1568 .confirmation-dialog .modal {
1569   box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2);
1570   left: 0;
1571   margin: auto;
1572   position: fixed;
1573   right: 0;
1574   top: 20%;
1575   width: 400px;
1576 }
1577 .confirmation-dialog section {
1578   margin: 0;
1579 }
1580 .confirmation-dialog .modal-message {
1581   display: flex;
1582   padding: 16px;
1583   padding-bottom: 0;
1584 }
1585 .confirmation-dialog .modal-message p {
1586   margin: 0;
1587   margin-bottom: 16px;
1588 }
1589 .confirmation-dialog .actions {
1590   border: 0;
1591   display: flex;
1592   flex-wrap: nowrap;
1593   padding: 0 16px;
1594 }
1595 .confirmation-dialog .actions button {
1596   margin-inline-end: 16px;
1597   padding-inline-end: 18px;
1598   padding-inline-start: 18px;
1599   white-space: normal;
1600   width: 50%;
1601 }
1602 .confirmation-dialog .actions button.done {
1603   margin-inline-end: 0;
1604   margin-inline-start: 0;
1605 }
1606 .confirmation-dialog .icon {
1607   margin-inline-end: 16px;
1608 }
1609
1610 .modal-overlay {
1611   background: var(--newtab-overlay-color);
1612   height: 100%;
1613   left: 0;
1614   position: fixed;
1615   top: 0;
1616   width: 100%;
1617   z-index: 11001;
1618 }
1619
1620 .modal {
1621   background: var(--newtab-background-color-secondary);
1622   border: 1px solid var(--newtab-border-color);
1623   border-radius: 5px;
1624   font-size: 15px;
1625   z-index: 11002;
1626 }
1627
1628 @media (height < 700px) {
1629   .personalize-button {
1630     position: absolute;
1631     top: 16px;
1632     inset-inline-end: 16px;
1633   }
1634 }
1635 @media (height >= 700px) {
1636   .personalize-button {
1637     position: fixed;
1638     top: 16px;
1639     inset-inline-end: 16px;
1640     z-index: 1000;
1641   }
1642 }
1643 .personalize-button {
1644   border: 0;
1645   border-radius: 4px;
1646   background-color: transparent;
1647   padding: 15px;
1648 }
1649 .personalize-button:hover {
1650   background-color: var(--newtab-element-hover-color);
1651 }
1652 .personalize-button:active {
1653   background-color: var(--newtab-element-active-color);
1654 }
1655 .personalize-button:focus-visible {
1656   border: 0;
1657   outline: 0;
1658   box-shadow: 0 0 0 3px var(--newtab-primary-action-background-dimmed), 0 0 0 1px var(--newtab-primary-action-background);
1659 }
1660 .personalize-button.personalize-animate-exit-done {
1661   visibility: hidden;
1662 }
1663
1664 .customize-menu {
1665   color: var(--newtab-text-primary-color);
1666   background-color: var(--newtab-background-color-secondary);
1667   width: 432px;
1668   height: 100%;
1669   position: fixed;
1670   inset-block: 0;
1671   inset-inline-end: 0;
1672   z-index: 1001;
1673   padding: 16px;
1674   overflow: auto;
1675   transform: translateX(435px);
1676   visibility: hidden;
1677   cursor: default;
1678 }
1679 @media (prefers-reduced-motion: no-preference) {
1680   .customize-menu.customize-animate-enter, .customize-menu.customize-animate-exit, .customize-menu.customize-animate-enter-done, .customize-menu.customize-animate-exit-done {
1681     transition: transform 250ms cubic-bezier(0.46, 0.03, 0.52, 0.96), visibility 250ms;
1682   }
1683 }
1684 @media (forced-colors: active) {
1685   .customize-menu {
1686     border-inline-start: solid 1px;
1687   }
1688 }
1689 .customize-menu:dir(rtl) {
1690   transform: translateX(-435px);
1691 }
1692 .customize-menu.customize-animate-enter-done, .customize-menu.customize-animate-enter-active {
1693   box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.2);
1694   visibility: visible;
1695   transform: translateX(0);
1696 }
1697 .customize-menu.customize-animate-exit-active {
1698   box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.2);
1699 }
1700 .customize-menu .close-button {
1701   margin-inline-start: auto;
1702   margin-bottom: 28px;
1703   white-space: nowrap;
1704   display: block;
1705   background-color: var(--newtab-element-secondary-color);
1706   padding: 8px 10px;
1707   border: 1px solid rgba(0, 0, 0, 0.15);
1708   border-radius: 4px;
1709   color: var(--newtab-text-primary-color);
1710   font-size: 13px;
1711   font-weight: 600;
1712 }
1713 .customize-menu .close-button:hover {
1714   background-color: var(--newtab-element-secondary-hover-color);
1715 }
1716 .customize-menu .close-button:hover:active {
1717   background-color: var(--newtab-element-secondary-active-color);
1718 }
1719
1720 .grid-skip {
1721   display: contents;
1722 }
1723
1724 .home-section {
1725   display: grid;
1726   grid-template-columns: 1fr;
1727   grid-template-rows: repeat(4, auto);
1728   grid-row-gap: 32px;
1729   padding: 0 16px;
1730 }
1731 .home-section .wallpapers-section h2 {
1732   font-size: inherit;
1733 }
1734 .home-section .section moz-toggle {
1735   margin-bottom: 10px;
1736 }
1737 .home-section .section .sponsored {
1738   font-size: 14px;
1739   margin-inline-start: 5px;
1740 }
1741 .home-section .section .check-wrapper {
1742   position: relative;
1743 }
1744 .home-section .section .sponsored-checkbox {
1745   margin-inline-start: 2px;
1746   width: 16px;
1747   height: 16px;
1748   vertical-align: middle;
1749   border: 1px solid rgba(0, 0, 0, 0.15);
1750   box-sizing: border-box;
1751   border-radius: 4px;
1752   appearance: none;
1753   background-color: var(--newtab-element-secondary-color);
1754 }
1755 .home-section .section .sponsored-checkbox:hover {
1756   background-color: var(--newtab-element-secondary-hover-color);
1757 }
1758 .home-section .section .sponsored-checkbox:checked {
1759   -moz-context-properties: fill;
1760   fill: var(--newtab-primary-element-text-color);
1761   background: url("chrome://global/skin/icons/check.svg") center no-repeat;
1762   background-color: var(--newtab-primary-action-background);
1763 }
1764 .home-section .section .sponsored-checkbox:checked:hover {
1765   background-color: var(--newtab-primary-element-hover-color);
1766 }
1767 .home-section .section .sponsored-checkbox:checked:active {
1768   background-color: var(--newtab-primary-element-active-color);
1769 }
1770 @media (forced-colors: active) {
1771   .home-section .section .sponsored-checkbox:checked {
1772     fill: #000;
1773   }
1774 }
1775 .home-section .section .sponsored-checkbox:active + .checkmark {
1776   fill: var(--newtab-element-secondary-color);
1777 }
1778 .home-section .section .selector {
1779   color: var(--newtab-text-primary-color);
1780   width: 118px;
1781   display: block;
1782   border: 1px solid var(--newtab-border-color);
1783   border-radius: 4px;
1784   appearance: none;
1785   padding-block: 7px;
1786   padding-inline: 10px 13px;
1787   margin-inline-start: 2px;
1788   margin-bottom: 2px;
1789   -moz-context-properties: fill;
1790   fill: var(--newtab-text-primary-color);
1791   background: url("chrome://global/skin/icons/arrow-down-12.svg") right no-repeat;
1792   background-size: 8px;
1793   background-origin: content-box;
1794   background-color: var(--newtab-background-color-secondary);
1795 }
1796 .home-section .section .selector:hover {
1797   background-color: var(--newtab-element-secondary-hover-color);
1798 }
1799 .home-section .section .selector:dir(rtl) {
1800   background-position-x: left;
1801 }
1802 .home-section .section .more-info-top-wrapper,
1803 .home-section .section .more-info-pocket-wrapper {
1804   margin-inline-start: -2px;
1805   overflow: hidden;
1806 }
1807 .home-section .section .more-info-top-wrapper .more-information,
1808 .home-section .section .more-info-pocket-wrapper .more-information {
1809   position: relative;
1810   transition: margin-top 250ms cubic-bezier(0.82, 0.085, 0.395, 0.895);
1811 }
1812 .home-section .section .more-info-top-wrapper .check-wrapper {
1813   margin-top: 10px;
1814 }
1815 .home-section .sponsored-content-info {
1816   display: flex;
1817   gap: var(--space-small);
1818   font-size: var(--font-size-small);
1819   border-radius: var(--border-radius-medium);
1820   background-color: var(--newtab-element-secondary-color);
1821   padding: var(--space-small) var(--space-large);
1822 }
1823 .home-section .sponsored-content-info .icon-help {
1824   flex-shrink: 0;
1825   color: var(--color-accent-primary);
1826   height: 20px;
1827 }
1828 .home-section .sponsored-content-info a {
1829   color: var(--newtab-primary-action-background);
1830 }
1831 .home-section .divider {
1832   border-top: 1px var(--newtab-border-color) solid;
1833   margin: 0 -16px;
1834 }
1835 .home-section .external-link {
1836   font-size: 14px;
1837   cursor: pointer;
1838   border: 1px solid transparent;
1839   border-radius: 4px;
1840   -moz-context-properties: fill;
1841   fill: var(--newtab-text-primary-color);
1842   background: url("chrome://global/skin/icons/settings.svg") left no-repeat;
1843   background-size: 16px;
1844   padding-inline-start: 21px;
1845   margin-bottom: 20px;
1846   text-decoration: underline;
1847 }
1848 @media (forced-colors: active) {
1849   .home-section .external-link {
1850     padding: 8px 10px;
1851     padding-inline-start: 21px;
1852   }
1853 }
1854 .home-section .external-link:dir(rtl) {
1855   background-position-x: right;
1856 }
1857 .home-section .external-link:hover {
1858   text-decoration: none;
1859 }
1860
1861 .home-section .section .sponsored-checkbox:focus-visible,
1862 .selector:focus-visible,
1863 .external-link:focus-visible,
1864 .close-button:focus-visible {
1865   border: 1px solid var(--newtab-primary-action-background);
1866   outline: 0;
1867   box-shadow: 0 0 0 2px var(--newtab-primary-action-background-dimmed);
1868 }
1869
1870 .wallpaper-list {
1871   display: grid;
1872   gap: 16px;
1873   grid-template-columns: 1fr 1fr 1fr;
1874   grid-auto-rows: 86px;
1875   margin: 16px 0;
1876   padding: 0;
1877   border: none;
1878 }
1879 .wallpaper-list .wallpaper-input.theme-light,
1880 .wallpaper-list .sr-only.theme-light {
1881   display: inline-block;
1882 }
1883 [lwt-newtab-brighttext] .wallpaper-list .wallpaper-input.theme-light,
1884 [lwt-newtab-brighttext] .wallpaper-list .sr-only.theme-light {
1885   display: none;
1886 }
1887 .wallpaper-list .wallpaper-input.theme-dark,
1888 .wallpaper-list .sr-only.theme-dark {
1889   display: none;
1890 }
1891 [lwt-newtab-brighttext] .wallpaper-list .wallpaper-input.theme-dark,
1892 [lwt-newtab-brighttext] .wallpaper-list .sr-only.theme-dark {
1893   display: inline-block;
1894 }
1895 .wallpaper-list .wallpaper-input {
1896   appearance: none;
1897   margin: 0;
1898   padding: 0;
1899   height: 86px;
1900   width: 100%;
1901   box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2);
1902   border-radius: 8px;
1903   background-clip: content-box;
1904   background-repeat: no-repeat;
1905   background-size: cover;
1906   cursor: pointer;
1907   outline: 2px solid transparent;
1908 }
1909 .wallpaper-list .wallpaper-input.dark-aurora {
1910   background-image: url("chrome://activity-stream/content/data/content/assets/wallpapers/dark-aurora.avif");
1911 }
1912 .wallpaper-list .wallpaper-input.dark-city {
1913   background-image: url("chrome://activity-stream/content/data/content/assets/wallpapers/dark-city.avif");
1914 }
1915 .wallpaper-list .wallpaper-input.dark-color {
1916   background-image: url("chrome://activity-stream/content/data/content/assets/wallpapers/dark-color.avif");
1917 }
1918 .wallpaper-list .wallpaper-input.dark-mountain {
1919   background-image: url("chrome://activity-stream/content/data/content/assets/wallpapers/dark-mountain.avif");
1920 }
1921 .wallpaper-list .wallpaper-input.dark-panda {
1922   background-image: url("chrome://activity-stream/content/data/content/assets/wallpapers/dark-panda.avif");
1923 }
1924 .wallpaper-list .wallpaper-input.dark-sky {
1925   background-image: url("chrome://activity-stream/content/data/content/assets/wallpapers/dark-sky.avif");
1926 }
1927 .wallpaper-list .wallpaper-input.light-beach {
1928   background-image: url("chrome://activity-stream/content/data/content/assets/wallpapers/light-beach.avif");
1929 }
1930 .wallpaper-list .wallpaper-input.light-color {
1931   background-image: url("chrome://activity-stream/content/data/content/assets/wallpapers/light-color.avif");
1932 }
1933 .wallpaper-list .wallpaper-input.light-landscape {
1934   background-image: url("chrome://activity-stream/content/data/content/assets/wallpapers/light-landscape.avif");
1935 }
1936 .wallpaper-list .wallpaper-input.light-mountain {
1937   background-image: url("chrome://activity-stream/content/data/content/assets/wallpapers/light-mountain.avif");
1938 }
1939 .wallpaper-list .wallpaper-input.light-redpanda {
1940   background-image: url("chrome://activity-stream/content/data/content/assets/wallpapers/light-redpanda.avif");
1941 }
1942 .wallpaper-list .wallpaper-input.light-sky {
1943   background-image: url("chrome://activity-stream/content/data/content/assets/wallpapers/light-sky.avif");
1944 }
1945 .wallpaper-list .wallpaper-input:checked {
1946   outline-color: var(--newtab-primary-action-background);
1947 }
1948 .wallpaper-list .wallpaper-input:hover {
1949   filter: brightness(55%);
1950   outline-color: transparent;
1951 }
1952 .wallpaper-list .sr-only {
1953   opacity: 0;
1954   overflow: hidden;
1955   position: absolute;
1956 }
1957
1958 .wallpapers-reset {
1959   background: none;
1960   border: none;
1961   text-decoration: underline;
1962   margin-inline: auto;
1963   display: block;
1964   font-size: var(--font-size-small);
1965   color: var(--newtab-text-primary-color);
1966   cursor: pointer;
1967 }
1968 .wallpapers-reset:hover {
1969   text-decoration: none;
1970 }
1971
1972 /* stylelint-disable max-nesting-depth */
1973 .card-outer {
1974   background: var(--newtab-background-color-secondary);
1975   border-radius: 8px;
1976   display: inline-block;
1977   height: 266px;
1978   margin-inline-end: 32px;
1979   position: relative;
1980   width: 100%;
1981 }
1982 .card-outer .context-menu-button {
1983   background-clip: padding-box;
1984   background-color: var(--newtab-background-color-secondary);
1985   background-image: url("chrome://global/skin/icons/more.svg");
1986   background-position: 55%;
1987   border: 1px solid var(--newtab-border-color);
1988   border-radius: 100%;
1989   box-shadow: 0 2px rgba(12, 12, 13, 0.1);
1990   cursor: pointer;
1991   fill: var(--newtab-text-primary-color);
1992   height: 27px;
1993   inset-inline-end: -13.5px;
1994   opacity: 0;
1995   position: absolute;
1996   top: -13.5px;
1997   transform: scale(0.25);
1998   transition-duration: 150ms;
1999   transition-property: transform, opacity;
2000   width: 27px;
2001 }
2002 .card-outer .context-menu-button:is(:active, :focus) {
2003   opacity: 1;
2004   transform: scale(1);
2005 }
2006 .card-outer:is(:focus):not(.placeholder) {
2007   border: 0;
2008   outline: 0;
2009   box-shadow: 0 0 0 3px var(--newtab-primary-action-background-dimmed), 0 0 0 1px var(--newtab-primary-action-background);
2010   transition: none;
2011 }
2012 .card-outer:hover {
2013   box-shadow: none;
2014   transition: none;
2015 }
2016 .card-outer.placeholder {
2017   background: transparent;
2018 }
2019 .card-outer.placeholder .card-preview-image-outer,
2020 .card-outer.placeholder .card-context {
2021   display: none;
2022 }
2023 .card-outer .card {
2024   border-radius: 8px;
2025   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
2026   height: 100%;
2027 }
2028 .card-outer > a {
2029   color: inherit;
2030   display: block;
2031   height: 100%;
2032   outline: none;
2033   position: absolute;
2034   width: 100%;
2035 }
2036 .card-outer > a:is(:focus) .card {
2037   border: 0;
2038   outline: 0;
2039   box-shadow: 0 0 0 3px var(--newtab-primary-action-background-dimmed), 0 0 0 1px var(--newtab-primary-action-background);
2040 }
2041 .card-outer > a:is(.active, :focus) .card {
2042   box-shadow: 0 0 0 5px var(--newtab-element-secondary-color);
2043   transition: box-shadow 150ms;
2044 }
2045 .card-outer > a:is(.active, :focus) .card-title {
2046   color: var(--newtab-primary-action-background);
2047 }
2048 .card-outer:is(:hover, :focus, .active):not(.placeholder) {
2049   outline: none;
2050 }
2051 .card-outer:is(:hover, :focus, .active):not(.placeholder) .context-menu-button {
2052   opacity: 1;
2053   transform: scale(1);
2054   transition-delay: 333ms;
2055 }
2056 .card-outer:is(:hover, :focus, .active):not(.placeholder) .card-title {
2057   color: var(--newtab-primary-action-background);
2058 }
2059 .card-outer:is(:hover, :focus, .active):not(.placeholder) .alternate ~ .card-host-name {
2060   display: none;
2061 }
2062 .card-outer:is(:hover, :focus, .active):not(.placeholder) .card-host-name.alternate {
2063   display: block;
2064 }
2065 .card-outer .card-preview-image-outer {
2066   background-color: var(--newtab-element-secondary-color);
2067   border-radius: 8px 8px 0 0;
2068   height: 122px;
2069   overflow: hidden;
2070   position: relative;
2071 }
2072 .card-outer .card-preview-image-outer::after {
2073   border-bottom: 1px solid var(--newtab-card-hairline-color);
2074   bottom: 0;
2075   content: "";
2076   position: absolute;
2077   width: 100%;
2078 }
2079 .card-outer .card-preview-image-outer .card-preview-image {
2080   background-position: center;
2081   background-repeat: no-repeat;
2082   background-size: cover;
2083   height: 100%;
2084   opacity: 0;
2085   transition: opacity 1s cubic-bezier(0.07, 0.95, 0, 1);
2086   width: 100%;
2087 }
2088 .card-outer .card-preview-image-outer .card-preview-image.loaded {
2089   opacity: 1;
2090 }
2091 .card-outer .card-details {
2092   padding: 15px 16px 12px;
2093 }
2094 .card-outer .card-text {
2095   max-height: 78px;
2096   overflow: hidden;
2097 }
2098 .card-outer .card-text.no-host-name, .card-outer .card-text.no-context {
2099   max-height: 97px;
2100 }
2101 .card-outer .card-text.no-host-name.no-context {
2102   max-height: 116px;
2103 }
2104 .card-outer .card-text:not(.no-description) .card-title {
2105   max-height: 57px;
2106   overflow: hidden;
2107 }
2108 .card-outer .card-host-name {
2109   color: var(--newtab-text-secondary-color);
2110   font-size: 10px;
2111   overflow: hidden;
2112   padding-bottom: 4px;
2113   text-overflow: ellipsis;
2114   text-transform: uppercase;
2115   white-space: nowrap;
2116 }
2117 .card-outer .card-host-name.alternate {
2118   display: none;
2119 }
2120 .card-outer .card-title {
2121   font-size: 14px;
2122   font-weight: 600;
2123   line-height: 19px;
2124   margin: 0 0 2px;
2125   word-wrap: break-word;
2126 }
2127 .card-outer .card-description {
2128   font-size: 12px;
2129   line-height: 19px;
2130   margin: 0;
2131   overflow: hidden;
2132   word-wrap: break-word;
2133 }
2134 .card-outer .card-context {
2135   bottom: 0;
2136   color: var(--newtab-text-secondary-color);
2137   display: flex;
2138   font-size: 11px;
2139   inset-inline-start: 0;
2140   padding: 9px 16px 9px 14px;
2141   position: absolute;
2142 }
2143 .card-outer .card-context-icon {
2144   fill: var(--newtab-text-secondary-color);
2145   height: 22px;
2146   margin-inline-end: 6px;
2147 }
2148 .card-outer .card-context-label {
2149   flex-grow: 1;
2150   line-height: 22px;
2151   overflow: hidden;
2152   text-overflow: ellipsis;
2153   white-space: nowrap;
2154 }
2155
2156 @media (min-width: 1122px) {
2157   .normal-cards .card-outer {
2158     height: 370px;
2159   }
2160   .normal-cards .card-outer .card-preview-image-outer {
2161     height: 155px;
2162   }
2163   .normal-cards .card-outer .card-details {
2164     padding: 13px 16px 12px;
2165   }
2166   .normal-cards .card-outer .card-text {
2167     max-height: 140px;
2168   }
2169   .normal-cards .card-outer .card-host-name {
2170     font-size: 12px;
2171     padding-bottom: 5px;
2172   }
2173   .normal-cards .card-outer .card-title {
2174     font-size: 17px;
2175     line-height: 23px;
2176     margin-bottom: 0;
2177   }
2178   .normal-cards .card-outer .card-text:not(.no-description) .card-title {
2179     max-height: 69px;
2180   }
2181   .normal-cards .card-outer .card-description {
2182     font-size: 15px;
2183     line-height: 23px;
2184   }
2185   .normal-cards .card-outer .card-context {
2186     bottom: 4px;
2187     font-size: 14px;
2188   }
2189 }
2190
2191 .compact-cards .card-outer {
2192   height: 160px;
2193 }
2194 .compact-cards .card-outer .card-preview-image-outer {
2195   height: 108px;
2196 }
2197 .compact-cards .card-outer .card-details {
2198   padding: 12px 16px;
2199 }
2200 .compact-cards .card-outer .card-host-name {
2201   line-height: 10px;
2202 }
2203 .compact-cards .card-outer .card-text .card-title, .compact-cards .card-outer .card-text:not(.no-description) .card-title {
2204   font-size: 12px;
2205   line-height: 13px;
2206   max-height: 17px;
2207   overflow: hidden;
2208   padding: 0 0 4px;
2209   text-overflow: ellipsis;
2210   white-space: nowrap;
2211 }
2212 .compact-cards .card-outer .card-description {
2213   display: none;
2214 }
2215 .compact-cards .card-outer .card-context {
2216   background-color: var(--newtab-background-color-secondary);
2217   border-radius: 16px;
2218   clip-path: inset(-1px -1px 4px);
2219   height: 32px;
2220   width: 32px;
2221   padding: 8px;
2222   top: 91px;
2223   inset-inline-end: 12px;
2224   inset-inline-start: auto;
2225 }
2226 .compact-cards .card-outer .card-context::after {
2227   border: 1px solid var(--newtab-card-hairline-color);
2228   border-bottom: 0;
2229   border-radius: 17px 17px 0 0;
2230   content: "";
2231   position: absolute;
2232   height: 17px;
2233   width: 34px;
2234   top: -1px;
2235   left: -1px;
2236 }
2237 .compact-cards .card-outer .card-context .card-context-icon {
2238   margin-inline-end: 0;
2239   height: 16px;
2240   width: 16px;
2241 }
2242 .compact-cards .card-outer .card-context .card-context-icon.icon-bookmark-added {
2243   fill: #0A84FF;
2244 }
2245 .compact-cards .card-outer .card-context .card-context-icon.icon-download {
2246   fill: #12BC00;
2247 }
2248 .compact-cards .card-outer .card-context .card-context-icon.icon-pocket {
2249   fill: #EF4056;
2250 }
2251 .compact-cards .card-outer .card-context .card-context-label {
2252   display: none;
2253 }
2254 @media not all and (min-width: 1122px) {
2255   .compact-cards .hide-for-narrow {
2256     display: none;
2257   }
2258 }
2259
2260 /* stylelint-disable max-nesting-depth */
2261 .collapsible-section {
2262   padding: 10px 25px;
2263 }
2264 .collapsible-section .section-title-container {
2265   margin: 0;
2266 }
2267 .collapsible-section .section-title-container.has-subtitle {
2268   display: flex;
2269   flex-direction: column;
2270 }
2271 @media (min-width: 866px) {
2272   .collapsible-section .section-title-container.has-subtitle {
2273     flex-direction: row;
2274     align-items: baseline;
2275     justify-content: space-between;
2276   }
2277 }
2278 .collapsible-section .section-title {
2279   font-size: 17px;
2280   font-weight: 600;
2281   color: var(--newtab-text-primary-color);
2282 }
2283 .collapsible-section .section-title.grey-title {
2284   color: var(--newtab-text-primary-color);
2285   display: inline-block;
2286   fill: var(--newtab-text-primary-color);
2287   vertical-align: middle;
2288 }
2289 .collapsible-section .section-title .section-title-contents {
2290   vertical-align: top;
2291 }
2292 @media (max-width: 609px) {
2293   .collapsible-section .section-title .section-title-contents {
2294     display: block;
2295   }
2296   .collapsible-section .section-title .section-title-contents .learn-more-link-wrapper {
2297     display: block;
2298     text-align: center;
2299   }
2300   .collapsible-section .section-title .section-title-contents .learn-more-link-wrapper .learn-more-link {
2301     margin-inline-start: 0;
2302   }
2303 }
2304 .collapsible-section .section-sub-title {
2305   font-size: 14px;
2306   line-height: 16px;
2307   color: var(--newtab-text-secondary-color);
2308   opacity: 0.3;
2309 }
2310 .collapsible-section .section-top-bar {
2311   min-height: 19px;
2312   margin-bottom: 13px;
2313   position: relative;
2314 }
2315 .collapsible-section.active {
2316   background: var(--newtab-element-hover-color);
2317   border-radius: 4px;
2318 }
2319 .collapsible-section .learn-more-link {
2320   font-size: 13px;
2321   margin-inline-start: 12px;
2322 }
2323 .collapsible-section .learn-more-link a {
2324   color: var(--newtab-primary-action-background);
2325 }
2326 .collapsible-section .section-body-fallback {
2327   height: 266px;
2328 }
2329 .collapsible-section .section-body {
2330   margin: 0 -7px;
2331   padding: 0 7px;
2332 }
2333 .collapsible-section .section-body.animating {
2334   overflow: hidden;
2335   pointer-events: none;
2336 }
2337 .collapsible-section[data-section-id=topsites] .section-top-bar {
2338   display: none;
2339 }
2340 @media (min-width: 610px) and (max-width: 865px) {
2341   .collapsible-section[data-section-id=topstories] .card-outer:first-child {
2342     display: none;
2343   }
2344 }
2345
2346 /* stylelint-disable max-nesting-depth */
2347 .discoverystream-admin-toggle {
2348   position: fixed;
2349   top: 50px;
2350   inset-inline-end: 15px;
2351   border: 0;
2352   background: none;
2353   z-index: 1;
2354   border-radius: 2px;
2355 }
2356 .discoverystream-admin-toggle .icon-devtools {
2357   background-image: url("chrome://global/skin/icons/developer.svg");
2358   padding: 15px;
2359 }
2360 .discoverystream-admin-toggle:dir(rtl) {
2361   transform: scaleX(-1);
2362 }
2363 .discoverystream-admin-toggle:hover {
2364   background: var(--newtab-element-hover-color);
2365 }
2366 .discoverystream-admin-toggle.expanded {
2367   background: rgba(0, 0, 0, 0.2);
2368 }
2369
2370 .discoverystream-admin {
2371   position: fixed;
2372   top: 0;
2373   inset-inline-start: 0;
2374   width: 100%;
2375   background: var(--newtab-background-color);
2376   height: 100%;
2377   overflow-y: scroll;
2378   margin: 0 auto;
2379   font-size: 14px;
2380   padding-inline-start: 240px;
2381   color: var(--newtab-text-primary-color);
2382 }
2383 .discoverystream-admin.collapsed {
2384   display: none;
2385 }
2386 .discoverystream-admin .sidebar {
2387   inset-inline-start: 0;
2388   position: fixed;
2389   width: 240px;
2390   padding: 30px 20px;
2391 }
2392 .discoverystream-admin .sidebar ul {
2393   margin: 0;
2394   padding: 0;
2395   list-style: none;
2396 }
2397 .discoverystream-admin .sidebar li a {
2398   padding: 10px 34px;
2399   display: block;
2400   color: var(--lwt-sidebar-text-color);
2401 }
2402 .discoverystream-admin .sidebar li a:hover {
2403   background: var(--newtab-background-color-secondary);
2404 }
2405 .discoverystream-admin h1 {
2406   font-weight: 200;
2407   font-size: 32px;
2408 }
2409 .discoverystream-admin h2 .button,
2410 .discoverystream-admin p .button {
2411   font-size: 14px;
2412   padding: 6px 12px;
2413   margin-inline-start: 5px;
2414   margin-bottom: 0;
2415 }
2416 .discoverystream-admin .general-textarea {
2417   direction: ltr;
2418   width: 740px;
2419   height: 500px;
2420   overflow: auto;
2421   resize: none;
2422   border-radius: 4px;
2423   display: flex;
2424 }
2425 .discoverystream-admin .wnp-textarea {
2426   direction: ltr;
2427   width: 740px;
2428   height: 500px;
2429   overflow: auto;
2430   resize: none;
2431   border-radius: 4px;
2432   display: flex;
2433 }
2434 .discoverystream-admin .json-button {
2435   display: inline-flex;
2436   font-size: 10px;
2437   padding: 4px 10px;
2438   margin-bottom: 6px;
2439   margin-inline-end: 4px;
2440 }
2441 .discoverystream-admin .json-button:hover {
2442   background-color: var(--newtab-element-hover-color);
2443   box-shadow: none;
2444 }
2445 .discoverystream-admin table {
2446   border-collapse: collapse;
2447   width: 100%;
2448 }
2449 .discoverystream-admin table.minimal-table {
2450   border-collapse: collapse;
2451   border: 1px solid var(--newtab-border-color);
2452 }
2453 .discoverystream-admin table.minimal-table td {
2454   padding: 8px;
2455 }
2456 .discoverystream-admin table.minimal-table td:first-child {
2457   width: 1%;
2458   white-space: nowrap;
2459 }
2460 .discoverystream-admin table.minimal-table td:not(:first-child) {
2461   font-family: "SF Mono", "Monaco", "Inconsolata", "Fira Mono", "Droid Sans Mono", "Source Code Pro", monospace;
2462 }
2463 .discoverystream-admin table.errorReporting tr {
2464   border: 1px solid var(--newtab-background-color-secondary);
2465 }
2466 .discoverystream-admin table.errorReporting td {
2467   padding: 4px;
2468 }
2469 .discoverystream-admin table.errorReporting td[rowspan] {
2470   border: 1px solid var(--newtab-background-color-secondary);
2471 }
2472 .discoverystream-admin .sourceLabel {
2473   background: var(--newtab-background-color-secondary);
2474   padding: 2px 5px;
2475   border-radius: 3px;
2476 }
2477 .discoverystream-admin .sourceLabel.isDisabled {
2478   background: rgba(215, 0, 34, 0.3);
2479   color: var(--newtab-status-error);
2480 }
2481 .discoverystream-admin .message-item:first-child td {
2482   border-top: 1px solid var(--newtab-border-color);
2483 }
2484 .discoverystream-admin .message-item td {
2485   vertical-align: top;
2486   padding: 8px;
2487   border-bottom: 1px solid var(--newtab-border-color);
2488 }
2489 .discoverystream-admin .message-item td.min {
2490   width: 1%;
2491   white-space: nowrap;
2492 }
2493 .discoverystream-admin .message-item td.message-summary {
2494   width: 60%;
2495 }
2496 .discoverystream-admin .message-item td.button-column {
2497   width: 15%;
2498 }
2499 .discoverystream-admin .message-item td:first-child {
2500   border-inline-start: 1px solid var(--newtab-border-color);
2501 }
2502 .discoverystream-admin .message-item td:last-child {
2503   border-inline-end: 1px solid var(--newtab-border-color);
2504 }
2505 .discoverystream-admin .message-item.blocked .message-id,
2506 .discoverystream-admin .message-item.blocked .message-summary {
2507   opacity: 0.5;
2508 }
2509 .discoverystream-admin .message-item.blocked .message-id {
2510   opacity: 0.5;
2511 }
2512 .discoverystream-admin .message-item .message-id {
2513   font-family: "SF Mono", "Monaco", "Inconsolata", "Fira Mono", "Droid Sans Mono", "Source Code Pro", monospace;
2514   font-size: 12px;
2515 }
2516 .discoverystream-admin .providerUrl {
2517   font-size: 12px;
2518 }
2519 .discoverystream-admin pre {
2520   background: var(--newtab-background-color-secondary);
2521   margin: 0;
2522   padding: 8px;
2523   font-size: 12px;
2524   max-width: 750px;
2525   overflow: auto;
2526   font-family: "SF Mono", "Monaco", "Inconsolata", "Fira Mono", "Droid Sans Mono", "Source Code Pro", monospace;
2527 }
2528 .discoverystream-admin .errorState {
2529   border: 1px solid var(--newtab-status-error);
2530 }
2531 .discoverystream-admin .helpLink {
2532   padding: 10px;
2533   display: flex;
2534   background: rgba(0, 0, 0, 0.1);
2535   border-radius: 3px;
2536   align-items: center;
2537 }
2538 .discoverystream-admin .helpLink a {
2539   text-decoration: underline;
2540 }
2541 .discoverystream-admin .helpLink .icon {
2542   min-width: 18px;
2543   min-height: 18px;
2544 }
2545 .discoverystream-admin .ds-component {
2546   margin-bottom: 20px;
2547 }
2548 .discoverystream-admin .modalOverlayInner {
2549   height: 80%;
2550 }
2551 .discoverystream-admin .clearButton {
2552   border: 0;
2553   padding: 4px;
2554   border-radius: 4px;
2555   display: flex;
2556 }
2557 .discoverystream-admin .clearButton:hover {
2558   background: var(--newtab-element-hover-color);
2559 }
2560 .discoverystream-admin .collapsed {
2561   display: none;
2562 }
2563 .discoverystream-admin .icon {
2564   display: inline-table;
2565   cursor: pointer;
2566   width: 18px;
2567   height: 18px;
2568 }
2569 .discoverystream-admin .button:disabled, .discoverystream-admin .button:disabled:active {
2570   opacity: 0.5;
2571   cursor: unset;
2572   box-shadow: none;
2573 }
2574 .discoverystream-admin .impressions-section {
2575   display: flex;
2576   flex-direction: column;
2577   gap: 16px;
2578 }
2579 .discoverystream-admin .impressions-section .impressions-item {
2580   display: flex;
2581   flex-flow: column nowrap;
2582   padding: 8px;
2583   border: 1px solid var(--newtab-border-color);
2584   border-radius: 5px;
2585 }
2586 .discoverystream-admin .impressions-section .impressions-item .impressions-inner-box {
2587   display: flex;
2588   flex-flow: row nowrap;
2589   gap: 8px;
2590 }
2591 .discoverystream-admin .impressions-section .impressions-item .impressions-category {
2592   font-size: 1.15em;
2593   white-space: nowrap;
2594   flex-grow: 0.1;
2595 }
2596 .discoverystream-admin .impressions-section .impressions-item .impressions-buttons {
2597   display: flex;
2598   flex-direction: column;
2599   gap: 8px;
2600 }
2601 .discoverystream-admin .impressions-section .impressions-item .impressions-buttons button {
2602   margin: 0;
2603 }
2604 .discoverystream-admin .impressions-section .impressions-item .impressions-editor {
2605   display: flex;
2606   flex-grow: 1.5;
2607 }
2608 .discoverystream-admin .impressions-section .impressions-item .impressions-editor .general-textarea {
2609   width: auto;
2610   flex-grow: 1;
2611 }
2612
2613 .pocket-logged-in-cta {
2614   font-size: 13px;
2615   margin-inline-end: 20px;
2616   display: flex;
2617   align-items: flex-start;
2618 }
2619 .pocket-logged-in-cta .pocket-cta-button {
2620   white-space: nowrap;
2621   background: var(--newtab-primary-action-background);
2622   letter-spacing: -0.34px;
2623   color: #FFF;
2624   border-radius: 4px;
2625   cursor: pointer;
2626   max-width: 130px;
2627   margin-top: -1px;
2628   min-height: 18px;
2629   padding: 0 8px;
2630   display: inline-flex;
2631   justify-content: center;
2632   align-items: center;
2633   font-size: 11px;
2634   margin-inline-end: 10px;
2635 }
2636 .pocket-logged-in-cta .cta-text {
2637   font-weight: normal;
2638   font-size: 13px;
2639   line-height: 1.2307692308;
2640 }
2641 .pocket-logged-in-cta .pocket-cta-button,
2642 .pocket-logged-in-cta .cta-text {
2643   vertical-align: top;
2644 }
2645
2646 .more-recommendations {
2647   display: flex;
2648   align-items: center;
2649   white-space: nowrap;
2650   line-height: 1.2307692308;
2651 }
2652 .more-recommendations::after {
2653   background: url("chrome://global/skin/icons/arrow-right-12.svg") no-repeat center center;
2654   content: "";
2655   -moz-context-properties: fill;
2656   display: inline-block;
2657   fill: var(--newtab-primary-action-background);
2658   height: 16px;
2659   margin-inline-start: 5px;
2660   vertical-align: top;
2661   width: 12px;
2662 }
2663 .more-recommendations:dir(rtl)::after {
2664   background-image: url("chrome://global/skin/icons/arrow-left-12.svg");
2665 }
2666
2667 .discovery-stream.ds-layout {
2668   --gridColumnGap: 48px;
2669   --gridRowGap: 24px;
2670   grid-template-columns: repeat(12, 1fr);
2671   grid-column-gap: var(--gridColumnGap);
2672   grid-row-gap: var(--gridRowGap);
2673   margin: 0 auto;
2674 }
2675 .discovery-stream.ds-layout .ds-column-12 {
2676   grid-column-start: auto;
2677   grid-column-end: span 12;
2678 }
2679 .discovery-stream.ds-layout .ds-column-11 {
2680   grid-column-start: auto;
2681   grid-column-end: span 11;
2682 }
2683 .discovery-stream.ds-layout .ds-column-10 {
2684   grid-column-start: auto;
2685   grid-column-end: span 10;
2686 }
2687 .discovery-stream.ds-layout .ds-column-9 {
2688   grid-column-start: auto;
2689   grid-column-end: span 9;
2690 }
2691 .discovery-stream.ds-layout .ds-column-8 {
2692   grid-column-start: auto;
2693   grid-column-end: span 8;
2694 }
2695 .discovery-stream.ds-layout .ds-column-7 {
2696   grid-column-start: auto;
2697   grid-column-end: span 7;
2698 }
2699 .discovery-stream.ds-layout .ds-column-6 {
2700   grid-column-start: auto;
2701   grid-column-end: span 6;
2702 }
2703 .discovery-stream.ds-layout .ds-column-5 {
2704   grid-column-start: auto;
2705   grid-column-end: span 5;
2706 }
2707 .discovery-stream.ds-layout .ds-column-4 {
2708   grid-column-start: auto;
2709   grid-column-end: span 4;
2710 }
2711 .discovery-stream.ds-layout .ds-column-3 {
2712   grid-column-start: auto;
2713   grid-column-end: span 3;
2714 }
2715 .discovery-stream.ds-layout .ds-column-2 {
2716   grid-column-start: auto;
2717   grid-column-end: span 2;
2718 }
2719 .discovery-stream.ds-layout .ds-column-1 {
2720   grid-column-start: auto;
2721   grid-column-end: span 1;
2722 }
2723 .discovery-stream.ds-layout .ds-column-grid {
2724   display: grid;
2725   grid-row-gap: var(--gridRowGap);
2726 }
2727 .discovery-stream.ds-layout .ds-column-grid > div:empty {
2728   display: none;
2729 }
2730
2731 .ds-header {
2732   margin: 8px 0;
2733 }
2734 .ds-header .ds-context {
2735   font-weight: 400;
2736 }
2737
2738 .ds-header,
2739 .ds-layout .section-title span {
2740   color: var(--newtab-text-primary-color);
2741   font-size: 17px;
2742   font-weight: 600;
2743   line-height: 20px;
2744 }
2745 .ds-header .icon,
2746 .ds-layout .section-title span .icon {
2747   fill: var(--newtab-text-secondary-color);
2748 }
2749
2750 .collapsible-section.ds-layout {
2751   margin: auto;
2752 }
2753 .collapsible-section.ds-layout .section-top-bar .learn-more-link a {
2754   color: var(--newtab-primary-action-background);
2755   font-weight: 500;
2756 }
2757 .collapsible-section.ds-layout .section-top-bar .learn-more-link a:is(:focus, :hover) {
2758   text-decoration: none;
2759 }
2760
2761 .activity-stream.modal-open {
2762   overflow: hidden;
2763 }
2764
2765 .modalOverlayOuter {
2766   background: var(--newtab-overlay-color);
2767   height: 100%;
2768   position: fixed;
2769   top: 0;
2770   left: 0;
2771   width: 100%;
2772   display: none;
2773   z-index: 1100;
2774   overflow: auto;
2775 }
2776 .modalOverlayOuter.active {
2777   display: flex;
2778 }
2779
2780 .modalOverlayInner {
2781   min-width: min-content;
2782   width: 100%;
2783   max-width: 960px;
2784   position: relative;
2785   margin: auto;
2786   background: var(--newtab-background-color-secondary);
2787   box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.2);
2788   border-radius: 4px;
2789   display: none;
2790   z-index: 1100;
2791 }
2792 @media (width <= 960px) {
2793   .modalOverlayInner {
2794     height: 100%;
2795     top: 0;
2796     left: 0;
2797     box-shadow: none;
2798     border-radius: 0;
2799   }
2800 }
2801 .modalOverlayInner.active {
2802   display: block;
2803 }
2804 .modalOverlayInner h2 {
2805   color: var(--newtab-text-primary-color);
2806   text-align: center;
2807   font-weight: 200;
2808   margin-top: 30px;
2809   font-size: 28px;
2810   line-height: 37px;
2811   letter-spacing: -0.13px;
2812 }
2813 @media (width <= 960px) {
2814   .modalOverlayInner h2 {
2815     margin-top: 100px;
2816   }
2817 }
2818 @media (width <= 850px) {
2819   .modalOverlayInner h2 {
2820     margin-top: 30px;
2821   }
2822 }
2823 .modalOverlayInner .footer {
2824   border-top: 1px solid var(--newtab-border-color);
2825   border-radius: 4px;
2826   height: 70px;
2827   width: 100%;
2828   position: absolute;
2829   bottom: 0;
2830   text-align: center;
2831   background-color: #FFF;
2832 }
2833 @media (width <= 850px) and (height <= 730px) {
2834   .modalOverlayInner .footer {
2835     position: sticky;
2836   }
2837 }
2838 @media (width <= 650px) and (height <= 600px) {
2839   .modalOverlayInner .footer {
2840     position: sticky;
2841   }
2842 }
2843 .modalOverlayInner .footer .modalButton {
2844   margin-top: 20px;
2845   min-width: 150px;
2846   height: 30px;
2847   padding: 4px 30px 6px;
2848   font-size: 15px;
2849 }
2850 .modalOverlayInner .footer .modalButton:focus, .modalOverlayInner .footer .modalButton.active, .modalOverlayInner .footer .modalButton:hover {
2851   box-shadow: 0 0 0 5px var(--newtab-element-secondary-color);
2852   transition: box-shadow 150ms;
2853 }
2854
2855 .ds-onboarding-container,
2856 .ds-card-grid .ds-card {
2857   background: #FFF;
2858   border-radius: 4px;
2859 }
2860 [lwt-newtab-brighttext] .ds-onboarding-container,
2861 [lwt-newtab-brighttext] .ds-card-grid .ds-card {
2862   background: none;
2863 }
2864 .ds-onboarding-container:not(.placeholder),
2865 .ds-card-grid .ds-card:not(.placeholder) {
2866   border-radius: 8px;
2867   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
2868 }
2869 [lwt-newtab-brighttext] .ds-onboarding-container:not(.placeholder),
2870 [lwt-newtab-brighttext] .ds-card-grid .ds-card:not(.placeholder) {
2871   background: var(--newtab-background-color-secondary);
2872 }
2873 .ds-onboarding-container:not(.placeholder) .img-wrapper .img img,
2874 .ds-onboarding-container:not(.placeholder) .img-wrapper .img .placeholder-image,
2875 .ds-card-grid .ds-card:not(.placeholder) .img-wrapper .img img,
2876 .ds-card-grid .ds-card:not(.placeholder) .img-wrapper .img .placeholder-image {
2877   border-radius: 8px 8px 0 0;
2878 }
2879
2880 .ds-onboarding-container {
2881   padding-inline-start: 16px;
2882   padding-inline-end: 16px;
2883   margin-bottom: 24px;
2884   position: relative;
2885 }
2886 @media (min-width: 610px) {
2887   .ds-onboarding-container {
2888     padding-inline-end: 48px;
2889   }
2890 }
2891 @media (min-width: 866px) {
2892   .ds-onboarding-container {
2893     padding-inline-end: 56px;
2894   }
2895 }
2896 .ds-onboarding-container .ds-onboarding {
2897   position: static;
2898   display: flex;
2899 }
2900 .ds-onboarding-container .ds-onboarding .ds-dismiss-button {
2901   inset-inline-end: 8px;
2902   top: 8px;
2903 }
2904 .ds-onboarding-container header {
2905   display: flex;
2906   margin: 32px 0 8px;
2907   font-size: 17px;
2908   line-height: 23.8px;
2909   font-weight: 600;
2910   color: #EF4056;
2911 }
2912 [lwt-newtab-brighttext] .ds-onboarding-container header {
2913   color: var(--newtab-background-color-primary);
2914 }
2915 @media (min-width: 610px) {
2916   .ds-onboarding-container header {
2917     margin: 16px 0 8px;
2918     display: block;
2919     height: 24px;
2920   }
2921 }
2922 .ds-onboarding-container p {
2923   margin: 8px 0 16px;
2924   font-size: 13px;
2925   line-height: 19.5px;
2926 }
2927 .ds-onboarding-container .icon-pocket {
2928   fill: #EF4056;
2929   margin-top: 3px;
2930   margin-inline-end: 8px;
2931   height: 22px;
2932   width: 22px;
2933   background-image: url("chrome://global/skin/icons/pocket.svg");
2934   background-size: contain;
2935 }
2936 [lwt-newtab-brighttext] .ds-onboarding-container .icon-pocket {
2937   fill: var(--newtab-text-primary-color);
2938 }
2939 @media (forced-colors: active) {
2940   [lwt-newtab-brighttext] .ds-onboarding-container .icon-pocket {
2941     fill: CurrentColor;
2942   }
2943 }
2944 @media (forced-colors: active) {
2945   .ds-onboarding-container .icon-pocket {
2946     fill: CurrentColor;
2947   }
2948 }
2949 @media (min-width: 610px) {
2950   .ds-onboarding-container .icon-pocket {
2951     margin-top: -5px;
2952     margin-inline-start: -2px;
2953     margin-inline-end: 15px;
2954     height: 30px;
2955     width: 30px;
2956   }
2957 }
2958 .ds-onboarding-container .ds-onboarding-graphic {
2959   background-image: image-set(url("chrome://activity-stream/content/data/content/assets/pocket-onboarding.avif"), url("chrome://activity-stream/content/data/content/assets/pocket-onboarding@2x.avif") 2x);
2960   border-radius: 8px;
2961   background-size: contain;
2962   background-repeat: no-repeat;
2963   background-position: center;
2964   height: 120px;
2965   width: 200px;
2966   margin-top: 16px;
2967   margin-bottom: 16px;
2968   margin-inline-start: 54px;
2969   flex-shrink: 0;
2970   display: none;
2971 }
2972 @media (min-width: 866px) {
2973   .ds-onboarding-container .ds-onboarding-graphic {
2974     display: block;
2975   }
2976 }
2977
2978 .ds-card-grid {
2979   display: grid;
2980   grid-gap: 24px;
2981 }
2982 .ds-card-grid.ds-card-grid-compact {
2983   grid-gap: 20px;
2984 }
2985 @media (min-width: 610px) and (max-width: 866px) {
2986   .ds-card-grid.ds-card-grid-recent-saves .ds-card:last-child:nth-child(2n-1) {
2987     display: none;
2988   }
2989 }
2990 .ds-card-grid .ds-card-link:focus {
2991   border: 0;
2992   outline: 0;
2993   box-shadow: 0 0 0 3px var(--newtab-primary-action-background-dimmed), 0 0 0 1px var(--newtab-primary-action-background);
2994   transition: none;
2995   border-radius: 8px;
2996 }
2997 .ds-column-5 .ds-card-grid, .ds-column-6 .ds-card-grid, .ds-column-7 .ds-card-grid, .ds-column-8 .ds-card-grid {
2998   grid-template-columns: repeat(2, 1fr);
2999 }
3000 .ds-column-9 .ds-card-grid, .ds-column-10 .ds-card-grid, .ds-column-11 .ds-card-grid, .ds-column-12 .ds-card-grid {
3001   grid-template-columns: repeat(1, 1fr);
3002 }
3003 @media (min-width: 610px) {
3004   .ds-column-9 .ds-card-grid, .ds-column-10 .ds-card-grid, .ds-column-11 .ds-card-grid, .ds-column-12 .ds-card-grid {
3005     grid-template-columns: repeat(2, 1fr);
3006   }
3007 }
3008 @media (min-width: 866px) {
3009   .ds-column-9 .ds-card-grid, .ds-column-10 .ds-card-grid, .ds-column-11 .ds-card-grid, .ds-column-12 .ds-card-grid {
3010     grid-template-columns: repeat(3, 1fr);
3011   }
3012 }
3013 .ds-column-9 .ds-card-grid .title, .ds-column-10 .ds-card-grid .title, .ds-column-11 .ds-card-grid .title, .ds-column-12 .ds-card-grid .title {
3014   font-size: 17px;
3015   line-height: 24px;
3016 }
3017 .ds-column-9 .ds-card-grid .excerpt, .ds-column-10 .ds-card-grid .excerpt, .ds-column-11 .ds-card-grid .excerpt, .ds-column-12 .ds-card-grid .excerpt {
3018   font-size: 15px;
3019   -webkit-line-clamp: 3;
3020   line-height: 24px;
3021 }
3022 .ds-card-grid.empty {
3023   grid-template-columns: auto;
3024 }
3025 .ds-column-9 .ds-card-grid.ds-card-grid-four-card-variant, .ds-column-10 .ds-card-grid.ds-card-grid-four-card-variant, .ds-column-11 .ds-card-grid.ds-card-grid-four-card-variant, .ds-column-12 .ds-card-grid.ds-card-grid-four-card-variant {
3026   grid-template-columns: repeat(1, 1fr);
3027 }
3028 @media (min-width: 610px) {
3029   .ds-column-9 .ds-card-grid.ds-card-grid-four-card-variant, .ds-column-10 .ds-card-grid.ds-card-grid-four-card-variant, .ds-column-11 .ds-card-grid.ds-card-grid-four-card-variant, .ds-column-12 .ds-card-grid.ds-card-grid-four-card-variant {
3030     grid-template-columns: repeat(2, 1fr);
3031   }
3032 }
3033 @media (min-width: 866px) {
3034   .ds-column-9 .ds-card-grid.ds-card-grid-four-card-variant, .ds-column-10 .ds-card-grid.ds-card-grid-four-card-variant, .ds-column-11 .ds-card-grid.ds-card-grid-four-card-variant, .ds-column-12 .ds-card-grid.ds-card-grid-four-card-variant {
3035     grid-template-columns: repeat(3, 1fr);
3036   }
3037 }
3038 @media (min-width: 1122px) {
3039   .ds-column-9 .ds-card-grid.ds-card-grid-four-card-variant, .ds-column-10 .ds-card-grid.ds-card-grid-four-card-variant, .ds-column-11 .ds-card-grid.ds-card-grid-four-card-variant, .ds-column-12 .ds-card-grid.ds-card-grid-four-card-variant {
3040     grid-template-columns: repeat(4, 1fr);
3041   }
3042 }
3043 .ds-card-grid.ds-card-grid-four-card-variant .ds-card.placeholder {
3044   min-height: 247px;
3045 }
3046 .ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .story-footer {
3047   margin-top: 8px;
3048 }
3049 .ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .source,
3050 .ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .story-sponsored-label,
3051 .ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .status-message .story-context-label {
3052   color: var(--newtab-text-secondary-color);
3053   -webkit-line-clamp: 2;
3054 }
3055 .ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .source,
3056 .ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .story-sponsored-label {
3057   font-size: 13px;
3058 }
3059 .ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .status-message .story-context-label {
3060   font-size: 11.7px;
3061 }
3062 .ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .story-badge-icon {
3063   margin-inline-end: 2px;
3064   margin-bottom: 2px;
3065   height: 14px;
3066   width: 14px;
3067   background-size: 14px;
3068 }
3069 .ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .title {
3070   font-size: 14px;
3071   line-height: 20px;
3072 }
3073 .ds-card-grid.ds-card-grid-four-card-variant .ds-card .meta .info-wrap {
3074   flex-grow: 0;
3075 }
3076 .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout {
3077   grid-template-columns: repeat(1, 1fr);
3078 }
3079 @media (min-width: 610px) {
3080   .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout {
3081     grid-template-columns: repeat(2, 1fr);
3082   }
3083 }
3084 @media (min-width: 866px) {
3085   .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout {
3086     grid-template-columns: repeat(3, 1fr);
3087   }
3088 }
3089 @media (height <= 1065px) {
3090   .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .excerpt, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .excerpt, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .excerpt, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .excerpt {
3091     display: none;
3092   }
3093 }
3094 @media (max-width: 1122px) {
3095   .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card.placeholder, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card.placeholder, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card.placeholder, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card.placeholder {
3096     min-height: 247px;
3097   }
3098   .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-footer, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-footer, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-footer, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-footer {
3099     margin-top: 8px;
3100   }
3101   .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
3102 .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label,
3103 .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
3104 .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label,
3105 .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
3106 .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label,
3107 .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
3108 .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label,
3109 .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label {
3110     color: var(--newtab-text-secondary-color);
3111     -webkit-line-clamp: 2;
3112   }
3113   .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
3114 .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
3115 .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
3116 .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
3117 .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label {
3118     font-size: 13px;
3119   }
3120   .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label {
3121     font-size: 11.7px;
3122   }
3123   .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-badge-icon, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-badge-icon, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-badge-icon, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-badge-icon {
3124     margin-inline-end: 2px;
3125     margin-bottom: 2px;
3126     height: 14px;
3127     width: 14px;
3128     background-size: 14px;
3129   }
3130   .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .title, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .title, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .title, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .title {
3131     font-size: 14px;
3132     line-height: 20px;
3133   }
3134   .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .info-wrap, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .info-wrap, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .info-wrap, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .info-wrap {
3135     flex-grow: 0;
3136   }
3137 }
3138 @media (min-width: 1122px) and (height <= 964px) {
3139   .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout {
3140     grid-template-columns: repeat(4, 1fr);
3141   }
3142   .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card.placeholder, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card.placeholder, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card.placeholder, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card.placeholder {
3143     min-height: 247px;
3144   }
3145   .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-footer, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-footer, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-footer, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-footer {
3146     margin-top: 8px;
3147   }
3148   .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
3149 .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label,
3150 .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
3151 .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label,
3152 .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
3153 .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label,
3154 .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
3155 .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label,
3156 .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label {
3157     color: var(--newtab-text-secondary-color);
3158     -webkit-line-clamp: 2;
3159   }
3160   .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
3161 .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
3162 .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
3163 .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .source,
3164 .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-sponsored-label {
3165     font-size: 13px;
3166   }
3167   .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .status-message .story-context-label {
3168     font-size: 11.7px;
3169   }
3170   .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-badge-icon, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-badge-icon, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-badge-icon, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .story-badge-icon {
3171     margin-inline-end: 2px;
3172     margin-bottom: 2px;
3173     height: 14px;
3174     width: 14px;
3175     background-size: 14px;
3176   }
3177   .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .title, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .title, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .title, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .title {
3178     font-size: 14px;
3179     line-height: 20px;
3180   }
3181   .ds-column-9 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .info-wrap, .ds-column-10 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .info-wrap, .ds-column-11 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .info-wrap, .ds-column-12 .ds-card-grid.ds-card-grid-hybrid-layout .ds-card .meta .info-wrap {
3182     flex-grow: 0;
3183   }
3184 }
3185
3186 .outer-wrapper .ds-card-grid.ds-card-grid-hide-background .ds-card:not(.placeholder),
3187 .outer-wrapper.newtab-experience .ds-card-grid.ds-card-grid-hide-background .ds-card:not(.placeholder) {
3188   box-shadow: none;
3189   background: none;
3190 }
3191 .outer-wrapper .ds-card-grid.ds-card-grid-hide-background .ds-card:not(.placeholder) .ds-card-link:focus,
3192 .outer-wrapper.newtab-experience .ds-card-grid.ds-card-grid-hide-background .ds-card:not(.placeholder) .ds-card-link:focus {
3193   box-shadow: none;
3194 }
3195 .outer-wrapper .ds-card-grid.ds-card-grid-hide-background .ds-card:not(.placeholder) .ds-card-link:focus .img-wrapper .img img,
3196 .outer-wrapper.newtab-experience .ds-card-grid.ds-card-grid-hide-background .ds-card:not(.placeholder) .ds-card-link:focus .img-wrapper .img img {
3197   border: 0;
3198   outline: 0;
3199   box-shadow: 0 0 0 3px var(--newtab-primary-action-background-dimmed), 0 0 0 1px var(--newtab-primary-action-background);
3200 }
3201 .outer-wrapper .ds-card-grid.ds-card-grid-hide-background .ds-card:not(.placeholder) .img-wrapper .img img,
3202 .outer-wrapper.newtab-experience .ds-card-grid.ds-card-grid-hide-background .ds-card:not(.placeholder) .img-wrapper .img img {
3203   border-radius: 8px;
3204   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
3205 }
3206 .outer-wrapper .ds-card-grid.ds-card-grid-hide-background .ds-card:not(.placeholder) .meta,
3207 .outer-wrapper.newtab-experience .ds-card-grid.ds-card-grid-hide-background .ds-card:not(.placeholder) .meta {
3208   padding: 12px 0 0;
3209 }
3210
3211 .ds-layout .ds-sub-header {
3212   margin-top: 24px;
3213 }
3214 .ds-layout .ds-sub-header .section-title-container {
3215   flex-direction: row;
3216   align-items: baseline;
3217   justify-content: space-between;
3218   display: flex;
3219 }
3220 .ds-layout .ds-sub-header .section-sub-link {
3221   color: var(--newtab-primary-action-background);
3222   font-size: 14px;
3223   line-height: 16px;
3224   cursor: pointer;
3225 }
3226 .ds-layout .ds-sub-header .section-sub-link:hover {
3227   text-decoration: underline;
3228 }
3229 .ds-layout .ds-sub-header .section-sub-link:active {
3230   color: var(--newtab-primary-element-active-color);
3231 }
3232
3233 .ds-dismiss.ds-dismiss-ds-collection .ds-dismiss-button {
3234   margin: 15px 0 0;
3235   inset-inline-end: 25px;
3236 }
3237 .ds-dismiss.ds-dismiss-ds-collection.hovering {
3238   background: var(--newtab-element-hover-color);
3239 }
3240
3241 .ds-collection-card-grid {
3242   padding: 10px 25px 25px;
3243   margin: 0 0 20px;
3244 }
3245 .ds-collection-card-grid .story-footer {
3246   display: none;
3247 }
3248 .ds-collection-card-grid .ds-header {
3249   padding: 0 40px 0 0;
3250   margin-bottom: 12px;
3251 }
3252 .ds-collection-card-grid .ds-header .title {
3253   color: var(--newtab-text-primary-color);
3254   font-weight: 600;
3255   font-size: 17px;
3256   line-height: 24px;
3257 }
3258 .ds-collection-card-grid .ds-header .ds-context {
3259   color: var(--newtab-text-secondary-color);
3260   font-weight: normal;
3261   font-size: 13px;
3262   line-height: 24px;
3263 }
3264
3265 /* stylelint-disable max-nesting-depth */
3266 .ds-highlights .section .section-list {
3267   grid-gap: var(--gridRowGap);
3268   grid-template-columns: repeat(1, 1fr);
3269 }
3270 @media (min-width: 610px) {
3271   .ds-highlights .section .section-list {
3272     grid-template-columns: repeat(2, 1fr);
3273   }
3274 }
3275 @media (min-width: 866px) {
3276   .ds-highlights .section .section-list {
3277     grid-template-columns: repeat(4, 1fr);
3278   }
3279 }
3280 .ds-highlights .section .section-list .card-outer {
3281   height: 175px;
3282 }
3283 .ds-highlights .section .section-list .card-outer .card-host-name {
3284   font-size: 13px;
3285   line-height: 20px;
3286   margin-bottom: 2px;
3287   padding-bottom: 0;
3288   text-transform: unset;
3289 }
3290 .ds-highlights .section .section-list .card-outer .card-title {
3291   font-size: 14px;
3292   font-weight: 600;
3293   line-height: 20px;
3294   max-height: 20px;
3295 }
3296 .ds-highlights .section .section-list .card-outer a {
3297   text-decoration: none;
3298 }
3299 .ds-highlights .hide-for-narrow {
3300   display: block;
3301 }
3302
3303 .ds-hr {
3304   border: 0;
3305   border-top: 1px solid #D7D7DB;
3306   height: 0;
3307 }
3308 [lwt-newtab-brighttext] .ds-hr {
3309   border-top: 1px solid #4A4A4F;
3310 }
3311
3312 /* stylelint-disable max-nesting-depth */
3313 .ds-navigation {
3314   color: var(--newtab-text-primary-color);
3315   font-size: 11.5px;
3316   font-weight: 500;
3317   line-height: 22px;
3318   padding: 4px 0;
3319 }
3320 @media (min-width: 1122px) {
3321   .ds-navigation {
3322     line-height: 32px;
3323     font-size: 14px;
3324   }
3325 }
3326 .ds-navigation.ds-navigation-centered {
3327   text-align: center;
3328 }
3329 .ds-navigation.ds-navigation-right-aligned {
3330   text-align: end;
3331 }
3332 .ds-navigation ul {
3333   display: inline;
3334   margin: 0;
3335   padding: 0;
3336 }
3337 .ds-navigation ul li {
3338   display: inline-block;
3339 }
3340 .ds-navigation ul li::after {
3341   content: "·";
3342   padding: 6px;
3343 }
3344 .ds-navigation ul li:last-child::after {
3345   content: none;
3346 }
3347 .ds-navigation ul li a:hover, .ds-navigation ul li a:active {
3348   text-decoration: none;
3349 }
3350 .ds-navigation ul li a:active {
3351   color: var(--newtab-primary-element-active-color);
3352 }
3353 .ds-navigation .ds-navigation-header {
3354   padding-inline-end: 6px;
3355 }
3356 .ds-navigation .ds-navigation-privacy {
3357   padding-inline-start: 6px;
3358   float: inline-end;
3359 }
3360 .ds-navigation .ds-navigation-privacy:hover {
3361   text-decoration: none;
3362 }
3363 .ds-navigation.ds-navigation-new-topics {
3364   display: block;
3365   padding-top: 32px;
3366 }
3367 .ds-navigation.ds-navigation-new-topics .ds-navigation-header {
3368   font-size: 14px;
3369   line-height: 20px;
3370   font-weight: 700;
3371   display: inline-block;
3372   margin-bottom: 8px;
3373 }
3374 .ds-navigation.ds-navigation-new-topics .ds-navigation-family {
3375   text-align: center;
3376   font-size: 14px;
3377   line-height: 20px;
3378   margin: 16px auto 28px;
3379 }
3380 .ds-navigation.ds-navigation-new-topics .ds-navigation-family span {
3381   margin: 0 6px;
3382 }
3383 .ds-navigation.ds-navigation-new-topics .ds-navigation-family .firefox-logo,
3384 .ds-navigation.ds-navigation-new-topics .ds-navigation-family .pocket-logo {
3385   height: 20px;
3386   width: 20px;
3387   background-size: cover;
3388 }
3389 .ds-navigation.ds-navigation-new-topics .ds-navigation-family .firefox-logo {
3390   background-image: url("chrome://activity-stream/content/data/content/assets/firefox.svg");
3391 }
3392 .ds-navigation.ds-navigation-new-topics .ds-navigation-family .pocket-logo {
3393   background-image: url("chrome://global/skin/icons/pocket.svg");
3394   fill: #EF4056;
3395 }
3396 .ds-navigation.ds-navigation-new-topics .ds-navigation-family .ds-navigation-family-message {
3397   font-weight: 400;
3398   display: block;
3399 }
3400 @media (min-width: 610px) {
3401   .ds-navigation.ds-navigation-new-topics .ds-navigation-family .ds-navigation-family-message {
3402     display: inline;
3403   }
3404 }
3405 @media (min-width: 610px) {
3406   .ds-navigation.ds-navigation-new-topics .ds-navigation-family {
3407     margin-top: 43px;
3408   }
3409 }
3410 .ds-navigation.ds-navigation-new-topics ul {
3411   display: grid;
3412   grid-gap: 0 24px;
3413   grid-auto-flow: column;
3414   grid-template: repeat(8, 1fr)/repeat(1, 1fr);
3415 }
3416 .ds-navigation.ds-navigation-new-topics ul li {
3417   border-top: 1px solid var(--newtab-border-color);
3418   line-height: 24px;
3419   font-size: 13px;
3420   font-weight: 500;
3421 }
3422 .ds-navigation.ds-navigation-new-topics ul li::after {
3423   content: "";
3424   padding: 0;
3425 }
3426 .ds-navigation.ds-navigation-new-topics ul li:nth-last-child(2), .ds-navigation.ds-navigation-new-topics ul li:nth-last-child(3) {
3427   display: none;
3428 }
3429 .ds-navigation.ds-navigation-new-topics ul li:nth-last-child(1) {
3430   border-bottom: 1px solid var(--newtab-border-color);
3431 }
3432 @media (min-width: 610px) {
3433   .ds-navigation.ds-navigation-new-topics ul {
3434     grid-template: repeat(3, 1fr)/repeat(2, 1fr);
3435   }
3436   .ds-navigation.ds-navigation-new-topics ul li:nth-child(3) {
3437     border-bottom: 1px solid var(--newtab-border-color);
3438   }
3439 }
3440 @media (min-width: 866px) {
3441   .ds-navigation.ds-navigation-new-topics ul {
3442     grid-template: repeat(2, 1fr)/repeat(3, 1fr);
3443   }
3444   .ds-navigation.ds-navigation-new-topics ul li:nth-child(odd) {
3445     border-bottom: 0;
3446   }
3447   .ds-navigation.ds-navigation-new-topics ul li:nth-child(even) {
3448     border-bottom: 1px solid var(--newtab-border-color);
3449   }
3450 }
3451 @media (min-width: 1122px) {
3452   .ds-navigation.ds-navigation-new-topics ul {
3453     grid-template: repeat(2, 1fr)/repeat(4, 1fr);
3454   }
3455   .ds-navigation.ds-navigation-new-topics ul li:nth-last-child(2), .ds-navigation.ds-navigation-new-topics ul li:nth-last-child(3) {
3456     display: block;
3457   }
3458 }
3459
3460 .ds-section-title {
3461   text-align: center;
3462   margin-top: 24px;
3463 }
3464 .ds-section-title .title {
3465   color: var(--newtab-text-primary-color);
3466   line-height: 48px;
3467   font-size: 36px;
3468   font-weight: 300;
3469 }
3470 .ds-section-title .subtitle {
3471   line-height: 24px;
3472   font-size: 14px;
3473   color: var(--newtab-text-secondary-color);
3474   margin-top: 4px;
3475 }
3476
3477 /* stylelint-disable max-nesting-depth */
3478 .outer-wrapper .ds-top-sites .top-sites .top-site-outer .top-site-inner > a:is(.active, :focus) .tile {
3479   border: 0;
3480   outline: 0;
3481   box-shadow: 0 0 0 3px var(--newtab-primary-action-background-dimmed), 0 0 0 1px var(--newtab-primary-action-background);
3482 }
3483 .outer-wrapper .ds-top-sites .top-sites .top-site-outer .top-site-inner > a:is(:hover) .top-site-inner {
3484   box-shadow: 0 0 0 5px var(--newtab-background-color-secondary);
3485   transition: box-shadow 150ms;
3486   border-radius: 4px;
3487   outline: none;
3488 }
3489 .outer-wrapper .ds-top-sites .top-sites .top-sites-list {
3490   margin: 0 -12px;
3491 }
3492
3493 .ds-column-5 .ds-top-sites .top-site-outer,
3494 .ds-column-6 .ds-top-sites .top-site-outer,
3495 .ds-column-7 .ds-top-sites .top-site-outer,
3496 .ds-column-8 .ds-top-sites .top-site-outer {
3497   padding: 0 10px;
3498 }
3499 .ds-column-5 .ds-top-sites .top-sites-list,
3500 .ds-column-6 .ds-top-sites .top-sites-list,
3501 .ds-column-7 .ds-top-sites .top-sites-list,
3502 .ds-column-8 .ds-top-sites .top-sites-list {
3503   margin: 0 -10px;
3504 }
3505 .ds-column-5 .ds-top-sites .top-site-inner,
3506 .ds-column-6 .ds-top-sites .top-site-inner,
3507 .ds-column-7 .ds-top-sites .top-site-inner,
3508 .ds-column-8 .ds-top-sites .top-site-inner {
3509   --leftPanelIconWidth: 84.67px;
3510 }
3511 .ds-column-5 .ds-top-sites .top-site-inner .tile,
3512 .ds-column-6 .ds-top-sites .top-site-inner .tile,
3513 .ds-column-7 .ds-top-sites .top-site-inner .tile,
3514 .ds-column-8 .ds-top-sites .top-site-inner .tile {
3515   width: var(--leftPanelIconWidth);
3516   height: var(--leftPanelIconWidth);
3517 }
3518 .ds-column-5 .ds-top-sites .top-site-inner .title,
3519 .ds-column-6 .ds-top-sites .top-site-inner .title,
3520 .ds-column-7 .ds-top-sites .top-site-inner .title,
3521 .ds-column-8 .ds-top-sites .top-site-inner .title {
3522   width: var(--leftPanelIconWidth);
3523 }
3524
3525 .ds-column-1 .ds-top-sites .top-site-outer,
3526 .ds-column-2 .ds-top-sites .top-site-outer,
3527 .ds-column-3 .ds-top-sites .top-site-outer,
3528 .ds-column-4 .ds-top-sites .top-site-outer {
3529   padding: 0 8px;
3530 }
3531 .ds-column-1 .ds-top-sites .top-sites-list,
3532 .ds-column-2 .ds-top-sites .top-sites-list,
3533 .ds-column-3 .ds-top-sites .top-sites-list,
3534 .ds-column-4 .ds-top-sites .top-sites-list {
3535   margin: 0 -8px;
3536 }
3537 .ds-column-1 .ds-top-sites .top-site-inner,
3538 .ds-column-2 .ds-top-sites .top-site-inner,
3539 .ds-column-3 .ds-top-sites .top-site-inner,
3540 .ds-column-4 .ds-top-sites .top-site-inner {
3541   --rightPanelIconWidth: 82.67px;
3542 }
3543 .ds-column-1 .ds-top-sites .top-site-inner .tile,
3544 .ds-column-2 .ds-top-sites .top-site-inner .tile,
3545 .ds-column-3 .ds-top-sites .top-site-inner .tile,
3546 .ds-column-4 .ds-top-sites .top-site-inner .tile {
3547   width: var(--rightPanelIconWidth);
3548   height: var(--rightPanelIconWidth);
3549 }
3550 .ds-column-1 .ds-top-sites .top-site-inner .title,
3551 .ds-column-2 .ds-top-sites .top-site-inner .title,
3552 .ds-column-3 .ds-top-sites .top-site-inner .title,
3553 .ds-column-4 .ds-top-sites .top-site-inner .title {
3554   width: var(--rightPanelIconWidth);
3555 }
3556
3557 .ds-card .context-menu-button,
3558 .ds-signup .context-menu-button {
3559   background-clip: padding-box;
3560   background-color: var(--newtab-background-color-secondary);
3561   background-image: url("chrome://global/skin/icons/more.svg");
3562   background-position: 55%;
3563   border: 1px solid var(--newtab-border-color);
3564   border-radius: 100%;
3565   box-shadow: 0 2px rgba(12, 12, 13, 0.1);
3566   cursor: pointer;
3567   fill: var(--newtab-text-primary-color);
3568   height: 27px;
3569   inset-inline-end: -13.5px;
3570   opacity: 0;
3571   position: absolute;
3572   top: -13.5px;
3573   transform: scale(0.25);
3574   transition-duration: 150ms;
3575   transition-property: transform, opacity;
3576   width: 27px;
3577 }
3578 .ds-card .context-menu-button:is(:active, :focus),
3579 .ds-signup .context-menu-button:is(:active, :focus) {
3580   opacity: 1;
3581   transform: scale(1);
3582 }
3583 .ds-card .context-menu,
3584 .ds-signup .context-menu {
3585   opacity: 0;
3586 }
3587 .ds-card.active .context-menu,
3588 .ds-signup.active .context-menu {
3589   opacity: 1;
3590 }
3591 .ds-card.last-item .context-menu,
3592 .ds-signup.last-item .context-menu {
3593   margin-inline-end: 5px;
3594   margin-inline-start: auto;
3595   inset-inline-end: 0;
3596   inset-inline-start: auto;
3597 }
3598 .ds-card.last-item .context-menu,
3599 .ds-signup.last-item .context-menu {
3600   opacity: 1;
3601 }
3602 .ds-card:is(:hover, :focus, .active),
3603 .ds-signup:is(:hover, :focus, .active) {
3604   outline: none;
3605 }
3606 .ds-card:is(:hover, :focus, .active) .context-menu-button,
3607 .ds-signup:is(:hover, :focus, .active) .context-menu-button {
3608   opacity: 1;
3609   transform: scale(1);
3610   transition-delay: 333ms;
3611 }
3612
3613 .ds-card {
3614   display: flex;
3615   flex-direction: column;
3616   position: relative;
3617 }
3618 .ds-card.placeholder {
3619   background: transparent;
3620   box-shadow: inset 0 0 0 1px var(--newtab-inner-box-shadow-color);
3621   border-radius: 4px;
3622   min-height: 300px;
3623 }
3624 .ds-card .img-wrapper {
3625   width: 100%;
3626   position: relative;
3627 }
3628 .ds-card .card-stp-button-hover-background {
3629   opacity: 0;
3630   width: 100%;
3631   position: absolute;
3632   top: 0;
3633   height: 0;
3634   transition: opacity;
3635   transition-duration: 0s;
3636   padding-top: 50%;
3637   pointer-events: none;
3638   background: rgba(0, 0, 0, 0.4);
3639   border-radius: 8px 8px 0 0;
3640 }
3641 .ds-card .card-stp-button-hover-background .card-stp-button-position-wrapper {
3642   position: absolute;
3643   inset-inline-end: 10px;
3644   top: 10px;
3645   display: flex;
3646   justify-content: end;
3647   align-items: center;
3648 }
3649 .ds-card .card-stp-button-hover-background .icon-pocket-save,
3650 .ds-card .card-stp-button-hover-background .icon-pocket {
3651   margin-inline-end: 4px;
3652   height: 15px;
3653   width: 15px;
3654   background-size: 15px;
3655   fill: #FFF;
3656 }
3657 .ds-card .card-stp-button-hover-background .context-menu-button {
3658   position: static;
3659   transition: none;
3660   border-radius: 3px;
3661 }
3662 .ds-card .card-stp-button-hover-background .context-menu-position-container {
3663   position: relative;
3664 }
3665 .ds-card .card-stp-button-hover-background .context-menu {
3666   margin-inline-start: 18.5px;
3667   inset-inline-start: auto;
3668   position: absolute;
3669   top: 20.25px;
3670 }
3671 .ds-card .card-stp-button-hover-background .card-stp-button {
3672   display: flex;
3673   margin-inline-end: 7px;
3674   font-weight: 400;
3675   font-size: 13px;
3676   line-height: 16px;
3677   background-color: #EF4056;
3678   border: 0;
3679   border-radius: 4px;
3680   padding: 6px;
3681   white-space: nowrap;
3682   color: #FFF;
3683 }
3684 .ds-card .card-stp-button-hover-background button,
3685 .ds-card .card-stp-button-hover-background .context-menu {
3686   pointer-events: auto;
3687 }
3688 .ds-card .card-stp-button-hover-background button {
3689   cursor: pointer;
3690 }
3691 .ds-card.last-item .card-stp-button-hover-background .context-menu {
3692   margin-inline-start: auto;
3693   margin-inline-end: 18.5px;
3694 }
3695 .ds-card.active .card-stp-button-hover-background, .ds-card:focus-within .card-stp-button-hover-background, .ds-card:hover .card-stp-button-hover-background {
3696   display: block;
3697   opacity: 1;
3698   transition-duration: 0.3s;
3699 }
3700 .ds-card.active .card-stp-button-hover-background .context-menu-button, .ds-card:focus-within .card-stp-button-hover-background .context-menu-button, .ds-card:hover .card-stp-button-hover-background .context-menu-button {
3701   opacity: 1;
3702   transform: scale(1);
3703 }
3704 .ds-card.active header, .ds-card:focus-within header, .ds-card:hover header {
3705   color: var(--newtab-primary-action-background);
3706 }
3707 .ds-card:active header {
3708   color: var(--newtab-primary-element-active-color);
3709 }
3710 .ds-card .img {
3711   height: 0;
3712   padding-top: 50%;
3713 }
3714 .ds-card .img img {
3715   border-radius: 4px;
3716   box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.15);
3717 }
3718 .ds-card .ds-card-link {
3719   position: absolute;
3720   height: 100%;
3721   width: 100%;
3722   text-decoration: none;
3723 }
3724 .ds-card .ds-card-link:focus {
3725   border: 0;
3726   outline: 0;
3727   box-shadow: 0 0 0 3px var(--newtab-primary-action-background-dimmed), 0 0 0 1px var(--newtab-primary-action-background);
3728   transition: none;
3729 }
3730 .ds-card .meta {
3731   display: flex;
3732   flex-direction: column;
3733   padding: 12px 16px;
3734   flex-grow: 1;
3735 }
3736 .ds-card .meta .info-wrap {
3737   flex-grow: 1;
3738 }
3739 .ds-card .meta .title {
3740   font-size: 17px;
3741   -webkit-line-clamp: 3;
3742   line-height: 24px;
3743   font-weight: 600;
3744 }
3745 .ds-card .meta .excerpt {
3746   font-size: 14px;
3747   -webkit-line-clamp: 3;
3748   line-height: 20px;
3749 }
3750 .ds-card .meta .source {
3751   -webkit-line-clamp: 1;
3752   margin-bottom: 2px;
3753   font-size: 13px;
3754   color: var(--newtab-text-secondary-color);
3755 }
3756 .ds-card .meta .source span {
3757   display: inline-block;
3758 }
3759 .ds-card .meta .new-sponsored-label {
3760   font-size: 13px;
3761   margin-bottom: 2px;
3762 }
3763 .ds-card.ds-card-title-lines-2 .meta .title {
3764   font-size: 17px;
3765   -webkit-line-clamp: 2;
3766   line-height: 24px;
3767 }
3768 .ds-card.ds-card-title-lines-1 .meta .title {
3769   font-size: 17px;
3770   -webkit-line-clamp: 1;
3771   line-height: 24px;
3772 }
3773 .ds-card.ds-card-desc-lines-2 .meta .excerpt {
3774   font-size: 14px;
3775   -webkit-line-clamp: 2;
3776   line-height: 20px;
3777 }
3778 .ds-card.ds-card-desc-lines-1 .meta .excerpt {
3779   font-size: 14px;
3780   -webkit-line-clamp: 1;
3781   line-height: 20px;
3782 }
3783 .ds-card.ds-card-compact-image .img {
3784   padding-top: 47%;
3785 }
3786 .ds-card.ds-card-image-gradient img {
3787   mask-image: linear-gradient(to top, rgba(0, 0, 0, 0), black 40px);
3788 }
3789 .ds-card.ds-card-image-gradient .meta {
3790   padding: 3px 15px 11px;
3791 }
3792 .ds-card.ds-card-cta-button.variant-a .img, .ds-card.ds-card-cta-button.variant-b .img {
3793   padding-top: 52.4%;
3794 }
3795 .ds-card.ds-card-cta-button.variant-a .story-sponsored-label, .ds-card.ds-card-cta-button.variant-b .story-sponsored-label {
3796   margin: var(--space-small) 0 0;
3797 }
3798 .ds-card.ds-card-cta-button.variant-a .source, .ds-card.ds-card-cta-button.variant-b .source {
3799   text-decoration: underline;
3800 }
3801 .ds-card.ds-card-cta-button.variant-a .story-footer, .ds-card.ds-card-cta-button.variant-b .story-footer {
3802   display: flex;
3803   flex-wrap: wrap;
3804   justify-content: space-between;
3805   align-items: center;
3806   gap: 0 var(--space-small);
3807   margin-top: 0;
3808 }
3809 .ds-card.ds-card-cta-button.variant-a .story-cta-button, .ds-card.ds-card-cta-button.variant-b .story-cta-button {
3810   cursor: inherit;
3811   background: var(--button-background-color);
3812   border-radius: var(--border-radius-small);
3813   border: none;
3814   padding: var(--space-xsmall) 16px;
3815   font-size: var(--font-size-small);
3816   font-weight: var(--font-weight-bold);
3817   min-height: var(--size-item-large);
3818   min-width: 97px;
3819   color: var(--newtab-text-primary-color);
3820   margin-top: var(--space-small);
3821 }
3822 .ds-card.ds-card-cta-button.variant-a .story-cta-button:hover, .ds-card.ds-card-cta-button.variant-b .story-cta-button:hover {
3823   background: var(--button-background-color-hover);
3824 }
3825 .ds-card.ds-card-cta-button.variant-a .cta-header, .ds-card.ds-card-cta-button.variant-b .cta-header {
3826   background: var(--button-background-color);
3827   font-size: var(--font-size-root);
3828   font-weight: var(--font-weight-bold);
3829   text-align: end;
3830   padding: var(--space-xsmall) 16px;
3831   color: var(--newtab-text-primary-color);
3832   min-height: var(--size-item-large);
3833 }
3834 .ds-card header {
3835   line-height: 24px;
3836   font-size: 17px;
3837   color: var(--newtab-text-primary-color);
3838 }
3839 .ds-card p {
3840   font-size: 14px;
3841   line-height: 20px;
3842   color: var(--newtab-text-primary-color);
3843   margin: 0;
3844 }
3845
3846 .story-footer {
3847   color: var(--newtab-text-secondary-color);
3848   inset-inline-start: 0;
3849   margin-top: 12px;
3850   display: flex;
3851   gap: var(--space-large);
3852   position: relative;
3853   pointer-events: none;
3854 }
3855 .story-footer .story-sponsored-label span {
3856   display: inline-block;
3857 }
3858 .story-footer .story-sponsored-label,
3859 .story-footer .status-message {
3860   -webkit-line-clamp: 1;
3861   font-size: 13px;
3862   line-height: 24px;
3863   color: var(--newtab-text-secondary-color);
3864 }
3865 .story-footer .status-message {
3866   display: flex;
3867   align-items: center;
3868   height: 24px;
3869 }
3870 .story-footer .status-message .story-badge-icon {
3871   fill: var(--newtab-text-secondary-color);
3872   height: 16px;
3873   margin-inline-end: 6px;
3874 }
3875 .story-footer .status-message .story-badge-icon.icon-bookmark-removed {
3876   background-image: url("chrome://activity-stream/content/data/content/assets/icon-removed-bookmark.svg");
3877 }
3878 .story-footer .status-message .story-context-label {
3879   color: var(--newtab-text-secondary-color);
3880   flex-grow: 1;
3881   font-size: 13px;
3882   line-height: 24px;
3883   overflow: hidden;
3884   text-overflow: ellipsis;
3885   white-space: nowrap;
3886 }
3887
3888 .story-animate-enter {
3889   opacity: 0;
3890 }
3891
3892 .story-animate-enter-active {
3893   opacity: 1;
3894   transition: opacity 150ms ease-in 300ms;
3895 }
3896 .story-animate-enter-active .story-badge-icon,
3897 .story-animate-enter-active .story-context-label {
3898   animation: color 3s ease-out 0.3s;
3899 }
3900 @keyframes color {
3901   0% {
3902     color: var(--newtab-status-success);
3903     fill: var(--newtab-status-success);
3904   }
3905   100% {
3906     color: var(--newtab-text-secondary-color);
3907     fill: var(--newtab-text-secondary-color);
3908   }
3909 }
3910
3911 .story-animate-exit {
3912   position: absolute;
3913   top: 0;
3914   opacity: 1;
3915 }
3916
3917 .story-animate-exit-active {
3918   opacity: 0;
3919   transition: opacity 250ms ease-in;
3920 }
3921
3922 .ds-image {
3923   display: block;
3924   position: relative;
3925   opacity: 0;
3926 }
3927 .ds-image.use-transition {
3928   transition: opacity 0.8s;
3929 }
3930 .ds-image.loaded {
3931   opacity: 1;
3932 }
3933 .ds-image img,
3934 .ds-image .placeholder-image,
3935 .ds-image .broken-image {
3936   background-color: var(--newtab-element-secondary-color);
3937   position: absolute;
3938   top: 0;
3939   width: 100%;
3940   height: 100%;
3941   object-fit: cover;
3942 }
3943 .ds-image .placeholder-image {
3944   overflow: hidden;
3945   background-color: var(--placeholderBackgroundColor);
3946 }
3947 .ds-image .placeholder-image::before {
3948   content: "";
3949   background-image: url("chrome://activity-stream/content/data/content/assets/pocket-swoosh.svg");
3950   background-repeat: no-repeat;
3951   background-position: center;
3952   transform: rotate(var(--placeholderBackgroundRotation));
3953   position: absolute;
3954   top: -50%;
3955   left: -50%;
3956   width: 200%;
3957   height: 200%;
3958   margin-left: var(--placeholderBackgroundOffsetx);
3959   margin-top: var(--placeholderBackgroundOffsety);
3960   background-size: var(--placeholderBackgroundScale);
3961 }
3962
3963 .ds-dismiss {
3964   position: relative;
3965   border-radius: 8px;
3966   transition-duration: 250ms;
3967   transition-property: background;
3968 }
3969 .ds-dismiss:hover .ds-dismiss-button {
3970   opacity: 1;
3971 }
3972 .ds-dismiss .ds-dismiss-button {
3973   border: 0;
3974   cursor: pointer;
3975   height: 32px;
3976   width: 32px;
3977   padding: 0;
3978   display: flex;
3979   align-items: center;
3980   justify-content: center;
3981   position: absolute;
3982   inset-inline-end: 0;
3983   top: 0;
3984   border-radius: 50%;
3985   background-color: transparent;
3986 }
3987 .ds-dismiss .ds-dismiss-button .icon {
3988   fill: var(--newtab-text-primary-color);
3989 }
3990 @media (forced-colors: active) {
3991   .ds-dismiss .ds-dismiss-button .icon {
3992     fill: CurrentColor;
3993   }
3994 }
3995 .ds-dismiss .ds-dismiss-button:hover {
3996   background: var(--newtab-element-hover-color);
3997 }
3998 .ds-dismiss .ds-dismiss-button:active {
3999   background: var(--newtab-element-active-color);
4000 }
4001 .ds-dismiss .ds-dismiss-button:focus {
4002   box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2);
4003 }
4004
4005 .ds-message {
4006   margin: 8px 0 0;
4007 }
4008 .ds-message .title {
4009   display: flex;
4010   align-items: center;
4011 }
4012 .ds-message .title .glyph {
4013   width: 16px;
4014   height: 16px;
4015   margin: 0 6px 0 0;
4016   -moz-context-properties: fill;
4017   fill: var(--newtab-text-secondary-color);
4018   background-position: center center;
4019   background-size: 16px;
4020   background-repeat: no-repeat;
4021 }
4022 .ds-message .title .title-text {
4023   line-height: 20px;
4024   font-size: 13px;
4025   color: var(--newtab-text-secondary-color);
4026   font-weight: 600;
4027   padding-right: 12px;
4028 }
4029 .ds-message .title .link {
4030   line-height: 20px;
4031   font-size: 13px;
4032 }
4033 .ds-message .title .link:hover, .ds-message .title .link:focus {
4034   text-decoration: underline;
4035 }
4036
4037 .impression-observer {
4038   position: absolute;
4039   top: 0;
4040   width: 100%;
4041   height: 100%;
4042   pointer-events: none;
4043 }
4044
4045 .section-empty-state {
4046   border: 1px solid var(--newtab-border-color);
4047   border-radius: 4px;
4048   display: flex;
4049   height: 160px;
4050   width: 100%;
4051 }
4052 .section-empty-state .empty-state-message {
4053   color: var(--newtab-text-secondary-color);
4054   font-size: 14px;
4055   line-height: 20px;
4056   text-align: center;
4057   margin: auto;
4058   max-width: 936px;
4059 }
4060 .section-empty-state .try-again-button {
4061   margin-top: 12px;
4062   padding: 6px 32px;
4063   border-radius: 2px;
4064   border: 0;
4065   background: var(--newtab-button-secondary-color);
4066   color: var(--newtab-text-primary-color);
4067   cursor: pointer;
4068   position: relative;
4069   transition: background 0.2s ease, color 0.2s ease;
4070 }
4071 .section-empty-state .try-again-button:not(.waiting):focus {
4072   box-shadow: 0 0 0 5px rgba(10, 132, 255, 0.3);
4073   transition: box-shadow 150ms;
4074   border-radius: 4px;
4075   outline: none;
4076 }
4077 [lwt-newtab-brighttext] .section-empty-state .try-again-button:not(.waiting):focus {
4078   box-shadow: 0 0 0 5px rgba(69, 161, 255, 0.4);
4079   transition: box-shadow 150ms;
4080   border-radius: 4px;
4081   outline: none;
4082 }
4083 .section-empty-state .try-again-button:not(.waiting):hover {
4084   box-shadow: 0 0 0 5px var(--newtab-element-secondary-color);
4085   transition: box-shadow 150ms;
4086   border-radius: 4px;
4087   outline: none;
4088 }
4089 .section-empty-state .try-again-button::after {
4090   content: "";
4091   height: 20px;
4092   width: 20px;
4093   animation: spinner 1s linear infinite;
4094   opacity: 0;
4095   position: absolute;
4096   top: 50%;
4097   left: 50%;
4098   margin: -10px 0 0 -10px;
4099   mask-image: url("chrome://activity-stream/content/data/content/assets/spinner.svg");
4100   mask-size: 20px;
4101   background: var(--newtab-text-secondary-color);
4102 }
4103 .section-empty-state .try-again-button.waiting {
4104   cursor: initial;
4105   background: var(--newtab-element-secondary-color);
4106   color: transparent;
4107   transition: background 0.2s ease;
4108 }
4109 .section-empty-state .try-again-button.waiting::after {
4110   transition: opacity 0.2s ease;
4111   opacity: 1;
4112 }
4113 .section-empty-state h2 {
4114   font-size: 15px;
4115   font-weight: 600;
4116   margin: 0;
4117 }
4118 .section-empty-state p {
4119   margin: 0;
4120 }
4121
4122 @keyframes spinner {
4123   to {
4124     transform: rotate(360deg);
4125   }
4126 }
4127 .ds-dismiss-ds-text-promo {
4128   max-width: 744px;
4129   margin: auto;
4130   overflow: hidden;
4131 }
4132 .ds-dismiss-ds-text-promo.hovering {
4133   background: var(--newtab-element-hover-color);
4134 }
4135 .ds-dismiss-ds-text-promo .ds-dismiss-button {
4136   margin-inline: 0 18px;
4137   margin-block: 18px 0;
4138 }
4139
4140 .ds-text-promo {
4141   max-width: 640px;
4142   margin: 0;
4143   padding: 18px;
4144 }
4145 @media (min-width: 610px) {
4146   .ds-text-promo {
4147     display: flex;
4148     margin: 18px 24px;
4149     padding: 0 32px 0 0;
4150   }
4151 }
4152 .ds-text-promo .ds-image {
4153   width: 40px;
4154   height: 40px;
4155   flex-shrink: 0;
4156   margin: 0 0 18px;
4157 }
4158 @media (min-width: 610px) {
4159   .ds-text-promo .ds-image {
4160     margin: 4px 12px 0 0;
4161   }
4162 }
4163 .ds-text-promo .ds-image img {
4164   border-radius: 4px;
4165 }
4166 .ds-text-promo .text {
4167   line-height: 24px;
4168 }
4169 .ds-text-promo h3 {
4170   color: var(--newtab-text-primary-color);
4171   margin: 0;
4172   font-weight: 600;
4173   font-size: 15px;
4174 }
4175 .ds-text-promo .subtitle {
4176   font-size: 13px;
4177   margin: 0;
4178   color: var(--newtab-text-primary-color);
4179 }
4180
4181 .ds-chevron-link {
4182   color: var(--newtab-primary-action-background);
4183   display: inline-block;
4184   outline: 0;
4185 }
4186 .ds-chevron-link:hover {
4187   text-decoration: underline;
4188 }
4189 .ds-chevron-link:active {
4190   color: var(--newtab-primary-element-active-color);
4191 }
4192 .ds-chevron-link:active::after {
4193   background-color: var(--newtab-primary-element-active-color);
4194 }
4195 .ds-chevron-link:focus {
4196   box-shadow: 0 1px 4px 0 rgba(12, 12, 13, 0.2);
4197   border-radius: 2px;
4198 }
4199 .ds-chevron-link::after {
4200   background-color: var(--newtab-primary-action-background);
4201   content: " ";
4202   mask: url("chrome://global/skin/icons/arrow-right-12.svg") 0 -8px no-repeat;
4203   margin: 0 0 0 4px;
4204   width: 5px;
4205   height: 8px;
4206   text-decoration: none;
4207   display: inline-block;
4208 }
4209
4210 .ds-signup {
4211   max-width: 300px;
4212   margin: 0 auto;
4213   padding: 8px;
4214   position: relative;
4215   text-align: center;
4216   font-size: 17px;
4217   font-weight: 600;
4218 }
4219 .ds-signup:hover {
4220   background: var(--newtab-element-hover-color);
4221   border-radius: 4px;
4222 }
4223 .ds-signup .icon-mail {
4224   height: 40px;
4225   width: 40px;
4226   margin-inline-end: 8px;
4227   fill: var(--newtab-text-secondary-color);
4228   background-size: 30px;
4229   flex-shrink: 0;
4230 }
4231 .ds-signup .ds-signup-content {
4232   display: flex;
4233   align-items: center;
4234   justify-content: center;
4235   flex-direction: column;
4236 }
4237 .ds-signup .ds-signup-content .ds-chevron-link {
4238   margin-top: 4px;
4239   box-shadow: none;
4240   display: block;
4241   white-space: nowrap;
4242 }
4243 @media (min-width: 866px) {
4244   .ds-signup {
4245     min-width: 756px;
4246     width: max-content;
4247     text-align: start;
4248   }
4249   .ds-signup .ds-signup-content {
4250     flex-direction: row;
4251   }
4252   .ds-signup .ds-signup-content .ds-chevron-link {
4253     margin-top: 0;
4254     display: inline;
4255   }
4256 }
4257
4258 .ds-privacy-modal .modal-link {
4259   display: flex;
4260   align-items: center;
4261   margin: 0 0 8px;
4262   border: 0;
4263   padding: 0;
4264   color: var(--newtab-primary-action-background);
4265   width: max-content;
4266 }
4267 .ds-privacy-modal .modal-link:hover {
4268   text-decoration: underline;
4269   cursor: pointer;
4270 }
4271 .ds-privacy-modal .modal-link::before {
4272   -moz-context-properties: fill;
4273   fill: var(--newtab-primary-action-background);
4274   content: "";
4275   display: inline-block;
4276   width: 16px;
4277   height: 16px;
4278   margin: 0;
4279   margin-inline-end: 8px;
4280   background-position: center center;
4281   background-repeat: no-repeat;
4282   background-size: 16px;
4283 }
4284 .ds-privacy-modal .modal-link.modal-link-privacy::before {
4285   background-image: url("chrome://global/skin/icons/info.svg");
4286 }
4287 .ds-privacy-modal .modal-link.modal-link-manage::before {
4288   background-image: url("chrome://global/skin/icons/settings.svg");
4289 }
4290 .ds-privacy-modal p {
4291   line-height: 24px;
4292 }
4293 .ds-privacy-modal .privacy-notice {
4294   max-width: 572px;
4295   padding: 40px;
4296   margin: auto;
4297 }
4298
4299 .ds-privacy-link {
4300   text-align: center;
4301   font-size: 13px;
4302   font-weight: 500;
4303   line-height: 24px;
4304 }
4305 .ds-privacy-link a:hover {
4306   text-decoration: none;
4307 }
4308
4309 /* stylelint-disable max-nesting-depth */
4310 .ds-topics-widget {
4311   display: flex;
4312   position: relative;
4313   flex-direction: column;
4314 }
4315 .ds-topics-widget .ds-topics-widget-header {
4316   font-size: 18px;
4317   line-height: 20px;
4318 }
4319 .ds-topics-widget hr {
4320   background-color: color-mix(in srgb, var(--newtab-border-color) 52%, transparent);
4321   height: 1px;
4322   border: 0;
4323   margin: 10px 0 0;
4324 }
4325 .ds-topics-widget .ds-topics-widget-list-container {
4326   flex-grow: 1;
4327 }
4328 .ds-topics-widget .ds-topics-widget-list-container ul {
4329   margin: 14px 0 0;
4330   padding: 0;
4331   display: flex;
4332   align-items: center;
4333   grid-gap: 10px;
4334   flex-wrap: wrap;
4335 }
4336 .ds-topics-widget .ds-topics-widget-list-container ul li {
4337   display: flex;
4338 }
4339 .ds-topics-widget .ds-topics-widget-list-container ul li a {
4340   font-size: 14px;
4341   line-height: 16px;
4342   text-decoration: none;
4343   padding: 8px 15px;
4344   background: var(--newtab-background-color-secondary);
4345   border: 1px solid color-mix(in srgb, var(--newtab-border-color) 52%, transparent);
4346   color: var(--newtab-text-primary-color);
4347   border-radius: 8px;
4348 }
4349 .ds-topics-widget .ds-topics-widget-list-container ul li a:hover {
4350   background: var(--newtab-element-hover-color);
4351 }
4352 .ds-topics-widget .ds-topics-widget-list-container ul li a:focus {
4353   outline: 0;
4354   box-shadow: 0 0 0 3px var(--newtab-primary-action-background-dimmed), 0 0 0 1px var(--newtab-primary-action-background);
4355   transition: box-shadow 150ms;
4356 }
4357 .ds-topics-widget .ds-topics-widget-list-container ul .ds-topics-widget-list-overflow-item {
4358   display: flex;
4359 }
4360 @media (min-width: 610px) {
4361   .ds-topics-widget .ds-topics-widget-list-container ul .ds-topics-widget-list-overflow-item {
4362     display: none;
4363   }
4364 }
4365 @media (min-width: 1122px) {
4366   .ds-topics-widget .ds-topics-widget-list-container ul .ds-topics-widget-list-overflow-item {
4367     display: flex;
4368   }
4369 }
4370 .ds-topics-widget .ds-topics-widget-button {
4371   margin: 14px 0 0;
4372   font-size: 16px;
4373   line-height: 24px;
4374   text-align: center;
4375   padding: 8px;
4376   border-radius: 4px;
4377   background-color: var(--newtab-primary-action-background-pocket);
4378   border: 0;
4379 }
4380 .ds-topics-widget .ds-topics-widget-button:hover {
4381   background: var(--newtab-primary-element-hover-pocket-color);
4382 }
4383 .ds-topics-widget .ds-topics-widget-button:focus {
4384   outline: 0;
4385   box-shadow: 0 0 0 3px var(--newtab-primary-action-background-pocket-dimmed), 0 0 0 1px var(--newtab-primary-action-background-pocket);
4386   transition: box-shadow 150ms;
4387 }
4388
4389 .feature-highlight {
4390   position: relative;
4391   pointer-events: auto;
4392   z-index: 1;
4393 }
4394 .feature-highlight .feature-highlight-modal {
4395   position: absolute;
4396   display: flex;
4397   opacity: 0;
4398   visibility: hidden;
4399   cursor: default;
4400   justify-content: space-between;
4401   border-radius: var(--border-radius-small);
4402   background: var(--newtab-background-color-secondary);
4403   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
4404   width: 298px;
4405   transition: opacity 0.3s, visibility 0.3s;
4406 }
4407 .feature-highlight .feature-highlight-modal .icon-dismiss {
4408   flex-shrink: 0;
4409   cursor: pointer;
4410   background-size: 12px;
4411   height: 12px;
4412   width: 12px;
4413   margin: var(--space-medium);
4414   color: var(--icon-color);
4415   border: none;
4416 }
4417 .feature-highlight .feature-highlight-modal .message-icon {
4418   margin-block: var(--space-large);
4419   margin-inline: var(--space-large) var(--space-medium);
4420 }
4421 .feature-highlight .feature-highlight-modal.opened {
4422   opacity: 1;
4423   visibility: visible;
4424 }
4425 .feature-highlight .feature-highlight-modal::after {
4426   content: "";
4427   position: absolute;
4428   height: 24px;
4429   width: 24px;
4430   background: var(--newtab-background-color-secondary);
4431   box-shadow: 4px 4px 6px -2px rgba(0, 0, 0, 0.15);
4432 }
4433 .feature-highlight .feature-highlight-modal.inset-block-start {
4434   inset-block-end: 100%;
4435   margin-bottom: var(--space-xlarge);
4436 }
4437 .feature-highlight .feature-highlight-modal.inset-block-start::after {
4438   inset-block-end: -12px;
4439   transform: rotate(45deg);
4440 }
4441 .feature-highlight .feature-highlight-modal.inset-block-end {
4442   inset-block-start: 100%;
4443   margin-top: var(--space-xlarge);
4444 }
4445 .feature-highlight .feature-highlight-modal.inset-block-end::after {
4446   inset-block-start: -12px;
4447   transform: rotate(225deg);
4448 }
4449 .feature-highlight .feature-highlight-modal.inset-inline-start {
4450   inset-inline-end: calc(var(--space-xxlarge) * -1);
4451 }
4452 .feature-highlight .feature-highlight-modal.inset-inline-start::after {
4453   inset-inline-end: calc(var(--space-xxlarge) - 12px);
4454 }
4455 .feature-highlight .feature-highlight-modal.inset-inline-end {
4456   inset-inline-start: calc(var(--space-xxlarge) * -1);
4457 }
4458 .feature-highlight .feature-highlight-modal.inset-inline-end::after {
4459   inset-inline-start: calc(var(--space-xxlarge) - 12px);
4460 }
4461 .feature-highlight .feature-highlight-modal p {
4462   font-size: var(--font-size-small);
4463   font-weight: normal;
4464   margin: var(--space-large) 0;
4465 }
4466 .feature-highlight .toggle-button {
4467   border: none;
4468   padding: 0;
4469 }
4470
4471 .sponsored-content-highlight {
4472   float: inline-end;
4473 }
4474 .sponsored-content-highlight .sponsored-message-icon {
4475   background-image: url("chrome://activity-stream/content/data/content/assets/sponsor-message-icon.svg");
4476   background-size: 18px;
4477   height: 18px;
4478   width: 18px;
4479 }
4480 .sponsored-content-highlight .icon-help {
4481   cursor: pointer;
4482   height: 20px;
4483   width: 20px;
4484   background-size: 20px;
4485   color: var(--icon-color);
4486   vertical-align: text-bottom;
4487 }
4488 .sponsored-content-highlight .feature-highlight-modal.inset-inline-start::after {
4489   margin-inline-end: 11px;
4490 }
4491 .sponsored-content-highlight .feature-highlight-modal.inset-inline-end::after {
4492   margin-inline-start: 9px;
4493 }
4494
4495 .ASRouterButton {
4496   font-weight: 600;
4497   font-size: 14px;
4498   white-space: nowrap;
4499   border-radius: 2px;
4500   border: 0;
4501   font-family: inherit;
4502   padding: 8px 15px;
4503   margin-inline-start: 12px;
4504   color: inherit;
4505   cursor: pointer;
4506 }
4507 .tall .ASRouterButton {
4508   margin-inline-start: 20px;
4509 }
4510 .ASRouterButton.test-only {
4511   width: 0;
4512   height: 0;
4513   overflow: hidden;
4514   display: block;
4515   visibility: hidden;
4516 }
4517 .ASRouterButton.primary {
4518   border: 1px solid var(--newtab-primary-action-background);
4519   background-color: var(--newtab-primary-action-background);
4520   color: var(--newtab-primary-element-text-color);
4521 }
4522 .ASRouterButton.primary:hover {
4523   background-color: var(--newtab-primary-element-hover-color);
4524 }
4525 .ASRouterButton.primary:active {
4526   background-color: var(--newtab-primary-element-active-color);
4527 }
4528 .ASRouterButton.slim {
4529   border: 1px solid var(--newtab-border-color);
4530   margin-inline-start: 0;
4531   font-size: 12px;
4532   padding: 6px 12px;
4533 }
4534 .ASRouterButton.slim:hover, .ASRouterButton.slim:focus {
4535   box-shadow: 0 0 0 5px var(--newtab-element-secondary-color);
4536   transition: box-shadow 150ms;
4537 }