$icon-easing: cubic-bezier(0, 0, 0.25, 1);
$icon-fade-duration: 120ms;
$icon-rise-duration: 240ms;
$icon-rise-offset: 10px;
$check-delay: 80ms;
$check-rise-offset: 6px;

.linear-progress-bar {
  gap: var(--wds-linear-progress-bar-value-gap, var(--wds-space-100));

  & &__bar-background,
  & &__bar-foreground {
    border-radius: var(
      --wds-linear-progress-bar-border-radius,
      var(--wds-border-radius-100)
    );
  }

  & &__progress-percentage,
  & &__suffix-indication {
    letter-spacing: var(
      --wds-linear-progress-bar-label-font-letter-spacing,
      var(--wds-font-letter-spacing-0)
    );
    line-height: var(
      --wds-linear-progress-bar-label-font-line-height,
      var(--wds-font-line-height-200)
    );
  }

  @container style(--wds-internal-theme: odeditor) {
    @supports (transition-behavior: allow-discrete) {
      &#{&}--success:not(#{&}--error) &__progress-icon {
        transition:
          opacity $icon-fade-duration $icon-easing,
          transform $icon-rise-duration $icon-easing;
      }

      &#{&}--success:not(#{&}--error) &__progress-icon > * {
        transition:
          opacity $icon-fade-duration $icon-easing $check-delay,
          transform $icon-rise-duration $icon-easing $check-delay;
      }

      @starting-style {
        &#{&}--success:not(#{&}--error) &__progress-icon {
          opacity: 0;
          transform: translateY($icon-rise-offset);
        }

        &#{&}--success:not(#{&}--error) &__progress-icon > * {
          opacity: 0;
          transform: translateY($check-rise-offset);
        }
      }

      @media (prefers-reduced-motion) {
        @starting-style {
          &#{&}--success:not(#{&}--error) &__progress-icon,
          &#{&}--success:not(#{&}--error) &__progress-icon > * {
            transform: none;
          }
        }
      }
    }
  }
}