@use "system/breakpoints";
@use "system/typography";
@use "system/colors";
@use "system/spacing";
@use "./maplibre";

.ods-map {
  &--static {
    height: 380px;

    img {
      object-fit: cover;
      width: 100%;
    }
  }

  &__container {
    width: 100%;
  }

  &__popup-content {
    @extend %ods-text--size-kilo;
    @extend %ods-padding-horizontal-4, %ods-padding-bottom-4, %ods-padding-top-2, %ods-padding-top-3-breakpoint-large;
  }

  &__heading {
    @extend %ods-text--size-india-breakpoint-medium, %ods-text--size-hotel-breakpoint-large;
    @extend %ods-text--weight-medium;

    &:not(:last-child) {
      @extend %ods-padding-vertical-2, %ods-padding-vertical-3-breakpoint-large;

      hyphens: auto;
      overflow-wrap: break-word;
    }
  }

  &__label {
    @extend %ods-text--weight-medium;
  }
}

// Override styles
.maplibregl-popup-content {
  padding: 1.5rem 0 0;
  max-width: 15rem;
  min-width: 13rem;

  @include breakpoints.large {
    padding: 1.75rem 0 0;
  }
}

.maplibregl-popup-close-button {
  @extend %ods-margin-top-4, %ods-margin-right-4;
  @extend %ods-text--size-india, %ods-text--size-hotel-breakpoint-large;

  border-radius: 0;
  line-height: 1.525rem;
}