/*!
 * SPDX-License-Identifier: Apache-2.0
 *
 * The OpenSearch Contributors require contributions made to
 * this file be licensed under the Apache-2.0 license or a
 * compatible open source license.
 *
 * Modifications Copyright OpenSearch Contributors. See
 * GitHub history for details.
 */

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

.ouiProgress {
  position: relative;
  overflow: hidden;
  background-color: $ouiColorLightShade;
}

// Progress bars come in different sizes.
$ouiProgressSizes: (
  xs: calc($ouiSizeXS / 2),
  s: $ouiSizeXS,
  m: $ouiSizeS,
  l: $ouiSize,
);

@each $name, $size in $ouiProgressSizes {
  .ouiProgress--#{$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.
.ouiProgress--native {
  display: block;
  width: 100%;
  appearance: none;
  border: none;

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

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

  &::-moz-progress-bar {
    transition: width $ouiAnimSpeedNormal 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.
 */
.ouiProgress--indeterminate {
  &:before {
    position: absolute;
    content: '';
    width: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    transform: scaleX(0) translateX(0%);
    animation: ouiProgress 1s $ouiAnimSlightResistance infinite;
  }
}

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

.ouiProgress--absolute {
  position: absolute;
}

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

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

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

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

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

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

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

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

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

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

.ouiProgress__label,
.ouiProgress__valueText {
  @include ouiText;
  @include ouiFontSizeXS;
  @include ouiTextTruncate;
}

.ouiProgress__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
  + .ouiProgress__valueText {
    padding-left: $ouiSizeXS;
    flex-grow: 1;
    text-align: right;
    flex-shrink: 0;
  }
}

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

.ouiProgress__data--l {
  .ouiProgress__label,
  .ouiProgress__valueText {
    @include ouiFontSizeS;
  }
}


/* OUI -> EUI Aliases */
$euiProgressSizes: $ouiProgressSizes;
/* End of Aliases */