@use "sass:math";
@use "./box.scss" as *;
@use "./variables.scss" as *;
@use "./maps.scss" as *;

@use "../util/scss/add-rules.scss" as *;
@use "../util/scss/clockwise.scss" as *;
@use "../util/scss/besm.scss" as *;
@use "../util/scss/include.scss" as *;
@use "sass:map";

@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: 1;
      white-space: nowrap;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
   }
}

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