.appWindow:not(.bar) > .chrome {
  pointer-events: none;
  top: 0;
  height: calc(var(--statusbar-height) + var(--rocketbar-urlbar-height));
  transform: scaleY(var(--rocketbar-scale)) translateY(calc(var(--statusbar-height) * -1));
  transition: transform var(--transition-duration) ease-in-out,
              background-color var(--transition-duration) ease;

  background-color: black;
  background-image: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1));
  color: white;
}
html[dir="ltr"] .appWindow:not(.bar) > .chrome { transform-origin: top left; }
html[dir="rtl"] .appWindow:not(.bar) > .chrome { transform-origin: top right; }

:not(.browser).appWindow[data-shrinking-state="true"] > .chrome {
  height: calc(var(--statusbar-height) / var(--rocketbar-scale));
  transform: scaleY(var(--rocketbar-scale)) translateY(0);
}

.appWindow.light > .chrome {
  background-image: linear-gradient(rgba(0,0,0,0.05), rgba(0,0,0,0.05));
  background-color: white;
  color: #4d4d4d;
}

.appWindow.private > .chrome {
  background-image: linear-gradient(rgba(0,0,0,0.05), rgba(0,0,0,0.05));
  background-color: #392e54;
  color: #fff;
}

.appWindow:not(.bar) > .chrome.maximized {
  transform: scaleY(1) translateY(0);
}

.appWindow.fullscreen-app:not(.bar) > .chrome:not(.maximized) {
  height: var(--statusbar-height);
  top: 0;
}

.appWindow:not(.bar).fullscreen-app > .chrome.maximized {
  top: 0;
  transform: scaleY(1) translateY(-7.6rem);
}

.controls {
  pointer-events: auto;
  background-color: transparent;
  position: absolute;
  top: calc(var(--statusbar-height) + .3rem);
  width: 100%;
  font-size: 0;
}

.chrome .controls .windows-button {
  display: none;
}

/* Special cases */
.searchWindow > .chrome {
  display: none;
}

[data-manifest-name="FTU"]:not(.bar) > .chrome .controls,
[data-manifest-name="FTU"]:not(.bar) > .chrome .progress,
.lockScreenWindow:not(.bar) > .chrome .controls,
.lockScreenWindow:not(.bar) > .chrome gaia-progress,
.homescreen:not(.bar) > .chrome gaia-progress,
.globalOverlayWindow:not(.bar) > .chrome .controls,
.globalOverlayWindow:not(.bar) > .chrome gaia-progress {
  visibility: hidden;
}

.lockScreenWindow:not(.bar) > .chrome,
.globalOverlayWindow:not(.bar) > .chrome {
  background-color: transparent;
}

#screen.attention .lockScreenWindow:not(.bar) > .chrome {
  background-color: black;
}

/* Special cases for Rocketbar in apps with browser chrome */
.appWindow:not(.browser) .chrome .controls .menu-button {
  display: none;
}

/* Maximized rocketbar size when the 'Windows' button is not displayed */
.appWindow.fullscreen-app:not(.browser) .chrome.maximized .controls .urlbar,
.appWindow:not(.browser):not(.search-app) .chrome.maximized .controls .urlbar {
  width: calc(100% - 1rem);
}

/* Special cases for rocketbar on the Top Sites view and homescreens */
.homescreen .menu-button,
.homescreen .controls .reload-button,
.homescreen .controls .stop-button,
.search-app .menu-button,
.search-app .controls .reload-button,
.search-app .controls .stop-button,
.chrome .controls .windows-button {
  display: none;
}

.chrome:not(.maximized) .controls .urlbar {
  width: calc(100% - 8rem);
}

/* Give the urlbar an extra hit target reaching toward the top of the screen. */
.chrome:not(.maximized) .controls .urlbar-hit-area {
  position: absolute;
  width: 100%;
  height: 3.2rem;
  top: -0.8rem;
}

.search-app .chrome .controls .windows-button {
  display: inline;
}

