/*
 * CP-05 Notification list item — app/components/ui/notification_item_component.rb
 *
 * DD-03-style row: 40px tinted event-icon frame + message + DD-16
 * timestamp, the whole row a real link. unread adds a 2px accent-strong
 * inset left edge plus an accent-50 wash. Token vars only — enforced by
 * test/lint/css_token_lint_test.rb.
 */

.ui-notification-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--duration-fast) var(--ease-out);
}

.ui-notification-item:hover {
  background: var(--color-surface-hover);
}

.ui-notification-item__icon-frame {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-round);
}

.ui-notification-item__icon-frame--success {
  background: var(--color-success-subtle);
  color: var(--color-success-ink);
}

.ui-notification-item__icon-frame--warning {
  background: var(--color-warning-subtle);
  color: var(--color-warning-ink);
}

.ui-notification-item__icon-frame--danger {
  background: var(--color-danger-subtle);
  color: var(--color-danger-ink);
}

.ui-notification-item__icon-frame--violet {
  background: var(--color-violet-subtle);
  color: var(--color-violet-ink);
}

.ui-notification-item__icon-frame--accent {
  background: var(--color-accent-100);
  color: var(--color-accent-pressed);
}

.ui-notification-item__icon-frame--neutral {
  background: var(--color-neutral-badge-subtle);
  color: var(--color-neutral-badge-ink);
}

.ui-notification-item__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.ui-notification-item__message {
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  color: var(--color-ink);
}

.ui-notification-item__message strong,
.ui-notification-item__message b {
  font-weight: 500;
}

.ui-notification-item--unread {
  background: var(--color-accent-50);
  box-shadow: inset 2px 0 0 0 var(--color-accent-strong);
}

.ui-notification-item--unread:hover {
  background: var(--color-accent-50);
}