@use '../styles/design-system.scss' as *;
@import "./utils.scss";


.j40Map {
  // width < 1024
  @include at-media-max("desktop") {
    height: 55vh;
  }

  .mapHeaderRow{
    @include u-display("flex");
    @include u-padding-left(1.5);

    @include at-media-max("mobile-lg") {
      flex-direction: column;

      @include u-padding-right(1.5);

      .geolocateBox {
        align-self: flex-end;
      }

      .geolocateBox > div {
        right: 13px;
      }
    }


    .geolocateBox {
      margin-top: 6px;
      @include u-margin-left(1);

      .geolocateMessage {
        visibility: visible;
        background-color: white;
        margin-bottom: 3px;
      }
      
      .geolocateMessageHide {
        visibility: hidden;
        min-width: fit-content;
        margin-bottom: 3px;
      }


    }
  }

  .navigationControl {
    left: .75em;
    top: units(15);
  }
  
  //These classes are behind feature flags:
  .fullscreenControl {
    right: 1.25em;
    top: 2.5em;
  }
  .j40Popup {
    width: 375px;
  }

}

.mapInfoPanel {
  border: 1px solid $sidePanelBorderColor;
  overflow-y: auto;
  height: 90vh;

  @include at-media-max("mobile-lg") {
    height: 100%;
  }
}

// This will control the height of the map when the device 
// width is less than desktop (1024px)
.j40Map {
  @include at-media-max("desktop") {
    height: 55vh;
  }
}