@layer components {
    .form-grid {
        @apply grid grid-cols-1 gap-3;

        &.form-grid-2 {
            @apply grid-cols-1 lg:grid-cols-2;
        }

        &.form-grid-3 {
            @apply grid-cols-1 lg:grid-cols-3;
        }
    }

    .box-form-title {
        @apply space-y-1.5;

        .form-title {
            @apply text-primary font-normal;
        }
    }

    .form-label {
        @apply text-primary;

        .form-required {
            @apply text-red-500;
        }

        i.ti {
            @apply text-2xl;
        }
    }

    .form-description {
        @apply text-xs text-gray-500;
    }

    .form-group {
        @apply space-y-1.5;

        .form-label {
            @apply flex;
        }
    }

    .input-helper-text {
        @apply text-xs text-gray-500;
    }

    .floating-label {
        @apply relative;

        input {
            @apply [&:not(:placeholder-shown)]:pt-6 [&:not(:placeholder-shown)]:pb-2 block w-full rounded-md border-primary/50 p-2.5 text-sm placeholder:text-transparent autofill:pb-2 autofill:pt-6 focus:border-blue-500 focus:pb-2 focus:pt-2 focus:ring-blue-500 disabled:pointer-events-none disabled:opacity-50 dark:border-gray-700 dark:bg-transparent dark:text-gray-400 dark:focus:ring-gray-600;
        }

        label {
            @apply pointer-events-none absolute start-0 top-0 h-full truncate border border-transparent p-2.5 text-sm transition duration-100 ease-in-out peer-focus:-translate-y-1.5 peer-focus:text-xs peer-focus:text-gray-500 peer-disabled:pointer-events-none peer-disabled:opacity-50 peer-[:not(:placeholder-shown)]:-translate-y-1.5 peer-[:not(:placeholder-shown)]:text-xs peer-[:not(:placeholder-shown)]:text-gray-500 dark:text-white;
        }
    }

    .form-control {
        @apply !border-primary/50 rounded-md p-2.5 h-[40px] !bg-white;

        &:disabled {
            @apply !bg-gray-100 !opacity-50;
        }

        &.form-error {
            @apply !border-error;
        }

        &.form-success {
            @apply !border-success;
        }
    }

    textarea.form-control {
        @apply h-auto;
    }

    .form-check-group {
        @apply flex flex-col gap-2 flex-wrap;

        &.group-inline {
            @apply flex-row gap-y-2 gap-x-6;
        }
    }

    .form-check {
        @apply flex items-center gap-2;

        &.disabled {
            @apply opacity-50;
        }

        .form-check-input {
            @apply outline-primary/50 outline rounded-md p-2 appearance-none duration-300;

            &[type="radio"] {
                @apply rounded-full transition-all;
            }

            &[type="checkbox"] {
                @apply transition-[background-color];
            }

            &[type="checkbox"]:checked {
                @apply bg-primary bg-[url('/assets/images/ydm-element/form/check.svg')] bg-center bg-no-repeat bg-[length:80%_auto];
            }

            &[type="radio"]:checked {
                @apply bg-secondary outline-primary outline-5 -outline-offset-5;
            }
        }

        .form-check-label {
            @apply text-primary cursor-pointer;

            i.ti {
                @apply text-2xl;
            }
        }
    }

    .form-select {
        @apply !w-full !rounded-md !p-2.5 !text-sm h-[40px];
    }

    .form-upload {
        @apply h-[40px] block w-full border border-primary/50 rounded-md text-sm focus:z-10 focus:border-primary focus:ring-primary disabled:opacity-50 disabled:pointer-events-none dark:border-gray-700 dark:text-gray-400 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600
        file:bg-gray-50 file:border-0
        file:me-4
        file:py-2.5 file:px-4
        dark:file:bg-gray-700 dark:file:text-gray-400;
    }

    .form-toggle-switch {
        @apply relative inline-block h-5 w-9 cursor-pointer;

        .toggle-switch-bg {
            @apply absolute inset-0 rounded-full bg-[#8b8b8b] transition-colors duration-200 ease-in-out peer-checked:bg-primary peer-disabled:pointer-events-none peer-disabled:opacity-40 dark:bg-neutral-700 dark:peer-checked:bg-blue-500;
        }

        .toggle-switch-icon {
            @apply absolute top-1/2 start-0.5 size-4 -translate-y-1/2 rounded-full bg-secondary shadow-xs transition-transform duration-200 ease-in-out peer-disabled:pointer-events-none  peer-checked:translate-x-full dark:bg-neutral-400 dark:peer-checked:bg-white;
        }
    }

    .form-switch-value {
        @apply relative inline-block;

        .input-switch-value {
            @apply hidden;

            &:checked + .label-switch-value:before {
                @apply left-1/2;
            }

            &:checked + .label-switch-value div:nth-child(1) {
                @apply text-white;
            }

            &:checked + .label-switch-value div:nth-child(2) {
                @apply text-primary;
            }
        }

        .label-switch-value {
            @apply cursor-pointer overflow-hidden rounded-[20px] bg-primary flex items-center relative border-2 border-primary;

            &:before {
                @apply content-[''] w-1/2 h-full absolute bg-secondary rounded-[20px] z-0 left-0 top-1/2 -translate-y-1/2 transition-all duration-300 ease-in-out;
            }

            div {
                @apply shrink-0 px-3 py-1 z-10 relative transition-all duration-300;
            }

            div:nth-child(1) {
                @apply text-primary;
            }

            div:nth-child(2) {
                @apply text-white;
            }
        }
    }

    /* form with button */
    .form-with-button {
        @apply flex rounded-md items-center relative gap-2;

        .btn {
            @apply h-[40px];
        }
    }

    /* form search */
    .form-search {
        @apply relative;

        i {
            @apply absolute text-primary text-xl -translate-y-1/2 top-1/2 left-2;
        }

        input {
            @apply pl-8;
        }
    }

    .form-range-datepicker {
        @apply relative flex items-center gap-2;
    }

    /* form validation */
    .text-error {
        @apply text-sm text-error;
    }

    /* override flatpickr */
    .form-datepicker, .form-timepicker {
        @apply relative;

        button {
            @apply flex items-center justify-center absolute right-2.5 top-1/2 -translate-y-1/2;

            .ti {
                @apply text-[20px] text-primary/50;
            }
        }
    }

    .form-datepicker-range {
        @apply grid grid-cols-2 gap-3;

        .inline-calendar {
            @apply col-span-2;

            .flatpickr-calendar,
            .flatpickr-rContainer,
            .flatpickr-days {
                @apply !w-full;
            }

            .dayContainer {
                @apply !w-1/2 !max-w-1/2;
            }

            .flatpickr-day {
                @apply !max-w-none;

                &.startRange,
                &.endRange {
                    @apply !bg-primary !text-secondary !border-none;

                    &:hover {
                        @apply !bg-primary !text-secondary !border-none;
                    }
                }

                &.inRange {
                    @apply !bg-primary/10 !border-none !shadow-none;
                }
            }

            .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n + 1)), .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n + 1)), .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n + 1)) {
                @apply !shadow-[#ccc]
            }
        }
    }

    .flatpickr-calendar {
        .flatpickr-weekday {
            @apply !text-primary !text-[100%];
        }

        .flatpickr-day {
            @apply !text-primary/70 transition-all duration-300;

            &.today {
                @apply !bg-primary/10;
            }

            &.selected {
                @apply !bg-primary !text-secondary;
            }
        }
    }

    /* Select2 Custom Styling */
    .select2-container--default {
        .select2-selection--single {
            @apply !p-2.5 !h-[40px] !border-primary/50 !rounded-md !flex !items-center;

            .select2-selection__rendered {
                @apply !text-primary !leading-none !text-sm !p-0;
            }

            .select2-selection__arrow {
                @apply !w-[30px] !h-full bg-[url('/assets/images/ydm-element/form/arrow-select-down.svg')] bg-no-repeat bg-[right_0.5rem_center] bg-[length:1.5em_1.5em];

                b {
                    @apply hidden;
                }
            }

            .select2-selection__clear {
                @apply w-[12px] !float-none !mr-0 absolute font-['tabler-icons'] text-[18px] right-8 top-1/2 -translate-y-1/2;
            }
        }

        .select2-search--dropdown .select2-search__field {
            @apply !border-primary/50 !rounded-md;
        }

        .select2-results__option--highlighted[aria-selected] {
            @apply !bg-primary !text-secondary;
        }

        /* Multi-select styling */
        .select2-selection--multiple {
            @apply !min-h-[40px] !border-primary/50 !rounded-md !py-1.5 !px-2.5 !flex !items-center;

            .select2-selection__rendered {
                @apply !p-0 !flex !flex-wrap !gap-1.5;
            }

            .select2-selection__choice__remove:hover {
                @apply !bg-primary;
            }

            .select2-selection__clear {
                @apply w-[12px] !float-none !m-0 absolute font-['tabler-icons'] text-[18px] !right-2.5 top-1/2 -translate-y-1/2;
            }

            .select2-selection__choice {
                @apply !bg-primary !text-secondary !border-0 !rounded !pl-6 !py-1 !text-xs !flex !items-center !gap-1.5 !m-0;
            }

            .select2-selection__choice__remove {
                @apply !w-5 !p-0 !text-secondary/80 hover:!text-secondary !m-0 h-full font-['tabler-icons'] text-[18px] !border-none;

                span {
                    @apply relative -top-0.5;
                }
            }

            .select2-search--inline {
                .select2-search__field {
                    @apply !m-0 !p-0 !align-middle !font-sans leading-none;
                }
            }
        }

        /* .select2-search--inline {
            .select2-search__field {
                @apply !m-0 !p-0;
            }
        } */

        &.select2-container--focus .select2-selection--single,
        &.select2-container--focus .select2-selection--multiple {
            @apply !border-primary;
        }
    }

    .select2-dropdown {
        @apply !border-primary/50 !rounded-md;
    }


/*
    .select2-container--default .select2-results__option[aria-selected=true] {
        @apply !bg-primary;
    } */

}