:root {
  /* These are also used in the template hotspot_banner.tpl to properly center the spots */
  --et-hotspot-banner-spot-width: 48px;
  --et-hotspot-banner-spot-height: 48px;
  --et-hotspot-banner-content-width: 320px;
  --et-hotspot-banner-content-spot-spacing: #{$grid-gutter-width / 2};
}

.et-hotspot-banner-hotspots-container {
  position: relative;
  overflow: visible;
  display: inline-block;
}

.et-hotspot-banner-hotspots-wrapper {
  display: flex;
  justify-content: center;
}

@keyframes et-hotspot-size-pulse {
  from {
    width: calc(var(--et-hotspot-banner-spot-width) * 0.25);
    height: calc(var(--et-hotspot-banner-spot-height) * 0.25);
  }
  to {
    width: calc(var(--et-hotspot-banner-spot-width) * 0.75);
    height: calc(var(--et-hotspot-banner-spot-height) * 0.75);
  }
}

@keyframes et-hotspot-color-pulse {
  to {
    background-color: currentColor;
  }
}

.et-hotspot-banner-hotspot {
  position: absolute;
  cursor: pointer;

  .et-hotspot-banner-hotspot-spot {
    border-radius: 100%;
    width: var(--et-hotspot-banner-spot-width);
    height: var(--et-hotspot-banner-spot-height);
    background-color: $colorBoxShadow;
    display: flex;
    align-items: center;
    justify-content: center;
    &:after {
      /* This is the actual dot */
      transition: all 300ms ease-in-out;
      content: '';
      width: calc(var(--et-hotspot-banner-spot-width) * 0.5);
      height: calc(var(--et-hotspot-banner-spot-height) * 0.5);
      background-color: $colorContentBackground;
      border-radius: 100%;
    }
  }

  &:hover {
    .et-hotspot-banner-hotspot-spot:after {
      width: calc(var(--et-hotspot-banner-spot-width) * 0.25);
      height: calc(var(--et-hotspot-banner-spot-height) * 0.25);
    }
  }

  .et-hotspot-banner-hotspot-content-wrapper {
    display: none;
  }

  &:hover .et-hotspot-banner-hotspot-content-wrapper {
    display: flex;
  }


  .et-hotspot-banner-spot-animation-sizePulse &:not(:hover),
  .et-hotspot-banner-spot-animation-hover-sizePulse &:hover {
    .et-hotspot-banner-hotspot-spot:after {
      animation: et-hotspot-size-pulse 2s infinite alternate;
    }
  }

  .et-hotspot-banner-spot-animation-colorPulse &:not(:hover),
  .et-hotspot-banner-spot-animation-hover-colorPulse &:hover {
    .et-hotspot-banner-hotspot-spot:after {
      animation: et-hotspot-color-pulse 2s infinite alternate;
    }
  }

}

.et-hotspot-banner-hotspot-content-wrapper {
  position: absolute;
  padding-top: var(--et-hotspot-banner-content-spot-spacing);
  left: 0;
  padding-left: 0;
  @include media-breakpoint-up(lg) {
    padding-top: 0;
    padding-left: var(--et-hotspot-banner-content-spot-spacing);
    top: 0;
    left: var(--et-hotspot-banner-spot-width);
  }
  z-index: 1; // Needed to overlay other hotspots
  justify-content: center;
  align-items: center;
  @include media-breakpoint-only(xs) {
    &.et-position-xs-left {
      left: calc(min(calc(-0.5 * var(--et-hotspot-banner-content-width) + 0.5 * var(--et-hotspot-banner-spot-width)), -1 * calc(var(--et-hotspot-banner-content-width) - var(--et-hotspot-banner-spot-width)))); // The outer calc is necessary to have the PHP Compiler for Sass not try to use the SASS min-function instead.
      padding-left: 0;
    }
  }
  @include media-breakpoint-only(sm) {
    &.et-position-sm-left {
      left: calc(min(calc(-0.5 * var(--et-hotspot-banner-content-width) + 0.5 * var(--et-hotspot-banner-spot-width)), -1 * calc(var(--et-hotspot-banner-content-width) - var(--et-hotspot-banner-spot-width)))); // The outer calc is necessary to have the PHP Compiler for Sass not try to use the SASS min-function instead.
      padding-left: 0;
    }
  }
  @include media-breakpoint-only(md) {
    &.et-position-md-left {
      left: calc(min(calc(-0.5 * var(--et-hotspot-banner-content-width) + 0.5 * var(--et-hotspot-banner-spot-width)), -1 * calc(var(--et-hotspot-banner-content-width) - var(--et-hotspot-banner-spot-width)))); // The outer calc is necessary to have the PHP Compiler for Sass not try to use the SASS min-function instead.
      padding-left: 0;
    }
  }
  @include media-breakpoint-only(lg) {
    &.et-position-lg-left {
      left: calc(-1 * var(--et-hotspot-banner-content-width) - var(--et-hotspot-banner-content-spot-spacing));
      padding-right: var(--et-hotspot-banner-content-spot-spacing);
      padding-left: 0;
    }
  }
  @include media-breakpoint-only(xl) {
    &.et-position-xl-left {
      left: calc(-1 * var(--et-hotspot-banner-content-width) - var(--et-hotspot-banner-content-spot-spacing));
      padding-right: var(--et-hotspot-banner-content-spot-spacing);
      padding-left: 0;
    }
  }
}

.et-hotspot-banner-hotspot-content {
  display: flex;
  padding: $grid-gutter-width / 2;
  border: 1px solid $colorContentBackground;
  min-width: var(--et-hotspot-banner-content-width);
  max-width: var(--et-hotspot-banner-content-width);
  gap: $grid-gutter-width / 2;
  overflow: hidden;
  position: relative;
  flex-direction: column;
  background-color: $colorContentBackground;
  box-shadow: 0 0 6px $colorBoxShadow;
  cursor: initial;
}

.et-hotspot-banner-hotspot-image-wrapper {
  position: relative; // To make overlay ribbons align properly
}

.et-hotspot-banner-manufacturer {
  font-weight: $font-weight-bold;
  text-transform: uppercase;
}

.et-hotspot-banner-rating {
  font-size: small;
  color: $colorRatings;
}

.et-hotspot-banner-stock {
  color: $colorFontMuted;
  font-size: small;
}

.et-hotspot-banner-general-link {
  .btn-link {
    margin-right: 0;
    padding-right: 0;
    margin-left: 0;
    padding-left: 0;
  }
  &.et-position-below-items {
    margin-top: $grid-gutter-width / 2;
  }
  &.et-position-above-items {
    margin-bottom: $grid-gutter-width / 2;
  }
  &.et-align-horizontal-left {
    text-align: left;
  }
  &.et-align-horizontal-center {
    text-align: center;
  }
  &.et-align-horizontal-right {
    text-align: right;
  }
}