@import "../../scss/mixin";
:root {
  --ere-map-pin-color: var(--ere-color-accent);
}

.ere__pin-shadow {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  bottom: -12.5px;
  left: -90px;

  &:after {
    display: block;
    width: 25px;
    height: 25px;
    content: '';
    @include transform(rotateX(55deg));
    @include border_radius(50%);
    @include box_shadow(rgba(0, 0, 0, 0.5) 100px 0 20px);
  }
}



.ere__pin-pulse {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  bottom: -25px;
  @include transform(rotateX(55deg) translateX(-50%));
  left: 50%;
  &:after {
    display: block;
    width: 50px;
    height: 50px;
    content: '';
    @include animation(ere__pulsate 1s ease-out infinite);
    opacity: 0;
    @include border_radius(50%);
    @include box-shadow(0 0 6px 3px var(--ere-map-pin-color));
  }
}

.ere__pin {
  width: 50px;
  height: 50px;

  &:before {
    position: absolute;
    display: block;
    box-sizing: border-box;
    width: 50px;
    height: 50px;
    content: '';
    @include transform(rotateZ(-45deg));
    @include border-radius(50% 50% 50% 0);
    background: var(--ere-map-pin-color);
  }

  &:after {
    position: absolute;
    display: block;
    box-sizing: border-box;
    width: 50px;
    height: 50px;
    content: '';
    @include transform(rotateZ(-45deg));
    border: 5px solid var(--ere-map-pin-color);
    @include border-radius(50% 50% 50% 50%);
    background: #fff;
  }
}

.ere__marker-icon {
  .ere__pin-shadow {
    left: -110px;
  }
  .ere__pin-wrap {
    position: absolute;
    width: 50px;
    height: 50px;
    bottom: 10px;
    @include transform(translateX(-50%));
    i {
      font-size: 18px;
      color: var(--ere-map-pin-color);
      position: absolute;
      z-index: 1;
      width: 50px;
      height: 50px;
      text-align: center;
      line-height: 50px;
    }
  }
}

.ere__marker-image {
  .ere__pin {
    display: none;
  }
}


.ere__marker-container {
  position: absolute;
  cursor: pointer;
  @include transform(translate(-50%,-100%));
  z-index: 10;
  &.hide {
    display: none;
  }
}

.ere__marker-container.active {
  .ere__pin-shadow,
  .ere__pin-pulse {
    opacity: 1;
    visibility: visible;
  }
}

.ere__map-popup-wrap {
  overflow: hidden;
  opacity: 0 !important;
  visibility: hidden !important;
  @include transition(opacity .2s);
  padding-bottom: 15px;
  width: 300px !important;
  &.show {
    opacity: 1 !important;
    visibility: visible !important;
  }

  &:after {
    background: linear-gradient(45deg, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 51%, rgba(255, 255, 255, 0) 100%);
    box-shadow: -2px 2px 2px 0 rgba(178, 178, 178, .4);
    content: "";
    height: 15px;
    left: 0;
    bottom: 0;
    right: -15px;
    margin: auto;
    position: absolute;
    transform: translate(-50%, -50%) rotate(-45deg);
    width: 15px;
  }

  &.ere__map-popup-google {
    @include transform(translateX(-50%) !important);
  }

  > img {
    position: absolute !important;
    right: 5px;
    top: 5px;
  }
}



.ere__cluster {
  > div {
    @include border-radius(50%);
    background-color: var(--ere-map-pin-color);
    &:after {
      content: '';
      display: block;
      width: 100%;
      height: 100%;
      top: -5px;
      left: -5px;
      box-sizing: content-box;
      position: absolute;
      border: 5px solid rgba(0,0,0,0.3);
      @include border-radius(50%);
    }
  }
}

@keyframes ere__pulsate {
  0% {
    @include transform(scale(.1, .1));
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    @include transform(scale(1.2, 1.2));
    opacity: 0;
  }
}