.entrySheet {
  position: absolute;
  width: 100%;
  height: calc(100% - 2.4rem);
  top: 2.4rem;
  left: 0;
  opacity: 1;
  visibility: visible;
  background: rgba(0, 0, 0, 0.5);
}

.entrySheet .throbber {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.3rem;
  z-index: 1;
}

.entrySheet.disappearing {
  pointer-events: none;
  transition: visibility ease .6s, opacity ease .6s;
  visibility: hidden;
  opacity: 0;
}

.entrySheet .throbber[data-loading="true"] {
  height: 0.3rem;
  background-image: url('../shared/progress.gif');
  background-size: auto 0.3rem;
}

.entrySheet.active .content,
.entrySheet.active .header {
  transform: translateY(0);
}

.entrySheet .header {
  transition: transform .6s ease;
  transform: translateY(-100%);
  height: 5rem;
  width: 100%;
  top: 0;
  offset-inline-start: 0;
  position: absolute;
}

/*
 * We need to style the title placed in the entrySheet's gaia-header
 * To ensure it overflows and truncates for the correct direction
 * for the content placed in there
 */
gaia-header h1 > bdi.entrySheet-title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  unicode-bidi: -moz-plaintext;
}


.entrySheet .content {
  position: absolute;
  top: 5rem;
  left: 0;
  width: 100%;
  height: calc(100% - 5rem);

  background-color: #fff;
  transform: translateY(100%);
  transition: transform .6s ease;
}

.entrySheet .content > iframe {
  z-index: 1;
}

.entrySheet .content > * {
  width: 100%;
  height: 100%;
  border: none;
}