@import "/UI/Styles/styles.scss";

MapVoteList {
    position: absolute;
    width: 40%;
    height: 25%;
    left: 30%;
    top: 5px;
    justify-content: center;
    align-items: center;
    gap: 15px;
    font-family: $font-primary;
    color: $text-primary-color;
    text-align: center;

    .entry {
        width: 225px;
        height: 90%;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        transition: opacity 0.15s ease-in;

        &:intro {
            opacity: 0;
        }

        .thumbnail {
            width: 125px;
            height: 125px;
            border-radius: 10px;
            background-repeat: no-repeat;
            background-size: contain;
            filter: blur(2) border-wrap(3px, black);
        }

        .info {
            width: 100%;
            height: 85px;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;

            .title {
                text-stroke: 6px black;
                font-size: 28px;
            }

            .starting {
                width: 125px;
                padding: 10px;
                align-items: center;
                justify-content: center;
                text-stroke: 6px black;
                font-size: 24px;
                position: absolute;
                top: 45px;
            }

            .voters {
                justify-content: center;
                align-items: center;
                gap: 10px;
                text-stroke: 6px black;

                .avatar {
                    width: 30px;
                    height: 30px;
                    background-repeat: no-repeat;
                    background-size: contain;
                    filter: border-wrap(2px, black);
                    border-radius: 4px;
                }

                i {
                    color: #777777;
                    font-size: 36px;
                }
            }
        }
    }
}