/* Since the UtilityTray overlays the entire screen, we must ensure that it
   doesn't get displayed until after it has loaded. This class is removed in
   utility_tray.js. */
.utility-tray-loading {
  visibility: hidden;
}

.tray {
  --tray-invisible-gripper-height: 2rem;
  --scrollbar-width: 15px;
  --software-buttons-width-adjustment: 0px;
  --software-buttons-height-adjustment: 0px;

  position: relative;
  width: calc(100% + var(--scrollbar-width));
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;

  pointer-events: none;
  will-change: scroll-position;
}

/* When using a screen reader, disable the invisible gripper.
   The invisible gripper is useless with the screen reader and
   interferes with touching the statusbar. */
#screen.screenreader .tray {
  --tray-invisible-gripper-height: 0px;
}

/* NOTE: csslint treats variable-only rules as "empty" errors, per
   <https://github.com/CSSLint/csslint/issues/538>. */
@media (orientation: portrait) {
  #screen.software-button-enabled .tray {
    --software-buttons-height-adjustment: var(--software-home-button-height);
  }
}

@media (orientation: landscape) {
  #screen.software-button-enabled .tray {
    --software-buttons-width-adjustment: var(--software-home-button-height);
  }
}

.tray-dead-area {
  height: calc(100% - var(--tray-invisible-gripper-height));
}

.tray-content {
  height: calc(100% - var(--software-buttons-height-adjustment));
  width: calc(100% - var(--scrollbar-width) - var(--software-buttons-width-adjustment));
  pointer-events: all;
  background-color: hsla(0, 0%, 20%, .95);
  position: relative;
}

.tray-footer {
  position: absolute;
  bottom: 0;
  width: 100%;
}

#tray-invisible-gripper {
  height: var(--tray-invisible-gripper-height);
  pointer-events: all;
}

.tray.open #tray-invisible-gripper {
  pointer-events: none;
}

/* Special visibility overrides */

#screen.lockscreen-camera > #utility-tray {
  visibility: hidden;
}

/* Statusbar */

#statusbar-tray {
  background-image: none;
  background-repeat: no-repeat;
  width: 100%;
  top: 0;
  height: 3rem;
  filter: none;
}
html[dir="ltr"] #statusbar-tray { background-position: right; }
html[dir="rtl"] #statusbar-tray { background-position: left; }

#screen.utility-tray-in-transition #statusbar-tray,
#screen:-moz-full-screen-ancestor #statusbar-tray,
#screen.utility-tray-in-transition #utility-tray #statusbar-tray {
  background-image: -moz-element(#statusbar-icons);
}

#statusbar-tray > .sb-start-upper {
  position: absolute;
  offset-inline-start: 0;
  line-height: var(--statusbar-height);
}

/* Notifications indicator */

#ambient-indicator {
  height: .2rem;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  background-color: #00D3FF;
  transition: opacity .5s ease .5s;
  position: absolute;
  pointer-events: none;
}


#screen:not(.locked) #ambient-indicator.unread {
  opacity: 1;
  visibility: visible;
}

#ambient-indicator.active {
  background: none #006e86 repeat;
  display: block;
  transition: none;
  opacity: 1;
  visibility: visible;
}

#ambient-indicator.active > .handle {
  border-top: 0.2rem #00d3ff solid;
  border-left: 0.2rem transparent solid;
  border-right: 0.2rem transparent solid;
  animation: handle 1s infinite;
  height: 0.2rem;
  width: 8.6rem;
  margin: 0 auto;
  visibility: visible;
}

#ambient-indicator.active > .handle2 {
  animation-delay: 0.5ms;
  margin: -0.4rem auto;
}

@keyframes handle {
  0%   { transform: scaleX(1.0); opacity: 1;}
  100% { transform: scaleX(4.0); opacity: 0;}
}

#utility-tray-notifications {
  position: sticky;
  top: 0;
  margin-bottom: 2rem;
}

/* Utility Tray Footer (the buttons at the bottom of the tray) */

#utility-tray-footer {
  background: hsla(0, 0%, 100%, .05);
}

@keyframes tray-footer-in {
  0% { transform: scaleY(0.9); opacity: 0; }
  15% { transform: scaleY(1.08); opacity: 1; }
  30% { transform: scaleY(0.94); }
  65% { transform: scaleY(1.03); }
  100% { transform: scaleY(1); }
}

/* NOTE: We cannot modify transform() on the way out, because the user may be
   dragging from on top of the footer; changing the transform mid-scroll
   interrupts the scroll gesture. Fortunately, opacity is fine. */
@keyframes tray-footer-out {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

#utility-tray-footer {
  transform-origin: bottom left;
  opacity: 0;
  transform: scaleY(0);
}

#utility-tray-footer.animate-in {
  animation: tray-footer-in 200ms;
  animation-timing-function: ease-in-out;
  transform: scaleY(1);
  opacity: 1;
}

#utility-tray-footer.animate-out {
  animation: tray-footer-out 50ms;
  animation-timing-function: ease-out;
  opacity: 0;
  transform: scaleY(1);
}

/* The _visible_ grippy at the bottom of the utility tray. */

#utility-tray-grippy {
  width: 100%;
  height: 2rem;
  margin: 0;
  position: relative; /* float above */
  background: hsla(0, 0%, 20%, 1) image-set(url("images/grippy.png") 1x, url("images/grippy@1.5x.png") 1.5x, url("images/grippy@2x.png") 2x, url("images/grippy@2.25x.png") 2.25x) no-repeat center / 7.2rem;
}

/* Icons */

#utility-tray .utility-tray-notifications [data-icon] {
  display: inline-block;
  width: 3rem;
  height: 3rem;
  margin: 1.5rem auto;
}

#utility-tray .utility-tray-notifications [data-icon]:before {
  /* The icons should appear 24 x 24px but each glyph only takes 80% of the space
   So we compensate by adding 20%, that is 30px. */
  font-size: 3rem;
  line-height: 3rem;
}