/**
 * @param {string} $scheme - The color scheme of the button. Options are nothing, $scheme-light, $scheme-dark
 * if $scheme-dark is passed, the button will be black text and black outline
 * if $scheme-light is passed, the button will be white text and white outline
 * if no $scheme is passed, the button will depend on the background color via the bg-dark mixin
 *   - if ancestor DOES have bg-dark, then white text and white outline
 *   - if ancestor DOES NOT have bg-dark, then black text and black outline
 */
.shoppable-hotspots-overlay[data-v-bad10039] {
  pointer-events: none;
  position: absolute;
  z-index: 100;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
}
.shoppable-hotspots-overlay .shoppable-hotspot[data-v-bad10039] {
  pointer-events: all;
  z-index: 200;
  cursor: pointer;
}
.shoppable-hotspots-overlay .shoppable-hotspot .ring[data-v-bad10039] {
  background: none;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  position: absolute;
  top: -16px;
  left: -16px;
}
.shoppable-hotspots-overlay .shoppable-hotspot .ring.selected[data-v-bad10039] {
  border: 1px solid #ffffff;
  box-shadow: 0px 4px 2px rgba(0, 0, 0, 0.1);
}
.shoppable-hotspots-overlay .shoppable-hotspot .dot[data-v-bad10039] {
  box-shadow: 0px 4px 2px rgba(0, 0, 0, 0.1);
  background-color: #ffffff;
  content: "";
  border-radius: 50%;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.shoppable-hotspots-overlay .shoppable-hotspot .dot.selected[data-v-bad10039] {
  width: 24px;
  height: 24px;
}
.shoppable-hotspots-overlay .shoppable-hotspot .close[data-v-bad10039] {
  width: 12px;
  height: 12px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  stroke: currentColor;
  stroke-width: 2;
}
@media (min-width: 768px) {
.mini-product-overlay-desktop[data-v-bad10039] {
    width: 24vw;
}
.-facets-open-grid .mini-product-overlay-desktop[data-v-bad10039] {
    width: 17.28vw;
}
.mini-product-overlay-desktop[data-v-bad10039] {
    position: absolute;
}
.mini-product-overlay-desktop.top-left[data-v-bad10039] {
    bottom: 20px;
    left: 80%;
    transform: translate(-80%, 0);
}
.mini-product-overlay-desktop.top-right[data-v-bad10039] {
    bottom: 20px;
    left: 20%;
    transform: translate(-20%, 0);
}
.mini-product-overlay-desktop.bottom-left[data-v-bad10039] {
    top: 20px;
    left: 80%;
    transform: translate(-80%, 0);
}
.mini-product-overlay-desktop.bottom-right[data-v-bad10039] {
    top: 20px;
    left: 20%;
    transform: translate(-20%, 0);
}
}
.fade-enter-active[data-v-bad10039],
.fade-leave-active[data-v-bad10039] {
  transition: opacity 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.fade-enter[data-v-bad10039],
.fade-leave-to[data-v-bad10039] {
  opacity: 0;
}