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

.map-zoom-range {
   box-shadow: 0px 1px 5px 1px rgb(0 0 0 / 25%);
   float: left;
   pointer-events: all;
   position: relative;
   width: 18px;
}

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

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

.map-zoom-range .role-indicator-container {
   display: flex;
   flex: 1;
   padding: 3px;
   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 4px 4px; }
.map-zoom-range .role-increase { border-radius: 4px 4px 0 0; }

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

.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%;
}

.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;
   display: none;
   height: 8px;
   left: 50%;
   padding: 3px;
   position: absolute;
   width: 16px;

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

.map-zoom-range .zoom-level-button {
   cursor: pointer;
   height: 4px;
   margin-top: 4px;
   width: 100%;
}
.map-zoom-range .zoom-level-button:first-child { margin-top: 0; }