<label class="inline-flex items-center cursor-pointer">
    {# CSS fallback if Tailwind classes are not present at runtime #}
    <style>
        /* CSS fallback positioning for the knob so it aligns correctly
           even if Tailwind utilities are missing or purged. This also
           includes basic RTL support via the document's `dir` attribute. */
        .unfold-switch-track {
            --knob-size: 12px;
            --track-padding: 4px;
            --track-height: 20px;
            position: relative;
        }

        input[type="checkbox"][data-unfold-switch]:checked + .unfold-switch-track {
            background: #10B981; /* green-500 */
        }

        .unfold-switch-knob {
            position: absolute;
            left: var(--track-padding);
            top: calc((var(--track-height) - var(--knob-size)) / 2);
            width: var(--knob-size);
            height: var(--knob-size);
            transition: left 160ms ease, right 160ms ease, transform 160ms ease;
        }

        /* LTR: move the knob to the far right when checked */
        input[type="checkbox"][data-unfold-switch]:checked + .unfold-switch-track .unfold-switch-knob {
            left: calc(100% - var(--knob-size) - var(--track-padding));
        }

        /* RTL support: if the document is rtl, place knob using `right` instead */
        html[dir="rtl"] input[type="checkbox"][data-unfold-switch] + .unfold-switch-track .unfold-switch-knob {
            left: auto;
            right: var(--track-padding);
        }

        html[dir="rtl"] input[type="checkbox"][data-unfold-switch]:checked + .unfold-switch-track {
            background: #10B981; /* green-500 */
        }

        html[dir="rtl"] input[type="checkbox"][data-unfold-switch]:checked + .unfold-switch-track .unfold-switch-knob {
            right: calc(100% - var(--knob-size) - var(--track-padding));
            left: auto;
        }
    </style>

    {% include "django/forms/widgets/input.html" %}

    <span class="unfold-switch-track relative inline-block w-8 h-5 bg-base-300 rounded-full transition-colors dark:bg-base-600">
        <span class="unfold-switch-knob absolute left-1 top-1 w-3 h-3 bg-white rounded-full shadow-xs transition-transform"></span>
    </span>
</label>
