/**
 * Create clickable, hoverable, focusable, colored text.
 * These classes are often used for actual `<a>` elements with `href` attributes,
 * but might prove useful for `<button>`s, as well, depending on semantics.
 *
 * @section Links
 */

/**
 * Style a link. By default, the `link` class turns text blue, and provides dark blue
 * hover and active states. Change the color with a `link--{color}` modifier.
 * Links are underlined when focused.
 *
 * @memberof Links
 * @example
 * <a href='#Links' class='link'>A link</a>
 * <a href='#Links' class='link link--red'>A red link</a>
 */
.link {
  cursor: pointer;
  color: var(--blue);
  transition: color var(--transition);
}

/**
 * Apply a darker active state to links by adding the `is-active` class.
 *
 * @memberof Links
 * @selectors .link.is-active
 * @example
 * <a href='#Links' class='link is-active'>Active</a>
 * <a href='#Links' class='link link--red is-active'>Red and active</a>
 */
.link:hover,
.link.is-active {
  color: var(--blue-dark);
}

/**
 * When a form element like `button` includes both the `link` class and the `disabled` attribute, it will be styled accordingly.
 * The disabled property has no visual effect on `a` elements.
 *
 * @memberof Links
 * @example
 * <button href='#Links' disabled class='link'>A disabled link</button>
 * <button href='#Links' disabled class='link link--red'>A disabled red link</button>
 */
.link:disabled {
  pointer-events: none;
  cursor: default;
  color: var(--disabled75);
}