/**
 * 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 desktop application.
 */

@import './vars_desktop.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/popover.scss';
@import 'gmf/sass/filters.scss';
@import 'gmf/sass/fullscreenpopup.scss';
@import 'gmf/sass/loading-mask.scss';
@import 'gmf/sass/swipe.scss';
@import 'gmf/layertree/desktop.scss';

html,
body {
  position: relative;
  height: 100%;
  li {
    list-style: none;
  }
}

body {
  padding-top: $topbar-height;
}

header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  height: $topbar-height;
  z-index: $zindex-navbar-fixed;
  .logo {
    height: $topbar-height;
    margin-left: $app-margin;
    background-repeat: no-repeat;
    background-size: auto $topbar-height;
  }
  .logo-right {
    height: $topbar-height;
    background-repeat: no-repeat;
    background-size: auto $topbar-height;
    position: absolute;
    top: 0;
    right: 0;
  }
}

main {
  position: relative;
  height: 100%;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAAAAABzHgM7AAAAAnRSTlMAAHaTzTgAAAARSURBVHgBY3iKBFEAOp/+MgB+UQnYeBZPWAAAAABJRU5ErkJggg==');
  overflow: hidden;
}

.gmf-lidarprofile-chart-active main {
  height: calc(100% - var(--lidarprofile-height));
}

.btn {
  padding: $half-app-margin $app-margin;
}

.close {
  cursor: pointer;
}

.dropdown-menu {
  box-shadow: $eavy-box-shadow $eavy-box-shadow-color;
  box-shadow: $eavy-box-shadow var(--eavy-box-shadow-color);
  min-width: 100%;
  li > a {
    color: $color;
    color: var(--color);
    padding: $input-btn-padding-y $input-btn-padding-x;
    display: block;
    white-space: nowrap;
    &:hover {
      text-decoration: none;
      background-color: $onhover-color;
      background-color: var(--onhover-color);
    }
  }
  .divider {
    height: 0.06rem;
    margin: $app-margin 0;
    overflow: hidden;
    background-color: $brand-secondary;
    background-color: var(--brand-secondary);
  }
}

$footer-height: $input-height-base + 2 * $padding-base-vertical;

.gmf-app-footer-div {
  display: inline-block;
}

.gmf-map,
.gmf-map > div {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

button[ngeo-geolocation] {
  position: absolute;
  height: $map-tools-size;
  width: $map-tools-size;
  left: $app-margin;
  top: 2 * $map-tools-size + $app-margin + 2 * $micro-app-margin;
  z-index: $below-content-index;
}

[ngeo-scaleselector] .btn > span {
  min-width: 5rem;
  display: inline-block;
}

#scaleline {
  vertical-align: middle;
  .ol-scale-line,
  .ol-scale-line-inner {
    background-color: transparent;
    bottom: auto;
    position: relative;
  }
}

gmf-mouseposition {
  display: inline-block;
}
.gmf-mouseposition-control {
  display: inline-block;
  min-width: 11.25rem;
}
gmf-elevationwidget {
  display: inline-block;
}
.gmf-elevationwidget-value {
  display: inline-block;
  min-width: 5rem;
}

.gmf-app-map-container {
  width: auto;
  height: 100%;
  overflow: hidden;
  position: relative;
  display: block;
  border-top: 0.06rem solid;
  border-top-color: $btn-default-border;
  border-top-color: var(--btn-default-border);
  .gmf-map,
  .gmf-map > div {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }

  .gmf-app-footer {
    padding: $padding-small-vertical;
    position: absolute;
    z-index: 2;
    bottom: -$footer-height;
    // prevent footer to be displayed on 2 lines when screen width is small
    max-height: $footer-height;
    background-color: $main-bg-color-09;
    background-color: var(--main-bg-color-09);
    width: 100%;
    /* cancel default navbar bottom margin */
    margin-bottom: 0;
    /* buttons or inputs in bar are supposed to be '-sm' */
    transition: 0.2s ease-out all;
    border-top: $border;
    border-top-color: $border-color;
    border-top-color: var(--border-color);
    &.gmf-app-active {
      bottom: 0;
    }
    > div {
      display: inline-block;
    }

    button.gmf-app-map-info {
      position: absolute;
      /* button is supposed to be .btn-sm */
      bottom: $footer-height - 0.06rem;
      border-top-left-radius: $border-radius-base;
      border-top-right-radius: $border-radius-base;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      background-color: $main-bg-color-08;
      background-color: var(--main-bg-color-08);
      padding: 0;
      left: 50%;
      $width: 2.5rem;
      width: $width;
      margin-left: calc(($width / 2) * -1);
      border-bottom: none;
      border: $border;
      border-color: $border-color;
      border-color: var(--border-color);
      font-weight: 900;
    }
  }

  button[ngeo-geolocation] {
    position: absolute;
    height: $map-tools-size;
    width: $map-tools-size;
    left: $app-margin;
    top: 2 * $map-tools-size + $app-margin + 2 * $micro-app-margin;
    z-index: $below-content-index;
  }

  [ngeo-scaleselector] .btn > span {
    min-width: 5rem;
    display: inline-block;
  }

  #scaleline {
    vertical-align: middle;
    .ol-scale-line,
    .ol-scale-line-inner {
      background-color: transparent;
      bottom: auto;
      position: relative;
    }
  }

  gmf-mouseposition {
    display: inline-block;
  }
  .gmf-mouseposition-control {
    display: inline-block;
    min-width: 11.25rem;
  }
  gmf-elevationwidget {
    display: inline-block;
  }
  .gmf-elevationwidget-value {
    display: inline-block;
    min-width: 5rem;
  }
}

