@import '../../../styles/mixins'
@import '../../../styles/colors'
@import 'root'

.vs-avatar-content
  border-radius: 35%
  z-index: 1
  width: 44px
  height: 44px
  position: relative
  transition: all .25s ease
  user-select: none
  &.vs-change-color-badge
    .vs-avatar__badge
      .vs-avatar__points__point
        background: vs-color('background')
  &.vs-change-color
    &:hover
      .vs-avatar
        box-shadow: inset 0px 0px 40px 0px rgba(0,0,0,.1)
  &:hover
    .vs-avatar
      box-shadow: inset 0px 0px 40px 0px rgba(0,0,0,.04)
    img
      transform: scale(1.1)
  &--hasIcons
    margin-right: 20px
  &--hidden
    display: none
  &--circle
    border-radius: 50% !important
    .vs-avatar__badge
      right: -2px
      bottom: -2px
      &.top-right
        top: -2px
        bottom: auto
      &.top-left
        top: -2px
        left: -2px
        bottom: auto
        right: auto
      &.bottom-left
        left: -2px
        right: auto
  &--square
    border-radius: 0% !important
  &.history
    &--gradient
      &:after
        background-image: linear-gradient(40deg, #f99b4a 0%, #df376b 74%, #c52d91 74%) !important
    .vs-avatar
      width: calc(100% - 4px)
      height: calc(100% - 4px)
      border: 2px solid vs-color('background')
      margin: 2px
    &:after
      content: ''
      position: absolute
      top: 0px
      left: 0px
      width: 100%
      height: 100%
      border-radius: inherit
      background-color: #FFE53B
      z-index: -1
      background: vs-color('color')
  &.vs-change-color
    .vs-avatar
      color: vs-color('background')
    .vs-avatar__points
      .vs-avatar__points__point
        background: vs-color('background')
.vs-avatar
  background: vs-color('color')
  color: #fff
  overflow: hidden
  display: flex
  align-items: center
  justify-content: center
  color: vs-color('text')
  border-radius: inherit
  width: 100%
  height: 100%
  transition: all .25s ease
  box-shadow: inset 0px 0px 0px 0px rgba(0,0,0,.05)
  i
    font-size: 1.4rem
  img
    width: 100%
    height: auto
    display: block
    transition: all .25s ease
    border-radius: inherit
  &__loading
    position: absolute
    width: 100%
    top: 0px
    left: 0px
    background: rgba(0,0,0,.5)
    z-index: 100
    height: 100%
    border-radius: inherit
    display: flex
    align-items: center
    justify-content: center
    &__animate
      height: 60%
      width: 60%
      border-radius: 50%
      display: flex
      align-items: center
      justify-content: center
      position: relative
      &:after
        box-sizing: border-box
        position: absolute
        width: 100%
        height: 100%
        border: 2px solid #fff
        border-radius: inherit
        border-top: 2px solid transparent
        border-left: 2px solid transparent
        border-right: 2px solid transparent
        animation: rotateInputLoading .8s ease infinite
        top: 0px
        content: ''
      &:before
        box-sizing: border-box
        top: 0px
        position: absolute
        width: 100%
        height: 100%
        border: 2px dashed #fff
        border-radius: inherit
        border-top: 2px solid transparent
        border-left: 2px solid transparent
        border-right: 2px solid transparent
        animation: rotateInputLoading .8s linear infinite
        opacity: .2
        content: ''
  &--letter--3
    font-size: .9rem
  &--letter--4
    font-size: .8rem
  &--letter--5
    font-size: .7rem
  &--letter--6
    font-size: .6rem
  &__badge
    position: absolute
    width: 13px
    height: 13px
    background: vs-color('badge')
    border-radius: 50%
    border: 2px solid vs-color('background')
    right: -4px
    bottom: -4px
    font-size: .6rem
    font-weight: bold
    z-index: 200
    color: vs-color('text')
    &.isSlot, &.writing
      width: auto
      height: auto
      border-radius: 7px
      min-width: 18px
      display: flex
      align-items: center
      justify-content: center
      color: vs-color('background')
      line-height: .9rem
      padding: 0px 3px
      min-height: 18px
    &.top-right
      top: -4px
      bottom: auto
    &.top-left
      top: -4px
      left: -4px
      bottom: auto
      right: auto
    &.bottom-left
      left: -4px
      right: auto

  &__points
    position: relative
    display: flex
    align-items: center
    justify-content: center
    &__point
      width: 5px
      height: 5px
      background: vs-color('text')
      margin: 0px 2px
      border-radius: 50%
      &:nth-child(1)
        animation: point 1.2s ease infinite
      &:nth-child(2)
        animation: point 1.2s ease infinite .4s
      &:nth-child(3)
        animation: point 1.2s ease infinite .8s

  &__latest
    background: rgba(0,0,0,.5)
    top: 0px
    left: 0px
    width: 100%
    height: 100%
    position: absolute
    z-index: 300
    border-radius: inherit
    display: flex
    align-items: center
    justify-content: center
    color: #fff
    font-weight: 600
    user-select: none

  &__icons
    position: absolute
    width: auto
    height: auto
    min-height: 90%
    background: vs-color('gray-3')
    top: 50%
    transform: translate(0, -50%)
    right: -20px
    padding: 3px
    padding-left: 5px
    display: flex
    align-items: flex-end
    justify-content: center
    flex-direction: column
    z-index: -1
    border-radius: 5px 5px 5px 5px
    font-size: 1rem
    i
      cursor: pointer
      transition: all .25s ease
      &:hover
        opacity: .7

@keyframes point
  0%
    opacity: 1
  50%
    opacity: .4
    transform: scale(.5)
  100%
    opacity: 1