ion-content {
  // fixes the unexpected issue that the content is not fullscreen (behind the header)
  position: absolute;
  div.map-container {
    width: 100%;
    height: 100%;
  }
  & > div {
    overflow: hidden;
  }
}

ion-toolbar:first-of-type {
  padding: 0 var(--spacing-md) var(--spacing-xs);
}

::ng-deep {
  .stapps-location {
    ion-icon {
      color: #fd435c;
      width: 100%;
      height: 100%;
    }
  }

  .stapps-device-location {
    ion-icon {
      color: #4387fd;
      width: 100%;
      height: 100%;
    }
  }

  div.floating-content {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    width: 100%;
    padding: 0 var(--spacing-md) 8vh;
    justify-content: center;

    ion-card {
      margin: 0;
    }

    div.map-buttons {
      display: flex;
      justify-content: flex-end;
    }

    stapps-map-item {
      width: 550px;
      position: center;
      justify-self: center;
      margin: var(--spacing-sm) auto;
    }
  }
}

div.floating-buttons {
  z-index: 1000;
  position: absolute;
  bottom: 15px;
  right: 10px;
}

div.map-buttons {

  ion-button {
    margin: 4px;
    // important for iOS
    --box-shadow: var(--map-box-shadow);
    align-self: flex-end;
  }

  ion-button::part(native) {
    background: white;
  }

  ion-button::part(native):hover, ion-button::part(native):focus {
    background: whitesmoke;
  }
}

div.map-buttons.above {
  min-width: 70%;
  display: none;
}

@media (max-width: 667px) {
  div.map-buttons.above {
    display: flex;
  }
  div.floating-content {
    justify-content: normal;
    padding: 0 var(--spacing-md) var(--spacing-lg);
    stapps-map-item {
      display: grid;
      width: 100%;
    }
  }

  div.map-buttons.floating-buttons {
    display: none;
  }
}