:root {
  --mws-navy: #081c36;
  --mws-midnight: #102746;
  --mws-gold: #d4a52b;
  --mws-warm-white: #f8f7f3;
  --mws-grey-700: #404040;
  --mws-grey-200: #e8e8e8;
  --mws-stroke-width: 1.25;
}

.mws-icon {
  width: 24px;
  height: 24px;
  display: inline-block;
  flex: 0 0 auto;
  color: currentColor;
  vertical-align: middle;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--mws-stroke-width);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mws-icon--gold { color: var(--mws-gold); }
.mws-icon--navy { color: var(--mws-navy); }
.mws-icon--white { color: #fff; }

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

.mws-icon-button {
  width: 44px;
  height: 44px;
  border: 1px solid var(--mws-gold);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mws-gold);
  background: transparent;
  transition: transform 150ms ease, background-color 150ms ease, color 150ms ease;
}

.mws-icon-button:hover {
  transform: translateY(-1px);
  color: var(--mws-navy);
  background: var(--mws-gold);
}