/* In both fullscreen modes, accept pointer events to trigger the status bar
   unless the utility tray is showing. */
#screen.fullscreen-app:not(.utility-tray) #top-panel,
#screen:not(.utility-tray):-moz-full-screen-ancestor > #top-panel {
  pointer-events: all;
}

#statusbar {
  position: fixed;
  width: 100%;
  height: var(--statusbar-height);
  top: 0;
  right: 0;
  pointer-events: none;
  transform: translateY(0);
  transition: none;
}

/* We need a wrapper for being able to translateY the parent div
without affecting the -moz-elements pointing to it while transitioning */
#statusbar-wrapper {
  position: absolute;
  display: block;
  overflow: hidden;
  width: 100%;
  height: var(--statusbar-height);
  transform: translateY(0);
}

/* This is the remaining space left by the collapsed rocketbar */
#statusbar #statusbar-icons {
  width: calc(100% - 100% * var(--rocketbar-scale) + 8rem * var(--rocketbar-scale) - 0.5rem);
}

#statusbar:not(.hidden).maximized  #statusbar-icons {
  width: 100%;
}

.statusbar {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap-reverse;
  flex-direction: row-reverse;
  position: absolute;
  width: 100%;
  height: var(--statusbar-height);
  margin: 0;
  top: 0;
  offset-inline-end: 0;
  padding: 0 0.3rem;
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
}

.statusbar > div,
.statusbar > img {
  pointer-events: auto;
}

/* Hide the statusbar out of the viewport in order
to be available for moz-elements */
#statusbar.hidden,
#screen:not(.attention).utility-tray-in-transition > #statusbar,
#screen.utility-tray-in-transition > #statusbar,
#screen:not(.locked):not(.minimized-tray):not(.rocketbar-focused):not(.utility-tray) #statusbar.fullscreen,
#screen:not(.locked):not(.minimized-tray):not(.rocketbar-focused):not(.utility-tray) #statusbar.fullscreen-layout,
#screen.locked.secure-app:not(.minimized-tray):not(.rocketbar-focused):not(.utility-tray).fullscreen-app #statusbar,
#screen.locked.secure-app:not(.minimized-tray):not(.rocketbar-focused):not(.utility-tray).fullscreen-layout-app #statusbar {
  transform: translateY(-100%);
}

@media (orientation: landscape) {
  #screen.software-button-enabled #statusbar {
    width: calc(100% - var(--software-home-button-height));
    right: var(--software-home-button-height);
  }
}

#screen.attention #statusbar {
  top: 0;
  background-color: black;
}

/* AppChrome would normally provide the theme color for the statusbar.
   However, when in native full-screen mode, AppChrome isn't visible; just
   use black for now, as we do with #screen.attention. */
#screen:-moz-full-screen-ancestor #statusbar {
  background-color: black;
}

#screen.utility-tray #statusbar {
  background-color: transparent;
}

/* Hiding the black background while the homescreen is in foreground but not
 * utility tray or attention screen */
#screen.lockscreen-camera > #statusbar {
  transform: scaleY(0);
}
html[dir="ltr"] #screen.lockscreen-camera > #statusbar { transform-origin: left top; }
html[dir="rtl"] #screen.lockscreen-camera > #statusbar { transform-origin: right top; }

#screen.locked:not(.attention) #statusbar {
  background-color: transparent;
  display: block;
  transform: scaleY(1);
}

#screen.attention.locked #statusbar-time {
  display: block;
}

.statusbar > * {
  margin: 0.6rem 0.2rem;
}

#screen.rocketbar-focused:not(.locked) .statusbar {
  visibility: hidden;
  opacity: 0;
}

.utility-tray #statusbar > #statusbar-title,
#statusbar-title.hidden {
  visibility: visible;
  transform: translateY(var(--statusbar-height));
}

/* Icons */

body .utility-tray .statusbar > .sb-start {
  visibility: hidden;
  transform: translateY(var(--statusbar-height));
}

#statusbar-operator {
  margin-inline-start: 0.8rem;
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.6rem;
}

#statusbar-time, #statusbar-data:not(.sb-icon-data-circle) {
  position: relative;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.6rem;
}

#statusbar-time span {
  margin: 0;
  font-size: 1.1rem;
}

/* signal and data icons */
#statusbar-mobile-connection {
  margin: 0;
  padding: 0;
  font-weight: 300;
}

