@import "/ui/Hud/Style.scss";

Minimap {
    position: relative;
    width: 320px;
    height: 320px;
    border-radius: 0;
    z-index: 10;

    &.big {
        width: 400px;
        height: 400px;
        background-color: $fullscreen-bg;
            backdrop-filter: $fullscreen-blur;

        .markers {
            width: 100%;
            height: 100%;
            top: 0%;
            left: 0%;
        }

        .map-parent {
            top: 0;
            left: 0;
        }
    }

    &.radar {
        padding: 1px;
        background-color: $fullscreen-bg;
            backdrop-filter: $fullscreen-blur;
        overflow: hidden;
        border-radius: 50%;
    }

    .map-parent {
        position: relative;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 100%;
    }

    .minimap {
        position: absolute;
        width: 100%;
        height: 100%;
        background-size: 100%;
        filter: drop-shadow(5px 5px 10px rgba(black, 0.5));
    }

    .overlay {
        width: 100%;
        height: 100%;
        background-size: 100%;
    }

    .markers {
        position: absolute;
        width: 50%;
        height: 50%;
        top: 50%;
        left: 50%;
    }

    .marker {
        position: absolute;
        width: 20%;
        height: 20%;
        
        background-image: url('ui/hud/goback.png');
        z-index: 99;
        transform: translateX(-50%) translateY(-50%);
        background-size: cover;
        background-position: center;

        &.viewer {
            z-index: 200;
        }
    }

    .volume {
        position: absolute;
        background-color: white;
        z-index: 5;

        .bg {
            width: 100%;
            height: 100%;
            mask-position: center;
            mask-size: 16px;
            opacity: 1;
            mask-image: url(ui/line_mask.png );
        }
    }

    .label {
        position: absolute;
        z-index: 10;
        transform: translateX(-50%) translateY(-50%);
        text-shadow: 2px 2px 0px rgba(black, 0.5);
    }
}