@layer lotek {
  .lt-link {
    color: var(--lt-color-accent-text);
    font-family: inherit;
    font-size: inherit;
    line-height: var(--lt-line-height-default);
    text-decoration-line: underline;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.14em;
    text-decoration-color: currentColor;
    transition:
      color 120ms ease,
      text-decoration-color 120ms ease;
  }

  /* Before `:hover`, with the same specificity: the last one wins, and a
     visited link should also change colour under the mouse. */
  .lt-link:visited {
    color: var(--lt-color-visited-text);
  }

  .lt-link:hover {
    color: var(--lt-color-accent-text-strong);
  }

  .lt-link:focus-visible {
    outline: var(--lt-focus-ring);
    outline-offset: 2px;
    border-radius: var(--lt-spacing-0-5);
  }

  .lt-link[aria-disabled="true"] {
    color: var(--lt-color-neutral-text-subtle);
    text-decoration: none;
    cursor: not-allowed;
    pointer-events: none;
  }
}
