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

@include tools.layer('components')
  .v-img
    --v-theme-overlay-multiplier: 3
    z-index: 0

    &.v-img--absolute
      height: 100%
      left: 0
      overflow: hidden
      position: absolute
      top: 0
      width: 100%
      z-index: -1

    &.v-img--fit-content
      max-width: fit-content

      > .v-img__img
        position: relative

      > .v-responsive__sizer
        display: none

    &--booting .v-responsive__sizer
      transition: none

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

  .v-img__img,
  .v-img__picture,
  .v-img__gradient,
  .v-img__placeholder,
  .v-img__error
    z-index: -1

    @include tools.absolute()

  .v-img__img
    &--preload
      filter: $img-preload-filter

    &--contain
      object-fit: contain

    &--cover
      object-fit: cover

  .v-img__gradient
    background-repeat: no-repeat