@digitallinguistics/design/components/Link/Link.less

The design system for Digital Linguistics (DLx) projects.

@external-link: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>';
@external-link-dark: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line></svg>';

.link {

  cursor                  : pointer;
  font-weight             : 500;
  position                : relative;
  text-underline-position : under;
  text-decoration-skip-ink: all;

  &:link {

    color: var(--blue);

    @media (prefers-color-scheme: dark) {
      color: var(--blue-4);
    }

  }

  &:visited {

    color: var(--purple);

    @media (prefers-color-scheme: dark) {
      color: var(--purple-4);
    }

  }

  &:hover {
    text-decoration-line: underline;
  }

  // use default :focus and :focus-visible styles

  &:not([href*='digitallinguistics.io'], [href^='#'], [href^='/']) {

    --icon-width  : 0.75em;
    --icon-padding: 0.125em;

    margin-inline-end: calc(var(--icon-width) + var(--icon-padding));

    &::after {

      background-image   : url('@{external-link}');
      background-repeat  : no-repeat;
      background-position: center;
      background-size    : contain;
      content            : '(external link)';
      display            : inline-block;
      filter             : opacity(0.5);
      inline-size        : var(--icon-width);
      margin-inline-start: var(--icon-padding);
      overflow           : hidden;
      position           : absolute;
      text-indent        : var(--icon-width);
      white-space        : nowrap;

      @media (prefers-color-scheme: dark) {
        background-image: url('@{external-link-dark}');
      }

    }

    &:hover::after {

      filter: opacity(1);

      @media (prefers-color-scheme: dark) {
        background-image: url('@{external-link-dark}');
      }

    }

  }

  &.subtle {
    font-weight: normal;
  }

}