.pdf-preview {
  &__heading {
    font-size: 1rem;
    padding: 10px 0;

    .pdf-preview__icon {
      font-size: 1.25rem;
      color: $blue;
      margin-right: 10px;
    }
  }

  &__controls {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 0;
    border-top: 1px solid $gray-light;

    .btn {
      margin: 0 4px;

      // The global button-secondary mixin styles :focus like :hover, so a tapped
      // button stays filled. Keep the filled look for keyboard focus only.
      &:focus:not(:focus-visible) {
        color: $blue;
        background-color: $white;
        border-color: $blue;
        box-shadow: none;
      }

      // Touch screens keep :hover on the last tapped element; drop it where
      // there is no real hover. :active still gives feedback while pressed.
      @media (hover: none) {
        &:hover {
          color: $blue;
          background-color: $white;
          border-color: $blue;
        }
      }
    }
  }

  &__pages {
    display: inline-flex;
    align-items: center;
    margin: 0 8px;
    font-size: 0.875rem;
  }

  &__page-input {
    width: 50px;
    margin-right: 4px;
    padding: 2px 4px;
    border: 1px solid $gray;
    border-radius: 3px;
    text-align: center;
  }

  // Scrolling, page stacking and the spacing around the pages come from the
  // PdfPreview library; only the decoration is set here. The background makes
  // the gutter visible, so it reads as the edge of the preview.
  &__viewer {
    height: 50vh;
    background: $gray-light;
  }

  &__info {
    margin-top: 1rem;
    text-align: center;
  }

  &__actions {
    padding: 0 30px;

    .btn {
      width: 100%;

      &:last-of-type {
        margin-top: 1rem;
      }
    }
  }

  &__page {
    background: $white;
    box-shadow: 0 2px 8px $black-transparent20;
  }

  // sass-lint:disable no-important
  .modal-header {
    .modal-title {
      margin-bottom: 0 !important;
    }
  }
}

.id-pdf-preview {
  padding-bottom: 10px;
}

// Only the preview area breaks out of the modal's content column; the heading
// and the navigation above it keep the default width. Row margin and column
// gutter are both zeroed so the preview sits flush with the popup edges. The
// border sits here rather than on the controls so it spans the whole popup.
.id-pdf-preview-pages {
  border: 1px solid $gray-light;

  .modal-box__inner-row {
    margin: 0;
  }

  .modal-box__inner-columns {
    @include make-col(12);

    padding: 0;
  }
}

.id-pdf-preview-actions {
  padding-bottom: 30px;
}