// This file uses uncommon vendor prefixes not covered by our compilers
// sass-lint:disable no-vendor-prefixes

.euiProgress {
  position: relative;
  overflow: hidden;
  background-color: $euiColorLightShade;
}

// Progress bars come in different sizes.
$euiProgressSizes: (
  xs: $euiSizeXS / 2,
  s: $euiSizeXS,
  m: $euiSizeS,
  l: $euiSize,
);

@each $name, $size in $euiProgressSizes {
  .euiProgress--#{$name} {
    height: $size;
  }
}

// https://css-tricks.com/html5-progress-element/
// Good resource if you need to work in here. There's some gotchas with
// dealing with cross-browser progress bars.
.euiProgress--native {
  display: block;
  width: 100%;
  appearance: none;
  border: none;

  &::-webkit-progress-bar {
    background-color: $euiColorLightShade;
  }

  &::-webkit-progress-value {
    transition: width $euiAnimSpeedNormal linear;
  }

  &::-moz-progress-bar {
    transition: width $euiAnimSpeedNormal linear;
  }
}

/**
 * An indeterminate bar has an unreliable end time. Because of a Firefox animation issue,
 * we apply this style to a <div> instead of a <progress> element.
 * See https://css-tricks.com/html5-progress-element/ for more info.
 */
.euiProgress--indeterminate {
  &:before {
    position: absolute;
    content: '';
    width: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    transform: scaleX(0) translateX(0%);
    animation: euiProgress 1s $euiAnimSlightResistance infinite;
  }
}

// Progress bars can be set to fixed or absolute.
.euiProgress--fixed {
  position: fixed;
  z-index: $euiZHeader + 1;
}

.euiProgress--absolute {
  position: absolute;
}

.euiProgress--fixed,
.euiProgress--absolute {
  top: 0;
  left: 0;
  right: 0;
  background-color: transparent;

  &.euiProgress--native {
    &::-webkit-progress-bar {
      background-color: transparent;
    }

    &::-moz-progress-bar {
      background-color: transparent;
    }
  }
}

@each $name, $color in $euiProgressColors {
  .euiProgress--#{$name} {
    &.euiProgress--native {
      &::-webkit-progress-value {
        background-color: $color;
      }

      &::-moz-progress-bar {
        background-color: $color;
      }
    }

    &.euiProgress--indeterminate {
      &:before {
        background-color: $color;
      }
    }
  }

  @if ($name != 'customColor') {
    .euiProgress__data--#{$name} {
      .euiProgress__valueText {
        color: makeHighContrastColor($color);
      }
    }
  }
}

@keyframes euiProgress {
  0% {
    transform: scaleX(1) translateX(-100%);
  }

  100% {
    transform: scaleX(1) translateX(100%);
  }
}

.euiProgress__data {
  display: flex;
  justify-content: space-between;
}

.euiProgress__label,
.euiProgress__valueText {
  @include euiText;
  @include euiFontSizeXS;
  @include euiTextTruncate;
}

.euiProgress__label {
  flex-grow: 1;

  // Only restrict the valueText if it's the sibling of the label
  // Gives width precedence to the value text forcing consumers to round their values
  + .euiProgress__valueText {
    padding-left: $euiSizeXS;
    flex-grow: 1;
    text-align: right;
    flex-shrink: 0;
  }
}

.euiProgress__valueText {
  // Tabular numbers ensure the line up nicely when right-aligned
  font-feature-settings: 'tnum' 1;
  margin-left: auto;
}

.euiProgress__data--l {
  .euiProgress__label,
  .euiProgress__valueText {
    @include euiFontSizeS;
  }
}