#statusbar-mobile-connection > * {
  pointer-events: none;
  margin: 0.6rem 0.2rem;
}
html[dir="ltr"] #statusbar-mobile-connection > * { float: left; }
html[dir="rtl"] #statusbar-mobile-connection > * { float: right; }

#statusbar-mobile-connection .sb-icon-roaming {
  margin: 0;
  top: 0.6rem;
  position: relative;
  width: 1rem;
  offset-inline-start: 0;
}

#statusbar-mobile-connection .statusbar-data:not(.sb-icon-data-circle) {
  color: #fff;
  font-size: 1.5rem;
  position: relative;
  bottom: 0.1rem;
}

#statusbar-mobile-connection .statusbar-data:not(.sb-icon-data-circle) {
  background: none;
  width: auto;
}

#statusbar-mobile-connection .statusbar-signal {
  position: relative;
  margin-left: 0.8rem; /* BiDi-proof: sim number/data indicator on the left */
}

#statusbar-mobile-connection[data-multiple="true"] .statusbar-signal::before {
  position: absolute;
  font-size: 1rem;
  bottom: -.2rem;
  left: -0.6rem;
}

#statusbar-mobile-connection[data-multiple="true"] .statusbar-signal[data-index="0"]::before {
  content: '1';
}
#statusbar-mobile-connection[data-multiple="true"] .statusbar-signal[data-index="1"]::before {
  content: '2';
}
#statusbar-mobile-connection[data-multiple="true"] .statusbar-signal[data-index="2"]::before {
  content: '3';
}
#statusbar-mobile-connection[data-multiple="true"] .statusbar-signal[data-index="3"]::before {
  content: '4';
}

#statusbar-mobile-connection .statusbar-signal .statusbar-data {
  position: relative;
  margin: 0;
  font-size: 1rem;
  text-align: left;
  top: -.5rem;
  left: -.7rem;
}

#statusbar-mobile-connection[data-multiple="true"] .statusbar-signal .statusbar-data {
  top: -.5rem;
  left: -.7rem;
  text-align: left;
}

#statusbar-mobile-connection[data-multiple="true"] .statusbar-data.sb-icon-data-circle {
  top: -0.3rem;
  left: -0.8rem;
}

#statusbar-mobile-connection .statusbar-data.sb-icon-data-circle {
  top: -.1rem;
  offset-inline-start: -0.1rem;
  width: 0.8rem;
  height: 0.8rem;
  background-size: 16.8rem 4.8rem;
}
html[dir="ltr"] #statusbar-mobile-connection .statusbar-data.sb-icon-data-circle {
  background-position: left -5.8rem top -4rem;
}
html[dir="rtl"] #statusbar-mobile-connection .statusbar-data.sb-icon-data-circle {
  background-position: right -5.8rem top -4rem;
}

#statusbar-mobile-connection[data-multiple="true"] .statusbar-data[hidden] {
  display: block;
  opacity: 0;
  visibility: hidden;
}

/* call forwarding icons */
#statusbar-call-forwardings {
  margin: 0;
  padding: 0;
}

#statusbar-call-forwardings > * {
  pointer-events: none;
  margin: 0.4rem 0.6rem;
}
html[dir="ltr"] #statusbar-call-forwardings > * { float: left; }
html[dir="rtl"] #statusbar-call-forwardings > * { float: right; }

#statusbar-call-forwardings .sb-icon-call-forwarding {
  position: relative;
}

#statusbar-call-forwardings[data-multiple="true"] .sb-icon-call-forwarding::before {
  position: absolute;
  font-size: 0.8rem;
  top: 0.5rem;
  left: -0.6rem;
}

#statusbar-call-forwardings[data-multiple="true"] .sb-icon-call-forwarding[data-index="0"]::before {
  content: '1';
}
#statusbar-call-forwardings[data-multiple="true"] .sb-icon-call-forwarding[data-index="1"]::before {
  content: '2';
}
#statusbar-call-forwardings[data-multiple="true"] .sb-icon-call-forwarding[data-index="2"]::before {
  content: '3';
}
#statusbar-call-forwardings[data-multiple="true"] .sb-icon-call-forwarding[data-index="3"]::before {
  content: '4';
}

.sb-icon {
  width: 1.6rem;
  height: 1.6rem;
  background: image-set(url("images/icons.png") 1x, url("images/icons@1.5x.png") 1.5x, url("images/icons@2x.png") 2x, url("images/icons@2.25x.png") 2.25x) no-repeat;
  background-size: 34rem 9.6rem;
}

