@import "_vars.scss";

Scores {
    position: absolute;
    flex-direction: column;
    font-family: $font-family-title;
    font-size: $font-size-small;
    color: $white;
    width: 350px;
    right: 100px;
    top: 75px;
    height: 100%;
    transform: scale( 1 );
    text-shadow: 1px 1px $red;
    opacity: 1;
    transition: all 1s ease-out;
    transition: opacity .1s linear;

    &.open {
        opacity: 0;
    }

    .score, .ping, .name {
        width: 100px;
        text-transform: uppercase;
        justify-content: center;
    }

    .name {
        flex-grow: 1;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .score {
        padding-right: 20px;
    }

    .header {
        margin-bottom: 20px;
    }

    .entries {
        flex-direction: column;

        .entry {
            &:not( :first-child ) {
                margin-top: 4px;
            }

            .you {
                position: absolute;
                left: -50px;
                color: $red;
                opacity: 0;
            }

            &.me .you {
                opacity: 1;
            }
        }
    }
}