.fi-empty-state {
    @apply rounded-xl bg-white px-6 py-12 shadow-sm ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10;

    & .fi-empty-state-content {
        @apply mx-auto grid max-w-lg justify-items-center text-center;
    }

    & .fi-empty-state-icon-bg {
        @apply mb-4 rounded-full bg-gray-100 p-3 dark:bg-gray-500/20;

        &.fi-color {
            @apply bg-color-100 dark:bg-color-500/20;
        }

        & .fi-icon {
            @apply text-gray-500 dark:text-gray-400;

            &.fi-color {
                @apply text-color-500 dark:text-color-400;
            }
        }
    }

    & .fi-empty-state-heading {
        @apply text-base leading-6 font-semibold text-gray-950 dark:text-white;
    }

    & .fi-empty-state-description {
        @apply mt-1 text-sm text-gray-500 dark:text-gray-400;
    }

    & .fi-empty-state-footer {
        @apply mt-6;
    }
}