.#{$theme-name} {
  .scalebar_top-left {
    left: 10px;
    top: 10px;
  }
  .scalebar_top-center {
    left: 50%;
    top: 10px;
  }
  .scalebar_top-right {
    right: 150px;
    top: 10px;
  }
  .scalebar_bottom-left {
    left: 25px;
    bottom: 25px;
  }
  .scalebar_bottom-center {
    left: 50%;
    bottom: 25px;
  }
  .scalebar_bottom-right {
    right: 100px;
    bottom: 25px;
  }
  .esriScalebar {
    z-index: 30;
    position: absolute;
    width: 0;
    height: 20px;
  }
  // Style: Ruler
  // --------------------------------------------------
  .esriScalebarRuler {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: $scale-ruler-height;
    background-color: $scale-ruler-bg;
    @include calcite-box-shadow-base;
  }
  .esriScalebarRulerBlock {
    overflow: hidden;
    position: absolute;
    height: 50%;
    background-color: $scale-ruler-block-bg;
  }
  .upper_firstpiece {
    top: 0%;
    left: 0%;
    width: 25%;
  }
  .upper_secondpiece {
    top: 0%;
    left: 50%;
    width: 25%;
  }
  .lower_firstpiece {
    top: 50%;
    left: 25%;
    width: 25%;
  }
  .lower_secondpiece {
    top: 50%;
    left: 75%;
    width: 30%;
  }
  // Style: Line
  // --------------------------------------------------
  .esriScalebarLine {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: $scale-line-height;
    border: 1px solid $scale-line-border;
  }
  .esriScalebarMetricLine {
    border-top-style: none;
  }
  .esriScalebarEnglishLine {
    border-bottom-style: none;
    top: -1px;
  }
  .esriScaleLabelDiv {
    position: relative;
    top: -5px;
    width: 100%;
    padding: 4px;
  }
  .scaleLabelDiv {
    position: relative;
    width: 100%;
    height: 5px;
  }
  .esriScalebarLabel {
    font-size: $scale-label-font-size;
    position: absolute;
    width: 10%;
    text-align: center;
    color: $scale-label-color;
    height: 5px;
    top: 0;
  }
  .esriScalebarLineLabel {
    position: relative;
  }
  .esriScalebarFirstNumber {
    left: 45%;
  }
  .esriScalebarSecondNumber {
    left: 95%;
    white-space: nowrap;
  }
}

