.fi-ta-color {
    @apply flex w-full gap-1.5;

    &.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-ta-color-item {
        @apply size-6 rounded-md ring-1 ring-gray-950/10 dark:ring-white/20;

        &.fi-copyable {
            @apply focus-visible:ring-primary-600 dark:focus-visible:ring-primary-500 cursor-pointer outline-none focus-visible:ring-2;
        }
    }
}
