.hall-of-fame {
    background-color: rgba($black,.3);
    border-radius: $border-radius;
    justify-content: center;

    .hof-user-container {
        display:inline-flex;
        height: 100%;
        position: relative;

        &:hover {
            .hof-tooltip {
                display: block;
            }
        }

        .hof-tooltip {
            position: absolute;
            display: none;
            width: 125px;
            max-width: 125px;
            padding: 2px;
            background-color: $gable-green;
            border: 2px solid rgba($white, 0.5);
            border-radius: $border-radius;
            font-size: $font-size-sm;
            z-index: $context-menu-zindex;
            pointer-events: all;
            left: -15px;
            bottom: calc(100% - 10px);

            .hof-header {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 5px;
                background-color: $william;
                color: $white;
                min-width: 117px;
                height: 25px;
                max-height: 25px;
                font-size: 16px;
                margin-bottom: 2px;
            }

            &:after {
                content: '';
                position: absolute;
                bottom: -7px;
                left: 0;
                right: 0;
                margin: auto;
                height: 10px;
                width: 10px;
                transform: rotate(45deg);
                border-color: transparent rgba($white, 0.5) rgba($white, 0.5) transparent;
                border-style: solid;
                border-width: 5px;
            }
        }

        .avatar-image {
            position:relative;
            display:inline;
            left:0;
            top:0;
            z-index: 1;
        }
    }
}
