.notifications-list {
  width: 100%;
}

.notification-item {
  padding: 10px 12px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
  font-size: 0.9rem;
}

.notification-item:hover {
  background-color: #f0f0f0;
  cursor: pointer;
}

.notification_button {
  position: relative;
}

.notification_button::before {
  content: "";
  position: absolute;
  inset: -15px;
}

#notification_button_desktop:hover::before {
  background-color: rgba(255, 255, 255, 0.12);
}

/* Disable all Bootstrap hover/focus/active styles on mobile */
@media (hover: none) and (pointer: coarse) {
  #notification_button_mobile.btn:hover,
  #notification_button_mobile.btn:focus,
  #notification_button_mobile.btn:active,
  #notification_button_mobile.btn:focus-visible {
    background-color: transparent !important;
    color: white !important;        
  }
}

.notification_badge {
  transition: opacity 0.2s ease;
  opacity: 1;
}

.notification_badge.fading-out {
  opacity: 0;
}

.comment-highlight {
  border: 0.5px solid rgba(54, 11, 247, 0.959);
  border-radius: 5px;
  animation: blinkBorder 0.2s ease-in-out 6;
}

@keyframes blinkBorder {
  0% {
    border-color: rgba(54, 11, 247, 0.959);
  }
  50% {
    border-color: transparent;
  }
  100% {
    border-color: rgba(54, 11, 247, 0.959);
  }
}