/* URL bar */
.chrome .controls .urlbar {
  width: calc(100% - 4.5rem);
  height: 3.2rem;
  line-height: 3.2rem;
  margin: 0.2rem 0 0.5rem;
  border-radius: 1.8rem;
  color: inherit;
  overflow: visible;
  background-color: transparent;
  margin-inline-start: .5rem;
  position: absolute;
}
html[dir="ltr"] .chrome .controls .urlbar { text-align: left; }
html[dir="rtl"] .chrome .controls .urlbar { text-align: right; }

.maximized .controls .urlbar {
  background-color: rgba(204,204,204,0.2);
}

.appWindow.light.collapsible .controls .urlbar {
  background-color: rgb(242, 242, 242); /* 255 * 0.95 */
}

.appWindow.light .maximized .controls .urlbar {
  background-color: rgba(204,204,204,0.4);
}

.appWindow.private.collapsible .controls .urlbar {
  background-color: #392e54;
}

.appWindow.private .maximized .controls .urlbar {
  background-color: rgba(204, 204, 204, 0.2);
}

.chrome-combined .chrome-title-container {
  padding-top: 0;
  padding-bottom: 0;
  padding-inline-start: 3.85rem;
  padding-inline-end: 0.8rem;
  box-sizing: padding-box;
  overflow: hidden;
  float: none;
  background-color: rgba(204,204,204,0.2);
  border-radius: 1.8rem;
}
.chrome-combined.private .chrome-title-container {
  padding-inline-start: 1.45rem;
}

.chrome-combined .title {
  overflow: hidden;
  white-space: nowrap;
  font-weight: 300;
  font-size: 1.8rem;
  font-style: italic;
  text-overflow: ellipsis;
  display: block;
}

.chrome-combined.maximized .title {
  width: calc(100% - 3.2rem);
}

.chrome-plain .title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
}

.search-app .chrome.maximized .controls .urlbar:after {
  content: '';
  width: 2rem;
  height: 100%;
  top: 0;
  offset-inline-end: 0.8rem;
  position: absolute;
  background-image: image-set(url("images/search.png") 1x, url("images/search@1.5x.png") 1.5x, url("images/search@2x.png") 2x, url("images/search@2.25x.png") 2.25x);
  background-repeat: no-repeat;
  background-size: 2rem auto;
  background-position: center right;
}

.appWindow.light .chrome-combined:not(.maximized) .chrome-title-container {
  background-color: rgba(204,204,204,0.4);
}

.chrome-combined.maximized .chrome-title-container {
  background-color: transparent;
}

.homescreen .chrome-combined .chrome-title-container {
  width: calc(100% - 2rem);
  padding-inline-start: 2rem;
}

.chrome.maximized .controls .forward-button:not([disabled]) + .urlbar,
.chrome.maximized .controls .back-button:not([disabled]) + .forward-button[disabled] + .urlbar {
  width: calc(100% - 8rem);
}
html[dir="ltr"] .chrome.maximized .controls .forward-button:not([disabled]) + .urlbar,
html[dir="ltr"] .chrome.maximized .controls .back-button:not([disabled]) + .forward-button[disabled] + .urlbar {
  transform: translateX(3.5rem);
}
html[dir="rtl"] .chrome.maximized .controls .forward-button:not([disabled]) + .urlbar,
html[dir="rtl"] .chrome.maximized .controls .back-button:not([disabled]) + .forward-button[disabled] + .urlbar {
  transform: translateX(-3.5rem);
}

.chrome.maximized .controls .back-button:not([disabled]) + .forward-button:not([disabled]) + .urlbar {
  width: calc(100% - 12rem);
}
html[dir="ltr"] .chrome.maximized .controls .back-button:not([disabled]) + .forward-button:not([disabled]) + .urlbar {
  transform: translateX(7.5rem);
}
html[dir="rtl"] .chrome.maximized .controls .back-button:not([disabled]) + .forward-button:not([disabled]) + .urlbar {
  transform: translateX(-7.5rem);
}

