@import url("components/open-sans/open-sans.css");
@import url("components/bootstrap/css/bootstrap.min.css");
@import "libs/variables";
@import "libs/mixins";
@import "libs/icons";
@import "theme/mapbender3";

.templateWrapper {
  height: 100%;
  width: 100%;
  @include absolute(0 0 0 0);

  > .logoContainer {
    z-index: 10;
    background: none;
    @include absolute($space '' '' $space);
  }

  .toolBar {
    z-index: 4;
    padding: .6em .8em;
    margin-left: $space*3;
    @include frontendContainerStyle();
    border-radius: 4px;
    @include absolute($space $space '' '');

    > .toolBarItem {
      display: inline-block;
      &:not(:first-child):before {
        content: '|';
        display: inline-block;
        height: 14px;
        overflow: hidden;
        opacity: 0.2;
        vertical-align: top;
        margin: 1px 4px 0 4px;
      }

      label {
        margin-bottom: 0px;
      }
      > span {
        border-radius: 3px;
        position: relative;
        padding: 3px 3px 3px 25px;
        margin-top: -3px;
        margin-right: -3px;
        margin-bottom: -3px;
      }
      &.toolBarItemActive {
        background-color: transparent;
        > span {
          background-color: #f9f9f9;
          opacity: 1;
        }
        &::before {
          color: #fff;
        }
      }
    }

    li.toolBarMoreButton {
      display: none;
      position: relative;
      &[data-state="show"] {
        display: inline-block
      }
      i:before {
        font-style: normal;
      }
    }

    .toolbarMoreMenu {
      display: none;
      padding: 6px;
      @include absolute($space*3 (-$space/2) '' 5px);
      @include frontendContainerStyle();
      border-radius: 4px;
      &[data-state="show"] {
        display: block
      }

      // small arrow left
      &:after {
        $arrowSize: 8px;
        position: absolute;
        left: 50%;
        content: '';
        height: 0;
        width: 0;
        border: $arrowSize solid transparent;
        border-bottom-color: $firstColor;
        top: (-$arrowSize*2);
        margin-left: -$arrowSize;
      }

      & > .toolBarItem {
        display: inline-block;
        width: 100%;
        text-align: center;
        margin-top: 8px;
        .mb-button:before {
          padding: 0px;
        }
      }
    }
  }

  .contentPane {
    overflow: hidden;
    @include absolute(0 0 0 0);
    .mb-element-zoombar {
      z-index: 30;
      @include transition(all .2s ease-in-out);

      @include desktops() {
        @include absolute($space*4 $space '' '');
      }

      @include smartphones() {
        .zoomSliderLevels, .zoomBox, .pan, .history {
          display: none !important;
        }
        .toolPane {
//          padding: 6px 10px;
          padding: 4px 0px;
        }
        @include absolute('' $space $space '');
        top: auto !important;
      }
    }

    .mb-element-overview {

      @include smartphones() {
        display: none !important;
      }

      position: absolute;
      right: $space;
      bottom: $space;
      transition-delay: .2s;
      -webkit-transition-delay: .2s;
      opacity: 1;
      @include transition(all .2s ease-in-out);

      .overviewContainer {
        opacity: 1;
        @include transition(opacity .2s ease-in-out);
      }

      &.closed {
        .overviewContainer {
          width: 0;
          height: 0;
          opacity: 0;
        }

        .toggleOverview {
          z-index: 10;
          padding: 6px 12px;
          right: 0;
          bottom: 0;
          top: inherit;
          left: inherit;
          border-radius: 4px;
        }
      }

      .toggleOverview {
        font-size: 14px;
        cursor: pointer;
        z-index: 30;
        padding: 2px 7px;
        right: -3px;
        bottom: -3px;
        top: inherit;
        left: inherit;
        border-radius: 0;
        @include transition(padding .2s ease-in-out);
        @include frontendContainerStyle();
      }
      .olMapViewport {
        border: none;
      }
      .olControlOverviewMapElement {
        @include absolute('' -3px -3px '');
        z-index: 20;
        .olMap {
          border: 2px solid rgba(0, 0, 0, 0.8);
        }
      }
    }
  }
}

/**
* @deprecated Info container and they trigger is deprecated!
*/
.infoContainerTrigger, .infoContainerPane {
  display: none;
}