@import '../../styles/common';

@function progress-bar-height($height: base) {
  $base: 16px;
  $data: (
    small: $base * 0.5,
    base: $base,
    large: $base * 2,
  );

  @return map-get($data, $height);
}

.ProgressBar {
  overflow: hidden;
  width: 100%;
  background-color: var(--pc-progress-bar-background);
  border-radius: var(--p-border-radius-1);

  @media (forced-colors: active) {
    border: var(--p-border-width-1) solid transparent;
  }
}

.sizeSmall {
  height: progress-bar-height(small);
}

.sizeMedium {
  height: progress-bar-height();
}

.sizeLarge {
  height: progress-bar-height(large);
}

.colorHighlight {
  --pc-progress-bar-background: var(--p-surface-neutral);
  --pc-progress-bar-indicator: var(--p-border-highlight);
}

.colorPrimary {
  --pc-progress-bar-background: var(--p-surface-neutral);
  --pc-progress-bar-indicator: var(--p-action-primary);
}

.colorSuccess {
  --pc-progress-bar-background: var(--p-surface-neutral);
  --pc-progress-bar-indicator: var(--p-border-success);
}

.colorCritical {
  --pc-progress-bar-background: var(--p-surface-neutral);
  --pc-progress-bar-indicator: var(--p-interactive-critical);
}

.Indicator {
  height: inherit;
  background-color: var(--pc-progress-bar-indicator);
  transition: transform var(--pc-progress-bar-duration) var(--p-ease);
  transform: scaleX(0);
  transform-origin: 0 50%;

  @media screen and (-ms-high-contrast: active) {
    border: progress-bar-height() solid highlight;
  }
}

.IndicatorAppearActive,
.IndicatorAppearDone {
  transform: scaleX(var(--pc-progress-bar-percent));
}

.Progress,
.Label {
  @include visually-hidden;
}