/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@namespace html url("http://www.w3.org/1999/xhtml");
@namespace svg url("http://www.w3.org/2000/svg");

:root {
  --identity-popup-expander-width: 38px;
  --panelui-subview-transition-duration: 150ms;
  --lwt-additional-images: none;
  --lwt-background-alignment: right top;
  --lwt-background-tiling: no-repeat;
}

:root:-moz-lwtheme {
  color: var(--lwt-text-color) !important;
}

%ifndef MOZ_PHOTON_THEME
:root:-moz-lwtheme:not([customization-lwtheme]) {
%else
:root:-moz-lwtheme {
%endif
  background-color: var(--lwt-accent-color) !important;
  background-image: var(--lwt-header-image), var(--lwt-additional-images) !important;
  background-position: var(--lwt-background-alignment) !important;
  background-repeat: var(--lwt-background-tiling) !important;
}

#main-window:not([chromehidden~="toolbar"]) {
%ifdef XP_MACOSX
  min-width: 335px;
%else
  min-width: 300px;
%endif
}

#main-window[customize-entered] {
  min-width: -moz-fit-content;
}

searchbar {
  -moz-binding: url("chrome://browser/content/search/search.xml#searchbar");
}

/* Prevent shrinking the page content to 0 height and width */
.browserStack > browser {
  min-height: 25px;
  min-width: 25px;
}

.browserStack > browser {
  -moz-binding: url("chrome://browser/content/tabbrowser.xml#tabbrowser-browser");
}

.browserStack > browser[remote="true"] {
  -moz-binding: url("chrome://browser/content/tabbrowser.xml#tabbrowser-remote-browser");
}

toolbar[customizable="true"] {
  -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar");
}

%ifdef XP_MACOSX
#toolbar-menubar {
  -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar-menubar-stub");
}
%endif

#toolbar-menubar[autohide="true"] {
  -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar-menubar-autohide");
}

#addon-bar {
  -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#addonbar-delegating");
  visibility: visible;
  margin: 0;
  height: 0 !important;
  overflow: hidden;
  padding: 0;
  border: 0 none;
}

#addonbar-closebutton {
  visibility: visible;
  height: 0 !important;
}

#status-bar {
  height: 0 !important;
  -moz-binding: none;
  padding: 0;
  margin: 0;
}

panelmultiview {
  -moz-binding: url("chrome://browser/content/customizableui/panelUI.xml#panelmultiview");
}

photonpanelmultiview {
  -moz-binding: url("chrome://browser/content/customizableui/panelUI.xml#photonpanelmultiview");
}

panelview {
  -moz-binding: url("chrome://browser/content/customizableui/panelUI.xml#panelview");
  -moz-box-orient: vertical;
}

panel[hidden] panelmultiview,
panel[hidden] photonpanelmultiview,
panel[hidden] panelview {
  -moz-binding: none;
}

.panel-mainview {
  transition: transform var(--panelui-subview-transition-duration);
}

panelview:not([mainview]):not([current]) {
  transition: visibility 0s linear var(--panelui-subview-transition-duration);
  visibility: collapse;
}

panelview[mainview] > .panel-header,
panelview:not([title]) > .panel-header {
  display: none;
}

tabbrowser {
  -moz-binding: url("chrome://browser/content/tabbrowser.xml#tabbrowser");
}

.tabbrowser-tabs {
  -moz-binding: url("chrome://browser/content/tabbrowser.xml#tabbrowser-tabs");
}

#tabbrowser-tabs:not([overflow="true"]) ~ #alltabs-button,
#tabbrowser-tabs:not([overflow="true"]) + #new-tab-button,
#tabbrowser-tabs[overflow="true"] > .tabbrowser-arrowscrollbox > .tabs-newtab-button,
#TabsToolbar[currentset]:not([currentset*="tabbrowser-tabs,new-tab-button"]) > #tabbrowser-tabs > .tabbrowser-arrowscrollbox > .tabs-newtab-button,
#TabsToolbar[customizing="true"] > #tabbrowser-tabs > .tabbrowser-arrowscrollbox > .tabs-newtab-button {
  visibility: collapse;
}

#tabbrowser-tabs:not([overflow="true"])[using-closing-tabs-spacer] ~ #alltabs-button {
  visibility: hidden; /* temporary space to keep a tab's close button under the cursor */
}

.tabbrowser-tab {
  -moz-binding: url("chrome://browser/content/tabbrowser.xml#tabbrowser-tab");
}

.tabbrowser-tab:not([pinned]) {
  -moz-box-flex: 100;
  max-width: 210px;
  min-width: 100px;
  width: 0;
  transition: min-width 100ms ease-out,
              max-width 100ms ease-out;
}

.tabbrowser-tab:not([pinned]):not([fadein]) {
  max-width: 0.1px;
  min-width: 0.1px;
  visibility: hidden;
}

.tab-close-button,
.tab-background {
  /* Explicitly set the visibility to override the value (collapsed)
   * we inherit from #TabsToolbar[collapsed] upon opening a browser window. */
  visibility: visible;
}

.tab-close-button[fadein],
.tab-background[fadein] {
  /* This transition is only wanted for opening tabs. */
  transition: visibility 0ms 25ms;
}

.tab-close-button:not([fadein]),
.tab-background:not([fadein]) {
  visibility: hidden;
}

.tab-label:not([fadein]),
.tab-throbber:not([fadein]),
.tab-icon-image:not([fadein]) {
  display: none;
}

.tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {
  position: fixed !important;
  display: block; /* position:fixed already does this (bug 579776), but let's be explicit */
}

.tabbrowser-tabs[movingtab] > .tabbrowser-tab[selected] {
  position: relative;
  z-index: 2;
  pointer-events: none; /* avoid blocking dragover events on scroll buttons */
}

.tabbrowser-tab[tabdrop-samewindow],
.tabbrowser-tabs[movingtab] > .tabbrowser-tab[fadein]:not([selected]) {
  transition: transform 200ms var(--animation-easing-function);
}

.new-tab-popup,
#alltabs-popup {
  -moz-binding: url("chrome://browser/content/tabbrowser.xml#tabbrowser-alltabs-popup");
}

toolbar[printpreview="true"] {
  -moz-binding: url("chrome://global/content/printPreviewBindings.xml#printpreviewtoolbar");
}

toolbar[overflowable] > .customization-target {
  overflow: hidden;
}

toolbar:not([overflowing]) > .overflow-button,
toolbar[customizing] > .overflow-button {
  display: none;
}

window:not([chromehidden~="toolbar"]) #nav-bar[nonemptyoverflow] > .overflow-button,
#nav-bar[customizing][photon-structure] > .overflow-button {
  display: -moz-box;
}

/* The ids are ugly, but this should be reasonably performant, and
 * using a tagname as the last item would be less so.
 */
#widget-overflow-list:empty + #widget-overflow-fixed-separator,
#widget-overflow:not([hasfixeditems]) #widget-overflow-fixed-separator {
  display: none;
}


%ifdef CAN_DRAW_IN_TITLEBAR
#main-window:not([chromemargin]) > #titlebar,
#main-window[inFullscreen] > #titlebar,
#main-window[inFullscreen] .titlebar-placeholder,
#main-window:not([tabsintitlebar]) .titlebar-placeholder {
  display: none;
}

#titlebar {
  -moz-binding: url("chrome://global/content/bindings/general.xml#windowdragbox");
  -moz-window-dragging: drag;
}

#titlebar-spacer {
  pointer-events: none;
}

#main-window[tabsintitlebar] #titlebar-buttonbox {
  position: relative;
}

#titlebar-buttonbox {
  -moz-appearance: -moz-window-button-box;
}

#personal-bookmarks {
  -moz-window-dragging: inherit;
}

toolbarpaletteitem {
  -moz-window-dragging: no-drag;
}

%ifdef XP_MACOSX
#titlebar-fullscreen-button {
  -moz-appearance: -moz-mac-fullscreen-button;
}

/* Fullscreen and caption buttons don't move with RTL on OS X so override the automatic ordering. */
#titlebar-secondary-buttonbox:-moz-locale-dir(ltr),
#titlebar-buttonbox-container:-moz-locale-dir(rtl),
.titlebar-placeholder[type="fullscreen-button"]:-moz-locale-dir(ltr),
.titlebar-placeholder[type="caption-buttons"]:-moz-locale-dir(rtl) {
  -moz-box-ordinal-group: 1000;
}

#titlebar-secondary-buttonbox:-moz-locale-dir(rtl),
#titlebar-buttonbox-container:-moz-locale-dir(ltr),
.titlebar-placeholder[type="caption-buttons"]:-moz-locale-dir(ltr),
.titlebar-placeholder[type="fullscreen-button"]:-moz-locale-dir(rtl) {
  -moz-box-ordinal-group: 0;
}

%else
/* On non-OSX, these should be start-aligned */
#titlebar-buttonbox-container {
  -moz-box-align: start;
}
%endif

%if !defined(MOZ_WIDGET_GTK)
#TabsToolbar > .private-browsing-indicator {
  -moz-box-ordinal-group: 1000;
}
%endif

%ifdef XP_WIN
#main-window[sizemode="maximized"] #titlebar-buttonbox {
  -moz-appearance: -moz-window-button-box-maximized;
}

#main-window[tabletmode] #titlebar-min,
#main-window[tabletmode] #titlebar-max {
  display: none !important;
}

#main-window[tabsintitlebar] #TabsToolbar,
#main-window[tabsintitlebar] #toolbar-menubar,
#main-window[tabsintitlebar] #navigator-toolbox > toolbar:-moz-lwtheme {
  -moz-window-dragging: drag;
}
%endif

%endif

#main-window[inFullscreen][inDOMFullscreen] #navigator-toolbox,
#main-window[inFullscreen][inDOMFullscreen] #fullscr-toggler,
#main-window[inFullscreen][inDOMFullscreen] #sidebar-box,
#main-window[inFullscreen][inDOMFullscreen] #sidebar-splitter,
#main-window[inFullscreen]:not([OSXLionFullscreen]) toolbar:not([fullscreentoolbar=true]),
#main-window[inFullscreen] #global-notificationbox,
#main-window[inFullscreen] #high-priority-global-notificationbox {
  visibility: collapse;
}

#navigator-toolbox[fullscreenShouldAnimate] {
  transition: 1.5s margin-top ease-out;
}

/* Rules to help integrate SDK widgets */
toolbaritem[sdkstylewidget="true"] > toolbarbutton,
toolbarpaletteitem > toolbaritem[sdkstylewidget="true"] > iframe,
toolbarpaletteitem > toolbaritem[sdkstylewidget="true"] > .toolbarbutton-text {
  display: none;
}

toolbarpaletteitem:-moz-any([place="palette"], [place="menu-panel"]) > toolbaritem[sdkstylewidget="true"] > toolbarbutton {
  display: -moz-box;
}

