@charset "UTF-8";
/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

/* ============================================================
   tokens-shared.css
   ============================================================ */

@layer tokens-foundation, tokens-prefers-contrast, tokens-forced-colors;

@layer tokens-foundation {
  :root,
  :host(.anonymous-content-host) {
    /** border **/
    --border-radius-circle: 9999px;
    --border-radius-small: 4px;
    --border-radius-medium: 8px;
    --border-radius-large: 16px;
    --border-width: 1px;

    /** box-shadow **/
    --box-shadow-color-lighter-layer-1: light-dark(rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.15));
    --box-shadow-color-lighter-layer-2: light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.2));
    --box-shadow-level-2: 0 0.25px 0.75px var(--box-shadow-color-lighter-layer-1), 0 2px 6px var(--box-shadow-color-lighter-layer-2);

    /** button **/
    --button-border-color: transparent;
    --button-border-color-hover: var(--button-border-color);
    --button-border-color-active: var(--button-border-color);
    --button-border-color-ghost: var(--button-border-color);
    --button-border-color-ghost-hover: var(--button-border-color-hover);
    --button-border-color-ghost-active: var(--button-border-color-active);

    /** card **/
    --card-box-shadow: var(--box-shadow-level-2);

    /** color **/
    --color-gray-100: #15141a;
    --color-gray-05: #fbfbfe;
    --color-gray-60: #8f8f9d;
    --color-gray-70: #5b5b66;
    --color-gray-80: #23222b;
    --color-white: #ffffff;

    /** dimension **/
    --dimension-32: 32px;
    --dimension-relative-0125: 0.125rem;
    --dimension-relative-025: 0.25rem;
    --dimension-relative-050: 0.5rem;
    --dimension-relative-075: 0.75rem;
    --dimension-relative-100: 1rem;

    /** focus-outline **/
    --focus-outline: var(--focus-outline-width) solid var(--focus-outline-color);
    --focus-outline-color: var(--color-accent-primary);
    --focus-outline-width: 2px;

    /** icon **/
    --icon-color: light-dark(var(--color-gray-70), var(--color-gray-05));

    /** size **/
    --size-item-large: var(--dimension-32);

    /** space **/
    --space-xxsmall: var(--dimension-relative-0125);
    --space-xsmall: var(--dimension-relative-025);
    --space-small: var(--dimension-relative-050);
    --space-medium: var(--dimension-relative-075);
    --space-large: var(--dimension-relative-100);
  }
}

@layer tokens-prefers-contrast {
  @media (prefers-contrast) {
    :root,
    :host(.anonymous-content-host) {
      --button-border-color: var(--button-text-color);
      --icon-color: var(--text-color);
      --text-color: CanvasText;
    }
  }
}

@layer tokens-forced-colors {
  @media (forced-colors) {
    :root,
    :host(.anonymous-content-host) {
      --border-color-interactive: ButtonText;
      --border-color-interactive-hover: SelectedItem;
      --border-color-interactive-active: ButtonText;
      --button-background-color: ButtonFace;
      --button-background-color-hover: SelectedItemText;
      --button-border-color: var(--border-color-interactive);
      --button-border-color-hover: var(--border-color-interactive-hover);
      --button-border-color-active: var(--border-color-interactive-active);
      --button-text-color: ButtonText;
      --focus-outline-color: var(--text-color);
      --link-color: LinkText;
    }
  }
}

/* ============================================================
   tokens-brand.css
   ============================================================ */

@layer tokens-foundation {
  :root,
  :host(.anonymous-content-host) {
    --background-color-canvas: light-dark(var(--color-white), var(--color-gray-90));
    --border-color: light-dark(var(--color-gray-50), var(--color-gray-70));
    --border-color-deemphasized: light-dark(var(--color-gray-30), var(--color-gray-70));
    --border-color-interactive: light-dark(var(--color-gray-60), var(--color-gray-50));
    --button-background-color: color-mix(in srgb, currentColor 7%, transparent);
    --button-background-color-hover: color-mix(in srgb, currentColor 14%, transparent);
    --button-background-color-active: color-mix(in srgb, currentColor 21%, transparent);
    --button-text-color: light-dark(var(--color-gray-100), var(--color-gray-05));
    --color-accent-primary: light-dark(var(--color-blue-60), var(--color-cyan-30));
    --color-accent-primary-hover: light-dark(var(--color-blue-70), var(--color-cyan-20));
    --color-accent-primary-active: light-dark(var(--color-blue-80), var(--color-cyan-10));
    --font-size-root: 15px;
    --font-size-xsmall: 0.733rem;
    --font-size-xlarge: 1.467rem;
    --font-size-xxlarge: 1.6rem;
    --link-color: var(--color-accent-primary);
    --link-color-hover: var(--color-accent-primary-hover);
    --link-color-active: var(--color-accent-primary-active);
    --text-color: light-dark(var(--color-gray-100), var(--color-gray-05));
  }
}

/* ============================================================
   tokens-platform.css
   ============================================================ */

@layer tokens-foundation {
  :root,
  :host(.anonymous-content-host) {
    --background-color-canvas: Canvas;
    --border-color: color-mix(in srgb, currentColor 50%, transparent);
    --border-color-deemphasized: color-mix(in srgb, currentColor 24%, transparent);
    --border-color-interactive: color-mix(in srgb, currentColor 15%, var(--color-gray-60));
    --button-background-color: color-mix(in srgb, currentColor 13%, transparent);
    --button-background-color-hover: color-mix(in srgb, currentColor 17%, transparent);
    --button-background-color-active: color-mix(in srgb, currentColor 30%, transparent);
    --button-text-color: currentColor;
    --color-accent-primary: AccentColor;
    --color-accent-primary-hover: color-mix(in srgb, black 10%, var(--color-accent-primary));
    --color-accent-primary-active: color-mix(in srgb, black 20%, var(--color-accent-primary));
    --link-color: LinkText;
    --link-color-hover: color-mix(in srgb, black 10%, var(--link-color));
    --link-color-active: color-mix(in srgb, black 20%, var(--link-color));
  }
}

