: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 {
    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;
    box-shadow: 0 1px 1px hsl(0deg 0% 0% / 0.075),
      0 2px 2px hsl(0deg 0% 0% / 0.075), 0 4px 4px hsl(0deg 0% 0% / 0.075),
      0 8px 8px hsl(0deg 0% 0% / 0.075), 0 16px 16px hsl(0deg 0% 0% / 0.095) !important;
    border: 1px solid #0000001c !important;
  }

  #root .outer-wrapper .body-wrapper .tile {
    backdrop-filter: blur(0px) !important;
    border-top: 0px solid hsla(0, 0%, 100%, 0) !important;
    border-bottom: 0px solid hsla(0, 0%, 100%, 0) !important;
    background-color: transparent !important;
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
    border: 0px !important;
    box-shadow: none !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
    width: 100% !important;
  }

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

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

  #root .outer-wrapper .body-wrapper .top-site-button:hover .tile {
    border-top: 0px !important;
    background-color: transparent !important;
  }

  .outer-wrapper .top-site-outer .top-site-button .title {
    opacity: 0.8 !important;
    text-shadow: 0px 0px 1px #000, 0px 0px 1px #000 !important;
    /* text-shadow: 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black; */
  }

  .outer-wrapper .top-site-outer .top-site-inner {
    backdrop-filter: blur(24px) !important;
    background-color: var(--firefoxcss-wallpaper-item-bg-color) !important;
    border-radius: 10px !important;
    border: 1px solid #ffffff17 !important;
    box-shadow: 0 1px 1px hsl(0deg 0% 0% / 0.075),
      0 2px 2px hsl(0deg 0% 0% / 0.075), 0 4px 4px hsl(0deg 0% 0% / 0.075),
      0 8px 8px hsl(0deg 0% 0% / 0.075), 0 16px 16px hsl(0deg 0% 0% / 0.075),
      1px 1px 2px hsl(0deg 0% 0% / 0.5) !important;
    transition: background-color 250ms ease;
  }
  
  .outer-wrapper .top-sites-list .top-site-outer {
    padding-inline: 10px !important;
  }
  .outer-wrapper .top-site-outer .top-site-inner > a {
    padding: 8px 16px 2px !important;
  }
  
   .outer-wrapper .top-site-outer .context-menu-button {
    inset-inline-end: 10px !important;
    top: 2px !important;
  }
  

  .outer-wrapper .body-wrapper .top-site-inner:hover {
    background-color: var(--firefoxcss-wallpaper-item-hover-bg-color) !important;
  }

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

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