/* NOTIFICATIONS BLOCK */

.notifications {
  --flow-space: var(--space-16);
}

.notification {
  --flow-space: var(--space-12);
  font-size: var(--text-sm);
  position: relative;
  cursor: pointer;
}
.notification[data-status="unread"]::after {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  outline: 2px solid var(--color-white);
  background: var(--color-primary);
  border-radius: 50%;
  position: absolute;
  top: 0;
  right: 0;
}
.notification p {
  max-width: 100%;
}
.notification header p {
  column-gap: 0;
}
.notification__type {
  display: flex;
}
.notification__type::before {
  margin-right: var(--space-8);
}
.notification__client {
  display: inline-block;
}
.notification__client::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  background: var(--color-grey-700);
  border-radius: 50%;
  margin: 0.2em 0.5em;
}
.notification__body {
  --line-clamp: 2;
}
