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

@layer utilities {
    @keyframes slide-in {
        from {
            transform: translateX(100%);
            opacity: 0;
        }
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }

    .animate-slide-in {
        animation: slide-in 0.3s ease-out;
    }
}

.scroll {
    max-height: 300px;
    overflow-y: scroll;
    padding: 1em;
    border-radius: .5em;
    border: 1px solid #d1d5db;
}

/* React Select styling */
.react-select-container .react-select__control {
    min-height: 42px;
    border-radius: 0.375rem;
}

.react-select-container .react-select__menu {
    z-index: 9999;
}