@use '../../styles/mixins' as *;
@use '../../styles/variables' as *;

.ui-progress-bar {
  background-color: var(--progress-bar-background-color);
  border-radius: 2px;
  height: 4px;
  overflow: hidden;

  &__bar {
    height: 100%;
    background-color: var(--progress-bar-color);
    transition: ease-out;
    transition-property: width, background-color;
    transition-duration: .1s, .2s;
  }

  @include element-variant('progress-bar', 'normal', (
          'background-color': $clr-grey-300,
          'color': $clr-cyan-500,
  ));

  @include element-variant('progress-bar', 'middle', (
          'background-color': $clr-warn-200,
          'color': $clr-warn-500,
  ));

  @include element-variant('progress-bar', 'high', (
          'background-color': $clr-red-100,
          'color': $clr-red-500,
  ));

}