// ============================================================================
// :: Notifications
// ============================================================================
/**
 * Notifications page containing the list of notifications per month and per
 * year
 */

// ============================================================================
// :: Root
// ============================================================================
// .p-notifications {}

// ============================================================================
// :: Elements
// ============================================================================
.p-notifications__list {

  // Used to make the notifications list full height
  @include respond-at($breakpoint-tablet-default) {
    min-height: 100%;
    padding-top: 0;
  }

  // Enable the use of flex on the notifications component
  &,
  & > .l-container {

    @include respond-at($breakpoint-tablet-default) {
      display: flex;
      flex-direction: column;
    }
  }

  /**
   * Make sure that the notifications component reaches the end of the
   * available space
   */
  & > .l-container,
  .o-notifications {

    @include respond-at($breakpoint-tablet-default) {
      flex-grow: 1;
    }
  }
}