.static-map {
  @apply w-fullscreen relative h-full;
  opacity: 0;
  overflow: hidden;
}

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

.static-map-enter {
  @apply standard-animation--fast;
  animation-name: reveal;
}

/** Header **/
.static-map .static-map__header {
  @apply w-full -mt-6;
  overflow: hidden;
}

@screen xs {
  .static-map .static-map__header {
    @apply mt-0;
  }
}

@screen md {
  .static-map .static-map__header {
    @apply absolute;
  }
}

.static-map .static-map__header .map {
  @apply max-w-xl ml-auto;
}

/** Content **/
.static-map .static-map__content {
  @apply px-6 w-full -mt-4;
  height: fit-content;
  max-width: 400px;
  opacity: 0;
}

@screen xs {
  .static-map .static-map__content {
    @apply px-8;
  }
}

/** We only show the "content" after the <Map> has entered **/
.static-map .static-map__content-enter {
  opacity: 1;
}

@screen md {
  .static-map .static-map__content {
    @apply absolute;
    top: 50%;
    transform: translateY(-50%);
  }
}

.static-map__content-title-line {
  @apply mb-3 text-3xl; 
  opacity: 0;
}

@screen xs {
  .static-map__content-title-line {
    @apply mb-4;
  }
}

.static-map__content-title-line,
.static-map__content-subtitle {
  @apply truncate;
}

.static-map__content-subtitle {
  @apply my-3 font-normal text-grey-darker;
  opacity: 0;
}

.static-map-exit .static-map__content-subtitle {
  @apply standard-animation;
  animation-name: hide;
  opacity: 1;
}

.static-map-enter-done .static-map__content-subtitle {
  @apply standard-animation;
  animation-name: reveal;
  animation-delay: 600ms;
}

.static-map-enter-done .static-map__content-title-line-1 {
  @apply standard-animation--slow;
  animation-name: reveal, move-down;
  animation-delay: 100ms;
}

.static-map-enter-done .static-map__content-title-line-2 {
  @apply standard-animation--slow;
  animation-name: reveal, move-up;
  animation-delay: 250ms;
}

.static-map-exit-active .static-map__content-title-line,
.static-map-exit .static-map__content-title-line {
  opacity: 1;
}

.static-map-exit .static-map__content-title-line-1 {
  transform: translateY(25%);
}

.static-map-exit-active .static-map__content-title-line-1 {
  @apply standard-animation;
  animation-name: reveal, move-down;
  animation-delay: 150ms;
  animation-direction: reverse;
}

.static-map-exit-active .static-map__content-title-line-2 {
  @apply standard-animation;
  animation-name: reveal, move-up;
  animation-direction: reverse;
}

.static-map__inner-content {
  @apply mt-3 mb-5 font-normal text-grey-darker;
}

.static-map__bottom-content {
  @apply hidden;
}

@screen xs {
  .static-map__bottom-content {
    display: initial;
  }
}

/** iPhone 8 Plus **/
@media only screen 
    and (device-width : 414px) 
    and (device-height : 736px) 
    and (-webkit-device-pixel-ratio : 3) {
      .static-map__bottom-content {
        display: none !important;
      }
    }

/** iPhone 8 **/
@media only screen 
    and (device-width : 375px) 
    and (device-height : 667px) 
    and (-webkit-device-pixel-ratio : 2) {
      .static-map__bottom-content {
        display: none !important;
      }
    }

.static-map__inner-content,
.static-map__bottom-content {
  opacity: 0;
}

.static-map-exit .static-map__inner-content,
.static-map-exit .static-map__bottom-content {
  @apply standard-animation;
  animation-name: hide;
  opacity: 1;
}

.static-map-enter-done .static-map__inner-content,
.static-map-enter-done .static-map__bottom-content {
  @apply standard-animation;
  animation-name: reveal;
  animation-delay: 600ms;
}

.static-map__bottom-content .btn {
  @apply w-full;
}

.static-map .static-map__btn-group .btn {
  @apply w-full shadow-md py-4;
}

@screen xs {
  .static-map .static-map__btn-group .btn {
    @apply py-5;
  }
}

.static-map .static-map__btn-group .btn:first-child {
  @apply mb-1;
}

@screen xs {
  .static-map .static-map__btn-group .btn:first-child {
    @apply my-3;
  }
}

@screen md {
  .static-map .static-map__btn-group .btn:first-child {
    @apply my-6;
  }
}

.static-map .static-map__btn-group .btn:nth-child(2) {
  @apply hidden;
}

@screen xs {
  .static-map .static-map__btn-group .btn:nth-child(2) {
    display: initial;
  }
}

.static-map-enter .static-map__btn-group .btn {
  @apply standard-animation;
  animation-name: expand-larger;
}

.static-map-exit .static-map__btn-group .btn {
  @apply standard-animation;
  animation-name: shrink, hide;
}