.l-map {
  height: 100%;
  position: relative;

  .l-map-x-map {
    // This isnt needed in PL, but it is in angular w/ the extra app-map tag.
    height: 100%;
  }

  @media (min-width: $media-desktop) {
    display: flex;
  }

  // In angular this is app-map tag.
  // in PL its l-map-x-map
  > :nth-child(2) {
    flex-grow: 1;
  }

  .l-map-x-overlay {
    color: #fff;
    display: flex;
    align-items: center;
    // justify-content: center;
    font-size: 40px;
    position: absolute;
    background: rgba(0,0,0, .7);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99999;
  }

  .l-map-x-overlaytext {
    padding-left: $gridspacing * 5;
  }

  .l-map-x-overlay-text-top {
    @include textstyle-title2;
    display: flex;
    align-items: center;
    font-family: $font-family-serif;

    img {
      height: 4rem;
      margin-right: $gridspacing * 2;
      width: 4rem;
    }
  }

  .l-map-x-overlay-text-bottom {
    @include textstyle-bodylarge;
  }

  .l-map-x-legend {
    align-items: center;
    background: white;
    border-radius: 8px;
    bottom: 0;
    color: #fff;
    display: flex;
    margin-bottom: $gridspacing * 2;
    margin-left: $gridspacing * 2;
    position: absolute;
    z-index: 999;

    input[type="checkbox"] {
      appearance: checkbox;
      -webkit-appearance: checkbox;
      margin-right: $gridspacing;
    }
  }

  .l-map-x-legendtext {
    align-items: center;
    color: $color-dark5;
    display: flex;
    font-size: 1rem;
    font-weight: bold;
    justify-content: space-around;
    padding: 16px;

    & + .l-map-x-legendtext {
      border-left: 1px solid $color-light3;
    }
  }

  .l-map-x-legend-icon {
    fill: $color-dark5;
    width: 19px;
    height: 19px;
    margin-right: $gridspacing;
    position: relative;
    top: 2px;
  }

  .l-map-x-clearlocationfilter {
    bottom: $gridspacing;
    left: auto;
    position: absolute;
    right: 0;
    transform: translateX(calc(100% + 1rem));
    z-index: 999;
  }
}