:root {
  --firefoxcss-wallpaper-item-bg-color: hsla(0, 0%, 12%, 0.6);
  --firefoxcss-wallpaper-item-hover-bg-color: hsla(0, 0%, 16%, 0.5);
}

@media (prefers-color-scheme: light) {
  :root {
    --newtab-wordmark-color: #fbfbfe !important;
    --firefoxcss-search-bar-text-color: #fbfbfe !important;
    --firefoxcss-context-menu-three-dots: #fbfbfe !important;
  }

  .top-site-outer .title {
  color: #fbfbfe !important;
  }
}

/* Wallapaper edition. Change wallpaper.jpg to wallpaper.png if used different file extension */
@-moz-document url("about:home"),
url("about:newtab") {
  body {
    background: url("ASSETS/wallpaper/wallpaper.jpg") center/cover no-repeat fixed !important;
  }

  .outer-wrapper .search-wrapper .search-handoff-button {
    -webkit-backdrop-filter: blur(24px) !important;
    backdrop-filter: blur(24px) !important;
    border-top: 1px solid hsla(0, 0%, 70%, 0.135) !important;
    background-color: var(--firefoxcss-wallpaper-item-bg-color) !important;
    /* color: #ffffff5e !important; */
    /* box-shadow: none !important; */
    fill: hsla(0, 0%, 100%, 0.6) !important;
    border: 1px solid #0000001c !important;
  }

  .outer-wrapper .logo-and-wordmark .wordmark {
    filter: drop-shadow(0px 1px 1px hsl(0, 0%, 0%));
  }

  .outer-wrapper .body-wrapper .tile {
    backdrop-filter: blur(24px) !important;
    border-top: 1px solid hsla(0, 0%, 100%, 0.145) !important;
    background-color: var(--firefoxcss-wallpaper-item-bg-color) !important;
      filter: drop-shadow(0px 1px 1px color-mix(in srgb, currentColor 25%, transparent));
  }

  .outer-wrapper .search-inner-wrapper:hover .search-handoff-button {
    background-color: var(--firefoxcss-wallpaper-item-hover-bg-color) !important;
    border-top: 1px solid hsla(0, 0%, 48%, 0.3) !important;
    fill: rgba(251, 251, 254, 0.8) !important;
  }

  .outer-wrapper .body-wrapper .top-site-button:hover .tile {
    border-top: 1px solid hsla(0, 0%, 58%, 0.3) !important;
     background-color: var(--firefoxcss-wallpaper-item-hover-bg-color) !important;
  }

  .outer-wrapper .top-site-outer .top-site-button .title {
    opacity: 1 !important;
    /* text-shadow: 0px 0px 1px #000 !important; */
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.699);
  }
  
  .outer-wrapper .top-site-outer {
      margin-block-end: 4px !important;
  }

  .outer-wrapper .search-wrapper .search-handoff-button .fake-textbox {
    opacity: 0.6 !important;
  }

  .outer-wrapper .top-site-button .title.has-icon.pinned span .icon {
    opacity: 1 !important;
    display: none !important;
    filter: drop-shadow(0px 1px 1px hsl(0, 0%, 0%));
  }

  .outer-wrapper .context-menu-button.icon,
  .card-outer .context-menu-button.icon {
    filter: drop-shadow(0px 1px 1px hsl(0, 0%, 0%));
  }

  .outer-wrapper .context-menu-button.icon:hover,
  .card-outer .context-menu-button.icon:hover {
    transform: scale(1.2);
  }

  .outer-wrapper
    .top-sites-list:not(.dnd-active)
    .top-site-outer:is(.active, :focus) {
    z-index: 8;
    position: relative;
    background-color: transparent !important;
  }
}
