{{#if notification.type === 'mention' || notification.type === 'reblog' || notification.type === 'favourite'}}
  <Status :index :length :timelineType :timelineValue
          status="{{notification.status}}"
          :notification
          on:recalculateHeight
  />
{{else}}
  <article class="notification-article"
           tabindex="0"
           aria-posinset="{{index}}" aria-setsize="{{length}}"
  >
    <div class="follow-notification-offset">
      <StatusHeader :status :notification isStatusInNotification="true" />
    </div>
  </article>
{{/if}}
<style>
  .notification-article {
    width: 560px;
    max-width: calc(100vw - 40px);
    padding: 10px 20px;
    border-bottom: 1px solid var(--main-border);
  }
  .follow-notification-offset {
    margin-left: 58px; /* offset for avatar, 48px + 10px */
  }
  @media (max-width: 767px) {
    .notification-article {
      padding: 10px 10px;
      max-width: calc(100vw - 20px);
      width: 580px;
    }
  }
</style>
<script>
  import Status from './Status.html'
  import StatusHeader from './StatusHeader.html'
  export default {
    components: {
      Status,
      StatusHeader
    }
  }
</script>