@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;
}

.specialElectionKey{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: int.$spacing-1;
  margin-top: int.$spacing-10;
  margin-left: int.$spacing-10;
  margin-bottom: int.$spacing-2;
  transition: opacity .2s linear;

  @include int.is-desktop() {
    display: grid;
    grid-template-columns: max-content max-content;
    column-gap: int.$spacing-1;
    row-gap: int.$spacing-1;
    position: absolute;
    bottom: int.$spacing-16;
    right: 0;

    &.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;
  }
}
