.overlay{
  background:url($imageBasePath + '/overlay.png');
  opacity: 0;
}

.popupHead {
  .popupTitle {
    @extend .title;
  }
  border-bottom:dashed 1px darken(#fff, 30%);
  &.draggable{cursor:move;}
  margin:0 $space $space $space;
  padding: $space 0 $space/2 0;
}
.popup .popupButtons {
  .button{
    margin-left:3px;
  }
}
.fom-popup {
  .popupButtons{
    @include absolute('' $space $space 0);
  }
}
.mapbender-popup {
  .popupButtons {
    text-align: right;
  }
}
.mapbender-popup {
  display: flex;
  flex-direction: column;
  .popupHead, .footer {
    flex: 0 0 auto; // no growing / shrinking, fit content
  }
  .popup-body {
    flex: 1 1 auto;     // expand / shrink as required, initially fit content
    padding: 0 $space;  // pad left and right, equal to footer lr padding / header lr margin
    &.popupScroll {
        // min-height: 200px;  // avoid squishing scrollable content too far vertically
      .popupContent {
        max-width: calc(100% - 20px);
      }
    }
    .popupContent {
      padding: 0;   // we already have our padding on the wrapping .popup-body
      margin-bottom: $space;
    }
  }

  .footer {
    padding: $space;
  }
}

.popupSubTitle{
  @extend .smallText;
}
.fom-popup {
  .popupContent {
    padding:0 20px;
  }
}
.popup {
  &.ui-resizable {
    min-width: 300px;
    min-height: 250px;
  }
  &.fom-popup {
    min-height: 250px;
    width: $popupModalWidth;
    padding-bottom:$space;
  }
  position:relative;
  &.mapbender-popup {
    // Set initial position on page
    // FOM popup does this with a margin relative to its (draggable!) invisible container...
    left: 80px;
    top: 100px;
    position: absolute;
    .popupContainer.modal & {
      position: relative;
      top: 0;
      left: 0;
    }
  }
  z-index:9999;
  background-color:#f4f4f4;
  border: {
      top: solid 1px $secondColor;
      left: solid 1px $thirdColor;
      right: solid 1px $thirdColor;
      bottom: solid 5px $thirdColor;
  }
}
.popupContainer.ui-draggable, .popup.ui-draggable {
  .popupHead {
    cursor:move;
  }
  &.ui-draggable-dragging {
    opacity: 0.6;
  }
}

.popupContainer{
  z-index:999;
  @include absolute(0 0 0 0);
  // FOM popup uses containers around non-modals
  // => force zero size to prevent the container from eating click events
  // This rule never applies to Mapbender popups, because they only use a container if rendering as a modal,
  // and that brings in different rules (see below)
  width: 0;
  height: 0;
  // FOM popup attaches draggable on the container, not the popup!
  &.ui-draggable{
    position:absolute !important; // avoid strange popup growing behaviour
  }
  .popup {
    margin-left:80px;
    margin-top:100px;
  }
  &.modal{
    @include fixed(0 0 0 0);
    height:100%;
    width:100%;
    padding: $space*2.5;
    display: block;
    .popup {
      // undo relative top / left used to set draggable non-modal initial position
      top: 0;
      left: 0;
      margin: 0 auto;
      max-height: 100%;
      &.fom-popup {
        // .fom-popup buttons are styled with position: absolute; forcing max height on the poopup prevents them from
        // leaking into content or going off-screen
        height: 100%;
      }
    }
    .overlay{
      opacity: 0.9;
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }
  }
}
.ui-resizable-se {
  position: absolute;
  font-size: 16px;
  right: -.135em;
  bottom: -8px;
  cursor: se-resize;

  &:before{
    @include transform(rotate(45deg));
    font-family: FontAwesome;
    content: "\f054";
    display: block;
  }
}
.popupScroll{
  overflow: auto;
}
.fom-popup .popupScroll {
  @include absolute(70px 0 $space*3 0);
}

/*
   This is the original Bootstrap 4 declaration for a gutter-less grid.
   See https://getbootstrap.com/docs/4.0/layout/grid/#no-gutters
   We haven't universally adopted Bootstrap 4 yet, but this should remain compatible
   if / when we do.
 */
.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}
