@layer components {
  /* The settings' Notifications tab. */
  .notification-tab { display: flex; flex-direction: column; font-size: 13px; padding-bottom: 12px; }
  .notification-tab .push-device-note { margin: 12px 16px 0; }
  .notification-bell-heading {
    margin: 0; padding: 14px 16px 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--muted-foreground);
  }
  .notification-levels form.button_to { display: block; margin: 0; }
  .notification-level {
    width: 100%; min-height: 48px; display: flex; align-items: center; gap: 14px; padding: 0 16px; border: 0;
    border-bottom: 1px solid var(--border); background: none; color: var(--foreground); font: inherit; text-align: left; cursor: pointer;
  }
  .notification-level:is(:hover, :active) { background: var(--accent); }
  .notification-level:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--jx-accent); }
  .notification-level > svg { flex: none; color: var(--muted-foreground); }
  .notification-level-label { flex: 1; }
  .notification-level[aria-pressed="true"] .notification-level-label { font-weight: 600; }
  .notification-level-tick { display: inline-flex; color: var(--jx-accent); }
  .notification-note { margin: 0; padding: 12px 16px 0; color: var(--muted-foreground); line-height: 1.45; }
  .notification-bell-off { margin: 14px 16px 8px; color: var(--muted-foreground); line-height: 1.45; }
  .notification-tab > .button { align-self: flex-start; margin: 0 16px; }
  /* The note and its buttons: tinted amber when the device does not receive, red when the browser blocks. */
  .push-device-note {
    --when-display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 2px 2px 6px;
    padding: 10px 12px; border: 1px solid var(--jx-wait); border-radius: var(--radius-md); background: var(--jx-wait-soft);
    font-size: 13px; line-height: 1.45; text-align: left;
  }
  .push-device-note--blocked { border-color: var(--jx-no); background: var(--jx-no-soft); }
  .push-device-note .button.device-when { --when-display: inline-flex; display: none; }
  .push-device-note .push-unblock { margin: 0; }
  .push-device-hint { color: var(--muted-foreground); }
  @media (max-width: 1099px) {
    .notification-level { min-height: var(--tap); }
    .notification-tab .push-device-note .button { min-height: var(--tap); }
  }
}