@layer components {
  [data-coco].coco-link {
    @apply inline-flex items-center;

    &[data-icon-position="start"] {
      .link-text {
        @apply order-2;
      }

      [data-component="icon"] {
        @apply order-1 mr-[0.4em];
      }
    }

    &[data-icon-position="end"] {
      .link-text {
        @apply order-1 mr-[0.4em];
      }

      [data-component="icon"] {
        @apply order-2;
      }
    }
  }
}