.appWindow:not(.browser) .chrome.maximized .controls .forward-button:not([disabled]) + .urlbar,
.appWindow:not(.browser) .chrome.maximized .controls .back-button:not([disabled]) + .forward-button[disabled] + .urlbar {
  width: calc(100% - 4.5rem);
}
html[dir="ltr"] .appWindow:not(.browser) .chrome.maximized .controls .forward-button:not([disabled]) + .urlbar,
html[dir="ltr"] .appWindow:not(.browser) .chrome.maximized .controls .back-button:not([disabled]) + .forward-button[disabled] + .urlbar {
  transform: translateX(3.5rem);
}
html[dir="rtl"] .appWindow:not(.browser) .chrome.maximized .controls .forward-button:not([disabled]) + .urlbar,
html[dir="rtl"] .appWindow:not(.browser) .chrome.maximized .controls .back-button:not([disabled]) + .forward-button[disabled] + .urlbar {
  transform: translateX(-3.5rem);
}

.appWindow:not(.browser) .chrome.maximized .controls .back-button:not([disabled]) + .forward-button:not([disabled]) + .urlbar {
  width: calc(100% - 8.5rem);
}
html[dir="ltr"] .appWindow:not(.browser) .chrome.maximized .controls .back-button:not([disabled]) + .forward-button:not([disabled]) + .urlbar {
  transform: translateX(7.5rem);
}
html[dir="rtl"] .appWindow:not(.browser) .chrome.maximized .controls .back-button:not([disabled]) + .forward-button:not([disabled]) + .urlbar {
  transform: translateX(-7.5rem);
}

.controls .urlbar {
  transform: scaleX(var(--rocketbar-scale)) translateY(0.1rem);
  transition: transform 0.2s ease-in-out;
}
html[dir="ltr"] .controls .urlbar { transform-origin: top left; }
html[dir="rtl"] .controls .urlbar { transform-origin: top right; }

.appWindow.fullscreen-app .chrome.dragged,
.appWindow.fullscreen-app .chrome.dragging {
  visibility: visible;
}

.appWindow.attentionWindow .chrome,
.appWindow.fullscreen-app .chrome {
  visibility: hidden;
}

.appWindow.collapsible.active .urlbar {
  will-change: transform;
}

.appWindow.fullscreen-app .chrome:not(.maximized) .controls .urlbar {
  transform: scale(var(--rocketbar-scale)) translateY(-6.1rem);
}
html[dir="ltr"] .appWindow.fullscreen-app .chrome:not(.maximized) .controls .urlbar { transform-origin: bottom left; }
html[dir="rtl"] .appWindow.fullscreen-app .chrome:not(.maximized) .controls .urlbar { transform-origin: bottom right; }

.maximized .controls .urlbar {
  transform: scaleX(1);
}

/* Pinning the web */

.urlbar::before {
  content: "";
  bottom: -1.5rem;
  height: 1.5rem;
  width: 2.4rem;
  position: absolute;
  background-size: cover;
  background-image: image-set(url("images/arrow.png") 1x, url("images/arrow@1.5x.png") 1.5x, url("images/arrow@2x.png") 2x, url("images/arrow@2.25x.png") 2.25x);
  transform: translateY(0) translateX(0) scale(1);
  transition: opacity var(--transition-duration), transform var(--transition-duration);
}
html[dir="ltr"] .urlbar::before { left: 0.35rem; }
html[dir="rtl"] .urlbar::before { right: 0.35rem; }

.pin-dialog.hidden ~ .controls .urlbar::before {
  opacity: 0;
}
html[dir="ltr"] .pin-dialog.hidden ~ .controls .urlbar::before {
  transform: translateY(-50%) translateX(-50%) scale(.3);
}
html[dir="rtl"] .pin-dialog.hidden ~ .controls .urlbar::before {
  transform: translateY(-50%) translateX(50%) scale(.3);
}

section.pin-dialog {
  visibility: visible;
  display: block;
  position: absolute;
  margin: 0 1rem;
  width: calc(100% - 2rem);
  top: calc(var(--statusbar-height) + var(--rocketbar-urlbar-height) + 0.8rem);
  background-color: #F4F4F4;
  font-size: 1.2rem;
  color: #858585;
  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.15);
  transform: translateY(0) translateX(0) scale(1);
  transition: visibility var(--transition-duration), opacity var(--transition-duration), transform var(--transition-duration);
}

section.pin-dialog.hidden {
  opacity: 0;
  visibility: hidden;
}
html[dir="ltr"] section.pin-dialog.hidden {
  transform: translateY(-50%) translateX(-50%) scale(.3);
}
html[dir="rtl"] section.pin-dialog.hidden {
  transform: translateY(-50%) translateX(50%) scale(.3);
}

