@use '../../styles/tools'

@include tools.layer('components')
  .v-progress
    display: flex
    flex-direction: column
    gap: 8px

    > .v-progress-circular
      align-self: center

    &:has(> .v-progress-circular) > .v-progress__details > *:only-child
      margin-inline: auto

    &__label
      overflow: hidden
      text-overflow: ellipsis
      white-space: nowrap

      + .v-progress__value
        margin-inline-start: auto

    &__details
      display: flex
      align-items: flex-end
      gap: 8px

      &--location-bottom
        align-items: flex-start
        order: 1

    &--absolute
      position: absolute
      inset: 0
      align-items: center
      justify-content: center

      > .v-progress__details
        height: 0
        overflow: visible

      > .v-progress__spacer
        height: 0