:root {
  --#{$CSS_VAR_PFX}progress-bg-color: var(--#{$CSS_VAR_PFX}bg-color-dark);
  --#{$CSS_VAR_PFX}progress-txt-color: var(--#{$CSS_VAR_PFX}txt-color-inverted);
  --#{$CSS_VAR_PFX}progress-border-color: var(--#{$CSS_VAR_PFX}bg-color-darker);
  --#{$CSS_VAR_PFX}progress-animation-duration: 2.5s;
}

.progress {
  --#{$CSS_VAR_PFX}local-txt-color: var(--#{$CSS_VAR_PFX}progress-txt-color);
  overflow: hidden;
  display: block;
  width: 100%;
  margin: 0.5em 0;
  color: var(--#{$CSS_VAR_PFX}local-txt-color);
  background: var(--#{$CSS_VAR_PFX}progress-bg-color);
  border-radius: var(--#{$CSS_VAR_PFX}border-radius);

  &.bordered {
    border: var(--#{$CSS_VAR_PFX}border-width) solid var(--#{$CSS_VAR_PFX}progress-border-color);
  }

  .progress-bar {
    overflow: hidden;
    position: relative;
    font-size: 0.75em;
    min-height: 1.4em;
    padding: 0.125em 0.5em;
    color: var(--#{$CSS_VAR_PFX}local-txt-color);
    background: var(--#{$CSS_VAR_PFX}color-accent-primary);
    border-radius: var(--#{$CSS_VAR_PFX}border-radius);
    will-change: width, transform;
    transition: width var(--#{$CSS_VAR_PFX}long-transition), transform var(--#{$CSS_VAR_PFX}long-transition),
      background var(--#{$CSS_VAR_PFX}simple-transition);

    &:after {
      content: " ";
      position: absolute;
      top: 30%;
      left: 0;
      right: 0;
      width: min(90%, calc(100% - 2em));
      height: 0.32em;
      margin: 0 auto;
      background: currentColor;
      border-radius: var(--#{$CSS_VAR_PFX}border-radius);
      opacity: 0.2;
    }
  }

  &.processing {
    cursor: wait;

    .progress-bar {
      &:before {
        content: " ";
        position: absolute;
        top: 0;
        inset-inline-start: 0;
        width: 100%;
        // 110% because of FireFox bug
        height: 110%;
        background: var(--#{$CSS_VAR_PFX}color-accent-light);
        // mix-blend-mode: color-dodge;
        animation: flatify-processing linear var(--#{$CSS_VAR_PFX}progress-animation-duration) infinite;
      }
    }
  }
}

:dir(ltr) .progress.processing .progress-bar:before,
.ltr .progress.processing .progress-bar:before {
  transform-origin: left;
}

:dir(rtl) .progress.processing .progress-bar:before,
.rtl .progress.processing .progress-bar:before {
  transform-origin: right;
}