@use './marker.scss' as *;

.site-map.standard {
    position: relative;
    width: 100%;
    height: 100%;
    .map-box {
        width: 100%;
        height: 100%;
    }
    .map-tool {
        position: absolute;
        color: #191919;
        font-size: 14px;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
        cursor: pointer;
        line-height: 1;
        font-family: 'font-regular';
        .tip {
            display: none;
            position: absolute;
            right: calc(100% + 10px);
            top: 50%;
            transform: translateY(-50%);
            height: 40px;
            width: 87px;
            font-size: 14px;
            text-align: center;
            line-height: 40px;
            color: #ffffff;
            box-shadow: 0 4px 8px 0 rgba(0, 10, 30, 0.2);
            background-color: rgba(32, 36, 55, 0.95);
            border-radius: 3px;
            &:after {
                content: '';
                display: block;
                width: 0;
                height: 0;
                border-top: 5px solid transparent;
                border-bottom: 5px solid transparent;
                border-left: 5px solid rgba(32, 36, 55, 0.95);
                position: absolute;
                top: 15px;
                right: -5px;
            }
            @media (max-width: 800px) {
                display: none !important;
            }
        }
        &.map-type {
            border: 2px solid #fff;
            .lofty_iconfont {
                width: 36px;
                height: 36px;
                &::before {
                    line-height: 36px;
                    color: #f1f5f6;
                }
            }
            img {
                width: 36px;
                height: 36px;
            }
            &:hover img {
                width: 76px;
                height: 76px;
            }
            @media (max-width: 600px) {
                border: none;
                img {
                    width: 80px;
                    height: 30px;
                }
                &:hover img {
                    width: 80px;
                    height: 30px;
                }
            }
        }
        &.lofty_iconfont {
            background-color: #fff;
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
        }
    }
    .marker-box {
        display: none;
    }
    &.drawing .map-marker {
        display: none;
    }
    .H_imprint {
        display: none;
    }
}