@import "gn_bootstrap.less";

@viewport-padding: 1em;
@transition-params: .3s ease;

@gn-popup-max-width: 1200px;


[gn-main-viewer],
.gn-main-viewer {
  position: relative;
  height:  calc(~"100vh - 102px");

  [role=tooltip] {
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
    right: 0;
  }

  fieldset legend {
    margin-bottom: 2px;
  }

  .gn-layertree-filter {
    margin: 0 0 15px 0px;
    position:relative;
    .clear {
      right: 1em;
      position: absolute;
      top: 7px;
    }
  }

  .wrapper {
    width: 100%;
    height: 100%;
    min-height: 100%;
  }
  [ngeo-map] {
    width: 100%;
    height:  calc(~"100vh - 102px");
    &.gn-gfi-loading:hover {
      cursor: wait;
    }
  }
  .popover-dropdown, [gn-popover-dropdown] {
    .dropdown-menu {
      max-height: 45vh;
      overflow: auto;

    }
    .dropdown-toggle {
      padding: 0;
      border: none;
    }
  }
  .search-container {
    position: absolute;
    top: @viewport-padding;
    left: @viewport-padding;
    width: 20em;
    .dropdown-menu {
      width: 100%;
      top: ~"calc(100% - 3px)";
      background: rgba(255,255,255,.9);
      padding: 0 0 1em;
      h5 {
        padding: 0 1em;
      }
      ul {
        margin:0;
        background: #fff;
      }
      li {
        background: transparent;
        padding: 0;
        &:hover {
        }
      }
      a {
        padding: .5em 1em;
        display: block;
        em {
          font-size: 90%;
          color: grey;
        }
      }
    }
    .clear {
      position: absolute;
      top: .75em;
      right: 3.5em;
      color: #666;
      z-index: 99;
      &:hover {
        cursor: pointer;
        color: #222;
      }
    }
  }
  .tools {
    position: absolute;
    top: @viewport-padding;
    right: 0;
    width: 2.8em;
    button, [role="button"] {
      margin-bottom: .2em;
      border-right-width: none;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      background: rgba(255,255,255,.8);
      width: 2.8em;
      transition: background @transition-params;
      &.active {
        width: 3.0em;
        border-left: medium none;
        border-radius: 0;
        margin-left: -0.2em;
        background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7);
        border-color: transparent;
        color: #FFF;
      }
    }

    .tools-spacer {
      height: 1.4em;
    }
  }
  .control-tools {
    top: auto;
    bottom: 50px;
    position: fixed;
  }
  & > .panel {
    background: rgba(255,255,255,.8);
  }
  .panel-tools {
    position: absolute;
    top: @viewport-padding;
    right: 3em;
    width: 26em;
    min-height: 12.8em;
    max-height: ~"calc(100% - 2em)";
    max-width: ~"calc(100% - 4em)";
    overflow-y: auto;
    transition: opacity @transition-params;
    h3 {
      margin-top: 15px;
    }
    li[gn-layermanager-item] {
      .fa-arrows-alt,.gn-layer-ordering {
        opacity: 0;
        transition: opacity @transition-params;
      }
      label {
        padding: 0px;
        display: block;
        margin-bottom: 0px;

      }
    }
    .gn-layer-outofrange > label {
      color: #999;
    }
    .gn-searchlayer {
      label {
        font-size: 90%;
        max-width: 68%;
      }
    }
    .list-group-item {
      transition: max-height @transition-params;
      &:hover {
        .fa-arrows-alt, .gn-layer-ordering {
          opacity: 1
        }
      }
      label {
        font-weight: normal;
      }
      & > label {
        font-size: 90%;
        max-width: 72%;
      }
    }
    .btn-group.gn-layer-btn {
      display: inherit;
    }
    .btn-group {
      display: flex;
      .btn {
        flex: 1;
      }
    }
    .flux, .context {
      margin: .2em;
    }
    .baselayer {
      .dropdown-menu {
        width: 100%;
      }
    }
    .gn-layer-actions {
      [ngeo-popover-anchor] {
        text-decoration: none;
      }
    }
    .unfold {
      opacity: 0;
      transition: opacity @transition-params;
      float: right;
      border: none;
      background: none;
      padding: 0;
    }
    .unfold,
    .close {
      margin-top: -.1em;
      margin-right: .2em;
    }
    .details {
      font-size: 90%;
      margin: 0 0 .5em 0;
      p {
        overflow: auto;
      }
      .delete {
        .btn-xs;
        .pull-right;
        clear: both;
        margin-top: 1.3em;
      }
    }
    h5 {
      margin: .2em 0;
    }
    [gn-layermanager] {
      max-height: 44em;
      overflow-y: auto;
      .gn-layer-ordering {
        margin-top: -4px;
        margin-right: -10px;
        .fa {
          padding: 0px 10px;
          font-size: 0.8em;
        }
      }
      ul {
        margin-bottom: 4px;
      }
    }
    .metadata {
      .btn;
      .btn-link;
      width: 100%;
      font-style: italic;
      font-size: 13px;
    }
    label {
      padding: 10px 0;
      font-weight: normal;
    }
  }

  @import "../components/viewer/wmsimport/style/layertree.less";

  .fu {
    position: relative;
    input[type=file] {
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
      width: 100%;
    }
  }

  //.collapsed {
  //  max-height: 0;
  //  min-height: 0;
  //  overflow-y: hidden;
  //  border: 0;
  //  margin: 0;
  //  padding: 0;
  //}
  .force-hide {
    opacity: 0;
    pointer-events: none;
  }

  /* hackish tmp */
  .ol-overlaycontainer-stopevent {
    /* display: none; */
  }
  .overlay {
    position: absolute;
    bottom: 12px;
    left: ~"calc(-10px - 2em)";
    background: rgba(60,60,60,.8);
    line-height: 2em;
    padding: 1em;
    width: 17em;
    color: #fff;
    text-shadow: 0 0 1px #000;
    border-radius: 2px;
    font-size: 12px;
    &:after {
      content: ' ';
      position: absolute;
      bottom: -10px;
      left: 2em;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 10px 10px 0 10px;
      border-color: rgba(60,60,60,.8) transparent;
    }
    dl {
      margin-bottom: 0;
      dl dd, dl dt {
        display: block;
        float: none;
        width: 100%;
        margin-left: 0;
        text-align: left;
      }
    }
    dt {
      width: 6em;
    }
    dd {
      margin-left: 6.5em;
    }
  }

  /* jquery-ui slider */
  .ui-slider {
    position: relative;
    text-align: left;
    border: 1px solid #ddd;
    height: .7em;
    margin: 0.8em 0;

    .ui-slider-range {
      position: absolute;
      z-index: 1;
      font-size: .7em;
      display: block;
      border: 0;
      background-position: 0 0;
      background-color: dimgrey;
      top: 0;
      height: 100%;
    }
    .ui-slider-handle {
      top: -.3em;
      margin-left: -.6em;
      position: absolute;
      z-index: 2;
      width: 0.8em;
      height: 1.2em;
      border-radius: 1.2em;
      cursor: ew-resize;
    }
    .ui-state-default {
      border: 1px solid #d3d3d3;
      background: #e6e6e6 none 50% 50% repeat-x;
      font-weight: normal;
      color: #555555;
    }
  }

  /* Measures */
  .gn-measure-text {
    .alert {
      margin-top: 1em;
    }
    dt {
      width: 120px;
    }
    dd {
      margin-left: 130px;
    }
  }


  .alert-warning  {
    background: rgba(252,248,227,.6)
  }
  .panel-sm {
    font-size: @font-size-small;
  }

  [gn-localisation-input] {
    .dropdown-menu {
      padding-bottom: 0;
    }
  }
  .gn-draw-styleform {
    > div > input {
      margin: 15px 0;
      width: 80%;
    }
    label {
      font-weight: normal;
      font-size: 13px;
    }
    form {
      margin-top: 10px;
      padding-bottom: 100px;
      input[type='text'] {
        width: 146px;
      }
      input[type='number'] {
        width: 55px;
      }
      .form-group {
        margin-top: 2px;
        margin-bottom: 8px;
      }
    }
  }


  [gn-data-filter-view],
  [data-gn-data-filter-view],
  .gn-data-filter-view {
    table {
      font-size: 80%;
    }
    .gn-btn-data-download {
      position: absolute;
      right: 0px;
      top: 18px;
    }
  }
}

