@tailwind base;
@tailwind components;
@tailwind utilities;

@import './buttons.scss';

.otp-input {
    @apply rounded-sm gap-2;

    input {
        @apply w-12 h-12 p-2 text-center text-2xl;
        @apply dark:bg-gray-700 border dark:text-white;
        appearance: none;
        -webkit-appearance: none;
    }
}

 .input {
    @apply bg-transparent border border-gray-300 text-gray-900 text-sm rounded focus:ring-blue-500 focus:border-blue-500 block w-full p-2 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500;
    
    &.dirty:focus{
        @apply bg-green-50 border-green-500 text-green-900 dark:text-green-400 placeholder-green-700 dark:placeholder-green-500 focus:ring-green-500 focus:border-green-500 dark:bg-gray-700 dark:border-green-500;
    }

    &.dirty.error{
        @apply bg-red-50 border-red-500 text-red-900 placeholder-red-700 focus:ring-red-500 dark:bg-gray-700 focus:border-red-500 dark:text-red-500 dark:placeholder-red-500 dark:border-red-500;
    }
}

.bl-link{
    @apply text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-500 hover:underline duration-75 ease-linear;
}