scinote-web/app/assets/stylesheets/shared/pdf_preview.scss

.pdf-viewer {
  display: flex;
  flex-direction: column;
  height: calc(100% + 4rem);
  margin: -2rem;
  position: relative;
  width: calc(100% + 4rem);

  .page-container {
    display: flex;
    flex-grow: 1;
    overflow: auto;
    padding: 1em;
    position: relative;
    width: 100%;

    .layers-container {
      margin: 0 auto;
      position: relative;
    }
  }

  .pdf-toolbar {
    align-items: center;
    background: $color-concrete;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: .5em;
    width: 100%;

    .page-counter {
      padding: 0 .25em;
      width: auto;
    }

    .current-page {
      margin-right: .25em;
      max-width: 3em;
    }

    .total-page {
      margin-left: .25em;
    }

    .divider {
      background: $color-alto;
      height: 2em;
      margin: 0 1em;
      width: 2px;
    }

    .zoom-page {
      margin-right: .5em;
      width: 10em;
    }

    .btn:disabled {
      background: $color-concrete;
    }
  }

  .blocked-screen {
    align-items: center;
    color: $color-white;
    display: none;
    height: 100%;
    justify-content: center;
    position: absolute;
    width: 100%;

    .title {
      @include font-h1;
    }

    .description {
      @include font-main;
      margin-bottom: 2em;
    }

    .image {
      background: unset;
      margin-bottom: 2em;
    }
  }

  &.blocked {
    .pdf-toolbar {
      display: none;
    }

    .blocked-screen {
      display: flex;
      flex-direction: column;
    }
  }
}