/* EL HOVERABLE Y EL CONTEND DEBEN SER HIJOS DEL MISMO PADRE. SE ESTA USANDO + POR LO Q CONTEND DEBE ESTAR DEBAJO DE HOVERABLE */

/* dentro de content hay mas elementos que solo usan id y clases tailwind */
.player-preview-d2__content {
    display: none;

    position: absolute;
    right: 100%;
    background-color: black;
    flex-direction: column;
    padding: 8px;
    gap: 4px;
    width: 200px;
    position: absolute;
    z-index: 99;
    border-radius: var(--border-radius);
    border: 1px solid var(--color-border-main);
    top: 50%;
	transform: translateY(-50%);
    text-align: start;
	/* visibility: hidden;
    opacity: 0; */
}
.player-preview-d2__hoverable {
    /* su padre de este elemento tiene ser position relative */
    width: 100%;
    height: 100%;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
}
.player-preview-d2__hoverable:hover + .player-preview-d2__content,
.player-preview-d2__content:hover {
    display: flex;
	
	/* visibility: visible;
    opacity: 1; */
}