.pin-scrim {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* Note: we cannot use bottom: 0 because the parent (.chrome) has a
     transition defined, which creates a new stacking context for it.
     So any coordinates (top, left, etc.) will be relative to this parent
     element instead of the viewport.
     see https://bugzilla.mozilla.org/show_bug.cgi?id=879443
  */
  height: 100vh;
  z-index: -1;
  background-color: rgba(0, 0, 0, 0.45);
  transition: opacity var(--transition-duration);
  pointer-events: auto;
}

section.pin-dialog.hidden + .pin-scrim {
  visibility: hidden;
  opacity: 0;
}

section.pin-dialog .card-container {
  overflow: hidden;
  text-align: center;
}

section.pin-dialog .pin-site-icon {
  font-weight: 300;
  width: 6.4rem;
  height: 6.4rem;
  margin: 0 auto;
  background-size: 6.4rem;
  background-image: url('images/loading_icon_white.svg');
}

section.pin-dialog .pin-site-name {
  margin: 0;
  line-height: 6.5rem;
  font-size: 1.6rem;
  font-weight: 400;
  font-style: italic;
}

section.pin-dialog header h2 {
  margin: 0;
  line-height: 6.2rem;
  font-size: 1.8rem;
  font-weight: 400;
  font-family: sans-serif;
  font-style: italic;
  white-space: nowrap;
  text-align: center;
}

section.pin-dialog footer {
  padding: 2.3rem 0;
}

section.pin-dialog button {
  position: relative;
  display: block;
  margin: 0 auto;
  float: none;
  width: -moz-fit-content;
  background-color: white;
  font-size: 1.6rem;
  font-style: italic;
}

section.pin-dialog footer span {
  display: block;
  text-align: center;
  line-height: 1.6rem;
  font-size: 1.4rem;
  font-weight: 400;
  font-style: italic;
}

section.pin-dialog .origin {
  padding: 0;
  margin: 0 auto;
  width: -moz-fit-content;
  font-size: 1.4rem;
  font-weight: 400;
  font-style: italic;
}

section.pin-dialog .origin .tld {
  display: inline;
}

section.pin-dialog .origin::before {
  content: "";
  display: block;
  width: 3rem;
  height: 3rem;
  margin: -0.7rem -2.5rem;
  background-size: cover;
  position: absolute;
}

section.pin-dialog.secure .origin {
  padding-inline-start: 1.5rem;
}

section.pin-dialog.secure .origin::before {
  background-image: image-set(url("images/light/ssl.png") 1x, url("images/light/ssl@1.5x.png") 1.5x, url("images/light/ssl@2x.png") 2x, url("images/light/ssl@2.25x.png") 2.25x);
}

section.pin-dialog button[data-action="pin"] {
  padding-inline-start: 4rem;
  padding-inline-end: 2rem;
}

section.pin-dialog button[data-action="pin"]::before {
  content: "";
  width: 1.6rem;
  height: 1.6rem;
  position: absolute;
  top: 1.2rem;
  offset-inline-start: 2rem;
  background-size: 1.6rem 1.6rem;
  background-image: image-set(url("images/pin.png") 1x, url("images/pin@1.5x.png") 1.5x, url("images/pin@2x.png") 2x, url("images/pin@2.25x.png") 2.25x);
}

@media (orientation: landscape) {
  section.pin-dialog {
    width: 26rem;
  }

  section.pin-dialog header h2 {
    line-height: 5rem;
  }

  section.pin-dialog .pin-site-name {
    line-height: 4rem;
  }

  section.pin-dialog footer {
    padding: 1.7rem 0;
  }
}

/* Private browser icon in rocketbar */
.appWindow.private > .chrome-plain.maximized .chrome-title-container,
.appWindow.private > .chrome-combined.maximized .chrome-title-container {
  padding-inline-start: 4rem;
}

