.rating-title {
    width         : 100%;
    align-items   : center;
    margin-bottom : 1rem;
    text-transform: uppercase;
    font-size     : .65rem;
    color         : color-mix(in srgb, var(--text-muted) 50%, transparent);
}

.rating-title,
.rating-player {
    display              : grid;
    grid-template-columns: 0.5fr 2fr 1fr 1fr 1fr 1fr 1fr;
    padding              : 1.35rem 1rem;
}

.rating-player {
    border-radius: var(--border-radius);
    background   : var(--background-light);
    align-items  : center;
    color        : var(--text-muted) !important;
    overflow     : hidden;

    &:not(:last-child) {
        margin-bottom: 0.25rem;
    }
}

.rating-player:nth-of-type(1)::after,
.rating-player:nth-of-type(2)::after,
.rating-player:nth-of-type(3)::after {
    content : "";
    position: absolute;
    left    : 0px;
    top     : 0px;
    height  : 100%;
    width   : 230px;
}

.rating-players:not(.rating-loading) .rating-player:nth-of-type(1)::after {
    background: linear-gradient(270deg, var(--background-light) 60.91%, rgba(52, 49, 43, 0.4) 77.74%, rgba(111, 90, 50, 0.4) 102.88%);
}

.rating-players:not(.rating-loading) .rating-player:nth-of-type(2)::after {
    background: linear-gradient(270deg, var(--background-light) 58.44%, rgba(76, 82, 95, 0.4) 78.79%, rgba(112, 125, 148, 0.4) 100%);
}

.rating-players:not(.rating-loading) .rating-player:nth-of-type(3)::after {
    background: linear-gradient(270deg, var(--background-light) 61.73%, rgba(51, 47, 43, 0.3) 80.47%, rgba(119, 78, 55, 0.3) 100%);
}

.position,
.name,
.kills,
.death {
    z-index: 1;
}

.position {
    text-align: center;
    color     : color-mix(in srgb, var(--text-muted) 50%, transparent);
}

.name {
    display    : flex;
    align-items: center;
    gap        : 1rem;

    .player-avatar {
        width        : 2rem;
        height       : 2rem;
        border-radius: calc(var(--border-radius) - 20%);
    }
}

.rating-scoll {
    max-height    : 70vh;
    overflow-x    : auto;
    padding-right : 6px;
    padding-top   : 1px;
    padding-bottom: 1px;
}

.rating-scoll::-webkit-scrollbar {
    width: 3px;
}

.rating-scoll::-webkit-scrollbar-track {
    background: color-mix(in srgb, var(--text-primary) 3%, transparent);
}

.rating-scoll::-webkit-scrollbar-thumb {
    background   : var(--text-muted);
    border-radius: var(--border-radius);
}

.rating-scoll::-webkit-scrollbar-thumb:hover {
    filter: brightness(125%);
}

.rating-loading {
    justify-content: center;
    align-items    : center;
    color          : var(--text-muted);
}

.skeleton-avatar {
    width           : 2rem;
    height          : 2rem;
    border-radius   : calc(var(--border-radius) - 20%);
    background-color: color-mix(in srgb, var(--text-muted) 5%, transparent);
}

.skeleton-text {
    width           : 3rem;
    height          : 1rem;
    background-color: color-mix(in srgb, var(--text-muted) 5%, transparent);
    border-radius   : calc(var(--border-radius) - 20%);
    display         : inline-block;
}