// Marker to indicate geolocation position
.marker-location-position.leaflet-marker-icon {
    border-radius: 50%;
    border: 1px solid white;
    width: 14px;
    height: 14px;    
}

// Marker representing an element
.leaflet-marker-container
{
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    --angle: 0; // see rotate class

    .marker-container {
        transform-origin: bottom;
        transform: scale(var(--size));
    }

    &:hover { z-index: 10000000 !important; }  

    .marker-popup
    {
        // If the marker size is very small, then the popup text is very small
        // so we compensate the marker-container scale by increase the scale
        // of the popup. But if the marker is small, we still want the popup to
        // be smaller (but not too small) that's why we do not want to have a
        // compensate factore greater than 1.5
        --factor: clamp(0.9, 1 / var(--size), 1.5);
        position: absolute;
        white-space: nowrap;
        height: auto;
        line-height: calc(1.5rem * var(--factor));
        font-size: calc(1rem * var(--factor));
        border-radius: calc(5px * var(--factor));
        padding: calc(5px * var(--factor)) calc(10px * var(--factor));
        bottom: 50px;
        margin-bottom: 6px;
        left: -25px;

        p { margin: 0; }
    }

    .marker-wrapper
    {
        position: absolute;	
        z-index: 1;
        height: 50px;
        width: 50px;
        bottom: 0;
        left: -25px;
        font-size: 50px;
        line-height: 50px;
        // filter: drop-shadow(3px 0px 7px #bbb);
        transform: scale(0.8) rotate(var(--angle));
        transform-origin: bottom;
        opacity: .99; // in order to create new z-index group

        &.disabled { color: grey !important}    
        &:hover { cursor: pointer; }
        &.big-size { transform: scale(1) rotate(var(--angle)); }

        .marker-shape {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            text-align: center;
            transform-origin: bottom;
            transform: scale(var(--shape-size));

            // Some adjustement for icons that are no perfectly align with bottom center
            &.fa-heart { top: 2px }
            &.fa-bolt { left: 3px }
        }

        .marker-shadow {
            position: absolute;
            background-image: url(images/marker-shadow.png);
            background-position: 12px 8px;
            &.for-url { background-position: 14px 8px; }
            background-repeat: no-repeat;
            width: 60px;
            height: 50px;
            
        }

        .main-icon-wrapper {
            transform: translateY(4px);
            margin: 0 auto;
            background: transparent;
        }
    }

    .main-icon-wrapper, .other-icon-wrapper {
        text-align: center;
        width: 32px;
        height: 32px;        
        font-size: 22px;
        line-height: 34px;
        border-radius: 50%;   
        display: flex;
        justify-content: center;
        align-items: center;     

        // If we use the icon color, then we add a white bakground
        &.gogo-color-as {
            background-color: #efededf2;
            font-size: 22px;
        }

        // makes sure icon is always centered horizontally and vertically
        .marker-icon {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
        }
    }

    // Other categories icons
    .other-icons-wrapper
    {
        display: none;
        align-items: center;
        position: absolute;
        bottom: 8px;
        left: 25px;

        .other-icon-wrapper
        {
            display: inline-flex;
            box-sizing: content-box;
            margin-left: -3px;
            padding: 1px;
            border-width: 5px;
            border-style: solid;
            transform: scale(0.8);

            &.gogo-color-as {
                &.disabled {
                    border-color: #abaaaa;
                    color: #abaaaa;
                    background-color: #e0e0e0;
                }
            }
            &.gogo-bg-color-as {
                filter: drop-shadow(7px -2px 10px #aaa);
                &.disabled {
                    border-color: #d0c8c8;
                    background-color: #d0c8c8;
            
                    .marker-icon {
                        color: #949494;
                    }
                }
            }
        }
    }

    [data-shape="heart"] .other-icons-wrapper { margin-left: 4px; }
    [data-shape="fun-animal"] .gogo-icon-plus-circle { top: -18px; right: -2px; }
    [data-shape="fun-animal"] .marker-popup { bottom: 53px; }
    [data-shape="fun-egg"] .gogo-icon-plus-circle { top: -18px; right: -5px; }
    [data-shape="fun-egg"] .marker-popup { bottom: 55px; }
    [data-shape="fun-egg"] .other-icons-wrapper  { margin-left: 8px; }
    [data-shape="fun-flower"] .marker-popup { bottom: 55px; }
    [data-shape="fun-flower"] .other-icons-wrapper  { margin-left: 8px; }
    [data-shape="fun-hair"] .gogo-icon-plus-circle { top: -12px; right: -6px; }
    [data-shape="fun-hair"] .marker-popup { bottom: 54px; }
    [data-shape="fun-hair"] .other-icons-wrapper  { margin-left: 5px; }
    [data-shape="fun-hair-2"] .gogo-icon-plus-circle { top: -6px; right: -7px; }
    [data-shape="fun-hair-2"] .marker-popup { bottom: 58px; }
    [data-shape="fun-hair-2"] .other-icons-wrapper  { margin-left: 5px; }
    [data-shape="fun-hat"] .gogo-icon-plus-circle { top: -4px; right: -6px; }
    [data-shape="fun-hat-2"] .gogo-icon-plus-circle { top: -8px; right: -5px; }
    [data-shape="fun-hat-2"] .marker-popup { bottom: 58px; }
    [data-shape="handsup-flower"] .gogo-icon-plus-circle { top: -16px; right: -8px; }
    [data-shape="handsup-flower"] .marker-popup { bottom: 60px; left: -32px; }
    [data-shape="handsup-flower"] .other-icons-wrapper  { margin-left: 5px; }
    [data-shape="handsup-hand"] .gogo-icon-plus-circle { top: -30px; right: 8px; }
    [data-shape="handsup-hand"] .marker-popup { bottom: 57px; left: -30px; }
    [data-shape="handsup-heart"] .gogo-icon-plus-circle { top: -18px; right: -9px; }
    [data-shape="handsup-heart"] .other-icons-wrapper { margin-left: 5px; }
    [data-shape="handsup-heart"] .marker-popup { bottom: 58px; }
    [data-shape="handsup-hotairballoon"] .gogo-icon-plus-circle { top: -25px; right: -2px; }
    [data-shape="handsup-hotairballoon"] .marker-popup { bottom: 60px; }
    [data-shape="handsup-hotairballoon"] .other-icons-wrapper { bottom: 18px; }
    [data-shape="handsup-lollipop"] .gogo-icon-plus-circle { top: -14px; right: -3px; }
    [data-shape="handsup-mushroom"] .gogo-icon-plus-circle { top: -24px; right: -2px; }
    [data-shape="handsup-mushroom"] .marker-popup { bottom: 58px; }
    [data-shape="handsup-mushroom"] .other-icons-wrapper  { bottom: 16px; left: 28px; }
    [data-shape="handsup-tree"] .marker-popup { bottom: 60px; }
    [data-shape="shape-crest"] .other-icons-wrapper { bottom: 4px; left: 28px; }
    [data-shape="shape-diamond"] .gogo-icon-plus-circle { top: -10px; right: -6px; }
    [data-shape="shape-diamond"] .marker-popup { bottom: 60px; left: -30px; }
    [data-shape="shape-diamond"] .other-icons-wrapper { bottom: 15px; left: 30px; }
    [data-shape="shape-eye"] .gogo-icon-plus-circle { top: 3px; right: -16px; }
    [data-shape="shape-eye"] .marker-popup { bottom: 42px; left: -35px; }
    [data-shape="shape-eye"] .other-icons-wrapper { margin-left: 15px; bottom: 3px; }
    [data-shape="shape-flower"] .gogo-icon-plus-circle { top: -32px; right: -2px; }
    [data-shape="shape-flower"] .marker-popup { bottom: 67px; }
    [data-shape="shape-flower"] .other-icons-wrapper { bottom: 28px; }
    [data-shape="shape-flower-2"] .gogo-icon-plus-circle { top: -16px; right: -1px; }
    [data-shape="shape-hotairballoon"] .marker-shadow { opacity: .5; }
    [data-shape="shape-leaf"] .gogo-icon-plus-circle { top: -6px; right: -3px; }
    [data-shape="shape-leaf"] .marker-popup { bottom: 44px; }
    [data-shape="shape-leaf"] .other-icons-wrapper { left: 35px; bottom: 2px; }
    [data-shape="shape-mushroom"] .gogo-icon-plus-circle { top: -20px; right: -2px; }
    [data-shape="shape-mushroom"] .marker-popup { bottom: 55px; }
    [data-shape="shape-mushroom"] .other-icons-wrapper { bottom: 15px; }
    [data-shape="shape-panel"] .gogo-icon-plus-circle { top: -25px; }
    [data-shape="shape-panel"] .marker-popup { bottom: 60px; }
    [data-shape="shape-panel"] .other-icons-wrapper { bottom: 17px; }
    [data-shape="shape-round"] .gogo-icon-plus-circle { top: -17px; right: -2px; }
    [data-shape="shape-round"] .marker-popup { bottom: 55px; }
    [data-shape="shape-round"] .other-icons-wrapper { bottom: 14px; left: 23px; }
    [data-shape="shape-round"] .marker-shadow { opacity: .5; }
    [data-shape="shape-round-2"] .gogo-icon-plus-circle { top: -17px; right: -2px; }
    [data-shape="shape-round-2"] .marker-popup { bottom: 55px; }
    [data-shape="shape-round-2"] .other-icons-wrapper { bottom: 14px; left: 23px; }
    [data-shape="shape-round-2"] .marker-shadow { opacity: .5; }
    [data-shape="shape-square"] .other-icons-wrapper { bottom: 4px; margin-left: 5px; }
    [data-shape="shape-square-2"] .gogo-icon-plus-circle { top: -16px; right: -2px; }
    [data-shape="shape-square-2"] .marker-popup { bottom: 55px; }
    [data-shape="shape-square-2"] .other-icons-wrapper { bottom: 10px; margin-left: 8px;  }
    [data-shape="shape-star"] .gogo-icon-plus-circle { top: -16px; right: -2px; }
    [data-shape="shape-star"] .marker-popup { bottom: 55px; }
    [data-shape="shape-star"] .other-icons-wrapper { bottom: 14px; left: 32px; }
    [data-shape="shape-triangle"] .gogo-icon-plus-circle { top: -6px; right: -7px; }
    [data-shape="shape-triangle"] .marker-popup { bottom: 45px; left: -32px; }
    [data-shape="shape-triangle"] .other-icons-wrapper { bottom: 6px; left: 32px; }
    [data-shape="shape-triangleball"] .gogo-icon-plus-circle { top: -18px; right: -8px; }
    [data-shape="shape-triangleball"] .marker-popup { bottom: 57px; }
    [data-shape="shape-triangleball"] .other-icons-wrapper { bottom: 18px; left: 28px; }
    [data-shape="drawing-star"] .gogo-icon-plus-circle { top: -14px; right: -8px; }
    [data-shape="drawing-star"] .marker-popup { bottom: 60px; left: -32px; }
    [data-shape="drawing-star"] .other-icons-wrapper { left: 32px; }
    [data-shape="drawing-cloud"] .gogo-icon-plus-circle { top: -14px; right: -5px; }
    [data-shape="drawing-cloud"] .marker-popup { bottom: 54px; left: -32px; }
    [data-shape="drawing-cloud"] .other-icons-wrapper { left: 36px; }
    [data-shape="drawing-mountain"] .gogo-icon-plus-circle { right: -10px; }
    [data-shape="drawing-mountain"] .marker-popup { bottom: 57px; left: -32px; }
    [data-shape="drawing-mountain"] .other-icons-wrapper { left: 34px; }

    // Icon to make it clear that multiple categories are filled by this element
    .gogo-icon-plus-circle
    {
        position: absolute;
        z-index: 3;
        font-size: 20px;
        top: -12px;
        right: 0;

        &:before {
            border-radius: 50%;
            background-color: #efededf2;
        }
    }

    // Icon to say this element have bee stamped by current user
    .marker-mini-icon-container
    {
        position: absolute;
        top: 0;
        z-index: 3;
        left: -5px;
        color: #efededf2;        
        display: flex;
        flex-direction: column;
        justify-content: flex-start;

        .marker-mini-icon 
        { 
            display: inline-flex;
            margin-bottom: 1px;

            &:before
            {
                border-radius: 50%;
                background-color: $favorite-color;
                width: 19px;
                height: 19px;
                display: flex;
                align-items: center;
                justify-content: center;                
                font-size: 14px;
                border: 1.5px solid;
            }
            &.gogo-icon-stamp-2:before {
                font-size: 11px;
            }
        }
    }

    .rotate {
        transform-origin: bottom;
    }
    .rotate-reverse { 
        transform: rotate(calc(-1 * var(--angle))); 
    }
    &.rotateLeft {
        --angle: -45deg;
        .marker-popup { bottom: 42px; left: -50px; }
        .other-icons-wrapper { bottom: 0; left: 5px; }
    }
    &.rotateRight {
        --angle: 45deg;
        .marker-popup { bottom: 42px; left: -5px; }
        .other-icons-wrapper { bottom: 0; left: 45px; }
    }
    &.rotateSoftLeft {
        --angle: -25deg;
        .marker-popup { bottom: 47px; left: -42px; }
        .other-icons-wrapper { bottom: 4px; left: 12px; }
    }
    &.rotateSoftRight {
        --angle: 25deg;
        .marker-popup { bottom: 47px; left: -15px; }
        .other-icons-wrapper { bottom: 4px; left: 37px; }
    }
}