/* Links: a, [role=link] and their .secondary and .contrast variants */

a {
  --pico-text-decoration: underline;
}

/* The lists stay flat so the :where() branch keeps zero specificity */
:where(a:not([role="button"])),
[role="link"] {
  --pico-color: var(--pico-primary);
  --pico-background-color: transparent;
  --pico-underline: var(--pico-primary-underline);
  outline: none;
  background-color: var(--pico-background-color);
  color: var(--pico-color);
  text-decoration: var(--pico-text-decoration);
  text-decoration-color: var(--pico-underline);
  text-decoration-thickness: 0.0625rem;
  text-underline-offset: var(--pico-text-underline-offset);
  transition:
    background-color var(--pico-transition),
    color var(--pico-transition),
    text-decoration var(--pico-transition),
    box-shadow var(--pico-transition);
}

:where(a:not([role="button"])):is(
  [aria-current]:not([aria-current="false"]),
  :hover,
  :active,
  :focus
),
[role="link"]:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
  --pico-color: var(--pico-primary-hover);
  --pico-underline: var(--pico-primary-hover-underline);
  --pico-text-decoration: underline;
}

:where(a:not([role="button"])):focus-visible,
[role="link"]:focus-visible {
  outline: var(--pico-outline-width) solid var(--pico-primary-focus);
  outline-offset: var(--pico-outline-width);
}

:where(a:not([role="button"])).secondary,
[role="link"].secondary {
  --pico-color: var(--pico-secondary);
  --pico-underline: var(--pico-secondary-underline);
}

:where(a:not([role="button"])).secondary:is(
    [aria-current]:not([aria-current="false"]),
    :hover,
    :active,
    :focus
  ),
[role="link"].secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
  --pico-color: var(--pico-secondary-hover);
  --pico-underline: var(--pico-secondary-hover-underline);
}

:where(a:not([role="button"])).contrast,
[role="link"].contrast {
  --pico-color: var(--pico-contrast);
  --pico-underline: var(--pico-contrast-underline);
}

:where(a:not([role="button"])).contrast:is(
    [aria-current]:not([aria-current="false"]),
    :hover,
    :active,
    :focus
  ),
[role="link"].contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
  --pico-color: var(--pico-contrast-hover);
  --pico-underline: var(--pico-contrast-hover-underline);
}

a[role="button"] {
  display: inline-block;
}