/*!***************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!../../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!../../../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/blocks/hotspot/style.scss ***!
  \***************************************************************************************************************************************************************************************************************************************************************************/
/**
 * The following styles get applied both on the front of your site
 * and in the editor.
 *
 * Replace them with your own styles or remove the file completely.
 */
.em-block-hotspot {
  --em-block-hotspot-size: 38px;
  --em-block-hotspot-label-font-size: 18px;
  --em-block-hotspot-label-font-weight: 700;
  --em-block-hotspot-label-color: #fff;
  --em-block-hotspot-background: rgb(219, 124, 0);
  --em-block-hotspot-background-expanded: #000;
  --em-block-hotspot-border-color: #fff;
  --em-block-hotspot-title-font-size: 12px;
  --em-block-hotspot-title-font-weight: 700;
  --em-block-hotspot-title-color: #000;
  --em-block-hotspot-title-background: rgba(216, 216, 216, 0.6);
  --em-block-hotspot-title-padding-left: 10px;
  --em-block-hotspot-title-padding-right: 20px;
  position: absolute !important;
  overflow: hidden;
  min-height: var(--em-block-hotspot-size);
  min-width: var(--em-block-hotspot-size);
  border-radius: 9999px;
}
.em-block-hotspot__wrapper {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
}
.em-block-hotspot__label {
  background-color: var(--em-block-hotspot-background);
  border-radius: 9999px;
  box-shadow: 0 0 0 1.5px var(--em-block-hotspot-border-color) inset;
  color: var(--em-block-hotspot-label-color);
  display: block;
  font-size: var(--em-block-hotspot-label-font-size);
  font-weight: var(--em-block-hotspot-label-font-weight);
  height: var(--em-block-hotspot-size);
  left: 0;
  line-height: var(--em-block-hotspot-size);
  overflow: hidden;
  position: absolute;
  text-align: center;
  top: 0;
  transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  white-space: nowrap;
  width: var(--em-block-hotspot-size);
  z-index: 3;
  cursor: pointer;
}
.em-block-hotspot__title {
  background: var(--em-block-hotspot-title-background);
  border-radius: 9999px;
  color: var(--em-block-hotspot-title-color);
  font-size: var(--em-block-hotspot-title-font-size);
  font-weight: var(--em-block-hotspot-title-font-weight);
  line-height: var(--em-block-hotspot-size);
  padding-left: calc(var(--em-block-hotspot-size) + var(--em-block-hotspot-title-padding-left));
  padding-right: var(--em-block-hotspot-title-padding-right);
  position: relative;
  top: 0;
  transform: translateX(-100%);
  transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  white-space: nowrap;
  will-change: transform;
  z-index: 1;
  display: block;
}
.em-block-hotspot__link {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
}
.em-block-hotspot.direction-left {
  transform: translateX(calc(-100% + var(--em-block-hotspot-size)));
}
.em-block-hotspot.direction-left .em-block-hotspot__label {
  left: auto;
  right: 0;
}
.em-block-hotspot.direction-left .em-block-hotspot__title {
  transform: translateX(100%);
  padding-left: var(--em-block-hotspot-title-padding-right);
  padding-right: calc(var(--em-block-hotspot-size) + var(--em-block-hotspot-title-padding-left));
}
.em-block-hotspot.is-expanded .em-block-hotspot__label, .em-block-hotspot.is-selected .em-block-hotspot__label {
  background-color: var(--em-block-hotspot-background-expanded);
}
.em-block-hotspot.is-expanded .em-block-hotspot__title, .em-block-hotspot.is-selected .em-block-hotspot__title {
  transform: translateX(0);
}

/*# sourceMappingURL=style-index.css.map*/