.leaflet-container {
  font-family: inherit;
}
.leaflet-popup-content {
  margin: 0;
  color: var(--#{$prefix}body-color);
  p {
    margin: 0 0 $paragraph-margin-bottom;
  }
}

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

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  background-color: var(--#{$prefix}body-bg);
}

.leaflet-popup {

  a.leaflet-popup-close-button { // stylelint-disable-line selector-no-qualifying-type
    z-index: 2;
    color: var(--#{$prefix}primary);
  }

  .btn {
    color: var(--#{$prefix}btn-color);
  }

  .card {
    width: 300px;
  }

  .card--top {
    margin: -1rem -1rem 0;
  }

  .card--bottom {
    margin: 0 -1rem -1rem;
  }

  .card--bg {
    width: calc(300px + 1rem);
    margin: -1rem;
  }

  @include media-breakpoint-up(md) {
    .card--start {
      margin: -1rem 0 -1rem -1rem;
    }
    .card--end {
      margin: -1rem -1rem -1rem 0;
    }
    .card--start,
    .card--end {
      width: 480px;
    }
  }

  @include media-breakpoint-up(lg) {
    .card--start,
    .card--end {
      width: 580px;
    }
  }
}