Image Map

$imagemap-prefix: 'image-map' !default;
$imagemap-quickinfo-as-overlay: true !default;
$imagemap-hotzone-icon-size: 20px !default;
$imagemap-hotzone-icon-after-size: $imagemap-hotzone-icon-size * 1.4;
$imagemap-hotzone-icon-after-position: -6px !default;
$imagemap-overlay-prefix: 'overlay' !default;
$imagemap-overlay-color-dark: $black !default;
$imagemap-overlay-color-light: $white !default;

@keyframes pulse-hotzone-after {
  0% {
    transform: scale(1);
  }

  40% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes pulse-hotzone-before {
  0% {
    transform: scale(1);
  }

  40% {
    transform: scale(0.8);
  }

  100% {
    transform: scale(1);
  }
}

.#{$imagemap-prefix} {
  position: relative;

  &__wrapper {
    position: relative;
    overflow: hidden;
  }

  &__image {
    user-select: none;
  }

  &__hotzone {
    position: absolute;
    z-index: 100;
    display: block;
    padding: 0;
    transform: translate(-50%, -50%);
    border: 0;

    &--text p {
      margin: 0;
      padding: 0;
    }

    &--icon {
      height: $imagemap-hotzone-icon-size;
      padding-right: 1em;
      border: 2px solid $white;
      border-radius: 50%;
      background-color: $primary;
      font-size: ($imagemap-hotzone-icon-size - 4px);
      transition: background-color 0.25s, border-color 0.25s;
      cursor: pointer;

      &::after,
      &::before {
        content: '';
        position: absolute;
        top: $imagemap-hotzone-icon-after-position;
        left: $imagemap-hotzone-icon-after-position;
        display: block;
        width: $imagemap-hotzone-icon-after-size;
        height: $imagemap-hotzone-icon-after-size;
        border: 2px solid $white;
        border-radius: 50%;
      }

      &::after {
        border-width: 1px;
      }

      > i {
        display: block;
      }
    }

    &:hover.#{$imagemap-prefix}__hotzone--icon {
      // border-color: $primary;
      // background-color: $white;

      &::before {
        animation: pulse-hotzone-before;
        animation-duration: 1.5s;
        animation-iteration-count: infinite;
      }

      &::after {
        animation: pulse-hotzone-after;
        animation-duration: 1.5s;
        animation-iteration-count: infinite;
      }
    }

    &--active.#{$imagemap-prefix}__hotzone--icon {
      border-color: $primary;
    }
  }

  &__cta {
    position: absolute;
    right: 0;
    bottom: 2 * $base-margin;
    left: 0;
    display: flex;
    justify-content: center;
  }

  &__quick-info {
    position: absolute;
    z-index: 120;

    @include breakpoint(pre-large down) {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      background-color: $white;
    }

    @each $breakpoint, $gutter in $grid-gutters {
      @include breakpoint($breakpoint) {
        top: rem-calc($gutter);
        right: rem-calc($gutter);
        bottom: rem-calc($gutter);
        left: rem-calc($gutter);
      }
    }

    @include breakpoint(medium) {
      top: 50%;
      right: auto;
      bottom: auto;
      left: 50%;
      width: $container-max-width / 2;
      max-width: $container-max-width / 2;
      height: auto;
      transform: translate(-50%, -50%);
    }

    .quick-info__visual + .quick-info__content {
      @include breakpoint(pre-large down) {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        background: linear-gradient(to top, rgba(255, 255, 255, 0.9) 0, $transparent 18rem) no-repeat;
      }
    }
  }
}

/**
 * Text-Overlay (part of ImageMap feature)
 */
.#{$imagemap-overlay-prefix} {
  &--theme-dark,
  &--theme-light,
  &--theme-light-on-dark,
  &--theme-dark-on-light {
    @each $breakpoint, $gutter in $grid-gutters {
      @include breakpoint($breakpoint) {
        padding: rem-calc($gutter / 2);
      }
    }

    > a {
      text-decoration: none;
    }
  }

  &--theme-dark {
    background-color: $transparent;

    > a {
      color: $imagemap-overlay-color-dark;
    }
  }

  &--theme-light {
    background-color: $transparent;

    > a {
      color: $imagemap-overlay-color-light;
    }
  }

  &--theme-light-on-dark {
    background-color: $black;

    > a {
      color: $imagemap-overlay-color-light;
    }
  }

  &--theme-dark-on-light {
    background-color: $white;

    > a {
      color: $imagemap-overlay-color-dark;
    }
  }
}

// stylelint-disable-next-line selector-no-qualifying-type
body.modal .scroller {
  // stylelint-disable-next-line declaration-no-important
  display: none !important;
}