viewy 2.0.6

A web UI toolkit that combine the advantages of a design system and an ui library.
.avatar {
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  border-radius: 50%;
  $font-size: 0.35;

  &--normal {
    width: sp(35);
    height: sp(35);
    line-height: sp(35);
    font-size: sp(35) * $font-size;
    text-align: center;
  }

  &--large {
    width: sp(50);
    height: sp(50);
    line-height: sp(50);
    font-size: sp(50) * $font-size;
    text-align: center;
  }

  &--x-large {
    width: sp(80);
    height: sp(80);
    line-height: sp(80);
    font-size: sp(80) * $font-size;
    text-align: center;
  }
  &.clickable:hover {
    background: var(--color-accent-lighter);
  }
}