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

@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)

    @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
    .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

    .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