.appWindow.private > .chrome.maximized .pb-icon {
  display: block;
  width: 4rem;
  height: 100%;
  position: absolute;
  top: 0.1rem;
  left: 0.3rem;
  right: 0.3rem;
  background-image: image-set(url("images/pb_rocketbar.png") 1x, url("images/pb_rocketbar@1.5x.png") 1.5x, url("images/pb_rocketbar@2x.png") 2x, url("images/pb_rocketbar@2.25x.png") 2.25x);
  background-repeat: no-repeat;
  background-size: 2.5rem;
}
html[dir="ltr"] .appWindow.private > .chrome.maximized .pb-icon { background-position: left 0.8rem center; }
html[dir="rtl"] .appWindow.private > .chrome.maximized .pb-icon { background-position: right 0.8rem center; }


/* SSL Lock Icons in rocketbar */
.chrome-combined.maximized .chrome-has-ssl-indicator .chrome-ssl-indicator {
  padding-inline-start: 5.5rem;

  background-repeat: no-repeat;
  background-size: 3rem;
  height: 3.2rem;
}
html[dir="ltr"] .chrome-combined.maximized .chrome-has-ssl-indicator .chrome-ssl-indicator {
  background-position: left 3rem center;
}
html[dir="rtl"] .chrome-combined.maximized .chrome-has-ssl-indicator .chrome-ssl-indicator {
  background-position: right 3rem center;
}


.private > .chrome-combined.maximized .chrome-has-ssl-indicator .chrome-ssl-indicator {
  padding-inline-start: 6.5rem;
}
html[dir="ltr"] .private > .chrome-combined.maximized .chrome-has-ssl-indicator .chrome-ssl-indicator {
  background-position: left 3.7rem top 0.1rem;
}
html[dir="rtl"] .private > .chrome-combined.maximized .chrome-has-ssl-indicator .chrome-ssl-indicator {
  background-position: right 3.7rem top 0.1rem;
}

.chrome-plain .chrome-ssl-indicator {
  display: none;

  width: 1rem;

  background: no-repeat center / 3rem content-box;
}

.chrome-ssl-indicator-ltr {
  padding-right: .5rem; /* give some space between the indicator and the title */
}

.chrome-ssl-indicator-rtl {
  padding-left: .5rem; /* give some space between the indicator and the title */
  padding-right: 1rem; /* give some space between the indicator and the window's edge */
}

.chrome-plain:-moz-dir(ltr) .chrome-has-ssl-indicator .chrome-ssl-indicator-ltr,
.chrome-plain:-moz-dir(rtl) .chrome-has-ssl-indicator .chrome-ssl-indicator-rtl {
  display: unset;
}

.maximized .chrome-has-ssl-indicator[data-ssl="secure"] .chrome-ssl-indicator {
  background-image: image-set(url("images/light/ssl.png") 1x, url("images/light/ssl@1.5x.png") 1.5x, url("images/light/ssl@2x.png") 2x, url("images/light/ssl@2.25x.png") 2.25x);
}

.maximized .chrome-has-ssl-indicator[data-ssl="broken"] .chrome-ssl-indicator {
  background-image: image-set(url("images/light/ssl_broken.png") 1x, url("images/light/ssl_broken@1.5x.png") 1.5x, url("images/light/ssl_broken@2x.png") 2x, url("images/light/ssl_broken@2.25x.png") 2.25x);
}

.site-icon {
  width: 3.4rem;
  height: 3.4rem;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url('images/loading_icon_white.svg');
  position: absolute;
  /* The icon renderer adds 4px padding for getting a smoother
     rounded icon. Reallocating to fit with the url bar
  */
  top: -.1rem;
  offset-inline-start: -.1rem;
}

.light .site-icon,
.light section.pin-dialog .pin-site-icon {
  background-image: url('images/loading_icon_dark.svg');
}

.homescreen > .chrome .site-icon,
.private > .chrome .site-icon {
  display: none;
}

/* Handle urlbar sizing when back or forward buttons are disabled */
.collapsible .chrome:not(.maximized) .back-button:not([disabled]) + .forward-button[disabled] + .urlbar,
.collapsible .chrome:not(.maximized) .forward-button:not([disabled]) + .urlbar {
  transform: scaleX(var(--rocketbar-scale));
}

.collapsible .chrome:not(.maximized) .back-button:not([disabled]) + .forward-button:not([disabled]) + .urlbar {
  transform: scaleX(var(--rocketbar-scale));
}


