$padding: 10px;

.elder-map-control-placeholder {
  position: absolute;
  z-index: 50;
}

.top-left {
  top: $padding;
  left: $padding;
}

.top {
  left: 50%;
  transform: translateX(-50%);
  top: $padding;
}

.top-right {
  top: $padding;
  right: $padding;
}

.right {
  top: 50%;
  transform: translateY(-50%);
  right: $padding;
}

.bottom-right {
  bottom: $padding;
  right: $padding;
}

.bottom {
  left: 50%;
  transform: translateX(-50%);
  bottom: $padding;
}

.bottom-left {
  bottom: $padding;
  left: $padding;
}

.left {
  top: 50%;
  transform: translateY(-50%);
  left: $padding;
}