@layer components {
  /*
   * Notification
   */
  
  .notification {
    align-items: center;
    border-top: 1px solid var(--color-grey-100);
    display: flex;
    padding: 1rem 0.75rem;
  
    &:last-of-type {
      border-bottom: 1px solid var(--color-grey-100);
    }
  
    @media (max-width: 639.98px) {
      font-size: 0.938rem;
    }
  
    .notification-avatar {
      height: 2.25rem;
      flex: 0 0 auto;
      margin-right: 0.5rem;
      width: 2.25rem;
  
      img {
        width: 100%;
        height: auto;
      }
    }
  
    .notification-message {
      color: var(--color-grey-900);
      flex: 1 1 auto;
  
      a {
        color: var(--color-grey-900);
        font-weight: 500;
      }
    }
  
    .notification-date {
      flex: 0 0 auto;
      padding-left: 0.5rem;
      text-align: right;
    }
  }
  
  .notification-unread {
    background-color: var(--color-grey-050);
  
    .notification-message {
      color: var(--color-grey-700);
  
      a {
        color: var(--color-grey-700);
      }
    }
  
    .notification-date {
      color: var(--color-grey-500);
    }
  }
}