.roles {
  text-shadow: none;
}

.roles span {
  transition: color .22s ease, transform .22s ease;
}

.roles span:nth-child(1):hover,
.roles span:nth-child(1):focus-visible,
.roles span:nth-child(1):active {
  color: #536345;
}

.roles span:nth-child(2):hover,
.roles span:nth-child(2):focus-visible,
.roles span:nth-child(2):active {
  color: #b67412;
}

.roles span:nth-child(3):hover,
.roles span:nth-child(3):focus-visible,
.roles span:nth-child(3):active {
  color: #234b74;
}

.roles span.is-selected {
  transform: translateX(7px);
}
.roles span:nth-child(1).is-selected { color: #536345; }
.roles span:nth-child(2).is-selected { color: #b67412; }
.roles span:nth-child(3).is-selected { color: #234b74; }