.c-navbar__notification {
  li {
    cursor: pointer;
    padding: 10px;
    border-bottom: 1px solid #efefef;
    &:first-child {
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
    }
    &:last-child {
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
      font-weight: 700;
    }
    &:hover {
      background-color: #2a46ff;
      color: #fff;
    }
  }
  &-item {
    &.highlight {
      font-weight: 500;
      color: red;
    }
    &-title {
      font-weight: 500;
      font-size: 15px;
      margin-bottom: 1px;
    }
    &-day {
      font-size: 12px;
      color: #413f3f;
    }
    &:hover &-day {
      color: #fff;
    }
    &.un-read {
      .c-navbar__notification-item-title, .c-navbar__notification-item-day {
        font-weight: 700;
      }
    }
  }
  &-modal {
    height: 90%;
    overflow: scroll;
    ul {
      list-style-type: none;
      padding: 0;
      margin: 0;
      padding-top: 15px;
      border-top: 1px solid #d6d8e7;
      li {
        margin-bottom: 20px;
        &:last-child {
          margin-bottom: 0;
        }
        cursor: pointer;
        &:hover .c-navbar__notification-item-title {
          color: #2a46ff;
        }
        &:hover .c-navbar__notification-item-day {
          color: #413f3f;
        }
        .c-navbar__notification-item-day {
          margin-top: 5px;
        }
      }
    }
  }
  //&-show-all {
  //  font-weight: 700;
  //  display: inline-block;
  //  cursor: pointer;
  //}
  &-load-more {
    background-color: transparent;
    border: none;
    padding: 0;
    margin-top: 20px;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    &:hover {
      color: #2a46ff;
    }
  }
}
