.ba-item-hotspot > .ba-button-wrapper > a {
    background-color: var(--background-color);
    border-bottom: calc(var(--border-bottom)*var(--border-width)) var(--border-style) var(--border-color);
    border-left: calc(var(--border-left)*var(--border-width)) var(--border-style) var(--border-color);
    border-radius: var(--border-radius);
    border-right: calc(var(--border-right)*var(--border-width)) var(--border-style) var(--border-color);
    border-top: calc(var(--border-top)*var(--border-width)) var(--border-style) var(--border-color);
    color: var(--color);
    position: relative;
    z-index: 0;
}

.ba-item-hotspot:hover {
    z-index: 100 !important;
}

.ba-item-hotspot > .ba-button-wrapper > a > i {
    display: flex;
    justify-content: center;
    width: 1em;
}

.ba-item-hotspot > .ba-button-wrapper {
    display: flex;
    justify-content: center;
}

.ba-item-hotspot > .ba-button-wrapper > a > i,
.ba-item-hotspot > .ba-button-wrapper > a > i:before {
    z-index: 10
}

.ba-item-hotspot > .ba-button-wrapper[data-animation="ba-hotspot-bouncing-out-pulse"] > a:after,
.ba-item-hotspot > .ba-button-wrapper[data-animation="ba-hotspot-easy-pulse"] > a:after,
.ba-item-hotspot > .ba-button-wrapper[data-animation="ba-hotspot-rings"] > a > i:after,
.ba-item-hotspot > .ba-button-wrapper[data-animation="ba-hotspot-rings"] > a:after,
.ba-item-hotspot > .ba-button-wrapper > a:before {
    background-color: var(--background-color);
    border-radius: var(--border-radius);
    bottom: 0;
    content: "";
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    will-change:  transform;
    transition: inherit;
    z-index: 0;
} 

/* Pulse */
@keyframes pulse {
    0% {box-shadow: 0 0 0 0 var(--background-color);opacity: 1;}
    75% {box-shadow: 0 0 0 30px var(--background-color); opacity: 0;}
    100% { opacity: 0;}
}

.ba-item-hotspot > .ba-button-wrapper[data-animation="ba-hotspot-pulse"] > a:before {
    animation: pulse 1500ms infinite;
} 

/* Rings */
@keyframes rings {
    0% {transform: scale(1);opacity: 0.5;}
    90% {transform: scale(3);}
    100% {transform: scale(4);opacity: 0; }
}



.ba-item-hotspot > .ba-button-wrapper[data-animation="ba-hotspot-rings"] > a > i:after,
.ba-item-hotspot > .ba-button-wrapper[data-animation="ba-hotspot-rings"] > a:after,
.ba-item-hotspot > .ba-button-wrapper[data-animation="ba-hotspot-rings"] > a:before {
    animation: rings 2.5s linear infinite;
}



.ba-item-hotspot > .ba-button-wrapper[data-animation="ba-hotspot-rings"] > a:after {
    animation-delay: 0.5s;
}

.ba-item-hotspot > .ba-button-wrapper[data-animation="ba-hotspot-rings"] > a:before {
    animation-delay: 1s;
}

/* Bouncing Pulse */
@keyframes bouncing-pulse {
  0% {transform: scale(0.9);}
  70% { transform: scale(1);}
  100% {transform: scale(0.9);}
}

.ba-item-hotspot > .ba-button-wrapper[data-animation="ba-hotspot-bouncing-pulse"] > a {
    animation: bouncing-pulse 1.5s infinite;    
}

.ba-item-hotspot > .ba-button-wrapper[data-animation="ba-hotspot-bouncing-pulse"] > a:before {
    animation: pulse 1.5s infinite;
}

/* Easy Pulse */
@keyframes pulse {
    from {transform: scale(1);opacity: .5;}
    to {transform: scale(3, 3);opacity: 0;}
}

.ba-item-hotspot > .ba-button-wrapper[data-animation="ba-hotspot-easy-pulse"] > a:after,
.ba-item-hotspot > .ba-button-wrapper[data-animation="ba-hotspot-easy-pulse"] > a:before {
    animation: pulse 3s infinite ease-out;
    background-color: transparent;
    border: 4px solid var(--background-color);
}

.ba-item-hotspot > .ba-button-wrapper[data-animation="ba-hotspot-easy-pulse"] > a:after {
      animation-delay: 0s;
}

.ba-item-hotspot > .ba-button-wrapper[data-animation="ba-hotspot-easy-pulse"] > a:before {
    animation-delay: 1.5s;
}

/*Bouncing Out Pulse*/
@keyframes bouncing-out-pulse {
    0% {transform: scale(0.8); filter: alpha(opacity=50);}
    10% {transform: scale(1.1); filter: alpha(opacity=1);}
    20% {transform: scale(0.9); filter: alpha(opacity=1);}
    100% {transform: scale(0.8); filter: alpha(opacity=50);}
}

