/* The notifications inbox: one row per notification, unread ones marked with an accent edge. */

.notification-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.notification + .notification {
  border-top: 1px solid var(--border-subtle);
}

.notification-open {
  display: grid;
  gap: var(--space-1);
  width: 100%;
  padding: var(--space-4) var(--space-6);
  border: 0;
  border-left: 3px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.notification-open:hover {
  background: var(--surface-subtle);
}

.notification.unread .notification-open {
  border-left-color: var(--accent);
  background: var(--accent-soft);
}

.notification-open b {
  color: var(--text);
}

.notification-open span {
  font-size: var(--text-sm);
}

.notification-open small {
  color: var(--text-muted);
  font-size: var(--text-xs);
}