<div
  #container
  class="container"
  [style.height]="containerHeight()"
  [style.margin-top]="containerMarginTop()"
  [class.armed]="isArmed()"
  [class.triggered]="isTriggered()"
  aria-hidden="true"
>
  <div class="content" [class.stick-bottom]="direction() === 'down'">
    <span class="title">
       <i class="fa fa-angle-double-{{directionArrow()}} animate" aria-hidden="true"></i>
      {{ title() }}
      <i class="fa fa-angle-double-{{directionArrow()}} animate" aria-hidden="true"></i>
    </span>
    <div class="track">
      <div
        class="bar"
        [style.width.%]="progressPercent()"
      ></div>
    </div>
  </div>

  <div #triggerSentinel class="trigger-sentinel" [class.at-top]="direction() === 'down'"></div>
</div>
