.fi-btn {
    @apply relative inline-grid grid-flow-col items-center justify-center gap-1.5 rounded-lg px-3 py-2 text-sm font-medium transition duration-75 outline-none;

    &:not(.fi-disabled):not([disabled]) {
        @apply focus-visible:ring-2;
    }

    &.fi-disabled,
    &[disabled] {
        @apply cursor-default opacity-70;

        &:not([x-tooltip]) {
            @apply pointer-events-none;
        }
    }

    & > .fi-icon {
        @apply text-gray-400 transition duration-75 dark:text-gray-500;
    }

    &.fi-size-xs {
        @apply gap-1 px-2 py-1.5 text-xs;
    }

    &.fi-size-sm {
        @apply gap-1 px-2.5 py-1.5 text-sm;
    }

    &.fi-size-lg {
        @apply gap-1.5 px-3.5 py-2.5 text-sm;
    }

    &.fi-size-xl {
        @apply gap-1.5 px-4 py-3 text-sm;
    }

    &.fi-outlined {
        @apply text-gray-950 shadow-sm ring-1 ring-gray-300 dark:text-white dark:ring-gray-700;

        &:not(.fi-disabled):not([disabled]) {
            @apply hover:bg-gray-400/10 focus-visible:ring-gray-400/40;
        }

        &.fi-color {
            @apply ring-color-600 dark:ring-color-500 text-(--text) dark:text-(--dark-text);

            &:not(.fi-disabled):not([disabled]) {
                @apply focus-visible:ring-color-500/40 dark:focus-visible:ring-color-400/40 hover:bg-color-500/10 dark:hover:bg-color-600/10;
            }

            & > .fi-icon {
                @apply text-color-600 dark:text-color-400;
            }
        }
    }

    &:not(.fi-outlined) {
        @apply bg-white text-gray-950 dark:bg-white/5 dark:text-white;

        &:not(.fi-disabled):not([disabled]) {
            @apply hover:bg-gray-50 dark:hover:bg-white/10;
        }

        input:checked + &label {
            @apply bg-gray-400 text-white ring-0 dark:bg-gray-600;

            &:not(.fi-disabled):not([disabled]) {
                @apply hover:bg-gray-300 dark:hover:bg-gray-500;
            }
        }

        &.fi-color {
            &:not(label) {
                @apply bg-(--bg) text-(--text) dark:bg-(--dark-bg) dark:text-(--dark-text);

                &:not(.fi-disabled):not([disabled]) {
                    @apply focus-visible:ring-color-500/50 dark:focus-visible:ring-color-400/50 hover:bg-(--hover-bg) hover:text-(--hover-text) dark:hover:bg-(--dark-hover-bg) dark:hover:text-(--dark-hover-text);
                }

                & > .fi-icon {
                    @apply text-(--text) dark:text-(--dark-text);
                }
            }

            &label {
                input:checked + & {
                    @apply bg-(--bg) text-(--text) ring-0 dark:bg-(--dark-bg) dark:text-(--dark-text);
                }

                &:not(.fi-disabled):not([disabled]) {
                    input:checked + & {
                        @apply hover:bg-(--hover-bg) hover:text-(--hover-text) dark:hover:bg-(--dark-hover-bg) dark:hover:text-(--dark-hover-text);
                    }

                    input:focus-visible + & {
                        @apply z-10 ring-2 ring-gray-950/10 dark:ring-white/20;
                    }

                    input:checked:focus-visible + & {
                        @apply ring-color-500/50 dark:ring-color-400/50;
                    }
                }
            }
        }
    }

    &label {
        @apply cursor-pointer;

        & > .fi-icon:is(:checked + label > .fi-icon) {
            @apply text-(--text) dark:text-(--dark-text);
        }
    }

    &:not(.fi-color),
    &label {
        @apply ring-1 ring-gray-950/10 dark:ring-white/20;
    }

    &.fi-labeled-from-sm,
    &.fi-labeled-from-md,
    &.fi-labeled-from-lg,
    &.fi-labeled-from-xl,
    &.fi-labeled-from-2xl {
        @apply hidden;
    }

    &.fi-labeled-from-sm {
        @apply sm:inline-grid;
    }

    &.fi-labeled-from-md {
        @apply md:inline-grid;
    }

    &.fi-labeled-from-lg {
        @apply lg:inline-grid;
    }

    &.fi-labeled-from-xl {
        @apply xl:inline-grid;
    }

    &.fi-labeled-from-2xl {
        @apply 2xl:inline-grid;
    }

    & .fi-btn-badge-ctn {
        @apply absolute start-full top-0 z-[1] w-max -translate-x-1/2 -translate-y-1/2 rounded-md bg-white rtl:translate-x-1/2 dark:bg-gray-900;
    }
}

.fi-btn-group {
    @apply grid grid-flow-col rounded-lg shadow-sm ring-1 ring-gray-950/10 dark:ring-white/20;

    & > .fi-btn {
        @apply flex-1 rounded-none;

        &:nth-child(1 of .fi-btn) {
            @apply rounded-s-lg;
        }

        &:nth-last-child(1 of .fi-btn) {
            @apply rounded-e-lg;
        }

        &:not(:nth-child(1 of .fi-btn)) {
            @apply shadow-[-1px_0_0_0_var(--color-gray-200)] dark:shadow-[-1px_0_0_0_rgba(255,255,255,0.2)];
        }

        &:not(:nth-last-child(1 of .fi-btn)) {
            @apply me-px;
        }

        &.fi-processing:enabled {
            @apply cursor-wait opacity-70;
        }

        &:not(.fi-outlined) {
            @apply shadow-none;
        }

        &:not(.fi-color),
        &label {
            @apply ring-0;
        }
    }
}