toolbarpaletteitem > toolbaritem[sdkstylewidget="true"][cui-areatype="toolbar"] > .toolbarbutton-text {
  display: -moz-box;
}

.webextension-browser-action > .toolbarbutton-badge-stack > .toolbarbutton-icon {
  height: 16px;
  width: 16px;
}

@media not all and (min-resolution: 1.1dppx) {
  .webextension-browser-action {
    list-style-image: var(--webextension-toolbar-image, inherit);
  }

  .webextension-browser-action:-moz-lwtheme-brighttext {
    list-style-image: var(--webextension-toolbar-image-light, inherit);
  }

  .webextension-browser-action:-moz-lwtheme-darktext {
    list-style-image: var(--webextension-toolbar-image-dark, inherit);
  }

  .webextension-browser-action[cui-areatype="menu-panel"],
  toolbarpaletteitem[place="palette"] > .webextension-browser-action {
    list-style-image: var(--webextension-menupanel-image, inherit);
  }

  .webextension-browser-action[cui-areatype="menu-panel"],
  toolbarpaletteitem[place="palette"] > .webextension-browser-action:-moz-lwtheme-brighttext {
    list-style-image: var(--webextension-menupanel-image-light, inherit);
  }

  .webextension-browser-action[cui-areatype="menu-panel"],
  toolbarpaletteitem[place="palette"] > .webextension-browser-action:-moz-lwtheme-darktext {
    list-style-image: var(--webextension-menupanel-image-dark, inherit);
  }

  .webextension-menuitem {
    list-style-image: var(--webextension-menuitem-image, inherit);
  }
}

@media (min-resolution: 1.1dppx) {
  .webextension-browser-action {
    list-style-image: var(--webextension-toolbar-image-2x, inherit);
  }

  .webextension-browser-action:-moz-lwtheme-brighttext {
    list-style-image: var(--webextension-toolbar-image-2x-light, inherit);
  }

  .webextension-browser-action:-moz-lwtheme-darktext {
    list-style-image: var(--webextension-toolbar-image-2x-dark, inherit);
  }

  .webextension-browser-action[cui-areatype="menu-panel"],
  toolbarpaletteitem[place="palette"] > .webextension-browser-action {
    list-style-image: var(--webextension-menupanel-image-2x, inherit);
  }

  .webextension-browser-action[cui-areatype="menu-panel"],
  toolbarpaletteitem[place="palette"] > .webextension-browser-action:-moz-lwtheme-brighttext {
    list-style-image: var(--webextension-menupanel-image-2x-light, inherit);
  }

  .webextension-browser-action[cui-areatype="menu-panel"],
  toolbarpaletteitem[place="palette"] > .webextension-browser-action:-moz-lwtheme-darktext {
    list-style-image: var(--webextension-menupanel-image-2x-dark, inherit);
  }

  .webextension-menuitem {
    list-style-image: var(--webextension-menuitem-image-2x, inherit);
  }
}

toolbarbutton.webextension-menuitem > .toolbarbutton-icon {
  width: 16px;
  height: 16px;
}

toolbarpaletteitem[removable="false"] {
  opacity: 0.5;
  cursor: default;
}

%ifndef XP_MACOSX
toolbarpaletteitem[place="palette"],
toolbarpaletteitem[place="menu-panel"],
toolbarpaletteitem[place="toolbar"] {
  -moz-user-focus: normal;
}
%endif

#bookmarks-toolbar-placeholder,
toolbarpaletteitem > #personal-bookmarks > #PlacesToolbar,
#personal-bookmarks[cui-areatype="menu-panel"] > #PlacesToolbar,
#personal-bookmarks[cui-areatype="toolbar"][overflowedItem=true] > #PlacesToolbar {
  display: none;
}

#PlacesToolbarDropIndicatorHolder {
  position: absolute;
  top: 25%;
}

toolbarpaletteitem > #personal-bookmarks > #bookmarks-toolbar-placeholder,
#personal-bookmarks[cui-areatype="menu-panel"] > #bookmarks-toolbar-placeholder,
#personal-bookmarks[cui-areatype="toolbar"][overflowedItem=true] > #bookmarks-toolbar-placeholder {
  display: -moz-box;
}

#nav-bar-customization-target > #personal-bookmarks,
toolbar:not(#TabsToolbar) > #wrapper-personal-bookmarks,
toolbar:not(#TabsToolbar) > #personal-bookmarks {
  -moz-box-flex: 1;
}

#zoom-controls[cui-areatype="toolbar"]:not([overflowedItem=true]) > #zoom-reset-button > .toolbarbutton-text {
  display: -moz-box;
}

#reload-button:not([displaystop]) + #stop-button,
#reload-button[displaystop] {
  visibility: collapse;
}

/* The reload-button is only disabled temporarily when it becomes visible
   to prevent users from accidentally clicking it. We don't however need
   to show this disabled state, as the flicker that it generates is short
   enough to be visible but not long enough to explain anything to users. */
#reload-button[disabled]:not(:-moz-window-inactive) > .toolbarbutton-icon {
  opacity: 1 !important;
}

#PanelUI-feeds > .feed-toolbarbutton:-moz-locale-dir(rtl) {
  direction: rtl;
}

#appMenu_historyMenu > .bookmark-item,
#appMenu-library-recentlyClosedTabs > .panel-subview-body > .bookmark-item,
#appMenu-library-recentlyClosedWindows > .panel-subview-body > .bookmark-item,
#panelMenu_bookmarksMenu > .bookmark-item {
  max-width: none;
}

