.notification-item{
  padding: 20px;
  background: #f2f4f7;
  border-radius: 6px;
  cursor: pointer;
  .notification-heading {
    max-width: 290px;
    h1{
      font-size: .75rem;
      letter-spacing: 0;
      color: var(--#{$variable-prefix}eerie-black);
      opacity: 1;
    }
    p{
      margin: 0;
      font-size: .625rem;
      letter-spacing: 0;
      color: var(--#{$variable-prefix}eerie-black);
      opacity: .69;
    }
  }
  .notification-time{
    flex: 1;
    text-align: end;
    .mk-bell-noti-time{
      margin: 0;
      font-size: .625rem;
      letter-spacing: 0;
      color: var(--#{$variable-prefix}eerie-black);
      opacity: .69;
    }
  }
  &.mk-bell-notification-item{
    padding: 0;
    background: transparent;
    border-radius: 0;
    .mk-bell-notification-text-wrapper{
      padding: 0 0 10px;
      border-bottom: 1px solid var(--#{$variable-prefix}light-gray-background);
    }
    .mk-bell-notification-heading{
      max-width: 100%;
      .mk-bell-noti-heading{
        margin: 0 0 .5rem;
        font-weight: 600;
        color: var(--#{$variable-prefix}light-text-color);
      }
    }
    .mk-bell-notification-time{
      text-align: left;
      .mk-bell-noti-time{
        opacity: .69;
      }
    }
    .mk-bell-icon{
      position: relative;
      display: flex;
      flex: none;
      align-items: center;
      justify-content: center;
      padding: 7px;
      width: 25px;
      height: 25px;
      color: var(--#{$variable-prefix}primary-color-hex);
      background: var(--#{$variable-prefix}light-gray-background);
      border-radius: 50px;
    }
    &.mk-unread-sign{
      .mk-red-dot{
        display: block;
      }
      .mk-bell-notification-heading{
        .mk-bell-noti-heading{
          color: var(--#{$variable-prefix}eerie-black);
        }
      }
      .mk-bell-notification-time{
        .mk-bell-noti-time{
          opacity: 1;
        }
      }
    }
    .mk-red-dot{
      position: absolute;
      top: 1px;
      right: 1px;
      display: none;
      width: 5px;
      height: 5px;
      border-radius: 50px;
      background: var(--#{$variable-prefix}error-color);
    }
    
  }
}
.no-notification {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(100vh - 245px);
}

.notification-text {
  span {
    display: none;
  }
}