@import "firefox-gnome-theme/userChrome.css";

@import "firefox-gnome-theme/userChrome.css";

/* This is strongly inspired by ../gtk/gtk.mustache. */
:root {
  /* Palette */
  --gnome-palette-blue-1: #{{.colors.base0D}};
  --gnome-palette-blue-2: #{{.colors.base0D}};
  --gnome-palette-blue-3: #{{.colors.base0D}};
  --gnome-palette-blue-4: #{{.colors.base0D}};
  --gnome-palette-blue-5: #{{.colors.base0D}};
  --gnome-palette-green-1: #{{.colors.base0B}};
  --gnome-palette-green-2: #{{.colors.base0B}};
  --gnome-palette-green-3: #{{.colors.base0B}};
  --gnome-palette-green-4: #{{.colors.base0B}};
  --gnome-palette-green-5: #{{.colors.base0B}};
  --gnome-palette-yellow-1: #{{.colors.base0A}};
  --gnome-palette-yellow-2: #{{.colors.base0A}};
  --gnome-palette-yellow-3: #{{.colors.base0A}};
  --gnome-palette-yellow-4: #{{.colors.base0A}};
  --gnome-palette-yellow-5: #{{.colors.base0A}};
  --gnome-palette-orange-1: #{{.colors.base09}};
  --gnome-palette-orange-2: #{{.colors.base09}};
  --gnome-palette-orange-3: #{{.colors.base09}};
  --gnome-palette-orange-4: #{{.colors.base09}};
  --gnome-palette-orange-5: #{{.colors.base09}};
  --gnome-palette-red-1: #{{.colors.base08}};
  --gnome-palette-red-2: #{{.colors.base08}};
  --gnome-palette-red-3: #{{.colors.base08}};
  --gnome-palette-red-4: #{{.colors.base08}};
  --gnome-palette-red-5: #{{.colors.base08}};
  --gnome-palette-purple-1: #{{.colors.base0E}};
  --gnome-palette-purple-2: #{{.colors.base0E}};
  --gnome-palette-purple-3: #{{.colors.base0E}};
  --gnome-palette-purple-4: #{{.colors.base0E}};
  --gnome-palette-purple-5: #{{.colors.base0E}};
  --gnome-palette-brown-1: #{{.colors.base0F}};
  --gnome-palette-brown-2: #{{.colors.base0F}};
  --gnome-palette-brown-3: #{{.colors.base0F}};
  --gnome-palette-brown-4: #{{.colors.base0F}};
  --gnome-palette-brown-5: #{{.colors.base0F}};
  --gnome-palette-light-1: #{{.colors.base05}};
  --gnome-palette-light-2: #{{.colors.base05}};
  --gnome-palette-light-3: #{{.colors.base05}};
  --gnome-palette-light-4: #{{.colors.base05}};
  --gnome-palette-light-5: #{{.colors.base05}};
  --gnome-palette-dark-1: #{{.colors.base05}};
  --gnome-palette-dark-2: #{{.colors.base05}};
  --gnome-palette-dark-3: #{{.colors.base05}};
  --gnome-palette-dark-4: #{{.colors.base05}};
  --gnome-palette-dark-5: #{{.colors.base05}};

  /* Colors */
  --gnome-warning-bg: #{{.colors.base0E}};

  /* Wind.colors.ow */
  --gnome-window-background: #{{.colors.base00}};
  --gnome-window-color: #{{.colors.base05}};
  --gnome-view-background: #{{.colors.base00}};
  --gnome-sidebar-background: #{{.colors.base01}};
  --gnome-secondary-sidebar-background: #{{.colors.base01}};

  /* Card */
  --gnome-card-background: #{{.colors.base01}};
  --gnome-card-shade-color: rgba(0, 0, 0, 0.07);

  /* Menu */
  --gnome-menu-background: #{{.colors.base01}};

  /* Headerbar */
  --gnome-headerbar-background: #{{.colors.base01}};
  --gnome-headerbar-shade-color: rgba(0, 0, 0, 0.07);

  /* Toolbar */
  --gnome-toolbar-icon-fill: #{{.colors.base05}};

  /* Tabs */
  --gnome-tabbar-tab-hover-background: color-mix(in srgb, #{{.colors.base01}}, #{{.colors.base02}} 75%);
  --gnome-tabbar-tab-active-background: #{{.colors.base02}};
  --gnome-tabbar-tab-active-background-contrast: #{{.colors.base02}};
  --gnome-tabbar-tab-active-hover-background: color-mix(in srgb, #{{.colors.base02}}, #{{.colors.base03}} 25%);

  /* Private Tabs */
  --gnome-private-wordmark: #{{.colors.base04}};
  --gnome-private-in-content-page-background: #{{.colors.base00}};
  --gnome-private-text-primary-color: #{{.colors.base04}};

  &:-moz-window-inactive {
    --gnome-tabbar-tab-hover-background: var(--gnome-tabbar-tab-hover-background);
    --gnome-tabbar-tab-active-background: var(--gnome-tabbar-tab-active-background);
  }
}