/**
as the .player div content is translated,
the real .player div position is not were the user can expect.
Disable pointer events to this div as it may overlap on other components
on the court.
*/
.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-selection-tab {
    display: none;

    position: absolute;
    margin-bottom: -20%;
    justify-content: center;

    width: fit-content;
    transform: translateY(-20px);
}

.player-selection-tab-remove {
    visibility: hidden;
    pointer-events: all;
    width: 25px;
    height: 17px;
    justify-content: center;
}

.player-selection-tab-remove * {
    stroke: red;
    fill: white;
}

.player-selection-tab-remove:hover * {
    fill: #f1dbdb;
    stroke: #ff331a;
    cursor: pointer;
}

.player:focus-within .player-selection-tab {
    display: flex;
}

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

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