#main-window:-moz-lwtheme {
  background-repeat: no-repeat;
  background-position: top right;
}

%ifdef XP_MACOSX
#main-window[inFullscreen="true"] {
  padding-top: 0; /* override drawintitlebar="true" */
}
%endif

:root[lwthemefooter=true] #browser-bottombox:-moz-lwtheme {
  background-repeat: no-repeat;
  background-position: bottom left;
  background-color: var(--lwt-accent-color);
  background-image: var(--lwt-footer-image);
}

/* Hide menu elements intended for keyboard access support */
#main-menubar[openedwithkey=false] .show-only-for-keyboard {
  display: none;
}

/* ::::: location bar & search bar ::::: */

#urlbar-container {
  min-width: 50ch;
}

#search-container {
  min-width: 25ch;
}

#urlbar,
.searchbar-textbox {
  /* Setting a width and min-width to let the location & search bars maintain
     a constant width in case they haven't be resized manually. (bug 965772) */
  width: 1px;
  min-width: 1px;
}

#urlbar {
  -moz-binding: url(chrome://browser/content/urlbarBindings.xml#urlbar);
}

/* Display URLs left-to-right but right aligned in RTL mode. */
html|input.urlbar-input:-moz-locale-dir(rtl) {
  direction: ltr !important;
  text-align: right !important;
}

/* Make sure that the location bar's alignment in RTL mode changes according
   to the input box direction if the user switches the text direction using
   cmd_switchTextDirection (which applies a dir attribute to the <input>). */
html|input.urlbar-input[dir=ltr]:-moz-locale-dir(rtl) {
  text-align: left !important;
}

/*
 * Display visual cue that browser is under remote control by Marionette.
 * This is to help users visually distinguish a user agent session that
 * is under remote control from those used for normal browsing sessions.
 *
 * Attribute is controlled by browser.js:/gRemoteControl.
 */
#main-window[remotecontrol] #urlbar {
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 25px,
    rgba(255,255,255,.3) 25px,
    rgba(255,255,255,.3) 50px);
  background-color: rgba(255,170,68,.8);
  color: black;
}
#main-window[remotecontrol] #urlbar #identity-box {
  background: white;
}

/* Fade out URL on overflow */
html|input.urlbar-input[textoverflow]:not([focused]) {
  /* Don't need to worry about RTL here since we use direction:ltr for the
     input field. */
  mask-image: linear-gradient(to left, transparent, black 3em);
}

/* Apply crisp rendering for favicons at exactly 2dppx resolution */
@media (resolution: 2dppx) {
  .searchbar-engine-image {
    image-rendering: -moz-crisp-edges;
  }
}

/* Always show URLs LTR. */
.ac-url-text:-moz-locale-dir(rtl),
.ac-title-text[lookslikeurl]:-moz-locale-dir(rtl) {
  direction: ltr !important;
}

/* For non-action items, hide the action text; for action items, hide the URL
   text. */
.ac-url[actiontype],
.ac-action:not([actiontype]) {
  display: none;
}

/* Never show a scrollbar for the Location Bar popup.  This overrides the
   richlistbox inline overflow: auto style.*/
#PopupAutoCompleteRichResult > richlistbox > scrollbox {
  overflow: hidden !important;
}

/* For action items in a noactions popup, show the URL text and hide the action
   text and type icon. */
#PopupAutoCompleteRichResult[noactions] > richlistbox > richlistitem.overridable-action > .ac-url {
  display: -moz-box;
}
#PopupAutoCompleteRichResult[noactions] > richlistbox > richlistitem.overridable-action > .ac-action {
  display: none;
}
#PopupAutoCompleteRichResult[noactions] > richlistbox > richlistitem.overridable-action > .ac-type-icon {
  list-style-image: none;
}

#urlbar:not([actiontype="switchtab"]):not([actiontype="extension"]) > #urlbar-display-box,
#urlbar:not([actiontype="switchtab"]) > #urlbar-display-box > #switchtab,
#urlbar:not([actiontype="extension"]) > #urlbar-display-box > #extension {
  display: none;
}

#PopupAutoComplete > richlistbox > richlistitem > .ac-type-icon,
#PopupAutoComplete > richlistbox > richlistitem > .ac-site-icon,
#PopupAutoComplete > richlistbox > richlistitem > .ac-tags,
#PopupAutoComplete > richlistbox > richlistitem > .ac-separator,
#PopupAutoComplete > richlistbox > richlistitem > .ac-url {
  display: none;
}

#PopupAutoComplete[firstresultstyle="insecureWarning"] {
  min-width: 200px;
}

#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] {
  -moz-binding: url("chrome://global/content/bindings/autocomplete.xml#autocomplete-richlistitem-insecure-field");
  height: auto;
}

#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-site-icon {
  display: initial;
}

#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-title > .ac-text-overflow-container > .ac-title-text {
  text-overflow: initial;
  white-space: initial;
}

#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-title > label {
  margin-inline-start: 0;
}

#PopupSearchAutoComplete {
  -moz-binding: url("chrome://browser/content/search/search.xml#browser-search-autocomplete-result-popup");
}

/* Overlay a badge on top of the icon of additional open search providers
   in the search panel. */
.addengine-item > .button-box > .button-icon,
.addengine-item[type="menu"] > .button-box > .box-inherit > .button-icon {
  -moz-binding: url("chrome://browser/content/search/search.xml#addengine-icon");
  display: -moz-stack;
}

#PopupAutoCompleteRichResult {
  -moz-binding: url("chrome://browser/content/urlbarBindings.xml#urlbar-rich-result-popup");
}

