.map {
  @apply relative;
}

.map,
.map .map__image-asset,
.map .map__image-asset img {
  /** Fill the parent container **/
  height: 100%;
  /** Constrain responsive sizing to the specified dimentions **/
  max-height: inherit;
  max-width: inherit;
}

.map .map__image-asset {}

.map .map__image-asset img {
  @apply circle-clip-favor-right--small;
  background-image: linear-gradient(-180deg, rgba(217, 225, 232, 0) 0%, #d9e1e8 100%);
  will-change: clip-path;
}

.map-enter .map__image-asset img {
  @apply standard-animation;
  animation-delay: 0s, 300ms;
  animation-name: spring-clip-out, spring-clip-in;
}

.map-exit .map__image-asset img {
  @apply standard-animation;
  animation-delay: 0s, 300ms;
  animation-name: spring-clip-out, spring-clip-in-to-collapsed;
}

@screen md {
  .map .map__image-asset img {
    @apply md_circle-clip-favor-right--small;
  }

  .map-enter .map__image-asset img {
    @apply standard-animation;
    animation-delay: 0s, 300ms;
    animation-name: md_spring-clip-out, md_spring-clip-in;
  }

  .map-exit .map__image-asset img {
    @apply standard-animation;
    animation-delay: 0s, 300ms;
    animation-name: md_spring-clip-out, md_spring-clip-in-to-collapsed;
  }
}

.map__extra {
  @apply absolute center-abs;
  top: 25px;
}

.map .map__extra {
  opacity: 0;
}

.map-exit .map__extra,
.map-enter-done .map__extra {
  opacity: 1;
}

.map-enter .map__extra,
.map-exit .map__extra {
  @apply standard-animation;
  animation-name: reveal;
}

.map-enter .map__extra {
  animation-delay: 50ms;
}

.map-exit .map__extra {
  animation-delay: 100ms;
}

.map-exit .map__extra {
  animation-direction: reverse;
}

.map__extra--sleepy-pin {
  width: 55px;
  height: 124px;
}

.map__extra--card-pin {
  width: 197px;
  height: 112px;
}

.map__extra--sleepy-camera {
  width: 84px;
  height: 148px;
}

.map__extra--broken-picture {
  width: 187px;
  height: 154px;
}

.map .map__extra-animated .image,
.map .map__extra-animated .image:first-child {
  width: initial;
  margin-left: initial;
}

.map .map__extra-animated .image:first-child {
  margin-top: initial;
}

.map .map__extra .image,
.map .map__extra .image:first-child {
  width: 75%;
  margin-left: 20%;
}

.map .map__extra .image:first-child {
  margin-top: 10%;
}

@screen sm {
  .map .map__extra .image,
  .map .map__extra .image:first-child {
    width: 90%;
    margin-left: 10%;
  }

  .map .map__extra .image:first-child {
    margin-top: 5%;
  }
}

@screen md {
  .map .map__extra .image,
  .map .map__extra .image:first-child {
    width: initial;
    margin-left: initial;
  }

  .map .map__extra .image:first-child {
    margin-top: initial;
  }
}

.map .map__extra-animated .image:first-child {
  transform: translateY(-5%);
}

.map-exit .map__extra-animated .image:first-child,
.map-enter-done .map__extra-animated .image:first-child {
  @apply standard-animation--extra-slow--repeat;
  animation-name: move-cycle--light;
}