.viewer-background-shared {
  transition: background-color 0.4s;
}

.viewer_view {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;

  flex-direction: column;
  align-items: center;
  /*justify-content: center;*/
  overflow: auto;

  z-index: 20;
  background-color: rgba(0, 0, 0, 0.6);
}

/* Should not be interacted with EVER! */
.ghost {
  opacity: 0;
  pointer-events: none;
}

/* Styles shared by the article viewed and the invisible height acquirer */
.article-sizing-shared {
  width: 40%;
  max-width: 40%;
  /*margin-top: 3em;*/
  /*margin-bottom: 3em;*/
  min-width: 40em;
}

.article-content-shared {
  padding-left: 3em;
  padding-right: 3em;
  line-height: 1.5;
  overflow: hidden;
	font-family: var(--font-article-text);
}

.article-content-shared img {
  max-width: 100%;
}

.article-content-shared h1, h2, h3 {
	font-family: var(--font-headings);
}

#viewed_article {
  margin-top: 3em;
  position: absolute; /* Don't need this when I'm using translate */
  display: block;
  /* max-height: none; */
  height: auto;
  transition-duration: var(--trans);

  background-color: var(--article-bg);

  overflow: hidden;
}

.viewed_article_content {
  /*transition: background-color height 0.4s;*/
  /*background-color: var(--book-bg);*/
  transition-duration: var(--trans);
  height: 0;
  overflow: hidden;
}

#article_content {
  height: 0;
  transition-duration: var(--trans);
}

.mock_article_content {
  overflow: hidden;

  /*transition: background-color height 0.4s;*/
  transition-duration: var(--trans);

  &.open {
    height: calc-size(auto, size);
  }
}

/** Floating Loader **/
.floating_loader {
  position: absolute;
  top: 0px;
  left: 0px;
  height: auto;

  background-color: var(--book-bg);

  &.open {
    background-color: var(--article-bg);
  }

  z-index: 36;
}

.floating_loader * {
  /*opacity: 0;*/
}

.viewer-nav {
  padding: 0.5em;
  font-size: 12pt;
  transition: opacity var(--trans);
}