.editableMap,
.map {
  width: 100%;
  height: 100%;
  font-family: inherit !important;
  border-radius: var(--ds-radius-100, 6px);
}

.editableMap {
  position: relative;
  display: flex;
}

button.resetCenter {
  --ds-button-background: var(--ds-grey-000, #fff);
  --ds-button-shadow: var(--ds-shadow-200, 0 5px 10px rgba(0, 0, 0, 0.12));

  position: absolute;
  top: 46px;
  right: 260px;
}

button.inDialog.alignedToRight {
  top: 84px;
}

button.alignedToRight {
  top: 46px;
  right: 6px;
}

button.marker {
  position: relative;
  z-index: 1000;
}

.map {
  flex: 1 1 100%;
  z-index: 0;
}

.map :global(.leaflet-top),
.map :global(.leaflet-bottom) {
  position: static;
}

.map :global(.leaflet-control-attribution) {
  position: absolute;
  left: 50%;
  bottom: 4px;
  white-space: nowrap;
  border-radius: var(--ds-radius-100, 6px);
  transform: translateX(-50%);
}

.map :global(.leaflet-pm-toolbar) {
  display: flex;
  flex-direction: column;
}

:global(:is(.cms--connected, .cms--info)) .container:empty::after {
  content: "Activez le mode édition pour modifier la carte, déconnectez-vous pour la consulter.";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: hsl(var(--grey-600));
  font-size: 17px;
  letter-spacing: 1px;
  text-align: center;
  transform: translate(-50%, -50%);
}

.map :global(.leaflet-popup-tip-container),
.map :global(.leaflet-tooltip::before) {
  content: none;
  display: none;
}

.map :global(.leaflet-popup-content-wrapper),
.map :global(.leaflet-popup-tip) {
  position: relative;
  color: var(--ds-grey-700, #262626);
  background: var(--ds-grey-000, #fff);
  box-shadow: var(--ds-shadow-100, 0px 3px 6px rgba(0, 0, 0, 0.12));
}

:global(.cms--editing) .map :global(.leaflet-popup-content) {
  width: auto !important;
}

.map:global(.leaflet-container) :global(a.leaflet-popup-close-button) {
  top: 5px;
  right: 5px;
  color: var(--ds-grey-700, #262626);
  font-size: 22px;
}

.map :global(.leaflet-tile-pane > :first-child) {
  filter: var(
    --editable-map-filter,
    saturate(0.05) hue-rotate(100deg) contrast(1.2)
  );
}

.map :global(.marker-cluster) {
  color: var(--ds-grey-000, #fff);
  background-color: transparent;
}

.map :global(.marker-cluster::before) {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  background-color: var(--ds-grey-000, #fff);
  border-radius: 50%;
  opacity: 0.85;
  pointer-events: none;
  filter: drop-shadow(var(--ds-shadow-100, 0px 3px 6px rgba(0, 0, 0, 0.12)));
  transition: transform 160ms
    var(--ds-transition-easing, cubic-bezier(0.4, 0.1, 0.2, 0.9));
}

.map :global(.marker-cluster:hover::before) {
  transform: scale(1.08);
}

.map :global(.marker-cluster > div) {
  position: relative;
  font-weight: 700;
  font-size: 16px;
  background-color: var(--ds-secondary, var(--ds-blue-400, #4177f6));
  transition: transform 160ms
    var(--ds-transition-easing, cubic-bezier(0.4, 0.1, 0.2, 0.9));
}

.map :global(.marker-cluster:hover > div) {
  transform: scale(1.1);
}

.map :global(.leaflet-tooltip) {
  padding: 10px 16px;
  color: var(--ds-black, #262626);
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  text-shadow:
    -1px 0px 1px white,
    0px -1px 1px white,
    1px 0px 1px white,
    0px 1px 1px white;
  background-color: transparent;
  box-shadow: none;
  border: 0;
  animation: leaflet-tooltip-appearance 320ms
    var(--ds-transition-easing, cubic-bezier(0.4, 0.1, 0.2, 0.9));
}

@keyframes leaflet-tooltip-appearance {
  0% {
    opacity: 0;
  }
}

@media (max-width: 992px) {
  .map :global(.leaflet-tooltip) {
    display: none !important;
  }
}

.map:global(.leaflet-touch .leaflet-control-layers),
.map:global(.leaflet-touch .leaflet-bar) {
  border: 0;
}

.map:global(.leaflet-touch .leaflet-control-layers a),
.map:global(.leaflet-touch .leaflet-bar a:not(.leaflet-pm-action)) {
  width: 33px;
  height: 33px;
  box-shadow: var(--ds-shadow-100, 0px 3px 6px rgba(0, 0, 0, 0.12));
  transition: background-color 160ms
    var(--ds-transition-easing, cubic-bezier(0.4, 0.1, 0.2, 0.9));
}

.map:global(.leaflet-touch .leaflet-control-layers a[aria-disabled="true"]),
.map:global(.leaflet-touch .leaflet-bar a[aria-disabled="true"]) {
  cursor: not-allowed;
}

.map:global(
  .leaflet-touch .leaflet-control-layers a:not(.leaflet-pm-action):hover
),
.map:global(.leaflet-touch .leaflet-bar a:not(.leaflet-pm-action):hover) {
  background-color: var(--ds-grey-100, #f8f8f8);
}

.map:global(.leaflet-touch .leaflet-control-zoom a:first-child),
.map :global(.button-container:first-child a:first-child) {
  border-top-left-radius: var(--ds-radius-200, 10px);
  border-top-right-radius: var(--ds-radius-200, 10px);
}

.map:global(.leaflet-touch .leaflet-control-layers a:last-child),
.map:global(.leaflet-touch .leaflet-bar a:last-child),
.map :global(.button-container:last-child a:first-child) {
  border-bottom-left-radius: var(--ds-radius-200, 10px);
  border-bottom-right-radius: var(--ds-radius-200, 10px);
}

.map:global(.leaflet-touch .leaflet-control-layers a span),
.map:global(.leaflet-touch .leaflet-bar a span) {
  font-size: 18px;
}

.map :global(.leaflet-popup-close-button) {
  display: none;
}

.map :global(.leaflet-popup-content) {
  min-width: 150px;
  margin: 0;
}

:global(body.cms--editing) .map :global(.leaflet-popup-content) {
  margin: 13px 24px 13px 20px;
}

.map :global(.leaflet-popup-content-wrapper) {
  padding: 0;
}

:global(.cms--editing) .map :global(.leaflet-popup-content-wrapper) {
  padding: 1px;
}

.map :global(.em-custom-text),
.map :global(.pm-textarea) {
  width: max-content;
  max-width: 200px;
  padding: 6px;
  color: var(--ds-grey-700, #262626);
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  text-align: center;
  text-shadow:
    -1px 0px 1px white,
    0px -1px 1px white,
    1px 0px 1px white,
    0px 1px 1px white;
  transform: translate(-50%, -50%);
}
