src/js/poncho-map/src/scss/_themes.scss
#{$scope} {
    /* MAP THEMES */
    &.map-black .leaflet-tile-pane {
        filter: sepia(0.5) saturate(0.3) brightness(0.95);
        transition: filter 0.1s;
    }

    &.map-dark .leaflet-tile-pane {
        filter: sepia(0.19) brightness(0.75) contrast(1.2) invert(1)
            grayscale(1) saturate(1.4) opacity(1);
        transition: filter 0.1s;
    }

    &.map-grayscale .leaflet-tile-pane {
        filter: grayscale(1) brightness(1) saturate(0.9) contrast(1.05);
        transition: filter 0.1s;
    }

    &.map-relax .leaflet-tile-pane {
        filter: grayscale(0.75);
        transition: filter 0.1s;
    }

    &.map-contrast .leaflet-tile-pane {
        filter: grayscale(1) invert(1) brightness(2);
        transition: filter 0.1s;
    }

    &.map-transparent {
        --pm-map-background: transparent;
    }

    &.map-transparent .leaflet-tile-pane {
        opacity: 0 !important;
    }

    /* UI THEMES */

    &.ui-dark {
        --pm-color-primary: var(--arg-cielo, skyblue);
        --pm-color-base: #eaeaea;
        --pm-slider-background: #343232;
        --pm-slider-border-color: color-mix(in srgb, #626161 40%, white);
        --pm-slider-border-width: 1px;

        --pm-scrollbar-handle: #eaeaea;
        --pm-scrollbar-background: rgb(0, 0, 0, 0.15);

        --pm-hover-background: #252424;
        --pm-hover-color: white;
        --pm-active-color: #343232;
        --pm-active-visited-color: violet;
        --pm-active-background: var(--pm-color-primary);
    }

    &.ui-contrast {
        --pm-color-primary:var(--arg-azul-200, skyblue);
        --pm-color-base: white;
        --pm-slider-background: #222;
        --pm-slider-border-color: white;
        --pm-slider-border-width: 2.5px;

        --pm-active-color: var(--pm-slider-background);

        --pm-active-visited-color: red;
        
        --pm-hover-background: var(--pm-color-base);
        --pm-hover-color: var(--pm-slider-background);
        --pm-active-color: #111;
        --pm-active-background: var(--pm-color-primary);
    }

    &.ui-relax {
        --pm-color-primary: color-mix(in srgb, var(--primary) 80%, black);
        --pm-color-base: #5a5a5a;
        --pm-slider-background: color-mix(
            in srgb,
            var(--verde-cemento) 15%,
            white
        );
        --pm-slider-border: 1px solid #ddd;
        --pm-slider-border-color: color-mix(
            in srgb,
            var(--verde-cemento) 80%,
            white
        );
    }

    /* THEME NAV ACTIVE STATE */
    &.map-default.ui-default [data-theme="default"],
    &.map-relax.ui-relax [data-theme="relax"],
    &.map-grayscale.ui-grayscale [data-theme="grayscale"],
    &.ui-contrast.map-contrast [data-theme="contrast"],
    &.map-dark.ui-dark [data-theme="dark"],
    &.layer-osm [data-theme="layer-osm"],
    &.layer-satelital [data-theme="layer-satelital"] {
        background: var(--pm-active-background);
        color: var(--pm-active-color);
    }
    .pm-item-link[aria-hidden="true"], 
    .pm-item-link:disabled {
        opacity: 0.45;
        cursor: not-allowed !important;
        pointer-events: none;
        font-style: italic;
    }
}

// APLICACION TEMPORAL

#{$scope} {
    &.ui-dark .content-container,
    &.ui-contrast .content-container,
    &.ui-dark .content-container > *,
    &.ui-contrast .content-container > * {
        color: inherit;
    }

    &.ui-dark .text-arandano,
    &.ui-contrast .text-arandano {
        color: var(--arg-fucsia-300) !important;
        filter: saturate(1.5);
    }

    &.ui-contrast .btn-primary,
    &.ui-dark .btn-primary {
        background: var(--arg-escarapela);
        color: black;
    }

    &.ui-contrast summary,
    &.ui-dark summary {
        color: var(--pm-color-base) !important;
    }

    &.ui-dark .pm-color-primary,
    &.ui-dark .text-primary,
    &.ui-contrast .pm-color-primary,
    &.ui-contrast .text-primary {
        color: var(--arg-escarapela) !important;
    }

    &.ui-contrast summary:before,
    &.ui-dark summary:before {
        border-color: white;
    }

    &.ui-dark .text-success,
    &.ui-contrast .text-success {
        color: var(--arg-verde-300) !important;
    }

    &.ui-dark .text-uva,
    &.ui-contrast .text-uva {
        color: var(--arg-violeta-300) !important;
    }

    &.ui-dark .text-muted,
    &.ui-contrast .text-muted {
        color: var(--arg-negro-200) !important;
    }

    &.poncho-map.ui-contrast a,
    &.poncho-map.ui-dark a {
        color:var(--arg-azul-100, #9ad7f5) !important;
    }

    &.poncho-map.ui-dark a:visited,
    &.poncho-map.ui-contrast a:visited {
        color:#D3CEE5 !important;
    }
}
