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

MapTeleporter {
    position: absolute;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 15px;
    font-family: $font-primary;
    color: $text-primary-color;
    text-align: center;
    opacity: 0;
    pointer-events: all;
    backdrop-filter: blur(4);

    &.visible {
        opacity: 1;
    }

    .title {
        font-size: 128px;
        text-stroke: 15px black;
    }

    .entries {
        flex-direction: row;
        gap: 20px;
    }

    .entry {
        width: 355px;
        height: 420px;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        background-color: rgba(0,0,0,0.6);
        border-radius: 20px;
        transition: all 0.4s ease;

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

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

            .title {
                width: 90%;
                height: 180px;
                text-stroke: 6px black;
                font-size: 38px;
                color: white;
                justify-content: center;
            }
        }

        &:hover {
            transform: scale(1.08);
            transition: all 0.4s ease;
        }
    }
}