.sb-icon-battery {
  width: 2.5rem;
}
.sb-icon-battery[data-level="0"] {
  background-position: 0 0;
}
.sb-icon-battery[data-level="10"] {
  background-position: -2.8rem 0;
}
.sb-icon-battery[data-level="20"] {
  background-position: -5.6rem 0;
}
.sb-icon-battery[data-level="30"] {
  background-position: -8.4rem 0;
}
.sb-icon-battery[data-level="40"] {
  background-position: -11.2rem 0;
}
.sb-icon-battery[data-level="50"] {
  background-position: -14rem 0;
}
.sb-icon-battery[data-level="60"] {
  background-position: -16.8rem 0;
}
.sb-icon-battery[data-level="70"] {
  background-position: -19.6rem 0;
}
.sb-icon-battery[data-level="80"] {
  background-position: -22.4rem 0;
}
.sb-icon-battery[data-level="90"] {
  background-position: -25.2rem 0;
}
.sb-icon-battery[data-level="100"] {
  background-position: -28rem 0;
}
.sb-icon-battery:not([data-level]) {
  background-position: -30.8rem 0;
}

.sb-icon-battery:not([data-level])[data-charging="true"],
.sb-icon-battery[data-level="0"][data-charging="true"] {
  background-position: 0 -2rem;
}
.sb-icon-battery[data-level="10"][data-charging="true"] {
  background-position: -2.8rem -2rem;
}
.sb-icon-battery[data-level="20"][data-charging="true"] {
  background-position: -5.6rem -2rem;
}
.sb-icon-battery[data-level="30"][data-charging="true"] {
  background-position: -8.4rem -2rem;
}
.sb-icon-battery[data-level="40"][data-charging="true"] {
  background-position: -11.2rem -2rem;
}
.sb-icon-battery[data-level="50"][data-charging="true"] {
  background-position: -14rem -2rem;
}
.sb-icon-battery[data-level="60"][data-charging="true"] {
  background-position: -16.8rem -2rem;
}
.sb-icon-battery[data-level="70"][data-charging="true"] {
  background-position: -19.6rem -2rem;
}
.sb-icon-battery[data-level="80"][data-charging="true"] {
  background-position: -22.4rem -2rem;
}
.sb-icon-battery[data-level="90"][data-charging="true"] {
  background-position: -25.2rem -2rem;
}
.sb-icon-battery[data-level="100"][data-charging="true"] {
  background-position: -28rem -2rem;
}

.sb-icon-wifi[data-level="0"][data-connecting="true"] {
  background: image-set(url("images/wifi-connecting.png") 1x, url("images/wifi-connecting@1.5x.png") 1.5x, url("images/wifi-connecting@2x.png") 2x, url("images/wifi-connecting@2.25x.png") 2.25x) no-repeat;
  background-position: 0 0;
  background-size: 1.6rem;
}

.sb-icon-wifi:not([data-level]),
.sb-icon-wifi[data-level="0"] {
  background-position: 0 -6rem;
}
.sb-icon-wifi[data-level="1"] {
  background-position: -2rem -6rem;
}
.sb-icon-wifi[data-level="2"] {
  background-position: -4rem -6rem;
}
.sb-icon-wifi[data-level="3"] {
  background-position: -6rem -6rem;
}
.sb-icon-wifi[data-level="4"] {
  background-position: -8rem -6rem;
}

.sb-icon-airplane-mode {
  background-position: 0 -4rem;
}

.sb-icon-signal[data-level="-1"][data-searching="true"] {
  background: image-set(url("images/signal-searching.png") 1x, url("images/signal-searching@1.5x.png") 1.5x, url("images/signal-searching@2x.png") 2x, url("images/signal-searching@2.25x.png") 2.25x) no-repeat;
  background-position: 0 0;
  background-size: 1.6rem;
}

.sb-icon-signal[data-level="-1"] {
  background-position: -2rem -4rem;
}

.sb-icon-signal[data-level="0"] {
  background-position: -4rem -4rem;
}

.sb-icon-signal[data-level="1"] {
  background-position: -6rem -4rem;
}

.sb-icon-signal[data-level="2"] {
  background-position: -8rem -4rem;
}

.sb-icon-signal[data-level="3"] {
  background-position: -10rem -4rem;
}

.sb-icon-signal[data-level="4"] {
  background-position: -12rem -4rem;
}

.sb-icon-signal[data-level="5"] {
  background-position: -14rem -4rem;
}

