/* ============================= *
 * ## Map Zoom Range Selector ##
 * ============================= */

.map-zoom-range {
   float: left;
   height: 150px;
   pointer-events: all;
   position: relative;
   width: 14px;
}

.casper-map.map-interaction + .map-controls .map-zoom-range { pointer-events: none !important; }

.map-zoom-range .role-decrease,
.map-zoom-range .role-increase {
   height: 14px;
}

.map-zoom-range .role-indicator-container {
   display: flex;
   flex: 1;
   position: relative;
}

.map-zoom-range.direction-horizontal .role-indicator-container { flex-direction: row }
.map-zoom-range.direction-vertical .role-indicator-container { flex-direction: column; }

.map-zoom-range .role-decrease {
   border-radius: 0 0 2px 2px;
   margin-top: 1px;
}

.map-zoom-range .role-increase {
   border-radius: 2px 2px 0 0;
   margin-bottom: 1px;
}

.map-zoom-range .role-decrease,
.map-zoom-range .role-increase {
   cursor: pointer;
   padding: 3px;
}

.map-zoom-range .role-decrease.button-disabled,
.map-zoom-range .role-increase.button-disabled {
   cursor: default;
   opacity: .5;
}

.map-zoom-range .role-decrease .icon,
.map-zoom-range .role-increase .icon,
.map-zoom-range .role-indicator .icon {
   float: left;
   height: 100%;
   position: relative;
   width: 100%;

   filter: drop-shadow(1px 1px 1px rgba(0,0,0,.5));
}

.map-zoom-range .role-decrease,
.map-zoom-range .role-increase,
.map-zoom-range .role-indicator-container {
   width: 100%;
}

.map-zoom-range .role-indicator {
   cursor: pointer;
   height: 8px;
   left: 50%;
   padding: 3px;
   position: absolute;
   width: 16px;

   transform: translate(-50%, 0);
}

.map-zoom-range .zoom-level-button {
   border-style: solid;
   border-width: 1px 0 0 0;
   cursor: pointer;
   flex: 1;
   width: 100%;
}