.hotspot-layer {
  position: absolute;
  inset: 0;
  z-index: 10;
}

.hotspot-layer__button {
  position: absolute;
  border: 1px solid transparent;
  background: transparent;
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.hotspot-layer__button::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid transparent;
  background: transparent;
  transition:
    background 0.08s ease,
    border-color 0.08s ease,
    box-shadow 0.08s ease;
  pointer-events: none;
}

.hotspot-layer__button:active::after,
.hotspot-layer__button:focus-visible::after {
  background: rgba(244, 210, 122, 0.08);
  border-color: rgba(244, 210, 122, 0.4);
  box-shadow: inset 0 0 0 1px rgba(255, 240, 205, 0.12);
}

.hotspot-layer__button--rect {
  border-radius: 18px;
}

.hotspot-layer__button--pill {
  border-radius: 999px;
}

.hotspot-layer__button--circle {
  border-radius: 50%;
}
