@kanton-basel-stadt/designsystem/dist/assets/css/components/typography/link.css

Unplugin to install the digital design system of the canton of Basel-Stadt

@layer components {
  .link {
    @apply font-bold inline-grid gap-x-10 !leading-tight;
    @apply text-blue-900;
    @apply visited:text-blue-900 focus:outline-none focus-visible:bg-blue-50 focus-visible:outline-blue-600;
    grid-auto-flow: column;
    word-break: break-word;

    svg {
      @apply w-[1em] h-[1em];
    }

    &:hover,
    &:focus-visible,
    .group\/link:hover & {
      @apply text-blue-600 visited:text-purple-900;
    }

    &:active,
    .group\/link:active & {
      @apply text-blue-700;
    }

    &.is-inverted {
      @apply text-white;
      @apply hover:text-white/80;
      @apply active:text-white;
    }
  }

  .link.with-icon {
    /* Force a column layout. */
    grid-template-columns: 15px auto;
  }

  /* Default icon. */
  .link.with-icon:before,
  .group\/link .link.with-icon:before {
    @apply font-bold select-none content-arrow-east;
  }

  .link.with-icon:hover:before,
  .group\/link:hover .link.with-icon:before {
    @apply animate-jump-x;
  }

  /* External. */
  .link.with-icon[href^='http']:before,
  .group\/link[href^='http'] .link.with-icon:before {
    @apply !content-arrow-north-east;
  }

  .link.with-icon[href^='http']:hover:before,
  .group\/link[href^='http']:hover .link.with-icon:before {
    @apply animate-jump-xy;
  }

  /* Anchor. */
  .link.with-icon[href^='#']:before,
  .group\/link[href^='#'] .link.with-icon:before {
    @apply content-arrow-south;
  }

  .link.with-icon[href^='#']:hover:before,
  .group\/link[href^='#']:hover .link.with-icon:before {
    @apply animate-jump-y;
  }

  /* Link with downloadable file */
  .link.with-icon[href*='.pdf'],
  .link.with-icon[href*='.docx'],
  .link.with-icon[href*='.qdf'],
  .group\/link[href*='.pdf'] .link.with-icon,
  .group\/link[href*='.docx'] .link.with-icon,
  .group\/link[href*='.qdf'] .link.with-icon {
    &:before {
      @apply col-start-1 row-start-1 !content-arrow-south;
    }

    &:after {
      @apply content-underscore-long;
      @apply col-start-1 row-start-1 translate-y-[0.5em] translate-x-[0.1em];
    }
  }

  .link.with-icon[href*='.pdf']:hover:before,
  .link.with-icon[href*='.docx']:hover:before,
  .link.with-icon[href*='.qdf']:hover:before,
  .group\/link[href*='.pdf']:hover .link.with-icon:before,
  .group\/link[href*='.docx']:hover .link.with-icon:before,
  .group\/link[href*='.qdf']:hover .link.with-icon:before {
    @apply animate-jump-y;
  }

  .inline-link {
    @apply text-blue-700;
    @apply underline underline-offset-[5px] decoration-gray-300 decoration-[1px];
    @apply hover:text-blue-900 hover:decoration-blue-900;
    @apply active:text-blue-700 active:decoration-blue-700;
    @apply visited:text-purple-600 visited:decoration-purple-600;
  }
}