@import "../../../sass/webpack_deps";
@import "./vars";
@import "./sidebar/sidebar";
@import "./sidebar/item";
@import "./mapbox/pins";
@import "./alert";

.noscroll {
  overflow: hidden;
  overflow-y: hidden;
}

#pinTemplate {
  display: none;

  .leaflet-popup-pane & {
    display: block;
  }
}

// Needs an :after fix
.map_holder {
  background-color: rgba($color-black, .8);
  bottom: 0;
  height: 100vh;
  left: 0;
  opacity: 0;
  position: fixed;
  right: 0;
  top: 0;
  transition: 500ms ease-in-out;
  width: 100vw;
  z-index: z("default") - 2;

  &.open {
    opacity: 1;
    z-index: z("map-holder-open");
  }
}

.map {
  display: block;
  height: 100%;
  transform: translate(100%);
  transition: transform $animation-speed ease-in-out;
  width: 100%;

  &.open {
    transform: translate(0);
  }

  .flexbox & {
    display: flex;
    flex-direction: row;
  }
}

.map-container {
  background-color: darken($color-white, 4);
  height: 100%;
  width: $map-container-width;

  .leaflet-popup-tip-container {
    display: none;
  }

  .leaflet-popup-content {
    padding: 0;
    width: $item-width-pin !important;
  }

  .leaflet-popup-content-wrapper {
    border-radius: 0;
    padding: 0;
  }
}

.close-map {
  background-color: $color-white;
  border: 0;
  border-radius: 50%;
  box-shadow: 0 1.2rem 2.5rem rgba($color-black, .75);
  cursor: pointer;
  float: left;
  font-size: 2.6rem;
  height: $close-button;
  line-height: $close-button;
  margin-left: .5rem;
  margin-right: .5rem;
  margin-top: $close-margin;
  overflow: hidden;
  text-align: center;
  text-indent: 100%; // Move 'Close' text out of sight but keep for screen readers
  white-space: nowrap;
  width: $close-button;
  z-index: z("modal") + 1;

  &::before {
    display: block;
    text-indent: 0;
  }
}