@prefix: range-editor;

.@{prefix} {
  &- {
    &root {
      position: relative;
      height: 24px;
      box-sizing: content-box;
      border: 1px solid #DDDDDD;
      border-radius: 4px;
      cursor: ew-resize;
      overflow: hidden;
    }

    &inner-bar {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      background-color: #1199ff;
      overflow: hidden;

      .@{prefix}-percent-text {
        color: #FFFFFF;
      }
    }

    &percent-text {
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      user-select: none;
    }
  }
}