/**
 * The MIT License (MIT)
 *
 * Copyright (c) Camptocamp SA
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of
 * this software and associated documentation files (the "Software"), to deal in
 * the Software without restriction, including without limitation the rights to
 * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 * the Software, and to permit persons to whom the Software is furnished to do so,
 * subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
 * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
 * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
 * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */

/**
 * Entry point for all styles required for the mobile application.
 */

@import './vars_mobile.scss';

@import './common.scss';
@import 'ol/ol.css';
@import 'gmf/css/reset.css';
@import 'gmf/sass/gmf-font.scss';
@import 'bootstrap/scss/bootstrap.scss';
@import 'gmf/sass/base.scss';
@import 'gmf/sass/map.scss';
@import 'gmf/sass/input-range.scss';
@import 'gmf/sass/fullscreenpopup.scss';
@import 'gmf/sass/loading-mask.scss';
@import 'ngeo/sass/components.scss';

@import 'gmf/sass/iphone.scss';
@import 'gmf/controllers/mobile-nav.scss';
@import 'gmf/search/mobile.scss';
@import 'gmf/layertree/mobile.scss';

/**
 * Mobile specific css only !
 * Please, use shared less files to describe desktop-mobile shared css
 */

main > * {
  position: absolute;
}

main button {
  height: $map-tools-size;
  width: $map-tools-size;
  padding: 0;
  border-radius: $border-radius-base;
}

gmf-map {
  text-align: initial;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.gmf-mobile-measure {
  bottom: $app-margin;
  right: $app-margin;
  z-index: $above-menus-index;
  a {
    display: block;
    float: left;
    margin-left: $micro-app-margin;
  }
}

gmf-map {
  .tooltip {
    position: relative;
    background: rgba(0, 0, 0, 0.5);
    border-radius: $border-radius-base;
    color: white;
    padding: $half-app-margin $app-margin;
    opacity: 0.7;
    white-space: nowrap;
  }
  .ngeo-tooltip-measure {
    opacity: 1;
    font-weight: bold;
    z-index: $content-index;
  }
  .ngeo-tooltip-static {
    background-color: #ffcc33;
    color: $color;
    color: var(--color);
    border: 0.06rem solid white;
  }
  .ngeo-tooltip-measure::before,
  .ngeo-tooltip-static::before {
    border-top: $half-app-margin solid;
    border-top-color: $border-color;
    border-top-color: var(--border-color);
    border-right: $half-app-margin solid transparent;
    border-left: $half-app-margin solid transparent;
    content: '';
    position: absolute;
    bottom: -$half-app-margin;
    margin-left: -$half-app-margin;
    left: 50%;
  }
  .ngeo-tooltip-static::before {
    border-top-color: #ffcc33;
  }
}

gmf-displayquerywindow {
  z-index: $above-menus-index;
}

.ol-overlaycontainer-stopevent {
  z-index: $above-menus-index !important;
}

.ol-rotate {
  top: 4 * $map-tools-size + 2 * $app-margin + 3 * $micro-app-margin;
  right: $app-margin;
  left: auto;
  font-size: 0.6rem;
  .ol-rotate-reset {
    border-radius: $border-radius-base;
  }
}

.ol-zoom {
  top: $app-margin + $map-tools-size + $app-margin;
  right: $app-margin;
  left: auto;
  .ol-zoom-in,
  .ol-zoom-out {
    font-size: $icon-font-size;
    border-radius: $border-radius-base;
  }
}

.ol-rotate,
.ol-zoom {
  button {
    &:hover {
      background-color: $map-tools-bg-color;
      background-color: var(--map-tools-bg-color);
    }
  }
}

.ol-scale-line {
  bottom: $app-margin;
  left: $app-margin;
}

button[ngeo-geolocation] {
  right: $app-margin;
  top: 3 * $map-tools-size + 2 * $app-margin + 2 * $micro-app-margin;
  z-index: $above-menus-index;
}

.ngeo-notification {
  left: 50%;
  margin: 0 0 0 calc(-#{$notification-width} / 2);
  position: absolute;
  top: 0;
  width: $notification-width;
  z-index: $above-all;
}

// Overrides for tablet devices and up
@media (min-width: map-get($grid-breakpoints, 'sm')) {
  .gmf-mobile-measure {
    right: 2 * $app-margin + $map-tools-size;
  }
  .ol-rotate {
    top: $app-margin + $map-tools-size + $micro-app-margin;
  }
  .ol-zoom {
    top: auto;
    bottom: $app-margin + $map-tools-size;
  }
  button[ngeo-geolocation] {
    top: auto;
    bottom: $app-margin;
  }
}

/** Disclaimer, and tablet redirect */
main .gmf-app-map-messages {
  bottom: 50px;
  text-align: left;

  .alert.fade:not(.show) {
    display: none;
  }
}

/** ngeo-displayquery-window */
main div.ngeo-displaywindow {
  top: $map-tools-size + 2 * $app-margin;
  left: $app-margin;
  right: initial;
}

gmf-search {
  span.twitter-typeahead {
    &::before {
      font-size: $icon-font-size;
    }
  }
}

.nav-swipper {
  width: 20px;
  position: absolute;
  z-index: 3;
  top: 0;
  height: 100%;
  &.nav-swipper-left {
    float: left;
  }
  &.nav-swipper-right {
    float: right;
    right: 0;
  }
}