/// Progress
///
/// @group meter
///
/// @example scss - usage
///
///   @include k-Progress;
///
/// @example html
///
///   <div class="k-Progress">
///     <div class="k-Progress__ramp">
///       <div class="k-Progress__slider"></div>
///     </div>
///   </div>

@mixin k-Progress {
  // Base
  $color: map-get($k-colors, 'primary-1');

  // Disabled
  $disabled-color: map-get($k-colors, 'line-2');

  // Ramp
  $ramp-color: map-get($k-colors, 'line-1');
  $ramp-height: k-px-to-rem(2px);

  $transition-speed: .2s;

  .k-Progress {
    max-width: 100%;
  }

  .k-Progress__ramp {
    position: relative;
    height: $ramp-height;

    background: $ramp-color;
  }

  .k-Progress__slider {
    width: 0;
    height: 100%;

    background: $color;

    transition: width $transition-speed;

    .k-Progress.is-disabled & {
      background: $disabled-color;
    }
  }
}