<div class="grid grid-cols-2">
    <p class="cursor-default">{{ __('Blur effects') }}</p>
    <div class="flex items-center">
        <div class="absolute right-6">
            <label for="toggleBlur" class="flex items-center cursor-pointer">
                <!-- toggle -->
                <div class="relative">
                    <!-- input -->
                    <input id="toggleBlur" type="checkbox" class="sr-only" checked />
                    <!-- line -->
                    <div class="w-10 h-4 bg-rose-600 dark:bg-gray-400 rounded-full shadow-inner">
                    </div>
                    <!-- dot -->
                    <div
                        class="dot absolute w-6 h-6 bg-white dark:bg-neutral-950 rounded-full shadow -left-1 -top-1 transition">
                        <div class="items-center ml-[4px] w-6 h-6 font-medium flex">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
                                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-blur">
                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                <path
                                    d="M12 21a9.01 9.01 0 0 0 2.32 -.302a9 9 0 0 0 1.74 -16.733a9 9 0 1 0 -4.06 17.035z" />
                                <path d="M12 3v17" />
                                <path d="M12 12h9" />
                                <path d="M12 9h8" />
                                <path d="M12 6h6" />
                                <path d="M12 18h6" />
                                <path d="M12 15h8" />
                            </svg>
                        </div>
                    </div>
                </div>
            </label>
        </div>
    </div>
</div>
