@use 'sass:map';
@use 'mixins/mixins' as *;
@use 'mixins/utils' as *;
@use 'common/var' as *;

$progress-bg: var(--progress-inner-color, #ebeef5);
$progress-duration: var(--progress-duration, '2s');

@include b(progress) {
  position: relative;
  line-height: 1;
  display: flex;
  align-items: center;

  @include e(text) {
    font-size: 14px;
    color: var(--sg-text-color-regular);
    margin-left: 5px;
    min-width: 50px;
    line-height: 1;

    i {
      vertical-align: middle;
      display: block;
    }
  }

  @include e(content) {
    width: 100%;
    overflow: hidden;
  }

  @each $type in (primary, success, warning, error) {
    @include e($type) {
      background: $progress-bg;
      &::-moz-progress-bar {
        background: map.get($colors, $type, 'base');
      }
      &::-webkit-progress-bar {
        background: $progress-bg;
      }
      &::-webkit-progress-value {
        background: map.get($colors, $type, 'base');
      }
    }
  }

  @include e(custom) {
    background: $progress-bg;
    &::-moz-progress-bar {
      background: var(--custom-progress-color);
    }
    &::-webkit-progress-bar {
      background: $progress-bg;
    }
    &::-webkit-progress-value {
      background: var(--custom-progress-color);
    }
  }

  @include e(indeterminate) {
    &::-webkit-progress-bar {
      background: transparent
    }
    &::-moz-progress-bar {
      background: transparent
    }
  }

  @each $type in (primary, success, warning, error) {
    @include e(indeterminate-#{$type}) {
      &:indeterminate {
        background: $progress-bg linear-gradient(to right,map.get($colors, $type, 'base') 30%,$progress-bg 30%) top left/150% 150% no-repeat;
        animation: progress-indeterminate $progress-duration linear infinite;
      }
    }
  }

  @include e(indeterminate-custom) {
    &:indeterminate {
      background: $progress-bg linear-gradient(to right,var(--custom-progress-color) 30%,$progress-bg 30%) top left/150% 150% no-repeat;
      animation: progress-indeterminate $progress-duration linear infinite;
    }
  }

  @keyframes progress-indeterminate {
    0% {
      background-position: 200% 0;
    }
    100% {
      background-position: -200% 0;
    }
  }

  @include e(border-radius) {
    border-radius: 100px;
    &::-webkit-progress-value {
      border-radius: 100px;
    }
  }

  @include e(innerText) {
    display: inline-block;
    vertical-align: middle;
    color: $color-white;
    font-size: 12px;
    margin: 0 5px;
  }

  @include when(primary) {
    .#{$namespace}-progress__text {
      color: var(--sg-color-success);
    }
  }

  @include when(warning) {
    .#{$namespace}-progress-bar__inner {
      background-color: var(--sg-color-warning);
    }

    .#{$namespace}-progress__text {
      color: var(--sg-color-warning);
    }
  }

  @include when(exception) {
    .#{$namespace}-progress-bar__inner {
      background-color: var(--sg-color-danger);
    }

    .#{$namespace}-progress__text {
      color: var(--sg-color-danger);
    }
  }
}