/* Buttons */
.controls button {
  -moz-appearance: none;
  border: none;
  margin: 0;
  padding: 0;
  min-width: 4rem;
  width: 4rem;
  height: 4rem;
  line-height: 4rem;
  background-position: center;
  background-repeat: no-repeat;
  background-color: transparent;
  background-size: contain;
  opacity: 1;
  border-radius: 0;
}
html[dir="ltr"] .controls button { float: left; }
html[dir="rtl"] .controls button { float: right; }

/* Remove focus outline from button */
.controls button::-moz-focus-inner {
  border: 0;
}

.controls .reload-button,
.controls .stop-button {
  background-size: 3rem auto;
  background-position: center center;
  background-repeat: no-repeat;
  position: absolute;
  bottom: 0.1rem;
  offset-inline-end: 0;
  padding: 0 0.3rem;
  width: 3rem;
  height: 3rem;
}

.controls .reload-button::before,
.controls .stop-button::before {
  content: '';
  position: relative;
  offset-inline-end: 0.2rem;
  display: block;
  height: 2.4rem;
  border-inline-start: .1rem solid rgba(0,0,0,0.05);
}

/* Vertically align butons outside of urlbar. */
.controls > button {
  position: relative;
  top: -0.2rem;
}

.controls > button.menu-button,
.controls > button.windows-button {
  position: absolute;
  offset-inline-end: 0;
}

.controls .reload-button[disabled],
.loading .controls .reload-button {
  visibility: hidden;
  pointer-events: none;
}

.controls .stop-button {
  visibility: hidden;
  pointer-events: none;
}

.loading .controls .stop-button {
  visibility: visible;
  pointer-events: auto;
}

.controls .back-button[disabled],
.controls .forward-button[disabled] {
  display: none;
}

.chrome.maximized .controls .menu-button[disabled] {
  opacity: 0.2;
}

.appWindow:not(.bar) > .chrome button {
  opacity: 0;
  transition: opacity 0.15s ease-in;
  pointer-events: none;
}

.appWindow:not(.bar) > .chrome.maximized button {
  opacity: 1;
  pointer-events: auto;
}


/* Default (dark) theme button styles */
html[dir="ltr"] .controls .back-button { background-image: image-set(url("images/dark/left.png") 1x, url("images/dark/left@1.5x.png") 1.5x, url("images/dark/left@2x.png") 2x, url("images/dark/left@2.25x.png") 2.25x); }
html[dir="rtl"] .controls .back-button { background-image: image-set(url("images/dark/right.png") 1x, url("images/dark/right@1.5x.png") 1.5x, url("images/dark/right@2x.png") 2x, url("images/dark/right@2.25x.png") 2.25x); }

html[dir="ltr"] .controls .back-button:active { background-image: image-set(url("images/dark/left_active.png") 1x, url("images/dark/left_active@1.5x.png") 1.5x, url("images/dark/left_active@2x.png") 2x, url("images/dark/left_active@2.25x.png") 2.25x); }
html[dir="rtl"] .controls .back-button:active { background-image: image-set(url("images/dark/right_active.png") 1x, url("images/dark/right_active@1.5x.png") 1.5x, url("images/dark/right_active@2x.png") 2x, url("images/dark/right_active@2.25x.png") 2.25x); }

html[dir="ltr"] .controls .forward-button { background-image: image-set(url("images/dark/right.png") 1x, url("images/dark/right@1.5x.png") 1.5x, url("images/dark/right@2x.png") 2x, url("images/dark/right@2.25x.png") 2.25x); }
html[dir="rtl"] .controls .forward-button { background-image: image-set(url("images/dark/left.png") 1x, url("images/dark/left@1.5x.png") 1.5x, url("images/dark/left@2x.png") 2x, url("images/dark/left@2.25x.png") 2.25x); }

html[dir="ltr"] .controls .forward-button:active { background-image: image-set(url("images/dark/right_active.png") 1x, url("images/dark/right_active@1.5x.png") 1.5x, url("images/dark/right_active@2x.png") 2x, url("images/dark/right_active@2.25x.png") 2.25x); }
html[dir="rtl"] .controls .forward-button:active { background-image: image-set(url("images/dark/left_active.png") 1x, url("images/dark/left_active@1.5x.png") 1.5x, url("images/dark/left_active@2x.png") 2x, url("images/dark/left_active@2.25x.png") 2.25x); }

