@use "sass:math";
@use "sass:color";
@use "colors" as *;
@use "../colors" as *;
@use "sizes" as *;
@use "../sizes" as *;
@use "../../base/mixins" as *;
@use "../../base/progressBar";

// adduse

$generic-bar-height: 6px;
$generic-background-width: 90%;
$generic-progressbar-border-radius: 2px;
$generic-progressbar-interdeterminate-state-gradient: -90deg, transparent 5%, $progressbar-range-indeterminate-color, transparent 95%;
$generic-progress-bar-border: 1px solid $progressbar-border-color;

.dx-progressbar-container {
  height: $generic-bar-height;
  border: $generic-progress-bar-border;
  background-color: $progressbar-bg;
  border-radius: $generic-progressbar-border-radius;
}

.dx-progressbar-status {
  padding-top: $progressbar-status-padding-top;

  .dx-progressbar .dx-position-right & {
    padding-top: 0;
  }
}

.dx-progressbar-range {
  position: relative;
  border: 1px solid $progressbar-range-border-color;
  background-color: $progressbar-range-bg;
  margin-top: -1px;
  box-sizing: content-box;
  border-top-left-radius: $generic-progressbar-border-radius;
  border-bottom-left-radius: $generic-progressbar-border-radius;
}

.dx-progressbar-animating-container {
  height: $generic-bar-height;
  background-color: $progressbar-bg;
  background-size: $generic-background-width 5px;
  border: $generic-progress-bar-border;
  border-radius: $generic-progressbar-border-radius;
  animation: dx-loader 2s linear infinite;

  @include gradient-linear($generic-progressbar-interdeterminate-state-gradient);

  background-repeat: repeat;
}

.dx-state-disabled {
  .dx-progressbar-range {
    background-color: $progressbar-range-disabled-bg;
  }

  .dx-progressbar-animating-container {
    animation: none;
    background-position-x: math.div($generic-background-width, 2);
  }
}

.dx-rtl {
  .dx-progressbar,
  &.dx-progressbar {
    .dx-progressbar-animating-container {
      animation: dx-loader-rtl 2s linear infinite;

      @include gradient-linear($generic-progressbar-interdeterminate-state-gradient);

      background-repeat: repeat;
    }
  }
}

@keyframes dx-loader {
  0% {
    background-position-x: 0;
  }

  100% {
    background-position-x: 900%;
  }
}

@keyframes dx-loader-rtl {
  0% {
    background-position-x: 0;
  }

  100% {
    background-position-x: -900%;
  }
}