<div class="balloon-wrapper">
  <div class="balloon__link notification-center__icon {{if isTop "notification-center__icon--top" "notification-center__icon--left"}}" {{action 'toggleCenter' bubbles=false}}>
    {{#if isTop}}
      {{svg-icon path='svg/onsite-notifications/notif-blurb-top'}}
      <div class="notification__tooltip notification__tooltip--top {{if isCenterOpen 'hide' 'show'}}">
        <div class="balloon balloon--tooltip balloon--down balloon--center notification__tooltip-content">
          {{t 'general.Twitch.notifications'}}
        </div>
      </div>
    {{else}}
      {{svg-icon path='svg/onsite-notifications/notif-blurb'}}
      <div class="notification__tooltip {{if isCenterOpen 'hide' 'show'}}">
        <div class="balloon balloon--tooltip balloon--right balloon--center notification__tooltip-content">
          {{t 'general.Twitch.notifications'}}
        </div>
      </div>
    {{/if}}
    {{#if hasUnseen}}
      <div class="flex flex--horizontalCenter flex--verticalCenter notification__number-unread">
        <div class="flex__item cl-white notification__number-unread-count">{{unseenViewCount}}</div>
      </div>
    {{/if}}
  </div>
  <div class="notification-center-balloon balloon {{if isTop "balloon--down balloon--right mg-t-1" "balloon--up balloon--left balloon--full"}} balloon--toggle {{if isCenterOpen 'show' 'hide'}} balloon--no-padding theme--light mg-b-1">
    {{twitch-onsite-notifications/center-window
      newNotificationsCount=newNotificationsCount
      clickNotification=(action 'clickNotification')
      dismiss=(action 'dismissNotification')
    }}
  </div>

  {{#ember-wormhole to="toast-location"}}
    {{twitch-onsite-notifications/toast-manager
      clickNotification=(action 'clickNotification')
    }}
  {{/ember-wormhole}}
</div>
