{
  xdg.configFile = {
    "matugen/templates/zen-usercontent.css" = {
      enable = true;
      text =
        # css
        ''
          /* Common variables affecting all pages */
            @-moz-document url-prefix("about:") {
              :root {
                --in-content-page-color: {{colors.secondary.default.hex}} !important;
                --color-accent-primary: {{colors.primary.default.hex}} !important;
                /* --color-accent-primary-hover: rgb(249, 217, 240) !important;
                --color-accent-primary-active: rgb(245, 195, 219) !important; */
                background-color: {{colors.surface_container.default.hex}} !important;
                --in-content-page-background: {{colors.surface_container.default.hex}} !important;
              }

            }

            /* Variables and styles specific to about:newtab and about:home */
            @-moz-document url("about:newtab"), url("about:home") {

              :root {
                --newtab-background-color: {{colors.surface_container.default.hex}} !important;
                --newtab-background-color-secondary: {{colors.surface_container_high.default.hex}} !important;
                --newtab-element-hover-color: {{colors.surface_container_high.default.hex}} !important;
                --newtab-text-primary-color: {{colors.secondary.default.hex}} !important;
                --newtab-wordmark-color: {{colors.secondary.default.hex}} !important;
                --newtab-primary-action-background: {{colors.primary.default.hex}} !important;
              }

              .icon {
                color: {{colors.primary.default.hex}} !important;
              }

              .card-outer:is(:hover, :focus, .active):not(.placeholder) .card-title {
                color: {{colors.primary.default.hex}} !important;
              }
            }

            /* Variables and styles specific to about:preferences */
            @-moz-document url-prefix("about:preferences") {
              :root {
                --zen-colors-tertiary: {{colors.surface_container_low.default.hex}} !important;
                --in-content-text-color: {{colors.secondary.default.hex}} !important;
                --link-color: {{colors.primary.default.hex}} !important;
                /* --link-color-hover: rgb(249, 217, 240) !important; */
                --zen-colors-primary: {{colors.surface_container_high.default.hex}} !important;
                --in-content-box-background: {{colors.surface_container_high.default.hex}} !important;
                --zen-primary-color: {{colors.primary.default.hex}} !important;
              }

              button,
              groupbox menulist {
                background: {{colors.surface_container_high.default.hex}} !important;
                color: {{colors.secondary.default.hex}} !important;
              }

              .main-content {
                background-color: {{colors.surface_container_lowest.default.hex}} !important;
              }
            }

            /* Variables and styles specific to about:addons */
            @-moz-document url-prefix("about:addons") {
              :root {
                --zen-dark-color-mix-base: {{colors.surface_container_low.default.hex}} !important;
                --background-color-box: {{colors.surface_container.default.hex}} !important;
              }
            }

            /* Variables and styles specific to about:protections */
            @-moz-document url-prefix("about:protections") {
              :root {
                --zen-primary-color: {{colors.surface_container.default.hex}} !important;
                --in-content-primary-button-text-color-hover: {{colors.secondary.default.hex}} !important;
                --in-content-primary-button-background: {{colors.surface_container.default.hex}} !important;
                --in-content-primary-button-text-color: {{colors.secondary.default.hex}} !important;
              }

              .card {
                background-color: {{colors.surface_container_high.default.hex}} !important;
              }
            }
              /* Pane UI button visibility issue fix */
            #PanelUI-menu-button[open] .toolbarbutton-icon {
              fill: {{colors.primary.default.hex}} !important;
            }
          }


          img, canvas, video, .avatar, 
          [class*="avatar"], 
          [class*="ProfileAvatar"],
          [style*="border-radius"] {
              border-radius: 0 !important;
              clip-path: none !important;
              mask-image: none !important;
              -webkit-mask-image: none !important;
          }

          :not(svg):not(circle):not(ellipse):not(path) {
              border-radius: 0 !important;
          }

          :root {
              --border-radius: 0px !important;
              --radius: 0px !important;
              --rounded-corner: 0px !important;
              --avatar-radius: 0px !important;
              --pfp-radius: 0px !important;
          }
        '';
    };
  };
  xdg.configFile = {
    "matugen/templates/zen.css" = {
      enable = true;
      text =
        # css
        ''
          :root {
            --zen-primary-color: {{colors.primary_container.default.hex}} !important;
            --toolbarbutton-icon-fill: {{colors.primary.default.hex}} !important;
            --toolbar-field-color: {{colors.on_background.default.hex}} !important;
            --tab-selected-textcolor: {{colors.primary.default.hex}} !important;
            --toolbar-color: {{colors.on_background.default.hex}} !important;
            --arrowpanel-color: {{colors.on_surface.default.hex}} !important;
            --arrowpanel-background: {{colors.surface_container.default.hex}} !important;
            --sidebar-text-color: {{colors.on_background.default.hex}} !important;
            --zen-main-browser-background: {{colors.background.default.hex}} !important;
          }

          * {
            font-family: "IosevkaInput", monospace !important;
            border-radius: 0 !important;
          }

          .sidebar-placesTree {
            background-color: {{colors.surface_container.default.hex}} !important;
          }

          #zen-workspaces-button {
            background-color: {{colors.surface_container.default.hex}} !important;
          }

          #TabsToolbar {
            background-color: {{colors.background.default.hex}} !important;
          }

          .urlbar-background {
            background-color: {{colors.surface_container.default.hex}} !important;
          }

          .urlbar-input::selection {
            color: {{colors.on_primary.default.hex}} !important;
            background-color: {{colors.primary.default.hex}} !important;
          }

          .urlbarView-url {
            color: {{colors.on_surface_variant.default.hex}} !important;
          }

          toolbar .toolbarbutton-1 {
            &:not([disabled]) {
              &:is([open], [checked])
                > :is(
                  .toolbarbutton-icon,
                  .toolbarbutton-text,
                  .toolbarbutton-badge-stack
                ) {
                fill: {{colors.primary.default.hex}}
              }
            }
          }

          .identity-color-blue {
            --identity-tab-color: \{{color12}} !important;
            --identity-icon-color: \{{color12}} !important;
          }

          .identity-color-turquoise {
            --identity-tab-color: \{{color6}} !important;
            --identity-icon-color: \{{color6}} !important;
          }

          .identity-color-green {
            --identity-tab-color: \{{color10}} !important;
            --identity-icon-color: \{{color10}} !important;
          }

          .identity-color-yellow {
            --identity-tab-color: \{{color11}} !important;
            --identity-icon-color: \{{color11}} !important;
          }

          .identity-color-orange {
            --identity-tab-color: \{{color3}} !important;
            --identity-icon-color: \{{color3}} !important;
          }

          .identity-color-red {
            --identity-tab-color: \{{color9}} !important;
            --identity-icon-color: \{{color9}} !important;
          }

          .identity-color-pink {
            --identity-tab-color: \{{color13}} !important;
            --identity-icon-color: \{{color13}} !important;
          }

          .identity-color-purple {
            --identity-tab-color: \{{color5}} !important;
            --identity-icon-color: \{{color5}} !important;
          }

          #zen-appcontent-navbar-container {
            background-color: {{colors.background.default.hex}} !important;
          }

          #PanelUI-menu-button .toolbarbutton-icon,
          #downloads-button .toolbarbutton-icon,
          #unified-extensions-button .toolbarbutton-icon {
            fill: {{colors.primary.default.hex}} !important;
            color: {{colors.primary.default.hex}} !important;
          }

          #PanelUI-menu-button .toolbarbutton-badge-stack,
          #downloads-button .toolbarbutton-badge-stack,
          #unified-extensions-button .toolbarbutton-badge-stack {
            fill: {{colors.primary.default.hex}} !important;
            color: {{colors.primary.default.hex}} !important;
          }

          toolbar .toolbarbutton-1 > .toolbarbutton-icon {
            fill: {{colors.primary.default.hex}} !important;
          }
        '';
    };
  };
}