/*
 * Link
 *
 * Index
 * - Link
 * - Default
 * - Sizes
 * - Icon
 *
 */

.link {
  color: var(--road-link-primary);
  text-decoration: underline;
  outline: 0;
  transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

/**
 * Hover state
 */

.link:hover,
.link:focus {
  text-decoration: none;
}

/* DEFAULT
 -------------------- */

.link-default {
  color: var(--road-link-secondary);
}

/* WHITE
 -------------------- */

.link-white {
  color: var(--road-link-inverse);
}

/* SIZES
 -------------------- */

.link-md {
  font-size: var(--road-link-medium);
}

.link-sm {
  font-size: var(--road-link-small);
}

/* ICON
 -------------------- */

.link .icon-sm {
  fill: currentColor;
}