/*
 * Icons
 *
 * Index
 * - Sizes
 * - Colors
 * - Rotation
 */

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

.icon-lg {
  width: 2rem;
  height: 2rem;
}

.icon-md {
  width: 1.5rem;
  height: 1.5rem;
}

.icon-sm {
  width: 1.25rem;
  height: 1.25rem;
}

.icon-3x {
  width: 3rem;
  height: 3rem;
}

.icon-4x {
  width: 4rem;
  height: 4rem;
}

/* COLORS
 -------------------- */

.icon-gray {
  fill: var(--road-icon);
}

.icon-secondary {
  fill: var(--road-icon-variant);
}

.icon-white {
  fill: var(--road-icon-inverse);
}

/* ROTATION
 -------------------- */

.rotate-90 {
  transform: rotate(90deg);
}

.rotate-180 {
  transform: rotate(180deg);
}

.rotate-270 {
  transform: rotate(270deg);
}