.vs-icon
  color: inherit
  text-align: center
  font-size: 1rem
  &.large
    font-size: 3.125rem;
    width: 3.125rem;
    height: 3.125rem;
  &.medium
    font-size: 2.31rem;
    width: 2.31rem;
    height: 2.31rem;
  &.small
    font-size: 1.5rem;
    width: 1.5rem;
    height: 1.5rem;

.vs-icon-bg
  width: 1rem;
  height: 1rem;
  &.bg-large
    width: 3.125rem;
    height: 3.125rem;
  &.bg-medium
    width: 2.31rem;
    height: 2.31rem;
  &.bg-small
    width: 1.5rem;
    height: 1.5rem;

.round
  border-radius: 50%;

for colorx, i in $vs-colors
  .con-vs-icon-bg-{colorx}
    background: getColor(colorx, 1)
  .dot-count-{colorx}
    background: getColor(colorx, 1)
  .vs-icon-{colorx}
    color: getColor(colorx, 1)