.toggle {
    @apply relative inline-block w-10 mr-2 align-middle select-none transition duration-200 ease-in;

    .toggle-checkbox {
        @apply absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer;

        &:checked {
            @apply right-0 border-green-600;
        }

        &:checked + .toggle-background {
            @apply bg-green-600;
        }

        &[disabled] {
            @apply cursor-not-allowed;
        }

        &[disabled] + .toggle-background {
            @apply cursor-not-allowed;
        }
    }

    .toggle-background {
        @apply block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer;
    }
}