.scorpion-responsive-imagemap {
    --srim-hotspot-color: rgba(255, 255, 0, 0.30);
    --srim-hotspot-border-width: 0;
    --srim-hotspot-border-color: transparent;
    --srim-hotspot-radius: 0;
    --srim-pulse-duration: 600ms;
    position: relative;
    display: inline-block;
    max-width: 100%;
}

.scorpion-responsive-imagemap__img {
    display: block;
    max-width: 100%;
    height: auto;
}

.scorpion-responsive-imagemap area {
    cursor: pointer;
}

.scorpion-responsive-imagemap area:focus-visible {
    outline: 3px solid #0d6efd;
    outline-offset: 2px;
}

.scorpion-responsive-imagemap__hotspot {
    position: absolute;
    display: block;
    cursor: pointer;
    background: transparent;
    border: var(--srim-hotspot-border-width) solid var(--srim-hotspot-border-color);
    border-radius: var(--srim-hotspot-radius);
    transition: background 0.3s ease, border-color 0.3s ease;
}

.scorpion-responsive-imagemap[data-border-mode="hover"] .scorpion-responsive-imagemap__hotspot {
    border-color: transparent;
}

.scorpion-responsive-imagemap__hotspot.is-active,
.scorpion-responsive-imagemap__hotspot.is-pulsing {
    background: var(--srim-hotspot-color);
    border-color: var(--srim-hotspot-border-color);
    transition-duration: var(--srim-pulse-duration);
}

.scorpion-responsive-imagemap--highlight .scorpion-responsive-imagemap__hotspot:hover {
    background: var(--srim-hotspot-color);
    border-color: var(--srim-hotspot-border-color);
}

/* Must outrank the [data-border-mode="hover"] rule above, hence the repeated wrapper selector. */
.scorpion-responsive-imagemap[data-border-mode="hover"] .scorpion-responsive-imagemap__hotspot.is-active,
.scorpion-responsive-imagemap[data-border-mode="hover"] .scorpion-responsive-imagemap__hotspot.is-pulsing,
.scorpion-responsive-imagemap--highlight[data-border-mode="hover"] .scorpion-responsive-imagemap__hotspot:hover {
    border-color: var(--srim-hotspot-border-color);
}

@media (prefers-reduced-motion: reduce) {
    .scorpion-responsive-imagemap__hotspot {
        transition: none;
    }
}