/*
 * Unfortunately imports do not seem to work that well in userContent.css so
 * the CSS has to be duplicated.
 */

/* Don't leak CSS to websites */
@-moz-document
url("about:about"),
url("about:addons"),
url("about:certificate"),
url("about:compat"),
url("about:config"),
url("about:downloads"),
url("about:home"),
url("about:networking"),
url("about:newtab"),
url("about:performance"),
url("about:policies"),
url("about:preferences"),
url("about:processes"),
url("about:profiles"),
url("about:profiling"),
url("about:protections"),
url("about:serviceworkers"),
url("about:studies"),
url("about:support"),
url("about:telemetry"),
url("about:unloads"),
url("about:url-classifier"),
url("about:webrtc") {


/*
 * Variables
 */

:root {
  --bg0: #15192c;
  --bg1: #1c1c32;
  --bg2: #24243c;
  --bg3: #383847;
  --bg4: #3f3f5b;

  --accent0: #78a3c7;
  --accent1: #83b2d9;
  --accent2: #8ec0eb;
}



/*
 * New Tab
 */

/* Window background */
body {
  --newtab-background-color: var(--bg1) !important;

  --newtab-background-button-color: var(--bg2) !important;
  --newtab-background-button-hover-color: var(--bg3) !important;

  --newtab-textbox-background-color: var(--bg3) !important;

  /* Customising panel */
  --customize-menu-background: var(--bg2) !important;
  --customize-menu-secondary-action-background: var(--bg0) !important;
  --customize-menu-secondary-action-background-hover: var(--bg3) !important;
  --customize-menu-secondary-action-background-active: var(--bg4) !important;

  --newtab-primary-action-background: var(--accent0) !important;

  /* Shortcuts */
  --newtab-background-color-secondary: var(--bg3) !important;
  --newtab-element-hover-color: var(--bg2) !important;
}

/* Alignment fix */
.top-sites-list { text-align: center; }

/* New/edit shortcut popup */
.modal { background-color: var(--bg4) !important; }



/*
 * Settings
 */

:root {
  --in-content-page-background: var(--bg1) !important;

  --in-content-box-background: var(--bg2) !important;
  --in-content-box-border-color: var(--bg3) !important;

  --in-content-button-background: var(--bg2) !important;
  --in-content-button-background-hover: var(--bg3) !important;
  --in-content-button-background-active: var(--bg4) !important;

  --in-content-accent-color: var(--accent1) !important;
  --in-content-accent-color-active: var(--accent2) !important;
  --in-content-primary-button-background: var(--accent0) !important;
  --in-content-primary-button-background-hover: var(--accent1) !important;
  --in-content-primary-button-background-active: var(--accent2) !important;

  --in-content-box-info-background: var(--bg2) !important;
  --in-content-border-color: var(--bg3) !important;
}

.content-blocking-category:not(.selected) { background-color: var(--bg2) !important; }
.content-blocking-category.selected {
  --in-content-button-background: color-mix(in srgb, var(--accent0) 20%, transparent) !important;
  --in-content-button-background-hover: color-mix(in srgb, var(--accent0) 25%, transparent) !important;
  --in-content-button-background-active: color-mix(in srgb, var(--accent0) 30%, transparent) !important;
}



/*
 * Others
 */

:root {
  --in-content-table-background: var(--bg0) !important;
}


}