/**
 * Стили для custom elements e-popover и e-popover-button
 * Обеспечивают корректное отображение выпадающих меню
 */

/* Базовые стили для e-popover */
e-popover {
    position: absolute;
    z-index: 1000;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    min-width: 120px;
    overflow: hidden;
    scrollbar-color: #2A3A5F #EAECEF;
    scrollbar-width: thin;
}

/* Скрытое состояние */
e-popover.hidden {
    display: none;
}

/* Активное состояние */
e-popover.active {
    display: block;
}

/* Стили для e-popover-button */
e-popover-button {
    display: inline-block;
    cursor: pointer;
    user-select: none;
}

e-popover-button.opened {
    /* Стили для открытого состояния кнопки */
}

/* Стили для содержимого popover */
e-popover .header__select__body {
    padding: 8px 0;
    margin: 0;
    list-style: none;
}

e-popover .header__select__link {
    display: block;
    padding: 8px 16px;
    color: #333;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

e-popover .header__select__link:hover {
    background-color: #f5f5f5;
}

e-popover .header__select__link.active {
    background-color: #e3f2fd;
    color: #1976d2;
}

/* Анимация появления */
e-popover {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

e-popover.active {
    opacity: 1;
    transform: translateY(0);
}

/* Скрытое состояние с анимацией */
e-popover.hidden {
    opacity: 0;
    transform: translateY(-10px);
}

/* Позиционирование относительно кнопки */
e-popover-button[target="sibling"] + e-popover {
    top: 100%;
    left: 0;
    margin-top: 4px;
}

/* Адаптивность */
@media (max-width: 768px) {
    e-popover {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90%;
        max-width: 300px;
    }
    
    e-popover.active {
        transform: translate(-50%, -50%);
    }
}