@import "libs/variables";
@import "libs/mixins";
@import "libs/normalize";
@import "libs/icons";

.olControlZoom {
  display: none;
}

/* ---------------------------------------------------------------- VARIABLES */

// the holy colors
$ciColor:#0066BA; // blue
$ciColor2:#CCC; // gray
$ciColor3:#134271 ; // blue
$ciColor4:#fff ; // white*/


/* --------------------------------------------------------------- COMPONENTS */
/* --------------------------------------------------------------------- BASE */
@import "modules/base";
/* --------------------------------------------------------------------- TEXT */
@import "modules/text";
fieldset{
  padding:$space;

  legend{
    @extend .subTitle;
    margin:0px !important;
    padding:0 5px 0 5px;
  }
}
/* ------------------------------------------------------------------- BUTTON */
.buttonCore{
  font-family: $fontFamily;
  @extend .smallText;
  @include noUserSelect();

  // this sucks -.- thank u mozilla for this awesome bug!
  // -> line-height behaviour differs from other browsers.
  //    font-size and the *non* font sans-serif fix it in all ff.
  @-moz-document url-prefix(){
    .buttonCore{font: ($fontSize - 2) sans-serif;}
  }
  border:none;
  cursor:pointer;
}
.button{
  $buttonFirstColor:#6fb536;
  $buttonSecondColor:#5fa229;

  padding:($space/4) ($space/2);
  line-height:$fontSize;
  margin:0px;

  border:1px solid darken($buttonSecondColor, 5%);
  color:$lightFontColor;
  background-color:$buttonFirstColor;
  @extend .buttonCore;
  @include border-radius($radius);
  @include transition(all 0.3s ease-in-out);
  @include box-shadow(0 0 6px rgba(0,0,0,0.1),
                      inset 0 -10px 10px $buttonSecondColor);
  &:hover{
    background-color:darken($buttonFirstColor, 5%);
    @include box-shadow(0 0 6px rgba(0,0,0,0.1),
                        inset 0 -10px 10px darken($buttonSecondColor, 4%));
  }
  &.critical{
    $buttonCriticalFirstColor:#d36565;
    $buttonCriticalSecondColor:#b23a3a;

    border:1px solid darken($buttonCriticalSecondColor, 5%);
    color:$lightFontColor;
    background-color:$buttonCriticalFirstColor;
    @extend .buttonCore;
    @include border-radius($radius);
    @include box-shadow(0 0 6px rgba(0,0,0,0.1),
                        inset 0 -10px 10px $buttonCriticalSecondColor);
    &:hover{
      background-color:darken($buttonCriticalFirstColor, 5%);
      @include box-shadow(0 0 6px rgba(0,0,0,0.1),
                          inset 0 -10px 10px darken($buttonCriticalSecondColor, 4%));
    }
  }
}
.linkButton{
  @extend .buttonCore;
  color:$middleFontColor;

  &:before{margin-right:5px;}
  &:hover, &.activeLink, &:active{color:$ciColor;};
}
/* ----------------------------------------------------------------- CHECKBOX */
.checkWrapper{
  cursor:pointer;
  width:$fontSize;
  &.checkboxDisabled{@include opacity(0.4);}
}
.checkbox{
  @include pos(-9999px,'','',0);
  height: 100%;
  width: 100%;
  @include opacity(0);
}
/* ----------------------------------------------------------------- DROPDOWN */
.dropdown{
  $lineHeight: $lineHeight + 8;

  cursor:pointer;
  display:inline-block;
  position: relative;
  color:$ciColor;
  border:solid 1px lighten($thirdColor, 15%);
  line-height:$lineHeight;
  height:$inputHeight;
  padding-right: $space + $space/2;
  background-color: #FFF;

  .dropdownValue{
    padding-left: 5px;
    color:$secondColor;
    border:none;
    width: 100%;
    line-height:$lineHeight;
    cursor: pointer;
    &.iconDown:before{@include pos(0px,5px,'','');}
  }
  .dropdownList{
    background-color: #FFF;
    color:$secondColor;
    position: absolute;
    z-index: 2;
    display:none;
    overflow: auto;
    max-height:200px;
    border:solid 1px lighten($thirdColor, 15%);
    width: 100%;
    @include box-shadow(0px 0px 2px rgba(0, 0, 0, 0.1),
                      inset 0px 0px 2px #fff);
    li{
      padding-left: 5px;
      &:hover{
        color:$ciColor;
        background-color:$contentColor;
      }
    }
  }
  .hiddenDropdown{
    @include pos(-9999px,'','','');
  }
  @extend .smallText;
  @include border-radius($radius);
  @include noUserSelect;
}
/* -------------------------------------------------------------------- INPUT */
.input{
  color:$secondColor;
  border:solid 1px lighten($thirdColor, 15%);
  line-height:$lineHeight;
  height:$inputHeight;
  padding-left: 5px;
  padding-right: 5px;
  background-color: $contentColor;
  width:100%;
  @extend .bigText;
  &:focus{outline:none;}
}
/* ------------------------------------------------------------------- LAYOUT */
@import "modules/layout";
/* -------------------------------------------------------------------- POPUP */
@import "modules/popup";   // from /bundles/mapbendercore
.overlay{
  @include noUserSelect();
  @include transition(opacity 0.4s ease-in-out);
}

.popupButtons{margin-right:$space;}
.popupSubContent{width: $popupModalWidth;}
.popup{
  @include transition(margin 0.4s ease-in-out);
  @include border-radius($radius);
  @include box-shadow(1px 1px 2px rgba(0, 0, 0, 0.9),
                      inset 0px 0px 2px #fff);

}
.popupContainer{
  &.show .popup{margin:80px auto 0 auto;}
  &.modal{
    padding: 0;
  }
}

/* ---------------------------------------------------------------- SEPERATOR */
.seperator{
  border:none;
  border-bottom:dashed 1px darken(#fff, 30%);
}
/* ------------------------------------------------------------- TABCONTAINER */
.tabContainer{
  $tabPopHeight:3px;
  $tabHeight:34px;

  .tab{
    margin-right:3px;
    color:$middleFontColor;
    background-color:$contentColor;
    cursor:pointer;
    position:relative;
    bottom:-$tabPopHeight*2;
    height:$tabHeight;
    z-index:10;
    border:{
      left:solid 1px $thirdColor;
      top:solid 1px $thirdColor;
      right:solid 1px $thirdColor;
    }
    float:left;
    padding:3px 10px 3px 10px;
    @extend .smallText;
    @include box-shadow(1px 0px 2px rgba(0, 0, 0, 0.1),
                        inset 1px 0px 2px #fff);
    @include transition(all 0.2s ease-in-out);
    @include noUserSelect();

    &:first-child{@include border-top-left-radius($radius);}

    &:hover{
      background-color:#fff;
      bottom:-$tabPopHeight;
    }

    &.active{
      cursor:default;
      color:$darkFontColor;
      bottom:-$tabPopHeight;
      height:$tabHeight;
      z-index: 30;
      background-color:$contentColor;
      @include box-shadow(1px 0px 1px rgba(0, 0, 0, 0.1));
    }
  }
  .container{
    clear:left;
    display:none;
    padding:$space;
    z-index:20;
    position:relative;
    background-color:$contentColor;
    border:{
      top:solid 3px $firstColor;
      left:solid 1px $thirdColor;
      right:solid 1px $thirdColor;
      bottom:solid 1px $thirdColor;
    }
    @include border-bottom-radius($radius);
    @include box-shadow(0px 0px 8px rgba(0, 0, 0, 0.1));

    &.active{display:block;}
  }
}
.tabContainerAlt{
  .tab{
    display: inline-block;
    @extend .button;

    &.active{
      cursor:default;
      background-color:darken(#6fb536, 10%);
      color:$lightFontColor;
      @include box-shadow(0 0 6px rgba(0,0,0,0.1),
                        inset 0 -10px 10px darken(#5fa229, 8%));
    }
  }
  .container{
    border-top:dashed 1px $thirdColor;
    margin-top:$space;
    clear:left;
    display:none;
    padding:$space;
    z-index:20;
    position:relative;

    &.active{display:block;}
  }
}










/* ----------------------------------------------------------------- TEMPLATE */
/* --------------------------------------------------------------------- MISC */
.mb-hiddenCheckbox{
  position: absolute;
  @include opacity(1);
}
/* ------------------------------------------------------------------ TOOLBAR */
.toolBar{
  z-index: 4;
  padding:$space/2 $space/2 $space/4 $space/2;
  background-color: $ciColor4;
  border-top: 3px solid $ciColor2;
  color: $darkFontColor;
  line-height: normal;

  label{
    font-weight: normal;
  }
  &.itemsCenter{
    text-align:center;
  }
  &.bottom{
    @include absolute('' 0 0 0);
  }
  .iconBig {
    font-size: 30px;
    color: $ciColor;
    padding: 0;
    margin: 0;
    &:before{
      position: static;
      margin: 0;
    }
  }
  > .toolBarItem{
    &:hover {
      color: fade-out($darkFontColor, 0.3);
      .iconBig {
        color: fade-out($ciColor, 0.3);
      }
    }
  }
}
.toolBarItem{
  display: inline-block;
  margin: 0 $space/4;
}
/* --------------------------------------------------------------- MOBILEPANE */
.mobilePane{
  background-color: $ciColor4;
  z-index:10;
  height: 100%;
  @include opacity(0);
  @include absolute(100% 0 0 0);
  @include transition(all .3s ease-in-out);
  @include transform(translateY(0));
  .contentTitle{
    color: $ciColor3;
    margin: $space $space 0 $space;
    padding-bottom: $space;
    border-bottom: solid 5px $ciColor;
  }
  &[data-state="opened"]{
    @include opacity(1);
    @include transform(translateY(-100%));
  }
}
.mobileContent{
  overflow:auto;
  @include absolute($space*4 $space $space $space);
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
}
.mobileClose{
  font-style: normal;
  font-size: 28px;
  color: darken($ciColor2, 20%);
  @extend .iconCancel;
  @include absolute($space $space '' '');
}
/* ------------------------------------------------------------------ CONTENT */
.templateWrapper{
  margin:0 auto;
  overflow: hidden;
  @include absolute(0 0 0 0);
}
.contentPane{@include absolute(0 0 0 0);}
.dropdown{
  text-align: left;
  min-width: 200px;
}
.hiddenDropdown{display:none;}
/* ------------------------------------------------------------ MOBILE SPLASH */
.splashScreenWrapper{
  z-index: 12;
  display: none;
  background-color: rgba(255,255,255,.7);
  @include absolute(0 0 0 0);

  &[data-state="active"]{display: block;}
}
.splashScreen{
  margin:0 auto;
  padding: $space;
  border: solid 2px $ciColor2;
  background-color: $ciColor4;
  @include absolute(50% '' '' 50%);
  @include transform(translate(-50%, -50%));
  max-width: 100%;
  max-height: 100%;
  img.app-screenshot {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
  }
  p.app-title {
    font-size:$fontSize*2;
    line-height:$fontSize*2;
    text-align:center;
  }
  i{
    color: $ciColor3;
    font-size: 2em;
    font-style: normal;
    @include absolute((-$space/2) (-$space/2) '' '');
  }
}










/* ------------------------------------------------------------ MOBILE SPLASH */
/* ------------------------------------------------------- ACTIVITY INDICATOR */
.mb-element-activityindicator{display:none;}
.mb-activity, .mb-activity-ajax{
  .mb-element-activityindicator{
    display: inline-block;
    -webkit-animation:spin 1s linear infinite;
    -moz-animation:spin 1s linear infinite;
    animation:spin 1s linear infinite;
  }
}
/* ------------------------------------------------------ BASESOURCE SWITCHER */
.mb-element-basesourceswitcher{
  li{
    padding:$space/2;
    display:block;
    font-size: 14px;
    color: $middleFontColor !important;
    margin: 0;
    border: none;
    border-radius: 0px;

    &:nth-child(1n){background-color: $ciColor4;}
    &:nth-child(2n){background-color: lighten($ciColor2, 15%);}

    @extend .iconOk;
    @extend .labelCheck;
    &:before{
      font-size: 20px;
      color:lighten($ciColor3, 60%);;
      @include absolute('' $space/2 '' '');
    }

    &[data-state="active"]{
      &:before{
        color:lighten($ciColor3, 5%);
      }
    }
  }
}
/* ---------------------------------------------------------------- COPYRIGHT */
.mb-element-copyright{
  @include opacity(0.6);
}
.mb-element-copyright-link {
  cursor:pointer;
  color:$lightFontColor;
  text-decoration:none;
}
.mb-element-copyright-dialog{display: none;}
/* -------------------------------------------------------------- FEATUREINFO */
.mb-element-featureinfo{
  .tabs{display:none;}
  .container{
    display:block;
    background-color: $ciColor4;
    padding:0;
    border:none;
  }
  td{padding-right: $space;}
}
/* -------------------------------------------------------------- FEATUREINFO */
.mb-element-zoombar{
  z-index: 4;
  &.right-top{@include absolute($space $space '' '');}
  &.left-top{@include absolute($space '' '' $space);}
  &.left-bottom{@include absolute('' '' $space*4 $space/2);}
  &.right-bottom{@include absolute('' $space/2 $space*4 '');}
  div.iconBig {
    display: block;
  }
}
.contentPane{
    > .mb-element.mb-element-zoombar{
        > ul.toolPane{
          border: 2px solid $ciColor2;
          padding:$space/2;
          color:$ciColor3;
          .iconBig {
            color: $ciColor;
            &[title]:hover {
              color: fade-out($ciColor, 0.3);
            }
          }
          background-color: $ciColor4;
          li .iconBig {
            margin: 0;
          }
          li.zoomSlider .iconBig {
            margin: $space / 2 auto;
          }
        }
    }
}

.iconBig {
  font-size: 30px;
  height: auto;
  line-height: 100%;
  &:before {
    font-size: inherit;
  }
}

/* ---------------------------------------------------------------- LAYERTREE */
.mb-element-layertree{
  .layers{
    padding-left: 0px;
    .serviceContainer {
      color: $darkFontColor;
      border: none !important;

      &:nth-child(1n) {
        background-color: $ciColor4;
      }
      &:nth-child(2n) {
        background-color: lighten($ciColor2, 15%);
      }
    }
  }
  .leaveContainer {
    height: auto;
    line-height: normal;
    flex-direction: row-reverse;
    padding: $space/2;
  }
  .checkWrapper {
    height: initial;
    width: auto;
  }
  .iconCheckbox, .iconCheckboxActive {
    @extend .iconOk;
    font-size: 20px;
    color:lighten($ciColor3, 60%);
  }
  .layer-title{
    font-size: 14px;
    color: $middleFontColor !important;
  }
  .iconCheckboxActive{color:lighten($ciColor3, 5%);}
  .checkboxDisabled:before{display:none;}
  .iconRemove, .iconFolder, .featureInfoWrapper, .showLeaves{display:none !important;}
  .serviceContainer, .groupContainer{
    .layers{display:none;}
  }
  [data-state="loading"]{
    @extend .iconActivity;
    &:before{
      -webkit-animation:spin 1s linear infinite;
      -moz-animation:spin 1s linear infinite;
      animation:spin 1s linear infinite;
      @include absolute('' $space*2 '' '');
    }
  }
  [data-state="error"]{
    &:before{
      color:$errorColor;
      @include absolute('' $space*2 '' '');
    }
  }
}
/* ---------------------------------------------------------------------- MAP */
.contentPane{
  .mb-element-map{
    width:100%;
    height:100%;
    z-index: 1;
    @include absolute(0 0 0 0);
  }
}
/* ------------------------------------------------------------- SCALEDISPLAY */
.contentPane{
  .mb-element-scaledisplay{
    padding:$space/4 $space/2;
    @include frontendContainerStyle();
  }
}
.toolBar{
  .mb-element-scaleline{
    position: relative;
    bottom:5px;
    padding-bottom:5px;
    .scaleBorder{border-color:$lightFontColor}
  }
}
/* ------------------------------------------------------------ SIMPLE SEARCH */
.autocompleteWrapper{width:100%;}
.autocompleteList li {
  padding:$space/2;
  display:block;
  font-size: 14px;
  &:nth-child(1n){background-color: $ciColor4;}
  &:nth-child(2n){background-color: lighten($ciColor2, 15%);}
}

/* ------------------------------------------------------------ GPS BUTTON ACTIVE */
.toolBarItemActive .mb-gpsButton {
  &:before {
    color: #333;
  }
}

/* ------------------------------------------------------------ BACKGROUND-SWITCHER */

.mb-element-basesourceswitcher li {
    text-align: left;
}
