@layer pages {
  #notifications-index {
    .notifications__list {
      display: flex;
      flex-direction: column;
      border-top: 1px solid var(--color-border);
    }

    .notification-item {
      padding: var(--space-4) 0;
      border-bottom: 1px solid var(--color-border);

      &.is-unread .notification-item__message {
        font-weight: var(--font-semibold);
      }

      .notification-item__icon {
        color: var(--color-text-muted);

        svg path {
          stroke: currentColor;
        }
      }

      .notification-item__content {
        margin: var(--space-2) 0;

        p {
          margin: 0;
        }

        time {
          font-size: var(--text-sm);
          color: var(--color-text-muted);
        }
      }

      @media screen and (min-width: 768px) {
        display: flex;
        gap: var(--space-3);

        .notification-item__content {
          flex: 1;
          margin: 0;
        }

        .notification-item__actions {
          display: flex;
          justify-content: flex-end;
          align-items: flex-start;
          gap: var(--space-3);
        }
      }
    }
  }
}