.link-external {
    @apply inline-flex no-underline text-red;

    .text-before {
        @apply text-black;
    }

    .icon {
        @apply self-center;
    }

    .icon-before + .text,
    .text-before + .text,
    .icon-before + .text-before,
    .text + .icon {
        @apply ml-2;
    }

    &:hover {
        .text {
            @apply underline;
        }
    }
}