@use "../variables/colorsCssVariables";

@use "colors.scss" as *;
@use "utilities.scss" as *;

$ds-link-list: "list";
$ds-link-paragraph: "paragraph";
$ds-link-article-body: "article-body";

@mixin ds-link($type: paragraph) {
  &:focus-visible {
    outline-color: $ds-color-border-primary;
  }

  & {
    color: inherit;
    @include ds-underline(2px, 1px);
    @if ($type == $ds-link-list) {
      text-decoration-line: none;
      &:hover {
        text-decoration-line: underline;
      }
    } @else if ($type == $ds-link-paragraph) {
      text-decoration-line: underline;
      &:hover {
        text-decoration-line: none;
      }
      &:visited {
        color: $ds-color-text-primary-subtle;
      }
    } @else if ($type == $ds-link-article-body) {
      text-decoration-line: underline;
      color: $ds-color-text-body-link;
      &:hover {
        text-decoration-line: none;
      }
      &:visited {
        color: $ds-color-text-body-link-visited;
      }
    }
    @content;
  }
}

@mixin ds-underline($offset: 2px, $thickness: 2px) {
  text-decoration-line: underline;
  text-decoration-thickness: ds-px-to-rem($thickness);
  text-underline-offset: ds-px-to-rem($offset);
}