#PopupAutoCompleteRichResult.showSearchSuggestionsNotification {
  transition: height 100ms;
}

#PopupAutoCompleteRichResult > deck[anonid="search-suggestions-notification"] {
  display: none;
  transition: margin-top 100ms;
}

#PopupAutoCompleteRichResult.showSearchSuggestionsNotification > deck[anonid="search-suggestions-notification"] {
  display: -moz-deck;
}

#PopupAutoCompleteRichResult > richlistbox {
  transition: height 100ms;
}

#PopupAutoCompleteRichResult.showSearchSuggestionsNotification > richlistbox {
  transition: none;
}

#DateTimePickerPanel[active="true"] {
  -moz-binding: url("chrome://global/content/bindings/datetimepopup.xml#datetime-popup");
}

#urlbar[pageproxystate="invalid"] > #urlbar-icons > .urlbar-icon,
%ifdef MOZ_PHOTON_THEME
#urlbar[pageproxystate="invalid"] > #urlbar-icons > #star-button-box > .urlbar-icon,
.urlbar-go-button[pageproxystate="valid"],
.urlbar-go-button:not([parentfocused="true"]),
%else
#urlbar[pageproxystate="invalid"][focused="true"] > #urlbar-go-button ~ toolbarbutton,
#urlbar[pageproxystate="valid"] > #urlbar-go-button,
#urlbar:not([focused="true"]) > #urlbar-go-button,
%endif
#urlbar[pageproxystate="invalid"] > #identity-box > #blocked-permissions-container,
#urlbar[pageproxystate="invalid"] > #identity-box > #notification-popup-box,
#urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon-labels {
  visibility: collapse;
}

#identity-box {
  -moz-user-focus: normal;
}

#urlbar[pageproxystate="invalid"] > #identity-box {
  pointer-events: none;
  -moz-user-focus: ignore;
}

#identity-icon-labels {
  max-width: 18em;
}
@media (max-width: 700px) {
  #urlbar-container {
    min-width: 45ch;
  }
  #identity-icon-labels {
    max-width: 70px;
  }
}
@media (max-width: 600px) {
  #urlbar-container {
    min-width: 40ch;
  }
  #identity-icon-labels {
    max-width: 60px;
  }
}
@media (max-width: 500px) {
  #urlbar-container {
    min-width: 35ch;
  }
  #identity-icon-labels {
    max-width: 50px;
  }
}
@media (max-width: 400px) {
  #urlbar-container {
    min-width: 28ch;
  }
  #identity-icon-labels {
    max-width: 40px;
  }
}

#identity-icon-country-label {
  direction: ltr;
}

#identity-box.verifiedIdentity > #identity-icon-labels > #identity-icon-label {
  margin-inline-end: 0.25em !important;
}

#main-window[customizing] :-moz-any(#urlbar, .searchbar-textbox) > .autocomplete-textbox-container > .textbox-input-box {
  visibility: hidden;
}

/* Flexible spacer sizing (matching url bar) */
toolbarpaletteitem[place=toolbar][id^=wrapper-customizableui-special-spring],
toolbarspring {
  -moz-box-flex: 1;
  min-width: 40px;
}

#nav-bar toolbarpaletteitem[id^=wrapper-customizableui-special-spring],
#nav-bar toolbarspring {
  -moz-box-flex: 80;
}

/* ::::: Unified Back-/Forward Button ::::: */
.unified-nav-current {
  font-weight: bold;
}

.bookmark-item > label {
  /* ensure we use the direction of the bookmarks label instead of the
   * browser locale */
  unicode-bidi: plaintext;
}

toolbarbutton.bookmark-item {
  max-width: 13em;
}

/* Apply crisp rendering for favicons at exactly 2dppx resolution */
@media (resolution: 2dppx) {
  #alltabs-popup > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon,
  .menuitem-with-favicon > .menu-iconic-left > .menu-iconic-icon {
    image-rendering: -moz-crisp-edges;
  }

  .bookmark-item > .toolbarbutton-icon,
  .bookmark-item > .menu-iconic-left > .menu-iconic-icon,
  #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
    image-rendering: -moz-crisp-edges;
  }
  /* Synced Tabs sidebar */
  html|*.tabs-container html|*.item-tabs-list html|*.item-icon-container {
    image-rendering: -moz-crisp-edges;
  }
}

#editBMPanel_tagsSelector {
  /* override default listbox width from xul.css */
  width: auto;
}

menupopup[emptyplacesresult="true"] > .hide-if-empty-places-result {
  display: none;
}
menuitem.spell-suggestion {
  font-weight: bold;
}

/* Hide extension toolbars that neglected to set the proper class */
window[chromehidden~="location"][chromehidden~="toolbar"] toolbar:not(.chromeclass-menubar),
window[chromehidden~="toolbar"] toolbar:not(#nav-bar):not(#TabsToolbar):not(#print-preview-toolbar):not(.chromeclass-menubar) {
  display: none;
}

#navigator-toolbox ,
#mainPopupSet {
  min-width: 1px;
}

/* History Swipe Animation */

#historySwipeAnimationContainer {
  overflow: hidden;
}

#historySwipeAnimationPreviousPage,
#historySwipeAnimationCurrentPage,
#historySwipeAnimationNextPage {
  background: none top left no-repeat white;
}

#historySwipeAnimationPreviousPage {
  background-image: -moz-element(#historySwipeAnimationPreviousPageSnapshot);
}

