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

@property --v-progress-indeterminate-long-left
  syntax: "<percentage>"
  inherits: true
  initial-value: 0%
@property --v-progress-indeterminate-long-right
  syntax: "<percentage>"
  inherits: true
  initial-value: 0%
@property --v-progress-indeterminate-short-left
  syntax: "<percentage>"
  inherits: true
  initial-value: 0%
@property --v-progress-indeterminate-short-right
  syntax: "<percentage>"
  inherits: true
  initial-value: 0%

@include tools.layer('components')
  // Block
  .v-progress-linear
    background: transparent
    overflow: hidden
    position: relative
    transition: $progress-linear-transition, mask-size 0s
    width: 100%

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

    &--variant-split.v-progress-linear--rounded
      .v-progress-linear__determinate,
      .v-progress-linear__background,
      .v-progress-linear__buffer
        @include tools.rounded($progress-linear-border-radius)

    @media (forced-colors: active)
      border: thin solid buttontext

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

  @include tools.layer('trumps')
    @media (forced-colors: active)
      .v-progress-linear__buffer
        background-color: highlight
        opacity: .5

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

  .v-progress-linear--clickable
    .v-progress-linear__content
      pointer-events: none

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

    @include tools.layer('trumps')
      @media (forced-colors: active)
        background-color: highlight

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

  .v-progress-linear__indeterminate
    animation-play-state: paused
    animation-duration: $progress-linear-indeterminate-animation-duration
    animation-iteration-count: infinite
    animation-name: indeterminate-ltr

    .long, .short
      bottom: 0
      height: inherit
      position: absolute
      top: 0
      width: auto

    .long
      left: var(--v-progress-indeterminate-long-left)
      right: var(--v-progress-indeterminate-long-right)

    .short
      left: var(--v-progress-indeterminate-short-left)
      right: var(--v-progress-indeterminate-short-right)

    > .v-progress-linear__background
      height: 100%
      border-radius: inherit
      transition: none

      &:nth-child(1)
        left: 0
        width: clamp(0%, calc(var(--v-progress-indeterminate-long-left) - var(--v-progress-chunk-gap)), 100%)

      &:nth-child(2)
        left: clamp(0%, calc(100% - var(--v-progress-indeterminate-long-right) + var(--v-progress-chunk-gap)), 100%)
        width: clamp(0%, calc(var(--v-progress-indeterminate-short-left) - var(--v-progress-chunk-gap)), 100%)

      &:nth-child(3)
        right: 0
        left: unset
        width: clamp(0%, calc(var(--v-progress-indeterminate-short-right) - var(--v-progress-chunk-gap)), 100%)

  .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
      animation-name: indeterminate-rtl

      > .v-progress-linear__background
        &:nth-child(1)
          left: unset
          right: 0
          width: clamp(0%, calc(var(--v-progress-indeterminate-long-right) - var(--v-progress-chunk-gap)), 100%)

        &:nth-child(2)
          left: unset
          right: clamp(0%, calc(100% - var(--v-progress-indeterminate-long-left) + var(--v-progress-chunk-gap)), 100%)
          width: clamp(0%, calc(var(--v-progress-indeterminate-short-right) - var(--v-progress-chunk-gap)), 100%)

        &:nth-child(3)
          right: unset
          left: 0
          width: clamp(0%, calc(var(--v-progress-indeterminate-short-left) - var(--v-progress-chunk-gap)), 100%)

    .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
      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%
      --v-progress-indeterminate-long-left: -90%
      --v-progress-indeterminate-long-right: 107%
      --v-progress-indeterminate-short-left: -200%
      --v-progress-indeterminate-short-right: 107%
    60%
      --v-progress-indeterminate-long-left: -90%
      --v-progress-indeterminate-long-right: 107%
      --v-progress-indeterminate-short-left: 107%
      --v-progress-indeterminate-short-right: -8%
    100%
      --v-progress-indeterminate-long-left: 107%
      --v-progress-indeterminate-long-right: -35%
      --v-progress-indeterminate-short-left: 107%
      --v-progress-indeterminate-short-right: -8%

  @keyframes indeterminate-rtl
    0%
      --v-progress-indeterminate-long-left: 107%
      --v-progress-indeterminate-long-right: -90%
      --v-progress-indeterminate-short-left: 107%
      --v-progress-indeterminate-short-right: -200%
    60%
      --v-progress-indeterminate-long-left: 107%
      --v-progress-indeterminate-long-right: -90%
      --v-progress-indeterminate-short-left: -8%
      --v-progress-indeterminate-short-right: 107%
    100%
      --v-progress-indeterminate-long-left: -35%
      --v-progress-indeterminate-long-right: 107%
      --v-progress-indeterminate-short-left: -8%
      --v-progress-indeterminate-short-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