// 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;

            // 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;
            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;
    }

    // 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; }
    }
}