.controls .menu-button {
  background-image: image-set(url("images/dark/options.png") 1x, url("images/dark/options@1.5x.png") 1.5x, url("images/dark/options@2x.png") 2x, url("images/dark/options@2.25x.png") 2.25x);
}

.controls .menu-button:active {
  background-image: image-set(url("images/dark/options_active.png") 1x, url("images/dark/options_active@1.5x.png") 1.5x, url("images/dark/options_active@2x.png") 2x, url("images/dark/options_active@2.25x.png") 2.25x);
}

.controls .reload-button {
  background-image: image-set(url("images/dark/reload.png") 1x, url("images/dark/reload@1.5x.png") 1.5x, url("images/dark/reload@2x.png") 2x, url("images/dark/reload@2.25x.png") 2.25x);
}

.controls .reload-button:active {
  background-image: image-set(url("images/dark/reload_active.png") 1x, url("images/dark/reload_active@1.5x.png") 1.5x, url("images/dark/reload_active@2x.png") 2x, url("images/dark/reload_active@2.25x.png") 2.25x);
}

.controls .stop-button {
  background-image: image-set(url("images/dark/stop.png") 1x, url("images/dark/stop@1.5x.png") 1.5x, url("images/dark/stop@2x.png") 2x, url("images/dark/stop@2.25x.png") 2.25x);
}

.controls .stop-button:active {
  background-image: image-set(url("images/dark/stop_active.png") 1x, url("images/dark/stop_active@1.5x.png") 1.5x, url("images/dark/stop_active@2x.png") 2x, url("images/dark/stop_active@2.25x.png") 2.25x);
}

.controls .windows-button {
  background-image: image-set(url("images/dark/windows.png") 1x, url("images/dark/windows@1.5x.png") 1.5x, url("images/dark/windows@2x.png") 2x, url("images/dark/windows@2.25x.png") 2.25x);
}

.controls .windows-button:active {
  background-image: image-set(url("images/dark/windows_active.png") 1x, url("images/dark/windows_active@1.5x.png") 1.5x, url("images/dark/windows_active@2x.png") 2x, url("images/dark/windows_active@2.25x.png") 2.25x);
}

/* Light theme button styles */
.light .controls .menu-button:active {
  background-image: url("images/light/overflow_active.png");
}

html[dir="ltr"] .light .controls .back-button { background-image: image-set(url("images/light/left.png") 1x, url("images/light/left@1.5x.png") 1.5x, url("images/light/left@2x.png") 2x, url("images/light/left@2.25x.png") 2.25x); }
html[dir="rtl"] .light .controls .back-button { background-image: image-set(url("images/light/right.png") 1x, url("images/light/right@1.5x.png") 1.5x, url("images/light/right@2x.png") 2x, url("images/light/right@2.25x.png") 2.25x); }

html[dir="ltr"] .light .controls .back-button:active { background-image: image-set(url("images/light/left_active.png") 1x, url("images/light/left_active@1.5x.png") 1.5x, url("images/light/left_active@2x.png") 2x, url("images/light/left_active@2.25x.png") 2.25x); }
html[dir="rtl"] .light .controls .back-button:active { background-image: image-set(url("images/light/right_active.png") 1x, url("images/light/right_active@1.5x.png") 1.5x, url("images/light/right_active@2x.png") 2x, url("images/light/right_active@2.25x.png") 2.25x); }

html[dir="ltr"] .light .controls .forward-button { background-image: image-set(url("images/light/right.png") 1x, url("images/light/right@1.5x.png") 1.5x, url("images/light/right@2x.png") 2x, url("images/light/right@2.25x.png") 2.25x); }
html[dir="rtl"] .light .controls .forward-button { background-image: image-set(url("images/light/left.png") 1x, url("images/light/left@1.5x.png") 1.5x, url("images/light/left@2x.png") 2x, url("images/light/left@2.25x.png") 2.25x); }

