.mb-element-zoombar{
  width: 49px;  // for .pan item positioning
  text-align: center; // support .toolPane automatic centering

  .pan, .toolPane {
    @include frontendContainerStyle();
    color: fade-out($lightFontColor, .3);
  }

  .pan > span {
    &:hover {
      color: $lightFontColor;
    }
    &:before {
      margin: 0;
    }
  }
  .toolPane > li {
    [title]:hover {
      color: $lightFontColor;
    }
    &.activeZoomIcon {
      color: $lightFontColor;
    }
  }

  /**
  * Map navigation buttons
  */
  .pan{
    height: 49px;
    width: 100%;
    position:relative;
    @include border-radius(50%,50%);


    .iconTop{@include absolute(1px '' '' 18px);}
    .iconRight{@include absolute(15px 6px '' '');}
    .iconDown{@include absolute('' '' 1px 18px);}
    .iconLeft{@include absolute(15px '' '' 7px);}
  }
  &.right-top, &.right-bottom {
    .move-icon-wrap {
      text-align: right;
    }
  }
  &.left-top, &.left-bottom {
    .move-icon-wrap {
      text-align: left;
    }
  }
  /**
  * Map tools
  */
  .toolPane{
    display: inline-block;
    margin-top: $space/2;
    padding:5px;
    @include border-radius($radius);

    > li,
    .zoomSlider > span,
    .zoomSlider > ul {
      margin:3px 0;
    }
    .historyNext {
      margin-left:5px;
    }
  }
  .iconBig {
    padding: 0;
    margin: 0;
    &:before {
      padding: 0;
      margin: 0;
      position: static;
    }
  }
  .toolPane {
    > li {
      text-align: center;
    }
  }

  .iconZoomLevel {
    font-size: 10px;
    width: 10px;
    line-height: 10px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    &:not(:last-child):after {
      content: "\f142";
      font-family: FontAwesome;
      display: block;
      margin-bottom: -1px;
    }
  }
  
}