/* ============================================================
   activity-stream.css
   ============================================================ */

.top-sites-list *,
.top-sites-list *::before,
.top-sites-list *::after {

  box-sizing: inherit;
}
[hidden] {

  display: none !important;
}
:root {

  font-size: var(--font-size-root);
}
.top-sites-list {

  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  /* color-scheme: light dark; */
  color-scheme: dark;
  color: CanvasText;                              /* auto-adapts to color-scheme */
  /* color: light-dark(#15141a, #fbfbfe); */      /* explicit values alternative */
  --mrec-width: 300px;
  --col-width: calc(var(--mrec-width) / 4);
  --newtab-background-color: light-dark(#F9F9FB, #2B2A33);
  --newtab-background-color-secondary: light-dark(var(--color-white), #42414d);
  --newtab-text-primary-color: var(--text-color);
  --newtab-background-card: light-dark(color-mix(in srgb, var(--color-white) 85%, transparent), rgba(66, 65, 77, 0.85));
  --newtab-contextual-text-primary-color: light-dark(var(--newtab-text-primary-color), var(--text-color));
  --newtab-contextual-text-secondary-color: color-mix(in srgb, var(--newtab-contextual-text-primary-color) 70%, transparent);
  --newtab-section-card-box-shadow-color: light-dark(rgba(58, 57, 68, 20%), rgba(0, 0, 0, 80%));
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: center;
  column-gap: var(--space-medium);
  row-gap: var(--space-large);
}
.top-sites-list .top-site-outer:is( :focus-within, :hover) .tile {

  box-shadow: 0 2px 8px 0 var(--newtab-section-card-box-shadow-color);
}
.top-sites-list a {

  text-decoration: none;
}
.top-site-outer {

  width: var(--col-width);
  margin-block-end: 0;
  border-radius: var(--border-radius-large);
  display: inline-block;
}
.top-site-outer .top-site-inner {

  position: relative;
}
.top-site-outer .top-site-inner > a {

  padding: var(--space-large) var(--space-large) var(--space-xsmall);
  color: inherit;
  display: block;
  outline: none;
}
.top-site-outer:hover .tile, .top-site-outer:focus .tile {

  background-color: var(--newtab-background-color-secondary);
}
.top-site-outer .tile {

  color-scheme: initial;
  background: var(--newtab-background-card);
  border-radius: var(--border-radius-large);
  box-shadow: var(--card-box-shadow);
  height: calc(var(--size-item-large) * 2);
  width: calc(var(--size-item-large) * 2);
  margin: 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  font-size: var(--font-size-xxlarge);
  color: var(--newtab-contextual-text-secondary-color);
  cursor: pointer;
  align-self: end;
  border: var(--border-width) solid var(--button-border-color-ghost);
  transition: width 100ms ease-out, height 100ms ease-out;
}
.top-site-outer .tile .icon-wrapper {

  border-radius: var(--border-radius-small);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.top-site-outer .tile .icon-wrapper.letter-fallback {

  border-radius: var(--border-radius-circle);
}
.top-site-outer .tile .icon-wrapper.letter-fallback::before {

  content: attr(data-fallback);
  font-size: var(--font-size-xlarge);
  transform: none;
  position: static;
}
.top-site-outer .tile .top-site-icon {

  background-color: transparent;
  border-radius: var(--border-radius-medium);
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
}
.top-site-outer .title {

  color: var(--newtab-contextual-text-primary-color);
  padding-block-start: var(--space-small);
  font: caption;
  font-size: var(--font-size-xsmall);
  text-align: center;
  position: relative;
}
.top-site-outer .title .icon {

  margin-inline-end: var(--space-xxsmall);
  fill: currentColor;
}
.top-site-outer .rich-icon {

  background-size: cover;
  height: 100%;
  width: 100%;
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
}
.top-site-outer .default-icon {

  background-size: 40px;
  height: 40px;
  width: 40px;
  align-items: center;
  display: flex;
  justify-content: center;
  font-size: var(--font-size-xlarge);
}
.top-site-outer .default-icon[data-fallback]::before {

  content: attr(data-fallback);
}
.top-sites-list .top-site-outer .top-site-button {

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.top-sites-list .top-site-outer .title .title-label {

  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  white-space: normal;
  word-break: break-word;
  min-height: 1lh;
  width: var(--col-width);
  padding: 0;
}
.topsite-impression-observer {

  position: absolute;
  inset-block-start: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.top-sites-list .top-site-outer .top-site-button {

  display: grid;
  grid-template-rows: var(--col-width) auto;
  padding: 0;
}
.top-site-outer:is(:hover, :focus-within) .tile {

  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
  width: var(--col-width);
  /* stylelint-disable-next-line stylelint-plugin-mozilla/use-design-tokens */
  height: var(--col-width);
  border-color: var(--button-border-color-ghost-hover);
}
.top-site-outer:active .tile {

  border-color: var(--button-border-color-ghost-active);
}
.top-site-outer .top-site-inner > a:focus .tile {

  outline: var(--focus-outline);
}
@media (forced-colors: active) {
.top-site-outer .tile {

    background-color: var(--button-background-color);
  }
.top-site-outer:is(:hover, :focus-within) .tile {

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