#historySwipeAnimationCurrentPage {
  background-image: -moz-element(#historySwipeAnimationCurrentPageSnapshot);
}

#historySwipeAnimationNextPage {
  background-image: -moz-element(#historySwipeAnimationNextPageSnapshot);
}

/*  Full Screen UI */

#fullscr-toggler {
  height: 1px;
  background: black;
}

html|*.pointerlockfswarning {
  position: fixed;
  z-index: 2147483647 !important;
  visibility: visible;
  transition: transform 300ms ease-in;
  /* To center the warning box horizontally,
     we use left: 50% with translateX(-50%). */
  top: 0; left: 50%;
  transform: translate(-50%, -100%);
  box-sizing: border-box;
  width: -moz-max-content;
  max-width: 95%;
  pointer-events: none;
}
html|*.pointerlockfswarning:not([hidden]) {
  display: flex;
  will-change: transform;
}
html|*.pointerlockfswarning[onscreen] {
  transform: translate(-50%, 50px);
}
html|*.pointerlockfswarning[ontop] {
  /* Use -10px to hide the border and border-radius on the top */
  transform: translate(-50%, -10px);
}
#main-window[OSXLionFullscreen] html|*.pointerlockfswarning[ontop] {
  transform: translate(-50%, 80px);
}

html|*.pointerlockfswarning-domain-text,
html|*.pointerlockfswarning-generic-text {
  word-wrap: break-word;
  /* We must specify a min-width, otherwise word-wrap:break-word doesn't work. Bug 630864. */
  min-width: 1px
}
html|*.pointerlockfswarning-domain-text:not([hidden]) + html|*.pointerlockfswarning-generic-text {
  display: none;
}

html|*#fullscreen-exit-button {
  pointer-events: auto;
}

/* ::::: Ctrl-Tab Panel ::::: */

.ctrlTab-preview > html|img,
.ctrlTab-preview > html|canvas {
  min-width: inherit;
  max-width: inherit;
  min-height: inherit;
  max-height: inherit;
}

.ctrlTab-favicon-container {
  -moz-box-align: start;
%ifdef XP_MACOSX
  -moz-box-pack: end;
%else
  -moz-box-pack: start;
%endif
}

.ctrlTab-favicon {
  width: 16px;
  height: 16px;
}

/* Apply crisp rendering for favicons at exactly 2dppx resolution */
@media (resolution: 2dppx) {
  .ctrlTab-favicon {
    image-rendering: -moz-crisp-edges;
  }
}

.ctrlTab-preview {
  -moz-binding: url("chrome://browser/content/browser-tabPreviews.xml#ctrlTab-preview");
}


/* notification anchors should only be visible when their associated
   notifications are */
.notification-anchor-icon {
  -moz-user-focus: normal;
}

#blocked-permissions-container > .blocked-permission-icon:not([showing]),
.notification-anchor-icon:not([showing]) {
  display: none;
}

#invalid-form-popup > description {
  max-width: 280px;
}

.popup-anchor {
  /* should occupy space but not be visible */
  opacity: 0;
  pointer-events: none;
  -moz-stack-sizing: ignore;
}

#addon-progress-notification {
  -moz-binding: url("chrome://browser/content/urlbarBindings.xml#addon-progress-notification");
}

browser[tabmodalPromptShowing] {
  -moz-user-focus: none !important;
}

/* Status panel */

statuspanel {
  -moz-binding: url("chrome://browser/content/tabbrowser.xml#statuspanel");
  position: fixed;
  margin-top: -3em;
  max-width: calc(100% - 5px);
  pointer-events: none;
}

statuspanel[mirror] {
  inset-inline-start: auto;
  inset-inline-end: 0;
}

statuspanel[sizelimit] {
  max-width: 50%;
}

statuspanel[type=status] {
  min-width: 23em;
}

@media all and (max-width: 800px) {
  statuspanel[type=status] {
    min-width: 33%;
  }
}

statuspanel[type=overLink] {
  transition: opacity 120ms ease-out;
}

statuspanel[type=overLink] > .statuspanel-inner {
  direction: ltr;
}

statuspanel[inactive] {
  transition: none;
  opacity: 0;
}

statuspanel[inactive][previoustype=overLink] {
  transition: opacity 200ms ease-out;
}

.statuspanel-inner {
  height: 3em;
  width: 100%;
  -moz-box-align: end;
}

/* gcli */

html|*#gcli-tooltip-frame,
html|*#gcli-output-frame,
#gcli-output,
#gcli-tooltip {
  overflow-x: hidden;
}

.gclitoolbar-input-node,
.gclitoolbar-complete-node {
  direction: ltr;
}

#developer-toolbar-toolbox-button[error-count] > .toolbarbutton-icon {
  display: none;
}

#developer-toolbar-toolbox-button[error-count]:before {
  content: attr(error-count);
  display: -moz-box;
  -moz-box-pack: center;
}

/* Translation */
notification[value="translation"] {
  -moz-binding: url("chrome://browser/content/translation-infobar.xml#translationbar");
}

/** See bug 872317 for why the following rule is necessary. */

#downloads-button {
  -moz-binding: url("chrome://browser/content/downloads/download.xml#download-toolbarbutton");
}

/*** Visibility of downloads indicator controls ***/

/* Bug 924050: If we've loaded the indicator, for now we hide it in the menu panel,
   and just show the icon. This is a hack to side-step very weird layout bugs that
   seem to be caused by the indicator stack interacting with the menu panel. */
