@import (reference) "../variables/neptune-tokens.less";
@import (reference) "./mixins/_logical-properties.less";

.progress {
  --progress-bar-height: 4px;
  --progress-bar-border-width: 4px;
  // Progress bar starts with left/right (depends on rtl) shift `--progress-bar-start-shift` for hiding Progress bar's left and right borders which are used for progress vertical delimiter.
  --progress-bar-start-shift: calc(var(--progress-bar-border-width) * 2);
  height: var(--progress-bar-height);
  overflow: hidden;
  margin-top: calc((var(--size-24) - var(--progress-bar-height)) / 2);
  margin-bottom: calc((var(--size-24) - var(--progress-bar-height)) / 2);
  background-color: var(--color-interactive-secondary);
  border-radius: calc(var(--progress-bar-border-width) + var(--progress-bar-height));
}

.progress-bar {
  .float(left);
  position: relative;
  top: calc(-1 * var(--progress-bar-border-width));
  left: calc(-1 * var(--progress-bar-start-shift));
  height: calc(var(--progress-bar-height) + var(--progress-bar-border-width) * 2);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-bold);
  color: #fff;
  .text-align(right);
  background-color: var(--color-content-accent);
  border: var(--progress-bar-border-width) solid var(--color-background-screen);
  border-radius: inherit;

  [dir="rtl"] & {
    right: calc(-1 * var(--progress-bar-start-shift));
    left: 0;
  }
}

.progress-bar-primary {
  background-color: var(--color-content-primary);
}

.progress-bar-success {
  background-color: var(--color-content-positive);
}

.progress-bar-info {
  background-color: var(--color-content-accent);
}

.progress-bar-warning {
  background-color: var(--color-content-warning);
}

.progress-bar-danger {
  background-color: var(--color-content-negative);
}