@use "../utilities/convert";

// General styling for repository link icons
:root > * {
  --magiclink-email-icon: svg-load("@mdi/svg/svg/mail.svg");
  --magiclink-github-icon: svg-load("@mdi/svg/svg/github.svg");
  --magiclink-bitbucket-icon: svg-load("@mdi/svg/svg/bitbucket.svg");
  --magiclink-gitlab-icon: svg-load("@mdi/svg/svg/gitlab.svg");
  --magiclink-commit-icon: svg-load("@primer/octicons/build/svg/git-commit-24.svg");
  --magiclink-compare-icon: svg-load("@primer/octicons/build/svg/file-diff-24.svg");
  --magiclink-pull-icon: svg-load("@primer/octicons/build/svg/git-pull-request-24.svg");
  --magiclink-issue-icon: svg-load("@primer/octicons/build/svg/issue-opened-24.svg");
  --magiclink-discussion-icon: svg-load("@primer/octicons/build/svg/comment-discussion-24.svg");
}

.md-typeset {
  a[href^="mailto:"]:not(.magiclink-ignore)::before {
    mask-image: var(--magiclink-email-icon);
  }

  .magiclink-repository,
  .magiclink-compare,
  .magiclink-commit,
  .magiclink-pull,
  .magiclink-issue,
  .magiclink-discussion,
  a[href^="mailto:"] {
    &:not(.magiclink-ignore) {
      position: relative;
      padding-left: convert.px2em(22px);

      &::before {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        box-sizing: border-box;
        width: convert.px2em(20px);
        height: convert.px2em(20px);
        background-color: var(--md-typeset-a-color);
        background-size: convert.px2em(20px);
        transition: background-color 125ms;
        mask-repeat: no-repeat;
        mask-size: contain;
        content: "";
      }

      &:hover::before {
        background-color: var(--md-accent-fg-color);
      }
    }
  }
}

// Assign icons to repository links
@each $name, $icon in (
  "commit": "commit",
  "compare": "compare",
  "pull": "pull",
  "issue": "issue",
  "discussion": "discussion"
) {
  .md-typeset {
    .magiclink-#{$name}:not(.magiclink-ignore) {
      &::before {
        mask-image: var(--magiclink-#{$icon}-icon);
      }
    }
  }
}

// Assign icons to repository links
@each $name, $icon in (
  "github": "github",
  "gitlab": "gitlab",
  "bitbucket": "bitbucket"
) {
  .md-typeset {
    .magiclink-repository.magiclink-#{$name}:not(.magiclink-ignore) {
      &::before {
        mask-image: var(--magiclink-#{$icon}-icon);
      }
    }
  }
}
