@layer components {
  [data-coco][data-component="avatar"] {
    @apply block rounded-full overflow-hidden flex-none aspect-square;

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

    &[data-size="sm"] {
      @apply w-5 h-5;
    }

    &[data-size="md"] {
      @apply w-6 h-6;
    }

    &[data-size="lg"] {
      @apply w-7 h-7;
    }

    &[data-size="xl"] {
      @apply w-8 h-8;
    }

    &[data-size="full"] {
      @apply w-full h-full;
    }
  }
}