.avatar {
  @apply
    cursor-pointer
    flex
    font-sans
    items-center
    m-2
    relative;

  transition: width 75ms ease-in-out, height 75ms ease-in-out;

  /* TODO: These were all only needed when imported in Aircam Web. Figure out why and remove these styles. */
  box-sizing: border-box;
  vertical-align: top;
}

.avatar--expanded {
  @apply pr-2;
}

.avatar--with-badge {}
.avatar--with-editable .btn {
  min-width: unset;
}

.avatar--empty {
  @apply
    border
    border-grey-light
    bg-white;
}

.avatar--with-rim {
  @apply
    border
    border-grey-light;
}

.avatar--with-sprite {}

.avatar--medium {
  @apply w-16 h-16;
}

.avatar--large {
  @apply w-32 h-32 bg-grey-light;
}

.avatar--large.avatar--empty {
  @apply shadow-none border-none;
}

.avatar__sprite {
  @apply
    block
    h-full
    p-2
    relative
    w-full
    text-blue;

  margin-left: 1px;
  min-width: 2.5rem;
  min-height: 2.5rem;
}

.avatar__sprite svg {
  fill: currentColor;
}

.avatar--large .avatar__sprite {
  @apply p-6;
}

.avatar__sprite,
.avatar__character {
  @apply w-full h-full;
}

.avatar__character {
  @apply
    antialiased
    flex-center
    font-semibold
    text-white
    text-xl;

  min-width: 3rem;
  min-height: 3rem;
}

.avatar--empty .avatar__character {
  @apply text-blue;
}

.avatar,
.avatar__img-container,
.avatar__img {
  @apply rounded-full;
} 

.avatar--with-rim .avatar__img-container {
  @apply border-3 border-white;
}

.avatar__img-container {
  @apply
    block
    h-12
    relative
    w-12;

  overflow: hidden;
  flex-shrink: 0;
}

.avatar__badge {
  @apply absolute;
  margin-bottom: -.35rem;
  bottom: -3px;
}

.avatar--expanded .avatar__badge {
  left: 1rem;
}

.avatar:not(.avatar--expanded) .avatar__badge {
  left: 1.5rem;
}

.avatar__badge--with-icon:not(.avatar__badge--with-icon-only) {
  @apply -mr-3;
}


.avatar__expanded-name {
  @apply font-semibold mb-1;
}

.avatar__expanded-stats .stats .stats__stat:first-child {
  @apply pl-0;
}

/**
 * Animation
 */
.avatar .avatar__expanded {
  /*transition: margin 250ms ease-in-out;*/

  /*transform: translate3d(0,0,0);*/
  /*will-change: width, margin;*/

  overflow: hidden;
}

/** closed */
.avatar:not(.avatar--expanded) .avatar__expanded {
  width: 0;
  margin-left: 0;
}

/** open */
.avatar.avatar--expanded .avatar__expanded {
  @apply ml-4;
  width: 100%;
}