// vue/app/shared/MultiLevelMenu/index.styl
// Стили исключительно для многоуровневого меню

.menu-item
    .submenu-item
        transition: all 0.3s ease
        
        &:hover
            transform: translateX(5px)

.mobile-menu-item
    border-bottom: 1px solid #e5e7eb
    
    .dark &
        border-bottom-color: #374151
    
    &:last-child
        border-bottom: none

.mobile-submenu-item
    border-bottom: 1px solid #f3f4f6
    
    .dark &
        border-bottom-color: #4b5563
    
    &:last-child
        border-bottom: none

// Анимации для мобильного меню
@keyframes slideInLeft
    from
        transform: translateX(-100%)
        opacity: 0
    to
        transform: translateX(0)
        opacity: 1

@keyframes slideOutLeft
    from
        transform: translateX(0)
        opacity: 1
    to
        transform: translateX(-100%)
        opacity: 0

// Адаптивность для мобильных устройств
@media (max-width: 768px)
    .mobile-menu-overlay
        animation: fadeIn 0.3s ease-out
        
    .mobile-menu-panel
        animation: slideInLeft 0.3s ease-out
        
        &.closing
            animation: slideOutLeft 0.3s ease-in

// Плавные переходы для десктопного меню
.menu-item
    transition: all 0.3s ease
    
    &:hover
        .submenu-item
            animation: fadeInUp 0.3s ease-out

@keyframes fadeInUp
    from
        opacity: 0
        transform: translateY(10px)
    to
        opacity: 1
        transform: translateY(0)