@layer components {
  [data-coco][data-component="icon"] {
    @apply flex flex-none w-6 h-6 text-current overflow-hidden;

    svg {
      @apply icon w-full h-full;
    }

    /* Styles */

    &[data-icon]:not([data-style="fill"]):not([data-style="custom"]) svg {
      @apply icon-stroke;
    }

    &[data-icon][data-style="fill"] svg {
      @apply icon-fill;
    }

    /* Sizes */

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

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

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

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

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

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

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

    /* Motion */

    &[data-spin="true"] svg {
      @apply animate-spin;
    }

    &[data-spin="reverse"] svg {
      @apply animate-spin-reverse;
    }
  }
}