.fi-no-database {
    @apply flex;

    /* `.fi-no-database` sits on the teleported modal root as well as on this
       trigger wrapper, and the compound is what lets the zeroed gutter below
       outrank the modal's own `px-6`. */
    &.fi-modal .fi-modal-window-ctn > .fi-modal-window {
        & .fi-modal-heading {
            @apply relative inline-block;

            & .fi-badge {
                @apply absolute start-full -top-1 ms-1 w-max;
            }
        }

        & .fi-modal-header {
            & .fi-ac {
                @apply mt-2;
            }
        }

        & .fi-modal-content {
            /* The list runs flush to the window's edges by ZEROING the
               padding, not by cancelling it with negative margins: a
               cancelled `pb` stays behind the last notification as dead
               scroll space, and cancelled `px` leaves the content's border
               box wider than the window, so the scroll container scrolls
               sideways over empty space. */
            @apply gap-y-0 p-0;

            & .fi-no-notifications {
                @apply -mb-px divide-y divide-gray-200 dark:divide-white/10;

                & > :last-child {
                    @apply border-b border-gray-200 dark:border-white/10;
                }
            }
        }

        &.fi-modal-window-has-footer .fi-modal-content {
            @apply border-b border-gray-200 dark:border-white/10;
        }

        & .fi-modal-footer {
            @apply pt-6;
        }
    }

    & .fi-no-notification-unread-ctn {
        @apply before:bg-primary-600 dark:before:bg-primary-500 relative before:absolute before:start-0 before:h-full before:w-0.5;
    }
}