@layer odd.reset, odd.tokens, odd.base, odd.layout, odd.components, odd.utilities;

@layer odd.components {
  .odd-link {
    color: var(--odd-color-link);
    font-family: var(--odd-type-ui-family);
    font-size: var(--odd-type-ui-size);
    font-weight: var(--odd-type-ui-weight);
    line-height: var(--odd-type-ui-line-height);
    text-decoration-line: none;
    text-underline-offset: 0.2em;
    border-radius: var(--odd-radius-sm);
  }
  .odd-link:hover,
  .odd-link:focus-visible {
    text-decoration-line: underline;
  }
  .odd-link:focus-visible {
    outline: var(--odd-focus-width) solid var(--odd-color-focus-ring);
    outline-offset: var(--odd-focus-offset);
  }
  p .odd-link,
  li .odd-link {
    font: inherit;
    text-decoration-line: underline;
  }
}