/*= Windows10 - UWP like color ===============================================*/
@include OS($win10) {
  :root:not(:-moz-lwtheme) {
    --win-text-color: rgba(0, 0, 0);
    --win-bgcolor: rgb(204, 204, 204);
    --win-disabled-color: rgb(145, 145, 145);
    --win-disabled-bgcolor: transparent;
    --win-hover-bgcolor: rgb(218, 218, 218); /* also button-bgcolor */
    --win-hover-active-bgcolor: #c2c2c2; /* also button-hover-bgcolor */
    --win-button-hover-bgcolor: rgba(218, 218, 218, 0.66);
    --win-button-active-bgcolor: #aaaaaa;
    --win-field-bgcolor: #ffffff;
    --win-component-bgcolor: #f2f2f2;
    --win-border-color: #8a8a8a;
    --win-tab-seperator-color: #a3a3a3;
    --win-sidebar-bgcolor: #e6e6e6;
    --win-sidebar-hover-bgcolor: #cfcfcf;
    --win-sidebar-button-hover-bgcolor: #b8b8b8;
    --win-sidebar-button-hover-active-bgcolor: #a3a3a3;
    --win-button-border: #747474;
    --win-shorcut-text-color: #757575;
    --win-error-color: #b31616;
    --win-red-border-color: #ff4343;
    --win-accent-forground-color: -moz-accent-color-foreground;
    --win-accent-color: color-mix(in srgb, rgba(0, 0, 0, 0.8) 10%, -moz-accent-color);
    --win-accent-content-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 15%, -moz-accent-color);
    --win-accent-hover-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 27%, -moz-accent-color);
    --win-accent-active-color: -moz-accent-color;
  }
  @include Dark {
    #{system-default-theme()} {
      --win-text-color: #ffffff;
      --win-bgcolor: #2b2b2b;
      --win-disabled-color: #747474;
      --win-disabled-bgcolor: transparent;
      --win-hover-bgcolor: #2e2e2e; /* also button-bgcolor */
      --win-hover-active-bgcolor: #454545; /* also button-active-color */
      --win-button-hover-bgcolor: rgba(46, 46, 46, 0.66);
      --win-button-active-bgcolor: #515151;
      --win-field-bgcolor: #373737;
      --win-component-bgcolor: #171717;
      --win-border-color: #5b5b5b;
      --win-tab-seperator-color: #555555;
      --win-sidebar-bgcolor: #1f1f1f;
      --win-sidebar-hover-bgcolor: #353535;
      --win-sidebar-button-hover-bgcolor: #353535;
      --win-sidebar-button-hover-active-bgcolor: #4c4c4c;
      --win-button-border: #8f8f8f;
      --win-shorcut-text-color: #adadad;
      --win-error-color: #ffb900;
      --win-red-border-color: #ff4343;
      --win-accent-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 20%, -moz-accent-color);
      --win-accent-content-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 35%, -moz-accent-color);
      --win-accent-hover-color: color-mix(in srgb, rgba(0, 0, 0, 0.8) 5%, -moz-accent-color);
      --win-accent-active-color: -moz-accent-color;
    }
  }

  #{system-default-theme()} {
    /* Text, Icon Color */
    --menu-color: var(--win-text-color) !important;
    --lwt-text-color: var(--win-text-color) !important;
    --button-color: var(--win-text-color) !important;
    --input-color: var(--win-text-color) !important;
    --toolbar-color: var(--win-text-color) !important;
    --toolbar-non-lwt-textcolor: var(--win-text-color) !important;
    --toolbarbutton-icon-fill: var(--win-text-color) !important;
    --toolbar-field-focus-color: var(--win-text-color) !important;
    --urlbar-popup-action-color: var(--win-text-color) !important;
    --toolbar-field-color: var(--win-text-color) !important;
    --autocomplete-popup-highlight-color: var(--win-text-color) !important;
    --tab-icon-overlay-fill: var(--win-text-color) !important;
    --panel-banner-item-color: var(--win-text-color) !important;
    --arrowpanel-color: var(--win-text-color) !important;
    --autocomplete-popup-color: var(--win-text-color) !important;

    /* Text Disabled Color */
    --menu-disabled-color: var(--win-disabled-color) !important;
    --checkbox-unchecked-active-bgcolor: var(--win-disabled-color) !important;
    --panel-disabled-color: var(--win-disabled-color) !important;
    --download-progress-paused-color: var(--win-disabled-color) !important;

    /* Text Shortcut Color */
    --panel-shortcut-color: var(--win-shorcut-text-color) !important;
    --panel-description-color: var(--win-shorcut-text-color) !important;

    /* Title Background, Border Color */
    --menu-border-color: var(--win-bgcolor) !important;
    --lwt-accent-color: var(--win-bgcolor) !important;
    --toolbar-field-border-color: var(--win-bgcolor) !important;
    --chrome-content-separator-color: var(--win-bgcolor) !important;

    /* Component Background Color */
    --menu-background-color: var(--win-component-bgcolor) !important;
    --toolbar-bgcolor: var(--win-component-bgcolor) !important;
    --toolbar-non-lwt-bgcolor: var(--win-component-bgcolor) !important;
    --arrowpanel-background: var(--win-component-bgcolor) !important;
    --autocomplete-popup-background: var(--win-component-bgcolor) !important;

    /* Seperator */
    --toolbarseparator-color: var(--win-tab-seperator-color) !important;

    /* Field Backround Color */
    --input-bgcolor: var(--win-field-bgcolor) !important;
    --toolbar-field-background-color: var(--win-field-bgcolor) !important;
    --toolbar-field-focus-background-color: var(--win-field-bgcolor) !important;
    --tab-icon-overlay-stroke: var(--win-field-bgcolor) !important;

    /* Hover Background Color, Button Color  */
    --menuitem-hover-background-color: var(--win-hover-bgcolor) !important;
    --toolbarbutton-hover-background: var(--win-hover-bgcolor) !important;
    --button-bgcolor: var(--win-hover-bgcolor) !important;
    --panel-banner-item-background-color: var(--win-hover-bgcolor) !important;

    /* Hover Active, Button Hover Color */
    --checkbox-unchecked-bgcolor: var(--win-hover-active-bgcolor) !important;
    --urlbar-box-bgcolor: var(--win-hover-active-bgcolor) !important;
    --urlbar-box-focus-bgcolor: var(--win-hover-active-bgcolor) !important;
    --toolbarbutton-active-background: var(--win-hover-active-bgcolor) !important;
    --urlbar-box-active-bgcolor: var(--win-hover-active-bgcolor) !important;
    --autocomplete-popup-highlight-background: var(--win-hover-active-bgcolor) !important;
    --panel-banner-item-hover-bgcolor: var(--win-hover-active-bgcolor) !important;

    /* Button Hover Active Color */
    --button-active-bgcolor: var(--win-button-active-bgcolor) !important;
    --panel-banner-item-active-bgcolor: var(--win-button-active-bgcolor) !important;

    /* Disabled Background Color */
    --menuitem-disabled-hover-background-color: var(--win-disabled-bgcolor) !important;

    /* Button Hover Color */
    --button-hover-bgcolor: var(--win-button-hover-bgcolor) !important;
    --checkbox-unchecked-hover-bgcolor: var(--win-button-hover-bgcolor) !important;
    --urlbar-box-hover-bgcolor: var(--win-button-hover-bgcolor) !important;
    --autocomplete-popup-hover-background: var(--win-button-hover-bgcolor) !important;

    /* Button Border Color */
    --checkbox-border-color: var(--win-button-border) !important;
    --input-border-color: var(--win-button-border) !important;
    --autocomplete-popup-separator-color: var(--win-button-border) !important;

    /* Accent Forground Color */
    --button-primary-color: var(--win-accent-forground-color) !important;
    --checkbox-checked-color: var(--win-accent-forground-color) !important;

    /* Accent Color */
    --button-primary-bgcolor: var(--win-accent-color) !important;
    --focus-outline-color: var(--win-accent-color) !important;
    --checkbox-checked-bgcolor: var(--win-accent-color) !important;

    /* Accent Content Color */
    --toolbarbutton-icon-fill-attention: var(--win-accent-content-color) !important;
    --urlbar-popup-url-color: var(--win-accent-content-color) !important;
    --download-progress-fill-color: var(--win-accent-content-color) !important;

    /* Accent Hover Color */
    --button-primary-hover-bgcolor: var(--win-accent-hover-color) !important;
    --checkbox-checked-hover-bgcolor: var(--win-accent-hover-color) !important;

    /* Accent Hover Active Color */
    --button-primary-active-bgcolor: var(--win-accent-active-color) !important;
    --checkbox-checked-active-bgcolor: var(--win-accent-active-color) !important;

    /* Error Color */
    --error-text-color: var(--win-error-color) !important;
    --input-error-border-color: var(--win-error-color) !important;

    /* Others */
    --tab-line-color: Highlight !important;
    --tab-selected-bgcolor: unset !important;
    --tabs-border-color: transparent !important;
    --checkbox-checked-border-color: transparent !important;

    /* Other Defaults */
    --arrowpanel-dimmed: color-mix(in srgb, currentColor 12%, transparent) !important;
    --arrowpanel-dimmed-further: color-mix(in srgb, currentColor 20%, transparent) !important;
    --arrowpanel-dimmed-even-further: color-mix(in srgb, currentColor 27%, transparent) !important;

    --download-progress-flare-color: rgba(255, 255, 255, 0.75) !important;

    --panelview-toolbarbutton-focus-box-shadow: inset 0 0 0 2px var(--focus-outline-color) !important;
  }
  #navigator-toolbox:not(:-moz-lwtheme) {
    background: var(--lwt-accent-color) !important;
  }

  /*- Separator --------------------------------------------------------------*/
  :root:not(:-moz-lwtheme) {
    --arrowpanel-border-color: var(--win-bgcolor) !important;
    --panel-separator-color: var(--win-bgcolor) !important;
  }
  :root[lwt-default-theme-in-dark-mode] {
    --arrowpanel-border-color: var(--win-border-color) !important;
    --panel-separator-color: var(--win-border-color) !important;
  }

  @include Option("userChrome.theme.system_default") {
    @media (-moz-windows-accent-color-in-titlebar) {
      :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme),
      :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) {
        --toolbarseparator-color: color-mix(in srgb, currentColor 20%, transparent) !important; /* As default */
      }
    }
  }

  /*- Proton Tab Selected ----------------------------------------------------*/
  @include NotOption("userChrome.tab.color_like_toolbar") {
    #{system-default-theme()} {
      --win-proton-tab-selected-bgcolor: color-mix(in srgb, var(--win-bgcolor) 5%, var(--win-component-bgcolor));
    }
    :root:not(:-moz-lwtheme) {
      --tab-selected-color: var(--win-proton-tab-selected-bgcolor) !important;
    }
    :root[lwt-default-theme-in-dark-mode] {
      --lwt-selected-tab-background-color: var(--win-proton-tab-selected-bgcolor) !important;
    }
  }

  /*- Menu -------------------------------------------------------------------*/
  html#main-window menupopup:not(:-moz-lwtheme) {
    --menu-color: var(--win-text-color) !important;
    --menu-background-color: var(--win-component-bgcolor) !important;
    --menu-border-color: var(--win-bgcolor) !important;
    --menuitem-hover-background-color: var(--win-hover-bgcolor) !important;
    --menu-disabled-color: var(--win-disabled-color) !important;
    --menuitem-disabled-hover-background-color: var(--win-disabled-bgcolor) !important;
  }

  /*- Toolbar ----------------------------------------------------------------*/
  #{selector.nest(system-default-theme(), "#titlebar")} {
    --button-hover-bgcolor: var(--win-sidebar-button-hover-bgcolor);
    --button-active-bgcolor: var(--win-sidebar-button-hover-active-bgcolor);
    --toolbarbutton-hover-background: var(--win-sidebar-button-hover-bgcolor);
    --toolbarbutton-active-background: var(--win-sidebar-button-hover-active-bgcolor);
  }

  /*- Sidebar ----------------------------------------------------------------*/
  #sidebar-box:not([lwt-sidebar]) {
    appearance: none !important;
  }
  #{selector.nest(system-default-theme(), "#sidebar-box")} {
    --sidebar-background-color: var(--win-sidebar-bgcolor) !important;
    --sidebar-text-color: var(--win-text-color) !important;
    --sidebar-border-color: var(--win-border-color) !important;
  }
  @include Dark {
    .sidebar-panel[style="--newtab-background-color: rgba(43, 42, 51, 1); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"],
      body[lwt-sidebar][style="--newtab-background-color: rgba(43, 42, 51, 1); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"],
      .sidebar-panel[style="--newtab-background-color: rgb(43, 42, 51); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"], /* Nightly */
      body[lwt-sidebar][style="--newtab-background-color: rgb(43, 42, 51); --newtab-text-primary-color: rgba(251, 251, 254, 1); --lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"] {
      /* Only darkmode has more: --newtab-background-color-secondary: rgba(66, 65, 77, 1); */
      --lwt-sidebar-background-color: transparent !important;
      --lwt-sidebar-text-color: var(--win-text-color) !important;
    }
  }

  /*- Panel ------------------------------------------------------------------*/
  #{selector.nest(system-default-theme(), ".subviewbutton")} {
    --button-hover-bgcolor: var(--win-hover-active-bgcolor) !important;
    --button-active-bgcolor: var(--win-button-active-bgcolor) !important;
  }

  $panelZoomButtons: "#appMenu-fxa-label2, #appMenu-zoomReduce-button2, #appMenu-zoomReset-button2, #appMenu-zoomEnlarge-button2, #appMenu-fullscreen-button2";
  #{selector.nest(system-default-theme(), "toolbarbutton.subviewbutton:not([disabled], [open], :active, #{$panelZoomButtons}):is(:hover)")} {
    background-color: var(--win-hover-bgcolor) !important;
  }
  #{selector.nest(system-default-theme(), "toolbarbutton.subviewbutton:not([disabled], #{$panelZoomButtons}):is([open], :hover:active)")} {
    background-color: var(--win-hover-active-bgcolor) !important;
  }

  /*- Others -----------------------------------------------------------------*/
  /* For overwrite */
  :root[lwtheme-mozlightdark]:not([lwthemetextcolor="bright"]):not(:-moz-lwtheme), /* Legacy */
  :root:not(:-moz-lwtheme) {
    /* Light Theme */
    --lwt-accent-color: var(--win-bgcolor) !important;
  }
  @include Dark {
    :root[lwt-default-theme-in-dark-mode][lwthemetextcolor="bright"] {
      --toolbar-bgcolor: var(--win-component-bgcolor) !important; /* Original: rgba(43, 42, 51, 1) */
    }
  }

  #tabbrowser-tabs:not([movingtab])
    > #tabbrowser-arrowscrollbox
    > .tabbrowser-tab
    > .tab-stack
    > .tab-background[multiselected]:not([selected]):not(:-moz-lwtheme),
  :root[lwtheme-mozlightdark] /* Legacy */
    #tabbrowser-tabs:not([movingtab])
    > #tabbrowser-arrowscrollbox
    > .tabbrowser-tab
    > .tab-stack
    > .tab-background[multiselected]:not([selected]),
  :root:is([style*="--lwt-accent-color: rgb(240, 240, 244); --lwt-text-color: rgba(21, 20, 26);"], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"])
     #tabbrowser-tabs:not([movingtab])
       > #tabbrowser-arrowscrollbox
       > .tabbrowser-tab
       > .tab-stack
       > .tab-background[multiselected]:not([selected]) {
    background-image: linear-gradient(
        color-mix(in srgb, currentColor 11%, transparent),
        color-mix(in srgb, currentColor 11%, transparent)
      ),
      linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) !important;
  }
}

/*= Windows10 - Titlebar accent color ========================================*/
@media (-moz-windows-accent-color-in-titlebar) {
  /* Tab Bar */
  :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) .titlebar-color,
  :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) .titlebar-color {
    color: -moz-accent-color-foreground;
    background-color: -moz-accent-color;
  }

  :root[tabsintitlebar]:not(:-moz-window-inactive, :-moz-lwtheme) .toolbar-items,
  :root[tabsintitlebar][lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) .toolbar-items {
    --toolbarbutton-icon-fill: currentColor;
    --toolbarbutton-hover-background: color-mix(in srgb, -moz-accent-color-foreground 10%, transparent);
    --toolbarbutton-active-background: color-mix(in srgb, -moz-accent-color-foreground 15%, transparent);
  }
}