.c-notifications-dropdown {
    max-width: 500px;

    & ul {
        @apply shadow-lg rounded-8 bg-backgroundColorA;
        @apply py-12 px-16;
        @apply relative z-dropdown;

        & .notification {
            @apply flex items-center;
            @apply py-8 px-16;

            &:hover {
                @apply bg-backgroundColorD;
            }

            & .c-avatar,
            & .icon {
                height: 32px;
                width: 32px;
                @apply mt-4 mr-20;
                @apply self-start;
            }
            & .content {
                @apply flex-grow mr-24;
                & .text {
                    @apply text-15 leading-150;
                    & strong {
                        @apply font-medium;
                    }
                }

                & .created-at {
                    @apply text-14 text-textColor6 leading-160;
                }
            }
            & .read,
            & .unread {
                height: 8px;
                width: 8px;
                @apply flex-shrink-0 rounded-circle mr-24;
            }
            & .unread {
                background: var(--backgroundColorNotificationsUnreadDot);
            }

            & .action-icon {
                height: 16px;
                width: 16px;
                @apply filter-textColor6;
            }
        }
        & .c-prominent-link {
            @apply mt-12;
            @apply px-16 py-8;
            color: var(--backgroundColorNotificationsUnreadDot);

            .c-icon {
                filter: var(--iconFilterNotificationsProminentLink);
            }

            &:hover {
                @apply bg-backgroundColorD;
            }
        }
    }
}
