$buttons-width: 134px;

.uni-input-range {
  @include flex();

  input {
    pointer-events: none;
    width: initial;
    border-radius: 4px 0 0 4px;
  }

  &-button {
    @include input-button();
    background-color: color('background');
    outline: none;
    will-change: background-color;

    &--disabled {
      color: rgba(136, 136, 136, .24) !important;

      &:hover {
        cursor: not-allowed;
        background-color: initial;
      }
    }
  }

  &--editable {
    input {
      pointer-events: initial;
    }
  }

  &--small {
    .uni-input,
    .uni-input-range-button {
      height: size("small");
    }

    .uni-input--range {
      font-size: em(14px);
    }

    .uni-input-range-button {
      padding-bottom: 6px;
      width: size("small");
    }

    .uni-input--range {
      width: calc(100% - #{$buttons-width});
      flex-grow: 1;
    }
  }
}