/**
 * Modal and Dropdown Transition Styles
 * Provides smooth animations for modals and dropdowns
 */

/* Modal Styles */
[data-modal] {
    position: fixed;
    inset: 0;
    overflow-y: auto;
    z-index: 50;
}

[data-modal-backdrop] {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    transition: opacity 0.3s ease-out;
}

[data-modal-content] {
    position: relative;
    margin-bottom: 1.5rem;
    background-color: white;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

/* Dropdown Styles */
[data-dropdown-content] {
    position: absolute;
    z-index: 50;
    margin-top: 0.5rem;
    border-radius: 0.375rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

/* Navigation Menu Styles */
[data-navigation-menu] {
    transition: display 0.3s ease-out;
}

/* Auto-hide message styles */
[data-auto-hide] {
    transition: opacity 0.3s ease-out;
}

/* Utility classes for transitions */
.modal-open {
    display: block !important;
}

.dropdown-open [data-dropdown-content] {
    display: block !important;
}

.navigation-open {
    display: block !important;
}