ion-header {
  ion-toolbar {
    --background: transparent;
    --ion-color-base: transparent;

    ion-buttons {
      ion-back-button::part(native), ion-menu-button::part(native) {
        box-shadow: var(--map-box-shadow);
        //padding: 2px;
      }
    }
  }
  ion-searchbar {
    --background: white;
    // important for iOS
    --box-shadow: var(--map-box-shadow);
  }
}

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

ion-back-button, ion-menu-button {
  --background: white;
  --background-hover: whitesmoke;
  --background-focused: whitesmoke;
}

::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: grid;
    position: absolute;
    bottom: 15px;
    z-index: 1000;
    width: 100%;
    padding: 0 20px;
    justify-content: center;

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

    stapps-map-item {
      width: 550px;
      position: center;
      justify-self: center;
      margin: 2px;
    }
  }
}

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;
    stapps-map-item {
      display: grid;
      width: 100%;
    }
  }

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