/* resources/css/login.css */

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.animate-fade-in {
    animation: fadeIn 0.3s ease-in-out forwards;
}

.floating-group {
    @apply relative w-full;
}

.floating-input {
    @apply w-full h-[56px] pl-11 pr-12 text-sm text-text-dark bg-transparent border border-[#c4c4c4] rounded outline-none transition-all duration-200 ease-in-out;
}

.floating-input:hover {
    @apply border-text-medium;
}

.floating-input:focus {
    @apply border-2 border-primary pl-[43px];
}

.floating-label {
    @apply absolute left-11 top-1/2 -translate-y-1/2 text-sm text-text-muted pointer-events-none transition-all duration-200 ease-in-out bg-transparent p-0;
}

.floating-input:focus ~ .floating-label,
.floating-input:not(:placeholder-shown) ~ .floating-label {
    @apply top-0 -translate-y-1/2 text-xs text-primary bg-white px-1.5 left-10;
}

.floating-input:not(:focus):not(:placeholder-shown) ~ .floating-label {
    @apply text-text-light;
}

.floating-icon {
    @apply absolute left-4 top-1/2 -translate-y-1/2 text-text-muted pointer-events-none transition-colors duration-200 ease-in-out flex items-center justify-center;
}

.floating-input:focus ~ .floating-icon {
    @apply text-primary;
}