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

MapVoteOverlay {
    pointer-events: all;
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 1;
    transition: opacity 0.5s ease, transform 0.25s ease;
    color: white;

    &:intro {
        transform: scale(1.2);
        opacity: 0;
    }

    .main {
        flex-grow: 1;
    }

    .bg {
        background-size: contain;
    }

    img {
        width: 256px;
        height: 256px;
    }

    .card {
        position: relative;
        width: 256px;
        height: 256px;
        overflow: hidden;
        transition: all 0.1s ease;
        border: 0.5px solid rgba( black, 0.2 );

        .bg {
            position: absolute;
        }

        .win-fade {
            flex-shrink: 0;
            background-image: linear-gradient( to right, $terror-color, rgba( $terror-color, 0 ) );
        }

        .background {
        }

        .header {
            flex-grow: 1;
        }

        .footer {
            transition: all 0.1s ease;
        }

        .avatar {
            transition: all 0.1s ease;
        }

        .votes {
            gap: 4px;
        }

        .avatar {
            width: 32px;
            height: 32px;
            border-radius: 100px;
            border: 1px solid white;
        }

        &.winning {
            border: 2px solid gold;
            transform: scale( 1.02 );

            .name {
                color: gold;
            }

            .footer {
                background-image: linear-gradient( to right, rgba( black, 0.3 ), rgba( black, 0.9 ) );
            }

            .background {
                filter: saturate(120%);
            }
        }

        &:hover {
            transform: scale( 0.99 );
            cursor: pointer;

            .avatar {
                border: 1px solid black;
            }
        }
    }
}