/*= Windows10 - UWP like color ===============================================*/
@include OS($win10) {
  @include not_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-separator-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-shortcut-text-color: #757575;
    --win-error-color: #b31616;
    --win-red-border-color: #ff4343;
    @include AccentColor {
      --win-accent-foreground-color: #{$accentTextColor};
      --win-accent-color: color-mix(in srgb, rgba(0, 0, 0, 0.8) 10%, #{$accentColor});
      --win-accent-content-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 15%, #{$accentColor});
      --win-accent-hover-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 27%, #{$accentColor});
      --win-accent-active-color: #{$accentColor};
    }
    @include Option("userChrome.compatibility.os.win11") {
      --win-text-color: #1A1A1A;
      --win-bgcolor: #E8E8E8;
      --win-hover-bgcolor: #EAEAEA; /* also button-bgcolor */ // or #EFEFEF
      --win-disabled-color: #9F9F9F;
      --win-hover-active-bgcolor: #D9D9D9; /* also button-active-color */
      --win-button-hover-bgcolor: #D9D9D9;
      --win-button-active-bgcolor: rgba(46, 46, 46, 0.66);
      --win-component-bgcolor: #F8F8F8;
      --win-border-color: #E9E9E9;
      --win-tab-separator-color: #DADADA;
      --win-sidebar-bgcolor: #FFFFFF;
      --win-button-border: var(--win-border-color);

      --win11-chrome-separator-color: #D6D6D6;
      --win11-tab-border-color: #DADADA;
    }
  }
  @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-separator-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-shortcut-text-color: #adadad;
      --win-error-color: #ffb900;
      --win-red-border-color: #ff4343;
      @include AccentColor {
        --win-accent-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 20%, #{$accentColor});
        --win-accent-content-color: color-mix(in srgb, rgba(255, 255, 255, 0.8) 35%, #{$accentColor});
        --win-accent-hover-color: color-mix(in srgb, rgba(0, 0, 0, 0.8) 5%, #{$accentColor});
        --win-accent-active-color: #{$accentColor};
      }

      @include Option("userChrome.compatibility.os.win11") {
        --win-bgcolor: #202020;
        --win-hover-bgcolor: #383838; /* also button-bgcolor */
        --win-disabled-color: #797979;
        --win-hover-active-bgcolor: #454545; /* also button-active-color */
        --win-button-hover-bgcolor: #454545;
        --win-button-active-bgcolor: rgba(46, 46, 46, 0.66);
        --win-field-bgcolor: #232323;
        --win-component-bgcolor: #2C2C2C;
        --win-border-color: #3D3D3D;
        --win-tab-separator-color: #323232;
        --win-sidebar-bgcolor: var(--win-component-bgcolor);
        --win-button-border: var(--win-border-color);

        --win11-chrome-separator-color: #3A3A3A;
        --win11-tab-border-color: #1D1D1D;
      }
    }
  }

  #{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-shortcut-text-color) !important;
    --panel-description-color: var(--win-shortcut-text-color) !important;

    /* Title Background */
    --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;

    /* Border Color */
    // --menu-border-color: var(--win-border-color) !important;

    /* Separator */
    --toolbarseparator-color: var(--win-tab-separator-color) !important;

    /* Field Background 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 Foreground Color */
    --button-primary-color: var(--win-accent-foreground-color) !important;
    --checkbox-checked-color: var(--win-accent-foreground-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 */
    @include AccentColor("Highlight") {
      --tab-line-color: #{$accentColor} !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;
  }
  @include not_lwtheme {
    #navigator-toolbox {
      background: var(--lwt-accent-color) !important;
    }
  }

  /*- Separator --------------------------------------------------------------*/
  :root:is(#main-window)#{$not_lwtheme} {
    --arrowpanel-border-color: var(--win-bgcolor) !important;
    --panel-separator-color: var(--win-bgcolor) !important;
  }
  @include Dark {
    :root:is(#main-window)#{$not_lwtheme},
    :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:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive)#{$not_lwtheme},
      :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) {
        --toolbarseparator-color: color-mix(in srgb, currentColor 20%, transparent) !important; /* As default */
      }
    }
  }

  @include Option("userChrome.compatibility.os.win11") {
    #{system-default-theme()} {
      --chrome-content-separator-color: var(--win11-chrome-separator-color) !important;
    }
    #nav-bar {
      --lwt-tabs-border-color: var(--win11-tab-border-color) !important;
    }
  }

  /*- 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_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 -------------------------------------------------------------------*/
  @include not_lwtheme {
    html#main-window menupopup {
      --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")},
  #{selector.nest(system-default-theme(), "#toolbar-menubar")},
  #{selector.nest(system-default-theme(), "#TabsToolbar")} {
    --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*="--lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"],
    html[lwt-sidebar][style*="--lwt-sidebar-background-color: rgb(56, 56, 61); --lwt-sidebar-text-color: rgba(249, 249, 250, 1);"],
    body[lwt-sidebar][style*="--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: var(--win-sidebar-bgcolor) !important;
      --lwt-sidebar-text-color: var(--win-text-color) !important;
      --panel-separator-color: var(--win-border-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}, .unified-extensions-item-menu-button):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_lwtheme}, /* Legacy */
  :root#{$not_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) */
    }
  }

  :root#{$not_lwtheme}
  #tabbrowser-tabs:not([movingtab])
    > #pinned-tabs-container
    > .tabbrowser-tab
    > .tab-stack
    > .tab-background[multiselected]:not([selected]),
  :root[lwtheme-mozlightdark] /* Legacy */
    #tabbrowser-tabs:not([movingtab])
    > #pinned-tabs-container
    > .tabbrowser-tab
    > .tab-stack
    > .tab-background[multiselected]:not([selected]),
  #{built-in-default-theme()}
     #tabbrowser-tabs:not([movingtab])
       > #pinned-tabs-container
       > .tabbrowser-tab
       > .tab-stack
       > .tab-background[multiselected]:not([selected]),
  :root#{$not_lwtheme}
  #tabbrowser-tabs:not([movingtab])
    > #tabbrowser-arrowscrollbox
    > .tabbrowser-tab
    > .tab-stack
    > .tab-background[multiselected]:not([selected]),
  :root[lwtheme-mozlightdark] /* Legacy */
    #tabbrowser-tabs:not([movingtab])
    > #tabbrowser-arrowscrollbox
    > .tabbrowser-tab
    > .tab-stack
    > .tab-background[multiselected]:not([selected]),
  #{built-in-default-theme()}
     #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:is([tabsintitlebar], [customtitlebar]):not(:-moz-window-inactive)#{$not_lwtheme},
  :root:is([tabsintitlebar], [customtitlebar])[lwt-default-theme-in-dark-mode]:not(:-moz-window-inactive) {
    .titlebar-color,
    .browser-titlebar {
      @include AccentColor {
        color: $accentTextColor !important;
        background-color: $accentColor !important; // TODO: Use $accentBorder
      }
    }

    .toolbar-items {
      --toolbarbutton-icon-fill: currentColor;
      @include AccentColor {
        --toolbarbutton-hover-background: color-mix(in srgb, #{$accentTextColor} 10%, transparent);
        --toolbarbutton-active-background: color-mix(in srgb, #{$accentTextColor} 15%, transparent);
      }
    }
  }
}