.ba-item-hotspot > .ba-button-wrapper[data-animation="ba-hotspot-bouncing-out-pulse"] > a {
    animation: bouncing-out-pulse 2s linear infinite;
}

@keyframes outer-pulse {
    0% {transform: scale(1);filter: alpha(opacity=50);opacity: 0.5;}
    80% {transform: scale(3.5); filter: alpha(opacity=0);opacity: 0;}
    100% {transform: scale(3.5);filter: alpha(opacity=0); opacity: 0;}
}

.ba-item-hotspot > .ba-button-wrapper[data-animation="ba-hotspot-bouncing-out-pulse"] > a:after {
    animation: outer-pulse 2000ms linear infinite;
}

@keyframes inner-pulse {
    0% {transform: scale(1);filter: alpha(opacity=50);opacity: 0.5;}
    30% {transform: scale(1);filter: alpha(opacity=50);opacity: 0.5;}
    100% {transform: scale(2.5);filter: alpha(opacity=0);opacity: 0;}
}

.ba-item-hotspot > .ba-button-wrapper[data-animation="ba-hotspot-bouncing-out-pulse"] > a:before {
    animation: inner-pulse 2000ms linear infinite;
}

/* Popover */
.ba-item-hotspot[data-display="hover"]:not(:hover) .ba-hotspot-popover:not(.ba-visible-hotspot-popover),
.ba-item-hotspot:not([data-display="hover"]) .ba-hotspot-popover:not(.ba-visible-hotspot-popover) {
    opacity: 0;
    pointer-events: none;
}
/*
.body-sortable-started .ba-item-hotspot[data-display="hover"]:not(:hover) .ba-hotspot-popover,*/
.body-sortable-started .ba-item-hotspot:not([data-display="hover"]) .ba-hotspot-popover:not(.ba-visible-hotspot-popover) {
    display: none;
}

.ba-hotspot-popover {
    align-items: center;
    background: var(--background-color);
    border-bottom: calc(var(--border-bottom)*var(--border-width)) var(--border-style) var(--border-color);
    border-left: calc(var(--border-left)*var(--border-width)) var(--border-style) var(--border-color);
    border-radius: var(--border-radius);
    border-right: calc(var(--border-right)*var(--border-width)) var(--border-style) var(--border-color);
    border-top: calc(var(--border-top)*var(--border-width)) var(--border-style) var(--border-color);
    box-shadow: var(--shadow-horizontal) var(--shadow-vertical) var(--shadow-blur) var(--shadow-spread) var(--shadow-color);
    cursor: default;
    display: flex;
    flex-direction: column;
    justify-content: center;
    left: 50%;
    opacity: 1;
    pointer-events: all;
    position: absolute;
    transition: .3s;
    z-index: 1;
}

.ba-hotspot-popover[data-position="top"] {
    top: 0;
    transform: translate(-50%, calc(-10px - 100%));
}

.ba-hotspot-popover[data-position="top"]:after {
    border-top-color: var(--background-color);
    bottom: -10px;   
}

.ba-hotspot-popover[data-position="bottom"] {
    bottom: 0;
    transform: translate(-50%, calc(10px + 100%));
}

.ba-hotspot-popover[data-position="bottom"]:after {
    border-bottom-color: var(--background-color);
    top: -10px;  
} 

.ba-hotspot-popover[data-position="left"] {
    left: 0;
    top: 50%;
    transform: translate(calc(-10px - 100%), -50%);
}

.ba-hotspot-popover[data-position="left"]:after {
    border-left-color: var(--background-color);
    right: -10px;
    left: auto;
} 

.ba-hotspot-popover[data-position="right"] {
    left: auto;
    right: 0;
    top: 50%;
    transform: translate(calc(10px + 100%), -50%);
}

.ba-hotspot-popover[data-position="right"]:after {
    border-right-color: var(--background-color);
    left: -10px;
    right: auto;  
}

.ba-hotspot-popover:after {
    border: 5px solid transparent;
    content: "";
    display: block;
    height: 0;
    left: calc(50% - 5px);
    position: absolute;
    width: 0px;
}

.ba-visible-hotspot-popover.ba-hotspot-popover + .ba-hotspot-backdrop {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    cursor: default;
}

.ba-hotspot-popover-visible {
    z-index: 100;
}

.ba-item-hotspot.ba-hotspot-popover-visible {
    z-index: 150 !important;
}

.ba-item-hotspot.ba-hotspot-popover-visible[data-display="hover"]:hover:before {
    content: "";
    position: absolute;
    top: -10px;
    bottom: -10px;
    left: 0;
    right: 0;
}