@import "libs/variables";
// extend / replace some variables with mobile-specific values
@import "bundles/mapbendermobile/sass/theme/variables.scss";
@import "libs/mixins";
@import "libs/normalize";
@import "libs/icons";
@import "theme/mapbender3";

/* ------------------------------------------------------------------- BUTTON */
.button{
  @include box-shadow(0 0 6px rgba(0,0,0,0.1),
                      inset 0 -10px 10px $buttonSecondColor);
  &:hover{
    @include box-shadow(0 0 6px rgba(0,0,0,0.1),
                        inset 0 -10px 10px darken($buttonSecondColor, 4%));
  }
  &.critical{
    @include border-radius($radius);
    @include box-shadow(0 0 6px rgba(0,0,0,0.1),
                        inset 0 -10px 10px $buttonCriticalSecondColor);
    &:hover{
      @include box-shadow(0 0 6px rgba(0,0,0,0.1),
                          inset 0 -10px 10px darken($buttonCriticalSecondColor, 4%));
    }
  }
}
/* ----------------------------------------------------------------- DROPDOWN */
.dropdown {
  .dropdownList{
    @include box-shadow(0px 0px 2px rgba(0, 0, 0, 0.1),
                      inset 0px 0px 2px #fff);
  }
  @include border-radius($radius);
}

/* -------------------------------------------------------------------- POPUP */
.overlay{
  user-select: none;
  @include transition(opacity 0.4s ease-in-out);
}

.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{
  .popup{
    margin-left: 0;
  }
  &.modal{
    padding: 0;
  }
}

/* ------------------------------------------------------------- TABCONTAINER */
.tabContainer{
  .tab{
    @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);

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

    &:hover{
      background-color:#fff;
    }

    &.active{
      @include box-shadow(1px 0px 1px rgba(0, 0, 0, 0.1));
      // Undo container border overlapping hack on active tab (our container has no border)
      margin-bottom: 0;
      padding-bottom: 0;
    }
  }
  .container {
    padding:0;
    border:none;
    @include border-bottom-radius($radius);
    @include box-shadow(0px 0px 8px rgba(0, 0, 0, 0.1));

  }
}
.tabContainerAlt{
  .tab{
    &.active{
      background-color:darken(#6fb536, 10%);
      @include box-shadow(0 0 6px rgba(0,0,0,0.1),
                        inset 0 -10px 10px darken(#5fa229, 8%));
    }
  }
}










/* ------------------------------------------------------------------ TOOLBAR */
.toolBar {
  border-top: 3px solid $ciColor2;

  .iconBig {
    // Make big button icons even bigger (default is 160%)
    font-size: 230%;
  }

  &.itemsCenter{
    text-align:center;
  }
  &.bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
  }
}
/* --------------------------------------------------------------- MOBILEPANE */
.mobilePane{
  background-color: $ciColor4;
  color: $darkFontColor;
  z-index:10;
  height: 100%;
  min-height: 100%;
  opacity: 0;
  @include absolute(100% 0 0 0);
  @include transition(all .3s ease-in-out);
  @include transform(translateY(0));
  padding: $space $space 0 $space;
  .contentTitle{
    margin-top: 0;
    color: $ciColor3;
    border-bottom: solid 5px $ciColor;
  }
  .contentTitle, .mobileClose {
    font-size: 2rem;
  }
  // @todo: it's called .active
  &[data-state="opened"]{
    opacity: 1;
    @include transform(translateY(-100%));
  }
}
.mobileContent{
  height: 100%;
  min-height: 100%;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
}
.mobileClose{
  float: right;
}
/* ------------------------------------------------------------------ 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;
}

/* ------------------------------------------------------------ MOBILE SPLASH */
.splashScreenWrapper {
  background-color: rgba($ciColor4, .7);
  z-index: 12;
  @include absolute(0 0 0 0);
}
.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 */
  }
  .app-title {
    text-align: center;
    line-height: 1.5; // @todo: undo global fixed-pixel-unit line height!
  }
  .app-title:last-child {
    margin-bottom: 0;
  }
  .app-title:first-child {
    margin-top: 0;
  }
}


// Misc element checkbox coloring
.mb-element-layertree .selectedWrapper, .mb-element-basesourceswitcher .state-check {
  color: lighten($ciColor3, 5%);
}

// Nice big fonts in layer selection
body.mobile-template {
  .mb-element-layertree, .mb-element-basesourceswitcher {
    font-size: 2rem;
    line-height: 2.2;
  }
}
.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 '');}
}
/* ---------------------------------------------------------------- LAYERTREE */
.mb-element-layertree{
  .layers{
    .serviceContainer {
      &:nth-child(2n) {
        background-color: lighten($ciColor2, 15%);
      }
    }
  }
  .selectedWrapper {
    // indent away from edge of background
    margin-left: 0.5em;
  }

  .iconRemove, .iconFolder, .featureInfoWrapper, .showLeaves{display:none !important;}
  .serviceContainer, .groupContainer{
    .layers{display:none;}
  }
}
/* ------------------------------------------------------------ SIMPLE SEARCH */
.mb-element-simplesearch {
  .autocompleteList li {
    &:nth-child(2n){background-color: lighten($ciColor2, 15%);}
  }
}

