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

@include tools.layer('components')
  .v-avatar
    flex: none
    align-items: center
    display: inline-flex
    justify-content: center
    line-height: $avatar-line-height
    overflow: hidden
    position: relative
    text-align: center
    transition: 0.2s settings.$standard-easing
    transition-property: width, height
    vertical-align: $avatar-vertical-align

    @include avatar-sizes($avatar-sizes)
    @include avatar-density(('height', 'width'), $avatar-density)
    @include tools.border($avatar-border...)
    @include tools.rounded($avatar-border-radius)
    @include tools.variant($avatar-variants...)

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

    &--start
      margin-inline-end: $avatar-margin-start

    &--end
      margin-inline-start: $avatar-margin-end

    .v-img
      height: 100%
      width: 100%