.fi-ta-image {
    @apply flex w-full items-center gap-1.5;

    .fi-ta-content-loading > .fi-ta-content &,
    .fi-ta-content-loading > .fi-ta-table > .fi-ta-records > .fi-ta-row & {
        @apply relative w-fit max-w-full text-transparent;

        &.fi-align-center {
            @apply mx-auto;
        }

        &.fi-align-end,
        &.fi-align-right {
            @apply ms-auto;
        }

        &::after {
            @apply absolute inset-y-4 start-3 aspect-square;
            animation: var(--loading-skeleton-animation);
            background-color: var(--loading-skeleton-background-color);
            border-radius: var(--loading-skeleton-border-radius);
            content: '';
        }

        &.fi-inline::after {
            @apply inset-y-0 start-0;
        }

        .fi-ta-table-stacked-on-mobile &::after {
            @apply inset-y-0 start-0 sm:inset-y-4 sm:start-3;
        }

        &.fi-circular::after {
            @apply rounded-full;
        }

        & > * {
            @apply opacity-0;
        }
    }

    & img {
        @apply max-w-none object-cover object-center;
    }

    &.fi-circular {
        & img {
            @apply rounded-full;
        }
    }

    &.fi-ta-image-ring {
        & img,
        & .fi-ta-image-limited-remaining-text {
            @apply ring ring-white dark:ring-gray-900;
        }

        &.fi-ta-image-ring-0 {
            & img,
            & .fi-ta-image-limited-remaining-text {
                @apply ring-0;
            }
        }

        &.fi-ta-image-ring-1 {
            & img,
            & .fi-ta-image-limited-remaining-text {
                @apply ring-1;
            }
        }

        &.fi-ta-image-ring-2 {
            & img,
            & .fi-ta-image-limited-remaining-text {
                @apply ring-2;
            }
        }

        &.fi-ta-image-ring-3 {
            & img,
            & .fi-ta-image-limited-remaining-text {
                @apply ring-3;
            }
        }

        &.fi-ta-image-ring-4 {
            & img,
            & .fi-ta-image-limited-remaining-text {
                @apply ring-4;
            }
        }

        &.fi-ta-image-ring-5 {
            & img,
            & .fi-ta-image-limited-remaining-text {
                @apply ring-5;
            }
        }

        &.fi-ta-image-ring-6 {
            & img,
            & .fi-ta-image-limited-remaining-text {
                @apply ring-6;
            }
        }

        &.fi-ta-image-ring-7 {
            & img,
            & .fi-ta-image-limited-remaining-text {
                @apply ring-7;
            }
        }

        &.fi-ta-image-ring-8 {
            & img,
            & .fi-ta-image-limited-remaining-text {
                @apply ring-8;
            }
        }
    }

    &.fi-ta-image-overlap-1 {
        @apply gap-x-0 -space-x-1;
    }

    &.fi-ta-image-overlap-2 {
        @apply gap-x-0 -space-x-2;
    }

    &.fi-ta-image-overlap-3 {
        @apply gap-x-0 -space-x-3;
    }

    &.fi-ta-image-overlap-4 {
        @apply gap-x-0 -space-x-4;
    }

    &.fi-ta-image-overlap-5 {
        @apply gap-x-0 -space-x-5;
    }

    &.fi-ta-image-overlap-6 {
        @apply gap-x-0 -space-x-6;
    }

    &.fi-ta-image-overlap-7 {
        @apply gap-x-0 -space-x-7;
    }

    &.fi-ta-image-overlap-8 {
        @apply gap-x-0 -space-x-8;
    }

    &.fi-wrapped {
        @apply flex-wrap;
    }

    &:not(.fi-inline) {
        @apply px-3 py-4;
    }

    .fi-ta-table-stacked-on-mobile & {
        @apply p-0 sm:px-3 sm:py-4;
    }

    &.fi-align-start,
    &.fi-align-left {
        @apply justify-start;
    }

    &.fi-align-center {
        @apply justify-center;
    }

    &.fi-align-end,
    &.fi-align-right {
        @apply justify-end;
    }

    &.fi-align-justify,
    &.fi-align-between {
        @apply justify-between;
    }

    &.fi-stacked {
        & .fi-ta-image-limited-remaining-text {
            @apply rounded-full bg-gray-100 dark:bg-gray-800;
        }
    }

    & .fi-ta-image-limited-remaining-text {
        @apply flex items-center justify-center text-sm font-medium text-gray-500 dark:text-gray-400;

        &.fi-size-xs {
            @apply text-xs;
        }

        &.fi-size-base,
        &.fi-size-md {
            @apply text-base;
        }

        &.fi-size-lg {
            @apply text-lg;
        }
    }
}