.leaderboard-card {
    position: relative;

    & .icon-divider {
        margin-left: 10px;
        margin-right: 10px;
        width: 2px;
        background: var(--light-grey);
    }

    & .stats-card__inner {
        display: flex;
        flex-direction: column;
        transition: all var(--easing) var(--transition-duration-slow);
    }

    &.has-overlay {
        overflow: hidden;

        & .stats-card__inner {
            transform: translate(60%, 70px);
            filter: blur(4px);
            pointer-events: none;

            [dir='rtl'] & {
                transform: translate(-60%, 70px);
            }
        }
    }

    & .icon-buttons {
        display: flex;
        flex-direction: row;

        & button {
            display: flex;
            flex-direction: row;
            align-items: center;
            font-family: var(--base-font-family);
            font-weight: 600;

            & .text {
                display: none;
            }

            &:hover {
                opacity: 1;
                color: var(--blue);

                & path {
                    fill: var(--blue) !important;
                }

                & .text {
                    margin-left: 10px;
                    display: block;
                    white-space: nowrap;
                    font-size: var(--font-size);

                    [dir='rtl'] & {
                        margin-right: 10px;
                        margin-left: unset;
                    }
                }
            }
        }
    }

    & .content {
        display: flex;
        min-height: 0;
    }
}

@keyframes slide-in-left {
    from {
        transform: translateX(-100%);
    }
}

.leaderboard-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 25px 40% 25px 25px;

    z-index: var(--middle-z-index);
    overflow: auto;
    animation: slide-in-left var(--easing) var(--transition-duration-slow);

    & .close-overlay {
        position: absolute;
        top: 25px;
        right: 25px;
        border: none;
        background: none;

        [dir='rtl'] & {
            left: 25px;
            right: unset;
        }

        & svg {
            width: 20px;
            height: 20px;
        }
    }

    & h2 {
        margin-bottom: 10px;
        padding: 0;
        font-size: 20px;
    }

    & .toggle-input {
        margin-bottom: 10px;

        & :not(:checked)::before {
            background: var(--near-black);
        }
    }

    & .explainer {
        margin-bottom: 10px;
        line-height: 1.5;
    }

    & .info {
        display: flex;
        flex-direction: row;
        color: var(--near-black);

        & svg {
            margin-right: 5px;
        }

        & path {
            fill: var(--near-black);
        }

        & a {
            color: var(--blue);
            text-decoration: underline;
        }
    }
}

.leaderboard-info {
    position: relative;

    & .info-menu {
        min-width: 255px;

        position: absolute;
        bottom: 30px;
        inset-inline-end: 0;

        font-size: var(--font-size-xs);
        color: var(--warm-grey);
        font-style: italic;
        letter-spacing: 0.8px;
        line-height: 1.5;

        & ul {
            margin: 0;
            padding: 13px 0;
            list-style: none;
            background: var(--white);
            box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.05);
        }

        & li {
            border-bottom: 1px solid var(--light-grey);
            margin: 0 25px;
            height: 50px;

            display: flex;
            flex-direction: row;
            align-items: center;

            &:last-child {
                border-bottom: 0;
            }
        }

        & svg {
            width: 16px;
            opacity: 0.5;
        }

        & path {
            fill: var(--warm-grey);
        }

        & .icon {
            margin-inline-end: 20px;
            width: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        & .filled-check {
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--blue);

            & svg {
                margin-inline-start: 0;
                opacity: 1;
            }

            & path {
                fill: var(--white);
            }
        }

        & .percent {
            font-style: normal;
            opacity: 0.5;
        }

        & .triangle {
            position: absolute;
            inset-inline-end: 12px;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-top: 10px solid var(--white);
        }
    }
}

.leaderboard {
    margin: 0;
    padding: 0 20px;
    max-height: 205px;
    width: 100%;

    overflow: auto;
    list-style: none;

    --before-height: 0;
    --after-height: 0;

    &::before,
    &::after {
        content: '';
        position: sticky;
        display: block;
        width: 100%;
        background: linear-gradient(white, transparent);
        opacity: 0.7;
        pointer-events: none;
    }

    &::before {
        top: 0;
        margin-bottom: calc(-1 * var(--before-height));
        height: var(--before-height);
    }

    &::after {
        bottom: -1px;
        margin-top: calc(-1 * var(--after-height));
        height: var(--after-height);
        transform: rotateX(180deg);
    }

    & .rotate {
        border-style: dotted;
        border-radius: 50%;
        border-color: green;
        animation: rotate 0.5s linear infinite;
    }

    @keyframes rotate {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }

    & li {
        border-bottom: 1px solid color-mod(var(--black) alpha(20%));
    }

    & .more button {
        border: none;
        padding: 5px 0;
        width: 100%;
        height: 44px;
        font-size: var(--font-size-lg);
        background: none;

        &:hover {
            background: var(--light-grey);
        }

        & > div {
            position: relative;
            bottom: 7px;
        }
    }

    & .row {
        display: flex;
        flex-direction: row;
        align-items: center;

        & > * {
            padding: 5px 0;
            margin-inline-end: 10px;

            &:last-child {
                margin-inline-end: 0;
            }
        }

        & .position {
            color: var(--warm-grey);
            font-size: var(--font-size-xs);
            letter-spacing: 0.4px;
        }

        & .avatar-container {
            display: flex;
            border: none;
            & .avatar-wrap {
                width: 24px;
                height: 24px;
            }
        }

        & .username {
            width: 100%;
            line-height: 1.5;
            font-weight: 600;
            color: var(--near-black);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            min-width: 75px;
        }

        .total {
            padding: 0 20px;
            min-width: 45px;
            height: 44px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-direction: row;
            font-weight: 600;
            color: var(--near-black);

            svg {
                flex-shrink: 0;
                width: 17px;
                &.play {
                    height: 12px;
                }
            }

            path {
                fill: var(--warm-grey);
            }

            @media (--sm-up) {
                min-width: 65px;
            }

            @media (--sm-down) {
                padding: 0 10px;
            }
        }

        &.you .username {
            color: var(--blue);
        }
    }
}
