@use '../../styles/tools'
@use './variables' as *

// Block
.v-progress-linear
  background: transparent
  overflow: hidden
  position: relative
  transition: $progress-linear-transition
  width: 100%

  &--rounded
    @include tools.rounded($progress-linear-border-radius)

// Elements
.v-progress-linear__background
  background: $progress-linear-background
  bottom: 0
  left: 0
  opacity: $progress-linear-background-opacity
  position: absolute
  top: 0
  transition-property: width, left, right
  transition: inherit

.v-progress-linear__content
  align-items: center
  display: flex
  height: 100%
  justify-content: center
  left: 0
  pointer-events: none
  position: absolute
  top: 0
  width: 100%

.v-progress-linear__determinate,
.v-progress-linear__indeterminate
  background: $progress-linear-background

.v-progress-linear__determinate
  height: inherit
  left: 0
  position: absolute
  transition: inherit
  transition-property: width, left, right

.v-progress-linear__indeterminate
  .long, .short
    animation-play-state: paused
    animation-duration: $progress-linear-indeterminate-animation-duration
    animation-iteration-count: infinite
    bottom: 0
    height: inherit
    left: 0
    position: absolute
    right: auto
    top: 0
    width: auto
    will-change: left, right

  .long
    animation-name: indeterminate-ltr

  .short
    animation-name: indeterminate-short-ltr

.v-progress-linear__stream
  animation: $progress-linear-stream-animation
  animation-play-state: paused
  bottom: 0
  left: auto
  opacity: $progress-linear-stream-opacity
  pointer-events: none
  position: absolute
  transition: inherit
  transition-property: width, left, right

// Modifiers
.v-progress-linear--reverse
  .v-progress-linear__background,
  .v-progress-linear__determinate,
  .v-progress-linear__content
    left: auto
    right: 0

  .v-progress-linear__indeterminate
    .long, .short
      left: auto
      right: 0

    .long
      animation-name: indeterminate-rtl

    .short
      animation-name: indeterminate-short-rtl

  .v-progress-linear__stream
    right: auto

.v-progress-linear--absolute,
.v-progress-linear--fixed
  left: 0
  z-index: 1

.v-progress-linear--absolute
  position: absolute

.v-progress-linear--fixed
  position: fixed

.v-progress-linear--rounded
  @include tools.rounded($progress-linear-border-radius)

  &.v-progress-linear--rounded-bar
    .v-progress-linear__determinate,
    .v-progress-linear__indeterminate
      border-radius: inherit

.v-progress-linear--striped
  .v-progress-linear__determinate
    animation: $progress-linear-striped-animation
    background-image: $progress-linear-stripe-gradient
    background-repeat: repeat
    background-size: $progress-linear-striped-size

.v-progress-linear--active
  .v-progress-linear__indeterminate
    .long, .short
      animation-play-state: running

  .v-progress-linear__stream
    animation-play-state: running

.v-progress-linear--rounded-bar
  .v-progress-linear__determinate,
  .v-progress-linear__indeterminate,
  .v-progress-linear__stream + .v-progress-linear__background
    @include tools.rounded($progress-linear-border-radius)

  .v-progress-linear__determinate
    border-start-start-radius: 0
    border-end-start-radius: 0

// Keyframes
@keyframes indeterminate-ltr
  0%
    left: -90%
    right: 100%
  60%
    left: -90%
    right: 100%
  100%
    left: 100%
    right: -35%

@keyframes indeterminate-rtl
  0%
    left: 100%
    right: -90%
  60%
    left: 100%
    right: -90%
  100%
    left: -35%
    right: 100%

@keyframes indeterminate-short-ltr
  0%
    left: -200%
    right: 100%
  60%
    left: 107%
    right: -8%
  100%
    left: 107%
    right: -8%

@keyframes indeterminate-short-rtl
  0%
    left: 100%
    right: -200%
  60%
    left: -8%
    right: 107%
  100%
    left: -8%
    right: 107%

@keyframes stream
  to
    transform: translateX(var(--v-progress-linear-stream-to))

@keyframes progress-linear-stripes
  0%
    background-position-x: $progress-linear-striped-size