:root {
--x-pulse-duration: 2s;
--x-pulse-color: rgba(0,0,0,0.4);
--x-pulse-size: 1.2;
--x-pulse-pause: none;
--x-popover-transitionout: 300ms;
--x-popover-transitionin: 300ms;
--x-popover-translatex: 0;
--x-popover-translatey: 10px;
--x-popover-scale: .95;
}
.brxe-ximagehotspots {
position: relative;
}
.x-marker_marker {
background: transparent;
border: 500px;
position: absolute;
left: 0;
top: 0;
font-size: inherit;
line-height: inherit;
border-radius: 500px;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.x-marker_marker-inner {
padding: .5em 1em;
background: #fff;
z-index: 1;
position: relative;
border: 1px solid #eee;
display: inline-flex;
align-items: center;
white-space: nowrap;
border-radius: inherit;
border: none;
gap: 0.5em;
}
.x-marker_marker-icon {
display: flex;
font-size: 1.8em;
}
.x-marker .tippy-box {
color: inherit;
background: transparent;
}
.x-marker .tippy-content {
padding: 20px;
background: #fff;
box-shadow: 0 10px 20px rgb(0 0 0 / 10%);
border-radius: 5px;
}
.x-marker .tippy-arrow {
color: #fff;
opacity: 1;
visibility: visible;
}
.x-hotspots_marker-image {
width: 27px;
}
.x-marker_popover > .x-marker_popover-content {
display: none;
} .x-marker_marker[aria-expanded='true'] + .x-marker_popover .tippy-box[data-theme~='extras'] {
visibility: visible;
transition-duration: var(--x-popover-transitionin);
}
.x-marker_marker[aria-expanded='false'] + .x-marker_popover .tippy-box[data-theme~='extras'] {
opacity: 0;
}
.tippy-box[data-animation='extras'][data-state='hidden'] {
opacity: 0;
transform: translate(var(--x-popover-translatex),var(--x-popover-translatey)) scale(var(--x-popover-scale));
transition-duration: var(--x-popover-transitionout);
transition-property: opacity, transform;
} .x-marker_marker::after,
.x-marker_marker::before {
content: '';
display: block;
position: absolute;
pointer-events: none;
-webkit-animation: x-popover_pulse var(--x-pulse-duration) infinite;
animation: x-popover_pulse var(--x-pulse-duration) infinite;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: inherit;
-webkit-backface-visibility: hidden;
will-change: opacity, transform;
opacity: 0;
background: var(--x-pulse-color);
}
.x-marker_marker:hover::after,
.x-marker_marker:hover::before,
.x-marker_marker[aria-expanded='true']::after, 
.x-marker_marker[aria-expanded='true']::before {
display: var(--x-pulse-pause);
}
.brxe-ximagehotspots[data-x-hotspots*=single] .x-marker_marker::after,
.brxe-ximagehotspots[data-x-hotspots*=none] .x-marker_marker::after {
content: none;
}
.brxe-ximagehotspots[data-x-hotspots*=none] .x-marker_marker::before {
content: none;
}
.x-marker_marker::before {
animation-delay: calc(var(--x-pulse-duration)/4);
-webkit-animation-delay: calc(var(--x-pulse-duration)/4);
}
@keyframes x-popover_pulse {
0% {
opacity: .8;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(var(--x-pulse-size));
}
}
@-webkit-keyframes x-popover_pulse {
0% {
opacity: .8;
-webkit-transform: scale(1);
}
100% {
opacity: 0;
-webkit-transform: scale(var(--x-pulse-size));;
}
}