.mb-element-zoombar {
  text-align: center; // support automatic centering of children
  .component + .component {
    margin-top: 0.7rem;
  }
  &.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; // for automatic width and centering
    padding:5px;
    @include border-radius($radius);

    > li,
    .zoomSlider > span,
    .zoomSlider > ul {
      margin:3px 0;
    }
  }
  .toolPane {
    font-size: 1.6rem;
    .mobile-template & {
      font-size: 2.3rem;
    }
    > li {
      text-align: center;
    }
  }
  ul.zoomSliderLevels {
    font-size: 10px;
    line-height: 1;
    li {
      display: block;
    }
    .zoom-level-gap {
      opacity: $toolBarButtonDefaultOpacity;
      margin-bottom: -1px;
    }
  }

  .rotation {
    svg {
      height: 2.5em;
      width: auto;
      g {
        fill: $toolBarFontColor;
      }
      // we only have one icon :)
    }
    .rotate-cw {
      transform: scaleY(-1);
    }
    .rotate-ccw {
      transform: scale(-1, -1);
    }
    display: inline-flex;
    flex-direction: row;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    padding: 4px;
    text-align: justify;
    line-height: 54px;
    .reset-rotation {
      flex: 1 1 auto;
      text-align: center;
      display: inline-block;
      font-size: 179%;
    }
    .rotate-cw, .rotate-ccw {
      flex: 0 0 auto;
      position: relative;
      bottom: 0.6em;
    }
    .default-rotate-left-45 {
      transform: rotate(-45deg);
    }
  }
  .mobile-template & {
    // Hide rotation icons in mobile to make rotation reset easier to hit
    // We expect mobile users to prefer pinch rotation
    .rotate-cw, .rotate-ccw {
      display: none;
    }
  }
}
