.map {
  aspect-ratio: 16 / 9;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.map__error {
  padding: 24px;
}

.map .ol-viewport,
.map .ol-unselectable {
  user-select: none;
}

.map .ol-rotate,
.map .ol-attribution {
  display: none;
}

.map .ol-zoom {
  top: 10px;
  left: 10px;
}

.map .ol-zoom::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-black-08, #0B1A2673);
}

.map .ol-control {
  position: absolute;
}

.map .ol-control button {
  display: block;
  margin: 0;
  padding: 0;
  color: var(--color-black, #0B1A26);
  font-size: inherit;
  font-weight: var(--font-weight-semibold, 600);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  height: 24px;
  width: 24px;
  background-color: var(--color-white, #FFF);
  border: 1px solid transparent;
  transition: all var(--animation-duration, 200ms) var(--transition-function-ease-out);
  pointer-events: all !important;
  cursor: pointer;
}

.map .ol-control button:hover {
  background-color: var(--color-white-90, #FFFFFFE6);
}

.palette-one .map .ol-control button:hover {
  border-color: var(--background-accent-hover, #F4B841CC);
}

.palette-one .map .ol-control button:active {
  border-color: var(--background-accent-active, #F4B841BA);
}

.palette-two .map .ol-control button:hover {
  border-color: var(--background-accent-2-hover, #F4B841CC);
}

.palette-two .map .ol-control button:active {
  border-color: var(--background-accent-2-active, #F4B841BA);
}

.palette-three .map .ol-control button:hover {
  border-color: var(--background-accent-3-hover, #0B1A26CC);
}

.palette-three .map .ol-control button:active {
  border-color: var(--background-accent-3-active, #0B1A26BA);
}
