# { pkgs-unstable, secrets, user, system, inputs, ...}:
{ rice, user, ... }:
# browser.tabs.allow_transparent_browser
{
  home.file = with rice.color;  let
      blur = builtins.toString 20;
    in {
    ".mozilla/firefox/${user}/chrome/userChrome.css".text = /* css */ ''
      :root{
        /* Popup panels */
        --arrowpanel-background                  : rgba(${rice.lib.hex-to-rgb-comma-string background}, ${builtins.toString rice.transparency}) !important;
        --arrowpanel-border-color                : ${border} !important;
        --arrowpanel-color                       : ${secondary.base} !important;
        --arrowpanel-dimmed                      : rgba(${rice.lib.hex-to-rgb-comma-string background},0.4) !important;
        --arrowpanel-dimmed-further              : rgba(${rice.lib.hex-to-rgb-comma-string background},0.6) !important;
        --arrowpanel-dimmed-even-further         : rgba(${rice.lib.hex-to-rgb-comma-string background},0.8) !important;
      
        /* Autocomplete */
        --autocomplete-popup-background          : rgba(${rice.lib.hex-to-rgb-comma-string background}, ${builtins.toString rice.transparency}) !important;
        --autocomplete-popup-color               : ${foreground} !important;
        --autocomplete-popup-highlight-background: ${accent.base} !important;
        --autocomplete-popup-highlight-color     : ${foreground} !important;

        /* Toolbar background */
        --toolbar-bgcolor                        : rgba(${rice.lib.hex-to-rgb-comma-string background},0.4) !important;
        --toolbar-non-lwt-bgcolor                : rgba(${rice.lib.hex-to-rgb-comma-string background}, ${builtins.toString rice.transparency}) !important;
        --toolbar-non-lwt-bgimage                : none !important;
        --toolbar-color                          : ${foreground} !important;

        /* Tabs */
        --tab-selected-bgcolor                   : ${accent.base} !important;
        --tabs-border-color                      : ${border} !important;
        --tab-line-color                         : ${accent.base} !important;
        --tab-loader-size                        : 16px !important;

        /* Sidebar */
        --lwt-sidebar-background-color           : rgba(${rice.lib.hex-to-rgb-comma-string background}, ${builtins.toString rice.transparency}) !important;
        --lwt-sidebar-text-color                 : ${foreground} !important;
        --sidebar-background-color               : rgba(${rice.lib.hex-to-rgb-comma-string background}, ${builtins.toString rice.transparency}) !important;
        --sidebar-text-color                     : ${foreground} !important;
        --sidebar-border-color                   : ${border} !important;

        /* URL bar */
        --urlbar-popup-url-color                 : ${foreground} !important;
        --urlbar-popup-action-color              : ${secondary.base} !important;
        --toolbar-field-background-color         : rgba(${rice.lib.hex-to-rgb-comma-string background}, ${builtins.toString rice.transparency}) !important;
        --toolbar-field-focus-background-color   : rgba(${rice.lib.hex-to-rgb-comma-string background}, ${builtins.toString rice.transparency}) !important;
        --toolbar-field-color                    : ${accent.base} !important;
        --toolbar-field-focus-color              : ${foreground} !important;
        --toolbar-field-focus-border-color       : ${accent.base} !important;

        /* Buttons */
        --toolbarbutton-icon-fill                : ${foreground} !important;
        --toolbarbutton-hover-background         : rgba(${rice.lib.hex-to-rgb-comma-string accent.base}, 0.2) !important;
        --toolbarbutton-active-background        : rgba(${rice.lib.hex-to-rgb-comma-string accent.base}, 0.4) !important;

        /* Notification and panel */
        --panel-disabled-color                   : rgba(${rice.lib.hex-to-rgb-comma-string foreground},0.3) !important;
        --panel-separator-color                  : ${border} !important;

        /* New tab page */
        --newtab-background-color                : ${background} !important;
        --newtab-background-color-secondary      : ${background} !important;
        --newtab-text-primary-color              : ${foreground} !important;
        --newtab-text-secondary-color            : ${secondary.base} !important;
        --newtab-search-icon-color               : ${accent.base} !important;

        --tabpanel-background-color              : transparent !important;
        background                               : rgba(${rice.lib.hex-to-rgb-comma-string background}, ${builtins.toString rice.transparency}) !important;
      }
      .tabbrowser-tab[selected="true"] {
        color: ${background} !important;
      }

      #appcontent {
        background: transparent !important;
      } 
      #navigator-toolbox {
        --tabs-border-color: transparent !important;
      } 
      #toolbar-menubar, #TabsToolbar, #PersonalToolbar, #navigator-toolbox, #sidebar-box {
        background-color: transparent !important;
        -moz-appearance: none !important;
        background-image: none !important;
      }

      window, #nav-bar{
        background-color: transparent !important;
        -moz-appearance: none !important;
        background-image: none !important;
      } 
    '';

    ".mozilla/firefox/${user}/chrome/userContent.css".text = /* css */ ''
      /* Removes the white loading page */
      /* url(about:newtab), url(about:home) */
      @-moz-document url(about:blank) {
      	html:not(#ublock0-epicker), html:not(#ublock0-epicker) body, #newtab-customize-overlay {
      		background: ${background} !important;
      	}
      }

      /*  Sets up minimal incognito scrollbar */
      @-moz-document url(about:privatebrowsing) {
      	:root{
      		scrollbar-width: thin !important;
      		scrollbar-color: rgb(161, 161, 161) transparent !important;
      	}
      }

      /* new-tab */ 
      @-moz-document url-prefix(about:home), url-prefix(about:newtab) {
        body, html {
          background: transparent !important;
        }
      }

      @-moz-document domain(youtube.com) {
        #background, #chips-wrapper, ytd-mini-guide-entry-renderer {
          background-color: rgba(${rice.lib.hex-to-rgb-comma-string background},${builtins.toString rice.transparency}) !important;
          backdrop-filter: blur(${blur}px);        
          border: ${builtins.toString rice.border-width} solid ${border};
        }    
        body, html, ytd-app, ytd-mini-guide-renderer, div#content-container, #guide-content.ytd-app, #guide-wrapper, div#contentContainer {
          background-color: transparent !important;
          border: ${builtins.toString rice.border-width} solid ${border};
        }
      }

      @-moz-document domain(reddit.com) {
        header {
          background-color: rgba(${rice.lib.hex-to-rgb-comma-string background},${builtins.toString rice.transparency}) !important;
          backdrop-filter: blur(${blur}px);        
        }    
        body, html, .bg-neutral-background, .threadline, reddit-sidebar-nav, shreddit-post, aside, .reddit-search-bar, comment-body-header, shreddit-comment-tree{
          background-color: transparent !important;
        }
      }

      @-moz-document domain(reddit.com) {
        header {
          background-color: rgba(${rice.lib.hex-to-rgb-comma-string background},${builtins.toString rice.transparency}) !important;
          backdrop-filter: blur(20px);
        }    
        body, html, reddit-sidebar-nav, shreddit-post, aside, .reddit-search-bar{
          background-color: transparent !important;
        }
      }

      @-moz-document domain(google.com) {
        .sfbg {
          background-color: rgba(${rice.lib.hex-to-rgb-comma-string background},${builtins.toString rice.transparency}) !important;
          backdrop-filter: blur(${blur}px);        
        }
        body, html, div#search > * {
          background-color: transparent !important;
          border: ${builtins.toString rice.border-width} solid ${border};
        }
        .g, .appbar {
          background-color: transparent !important;
          border: ${builtins.toString rice.border-width} solid ${border};
        }
        div#rso {
          * {
            background-color: transparent !important;
            border: ${builtins.toString rice.border-width} solid ${border};
          }
        }
        div#cnt > div {

        }
      }

      @-moz-document domain(github.com) {
        body, html, header, #repository-container-header, .bgColor-muted, section {
          background-color: transparent !important;
        }
      }

      @-moz-document domain(nx2.site) {
        html {
          background: radial-gradient(rgba(255, 255, 255, 0.8) 5%, transparent 5%) !important;
          background-repeat: repeat !important;
          background-size: 2vmin 2vmin !important;
        }
      }
    '';
  };
}