avatar.pcss

.avatar {
  @apply inline-block text-center rounded-full;

  img {
    @apply rounded-full block w-full;
  }
}

@responsive {
  .avatar--2xs {
    @apply w-8;
  }
  .avatar--xs {
    @apply w-12;
  }
  .avatar--sm {
    @apply w-20;
  }
  .avatar--md {
    @apply w-24;
  }
  .avatar--lg {
    @apply w-28;
  }
  .avatar--xl {
    @apply w-36;
  }
  .avatar--2xl {
    @apply w-48;
  }
  .avatar--3xl {
    @apply w-56;
  }
}

.avatar--bordered {
  img {
    @apply border-white border-8;
  }
}

.avatar--outlined {
  @apply border-grey-100 border;
}