body[data-theme=dark] #map-tools {
  --hover-effect: 1.3;
}

body[data-theme=light] #map-tools {
  --hover-effect: 0.75;
}

#map-tools {
  position: absolute;
  bottom: var(--space-200);
  right: var(--space-200);
  z-index: 1;
  display: grid;
  grid-template-areas: " .   .   recenter" " .   .   floor" " .   .   floor" " .   .   map";
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: repeat(3, 30px);
  row-gap: var(--space-0);
}
#map-tools .map-tool {
  overflow: hidden;
  border-radius: var(--radius-m);
  transition: filter 250ms;
  filter: brightness(1);
}
#map-tools .map-tool:hover {
  filter: brightness(var(--hover-effect));
}
#map-tools .recenter {
  display: grid;
  place-items: center;
  grid-area: recenter;
}
#map-tools .floor-selectors {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  grid-area: floor;
}
#map-tools .map-selector {
  display: grid;
  place-items: center;
  grid-area: map;
}
#map-tools .map-tool > x-icon {
  cursor: pointer;
  padding: 5px;
  background-color: var(--color-child-background);
  transition: opacity 250ms;
}
#map-tools .map-tool > x-icon.disabled {
  opacity: var(--opacity-subtlest);
  pointer-events: none;
}
#map-tools .map-tool > x-icon.disabled:hover {
  opacity: var(--opacity-subtlest);
}