html[dir="ltr"] .light .controls .forward-button:active { background-image: image-set(url("images/light/right_active.png") 1x, url("images/light/right_active@1.5x.png") 1.5x, url("images/light/right_active@2x.png") 2x, url("images/light/right_active@2.25x.png") 2.25x); }
html[dir="rtl"] .light .controls .forward-button:active { background-image: image-set(url("images/light/left_active.png") 1x, url("images/light/left_active@1.5x.png") 1.5x, url("images/light/left_active@2x.png") 2x, url("images/light/left_active@2.25x.png") 2.25x); }

.light .controls .menu-button {
  background-image: image-set(url("images/light/options.png") 1x, url("images/light/options@1.5x.png") 1.5x, url("images/light/options@2x.png") 2x, url("images/light/options@2.25x.png") 2.25x);
}

.light .controls .menu-button:active {
  background-image: image-set(url("images/light/options_active.png") 1x, url("images/light/options_active@1.5x.png") 1.5x, url("images/light/options_active@2x.png") 2x, url("images/light/options_active@2.25x.png") 2.25x);
}

.light .controls .reload-button {
  background-image: image-set(url("images/light/reload.png") 1x, url("images/light/reload@1.5x.png") 1.5x, url("images/light/reload@2x.png") 2x, url("images/light/reload@2.25x.png") 2.25x);
}

.light .controls .reload-button:active {
  background-image: image-set(url("images/light/reload_active.png") 1x, url("images/light/reload_active@1.5x.png") 1.5x, url("images/light/reload_active@2x.png") 2x, url("images/light/reload_active@2.25x.png") 2.25x);
}

.light .controls .stop-button {
  background-image: image-set(url("images/light/stop.png") 1x, url("images/light/stop@1.5x.png") 1.5x, url("images/light/stop@2x.png") 2x, url("images/light/stop@2.25x.png") 2.25x);
}

.light .controls .stop-button:active {
  background-image: image-set(url("images/light/stop_active.png") 1x, url("images/light/stop_active@1.5x.png") 1.5x, url("images/light/stop_active@2x.png") 2x, url("images/light/stop_active@2.25x.png") 2.25x);
}

.light .controls .windows-button {
  background-image: image-set(url("images/light/windows.png") 1x, url("images/light/windows@1.5x.png") 1.5x, url("images/light/windows@2x.png") 2x, url("images/light/windows@2.25x.png") 2.25x);
}

.light .controls .windows-button:active {
  background-image: image-set(url("images/light/windows_active.png") 1x, url("images/light/windows_active@1.5x.png") 1.5x, url("images/light/windows_active@2x.png") 2x, url("images/light/windows_active@2.25x.png") 2.25x);
}

.light .controls .menu-button:active {
  background-image: url("images/light/overflow_active.png");
}

/* Overflow menu */

gaia-overflow-menu button#new-window {
  background-image: image-set(url("images/menu_new_window.png") 1x, url("images/menu_new_window@1.5x.png") 1.5x, url("images/menu_new_window@2x.png") 2x, url("images/menu_new_window@2.25x.png") 2.25x);
}

gaia-overflow-menu button#add-to-home {
  background-image: image-set(url("images/menu_add_to_homescreen.png") 1x, url("images/menu_add_to_homescreen@1.5x.png") 1.5x, url("images/menu_add_to_homescreen@2x.png") 2x, url("images/menu_add_to_homescreen@2.25x.png") 2.25x);
}

gaia-overflow-menu button#share {
  background-image: image-set(url("images/menu_share.png") 1x, url("images/menu_share@1.5x.png") 1.5x, url("images/menu_share@2x.png") 2x, url("images/menu_share@2.25x.png") 2.25x);
}

/* Progress */
.appWindow.collapsible > .chrome gaia-progress,
.appWindow.scrollable > .chrome gaia-progress {
  top: 7.3rem;
}
.appWindow.bar > .chrome gaia-progress,
.appWindow.fullscreen-app > .chrome gaia-progress,
.appWindow.popupWindow > .chrome gaia-progress,
.appWindow.trustedWindow > .chrome gaia-progress {
  top: 0;
}

/* App specifics */
.appWindow:not(.collapsible) > .chrome:not(.maximized) .controls button {
  display: none;
}

.appWindow:not(.collapsible) > .chrome:not(.maximized) .controls .urlbar {
  width: calc(100% - 8rem);
}

.appWindow:not(.collapsible) > .chrome-combined .title {
  width: calc(100%);
}