@layer components {
  /*
   * The unread count on Alerts. In the rail it is positioned against the
   * link's anchor so the link's clipping does not hide it while icon-wide:
   * on the icon there, at the row's end when expanded.
   */
  .nav-badge {
    position: absolute;
    inset-block-start: 0.125rem;
    inset-inline-start: 1.375rem;
    display: inline-grid;
    place-items: center;
    min-inline-size: 1rem;
    block-size: 1rem;
    padding-inline: 0.25rem;
    border-radius: 999px;
    background: var(--destructive);
    color: white;
    font-size: 0.625rem;
    font-weight: var(--font-weight-medium);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    pointer-events: none;
    animation: rail-link-badge-in 200ms cubic-bezier(0.23, 1, 0.32, 1);
  }

  @media (width >= 48rem) {
    .shell[data-rail="expanded"] .nav-badge {
      inset-block-start: 50%;
      inset-inline: auto 0.5rem;
      translate: 0 -50%;
    }
  }

  @media (width < 48rem) {
    .shell[data-rail-narrow="expanded"] .nav-badge {
      inset-block-start: 50%;
      inset-inline: auto 0.5rem;
      translate: 0 -50%;
    }
  }

  @keyframes rail-link-badge-in {
    from {
      opacity: 0;
      scale: 0.95;
    }
  }

  .alert-feed {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }

  .alert-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    font-size: var(--text-sm);

    & + & {
      border-block-start: 1px solid var(--border);
    }

    & svg {
      inline-size: 1.125rem;
      block-size: 1.125rem;
    }
  }

  .alert-item--unread {
    background: color-mix(in oklch, var(--destructive) 6%, transparent);

    & .alert-item__icon {
      color: var(--destructive);
    }
  }

  .alert-item__icon {
    display: grid;
    padding-block-start: 0.0625rem;
    color: var(--muted-foreground);
  }

  .alert-item__body {
    display: grid;
    gap: 0.25rem;
    min-inline-size: 0;
  }

  .alert-item__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-weight: var(--font-weight-medium);
    text-wrap: pretty;
    overflow-wrap: anywhere;
  }

  .alert-item__example {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    overflow-wrap: anywhere;

    & a {
      color: inherit;
    }
  }

  .alert-item__meta {
    margin: 0;
    font-size: var(--text-xs);

    & a {
      color: inherit;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .nav-badge {
      animation: none;
    }
  }
}