.fi-callout {
    @apply flex w-full gap-3 rounded-xl bg-white p-4 ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10;

    & .fi-callout-icon {
        @apply text-gray-400;

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

    & .fi-callout-main {
        @apply mt-0.5 grid flex-1 gap-3;
    }

    & .fi-callout-text {
        @apply grid gap-1;
    }

    & .fi-callout-heading {
        @apply text-sm font-medium text-gray-950 dark:text-white;
    }

    & .fi-callout-description {
        @apply overflow-hidden text-sm text-pretty break-words text-gray-500 dark:text-gray-400;

        & > p:not(:first-of-type) {
            @apply mt-1;
        }
    }

    & .fi-callout-footer {
        @apply flex flex-wrap gap-3;
    }

    &.fi-color {
        @apply ring-color-600/20 dark:ring-color-400/30;

        background-color: color-mix(in oklab, white 90%, var(--color-400));

        @variant dark {
            background-color: color-mix(
                in oklab,
                var(--gray-900) 90%,
                var(--color-400)
            );
        }

        & .fi-callout-description {
            @apply text-gray-700/75 dark:text-gray-300/75;
        }
    }
}