/*!
 * Copyright (C) 2023 StApps
 * This program is free software: you can redistribute it and/or modify it
 * under the terms of the GNU General Public License as published by the Free
 * Software Foundation, version 3.
 *
 * This program is distributed in the hope that it will be useful, but WITHOUT
 * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
 * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
 * more details.
 *
 * You should have received a copy of the GNU General Public License along with
 * this program. If not, see <https://www.gnu.org/licenses/>.
 */

ion-content {
  // fixes the unexpected issue that the content is not fullscreen (behind the header)
  position: absolute;
  div.map-container {
    width: 100%;
    height: 100%;
    position: fixed;
  }
  & > 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: fixed;
    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
    // TODO: find an option that is better suited for the iOS theme
    --box-shadow: var(--map-box-shadow);
    align-self: flex-end;
  }
}

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