@import "../../scss/utilities/index";

div {
  .leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-polygon {
    background-image: url('/assets/images/map-polygon-icon.svg');
    background-position: center center;
  }

  .leaflet-touch .leaflet-draw-toolbar .leaflet-draw-edit-edit {
    background-image: url('/assets/images/map-edit-icon.svg');
    background-position: center center;
  }

  .leaflet-touch .leaflet-draw-toolbar .leaflet-draw-edit-remove {
    background-image: url('/assets/images/map-delete-icon.svg');
    background-position: center center;
  }

  .leaflet-touch .leaflet-draw-toolbar .leaflet-draw-draw-marker {
    background-image: url('/assets/images/map-marker-icon.svg');
    background-position: center center;
  }

  .leaflet-touch .leaflet-control-zoom.leaflet-bar .leaflet-control-zoom-fullscreen {
    background-image: url('/assets/images/map-fullscreen-icon.svg');
    background-position: center center;
    background-size: 16px;

    &.leaflet-fullscreen-on {
      background-image: url('/assets/images/map-fullscreen-exit-icon.svg');
    }
  }

  .leaflet-control-zoom.leaflet-bar.leaflet-control {
    display: flex;
    flex-direction: column;

    .leaflet-control-zoom-fullscreen {
      order: -1;
    }
  }

  .leaflet-touch .leaflet-control-layers,
  .leaflet-touch .leaflet-bar {
    border: 0;
  }

  .leaflet-touch .leaflet-bar a {
    border: 0;
    width: 40px;
    height: 40px;
    color: var(--color-brand-dark);
    line-height: 40px;

    &.leaflet-control-zoom-in {
      line-height: 38px;
    }

    &.leaflet-control-zoom-in,
    &.leaflet-control-zoom-out {
      @include fontSize(28px);

      font-weight: $font-weight-thin;
    }
  }

  .leaflet-draw-toolbar a {
    background-size: unset;
  }

  .leaflet-touch .leaflet-bar {
    &.leaflet-draw-toolbar,
    &.leaflet-control-zoom {
      a {
        border-radius: 8px;
        margin-top: 10px;
      }
    }
  }

  .leaflet-top {
    bottom: 0;
    top: unset;
  }

  .leaflet-top .leaflet-control {
    margin-top: 0;
    margin-bottom: 1.2rem;
    margin-left: 1.2rem;
  }

  .leaflet-bottom .leaflet-right {
    .leaflet-control-attribution .leaflet-control {
      display: none;
    }
  }

  .leaflet-bar a.leaflet-disabled {
    background-color: var(--color-gray-300);
  }

  .leaflet-draw-actions a {
    background-color: var(--color-brand-dark);
    border-left-color: var(--color-white);

    &:hover {
      background-color: rgba(var(--color-brand-dark-rgb), 0.88);
    }
  }

  .leaflet-tooltip {
    z-index: 999;
  }
}

.pac-container {
  &.pac-logo {
    box-shadow: $box-shadow-default;
    border-bottom-right-radius: $border-radius-base;
    border-bottom-left-radius: $border-radius-base;

    .pac-item {
      border-color: var(--color-gray-50);
      padding: calc-rem(6px) calc-rem(12px);

      .pac-icon.pac-icon-marker {
        display: none;
      }

      .pac-item-query .pac-matched {
        color: var(--color-brand-light);
      }
    }

    &:after {
      background-image: none !important;
      height: 0;
    }
  }
}

/**
* Custom map markers
*/

.marker {
  position: relative;
  display: flex;
  justify-content: center;
}

.rounded-rectangle {
  @include fontSize(12px);

  position: relative;
  box-shadow: $box-shadow-default;
  border-radius: 20px;
  display: flex;
  width: 100%;
  min-width: calc-rem(96px);
  height: calc-rem(36px);
  padding-left: calc-rem(6px);
  align-items: center;
  justify-content: center;
  background-color: #fff;
  color: var(--color-brand-dark);
  font-weight: $font-weight-semibold;
  line-height: 1.5;
  text-align: center;
  z-index: 99;
}

.straight-line {
  position: absolute;
  border-radius: 2px;
  top: calc-rem(30px);
  left: 50%;
  width: calc-rem(3px);
  height: calc-rem(48px);
  background-color: var(--color-brand-dark);
  transform: translateX(-50%);
  z-index: 1;
}

.map-circle-point {
  position: absolute;
  width: calc-rem(16px);
  height: calc-rem(16px);
  background-color: var(--color-brand-light);
  border-radius: 50%;
  top: calc-rem(70px);
  left: 50%;
  transform: translateX(-50%);
}

.inner-circle {
  width: calc-rem(8px);
  height: calc-rem(8px);
  background-color: var(--color-white);
  border-radius: 50%;
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translateX(-50%);
}

.custom-point {
  .map-circle-point {
    width: 100%;
    height: 100%;
    position: relative;
    top: unset;
    left: unset;
    transform: unset;
  }

  .inner-circle {
    width: 50%;
    height: 50%;
  }
}