#keyboards {
  /* See the new mozpasspointerevents attribute added in bug 796452 */
  pointer-events: none;

  position: absolute;
  bottom: 0;

  width: 100%;
  height: 100%;
}

.inputWindow {
  position: absolute;
  opacity: 0;
  transform: translateY(100%);
  bottom: 0;
  height: 100%;
  width: 100%;
}

.inputWindow iframe {
  display: none;
  position: absolute;
  bottom: 0;

  width: 100%;
  height: 100%;
}

.inputWindow.active {
  opacity: 1;
  transform: translateY(0);
}

.inputWindow.top-most iframe {
  display: block;
}

@media not all and (-moz-physical-home-button) {
  #screen:not(.software-button-disabled) #keyboards {
    bottom: var(--software-home-button-height);
  }
}

#screen.software-button-enabled #keyboards {
  bottom: var(--software-home-button-height);
}

@media (orientation: landscape) {
  #screen.software-button-enabled #keyboards {
    /* BiDi note: the software home button should not be mirrored in RTL. */
    right: var(--software-home-button-height);
    bottom: 0;
    left: 0;
    width: auto;
  }
}

.inputWindow.slide-from-bottom {
  animation: kbShow var(--transition-duration) both ease;
}

.inputWindow.slide-to-bottom {
   /* ease-in for disappearing */
  animation: kbHide var(--transition-duration) both ease-in;
}

@keyframes kbShow {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  80% {
    /* the original style indicates opacity should transition from 0 to 1
       within 0.2s for "ease", which after calculation is about 80% progress
       of var(--transition-duration) "ease". */
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes kbHide {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(100%);
  }
}

/* notification */
#keyboard-show-ime-list > .fake-notification {
  box-sizing: border-box;

  /* wait for activate */
  display: none;
}

#keyboard-show-ime-list > .fake-notification.activated {
  display: block;
}

#keyboard-show-ime-list > .fake-notification > .title-container {
  margin: 1.4rem 0 0;
  margin-inline-start: 3.7rem;
}

#keyboard-show-ime-list > .fake-notification > .detail {
  margin-inline-start: 3.7rem;
}

.lockScreenInputWindow.slide-from-bottom {
  animation: slideFromBottom var(--transition-duration) both ease;
}

.lockScreenInputWindow.slide-to-bottom {
  animation: slideToBottom var(--transition-duration) both ease-in;
}

@keyframes slideFromBottom {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideToBottom {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    transform: translateY(100%);
  }
}

.lockScreenInputWindow {
  transform: translateY(100%);
}

.lockScreenInputWindow #lockscreen-inputpad-frame {
  position: absolute;
  bottom: 0;

  width: 100%;
  height: 100%;
  border: 0;
}

.lockScreenInputWindow #lockscreen-inputpad-frame.hide {
  transform: translateY(100%);
}

/* Gecko 52 desktop: the JS clip limits hit testing to the keyboard area. */
.inputWindow.active.top-most iframe { pointer-events: auto; }