gmf-search {
  position: absolute;
  left: 2 * $app-margin + $map-tools-size;

  span.twitter-typeahead {
    &::before {
      // magnifier
      font-size: 0.94rem;
    }

    .tt-menu {
      border-radius: $border-radius-base;

      .gmf-search-group {
        display: none;
      }
    }
  }
}

.ol-zoom {
  left: $app-margin;
  top: $app-margin;
}

.ol-rotate {
  font-size: 0.6rem;
  right: $app-margin;
  top: $app-margin;
}

.gmf-floorselector {
  left: 0.62rem;
  top: 6rem;
  height: 10rem;
  z-index: 3;
}

.ui-resizable-helper {
  border: 2px;
  border-color: $brand-secondary-dark;
  border-color: var(--brand-secondary);
  background-color: $brand-secondary;
  background-color: var(--brand-secondary);
  opacity: 0.4;
}

.gmf-app-header {
  flex: 0 1 auto;
  padding: $app-margin $app-margin 0 $app-margin;
}

.gmf-app-content {
  flex: 1 1 auto;
  overflow-y: auto;
  position: relative;
  margin-top: $app-margin;
  margin-bottom: $app-margin;
}

.gmf-app-data-panel {
  display: block;
  float: left;
  background-color: $brand-secondary;
  background-color: var(--brand-secondary);
  width: var(--left-panel-width);
  height: 100%;
  display: flex;
  flex-flow: column;

  &.gmf-app-inactive {
    width: 0 !important;
    .gmf-app-data-panel-collapse-btn {
      display: none;
    }
    .gmf-app-data-panel-expand-btn {
      display: block;
    }
  }

  .gmf-app-data-panel-collapse-btn {
    display: block;
  }
  .gmf-app-data-panel-expand-btn {
    display: none;
  }

  .gmf-app-data-panel-toggle-btn {
    height: 1.5 * $icon-font-size;
    left: -1px;
    padding: 0.5rem 0.1rem;
    position: relative;
    top: calc(50% - #{$icon-font-size});
    cursor: pointer;
  }

  .ui-resizable-e {
    background-color: $brand-secondary-dark;
    background-color: var(--brand-secondary-dark);
    cursor: ew-resize;
    border: {
      left: $border;
      left-color: $border-color;
      left-color: var(--border-color);
      right: $border;
      right-color: $border-color;
      right-color: var(--border-color);
    }
  }
}

gmf-themeselector {
  width: $half-app-margin * 2 + $theme-selector-columns * $theme-selector-column-width;
  width: calc(#{$half-app-margin} * 2 + var(--theme-selector-columns) * var(--theme-selector-column-width));
  max-height: $theme-selector-height;
  overflow: hidden;
  overflow-y: auto;
}
gmf-backgroundlayerselector {
  width: 15.62rem;
}
gmf-themeselector,
gmf-backgroundlayerselector {
  padding: $half-app-margin;
}

.gmf-theme-selector li {
  float: left;
  width: calc((100% - #{$theme-selector-columns} * 2 * #{$half-app-margin}) / #{$theme-selector-columns});
  width: calc(
    (100% - var(--theme-selector-columns) * 2 * #{$half-app-margin}) / var(--theme-selector-columns)
  );
}
.gmf-backgroundlayerselector {
  margin-bottom: 0;
}

.gmf-theme-selector,
.gmf-backgroundlayerselector {
  li {
    margin: $half-app-margin;
  }
}

.authentication-lost-dialog .modal-dialog {
  top: 40%;
}

.gmf-close {
  position: absolute;
  top: 0.6rem;
  right: 0.31rem;
}

.gmf-app-tools-content-heading {
  color: $color-light;
  color: var(--color-light);
  padding-bottom: $app-margin;
  margin-bottom: $app-margin;
  margin-top: calc($grid-gutter-width / 2);
  border-bottom: 0.06rem solid;
  border-bottom-color: $color-light;
  border-bottom-color: var(--color-light);
  .close {
    padding: 0;
  }
}

.gmf-app-tools-bar.btn {
  width: 100%;
  border-width: 0;
  background-color: $brand-primary;
  background-color: var(--brand-primary);
  margin-left: 0;
  border-radius: 0 !important;
  &:hover {
    background-color: $hover-background-color;
    background-color: var(--hover-background-color);
  }
}

.gmf-app-tools {
  float: right;
  background-color: $brand-secondary;
  background-color: var(--brand-secondary);
  left: 0 !important;
  display: flex;
  width: fit-content;

  &.gmf-app-inactive {
    width: fit-content !important;
  }

  .gmf-app-tools-content {
    min-width: $right-panel-width;
    padding: 0 0;
    margin-right: -$right-panel-width;
    transition:
      margin-right 0.2s ease,
      width 0.001s ease;
    height: 100%;
    flex-grow: 1;
    order: 1;
    width: $right-panel-width;
    left: 0 !important;

    .row {
      padding: 0 $app-margin;
    }

    .gmf-app-tools-content-toggle-btn {
      height: 1.5 * $icon-font-size !important;
      right: 9px;
      padding: 0.5rem 0.1rem;
      position: relative;
      top: calc(50% - #{$icon-font-size});
      cursor: pointer;
      z-index: 5;
    }

    .ui-resizable-w {
      background-color: $brand-secondary-dark;
      background-color: var(--brand-secondary-dark);
      cursor: ew-resize;
      border: {
        left: $border;
        left-color: $border-color;
        left-color: var(--border-color);
        right: $border;
        right-color: $border-color;
        right-color: var(--border-color);
      }
      left: 5px;
    }

    .gmf-app-tools-content-collapse-btn {
      display: block;
    }
    .gmf-app-tools-content-expand-btn {
      display: none;
    }

    & > div {
      height: 100%;
      margin-right: -$app-margin;
      margin-left: -$app-margin;
      & > div {
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
      }
    }

    &.gmf-app-active {
      margin-right: 0;
    }

    &.gmf-app-inactive {
      width: 0 !important;
    }

    textarea {
      resize: vertical;
      min-height: $input-height;
    }

    .profile-panel button {
      width: 100%;
    }

    &.gmf-app-streetview-active {
      width: $streetview-width + $app-margin + $app-margin;
    }

    .widget-scene-canvas {
      width: 100% !important;
    }

    ngeo-streetview {
      width: 100%;
    }

    .ngeo-routing {
      ngeo-nominatim-input {
        width: calc(100% - 1em - (2 * #{$app-margin}));
      }

      .fill button {
        width: 100%;
        margin-bottom: $half-app-margin;
      }
    }
  }

  .gmf-app-bar {
    background-color: $brand-primary;
    background-color: var(--brand-primary);
    border-left: $border;
    border-left-color: $border-color;
    border-left-color: var(--border-color);
    order: 2;
    height: 100%;
    position: relative;
    z-index: 2;
    flex-shrink: 0;

    > .btn + .btn {
      margin-top: -0.06rem;
    }

    .btn {
      width: 100%;
      border-width: 0;
      background-color: $brand-primary;
      background-color: var(--brand-primary);
      margin-left: 0;
      border-radius: 0 !important;
      &:hover {
        background-color: $hover-background-color;
        background-color: var(--hover-background-color);
      }
    }

    .btn-group-vertical {
      width: 100%;
      .btn {
        border: $border;
        border-color: $border-color;
        border-color: var(--border-color);
        border-right-width: 0;
        border-left-width: 0;

        &.active,
        &:active {
          box-shadow: none;
        }
        &.active {
          background-color: $brand-secondary;
          background-color: var(--brand-secondary);
          border-left: 0.06rem solid;
          border-left-color: $brand-secondary;
          border-left-color: var(--brand-secondary);
          margin-left: -0.06rem;
        }
      }
    }
  }
}

.gmf-app-data-panel,
.gmf-app-tools {
  height: 100%;
  position: relative;
}

::-webkit-scrollbar-track {
  background: $main-bg-color;
  background: var(--main-bg-color);
}

::-webkit-scrollbar {
  width: $half-app-margin;
}
::-webkit-scrollbar-thumb {
  background: $brand-primary;
  background: var(--brand-primary);
}

/**
 * GMF DrawFeature directive
 */
.gmf-app-map-messages h2 {
  display: none;
}

.gmf-eol {
  clear: both;
}

hr.gmf-drawfeature-separator {
  border-color: $color;
  border-color: var(--color);
  margin: $app-margin 0;
}

.gmf-drawfeature-featurelist {
  margin-top: $app-margin;
}

gmf-drawfeatureoptions label,
.gmf-drawfeatureoptions-help-rectangle {
  margin: 1rem 0 0 0;
}

/**
 * NGEO DrawFeature directive & map tooltips
 */
.ngeo-drawfeature-actionbuttons {
  float: right;
  position: relative;
}

.ol-viewport {
  .tooltip {
    position: relative;
    background: rgba(0, 0, 0, 0.5);
    border-radius: $border-radius-sm;
    color: white;
    padding: $half-app-margin $app-margin;
    opacity: 0.7;
    white-space: nowrap;
  }
  .ngeo-tooltip-measure {
    opacity: 1;
    font-weight: bold;
  }
  .ngeo-tooltip-static {
    display: none;
  }
  .ngeo-tooltip-measure:before,
  .ngeo-tooltip-static:before {
    border-top: $half-app-margin solid rgba(0, 0, 0, 0.5);
    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 FeatureStyle directive
 */
gmf-featurestyle {
  display: block;
  margin-top: $app-margin;
}

/**
 * Color palette within GMF FeatureStyle directive
 */
.ngeo-colorpicker-palette {
  border-collapse: separate;
  border-spacing: 0;

  td {
    position: relative;
    padding: 0;
    text-align: center;
    vertical-align: middle;
    font-size: 0.06rem;
    cursor: pointer;

    & > div {
      position: relative;
      height: $app-margin;
      width: $app-margin;
      border: 0.06rem solid #fff;
      box-sizing: content-box;
    }

    &:hover {
      & > div::after {
        display: block;
        content: '';
        background: inherit;
        position: absolute;
        width: 1.75rem;
        height: 1.75rem;
        top: -$app-margin;
        left: -$app-margin;
        border: 0.12rem solid #fff;
        box-shadow: $eavy-box-shadow $eavy-box-shadow-color;
        box-shadow: $eavy-box-shadow var(--eavy-box-shadow-color);
        z-index: $above-search-index;
      }
    }

    &.ngeo-colorpicker-selected > div::after {
      border: 0.12rem solid #444;
      margin: 0;
      content: '';
      display: block;
      width: $app-margin;
      height: $app-margin;
      position: absolute;
      left: -0.12rem; // It matches the square size of the colorpicker
      top: -0.12rem; // It matches the square size of the colorpicker
      box-sizing: content-box;
      z-index: 10;
    }
  }
}

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

/**
 * Controls at the bottom of the map
 */
.gmf-app-map-bottom-controls {
  .gmf-app-infobar-active & {
    bottom: $footer-height;
  }
  transition: 0.2s ease-out bottom;
  position: absolute;
  bottom: var(--current-infobar-height);
  z-index: 1;
  width: 100%;
}

/**
 * Background layer button (selector)
 */
.gmf-backgroundlayerbutton {
  position: absolute;
  bottom: $app-margin;
  left: $app-margin;

  button {
    background-color: $map-tools-bg-color;
    background-color: var(--map-tools-bg-color);
    padding: $padding-small-vertical;
    &::after {
      display: none !important;
    }
  }

  button,
  gmf-backgroundlayerselector {
    box-shadow: $eavy-box-shadow $eavy-box-shadow-color;
    box-shadow: $eavy-box-shadow var(--eavy-box-shadow-color);
  }
}

div.gmf-displayquerywindow {
  position: absolute;
  right: $app-margin;
  bottom: initial;
  $div-height: $displayquerywindow-desktop-height + $app-margin;
  top: calc(100% - #{$div-height});
}

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

/** Disclaimer */
$bgselector-image-size: 3rem;
.gmf-app-map-messages {
  position: absolute;
  vertical-align: bottom;
  left: calc(2 * #{$app-margin} + #{$bgselector-image-size} + 2 * #{$padding-small-vertical});
}

/**
 * GMF EditFeature directive
 */
gmf-editfeature > div {
  border-top: $border;
  border-top-color: $border-color;
  border-top-color: var(--border-color);
  margin-top: $app-margin;
  padding-top: $app-margin;
}

/**
 * GMF ObjectEditingTools directive
 */
gmf-objecteditingtools {
  border-bottom: $border;
  border-bottom-color: $border-color;
  border-bottom-color: var(--border-color);
  display: block;
  margin: 0 0 $app-margin 0;
  padding: 0 0 $app-margin 0;
}

/**
 * GMF FilterSelector component
 */
.gmf-filterselector-separator {
  margin: $app-margin 0 $half-app-margin 0;
  border-color: $color;
  border-color: var(--color);
}

.gmf-filterselector-savefilter-desc {
  color: $gray-dark;
  color: var(--gmf-gray-dark);
}

.gmf-filterselector-savedfilters {
  z-index: 1;
  float: right;

  a.dropdown-toggle {
    padding: $half-app-margin 0;
    position: absolute;
    right: 0;
  }

  ul.dropdown-menu {
    right: 0;
    top: 3 * $app-margin;
    min-width: $right-panel-width - 2 * $app-margin;
    margin-right: 2 * $micro-app-margin;

    a {
      overflow: hidden;
      max-width: $right-panel-width - 2 * $app-margin;
      text-overflow: ellipsis;
    }
  }
}

.gmf-filterselector-managefilter-modal {
  .modal-body {
    padding: 0 $app-margin;

    ul {
      margin: 0;

      li {
        border-bottom: 0.06rem solid #dddddd;
        padding: $half-app-margin;

        &:last-child {
          border-bottom: none;
        }

        a {
          float: right;
        }

        span {
          float: left;
          max-width: $right-panel-width;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
      }
    }
  }
}

/**
 * Ngeo Filter component
 */

.ngeo-filter-condition-button,
.ngeo-filter-condition-button:hover,
.ngeo-filter-condition-button:focus {
  text-decoration: none;
}

.ngeo-filter-condition-criteria {
  opacity: 0;
}

.ngeo-filter-condition-criteria-active {
  opacity: 1;
}

.ngeo-filter-rule-custom-rm-btn {
  float: right;
  padding-right: 0;
  margin: 0;
}

hr.ngeo-filter-separator-rules {
  margin: $app-margin 0;
}

hr.ngeo-filter-separator-criteria {
  margin: $half-app-margin 0;
}

hr.ngeo-filter-separator-criteria,
hr.ngeo-filter-separator-rules {
  border-color: $color;
  border-color: var(--color);
}

// handle long text in dropdown
ngeo-filter {
  .dropdown-menu li > a {
    white-space: normal;
  }
}

/**
 * Ngeo Rule component
 */
ngeo-rule {
  display: block;
  margin: $app-margin calc(2 * #{$app-margin}) $app-margin 0;

  .form-control {
    font-size: $font-size-small;
  }

  .dropdown > .dropdown-toggle {
    text-align: left;
    // handle long text in button
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 1rem;
    &::after {
      right: $app-margin;
      top: 50%;
      position: absolute;
    }
  }

  .dropdown-menu {
    padding: $app-margin;
  }

  .ngeo-rule-operators-list {
    margin: 0 0 $app-margin 0;
  }

  .ngeo-rule-btns {
    float: right;
  }

  .ngeo-rule-type-select label {
    width: 100%;
  }

  .ngeo-rule-value {
    border: 0.06rem solid;
    border-color: $color-light;
    border-color: var(--color-light);
    border-radius: $border-radius-sm;
    border-top: 0;
    color: $color-light;
    color: var(--color-light);
    padding: $micro-app-margin $half-app-margin;

    a.btn {
      color: $color-light;
      color: var(--color-light);
      float: right;
      margin-right: $half-app-margin;
      padding: 0;
    }

    a.btn:hover,
    a.btn:focus {
      color: $gray-dark;
      color: var(--gray-dark);
    }
  }

  .ngeo-rule-type-geometry-instructions {
    font-size: 0.9rem;
    font-style: italic;
    margin: $half-app-margin;
  }
}

/**
 * Ngeo Street View Component
 */
ngeo-streetview {
  display: block;
  height: calc(100% - 3.75rem);
}

/**
 * Ngeo Query Panel Component
 */
ngeo-query-panel {
  .ngeo-query-panel-actions,
  .ngeo-query-panel-help {
    margin: 2rem 0 0 0;
  }

  .ngeo-query-panel-help {
    background-color: $nav-bg;
    background-color: var(--nav-bg);
    padding: $app-margin;
  }
}