/*!
 * 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 {
  position: fixed;
  transition: opacity 0.2s ease;
}

stapps-search-page {
  ::ng-deep ion-content {
    transform: translateY(48px);
    transition: transform 0.2s ease;
  }

  ::ng-deep ion-back-button {
    transform: translateX(24px);
    display: block;
    opacity: 0;
    transition:
      opacity 0.2s ease,
      transform 0.2s ease;
  }
}

stapps-search-page:has(::ng-deep .searchbar-has-focus),
stapps-search-page:has(::ng-deep ion-content:focus-within) {
  + ion-content {
    pointer-events: none;
    opacity: 0;
  }

  ::ng-deep ion-content {
    transform: translateY(0);
  }

  ::ng-deep ion-back-button {
    pointer-events: none;
    transform: translateX(0);
    opacity: 1;
  }
}

:host.can-go-back stapps-search-page ::ng-deep ion-back-button {
  transform: translateX(0);
  opacity: 1;
}

mgl-map {
  width: 100%;
  height: 100%;
}

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

.filter-options {
  overflow: hidden;
  display: flex;
  flex-direction: row;
  border-radius: var(--border-radius-default);

  label {
    cursor: pointer;
    user-select: none;

    padding: var(--spacing-xs) var(--spacing-md);

    font-family: inherit;
    color: var(--ion-item-color);

    background-color: var(--ion-item-background);

    transition: all 0.2s ease;

    input[type='radio'] {
      display: none;
    }

    &:has(:checked) {
      color: var(--ion-color-primary-contrast);
      background-color: var(--ion-color-primary);
    }
  }
}

:host ::ng-deep .maplibregl-ctrl-top-left,
:host ::ng-deep .maplibregl-ctrl-top-right {
  top: 92px;
}
