@use "sass:map";


#map-canvas {
  height: 100%;
  width: 100%;
  position: absolute;

  @media screen and (max-width: map.get($container-max-widths, "sm")) {
    position: relative;
    height: 100vw;
  }
}


.maps-wrapper {
  padding-top: ($line-height-base * 2rem);
  padding-bottom: ($line-height-base * 2rem);
  pointer-events: none;

  @media screen and (max-width: map.get($container-max-widths, "sm")) {
    padding-top: ($line-height-base * 1rem);
    padding-bottom: ($line-height-base * 1rem);
  }
}


.maps-panel {
  pointer-events: all;
}


// Kliniksuche

.maps-panel--klinikfinder {
  background-color: #fff;
  position: relative;
  padding: $grid-gutter-width;
}


ul.clinic-list {
  padding-left: 0;
  list-style: none;

  li {
    display: inline-block;
    background: $gray-200;
    border-radius: $border-radius-sm;
    padding: 0.25em 0.5em;
    margin-bottom: 0.25em;
    margin-right: 0.25em;
  }

  li.clinic {
    .clinic > * {
      display: none;
    }

    .clinic > .filtertext {
      display: inherit;
    }

    background: #fff;
    border: 1px solid $gray-200;
    cursor: pointer;

    &:hover,
    &.active {
      border-color: $primary;
      color: $primary;
    }
  }
}


//Removes double location marker
.filtertext {
  display: none;
}


// Google Maps Style Overwrites
.gm-style {
  font-family: $font-family-sans-serif;
}


.cliniclocator-filter {
  .feature-filter {
    display: inline-block;
    margin-bottom: 0.75rem;

    .btn-filter {
      input {
        position: absolute;
        clip: rect(0, 0, 0, 0);
        pointer-events: none;
      }
    }
  }
}


.clinic {
  font-size: small;

  .title {
    font-weight: $font-weight-bold;
  }

  max-width: 300px;
  line-height: 1.4;

  .ort,
  .plz,
  .features {
    display: none;
  }

  .klinik1,
  .klinik2 {
    color: $primary;
    font-weight: $font-weight-bold;
  }

  .abteilung1,
  .abteilung2 {
    color: $gray-600;
  }

  .arzt,
  .adresse,
  .telefon {
    border-top: 1px solid $gray-200;
    padding-top: 4px;
    margin-top: 4px;
  }

  .telefon,
  .telefax,
  .email,
  .arzt,
  .web,
  .adresse {
    white-space: nowrap;
  }

  .arzt {
    @include icon('icon', $icons, 'user-md');
  }

  .adresse {
    @include icon('icon', $icons, 'hospital');
  }

  .telefon {
    @include icon('icon', $icons, 'phone');
  }

  .telefax {
    @include icon('icon', $icons, 'print');
  }

  .email {
    @include icon('icon', $icons, 'mail');
  }

  .web {
    @include icon('icon', $icons, 'link-ext');
  }
}