[gn-popup] {
  display: none;
  min-width: 200px;
  max-width: @gn-popup-max-width;
  min-height: 100px;
  max-height: ~"calc(100% - 89px)";
  z-index: 2000;
  height: auto;

  @media (max-width: @screen-tablet) {
    z-index: 1500;
    left: 2%;
    right: 2%;
    top: 2%;
    bottom: 2%;
    max-height: none;
    max-width: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  @media (max-width: @screen-phone) {
    position: fixed !important;
    overflow: hidden;
  }
}

[gn-bootstrap-datepicker].input-group[class*="col-"] {
  padding-left: 15px;
  padding-right: 15px;
}

.gn-popup-content {
  overflow: auto;
  max-width: inherit;
  max-height: 600px;
  font-size: 12px;
  @media (max-width: @screen-phone) {
    width: 100%;
    height: auto;
    max-height: none;
    position: absolute;
    top: 36px;
    bottom: 10px;
    overflow-x: hidden;
    overflow-y: auto;
    table {
      width: 100% !important;
      td {
        vertical-align: top;
      }
    }
  }
  .gn-popup-iframe {
    width: 1000px;
    height: 600px;

    &.profile {
      width: 500px;
      height: 400px;
    }
    &.transect {
      width: 400px;
      height: 600px;
    }
    &.time {
      width: 400px;
      height: 300px;
    }
  }
}



[data-gn-wfs-filter-facets], [gn-wfs-filter-facets] {
  font-size:12px;
  .gn-facet {
    > .list-group {
      overflow: auto;
      max-height: 10em;
      margin-bottom: 10px;
    }

    .list-group-item:hover {
      cursor: pointer;
    }
    .fa {
      margin-right: .3em;
      font-size: 14px;
    }
  }

  .btn-group {
    margin-top: 15px;
    margin-bottom: 15px;
    display: inline-block !important;
  }

  .close {
    font-size: 14px;
  }
}

[gn-wfs-filter-facets-tree] {
  .list-group .list-group{
    display: none;
  }
  .gn-leaf {
    margin-left: 16px;
  }
}

gn-features-tables, .gn-viewer-info-pane {
  display          : block;
  position         : absolute;
  bottom           : 1em;
  left             : 1em;
  right            : 3.8em;
  background-color : rgba(255,255,255, .6);
  border-radius    : 3px;
  .nav li a {
    background  : rgba(255, 255, 255, .5);
    text-shadow : 0 0 1px white;
    .badge {
      text-shadow : none;
    }
  }
  .tab-content {
    background : white;
    min-height : 5em;
    padding    : 1em;
  }
  .gn-features-table {
    padding          : .25em;
  }
  .layername {
    display        : inline-block;
    max-width      : 10em;
    text-overflow  : ellipsis;
    white-space    : nowrap;
    overflow       : hidden;
    vertical-align : middle;
  }
  .close {
    font-size : 24px;
    margin    : .25em .4em 0 0;
  }

  .profile {
    width: 100%;
    min-height: 20em;
    height: 200px;
    overflow-x: auto;
    svg {
      width: auto;
    }
    .overlay {
      width: 100%;
    }
  }
}

gn-wps-process-form {
  .popover-parent {
    position: relative;
  }

  ul {
    list-style: none;
  }

  .panel {
    background: none;
    margin-bottom: 0px;
    border: none;
    box-shadow: none;

    .panel-heading {
      height: auto;
      line-height: 1.2em;
      padding: 6px 15px;

      .close {
        margin-right: -0.2em;
      }
    }
  }

  .form-group .output-selection {
    display: inline-block;
  }
  .form-group .input-group {
    margin-bottom: 6px;
  }
}

gn-geometry-tool .btn-group {
  display: flex;
  .btn {
    flex-basis: initial !important;
    flex-grow: 1;
    &.btn-icon {
      flex-grow: 0 !important;
    }
  }
}

.ol-dragbox, .gnbbox-dragbox {
   background-color: rgba(255,255,255,0.4);
   border: solid 2px red;
 }

.layermanager-item-menu {
  margin: -9px -14px;
  ul {
    li {
      padding: 8px 10px !important;
      border-top: 1px solid #ccc;
      a {
        font-size: 14px;
      }
      &:first-child {
        border-top: 0;
      }
      label {
        color: #757575;
      }
    }
    input[type="range"] {
      width: 100% !important;
    }
  }
}

[gn-ows-context] {
  ul.gn-resultview li.gn-grid {
    width: 150px;
    min-width: 150px;
    max-height: 170px;
    padding: 2px;
    margin: 2px;
    font-size: 80%;
    text-align: center;
  }
  .gn-md-thumbnail {
    float:left;
    width: 110px;
    height: 110px;
    margin: 2px !important;
  }
}
[data-gn-search-layer-for-map] {
  .gn-md-thumbnail .gn-img-thumbnail {
    width: 40px;
    height: 40px;
    margin: 2px !important;
  }
}

// heatmap overlay with count info
.heatmap-overlay {
  border-radius: 3px;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 6px;
  line-height: 1em;
  color: white;
  pointer-events: none;
}