#notifications-index {
  .notifications__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }

  .notification-item {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);

    .notification-item__icon {
      svg path {
        stroke: var(--color-primary-600);
      }
    }

    .notification-item__content {
      margin: var(--space-2) 0;
      p {
        font-size: 1.125rem;
        margin: 0;
      }
      time {
        color: var(--color-gray-500);
      }
    }

    @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-2);
      }
    }
  }
}