.ff-avatar {
    border-radius: 50%;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--ff-avatar-background-color);
  
    &--small {
      width: 32px;
      height: 32px;
    }
  
    &--medium {
      width: 48px;
      height: 48px;
    }
  
    &--large {
      width: 64px;
      height: 64px;
    }
    .ff-avatar-label {
      font-weight: bold;
      text-align: center;
    }
  }