/* ----- Notification Popover Style Overrides ----- */
.notifications__wrapper {
  align-items: center;
  display: flex;
  color: $white;
  padding: 0.5rem;
  &:hover {
    cursor: pointer;
  }

}


.notifications {
  position: relative;
  right: auto;
  width: 100%;
  float: left;

  .mat-menu-content:not(:empty) {
    padding-top: 0;
    padding-bottom: 0;
  }

  .mat-card {
    padding: 0;
  }

  .mat-card-header {
    .mat-card-header-text {
      margin: auto auto auto 0.5rem !important;
    }
    .mat-card-title {
      margin: auto 0 !important;
    }
  }



  & .mat-card-header {
    background-color: $lightgrey-1;
    border-bottom: 0;
    font-weight: $medium-weight;

    .mat-card-title {
      font-size: mat-font-size($fontConfig, body-1);

      @include ui-typography-reposive($fontConfig-sm, $fontConfig-m, $fontConfig-l, body-1);
    }
  }

  &.has-user-icon {
    right: 0px;
  }


  & .mat-card {
    padding: 0 !important;
    border: none;
  }

  .popover-arrow {
    display: none;

    @media print, (min-width: 950px) {
      display: block;
      left: auto !important;
      right: 19px;
    }
  }


  .notifications-content__wrapper {
    padding: 0.5rem 0.75rem;
    max-height: 320px;
    overflow-y: auto;
    overflow-x: hidden;

    p {
      margin-bottom: 0;
      width: 100%;
    }
  }

  .notification-item {
    border-bottom: 1px solid $lightgrey-1;
    padding: 0.35rem 0 0.5rem 0;

    &:first-of-type {
      padding-top: 0;
    }

    &:last-of-type {
      border: 0;
    }
  }

  & > button {
    padding: 0.5rem 0.5rem;
  }
}

@media print, (min-width: 767px) {
  .notifications {
    & > button {
      padding: 0.5rem 1rem;
    }
  }
}

/* ----- end of Notification Style Overrides ----- */