.map-box {
  @include breakpoint(medium) {
    height: 100%;
  }
  @include breakpoint(small only) {
    padding-top: rem-calc(20);
  }
  @extend .cell;
  &__loading-container {
    height: 100%;
  }
  &__container {
    height: 400px;
    @include breakpoint(medium) {
      min-height: 100%;
    }

  }
  &__searchbox {
    z-index: 0;
    position: absolute;
    left: 10px;
    top: 4px;
    padding: 5px;
    right: 22px;
    width: auto;
  }
}

.location-search-input {
  position: relative;
  &__suggestions-container {
    background-color: $white;
    position: absolute;
    z-index: 100;
    top: calc(100% - 2px);
    right: 0;
    left: 0;
    max-height: 0;
    transition: max-height 800ms linear;
    overflow: hidden;
    &--opened {
      max-height: 400px;
      overflow: auto;
    }
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
  }
  &__suggestion {
    cursor: pointer;
    position: relative;
    &--active {
      background-color: $select-option-bg-color;
    }
    &:hover {
      background-color: $light-gray;
      font-weight: bold;
    }
  }
  &__suggestion-wrapper {
    min-height: 36px;
  }
  &__suggestion-icon {
    @include box(12px, 17px, false);
    margin-right: 30px;
    margin-left: 22px;
  }
  &__suggestion-text {
    height: 100%;
  }
  &__suggestion-border-bottom {
    position: absolute;
    bottom: -1px;
    height: 1px;
    background-color: $light-gray;
    right: 0;
    left: 60px;
  }
}