
// @require core/widget/widget.scss

//TODO: Add support for vertical progressbar (not particularly useful, but when attached it will be an appropriate example of vertically attached widget)
//TODO: Add `buffering` variant
//TODO: Add an `indicating` progressbar, with auto highlight color changing on the basis of the value

/* PROGRESSBAR */

.progressbar {

  @extend %widget;
  @include color ( $progressbar-color, $progressbar-color-force, $progressbar-color-basic );
  display: flex;
  overflow: hidden;
  height: $progressbar-height;
  border-radius: $progressbar-border-radius;
  transform: translateZ(0); // Fixes an overflowing bug, it happens only on helpers -> attached as far as I could see

  /* HIGHLIGHT */

  &-highlight {
    @include color ( $progressbar-highlight-color, $progressbar-highlight-color-force, $progressbar-highlight-color-basic );
    @include text-truncate ();
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: min-width $progressbar-animation-duration;
  }

}
