const textClassification = {
    label: "block mb-1 font-semibold text-xs text-gray-300 peer-required:after:content-['*']",
    inner: "flex-1 peer disabled:cursor-not-allowed px-2.5 bg-white cursor-text gap-0.5 flex items-center w-full border-2 border-blue-200 rounded-lg mb-1 overflow-hidden focus-within:border-blue-300 transition-colors duration-300 ease-in-out min-w-0",
    input: "flex-1 peer px-0 disabled:cursor-not-allowed h-10 border-none text-xs text-gray-300 placeholder-gray-200 focus:outline-transparent focus:ring-transparent focus:border-transparent min-w-0",
};
const textClassificationOutlinedInput = {
    label: "block mb-1 font-semibold text-xs text-gray-300 peer-required:after:content-['*']",
    inner: "flex-1 gap-[5px] flex items-center w-full mb-1 disabled:cursor-not-allowed",
    input: "flex-1 px-2.5 disabled:cursor-not-allowed h-10 bg-white border-2 focus:border-blue-300 border-blue-200 rounded-lg text-xs text-gray-300 placeholder-gray-200 focus:outline-transparent focus:ring-transparent transition-colors duration-300 ease-in-out min-w-0",
};
const boxClassification = {
    fieldset: "w-full flex-1 px-2 pb-1",
    legend: "font-bold text-sm",
    wrapper:
        "flex items-center mb-1 !cursor-pointer checked-within:text-blue-300",
    help: "mb-2",
    input: "form-check-input peer disabled:cursor-not-allowed peer appearance-none h-5 w-5 mr-2 border border-gray-200 !ring-0 checked:focus:!ring-0 rounded-sm checked:text-white checked:focus:border-blue-300 checked:hover:border-blue-300 bg-white checked:border-blue-300 focus:!outline-transparent focus:!ring-transparent transition duration-200",
    label: "text-xs mt-1 transition-colors duration-200 ease-in-out peer-required:after:content-['*']",
};
const buttonClassification = {
    wrapper: "mb-1 flex-1 w-full flex",
    input: "bg-blue-300 disabled:bg-white formkit-loading:bg-white formkit-loading:text-gray-200 disabled:text-gray-200 formkit-loading:cursor-not-allowed disabled:cursor-not-allowed border-2 transition-all flex-1 duration-300 ease-in-out border-blue-200 enabled:hover:-translate-y-0.5 hover:brightness-105 text-white text-lg font-medium py-3 px-5 rounded-lg",
};

// export our definitions using our above
// templates and declare one-offs and
// overrides as needed.
export default {
    // the global key will apply to all inputs
    global: {
        outer: "mb-5 flex-1 w-full disabled:cursor-not-allowed min-w-0",
        help: "text-medium text-gray-200 text-xs",
        messages: "list-none p-0 mt-1 mb-0",
        message: "text-red-300 text-medium mb-1 text-xs",
        label: "peer-required:after:content-['*'] label-required",
    },
    button: buttonClassification,
    color: {
        label: "block mb-1 font-bold text-sm peer-required:after:content-['*']",
        input: "w-16 h-8 appearance-none !cursor-pointer border border-gray-300 rounded-md mb-2 p-1",
    },
    date: textClassification,
    "datetime-local": textClassification,
    checkbox: boxClassification,
    email: textClassification,
    file: {
        label: "block mb-1 font-bold text-sm",
        inner: "",
        input: "",
        noFiles: "",
        fileItem: "block flex text-gray-800 text-sm mb-1",
        removeFiles: "ml-auto text-blue-500 text-sm",
    },
    month: textClassification,
    number: textClassification,
    password: textClassification,
    radio: {
        ...boxClassification,
        input: boxClassification.input.replace("rounded-sm", "rounded-full"),
    },
    range: {
        inner: "max-w-md",
        input: "form-range appearance-none w-full h-2 p-0 bg-gray-100 rounded-full focus:outline-none focus:ring-0 focus:shadow-none",
    },
    search: textClassification,
    select: textClassification,
    submit: buttonClassification,
    tel: textClassificationOutlinedInput,
    text: textClassification,
    textarea: {
        ...textClassification,
        input: "block px-0 w-full min-h-32 border-none text-xs text-gray-300 placeholder-gray-200 resize-none focus:outline-transparent focus:ring-transparent focus:border-transparent",
    },
    time: textClassification,
    url: textClassification,
    week: textClassification,
};
