/*= Hotfix #98 ===============================================================*/
/* Hidden Tab Panel Padding */
#allTabsMenu-hiddenTabsView .all-tabs-item {
  margin-inline: 8px;
  border-radius: 4px;
}

/*= Remote Tabs Panel's Bottom Padding =======================================*/
#PanelUI-remotetabs #PanelUI-remotetabs-main {
  margin-bottom: 6px;
}

/*= Identity Popup Icon Crop =================================================*/
.identity-popup-security-connection.identity-button {
  padding-block: 1px !important;
}

/*= Zoom in button's plus icon horizontal rate ===============================*/
#customization-palette-container,
#customization-panel-container,
#widget-overflow-mainView {
  #zoom-in-button > .toolbarbutton-icon {
    padding-inline-start: 0px !important;
  }
}

/*= Subview button, Menu's right padding #597 ================================*/
.subviewbutton.toolbaritem-combined-buttons:not([shortcut]),
.subviewbutton.subviewbutton-nav:not([shortcut]),
menu.subviewbutton {
  padding-inline-end: 0 !important;
}
#allTabsMenu-allTabsView .subviewbutton.subviewbutton-nav:not([shortcut]) {
  padding-inline-end: var(--arrowpanel-menuitem-padding-inline) !important; // #717
}

/*= First visible tab margin at maximized #332 ===============================*/
:root:is([tabsintitlebar="true"], [customtitlebar="true"])[sizemode="maximized"] #TabsToolbar {
  margin-left: -1px;
}

/*= Disabled menu background color ===========================================*/
menuitem,
menu {
  &[disabled="true"] {
    background-color: transparent !important;
  }
}

/*= Remove Tab Border ========================================================*/
@mixin noneBorder {
  /* Nightly 96:  1px solid var(--tab-line-color, rgba(128,128,142,0.9)); */
  border: unset !important;
}

@include Option("userChrome.tab.connect_to_window") {
  /* TARGET: original, photon */
  // Light Theme
  #TabsToolbar:not([brighttext])
    #tabbrowser-tabs:not([noshadowfortests])
    .tabbrowser-tab:is([visuallyselected], [multiselected])
    > .tab-stack
    > .tab-background {
    @include noneBorder;
  }
  @include lwtheme {
    // Dark Theme
    #TabsToolbar[brighttext]
      #tabbrowser-tabs:not([noshadowfortests])
      .tabbrowser-tab:is([visuallyselected], [multiselected])
      > .tab-stack
      > .tab-background {
      @include noneBorder;
    }

    #TabsToolbar #firefox-view-button[open] > .toolbarbutton-icon,
    .tab-background[selected] {
      // Nightly 102: outline: 1px solid var(--lwt-tab-line-color, var(--lwt-tabs-border-color, currentColor));
      outline-color: transparent !important;
    }
  }
  .keyboard-focused-tab > .tab-stack > .tab-background,
  .tabbrowser-tab:focus:not([aria-activedescendant]) > .tab-stack > .tab-background {
    outline: var(--focus-outline) !important;
  }
}

/*= Tab Separator Color ======================================================*/
#TabsToolbar,
#nav-bar {
  --toolbarseparator-color: color-mix(in srgb, currentColor 20%, transparent); /* 60% at v105 */
}


/*= Light Weight Theme =======================================================*/
/* Header Image */
:root[lwtheme-image] > body {
  // Linux compatibility:
  // :root[tabsintitlebar][sizemode="normal"]:not([gtktiledwindow="true"]) {
  //    appearance: auto;
  // }
  background-image: var(--lwt-header-image) !important; /* Original: var(--lwt-header-image) */
  background-repeat: no-repeat !important;
  background-position: right top !important;
  background-color: var(--lwt-accent-color, Window) !important;
  &:-moz-window-inactive {
    background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color)) !important;
  }

  // For high-resolution screen's image ratio
  @media (min-width: 2500px) {
    background-size: contain;

    @include Option("userChrome.compatibility.covered_header_image") {
      background-size: cover;
    }
  }

  // lwtheme compatibility
  @include lwtheme {
    #navigator-toolbox {
      background-image: var(--lwt-header-image), var(--lwt-additional-images) !important;
      background-repeat: var(--lwt-background-tiling) !important;
      background-position: var(--lwt-background-alignment) !important;
      background-color: unset !important; /* Original:  var(--lwt-accent-color) */
    }
  }
}

