.map__gmaps {
  height: $gmaps-height;
  width: 100%;
  // viewport l
  @include viewport--l {
    height: $gmaps-height--l;
  }
}

.gmaps {
  &__control-container {
    bottom: $spacing--s;
    position: absolute;
    right: 20px;
    z-index: 1;
  }

  &__button--zoom {
    background-color: $color-brand--white;
    border: 1px solid $color--grey;
    cursor: pointer;
    line-height: $baseline * 5.2;
    position: relative;

    &,
    &::after {
      @include color-dark-shade-main;
      height: $baseline * 5.1;
      text-align: center;
      transition: all $transition-duration--fast;
      width: 50px;
    }

    &::after {
      font-size: 32px;
      left: -1px;
      line-height: $baseline * 4.7;
      position: absolute;
      right: 0;
    }
    // viewport l
    @include viewport--l {
      &:hover::after,
      &:active::after {
        color: $color-brand--two;
      }
    }
  }

  &__button--zoom-in {
    border-radius: $border-radius $border-radius 0 0;

    &::after {
      content: '+';
    }
  }

  &__button--zoom-out {
    border-radius: 0 0 $border-radius $border-radius;
    border-top: none;

    &::after {
      background-color: $gmaps-button-zoom-out-background-color;
      content: '';
      display: block;
      height: $baseline * 0.2;
      left: 17px;
      position: relative;
      top: $baseline * 2.5;
      width: 14px;
    }
    // viewport l
    @include viewport--l {
      &:hover::after {
        background-color: $color-brand--two;
      }
    }
  }
}

// pop up bubble with info
.popup-bubble {
  @include font-style('body--m');
  background: $color-brand--white;
  border: 1px solid $color--grey;
  border-radius: $border-radius;
  left: 0;
  opacity: 0;
  padding: $spacing--s 20px;
  position: absolute;
  top: $baseline * -4.5;
  transform: translate(-50%, -100%);
  transition: opacity $transition-duration--slow, visibility $transition-duration--slow;
  visibility: hidden;
  width: $gmaps-bubble-width;

  &::before,
  &::after {
    background: $color-brand--white;
    content: '';
    left: 50%;
    position: absolute;
  }

  &::before {
    border-bottom: 1px solid $color--grey;
    border-radius: $border-radius;
    border-right: 1px solid $color--grey;
    height: $baseline * 2;
    margin-left: -10px;
    margin-top: -12px;
    top: 100%;
    transform: rotate(45deg);
    width: 20px;
  }

  &::after {
    bottom: 0;
    height: $baseline;
    margin-left: -15px;
    width: 30px;
  }

  &.active {
    opacity: 1;
    visibility: visible;
  }

  &__container {
    cursor: auto;
    height: 0;
    position: absolute;
  }

  &__title {
    @include font-style('body--l');
  }

  &__address {
    margin-top: $spacing--xs;
  }

  a {
    display: block;
  }

  &__details-link {
    margin-top: $spacing--s;
  }
}