/* Spill style. Modifications for userContent file */

@media (prefers-color-scheme: dark) {
  :root {
    --firefoxcss-item-bg-color: hsla(240, 2%, 45%, 0.4) !important;
    --firefoxcss-item-hover-bg-color: hsl(240, 2%, 55%, 0.4) !important;
    --firefoxcss-settings-wheel-color: hsla(240, 20%, 80%, 0.6) !important;
    --firefoxcss-settings-wheel-color-hover: hsla(240, 20%, 80%, 0.9) !important;
  }
}

@-moz-document url("about:privatebrowsing") {
  @media (prefers-color-scheme: dark) {
    html:not(#ublock0-epicker),
    html:not(#ublock0-epicker) body,
    #newtab-customize-overlay {
      background-image: url("ASSETS/other/spill.svg") !important;
    }
  }
  @media (prefers-color-scheme: light) {
    html:not(#ublock0-epicker),
    html:not(#ublock0-epicker) body,
    #newtab-customize-overlay {
      background-image: url("ASSETS/other/spill-light.svg") !important;
    }
  }

  #search-handoff-button {
    background-color: hsla(290, 21%, 35%, 0.2) !important;
    border-top: 1px solid hsla(290, 21%, 50%, 0.2) !important;
    fill: hsl(290, 21%, 60%) !important;
    backdrop-filter: blur(24px) !important;
  }

  #search-handoff-button:hover,
  #search-handoff-button:focus,
  #search-handoff-button:active {
    background-color: hsla(290, 21%, 45%, 0.2) !important;
    border-top: 1px solid hsla(290, 21%, 55%, 0.2) !important;
    fill: hsl(290, 21%, 70%) !important;
  }

  #search-handoff-button .fake-textbox {
    color: hsl(290, 21%, 60%) !important;
  }

  #search-handoff-button:active > .fake-textbox,
  #search-handoff-button:hover > .fake-textbox,
  #search-handoff-button:focus > .fake-textbox {
    color: hsl(290, 21%, 70%) !important;
  }
}

@-moz-document url("about:home"),
url("about:newtab") {
  @media (prefers-color-scheme: dark) {
    html:not(#ublock0-epicker),
    html:not(#ublock0-epicker) body,
    #newtab-customize-overlay {
      background-image: url("ASSETS/other/spill-main.svg") !important;
    }
  }
  @media (prefers-color-scheme: light) {
    html:not(#ublock0-epicker),
    html:not(#ublock0-epicker) body,
    #newtab-customize-overlay {
      background-image: url("ASSETS/other/spill-main-light.svg") !important;
    }
  }

  .body-wrapper .tile {
    backdrop-filter: blur(24px) !important;
  }
}