/* Navbar Border */
@include lwtheme {
  #navigator-toolbox {
    --tabs-border-color: rgba(0, 0, 0, 0.4); /* Legacy: v96, (0, 0, 0, 0.3) -> (0, 0, 0, 0.4)  */
    --lwt-tabs-border-color: rgba(0, 0, 0, 0.4);
  }
}

#main-window {
  background-color: WindowFrame !important;
}
:root[lwtheme][lwtheme-image] #customization-container {
  background-image: none !important;
}
#customization-container {
  background-color: transparent !important; /* Original: color-mix(in srgb, -moz-dialog 85%, white) */
}
:root:not([lwtheme]) #customization-container {
  background-color: var(--toolbar-non-lwt-bgcolor) !important;
}

/*= Findbar Border Color =====================================================*/
html|input.findbar-textbox {
  border: 1px solid var(--input-border-color, var(--toolbar-field-border-color, ThreeDShadow)) !important; /* Original: 1px solid var(--input-border-color, var(--toolbar-field-border-color)) */
}

/*= Drop Indicator Color #473 ================================================*/
treechildren::-moz-tree-cell-text(primary, dropOn),
treechildren::-moz-tree-drop-feedback,
vbox[part="drop-indicator-bar"] > image[part="drop-indicator"] {
  background-color: var(--button-primary-bgcolor, var(--focus-outline-color)) !important; /* Original: SelectedItem or AccentColor*/
}

#bookmarksPanel[lwt-sidebar="true"] {
  --focus-outline-color: var(--in-content-focus-outline-color, AccentColor) !important;
}

/*= Firefox View Border #498 =================================================*/
@mixin _firefox_view_border_remove() {
  #tabbrowser-tabs {
    border-inline-start: none !important;
    padding-inline-start: var(--tab-overflow-pinned-tabs-width) !important;
    margin-inline-start: 0 !important;
  }
}

:root:not([privatebrowsingmode=temporary])[firefoxviewhidden] #firefox-view-button + {
  @include _firefox_view_border_remove;
}

@include Option("userChrome.tab.static_separator") {
  // #531
  @include _firefox_view_border_remove;
}

/*= Menubar rounding #814 ====================================================*/
#main-menubar {
  --panel-border-radius: var(--arrowpanel-border-radius);
}

/*= Infobar Align #858 =======================================================*/
.container.infobar {
  align-items: center !important;
}

/*= Inactive transparent #882 ================================================*/
:root:is([tabsintitlebar], [customtitlebar]) #titlebar:-moz-window-inactive,
:root:is([tabsintitlebar], [customtitlebar]) #toolbar-menubar:-moz-window-inactive,
:root:is([tabsintitlebar], [customtitlebar]) #TabsToolbar:-moz-window-inactive {
  opacity: 1 !important;
  color: color-mix(in srgb, currentColor calc(var(--inactive-titlebar-opacity, 0.75) * 100%), transparent) !important;
  --inactive-toolbarbutton-icon-fill-opacity: calc(var(--toolbarbutton-icon-fill-opacity, 1) * var(--inactive-titlebar-opacity, 0.75));

  .toolbarbutton-icon {
    fill-opacity: var(--inactive-toolbarbutton-icon-fill-opacity, 1);
  }
}

/*= Tabpreviw transparent #890 ===============================================*/
#tab-preview-panel {
  --panel-background: var(--arrowpanel-background) !important; /* Original: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)) */
  --panel-color: var(--arrowpanel-color) !important; /* Original: var(--tab-selected-textcolor, var(--toolbar-color)) */
}

/*= Design token =============================================================*/
:root, :host {
  --button-color: var(--button-text-color);
  --button-bgcolor: var(--button-background-color);
  --button-hover-bgcolor: var(--button-background-color-hover);
  --button-active-bgcolor: var(--button-background-color-active);

  --button-primary-color: var(--button-text-color-primary);
  --button-primary-bgcolor: var(--button-background-color-primary);
  --button-primary-hover-bgcolor: var(--button-background-color-primary-hover);
  --button-primary-active-bgcolor: var(--button-background-color-primary-active);
}
