@import 'variables';

.ra-control-scale {
  display: flex;
  flex-direction: column;
  .ra-control-scale-line {
    box-sizing: border-box;
    padding: 2px 5px 1px;
    overflow: hidden;
    color: @ra-control-font-color;
    font-size: 10px;
    line-height: 1.1;
    white-space: nowrap;
    background: @ra-control-bg-color;
    border: 2px solid #000;
    border-top: 0;
    transition: width 0.1s;
    & + & {
      margin-top: -2px;
      border-top: 2px solid #777;
      border-bottom: none;
    }
  }
}

.ra-right {
  .ra-control-scale {
    display: flex;
    align-items: flex-end;
    .ra-control-scale-line {
      text-align: right;
    }
  }
}