@import '../bootstrap'

.v-progress-circular
  position: relative
  display: inline-flex
  vertical-align: middle

  svg
    width: 100%
    height: 100%
    margin: auto
    position: absolute
    top: 0
    bottom: 0
    left: 0
    right: 0
    z-index: 0

  &--indeterminate
    svg
      animation: $progress-circular-rotate-animation
      transform-origin: center center
      transition: $process-circular-intermediate-svg-transition

    .v-progress-circular__overlay
      animation: $progress-circular-rotate-dash
      stroke-linecap: round
      stroke-dasharray: 80,200
      stroke-dashoffset: 0px

  &__underlay
    stroke: $progress-circular-underlay-stroke
    z-index: 1

  &__overlay
    stroke: currentColor
    z-index: 2
    transition: $progress-circular-overlay-transition

  &__info
    position: absolute
    top: 50%
    left: 50%
    transform: translate(-50%, -50%)

  @keyframes progress-circular-dash
    0%
      stroke-dasharray: 1,200
      stroke-dashoffset: 0px

    50%
      stroke-dasharray: 100,200
      stroke-dashoffset: -15px

    100%
      stroke-dasharray: 100,200
      stroke-dashoffset: -125px

  @keyframes progress-circular-rotate
    100%
      transform: rotate(360deg)