/* Two link roles, shared by navigation, breadcrumbs, headings, and article text. */
@layer components {
  :root {
    .ui-link {
      display: inline-flex;
      font: inherit;
      align-items: center;
      gap: 0.4em;
      color: var(--accent);
      text-decoration: none;
      text-underline-offset: 0.15em;

      > .icon {
        width: 1em;
        height: 1em;
      }
      &.ui-link--heading {
        color: var(--ink);
        gap: 0.3em;

        > .icon {
          width: 0.45em;
          height: 0.45em;
        }
      }
      &:hover {
        color: var(--accent);
        text-decoration: underline;
      }
      &:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
      }
    }
    button.ui-link {
      padding: 0;
      border: 0;
      background: none;
      cursor: pointer;
    }
    .story-body a {
      color: var(--accent);
      text-decoration: none;
      text-underline-offset: 0.15em;
      &:hover { text-decoration: underline; }
      &:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    }
  }
}