.unhandled-error-report {
  // Take up the entire page (which takes up 100% of viewport height)
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  // Center ".content" vertically and horizontally
  display: flex;
  justify-content: center;
  align-items: center;

  @include content-1;

  &::before {
    // Semitransparent, full-sized backdrop
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.5);
    pointer-events: none;
  }

  .content {
    position: relative; // stacking context, so it's above backdrop
    background: white;
    padding: 3rem;
    max-width: 55rem; // wrap text nicely
    border-radius: 0.5rem;

    a {
      color: $workspace-action;
    }

    h1 {
      color: $brand-red;
    }

    pre {
      background-color: $dark-accent--soft;
      padding: 1rem;
      border-radius: 0.5rem;
      white-space: pre-wrap; /* Since CSS 2.1 */
      white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
      white-space: -pre-wrap; /* Opera 4-6 */
      white-space: -o-pre-wrap; /* Opera 7 */
      word-wrap: break-word; /* Internet Explorer 5.5+ */
    }

    .actions {
      text-align: right;

      button {
        margin-left: auto; // [2019-05-21] action-button is incorrectly display:flex instead of display:inline-block
        @include action-button;
        @include button-orange--fill;
      }
    }
  }
}
