/*
==========================================================
HOLOCOLLABDEX — SHARED HOVER CARD
==========================================================
*/

.holo-hover-card {

    --hover-card-accent:
        #7e6cff;

    position:
        fixed;

    z-index:
        9999;

    width:
        min(
            310px,
            calc(100vw - 24px)
        );

    padding:
        22px 20px 18px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--hover-card-accent) 28%,
            #dfe4ef
        );

    border-radius:
        22px;

    background:
        rgba(
            255,
            255,
            255,
            .97
        );

    box-shadow:
        0 14px 38px
        rgba(
            70,
            65,
            130,
            .18
        );

    text-align:
        center;

    pointer-events:
        none;

    backdrop-filter:
        blur(10px);

}

.holo-hover-card[hidden] {

    display:
        none !important;

}

.holo-hover-card-marker {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        16px;

    height:
        16px;

    margin-bottom:
        9px;

    border-radius:
        50%;

    background:
        var(
            --hover-card-accent
        );

    box-shadow:
        0 0 0 5px
        color-mix(
            in srgb,
            var(--hover-card-accent) 14%,
            transparent
        );

}

.holo-hover-card-icon {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        32px;

    height:
        32px;

    font-size:
        20px;

}

.holo-hover-card-marker:has(.holo-hover-card-icon) {

    width:
        36px;

    height:
        36px;

    background:
        color-mix(
            in srgb,
            var(--hover-card-accent) 13%,
            white
        );

    box-shadow:
        none;

}

.holo-hover-card-title {

    display:
        block;

    font-size:
        16px;

    font-weight:
        800;

    line-height:
        1.35;

    color:
        var(
            --text,
            #202333
        );

}

.holo-hover-card-value {

    display:
        block;

    margin-top:
        7px;

    font-size:
        14px;

    font-weight:
        800;

    color:
        var(
            --text,
            #202333
        );

}

.holo-hover-card-detail {

    display:
        block;

    margin-top:
        4px;

    font-size:
        13px;

    line-height:
        1.4;

    color:
        var(
            --text-muted,
            #74798b
        );

}

.holo-hover-card-portraits {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        14px;

}

.holo-hover-card-portraits img {

    width:
        68px;

    height:
        68px;

    border:
        3px solid
        #fff;

    border-radius:
        50%;

    object-fit:
        cover;

    box-shadow:
        0 4px 12px
        rgba(
            50,
            60,
            100,
            .12
        );

}

.holo-hover-card-portraits img + img {

    margin-left:
        -10px;

}

@media(max-width:650px) {

    .holo-hover-card {

        padding:
            20px 18px 17px;

        border-radius:
            20px;

    }

}


/*
==========================================================
DARK THEME
==========================================================
*/

html[data-theme="dark"] .holo-hover-card {

    border-color:
        color-mix(
            in srgb,
            var(--hover-card-accent) 28%,
            var(--border-primary)
        );

    background:
        color-mix(
            in srgb,
            var(--surface-primary) 96%,
            transparent
        );

    box-shadow:
        0 14px 38px
        rgba(
            0,
            0,
            0,
            .34
        );

}

html[data-theme="dark"]
.holo-hover-card-marker:has(.holo-hover-card-icon) {

    background:
        color-mix(
            in srgb,
            var(--hover-card-accent) 15%,
            var(--surface-secondary)
        );

}

html[data-theme="dark"]
.holo-hover-card-title,
html[data-theme="dark"]
.holo-hover-card-value {

    color:
        var(--text-primary);

}

html[data-theme="dark"]
.holo-hover-card-detail {

    color:
        var(--text-muted);

}

html[data-theme="dark"]
.holo-hover-card-portraits img {

    border-color:
        var(--surface-secondary);

    box-shadow:
        0 4px 12px
        rgba(
            0,
            0,
            0,
            .24
        );

}