.sb-icon-signal {
  /* default icon is the "no sim" icon */
  background-position: -14rem -8rem;
  position: relative;
}

.sb-icon-network-activity {
  width: 1.6rem;
  height: 1.6rem;
  /* HACK: This enforces allocation of a dedicated layer just for this animated
   * icon, remove after bug 717872 gets fixed. */
  display: block;
  transform: perspective(0.1rem);
}

.sb-icon-network-activity[hidden] {
  display: none;
}

.sb-icon-headphone {
  background-position: -18rem -4rem;
}

.sb-icon-bluetooth-headphone {
  background-position: -22rem -8rem;
}

.sb-icon-bluetooth-transfer {
  background-position: -28rem -8rem;
}

.sb-icon-geolocation {
  background-position: -22rem -4rem;
}

.sb-icon-geolocation[data-active="true"] {
  background-position: -20rem -4rem;
}

.sb-icon-recording {
  background-position: -26rem -4rem;
}

.sb-icon-recording[data-active="true"] {
  background-position: -24rem -4rem;
}

.sb-icon-roaming {
  background-position: -16.3rem -4rem;
}

.sb-icon-alarm {
  background-position: -28rem -4rem;
}

.sb-icon-tethering {
  background-position: -12rem -6rem;
}

.sb-icon-tethering[data-active="true"] {
  background-position: -10rem -6rem;
}

.sb-icon-bluetooth {
  background-position: -24rem -6rem;
}

.sb-icon-bluetooth[data-active="true"] {
  background-position: -22rem -6rem;
}

.sb-icon-mute {
  background-position: -26rem -6rem;
}

.sb-icon-mute.vibration {
  background-position: -20rem -6rem;
}

.sb-icon-usb {
  background-position: -28rem -6rem;
}

.sb-icon-emergency-callback {
  background-position: -24rem -8rem;
}

.sb-icon-sms {
  background-position: -14rem -6rem;
  position: relative;
}

.sb-icon-sms::before {
  content: attr(data-num);
  position: absolute;
  color: #000;
  top: 0.4rem;
  offset-inline-start: 0;
  width: 100%;
  text-align: center;
  font-size: 1.15rem; /*5pt  was 0.8rem */
}

.sb-icon-download {
  width: 1.6rem;
  height: 1.6rem;
  /* HACK: This enforces allocation of a dedicated layer just for this animated
   * icon, remove after bug 717872 gets fixed. */
  display: block;
  transform: perspective(0.1rem);
}

.sb-icon-download[hidden] {
  display: none;
}

.sb-icon-call-forwarding {
  background-position: -20rem -8rem;
}

.sb-icon-playing {
  background-position: -18rem -8rem;
}

.sb-icon-nfc {
  background-position: -26rem -8rem;
}

.sb-icon-debugging {
  background: none;
  text-align: center;
}

.sb-icon-debugging::before {
  font-size: 1.6rem;
  line-height: 1.6rem;
}

/* Hide icons applying a class to the status bar */
.sb-hide-time .sb-icon-time,
.sb-hide-battery .sb-icon-battery,
.sb-hide-airplane-mode .sb-icon-airplane-mode,
.sb-hide-wifi .sb-icon-wifi,
.sb-hide-mobile-connection .sb-icon-mobile-connection,
.sb-hide-network-activity .sb-icon-network-activity,
.sb-hide-tethering .sb-icon-tethering,
.sb-hide-bluetooth .sb-icon-bluetooth,
.sb-hide-nfc .sb-icon-nfc,
.sb-hide-debugging .sb-icon-debugging,
.sb-hide-emergency-callback .sb-icon-emergency-callback,
.sb-hide-download .sb-icon-download,
.sb-hide-usb .sb-icon-usb,
.sb-hide-mute .sb-icon-mute,
.sb-hide-recording .sb-icon-recording,
.sb-hide-geolocation .sb-icon-geolocation,
.sb-hide-call-forwardings .sb-icon-call-forwarding,
.sb-hide-bluetooth-headphone .sb-icon-bluetooth-headphone,
.sb-hide-headphone .sb-icon-headphone,
.sb-hide-playing .sb-icon-playing,
.sb-hide-bluetooth-transfer .sb-icon-bluetooth-transfer,
.sb-hide-alarm .sb-icon-alarm,
.sb-hide-sms .sb-icon-sms {
  display: none;
}

/* Using visibility for operator so that the element width is known at all time. */
.utility-tray .sb-hide-operator .statusbar > .sb-icon-operator {
  visibility: hidden;
}