@mixin cx-progressbar(
   $name: 'progressbar',
   $state-style-map: $cx-progressbar-state-style-map,
   $mods: $cx-progressbar-mods,
   $besm: $cx-besm
) {

   $block: map-get($besm, block);
   $element: map-get($besm, element);
   $state: map-get($besm, state);
   $mod: map-get($besm, mod);

   .#{$block}#{$name} {
      box-sizing: border-box;

      @include cx-add-state-rules($state-style-map, default);
        
      &[disabled], &.#{$state}disabled {
         @include cx-add-state-rules($state-style-map, disabled);
      }

      @each $modname, $config in $mods {
        &.#{$mod}#{$modname} {
          @include cx-add-state-rules($config, default);
        }
      }      
   }

   .#{$element}#{$name}-indicator {
      background-color: $cx-default-progressbar-indicator-background-color;
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
   }

   .#{$element}#{$name}-label {
      position: absolute;
      top: 0;
      left: 0;
      line-height: $cx-default-progressbar-height - cx-top($cx-default-progressbar-border-width) - cx-bottom($cx-default-progressbar-border-width);
      width: 100%;
      text-align: center;
   }
}

@if (cx-should-include('cx/widgets/ProgressBar')) {
   @include cx-progressbar();
}