/* The bell in the menu and the notifications inbox. */
@layer reset, tokens, base, layout, components, utilities, print;

@layer components {
  .site-nav .bell { position: relative; display: inline-flex; align-items: center; padding: var(--space-1) var(--space-2); }
  .bell-count { position: absolute; top: -2px; right: -4px; min-width: 1.1rem; padding: 0 .3rem; border-radius: var(--radius-pill);
                background: var(--negative); color: #fff; font-size: .65rem; font-weight: var(--weight-bold); line-height: 1.1rem; text-align: center; }

  .notification-list { list-style: none; padding: 0; }
  .notification-list li { border-bottom: 1px solid var(--line); }
  .notification-list li:last-child { border-bottom: none; }
  .notification-list a { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) var(--space-4); text-decoration: none; color: var(--ink-soft); }
  .notification-list a:hover { background: var(--glass-strong); }
  .notification--unread a { color: var(--ink); }
  .notification--unread strong::before { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .4rem;
                                          border-radius: 50%; background: var(--sheen); vertical-align: middle; }
}