/* links */

a {
  /* scoped properties */
  --link-text-decoration: var(--hiq-link-text-decoration, none);
  --link-color: var(--hiq-link-color, var(--hiq-color-primary, hsl(210, 100%, 50%)));
  --link-hover-color: var(--hiq-link-hover-color, hsl(210, 100%, 40%));
  --link-active-color: var(--hiq-link-active-color, hsl(210, 100%, 40%));
  --link-visited-color: var(--hiq-link-visited-color, var(--hiq-link-color, var(--hiq-color-primary, hsl(210, 100%, 50%))));
  --link-visited-hover-color: var(--hiq-link-visited-hover-color, var(--hiq-link-hover-color, hsl(210, 100%, 40%)));
  --link-visited-active-color: var(--hiq-link-visited-active-color, var(--hiq-link-active-color, hsl(210, 100%, 40%)));

  background-color: transparent;
  text-decoration: var(--link-text-decoration);
  -webkit-text-decoration-skip: objects;
  color: var(--link-color);
  transition: color var(--hiq-speed, 0.1s) var(--hiq-easing, ease-out);
  cursor: pointer;

  &:hover,
  &:focus {
    color: var(--link-hover-color);
  }

  &:focus {
    outline: var(--hiq-outline-color, hsl(210, 100%, 85%)) solid var(--hiq-outline-width, 0.2rem);
  }

  &:active {
    color: var(--link-active-color);
  }

  &:visited {
    color: var(--link-visited-color);

    &:hover,
    &:focus {
      color: var(--link-visited-hover-color);
    }

    &:active {
      color: var(--link-visited-active-color);
    }
  }
}