.editableMap {
  --eem-surface: var(--ds-grey-000, #fff);
  --eem-hover: var(--ds-grey-100, #f5f7fa);
  --eem-border: var(--ds-grey-200, #e4e7eb);
  --eem-muted: var(--ds-grey-500, #7b8794);
  --eem-marker: var(--ds-primary, #1f2933);
  --eem-cluster: var(--ds-secondary, #4177f6);

  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 400px;
  overflow: hidden;
  border-radius: var(--ds-radius-100, 6px);
}

.editableMap:empty::after {
  content: "Activez le mode édition pour modifier la carte, déconnectez-vous pour la consulter.";
  padding: 20px;
  margin: auto;
  font-size: 14px;
  text-align: center;
  color: var(--eem-muted);
}

.fullScreen {
  border-radius: 0;
}

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

/* Leaflet overrides */

.editableMap :global(.leaflet-tile-pane) {
  filter: var(--eem-tiles-filter, none);
}

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

.editableMap :global(.leaflet-control-attribution) {
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 10px;
  background: rgb(255 255 255 / 70%);
}

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

.editableMap :global(.leaflet-touch .leaflet-bar),
.editableMap :global(.leaflet-touch .leaflet-control-layers) {
  border-radius: var(--ds-radius-100, 6px);
  box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
}

.editableMap :global(.leaflet-popup-content-wrapper) {
  padding: 0;
  overflow: hidden;
  border-radius: 12px;
}

.editableMap :global(.leaflet-popup-content) {
  width: auto !important;
  margin: 0;
}

.editableMap :global(.leaflet-popup-tip) {
  box-shadow: 0 3px 14px rgb(0 0 0 / 20%);
}

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

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

.editableMap :global(.leaflet-tooltip) {
  padding: 2px 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--eem-marker);
  background: rgb(255 255 255 / 85%);
  border: 0;
  border-radius: var(--ds-radius-100, 6px);
  box-shadow: none;
  animation: tooltip-appearance 0.2s ease-out both;
}

.editableMap :global(.marker-cluster > div) {
  color: #fff;
  background: var(--eem-cluster);
  transition: transform 0.15s ease-out;
}

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

@keyframes tooltip-appearance {
  from {
    opacity: 0;
    transform: translateX(-4px);
  }
}

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

/* Markers & shapes */

.markerIcon > svg {
  fill: var(--eem-marker);
  filter: drop-shadow(0 1px 1px rgb(0 0 0 / 40%));
  transition: transform 0.15s ease-out;
  transform-origin: 50% 100%;
}

.markerIcon:hover > svg {
  transform: scale(1.15);
}

.shapeTextInner {
  width: max-content;
  max-width: 200px;
  padding: 6px;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  text-shadow:
    -1px 0 1px white,
    0 -1px 1px white,
    1px 0 1px white,
    0 1px 1px white;
  transform: translate(-50%, -50%);
}

/* Popup */

.popup {
  display: flex;
  flex-direction: column;
  max-width: 280px;
  max-height: 280px;
  overflow: auto;
}

.popupImage {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.popupInner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 13px 24px 13px 20px;
}

.popupTitle {
  font-size: 16px;
  font-weight: 700;
}

.popupDescription {
  margin: 0;
  font-size: 14px;
  white-space: pre-line;
}

.popupLink {
  align-self: flex-start;
}

/* Marker form */

.form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 340px;
}

.formRow {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.formDescription textarea {
  height: 80px;
  resize: none !important;
}

.formButtons {
  display: flex;
  justify-content: flex-end;
}

/* Initial marker form */

.initialForm {
  position: absolute;
  top: 10px;
  left: 54px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 220px;
  padding: 12px;
  background: var(--eem-surface);
  border: 1px solid var(--eem-border);
  border-radius: var(--ds-radius-100, 6px);
  box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
}

.initialFormTitle {
  font-size: 14px;
  font-weight: 700;
}

.initialFormButton {
  align-self: flex-end;
}

/* Color picker */

.colorButton {
  position: absolute;
  top: 10px;
  right: 260px;
  z-index: 1000;
}

.colorButtonAlignedToRight {
  right: 10px;
}

.colorPopover {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 140px;
}

.colorTitle {
  font-size: 12px;
  font-weight: 700;
  color: var(--eem-muted);
}

.colorChoice {
  display: flex;
  gap: 1ch;
  align-items: center;
  padding: 4px 6px;
  font-size: 14px;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: var(--ds-radius-100, 6px);
}

.colorChoice:hover,
.colorChoice[data-checked="true"] {
  background: var(--eem-hover);
}

.colorTag {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--eem-tag-color);
}

/* Full screen & reset center buttons */

.fullScreenButton,
.resetCenter {
  --ds-button-background: var(--eem-surface);

  position: absolute;
  right: 6px;
  z-index: 1000;
}

.fullScreenButton {
  top: 10px;
}

.fullScreenButtonInDialog {
  top: 46px;
}

.fullScreenButtonOpened {
  right: 260px;
}

.resetCenter {
  top: 46px;
  right: 260px;
}

.resetCenterInDialog {
  top: 82px;
}

.resetCenterAlignedToRight {
  right: 6px;
}

/* Marker list */

.list {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  height: 100%;
}

.listInner {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 250px;
  padding: 8px;
  overflow-y: auto;
  background: var(--eem-surface);
  border-left: 1px solid var(--eem-border);
  animation: list-appearance 0.2s ease-out both;
}

.listItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.listButton {
  display: flex;
  flex: 1 1 auto;
  gap: 1ch;
  align-items: center;
  padding: 4px 6px;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 10px;
}

.listButton:hover {
  background: var(--eem-hover);
}

.listButtonImportant {
  font-weight: 700;
}

.listIcon {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  fill: var(--eem-marker);
}

.groupTitle {
  padding: 8px 6px 2px;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--eem-muted);
}

.movements {
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: opacity 0.15s ease-out;
}

.listItem:hover .movements {
  opacity: 1;
}

.moveIcon {
  width: 12px;
  height: 12px;
}

.listToggle {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: flex;
  padding: 6px;
  cursor: pointer;
  background: var(--eem-surface);
  border: 1px solid var(--eem-border);
  border-radius: var(--ds-radius-100, 6px);
}

@keyframes list-appearance {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
}
