.player {
    pointer-events: none;
}

.player-content {
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    outline: none;
}

.player-piece {
    font-family: monospace;
    pointer-events: all;

    background-color: var(--selected-team-primarycolor);
    color: var(--selected-team-secondarycolor);

    border-radius: 100px;

    width: 20px;
    height: 20px;

    display: flex;

    align-items: center;
    justify-content: center;

    user-select: none;
}

.player-piece-has-ball {
    border-width: 2px;
    border-style: solid;
    border-color: var(--player-piece-ball-border-color);
}

.player-actions {
    display: flex;

    position: absolute;
    flex-direction: row;
    justify-content: space-evenly;
    align-content: space-between;
    align-items: center;
    visibility: hidden;

    transform: translateY(-25px);

    height: 20px;
    width: 150%;

    gap: 25%;
}

.player:focus-within .player-actions {
    visibility: visible;
    pointer-events: all;
}

.player:focus-within .player-piece {
    color: var(--selection-color);
}

.player:focus-within {
    z-index: 1000;
}