@layer components {
    .checkbox {
        @apply col-start-1 row-start-1 appearance-none rounded border border-gray-300 bg-white checked:border-indigo-600 checked:bg-indigo-600 indeterminate:border-indigo-600 indeterminate:bg-indigo-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto
    }

    .toggle {
        @apply relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-gray-200 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2;

        span {
            @apply pointer-events-none inline-block size-5 translate-x-0 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out;
        }
    }

    .toggle-on {
        @apply bg-lime-500;

        span {
            @apply translate-x-5;
        }
    }

    .toggle-off {
        @apply bg-gray-200;

        span {
            @apply translate-x-0;
        }
    }

    .form-group {
        @apply mb-3;
    }

    .form-group label {
        @apply block text-sm/6 font-medium text-gray-900;
    }

    .form-control {
        @apply block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm;
    }

    .form-control[disabled] {
        @apply disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 disabled:outline-gray-200
    }

    /* Inline form groups will appear on the same row, with no gap between elements by default */
    .inline-form-group {
        @apply flex flex-row;
    }

    .inline-form-group .form-control {
        @apply rounded-r-none border-none;
    }

    .inline-form-group .button {
        @apply rounded-l-none border-none;
    }

    .radio-button {
        @apply block cursor-pointer items-center justify-center rounded-md px-2 py-1 text-sm focus:outline-none ring-1 ring-gray-300 bg-white text-gray-900 hover:bg-gray-50 whitespace-nowrap;
    }

    .radio-button.checked {
        @apply bg-[#2E282A] text-white hover:opacity-80 ring-[#2E282A];
    }
}