a {
  text-decoration: none;

  &:any-link {
    color: var(--clr-primary-050);
  }

  &:hover,
  &:focus {
    animation-name: animated-underline;
    animation-iteration-count: 1;
    animation-duration: 0.3s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
  }

  &.lnk-inherit {
    &:any-link {
      color: inherit;
    }
  }

  &.lnk-no-animation {
    &:hover,
    &:focus {
      animation: none;
    }
  }

  &.lnk-fill-parent {
    &:before {
      content: '';
      position: absolute;
      inset: 0;
    }
  }

  &.lnk-strong {
    &:any-link {
      color: var(--clr-primary-100);
    }
  }

  &.lnk-hover-strong {
    &:hover,
    &:focus {
      color: var(--clr-primary-100);
    }
  }
}

// Utility class for linkable titles (used in card bodies)
.hash-link {
  a {
    position: absolute;
    top: 0;
    left: -14px;
    width: 14px;
    height: 100%;
    opacity: 0;
    transition: opacity 0.1s ease-in-out;

    &::before {
      content: '#';
    }

    &:hover,
    &:focus {
      opacity: 1;
      outline: 0;
    }
  }

  &:hover,
  &:focus {
    a {
      opacity: 1;
    }
  }
}

@keyframes animated-underline {
  0% {
    text-decoration-line: underline;
    text-decoration-color: transparent;
    text-underline-offset: 0;
  }
  100% {
    text-decoration-line: underline;
    text-decoration-color: inherit;
    text-underline-offset: 2px;
  }
}