#downloads-button[indicator]:not([cui-areatype="menu-panel"]) > .toolbarbutton-badge-stack > image.toolbarbutton-icon,
#downloads-button[indicator][cui-areatype="menu-panel"] > #downloads-indicator-anchor {
  display: none;
}

toolbarpaletteitem[place="palette"] > #downloads-button[indicator] > .toolbarbutton-badge-stack > image.toolbarbutton-icon {
  display: -moz-box;
}

toolbarpaletteitem[place="palette"] > #downloads-button[indicator] > #downloads-indicator-anchor {
  display: none;
}

/* Combobox dropdown renderer */
#ContentSelectDropdown > menupopup {
  /* The menupopup itself should always be rendered LTR to ensure the scrollbar aligns with
   * the dropdown arrow on the dropdown widget. If a menuitem is RTL, its style will be set accordingly */
  direction: ltr;
}

/* Indent options in optgroups */
.contentSelectDropdown-ingroup .menu-iconic-text {
  padding-inline-start: 2em;
}

/* Give this menupopup an arrow panel styling */
#BMB_bookmarksPopup {
  -moz-appearance: none;
  -moz-binding: url("chrome://browser/content/places/menu.xml#places-popup-arrow");
  background: transparent;
  border: none;
  /* The popup inherits -moz-image-region from the button, must reset it */
  -moz-image-region: auto;
}

%ifdef MOZ_WIDGET_COCOA

/* On Mac, use the properties "-moz-window-transform" and "-moz-window-opacity"
   instead of "transform" and "opacity" for these animations.
   The -moz-window* properties apply to the whole window including the window's
   shadow, and they don't affect the window's "shape", so the system doesn't
   have to recompute the shadow shape during the animation. This makes them a
   lot faster. In fact, Gecko no longer triggers shadow shape recomputations
   for repaints.
   These properties are not implemented on other platforms. */
#BMB_bookmarksPopup {
  -moz-window-transform: scale(.4);
  -moz-window-opacity: 0;
  transition-property: -moz-window-transform, -moz-window-opacity;
  transition-duration: 0.15s;
  transition-timing-function: ease-out;
}

#BMB_bookmarksPopup[animate="open"] {
  -moz-window-transform: none;
  -moz-window-opacity: 1.0;
}

#BMB_bookmarksPopup[animate="cancel"] {
  -moz-window-transform: none;
}

#BMB_bookmarksPopup[arrowposition="after_start"]:-moz-locale-dir(ltr),
#BMB_bookmarksPopup[arrowposition="after_end"]:-moz-locale-dir(rtl) {
  -moz-window-transform-origin: 20px top;
}

#BMB_bookmarksPopup[arrowposition="after_end"]:-moz-locale-dir(ltr),
#BMB_bookmarksPopup[arrowposition="after_start"]:-moz-locale-dir(rtl) {
  -moz-window-transform-origin: calc(100% - 20px) top;
}

#BMB_bookmarksPopup[arrowposition="before_start"]:-moz-locale-dir(ltr),
#BMB_bookmarksPopup[arrowposition="before_end"]:-moz-locale-dir(rtl) {
  -moz-window-transform-origin: 20px bottom;
}

#BMB_bookmarksPopup[arrowposition="before_end"]:-moz-locale-dir(ltr),
#BMB_bookmarksPopup[arrowposition="before_start"]:-moz-locale-dir(rtl) {
  -moz-window-transform-origin: calc(100% - 20px) bottom;
}

%elifndef MOZ_WIDGET_GTK

#BMB_bookmarksPopup {
  transform: scale(.4);
  opacity: 0;
  transition-property: transform, opacity;
  transition-duration: 0.15s;
  transition-timing-function: ease-out;
}

#BMB_bookmarksPopup[animate="open"] {
  transform: none;
  opacity: 1.0;
}

#BMB_bookmarksPopup[animate="cancel"] {
  transform: none;
}

#BMB_bookmarksPopup[arrowposition="after_start"]:-moz-locale-dir(ltr),
#BMB_bookmarksPopup[arrowposition="after_end"]:-moz-locale-dir(rtl) {
  transform-origin: 20px top;
}

#BMB_bookmarksPopup[arrowposition="after_end"]:-moz-locale-dir(ltr),
#BMB_bookmarksPopup[arrowposition="after_start"]:-moz-locale-dir(rtl) {
  transform-origin: calc(100% - 20px) top;
}

#BMB_bookmarksPopup[arrowposition="before_start"]:-moz-locale-dir(ltr),
#BMB_bookmarksPopup[arrowposition="before_end"]:-moz-locale-dir(rtl) {
  transform-origin: 20px bottom;
}

#BMB_bookmarksPopup[arrowposition="before_end"]:-moz-locale-dir(ltr),
#BMB_bookmarksPopup[arrowposition="before_start"]:-moz-locale-dir(rtl) {
  transform-origin: calc(100% - 20px) bottom;
}
%endif

/* Customize mode */
%ifndef MOZ_PHOTON_THEME
#navigator-toolbox,
#browser-bottombox,
#content-deck {
  transition-property: margin-left, margin-right;
  transition-duration: 200ms;
  transition-timing-function: linear;
}

#tab-view-deck[fastcustomizeanimation] #navigator-toolbox,
#tab-view-deck[fastcustomizeanimation] #content-deck {
  transition-duration: 1ms;
  transition-timing-function: linear;
}
%endif

#PanelUI-contents > .panel-customization-placeholder > .panel-customization-placeholder-child {
  list-style-image: none;
}

