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

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

      .link-text {
        @apply order-2;
      }

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

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