@reference "tailwindcss";

@import "intl-tel-input/build/css/intlTelInput.css";

.iti {
    --iti-path-flags-1x: url("/vendor/filament-phone-input/flags.webp");
    --iti-path-flags-2x: url("/vendor/filament-phone-input/flags@2x.webp");
    --iti-path-globe-1x: url("/vendor/filament-phone-input/globe.webp");
    --iti-path-globe-2x: url("/vendor/filament-phone-input/globe@2x.webp");

    width: 100%;
}

.dark .iti {
    --iti-border-color: var(--color-gray-300);
    --iti-dialcode-color: #999999;
    --iti-dropdown-bg: var(--color-gray-700);
    --iti-arrow-color: #aaaaaa;
    --iti-hover-color: var(--color-gray-600);
}

.iti__search-input {
    @apply block w-full border-none p-2 text-base text-gray-950 transition duration-75 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6 bg-white/0;
}

.dark .iti__search-input {
    @apply dark:bg-gray-700 dark:text-white dark:placeholder:text-gray-500 dark:disabled:text-gray-400;
}