/* Repmation icon system — sizing, colour and stroke weight.
   Every icon inherits currentColor and this stroke-width. */

.icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  color: #171513;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Heavier weight for 16px UI or dark backgrounds where 1.5 thins out. */
.icon--bold { stroke-width: 2 }

.icon--16 { width: 16px; height: 16px }
.icon--20 { width: 20px; height: 20px }
.icon--24 { width: 24px; height: 24px }
.icon--32 { width: 32px; height: 32px }

/* Multicolor brand marks stay unmodified and unoutlined. */
.icon.google-g { stroke: none; stroke-width: 0; filter: none }

/* Keep the Google mark pristine on QR experiences. Emphasis belongs to the
   Repmation-owned tile around the mark rather than the mark itself. */
html[data-qr-theme] body .google-action .icon.google-g {
  stroke: none;
  stroke-width: 0;
  filter: none;
}

/* Give the Google action a little more visual weight without altering the mark. */
html[data-qr-theme] body .google-action .ic {
  border:2px solid var(--accent);
  box-shadow:none;
}

.icon--accent { color: #F54703 }
.icon--inverse { color: #FFFFFF }

.nav-item[aria-current] .icon { color: #F54703 }