$rate-size-small: 16px !default;
$rate-size-middle: 28px !default;
$rate-size-large: 32px !default;

$rate-sizes: (
  'small': $rate-size-small,
  'middle': $rate-size-middle,
  'large': $rate-size-large
) !default;

$rate-gutter-size-small: 2px !default;
$rate-gutter-size-middle: 14px !default;
$rate-gutter-size-large: 12px !default;

$rate-gutter-sizes: (
  'small': $rate-gutter-size-small,
  'middle': $rate-gutter-size-middle,
  'large': $rate-gutter-size-large
) !default;

.mx {
  &-rate {
    display: inline-flex;
    flex-direction: row;
    font-size: 0;

    @include disabled();

    &-item {
      position: relative;
      cursor: grab;

      @each $name, $size in $rate-sizes {
        &--#{$name} {
          display: inline-block;
          margin-right: map-get($map: $rate-gutter-sizes, $key: $name);
        }
      }

      &:last-child {
        margin-right: 0;
      }

      &-half{
        position: absolute;
        left: 0;
        top: 0;
        width: 50%;
        height: 100%;
        overflow: hidden;
      }
    }
  }
}