@import "modules/base";
@import "modules/layout";
@import "modules/popup";
@import "modules/text";
@import "modules/input";
@import "modules/button";
@import "modules/tabcontainer";
@import "modules/checkbox";
@import "modules/radiobutton";
@import "modules/dropdown";
@import "modules/dateselector";
@import "modules/popup_dialog";
@import "modules/tab_navigator";
@import "modules/result_table";

/* ------------------------------------------------------------- MISC */
.olControlZoom {
  display: none;
}

/* ---------------------------------------------------------- TOOLBAR */
.toolBarColors, .toolBar {
  background-color: $toolBarBackgroundColor;
  color: $toolBarFontColor;
}

.toolbar-button-hover-effect {
  opacity: $toolBarButtonDefaultOpacity;
  &:hover {
    opacity: $toolBarButtonHoverOpacity;
  }
}

.toolBar {
  opacity: $toolBarOpacity;
  z-index: 4;
  user-select: none;
  .toolBarItem {
    padding:5px;
    display: inline-block;
    > span {
      // amenity for buttons with ".iconBig" icons + labels
      // inline does not get enough height to wrap contents vertically, inline-block does
      display: inline-block;
    }
    white-space: nowrap;
    vertical-align: middle; // workaround for mismatching effective line heights when mixing .dropdown with better-behaved items
    @include border-radius($radius);
    // spacing between icon and label for buttons and similar elements
    [class^="icon"], [class*=" icon"] {
      & +* {
        margin-left: 0.4em;
      }
    }
  }
  .mb-button, .mb-aboutButton, .mb-gpsButton {
    opacity: $toolBarButtonDefaultOpacity;
    &:hover {
      opacity: $toolBarButtonHoverOpacity;
    }
  }
  .toolBarItemActive {
    // Invert background and foreground
    background-color: $toolBarFontColor;
    color: $toolBarBackgroundColor;
    .mb-button, .mb-aboutButton, .mb-gpsButton {
      opacity: $toolBarButtonActiveOpacity;
    }
  }
  padding:$space/4 $space/2 $space/4 $space/2;
  border-color: darken($contentColor, 20%);

  &.top {
    border-bottom-width: 1px;
    border-bottom-style: solid;
  }
  &.bottom {
    .dropdownList{
      bottom:0;   // to "drop up"
      margin-bottom: $inputHeight;
    }
  }

  .itemsRight {
    text-align:right;
    .toolBarItem{padding-left:$space/4;}
    .dropdown:not(.numeric) {
      text-align: left;
    }
  }
  .itemsCenter {
    text-align:center;
    .toolBarItem{padding-right:$space/2;}
  }
  // Undo fixed-pixel line height on body
  line-height: 1;
  // Undo Bootstrap global label margin
  label {
    margin-bottom: 0;
  }
  a.mb-button:hover {
    text-decoration: none;
  }
}



/* --------------------------------------------------------- SIDEPANE */
.sidePane {
  &.left, &.right {
    // undo historical float classes
    float: none;
  }
  height: 100%;
  overflow: visible;
  background-color: $contentColor;
  width: 350px;

  border-bottom:1px solid darken(white, 30%);
  .toggleSideBar {
    font-size: 1.5rem;
    display: inline-block;
    padding: 5px;
    border-top-right-radius: $radius;
    border-bottom-right-radius: $radius;
  }

  // style for the left side pane
  &.left {
    position: absolute;
    left: 0;
    border-right:1px solid darken(white, 30%);
    .toggleSideBar {
      position: absolute;
      top: 0;
      left: 0;
      margin-left: 100%;
    }
  }

  // style for the right side pane
  &.right {
    position: absolute;
    right: 0;
    border-left:1px solid darken(white, 30%);
    .toggleSideBar {
      position: absolute;
      top: 0;
      right: 0;
      margin-right: 100%;
    }
  }
  .sideContent{
    padding:$space;
    height: 100%;
  }
}
.metadataDialog{
  .popupContent {
    height: 100%;
    .contentItem {
      height: 100%;
    }
  }
}
.metadataDialog .popupContent .contentItem {
  height: 100%;
}

.metadataContainer{
  $labeText:85px;

  .list, li{clear:both;}
  .list{
    border:dashed 1px darken(#fff, 20%);
    margin-bottom:$space/2;
    li{margin-left:$space;}

    // no margin for labeltext lists ...
    ul.left li{
      margin-left:0px;
      // ... and metatext below lists
      .metaText{margin-left:0px;}
    }
  }
  .labelText{
    width:$labeText;
    margin-right:$space/2;
    display: inline-block;
  }
  .metaText{
    display: inline-block;
    word-wrap: break-word;
  }
}


/*
Mapbender info and error styling
*/
div.notifyjs-container > div.notifyjs-bootstrap-base > span{
    display: block;
    white-space: normal;
    max-width: 800px;
    max-height: 600px;
    overflow: auto;
    word-wrap: break-word;
}

.mapbender-popup, .fom-popup {
  label {
    margin-bottom: 0;
    font-weight: normal;
    line-height: inherit;
  }
}

.collapse-toggle {
  background: $buttonFirstColor;
  color: $lightFontColor;
}

// Filter Element visibility by "screenType"
// @see Mapbender/CoreBundle/Extension/ElementMarkupExtension.php
// @todo: eventually we may need to make the breaking pixel width configurable
@media screen and (max-width: 1119px) {
  .hide-screentype-mobile {
    display: none !important; // Overrule misc display: inline-block and such with !important
  }
}

@media screen and (min-width: 1120px) {
  .hide-screentype-desktop {
    display: none !important; // Overrule misc display: inline-block and such with !important
  }
}

.auto-scroll-v {
  max-height: 100%;
  overflow-y: auto;
}
