$mySpotDistance: -4px;

.container {
    position: relative;
    display: flex;
    z-index: 100;
}

.imgBox {
    position: relative;
    cursor: pointer;

    .fact {
        display: block;
        position: relative;
        width: 100%;
        box-sizing: border-box;
        user-select: none;
    }
}


.virtual {
    position: absolute;
    top: 0;

    .virtualBox {
        position: absolute;
        width: 100%;

        img {
            display: block;
            width: 100%;
            user-select: none;
            opacity: 0.7;
        }
    }

    @mixin cool {
        width: 10px;
        height: 10px;
        overflow: hidden;
        position: absolute;
        background-color: #09c;
    }

    .topLeftCool {
        @include cool;
        top: $mySpotDistance;
        left: $mySpotDistance;
        cursor: nw-resize;
    }

    .topRightCool {
        @include cool;
        top: $mySpotDistance;
        right: $mySpotDistance;
        cursor: ne-resize;
    }

    .bottomRightCool {
        @include cool;
        bottom: $mySpotDistance;
        right: $mySpotDistance;
        cursor: se-resize;
    }

    .bottomLeftCool {
        @include cool;
        bottom: $mySpotDistance;
        left: $mySpotDistance;
        cursor: sw-resize;
    }
}

.img-border::before {
    position: absolute;
    top: -2px;
    bottom: -2px;
    left: -2px;
    right: -2px;
    content: "";
    border: 1px dashed #09c;
}

.toolBox {
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translate(-50%, 0);
    background: #FFF;
    border-radius: 4px;
    box-shadow: 0 5px 15px rgba(#000, .2);
    user-select: none;

    .toolBtn {
        padding: 4px 8px;
        background: transparent;
        font-size: 22px;

        &:hover span svg {
            color: #09c;
        }
    }
}