@import '../shared-styles/index';

:host {
  display: block;
  height: nx-spacer(3xs);
  overflow: hidden;
  position: relative;
  width: 100%;
}

.nx-progress__track {
  background-color: v(progressbar-background-color);
  height: 100%;
}

.nx-progress__indicator {
  transform-origin: top left;
  height: 100%;
  position: absolute;
  width: 100%;

  :host-context([dir='rtl']) & {
    transform-origin: top right;
  }
}

// A pseudo element is created for each progress bar bar that fills with the indicator color.
.nx-progress__indicator::after {
  height: 100%;
  position: absolute;
  width: 100%;
  animation: none;
  content: '';
  display: inline-block;
  left: 0;
  background-color: v(progressbar-indicator-color);

  :host-context([dir='rtl']) & {
    right: 0;
    left: auto;
  }
}

@media screen and (forced-colors: active) {
  :host {
    // height made bigger because it's very little in high contrast
    height: nx-spacer(2xs);
  }

  .nx-progress__track {
    border: nx-border-size(xs) solid windowFrame;
    border-radius: nx-border-radius(xs);
  }

  .nx-progress__indicator {
    border-right: nx-border-size(xs) solid windowFrame;

    [dir='rtl'] & {
      border-right: none;
      border-left: nx-border-size(xs) solid windowFrame;
    }
  }

  .nx-progress__indicator::after {
    background: highlight;
  }
}
