@use "./variables" as *;

.#{$component-prefix}progress {
  position: relative;
  height: $progress-height;
  overflow: hidden;
  background: $progress-background-color;
  border-radius: $progress-border-radius;

  &__portion {
    position: absolute;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    overflow: hidden;
    font-size: $progress-portion-font-size;
    color: $progress-portion-color;
    text-align: center;
    word-break: keep-all;
  }

  &--primary {
    .#{$component-prefix}progress {
      &__portion {
        background: $progress-portion-primary-background-color;
      }
    }
  }

  &--info {
    .#{$component-prefix}progress {
      &__portion {
        background: $progress-portion-info-background-color;
      }
    }
  }

  &--success {
    .#{$component-prefix}progress {
      &__portion {
        background: $progress-portion-success-background-color;
      }
    }
  }

  &--warning {
    .#{$component-prefix}progress {
      &__portion {
        background: $progress-portion-warning-background-color;
      }
    }
  }

  &--danger {
    .#{$component-prefix}progress {
      &__portion {
        background: $progress-portion-danger-background-color;
      }
    }
  }

  &--inactive {
    .#{$component-prefix}progress {
      &__portion {
        background: $progress-inactive-background-color;
      }
    }
  }

  &--striped {
    .#{$component-prefix}progress {
      &__portion {
        background-image: linear-gradient(
            45deg,
            hsla(0, 0%, 100%, .15) 25%,
            transparent 0,
            transparent 50%,
            hsla(0, 0%, 100%, .15) 0,
            hsla(0, 0%, 100%, .15) 75%,
            transparent 0, transparent);
        background-size: 1rem 1rem;
      }
    }
  }

  &--animated {
    .#{$component-prefix}progress {
      &__portion {
        animation: #{$component-prefix}progress-stripes 1s linear infinite;
      }
    }

    @keyframes taroify-progress-stripes {
      0% {
        background-position-x: 0;
      }

      100% {
        background-position-x: 24px * $hd;
      }
    }
  }
}