.mobileToggle {
  position: sticky;
  bottom: var(--Spacing-x5);
  z-index: var(--hotel-mobile-map-toggle-button-z-index);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--Spacing-x-half);
  align-items: center;
  border-radius: 4rem;
  background-color: var(--Base-Surface-Primary-light-Normal);
  box-shadow: 0 0 30px 2px rgba(0, 0, 0, 0.15);
  padding: var(--Spacing-x-half);
}

.button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--Spacing-x-half);
  padding: var(--Spacing-x1) var(--Spacing-x2);
  background-color: var(--Base-Surface-Primary-light-Normal);
  border-width: 0;
  cursor: pointer;
  border-radius: 2.5rem;
  color: var(--Base-Text-Accent);
  font-family: var(--typography-Caption-Bold-Desktop-fontFamily);
  font-size: var(--typography-Caption-Bold-Desktop-fontSize);
  font-weight: var(--typography-Caption-Bold-Desktop-fontWeight);
}
.button:hover {
  background-color: var(--Base-Surface-Primary-light-Hover);
}

.button.active {
  background-color: var(--Primary-Strong-Surface-Normal);
  color: var(--Base-Text-Inverted);
}
.button.active:hover {
  background-color: var(--Primary-Strong-Surface-Hover);
}

@media screen and (min-width: 1367px) {
  .mobileToggle {
    display: none;
  }
}
