@layer components.root {
  :where(.link) {
    color: var(--primary);
    cursor: pointer;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--primary);
    text-underline-offset: 2px;

    &[href] {
      &:hover,
      &:focus-visible {
        color: var(--primary-light);
      }
    }

    @supports (-moz-appearance: none) {
      text-underline-offset: 2px;
    }
  }
}