@use "../../../styles/int.scss";

.controls {
  padding-top: int.$spacing-3;
  padding-bottom: int.$spacing-3;

  @include int.container-at-least("md") {
    display: flex;
    gap: int.$spacing-3;
  }
}

.mapContainer{
  position: relative;
}

.extras {
  position: absolute;
  right: int.$spacing-5;
  top: 75%;
  transform: translateY(-50%);
  transition: opacity .2s linear;

  &.isZoomed {
    opacity: 0;
    pointer-events: none;
  }

  &.zoomable {
    right: int.$spacing-20;
  }
}

.embedControls {
  display: flex;
  justify-content: center;
  padding-top: int.$spacing-3;
  padding-bottom: int.$spacing-3;

  @include int.container-at-least("lg") {
    margin-bottom: calc(-1 * #{int.$spacing-2});
    padding-bottom: 0;
  }
}

.embedStateLabels.override {
  font-size: 10px;
  stroke-width: 2;
}