src/js/poncho-map/src/scss/_markers.scss
#{$scope} {
    /*
    Marker activo/seleccionado
    */
    .marker--active {
        --color: 247, 149, 37;

        position: relative;
        background: transparent;
        filter: /* drop-shadow(0px 0px 2px var(--pm-active-marker-color)) */
            drop-shadow(1px -1px 2px var(--pm-active-marker-color)) 
            drop-shadow(-1px -1px 2px var(--pm-active-marker-color)) 
            drop-shadow(0 -2px 4px color-mix( in srgb, var(--pm-active-marker-color) 50%, var(--pm-active-marker-color-darker) 50%)  );
    }

    path{
        &.marker--active {
            -webkit-filter: brightness(.7) saturate(1.15) !important;
            filter: brightness(.7) saturate(1.15) !important;
            transition: filter .15s
        }

        &:hover, 
        &:focus {
            filter: brightness(.8) saturate(1.15) !important;
            transition: filter .15s
        }

        &[data-interactive="n"],
        &[data-interactive="n"]:hover,
        &[data-interactive="n"]:focus {
            background: inherit;
            filter: brightness(1) saturate(1) !important;
            outline: none !important;
            cursor: auto;
        }
    }

    /**
     * Estilos para los markers basados en <div>
     */
    &__div-icon {
        background-color: transparent;
        height: 38px;
        width: 38px;
        position: relative;
        display: block;
        margin: auto;
        text-align: center;
        border-radius: 50%;
    }

    &__div-icon>i {
        font-size: 1.7em;
        position: absolute;
        margin: auto;
        top: 50%;
        right: 50%;
        transform: translate(50%, -50%);
        opacity: 0.9;
        transition: 0.2s;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
    }

    &__div-icon:hover>i {
        opacity: 1;
        transition: 0.2s;
    }
}