/* HC Galeri · Kullanıcı, Bildirim ve Benzer Renk hover v2 */

@media (hover: hover) and (pointer: fine) {
    details.notification-menu,
    details[data-notification-menu],
    details.user-menu,
    details.header-color-similarity-menu,
    details[data-header-color-similarity-menu] {
        position: relative;
        isolation: isolate;
    }

    details.notification-menu::after,
    details[data-notification-menu]::after,
    details.user-menu::after,
    details.header-color-similarity-menu::after,
    details[data-header-color-similarity-menu]::after {
        content: "";
        position: absolute;
        top: calc(100% - 1px);
        right: 0;
        z-index: 169;
        display: block;
        height: 18px;
        opacity: 0;
        pointer-events: none;
    }

    details.notification-menu::after,
    details[data-notification-menu]::after {
        width: min(390px, calc(100vw - 20px));
    }

    details.user-menu::after {
        width: min(620px, calc(100vw - 24px));
    }

    details.header-color-similarity-menu::after,
    details[data-header-color-similarity-menu]::after {
        width: 230px;
    }

    details.notification-menu[open]::after,
    details[data-notification-menu][open]::after,
    details.user-menu[open]::after,
    details.header-color-similarity-menu[open]::after,
    details[data-header-color-similarity-menu][open]::after {
        pointer-events: auto;
    }

    details.notification-menu[open] > summary,
    details[data-notification-menu][open] > summary,
    details.user-menu[open] > summary,
    details.header-color-similarity-menu[open] > summary,
    details[data-header-color-similarity-menu][open] > summary {
        color: var(--primary);
        border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
        background: var(--primary-soft);
    }

    details.notification-menu > .notification-menu-panel,
    details[data-notification-menu] > .notification-menu-panel,
    details.user-menu > .user-menu-panel,
    details.header-color-similarity-menu > .header-color-similarity-panel,
    details[data-header-color-similarity-menu] > .header-color-similarity-panel {
        pointer-events: auto;
    }
}