/* DMS Matugen Zen Browser Theme */
: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_background.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;
  --zen-main-browser-background-toolbar: {{colors.background.default.hex}} !important;
}

#zen-browser-background {
  --zen-main-browser-background: {{colors.background.default.hex}} !important;
  --zen-background-opacity: 1 !important;
}

#zen-toolbar-background {
  --zen-main-browser-background-toolbar: {{colors.background.default.hex}} !important;
  --zen-background-opacity: 1 !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: {{dank16.color12.default.hex}} !important;
  --identity-icon-color: {{dank16.color12.default.hex}} !important;
}

.identity-color-turquoise {
  --identity-tab-color: {{dank16.color6.default.hex}} !important;
  --identity-icon-color: {{dank16.color6.default.hex}} !important;
}

.identity-color-green {
  --identity-tab-color: {{dank16.color10.default.hex}} !important;
  --identity-icon-color: {{dank16.color10.default.hex}} !important;
}

.identity-color-yellow {
  --identity-tab-color: {{dank16.color11.default.hex}} !important;
  --identity-icon-color: {{dank16.color11.default.hex}} !important;
}

.identity-color-orange {
  --identity-tab-color: {{dank16.color3.default.hex}} !important;
  --identity-icon-color: {{dank16.color3.default.hex}} !important;
}

.identity-color-red {
  --identity-tab-color: {{dank16.color9.default.hex}} !important;
  --identity-icon-color: {{dank16.color9.default.hex}} !important;
}

.identity-color-pink {
  --identity-tab-color: {{dank16.color13.default.hex}} !important;
  --identity-icon-color: {{dank16.color13.default.hex}} !important;
}

.identity-color-purple {
  --identity-tab-color: {{dank16.color5.default.hex}} !important;
  --identity-icon-color: {{dank16.color5.default.hex}} !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;
}