/* Apply crisp rendering for favicons at exactly 2dppx resolution */
@media (resolution: 2dppx) {
  #PanelUI-remotetabs-tabslist > toolbarbutton > .toolbarbutton-icon,
  #PanelUI-recentlyClosedWindows > toolbarbutton > .toolbarbutton-icon,
  #PanelUI-recentlyClosedTabs > toolbarbutton > .toolbarbutton-icon,
  #PanelUI-historyItems > toolbarbutton > .toolbarbutton-icon {
    image-rendering: -moz-crisp-edges;
  }
}

#customization-container {
  -moz-box-orient: horizontal;
}

#customization-container[photon] {
  display: flex;
  flex-direction: column;
}

#customization-container[photon] > #customization-content-container {
  display: flex;
  flex-grow: 1; /* Grow so there isn't empty space below the footer */
  min-height: 0; /* Allow this to shrink so the footer doesn't get pushed out. */
}

#customization-container[photon] > #customization-content-container > #customization-palette-container {
  flex-grow: 1;
}

#customization-container[photon] #customization-panelHolder {
  padding-top: 10px;
  padding-bottom: 10px;
}

#customization-panelHolder > #widget-overflow-fixed-list {
  flex: 0 1 auto; /* Size to content, but allow ourselves to shrink */
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
}

#customization-container:not([photon]) #customization-panelHolder {
  overflow-y: hidden;
}

#customization-container[photon] #customization-panel-container {
  display: flex;
  flex-direction: column;
  flex: none;
}

#customization-container[photon] #customization-panelWrapper,
#customization-container[photon] #customization-panelWrapper > .panel-arrowcontent,
#customization-container[photon] #customization-panelHolder {
  flex-direction: column;
  display: flex;
  min-height: 0;
}

#customization-container[photon] #customization-panelWrapper {
  flex: 1 1 auto;
  height: 0; /* Don't let my contents affect ancestors' content-based sizing */
  align-items: end; /* align to the end on the cross-axis (affects arrow) */
}

#customization-panelWrapper,
#customization-panelWrapper > .panel-arrowcontent {
  -moz-box-flex: 1;
}

#customization-container:not([photon]) #customization-panelWrapper > .panel-arrowcontent {
  overflow: hidden;
}

#customization-panelHolder > #PanelUI-mainView {
  display: flex;
  flex-direction: column;
  /* Hack alert - by manually setting the preferred height to 0, we convince
     #PanelUI-mainView to shrink when the window gets smaller in customization
     mode. Not sure why that is - might have to do with our intermingling of
     XUL flex, and CSS3 Flexbox. */
  height: 0;
}

#customization-panelHolder > #PanelUI-mainView > #PanelUI-contents-scroller {
  display: flex;
  flex: auto;
  flex-direction: column;
}

#customization-panel-container {
  overflow-y: auto;
}

toolbarpaletteitem[dragover] {
  border-left-color: transparent;
  border-right-color: transparent;
}

#customization-palette-container {
  display: flex;
  flex-direction: column;
}

#customization-palette:not([hidden]) {
  display: block;
  flex: 1 1 auto;
  overflow: auto;
  min-height: 3em;
}

#customization-footer-spacer,
#customization-spacer {
  flex: 1 1 auto;
}

#customization-footer {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
}

#customization-toolbar-visibility-button > .box-inherit > .button-menu-dropmarker {
  display: -moz-box;
}

toolbarpaletteitem[place="palette"] {
  width: 10em;
  /* icon (32) + margin (2 * 4) + button padding/border (2 * 4) + label margin (~2) + label
   * line-height (1.5em): */
  height: calc(50px + 1.5em);
  margin-bottom: 5px;
  overflow: hidden;
  display: inline-block;
}

#main-window[photon-structure] toolbarpaletteitem[place="palette"] {
  -moz-binding: url("chrome://global/content/bindings/toolbar.xml#toolbarpaletteitem-palette-wrapping-label");
  width: 7em;
  /* icon (16) + margin (9 + 12) + 3 lines of text: */
  height: calc(39px + 3em);
  margin-inline-end: 24px;
  overflow: visible;
  vertical-align: top;
}

toolbarpaletteitem[place="palette"][hidden] {
  display: none;
}

#customization-palette .toolbarpaletteitem-box {
  -moz-box-pack: center;
  width: 7em;
  max-width: 7em;
}

#main-window:not([photon-structure]) #customization-palette .toolbarpaletteitem-box {
  -moz-box-flex: 1;
  width: 10em;
  max-width: 10em;
}

#main-window[customizing=true] .addon-banner-item,
#main-window[customizing=true] .panel-banner-item {
  display: none;
}

/* Combined context-menu items */
#context-navigation > .menuitem-iconic > .menu-iconic-text,
#context-navigation > .menuitem-iconic > .menu-accel-container {
  display: none;
}

.popup-notification-invalid-input {
  box-shadow: 0 0 1.5px 1px red;
}

.popup-notification-invalid-input[focused] {
  box-shadow: 0 0 2px 2px rgba(255,0,0,0.4);
}

.dragfeedback-tab {
  -moz-appearance: none;
  opacity: 0.65;
  -moz-window-shadow: none;
}

%ifdef MOZ_PHOTON_THEME
/* Page action panel */
#pageAction-panel-sendToDevice-subview-body:not([state="notready"]) > #pageAction-panel-sendToDevice-notReady,
#pageAction-urlbar-sendToDevice-subview-body:not([state="notready"]) > #pageAction-urlbar-sendToDevice-notReady {
  display: none;
}
%endif

%include theme-vars.inc.css
